{
    "componentChunkName": "component---src-components-blog-post-jsx",
    "path": "/blog/less-javascript-is-more/",
    "result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"51df8cc1-ce76-56d3-8806-f2df179ab4ae","timeToRead":4,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Less JavaScript Makes Font Awesome More Awesome\",\n  \"date\": \"2019-11-09T02:43:13.595Z\",\n  \"template\": \"post\",\n  \"slug\": \"less-javascript-is-more\",\n  \"category\": [\"resources\"],\n  \"tags\": [\"React\", \"JavaScript\", \"Font Awesome\", \"Performance\"],\n  \"description\": \"Recently, I looked into tackling a rendering issue with Font Awesome fonts used on this site by removing JavaScript...\",\n  \"redirects\": [\"/blog/2019/11/09/less-javascript-is-more\"]\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar TableOfContents = makeShortcode(\"TableOfContents\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I decided to use \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://fontawesome.com/\"\n  }, \"Font Awesome\"), \"'s SVG icons to display social media icons prominently on this site's homepage. I am a long time fan of Font Awesome and supported their \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.Kickstarter.com/projects/232193852/font-awesome-5\"\n  }, \"Kickstarter campaign\"), \" in 2017, which was the highest-funded software project on Kickstarter at that time with a total of over 1,076,960 USD pledged. Despite its awesomeness, I \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"did\"), \" run into a small issue with how the default styles were loaded when adding Font Awesome to this site.\"), mdx(TableOfContents, {\n    headings: props.tableOfContents,\n    mdxType: \"TableOfContents\"\n  }), mdx(\"h2\", {\n    \"id\": \"problem--css-loading-differently-locally-vs-in-production\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#problem--css-loading-differently-locally-vs-in-production\",\n    \"aria-label\": \"problem  css loading differently locally vs in production permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Problem \\uD83D\\uDC1B: CSS loading differently locally vs in-production\"), mdx(\"p\", null, \"Overall, I had a smooth experience implementing Font Awesome and did not experience any major issues when developing but as soon as my site was deployed I noticed that there was a huge discrepancy in the size of the icons as they rendered.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/mutable_monica.gif\",\n    \"alt\": \"comparing the icon size on final load vs load without javascript\"\n  })), mdx(\"p\", null, \"To illustrate this problem using the above GIF, the beginning of the GIF shows how misformatted and large the social icons appeared in production initially (while waiting for JavaScript to fully load or when JavaScript was disabled). Towards the end of the GIF the icons change to the proper styled size. In development the icons \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"only\"), \" appeared in the proper styled size.\"), mdx(\"p\", null, \"The below screenshot from the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.webpagetest.org/\"\n  }, \"Web Page Test\"), \" further illustrates how the rendering issue manifested in production by showing how the icon appearances changed over time (1.5s to 1.8s) as the page loaded.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/font-awesome-rendering-issue.png\",\n    \"alt\": \"a screenshot from the filmstrip from web page speed test showing the icons appearing as different sizes in different snapshots over time\"\n  })), mdx(\"p\", null, \"Investigating why the icon styling behaved differently in production vs development led me to understand a bit more how the styles were being applied to my icons and to the realization that using Font Awesome's NPM packages out of the box in a server-side rendered (SSR) application you will likely experience some jarring rendering issues. By default, Font Awesome's NPM packages import styles from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\\"@fortawesome/fontawesome-svg-core\\\"\"), \". While the CSS loaded from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\\"@fortawesome/...\"), \" was readily available in development this same CSS was consistently not available on the initial load of the production version of my site causing the icons to initially render too large and then to snap to their proper size. As I looked into this I discovered this rendering issue is a known Font Awesome issue that requires a little bit of additional configuration. The Font Awesome site has some \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering#css\"\n  }, \"suggestions\"), \" for handling the issue of CSS not being available on load for server-side rendered applications.\"), mdx(\"p\", null, \"TLDR; CSS local to your application is your friend as the underlying issue is that the availability on the initial page load of JavaScript assets is different locally vs in production for a server-side rendered application.\"), mdx(\"h2\", {\n    \"id\": \"what-is-server-side-rendering\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#what-is-server-side-rendering\",\n    \"aria-label\": \"what is server side rendering permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"What is Server-side rendering?\"), mdx(\"p\", null, \"Server-side rendering is when an application generates and sends a complete HTML page from the server to the client on the initial load that doesn't require JavaScript to be available before content can be displayed. After the initial load, Client-side rendering can take over to allow better interactivity.\\\"Without Server Side Rendering, all your server ships is an HTML page with no body, just some script tags that are then used by the browser to render the application.\\\" (source: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://flaviocopes.com/react-server-side-rendering/\"\n  }, \"Flavioscopes\"), \").\"), mdx(\"p\", null, \"For this site I am using \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org/\"\n  }, \"GatsbyJS\"), \" which has server-side rendering configured for the production build of the website which means the initial render has HTML/CSS loaded and \\\"\", \"[o]\", \"nce a site has been built by Gatsby and loaded in a web browser, client-side JavaScript assets will download and turn the site into a full React application that can manipulate the DOM.\\n\\\" (source: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org/docs/glossary#hydration\"\n  }, \"Gatsby Glossary\"), \"). In other words, the HTML/CSS for this site loads but then additional network requests are made to retrieve additional JavaScript files required for full functionality.\"), mdx(\"h2\", {\n    \"id\": \"solution-\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#solution-\",\n    \"aria-label\": \"solution  permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Solution \\uD83D\\uDCA1\"), mdx(\"p\", null, \"In order to resolve the issue with the icon font size being too large on initial render, I first needed to replicate the issue in development. To replicate in development, I manually blocked JavaScript from loading for my site in the Chrome Dev Tools. For the production version I was able to block JavaScript from loading by opening the Dev Tools and going to settings > preferences > debugger > and then selecting \\\"disable javascript\\\" however, in development I had to block specific JS files from loading in the Network tab instead or else I saw a message that said \\\"This app works best with JavaScript enabled\\\".\"), mdx(\"p\", null, \"You can also generate the production version of the site locally using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby build\"), \" and going to the generated files. Whis will then allow you to disable JavaScript and see how the page appears in production on initial load before JavaScript is downloaded and able to progressively enhance the page.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Create a production build. If the application is already running locally, stop (Ctrl + C) the development server and run \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby build\"), \".\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"The production build is output to public directory. run \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby serve\"), \" to view the production site locally at http://localhost:9000.\"))), mdx(\"h3\", {\n    \"id\": \"reproduce-issue-by-disabling-and-blocking-external-javascript\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#reproduce-issue-by-disabling-and-blocking-external-javascript\",\n    \"aria-label\": \"reproduce issue by disabling and blocking external javascript permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Reproduce issue by disabling and blocking external JavaScript\"), mdx(\"p\", null, \"Disabling JavaScript allowed me to see the larger icons and to use CSS that replicated the final styling I wanted without relying on external JavaScript.\"), mdx(\"p\", null, \"After finalizing the styles, I also needed to add the following lines to my \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"layout.jsx\"), \" file. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"layout.jsx\"), \" file is responsible for rendering the overall layout for all content on this site and is where styles are loaded.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import { config, dom } from \\\"@fortawesome/fontawesome-svg-core\\\"\\nconfig.autoAddCss = false\\n\")), mdx(\"p\", null, \"The above code removed the Font Awesome CSS which is loaded via JavaScript from the site. The CSS I had written with JavaScript disabled now reflected 100% how I wanted the icons to look and didn't rely on Font Awesome for additional styling. Since the CSS no longer had to be fetched from an external JavaScript file, it became available on the initial load in production and did not require the page to hydrate with additional JavaScript.\"), mdx(\"h3\", {\n    \"id\": \"verify-solution\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#verify-solution\",\n    \"aria-label\": \"verify solution permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Verify Solution\"), mdx(\"p\", null, \"Below is a screenshot from Web Page Test after updating the code to not import CSS from \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fontawesome-svg-core\"), \" and only rely on my own CSS.\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/after-fixing-fontawesome-issue.png\",\n    \"alt\": \"a screenshot from the filmstrip from web page speed test showing the icons as the same size in each snapshot\"\n  })), mdx(\"p\", null, \"The Web Page Test helped me confirm that the rendering issue was resolved in addition to being able to block JavaScript in Chrome DevTools. Web Page Test and Chrome DevTools can be invaluable when debugging \\uD83D\\uDC1B something related to loading JavaScript in a SSR application.\"));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#problem--css-loading-differently-locally-vs-in-production","title":"Problem 🐛: CSS loading differently locally vs in-production"},{"url":"#what-is-server-side-rendering","title":"What is Server-side rendering?"},{"url":"#solution-","title":"Solution 💡","items":[{"url":"#reproduce-issue-by-disabling-and-blocking-external-javascript","title":"Reproduce issue by disabling and blocking external JavaScript"},{"url":"#verify-solution","title":"Verify Solution"}]}]},"frontmatter":{"title":"Less JavaScript Makes Font Awesome More Awesome","date":"November 09, 2019","description":"Recently, I looked into tackling a rendering issue with Font Awesome fonts used on this site by removing JavaScript...","tags":["React","JavaScript","Font Awesome","Performance"]}},"allWebMentionEntry":{"edges":[{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1193568777591566337/1193595697527971845","wmProperty":"repost-of","wmId":786280,"type":"entry","url":"https://twitter.com/danestves/status/1193595697527971845","likeOf":null,"author":{"url":"https://twitter.com/danestves","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/e4e799dea459fc5be89ea12d31128df62c98367764c564cd84608ce668f45568.jpg","name":"Daniel Esteves 🇻🇪🖥️"},"published":"November 10, 2019","content":{"text":"I wrote a bit about how I resolved an issue with @fontawesome loading HUGE icons on the initial render of my @GatsbyJS site. https://t.co/H2"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1193568777591566337/1193606278091808772","wmProperty":"repost-of","wmId":786279,"type":"entry","url":"https://twitter.com/NickFoden/status/1193606278091808772","likeOf":null,"author":{"url":"https://twitter.com/NickFoden","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/adfee24b6b91f53e39277d570136a0ab83aa956f43a3f11e58187ba874e4da74.jpg","name":"Nick Foden"},"published":"November 10, 2019","content":{"text":"I wrote a bit about how I resolved an issue with @fontawesome loading HUGE icons on the initial render of my @GatsbyJS site. https://t.co/H2"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1193568777591566337/1193622776537657345","wmProperty":"repost-of","wmId":786278,"type":"entry","url":"https://twitter.com/essentialcode20/status/1193622776537657345","likeOf":null,"author":{"url":"https://twitter.com/essentialcode20","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/cd7e68bb93bf16a7d23575d0c84778745e445e4e935f6fc1beb143fa53e6d161.jpg","name":"Marien"},"published":"November 10, 2019","content":{"text":"I wrote a bit about how I resolved an issue with @fontawesome loading HUGE icons on the initial render of my @GatsbyJS site. https://t.co/H2"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1193568777591566337/1193623332102361088","wmProperty":"repost-of","wmId":786277,"type":"entry","url":"https://twitter.com/_randolph_west/status/1193623332102361088","likeOf":null,"author":{"url":"https://twitter.com/_randolph_west","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/949418a981a46d8f7fa1fb6ac657f70f6869561c1610babe272900bb81bf481d.jpg","name":"Randolph West ⚧"},"published":"November 10, 2019","content":{"text":"I wrote a bit about how I resolved an issue with @fontawesome loading HUGE icons on the initial render of my @GatsbyJS site. https://t.co/H2"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1193568777591566337/1193631699529166848","wmProperty":"repost-of","wmId":786276,"type":"entry","url":"https://twitter.com/Tay_llure/status/1193631699529166848","likeOf":null,"author":{"url":"https://twitter.com/Tay_llure","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/77603933f05cb3eed5ebacc35d60cc00921405069205be7469b87786db425615.jpg","name":"Taylor Dennis"},"published":"November 10, 2019","content":{"text":"I wrote a bit about how I resolved an issue with @fontawesome loading HUGE icons on the initial render of my @GatsbyJS site. https://t.co/H2"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/15111972","wmProperty":"like-of","wmId":786275,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-15111972","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/sergeyche","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/54950d7bb52b8577f4095a51b2fb371bc2983d8bbeac43b2ccacccf48bf1070b.jpg","name":"Sergey Chernyshev"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/3377551306","wmProperty":"like-of","wmId":786273,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-3377551306","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/AditiDevelops","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/17596889642e253094b6d65280446f0d104e8f65abffee25f33b4793e9955a78.jpg","name":"Aditi"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/1111007023041310725","wmProperty":"like-of","wmId":786274,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-1111007023041310725","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/SylwiaVargas","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c57a9a52bae1af2534edef9ea4f5f69dd14b8797ae79435cd5f6cefd4694b0fe.png","name":"sylwia vargas"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/9930632","wmProperty":"like-of","wmId":786271,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-9930632","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/eads","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b35800ad6c5b4fbe5e559ae6c85a339ac15317640a49341c4aee0a18c737eac7.jpg","name":"David Eads"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/227117732","wmProperty":"like-of","wmId":786272,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-227117732","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/marcysutton","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/3c7ce82bba5d01635ab173db23a36fe5cad2a2e995b1eec52e1646880b28d0a4.png","name":"Marcy Sutton"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/3387386693","wmProperty":"like-of","wmId":786270,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-3387386693","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/steveaschwarz","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/cdcac05d4fabf569126997432ce5190484fdc6f120a88f451bd0c74c3c1d42c5.jpg","name":"Steve Schwarz"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/32190243","wmProperty":"like-of","wmId":786269,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-32190243","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/resource11","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/17efd969828de1c2a7a88c92ee820ba2867711a45d729f729bc16c62f470f8d5.jpg","name":"Kathleen McMahon"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/554765148","wmProperty":"like-of","wmId":786267,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-554765148","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/danestves","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/e4e799dea459fc5be89ea12d31128df62c98367764c564cd84608ce668f45568.jpg","name":"Daniel Esteves 🇻🇪 🖥️"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/161419043","wmProperty":"like-of","wmId":786268,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-161419043","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/bendhalpern","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b1b7b12ed2078b23d15de2a11aa1162463a0d6a546352e0fd57b767c77ff69c5.jpg","name":"Ben Halpern 🦁"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/48182269","wmProperty":"like-of","wmId":786265,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-48182269","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/shannon_crabill","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9fcdedd58c12234646f620daefb5bac0dec5a6a6e97262f753f51bce4ddcabf0.jpg","name":"I’m OBVIOUSLY Shannon Crabill"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/2303217830","wmProperty":"like-of","wmId":786266,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-2303217830","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/CandaceWorthen","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b388aa12ba7e0e2d7defa7594a9f59c338660974d6f9b1c655e60b2c608a7e07.jpg","name":"Candace Worthen"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/1089209719514787846","wmProperty":"like-of","wmId":786263,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-1089209719514787846","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/nerdjfpb","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c5f985bd6a574478a19b29ac80499ff1d9d59bb1b2121dbed514e3bdf0bb16bd.jpg","name":"nerdjfpb : Javascript Ninja"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/85845596","wmProperty":"like-of","wmId":786264,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-85845596","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/NickFoden","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/adfee24b6b91f53e39277d570136a0ab83aa956f43a3f11e58187ba874e4da74.jpg","name":"Nick Foden"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/864631382466809860","wmProperty":"like-of","wmId":786262,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-864631382466809860","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/essentialcode20","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/cd7e68bb93bf16a7d23575d0c84778745e445e4e935f6fc1beb143fa53e6d161.jpg","name":"Marien"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/726202184631746560","wmProperty":"like-of","wmId":786261,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-726202184631746560","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/milkstarz","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6c0edee60b91873271955c124925311b82283021b149fabe65e47b595b78c59e.jpg","name":"malik"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/1010550753805643777","wmProperty":"like-of","wmId":786259,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-1010550753805643777","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/manwittaplan","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/638cd9f7fe403ec7d7593be13f9a8687082fe3dfa1f126cc66e5bb870c396e6b.jpg","name":"Terry Threatt, MBA 👨🏾‍💻"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/227253697","wmProperty":"like-of","wmId":786260,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-227253697","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/Tay_llure","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/77603933f05cb3eed5ebacc35d60cc00921405069205be7469b87786db425615.jpg","name":"Taylor Dennis"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/350774161","wmProperty":"like-of","wmId":786258,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-350774161","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/cappie013","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/200747dbfbff78775b5fcbd871322f8cf1a04e51cf531e8c2fc1f2a6b6482f8a.jpg","name":"Nicolas"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/2845097761","wmProperty":"like-of","wmId":786257,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-2845097761","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/_darkfadr","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/5af6527bf052c7596670523acc90100552224dd3e3cb45aeaa4e37c5a2d2bafc.jpg","name":"Ashley Narcisse"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/less-javascript-is-more/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1193568777591566337/64515860","wmProperty":"like-of","wmId":786256,"type":"entry","url":"https://twitter.com/waterproofheart/status/1193568777591566337#favorited-by-64515860","likeOf":"https://www.aboutmonica.com/blog/less-javascript-is-more/","author":{"url":"https://twitter.com/metalandcoffee_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b4ca7a2beac791acfd6c29952ea2dfad94e2fc039c3a6ebd07ab3d0a15e58c91.png","name":"Ebonie"},"published":null,"content":null}}]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/less-javascript-is-more/","slug":"/blog/less-javascript-is-more/","prev":{"id":"c916c59e-38b3-5c4f-8c7b-441af7802538","frontmatter":{"title":"Delete Your Code and Other Reflections from Coderetreat Day","category":["resources"],"date":"2019-11-17T02:43:13.595Z","slug":"code-retreat-reflection","tags":["Reflection"],"redirects":null},"fields":{"slug":"/blog/code-retreat-reflection/"}},"next":{"id":"8e0c1df6-cce2-5ffa-9bfc-31490ec3c746","frontmatter":{"title":"Grey's Anatomy Lorem Ipsum Generator Tutorial","category":["tutorial"],"date":"2019-06-02T11:43:13.595Z","slug":"greys-anatomy-lorem-ipsum-generator","tags":["Tutorial","JavaScript","React","Netlify","Linguistics"],"redirects":["/blog/2019/06/02/greys-anatomy-lorem-ipsum-generator"]},"fields":{"slug":"/blog/greys-anatomy-lorem-ipsum-generator/"}}}},
    "staticQueryHashes": ["1977783444","764694655"]}