rss.xml

<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Magnificode]]></title><description><![CDATA[Thoughts from Dominic Magnifico]]></description><link>https://dommagnifi.co</link><generator>GatsbyJS</generator><lastBuildDate>Fri, 31 Mar 2023 19:47:52 GMT</lastBuildDate><item><title><![CDATA[Server Components in Next 13]]></title><description><![CDATA[I just got back from the labs at House of Giants where I was able to take a look at some of the cool new features in Next 13. One of these…]]></description><link>https://dommagnifi.co/2023-03-29-server-components-in-next-13/</link><guid isPermaLink="false">https://dommagnifi.co/2023-03-29-server-components-in-next-13/</guid><pubDate>Wed, 29 Mar 2023 12:44:00 GMT</pubDate><content:encoded>&lt;p&gt;I just got back from the labs at &lt;a href=&quot;https://houseofgiants.com&quot;&gt;House of Giants&lt;/a&gt; where I was able to take a look at some of the cool new features in Next 13. One of these promising new features is server components. This new capability promises to change the way we build NextJS applications for the better. In this post, we&apos;ll take a closer look at server components, explore their benefits, and discuss best practices for using them in real-world scenarios.&lt;/p&gt;
&lt;h2&gt;What are server components?&lt;/h2&gt;
&lt;p&gt;Server components allow us to isolate the specific parts of our application that depend on server-side rendered data. By breaking down our pages into smaller, more manageable components, we can load them independently for improved modularity and easier maintenance. Additionally, server components help improve performance by reducing the amount of unnecessary data that needs to be loaded.&lt;/p&gt;
&lt;h2&gt;An alternative to existing solutions&lt;/h2&gt;
&lt;p&gt;Before we dive into how to create server components, let&apos;s take a look at how they compare to other server-side rendering options in NextJS:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;getStaticProps/getServerSideProps&lt;/strong&gt;: These functions allow you to fetch data at build time or request time, respectively. However, they only work for the entire page, not individual components.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;API routes&lt;/strong&gt;: API routes allow you to fetch data from the server, but they require you to make an extra network request from the client.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Hydration&lt;/strong&gt;: Hydration is a technique that allows the client to take over rendering from the server after the initial page load. While this approach can work well for smaller applications, it can become unwieldy as your application grows.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Server components offer a more flexible and powerful approach to server-side rendering, allowing you to load only the components you need when you need them.&lt;/p&gt;
&lt;h2&gt;What are the benefits&lt;/h2&gt;
&lt;p&gt;Server components are a significant improvement over the old way of rendering server side data in NextJS. They provide a more modular approach to managing server side rendering, allowing for better isolation of components that rely on server side data. This not only makes it easier to manage your application, but also reduces bundle sizes by only loading the necessary server components. Additionally, server components can be loaded independently, which leads to faster load times and improved performance overall.&lt;/p&gt;
&lt;h2&gt;Show me the code 👨‍💻&lt;/h2&gt;
&lt;p&gt;Let&apos;s dive into creating a basic server component:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;jsx&quot;&gt;&lt;pre class=&quot;language-jsx&quot;&gt;&lt;code class=&quot;language-jsx&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;// components/SWPlanets.js&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;getPlanets&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; res &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;fetch&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;https://swapi.dev/api/planets&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; data &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; res&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;json&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; data &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;async&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;ServerPlanets&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; data &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;await&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;getPlanets&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;data&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;results&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;planet&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
          &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;span class=&quot;token script-punctuation punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;planet&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;planet&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
    &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This component is unique because it uses server-side rendering to fetch the data. It is not tied to any specific page, but rather can be used as a standalone component to retrieve and display the data on the server. By doing so, we can avoid unnecessary network requests from the client and provide a more optimized bundle. Additionally, because server components are isolated, they can be composed together to create more complex features within our application, improving modularity and maintainability. Pretty slick!&lt;/p&gt;
&lt;h2&gt;&lt;strong&gt;Real-world use cases and best practices for using server components&lt;/strong&gt;&lt;/h2&gt;
&lt;p&gt;Besides obtaining the diameter, population and orbital period of Dagobah, here are a few other real world use cases for server components.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Lazy loading&lt;/strong&gt;: Use server components to load parts of the page only when they are needed, reducing the initial page load time.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;A/B testing&lt;/strong&gt;: Use server components to test different variations of a component or page and track user engagement.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Server-side analytics&lt;/strong&gt;: Use server components to send data to your analytics platform directly from the server, bypassing the need to track events on the client.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;When using server components, it&apos;s important to follow best practices to ensure optimal performance and maintainability. Keep these tips in mind as you build:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Keep components small&lt;/strong&gt;: Divide your page into small, reusable components that can be loaded independently.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Cache data&lt;/strong&gt;: Use caching strategies to avoid making unnecessary API calls and improve performance.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;To this point, we could optimize our example further by leveraging &lt;code class=&quot;language-text&quot;&gt;getServerSideProps&lt;/code&gt; to cache our planet data. See if you can work out how to add that to our example above!&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Test thoroughly&lt;/strong&gt;: Test your server components thoroughly to ensure they work as expected and don&apos;t introduce new bugs.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Wrap it up&lt;/h2&gt;
&lt;p&gt;It’s pretty clear that the folks at Next are doing their level best to optimize the amount of JavaScript that is output in our applications in an attempt to reduce the massive weight of web applications these days. Server components and their counterpart client components are a pretty cool step in that direction. Very much looking forward to testing and implementing these features in future builds at &lt;a href=&quot;https://houseofgiants.com&quot;&gt;House of Giants&lt;/a&gt;!&lt;/p&gt;
&lt;h3&gt;Post resources:&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://beta.nextjs.org/docs/rendering/server-and-client-components&quot;&gt;https://beta.nextjs.org/docs/rendering/server-and-client-components&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://swapi.dev/&quot;&gt;https://swapi.dev/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[Toggle State With React Hooks]]></title><description><![CDATA[Creating a toggle function is probably one thing that you'll always need to know how to do effectively and efficiently in any app that you…]]></description><link>https://dommagnifi.co/2020-12-03-toggle-state-with-react-hooks/</link><guid isPermaLink="false">https://dommagnifi.co/2020-12-03-toggle-state-with-react-hooks/</guid><pubDate>Thu, 03 Dec 2020 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;Creating a toggle function is probably one thing that you&apos;ll always need to know how to do effectively and efficiently in any app that you build. Let&apos;s dive down the rabbit hole a bit and see what we can explore when it comes to this seemingly simple task.&lt;/p&gt;
&lt;h2&gt;What will we need?&lt;/h2&gt;
&lt;p&gt;We&apos;re going to assume that you&apos;ve run through the process of setting up your React project. If not, take a second and run through &lt;a href=&quot;https://reactjs.org/docs/create-a-new-react-app.html#create-react-app&quot;&gt;Create React App&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;From there, we&apos;re going to create a new component to test our basic toggle!&lt;/p&gt;
&lt;h3&gt;React Hooks&lt;/h3&gt;
&lt;p&gt;&lt;img src=&quot;https://media.giphy.com/media/UhFZggMF6xGWk/giphy.gif&quot;&gt;&lt;/p&gt;
&lt;p&gt;Hooks provide us a super easy way to set the local state of a component within our application. &lt;a href=&quot;https://reactjs.org/docs/hooks-intro.html&quot;&gt;Hooks solve a variety of different problems&lt;/a&gt;. Specifically in our case it allows us to pair state with a function component. Traditionally you&apos;d need to leverage a Class component in order to make your component stateful. With hooks we can define our state like so using &lt;code class=&quot;language-text&quot;&gt;useState&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; React&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; useState &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;react&apos;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;toggle&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; setToggle&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;useState&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      The Component
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Let&apos;s break down line four a bit.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;const [toggle, setToggle] = useState(false)&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;toggle&lt;/code&gt; is our state variable. This is what we&apos;ll reference when we want to get the current state of &lt;code class=&quot;language-text&quot;&gt;toggle&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;setToggle&lt;/code&gt; is the function that we&apos;ll use to actually update the state of our component.&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;useState(false)&lt;/code&gt; this is how we &apos;hook&apos; into the React feature itself. When we pass something in to this function as an argument (in our case &lt;code class=&quot;language-text&quot;&gt;false&lt;/code&gt; is our argument), React will use that passed argument as the initial state.&lt;/p&gt;
&lt;p&gt;All together we have a way to get the current state, set the state, and an initial state for our toggle.&lt;/p&gt;
&lt;h3&gt;A Trigger&lt;/h3&gt;
&lt;p&gt;We&apos;ll now need to define a DOM element that can trigger a state change using our hooks.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; React&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; useState &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;react&apos;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;toggle&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; setToggle&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;useState&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;button onClick&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;setToggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;Toggle State&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;button&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;I didn&apos;t really think about it too much before writing this post, but I was curious as to why &lt;code class=&quot;language-text&quot;&gt;setToggle&lt;/code&gt; needed to be called within an inline function. Turns out that the inline function is necessary to set the state after the component has rendered. This ensures that the new state we&apos;re passing to &lt;code class=&quot;language-text&quot;&gt;setToggle&lt;/code&gt; as an argument is actually applied to the component itself.&lt;/p&gt;
&lt;p&gt;Now, when we test this, we should see our state change from &lt;code class=&quot;language-text&quot;&gt;false&lt;/code&gt; to &lt;code class=&quot;language-text&quot;&gt;true&lt;/code&gt; once the button is clicked. Great! However, this is not a toggle just yet. Let&apos;s introduce the last piece of the puzzle...&lt;/p&gt;
&lt;h3&gt;Setting The State Using The Logical Not (!) or Double Not (!!) Operators&lt;/h3&gt;
&lt;p&gt;There are a couple of options that we can leverage to toggle the state, let&apos;s understand what these options actually do before we settle on one.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Logical Not (!)&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;A single &lt;code class=&quot;language-text&quot;&gt;!&lt;/code&gt; operator in JavaScript gives us the ability to set the opposite of the value immediately adjacent to the operator. We can use this operator to return &lt;code class=&quot;language-text&quot;&gt;true&lt;/code&gt; or &lt;code class=&quot;language-text&quot;&gt;false&lt;/code&gt; depending on whether or not a value is defined. &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT#:~:text=The%20logical%20NOT%20(%20!%20),true%20%3B%20otherwise%2C%20returns%20true%20.&quot;&gt;From MDN:&lt;/a&gt;&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;n1 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;               &lt;span class=&quot;token comment&quot;&gt;// !t returns false (the opposite of true)&lt;/span&gt;
n2 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;              &lt;span class=&quot;token comment&quot;&gt;// !f returns true (the opposite of false)&lt;/span&gt;
n3 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;&apos;&lt;/span&gt;                 &lt;span class=&quot;token comment&quot;&gt;// !f returns true (in JavaScript, an empty string is falsey, thus the opposite of a falsey value here is truthy.)&lt;/span&gt;
n4 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;Cat&apos;&lt;/span&gt;              &lt;span class=&quot;token comment&quot;&gt;// !t returns false (non empty string is truthy, thus opposite is falsy)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Check out more on &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Glossary/truthy&quot;&gt;truthy&lt;/a&gt; and &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Glossary/falsy&quot;&gt;falsy&lt;/a&gt; values.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The Double Not (!!)&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The double not operator serves a different purpose. The immediatly adjacent value to a double not operator will be converted to the corresponding boolean based on the truthyness or falsyness of that value. That said, this operator will not return the opposite of anything, in fact it will return the boolean primitive of the adjacent value. &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT#:~:text=The%20logical%20NOT%20(%20!%20),true%20%3B%20otherwise%2C%20returns%20true%20.&quot;&gt;Again, from MDN&lt;/a&gt;&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;n1 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;                   &lt;span class=&quot;token comment&quot;&gt;// !!truthy returns true&lt;/span&gt;
n2 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;                     &lt;span class=&quot;token comment&quot;&gt;// !!truthy returns true: any object is truthy...&lt;/span&gt;
n3 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;new&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Boolean&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;   &lt;span class=&quot;token comment&quot;&gt;// ...even Boolean objects with a false .valueOf()!&lt;/span&gt;
n4 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;                  &lt;span class=&quot;token comment&quot;&gt;// !!falsy returns false&lt;/span&gt;
n5 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;                     &lt;span class=&quot;token comment&quot;&gt;// !!falsy returns false&lt;/span&gt;
n6 &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;Boolean&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;         &lt;span class=&quot;token comment&quot;&gt;// !!falsy returns false&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This section was mostly for my own edification. I wasn&apos;t 100% clear on the intent of the double not operator, but now we know! Let&apos;s use the logical not operator in our example to set the opposite value of the current state in our toggle button.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; React&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; useState &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;react&apos;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;toggle&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; setToggle&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;useState&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;button onClick&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;setToggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;toggle&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;Toggle State&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;button&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Nice! Now, whatever the state of our toggle state variable is, clicking the button will set it to the opposite boolean value. A true toggle!&lt;/p&gt;
&lt;p&gt;With our state being properly toggled we can do some fun things in React. One of the most common things I use a toggle for is hiding or showign markup on the page. For example, a dropdown menu. We don&apos;t necessarily need the DOM markup for a hidden dropdown menu on the page on render. But we definitely want that markup when we click the button. This can be achieved like so:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; React&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; useState &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;react&apos;&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;toggle&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; setToggle&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;useState&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token boolean&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

  &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;button onClick&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;setToggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;toggle&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;Toggle Dropdown Markup&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;button&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;toggle &lt;span class=&quot;token operator&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
        &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;ul&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
          &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;Show me&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;li&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
          &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;Only when&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;li&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
          &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;Toggle &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token boolean&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;li&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
        &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;ul&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In our JSX, we escape into JS using curly braces &lt;code class=&quot;language-text&quot;&gt;{}&lt;/code&gt;. This allows us to write some basic JavaScript within our JSX. Essentially we are saying, if &lt;code class=&quot;language-text&quot;&gt;toggle&lt;/code&gt; is &lt;code class=&quot;language-text&quot;&gt;true&lt;/code&gt;, then render (by way of the parenthesis) our unorded list!&lt;/p&gt;
&lt;p&gt;And there you have it. A basic boolean state toggle using React Hooks.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://media.giphy.com/media/SvOrq4OA7TQTC/giphy.gif&quot;&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[The Many Ways to Include CSS in JavaScript Applications]]></title><link>https://dommagnifi.co/2019-07-08-the-many-ways-to-include-css-in-javascript-applications/</link><guid isPermaLink="false">https://dommagnifi.co/2019-07-08-the-many-ways-to-include-css-in-javascript-applications/</guid><pubDate>Mon, 08 Jul 2019 16:44:00 GMT</pubDate><content:encoded></content:encoded></item><item><title><![CDATA[Basic ES6 Vanilla JS Class Toggle]]></title><description><![CDATA[Wow, almost three years after I posted a lil' blog post about a basic class toggle with Vanilla JS, I suppose I could write out how to do…]]></description><link>https://dommagnifi.co/2019-05-06-basic-class-toggle-with-vanilla-js-es6/</link><guid isPermaLink="false">https://dommagnifi.co/2019-05-06-basic-class-toggle-with-vanilla-js-es6/</guid><pubDate>Mon, 06 May 2019 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;Wow, almost three years after I posted a &lt;a href=&quot;/2016-05-16-basic-class-toggle-with-vanilla-js/&quot;&gt;lil&apos; blog post&lt;/a&gt; about a basic class toggle with Vanilla JS, I suppose I could write out how to do this same thing with ES6.&lt;/p&gt;
&lt;p&gt;Since we last visited our class toggle task in 2016, quite a few things have changed. Let&apos;s take what we have where we left off and refactor it a bit to be more up to the current standard.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;var&lt;/span&gt; el &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;.toggle-me&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;onclick&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classList&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;active&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Ahh yes. Nothing better than looking at your own old code...🤦‍. First things first, let&apos;s update how we&apos;re caching the DOM element using &lt;code class=&quot;language-text&quot;&gt;const&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; el &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;.toggle-me&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;onclick&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classList&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;active&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Super small change here, but keep in mind, when using &lt;code class=&quot;language-text&quot;&gt;const&lt;/code&gt; you want to be sure that whatever you&apos;re referencing is not something that will be mutated further down the line. We know that the &lt;code class=&quot;language-text&quot;&gt;.toggle-me&lt;/code&gt; DOM node won&apos;t be mutated into something completely different, so &lt;code class=&quot;language-text&quot;&gt;const&lt;/code&gt; is appropriate here.&lt;/p&gt;
&lt;p&gt;Next, let&apos;s take a look at the function. Currently we&apos;re using the &lt;code class=&quot;language-text&quot;&gt;onclick&lt;/code&gt; event handler to detect when a user clicks on our defined element. Now this will work just fine out of the box, but let&apos;s pepper in an ES6 arrow function!&lt;/p&gt;
&lt;p&gt;As a primer, arrow functions are just a more compact way of writing a regular function like we have in the snippet above. It&apos;s worth noting however that &lt;code class=&quot;language-text&quot;&gt;this&lt;/code&gt; behaves quite differently within an arrow function. Tyler McGinnis has a &lt;a href=&quot;https://tylermcginnis.com/arrow-functions/&quot;&gt;wonderful post&lt;/a&gt; that goes into depth about the ins and outs of the arrow function. Feel free to pop over there if you want to dive a little deeper.&lt;/p&gt;
&lt;p&gt;For our sake, we can utilize an arrow function to condense our code just a bit:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; el &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;.toggle-me&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;onclick&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classList&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;active&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Nice! We&apos;re able to trim that down to two very succinct lines of javascript. With our arrow function, we&apos;re implicitly running the toggle method on our element. No need to add curly braces around our one line function. This will work perfectly, and remain accessible if the class toggle is a &lt;code class=&quot;language-text&quot;&gt;&amp;lt;button&amp;gt;&lt;/code&gt; or &lt;code class=&quot;language-text&quot;&gt;&amp;lt;input type=&amp;quot;submit&amp;quot;&amp;gt;&lt;/code&gt; element. The &lt;code class=&quot;language-text&quot;&gt;onclick&lt;/code&gt; listener also accounts for users who utilize the keyboard to navigate. The &lt;code class=&quot;language-text&quot;&gt;enter&lt;/code&gt; and &lt;code class=&quot;language-text&quot;&gt;space&lt;/code&gt; keys will trigger a click on these elements. But what about if we need to toggle a class on a &lt;code class=&quot;language-text&quot;&gt;&amp;lt;div&amp;gt;&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;&amp;lt;span&amp;gt;&lt;/code&gt; or another element that is not interactive by default?&lt;/p&gt;
&lt;h2&gt;Class toggles on non-interactive elements&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Big ol&apos; disclaimer here. If you have an element on your page that does a thing when you interact with it, you will &lt;em&gt;ALMOST ALWAYS&lt;/em&gt; use a button. It&apos;s the standard for saying &quot;Hey when you click this thing, something is going to happen on the page you&apos;re currently viewing&quot;. But, if you have a case where you absolutely cannot use a button or submit input, it&apos;s imperative that you make that element accessible for keyboard users.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;For non interactive elements like &lt;code class=&quot;language-text&quot;&gt;&amp;lt;div&amp;gt;&lt;/code&gt; and &lt;code class=&quot;language-text&quot;&gt;&amp;lt;span&amp;gt;&lt;/code&gt;, an extra step must be taken to ensure that the interaction is accessible to keyboard users. We&apos;re going to add a new event listener to our snippet that will ensure usability for all.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; el &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;.toggle-me&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;onclick&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classList&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;active&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addEventListener&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;keyup&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;event&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;event&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;keyCode &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;13&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; event&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;keyCode &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;32&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classList&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;active&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Please also don&apos;t forget, that because these elements are not interactive by default, we need to ensure that users can focus the item properly in the DOM. Let&apos;s assume that our element is a &lt;code class=&quot;language-text&quot;&gt;&amp;lt;div&amp;gt;&lt;/code&gt;. By adding a &lt;code class=&quot;language-text&quot;&gt;tabindex&lt;/code&gt; attribute to that div, we are able to ensure that keyboard users are able to focus the element.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;html&quot;&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;toggle-me&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;tabindex&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;0&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Hi!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Note here as well, when using &lt;code class=&quot;language-text&quot;&gt;tabindex&lt;/code&gt; you very rarely will want to take elements out of the tab flow of the document. Using &lt;code class=&quot;language-text&quot;&gt;tabindex=&amp;quot;0&amp;quot;&lt;/code&gt; makes the element focusable, but keeps it in the normal tab flow. A value of anything other than 0 will take it out of the flow, and could potentially cause confusion for keyboard users. Only do this if it&apos;s absolutely necessary, and you have a plan to ensure that keyboard users know exactly what&apos;s happening&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;The &lt;code class=&quot;language-text&quot;&gt;keyup&lt;/code&gt; event listener will listen for when a keyboard user hits, and releases a key. Within our arrow function, we now need to pass that keyup event so that we can capture the event, and only trigger the class toggle if the enter, or space keys are hit (these are the keyboard keys that indicate a user is trying to perform an action on our element). With that event captured, we can then run our class toggle!&lt;/p&gt;
&lt;p&gt;Because we&apos;re running the toggle twice, let&apos;s consolidate again.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; el &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;.toggle-me&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;handleToggle&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classList&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;active&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;onclick&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;handleToggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addEventListener&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;keyup&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;event&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;event&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;keyCode &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;13&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;||&lt;/span&gt; event&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;keyCode &lt;span class=&quot;token operator&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;32&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token function&quot;&gt;handleToggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;With ES6 we can assign our arrow function to a &lt;code class=&quot;language-text&quot;&gt;const&lt;/code&gt;, and call that function in multiple places.&lt;/p&gt;
&lt;p&gt;Spectacular! With that, you should now be able to level up your CSS class toggle to ES6 fairly painlessly for both interactive, and non-interactive elements.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[React Context API]]></title><description><![CDATA[https://reactjs.org/docs/context.html Since React 16.3.0, we've had access to the React Context API. Traditionally, as Kent C. Dodds has…]]></description><link>https://dommagnifi.co/2019-02-27-the-react-context-api/</link><guid isPermaLink="false">https://dommagnifi.co/2019-02-27-the-react-context-api/</guid><pubDate>Wed, 27 Feb 2019 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;a href=&quot;https://reactjs.org/docs/context.html&quot;&gt;https://reactjs.org/docs/context.html&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Since React 16.3.0, we&apos;ve had access to the React Context API. Traditionally, as Kent C. Dodds &lt;a href=&quot;https://blog.kentcdodds.com/prop-drilling-bb62e02cb691&quot;&gt;has explained&lt;/a&gt;, we&apos;ve experienced a bit of confusion, and headache when it comes to passing props down to multiple decedents of an application. A term he coined &quot;prop drilling&quot;, describes that issue well.&lt;/p&gt;
&lt;p&gt;The React Context API aims to solves the prop drilling issue by way of a fairly straight forward &lt;code class=&quot;language-text&quot;&gt;Provider&lt;/code&gt; to &lt;code class=&quot;language-text&quot;&gt;Consumer&lt;/code&gt; relationship. This makes passing data between components that are not necessarily direct descendants of each other much easier.&lt;/p&gt;
&lt;h2&gt;Context&lt;/h2&gt;
&lt;p&gt;In order to set up the &lt;code class=&quot;language-text&quot;&gt;Provider&lt;/code&gt; to &lt;code class=&quot;language-text&quot;&gt;Consumer&lt;/code&gt; relationship we must first set up a new context. This context acts as a sort of boundary for passing the specific data within this context, to it&apos;s child components.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;jsx&quot;&gt;&lt;pre class=&quot;language-jsx&quot;&gt;&lt;code class=&quot;language-jsx&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; MyContext &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; React&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createContext&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;The Provider Component&lt;/h2&gt;
&lt;p&gt;Once we have a context defined, we can create our provider, which is the Component that we&apos;ll actually use to wrap our application (or parts of our application), and pass the data. The provider component is just a fairly simple Higher Order Component that contains the state you wish to pass down to various levels of your application. This, simply, is where your data lives.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;jsx&quot;&gt;&lt;pre class=&quot;language-jsx&quot;&gt;&lt;code class=&quot;language-jsx&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;MyProvider&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  state &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Dominic&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    age&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;28&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Provider&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;span class=&quot;token script-punctuation punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        state&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;state
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;props&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;children&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Provider&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The value attribute in the &lt;code class=&quot;language-text&quot;&gt;MyContext.Provider&lt;/code&gt; component is what passes the data down to the child components. So in this case, we pass down the state as an object. This gives us access to the Provider state.&lt;/p&gt;
&lt;h2&gt;The  Consumer&lt;/h2&gt;
&lt;p&gt;Within any child component of our Provider, we&apos;ll need to write a consumer to actually get at that data. Instead of  traditional &lt;code class=&quot;language-text&quot;&gt;props&lt;/code&gt; the data is passed down via &lt;code class=&quot;language-text&quot;&gt;render props&lt;/code&gt;&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;jsx&quot;&gt;&lt;pre class=&quot;language-jsx&quot;&gt;&lt;code class=&quot;language-jsx&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Company&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;company&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Consumer&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;context&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;token comment&quot;&gt;//Fragment added here since you can only return one child&lt;/span&gt;
            &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
              &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;Welcome to &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;context&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
              &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;We are &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;context&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;age&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt; years old!&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
            &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
          &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Consumer&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2&gt;Updating State&lt;/h2&gt;
&lt;p&gt;In addition to passing the state down from the Provider via the &lt;code class=&quot;language-text&quot;&gt;value&lt;/code&gt; attribute, you can also pass down functions. Much like using Redux, these methods that we pass would be our &apos;actions&apos;.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;jsx&quot;&gt;&lt;pre class=&quot;language-jsx&quot;&gt;&lt;code class=&quot;language-jsx&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;MyProvider&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  state &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Dominic&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    age&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;28&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Provider&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;span class=&quot;token script-punctuation punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        state&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token function-variable function&quot;&gt;addYear&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setState&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          age&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;age &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;props&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;children&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Provider&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;And within the Consumer, we now have access to that method.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;jsx&quot;&gt;&lt;pre class=&quot;language-jsx&quot;&gt;&lt;code class=&quot;language-jsx&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Company&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;company&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Consumer&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;context&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
              &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;Welcome to &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;context&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
              &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;We are &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;context&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;age&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt; years old!&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
              &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;onClick&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;span class=&quot;token script-punctuation punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;context&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;addYear&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;Add Year&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
            &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
          &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Consumer&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Hooray! With that here&apos;s what our full &lt;code class=&quot;language-text&quot;&gt;App.js&lt;/code&gt; file should look like:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;jsx&quot;&gt;&lt;pre class=&quot;language-jsx&quot;&gt;&lt;code class=&quot;language-jsx&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;import&lt;/span&gt; React&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; Component &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;from&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;react&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// Create new context&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; MyContext &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; React&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;createContext&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// Create the Provider that will pass down state and methods to the rest of the application.&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;MyProvider&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  state &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    name&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&apos;Dominic&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    age&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;28&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Provider&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;span class=&quot;token script-punctuation punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
        state&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token function-variable function&quot;&gt;addYear&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;setState&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
          age&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;age &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;
        &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;props&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;children&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Provider&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// Create the consumer that will consume the data provided by the Provider.&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Company&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;company&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Consumer&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;context&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
            &lt;span class=&quot;token comment&quot;&gt;//Fragment added here since you can only return one child&lt;/span&gt;
            &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
              &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;Welcome to &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;context&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;name&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
              &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;We are &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;context&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;state&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;age&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt; years old!&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
              &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;onClick&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;span class=&quot;token script-punctuation punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;context&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;addYear&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;Add Year&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
            &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
          &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyContext.Consumer&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token comment&quot;&gt;// We&apos;ll nest our Consumer inside another component just to show that we don&apos;t need to pass props to each component.&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; &lt;span class=&quot;token function-variable function&quot;&gt;Companies&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
    &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Company&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
  &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
      &lt;span class=&quot;token comment&quot;&gt;// Ensure the provider wraps all the components you want to share data between.&lt;/span&gt;
      &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyProvider&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;App&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
          &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;Companies&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;/&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
        &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token plain-text&quot;&gt;
      &lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token class-name&quot;&gt;MyProvider&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;token keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;default&lt;/span&gt; App&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Great job! You’re up and running with the React Context API. This method is a nice first step to attempt to use before reaching for something far more heavy handed like Redux. No third party library, no confusing (it’s still confusing in my head) actions and reducers. Just nice, clean React API.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[React for People Who Think Things Like React are Weird and Hard]]></title><description><![CDATA[Title shamelessly derived from Chris Coyier's fantastic post about Grunt. In the world of Engineering we tend to get caught up in the…]]></description><link>https://dommagnifi.co/2019-02-24-react-for-people-who-think-things-like-react-are-weird-and-hard/</link><guid isPermaLink="false">https://dommagnifi.co/2019-02-24-react-for-people-who-think-things-like-react-are-weird-and-hard/</guid><pubDate>Sun, 24 Feb 2019 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;em&gt;Title shamelessly derived from &lt;a href=&quot;https://24ways.org/2013/grunt-is-not-weird-and-hard/&quot;&gt;Chris Coyier&apos;s fantastic post about Grunt.&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;In the world of Engineering we tend to get caught up in the technical aspects of things. I wanted to write a intro post concerning react to give a little insight to the folks we work with, Project Manages, Account Managers, Marketing folks etc. who may not be as privvy to the technical aspects of React, but who are still curious to understand what it is, what problems it solves, or doesn&apos;t solve.&lt;/p&gt;
&lt;h2&gt;A Little History First&lt;/h2&gt;
&lt;p&gt;&lt;img src=&quot;https://media.giphy.com/media/HlqvH9JrahLZ6/giphy.gif&quot; alt=&quot;Falling asleep&quot;&gt;&lt;/p&gt;
&lt;p&gt;Yes yes, I know, history is super boring, but I think it&apos;s important that we understand a little bit of where React came from. This will provide us with useful insight into what problems React was &lt;em&gt;designed&lt;/em&gt; to solve. Let&apos;s first use Reacts definition of itself to provide some context:&lt;/p&gt;
&lt;p&gt;From the React documentation:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;React is a declarative, efficient, and flexible JavaScript library for
building user interfaces. It lets you compose complex UIs from small and
isolated pieces of code called “components”.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Before moving on, let me explain what declarative programming means using this very succinct quote from Tyler McGinnis&apos; blog.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Declarative programming is “the act of programming in languages that conform to
the mental model of the developer rather than the operational model of the
machine”.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This library was built by the team at Facebook. Specifically within Facebook, their application that handled targeting ads at users became so unwieldy that developers there built a system to make their code more maintainable. This, coupled with Facebook&apos;s acquisition of Instagram, pushed the developers to decouple this technology from Facebook, so that it could be open sourced.&lt;/p&gt;
&lt;p&gt;React was initially proposed as a response to the emerging MVC (model view controller) methodology that many web applications were heading towards. Angular was super popular, Backbone.js which some of you may remember had it&apos;s tentacles reaching into WordPress at various points. React decided to take those methodologies, and focus on being a declarative way for engineers to build User Interfaces.&lt;/p&gt;
&lt;h2&gt;Cool, so what is it?&lt;/h2&gt;
&lt;p&gt;Now that we know what the developers who build React intended for it, we can explore what it is in practice.&lt;/p&gt;
&lt;p&gt;What sets React apart from things like Angular, or Backbone, or any of the other million frameworks is what sets any framework from any other. Adoption. React is incredibly actively maintained, with features coming out frequently that continue to help folks make declarative, dynamic, user interfaces.&lt;/p&gt;
&lt;p&gt;Without getting too far into the weeds, React by itself does not inherently provide any performance, or security benefits to a given website. But in conjunction with many other engineering practices, React &lt;em&gt;can&lt;/em&gt; help to create a far more maintainable application when complex interactions and data storage are required by the user interface.&lt;/p&gt;
&lt;p&gt;Early on in our discovery process, we always sit down with the client and try to understand their business objectives, key performance indicators, and other metrics that we can use to measure success. Let&apos;s look at two different scenarios, one where React may not be the best fit, and another where it will.&lt;/p&gt;
&lt;h3&gt;Scenario 1: The &quot;Oohhh Shiny&quot; Scenario&lt;/h3&gt;
&lt;p&gt;&lt;img src=&quot;https://media.giphy.com/media/81MHl1DY9kxMI/giphy.gif&quot; alt=&quot;Man distracted by something shiny&quot;&gt;&lt;/p&gt;
&lt;p&gt;You&apos;re encountered by Company X. Company X has a large amount of content. Company X wants to utilize our amazing UX and Design teams to find creative ways to display and share that content. They have complex post layouts, some different post types, videos, editorials, maybe a gallery. They approach you and say &quot;Hey! We have all this content, we want a beautiful User Experience, an easy way to edit, publish and share our content. Oh, and also we&apos;ve heard of React, we like how snappy and fast sites that use React are, let&apos;s make sure you build this in React for us!&quot;&lt;/p&gt;
&lt;p&gt;Here we find ourselves in a situation where Company X knows just enough about the development ecosystem to recommend React. Which is awesome, and super cool from a community standpoint that a JavaScript framework has such wide name recognition that folks outside of our sphere are even interested in it. It&apos;s worth noting that a client recommending a framework or technology should never be scoffed at. It&apos;s just our job to help them understand why they&apos;re right, or why there&apos;s a better solution.&lt;/p&gt;
&lt;p&gt;In our case with Company X, React is not the best solution for a few reasons.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;React by itself does not make a website snappy. There are dozens of other far more nuanced pieces of technology that are being used under the hood to get applications like Facebook, or Instagram, or Pinterest, or Grubhub to be so seemingly snappy.&lt;/li&gt;
&lt;li&gt;None of the requirements presented by this client lends itself to needing a framework to build a declarative and dynamic user interface. All of what was described by Client X can be done within WordPress itself, likely with the help of some fancy technology like AJAX, or the Web History API. Site speed, or page transitions, do not inherently mean a website should lean on React.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Scenario 2: The &quot;I don&apos;t have a clever name for this&quot; Scenario&lt;/h3&gt;
&lt;p&gt;Company Y approaches you. They&apos;re a business with similar needs of Company X. Large amounts of content, multiple post layouts and types. The thing that separates Company Y here is that they also allow users to sign up for their website, which gives those users the ability to favorite, react to, organize and even post their own content.&lt;/p&gt;
&lt;p&gt;Company Y requires a website where users fundamentally interact with various aspects of their product, which changes the shape of the data that exists within that website. Post #1 has 100 likes, User A has saved Post #1 to their &quot;Awesome Posts&quot; folder that is unique to that user. This data is highly dynamic, and is shaped by the users of the site.&lt;/p&gt;
&lt;p&gt;We&apos;re now into territory where React, which is a declarative JavaScript library, that can take this dynamic, ever-changing data, and display it on the front end via well designed interface components. Company Y has a &lt;em&gt;possible&lt;/em&gt; use case for React. It&apos;s important to note here, that we can &lt;strong&gt;absolutely&lt;/strong&gt; build these features in a WordPress only context. The question becomes; Will React create a more maintainable, extensible and reactive application than WordPress alone will?&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;React will create an easily manageable way for developers to pass data between various parts of the site without making multiple calls to the database to retrieve that data.&lt;/li&gt;
&lt;li&gt;React will make it easy for engineers to build components that are shared between multiple views on the front end. For example, card for each individual post that shows the title, author, number of likes, and reactions to that post that shows up on the home page, in the User&apos;s specific &quot;Awesome Posts&quot; folder, and in search results.&lt;/li&gt;
&lt;li&gt;React will help developers to use &lt;strong&gt;the same templates for various views while only changing the data when necessary&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;What React &lt;strong&gt;doesn&apos;t&lt;/strong&gt; do.&lt;/h2&gt;
&lt;p&gt;React by itself is just a JavaScript library that makes it easier for developers to build declarative, dynamic user interfaces. It does NOT do the following:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Inherently increase site performance&lt;/li&gt;
&lt;li&gt;React does not come with a way to easily transition between pages. Consider how WordPress handles navigating between pages. When building a React app, or headless WordPress with React on the front end, the developers &lt;em&gt;must&lt;/em&gt; build out the functionality to navigate between pages, posts, custom post types etc. &lt;strong&gt;separately&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;React does not come with a way, by default to consume data. Connections must be made to feed the React application data from a source, whether that&apos;s the WP API, or another REST API endpoint. Connections must be made, and the data must be shaped and passed to various parts of the application.&lt;/li&gt;
&lt;li&gt;React is not inherently more secure than alternative X. Regardless of the library or framework we choose to use, security can always be improved.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;All the points above contribute to why, in most cases, estimates for a React application tend to be higher than a WordPress build. There are many aspects of WP that come baked into WP itself. Whereas with a React application, these things we take for granted must be built from (near) scratch.&lt;/p&gt;
&lt;h2&gt;Why use React at all?&lt;/h2&gt;
&lt;p&gt;From an engineering standpoint, React allows us to much more easily envision a component within the larger whole of the project, abstract out the functionality and the styles, and get that component build in a clean logical way. React, in all reality is more of a gateway into a bunch of other technologies that can provide performance benefits for applications that request, consume and create &lt;em&gt;massive&lt;/em&gt; amounts of data.&lt;/p&gt;
&lt;p&gt;React is a tool, that helps us developers develop applications with complex logic, and nuanced interactions from the user easier.&lt;/p&gt;
&lt;h2&gt;TLDR; How do I know React is right for me?&lt;/h2&gt;
&lt;p&gt;I think it&apos;s important that before we sell a project we &lt;em&gt;consider&lt;/em&gt; the technologies that &lt;em&gt;might&lt;/em&gt; help to solve the issue for any given client. Instead of being prescriptive before we&apos;re able to do a full discovery, we need to understand the business objectives and full functional requirements for the project. Then, and only then can we prescribe the technology, or set of technologies that we can utilize to make Engineering more efficient, and the site the best it can be. In any case, here are a couple of very broad guidelines that explain where it would be safe to &lt;em&gt;consider&lt;/em&gt; React..&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Does the clients business model dictate that many users will be directly interacting with their data (reactions, likes, account specific sections where users curate their own content)? - Consider React.&lt;/li&gt;
&lt;li&gt;Is the User Interface sufficiently complex, reliant and directly affected by data (number of likes or reactions, graphs, charts, content created by users)? - Consider React.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Resources used for this post:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/&quot;&gt;https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://reactjs.org/docs/getting-started&quot;&gt;https://reactjs.org/docs/getting-started&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://overreacted.io/react-as-a-ui-runtime/&quot;&gt;https://overreacted.io/react-as-a-ui-runtime/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://tylermcginnis.com/imperative-vs-declarative-programming/&quot;&gt;https://tylermcginnis.com/imperative-vs-declarative-programming/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</content:encoded></item><item><title><![CDATA[Intro to GraphQL Queries]]></title><description><![CDATA[Recently I've been trying to get a better grasp on GraphQL. The majority of my exposure to GraphQL has been in the form of React apps. These…]]></description><link>https://dommagnifi.co/2019-01-01-intro-to-graphql-queries/</link><guid isPermaLink="false">https://dommagnifi.co/2019-01-01-intro-to-graphql-queries/</guid><pubDate>Tue, 01 Jan 2019 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;Recently I&apos;ve been trying to get a better grasp on GraphQL. The majority of my exposure to GraphQL has been in the form of React apps. These apps tend to be all set up and nicely packaged on the back end. This way, I could focus on consuming that data on the front end.&lt;/p&gt;
&lt;p&gt;To get more exposure to how a GraphQL back end is set up, I&apos;ve been running through the Wes Bos course &lt;a href=&quot;https://advancedreact.com/&quot;&gt;Fullstack Advanced
React &amp;#x26; GraphQL&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;I want to focus on a more narrow topic within this course; the setup of a GraphQL back end, and how to interact with and change that data from the front end.&lt;/p&gt;
&lt;p&gt;I won&apos;t be going over the setup of these technologies, as that&apos;s a separate post entirely. Instead I&apos;m going to focus on how to write and use queries within a working app.&lt;/p&gt;
&lt;p&gt;As a Frontend engineer, I&apos;ve not had much exposure to the work that goes into setting up the GraphQL back end. Let&apos;s dive in and set up our data structure.&lt;/p&gt;
&lt;h2&gt;Working With Schema&lt;/h2&gt;
&lt;hr&gt;
&lt;p&gt;To start lets imagine we want to populate our database with a set of &lt;code class=&quot;language-text&quot;&gt;people&lt;/code&gt;. Each person has an &lt;code class=&quot;language-text&quot;&gt;id&lt;/code&gt;, a &lt;code class=&quot;language-text&quot;&gt;name&lt;/code&gt;, and an &lt;code class=&quot;language-text&quot;&gt;age&lt;/code&gt; to start with.&lt;/p&gt;
&lt;p&gt;GraphQL is framework agnostic. What we explain below will also translate to any combination of technologies. We&apos;ll use what&apos;s called the &quot;GraphQL schema language&quot; to explain the examples below.&lt;/p&gt;
&lt;p&gt;To inform GraphQL of how we want our data structured, we have to build the schema using &lt;strong&gt;object types&lt;/strong&gt;. This initial schema is created like so:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;graphql&quot;&gt;&lt;pre class=&quot;language-graphql&quot;&gt;&lt;code class=&quot;language-graphql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;type&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Person&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; ID&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; String&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;age&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Int
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Here we&apos;re telling GraphQL the following: Our database will consist of many objects of type &lt;code class=&quot;language-text&quot;&gt;Person&lt;/code&gt;. Each &lt;code class=&quot;language-text&quot;&gt;Person&lt;/code&gt; in the database will have an &lt;code class=&quot;language-text&quot;&gt;id&lt;/code&gt; field that expects an &lt;code class=&quot;language-text&quot;&gt;ID&lt;/code&gt; (&lt;em&gt;note: the ID value here is a value that GraphQL knows is a unique identifier&lt;/em&gt;). We&apos;re also informing GraphQL that this field is required via use of the &lt;code class=&quot;language-text&quot;&gt;!&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Moving down we explain that each person will have a &lt;code class=&quot;language-text&quot;&gt;name&lt;/code&gt; field that expects a required &lt;code class=&quot;language-text&quot;&gt;String&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Finally, the &lt;code class=&quot;language-text&quot;&gt;age&lt;/code&gt; field may have an &lt;code class=&quot;language-text&quot;&gt;Int&lt;/code&gt; (integer) value associated with it, but this field is not required.&lt;/p&gt;
&lt;p&gt;There are extra identifiers and terms that could be expanded on here, but this gives us the basic sense of how to work with the GraphQL schema language. Much more in depth information about schema can be found in the &lt;a href=&quot;https://graphql.org/learn/schema/&quot;&gt;GraphQL docs&lt;/a&gt;. But for now, let&apos;s move on.&lt;/p&gt;
&lt;h2&gt;Querying Data&lt;/h2&gt;
&lt;hr&gt;
&lt;p&gt;At a low level there are two basic methods for interacting with the GraphQL API. &lt;strong&gt;Queries&lt;/strong&gt; and &lt;strong&gt;Mutations&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Queries&lt;/strong&gt; are just that. A way, using the GraphQL API, to query the database. Queries by themselves are simple creatures, and will return a set of fields for you to interact with on the front end. For example, if we wanted to query the database for a specific person, we can do that by writing a simple query, and also pass an argument to the query.&lt;/p&gt;
&lt;p&gt;Before we do that, we need to tell GraphQL what to expect from our query.
Within our schema, in addition to defining multiple &lt;code class=&quot;language-text&quot;&gt;type&lt;/code&gt;s of GraphQL services (so far &lt;code class=&quot;language-text&quot;&gt;Person&lt;/code&gt; is the only service we&apos;ve defined), we can also define specific Queries, and build out how those queries should be handled. For example, if we are to query a single person, we need to tell GraphQL what to return us.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;graphql&quot;&gt;&lt;pre class=&quot;language-graphql&quot;&gt;&lt;code class=&quot;language-graphql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;type&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Query&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;person&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Person
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Here, we&apos;re telling GraphQL that when we run a query for a single person, it should return us a JSON object that consists of our Type, &lt;code class=&quot;language-text&quot;&gt;Person&lt;/code&gt;. Now, when we load up a GraphQL playground and query for a specific person, we should be returned the expected Type.&lt;/p&gt;
&lt;p&gt;Another powerful feature in GraphQL is the ability for add &lt;strong&gt;arguments&lt;/strong&gt; to our queries. This allows us to search the database for a specific person, so long as we know an identifying piece of information stored in the DB about the person. Take the following query:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;graphql&quot;&gt;&lt;pre class=&quot;language-graphql&quot;&gt;&lt;code class=&quot;language-graphql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;query&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  person&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    name
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We are asking GraphQL for a person, whose &lt;code class=&quot;language-text&quot;&gt;id&lt;/code&gt; is &lt;code class=&quot;language-text&quot;&gt;1&lt;/code&gt;. We&apos;re then telling GraphQL that we only want to return that person&apos;s &lt;code class=&quot;language-text&quot;&gt;name&lt;/code&gt; and nothing else. This is another part of the draw to GraphQL. No matter how much information exists in the DB, we can be quite explicit in the data that we are returned. This creates some super efficient queries that return us only what we need.&lt;/p&gt;
&lt;p&gt;Our query above will return the following:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;json&quot;&gt;&lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;&quot;data&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;&quot;person&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Alan Watts&quot;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;All of the data returned is wrapped in the &lt;code class=&quot;language-text&quot;&gt;data&lt;/code&gt; object. This is true for any GraphQL query. What&apos;s neat is we can use arguments to query any one of the fields for our the &lt;code class=&quot;language-text&quot;&gt;Person&lt;/code&gt; type that we built out!&lt;/p&gt;
&lt;h3&gt;Querying all of a type&lt;/h3&gt;
&lt;p&gt;What we&apos;ve done above is super useful if we know the specific information of the person that we&apos;re querying. As long as we&apos;re okay being returned one singular &lt;code class=&quot;language-text&quot;&gt;Person&lt;/code&gt; then we&apos;re in good shape, but what if we want to query the database for all &lt;code class=&quot;language-text&quot;&gt;People&lt;/code&gt;?&lt;/p&gt;
&lt;p&gt;Similar to how we defined our singular &lt;code class=&quot;language-text&quot;&gt;person&lt;/code&gt; query, we will also need to define a &lt;code class=&quot;language-text&quot;&gt;people&lt;/code&gt; query. That will be executed like so:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;graphql&quot;&gt;&lt;pre class=&quot;language-graphql&quot;&gt;&lt;code class=&quot;language-graphql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;type&lt;/span&gt; &lt;span class=&quot;token class-name&quot;&gt;Query&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token attr-name&quot;&gt;person&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; Person
  &lt;span class=&quot;token attr-name&quot;&gt;people&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;Person&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;!&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In addition to our &lt;code class=&quot;language-text&quot;&gt;person&lt;/code&gt; query, we&apos;ve added a &lt;code class=&quot;language-text&quot;&gt;people&lt;/code&gt; query, that we expect to return an array of multiple &lt;code class=&quot;language-text&quot;&gt;People&lt;/code&gt; types! I&apos;ve added an &lt;code class=&quot;language-text&quot;&gt;!&lt;/code&gt; to signify to GraphQL that if we are querying for multiple people, it &lt;em&gt;must&lt;/em&gt; return the array. It can be an empty array, but the array itself is required.&lt;/p&gt;
&lt;p&gt;Sweet! Now we can query all the people in our database by simply writing:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;graphql&quot;&gt;&lt;pre class=&quot;language-graphql&quot;&gt;&lt;code class=&quot;language-graphql&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;query&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  people &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    id
    name
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Which will return:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;json&quot;&gt;&lt;pre class=&quot;language-json&quot;&gt;&lt;code class=&quot;language-json&quot;&gt;&lt;span class=&quot;token property&quot;&gt;&quot;data&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;&quot;people&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;&quot;id&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;1&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Alan Watts&quot;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;&quot;id&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Stanisław Szukalski&quot;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This has been a high level look at working with and building Queries in GraphQL, but it should be a good start to get you at least playing around with it. GraphQL is super powerful, and has been very interesting to work with. The major pain point in my eyes though, is getting up and running with GraphQL in the sense that the back end portion of your application needs a connection to the front end. Also, one of the things that GraphQL &lt;em&gt;is not&lt;/em&gt; intended to be used for, is altering data before it&apos;s passed to the database. No logic, or modification of data can be done with GraphQL alone.&lt;/p&gt;
&lt;p&gt;In the Wes Bos course I mentioned at the beginning of this post, he sets up his application using React, Apollo, GraphQL, and GraphQL Yoga. Apollo is the connection between the front end of the application, and the back end, allows you to run queries on the front end of your application, and be returned data that you can work with. GraphQL Yoga, allows you to do logic on data before it&apos;s passed to GraphQL on the backend. All of these technologies work great together, but require a bit of setup.&lt;/p&gt;
&lt;p&gt;For my own sanity (and possibly for yours if it&apos;s useful) I&apos;ve set up a &lt;a href=&quot;https://github.com/magnificode/react-apollo-prisma-yoga-boilerplate&quot;&gt;pretty bare bones application framework&lt;/a&gt; that has these bits of technology, and a few more, set up and ready to rock. It&apos;s the result of the setup steps that Wes Bos goes through in his course, which I highly, highly recommend buying and diving into, because he does a phenomenal job of explaining these technologies and their specific benefits. And of course, it&apos;s always really beneficial to understand how to set up an application from scratch.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Understanding Grid Display, Tracks And The New fr Unit.]]></title><description><![CDATA[Alright, so I'm going to be writing about the new snazzy CSS Grid property and all it's components. I'm going to try to do this in bite…]]></description><link>https://dommagnifi.co/2017-06-06-understanding-grid-display-tracks-and-the-new-fr-unit/</link><guid isPermaLink="false">https://dommagnifi.co/2017-06-06-understanding-grid-display-tracks-and-the-new-fr-unit/</guid><pubDate>Tue, 06 Jun 2017 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;Alright, so I&apos;m going to be writing about the new snazzy CSS Grid property and all it&apos;s components. I&apos;m going to try to do this in bite sized chunks so as to not write a blog post that encompasses all 18 new properties.&lt;/p&gt;
&lt;p&gt;Let&apos;s get rollin.&lt;/p&gt;
&lt;h3&gt;Display&lt;/h3&gt;
&lt;p&gt;There&apos;s three new values associated with the display property, &lt;code class=&quot;language-text&quot;&gt;grid&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;inline-grid&lt;/code&gt;, and &lt;code class=&quot;language-text&quot;&gt;subgrid&lt;/code&gt;. The first two are reminiscent of what we&apos;ve seen in the past with flexbox. The &lt;code class=&quot;language-text&quot;&gt;grid&lt;/code&gt; value generates a block level grid element, and &lt;code class=&quot;language-text&quot;&gt;inline-grid&lt;/code&gt; does just what it says, generates an inline-level grid element. Subgrid however, will require a bit of an extended explanation.&lt;/p&gt;
&lt;h4&gt;Subgrid&lt;/h4&gt;
&lt;p&gt;The short and sweet definition for subgrid is best summarized by the &lt;a href=&quot;https://css-tricks.com/snippets/css/complete-guide-grid/&quot;&gt;CSS-Tricks Complete Guide to Grid&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;subgrid&lt;/strong&gt; - if your grid container is itself a grid item (i.e. nested grids), you can use this property to indicate that you want the sizes of its rows/columns to be taken from its parent rather than specifying its own.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Unfortunately, as the CSS Grid Guru Rachel Andrew points out, &lt;a href=&quot;https://rachelandrew.co.uk/archives/2017/03/16/subgrid-moved-to-level-2-of-the-css-grid-specification/&quot;&gt;Subgrid moved to Level 2 of the CSS Grid specification&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;For examples sake, check out this CodePen demo below:&lt;/p&gt;
&lt;p data-height=&quot;413&quot; data-theme-id=&quot;21523&quot; data-slug-hash=&quot;bRNGoz&quot; data-default-tab=&quot;css,result&quot; data-user=&quot;magnificode&quot; data-embed-version=&quot;2&quot; data-pen-title=&quot;bRNGoz&quot; data-editable=&quot;true&quot; className=&quot;codepen&quot;&gt;See the Pen &lt;a href=&quot;https://codepen.io/magnificode/pen/bRNGoz/&quot;&gt;bRNGoz&lt;/a&gt; by Dominic Magnifico (&lt;a href=&quot;https://codepen.io/magnificode&quot;&gt;@magnificode&lt;/a&gt;) on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/p&gt;
&lt;script async src=&quot;https://production-assets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
&lt;p&gt;What subgrid will effectively do is remove the need for us to define the &lt;code class=&quot;language-text&quot;&gt;grid-template-columns&lt;/code&gt; on each individual &lt;code class=&quot;language-text&quot;&gt;.grid-item&lt;/code&gt;. It will inherit the value that we provided to the &lt;code class=&quot;language-text&quot;&gt;.grid&lt;/code&gt; parent, thus keeping our code nice and slim. Until Grid Level 2 ships however, we&apos;ll have to use the method shown above.&lt;/p&gt;
&lt;p&gt;Let&apos;s tackle the other two properties we see in this example, along with some of the syntax attached.&lt;/p&gt;
&lt;h3&gt;grid-template-columns (and rows). AKA Tracks.&lt;/h3&gt;
&lt;p&gt;This is the bread and butter of CSS Grid. After we&apos;ve told a container to be &lt;code class=&quot;language-text&quot;&gt;display: grid;&lt;/code&gt; we need to tell it how we want the grid items within it to behave. By applying &lt;code class=&quot;language-text&quot;&gt;grid-template-columns&lt;/code&gt; or &lt;code class=&quot;language-text&quot;&gt;grid-template-rows&lt;/code&gt; to the wrapper we can essentially define a template for how we want its children to behave. Here&apos;s a simple example:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;html&quot;&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;grid&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;grid-item&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Sweet Grid!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;grid-item&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Sweet Grid!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;grid-item&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Sweet Grid!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;And the associated CSS.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;css&quot;&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;  &lt;span class=&quot;token selector&quot;&gt;.grid&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; grid&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;grid-template-columns&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 300px 300px 300px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Each of the &lt;code class=&quot;language-text&quot;&gt;300px&lt;/code&gt; definitions in the CSS above, relates to one column. This format persists for any number of columns or rows (also called tracks in &lt;a href=&quot;https://www.w3.org/TR/css-grid-1/#grid-track-concept&quot;&gt;CSS Grid-Speak&lt;/a&gt;).&lt;/p&gt;
&lt;h3&gt;Ugh, so much typing&lt;/h3&gt;
&lt;p&gt;I&apos;m sure you&apos;re sitting at your computer thinking &quot;Gee that&apos;s a lot of typing if you have a bunch of tracks.&quot;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://bukk.it/ugh.gif&quot; alt=&quot;ugh&quot;&gt;&lt;/p&gt;
&lt;p&gt;Boy howdy are you in luck. Within the &lt;code class=&quot;language-text&quot;&gt;grid-template-columns&lt;/code&gt; property we have a nifty function we can utilize called &lt;code class=&quot;language-text&quot;&gt;repeat()&lt;/code&gt;. As you likely saw in the CodePen example above, our grid wrapper had this declaration &lt;code class=&quot;language-text&quot;&gt;grid-template-columns: repeat(3, 1fr);&lt;/code&gt;. I bet you can figure out how to use this function. The first integer in the function represents how many times we&apos;d like to repeat the following track sizing. The second parameter we pass to the function is the size. Which leads us to the next section, on the &lt;code class=&quot;language-text&quot;&gt;fr&lt;/code&gt; unit.&lt;/p&gt;
&lt;h3&gt;Pretty &lt;code class=&quot;language-text&quot;&gt;fr&lt;/code&gt;ickin&apos; cool huh?&lt;/h3&gt;
&lt;p&gt;It&apos;s late, this blog post is getting long, and I&apos;m getting overzealous with the puns. Lets wrap this up eh? The last thing we&apos;ll talk about is the new &lt;code class=&quot;language-text&quot;&gt;fr&lt;/code&gt; unit. This unit allows us to define flexible lengths and represents a fraction of the free space within the grid container.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;One important thing to note&lt;/em&gt; with the fr unit. Unlike, px, em, or percentages, the fr unit is not defined as a length. Which means it cannot be used in combination with px, em or percentages within something like the &lt;code class=&quot;language-text&quot;&gt;calc()&lt;/code&gt; function.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/css-grid-1/#fr-unit&quot;&gt;The spec itself&lt;/a&gt; spells out the calculations that are taking place to define the available free space. But what it boils down to in my head is this; Setting our &lt;code class=&quot;language-text&quot;&gt;grid-template-column&lt;/code&gt; track size to &lt;code class=&quot;language-text&quot;&gt;1fr&lt;/code&gt; gives us equally proportional grid items based on the width of the container.&lt;/p&gt;
&lt;p&gt;We are able to use decimals in conjunction with the fr unit. In our example, if we change our value to say, &lt;code class=&quot;language-text&quot;&gt;.5fr&lt;/code&gt; nothing changes. This is because each of our three items should still remain proportional. Because there are three items to a track, unless we tell them to be less than &lt;code class=&quot;language-text&quot;&gt;.33333fr&lt;/code&gt;, they will remain proportional.&lt;/p&gt;
&lt;p&gt;It&apos;s super difficult to talk about CSS grid in a general sense since there is &lt;strong&gt;so much&lt;/strong&gt; in the spec. But hopefully this is bit-sized enough for you to digest. And honestly this blog post is as much for me as it is for you, dear reader. It should be fun to write some more of these posts as I stumble my way through the grid.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://media.giphy.com/media/oSYflamt3IEjm/giphy.gif&quot; alt=&quot;the grid&quot;&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[The Case for (or against) the CSS @supports rule]]></title><description><![CDATA[With the increasing support for the feature detection  CSS property, I figured it might be a cool idea to dive into this feature a little…]]></description><link>https://dommagnifi.co/2017-03-06-the-case-for-or-against-the-supports-rule/</link><guid isPermaLink="false">https://dommagnifi.co/2017-03-06-the-case-for-or-against-the-supports-rule/</guid><pubDate>Mon, 06 Mar 2017 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;With the increasing support for the feature detection &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; CSS property, I figured it might be a cool idea to dive into this feature a little bit. While listening to &lt;a href=&quot;http://shoptalkshow.com/episodes/253-rapidfire-84/&quot;&gt;Episode 253&lt;/a&gt; of ShopTalk show, Mr. Chris Coyier mentioned possibly a GitHub repo or blog post that has some pre-baked use cases for the &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; property, and here we are!&lt;/p&gt;
&lt;p&gt;Here&apos;s a quick little description about what the &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; property does; Essentially, &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; works just like a media query, but detects certain features, rather than viewport dimensions, media types, etc. A feature query more or less. Using &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; in &lt;a href=&quot;http://caniuse.com/#feat=css-featurequeries&quot;&gt;browsers that support it&lt;/a&gt; (Everything except for IE11 and lower at this point) gives us the ability to check wether or not a feature is supported in that particular browser. If it is, the subsequent CSS rules are enforced. If the browser does not support the property, it will just ignore the rule altogether, no harm, no foul.&lt;/p&gt;
&lt;p&gt;The theory is that this would give us an opportunity to conditionally apply CSS based on browser support. A neat thought for sure, but in researching for this blog post, I had a hard time coming up with a solid set of recipes for the rule. Let&apos;s run through some of the basic scenarios that crossed my mind first.&lt;/p&gt;
&lt;h2&gt;&lt;code class=&quot;language-text&quot;&gt;@supports(display: flexbox)&lt;/code&gt;&lt;/h2&gt;
&lt;p&gt;Alright, so a colleague of yours just sent you an awesome design. Nice grid layout. Time to &lt;strong&gt;flex&lt;/strong&gt; your CSS muscles and use some flexbox. But oh no! The accounts team just informed you that you have to support IE9. Well shoot, let&apos;s play out how this scenario could go utilizing the &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; rule. Lets use the classic use case for flexbox; You have multiple things (&lt;code class=&quot;language-text&quot;&gt;.thing&lt;/code&gt;) with a heading and description inside. The description text length is variable, and you want to make sure all the &lt;code class=&quot;language-text&quot;&gt;.thing&lt;/code&gt;s are the same height, regardless of content length. Maybe something like this:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;scss&quot;&gt;&lt;pre class=&quot;language-scss&quot;&gt;&lt;code class=&quot;language-scss&quot;&gt;  &lt;span class=&quot;token selector&quot;&gt;.thing &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;border&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2px solid #efefef&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 10px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 20px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token comment&quot;&gt;// Fallback for IE9 if browser&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// doesn&apos;t support flexbox.&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;float&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; left&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;calc&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;33.333333% &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; 20px&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token selector&quot;&gt;h2 &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #2b2b2b&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;token selector&quot;&gt;.description &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;font-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token comment&quot;&gt;// Insert fanciness here&lt;/span&gt;
  &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@supports&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; flexbox&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token selector&quot;&gt;.thing-wrapper &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;align-items&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; stretch&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; flex&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;justify-content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;token selector&quot;&gt;.thing &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;flex&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0 1 33.333333%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Awesome! That looks like a solid use case for &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt;. We&apos;ve got a percentage width, and a float applied to the &lt;code class=&quot;language-text&quot;&gt;.thing&lt;/code&gt; as a fallback for if flexbox is not supported. 👍&lt;/p&gt;
&lt;p&gt;However, to play devils advocate here, what&apos;s to stop us from just doing this:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;scss&quot;&gt;&lt;pre class=&quot;language-scss&quot;&gt;&lt;code class=&quot;language-scss&quot;&gt;  &lt;span class=&quot;token selector&quot;&gt;.thing-wrapper &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;align-items&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; stretch&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; flex&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;justify-content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

  &lt;span class=&quot;token selector&quot;&gt;.thing &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;border&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2px solid #efefef&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;flex&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 0 1 33.333333%&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;margin&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 10px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 20px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token comment&quot;&gt;//IE9 support&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;float&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; left&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;calc&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;33.333333% &lt;span class=&quot;token operator&quot;&gt;-&lt;/span&gt; 60px&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

    &lt;span class=&quot;token selector&quot;&gt;h2 &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #2b2b2b&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;

    &lt;span class=&quot;token selector&quot;&gt;.description &lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;font-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 1rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The &lt;code class=&quot;language-text&quot;&gt;.thing-wrapper&lt;/code&gt; properties will be ignored, as IE9 doesn&apos;t recognize them, and the float and width properties will be ignored on newer browsers, as the &lt;code class=&quot;language-text&quot;&gt;display: flex&lt;/code&gt; property takes over. Now, organizationally, it might be nice to throw those properties that older browsers don&apos;t support into a nice block. But functionally, the benefit seems a bit limited.&lt;/p&gt;
&lt;h2&gt;Hello Operators&lt;/h2&gt;
&lt;p&gt;Let&apos;s try another example. The &lt;code class=&quot;language-text&quot;&gt;@support&lt;/code&gt; rule also accepts a few additional operators: &lt;code class=&quot;language-text&quot;&gt;not&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;and&lt;/code&gt;, and &lt;code class=&quot;language-text&quot;&gt;or&lt;/code&gt;. You can chain these operators to get some fancy results. For example, you can tell tell the &lt;code class=&quot;language-text&quot;&gt;@support&lt;/code&gt; rule to fire when a browser does not support a CSS property.&lt;/p&gt;
&lt;p&gt;Let&apos;s say we want to try out some awesome fancy CSS variables (not utilizing SCSS as my example above does). If the browser does not support CSS variables, then fire off some CSS to compensate.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;css&quot;&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;  &lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@supports&lt;/span&gt; not &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token property&quot;&gt;--color-1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #c0ffee&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token selector&quot;&gt;.coffee&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #c0ffee&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;A basic example, but it gets the job done. What we&apos;re saying here is if the browser does &lt;em&gt;not&lt;/em&gt; support the use of CSS variables, apply the color directly to the coffee div. This sounds pretty good, but now we have to consider if the browsers this declaration will apply to, even support the &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; rule. If the browser does not support the &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; rule to begin with, this chunk of code will get skipped over, and our coffee div will not get the styling we defined within.&lt;/p&gt;
&lt;p&gt;For this specific example, CSS variables &lt;a href=&quot;http://caniuse.com/#feat=css-variables&quot;&gt;are not supported&lt;/a&gt; in Edge v14. However the &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; rule is. Therefore, this chunk of code will work! Which is great, this definitely seems like a decent use case in this specific scenario.&lt;/p&gt;
&lt;h2&gt;Additional Scenarios&lt;/h2&gt;
&lt;p&gt;To try to remain as unbiased as I could after these two original thoughts, I also ran through a few more scenarios that I won&apos;t go into as verbosely as I did in the two above.&lt;/p&gt;
&lt;p&gt;I tried to find some benefit in the use of the rule for CSS keyframes, which ended with the same issues I had with our first flexbox example. I checked out the new &lt;code class=&quot;language-text&quot;&gt;display: flow-root&lt;/code&gt; property coming down the line (It&apos;s &lt;a href=&quot;https://css-tricks.com/display-flow-root/&quot;&gt;a neat property&lt;/a&gt; that replaces the long standing clearfix). This was a good case for the &lt;code class=&quot;language-text&quot;&gt;not&lt;/code&gt; operator, much like our CSS variable example. And lastly I checked out the use case for CSS 3D transforms. And much like our flexbox example, found the same issues.&lt;/p&gt;
&lt;h2&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;The bottom line here I think, is that the idea of the &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; rule was a fantastic one in the days of yore, when browser support for various CSS properties was a vast, convoluted mess. But today, browser vendors are beginning to support properties at roughly the same time. And even if they don&apos;t, it&apos;s not as if the same logic JavaScript follows, applies here. If a browser doesn&apos;t recognize a CSS property, it skips over it and moves on. There&apos;s no perceived performance benefit to utilizing the &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; rule as far as I can tell. There are certainly a few good cases to utilize &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; and the &lt;code class=&quot;language-text&quot;&gt;not&lt;/code&gt; operator. Especially for older versions of Edge that don&apos;t support things like CSS variables. However, to me, the &lt;code class=&quot;language-text&quot;&gt;@supports&lt;/code&gt; rule seems mostly cosmetic, and provides a clean way to organize CSS properties that your current project&apos;s browser requirements may not allow for you to utilize.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Introduction to ARIA Attributes]]></title><description><![CDATA[Making the web accessible for all who use it is a massively important part of our job. Recently I was able to work on a component library…]]></description><link>https://dommagnifi.co/2016-09-23-introduction-to-aria-attributes/</link><guid isPermaLink="false">https://dommagnifi.co/2016-09-23-introduction-to-aria-attributes/</guid><pubDate>Fri, 23 Sep 2016 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;Making the web accessible for all who use it is a massively important part of our job. Recently I was able to work on a component library that had an emphasis on accessibility, and I got to learn a pretty decent amount about ARIA roles and attributes that help browsers and screen readers to properly identify and define various components.&lt;/p&gt;
&lt;h3&gt;What is ARIA?&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;&quot;WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.&quot;
— &lt;a href=&quot;https://www.w3.org/WAI/intro/aria.php&quot;&gt;https://www.w3.org/WAI/intro/aria.php&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;At it&apos;s core ARIA aims to help folks with disabilities, particularly people that rely on a screen reader or cannot use a mouse. Tab targeting and properly defined components on the page help accomplish this.&lt;/p&gt;
&lt;h3&gt;How do you use it?&lt;/h3&gt;
&lt;p&gt;The spec linked above goes into great detail about the vast spectrum of ARIA roles and attributes. These attributes are added to various DOM nodes just as any other attribute is added. A relatively common example is that of the icon. When you&apos;re utilizing some sort of technique that you wouldn&apos;t want a screen reader to attempt to decipher, you would tell that screen reader to essentially skip the node.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;html&quot;&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;i&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;super-fancy-icon&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-hidden&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;true&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;i&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;All the various ARIA attributes are implemented this way. Some of these attributes require an ID to reference back to, others don&apos;t come across with the &lt;code class=&quot;language-text&quot;&gt;aria-&lt;/code&gt; prefix. Lets get into some examples to see that in action.&lt;/p&gt;
&lt;h3&gt;&lt;code class=&quot;language-text&quot;&gt;role&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/wai-aria-1.1/#usage_intro&quot;&gt;https://www.w3.org/TR/wai-aria-1.1/#usage_intro&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;The ARIA &lt;code class=&quot;language-text&quot;&gt;role&lt;/code&gt; attribute is set on an element in the DOM that normal HTML5 implied semantics are not applied to (the &lt;code class=&quot;language-text&quot;&gt;&amp;lt;nav&amp;gt;&lt;/code&gt; element for example has a &apos;nav&apos; role implied with it). For more complex pieces of functionality, a &lt;code class=&quot;language-text&quot;&gt;role&lt;/code&gt; must be applied in order for assistive technologies to be able to correctly interpret, and so as to not confuse that element with similar elements. Here&apos;s an example:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;html&quot;&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;ul&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;menubar&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;menuitem&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;About&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;menuitem&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Work&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;li&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;menuitem&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Contact&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;li&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;ul&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;There are various roles that an element cat have, which are &lt;a href=&quot;https://www.w3.org/TR/wai-aria/roles#widget_roles&quot;&gt;listed here&lt;/a&gt;. The ones above are explained by the following:&lt;/p&gt;
&lt;h4&gt;&lt;code class=&quot;language-text&quot;&gt;menubar&lt;/code&gt;&lt;/h4&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/wai-aria/roles#menubar&quot;&gt;https://www.w3.org/TR/wai-aria/roles#menubar&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;A presentation of menu that usually remains visible and is usually presented horizontally.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4&gt;&lt;code class=&quot;language-text&quot;&gt;menuitem&lt;/code&gt;&lt;/h4&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/wai-aria/roles#menuitem&quot;&gt;https://www.w3.org/TR/wai-aria/roles#menuitem&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;An option in a set of choices contained by a menu or menubar.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;There are quite a few other ARIA attributes that can help to define a navigation or a menu on attributes that assistive technologies do not traditionally identify as such.&lt;/p&gt;
&lt;h3&gt;&lt;code class=&quot;language-text&quot;&gt;aria-hidden&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/wai-aria-1.1/#aria-hidden&quot;&gt;https://www .w3.org/TR/wai-aria-1.1/#aria-hidden&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;This one is relatively common. I&apos;m sure you have seen a technique or a methodology that utilizes this ARIA attribute. Especially in cases that require the hiding of visibly rendered content. This commonly pops up when you&apos;re employing some sort of icon system (SVGs can be made &lt;a href=&quot;https://css-tricks.com/accessible-svgs/&quot;&gt;very accessible&lt;/a&gt;), or image replacement and things of that nature.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;html&quot;&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;span&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;screen-reader-text icon-codepen&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-hidden&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;true&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;CodePen&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;span&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The spec recommends caution when utilizing this attribute because you&apos;re choosing to hide the visibly rendered content from assistive technologies. So be absolutely sure that the content that is output is accessible by those technologies elsewhere on the site.&lt;/p&gt;
&lt;h3&gt;&lt;code class=&quot;language-text&quot;&gt;aria-selected&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/wai-aria-1.1/#aria-selected&quot;&gt;https://www.w3.org/TR/wai-aria-1.1/#aria-selected&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;With &lt;code class=&quot;language-text&quot;&gt;aria-selected&lt;/code&gt;, you&apos;re telling assistive technologies that a component (or multiple components) on the page are selected. A relatively common use case here is with something like tabs or accordions.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;html&quot;&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-header&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-selected&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;true&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Selected Accordion Header&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-content&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Super fancy tab content!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-header&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-selected&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;false&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Not Selected Accordion Header&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-content&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Super fancy tab content!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-header&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-selected&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;false&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Not Selected Accordion Header&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-content&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Super fancy tab content!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In the snippet above, the first accordion item is selected, and likely expanded (check out the next section for an explanation of aria-expanded). As the user navigates through the accordion, the &lt;code class=&quot;language-text&quot;&gt;aria-selected&lt;/code&gt; attribute should be toggled.&lt;/p&gt;
&lt;h3&gt;&lt;code class=&quot;language-text&quot;&gt;aria-expanded&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/wai-aria-1.1/#aria-expanded&quot;&gt;https://www.w3.org/TR/wai-aria-1.1/#aria-expanded&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Much like selected, this one is pretty self explainitory. &lt;code class=&quot;language-text&quot;&gt;aria-expanded&lt;/code&gt; indicates to assistive technologies wether or not an item is expanded or collapsed. We&apos;ll expand on our above example.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;html&quot;&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-header&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-selected&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;true&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-expanded&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;true&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Selected Accordion Header&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-content&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Super fancy tab content!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-header&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-selected&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;false&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-expanded&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;false&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Not Selected Accordion Header&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-content&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Super fancy tab content!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;a&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;#&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-header&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-selected&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;false&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-expanded&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;false&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Not Selected Accordion Header&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;a&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;accordion-content&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Super fancy tab content!&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Similarly, the &lt;code class=&quot;language-text&quot;&gt;aria-expanded&lt;/code&gt; attribute should be toggled as the assistive technology navigates through the accordion.&lt;/p&gt;
&lt;h3&gt;&lt;code class=&quot;language-text&quot;&gt;aria-labelledby&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby&quot;&gt;https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;code class=&quot;language-text&quot;&gt;aria-labelledby&lt;/code&gt; and the next item, &lt;code class=&quot;language-text&quot;&gt;aria-describedby&lt;/code&gt; are very similar. Both ARIA attributes tell a screen reader how to describe an element on the page. The value passed into this attribute is a space separated list of IDs that link to static text on the page that will be referenced to help describe the element.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;html&quot;&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;main&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;main-content&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-labelledby&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;main-content-title&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;main-content-title&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;How to get started with accessibility.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;WAI-ARIA is a technical specification that provides a framework to improve the accessibility and interoperability of web content and applications. This docu...&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;main&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In the above example, the &lt;code class=&quot;language-text&quot;&gt;aria-labelledby&lt;/code&gt; attribute value points to the &lt;code class=&quot;language-text&quot;&gt;#main-content-title&lt;/code&gt; which would be a solid short snippet of static text that describes the content in the related element.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;A note of caution&lt;/em&gt;, don&apos;t use &lt;code class=&quot;language-text&quot;&gt;aria-labelledby&lt;/code&gt; in the event that you&apos;re trying to describe things like an icon, or an individual element. The &lt;a href=&quot;https://www.w3.org/TR/wai-aria-1.1/#aria-label&quot;&gt;aria-label&lt;/a&gt; attribute is used to define a string that labels the current element, whereas the &lt;code class=&quot;language-text&quot;&gt;aria-labelledby&lt;/code&gt; attribute references an ID.&lt;/p&gt;
&lt;h3&gt;&lt;code class=&quot;language-text&quot;&gt;aria-describedby&lt;/code&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.w3.org/TR/wai-aria-1.1/#aria-describedby&quot;&gt;https://www.w3.org/TR/wai-aria-1.1/#aria-describedby&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Much like the &lt;code class=&quot;language-text&quot;&gt;aria-labelledby&lt;/code&gt; attribute, &lt;code class=&quot;language-text&quot;&gt;aria-describedby&lt;/code&gt; gives the screen reader even further detail about the content associated with a certain element. It works exactly like the former by parsing a space separated list of IDs that describe the element.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;html&quot;&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;main&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;main-content&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-labelledby&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;main-content-title&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;aria-describedby&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;main-content-excerpt&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;main-content-title&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;How to get started with accessibility.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;main-content-excerpt&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;In this article we&apos;ll explore the basics regarding accessibility, and some of the fancy attributes you can start using today.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;WAI-ARIA is a technical specification that provides a framework to improve the accessibility and interoperability of web content and applications. This docu...&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;main&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;As you can see, quite similar, but just identified as a longer description.&lt;/p&gt;
&lt;h3&gt;ARIA Done yet?&lt;/h3&gt;
&lt;p&gt;Yep! That&apos;s a pretty solid start when it comes to the basic ARIA attributes I&apos;ve run across recently. Next time you&apos;re building out a component on your site, give a second to think about how a screen reader would interpret that element, and perhaps these ARIA attributes will help you go forth and make a more accessible web!&lt;/p&gt;</content:encoded></item><item><title><![CDATA[The State of Web Typography]]></title><description><![CDATA[I don't know about you, but I love to look at sites like Medium, the new Google Fonts site, and any other site that has incredible…]]></description><link>https://dommagnifi.co/2016-06-21-the-state-of-web-typography/</link><guid isPermaLink="false">https://dommagnifi.co/2016-06-21-the-state-of-web-typography/</guid><pubDate>Mon, 20 Jun 2016 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;I don&apos;t know about you, but I love to look at sites like &lt;a href=&quot;https://medium.com/&quot;&gt;Medium&lt;/a&gt;, the new &lt;a href=&quot;https://fonts.google.com/&quot;&gt;Google Fonts&lt;/a&gt; site, and any other site that has incredible typography. It feels good when a site is able to bring that familiar feel of print to the web. Furthermore, their amazing ability to control the multitude of typographic nuances like kerning (letter-spacing), leading (line-height) and of course font sizes that end up being perfectly balanced. With &lt;a href=&quot;http://caniuse.com/#search=vw&quot;&gt;browser support&lt;/a&gt; for &lt;code class=&quot;language-text&quot;&gt;vw&lt;/code&gt; and &lt;code class=&quot;language-text&quot;&gt;vh&lt;/code&gt; at an acceptable level, I figured it would be fun to dive into the various methods of achieving typographic bliss.&lt;/p&gt;
&lt;h2&gt;The &lt;code class=&quot;language-text&quot;&gt;:root&lt;/code&gt; Method&lt;/h2&gt;
&lt;p&gt;Lets start with the method I&apos;m currently using myself. &lt;a href=&quot;https://twitter.com/MikeRiethmuller&quot;&gt;Mike Riethmuller&lt;/a&gt; wrote a post titled &lt;a href=&quot;http://madebymike.com.au/writing/precise-control-responsive-typography/&quot;&gt;Precise control over responsive typography&lt;/a&gt;. This method sets out to give developers control of their typography while utilizing &lt;code class=&quot;language-text&quot;&gt;vw&lt;/code&gt; unit. By themselves this unit of measurement don&apos;t really offer us a whole lot of control. If we were to just do something like this:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;css&quot;&gt;&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;h1&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;font-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 5vw&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We&apos;d get massive headings on larger browsers, and tiny ones on smaller browsers. The next step here would be to add media queries for various breakpoints and adjust the font size. Furthermore, the scaling of the font would not be smooth, instead at that breakpoint the text would jump from one size to the next. Not ideal.&lt;/p&gt;
&lt;h3&gt;calc() the :root&lt;/h3&gt;
&lt;p&gt;The beauty of Mike&apos;s method lies in setting the global font size, and calculating it based on the &lt;code class=&quot;language-text&quot;&gt;vw&lt;/code&gt;. Once you&apos;ve done this, you can utilize &lt;code class=&quot;language-text&quot;&gt;em&lt;/code&gt;s on your heading or paragraph tags very consistently throughout your site. Here&apos;s Mikes CodePen demo explaining his method:&lt;/p&gt;
&lt;p data-height=&quot;354&quot; data-theme-id=&quot;dark&quot; data-slug-hash=&quot;YPJJYv&quot; data-default-tab=&quot;css&quot; data-user=&quot;MadeByMike&quot; data-embed-version=&quot;2&quot; className=&quot;codepen&quot;&gt;See the Pen &lt;a href=&quot;http://codepen.io/MadeByMike/pen/YPJJYv/&quot;&gt;Precision responsive typography&lt;/a&gt; by Mike (&lt;a href=&quot;http://codepen.io/MadeByMike&quot;&gt;@MadeByMike&lt;/a&gt;) on &lt;a href=&quot;http://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/p&gt;
&lt;script async src=&quot;//assets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
&lt;p&gt;Since Mikes post, a few variations of this method have popped up.&lt;/p&gt;
&lt;h2&gt;Variations&lt;/h2&gt;
&lt;p&gt;Zell Liew has &lt;a href=&quot;http://zellwk.com/blog/viewport-based-typography/&quot;&gt;a great blog post&lt;/a&gt; that dives into the same basic principal of setting the font size globally (on the &lt;code class=&quot;language-text&quot;&gt;html&lt;/code&gt; element in his case). However in Zell&apos;s variation, he sets the font size once, and then utilizes percentages of that base font size to calculate the responsive font size based on viewport units. Check out this CodePen demo to see how he&apos;s handling the calculations:&lt;/p&gt;
&lt;p data-height=&quot;354&quot; data-theme-id=&quot;dark&quot; data-slug-hash=&quot;VarLaJ&quot; data-default-tab=&quot;css&quot; data-user=&quot;indrekpaas&quot; data-embed-version=&quot;2&quot; className=&quot;codepen&quot;&gt;See the Pen &lt;a href=&quot;http://codepen.io/indrekpaas/pen/VarLaJ/&quot;&gt;Cross-browser fluid type&lt;/a&gt; by Indrek Paas (&lt;a href=&quot;http://codepen.io/indrekpaas&quot;&gt;@indrekpaas&lt;/a&gt;) on &lt;a href=&quot;http://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/p&gt;
&lt;script async src=&quot;//assets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
&lt;p&gt;The great thing about both of these methods is that since the global font size is set dynamically you can create vertical rhythm by utilizing &lt;code class=&quot;language-text&quot;&gt;em&lt;/code&gt;s or even a &lt;a href=&quot;https://css-tricks.com/almanac/properties/l/line-height/&quot;&gt;unitless line height&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;And of course, &lt;a href=&quot;https://www.smashingmagazine.com/2016/05/fluid-typography/&quot;&gt;Smashing Magazine&lt;/a&gt; has a pretty solid variation of this method written up as well.&lt;/p&gt;
&lt;h2&gt;Molten Leading&lt;/h2&gt;
&lt;p&gt;Let me start by saying, my dad joke sense of humor automatically makes me love this method. Much like the &lt;code class=&quot;language-text&quot;&gt;:root&lt;/code&gt; method and it&apos;s variations I spoke about above, this one utilizes some calculations to set the line-height. &lt;a href=&quot;http://twitter.com/nicewebtype&quot;&gt;Tim Brown&lt;/a&gt; has a lovely blog post entitled &lt;a href=&quot;http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/&quot;&gt;Molten leading (or, fluid line-height)&lt;/a&gt; that started the conversation around this notion. Shortly after Mr. Mat Marquis built &lt;a href=&quot;https://github.com/Wilto/Molten-Leading&quot;&gt;a small jQuery function&lt;/a&gt; that utilized the calculations from Tim&apos;s post to set a fluid line-height.&lt;/p&gt;
&lt;p&gt;Though the post and the plugin are a bit dated, I still feel like the questions asked here are thought provoking ones. And perhaps with the emergence of viewport units, a calculation can be made in conjunction with the calculations made in the &lt;code class=&quot;language-text&quot;&gt;:root&lt;/code&gt; method to give us even more granular control over the vertical rhythm of our typography.&lt;/p&gt;
&lt;h2&gt;Other Resources&lt;/h2&gt;
&lt;p&gt;I also want to give a shoutout to this beautiful article from Robin Rendle entitled &lt;a href=&quot;https://robinrendle.com/essays/new-web-typography/&quot;&gt;The New Web Typography&lt;/a&gt;. He goes into great depth about the typographic decisions we make on the web, and the consequences that they yield.&lt;/p&gt;
&lt;h2&gt;Wrap it up&lt;/h2&gt;
&lt;p&gt;From what I can tell with a little bit of math, and some magic from viewport units, we as Front-End (Frontend, Front End) Developers are now able to think critically about the typography on our sites. Instead of just attributing random units of measurements to our headings, we&apos;re able to create some very well thought out and mathematically sound typography. Thanks for reading!&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Basic Class Toggle with Vanilla JS]]></title><description><![CDATA[✨UPDATE :: New version of this post using ES6 can be found here.✨ One of my goals for this year was to start to grasp vanilla JS a little…]]></description><link>https://dommagnifi.co/2016-05-16-basic-class-toggle-with-vanilla-js/</link><guid isPermaLink="false">https://dommagnifi.co/2016-05-16-basic-class-toggle-with-vanilla-js/</guid><pubDate>Mon, 16 May 2016 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;strong&gt;✨UPDATE :: &lt;a href=&quot;/2019-05-06-basic-class-toggle-with-vanilla-js-es6/&quot;&gt;New version of this post using ES6 can be found here.&lt;/a&gt;✨&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;One of my &lt;a href=&quot;/update/2015/12/29/2015.html&quot;&gt;goals for this year&lt;/a&gt; was to start to grasp vanilla JS a little bit more. While I was in school, Javascript and jQuery pretty much went hand in hand. Little was taught about vanilla JS, beyond the basics of course, in favor of the glory that was jQuery. It&apos;s understandable, that syntactic sugar is pretty irresistible.&lt;/p&gt;
&lt;p&gt;I&apos;m going to walk through a pretty common desire when writing Javascript, the class toggle.&lt;/p&gt;
&lt;p&gt;Let&apos;s take a look at how we would generally do this with jQuery. Beware though, you&apos;re going to see this next snippet and think &quot;Why are we even trying to do this in vanilla JS?!&quot;. I know...but check out &lt;a href=&quot;http://alistapart.com/blog/post/choosing-vanilla-javascript&quot;&gt;all&lt;/a&gt; &lt;a href=&quot;http://gomakethings.com/ditching-jquery-for-vanilla-js/&quot;&gt;these&lt;/a&gt; &lt;a href=&quot;https://teamtreehouse.com/community/pure-javascript-vs-jquery-2&quot;&gt;posts&lt;/a&gt; that advocate for the performance benefits of vanilla JS. I won&apos;t get into that here, this is purely intended to be a reference for when you decide to make the switch.&lt;/p&gt;
&lt;p&gt;Alright, so the basic jQuery class toggling function would look something like this:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token function&quot;&gt;$&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;.toggle-me&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;click&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token function&quot;&gt;$&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toggleClass&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;active&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Pretty straight forward. We&apos;ll take this apart piece by piece. The first thing we need to do with vanilla JS is to actually target the element. Now as I&apos;m sure you know there is always the option of utilizing &lt;code class=&quot;language-text&quot;&gt;getElementByID&lt;/code&gt;. But in this case, we&apos;re trying to target a class. In reality, we probably want to avoid using an ID if we can since the specificity could cause issues down the road.&lt;/p&gt;
&lt;h2&gt;Enter querySelector&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector&quot;&gt;MDN states&lt;/a&gt; that querySelector:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Returns the first element within the document that matches the specified group of selectors.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This is perfect for our case, we currently only have one element on the page with a class name of &lt;code class=&quot;language-text&quot;&gt;.toggle-me&lt;/code&gt;. If you have multiple elements on the page with the same class name, you&apos;ll need to look into &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll&quot;&gt;querySelectorAll&lt;/a&gt;, which I&apos;ll dive into in another blog post.&lt;/p&gt;
&lt;p&gt;So, lets set our classname to a variable to make it easy to reference.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;var&lt;/span&gt; el &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;.toggle-me&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Perfect, now we need some sort of way to detect when that element is clicked. If you were lucky enough to see the days when folks used the inline &lt;code class=&quot;language-text&quot;&gt;onclick&lt;/code&gt; function, then you&apos;ll have probably guessed where we&apos;re headed.&lt;/p&gt;
&lt;h2&gt;The Click&lt;/h2&gt;
&lt;p&gt;The &lt;code class=&quot;language-text&quot;&gt;onclick&lt;/code&gt; property allows us to utilize a function expression, or a named function defined elsewhere right within it. For this example I&apos;ll utilize a function expression just to keep things brief.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;var&lt;/span&gt; el &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;.toggle-me&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;onclick&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;clicked!&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Sweet! If you check your console you should see our &apos;clicked!&apos; logging.&lt;/p&gt;
&lt;h2&gt;classList&lt;/h2&gt;
&lt;p&gt;The last bit of code that we&apos;ll need will do the actual toggling of the class. If you&apos;ve done some searching you&apos;ll have noticed that there&apos;s not an independent toggle property in Javascript. Luckily, &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Element/classList&quot;&gt;classList&lt;/a&gt; comes to the rescue.&lt;/p&gt;
&lt;p&gt;The &lt;code class=&quot;language-text&quot;&gt;classList&lt;/code&gt; property by itself is pretty self explanatory. It outputs a collection of the class attributes of the passed element. If we were to run that on our &lt;code class=&quot;language-text&quot;&gt;.toggle-me&lt;/code&gt; class:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;var&lt;/span&gt; el &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;.toggle-me&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;onclick&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classList&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;You&apos;ll notice that the output in the console provides us with a DOMTokenList object. Expanding that object will show that the first value in the object, is &quot;toggle-me&quot;.&lt;/p&gt;
&lt;p&gt;With this object we can now use the &lt;code class=&quot;language-text&quot;&gt;toggle()&lt;/code&gt; method associated with the &lt;code class=&quot;language-text&quot;&gt;classList&lt;/code&gt; property. Much like with jQuery, in addition to &lt;code class=&quot;language-text&quot;&gt;toggle()&lt;/code&gt;, the &lt;code class=&quot;language-text&quot;&gt;classList&lt;/code&gt; property gives us access to the &lt;code class=&quot;language-text&quot;&gt;add()&lt;/code&gt;, &lt;code class=&quot;language-text&quot;&gt;remove()&lt;/code&gt;, and &lt;code class=&quot;language-text&quot;&gt;item()&lt;/code&gt; methods. For our purposes, we&apos;ll just stick with &lt;code class=&quot;language-text&quot;&gt;toggle()&lt;/code&gt;.&lt;/p&gt;
&lt;h2&gt;Result&lt;/h2&gt;
&lt;p&gt;Unfortunately, with vanilla JS the &lt;code class=&quot;language-text&quot;&gt;$(this)&lt;/code&gt; property doesn&apos;t exist. However, since we are caching the the element we are manipulating, all we need to do is attach the &lt;code class=&quot;language-text&quot;&gt;classList&lt;/code&gt; property to our element, and then chain our &lt;code class=&quot;language-text&quot;&gt;toggle()&lt;/code&gt; method, passing on our active class like so:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;var&lt;/span&gt; el &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;.toggle-me&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;

el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function-variable function&quot;&gt;onclick&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  el&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;classList&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;toggle&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;active&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;And voilà! You&apos;re now accomplishing a simple class toggle on an element utilizing pure Javascript. Pat yourself on the back for saving that extra HTTP request and removing your dependency on jQuery.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[What can we do with ServiceWorker]]></title><description><![CDATA[Before you read on, be sure to check out my first blog post about the Service Worker API. Service workers require a secure connection, and…]]></description><link>https://dommagnifi.co/2016-02-02-what-can-we-do-with-service-workers/</link><guid isPermaLink="false">https://dommagnifi.co/2016-02-02-what-can-we-do-with-service-workers/</guid><pubDate>Tue, 02 Feb 2016 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;Before you read on, be sure to check out &lt;a href=&quot;/update/2015/12/20/service-workin-for-the-weekend.html&quot;&gt;my first blog post&lt;/a&gt; about the Service Worker API. Service workers require a secure connection, and that post will show you how to set your site up with CloudFlare in order to serve your site via https.&lt;/p&gt;
&lt;h2&gt;First things First&lt;/h2&gt;
&lt;p&gt;Regardless of our end game, we need to register our service worker. We&apos;re essentially going to be working in two javascript files. The first one we&apos;ll call &lt;code class=&quot;language-text&quot;&gt;app.js&lt;/code&gt; which is where the initial scripts for your site are housed. That is where this first snippet below will be housed.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;serviceWorker&apos;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;in&lt;/span&gt; navigator&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  navigator&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;serviceWorker&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;register&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;/your-site/serviceworker.js&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;reg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;Registration succeeded.&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;catch&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;Registration failed with &apos;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; error&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Lets break this down and establish what is happening here.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token comment&quot;&gt;//Check to see if service worker is supported in the current browser&lt;/span&gt;
&lt;span class=&quot;token keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;serviceWorker&apos;&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;in&lt;/span&gt; navigator&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// Register our service worker. The register function relates&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// to the javascript file within your site containing the&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// service worker directives.&lt;/span&gt;
  navigator&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;serviceWorker&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;register&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;/your-site/serviceworker.js&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;reg&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token comment&quot;&gt;// If the registration worked, success!&lt;/span&gt;
    console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;Registration succeeded.&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;catch&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;error&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token comment&quot;&gt;// Registration failed.&lt;/span&gt;
    console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;log&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;Registration failed with &apos;&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;+&lt;/span&gt; error&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The code above is not the service worker itself, rather it is registering our service worker within a scope. That being said, once a page within the scope is loaded, the service worker will run. This happens individually on each page load so long as it is within scope.&lt;/p&gt;
&lt;h2&gt;Cache Rules Everything Around Me&lt;/h2&gt;
&lt;p&gt;Now we get to the juicy stuff. Now that we have registered a service worker, let&apos;s look at how we can utilize the cache to grab the files you&apos;d like to utilize for offline mode on your site. In our second file, which I&apos;m calling &lt;code class=&quot;language-text&quot;&gt;serviceworker.js&lt;/code&gt; place this next snippet.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addEventListener&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;install&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;event&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  event&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;waitUntil&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;
    caches&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;open&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;offline&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;cache&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; cache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addAll&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;
        &lt;span class=&quot;token string&quot;&gt;&apos;/&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token string&quot;&gt;&apos;/index.html&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token string&quot;&gt;&apos;/update/2015/12/29/2015.html&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token string&quot;&gt;&apos;/css&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token string&quot;&gt;&apos;/css/main.css&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token string&quot;&gt;&apos;/app.js&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;
        &lt;span class=&quot;token string&quot;&gt;&apos;/serviceworker.js&apos;&lt;/span&gt;
      &lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Since we are within the the registered service worker the scope allows us to utilize &lt;code class=&quot;language-text&quot;&gt;this&lt;/code&gt;. The first line of this snippet adds an install event listener. We then chain the &lt;code class=&quot;language-text&quot;&gt;waitUntil&lt;/code&gt; method which delays the proceeding code from running until the ES6 promise has been fulfilled. Then, utilizing the &lt;code class=&quot;language-text&quot;&gt;caches.open&lt;/code&gt; method, we open a new cache titled offline. This is where our cached files will be stored. This returns a promise for the cache, and once that is fulfilled we utilize the &lt;code class=&quot;language-text&quot;&gt;addAll&lt;/code&gt; function which adds the specified files to the cache.&lt;/p&gt;
&lt;p&gt;I&apos;ve added myself the homepage of my site, along with the latest post.&lt;/p&gt;
&lt;p&gt;Lastly we&apos;re going to need to tell the browser that when it detects that it&apos;s offline, to access the cache that we created with the service worker and utilize the files found there.&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;javascript&quot;&gt;&lt;pre class=&quot;language-javascript&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addEventListener&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;fetch&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;event&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token keyword&quot;&gt;var&lt;/span&gt; response&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  event&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;respondWith&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;caches&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;match&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;event&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;request&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;catch&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;fetch&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;event&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;request&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;r&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
    response &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; r&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    caches&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;open&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&apos;offline&apos;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;then&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token keyword&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;cache&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
      cache&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;put&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;event&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;request&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; response&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
    &lt;span class=&quot;token keyword&quot;&gt;return&lt;/span&gt; response&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;clone&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;We do this by utilizing the fetch event listener which tells the browser to respond with the cache. The first &lt;code class=&quot;language-text&quot;&gt;.catch&lt;/code&gt; function detects if the promise rejects, and returns the default server response. We then utilize the &lt;code class=&quot;language-text&quot;&gt;.then&lt;/code&gt; method to open our offline cache and put the response onto the page.&lt;/p&gt;
&lt;p&gt;You can check out my versions of both the &lt;a href=&quot;https://github.com/magnificode/magnificode.github.io/blob/master/app.js&quot;&gt;app.js&lt;/a&gt; and the &lt;a href=&quot;https://github.com/magnificode/magnificode.github.io/blob/master/serviceworker.js&quot;&gt;serviceworker.js&lt;/a&gt; files.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[👋 2015]]></title><description><![CDATA[I've been seeing these fantastic year in review retro articles pop up all over the place this week. I'm going to take a stab at reviewing my…]]></description><link>https://dommagnifi.co/2015-12-29-👋-2015/</link><guid isPermaLink="false">https://dommagnifi.co/2015-12-29-👋-2015/</guid><pubDate>Tue, 29 Dec 2015 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;I&apos;ve been seeing these fantastic year in review retro articles pop up all over the place this week. I&apos;m going to take a stab at reviewing my year both professionally and personally, and then set a few goals for myself for the upcoming year. I really love this format as I feel like it will hold me accountable, and help me strive to hit my goals. The last thing I want is to let you down, dear reader!&lt;/p&gt;
&lt;h2&gt;Let’s Start Professional&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;I Moved on from my job of almost 4 years with no new job lined up.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This was a massive one for me, and really falls into both the professional and personal category. The group of folks I worked with were like family, and I &lt;a href=&quot;https://dommagnifi.co/update/2015/09/25/being-comfortable-with-being-uncomfortable.html&quot;&gt;wrote at length about that.&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;I Learned some Backbone, Handlebars, and Node.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;What I didn’t get a chance to write about is what followed. A week or so after leaving I got a contracting gig with an awesome agency. I was fortunate enough to work with a pal of mine, and got to learn some Backbone, Handlebars, and Node in the process.&lt;/p&gt;
&lt;p&gt;It was really the first time I got to play around with an MV* framework in production, and it was great! Backbone provided a really easy way to set up user signup, and the basic CRUD needed for the project pages associated with the site. The gig only lasted six weeks, but in those six weeks I was able to learn quite a bit. Not to mention the couple of cool components I got to build.&lt;/p&gt;
&lt;p data-height=&quot;268&quot; data-theme-id=&quot;21523&quot; data-slug-hash=&quot;GpqGOm&quot; data-default-tab=&quot;result&quot; data-user=&quot;magnificode&quot; className=&apos;codepen&apos;&gt;See the Pen &lt;a href=&apos;http://codepen.io/magnificode/pen/GpqGOm/&apos;&gt;Neat Parallax Hero Effect&lt;/a&gt; by Dominic Magnifico (&lt;a href=&apos;http://codepen.io/magnificode&apos;&gt;@magnificode&lt;/a&gt;) on &lt;a href=&apos;http://codepen.io&apos;&gt;CodePen&lt;/a&gt;.&lt;/p&gt;
&lt;script async src=&quot;//assets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
&lt;p data-height=&quot;268&quot; data-theme-id=&quot;21523&quot; data-slug-hash=&quot;VvyJNQ&quot; data-default-tab=&quot;result&quot; data-user=&quot;magnificode&quot; className=&apos;codepen&apos;&gt;See the Pen &lt;a href=&apos;http://codepen.io/magnificode/pen/VvyJNQ/&apos;&gt;Marty McFlyout Nav&lt;/a&gt; by Dominic Magnifico (&lt;a href=&apos;http://codepen.io/magnificode&apos;&gt;@magnificode&lt;/a&gt;) on &lt;a href=&apos;http://codepen.io&apos;&gt;CodePen&lt;/a&gt;.&lt;/p&gt;
&lt;script async src=&quot;//assets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
&lt;blockquote&gt;
&lt;p&gt;I gave my first ever presentation at a local meetup!&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This was probably one of the more nerve-racking things I’ve had to do. I don’t fancy myself a very apt public speaker, however it turned out great. &lt;a href=&quot;https://dommagnifi.co/update/2015/08/17/what-i-learned-from-my-frist-speaking-gig.html&quot;&gt;I wrote about what I learned&lt;/a&gt;, but the short of it is that speaking to a group of people helped me understand the subject I was talking about even better, and opened the door for me to feel comfortable giving more talks to larger audiences.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;I started writing.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;You’re reading the result of that. I rebuilt my blog with Jekyll and starting writing. The magnificode blog saw a staggering one post in 2014. I increased that number tenfold in 2015! I got super close to averaging one post a month, which I’m pretty happy about.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;I started a new job.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Last, and certainly not least, is my new job as Senior Front-End (Frontend/Front End/Front-end) Engineer (Developer, Designer, Code Pusher). I could go on and on about how much I’ve learned in the couple months that it’s been since I started, but I’ll try and keep it short.&lt;/p&gt;
&lt;p&gt;I’ve learned &lt;a href=&quot;https://vip.wordpress.com/2014/06/20/the-importance-of-escaping-all-the-things/&quot;&gt;the importance of escaping all the things&lt;/a&gt; in WordPress.&lt;/p&gt;
&lt;p&gt;I’ve learned how insanely extensible WordPress is by itself through the use of hooks. I almost exclusively used to use Advanced Custom Fields for extend WordPress, but I’ve learned how to eliminate the need for that almost completely. (Repeater fields, and the Flexible Content Type in ACF are still immensely helpful).&lt;/p&gt;
&lt;p&gt;I’ve learned how to set up a local environment for enterprise level clients with &lt;a href=&quot;https://github.com/Varying-Vagrant-Vagrants/VVV&quot;&gt;vvv&lt;/a&gt; and how to deploy those sites with &lt;a href=&quot;http://beanstalkapp.com/&quot;&gt;beanstalk&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;And lastly, the company I work for was kind enough to purchase the awesome &lt;a href=&quot;https://reactforbeginners.com/&quot;&gt;React for Beginners&lt;/a&gt; course by &lt;a href=&quot;http://wesbos.com/&quot;&gt;Wes Bos&lt;/a&gt;. I came out of that with two pages of dense notes, a hugely commented project, and a solid beginners understanding of the React framework.&lt;/p&gt;
&lt;p&gt;As I write this, I’ve been fighting the feeling that I’m not growing, or expanding quick enough professionally. But the sheer amount that I have written above has proven that worry utterly wrong. In the past 365 days I have learned a ton!&lt;/p&gt;
&lt;h2&gt;Gettin’ Personal&lt;/h2&gt;
&lt;p&gt;Personally I hit a few milestones that I find to be quite awesome.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;I moved out of a house I was living in with 4 of my closest friends, and into a house with my girlfriend.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Always a terrifying step in any relationship, but I’m pretty damn lucky to have such an awesome woman. The first half of the year was spent long distance as she finished up school in New York. She then moved into the house with me and my four buddies, a bold step for a girlfriend, but it worked out great. She’s without a doubt one of my closest friends, and the transition was seamless.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;I logged over 200 workouts at the gym, lifting a little over 7.5 million pounds in the process, and started eating much healthier.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This was a big goal for me. Towards the middle of 2013 I really put a focus on my health ( Before I moved into the house with my friends I lived by myself, and living by yourself has a sneaky way of making it easy to eat EVERYTHING ALWAYS). I made it a point then to go to start going the gym, In the past year I’ve lost almost 10 pounds, and my main lifts continue to increase. Hooray progress!&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;I drove from New York to Denver in 2 days.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I’ve never been out of the country, so any travel that I do get to do is super exciting. Once my girlfriend finished school, I flew out to New York to help her move back to Denver. We drove to Chicago in one day, had a lovely dinner on the river. We then drove from to Chicago to Denver in one shot. We had to avoid some nasty storms and tornadoes in Kansas to boot!&lt;/p&gt;
&lt;h2&gt;Looking Ahead&lt;/h2&gt;
&lt;p&gt;This is the hard part for me, I have an insatiable desire to learn all the things, and learn them immediately, so setting reasonable goals for myself is tough, but here it goes...my professional and personal goals for 2016.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Gain a better understanding of vanilla Javascript&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;To go along with that dive into WebGL and libraries like Three.js&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;I want to get to the point where I can make something like the folks at &lt;a href=&quot;http://activetheory.net/home&quot;&gt;Active Theory&lt;/a&gt; have in ther &lt;a href=&quot;http://activetheory.net/lab&quot;&gt;lab&lt;/a&gt;...brilliant, beautiful stuff.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Speak at three or more separate conferences/meetups&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Attend 6 or more conferences/meetups, network, meet people, collaborate!&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;I’m actually part of the way there, the folks at CodePen and myself have organized Denver&apos;s first &lt;a href=&quot;https://nvite.com/CodePenDenver/&quot;&gt;CodePen Meetup&lt;/a&gt; in February. You should come!&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Draw a lot more&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;I have a neat little drawing tablet and recently purchased some great pens for line art and illustration. I&apos;m drawing a ton of inspiration &lt;a href=&quot;http://www.hydro74.com/portfolio/illustration/&quot;&gt;from&lt;/a&gt; &lt;a href=&quot;https://www.instagram.com/sonywicaksana/&quot;&gt;all&lt;/a&gt; &lt;a href=&quot;http://chasetafoyaart.com/section/196443_Design.html&quot;&gt;of&lt;/a&gt; &lt;a href=&quot;http://tattoosbylaurajade.com/tattoos/&quot;&gt;these&lt;/a&gt; &lt;a href=&quot;https://www.behance.net/gallery/32179625/Fifi-Pascale&quot;&gt;talented&lt;/a&gt; &lt;a href=&quot;https://www.behance.net/JackHarvatt&quot;&gt;folks&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Read more&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;I love books, I just need to make the time to read, at the very least 30 minutes five days a week before bed.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Get &lt;a href=&quot;http://img07.deviantart.net/5122/i/2006/134/9/f/goodbye_blue_sky_by_domkantthink.jpg&quot;&gt;my 1972 Pontiac LeMans&lt;/a&gt; repainted, and back to it’s former glory.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;2015 has been a year of much learning and much growth. Oh also...you know...&lt;strong&gt;Star Wars&lt;/strong&gt;...&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://media.giphy.com/media/yRw8QdcPFRyec/giphy.gif&quot; alt=&quot;STAR WARS!&quot;&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Service Workin' for the Weekend]]></title><description><![CDATA[There's been a decent amount of talk lately about utilizing the ServiceWorker API to serve up a site offline. I believe the scenario has…]]></description><link>https://dommagnifi.co/2015-12-20-service-workin-for-the-weekend/</link><guid isPermaLink="false">https://dommagnifi.co/2015-12-20-service-workin-for-the-weekend/</guid><pubDate>Sun, 20 Dec 2015 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;There&apos;s been a decent amount of talk lately about utilizing the ServiceWorker API to serve up a site offline. I believe the scenario has been explained in every post about service workers, but I&apos;ll re-iterate it here. Having an offline version of your site is great for folks taking the subway, people with spotty cell service, or anyone who doesn&apos;t have an immediate internet connection. In the next couple of blog posts, I&apos;ll walk you through my journey into the ServiceWorker API.&lt;/p&gt;
&lt;p&gt;This first post will be an overview of what exactly a service worker is, and the prerequisites that exist to start working with them.&lt;/p&gt;
&lt;h2&gt;What is a service worker?&lt;/h2&gt;
&lt;p&gt;This excerpt is taken from the MDN page on the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API&quot;&gt;service worker API&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available.) They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;That&apos;s pretty awesome. The service worker API provides us a means to detect wether or not the user can connect to the network, send them push notifications, and sync APIs in the background. My first thought when I read this definition from MDN was probably the same as yours. It seems like that API could leave someone pretty vulnerable to a man-in-the-middle attack.&lt;/p&gt;
&lt;p&gt;If you read a couple paragraphs down on the MDN page, you&apos;ll notice that to use the ServiceWorker API, your URL must be behind a valid SSL certificate. Thus ensuring that the request we are making is us, and not some shadowy internet figure.&lt;/p&gt;
&lt;p&gt;![Hacking is easy.]({{ &quot;/-/hacking.gif&quot; | prepend: site.baseurl }})&lt;/p&gt;
&lt;p&gt;So the first step into the pursuit of an offline available website is to ensure your site is being served via https.&lt;/p&gt;
&lt;h2&gt;SSL-ock it down!&lt;/h2&gt;
&lt;p&gt;I am utilizing GitHub pages and Jekyll for my blog. What we&apos;re going to need to do is tell GitHub pages to use the HTTPS version of our site. So in the root of my site directory i have a file called &lt;code class=&quot;language-text&quot;&gt;CNAME&lt;/code&gt;. In that file we need to define our custom URL.&lt;/p&gt;
&lt;p&gt;In my case, the only thing in my CNAME file is the following:&lt;/p&gt;
&lt;div class=&quot;gatsby-highlight&quot; data-language=&quot;html&quot;&gt;&lt;pre class=&quot;language-html&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;https://dommagnifi.co&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Now, I&apos;m not a super savvy hosting person, so forgive me if my instructions on the next few steps are a bit fuzzy. Do feel free to shoot me an email (hello [at] dommagnifi.co) with suggestions for improvements and I&apos;ll be happy to consider them.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;This next section involves updating nameservers. This can take a few hours to propagate so be patient.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;So my next step was to ensure that my domain is using the secure URL. Unfortunately GitHub pages does not allow you to upload an SSL certificate for use. Thus you&apos;ll need to use a custom domain, and ensure that the DNS for your domain name is pointing to secure servers.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.cloudflare.com/&quot;&gt;CloudFlare&lt;/a&gt; offers SSL on their free account, so that&apos;s what I&apos;ll be using to obtain an SSL certificate for my domain name.&lt;/p&gt;
&lt;p&gt;After running through the signup, CloudFlare will automatically detect your DNS records. Once CloudFlare does it&apos;s thing, it&apos;ll prompt you to change the nameservers. CloudFlare provides you with specific nameservers to switch over to. Log in to your domain registrar, and copy and paste your new nameservers.&lt;/p&gt;
&lt;p&gt;Once all is saved, head back over to CloudFlare real quick, click on the &quot;Crypto&quot; tab, and set your SSL certificate to &quot;Flexible&quot;. I&apos;ve attached a screenshot below.&lt;/p&gt;
&lt;p&gt;![The CloudFlare Crypto tab.]({{ &quot;/images/2015/12/10/cloudflare.jpg&quot; | prepend: site.baseurl }})&lt;/p&gt;
&lt;p&gt;Lastly, it will probably be beneficial to force all traffic to use the HTTPS version of your site. In CloudFlare, navigate to the &quot;Page Rules&quot; tab, and set your URL to always use HTTPS. You can also use this section to forward the www version of your URL to non www, or vice versa, whichever you prefer.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Several minutes later...&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;![URL bar showing confirmed HTTPS]({{ &quot;/images/2015/12/10/proof.jpg&quot; | prepend: site.baseurl }})&lt;/p&gt;
&lt;p&gt;Wonderful! Now my site is being served up via https, and in the next post we can begin diving in to some javascript to get the service worker running.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Being Comfortable With Being Uncomfortable]]></title><description><![CDATA[I'm a creature of habit. I think that's probably true for most people, especially developers. We find comfort in the repetition of a well…]]></description><link>https://dommagnifi.co/2015-09-25-being-comfortable-with-being-uncomfortable/</link><guid isPermaLink="false">https://dommagnifi.co/2015-09-25-being-comfortable-with-being-uncomfortable/</guid><pubDate>Fri, 25 Sep 2015 16:44:00 GMT</pubDate><content:encoded>&lt;p&gt;I&apos;m a creature of habit. I think that&apos;s probably true for most people, especially developers. We find comfort in the repetition of a well written loop. Everything comes out exactly uniform, just how we intended it.&lt;/p&gt;
&lt;p&gt;That uniformity, that comfort is something we all look for in times of stress. If things aren&apos;t going right we always know we have that thing to be able to fall back on. If things get too uncomfortable we know where to look, and we know where we can go to fall back into the same routine. Quite recently I&apos;ve realized the importance of reversing that train of thought. I&apos;ve realized that it&apos;s beneficial to be comfortable with being uncomfortable.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;That&apos;s why I left my job.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Throughout some of my blog posts you may notice my mention of the company I worked for, Zenman. I want to preface this with the fact that the folks that work at Zenman are among some of the best people I know. Quite truly they were like family, and that&apos;s what a good position at a good company does for you. It makes you feel at home. It makes you feel that if the job itself gets stressful, the people you spend your time with for most of your waking hours are the people you can fall back on. And that&apos;s the truth about the position I held at Zenman. My colleagues were more than just that, they became friends, some even great friends, and I couldn&apos;t be more thankful for that.&lt;/p&gt;
&lt;p&gt;Unfortunately there comes a time where you realize that perhaps you&apos;re far too comfortable where you&apos;re at. Maybe you&apos;re not being challenged enough. And that&apos;s the point that I got to quite recently. Because I ate and breathed Zenman for the past four years, I was not willing to come to terms with this. I&apos;m 25 years old in a &lt;strong&gt;Senior&lt;/strong&gt; Development position. What on earth could I possibly have to complain about? The fact was that I didn&apos;t feel challenged enough. And it got to the point where I decided that I needed to do what was best for me, and explore my options.&lt;/p&gt;
&lt;p&gt;For anyone out there who may be in a similar position than me let me just say one thing; There&apos;s nothing more important than being completely and utterly respectful when you&apos;re looking for a new job. Don&apos;t let your work slip, don&apos;t ditch your responsibilities and just say &quot;Fuck it!&quot;. Have the capacity and professionalism to realize that the place you&apos;re working at right now was kind enough to hire you. They are still paying you to do quality work. Don&apos;t let your peers down.&lt;/p&gt;
&lt;p&gt;It&apos;s a weird spot to be in, looking out for yourself while still looking out for your colleagues. It certainly felt strange to me. I felt selfish. Since I was in a leadership position perhaps it was my job to burden all this stress for the sake of the team, so that they didn&apos;t have to feel it. I rode with that for a while. I remember thinking this exact thought about 6 months ago and just riding it out thinking that it was my responsibility to handle it. But it reached a breaking point and I needed to make a change.&lt;/p&gt;
&lt;p&gt;I&apos;ll never be able to repay the owner at Zenman for all the kindness he showed to me, or my co-workers for everything that they taught me. That is without a doubt the single biggest thing that I will miss, the people. But, as the title of this blog says, it&apos;s time for me to start being comfortable with being uncomfortable. And there&apos;s nothing more uncomfortable than starting a new job. But the biggest piece of advice I can offer to you dearest reader, is stick to your guns, realize when you begin to feel yourself slip into the icy grip of comfortability and make a change. Perhaps it doesn&apos;t need to be as radical as leaving the company you work for. Perhaps it&apos;s best to identify pain points in what you&apos;re doing currently and offer solutions that may keep you on your toes a little more.&lt;/p&gt;
&lt;p&gt;Some change is good, as hard as it is to recognize. The change that you make will hopefully cultivate new exciting opportunities for you. And if it doesn&apos;t...at least you know you tried.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[What I Learned From My First Speaking Gig]]></title><description><![CDATA[About six months ago one of the organizers of a local meetup group asked if I could give a talk. "We just need more development centered…]]></description><link>https://dommagnifi.co/2015-08-17-what-i-learned-from-my-frist-speaking-gig/</link><guid isPermaLink="false">https://dommagnifi.co/2015-08-17-what-i-learned-from-my-frist-speaking-gig/</guid><pubDate>Mon, 17 Aug 2015 09:00:00 GMT</pubDate><content:encoded>&lt;p&gt;About six months ago one of the organizers of a local meetup group asked if I could give a talk.&lt;/p&gt;
&lt;p&gt;&quot;We just need more development centered talks.&quot;&lt;/p&gt;
&lt;p&gt;This was a hell of an opportunity for me to expand as a developer, and in the process help fellow colleagues learn. Of course, I agreed. I didn&apos;t realize at the time that six months was not a whole lot of time. With a full time job, and other responsibilities, finding time to sit down and work on  my slides was a challenge.&lt;/p&gt;
&lt;p&gt;My talk was about process, and the importance it plays in an agency. The topic was at the front of my mind due to some changes happening at work. Some processes were falling through the cracks, and it was effecting everyone. I wanted to remind myself and everyone around me how important it is to stick to process, and how detrimental it can be to stray from it.&lt;/p&gt;
&lt;p&gt;I was able to get work done here and there. A couple slides one week, complete with speaker notes, another one the next. When it came down to a couple months before the talk I figured I needed to buckle down. Fast forward a couple of sleepless nights, and a weekend of pounding out slides I was finished. The slides weren&apos;t anything complicated, but I had the content there to talk about.&lt;/p&gt;
&lt;p&gt;Now, I&apos;m going to admit that I think I&apos;m a pretty sketchy public speaker. I could definitely use some improvement, but I was hopeful this experience would help me do that. Because of that fear of public speaking, I looked over my slides constantly. I tried to memorize my notes, added some clarification here and there,  peppered in some gifs to keep people interested. About a week before the talk I began practicing with people I know. My girlfriend was kind enough to let me use her as an audience and give me some feedback. A few friends did the same. I thought I felt pretty darn good.&lt;/p&gt;
&lt;p&gt;A couple days before the talk I had a shroud of doubt cast over me. I was looking at my slides for the ten thousandth time, and the flow was off. It didn&apos;t look like what I was talking about followed any coherent path. I thought I was jumping around from topic to topic without really explaining the main point. &lt;em&gt;I freaked out a little&lt;/em&gt;. What would it take to change the slides? Perhaps I should just scrap it all.&lt;/p&gt;
&lt;p&gt;That clearly wasn&apos;t the right choice. I took a minute, closed my laptop and realized I had been looking at the slides for too long. I&apos;m curious if most speakers get to this point, or if this was a product of my own making. Either way I was able to step back and take a fresh look the next day.&lt;/p&gt;
&lt;p&gt;The night of the talk I gave the slides one last look, practiced what I was going to say to a few co-workers and headed off.&lt;/p&gt;
&lt;p&gt;The talk went great.&lt;/p&gt;
&lt;p&gt;I opened up with some classic &lt;a href=&quot;https://www.youtube.com/watch?v=8To-6VIJZRE&quot;&gt;Steve Ballmer&lt;/a&gt;. That got everyone interested pretty quick. The talk proceeded and I felt like I knew what I was saying. Everyone seemed pretty interested. I slipped up here and there, caught myself say &quot;um&quot; a little too much, but kept going. At the end there were lots of questions too, which gave me a large bit of relief. People were interested and engaged. Everything ended up pretty well.&lt;/p&gt;
&lt;p&gt;The moral of this, and the advice I&apos;d pass on to future first time speakers (even if it is in a small setting such as mine), would be to just follow your gut. You know the topic. You&apos;ve been asked to speak based on what you know and that&apos;s awesome. Regardless of how many times you look at your slides, or if you second guess what you&apos;re writing, you know the topic. The slides are the hardest part, don&apos;t overthink your notes, and trust your knowledge. Practice as much as you feel you need, but &lt;em&gt;don&apos;t stress over it&lt;/em&gt;, you know what you want to say, and &lt;strong&gt;you&apos;ll find the right way to say it&lt;/strong&gt;. &lt;a href=&quot;https://dommagnifi.co/update/2015/08/04/on-community.html&quot;&gt;The Design and Development Community&lt;/a&gt; is an amazing one. And most every person you meet will be happy to help you learn.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[On Community]]></title><description><![CDATA[It never ceases to amaze me how helpful the web development community is. It's incredible to encounter people who are passionate about their…]]></description><link>https://dommagnifi.co/2015-08-04-on-community/</link><guid isPermaLink="false">https://dommagnifi.co/2015-08-04-on-community/</guid><pubDate>Tue, 04 Aug 2015 07:47:00 GMT</pubDate><content:encoded>&lt;p&gt;It never ceases to amaze me how helpful the web development community is. It&apos;s incredible to encounter people who are passionate about their craft.&lt;/p&gt;
&lt;p&gt;There&apos;s been a lot of talk lately about suspending new features on the web. Some folks seem to think that it&apos;s becoming too feature rich, too quickly. While I disagree with this sentiment, it&apos;s this type of active discussion that I love. There have been countless responses both for and against that idea, and they all have good points! That&apos;s what is so fascinating about what we do. We have the ability to disagree with an idea, but what empowers us is our logical mind. As much as we want to yell about how wrong the idea may be, or jump straight to Twitter, we pause and let that logic wash over us.&lt;/p&gt;
&lt;p&gt;This fosters a community of discussion and learning for everyone. We see both sides of the same coin and are then empowered to form our own opinion. It would seem that there are few other fields of work where this ecosystem exists. The stigma of the boring 9 to 5, go to work, head down all day, a slave to the clock. But (most of us) don&apos;t have that. And even if we do, in reality, we can come to any number of places online and feel challenged. No matter how terrible you think your job is, this community provides an outlet to get back on the right path.&lt;/p&gt;
&lt;p&gt;The people (obviously) are what make the community so great. It blows me away how helpful and open to growth we all are. I, much like you I&apos;m sure, have heard &quot;Mind taking a look at this?&quot; or &quot;Think I could bounce a couple of ideas off you?&quot; countless times. I don&apos;t know about you, but every time I am asked any variation of that I get excited. Excited to help solve a new problem, or help to propel a colleague towards success in their project, to be part of a larger whole. Granted we all have our off days, I&apos;m not exempt from that. But by and large the fact that anyone is asking you for help, is a huge compliment, and one that should not be taken lightly.&lt;/p&gt;
&lt;p&gt;The bottom line is I am thrilled to be a part of this community. There are countless opportunities right around the corner, and a horde of amazing people offering their support.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Enhancing Progressive Enhancement]]></title><description><![CDATA[As the famous Dave Rupert says, "It's time for some * Law and Order sound effect here * Hot Drama." Yesterday the internet was abuzz with…]]></description><link>https://dommagnifi.co/2015-06-23-enhancing-progressive-enhancement/</link><guid isPermaLink="false">https://dommagnifi.co/2015-06-23-enhancing-progressive-enhancement/</guid><pubDate>Tue, 23 Jun 2015 15:51:00 GMT</pubDate><content:encoded>&lt;p&gt;As the famous Dave Rupert says, &quot;It&apos;s time for some * &lt;em&gt;Law and Order sound effect here&lt;/em&gt; * Hot Drama.&quot;&lt;/p&gt;
&lt;p&gt;Yesterday the internet was abuzz with the technicalities of what Progressive Enhancement really is. A few posts popped up here and there of folks defending their respective sides of the argument. Now it goes without saying that this is a great thing, and obviously what the internet is intended to do, which is foster discussion. The two main articles I&apos;ll reference in this little discussion are &lt;a href=&quot;https://adactio.com/journal/7774&quot;&gt;Jeremy Keith&apos;s&lt;/a&gt; article, which is a response to &lt;a href=&quot;https://plus.google.com/+ScottJenson/posts/S23BqQsEuvR&quot;&gt;Scott Jenson&apos;s&lt;/a&gt; post on Google+.&lt;/p&gt;
&lt;p&gt;Both of these articles make great points. Scott Jenson, in regards to building a camera app or a chat app, notes:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Of course you can have it fail gracefully. That is very reasonable but what are you left with, an elegant error dialog?&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This statement cuts away all the mustard and gets at, what I believe to be, the Progressive Enhancement purists. This is the main point of Scott&apos;s article. That in some cases Progressive Enhancement may not be an acceptable solution. Specifically when it comes down to the fact that the entire app is rendered useless by this practice, and &lt;em&gt;&quot;...not everything devolves to content.&quot;&lt;/em&gt;. &lt;/p&gt;
&lt;p&gt;While I certainly agree with Scott here, we have to take a step back for a second. This is one of the issues that I see come up time and time again in our industry. Everyone is taking these practices, or these ideologies, at face value. It&apos;s either black, or it&apos;s white. Zero or one. There is no middle ground. And that is where I think the hang-ups start.&lt;/p&gt;
&lt;p&gt;Much like the websites of yesteryear, we as developers need to be fluid. Able to adapt and interpret at the drop of a hat. Yes the description for Progressive Enhancement may be overtly specific, but much like any other process or principal, it&apos;s the core of the idea that we need to take away. In regards to Progressive Enhancement that idea is the fact that not everyone is sitting on their MacBook Pro connected to their fancy Google Fiber internet connection. People on trains on their smartphones going through tunnels losing service, people who can&apos;t afford the latest and greatest who are ecstatic to receive a donated cellphone or laptop with spotty service and connectivity, those are the people we need to keep in mind when we are developing. Our apps, our blogs, our client work, all of it needs to take into account the end user. We need to figure out how to give them the best experience utilizing the principals that an idea like Progressive Enhancement provides us.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[The Ellusive Development Process]]></title><description><![CDATA[In my previous posts I discussed how to start setting up processes within your teamand the integration of that process to the whole team…]]></description><link>https://dommagnifi.co/2015-06-16-the-ellusive-development-process/</link><guid isPermaLink="false">https://dommagnifi.co/2015-06-16-the-ellusive-development-process/</guid><pubDate>Tue, 16 Jun 2015 15:51:00 GMT</pubDate><content:encoded>&lt;p&gt;In my previous posts I discussed &lt;a href=&quot;https://dommagnifi.co/update/2015/05/14/spinning-up-process.html&quot;&gt;how to start setting up processes within your team&lt;/a&gt;and &lt;a href=&quot;https://dommagnifi.co/update/2015/06/01/the-importance-of-company-wide-respect-for-process.html&quot;&gt;the integration of that process to the whole team&lt;/a&gt;. Feel free to check those posts out as well. This post however is the all about the ellusive development process. Which really is  &lt;a href=&quot;http://vincentp.me/blog/my-front-end-development-process-start-to-finish/&quot;&gt;not&lt;/a&gt; &lt;a href=&quot;http://blog.chartbeat.com/2014/01/30/modern-front-end-workflow-start-finish/&quot;&gt;that&lt;/a&gt; &lt;a href=&quot;https://www.codeschool.com/blog/2014/11/14/front-end-process/&quot;&gt;ellusive&lt;/a&gt; &lt;a href=&quot;http://code.tutsplus.com/tutorials/essential-tools-for-a-modern-front-end-development-workflow--pre-66083&quot;&gt;at&lt;/a&gt; &lt;a href=&quot;http://bradfrost.com/blog/post/development-is-design/&quot;&gt;all&lt;/a&gt;. All of these articles are fantastic by the way, and give insight into the front end development process. What follows is the adaptation I have taken from my few years in the industry. It is by no means comprehensive or perfect. As I mentioned previously no process is perfect, and any good process is iterated upon and constantly changing, so do not take this post as gospel, use it, improve it, and tell me all about it. Next to front end development, front end development process is a passion of mine as well.&lt;/p&gt;
&lt;h1&gt;The Zenman Development Process&lt;/h1&gt;
&lt;p&gt;So I’ve been with Zenman for almost three years now, and I can tell you first hand that our process has grown and evolved tremendously over those three years. Back in the day we were getting printed out documents that had our schedules for the week on them, we weren’t using much of a client management tool, and our development processes were pretty much developer specific. Now don’t get me wrong, there was a method to this, and it worked pretty damn well for the company at the time. But of course, it needed to evolve.&lt;/p&gt;
&lt;h1&gt;The Tools&lt;/h1&gt;
&lt;p&gt;Of course there is no one set of tools that is perfect. Much like your processes, it’s a long journey of trial and error before you find that sweet spot. I’m going to go over the tools that we use and how they fit into our process.&lt;/p&gt;
&lt;h2&gt;Project Management&lt;/h2&gt;
&lt;p&gt;As much as we all loved the printer paper schedule, it was very hard for us to be able to keep track of all the individual items that needed to be done for each of our projects. That’s where &lt;a href=&quot;http://www.basecamp.com&quot;&gt;basecamp&lt;/a&gt; comes in.&lt;/p&gt;
&lt;p&gt;Basecamp gives us the ability to add projects. Within these projects we can add specific to-do’s with due dates, and assign them to people. In addition we also gain the ability to have active discussions with the client, something that has proved to be quite valuable for us since we are always working with the client in regards to their design. Basecamp has a ton of features, and if you don’t have a project management solution it’s definitely worth checking out.&lt;/p&gt;
&lt;p&gt;Now within basecamp we have a specific structure for to-dos, we have a bunch of pre-defined templates that outline everything from our approval process from clients, to items that need to happen in order for us to consider a site launch successful. We have many many process oriented lists in basecamp that help to streamline our jobs, and these are all specific to Zenman, over the years we have established things that work, and things that do not. Not only for us, but for our clients. These to-do lists, and basecamp documents are incredibly helpful for us to stay on track and for us to keep a running paper trail of all communications with clients. We have protocol that forces us to ensure that everything is documented in basecamp to ensure clear, transparent communications with the client. This way, nobody is out of the loop, and anyone can jump into a project and be informed to tackle any issue or request.&lt;/p&gt;
&lt;h2&gt;Agile Development&lt;/h2&gt;
&lt;p&gt;There are a few tools out there that help to aid shops in staying agile. All of them center around stories, and an acceptance process with the Product Owner.&lt;a href=&quot;http://www.pivotaltracker.com&quot;&gt;Pivotal Tracker&lt;/a&gt; is our tool of choice for our agile projects. This gives us a much more granular view of exactly what prices need to be built into a website.&lt;/p&gt;
&lt;p&gt;We start by adding a project. Within this project we import a library of stories that are true for any responsive website. We’ve set up a public instance of an example project &lt;a href=&quot;https://www.pivotaltracker.com/n/projects/914224&quot;&gt;here&lt;/a&gt;. I’ll let that project do most of the explaining, but the main takeaway here is that this gives us a very granular and trackable view of how a project is going. One of our steps in the development of a site is for us to go over the functionality, and all the layouts, and input a tracker story for each feature. This gives us a high level view of the anticipated length of the project, and allows us to see exactly what we can expect to get done that week for that project.&lt;/p&gt;
&lt;p&gt;A bit of a side note here, we consider a full ‘day’ to be six hours. There are company wide meetings, and a blocked out period first thing in the morning for developers to tackle small issues that can be resolved quickly. We do these things from 8-9 in the morning so that directly afterwords we can jump right in to the big stuff, and sty focused on it for the whole day.&lt;/p&gt;
&lt;p&gt;Each story is assigned a point value, or a level of effort, and based off of that we set a velocity which then anticipates the amount of stories or points that we can complete each week.&lt;/p&gt;
&lt;h2&gt;CMS&lt;/h2&gt;
&lt;p&gt;Every client that we work with needs to be able to update their content, or utilize a blogging platform. We use &lt;a href=&quot;http://www.WordPress.org&quot;&gt;WordPress&lt;/a&gt; for that. Most of the sites that we develop are WordPress sites, and we have some processes that go along with that.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Starter Theme&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;If you google “WordPress Starter Theme” you’ll get a million results...Bones, Genesis, _S, Starkers etc. I’ve used a few of these, and Zenman started out with starkers, however a lot of these come with some bloat that we don’t necessarily need. So like all good developers, we built our own tool for the job. &lt;a href=&quot;https://github.com/zenman/zemplate&quot;&gt;Zemplate&lt;/a&gt;. Very minimal, with a sprinkle of mixins, functions, and ideologies that we at Zenman find very useful.&lt;/p&gt;
&lt;p&gt;Our template utilizes BEM for class naming structure, which helps to keep things clean and easy to understand regardless of the developer that looks at the project. We implemented a galactic version of Brad Frost’s &lt;a href=&quot;http://bradfrost.com/blog/post/atomic-web-design/&quot;&gt;Atomic Design System&lt;/a&gt; to help keep things modular. We not only modularize our SASS, but we also modularize our template parts, and javascript. Pretty much everything is modular.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;ACF&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;We found that keeping things modular allows us to build bits and pieces separate from everything else so that they can work anywhere on the site. We utilize a plugin called &lt;a href=&quot;http://www.advancedcustomfields.com/&quot;&gt;Advanced Custom Fields&lt;/a&gt;. Within advanced custom fields is a piece called Flexible Content. By default WordPress only has one text area for clients to manage content, and that didn’t work for us. Our layouts are complex enough that it is imperative for clients to be able to edit content throughout the site. ACF and flexible content allow us to do this. Because we build all our components modularly, we are able to build a call to action section once, and then utilize it anywhere on the site. The client has the ability in the backend to add this piece to any page and have it work every single time. This is huge, and if you use WordPress I would highly highly recommend using ACF.&lt;/p&gt;
&lt;h2&gt;Local Development&lt;/h2&gt;
&lt;p&gt;This one’s pretty easy, and there isn’t much process involved with this. We use &lt;a href=&quot;https://www.mamp.info/en/&quot;&gt;MAMP&lt;/a&gt; to develop locally. This gives you the ability to spin up a server locally and run a WordPress site on your machine. The only real standardization that we have here is our database naming structure. We have our local databases, prefixed with &lt;code class=&quot;language-text&quot;&gt;l1_&lt;/code&gt;, we then utilize git and push to our git server which then pushes out to our development &lt;code class=&quot;language-text&quot;&gt;d1_&lt;/code&gt;, testing &lt;code class=&quot;language-text&quot;&gt;t1_&lt;/code&gt; and staging &lt;code class=&quot;language-text&quot;&gt;s1_&lt;/code&gt; servers.&lt;/p&gt;
&lt;p&gt;This utilizes some git hook sorcery that I will not pretend to be privy to. But it’s awesome, and my co-worker &lt;a href=&quot;http://www.codepen.io/tcmulder&quot;&gt;Tomas Mulder&lt;/a&gt; is a git sorcerer. Ask him about it, and it’ll go right over your head.&lt;/p&gt;
&lt;h2&gt;Version Control&lt;/h2&gt;
&lt;p&gt;Every development team needs some sort of version control to prevent catastrophic overwrites and terrible terrible headaches. Something I’ve definitely never experienced...&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://git-scm.com/&quot;&gt;Git&lt;/a&gt; is what we use for that. As I mentioned, I’m not the most  versed in the land of git, but we have a few very slick git hooks that will push up the databases in addition to the files whenever we make a change. And depending on the branch you are on locally, it will push up to the correct server (dev, test or stage).&lt;/p&gt;
&lt;p&gt;The one thing that we do make sure to do process-wise, is write clean, well thought out commit messages.&lt;/p&gt;
&lt;h2&gt;Reviews and Testing&lt;/h2&gt;
&lt;p&gt;Once a developer has completed the development of the project to the best of his or her knowledge we have a few steps to take before we send the project to the client.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Browser Testing&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The developer will go in on their own and browser test their site in our supported browsers (The latest version and two prior major versions of Firefox, Chrome, Safari and Internet Explorer). Once all the bugs are fixed the site moves into Code Audit.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Code Audit&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The developer and a Senior Developer will then sit down and go over the code at a high level. This step is crucial to ensure a consistency in the way that our code is written. We’ve found that when working with multiple developers it is crucial to ensure the code can be traversed by any developer at the company. We ensure things are modular, that the BEM class naming structure has been adhered to. We test the site speed and make sure that the site does not choke on slower connections or is unreasonably slow. Is the code commented in places where it makes sense (i.e complex javascript or PHP. Including usage examples). Are you using &lt;code class=&quot;language-text&quot;&gt;!importants&lt;/code&gt;? I’m pretty well known at Zenman for making developers write out explanations when an &lt;code class=&quot;language-text&quot;&gt;!important&lt;/code&gt; is used...I’m very specific about specificity.&lt;/p&gt;
&lt;p&gt;These meetings are great because the Senior Dev gets to see the progression of the other developers at the company, but also gets to help shape the quality of code that the company produces. Every single one of these that I have done has yielded a learning experience on both ends of the table. If you can afford one more step in your process, add a Code Audit. It’ll dramatically change the code quality your company produces.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;QA&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;This step gets a fresh set of eyes on the project. This new person will scour the site on all browsers again, and make note of any discrepancies between design and production.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;QC&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Once QA is complete, one of the folks from the business side of things will ensure that contractually, everything has been addressed and delivered. We again test this in all browsers to make sure we didn’t miss a single thing.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Alpha&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Finally the site makes it to the client. We give them a chance to review the site, and provide one round of feedback. It’s important for us to ensure that the client at least has one iteration of back and forth in regards to their site. This also gives us the opportunity to defend some design decisions, and explain to the client exactly why we chose to utilize specific functionality.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Staging and Launch&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;This is the most process intensive step and varies drastically depending on your companies set up. But this is our chance as developers to check, check again, check one more time, freak out because we have a ‘feeling’ that we missed something, realize we didn’t, close our eyes, and then hit the button.&lt;/p&gt;
&lt;p&gt;Here’s a list of items we ensure happen on every stage and launch that we do.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Ensure it is before 2:00 MST.&lt;/li&gt;
&lt;li&gt;Back up live code and database to Zenman servers.&lt;/li&gt;
&lt;li&gt;Identify in changelog that the site is being staged.&lt;/li&gt;
&lt;li&gt;Begin staging preparation locally on the &lt;code class=&quot;language-text&quot;&gt;stage&lt;/code&gt; branch.&lt;/li&gt;
&lt;li&gt;Confirm Google Analytics code is added (may not start tracking until the site is live).&lt;/li&gt;
&lt;li&gt;Confirm site uses compressed JavaScript files.&lt;/li&gt;
&lt;li&gt;Confirm style.css is compressed.&lt;/li&gt;
&lt;li&gt;Empty the WordPress page trash and posts trash.&lt;/li&gt;
&lt;li&gt;[initial launch] Add new admin user for client and add credentials to client_info.rtf.&lt;/li&gt;
&lt;li&gt;Push stage branch to gitlab.&lt;/li&gt;
&lt;li&gt;Confirm 444 permissions for .htaccess/wp-config. !important&lt;/li&gt;
&lt;li&gt;Delete project code and databases from dev and test servers&lt;/li&gt;
&lt;li&gt;Confirm Site works with and without www.&lt;/li&gt;
&lt;li&gt;Verify Google Analytics is rendering on live site.&lt;/li&gt;
&lt;li&gt;Confirm that it&apos;s possible to log into the WordPress backend.&lt;/li&gt;
&lt;li&gt;Verify sitemap URLs use the live site&apos;s address.&lt;/li&gt;
&lt;li&gt;Backup new code and database in client folder on zenmass.&lt;/li&gt;
&lt;li&gt;Remove the outdated site&apos;s directory and delete it&apos;s database (but leave it&apos;s user).&lt;/li&gt;
&lt;li&gt;Identify in the changelog that the launch is complete.&lt;/li&gt;
&lt;li&gt;[initial launch] Ask project manager to schedule a retro.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;And that, ladies and gentlemen, is where I&apos;m going to end the worlds longest development process blog post. If you stuck with me this far, congratulations here&apos;s a gif to reward you.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://bukk.it/annodomini.gif&quot; alt=&quot;alt text&quot;&gt;&lt;/p&gt;
&lt;p&gt;This series of posts will be turned into a talk that I&apos;ll be doing at Refresh Denver on August 12th. &lt;a href=&quot;http://www.meetup.com/refreshdenver/events/219844847/&quot;&gt;Check it out and RSVP if you&apos;re interested!&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[The Importance of Company-wide Respect for Process]]></title><description><![CDATA[In my previous post I discussed how to start setting up processes within your team. If you haven't read it, check it out here. This post…]]></description><link>https://dommagnifi.co/2015-06-01-the-importance-of-company-wide-respect-for-process/</link><guid isPermaLink="false">https://dommagnifi.co/2015-06-01-the-importance-of-company-wide-respect-for-process/</guid><pubDate>Mon, 01 Jun 2015 15:51:00 GMT</pubDate><content:encoded>&lt;p&gt;In my previous post I discussed how to start setting up processes within your team. If you haven&apos;t read it, check it out &lt;a href=&quot;https://dommagnifi.co/update/2015/05/14/spinning-up-process.html&quot;&gt;here&lt;/a&gt;. This post will focus more on the integration of that process to the whole team, and the importance of company wide adoption.&lt;/p&gt;
&lt;h2&gt;Start at The Top&lt;/h2&gt;
&lt;p&gt;The main point here is that business has to be on board with the process. At Zenman when we decide a process needs to some tweaking, or a new one is necessary, we take a few preliminary steps. We  begin by writing an explanation of any problems that the process will help to reduce. We follow that with any extra time that this process will add to the project. And finally we list any pros and cons associated with this new process.&lt;/p&gt;
&lt;p&gt;It is possible that the risk involved with the tweak in process may not be worth it to business. You as a developer or designer need to prepare yourself to be shot down. Take the concerns that business has and rework your plan. Get the high level folks on board and it&apos;s all downhill from there.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://bukk.it/business.jpg&quot; alt=&quot;alt text&quot;&gt;&lt;/p&gt;
&lt;h2&gt;Project Management&lt;/h2&gt;
&lt;p&gt;Once you&apos;ve got business all warm and fuzzy about this fantastic new process, your likely next step will be to talk to project management. It&apos;s important that your Project Managers / Account Managers are aware of this process change so that they can plan accordingly. There&apos;s nothing that will piss off a PM or AM more than a change in process that affects the way they interact with the client. Ensuring that they fully understand the need for this process, and exactly what issues it will help to alleviate is real important.&lt;/p&gt;
&lt;p&gt;As long as your PM or AM is comfortable, and understands the process as well, they&apos;ll have no problem adhering to it and ensuring that the client is aware of the change. Or, at the very least, they will ensure that the process is put into place for the next project.&lt;/p&gt;
&lt;h2&gt;Team Participation&lt;/h2&gt;
&lt;p&gt;Throughout this whole process it&apos;s important to keep your team in the loop. At Zenman we believe in being super transparent. Any time we think about implementing a change that could affect the whole team, we loop them in. From the very beginning we ask for input from the whole team in regards to this new, or improved, process and address any concerns that come up. This step should most definitely be integrated into the planning stage of your new process.&lt;/p&gt;
&lt;p&gt;This high level of transparency helps to ensure that your team is not blindsided by this change in process. It also works to ensure that your whole team has had a chance to voice their concerns.&lt;/p&gt;
&lt;p&gt;This section is a little bit smaller than the last, but without a doubt it is very important. You can be Captain Process all by yourself as much as you want, but if your the whole team isn&apos;t on board then you&apos;re setting yourself up for failure. Collaboration within your department yields huge benefits, and will without a doubt expedite the process when you present your idea to business.&lt;/p&gt;
&lt;p&gt;This series of posts will be turned into a talk that I&apos;ll be doing at Refresh Denver on August 12th. &lt;a href=&quot;http://www.meetup.com/refreshdenver/events/219844847/&quot;&gt;Check it out and RSVP if you&apos;re interested!&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Spinning Up Process]]></title><description><![CDATA[As every good developer knows, a process is crucial to the success of your project. Without it, clients run amok, design changes seven times…]]></description><link>https://dommagnifi.co/2015-05-14-spinning-up-process/</link><guid isPermaLink="false">https://dommagnifi.co/2015-05-14-spinning-up-process/</guid><pubDate>Thu, 14 May 2015 15:51:00 GMT</pubDate><content:encoded>&lt;p&gt;As every good developer knows, a process is crucial to the success of your project. Without it, clients run amok, design changes seven times, development never has a clear objective, and the project becomes an all around disaster. Process is important, it keeps everyones eye on the prize. At Zenman, I&apos;ve spent the past 3 and a half years cultivating a process that I believe works quite well.&lt;/p&gt;
&lt;p&gt;One thing that I want to preface here, and I&apos;ll refrence this point a bunch, is that your process is never &lt;strong&gt;EVER&lt;/strong&gt; perfect. I can&apos;t think of a single process that I&apos;ve been a part of that didn&apos;t have some room for improvement. So keep in mind, the fact that you&apos;re even trying to lay out a process, is a step in the right direction. You&apos;re going to change it, iterate on it, and ultimately improve upon it.&lt;/p&gt;
&lt;h2&gt;Setting the Right Processes in Place&lt;/h2&gt;
&lt;p&gt;When first developing our process at Zenman we had to establish exactly what it was we were trying to accomplish. Where are we headed? What exactly is that prize we should be keeping our eyes on. What it came down to was simply the fact that we wanted a process that provided designers, developers, and business with all of the information that is needed for the project right off the bat. Leave no stone unturned.&lt;/p&gt;
&lt;p&gt;The first step in attaining this goal was to hold a discovery meeting, which for Zenman, is our first deep dive into what the client is all about. This meeting incorporates every member of the team for this specific project. Everyone from Project Manager and Sales Exec, to Developer and Designer, all the way up to the CEO sits in on this meeting.&lt;/p&gt;
&lt;p&gt;We incorporate everyone in this meeting for a very specific reason, and that is because without full immersion in the process, your process is more likely to fail. Having everyone participate in this meeting gives us all the preparation we need for the project as a whole. And not only that, it gives each department insight into the other departments processes and methodology. This then helps sales people to sell better, because they understand our development process, and can explain to clients more readily and knowledgeably about how that process works. Everyone benefits from having a high level understanding of how the other departments work, thus creating a more seemless project and inevitably a better product.&lt;/p&gt;
&lt;p&gt;Just to give you a little insight into our discovery process, from a development standpoint, during the discovery we ask some technical questions like where is your current site hosted, where is your domain registered, how are your emails set up, and how do we access your google analytics. This gives us the power to complete steps within our process that are both immediate, and further down the line, so that a back and forth does not need to occur between developer and client. Having a clear goal in place makes a project ridiculously more manageable.&lt;/p&gt;
&lt;h2&gt;Is it Scalable?&lt;/h2&gt;
&lt;p&gt;One of the best things about the process that we implemented at Zenman is that it is effective for projects of all sizes. From Fortune 500 companies down to startups, our process works. There is no more tempting time to skip out on process then on a small project. This is where you kind of have to reign in the project managers and sales folks. At this point, a PM or AM will try to tempt you with promises of gold and mir to break process and get the task done in record time.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://bukk.it/noooooooooo.gif&quot; alt=&quot;nope nope nope&quot; title=&quot;noooooooooo&quot;&gt;&lt;/p&gt;
&lt;p&gt;DON&apos;T DO IT! Sticking to the process may incur a little bit of extra time up front, but for the love of God it has the potential to save your ass in the long run.&lt;/p&gt;
&lt;p&gt;Nothing like an example to help justify my claim...one of our steps in the process, almost immediately after our discovery meeting, is to run a smoke test on the clients server. A smoke test for anyone interested is just an automated test that runs through a series of tasks to ensure that, in our case, the clients server is set up to handle a WordPress installation. There have been a few times where the process doesn&apos;t get followed, the client drags their feet in getting us hosting credentials, and all of the sudden, it&apos;s time to launch the site! Hooray right? Not exactly. I&apos;ve tried to launch to a server where a smoke test was not ran before and run into castrophic problems...it&apos;s running on PHP4...ssh isn&apos;t enabled...the server was bit by a PC and is now a windows server...awful awful terrible things like that. And because of these things, the site didn&apos;t get launched, and the project delivery date had to be extended, sometimes as long as weeks after the initial go live date.&lt;/p&gt;
&lt;p&gt;If process had been followed, we wouldn&apos;t have run into these issues, they would have been resolved while development was happening, and the site would have gone live on the day it was supposed to.&lt;/p&gt;
&lt;p&gt;This is where I&apos;ll end the post for now. Stay tuned for more like this as I intend to turn this series of posts into a talk that I&apos;ll be giving in August at Refresh Denver. &lt;a href=&quot;http://www.meetup.com/refreshdenver/events/219844847/&quot;&gt;Check it out and RSVP if you&apos;re interested!&lt;/a&gt;&lt;/p&gt;</content:encoded></item><item><title><![CDATA[Choosing Your Stack: Part 1]]></title><description><![CDATA[Ah yes. The question that plagues every developer looking to break into the Web App development field. A question that I have had to ask…]]></description><link>https://dommagnifi.co/2015-02-19-choosing-your-stack-part-1/</link><guid isPermaLink="false">https://dommagnifi.co/2015-02-19-choosing-your-stack-part-1/</guid><pubDate>Thu, 19 Feb 2015 15:51:00 GMT</pubDate><content:encoded>&lt;p&gt;Ah yes. The question that plagues every developer looking to break into the Web App development field. A question that I have had to ask myself recently as well. Everyone knows there&apos;s a million frameworks out there that will lead you down a particular path. Some are all encompassing stacks, like &lt;a href=&quot;http://mean.io/#!/&quot;&gt;MEAN&lt;/a&gt;, and of course you can mix and match your own. But how the heck are you supposed to choose between &lt;a href=&quot;http://emberjs.com/&quot;&gt;Ember&lt;/a&gt;, &lt;a href=&quot;http://backbonejs.org/&quot;&gt;Backbone&lt;/a&gt;, &lt;a href=&quot;https://angularjs.org/&quot;&gt;Angular&lt;/a&gt;, or &lt;a href=&quot;http://laravel.com/&quot;&gt;Laravel&lt;/a&gt; or the countless thousand other frameworks that exist.&lt;/p&gt;
&lt;p&gt;Through the next few posts, I&apos;m going to walk you through the process that lead to the team I work with to choose our stack.&lt;/p&gt;
&lt;h2&gt;Choosing Your Projects&lt;/h2&gt;
&lt;p&gt;The first and clearly most important step to this process is choosing which types of projects you want to work on. Are they single page apps? Or as the &lt;a href=&quot;http://en.wikipedia.org/wiki/Single-page_application&quot;&gt;Wikipedia&lt;/a&gt; page puts it...&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;...a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Or are you looking to build apps that adhere to the MVC (Model - View - Controller) principle, again, defined by &lt;a href=&quot;http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller&quot;&gt;Wikipedia&lt;/a&gt; as...&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;...a software architectural pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to or accepted from the user&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;The team I am working with landed on the single page app approach. After further research we established that this title of &quot;single page&quot; does not directly translate to a literal one page application, but actually describes an app that uses AJAX and api calls to render page content fluidly without a page load. Thus giving the illusion of a &quot;single page&quot; application.&lt;/p&gt;
&lt;p&gt;So far so good, we&apos;ve established what type of apps we want to build. Currently we are in the phase of choosing actual tools to help us build the thing we want. I don&apos;t have too much more info at the moment, but let me show you the tools we are looking into.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://emberjs.com/&quot;&gt;Ember&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://angularjs.org/&quot;&gt;Angular&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.meteor.com/&quot;&gt;Meteor.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://facebook.github.io/react/&quot;&gt;React.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://nodejs.org/&quot;&gt;Node&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://iojs.org/en/index.html&quot;&gt;io.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://symfony.com/&quot;&gt;Symfony&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://backbonejs.org/&quot;&gt;Backbone&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Obviously some of these are front end, others are backend. We are looking at all of these options and how they pair together. Each has their pros and cons but at the moment we need to figure out what set of tools will not only be most effective for the project, but we need to also figure out which tools play to the skills we currently have. Zenman is primarily a WordPress shop. That being said we have a pretty solid understanding of PHP, which makes us lean towards utilizing symfony as a the backend framework. We are still in the process but I think we have a good start. Updates to come as they develop.&lt;/p&gt;</content:encoded></item><item><title><![CDATA[The Internet’s Own Boy]]></title><description><![CDATA[I had the pleasure of watching The Internet’s Own Boy: The Story of Aaron Swartz, and let me tell you, this documentary that highlights…]]></description><link>https://dommagnifi.co/2014-12-14-the-internets-own-boy/</link><guid isPermaLink="false">https://dommagnifi.co/2014-12-14-the-internets-own-boy/</guid><pubDate>Sun, 14 Dec 2014 01:09:00 GMT</pubDate><content:encoded>&lt;p&gt;I had the pleasure of watching &lt;strong&gt;&lt;em&gt;The Internet’s Own Boy: The Story of Aaron Swartz&lt;/em&gt;&lt;/strong&gt;, and let me tell you, this documentary that highlights tragedy that is the US Justice system was quite eye opening.&lt;/p&gt;
&lt;p&gt;I&apos;d like to preface with the fact that I think Aaron Swartz  was  one of the internet&apos;s, if not this generation&apos;s most influential figures. The guy was a damn genius, had incredible ideas for the web itself, and had an amazing desire to make documents that were in the public domain, easily accessible to the public.&lt;/p&gt;
&lt;p&gt;Public documents easily accessible to the public...not a crazy desire.&lt;/p&gt;
&lt;p&gt;The documentary goes into detail about what Mr. Swartz did with the whole Jstor MIT debacle, and essentially the FBI ended up investigating this person because he downloaded too many public documents, too quickly. It appears he had no intention of reselling these papers, or even posting them up for public viewing, it appears his intentions were to analyze the massive amounts of data, like he had done in the past, to try to improve specific things.&lt;/p&gt;
&lt;p&gt;I really connected with the documentary because of how deeply this person seemed to have touched the lives of every single person around him. Mr. Swartz was described as a person who just wanted to make the world a better place.&lt;/p&gt;
&lt;p&gt;The other thing that really made me pay attention was the fact that some people in the documentary had the view that the government was trying to make an example of Aaron to prevent people from shaking things up too much. &quot;Hackers&quot; like Aaron posed a threat to the government, and they wanted to scare the shit out of that group of people to prevent that shakeup from affecting their bottom dollar. It&apos;s mind blowing to me that they drove this genius of a man to end his own life.&lt;/p&gt;
&lt;p&gt;In addition his contributions to slowing down and killing SOPA are possibly some of the most important contributions to preserving free speech on the internet to date.&lt;/p&gt;
&lt;p&gt;There was so much more Mr. Swartz had left to accomplish, so much good that he could have done for this broken system that we have, that we blissfully ignore and accept. The man saw a thing that was broken, that was censoring people and materials that should be available to everyone to further their knowledge. But the government realized how scary an informed public is, and ran him into the ground. The story is tragic, but it is one that every single person needs to be aware of, and informed about so that we can carry on his legacy and his goal to make the world a better place.&lt;/p&gt;
&lt;p&gt;If you want to watch the video it&apos;s on Youtube and multiple other places. Check it out.&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/vXr-2hwTk58&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;</content:encoded></item><item><title><![CDATA[A More Minimal Approach]]></title><description><![CDATA[Howdy folks! So after an absurd amount of time, I've decided to update my site. Not really featuring any work at the moment, but I…]]></description><link>https://dommagnifi.co/2014-12-09-a-more-minimal-approach/</link><guid isPermaLink="false">https://dommagnifi.co/2014-12-09-a-more-minimal-approach/</guid><pubDate>Tue, 09 Dec 2014 17:24:11 GMT</pubDate><content:encoded>&lt;p&gt;Howdy folks!&lt;/p&gt;
&lt;p&gt;So after an absurd amount of time, I&apos;ve decided to update my site. Not really featuring any work at the moment, but I definitely have plans for more features!&lt;/p&gt;
&lt;p&gt;One thing I really wanted to start doing was write. Any new technology that I&apos;m learning, I&apos;m going to start documenting here to help myself learn and recall.&lt;/p&gt;
&lt;p&gt;Thanks for taking a gander!&lt;/p&gt;</content:encoded></item></channel></rss>