{"id":249,"date":"2019-10-15T00:00:12","date_gmt":"2019-10-14T22:00:12","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/10\/15\/fredriks-front-end-quick-read-7\/"},"modified":"2020-06-18T07:16:55","modified_gmt":"2020-06-18T07:16:55","slug":"fredriks-front-end-quick-read-7","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/","title":{"rendered":"Fredrik\u2019s front-end quick read #7"},"content":{"rendered":"
<\/figure>\n

Learn React in 10 tweets, 127 Helpful JavaScript Snippets You Can Learn in 30 Seconds or Less, Webhint has found it\u2019s way into Firefox DevTools, active consent is needed for tracking cookies and CSS Grid changes how we can think about document structures.<\/p>\n

1. Learn React in 10 tweets (with hooks)<\/h3>\n

Title says it all. Get a good overview of React in these 10 tweets.<\/p>\n

<\/a><\/p>\n

\n

2. 127 Helpful JavaScript Snippets You Can Learn in 30 Seconds or Less<\/h3>\n

Here\u2019s a list of 127 beneficial snippets that you can learn and use immediately. This is the first in a six-part series(!). Simple and elegant solutions to common problems.<\/p>\n

https:\/\/link.medium.com\/N96Tr6WYy0<\/a><\/p>\n

\n

3. WebHint in Firefox DevTools: Improve Compatibility, Accessibility and more<\/h3>\n

This excellent tool provides feedback about your site\u2019s compatibility, performance, security, and accessibility. It\u2019s now available in Firefox as an add-on<\/a>.<\/p>\n

https:\/\/link.medium.com\/N96Tr6WYy0<\/a><\/p>\n

\n

4. Europe\u2019s top court says active consent is needed for tracking cookies<\/strong><\/h3>\n

The ruling notes that pre-checked consent boxes for dropping cookies are not legally valid and that consent must be obtained prior to storing or accessing non-essential cookies, such as tracking cookies for targeted advertising.<\/p>\n

https:\/\/link.medium.com\/N96Tr6WYy0<\/a><\/p>\n

\n

5. How CSS Grid changes the way we think about structuring our content<\/h3>\n

A look at how the \u201cextra layer of control\u201d that Grid offers helps simplify your markup and lets us write less code.<\/p>\n

https:\/\/link.medium.com\/N96Tr6WYy0<\/a><\/p>\n

Another example is this article<\/a> in which Mustapha Aouas shows how to use CSS grid to build various layouts.<\/p>\n

\n

Thank you for reading and happy coding! \u2764\ufe0f<\/p>\n

\/Fredrik Ward, Senior front-end developer @ Bouvet and co-creator of Sketch2React<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn React in 10 tweets, 127 Helpful JavaScript Snippets You Can Learn in 30 Seconds or Less, Webhint has found it\u2019s way into Firefox DevTools, active consent is needed for tracking cookies and CSS Grid changes how we can think about document structures. 1. Learn React in 10 tweets (with hooks) Title says it all. Get… Read More »Fredrik\u2019s front-end quick read #7<\/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,61,128,31],"class_list":["post-249","post","type-post","status-publish","format-standard","hentry","category-fredriks-front-end-quick-read","tag-bouvet","tag-front-end-development","tag-javascript","tag-news","tag-web-development"],"yoast_head":"\nFredrik\u2019s front-end quick read #7 | 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-7\/\" \/>\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 #7 - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Learn React in 10 tweets, 127 Helpful JavaScript Snippets You Can Learn in 30 Seconds or Less, Webhint has found it\u2019s way into Firefox DevTools, active consent is needed for tracking cookies and CSS Grid changes how we can think about document structures. 1. Learn React in 10 tweets (with hooks) Title says it all. Get… Read More »Fredrik\u2019s front-end quick read #7\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-14T22:00:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:16:55+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/c99a1-1actejvvgpl9oxeo0iikbbw.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=\"1 minute\" \/>\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-7\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/\"},\"author\":{\"name\":\"Fredrik Ward\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664\"},\"headline\":\"Fredrik\u2019s front-end quick read #7\",\"datePublished\":\"2019-10-14T22:00:12+00:00\",\"dateModified\":\"2020-06-18T07:16:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/\"},\"wordCount\":294,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/c99a1-1actejvvgpl9oxeo0iikbbw.jpeg\",\"keywords\":[\"Bouvet\",\"Front End Development\",\"JavaScript\",\"News\",\"Web Development\"],\"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-7\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/\",\"name\":\"Fredrik\u2019s front-end quick read #7 - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/c99a1-1actejvvgpl9oxeo0iikbbw.jpeg\",\"datePublished\":\"2019-10-14T22:00:12+00:00\",\"dateModified\":\"2020-06-18T07:16:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#primaryimage\",\"url\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/c99a1-1actejvvgpl9oxeo0iikbbw.jpeg\",\"contentUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/c99a1-1actejvvgpl9oxeo0iikbbw.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fredrik\u2019s front-end quick read #7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips & 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 #7 | 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-7\/","og_locale":"en_US","og_type":"article","og_title":"Fredrik\u2019s front-end quick read #7 - Sketch2React Blog","og_description":"Learn React in 10 tweets, 127 Helpful JavaScript Snippets You Can Learn in 30 Seconds or Less, Webhint has found it\u2019s way into Firefox DevTools, active consent is needed for tracking cookies and CSS Grid changes how we can think about document structures. 1. Learn React in 10 tweets (with hooks) Title says it all. Get… Read More »Fredrik\u2019s front-end quick read #7","og_url":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-10-14T22:00:12+00:00","article_modified_time":"2020-06-18T07:16:55+00:00","og_image":[{"url":"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/c99a1-1actejvvgpl9oxeo0iikbbw.jpeg","type":"","width":"","height":""}],"author":"Fredrik Ward","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Fredrik Ward","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/"},"author":{"name":"Fredrik Ward","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664"},"headline":"Fredrik\u2019s front-end quick read #7","datePublished":"2019-10-14T22:00:12+00:00","dateModified":"2020-06-18T07:16:55+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/"},"wordCount":294,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#primaryimage"},"thumbnailUrl":"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/c99a1-1actejvvgpl9oxeo0iikbbw.jpeg","keywords":["Bouvet","Front End Development","JavaScript","News","Web Development"],"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-7\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/","url":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/","name":"Fredrik\u2019s front-end quick read #7 - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#primaryimage"},"thumbnailUrl":"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/c99a1-1actejvvgpl9oxeo0iikbbw.jpeg","datePublished":"2019-10-14T22:00:12+00:00","dateModified":"2020-06-18T07:16:55+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#primaryimage","url":"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/c99a1-1actejvvgpl9oxeo0iikbbw.jpeg","contentUrl":"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/c99a1-1actejvvgpl9oxeo0iikbbw.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Fredrik\u2019s front-end quick read #7"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips & 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\/249","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=249"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/249\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/249\/revisions\/301"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}