{"id":250,"date":"2019-10-01T17:40:57","date_gmt":"2019-10-01T15:40:57","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/10\/01\/fredriks-front-end-quick-read-6\/"},"modified":"2020-06-18T07:16:56","modified_gmt":"2020-06-18T07:16:56","slug":"fredriks-front-end-quick-read-6","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/","title":{"rendered":"Fredrik\u2019s front-end quick read #6"},"content":{"rendered":"
<\/figure>\n

Wikipedia is on a 28KB javascript target diet, Browser engine diversity is ever decreasing, Google has revised its guidelines for rel<\/em>, console<\/em> contains a lot more than just .log<\/em> and last but not least reward yourself with one of Chris Coyier\u2019s merit badges (last article)!<\/p>\n

1. Wikipedia\u2019s JavaScript initialization on a budget<\/h3>\n

As one of the world\u2019s most heavily used sites, Wikipedia wants to keep things running as quickly as possible, including delivering all of their JavaScript within 28KB. Here\u2019s what they\u2019ve done to reach the goal.<\/p>\n

https:\/\/phabricator.wikimedia.org\/phame\/live\/7\/post\/175\/wikipedia_s_javascript_initialisation_on_a_budget\/<\/a><\/p>\n

\n

2. Browser Engine Diversity<\/h3>\n

Some thoughts on the decreasing diversity in the browser space: \u201cWhat we may have lost in browser engine diversity we may gain back in the openness of browser engines and outside players stepping up.\u201d<\/p>\n

I wrote about this in Fredrik\u2019s front-end quickread #1<\/a> when Microsoft released Microsoft Edge Beta and my mixed feelings about it.<\/p>\n

https:\/\/phabricator.wikimedia.org\/phame\/live\/7\/post\/175\/wikipedia_s_javascript_initialisation_on_a_budget\/<\/a><\/p>\n

\n

3. Moving beyond console.log()\u200a\u2014\u200a8 Console Methods You Should Use When Debugging JavaScript and Node<\/h3>\n

Includes console.assert, console.count, console.group and two timing methods. Integrate them with your debugging habits and your development speed will increase exponentially!<\/p>\n

https:\/\/phabricator.wikimedia.org\/phame\/live\/7\/post\/175\/wikipedia_s_javascript_initialisation_on_a_budget\/<\/a><\/p>\n

\n

4. What really matters in Google\u2019s nofollow changes?<\/h3>\n

For years, web designers who wanted to disavow a site they were linking to used rel=\u201dnofollow\u201d in their link \u2013 for example WordPress automatically adds it to comments. Now Google has revised its guidelines and introduced two new values: \u201dsponsored\u201d and \u201dugc\u201d. George Nguyen explains all.<\/p>\n

https:\/\/searchengineland.com\/reaction-to-googles-nofollow-announcement-321816<\/a><\/p>\n

\n

5. Web Development Merit Badges<\/h3>\n

What have you done today that made you feel proud? Said \u201cno\u201d to a client, actually used CSS Grid for live code, hand-coded an HTML email? If so, then you\u2019re entitled to a merit badge courtesy of Chris Coyier, who\u2019s put together this hilarious collection for designers and developers.<\/p>\n

https:\/\/phabricator.wikimedia.org\/phame\/live\/7\/post\/175\/wikipedia_s_javascript_initialisation_on_a_budget\/<\/a><\/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":"

Wikipedia is on a 28KB javascript target diet, Browser engine diversity is ever decreasing, Google has revised its guidelines for rel, console contains a lot more than just .log and last but not least reward yourself with one of Chris Coyier\u2019s merit badges (last article)! 1. Wikipedia\u2019s JavaScript initialization on a budget As one of the world\u2019s… Read More »Fredrik\u2019s front-end quick read #6<\/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,88,159,61,128],"class_list":["post-250","post","type-post","status-publish","format-standard","hentry","category-fredriks-front-end-quick-read","tag-bouvet","tag-css","tag-front-end-development","tag-javascript","tag-news"],"yoast_head":"\nFredrik\u2019s front-end quick read #6 | 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-6\/\" \/>\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 #6 - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Wikipedia is on a 28KB javascript target diet, Browser engine diversity is ever decreasing, Google has revised its guidelines for rel, console contains a lot more than just .log and last but not least reward yourself with one of Chris Coyier\u2019s merit badges (last article)! 1. Wikipedia\u2019s JavaScript initialization on a budget As one of the world\u2019s… Read More »Fredrik\u2019s front-end quick read #6\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-01T15:40:57+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\/10\/a6b10-14a4n-_iq8atri-bxmdzslq.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=\"2 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-6\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/\"},\"author\":{\"name\":\"Fredrik Ward\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664\"},\"headline\":\"Fredrik\u2019s front-end quick read #6\",\"datePublished\":\"2019-10-01T15:40:57+00:00\",\"dateModified\":\"2020-06-18T07:16:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/\"},\"wordCount\":392,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/a6b10-14a4n-_iq8atri-bxmdzslq.jpeg\",\"keywords\":[\"Bouvet\",\"CSS\",\"Front End Development\",\"JavaScript\",\"News\"],\"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-6\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/\",\"name\":\"Fredrik\u2019s front-end quick read #6 - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/a6b10-14a4n-_iq8atri-bxmdzslq.jpeg\",\"datePublished\":\"2019-10-01T15:40:57+00:00\",\"dateModified\":\"2020-06-18T07:16:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#primaryimage\",\"url\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/a6b10-14a4n-_iq8atri-bxmdzslq.jpeg\",\"contentUrl\":\"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/a6b10-14a4n-_iq8atri-bxmdzslq.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fredrik\u2019s front-end quick read #6\"}]},{\"@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 #6 | 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-6\/","og_locale":"en_US","og_type":"article","og_title":"Fredrik\u2019s front-end quick read #6 - Sketch2React Blog","og_description":"Wikipedia is on a 28KB javascript target diet, Browser engine diversity is ever decreasing, Google has revised its guidelines for rel, console contains a lot more than just .log and last but not least reward yourself with one of Chris Coyier\u2019s merit badges (last article)! 1. Wikipedia\u2019s JavaScript initialization on a budget As one of the world\u2019s… Read More »Fredrik\u2019s front-end quick read #6","og_url":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-10-01T15:40:57+00:00","article_modified_time":"2020-06-18T07:16:56+00:00","og_image":[{"url":"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/a6b10-14a4n-_iq8atri-bxmdzslq.jpeg","type":"","width":"","height":""}],"author":"Fredrik Ward","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Fredrik Ward","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/"},"author":{"name":"Fredrik Ward","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/d452067d5528ce6cda4be87f136cf664"},"headline":"Fredrik\u2019s front-end quick read #6","datePublished":"2019-10-01T15:40:57+00:00","dateModified":"2020-06-18T07:16:56+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/"},"wordCount":392,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#primaryimage"},"thumbnailUrl":"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/a6b10-14a4n-_iq8atri-bxmdzslq.jpeg","keywords":["Bouvet","CSS","Front End Development","JavaScript","News"],"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-6\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/","url":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/","name":"Fredrik\u2019s front-end quick read #6 - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#primaryimage"},"thumbnailUrl":"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/a6b10-14a4n-_iq8atri-bxmdzslq.jpeg","datePublished":"2019-10-01T15:40:57+00:00","dateModified":"2020-06-18T07:16:56+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#primaryimage","url":"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/a6b10-14a4n-_iq8atri-bxmdzslq.jpeg","contentUrl":"http:\/\/sketch2react.files.wordpress.com\/2019\/10\/a6b10-14a4n-_iq8atri-bxmdzslq.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/fredriks-front-end-quick-read-6\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Fredrik\u2019s front-end quick read #6"}]},{"@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\/250","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=250"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/250\/revisions"}],"predecessor-version":[{"id":302,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/250\/revisions\/302"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}