{"id":256,"date":"2019-08-26T09:06:23","date_gmt":"2019-08-26T07:06:23","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/08\/26\/fredriks-front-end-quick-read-1\/"},"modified":"2020-06-18T07:16:56","modified_gmt":"2020-06-18T07:16:56","slug":"fredriks-front-end-quick-read-1","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/","title":{"rendered":"Fredrik\u2019s front-end quick read #1"},"content":{"rendered":"<figure><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/739e5-1co4sbvedak9g5juphi1v0q.jpeg\"><\/figure>\n<p>This is the first in, what will hopefully be, a weekly update on news, trends, tools, frameworks and.. well everything related to front-end development. This is a first test-structure and my idea is simple:<\/p>\n<h3>No more than five&nbsp;articles<\/h3>\n<p>I want this to be a quick read, not a chore. It also requires me to cherry-pick articles. From time to time i might focus on a specific topic like web performance, design-to-code, accessibility\u2026 you get my point.<\/p>\n<hr>\n<p><strong>Content:<\/strong><\/p>\n<ul>\n<li>Microsoft Edge Beta<\/li>\n<li>Useful Pens for Everyday Front End Development<\/li>\n<li>CSS-in-JS<\/li>\n<li>The Best VS Code Extension List for Full Stack Developers<\/li>\n<li>Sketch2React<\/li>\n<\/ul>\n<hr>\n<h3>1. Microsoft Edge&nbsp;Beta<\/h3>\n<p><a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/\">https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/<\/a><\/p>\n<p>The browser feels fast and welcoming. Look-and-feel reminds me a lot of Chrome (at least when I\u2019m running it in dark mode on MacOS), but at the same time it still keeps some \u201cair\u201d of Microsoft.<\/p>\n<p>When Edge switches to Blink (the Google-driven fork of Webkit) it will make many developers sleep a bit better at night. I\u2019m exited about this and at the same time a bit scared. As of now, we have Firefox (running Geko engine) and more or less the rest is running on Blink. iOS users have the possibility to use Safari, but guess what? It\u2019s based on Webkit. <a href=\"https:\/\/medium.com\/@stouff.nicolas\/why-every-browser-switching-to-blink-could-be-bad-news-for-the-web-aea773059e84\" target=\"_blank\" rel=\"noopener noreferrer\">Nicolas Stouff has written more about this topic here<\/a>.<\/p>\n<h3>2. Useful Pens for Everyday Front End Development<\/h3>\n<p><a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/\">https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/<\/a><\/p>\n<p>Even though I haven\u2019t gone through <em>all<\/em> pens (I stopped after 240), many of the pens I found in this collection addresses commonly used development components and solutions I\u2019ve faced in the past (and most likely will create\/reuse in the future).<\/p>\n<h3>3. CSS-in-JS<\/h3>\n<p><a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/\">https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/<\/a><\/p>\n<p>In general I\u2019m pro css-in-js. I used css-in-js for the first time in React (inlineStyle) in the very first version of <a href=\"https:\/\/www.sketch2react.io\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch2Reacts<\/a>\u2019 React export (I\u2019ll cover more Sketch2React history in future, separate, articles&nbsp;:)). Here I ran into the limitation of not being able to use pseudo-classes (e.g.&nbsp;:hover for buttons). Luckily there are libraries which extended inlineStyle to also include pseudo-classes, like <a href=\"https:\/\/formidable.com\/open-source\/radium\/\" target=\"_blank\" rel=\"noopener noreferrer\">Radium<\/a>.<\/p>\n<p>I used Material UI <a href=\"https:\/\/material-ui.com\/customization\/theming\/\" target=\"_blank\" rel=\"noopener noreferrer\">Theme:ing<\/a> in <a href=\"http:\/\/www.patientresan.se\" target=\"_blank\" rel=\"noopener noreferrer\">Patientresan.se<\/a> (alongside <a href=\"https:\/\/www.styled-components.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Styled Components<\/a>) I found theme:ing to be a bit annoying and struggled to make sense of it.<\/p>\n<p>I\u2019d recommend trying out the \u201call-inclusive\u201d <a href=\"https:\/\/www.styled-components.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Styled Components<\/a> if you\u2019re using React (or similar for other frameworks); it has served me very well. Otherwise I\u2019d go with<a href=\"https:\/\/css-tricks.com\/css-modules-part-1-need\/\" target=\"_blank\" rel=\"noopener noreferrer\"> CSS modules<\/a> + Sass, the \u201clight-weight\u201d css-in-js option.<\/p>\n<p>There are many more ways to use css-in-js (like <a href=\"https:\/\/emotion.sh\/docs\/introduction\" target=\"_blank\" rel=\"noopener noreferrer\">Emotion<\/a>, <a href=\"https:\/\/github.com\/zeit\/styled-jsx\" target=\"_blank\" rel=\"noopener noreferrer\">styled-jsx<\/a>) than I\u2019ve covered here.<\/p>\n<h3>4. <strong>The Best VS Code Extension List for Full Stack Developers<\/strong><\/h3>\n<p><a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/\">https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/<\/a><\/p>\n<p>I\u2019ve tried many IDE\u2019s spanning from IntelliJ IDEA and Eclipse to Atom and Sublime Text. They were all good (each with their own pros and cons). But one that instantly became my all-time-favorite is <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a>. Here\u2019s a list of the \u201cthe best\u201d extensions.<\/p>\n<h3>5. Sketch2React<\/h3>\n<p><a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/\">https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/<\/a><\/p>\n<p>Of course I wanted to add this to my first edition&nbsp;\ud83d\ude42 Juan Maguid and I started this project 1,5 years ago and we\u2019re soon to release version 1.6 pre-release. Version 1.6 contains features such as support for Sketch Shared libraries and Sketch Cloud. You can read more on version 1.6 <a href=\"https:\/\/medium.com\/sketch2react\/sketch2react-code-app-version-1-6-pre-release-will-soon-be-available-a6d5600023fc\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>. In parallell we\u2019re building Sketch2React version 2.0 with a brand new render-engine, new UI and a lot of new features and improvements such as Styled Components and possibility to export your design assets to npm.<\/p>\n<hr>\n<figure><img decoding=\"async\" data-width=\"521\" data-height=\"651\" src=\"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/2939d-1dshtxqezlp-bcc75tszpjq402x.jpeg\"><\/figure>\n<p>Thanks for reading and happy coding! \u2764\ufe0f<\/p>\n<p><em>\/Fredrik, Senior Front-end developer @ Bouvet and co-creator of Sketch2React<\/em><\/p>\n<p><a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/\">https:\/\/blogs.windows.com\/windowsexperience\/2019\/08\/20\/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now\/<\/a><\/p>\n<p><em>Psst, I also highly recommend Juan\u2019s Design Digest (He\u2019s the other 50% of Sketch2React)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the first in, what will hopefully be, a weekly update on news, trends, tools, frameworks and.. well everything related to front-end development. This is a first test-structure and my idea is simple: No more than five&nbsp;articles I want this to be a quick read, not a chore. It also requires me to cherry-pick&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Fredrik\u2019s front-end quick read #1<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[167],"tags":[158,159,164],"class_list":["post-256","post","type-post","status-publish","format-standard","hentry","category-fredriks-front-end-quick-read","tag-bouvet","tag-front-end-development","tag-news-update"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Fredrik\u2019s front-end quick read #1 | Sketch2React Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fredrik\u2019s front-end quick read #1 - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"This is the first in, what will hopefully be, a weekly update on news, trends, tools, frameworks and.. well everything related to front-end development. This is a first test-structure and my idea is simple: No more than five&nbsp;articles I want this to be a quick read, not a chore. It also requires me to cherry-pick&hellip;&nbsp;Read More &raquo;Fredrik\u2019s front-end quick read #1\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-26T07:06:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:16:56+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/739e5-1co4sbvedak9g5juphi1v0q.jpeg\" \/>\n<meta name=\"author\" content=\"Fredrik Ward\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fredrik Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/\"},\"author\":{\"name\":\"Fredrik Ward\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664\"},\"headline\":\"Fredrik\u2019s front-end quick read #1\",\"datePublished\":\"2019-08-26T07:06:23+00:00\",\"dateModified\":\"2020-06-18T07:16:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/\"},\"wordCount\":653,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/739e5-1co4sbvedak9g5juphi1v0q.jpeg\",\"keywords\":[\"Bouvet\",\"Front End Development\",\"News Update\"],\"articleSection\":[\"Fredrik's Front-end Quick Read\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/\",\"name\":\"Fredrik\u2019s front-end quick read #1 - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/739e5-1co4sbvedak9g5juphi1v0q.jpeg\",\"datePublished\":\"2019-08-26T07:06:23+00:00\",\"dateModified\":\"2020-06-18T07:16:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#primaryimage\",\"url\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/739e5-1co4sbvedak9g5juphi1v0q.jpeg\",\"contentUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/739e5-1co4sbvedak9g5juphi1v0q.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fredrik\u2019s front-end quick read #1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664\",\"name\":\"Fredrik Ward\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g\",\"caption\":\"Fredrik Ward\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sewk9wxw3g\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fredrik\u2019s front-end quick read #1 | Sketch2React Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/","og_locale":"en_US","og_type":"article","og_title":"Fredrik\u2019s front-end quick read #1 - Sketch2React Blog","og_description":"This is the first in, what will hopefully be, a weekly update on news, trends, tools, frameworks and.. well everything related to front-end development. This is a first test-structure and my idea is simple: No more than five&nbsp;articles I want this to be a quick read, not a chore. It also requires me to cherry-pick&hellip;&nbsp;Read More &raquo;Fredrik\u2019s front-end quick read #1","og_url":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-08-26T07:06:23+00:00","article_modified_time":"2020-06-18T07:16:56+00:00","og_image":[{"url":"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/739e5-1co4sbvedak9g5juphi1v0q.jpeg","type":"","width":"","height":""}],"author":"Fredrik Ward","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Fredrik Ward","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/"},"author":{"name":"Fredrik Ward","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664"},"headline":"Fredrik\u2019s front-end quick read #1","datePublished":"2019-08-26T07:06:23+00:00","dateModified":"2020-06-18T07:16:56+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/"},"wordCount":653,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#primaryimage"},"thumbnailUrl":"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/739e5-1co4sbvedak9g5juphi1v0q.jpeg","keywords":["Bouvet","Front End Development","News Update"],"articleSection":["Fredrik's Front-end Quick Read"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/","url":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/","name":"Fredrik\u2019s front-end quick read #1 - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#primaryimage"},"thumbnailUrl":"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/739e5-1co4sbvedak9g5juphi1v0q.jpeg","datePublished":"2019-08-26T07:06:23+00:00","dateModified":"2020-06-18T07:16:56+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#primaryimage","url":"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/739e5-1co4sbvedak9g5juphi1v0q.jpeg","contentUrl":"http:\/\/sketch2react.files.wordpress.com\/2019\/08\/739e5-1co4sbvedak9g5juphi1v0q.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Fredrik\u2019s front-end quick read #1"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664","name":"Fredrik Ward","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/91605aba05531b0d98ed254dc314b74be1800d1086302db1454b4489c128e3e1?s=96&d=wavatar&r=g","caption":"Fredrik Ward"},"url":"https:\/\/sketch2react.io\/blog\/author\/sewk9wxw3g\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=256"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/256\/revisions"}],"predecessor-version":[{"id":307,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/256\/revisions\/307"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}