{"componentChunkName":"component---src-templates-tags-js","path":"/tags","webpackCompilationHash":"329948123daed8fecb50","result":{"pageContext":{"isCreatedByStatefulCreatePages":false,"posts":{"JAMStack":[{"excerpt":"This past week, I had the joy of attending the JAMStackConf in San Francisco with 550 other excited and curious developers. For those not familiar, yet, with the JAMStack, it stands for Javascript APIs Markup. It's an approach to developing…","html":"

\n \n \n

Lest you be dissuaded by the term static, this refers to what the browser receives not to how interactive a web application can be. In fact, Static Site Generators (SSG), like Gatsby, could be considered replacements for framework boilerplates like create-react-app. Not to start an argument there, there are plenty of resources online to familiarize yourself with the JAMStack, if you are so inclined.

\n

For now, I want to offer a few reflections on my experience at the conference and the state of the JAMStack that I gathered from participating.

\n

Watch JAMStackConf Videos

\n

The Future of the JAMStack is Dependent on Solutions That Are Being Developed and Those That Are Launching

\n

Some of the biggest hurdles for developers interested in developing on the JAMStack involve OAuth, Live Edits, Live Preview, CMS Solutions that are non-developer friendly and trusted, and handling builds of Large Sites, handling builds with a large volume of content production 24 hours of the day. Several of these questions received answers this week:

\n\n

These are just a few of the tools we heard about and were able to talk about later with vendors.

\n

There is a Growing History of High Volume Campaigns for Major Firms Being Run On the JAMStack

\n

Besides showcases like those on Gatsby's site, it's great to hear from major corporations and major agencies finding the JAMStack to be a solution for many of the problems they have faced with quick turnarounds, organizing development workflows and teams, and providing high-quality performance at scale.

\n

Justin Watts from Loblaw Digital shared with us how they were able to redirect a corporate culture towards greater efficiency while producing major sites used by millions of Canadians.

\n

Two of the more broadly well-known viral social movements of the past two years—The Kaepernick Nike Campaign and The Chicken Sandwich Wars of 2019—had behind them JAMStack solutions that were able to handle hundreds of thousands of users at a time.

\n

At the Restaurant Brands International booth I heard it said (in so many words):

\n
\n

The chicken may have run out, but the website surely didn't

\n
\n

Netlify Function, Serverless Functions, etc., are a necessary tool to master to take full advantage of the JAMStack.

\n

I was fortunate to be able to attend the Serverless Workshop led by David Wells. Check out his stuff wherever you can find it (like here on Github).

\n

The key to creating dynamic JAMStack applications is mastering the middle-letter of the JAM—APIs. I feel very empowered by what I learned from David. His workshop was deep where needed and broad where needed. I left with a million use-cases buzzing around my brain.

\n

Is there a traffic JAM ahead? While it seems there is a growing number of devs who love the JAMStack, I talked to very few who had the opportunity to work on it day-to-day in their current position or who thought it's unlikely they ever could at their current job.

\n

If this paragraph is all you read, this is the most important takeaway I had from the conference. I am confident in the direction of the JAMStack, the progression of the development and release of dev tooling, the quality and ease of use of the development, build and deployment process, but, but, but, and perhaps this is always the case with new tech (legacy code), I along with many other developers have little chance to use the stack without changing jobs, going freelance, or building stuff on the side.

\n

Could this create a ceiling for the JAMStack?

\n

I, for one, intend on using it in all my side-work. But, honestly, I have a wife and three kids. I can't be coding 10-12 hours a day. I need my coding passions to line up with my employment or fughetaboudit!

\n

That is some sweet tasting JAM

\n

I said the previous paragraph was the most important, it is, for the sakes of my thoughts on the stack, but this is my favorite. I really enjoyed getting to know other developers at this conference.

\n\n

Finally, I want to share a story with you about Sean Grove from OneGraph.

\n

Servant Leadership Exemplified

\n

When I sat next to Sean over lunch, I had no idea who he was at the time. We were all wowed by his presentation not one hour later. Over lunch, he was very cordial, friendly, and engaging with everyone around the table. He didn't talk about himself, but asked us questions about who we were and what we did. So humble. That day we were served Cornish hens (with plastic forks....) and behold, my fork busted in half. Before I could do anything, without a word, Sean went and grabbed me new silverware. Then he chatted with me a bit as lunch was ending.

\n

Why do I share this with you?

\n

We not only need great technology to change the world, we need great people. Here is a founder of a new startup, being humble and through that showing great strength. I think we need more people like Sean and should ourselves try to emulate that type of servant leadership. Match it with some serious public speaking chops and you have someone people will follow.

\n

This is also a proxy for what coding is all about.

\n

Anthropologists have long recognized that technology is simply an extension of humankind. The JAMStack, or whatever stack, company, job, or whatever, tech is always about people. What we produce is intended to help others in some way, shape, form, or fashion.

\n

I've been encouraged this past week to remember people when I code. People I love, people I work with, people I meet, and really all people. We never know how far some piece of code we craft will go, nor how many others it will touch.

\n

That's humbling and yet exciting to think about, isn't it?

","id":"3991f641-dc67-5fd4-b8ec-27c0dc40db55","timeToRead":7,"frontmatter":{"date":"2019-10-21","path":"/blog/new-tools-new-friends-reflecing-on-jamstackconf_sf-2019.html","tags":["JAMStack","gatsby","netlify","forestryio","tinacms","onegraph","stackbit"],"title":"New Tools, New Friends: Reflecting on JAMStackConf_SF 2019","featuredAlt":"San Francisco JAM Stack Conference: Javascript APIs Markup.","redirect_from":null}}],"gatsby":[{"excerpt":"This past week, I had the joy of attending the JAMStackConf in San Francisco with 550 other excited and curious developers. For those not familiar, yet, with the JAMStack, it stands for Javascript APIs Markup. It's an approach to developing…","html":"

\n \n \n

Lest you be dissuaded by the term static, this refers to what the browser receives not to how interactive a web application can be. In fact, Static Site Generators (SSG), like Gatsby, could be considered replacements for framework boilerplates like create-react-app. Not to start an argument there, there are plenty of resources online to familiarize yourself with the JAMStack, if you are so inclined.

\n

For now, I want to offer a few reflections on my experience at the conference and the state of the JAMStack that I gathered from participating.

\n

Watch JAMStackConf Videos

\n

The Future of the JAMStack is Dependent on Solutions That Are Being Developed and Those That Are Launching

\n

Some of the biggest hurdles for developers interested in developing on the JAMStack involve OAuth, Live Edits, Live Preview, CMS Solutions that are non-developer friendly and trusted, and handling builds of Large Sites, handling builds with a large volume of content production 24 hours of the day. Several of these questions received answers this week:

\n\n

These are just a few of the tools we heard about and were able to talk about later with vendors.

\n

There is a Growing History of High Volume Campaigns for Major Firms Being Run On the JAMStack

\n

Besides showcases like those on Gatsby's site, it's great to hear from major corporations and major agencies finding the JAMStack to be a solution for many of the problems they have faced with quick turnarounds, organizing development workflows and teams, and providing high-quality performance at scale.

\n

Justin Watts from Loblaw Digital shared with us how they were able to redirect a corporate culture towards greater efficiency while producing major sites used by millions of Canadians.

\n

Two of the more broadly well-known viral social movements of the past two years—The Kaepernick Nike Campaign and The Chicken Sandwich Wars of 2019—had behind them JAMStack solutions that were able to handle hundreds of thousands of users at a time.

\n

At the Restaurant Brands International booth I heard it said (in so many words):

\n
\n

The chicken may have run out, but the website surely didn't

\n
\n

Netlify Function, Serverless Functions, etc., are a necessary tool to master to take full advantage of the JAMStack.

\n

I was fortunate to be able to attend the Serverless Workshop led by David Wells. Check out his stuff wherever you can find it (like here on Github).

\n

The key to creating dynamic JAMStack applications is mastering the middle-letter of the JAM—APIs. I feel very empowered by what I learned from David. His workshop was deep where needed and broad where needed. I left with a million use-cases buzzing around my brain.

\n

Is there a traffic JAM ahead? While it seems there is a growing number of devs who love the JAMStack, I talked to very few who had the opportunity to work on it day-to-day in their current position or who thought it's unlikely they ever could at their current job.

\n

If this paragraph is all you read, this is the most important takeaway I had from the conference. I am confident in the direction of the JAMStack, the progression of the development and release of dev tooling, the quality and ease of use of the development, build and deployment process, but, but, but, and perhaps this is always the case with new tech (legacy code), I along with many other developers have little chance to use the stack without changing jobs, going freelance, or building stuff on the side.

\n

Could this create a ceiling for the JAMStack?

\n

I, for one, intend on using it in all my side-work. But, honestly, I have a wife and three kids. I can't be coding 10-12 hours a day. I need my coding passions to line up with my employment or fughetaboudit!

\n

That is some sweet tasting JAM

\n

I said the previous paragraph was the most important, it is, for the sakes of my thoughts on the stack, but this is my favorite. I really enjoyed getting to know other developers at this conference.

\n\n

Finally, I want to share a story with you about Sean Grove from OneGraph.

\n

Servant Leadership Exemplified

\n

When I sat next to Sean over lunch, I had no idea who he was at the time. We were all wowed by his presentation not one hour later. Over lunch, he was very cordial, friendly, and engaging with everyone around the table. He didn't talk about himself, but asked us questions about who we were and what we did. So humble. That day we were served Cornish hens (with plastic forks....) and behold, my fork busted in half. Before I could do anything, without a word, Sean went and grabbed me new silverware. Then he chatted with me a bit as lunch was ending.

\n

Why do I share this with you?

\n

We not only need great technology to change the world, we need great people. Here is a founder of a new startup, being humble and through that showing great strength. I think we need more people like Sean and should ourselves try to emulate that type of servant leadership. Match it with some serious public speaking chops and you have someone people will follow.

\n

This is also a proxy for what coding is all about.

\n

Anthropologists have long recognized that technology is simply an extension of humankind. The JAMStack, or whatever stack, company, job, or whatever, tech is always about people. What we produce is intended to help others in some way, shape, form, or fashion.

\n

I've been encouraged this past week to remember people when I code. People I love, people I work with, people I meet, and really all people. We never know how far some piece of code we craft will go, nor how many others it will touch.

\n

That's humbling and yet exciting to think about, isn't it?

","id":"3991f641-dc67-5fd4-b8ec-27c0dc40db55","timeToRead":7,"frontmatter":{"date":"2019-10-21","path":"/blog/new-tools-new-friends-reflecing-on-jamstackconf_sf-2019.html","tags":["JAMStack","gatsby","netlify","forestryio","tinacms","onegraph","stackbit"],"title":"New Tools, New Friends: Reflecting on JAMStackConf_SF 2019","featuredAlt":"San Francisco JAM Stack Conference: Javascript APIs Markup.","redirect_from":null}},{"excerpt":"I recently created my second production Gatsby application that gives a simple presentation of a local government open data dataset. I say production, though, much of the application is a proof-of-concept for a bigger application I have in the works…","html":"

\n \n \nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n return null\n}\n\nfunction InfiniteScrollTemplate(props) {\n return (\n <Layout {...props}>\n <InfiniteScroll {...props}/>\n </Layout>\n )\n}\n\nexport default InfiniteScrollTemplate\n

We will focus on adding the core logic for infinite scroll to the InfiniteScroll functional component. We do not need to declare a React class because of the two aforementioned hooks—useState and useEffect

\n
Creating and Setting Internal State with useState
\n

React hooks allow us to write functional components that can “hook into” other React features. useState allows us to add state that is preserved between renders of a functional component. Unlike state within a React class, useState replaces the previous state rather than merging with previous state. Calling useState takes only one argument, whatever you conceive of as the initial state. The useState hook can be called multiple times, so rather than having a single state object, you can have multiple state-like variables. This is because the call to useState returns an array of two properties - the value of the current state and a function to call to update the value of that state.

\n
const [currentState, setState] = useState(/* some value or fn that returns a value */)
\n

For infinite scroll to work in this example, we need two state variables—a boolean indicating if there are more records to load and an array of the records already loaded. Seed the currentList with the first 10 records. Don’t worry if there is the possibility that the initial set is less than 10, Array.slice will return all records up to the length of the array if you provide an ending value greater than the last index of the array.

\n

Note: if we had a situation where you loaded data asynchronously from an API, we would also need someway to determine if data was in loading state

\n
const [ hasMore, setMore ] = useState(edges.length > 10)\nconst [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n// and if loading from an API asycrhonously\nconst [ isLoading, setLoading ] = useState(false)
\n
Creating Event Handlers to Read and Set State
\n

Reading and setting state will occur within an event listener on the scroll position of the page. If you use an external api and that api is still loading content, we will return immediately, and we will also exit if we know there are no more edges to load. Otherwise, we will check to see if the scroll position of the document plus the innerHeight of the window equals the offsetHeight of the document, and if so, we can load more edges. Basically, this checks to see if the page is scrolled all the way to the bottom.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n    loadEdges(true)\n  }\n}
\n

The loadEdges function will do the following, in order:

\n
    \n
  1. if using an asynchronously api call, will set the loading flag to true
    2. \n
  2. determine if any more edges remaining
    3. \n
  3. slice a new chunk of edges and append to the current list
    4. \n
  4. if using an asynchronously api call, will return the loading flag to false
    5. \n
\n

Since I’m loading from the Context API, I will ignore steps 1 & 2 above.

\n
const loadEdges = () => {\n  const currentLength = currentList.length\n  const more = currentLength < edges.length\n  const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n  setMore(more)\n  addToList([...currentList, ...nextEdges])\n}
\n

How would isLoading be used?

\n

Here is one overly simplistic example:

\n
const loadEdges = async () => {\n  setLoading(true);\n  try {\n      const newEdges = await fetch('https://path/to/some/api')\n      const more = newEdges.length > 0\n      setMore(more)\n      addBusinesses([...currentList, ...nextEdges])\n  } catch(err) {\n      console.error({fetchNewEdgesError: err})\n  }\n  setLoading(false)\n}
\n
Checking The Scroll Position on Each Render with useEffect
\n

The final step to initializing infinite scroll is the useEffect hook. The hook useEffect takes two arguments: a function, and an array. The first argument is the function that will be called every time after the component is rendered. This function is allowed to return another function which will be remembered and gets called as a cleanup function (I’m not sure I fully understand cleanups yet, but I think Dan Abramov does). The second argument is an array of dependencies that would prevent an effect from being called if the values of those dependencies are unchanged between renders. Infinite scroll will a function with a cleanup callback as well as the array full of dependencies to work.

\n
useEffect(\n  () => {\n    /* function that gets called every time */\n    return () => {\n      /* cleanup function to be called */\n    }\n  }, [/* dependencies */])
\n

useEffect is a great place to initialize event listeners on the window or document, as well as to remove those listeners during cleanup, such as listening for scroll events.

\n
  window.addEventListener('scroll', handleScroll)
\n

And thus, the cleanup function:

\n
  window.removeEventListener('scroll', handleScroll)
\n

This gives us an almost complete useEffect function call, we will simply add our state variables to the dependencies array so that effect is only set or cleaned up when the variables change:

\n
useEffect(\n  () => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, isLoading, currentList])
\n

With state, event handlers, effects initialized, we are free to return the jsx for the scrolling list. The following maps over the currentList array. It also adds labels displaying the current state of the list:

\n
return (\n  <> {/* shorthand for React.Fragment */}\n    <ul>\n      {\n        currentList.map(({node: { fields }}, idx) => {\n          return (\n            <li key={`fields-${idx}`} index={idx + 1}>\n              { \n                /* you will know the specifics here from how you load your data */\n                fields \n              }\n            </li>\n          )\n        })\n      }\n    </ul>\n    {\n      !hasMore &&\n        <div>All Businesses Loaded!</div>\n    }\n    {\n      hasMore &&\n        <div>Scroll Down to Load More...</div>\n    }\n    {\n      /* if using this flag, otherwise omit */\n      isLoading && \n        <div>Loading...</div>\n    }\n  </>\n)
\n

Putting It All Together

\n

Now we have a complete picture of the infinite scroll functional component. See below, but don’t leave yet, we still have to account for gatsby build and mobile events.

\n
import React, { useState, useEffect } from 'react'\nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n  const [ hasMore, setMore ] = useState(edges.length > 10)\n  const [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n  \n  const loadEdges = () => {\n    const currentLength = currentList.length\n    const more = currentLength < edges.length\n    const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n    setMore(more)\n    addToList([...currentList, ...nextEdges])\n  }\n\n  const handleScroll = () => {\n    if ( !hasMore || isLoading ) return;\n    if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n      loadEdges()\n    }\n  }\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, currentList])\n\n  return (\n    <> {/* shorthand for React.Fragment */}\n      <ul>\n        {\n          currentList.map(({node: { fields }}, idx) => {\n            return (\n              <li key={`fields-${idx}`} index={idx + 1}>\n                { \n                  /* you will know the specifics here from how you load your data */\n                  fields \n                }\n              </li>\n           )\n          })\n        }\n      </ul>\n      {\n        !hasMore &&\n          <div>All Businesses Loaded!</div>\n      }\n      {\n        hasMore &&\n          <div>Scroll Down to Load More...</div>\n      }\n      {\n    </>\n  )\n}\n\nfunction InfiniteScrollTemplate(props) {\n  return (\n    <Layout {...props}>\n      <InfiniteScroll {...props}/>\n    </Layout>\n  )\n}\n\nexport default InfiniteScrollTemplate
\n

This functional component will work just fine during development on a desktop browser. But you will lose the scroll effect during the build and on touch screens. It will fail during build because client globals like window and document are undefined during the build. It will fail on mobile because scroll is a mouse event. We need to add some conditions for our event listeners to handle both conditions.

\n

Optimizing for Production and Touch Screens

\n

In addition to adding an event listener on scroll, we also need event listeners for touchend and resize (to handle situations where someone resizes their browser), plus we need to add preventDefault to touch events to prevent duplicate events being fired in certain situations where devices have both a mouse and a touch screen. First, create a new event handler for handling touchend. This new handler will simply prevent the default actions on touchend and call the handler for the scroll event (which simply checks to see if we should load more documents). Second, update the useEffect function to add the additional event handlers.

\n
const handleTouchEnd = (e) => {  e.preventDefault();   handleScroll();}\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll)\n  window.addEventListener('resize', handleScroll)  window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window.removeEventListener('scroll', handleScroll)\n    window.removeEventListener('resize', handleScroll)    window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

Finally, we need to add a few simple boolean checks (window &&) to every instance of window or document so that the build process succeeds and so that infinite scroll still operates in the client. Plus, we need to change the scroll position check to be >= instead of the strict equality ===.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window && (     ( window.innerHeight + document.documentElement.scrollTop ) >= document.documentElement.offsetHeight )  ){    loadEdges()\n  }\n}\nuseEffect(() => {\n  window && window.addEventListener('scroll', handleScroll)  window && window.addEventListener('resize', handleScroll)  window && window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window && window.removeEventListener('scroll', handleScroll)    window && window.removeEventListener('resize', handleScroll)    window && window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

There you have it! You have a component that will implement infinite scroll in the browser, on touch screens, and in production within a Gatsby or React application.

\n

Check out the following page in your browser and on mobile to see this code in action.

\n

You can also see my specific implementation of the source code on github.

\n
\n

Update

\n

I had to adjust the touchend handler to account for and exclude touches on links. See my next blog post on this topic.

","id":"7fcb149e-c917-5351-99be-8c78d8765d8b","timeToRead":11,"frontmatter":{"date":"2019-05-20","path":"/blog/infinite-scroll-mobile-desktop-gatsby.html","tags":["gatsby","development","UX","react","hooks","infinite scroll"],"title":"Adding Infinite Scroll For Both Desktop and Mobile in Your Gatsby Project with React Hooks","featuredAlt":"List of items waiting to be updated on scroll","redirect_from":["/blog/inifinite-scroll-mobile-desktop-gatsby.html"]}},{"excerpt":"I was drawn to Gatsby out of my love for React, and my desire to serve fast, performant, responsive applications. I started learning React just as the library started embracing ES6 classes, and just as was taking off. It was a challenge at first to…","html":"

\n \n \n \n \n

\n

I was drawn to Gatsby out of my love for React, and my desire to serve fast, performant, responsive applications. I started learning React just as the library started embracing ES6 classes, and just as create-react-app was taking off. It was a challenge at first to learn the simplicity of proxying to get the front end to run concurrently with a node / express API. And yet, to get from that point to server-side rendering took a little more research and effort. It has been fun learning with and from the larger coding community. I could continue to enumerate the other technical issues I have encountered and solved, and yet some others I still have to learn, but note something important so far regarding my journey—it has been a techinical-first-journey, focused on knowledge and skill of the various langauges and libraries, necessary yes, but perhaps not primary. The last thing on mind has been SEO, accessbility, and security.

\n

Setting An SEO-First Mindset

\n

I’ll leave accessibility and then security future posts, but what has impressed me thus far in my dive into the Gatbsy ecosystem has been the ease to configure search engine optimization. In fact, you can create an architecture for your site or app that is SEO driven long before developing your UI. I want to walk you through the things I have learned so far in optimizing a Gatsby site for SEO right from the start.

\n

Before We Begin

\n

You need to have some familiarity with Gatsby. To learn how to install the gatbsy-cli and create a new Gatsby project from one of the many Gatsby Starters, please consider completing the Gatsby tutorial.

\n

Otherwise, pick a starter from the SEO category, and open the SEO component or just use the gatsby-starter-default by running from the command line:

\n
  gatsby new seo-blog https://github.com/gatsbyjs/gatsby-starter-default
\n

The SEO component is dependent upon react-helmet, if your starter does not come with SEO initialized be sure to add it. We also want to add some other features like sitemap, google analytics, and RSS feed, for syndication. Finally, we need to create robots.txt to manage how search engines crawl the site. I’ve split up the commands below for spacing purposes, but they can all run as one yarn add command:

\n
  yarn add react-helmet gatsby-plugin-react-helmet \n  yarn add gatsby-plugin-feed gatsby-plugin-google-analytics gatsby-plugin-sitemap\n  yarn add gatsby-plugin-robots-txt
\n

With your starter and these plugins installed, we are ready to set up our site for SEO Performance.

\n

Setting up gatsby-config.js

\n

Within the root of your new Gatsby project sits the file Gatsby uses to configure siteMetaData and plugins and several other important features.

\n

This file, gatsby-config.js is going to do the heavy lifting of importing all your vital SEO related content into GraphQL or create necessary files directly (like robots.txt).

\n

Site Metadata

\n

Metadata is as it sounds, data that extends across or throughout the entirity of your site. It can be used anywhere, but will come most in handy when configuring your SEO component as well as Google Structured Data.

\n

Initialize your metadata as an Object literal with key/value pairs that can be converted into <meta> tags, or can be passed to sitemaps or footers, wherever you might need global site data:

\n
  <meta name=\"title\" content=\"My Super Awesome Site\"/>\n  <meta name=\"description\" content=\"My Super Awesome Site will blow your mind with radical content, extravagant colors, and hip designs.\"/>
\n

Here is where you need to plan what might use across your site:

\n\n

With siteMetadata set up, your can now query this data to be used within your plugin initialization, even within the same gatsby-config.js file. I’ve organized my siteMetadata so that I can make the following query:

\n
  query: `\n    site {\n      siteMetadata {\n        title\n        description\n        author\n        siteUrl\n        siteVerification {\n          google\n          bing\n        }\n        social {\n          twitter\n        }\n        socialLinks {\n          twitter\n          linkedin\n          facebook\n          stackOverflow\n          github\n          instagram\n          pinterest\n          youtube\n          email\n          phone\n          fax\n          address\n        }\n        keywords\n        organization {\n          name\n          url\n        }\n      }\n    }\n  `
\n

This query returns an object matching this query structure:

\n
  site: {\n    siteMetadata: {\n      title: String,\n      description: String,\n      author: String,\n      siteUrl: String,\n      siteVerification: {\n        google: String,\n        bing: String\n      },\n      social: {\n        twitter: String\n      },\n      socialLinks: {\n        twitter: String,\n        linkedin: String,\n        facebook: String,\n        stackOverflow: String,\n        github: String,\n        instagram: String,\n        pinterest: String,\n        youtube: String,\n        email: String,\n        phone: String,\n        fax: String,\n        address: String\n      },\n      keywords: [String],\n      organization: {\n        name: String,\n        url: String\n      }\n    }\n  }
\n

Plugin Setup

\n

We are going to focus on four plugins, each for the sitemap, RSS feed, robots.txt file, and Google Analytics (for tracking the SEO success of your site). We’ll initialize the plugins immediately following siteMetaData.

\n
  module.exports = {\n    siteMetadata: {\n      /** SEE ABOVE **/\n    },\n    plugins: [       /** An ARRAY **/    ],   }
\n
    \n
  1. gatsby-plugin-sitemap
    2. \n
\n

The sitemap plugin can be used simply or with options. Generally, you want to include anything and everything with high quality content, and exclude duplicate content, thin content, or pages behind authentication. Gatsby provides a detailed walkthrough for setting up your sitemap.

\n
  plugins: [\n      {\n        resolve: `gatsby-plugin-sitemap`,\n        options: {\n          exclude: [`/admin`, `/tags/links`]        }\n      }\n    },\n  ]
\n
    \n
  1. gatsby-plugin-feed
    2. \n
\n

An RSS feed helps with syndication of content on your site, like if you had a blog and wanted to cross-post to another better established blog, and it helps communicate changes to your site to search engines. This plugin allows you to create any number of different feeds utlizing the power of GraphQL to query your data. Some of what is below is dependent on how you structure your pages and posts in gatsby-node.js. The feed will walk through each of your pages in markdown generate an XML RSS Feed. Gatsby provides a detailed walkthrough for adding an RSS feed.

\n

Note particularly the use of queries below to complete the feed.

\n
  {\n    resolve: `gatsby-plugin-feed`,\n    options: {\n      // graphQL query to get siteMetadata      query: `        {          site {            siteMetadata {              title              description              siteUrl              site_url: siteUrl,              author            }          }        }      `,      feeds: [\n        // an array of feeds, I just have one below\n        {\n          serialize: ({ query: { site, allMarkdownRemark } }) => {\n            const { siteMetadata : { siteUrl } } = site;\n            return allMarkdownRemark.edges.map(edge => {\n              const { \n                node: { \n                  frontmatter: {\n                    title, \n                    date, \n                    path, \n                    author: { name, email }, \n                    featured: { publicURL }, \n                    featuredAlt\n                  },\n                  excerpt, \n                  html\n                } \n              } = edge;\n              return Object.assign({}, edge.node.frontmatter, {\n                language: `en-us`,\n                title,\n                description: excerpt,\n                date,\n                url: siteUrl + path,\n                guid: siteUrl + path,\n                author: `${email} ( ${name} )`,\n                image: {\n                  url: siteUrl + publicURL,\n                  title: featuredAlt,\n                  link: siteUrl + path,\n                },\n                custom_elements: [{ \"content:encoded\": html }],\n              })\n            })\n          },\n          // query to get blog post data          query: `          {            allMarkdownRemark(              sort: { order: DESC, fields: [frontmatter___date] },            ) {              edges {                node {                  excerpt                  html                  frontmatter {                    path                    date                    title                    featured {                      publicURL                    }                    featuredAlt                    author {                      name                      email                    }                  }                }              }            }          }          `,          output: \"/rss.xml\",\n          title: `My Awesome Site | RSS Feed`,\n        },\n      ],\n    },\n  },
\n
    \n
  1. gatsby-plugin-robots-txt
    2. \n
\n

With robots.txt files, you can instruct crawlers to ignore your site and/or individual paths, based on certain conditions. See the plugin description for more detailed use cases.

\n
  {\n    resolve: 'gatsby-plugin-robots-txt',\n    options: {\n      policy: [{ userAgent: '*', allow: '/' }]    }\n  },
\n
    \n
  1. gatsby-plugin-google-analytics
    2. \n
\n

Google analytics will help you track how users find and interact with your site, so you can manage and update your site over time for better SEO results. Verify your site with Google and store your analytics key here:

\n
  {\n    resolve: `gatsby-plugin-google-analytics`,\n    options: {\n      trackingId: ``,    },\n  },
\n

Optimizing the SEO Component

\n

The secret sauce behind the SEO Component is the well-known react-hemlet package. Every page and every template imports the SEO Component and thus you can pass specific information to adjust the metadata for each public facing page.

\n

Use your imagination—what can you pass to this component to create the perfect SEO enabled page? Is the page a landing page, a blog post, a media gallery, a video, a professional profile, a product? There are 614 types of schemas listed on https://schema.org. You can pass specific schema related information to the SEO component.

\n

If any of these values you pass to the component, a StaticQuery would fill in what’s missing with siteMetaData. From this data, react-helmet creates all the <meta> tags, including open graph and twitter card tags, and pass relevant data to another component that returns Google Structured Data.

\n

Rather than including a long code-snippet, refer back to the Before We Begin section, or refer to the gatsby-plugin-react-helment page for installation. But please note, the structure of my SEO Component follows that outlined by this excellent post by Dustin Schau.

\n

As I have tinkered with the SEO Component, here are the features I added:

\n
    \n
  1. Additional Fields Passed to Component to: distinguish between types of pages, such as blog posts, to handle authors of content other than main site author, and to handle changes in date modified for pages and posts. More could be added in the future.
    2. \n
\n
  function SEO({\n    description,\n    lang,\n    meta,\n    keywords,\n    image,\n    title,\n    // highlight start\n    pathname,\n    isBlogPost,\n    author,\n    datePublished = false,\n    dateModified = false\n    // highlight-end\n  }) {
\n
    \n
  1. Setting og:type conditionally
    2. \n
\n
  {\n    property: `og:type`,\n    content: isBlogPost ? `article` : `website`,  },
\n
    \n
  1. Always setting an alt property on the image object
    2. \n
\n
  // ALWAYS ADD IMAGE:ALT  {     property: \"og:image:alt\",     content: image.alt   },   {     property: \"twitter:image:alt\",     content: image.alt   },
\n
    \n
  1. Handling Secure Images
    2. \n
\n
  .concat(\n    // handle Secure Image    metaImage && metaImage.indexOf(\"https\") > -1      ? [          {            property: \"twitter:image:secure_url\",            content: metaImage,          },          { property: \"og:image:secure_url\", content: metaImage },        ]      : []  )
\n
    \n
  1. Adding a Component to handle Google Structured Data using schema.org categories. I came across an example of such a component from reading through various documentation and articles, I can’t recall where I saw the link first, but I borrowed and adapted from Jason Lengstorf. I made two small adaptations to his excellent work.
    2. \n
\n

Configuring the SchemaOrg Component

\n

You will import and call the SchemaOrg Component from within the SEO Component and place it just after the closing tag of the Helmet Component and pass the following properties:

\n
  function SEO(.....) {\n    ...\n    return (\n      <> {/* Fragment Shorthand */}\n        <Helmet \n          {/* All the Meta Tag Configuration */}\n        />\n        <SchemaOrg          isBlogPost={isBlogPost}          url={metaUrl}          title={title}          image={metaImage}          description={metaDescription}          datePublished={datePublished}          dateModified={dateModified}          canonicalUrl={siteUrl}          author={isBlogPost ? author : siteMetadata.author}          organization={organization}          defaultTitle={title}        />      </>\n    )\n  }
\n

I won’t copy and paste the entire SchemaOrg Component here. Grab it from the link above, and give Jason Lengstorf some credit in your code. Below are the few additions I made:

\n
    \n
  1. I added author email to the Schema. This will come from siteMetadata for most pages and from post frontmatter from blog posts. This will support multiple authors for your site and each page can reflect that uniquely if you so choose.
    2. \n
\n
  author: {\n    \"@type\": \"Person\",\n    name: author.name,\n    email: author.email,  },
\n
    \n
  1. I updated the organization logo from a simple URI to an ImageObject type. While the String URI is acceptable to the Organization type, Google has specific expectations and was throwing an error until I changed it to an ImageObject.
    2. \n
\n
  publisher: {\n    \"@type\": \"Organization\",\n    url: organization.url,\n    logo: {      \"@type\": \"ImageObject\",      url: organization.logo.url,      width: organization.logo.width,      height: organization.logo.height,    },    name: organization.name,\n  },
\n
    \n
  1. Add dataModified to reflect changes to the page after initial publication for the BlogPosting type.
    2. \n
\n
  datePublished,\n  dateModified,
\n

When you have more complexity within you site, you can pass flags to this Component to return differing types of schema as needed. But no matter what you do, do not put your site into production without first passing through the script generated by the component to the Google Structured Data Testing Tool.

\n

Concluding Thoughts

\n

When I configured my site according to the plan I outlined above, not only do I get image rich, descriptive Social Sharing cards, I get perfect SEO scores when running a Lighthouse Audit on my site:

\n

\n \n \n \n \n

\n

You also see that I scored 100% for Accessibility on my site. This is so easy to score with Gatsby as well, and I’ll talk about what I learned on this topic in the future.

\n

Cross-Posted: https://dev.to/wesleylhandy/putting-seo-first-with-gatsby-3n2g

","id":"fc7a6836-1cdc-519e-8c65-39beae2150c8","timeToRead":10,"frontmatter":{"date":"2019-04-20","path":"/blog/seo-accessibility-first-gatsby.html","tags":["gatsby","development","seo"],"title":"Putting SEO First with Gatsby","featuredAlt":"Gatsby loves to claim to produce the fastest sites around","redirect_from":null}},{"excerpt":"This site has needed an update for a long time. The last time I published a new professional portfolio was two years ago when I graduated from Rutger’s University Coding Bootcamp. I didn’t have even have a regular full-time developer position yet. I…","html":"

\n \n \n \n \n

Lest you be dissuaded by the term static, this refers to what the browser receives not to how interactive a web application can be. In fact, Static Site Generators (SSG), like Gatsby, could be considered replacements for framework boilerplates like create-react-app. Not to start an argument there, there are plenty of resources online to familiarize yourself with the JAMStack, if you are so inclined.

\n

For now, I want to offer a few reflections on my experience at the conference and the state of the JAMStack that I gathered from participating.

\n

Watch JAMStackConf Videos

\n

The Future of the JAMStack is Dependent on Solutions That Are Being Developed and Those That Are Launching

\n

Some of the biggest hurdles for developers interested in developing on the JAMStack involve OAuth, Live Edits, Live Preview, CMS Solutions that are non-developer friendly and trusted, and handling builds of Large Sites, handling builds with a large volume of content production 24 hours of the day. Several of these questions received answers this week:

\n\n

These are just a few of the tools we heard about and were able to talk about later with vendors.

\n

There is a Growing History of High Volume Campaigns for Major Firms Being Run On the JAMStack

\n

Besides showcases like those on Gatsby's site, it's great to hear from major corporations and major agencies finding the JAMStack to be a solution for many of the problems they have faced with quick turnarounds, organizing development workflows and teams, and providing high-quality performance at scale.

\n

Justin Watts from Loblaw Digital shared with us how they were able to redirect a corporate culture towards greater efficiency while producing major sites used by millions of Canadians.

\n

Two of the more broadly well-known viral social movements of the past two years—The Kaepernick Nike Campaign and The Chicken Sandwich Wars of 2019—had behind them JAMStack solutions that were able to handle hundreds of thousands of users at a time.

\n

At the Restaurant Brands International booth I heard it said (in so many words):

\n
\n

The chicken may have run out, but the website surely didn't

\n
\n

Netlify Function, Serverless Functions, etc., are a necessary tool to master to take full advantage of the JAMStack.

\n

I was fortunate to be able to attend the Serverless Workshop led by David Wells. Check out his stuff wherever you can find it (like here on Github).

\n

The key to creating dynamic JAMStack applications is mastering the middle-letter of the JAM—APIs. I feel very empowered by what I learned from David. His workshop was deep where needed and broad where needed. I left with a million use-cases buzzing around my brain.

\n

Is there a traffic JAM ahead? While it seems there is a growing number of devs who love the JAMStack, I talked to very few who had the opportunity to work on it day-to-day in their current position or who thought it's unlikely they ever could at their current job.

\n

If this paragraph is all you read, this is the most important takeaway I had from the conference. I am confident in the direction of the JAMStack, the progression of the development and release of dev tooling, the quality and ease of use of the development, build and deployment process, but, but, but, and perhaps this is always the case with new tech (legacy code), I along with many other developers have little chance to use the stack without changing jobs, going freelance, or building stuff on the side.

\n

Could this create a ceiling for the JAMStack?

\n

I, for one, intend on using it in all my side-work. But, honestly, I have a wife and three kids. I can't be coding 10-12 hours a day. I need my coding passions to line up with my employment or fughetaboudit!

\n

That is some sweet tasting JAM

\n

I said the previous paragraph was the most important, it is, for the sakes of my thoughts on the stack, but this is my favorite. I really enjoyed getting to know other developers at this conference.

\n\n

Finally, I want to share a story with you about Sean Grove from OneGraph.

\n

Servant Leadership Exemplified

\n

When I sat next to Sean over lunch, I had no idea who he was at the time. We were all wowed by his presentation not one hour later. Over lunch, he was very cordial, friendly, and engaging with everyone around the table. He didn't talk about himself, but asked us questions about who we were and what we did. So humble. That day we were served Cornish hens (with plastic forks....) and behold, my fork busted in half. Before I could do anything, without a word, Sean went and grabbed me new silverware. Then he chatted with me a bit as lunch was ending.

\n

Why do I share this with you?

\n

We not only need great technology to change the world, we need great people. Here is a founder of a new startup, being humble and through that showing great strength. I think we need more people like Sean and should ourselves try to emulate that type of servant leadership. Match it with some serious public speaking chops and you have someone people will follow.

\n

This is also a proxy for what coding is all about.

\n

Anthropologists have long recognized that technology is simply an extension of humankind. The JAMStack, or whatever stack, company, job, or whatever, tech is always about people. What we produce is intended to help others in some way, shape, form, or fashion.

\n

I've been encouraged this past week to remember people when I code. People I love, people I work with, people I meet, and really all people. We never know how far some piece of code we craft will go, nor how many others it will touch.

\n

That's humbling and yet exciting to think about, isn't it?

","id":"3991f641-dc67-5fd4-b8ec-27c0dc40db55","timeToRead":7,"frontmatter":{"date":"2019-10-21","path":"/blog/new-tools-new-friends-reflecing-on-jamstackconf_sf-2019.html","tags":["JAMStack","gatsby","netlify","forestryio","tinacms","onegraph","stackbit"],"title":"New Tools, New Friends: Reflecting on JAMStackConf_SF 2019","featuredAlt":"San Francisco JAM Stack Conference: Javascript APIs Markup.","redirect_from":null}}],"forestryio":[{"excerpt":"This past week, I had the joy of attending the JAMStackConf in San Francisco with 550 other excited and curious developers. For those not familiar, yet, with the JAMStack, it stands for Javascript APIs Markup. It's an approach to developing…","html":"

\n \n \n

Lest you be dissuaded by the term static, this refers to what the browser receives not to how interactive a web application can be. In fact, Static Site Generators (SSG), like Gatsby, could be considered replacements for framework boilerplates like create-react-app. Not to start an argument there, there are plenty of resources online to familiarize yourself with the JAMStack, if you are so inclined.

\n

For now, I want to offer a few reflections on my experience at the conference and the state of the JAMStack that I gathered from participating.

\n

Watch JAMStackConf Videos

\n

The Future of the JAMStack is Dependent on Solutions That Are Being Developed and Those That Are Launching

\n

Some of the biggest hurdles for developers interested in developing on the JAMStack involve OAuth, Live Edits, Live Preview, CMS Solutions that are non-developer friendly and trusted, and handling builds of Large Sites, handling builds with a large volume of content production 24 hours of the day. Several of these questions received answers this week:

\n\n

These are just a few of the tools we heard about and were able to talk about later with vendors.

\n

There is a Growing History of High Volume Campaigns for Major Firms Being Run On the JAMStack

\n

Besides showcases like those on Gatsby's site, it's great to hear from major corporations and major agencies finding the JAMStack to be a solution for many of the problems they have faced with quick turnarounds, organizing development workflows and teams, and providing high-quality performance at scale.

\n

Justin Watts from Loblaw Digital shared with us how they were able to redirect a corporate culture towards greater efficiency while producing major sites used by millions of Canadians.

\n

Two of the more broadly well-known viral social movements of the past two years—The Kaepernick Nike Campaign and The Chicken Sandwich Wars of 2019—had behind them JAMStack solutions that were able to handle hundreds of thousands of users at a time.

\n

At the Restaurant Brands International booth I heard it said (in so many words):

\n
\n

The chicken may have run out, but the website surely didn't

\n
\n

Netlify Function, Serverless Functions, etc., are a necessary tool to master to take full advantage of the JAMStack.

\n

I was fortunate to be able to attend the Serverless Workshop led by David Wells. Check out his stuff wherever you can find it (like here on Github).

\n

The key to creating dynamic JAMStack applications is mastering the middle-letter of the JAM—APIs. I feel very empowered by what I learned from David. His workshop was deep where needed and broad where needed. I left with a million use-cases buzzing around my brain.

\n

Is there a traffic JAM ahead? While it seems there is a growing number of devs who love the JAMStack, I talked to very few who had the opportunity to work on it day-to-day in their current position or who thought it's unlikely they ever could at their current job.

\n

If this paragraph is all you read, this is the most important takeaway I had from the conference. I am confident in the direction of the JAMStack, the progression of the development and release of dev tooling, the quality and ease of use of the development, build and deployment process, but, but, but, and perhaps this is always the case with new tech (legacy code), I along with many other developers have little chance to use the stack without changing jobs, going freelance, or building stuff on the side.

\n

Could this create a ceiling for the JAMStack?

\n

I, for one, intend on using it in all my side-work. But, honestly, I have a wife and three kids. I can't be coding 10-12 hours a day. I need my coding passions to line up with my employment or fughetaboudit!

\n

That is some sweet tasting JAM

\n

I said the previous paragraph was the most important, it is, for the sakes of my thoughts on the stack, but this is my favorite. I really enjoyed getting to know other developers at this conference.

\n\n

Finally, I want to share a story with you about Sean Grove from OneGraph.

\n

Servant Leadership Exemplified

\n

When I sat next to Sean over lunch, I had no idea who he was at the time. We were all wowed by his presentation not one hour later. Over lunch, he was very cordial, friendly, and engaging with everyone around the table. He didn't talk about himself, but asked us questions about who we were and what we did. So humble. That day we were served Cornish hens (with plastic forks....) and behold, my fork busted in half. Before I could do anything, without a word, Sean went and grabbed me new silverware. Then he chatted with me a bit as lunch was ending.

\n

Why do I share this with you?

\n

We not only need great technology to change the world, we need great people. Here is a founder of a new startup, being humble and through that showing great strength. I think we need more people like Sean and should ourselves try to emulate that type of servant leadership. Match it with some serious public speaking chops and you have someone people will follow.

\n

This is also a proxy for what coding is all about.

\n

Anthropologists have long recognized that technology is simply an extension of humankind. The JAMStack, or whatever stack, company, job, or whatever, tech is always about people. What we produce is intended to help others in some way, shape, form, or fashion.

\n

I've been encouraged this past week to remember people when I code. People I love, people I work with, people I meet, and really all people. We never know how far some piece of code we craft will go, nor how many others it will touch.

\n

That's humbling and yet exciting to think about, isn't it?

","id":"3991f641-dc67-5fd4-b8ec-27c0dc40db55","timeToRead":7,"frontmatter":{"date":"2019-10-21","path":"/blog/new-tools-new-friends-reflecing-on-jamstackconf_sf-2019.html","tags":["JAMStack","gatsby","netlify","forestryio","tinacms","onegraph","stackbit"],"title":"New Tools, New Friends: Reflecting on JAMStackConf_SF 2019","featuredAlt":"San Francisco JAM Stack Conference: Javascript APIs Markup.","redirect_from":null}}],"tinacms":[{"excerpt":"This past week, I had the joy of attending the JAMStackConf in San Francisco with 550 other excited and curious developers. For those not familiar, yet, with the JAMStack, it stands for Javascript APIs Markup. It's an approach to developing…","html":"

\n \n \n

Lest you be dissuaded by the term static, this refers to what the browser receives not to how interactive a web application can be. In fact, Static Site Generators (SSG), like Gatsby, could be considered replacements for framework boilerplates like create-react-app. Not to start an argument there, there are plenty of resources online to familiarize yourself with the JAMStack, if you are so inclined.

\n

For now, I want to offer a few reflections on my experience at the conference and the state of the JAMStack that I gathered from participating.

\n

Watch JAMStackConf Videos

\n

The Future of the JAMStack is Dependent on Solutions That Are Being Developed and Those That Are Launching

\n

Some of the biggest hurdles for developers interested in developing on the JAMStack involve OAuth, Live Edits, Live Preview, CMS Solutions that are non-developer friendly and trusted, and handling builds of Large Sites, handling builds with a large volume of content production 24 hours of the day. Several of these questions received answers this week:

\n\n

These are just a few of the tools we heard about and were able to talk about later with vendors.

\n

There is a Growing History of High Volume Campaigns for Major Firms Being Run On the JAMStack

\n

Besides showcases like those on Gatsby's site, it's great to hear from major corporations and major agencies finding the JAMStack to be a solution for many of the problems they have faced with quick turnarounds, organizing development workflows and teams, and providing high-quality performance at scale.

\n

Justin Watts from Loblaw Digital shared with us how they were able to redirect a corporate culture towards greater efficiency while producing major sites used by millions of Canadians.

\n

Two of the more broadly well-known viral social movements of the past two years—The Kaepernick Nike Campaign and The Chicken Sandwich Wars of 2019—had behind them JAMStack solutions that were able to handle hundreds of thousands of users at a time.

\n

At the Restaurant Brands International booth I heard it said (in so many words):

\n
\n

The chicken may have run out, but the website surely didn't

\n
\n

Netlify Function, Serverless Functions, etc., are a necessary tool to master to take full advantage of the JAMStack.

\n

I was fortunate to be able to attend the Serverless Workshop led by David Wells. Check out his stuff wherever you can find it (like here on Github).

\n

The key to creating dynamic JAMStack applications is mastering the middle-letter of the JAM—APIs. I feel very empowered by what I learned from David. His workshop was deep where needed and broad where needed. I left with a million use-cases buzzing around my brain.

\n

Is there a traffic JAM ahead? While it seems there is a growing number of devs who love the JAMStack, I talked to very few who had the opportunity to work on it day-to-day in their current position or who thought it's unlikely they ever could at their current job.

\n

If this paragraph is all you read, this is the most important takeaway I had from the conference. I am confident in the direction of the JAMStack, the progression of the development and release of dev tooling, the quality and ease of use of the development, build and deployment process, but, but, but, and perhaps this is always the case with new tech (legacy code), I along with many other developers have little chance to use the stack without changing jobs, going freelance, or building stuff on the side.

\n

Could this create a ceiling for the JAMStack?

\n

I, for one, intend on using it in all my side-work. But, honestly, I have a wife and three kids. I can't be coding 10-12 hours a day. I need my coding passions to line up with my employment or fughetaboudit!

\n

That is some sweet tasting JAM

\n

I said the previous paragraph was the most important, it is, for the sakes of my thoughts on the stack, but this is my favorite. I really enjoyed getting to know other developers at this conference.

\n\n

Finally, I want to share a story with you about Sean Grove from OneGraph.

\n

Servant Leadership Exemplified

\n

When I sat next to Sean over lunch, I had no idea who he was at the time. We were all wowed by his presentation not one hour later. Over lunch, he was very cordial, friendly, and engaging with everyone around the table. He didn't talk about himself, but asked us questions about who we were and what we did. So humble. That day we were served Cornish hens (with plastic forks....) and behold, my fork busted in half. Before I could do anything, without a word, Sean went and grabbed me new silverware. Then he chatted with me a bit as lunch was ending.

\n

Why do I share this with you?

\n

We not only need great technology to change the world, we need great people. Here is a founder of a new startup, being humble and through that showing great strength. I think we need more people like Sean and should ourselves try to emulate that type of servant leadership. Match it with some serious public speaking chops and you have someone people will follow.

\n

This is also a proxy for what coding is all about.

\n

Anthropologists have long recognized that technology is simply an extension of humankind. The JAMStack, or whatever stack, company, job, or whatever, tech is always about people. What we produce is intended to help others in some way, shape, form, or fashion.

\n

I've been encouraged this past week to remember people when I code. People I love, people I work with, people I meet, and really all people. We never know how far some piece of code we craft will go, nor how many others it will touch.

\n

That's humbling and yet exciting to think about, isn't it?

","id":"3991f641-dc67-5fd4-b8ec-27c0dc40db55","timeToRead":7,"frontmatter":{"date":"2019-10-21","path":"/blog/new-tools-new-friends-reflecing-on-jamstackconf_sf-2019.html","tags":["JAMStack","gatsby","netlify","forestryio","tinacms","onegraph","stackbit"],"title":"New Tools, New Friends: Reflecting on JAMStackConf_SF 2019","featuredAlt":"San Francisco JAM Stack Conference: Javascript APIs Markup.","redirect_from":null}}],"onegraph":[{"excerpt":"This past week, I had the joy of attending the JAMStackConf in San Francisco with 550 other excited and curious developers. For those not familiar, yet, with the JAMStack, it stands for Javascript APIs Markup. It's an approach to developing…","html":"

\n \n \n

Lest you be dissuaded by the term static, this refers to what the browser receives not to how interactive a web application can be. In fact, Static Site Generators (SSG), like Gatsby, could be considered replacements for framework boilerplates like create-react-app. Not to start an argument there, there are plenty of resources online to familiarize yourself with the JAMStack, if you are so inclined.

\n

For now, I want to offer a few reflections on my experience at the conference and the state of the JAMStack that I gathered from participating.

\n

Watch JAMStackConf Videos

\n

The Future of the JAMStack is Dependent on Solutions That Are Being Developed and Those That Are Launching

\n

Some of the biggest hurdles for developers interested in developing on the JAMStack involve OAuth, Live Edits, Live Preview, CMS Solutions that are non-developer friendly and trusted, and handling builds of Large Sites, handling builds with a large volume of content production 24 hours of the day. Several of these questions received answers this week:

\n\n

These are just a few of the tools we heard about and were able to talk about later with vendors.

\n

There is a Growing History of High Volume Campaigns for Major Firms Being Run On the JAMStack

\n

Besides showcases like those on Gatsby's site, it's great to hear from major corporations and major agencies finding the JAMStack to be a solution for many of the problems they have faced with quick turnarounds, organizing development workflows and teams, and providing high-quality performance at scale.

\n

Justin Watts from Loblaw Digital shared with us how they were able to redirect a corporate culture towards greater efficiency while producing major sites used by millions of Canadians.

\n

Two of the more broadly well-known viral social movements of the past two years—The Kaepernick Nike Campaign and The Chicken Sandwich Wars of 2019—had behind them JAMStack solutions that were able to handle hundreds of thousands of users at a time.

\n

At the Restaurant Brands International booth I heard it said (in so many words):

\n
\n

The chicken may have run out, but the website surely didn't

\n
\n

Netlify Function, Serverless Functions, etc., are a necessary tool to master to take full advantage of the JAMStack.

\n

I was fortunate to be able to attend the Serverless Workshop led by David Wells. Check out his stuff wherever you can find it (like here on Github).

\n

The key to creating dynamic JAMStack applications is mastering the middle-letter of the JAM—APIs. I feel very empowered by what I learned from David. His workshop was deep where needed and broad where needed. I left with a million use-cases buzzing around my brain.

\n

Is there a traffic JAM ahead? While it seems there is a growing number of devs who love the JAMStack, I talked to very few who had the opportunity to work on it day-to-day in their current position or who thought it's unlikely they ever could at their current job.

\n

If this paragraph is all you read, this is the most important takeaway I had from the conference. I am confident in the direction of the JAMStack, the progression of the development and release of dev tooling, the quality and ease of use of the development, build and deployment process, but, but, but, and perhaps this is always the case with new tech (legacy code), I along with many other developers have little chance to use the stack without changing jobs, going freelance, or building stuff on the side.

\n

Could this create a ceiling for the JAMStack?

\n

I, for one, intend on using it in all my side-work. But, honestly, I have a wife and three kids. I can't be coding 10-12 hours a day. I need my coding passions to line up with my employment or fughetaboudit!

\n

That is some sweet tasting JAM

\n

I said the previous paragraph was the most important, it is, for the sakes of my thoughts on the stack, but this is my favorite. I really enjoyed getting to know other developers at this conference.

\n\n

Finally, I want to share a story with you about Sean Grove from OneGraph.

\n

Servant Leadership Exemplified

\n

When I sat next to Sean over lunch, I had no idea who he was at the time. We were all wowed by his presentation not one hour later. Over lunch, he was very cordial, friendly, and engaging with everyone around the table. He didn't talk about himself, but asked us questions about who we were and what we did. So humble. That day we were served Cornish hens (with plastic forks....) and behold, my fork busted in half. Before I could do anything, without a word, Sean went and grabbed me new silverware. Then he chatted with me a bit as lunch was ending.

\n

Why do I share this with you?

\n

We not only need great technology to change the world, we need great people. Here is a founder of a new startup, being humble and through that showing great strength. I think we need more people like Sean and should ourselves try to emulate that type of servant leadership. Match it with some serious public speaking chops and you have someone people will follow.

\n

This is also a proxy for what coding is all about.

\n

Anthropologists have long recognized that technology is simply an extension of humankind. The JAMStack, or whatever stack, company, job, or whatever, tech is always about people. What we produce is intended to help others in some way, shape, form, or fashion.

\n

I've been encouraged this past week to remember people when I code. People I love, people I work with, people I meet, and really all people. We never know how far some piece of code we craft will go, nor how many others it will touch.

\n

That's humbling and yet exciting to think about, isn't it?

","id":"3991f641-dc67-5fd4-b8ec-27c0dc40db55","timeToRead":7,"frontmatter":{"date":"2019-10-21","path":"/blog/new-tools-new-friends-reflecing-on-jamstackconf_sf-2019.html","tags":["JAMStack","gatsby","netlify","forestryio","tinacms","onegraph","stackbit"],"title":"New Tools, New Friends: Reflecting on JAMStackConf_SF 2019","featuredAlt":"San Francisco JAM Stack Conference: Javascript APIs Markup.","redirect_from":null}}],"stackbit":[{"excerpt":"This past week, I had the joy of attending the JAMStackConf in San Francisco with 550 other excited and curious developers. For those not familiar, yet, with the JAMStack, it stands for Javascript APIs Markup. It's an approach to developing…","html":"

\n \n \n

Lest you be dissuaded by the term static, this refers to what the browser receives not to how interactive a web application can be. In fact, Static Site Generators (SSG), like Gatsby, could be considered replacements for framework boilerplates like create-react-app. Not to start an argument there, there are plenty of resources online to familiarize yourself with the JAMStack, if you are so inclined.

\n

For now, I want to offer a few reflections on my experience at the conference and the state of the JAMStack that I gathered from participating.

\n

Watch JAMStackConf Videos

\n

The Future of the JAMStack is Dependent on Solutions That Are Being Developed and Those That Are Launching

\n

Some of the biggest hurdles for developers interested in developing on the JAMStack involve OAuth, Live Edits, Live Preview, CMS Solutions that are non-developer friendly and trusted, and handling builds of Large Sites, handling builds with a large volume of content production 24 hours of the day. Several of these questions received answers this week:

\n\n

These are just a few of the tools we heard about and were able to talk about later with vendors.

\n

There is a Growing History of High Volume Campaigns for Major Firms Being Run On the JAMStack

\n

Besides showcases like those on Gatsby's site, it's great to hear from major corporations and major agencies finding the JAMStack to be a solution for many of the problems they have faced with quick turnarounds, organizing development workflows and teams, and providing high-quality performance at scale.

\n

Justin Watts from Loblaw Digital shared with us how they were able to redirect a corporate culture towards greater efficiency while producing major sites used by millions of Canadians.

\n

Two of the more broadly well-known viral social movements of the past two years—The Kaepernick Nike Campaign and The Chicken Sandwich Wars of 2019—had behind them JAMStack solutions that were able to handle hundreds of thousands of users at a time.

\n

At the Restaurant Brands International booth I heard it said (in so many words):

\n
\n

The chicken may have run out, but the website surely didn't

\n
\n

Netlify Function, Serverless Functions, etc., are a necessary tool to master to take full advantage of the JAMStack.

\n

I was fortunate to be able to attend the Serverless Workshop led by David Wells. Check out his stuff wherever you can find it (like here on Github).

\n

The key to creating dynamic JAMStack applications is mastering the middle-letter of the JAM—APIs. I feel very empowered by what I learned from David. His workshop was deep where needed and broad where needed. I left with a million use-cases buzzing around my brain.

\n

Is there a traffic JAM ahead? While it seems there is a growing number of devs who love the JAMStack, I talked to very few who had the opportunity to work on it day-to-day in their current position or who thought it's unlikely they ever could at their current job.

\n

If this paragraph is all you read, this is the most important takeaway I had from the conference. I am confident in the direction of the JAMStack, the progression of the development and release of dev tooling, the quality and ease of use of the development, build and deployment process, but, but, but, and perhaps this is always the case with new tech (legacy code), I along with many other developers have little chance to use the stack without changing jobs, going freelance, or building stuff on the side.

\n

Could this create a ceiling for the JAMStack?

\n

I, for one, intend on using it in all my side-work. But, honestly, I have a wife and three kids. I can't be coding 10-12 hours a day. I need my coding passions to line up with my employment or fughetaboudit!

\n

That is some sweet tasting JAM

\n

I said the previous paragraph was the most important, it is, for the sakes of my thoughts on the stack, but this is my favorite. I really enjoyed getting to know other developers at this conference.

\n\n

Finally, I want to share a story with you about Sean Grove from OneGraph.

\n

Servant Leadership Exemplified

\n

When I sat next to Sean over lunch, I had no idea who he was at the time. We were all wowed by his presentation not one hour later. Over lunch, he was very cordial, friendly, and engaging with everyone around the table. He didn't talk about himself, but asked us questions about who we were and what we did. So humble. That day we were served Cornish hens (with plastic forks....) and behold, my fork busted in half. Before I could do anything, without a word, Sean went and grabbed me new silverware. Then he chatted with me a bit as lunch was ending.

\n

Why do I share this with you?

\n

We not only need great technology to change the world, we need great people. Here is a founder of a new startup, being humble and through that showing great strength. I think we need more people like Sean and should ourselves try to emulate that type of servant leadership. Match it with some serious public speaking chops and you have someone people will follow.

\n

This is also a proxy for what coding is all about.

\n

Anthropologists have long recognized that technology is simply an extension of humankind. The JAMStack, or whatever stack, company, job, or whatever, tech is always about people. What we produce is intended to help others in some way, shape, form, or fashion.

\n

I've been encouraged this past week to remember people when I code. People I love, people I work with, people I meet, and really all people. We never know how far some piece of code we craft will go, nor how many others it will touch.

\n

That's humbling and yet exciting to think about, isn't it?

","id":"3991f641-dc67-5fd4-b8ec-27c0dc40db55","timeToRead":7,"frontmatter":{"date":"2019-10-21","path":"/blog/new-tools-new-friends-reflecing-on-jamstackconf_sf-2019.html","tags":["JAMStack","gatsby","netlify","forestryio","tinacms","onegraph","stackbit"],"title":"New Tools, New Friends: Reflecting on JAMStackConf_SF 2019","featuredAlt":"San Francisco JAM Stack Conference: Javascript APIs Markup.","redirect_from":null}}],"wordpress":[{"excerpt":"You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email... ... on page x some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't…","html":"

\n \n \n \n \n

\n

You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email...

\n
\n

... on page [x] some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't know what to do. Please help! ...

\n
\n

I faced this situation recently. I volunteered to finish up a project for a nonprofit organization (not the one where I work 9 -5). They were one year into a new site build when the developer they originally hired ghosted them.

\n

I'm a JavaScript guy, so I wasn't all that familiar with the entirety of the Wordpress ecosystem, but I figured I knew enough, I had been building my own plugin for work to inject a React application via a shortcode, thinking, \"How hard can it be? It's not even real development...\" (don't get offended, just expressing what I was thinking at the time).

\n

I was very aware of security issues in a Node.js environment, but I had always relied on other services to take care of hosting security. I had heard of .htaccess files, but I'd never put my own LAMP stack application into production from scratch. I hadn't even given it any thought since I have been focusing more and on tech like React, Gatsby, React Native, and even a little Angular.

\n

As easy (in terms of difficulty) it was to handle all the front-end requests of getting the site finished to the client's expectation, I took for granted my own ignorance of the rest of what was involved. I want to share what I have learned over the past two weeks so that (1) I won't forget next time, and (2) so you can avoid many of the mistakes I made.

\n

I am going to try and provide links to all the sources that have helped my in my recent journeys and to briefly talk through some of the more important parts. Let's call this:

\n

Wordpress Security 101

\n
    \n
  1. \n

    Always Hire a Developer You Either Know or Can Verifiably Trust

    \n

    It is very tempting to hire the cheapest developer you can find. But sometimes you get what you pay for.

    \n

    I like that there are sites where developers can be rated, or public reviews left, like Upwork or LinkedIn (want to suggest others?). These help provide accountability for the developer and some sense of security for the client. In this particular case, the original developer took a low fee for a quite complex site and cut a bunch of corners.

    \n

    Links:

    \n\n
    2. \n
  2. \n

    Never download and use unlocked or nulled themes - pay the regular fee from a reputable theme marketplace. Otherwise, you may install Malware!!!

    \n

    I didn't even question the use of the theme on the client's site. Knowing the client, I assumed they would have purchased the theme themselves but it turns out they left it to the developer, who perhaps out of ignorance or a willingness to cut corners downloaded a theme online that was corrupted with the wp_vcd malware.

    \n

    I only discovered how long the malware had been there by comparing the current site with versions of the codebase that existed while the site was offline or in maintenance mode.

    \n

    This particular Malware was found within functions.php, and it created three files within wp-includes: wp-feed.php, wp-vcd.php, wp-tmp.php. It wrapped pages with malvertising scripts and also added a script that logged user's IP addresses who had permissions to edit the site and systematically ignored those users, so they would never detect the malicious behavior when browsing the site themselves, whether logged in or not, whether browsing privately or not.

    \n

    After logging into the remote server as an administrator-level user, I found the odd looking files at first within the wp-includes folder. I removed them, thinking I had solved the problem. The Malware was creating redirects to sites with the oclaserver domain and logging IP addresses to wp-feed.php. I used the following command-line script to find these files.

    \n
    grep -Ril \"oclaserver\"
    \n\n

    Initially, I though this solved the problem, but the next time I checked, the files where back. I deleted the files, then checked again, immediately, the files were once again there, full of the same content. This means either my wpdb was corrupted, or some other file that gets called repeatedly by Wordpress was corrupted, or possibly both.

    \n

    What did I do next?

    \n

    Before scouring through my DB in phpMyAdmin, I first identified and deleted all unused themes and plugins. The files kept appearing. So I started searching for terms within the files.

    \n

    What found me the culprit was that within wp-temp the code was setting a password variable. My only thought is that this was a hash of the admin password (so I made a note to change the admin password after cleaning up). I ran the same grep command but searched instead for that password value.

    \n

    Lo and behold, the functions.php of the parent theme lit up. There, I found a bunch of hacky code that was wrapping all the pages with the malicious script and systematically ignoring the IPs where an admin user had been logged in.

    \n

    After deleting the code, I deleted the malicious files from within wp-includes and the files didn't return. I wasn't yet certain the Malware was completely gone because I noticed that the code in wp-temp was creating a cookie on the client.

    \n

    Before changing the admin password, I reset the SALT Keys within the wp-config.php file using https://api.wordpress.org/secret-key/1.1/salt/.

    \n

    Then, I cleared the cache and cookies from my browser, and logged into the wp-admin of the site from an incognito window. Only then did I reset the admin password.

    \n

    Finally, I created a new admin user for myself and encouraged the client to add 2FA for their login via the Google Authenticator Plugin.

    \n

    Links:

    \n\n
    3. \n
  3. \n

    On your server, add a new user and remove root login to make it harder for someone to hack your server.

    \n

    Since the client already had their site installed and running on Ubuntu 18.04 a Digital Ocean droplet, the previous developer had ssh access to the droplet. I really didn't want them to be able to log back in, whether or not they had nefarious intent. I noticed there was only one root user on the system, so I created a new user for myself:

    \n
    sudo adduser myuniqueusername
    \n

    I then added my new user to the sudo user group:

    \n
    sudo usermod -aG sudo myuniqueusername
    \n

    And then I added administrative privileges to myuniqueusername:

    \n
    sudo visudo
    \n

    Within /etc/sudoers:

    \n
    myuniqueusername ALL=(ALL:ALL) ALL
    \n

    Finally, within /etc/ssh/sshd_config:

    \n
    PermitRootLogin no
    \n

    Then from command-line, restart ssh:

    \n
    sudo service ssh restart
    \n

    From there, do whatever is necessary to create ssh keys for your new account, set those up, logout, and then ssh back in as you.

    \n
    4. \n
  4. \n

    Harden file permissions on the server to prevent unwarranted changes. From within the root directory of your Wordpress installation (perhaps /var/www/html/) do the following:

    \n

    Find what groups your user and your server belongs to and make sure that your user has ownership of all your Wordpress files.

    \n
    sudo groups\nsudo usermod -aG groupname myuniqueusername\nsudo find . -exec chown myuniqueusername:groupname {} +
    \n

    Change files to only be writable by owner (you), and only readable by others, Change directories to be only be created, modified, or deleted by you or Wordpress, and prevent anyone other than you or Wordpress from reading or writing to wp-config.

    \n
    sudo find . -type f -exec chmod 664 {} +\nsudo find . -type d -exec chmod 775 {} +\nsudo chmod 660 wp-config.php
    \n

    Links:

    \n\n
    5. \n
  5. \n

    Add hardening to your httpd.conf Apache configuration by disabling Server banners, hardening your .htaccess file, by disabling directory listing, disabling HTTP Trace, preventing MIME sniffing, preventing clickjacking, preventing some forms of cross-site scripting, and securing your cookies within wp-config.php.

    \n

    Within /etc/apache2/httpd.conf or /etc/apache2/apache2.conf:

    \n
    ServerSignature Off\nServerTokens Prod
    \n

    Then from command-line:

    \n
    sudo service apache2 restart
    \n

    Within .htaccess, insert between # BEGIN Wordpress and # END Wordpress:

    \n
    Options -Indexes\nRewriteEngine On \nRewriteCond %{REQUEST_METHOD} ^TRACE \nRewriteRule .* - [F]\nHeader set X-Content-Type-Options nosniff\nHeader always append X-Frame-Options SAMEORIGIN\nHeader set X-XSS-Protection "1; mode=block"
    \n

    Within wp-config.php, add to the end:

    \n
    @ini_set('session.cookie_httponly', true);\n@ini_set('session.cookie_secure', true);\n@ini_set('session.use_only_cookies', true);
    \n

    There is some discussion over whether or not the above method is best, you could and perhaps should also add cookie hardening to your apache server configuration, see links below.

    \n

    Links:

    \n\n
    6. \n
  6. \n

    Add Security Plugins like Sucuri Sanner and Limit Login Attempts.

    \n

    Links:

    \n\n
    7. \n
\n

Final Thoughts

\n

The list above is by no means exhaustive, and it's just based on things I've been learning the past couple of weeks. I am very open to correction, addition, or subtraction, from the above by anyone with more experience. While I don't plan on focusing primarily on Wordpress, I'm learning more and more LA of the LAMP stack through this experience, and at the end of the day, with my interest in Gatsby, I probably will be involved more and more with the ecosystem.

\n

That being said, there is nothing wrong with learning more about website security.

\n

Even if static sites are the future, keeping our CMS and web-servers safe should not become lost or remain assumed knowledge.

","id":"fe8ad5f0-ba88-5703-bdcb-3e65cd4181ff","timeToRead":9,"frontmatter":{"date":"2019-09-20","path":"/blog/wordpress-security-lessons-learned.html","tags":["wordpress","security","apache","htaccess","viruses","linux","permissions"],"title":"Cleaning Up Wordpress: Lessons Learned in Website Security","featuredAlt":"Someone holding a laptop with 'You've been hacked!' displayed upon the screen","redirect_from":null}}],"security":[{"excerpt":"You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email... ... on page x some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't…","html":"

\n \n \n \n \n

\n

You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email...

\n
\n

... on page [x] some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't know what to do. Please help! ...

\n
\n

I faced this situation recently. I volunteered to finish up a project for a nonprofit organization (not the one where I work 9 -5). They were one year into a new site build when the developer they originally hired ghosted them.

\n

I'm a JavaScript guy, so I wasn't all that familiar with the entirety of the Wordpress ecosystem, but I figured I knew enough, I had been building my own plugin for work to inject a React application via a shortcode, thinking, \"How hard can it be? It's not even real development...\" (don't get offended, just expressing what I was thinking at the time).

\n

I was very aware of security issues in a Node.js environment, but I had always relied on other services to take care of hosting security. I had heard of .htaccess files, but I'd never put my own LAMP stack application into production from scratch. I hadn't even given it any thought since I have been focusing more and on tech like React, Gatsby, React Native, and even a little Angular.

\n

As easy (in terms of difficulty) it was to handle all the front-end requests of getting the site finished to the client's expectation, I took for granted my own ignorance of the rest of what was involved. I want to share what I have learned over the past two weeks so that (1) I won't forget next time, and (2) so you can avoid many of the mistakes I made.

\n

I am going to try and provide links to all the sources that have helped my in my recent journeys and to briefly talk through some of the more important parts. Let's call this:

\n

Wordpress Security 101

\n
    \n
  1. \n

    Always Hire a Developer You Either Know or Can Verifiably Trust

    \n

    It is very tempting to hire the cheapest developer you can find. But sometimes you get what you pay for.

    \n

    I like that there are sites where developers can be rated, or public reviews left, like Upwork or LinkedIn (want to suggest others?). These help provide accountability for the developer and some sense of security for the client. In this particular case, the original developer took a low fee for a quite complex site and cut a bunch of corners.

    \n

    Links:

    \n\n
    2. \n
  2. \n

    Never download and use unlocked or nulled themes - pay the regular fee from a reputable theme marketplace. Otherwise, you may install Malware!!!

    \n

    I didn't even question the use of the theme on the client's site. Knowing the client, I assumed they would have purchased the theme themselves but it turns out they left it to the developer, who perhaps out of ignorance or a willingness to cut corners downloaded a theme online that was corrupted with the wp_vcd malware.

    \n

    I only discovered how long the malware had been there by comparing the current site with versions of the codebase that existed while the site was offline or in maintenance mode.

    \n

    This particular Malware was found within functions.php, and it created three files within wp-includes: wp-feed.php, wp-vcd.php, wp-tmp.php. It wrapped pages with malvertising scripts and also added a script that logged user's IP addresses who had permissions to edit the site and systematically ignored those users, so they would never detect the malicious behavior when browsing the site themselves, whether logged in or not, whether browsing privately or not.

    \n

    After logging into the remote server as an administrator-level user, I found the odd looking files at first within the wp-includes folder. I removed them, thinking I had solved the problem. The Malware was creating redirects to sites with the oclaserver domain and logging IP addresses to wp-feed.php. I used the following command-line script to find these files.

    \n
    grep -Ril \"oclaserver\"
    \n\n

    Initially, I though this solved the problem, but the next time I checked, the files where back. I deleted the files, then checked again, immediately, the files were once again there, full of the same content. This means either my wpdb was corrupted, or some other file that gets called repeatedly by Wordpress was corrupted, or possibly both.

    \n

    What did I do next?

    \n

    Before scouring through my DB in phpMyAdmin, I first identified and deleted all unused themes and plugins. The files kept appearing. So I started searching for terms within the files.

    \n

    What found me the culprit was that within wp-temp the code was setting a password variable. My only thought is that this was a hash of the admin password (so I made a note to change the admin password after cleaning up). I ran the same grep command but searched instead for that password value.

    \n

    Lo and behold, the functions.php of the parent theme lit up. There, I found a bunch of hacky code that was wrapping all the pages with the malicious script and systematically ignoring the IPs where an admin user had been logged in.

    \n

    After deleting the code, I deleted the malicious files from within wp-includes and the files didn't return. I wasn't yet certain the Malware was completely gone because I noticed that the code in wp-temp was creating a cookie on the client.

    \n

    Before changing the admin password, I reset the SALT Keys within the wp-config.php file using https://api.wordpress.org/secret-key/1.1/salt/.

    \n

    Then, I cleared the cache and cookies from my browser, and logged into the wp-admin of the site from an incognito window. Only then did I reset the admin password.

    \n

    Finally, I created a new admin user for myself and encouraged the client to add 2FA for their login via the Google Authenticator Plugin.

    \n

    Links:

    \n\n
    3. \n
  3. \n

    On your server, add a new user and remove root login to make it harder for someone to hack your server.

    \n

    Since the client already had their site installed and running on Ubuntu 18.04 a Digital Ocean droplet, the previous developer had ssh access to the droplet. I really didn't want them to be able to log back in, whether or not they had nefarious intent. I noticed there was only one root user on the system, so I created a new user for myself:

    \n
    sudo adduser myuniqueusername
    \n

    I then added my new user to the sudo user group:

    \n
    sudo usermod -aG sudo myuniqueusername
    \n

    And then I added administrative privileges to myuniqueusername:

    \n
    sudo visudo
    \n

    Within /etc/sudoers:

    \n
    myuniqueusername ALL=(ALL:ALL) ALL
    \n

    Finally, within /etc/ssh/sshd_config:

    \n
    PermitRootLogin no
    \n

    Then from command-line, restart ssh:

    \n
    sudo service ssh restart
    \n

    From there, do whatever is necessary to create ssh keys for your new account, set those up, logout, and then ssh back in as you.

    \n
    4. \n
  4. \n

    Harden file permissions on the server to prevent unwarranted changes. From within the root directory of your Wordpress installation (perhaps /var/www/html/) do the following:

    \n

    Find what groups your user and your server belongs to and make sure that your user has ownership of all your Wordpress files.

    \n
    sudo groups\nsudo usermod -aG groupname myuniqueusername\nsudo find . -exec chown myuniqueusername:groupname {} +
    \n

    Change files to only be writable by owner (you), and only readable by others, Change directories to be only be created, modified, or deleted by you or Wordpress, and prevent anyone other than you or Wordpress from reading or writing to wp-config.

    \n
    sudo find . -type f -exec chmod 664 {} +\nsudo find . -type d -exec chmod 775 {} +\nsudo chmod 660 wp-config.php
    \n

    Links:

    \n\n
    5. \n
  5. \n

    Add hardening to your httpd.conf Apache configuration by disabling Server banners, hardening your .htaccess file, by disabling directory listing, disabling HTTP Trace, preventing MIME sniffing, preventing clickjacking, preventing some forms of cross-site scripting, and securing your cookies within wp-config.php.

    \n

    Within /etc/apache2/httpd.conf or /etc/apache2/apache2.conf:

    \n
    ServerSignature Off\nServerTokens Prod
    \n

    Then from command-line:

    \n
    sudo service apache2 restart
    \n

    Within .htaccess, insert between # BEGIN Wordpress and # END Wordpress:

    \n
    Options -Indexes\nRewriteEngine On \nRewriteCond %{REQUEST_METHOD} ^TRACE \nRewriteRule .* - [F]\nHeader set X-Content-Type-Options nosniff\nHeader always append X-Frame-Options SAMEORIGIN\nHeader set X-XSS-Protection "1; mode=block"
    \n

    Within wp-config.php, add to the end:

    \n
    @ini_set('session.cookie_httponly', true);\n@ini_set('session.cookie_secure', true);\n@ini_set('session.use_only_cookies', true);
    \n

    There is some discussion over whether or not the above method is best, you could and perhaps should also add cookie hardening to your apache server configuration, see links below.

    \n

    Links:

    \n\n
    6. \n
  6. \n

    Add Security Plugins like Sucuri Sanner and Limit Login Attempts.

    \n

    Links:

    \n\n
    7. \n
\n

Final Thoughts

\n

The list above is by no means exhaustive, and it's just based on things I've been learning the past couple of weeks. I am very open to correction, addition, or subtraction, from the above by anyone with more experience. While I don't plan on focusing primarily on Wordpress, I'm learning more and more LA of the LAMP stack through this experience, and at the end of the day, with my interest in Gatsby, I probably will be involved more and more with the ecosystem.

\n

That being said, there is nothing wrong with learning more about website security.

\n

Even if static sites are the future, keeping our CMS and web-servers safe should not become lost or remain assumed knowledge.

","id":"fe8ad5f0-ba88-5703-bdcb-3e65cd4181ff","timeToRead":9,"frontmatter":{"date":"2019-09-20","path":"/blog/wordpress-security-lessons-learned.html","tags":["wordpress","security","apache","htaccess","viruses","linux","permissions"],"title":"Cleaning Up Wordpress: Lessons Learned in Website Security","featuredAlt":"Someone holding a laptop with 'You've been hacked!' displayed upon the screen","redirect_from":null}}],"apache":[{"excerpt":"You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email... ... on page x some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't…","html":"

\n \n \n \n \n

\n

You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email...

\n
\n

... on page [x] some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't know what to do. Please help! ...

\n
\n

I faced this situation recently. I volunteered to finish up a project for a nonprofit organization (not the one where I work 9 -5). They were one year into a new site build when the developer they originally hired ghosted them.

\n

I'm a JavaScript guy, so I wasn't all that familiar with the entirety of the Wordpress ecosystem, but I figured I knew enough, I had been building my own plugin for work to inject a React application via a shortcode, thinking, \"How hard can it be? It's not even real development...\" (don't get offended, just expressing what I was thinking at the time).

\n

I was very aware of security issues in a Node.js environment, but I had always relied on other services to take care of hosting security. I had heard of .htaccess files, but I'd never put my own LAMP stack application into production from scratch. I hadn't even given it any thought since I have been focusing more and on tech like React, Gatsby, React Native, and even a little Angular.

\n

As easy (in terms of difficulty) it was to handle all the front-end requests of getting the site finished to the client's expectation, I took for granted my own ignorance of the rest of what was involved. I want to share what I have learned over the past two weeks so that (1) I won't forget next time, and (2) so you can avoid many of the mistakes I made.

\n

I am going to try and provide links to all the sources that have helped my in my recent journeys and to briefly talk through some of the more important parts. Let's call this:

\n

Wordpress Security 101

\n
    \n
  1. \n

    Always Hire a Developer You Either Know or Can Verifiably Trust

    \n

    It is very tempting to hire the cheapest developer you can find. But sometimes you get what you pay for.

    \n

    I like that there are sites where developers can be rated, or public reviews left, like Upwork or LinkedIn (want to suggest others?). These help provide accountability for the developer and some sense of security for the client. In this particular case, the original developer took a low fee for a quite complex site and cut a bunch of corners.

    \n

    Links:

    \n\n
    2. \n
  2. \n

    Never download and use unlocked or nulled themes - pay the regular fee from a reputable theme marketplace. Otherwise, you may install Malware!!!

    \n

    I didn't even question the use of the theme on the client's site. Knowing the client, I assumed they would have purchased the theme themselves but it turns out they left it to the developer, who perhaps out of ignorance or a willingness to cut corners downloaded a theme online that was corrupted with the wp_vcd malware.

    \n

    I only discovered how long the malware had been there by comparing the current site with versions of the codebase that existed while the site was offline or in maintenance mode.

    \n

    This particular Malware was found within functions.php, and it created three files within wp-includes: wp-feed.php, wp-vcd.php, wp-tmp.php. It wrapped pages with malvertising scripts and also added a script that logged user's IP addresses who had permissions to edit the site and systematically ignored those users, so they would never detect the malicious behavior when browsing the site themselves, whether logged in or not, whether browsing privately or not.

    \n

    After logging into the remote server as an administrator-level user, I found the odd looking files at first within the wp-includes folder. I removed them, thinking I had solved the problem. The Malware was creating redirects to sites with the oclaserver domain and logging IP addresses to wp-feed.php. I used the following command-line script to find these files.

    \n
    grep -Ril \"oclaserver\"
    \n\n

    Initially, I though this solved the problem, but the next time I checked, the files where back. I deleted the files, then checked again, immediately, the files were once again there, full of the same content. This means either my wpdb was corrupted, or some other file that gets called repeatedly by Wordpress was corrupted, or possibly both.

    \n

    What did I do next?

    \n

    Before scouring through my DB in phpMyAdmin, I first identified and deleted all unused themes and plugins. The files kept appearing. So I started searching for terms within the files.

    \n

    What found me the culprit was that within wp-temp the code was setting a password variable. My only thought is that this was a hash of the admin password (so I made a note to change the admin password after cleaning up). I ran the same grep command but searched instead for that password value.

    \n

    Lo and behold, the functions.php of the parent theme lit up. There, I found a bunch of hacky code that was wrapping all the pages with the malicious script and systematically ignoring the IPs where an admin user had been logged in.

    \n

    After deleting the code, I deleted the malicious files from within wp-includes and the files didn't return. I wasn't yet certain the Malware was completely gone because I noticed that the code in wp-temp was creating a cookie on the client.

    \n

    Before changing the admin password, I reset the SALT Keys within the wp-config.php file using https://api.wordpress.org/secret-key/1.1/salt/.

    \n

    Then, I cleared the cache and cookies from my browser, and logged into the wp-admin of the site from an incognito window. Only then did I reset the admin password.

    \n

    Finally, I created a new admin user for myself and encouraged the client to add 2FA for their login via the Google Authenticator Plugin.

    \n

    Links:

    \n\n
    3. \n
  3. \n

    On your server, add a new user and remove root login to make it harder for someone to hack your server.

    \n

    Since the client already had their site installed and running on Ubuntu 18.04 a Digital Ocean droplet, the previous developer had ssh access to the droplet. I really didn't want them to be able to log back in, whether or not they had nefarious intent. I noticed there was only one root user on the system, so I created a new user for myself:

    \n
    sudo adduser myuniqueusername
    \n

    I then added my new user to the sudo user group:

    \n
    sudo usermod -aG sudo myuniqueusername
    \n

    And then I added administrative privileges to myuniqueusername:

    \n
    sudo visudo
    \n

    Within /etc/sudoers:

    \n
    myuniqueusername ALL=(ALL:ALL) ALL
    \n

    Finally, within /etc/ssh/sshd_config:

    \n
    PermitRootLogin no
    \n

    Then from command-line, restart ssh:

    \n
    sudo service ssh restart
    \n

    From there, do whatever is necessary to create ssh keys for your new account, set those up, logout, and then ssh back in as you.

    \n
    4. \n
  4. \n

    Harden file permissions on the server to prevent unwarranted changes. From within the root directory of your Wordpress installation (perhaps /var/www/html/) do the following:

    \n

    Find what groups your user and your server belongs to and make sure that your user has ownership of all your Wordpress files.

    \n
    sudo groups\nsudo usermod -aG groupname myuniqueusername\nsudo find . -exec chown myuniqueusername:groupname {} +
    \n

    Change files to only be writable by owner (you), and only readable by others, Change directories to be only be created, modified, or deleted by you or Wordpress, and prevent anyone other than you or Wordpress from reading or writing to wp-config.

    \n
    sudo find . -type f -exec chmod 664 {} +\nsudo find . -type d -exec chmod 775 {} +\nsudo chmod 660 wp-config.php
    \n

    Links:

    \n\n
    5. \n
  5. \n

    Add hardening to your httpd.conf Apache configuration by disabling Server banners, hardening your .htaccess file, by disabling directory listing, disabling HTTP Trace, preventing MIME sniffing, preventing clickjacking, preventing some forms of cross-site scripting, and securing your cookies within wp-config.php.

    \n

    Within /etc/apache2/httpd.conf or /etc/apache2/apache2.conf:

    \n
    ServerSignature Off\nServerTokens Prod
    \n

    Then from command-line:

    \n
    sudo service apache2 restart
    \n

    Within .htaccess, insert between # BEGIN Wordpress and # END Wordpress:

    \n
    Options -Indexes\nRewriteEngine On \nRewriteCond %{REQUEST_METHOD} ^TRACE \nRewriteRule .* - [F]\nHeader set X-Content-Type-Options nosniff\nHeader always append X-Frame-Options SAMEORIGIN\nHeader set X-XSS-Protection "1; mode=block"
    \n

    Within wp-config.php, add to the end:

    \n
    @ini_set('session.cookie_httponly', true);\n@ini_set('session.cookie_secure', true);\n@ini_set('session.use_only_cookies', true);
    \n

    There is some discussion over whether or not the above method is best, you could and perhaps should also add cookie hardening to your apache server configuration, see links below.

    \n

    Links:

    \n\n
    6. \n
  6. \n

    Add Security Plugins like Sucuri Sanner and Limit Login Attempts.

    \n

    Links:

    \n\n
    7. \n
\n

Final Thoughts

\n

The list above is by no means exhaustive, and it's just based on things I've been learning the past couple of weeks. I am very open to correction, addition, or subtraction, from the above by anyone with more experience. While I don't plan on focusing primarily on Wordpress, I'm learning more and more LA of the LAMP stack through this experience, and at the end of the day, with my interest in Gatsby, I probably will be involved more and more with the ecosystem.

\n

That being said, there is nothing wrong with learning more about website security.

\n

Even if static sites are the future, keeping our CMS and web-servers safe should not become lost or remain assumed knowledge.

","id":"fe8ad5f0-ba88-5703-bdcb-3e65cd4181ff","timeToRead":9,"frontmatter":{"date":"2019-09-20","path":"/blog/wordpress-security-lessons-learned.html","tags":["wordpress","security","apache","htaccess","viruses","linux","permissions"],"title":"Cleaning Up Wordpress: Lessons Learned in Website Security","featuredAlt":"Someone holding a laptop with 'You've been hacked!' displayed upon the screen","redirect_from":null}}],"htaccess":[{"excerpt":"You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email... ... on page x some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't…","html":"

\n \n \n \n \n

\n

You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email...

\n
\n

... on page [x] some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't know what to do. Please help! ...

\n
\n

I faced this situation recently. I volunteered to finish up a project for a nonprofit organization (not the one where I work 9 -5). They were one year into a new site build when the developer they originally hired ghosted them.

\n

I'm a JavaScript guy, so I wasn't all that familiar with the entirety of the Wordpress ecosystem, but I figured I knew enough, I had been building my own plugin for work to inject a React application via a shortcode, thinking, \"How hard can it be? It's not even real development...\" (don't get offended, just expressing what I was thinking at the time).

\n

I was very aware of security issues in a Node.js environment, but I had always relied on other services to take care of hosting security. I had heard of .htaccess files, but I'd never put my own LAMP stack application into production from scratch. I hadn't even given it any thought since I have been focusing more and on tech like React, Gatsby, React Native, and even a little Angular.

\n

As easy (in terms of difficulty) it was to handle all the front-end requests of getting the site finished to the client's expectation, I took for granted my own ignorance of the rest of what was involved. I want to share what I have learned over the past two weeks so that (1) I won't forget next time, and (2) so you can avoid many of the mistakes I made.

\n

I am going to try and provide links to all the sources that have helped my in my recent journeys and to briefly talk through some of the more important parts. Let's call this:

\n

Wordpress Security 101

\n
    \n
  1. \n

    Always Hire a Developer You Either Know or Can Verifiably Trust

    \n

    It is very tempting to hire the cheapest developer you can find. But sometimes you get what you pay for.

    \n

    I like that there are sites where developers can be rated, or public reviews left, like Upwork or LinkedIn (want to suggest others?). These help provide accountability for the developer and some sense of security for the client. In this particular case, the original developer took a low fee for a quite complex site and cut a bunch of corners.

    \n

    Links:

    \n\n
    2. \n
  2. \n

    Never download and use unlocked or nulled themes - pay the regular fee from a reputable theme marketplace. Otherwise, you may install Malware!!!

    \n

    I didn't even question the use of the theme on the client's site. Knowing the client, I assumed they would have purchased the theme themselves but it turns out they left it to the developer, who perhaps out of ignorance or a willingness to cut corners downloaded a theme online that was corrupted with the wp_vcd malware.

    \n

    I only discovered how long the malware had been there by comparing the current site with versions of the codebase that existed while the site was offline or in maintenance mode.

    \n

    This particular Malware was found within functions.php, and it created three files within wp-includes: wp-feed.php, wp-vcd.php, wp-tmp.php. It wrapped pages with malvertising scripts and also added a script that logged user's IP addresses who had permissions to edit the site and systematically ignored those users, so they would never detect the malicious behavior when browsing the site themselves, whether logged in or not, whether browsing privately or not.

    \n

    After logging into the remote server as an administrator-level user, I found the odd looking files at first within the wp-includes folder. I removed them, thinking I had solved the problem. The Malware was creating redirects to sites with the oclaserver domain and logging IP addresses to wp-feed.php. I used the following command-line script to find these files.

    \n
    grep -Ril \"oclaserver\"
    \n\n

    Initially, I though this solved the problem, but the next time I checked, the files where back. I deleted the files, then checked again, immediately, the files were once again there, full of the same content. This means either my wpdb was corrupted, or some other file that gets called repeatedly by Wordpress was corrupted, or possibly both.

    \n

    What did I do next?

    \n

    Before scouring through my DB in phpMyAdmin, I first identified and deleted all unused themes and plugins. The files kept appearing. So I started searching for terms within the files.

    \n

    What found me the culprit was that within wp-temp the code was setting a password variable. My only thought is that this was a hash of the admin password (so I made a note to change the admin password after cleaning up). I ran the same grep command but searched instead for that password value.

    \n

    Lo and behold, the functions.php of the parent theme lit up. There, I found a bunch of hacky code that was wrapping all the pages with the malicious script and systematically ignoring the IPs where an admin user had been logged in.

    \n

    After deleting the code, I deleted the malicious files from within wp-includes and the files didn't return. I wasn't yet certain the Malware was completely gone because I noticed that the code in wp-temp was creating a cookie on the client.

    \n

    Before changing the admin password, I reset the SALT Keys within the wp-config.php file using https://api.wordpress.org/secret-key/1.1/salt/.

    \n

    Then, I cleared the cache and cookies from my browser, and logged into the wp-admin of the site from an incognito window. Only then did I reset the admin password.

    \n

    Finally, I created a new admin user for myself and encouraged the client to add 2FA for their login via the Google Authenticator Plugin.

    \n

    Links:

    \n\n
    3. \n
  3. \n

    On your server, add a new user and remove root login to make it harder for someone to hack your server.

    \n

    Since the client already had their site installed and running on Ubuntu 18.04 a Digital Ocean droplet, the previous developer had ssh access to the droplet. I really didn't want them to be able to log back in, whether or not they had nefarious intent. I noticed there was only one root user on the system, so I created a new user for myself:

    \n
    sudo adduser myuniqueusername
    \n

    I then added my new user to the sudo user group:

    \n
    sudo usermod -aG sudo myuniqueusername
    \n

    And then I added administrative privileges to myuniqueusername:

    \n
    sudo visudo
    \n

    Within /etc/sudoers:

    \n
    myuniqueusername ALL=(ALL:ALL) ALL
    \n

    Finally, within /etc/ssh/sshd_config:

    \n
    PermitRootLogin no
    \n

    Then from command-line, restart ssh:

    \n
    sudo service ssh restart
    \n

    From there, do whatever is necessary to create ssh keys for your new account, set those up, logout, and then ssh back in as you.

    \n
    4. \n
  4. \n

    Harden file permissions on the server to prevent unwarranted changes. From within the root directory of your Wordpress installation (perhaps /var/www/html/) do the following:

    \n

    Find what groups your user and your server belongs to and make sure that your user has ownership of all your Wordpress files.

    \n
    sudo groups\nsudo usermod -aG groupname myuniqueusername\nsudo find . -exec chown myuniqueusername:groupname {} +
    \n

    Change files to only be writable by owner (you), and only readable by others, Change directories to be only be created, modified, or deleted by you or Wordpress, and prevent anyone other than you or Wordpress from reading or writing to wp-config.

    \n
    sudo find . -type f -exec chmod 664 {} +\nsudo find . -type d -exec chmod 775 {} +\nsudo chmod 660 wp-config.php
    \n

    Links:

    \n\n
    5. \n
  5. \n

    Add hardening to your httpd.conf Apache configuration by disabling Server banners, hardening your .htaccess file, by disabling directory listing, disabling HTTP Trace, preventing MIME sniffing, preventing clickjacking, preventing some forms of cross-site scripting, and securing your cookies within wp-config.php.

    \n

    Within /etc/apache2/httpd.conf or /etc/apache2/apache2.conf:

    \n
    ServerSignature Off\nServerTokens Prod
    \n

    Then from command-line:

    \n
    sudo service apache2 restart
    \n

    Within .htaccess, insert between # BEGIN Wordpress and # END Wordpress:

    \n
    Options -Indexes\nRewriteEngine On \nRewriteCond %{REQUEST_METHOD} ^TRACE \nRewriteRule .* - [F]\nHeader set X-Content-Type-Options nosniff\nHeader always append X-Frame-Options SAMEORIGIN\nHeader set X-XSS-Protection "1; mode=block"
    \n

    Within wp-config.php, add to the end:

    \n
    @ini_set('session.cookie_httponly', true);\n@ini_set('session.cookie_secure', true);\n@ini_set('session.use_only_cookies', true);
    \n

    There is some discussion over whether or not the above method is best, you could and perhaps should also add cookie hardening to your apache server configuration, see links below.

    \n

    Links:

    \n\n
    6. \n
  6. \n

    Add Security Plugins like Sucuri Sanner and Limit Login Attempts.

    \n

    Links:

    \n\n
    7. \n
\n

Final Thoughts

\n

The list above is by no means exhaustive, and it's just based on things I've been learning the past couple of weeks. I am very open to correction, addition, or subtraction, from the above by anyone with more experience. While I don't plan on focusing primarily on Wordpress, I'm learning more and more LA of the LAMP stack through this experience, and at the end of the day, with my interest in Gatsby, I probably will be involved more and more with the ecosystem.

\n

That being said, there is nothing wrong with learning more about website security.

\n

Even if static sites are the future, keeping our CMS and web-servers safe should not become lost or remain assumed knowledge.

","id":"fe8ad5f0-ba88-5703-bdcb-3e65cd4181ff","timeToRead":9,"frontmatter":{"date":"2019-09-20","path":"/blog/wordpress-security-lessons-learned.html","tags":["wordpress","security","apache","htaccess","viruses","linux","permissions"],"title":"Cleaning Up Wordpress: Lessons Learned in Website Security","featuredAlt":"Someone holding a laptop with 'You've been hacked!' displayed upon the screen","redirect_from":null}}],"viruses":[{"excerpt":"You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email... ... on page x some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't…","html":"

\n \n \n \n \n

\n

You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email...

\n
\n

... on page [x] some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't know what to do. Please help! ...

\n
\n

I faced this situation recently. I volunteered to finish up a project for a nonprofit organization (not the one where I work 9 -5). They were one year into a new site build when the developer they originally hired ghosted them.

\n

I'm a JavaScript guy, so I wasn't all that familiar with the entirety of the Wordpress ecosystem, but I figured I knew enough, I had been building my own plugin for work to inject a React application via a shortcode, thinking, \"How hard can it be? It's not even real development...\" (don't get offended, just expressing what I was thinking at the time).

\n

I was very aware of security issues in a Node.js environment, but I had always relied on other services to take care of hosting security. I had heard of .htaccess files, but I'd never put my own LAMP stack application into production from scratch. I hadn't even given it any thought since I have been focusing more and on tech like React, Gatsby, React Native, and even a little Angular.

\n

As easy (in terms of difficulty) it was to handle all the front-end requests of getting the site finished to the client's expectation, I took for granted my own ignorance of the rest of what was involved. I want to share what I have learned over the past two weeks so that (1) I won't forget next time, and (2) so you can avoid many of the mistakes I made.

\n

I am going to try and provide links to all the sources that have helped my in my recent journeys and to briefly talk through some of the more important parts. Let's call this:

\n

Wordpress Security 101

\n
    \n
  1. \n

    Always Hire a Developer You Either Know or Can Verifiably Trust

    \n

    It is very tempting to hire the cheapest developer you can find. But sometimes you get what you pay for.

    \n

    I like that there are sites where developers can be rated, or public reviews left, like Upwork or LinkedIn (want to suggest others?). These help provide accountability for the developer and some sense of security for the client. In this particular case, the original developer took a low fee for a quite complex site and cut a bunch of corners.

    \n

    Links:

    \n\n
    2. \n
  2. \n

    Never download and use unlocked or nulled themes - pay the regular fee from a reputable theme marketplace. Otherwise, you may install Malware!!!

    \n

    I didn't even question the use of the theme on the client's site. Knowing the client, I assumed they would have purchased the theme themselves but it turns out they left it to the developer, who perhaps out of ignorance or a willingness to cut corners downloaded a theme online that was corrupted with the wp_vcd malware.

    \n

    I only discovered how long the malware had been there by comparing the current site with versions of the codebase that existed while the site was offline or in maintenance mode.

    \n

    This particular Malware was found within functions.php, and it created three files within wp-includes: wp-feed.php, wp-vcd.php, wp-tmp.php. It wrapped pages with malvertising scripts and also added a script that logged user's IP addresses who had permissions to edit the site and systematically ignored those users, so they would never detect the malicious behavior when browsing the site themselves, whether logged in or not, whether browsing privately or not.

    \n

    After logging into the remote server as an administrator-level user, I found the odd looking files at first within the wp-includes folder. I removed them, thinking I had solved the problem. The Malware was creating redirects to sites with the oclaserver domain and logging IP addresses to wp-feed.php. I used the following command-line script to find these files.

    \n
    grep -Ril \"oclaserver\"
    \n\n

    Initially, I though this solved the problem, but the next time I checked, the files where back. I deleted the files, then checked again, immediately, the files were once again there, full of the same content. This means either my wpdb was corrupted, or some other file that gets called repeatedly by Wordpress was corrupted, or possibly both.

    \n

    What did I do next?

    \n

    Before scouring through my DB in phpMyAdmin, I first identified and deleted all unused themes and plugins. The files kept appearing. So I started searching for terms within the files.

    \n

    What found me the culprit was that within wp-temp the code was setting a password variable. My only thought is that this was a hash of the admin password (so I made a note to change the admin password after cleaning up). I ran the same grep command but searched instead for that password value.

    \n

    Lo and behold, the functions.php of the parent theme lit up. There, I found a bunch of hacky code that was wrapping all the pages with the malicious script and systematically ignoring the IPs where an admin user had been logged in.

    \n

    After deleting the code, I deleted the malicious files from within wp-includes and the files didn't return. I wasn't yet certain the Malware was completely gone because I noticed that the code in wp-temp was creating a cookie on the client.

    \n

    Before changing the admin password, I reset the SALT Keys within the wp-config.php file using https://api.wordpress.org/secret-key/1.1/salt/.

    \n

    Then, I cleared the cache and cookies from my browser, and logged into the wp-admin of the site from an incognito window. Only then did I reset the admin password.

    \n

    Finally, I created a new admin user for myself and encouraged the client to add 2FA for their login via the Google Authenticator Plugin.

    \n

    Links:

    \n\n
    3. \n
  3. \n

    On your server, add a new user and remove root login to make it harder for someone to hack your server.

    \n

    Since the client already had their site installed and running on Ubuntu 18.04 a Digital Ocean droplet, the previous developer had ssh access to the droplet. I really didn't want them to be able to log back in, whether or not they had nefarious intent. I noticed there was only one root user on the system, so I created a new user for myself:

    \n
    sudo adduser myuniqueusername
    \n

    I then added my new user to the sudo user group:

    \n
    sudo usermod -aG sudo myuniqueusername
    \n

    And then I added administrative privileges to myuniqueusername:

    \n
    sudo visudo
    \n

    Within /etc/sudoers:

    \n
    myuniqueusername ALL=(ALL:ALL) ALL
    \n

    Finally, within /etc/ssh/sshd_config:

    \n
    PermitRootLogin no
    \n

    Then from command-line, restart ssh:

    \n
    sudo service ssh restart
    \n

    From there, do whatever is necessary to create ssh keys for your new account, set those up, logout, and then ssh back in as you.

    \n
    4. \n
  4. \n

    Harden file permissions on the server to prevent unwarranted changes. From within the root directory of your Wordpress installation (perhaps /var/www/html/) do the following:

    \n

    Find what groups your user and your server belongs to and make sure that your user has ownership of all your Wordpress files.

    \n
    sudo groups\nsudo usermod -aG groupname myuniqueusername\nsudo find . -exec chown myuniqueusername:groupname {} +
    \n

    Change files to only be writable by owner (you), and only readable by others, Change directories to be only be created, modified, or deleted by you or Wordpress, and prevent anyone other than you or Wordpress from reading or writing to wp-config.

    \n
    sudo find . -type f -exec chmod 664 {} +\nsudo find . -type d -exec chmod 775 {} +\nsudo chmod 660 wp-config.php
    \n

    Links:

    \n\n
    5. \n
  5. \n

    Add hardening to your httpd.conf Apache configuration by disabling Server banners, hardening your .htaccess file, by disabling directory listing, disabling HTTP Trace, preventing MIME sniffing, preventing clickjacking, preventing some forms of cross-site scripting, and securing your cookies within wp-config.php.

    \n

    Within /etc/apache2/httpd.conf or /etc/apache2/apache2.conf:

    \n
    ServerSignature Off\nServerTokens Prod
    \n

    Then from command-line:

    \n
    sudo service apache2 restart
    \n

    Within .htaccess, insert between # BEGIN Wordpress and # END Wordpress:

    \n
    Options -Indexes\nRewriteEngine On \nRewriteCond %{REQUEST_METHOD} ^TRACE \nRewriteRule .* - [F]\nHeader set X-Content-Type-Options nosniff\nHeader always append X-Frame-Options SAMEORIGIN\nHeader set X-XSS-Protection "1; mode=block"
    \n

    Within wp-config.php, add to the end:

    \n
    @ini_set('session.cookie_httponly', true);\n@ini_set('session.cookie_secure', true);\n@ini_set('session.use_only_cookies', true);
    \n

    There is some discussion over whether or not the above method is best, you could and perhaps should also add cookie hardening to your apache server configuration, see links below.

    \n

    Links:

    \n\n
    6. \n
  6. \n

    Add Security Plugins like Sucuri Sanner and Limit Login Attempts.

    \n

    Links:

    \n\n
    7. \n
\n

Final Thoughts

\n

The list above is by no means exhaustive, and it's just based on things I've been learning the past couple of weeks. I am very open to correction, addition, or subtraction, from the above by anyone with more experience. While I don't plan on focusing primarily on Wordpress, I'm learning more and more LA of the LAMP stack through this experience, and at the end of the day, with my interest in Gatsby, I probably will be involved more and more with the ecosystem.

\n

That being said, there is nothing wrong with learning more about website security.

\n

Even if static sites are the future, keeping our CMS and web-servers safe should not become lost or remain assumed knowledge.

","id":"fe8ad5f0-ba88-5703-bdcb-3e65cd4181ff","timeToRead":9,"frontmatter":{"date":"2019-09-20","path":"/blog/wordpress-security-lessons-learned.html","tags":["wordpress","security","apache","htaccess","viruses","linux","permissions"],"title":"Cleaning Up Wordpress: Lessons Learned in Website Security","featuredAlt":"Someone holding a laptop with 'You've been hacked!' displayed upon the screen","redirect_from":null}}],"linux":[{"excerpt":"You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email... ... on page x some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't…","html":"

\n \n \n \n \n

\n

You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email...

\n
\n

... on page [x] some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't know what to do. Please help! ...

\n
\n

I faced this situation recently. I volunteered to finish up a project for a nonprofit organization (not the one where I work 9 -5). They were one year into a new site build when the developer they originally hired ghosted them.

\n

I'm a JavaScript guy, so I wasn't all that familiar with the entirety of the Wordpress ecosystem, but I figured I knew enough, I had been building my own plugin for work to inject a React application via a shortcode, thinking, \"How hard can it be? It's not even real development...\" (don't get offended, just expressing what I was thinking at the time).

\n

I was very aware of security issues in a Node.js environment, but I had always relied on other services to take care of hosting security. I had heard of .htaccess files, but I'd never put my own LAMP stack application into production from scratch. I hadn't even given it any thought since I have been focusing more and on tech like React, Gatsby, React Native, and even a little Angular.

\n

As easy (in terms of difficulty) it was to handle all the front-end requests of getting the site finished to the client's expectation, I took for granted my own ignorance of the rest of what was involved. I want to share what I have learned over the past two weeks so that (1) I won't forget next time, and (2) so you can avoid many of the mistakes I made.

\n

I am going to try and provide links to all the sources that have helped my in my recent journeys and to briefly talk through some of the more important parts. Let's call this:

\n

Wordpress Security 101

\n
    \n
  1. \n

    Always Hire a Developer You Either Know or Can Verifiably Trust

    \n

    It is very tempting to hire the cheapest developer you can find. But sometimes you get what you pay for.

    \n

    I like that there are sites where developers can be rated, or public reviews left, like Upwork or LinkedIn (want to suggest others?). These help provide accountability for the developer and some sense of security for the client. In this particular case, the original developer took a low fee for a quite complex site and cut a bunch of corners.

    \n

    Links:

    \n\n
    2. \n
  2. \n

    Never download and use unlocked or nulled themes - pay the regular fee from a reputable theme marketplace. Otherwise, you may install Malware!!!

    \n

    I didn't even question the use of the theme on the client's site. Knowing the client, I assumed they would have purchased the theme themselves but it turns out they left it to the developer, who perhaps out of ignorance or a willingness to cut corners downloaded a theme online that was corrupted with the wp_vcd malware.

    \n

    I only discovered how long the malware had been there by comparing the current site with versions of the codebase that existed while the site was offline or in maintenance mode.

    \n

    This particular Malware was found within functions.php, and it created three files within wp-includes: wp-feed.php, wp-vcd.php, wp-tmp.php. It wrapped pages with malvertising scripts and also added a script that logged user's IP addresses who had permissions to edit the site and systematically ignored those users, so they would never detect the malicious behavior when browsing the site themselves, whether logged in or not, whether browsing privately or not.

    \n

    After logging into the remote server as an administrator-level user, I found the odd looking files at first within the wp-includes folder. I removed them, thinking I had solved the problem. The Malware was creating redirects to sites with the oclaserver domain and logging IP addresses to wp-feed.php. I used the following command-line script to find these files.

    \n
    grep -Ril \"oclaserver\"
    \n\n

    Initially, I though this solved the problem, but the next time I checked, the files where back. I deleted the files, then checked again, immediately, the files were once again there, full of the same content. This means either my wpdb was corrupted, or some other file that gets called repeatedly by Wordpress was corrupted, or possibly both.

    \n

    What did I do next?

    \n

    Before scouring through my DB in phpMyAdmin, I first identified and deleted all unused themes and plugins. The files kept appearing. So I started searching for terms within the files.

    \n

    What found me the culprit was that within wp-temp the code was setting a password variable. My only thought is that this was a hash of the admin password (so I made a note to change the admin password after cleaning up). I ran the same grep command but searched instead for that password value.

    \n

    Lo and behold, the functions.php of the parent theme lit up. There, I found a bunch of hacky code that was wrapping all the pages with the malicious script and systematically ignoring the IPs where an admin user had been logged in.

    \n

    After deleting the code, I deleted the malicious files from within wp-includes and the files didn't return. I wasn't yet certain the Malware was completely gone because I noticed that the code in wp-temp was creating a cookie on the client.

    \n

    Before changing the admin password, I reset the SALT Keys within the wp-config.php file using https://api.wordpress.org/secret-key/1.1/salt/.

    \n

    Then, I cleared the cache and cookies from my browser, and logged into the wp-admin of the site from an incognito window. Only then did I reset the admin password.

    \n

    Finally, I created a new admin user for myself and encouraged the client to add 2FA for their login via the Google Authenticator Plugin.

    \n

    Links:

    \n\n
    3. \n
  3. \n

    On your server, add a new user and remove root login to make it harder for someone to hack your server.

    \n

    Since the client already had their site installed and running on Ubuntu 18.04 a Digital Ocean droplet, the previous developer had ssh access to the droplet. I really didn't want them to be able to log back in, whether or not they had nefarious intent. I noticed there was only one root user on the system, so I created a new user for myself:

    \n
    sudo adduser myuniqueusername
    \n

    I then added my new user to the sudo user group:

    \n
    sudo usermod -aG sudo myuniqueusername
    \n

    And then I added administrative privileges to myuniqueusername:

    \n
    sudo visudo
    \n

    Within /etc/sudoers:

    \n
    myuniqueusername ALL=(ALL:ALL) ALL
    \n

    Finally, within /etc/ssh/sshd_config:

    \n
    PermitRootLogin no
    \n

    Then from command-line, restart ssh:

    \n
    sudo service ssh restart
    \n

    From there, do whatever is necessary to create ssh keys for your new account, set those up, logout, and then ssh back in as you.

    \n
    4. \n
  4. \n

    Harden file permissions on the server to prevent unwarranted changes. From within the root directory of your Wordpress installation (perhaps /var/www/html/) do the following:

    \n

    Find what groups your user and your server belongs to and make sure that your user has ownership of all your Wordpress files.

    \n
    sudo groups\nsudo usermod -aG groupname myuniqueusername\nsudo find . -exec chown myuniqueusername:groupname {} +
    \n

    Change files to only be writable by owner (you), and only readable by others, Change directories to be only be created, modified, or deleted by you or Wordpress, and prevent anyone other than you or Wordpress from reading or writing to wp-config.

    \n
    sudo find . -type f -exec chmod 664 {} +\nsudo find . -type d -exec chmod 775 {} +\nsudo chmod 660 wp-config.php
    \n

    Links:

    \n\n
    5. \n
  5. \n

    Add hardening to your httpd.conf Apache configuration by disabling Server banners, hardening your .htaccess file, by disabling directory listing, disabling HTTP Trace, preventing MIME sniffing, preventing clickjacking, preventing some forms of cross-site scripting, and securing your cookies within wp-config.php.

    \n

    Within /etc/apache2/httpd.conf or /etc/apache2/apache2.conf:

    \n
    ServerSignature Off\nServerTokens Prod
    \n

    Then from command-line:

    \n
    sudo service apache2 restart
    \n

    Within .htaccess, insert between # BEGIN Wordpress and # END Wordpress:

    \n
    Options -Indexes\nRewriteEngine On \nRewriteCond %{REQUEST_METHOD} ^TRACE \nRewriteRule .* - [F]\nHeader set X-Content-Type-Options nosniff\nHeader always append X-Frame-Options SAMEORIGIN\nHeader set X-XSS-Protection "1; mode=block"
    \n

    Within wp-config.php, add to the end:

    \n
    @ini_set('session.cookie_httponly', true);\n@ini_set('session.cookie_secure', true);\n@ini_set('session.use_only_cookies', true);
    \n

    There is some discussion over whether or not the above method is best, you could and perhaps should also add cookie hardening to your apache server configuration, see links below.

    \n

    Links:

    \n\n
    6. \n
  6. \n

    Add Security Plugins like Sucuri Sanner and Limit Login Attempts.

    \n

    Links:

    \n\n
    7. \n
\n

Final Thoughts

\n

The list above is by no means exhaustive, and it's just based on things I've been learning the past couple of weeks. I am very open to correction, addition, or subtraction, from the above by anyone with more experience. While I don't plan on focusing primarily on Wordpress, I'm learning more and more LA of the LAMP stack through this experience, and at the end of the day, with my interest in Gatsby, I probably will be involved more and more with the ecosystem.

\n

That being said, there is nothing wrong with learning more about website security.

\n

Even if static sites are the future, keeping our CMS and web-servers safe should not become lost or remain assumed knowledge.

","id":"fe8ad5f0-ba88-5703-bdcb-3e65cd4181ff","timeToRead":9,"frontmatter":{"date":"2019-09-20","path":"/blog/wordpress-security-lessons-learned.html","tags":["wordpress","security","apache","htaccess","viruses","linux","permissions"],"title":"Cleaning Up Wordpress: Lessons Learned in Website Security","featuredAlt":"Someone holding a laptop with 'You've been hacked!' displayed upon the screen","redirect_from":null}}],"permissions":[{"excerpt":"You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email... ... on page x some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't…","html":"

\n \n \n \n \n

\n

You've been working on a project for months, you've handed the keys over to the client, and then you get that dreaded email...

\n
\n

... on page [x] some users have been experiencing weird advertisements and popups. I think the site has been hacked! I don't know what to do. Please help! ...

\n
\n

I faced this situation recently. I volunteered to finish up a project for a nonprofit organization (not the one where I work 9 -5). They were one year into a new site build when the developer they originally hired ghosted them.

\n

I'm a JavaScript guy, so I wasn't all that familiar with the entirety of the Wordpress ecosystem, but I figured I knew enough, I had been building my own plugin for work to inject a React application via a shortcode, thinking, \"How hard can it be? It's not even real development...\" (don't get offended, just expressing what I was thinking at the time).

\n

I was very aware of security issues in a Node.js environment, but I had always relied on other services to take care of hosting security. I had heard of .htaccess files, but I'd never put my own LAMP stack application into production from scratch. I hadn't even given it any thought since I have been focusing more and on tech like React, Gatsby, React Native, and even a little Angular.

\n

As easy (in terms of difficulty) it was to handle all the front-end requests of getting the site finished to the client's expectation, I took for granted my own ignorance of the rest of what was involved. I want to share what I have learned over the past two weeks so that (1) I won't forget next time, and (2) so you can avoid many of the mistakes I made.

\n

I am going to try and provide links to all the sources that have helped my in my recent journeys and to briefly talk through some of the more important parts. Let's call this:

\n

Wordpress Security 101

\n
    \n
  1. \n

    Always Hire a Developer You Either Know or Can Verifiably Trust

    \n

    It is very tempting to hire the cheapest developer you can find. But sometimes you get what you pay for.

    \n

    I like that there are sites where developers can be rated, or public reviews left, like Upwork or LinkedIn (want to suggest others?). These help provide accountability for the developer and some sense of security for the client. In this particular case, the original developer took a low fee for a quite complex site and cut a bunch of corners.

    \n

    Links:

    \n\n
    2. \n
  2. \n

    Never download and use unlocked or nulled themes - pay the regular fee from a reputable theme marketplace. Otherwise, you may install Malware!!!

    \n

    I didn't even question the use of the theme on the client's site. Knowing the client, I assumed they would have purchased the theme themselves but it turns out they left it to the developer, who perhaps out of ignorance or a willingness to cut corners downloaded a theme online that was corrupted with the wp_vcd malware.

    \n

    I only discovered how long the malware had been there by comparing the current site with versions of the codebase that existed while the site was offline or in maintenance mode.

    \n

    This particular Malware was found within functions.php, and it created three files within wp-includes: wp-feed.php, wp-vcd.php, wp-tmp.php. It wrapped pages with malvertising scripts and also added a script that logged user's IP addresses who had permissions to edit the site and systematically ignored those users, so they would never detect the malicious behavior when browsing the site themselves, whether logged in or not, whether browsing privately or not.

    \n

    After logging into the remote server as an administrator-level user, I found the odd looking files at first within the wp-includes folder. I removed them, thinking I had solved the problem. The Malware was creating redirects to sites with the oclaserver domain and logging IP addresses to wp-feed.php. I used the following command-line script to find these files.

    \n
    grep -Ril \"oclaserver\"
    \n\n

    Initially, I though this solved the problem, but the next time I checked, the files where back. I deleted the files, then checked again, immediately, the files were once again there, full of the same content. This means either my wpdb was corrupted, or some other file that gets called repeatedly by Wordpress was corrupted, or possibly both.

    \n

    What did I do next?

    \n

    Before scouring through my DB in phpMyAdmin, I first identified and deleted all unused themes and plugins. The files kept appearing. So I started searching for terms within the files.

    \n

    What found me the culprit was that within wp-temp the code was setting a password variable. My only thought is that this was a hash of the admin password (so I made a note to change the admin password after cleaning up). I ran the same grep command but searched instead for that password value.

    \n

    Lo and behold, the functions.php of the parent theme lit up. There, I found a bunch of hacky code that was wrapping all the pages with the malicious script and systematically ignoring the IPs where an admin user had been logged in.

    \n

    After deleting the code, I deleted the malicious files from within wp-includes and the files didn't return. I wasn't yet certain the Malware was completely gone because I noticed that the code in wp-temp was creating a cookie on the client.

    \n

    Before changing the admin password, I reset the SALT Keys within the wp-config.php file using https://api.wordpress.org/secret-key/1.1/salt/.

    \n

    Then, I cleared the cache and cookies from my browser, and logged into the wp-admin of the site from an incognito window. Only then did I reset the admin password.

    \n

    Finally, I created a new admin user for myself and encouraged the client to add 2FA for their login via the Google Authenticator Plugin.

    \n

    Links:

    \n\n
    3. \n
  3. \n

    On your server, add a new user and remove root login to make it harder for someone to hack your server.

    \n

    Since the client already had their site installed and running on Ubuntu 18.04 a Digital Ocean droplet, the previous developer had ssh access to the droplet. I really didn't want them to be able to log back in, whether or not they had nefarious intent. I noticed there was only one root user on the system, so I created a new user for myself:

    \n
    sudo adduser myuniqueusername
    \n

    I then added my new user to the sudo user group:

    \n
    sudo usermod -aG sudo myuniqueusername
    \n

    And then I added administrative privileges to myuniqueusername:

    \n
    sudo visudo
    \n

    Within /etc/sudoers:

    \n
    myuniqueusername ALL=(ALL:ALL) ALL
    \n

    Finally, within /etc/ssh/sshd_config:

    \n
    PermitRootLogin no
    \n

    Then from command-line, restart ssh:

    \n
    sudo service ssh restart
    \n

    From there, do whatever is necessary to create ssh keys for your new account, set those up, logout, and then ssh back in as you.

    \n
    4. \n
  4. \n

    Harden file permissions on the server to prevent unwarranted changes. From within the root directory of your Wordpress installation (perhaps /var/www/html/) do the following:

    \n

    Find what groups your user and your server belongs to and make sure that your user has ownership of all your Wordpress files.

    \n
    sudo groups\nsudo usermod -aG groupname myuniqueusername\nsudo find . -exec chown myuniqueusername:groupname {} +
    \n

    Change files to only be writable by owner (you), and only readable by others, Change directories to be only be created, modified, or deleted by you or Wordpress, and prevent anyone other than you or Wordpress from reading or writing to wp-config.

    \n
    sudo find . -type f -exec chmod 664 {} +\nsudo find . -type d -exec chmod 775 {} +\nsudo chmod 660 wp-config.php
    \n

    Links:

    \n\n
    5. \n
  5. \n

    Add hardening to your httpd.conf Apache configuration by disabling Server banners, hardening your .htaccess file, by disabling directory listing, disabling HTTP Trace, preventing MIME sniffing, preventing clickjacking, preventing some forms of cross-site scripting, and securing your cookies within wp-config.php.

    \n

    Within /etc/apache2/httpd.conf or /etc/apache2/apache2.conf:

    \n
    ServerSignature Off\nServerTokens Prod
    \n

    Then from command-line:

    \n
    sudo service apache2 restart
    \n

    Within .htaccess, insert between # BEGIN Wordpress and # END Wordpress:

    \n
    Options -Indexes\nRewriteEngine On \nRewriteCond %{REQUEST_METHOD} ^TRACE \nRewriteRule .* - [F]\nHeader set X-Content-Type-Options nosniff\nHeader always append X-Frame-Options SAMEORIGIN\nHeader set X-XSS-Protection "1; mode=block"
    \n

    Within wp-config.php, add to the end:

    \n
    @ini_set('session.cookie_httponly', true);\n@ini_set('session.cookie_secure', true);\n@ini_set('session.use_only_cookies', true);
    \n

    There is some discussion over whether or not the above method is best, you could and perhaps should also add cookie hardening to your apache server configuration, see links below.

    \n

    Links:

    \n\n
    6. \n
  6. \n

    Add Security Plugins like Sucuri Sanner and Limit Login Attempts.

    \n

    Links:

    \n\n
    7. \n
\n

Final Thoughts

\n

The list above is by no means exhaustive, and it's just based on things I've been learning the past couple of weeks. I am very open to correction, addition, or subtraction, from the above by anyone with more experience. While I don't plan on focusing primarily on Wordpress, I'm learning more and more LA of the LAMP stack through this experience, and at the end of the day, with my interest in Gatsby, I probably will be involved more and more with the ecosystem.

\n

That being said, there is nothing wrong with learning more about website security.

\n

Even if static sites are the future, keeping our CMS and web-servers safe should not become lost or remain assumed knowledge.

","id":"fe8ad5f0-ba88-5703-bdcb-3e65cd4181ff","timeToRead":9,"frontmatter":{"date":"2019-09-20","path":"/blog/wordpress-security-lessons-learned.html","tags":["wordpress","security","apache","htaccess","viruses","linux","permissions"],"title":"Cleaning Up Wordpress: Lessons Learned in Website Security","featuredAlt":"Someone holding a laptop with 'You've been hacked!' displayed upon the screen","redirect_from":null}}],"touch events":[{"excerpt":"In my recent blog post on Using React Hooks to set up Infinite Scroll, I created a working version of infinite scroll that works in both desktop and touch screen environments. However, I came across a problem I did not anticipate when I put it into…","html":"

\n \n \n \n \n

\n

In my recent blog post on Using React Hooks to set up Infinite Scroll, I created a working version of infinite scroll that works in both desktop and touch screen environments. However, I came across a problem I did not anticipate when I put it into production, some of the links on my page stopped working. I tried debugging my CSS, to no avail, only to realize the solution involved updating my touchend event handlers with a very simple fix.

\n

Solution: Debugging CSS ??

\n

The structure of my components nests some links within block level elements. To achieve infinite-scrolling, I map over a list of businesses as follows:

\n
<li key={govId} index={idx + 1}>\n  <h2>\n    <Link \n      to={ `/businesses/${businessName}` }      state={{ \n        prevPath: typeof window !== `undefined` ? window.location.pathname : ''\n      }}\n    >\n      {businessName}\n    </Link>\n  </h2>\n  <p>\n    <a href={`tel:${businessPhone}`}>{businessPhone}</a>  </p>\n</li>
\n

From past experience, I immediately thought the solution would be to either adjust the z-index of the nested link or to set pointer-events on the parent elements. I tried both:

\n
    li, li>h2, p { \n        pointer-events: auto;\n        z-index: 1;\n    }\n    li>h2>a, p>a {\n        z-index: 3;\n    }
\n

Neither solution solved the problem nor were a problem to begin with, at least in my implementation.

\n

Solution: Debugging touchend Event Handler !!

\n

First, here is the initial state of my code for this component. I define handleScroll to add more items to the infinite scroll. Then, handleTouchEnd calls the scroll event handler to avoid double loading. Take particular note of e.preventDefault (perhaps this shouldn’t be called at all? We shall find out soon enough):

\n
  const handleScroll = () => {\n    if ( !hasMore ) return;\n    if ( window && ( window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight ) ){\n      loadMore() // function to add more items to the infinite scroll until no items left\n    }\n  }\n\n  const handleTouchEnd = (e) => {\n      e.preventDefault();      handleScroll();\n  }\n  \n  useEffect(() => {\n    window && window.addEventListener('touchend', handleTouchEnd)\n    window && window.addEventListener('scroll', handleScroll)\n    window && window.addEventListener('resize', handleScroll)\n    return () => {\n      window && window.removeEventListener('touchend', handleTouchEnd)\n      window && window.removeEventListener('scroll', handleScroll)\n      window && window.removeEventListener('resize', handleScroll)\n    };\n  }, [businesses, hasMore])
\n

After realizing that updated my css would not resolve my issue, I wondered what in the world is causing my problem. In this particular component, I use two React hooks to manage state and handle events - useState and useEffect. I wondered,

\n
\n

Okay, so this is a Gatsby project, and I'm importing the Link component from the gatsby library. Could these hooks be interfering with the functionality of the Link?

\n
\n

This wasn’t the problem. I could see in the console that Link rendered a simple a tag, and other Link components were working on the page, such as those rendered by the Navigation component. The only links not working were within my infinite scrolling list component. Moreover, the links worked perfectly in a desktop environment. So I again wondered,

\n
\n

Why in the world does this work on desktop and not on mobile? No errors are being thrown. The href attribute is valid and working if I paste it in the browser. How again does the touchend event work?

\n
\n

This led me to investigating the order in which events are fired by touch screens.

\n

click comes after touchend

\n

According to MDN, the W3C standard calls for a typical order of events fired by touch screens, as follows:

\n\n

Remember I asked you to take particular note that I was calling e.preventDefault() on the touchend event? Turns out that is the culprit. By cancelling the dispatching of further events on touchend, the click event for the link component was never being fired. As MDN tells us:

\n
\n

If the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or click events will be fired.

\n
\n

The solution then must include not calling e.preventDefault, particularly when a link is the target of touchend.

\n

So, the only change necessary involves adding a condition within my handleTouchEnd function, to check for a tags, or Element.tagName == "A", and only call e.preventDefault() if the target is not such a tag:

\n
const handleTouchEnd = (e) => {\n  if (e.target.tagName !== \"A\") {\n    e.preventDefault(); \n    handleScroll();\n  } else {\n    console.log(\"this makes me a click event, most likely\")\n  }\n}
\n
\n

Photo by Amy Humphries on Unsplash

\n
","id":"ca6c2a6a-a6ff-550f-b6a9-e027abd7fb45","timeToRead":4,"frontmatter":{"date":"2019-06-10","path":"/blog/improving-touch-events-upon-infinite-scrolling-component.html","tags":["touch events","react","infinite scroll","production","gatsby link"],"title":"Improving Touch Events upon an Infinite Scrolling Component","featuredAlt":"Closeup of a butterfly sitting on the tip of the someone's index finger","redirect_from":null}}],"react":[{"excerpt":"In my recent blog post on Using React Hooks to set up Infinite Scroll, I created a working version of infinite scroll that works in both desktop and touch screen environments. However, I came across a problem I did not anticipate when I put it into…","html":"

\n \n \n \n \n

\n

In my recent blog post on Using React Hooks to set up Infinite Scroll, I created a working version of infinite scroll that works in both desktop and touch screen environments. However, I came across a problem I did not anticipate when I put it into production, some of the links on my page stopped working. I tried debugging my CSS, to no avail, only to realize the solution involved updating my touchend event handlers with a very simple fix.

\n

Solution: Debugging CSS ??

\n

The structure of my components nests some links within block level elements. To achieve infinite-scrolling, I map over a list of businesses as follows:

\n
<li key={govId} index={idx + 1}>\n  <h2>\n    <Link \n      to={ `/businesses/${businessName}` }      state={{ \n        prevPath: typeof window !== `undefined` ? window.location.pathname : ''\n      }}\n    >\n      {businessName}\n    </Link>\n  </h2>\n  <p>\n    <a href={`tel:${businessPhone}`}>{businessPhone}</a>  </p>\n</li>
\n

From past experience, I immediately thought the solution would be to either adjust the z-index of the nested link or to set pointer-events on the parent elements. I tried both:

\n
    li, li>h2, p { \n        pointer-events: auto;\n        z-index: 1;\n    }\n    li>h2>a, p>a {\n        z-index: 3;\n    }
\n

Neither solution solved the problem nor were a problem to begin with, at least in my implementation.

\n

Solution: Debugging touchend Event Handler !!

\n

First, here is the initial state of my code for this component. I define handleScroll to add more items to the infinite scroll. Then, handleTouchEnd calls the scroll event handler to avoid double loading. Take particular note of e.preventDefault (perhaps this shouldn’t be called at all? We shall find out soon enough):

\n
  const handleScroll = () => {\n    if ( !hasMore ) return;\n    if ( window && ( window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight ) ){\n      loadMore() // function to add more items to the infinite scroll until no items left\n    }\n  }\n\n  const handleTouchEnd = (e) => {\n      e.preventDefault();      handleScroll();\n  }\n  \n  useEffect(() => {\n    window && window.addEventListener('touchend', handleTouchEnd)\n    window && window.addEventListener('scroll', handleScroll)\n    window && window.addEventListener('resize', handleScroll)\n    return () => {\n      window && window.removeEventListener('touchend', handleTouchEnd)\n      window && window.removeEventListener('scroll', handleScroll)\n      window && window.removeEventListener('resize', handleScroll)\n    };\n  }, [businesses, hasMore])
\n

After realizing that updated my css would not resolve my issue, I wondered what in the world is causing my problem. In this particular component, I use two React hooks to manage state and handle events - useState and useEffect. I wondered,

\n
\n

Okay, so this is a Gatsby project, and I'm importing the Link component from the gatsby library. Could these hooks be interfering with the functionality of the Link?

\n
\n

This wasn’t the problem. I could see in the console that Link rendered a simple a tag, and other Link components were working on the page, such as those rendered by the Navigation component. The only links not working were within my infinite scrolling list component. Moreover, the links worked perfectly in a desktop environment. So I again wondered,

\n
\n

Why in the world does this work on desktop and not on mobile? No errors are being thrown. The href attribute is valid and working if I paste it in the browser. How again does the touchend event work?

\n
\n

This led me to investigating the order in which events are fired by touch screens.

\n

click comes after touchend

\n

According to MDN, the W3C standard calls for a typical order of events fired by touch screens, as follows:

\n\n

Remember I asked you to take particular note that I was calling e.preventDefault() on the touchend event? Turns out that is the culprit. By cancelling the dispatching of further events on touchend, the click event for the link component was never being fired. As MDN tells us:

\n
\n

If the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or click events will be fired.

\n
\n

The solution then must include not calling e.preventDefault, particularly when a link is the target of touchend.

\n

So, the only change necessary involves adding a condition within my handleTouchEnd function, to check for a tags, or Element.tagName == "A", and only call e.preventDefault() if the target is not such a tag:

\n
const handleTouchEnd = (e) => {\n  if (e.target.tagName !== \"A\") {\n    e.preventDefault(); \n    handleScroll();\n  } else {\n    console.log(\"this makes me a click event, most likely\")\n  }\n}
\n
\n

Photo by Amy Humphries on Unsplash

\n
","id":"ca6c2a6a-a6ff-550f-b6a9-e027abd7fb45","timeToRead":4,"frontmatter":{"date":"2019-06-10","path":"/blog/improving-touch-events-upon-infinite-scrolling-component.html","tags":["touch events","react","infinite scroll","production","gatsby link"],"title":"Improving Touch Events upon an Infinite Scrolling Component","featuredAlt":"Closeup of a butterfly sitting on the tip of the someone's index finger","redirect_from":null}},{"excerpt":"I recently created my second production Gatsby application that gives a simple presentation of a local government open data dataset. I say production, though, much of the application is a proof-of-concept for a bigger application I have in the works…","html":"

\n \n \nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n return null\n}\n\nfunction InfiniteScrollTemplate(props) {\n return (\n <Layout {...props}>\n <InfiniteScroll {...props}/>\n </Layout>\n )\n}\n\nexport default InfiniteScrollTemplate\n

We will focus on adding the core logic for infinite scroll to the InfiniteScroll functional component. We do not need to declare a React class because of the two aforementioned hooks—useState and useEffect

\n
Creating and Setting Internal State with useState
\n

React hooks allow us to write functional components that can “hook into” other React features. useState allows us to add state that is preserved between renders of a functional component. Unlike state within a React class, useState replaces the previous state rather than merging with previous state. Calling useState takes only one argument, whatever you conceive of as the initial state. The useState hook can be called multiple times, so rather than having a single state object, you can have multiple state-like variables. This is because the call to useState returns an array of two properties - the value of the current state and a function to call to update the value of that state.

\n
const [currentState, setState] = useState(/* some value or fn that returns a value */)
\n

For infinite scroll to work in this example, we need two state variables—a boolean indicating if there are more records to load and an array of the records already loaded. Seed the currentList with the first 10 records. Don’t worry if there is the possibility that the initial set is less than 10, Array.slice will return all records up to the length of the array if you provide an ending value greater than the last index of the array.

\n

Note: if we had a situation where you loaded data asynchronously from an API, we would also need someway to determine if data was in loading state

\n
const [ hasMore, setMore ] = useState(edges.length > 10)\nconst [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n// and if loading from an API asycrhonously\nconst [ isLoading, setLoading ] = useState(false)
\n
Creating Event Handlers to Read and Set State
\n

Reading and setting state will occur within an event listener on the scroll position of the page. If you use an external api and that api is still loading content, we will return immediately, and we will also exit if we know there are no more edges to load. Otherwise, we will check to see if the scroll position of the document plus the innerHeight of the window equals the offsetHeight of the document, and if so, we can load more edges. Basically, this checks to see if the page is scrolled all the way to the bottom.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n    loadEdges(true)\n  }\n}
\n

The loadEdges function will do the following, in order:

\n
    \n
  1. if using an asynchronously api call, will set the loading flag to true
    2. \n
  2. determine if any more edges remaining
    3. \n
  3. slice a new chunk of edges and append to the current list
    4. \n
  4. if using an asynchronously api call, will return the loading flag to false
    5. \n
\n

Since I’m loading from the Context API, I will ignore steps 1 & 2 above.

\n
const loadEdges = () => {\n  const currentLength = currentList.length\n  const more = currentLength < edges.length\n  const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n  setMore(more)\n  addToList([...currentList, ...nextEdges])\n}
\n

How would isLoading be used?

\n

Here is one overly simplistic example:

\n
const loadEdges = async () => {\n  setLoading(true);\n  try {\n      const newEdges = await fetch('https://path/to/some/api')\n      const more = newEdges.length > 0\n      setMore(more)\n      addBusinesses([...currentList, ...nextEdges])\n  } catch(err) {\n      console.error({fetchNewEdgesError: err})\n  }\n  setLoading(false)\n}
\n
Checking The Scroll Position on Each Render with useEffect
\n

The final step to initializing infinite scroll is the useEffect hook. The hook useEffect takes two arguments: a function, and an array. The first argument is the function that will be called every time after the component is rendered. This function is allowed to return another function which will be remembered and gets called as a cleanup function (I’m not sure I fully understand cleanups yet, but I think Dan Abramov does). The second argument is an array of dependencies that would prevent an effect from being called if the values of those dependencies are unchanged between renders. Infinite scroll will a function with a cleanup callback as well as the array full of dependencies to work.

\n
useEffect(\n  () => {\n    /* function that gets called every time */\n    return () => {\n      /* cleanup function to be called */\n    }\n  }, [/* dependencies */])
\n

useEffect is a great place to initialize event listeners on the window or document, as well as to remove those listeners during cleanup, such as listening for scroll events.

\n
  window.addEventListener('scroll', handleScroll)
\n

And thus, the cleanup function:

\n
  window.removeEventListener('scroll', handleScroll)
\n

This gives us an almost complete useEffect function call, we will simply add our state variables to the dependencies array so that effect is only set or cleaned up when the variables change:

\n
useEffect(\n  () => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, isLoading, currentList])
\n

With state, event handlers, effects initialized, we are free to return the jsx for the scrolling list. The following maps over the currentList array. It also adds labels displaying the current state of the list:

\n
return (\n  <> {/* shorthand for React.Fragment */}\n    <ul>\n      {\n        currentList.map(({node: { fields }}, idx) => {\n          return (\n            <li key={`fields-${idx}`} index={idx + 1}>\n              { \n                /* you will know the specifics here from how you load your data */\n                fields \n              }\n            </li>\n          )\n        })\n      }\n    </ul>\n    {\n      !hasMore &&\n        <div>All Businesses Loaded!</div>\n    }\n    {\n      hasMore &&\n        <div>Scroll Down to Load More...</div>\n    }\n    {\n      /* if using this flag, otherwise omit */\n      isLoading && \n        <div>Loading...</div>\n    }\n  </>\n)
\n

Putting It All Together

\n

Now we have a complete picture of the infinite scroll functional component. See below, but don’t leave yet, we still have to account for gatsby build and mobile events.

\n
import React, { useState, useEffect } from 'react'\nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n  const [ hasMore, setMore ] = useState(edges.length > 10)\n  const [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n  \n  const loadEdges = () => {\n    const currentLength = currentList.length\n    const more = currentLength < edges.length\n    const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n    setMore(more)\n    addToList([...currentList, ...nextEdges])\n  }\n\n  const handleScroll = () => {\n    if ( !hasMore || isLoading ) return;\n    if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n      loadEdges()\n    }\n  }\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, currentList])\n\n  return (\n    <> {/* shorthand for React.Fragment */}\n      <ul>\n        {\n          currentList.map(({node: { fields }}, idx) => {\n            return (\n              <li key={`fields-${idx}`} index={idx + 1}>\n                { \n                  /* you will know the specifics here from how you load your data */\n                  fields \n                }\n              </li>\n           )\n          })\n        }\n      </ul>\n      {\n        !hasMore &&\n          <div>All Businesses Loaded!</div>\n      }\n      {\n        hasMore &&\n          <div>Scroll Down to Load More...</div>\n      }\n      {\n    </>\n  )\n}\n\nfunction InfiniteScrollTemplate(props) {\n  return (\n    <Layout {...props}>\n      <InfiniteScroll {...props}/>\n    </Layout>\n  )\n}\n\nexport default InfiniteScrollTemplate
\n

This functional component will work just fine during development on a desktop browser. But you will lose the scroll effect during the build and on touch screens. It will fail during build because client globals like window and document are undefined during the build. It will fail on mobile because scroll is a mouse event. We need to add some conditions for our event listeners to handle both conditions.

\n

Optimizing for Production and Touch Screens

\n

In addition to adding an event listener on scroll, we also need event listeners for touchend and resize (to handle situations where someone resizes their browser), plus we need to add preventDefault to touch events to prevent duplicate events being fired in certain situations where devices have both a mouse and a touch screen. First, create a new event handler for handling touchend. This new handler will simply prevent the default actions on touchend and call the handler for the scroll event (which simply checks to see if we should load more documents). Second, update the useEffect function to add the additional event handlers.

\n
const handleTouchEnd = (e) => {  e.preventDefault();   handleScroll();}\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll)\n  window.addEventListener('resize', handleScroll)  window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window.removeEventListener('scroll', handleScroll)\n    window.removeEventListener('resize', handleScroll)    window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

Finally, we need to add a few simple boolean checks (window &&) to every instance of window or document so that the build process succeeds and so that infinite scroll still operates in the client. Plus, we need to change the scroll position check to be >= instead of the strict equality ===.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window && (     ( window.innerHeight + document.documentElement.scrollTop ) >= document.documentElement.offsetHeight )  ){    loadEdges()\n  }\n}\nuseEffect(() => {\n  window && window.addEventListener('scroll', handleScroll)  window && window.addEventListener('resize', handleScroll)  window && window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window && window.removeEventListener('scroll', handleScroll)    window && window.removeEventListener('resize', handleScroll)    window && window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

There you have it! You have a component that will implement infinite scroll in the browser, on touch screens, and in production within a Gatsby or React application.

\n

Check out the following page in your browser and on mobile to see this code in action.

\n

You can also see my specific implementation of the source code on github.

\n
\n

Update

\n

I had to adjust the touchend handler to account for and exclude touches on links. See my next blog post on this topic.

","id":"7fcb149e-c917-5351-99be-8c78d8765d8b","timeToRead":11,"frontmatter":{"date":"2019-05-20","path":"/blog/infinite-scroll-mobile-desktop-gatsby.html","tags":["gatsby","development","UX","react","hooks","infinite scroll"],"title":"Adding Infinite Scroll For Both Desktop and Mobile in Your Gatsby Project with React Hooks","featuredAlt":"List of items waiting to be updated on scroll","redirect_from":["/blog/inifinite-scroll-mobile-desktop-gatsby.html"]}}],"infinite scroll":[{"excerpt":"In my recent blog post on Using React Hooks to set up Infinite Scroll, I created a working version of infinite scroll that works in both desktop and touch screen environments. However, I came across a problem I did not anticipate when I put it into…","html":"

\n \n \n \n \n

\n

In my recent blog post on Using React Hooks to set up Infinite Scroll, I created a working version of infinite scroll that works in both desktop and touch screen environments. However, I came across a problem I did not anticipate when I put it into production, some of the links on my page stopped working. I tried debugging my CSS, to no avail, only to realize the solution involved updating my touchend event handlers with a very simple fix.

\n

Solution: Debugging CSS ??

\n

The structure of my components nests some links within block level elements. To achieve infinite-scrolling, I map over a list of businesses as follows:

\n
<li key={govId} index={idx + 1}>\n  <h2>\n    <Link \n      to={ `/businesses/${businessName}` }      state={{ \n        prevPath: typeof window !== `undefined` ? window.location.pathname : ''\n      }}\n    >\n      {businessName}\n    </Link>\n  </h2>\n  <p>\n    <a href={`tel:${businessPhone}`}>{businessPhone}</a>  </p>\n</li>
\n

From past experience, I immediately thought the solution would be to either adjust the z-index of the nested link or to set pointer-events on the parent elements. I tried both:

\n
    li, li>h2, p { \n        pointer-events: auto;\n        z-index: 1;\n    }\n    li>h2>a, p>a {\n        z-index: 3;\n    }
\n

Neither solution solved the problem nor were a problem to begin with, at least in my implementation.

\n

Solution: Debugging touchend Event Handler !!

\n

First, here is the initial state of my code for this component. I define handleScroll to add more items to the infinite scroll. Then, handleTouchEnd calls the scroll event handler to avoid double loading. Take particular note of e.preventDefault (perhaps this shouldn’t be called at all? We shall find out soon enough):

\n
  const handleScroll = () => {\n    if ( !hasMore ) return;\n    if ( window && ( window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight ) ){\n      loadMore() // function to add more items to the infinite scroll until no items left\n    }\n  }\n\n  const handleTouchEnd = (e) => {\n      e.preventDefault();      handleScroll();\n  }\n  \n  useEffect(() => {\n    window && window.addEventListener('touchend', handleTouchEnd)\n    window && window.addEventListener('scroll', handleScroll)\n    window && window.addEventListener('resize', handleScroll)\n    return () => {\n      window && window.removeEventListener('touchend', handleTouchEnd)\n      window && window.removeEventListener('scroll', handleScroll)\n      window && window.removeEventListener('resize', handleScroll)\n    };\n  }, [businesses, hasMore])
\n

After realizing that updated my css would not resolve my issue, I wondered what in the world is causing my problem. In this particular component, I use two React hooks to manage state and handle events - useState and useEffect. I wondered,

\n
\n

Okay, so this is a Gatsby project, and I'm importing the Link component from the gatsby library. Could these hooks be interfering with the functionality of the Link?

\n
\n

This wasn’t the problem. I could see in the console that Link rendered a simple a tag, and other Link components were working on the page, such as those rendered by the Navigation component. The only links not working were within my infinite scrolling list component. Moreover, the links worked perfectly in a desktop environment. So I again wondered,

\n
\n

Why in the world does this work on desktop and not on mobile? No errors are being thrown. The href attribute is valid and working if I paste it in the browser. How again does the touchend event work?

\n
\n

This led me to investigating the order in which events are fired by touch screens.

\n

click comes after touchend

\n

According to MDN, the W3C standard calls for a typical order of events fired by touch screens, as follows:

\n\n

Remember I asked you to take particular note that I was calling e.preventDefault() on the touchend event? Turns out that is the culprit. By cancelling the dispatching of further events on touchend, the click event for the link component was never being fired. As MDN tells us:

\n
\n

If the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or click events will be fired.

\n
\n

The solution then must include not calling e.preventDefault, particularly when a link is the target of touchend.

\n

So, the only change necessary involves adding a condition within my handleTouchEnd function, to check for a tags, or Element.tagName == "A", and only call e.preventDefault() if the target is not such a tag:

\n
const handleTouchEnd = (e) => {\n  if (e.target.tagName !== \"A\") {\n    e.preventDefault(); \n    handleScroll();\n  } else {\n    console.log(\"this makes me a click event, most likely\")\n  }\n}
\n
\n

Photo by Amy Humphries on Unsplash

\n
","id":"ca6c2a6a-a6ff-550f-b6a9-e027abd7fb45","timeToRead":4,"frontmatter":{"date":"2019-06-10","path":"/blog/improving-touch-events-upon-infinite-scrolling-component.html","tags":["touch events","react","infinite scroll","production","gatsby link"],"title":"Improving Touch Events upon an Infinite Scrolling Component","featuredAlt":"Closeup of a butterfly sitting on the tip of the someone's index finger","redirect_from":null}},{"excerpt":"I recently created my second production Gatsby application that gives a simple presentation of a local government open data dataset. I say production, though, much of the application is a proof-of-concept for a bigger application I have in the works…","html":"

\n \n \nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n return null\n}\n\nfunction InfiniteScrollTemplate(props) {\n return (\n <Layout {...props}>\n <InfiniteScroll {...props}/>\n </Layout>\n )\n}\n\nexport default InfiniteScrollTemplate\n

We will focus on adding the core logic for infinite scroll to the InfiniteScroll functional component. We do not need to declare a React class because of the two aforementioned hooks—useState and useEffect

\n
Creating and Setting Internal State with useState
\n

React hooks allow us to write functional components that can “hook into” other React features. useState allows us to add state that is preserved between renders of a functional component. Unlike state within a React class, useState replaces the previous state rather than merging with previous state. Calling useState takes only one argument, whatever you conceive of as the initial state. The useState hook can be called multiple times, so rather than having a single state object, you can have multiple state-like variables. This is because the call to useState returns an array of two properties - the value of the current state and a function to call to update the value of that state.

\n
const [currentState, setState] = useState(/* some value or fn that returns a value */)
\n

For infinite scroll to work in this example, we need two state variables—a boolean indicating if there are more records to load and an array of the records already loaded. Seed the currentList with the first 10 records. Don’t worry if there is the possibility that the initial set is less than 10, Array.slice will return all records up to the length of the array if you provide an ending value greater than the last index of the array.

\n

Note: if we had a situation where you loaded data asynchronously from an API, we would also need someway to determine if data was in loading state

\n
const [ hasMore, setMore ] = useState(edges.length > 10)\nconst [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n// and if loading from an API asycrhonously\nconst [ isLoading, setLoading ] = useState(false)
\n
Creating Event Handlers to Read and Set State
\n

Reading and setting state will occur within an event listener on the scroll position of the page. If you use an external api and that api is still loading content, we will return immediately, and we will also exit if we know there are no more edges to load. Otherwise, we will check to see if the scroll position of the document plus the innerHeight of the window equals the offsetHeight of the document, and if so, we can load more edges. Basically, this checks to see if the page is scrolled all the way to the bottom.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n    loadEdges(true)\n  }\n}
\n

The loadEdges function will do the following, in order:

\n
    \n
  1. if using an asynchronously api call, will set the loading flag to true
    2. \n
  2. determine if any more edges remaining
    3. \n
  3. slice a new chunk of edges and append to the current list
    4. \n
  4. if using an asynchronously api call, will return the loading flag to false
    5. \n
\n

Since I’m loading from the Context API, I will ignore steps 1 & 2 above.

\n
const loadEdges = () => {\n  const currentLength = currentList.length\n  const more = currentLength < edges.length\n  const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n  setMore(more)\n  addToList([...currentList, ...nextEdges])\n}
\n

How would isLoading be used?

\n

Here is one overly simplistic example:

\n
const loadEdges = async () => {\n  setLoading(true);\n  try {\n      const newEdges = await fetch('https://path/to/some/api')\n      const more = newEdges.length > 0\n      setMore(more)\n      addBusinesses([...currentList, ...nextEdges])\n  } catch(err) {\n      console.error({fetchNewEdgesError: err})\n  }\n  setLoading(false)\n}
\n
Checking The Scroll Position on Each Render with useEffect
\n

The final step to initializing infinite scroll is the useEffect hook. The hook useEffect takes two arguments: a function, and an array. The first argument is the function that will be called every time after the component is rendered. This function is allowed to return another function which will be remembered and gets called as a cleanup function (I’m not sure I fully understand cleanups yet, but I think Dan Abramov does). The second argument is an array of dependencies that would prevent an effect from being called if the values of those dependencies are unchanged between renders. Infinite scroll will a function with a cleanup callback as well as the array full of dependencies to work.

\n
useEffect(\n  () => {\n    /* function that gets called every time */\n    return () => {\n      /* cleanup function to be called */\n    }\n  }, [/* dependencies */])
\n

useEffect is a great place to initialize event listeners on the window or document, as well as to remove those listeners during cleanup, such as listening for scroll events.

\n
  window.addEventListener('scroll', handleScroll)
\n

And thus, the cleanup function:

\n
  window.removeEventListener('scroll', handleScroll)
\n

This gives us an almost complete useEffect function call, we will simply add our state variables to the dependencies array so that effect is only set or cleaned up when the variables change:

\n
useEffect(\n  () => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, isLoading, currentList])
\n

With state, event handlers, effects initialized, we are free to return the jsx for the scrolling list. The following maps over the currentList array. It also adds labels displaying the current state of the list:

\n
return (\n  <> {/* shorthand for React.Fragment */}\n    <ul>\n      {\n        currentList.map(({node: { fields }}, idx) => {\n          return (\n            <li key={`fields-${idx}`} index={idx + 1}>\n              { \n                /* you will know the specifics here from how you load your data */\n                fields \n              }\n            </li>\n          )\n        })\n      }\n    </ul>\n    {\n      !hasMore &&\n        <div>All Businesses Loaded!</div>\n    }\n    {\n      hasMore &&\n        <div>Scroll Down to Load More...</div>\n    }\n    {\n      /* if using this flag, otherwise omit */\n      isLoading && \n        <div>Loading...</div>\n    }\n  </>\n)
\n

Putting It All Together

\n

Now we have a complete picture of the infinite scroll functional component. See below, but don’t leave yet, we still have to account for gatsby build and mobile events.

\n
import React, { useState, useEffect } from 'react'\nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n  const [ hasMore, setMore ] = useState(edges.length > 10)\n  const [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n  \n  const loadEdges = () => {\n    const currentLength = currentList.length\n    const more = currentLength < edges.length\n    const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n    setMore(more)\n    addToList([...currentList, ...nextEdges])\n  }\n\n  const handleScroll = () => {\n    if ( !hasMore || isLoading ) return;\n    if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n      loadEdges()\n    }\n  }\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, currentList])\n\n  return (\n    <> {/* shorthand for React.Fragment */}\n      <ul>\n        {\n          currentList.map(({node: { fields }}, idx) => {\n            return (\n              <li key={`fields-${idx}`} index={idx + 1}>\n                { \n                  /* you will know the specifics here from how you load your data */\n                  fields \n                }\n              </li>\n           )\n          })\n        }\n      </ul>\n      {\n        !hasMore &&\n          <div>All Businesses Loaded!</div>\n      }\n      {\n        hasMore &&\n          <div>Scroll Down to Load More...</div>\n      }\n      {\n    </>\n  )\n}\n\nfunction InfiniteScrollTemplate(props) {\n  return (\n    <Layout {...props}>\n      <InfiniteScroll {...props}/>\n    </Layout>\n  )\n}\n\nexport default InfiniteScrollTemplate
\n

This functional component will work just fine during development on a desktop browser. But you will lose the scroll effect during the build and on touch screens. It will fail during build because client globals like window and document are undefined during the build. It will fail on mobile because scroll is a mouse event. We need to add some conditions for our event listeners to handle both conditions.

\n

Optimizing for Production and Touch Screens

\n

In addition to adding an event listener on scroll, we also need event listeners for touchend and resize (to handle situations where someone resizes their browser), plus we need to add preventDefault to touch events to prevent duplicate events being fired in certain situations where devices have both a mouse and a touch screen. First, create a new event handler for handling touchend. This new handler will simply prevent the default actions on touchend and call the handler for the scroll event (which simply checks to see if we should load more documents). Second, update the useEffect function to add the additional event handlers.

\n
const handleTouchEnd = (e) => {  e.preventDefault();   handleScroll();}\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll)\n  window.addEventListener('resize', handleScroll)  window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window.removeEventListener('scroll', handleScroll)\n    window.removeEventListener('resize', handleScroll)    window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

Finally, we need to add a few simple boolean checks (window &&) to every instance of window or document so that the build process succeeds and so that infinite scroll still operates in the client. Plus, we need to change the scroll position check to be >= instead of the strict equality ===.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window && (     ( window.innerHeight + document.documentElement.scrollTop ) >= document.documentElement.offsetHeight )  ){    loadEdges()\n  }\n}\nuseEffect(() => {\n  window && window.addEventListener('scroll', handleScroll)  window && window.addEventListener('resize', handleScroll)  window && window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window && window.removeEventListener('scroll', handleScroll)    window && window.removeEventListener('resize', handleScroll)    window && window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

There you have it! You have a component that will implement infinite scroll in the browser, on touch screens, and in production within a Gatsby or React application.

\n

Check out the following page in your browser and on mobile to see this code in action.

\n

You can also see my specific implementation of the source code on github.

\n
\n

Update

\n

I had to adjust the touchend handler to account for and exclude touches on links. See my next blog post on this topic.

","id":"7fcb149e-c917-5351-99be-8c78d8765d8b","timeToRead":11,"frontmatter":{"date":"2019-05-20","path":"/blog/infinite-scroll-mobile-desktop-gatsby.html","tags":["gatsby","development","UX","react","hooks","infinite scroll"],"title":"Adding Infinite Scroll For Both Desktop and Mobile in Your Gatsby Project with React Hooks","featuredAlt":"List of items waiting to be updated on scroll","redirect_from":["/blog/inifinite-scroll-mobile-desktop-gatsby.html"]}}],"production":[{"excerpt":"In my recent blog post on Using React Hooks to set up Infinite Scroll, I created a working version of infinite scroll that works in both desktop and touch screen environments. However, I came across a problem I did not anticipate when I put it into…","html":"

\n \n \n \n \n

\n

In my recent blog post on Using React Hooks to set up Infinite Scroll, I created a working version of infinite scroll that works in both desktop and touch screen environments. However, I came across a problem I did not anticipate when I put it into production, some of the links on my page stopped working. I tried debugging my CSS, to no avail, only to realize the solution involved updating my touchend event handlers with a very simple fix.

\n

Solution: Debugging CSS ??

\n

The structure of my components nests some links within block level elements. To achieve infinite-scrolling, I map over a list of businesses as follows:

\n
<li key={govId} index={idx + 1}>\n  <h2>\n    <Link \n      to={ `/businesses/${businessName}` }      state={{ \n        prevPath: typeof window !== `undefined` ? window.location.pathname : ''\n      }}\n    >\n      {businessName}\n    </Link>\n  </h2>\n  <p>\n    <a href={`tel:${businessPhone}`}>{businessPhone}</a>  </p>\n</li>
\n

From past experience, I immediately thought the solution would be to either adjust the z-index of the nested link or to set pointer-events on the parent elements. I tried both:

\n
    li, li>h2, p { \n        pointer-events: auto;\n        z-index: 1;\n    }\n    li>h2>a, p>a {\n        z-index: 3;\n    }
\n

Neither solution solved the problem nor were a problem to begin with, at least in my implementation.

\n

Solution: Debugging touchend Event Handler !!

\n

First, here is the initial state of my code for this component. I define handleScroll to add more items to the infinite scroll. Then, handleTouchEnd calls the scroll event handler to avoid double loading. Take particular note of e.preventDefault (perhaps this shouldn’t be called at all? We shall find out soon enough):

\n
  const handleScroll = () => {\n    if ( !hasMore ) return;\n    if ( window && ( window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight ) ){\n      loadMore() // function to add more items to the infinite scroll until no items left\n    }\n  }\n\n  const handleTouchEnd = (e) => {\n      e.preventDefault();      handleScroll();\n  }\n  \n  useEffect(() => {\n    window && window.addEventListener('touchend', handleTouchEnd)\n    window && window.addEventListener('scroll', handleScroll)\n    window && window.addEventListener('resize', handleScroll)\n    return () => {\n      window && window.removeEventListener('touchend', handleTouchEnd)\n      window && window.removeEventListener('scroll', handleScroll)\n      window && window.removeEventListener('resize', handleScroll)\n    };\n  }, [businesses, hasMore])
\n

After realizing that updated my css would not resolve my issue, I wondered what in the world is causing my problem. In this particular component, I use two React hooks to manage state and handle events - useState and useEffect. I wondered,

\n
\n

Okay, so this is a Gatsby project, and I'm importing the Link component from the gatsby library. Could these hooks be interfering with the functionality of the Link?

\n
\n

This wasn’t the problem. I could see in the console that Link rendered a simple a tag, and other Link components were working on the page, such as those rendered by the Navigation component. The only links not working were within my infinite scrolling list component. Moreover, the links worked perfectly in a desktop environment. So I again wondered,

\n
\n

Why in the world does this work on desktop and not on mobile? No errors are being thrown. The href attribute is valid and working if I paste it in the browser. How again does the touchend event work?

\n
\n

This led me to investigating the order in which events are fired by touch screens.

\n

click comes after touchend

\n

According to MDN, the W3C standard calls for a typical order of events fired by touch screens, as follows:

\n\n

Remember I asked you to take particular note that I was calling e.preventDefault() on the touchend event? Turns out that is the culprit. By cancelling the dispatching of further events on touchend, the click event for the link component was never being fired. As MDN tells us:

\n
\n

If the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or click events will be fired.

\n
\n

The solution then must include not calling e.preventDefault, particularly when a link is the target of touchend.

\n

So, the only change necessary involves adding a condition within my handleTouchEnd function, to check for a tags, or Element.tagName == "A", and only call e.preventDefault() if the target is not such a tag:

\n
const handleTouchEnd = (e) => {\n  if (e.target.tagName !== \"A\") {\n    e.preventDefault(); \n    handleScroll();\n  } else {\n    console.log(\"this makes me a click event, most likely\")\n  }\n}
\n
\n

Photo by Amy Humphries on Unsplash

\n
","id":"ca6c2a6a-a6ff-550f-b6a9-e027abd7fb45","timeToRead":4,"frontmatter":{"date":"2019-06-10","path":"/blog/improving-touch-events-upon-infinite-scrolling-component.html","tags":["touch events","react","infinite scroll","production","gatsby link"],"title":"Improving Touch Events upon an Infinite Scrolling Component","featuredAlt":"Closeup of a butterfly sitting on the tip of the someone's index finger","redirect_from":null}}],"gatsby link":[{"excerpt":"In my recent blog post on Using React Hooks to set up Infinite Scroll, I created a working version of infinite scroll that works in both desktop and touch screen environments. However, I came across a problem I did not anticipate when I put it into…","html":"

\n \n \n \n \n

\n

In my recent blog post on Using React Hooks to set up Infinite Scroll, I created a working version of infinite scroll that works in both desktop and touch screen environments. However, I came across a problem I did not anticipate when I put it into production, some of the links on my page stopped working. I tried debugging my CSS, to no avail, only to realize the solution involved updating my touchend event handlers with a very simple fix.

\n

Solution: Debugging CSS ??

\n

The structure of my components nests some links within block level elements. To achieve infinite-scrolling, I map over a list of businesses as follows:

\n
<li key={govId} index={idx + 1}>\n  <h2>\n    <Link \n      to={ `/businesses/${businessName}` }      state={{ \n        prevPath: typeof window !== `undefined` ? window.location.pathname : ''\n      }}\n    >\n      {businessName}\n    </Link>\n  </h2>\n  <p>\n    <a href={`tel:${businessPhone}`}>{businessPhone}</a>  </p>\n</li>
\n

From past experience, I immediately thought the solution would be to either adjust the z-index of the nested link or to set pointer-events on the parent elements. I tried both:

\n
    li, li>h2, p { \n        pointer-events: auto;\n        z-index: 1;\n    }\n    li>h2>a, p>a {\n        z-index: 3;\n    }
\n

Neither solution solved the problem nor were a problem to begin with, at least in my implementation.

\n

Solution: Debugging touchend Event Handler !!

\n

First, here is the initial state of my code for this component. I define handleScroll to add more items to the infinite scroll. Then, handleTouchEnd calls the scroll event handler to avoid double loading. Take particular note of e.preventDefault (perhaps this shouldn’t be called at all? We shall find out soon enough):

\n
  const handleScroll = () => {\n    if ( !hasMore ) return;\n    if ( window && ( window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight ) ){\n      loadMore() // function to add more items to the infinite scroll until no items left\n    }\n  }\n\n  const handleTouchEnd = (e) => {\n      e.preventDefault();      handleScroll();\n  }\n  \n  useEffect(() => {\n    window && window.addEventListener('touchend', handleTouchEnd)\n    window && window.addEventListener('scroll', handleScroll)\n    window && window.addEventListener('resize', handleScroll)\n    return () => {\n      window && window.removeEventListener('touchend', handleTouchEnd)\n      window && window.removeEventListener('scroll', handleScroll)\n      window && window.removeEventListener('resize', handleScroll)\n    };\n  }, [businesses, hasMore])
\n

After realizing that updated my css would not resolve my issue, I wondered what in the world is causing my problem. In this particular component, I use two React hooks to manage state and handle events - useState and useEffect. I wondered,

\n
\n

Okay, so this is a Gatsby project, and I'm importing the Link component from the gatsby library. Could these hooks be interfering with the functionality of the Link?

\n
\n

This wasn’t the problem. I could see in the console that Link rendered a simple a tag, and other Link components were working on the page, such as those rendered by the Navigation component. The only links not working were within my infinite scrolling list component. Moreover, the links worked perfectly in a desktop environment. So I again wondered,

\n
\n

Why in the world does this work on desktop and not on mobile? No errors are being thrown. The href attribute is valid and working if I paste it in the browser. How again does the touchend event work?

\n
\n

This led me to investigating the order in which events are fired by touch screens.

\n

click comes after touchend

\n

According to MDN, the W3C standard calls for a typical order of events fired by touch screens, as follows:

\n\n

Remember I asked you to take particular note that I was calling e.preventDefault() on the touchend event? Turns out that is the culprit. By cancelling the dispatching of further events on touchend, the click event for the link component was never being fired. As MDN tells us:

\n
\n

If the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or click events will be fired.

\n
\n

The solution then must include not calling e.preventDefault, particularly when a link is the target of touchend.

\n

So, the only change necessary involves adding a condition within my handleTouchEnd function, to check for a tags, or Element.tagName == "A", and only call e.preventDefault() if the target is not such a tag:

\n
const handleTouchEnd = (e) => {\n  if (e.target.tagName !== \"A\") {\n    e.preventDefault(); \n    handleScroll();\n  } else {\n    console.log(\"this makes me a click event, most likely\")\n  }\n}
\n
\n

Photo by Amy Humphries on Unsplash

\n
","id":"ca6c2a6a-a6ff-550f-b6a9-e027abd7fb45","timeToRead":4,"frontmatter":{"date":"2019-06-10","path":"/blog/improving-touch-events-upon-infinite-scrolling-component.html","tags":["touch events","react","infinite scroll","production","gatsby link"],"title":"Improving Touch Events upon an Infinite Scrolling Component","featuredAlt":"Closeup of a butterfly sitting on the tip of the someone's index finger","redirect_from":null}}],"development":[{"excerpt":"I recently created my second production Gatsby application that gives a simple presentation of a local government open data dataset. I say production, though, much of the application is a proof-of-concept for a bigger application I have in the works…","html":"

\n \n \nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n return null\n}\n\nfunction InfiniteScrollTemplate(props) {\n return (\n <Layout {...props}>\n <InfiniteScroll {...props}/>\n </Layout>\n )\n}\n\nexport default InfiniteScrollTemplate\n

We will focus on adding the core logic for infinite scroll to the InfiniteScroll functional component. We do not need to declare a React class because of the two aforementioned hooks—useState and useEffect

\n
Creating and Setting Internal State with useState
\n

React hooks allow us to write functional components that can “hook into” other React features. useState allows us to add state that is preserved between renders of a functional component. Unlike state within a React class, useState replaces the previous state rather than merging with previous state. Calling useState takes only one argument, whatever you conceive of as the initial state. The useState hook can be called multiple times, so rather than having a single state object, you can have multiple state-like variables. This is because the call to useState returns an array of two properties - the value of the current state and a function to call to update the value of that state.

\n
const [currentState, setState] = useState(/* some value or fn that returns a value */)
\n

For infinite scroll to work in this example, we need two state variables—a boolean indicating if there are more records to load and an array of the records already loaded. Seed the currentList with the first 10 records. Don’t worry if there is the possibility that the initial set is less than 10, Array.slice will return all records up to the length of the array if you provide an ending value greater than the last index of the array.

\n

Note: if we had a situation where you loaded data asynchronously from an API, we would also need someway to determine if data was in loading state

\n
const [ hasMore, setMore ] = useState(edges.length > 10)\nconst [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n// and if loading from an API asycrhonously\nconst [ isLoading, setLoading ] = useState(false)
\n
Creating Event Handlers to Read and Set State
\n

Reading and setting state will occur within an event listener on the scroll position of the page. If you use an external api and that api is still loading content, we will return immediately, and we will also exit if we know there are no more edges to load. Otherwise, we will check to see if the scroll position of the document plus the innerHeight of the window equals the offsetHeight of the document, and if so, we can load more edges. Basically, this checks to see if the page is scrolled all the way to the bottom.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n    loadEdges(true)\n  }\n}
\n

The loadEdges function will do the following, in order:

\n
    \n
  1. if using an asynchronously api call, will set the loading flag to true
    2. \n
  2. determine if any more edges remaining
    3. \n
  3. slice a new chunk of edges and append to the current list
    4. \n
  4. if using an asynchronously api call, will return the loading flag to false
    5. \n
\n

Since I’m loading from the Context API, I will ignore steps 1 & 2 above.

\n
const loadEdges = () => {\n  const currentLength = currentList.length\n  const more = currentLength < edges.length\n  const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n  setMore(more)\n  addToList([...currentList, ...nextEdges])\n}
\n

How would isLoading be used?

\n

Here is one overly simplistic example:

\n
const loadEdges = async () => {\n  setLoading(true);\n  try {\n      const newEdges = await fetch('https://path/to/some/api')\n      const more = newEdges.length > 0\n      setMore(more)\n      addBusinesses([...currentList, ...nextEdges])\n  } catch(err) {\n      console.error({fetchNewEdgesError: err})\n  }\n  setLoading(false)\n}
\n
Checking The Scroll Position on Each Render with useEffect
\n

The final step to initializing infinite scroll is the useEffect hook. The hook useEffect takes two arguments: a function, and an array. The first argument is the function that will be called every time after the component is rendered. This function is allowed to return another function which will be remembered and gets called as a cleanup function (I’m not sure I fully understand cleanups yet, but I think Dan Abramov does). The second argument is an array of dependencies that would prevent an effect from being called if the values of those dependencies are unchanged between renders. Infinite scroll will a function with a cleanup callback as well as the array full of dependencies to work.

\n
useEffect(\n  () => {\n    /* function that gets called every time */\n    return () => {\n      /* cleanup function to be called */\n    }\n  }, [/* dependencies */])
\n

useEffect is a great place to initialize event listeners on the window or document, as well as to remove those listeners during cleanup, such as listening for scroll events.

\n
  window.addEventListener('scroll', handleScroll)
\n

And thus, the cleanup function:

\n
  window.removeEventListener('scroll', handleScroll)
\n

This gives us an almost complete useEffect function call, we will simply add our state variables to the dependencies array so that effect is only set or cleaned up when the variables change:

\n
useEffect(\n  () => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, isLoading, currentList])
\n

With state, event handlers, effects initialized, we are free to return the jsx for the scrolling list. The following maps over the currentList array. It also adds labels displaying the current state of the list:

\n
return (\n  <> {/* shorthand for React.Fragment */}\n    <ul>\n      {\n        currentList.map(({node: { fields }}, idx) => {\n          return (\n            <li key={`fields-${idx}`} index={idx + 1}>\n              { \n                /* you will know the specifics here from how you load your data */\n                fields \n              }\n            </li>\n          )\n        })\n      }\n    </ul>\n    {\n      !hasMore &&\n        <div>All Businesses Loaded!</div>\n    }\n    {\n      hasMore &&\n        <div>Scroll Down to Load More...</div>\n    }\n    {\n      /* if using this flag, otherwise omit */\n      isLoading && \n        <div>Loading...</div>\n    }\n  </>\n)
\n

Putting It All Together

\n

Now we have a complete picture of the infinite scroll functional component. See below, but don’t leave yet, we still have to account for gatsby build and mobile events.

\n
import React, { useState, useEffect } from 'react'\nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n  const [ hasMore, setMore ] = useState(edges.length > 10)\n  const [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n  \n  const loadEdges = () => {\n    const currentLength = currentList.length\n    const more = currentLength < edges.length\n    const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n    setMore(more)\n    addToList([...currentList, ...nextEdges])\n  }\n\n  const handleScroll = () => {\n    if ( !hasMore || isLoading ) return;\n    if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n      loadEdges()\n    }\n  }\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, currentList])\n\n  return (\n    <> {/* shorthand for React.Fragment */}\n      <ul>\n        {\n          currentList.map(({node: { fields }}, idx) => {\n            return (\n              <li key={`fields-${idx}`} index={idx + 1}>\n                { \n                  /* you will know the specifics here from how you load your data */\n                  fields \n                }\n              </li>\n           )\n          })\n        }\n      </ul>\n      {\n        !hasMore &&\n          <div>All Businesses Loaded!</div>\n      }\n      {\n        hasMore &&\n          <div>Scroll Down to Load More...</div>\n      }\n      {\n    </>\n  )\n}\n\nfunction InfiniteScrollTemplate(props) {\n  return (\n    <Layout {...props}>\n      <InfiniteScroll {...props}/>\n    </Layout>\n  )\n}\n\nexport default InfiniteScrollTemplate
\n

This functional component will work just fine during development on a desktop browser. But you will lose the scroll effect during the build and on touch screens. It will fail during build because client globals like window and document are undefined during the build. It will fail on mobile because scroll is a mouse event. We need to add some conditions for our event listeners to handle both conditions.

\n

Optimizing for Production and Touch Screens

\n

In addition to adding an event listener on scroll, we also need event listeners for touchend and resize (to handle situations where someone resizes their browser), plus we need to add preventDefault to touch events to prevent duplicate events being fired in certain situations where devices have both a mouse and a touch screen. First, create a new event handler for handling touchend. This new handler will simply prevent the default actions on touchend and call the handler for the scroll event (which simply checks to see if we should load more documents). Second, update the useEffect function to add the additional event handlers.

\n
const handleTouchEnd = (e) => {  e.preventDefault();   handleScroll();}\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll)\n  window.addEventListener('resize', handleScroll)  window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window.removeEventListener('scroll', handleScroll)\n    window.removeEventListener('resize', handleScroll)    window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

Finally, we need to add a few simple boolean checks (window &&) to every instance of window or document so that the build process succeeds and so that infinite scroll still operates in the client. Plus, we need to change the scroll position check to be >= instead of the strict equality ===.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window && (     ( window.innerHeight + document.documentElement.scrollTop ) >= document.documentElement.offsetHeight )  ){    loadEdges()\n  }\n}\nuseEffect(() => {\n  window && window.addEventListener('scroll', handleScroll)  window && window.addEventListener('resize', handleScroll)  window && window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window && window.removeEventListener('scroll', handleScroll)    window && window.removeEventListener('resize', handleScroll)    window && window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

There you have it! You have a component that will implement infinite scroll in the browser, on touch screens, and in production within a Gatsby or React application.

\n

Check out the following page in your browser and on mobile to see this code in action.

\n

You can also see my specific implementation of the source code on github.

\n
\n

Update

\n

I had to adjust the touchend handler to account for and exclude touches on links. See my next blog post on this topic.

","id":"7fcb149e-c917-5351-99be-8c78d8765d8b","timeToRead":11,"frontmatter":{"date":"2019-05-20","path":"/blog/infinite-scroll-mobile-desktop-gatsby.html","tags":["gatsby","development","UX","react","hooks","infinite scroll"],"title":"Adding Infinite Scroll For Both Desktop and Mobile in Your Gatsby Project with React Hooks","featuredAlt":"List of items waiting to be updated on scroll","redirect_from":["/blog/inifinite-scroll-mobile-desktop-gatsby.html"]}},{"excerpt":"I was drawn to Gatsby out of my love for React, and my desire to serve fast, performant, responsive applications. I started learning React just as the library started embracing ES6 classes, and just as was taking off. It was a challenge at first to…","html":"

\n \n \n \n \n

\n

I was drawn to Gatsby out of my love for React, and my desire to serve fast, performant, responsive applications. I started learning React just as the library started embracing ES6 classes, and just as create-react-app was taking off. It was a challenge at first to learn the simplicity of proxying to get the front end to run concurrently with a node / express API. And yet, to get from that point to server-side rendering took a little more research and effort. It has been fun learning with and from the larger coding community. I could continue to enumerate the other technical issues I have encountered and solved, and yet some others I still have to learn, but note something important so far regarding my journey—it has been a techinical-first-journey, focused on knowledge and skill of the various langauges and libraries, necessary yes, but perhaps not primary. The last thing on mind has been SEO, accessbility, and security.

\n

Setting An SEO-First Mindset

\n

I’ll leave accessibility and then security future posts, but what has impressed me thus far in my dive into the Gatbsy ecosystem has been the ease to configure search engine optimization. In fact, you can create an architecture for your site or app that is SEO driven long before developing your UI. I want to walk you through the things I have learned so far in optimizing a Gatsby site for SEO right from the start.

\n

Before We Begin

\n

You need to have some familiarity with Gatsby. To learn how to install the gatbsy-cli and create a new Gatsby project from one of the many Gatsby Starters, please consider completing the Gatsby tutorial.

\n

Otherwise, pick a starter from the SEO category, and open the SEO component or just use the gatsby-starter-default by running from the command line:

\n
  gatsby new seo-blog https://github.com/gatsbyjs/gatsby-starter-default
\n

The SEO component is dependent upon react-helmet, if your starter does not come with SEO initialized be sure to add it. We also want to add some other features like sitemap, google analytics, and RSS feed, for syndication. Finally, we need to create robots.txt to manage how search engines crawl the site. I’ve split up the commands below for spacing purposes, but they can all run as one yarn add command:

\n
  yarn add react-helmet gatsby-plugin-react-helmet \n  yarn add gatsby-plugin-feed gatsby-plugin-google-analytics gatsby-plugin-sitemap\n  yarn add gatsby-plugin-robots-txt
\n

With your starter and these plugins installed, we are ready to set up our site for SEO Performance.

\n

Setting up gatsby-config.js

\n

Within the root of your new Gatsby project sits the file Gatsby uses to configure siteMetaData and plugins and several other important features.

\n

This file, gatsby-config.js is going to do the heavy lifting of importing all your vital SEO related content into GraphQL or create necessary files directly (like robots.txt).

\n

Site Metadata

\n

Metadata is as it sounds, data that extends across or throughout the entirity of your site. It can be used anywhere, but will come most in handy when configuring your SEO component as well as Google Structured Data.

\n

Initialize your metadata as an Object literal with key/value pairs that can be converted into <meta> tags, or can be passed to sitemaps or footers, wherever you might need global site data:

\n
  <meta name=\"title\" content=\"My Super Awesome Site\"/>\n  <meta name=\"description\" content=\"My Super Awesome Site will blow your mind with radical content, extravagant colors, and hip designs.\"/>
\n

Here is where you need to plan what might use across your site:

\n\n

With siteMetadata set up, your can now query this data to be used within your plugin initialization, even within the same gatsby-config.js file. I’ve organized my siteMetadata so that I can make the following query:

\n
  query: `\n    site {\n      siteMetadata {\n        title\n        description\n        author\n        siteUrl\n        siteVerification {\n          google\n          bing\n        }\n        social {\n          twitter\n        }\n        socialLinks {\n          twitter\n          linkedin\n          facebook\n          stackOverflow\n          github\n          instagram\n          pinterest\n          youtube\n          email\n          phone\n          fax\n          address\n        }\n        keywords\n        organization {\n          name\n          url\n        }\n      }\n    }\n  `
\n

This query returns an object matching this query structure:

\n
  site: {\n    siteMetadata: {\n      title: String,\n      description: String,\n      author: String,\n      siteUrl: String,\n      siteVerification: {\n        google: String,\n        bing: String\n      },\n      social: {\n        twitter: String\n      },\n      socialLinks: {\n        twitter: String,\n        linkedin: String,\n        facebook: String,\n        stackOverflow: String,\n        github: String,\n        instagram: String,\n        pinterest: String,\n        youtube: String,\n        email: String,\n        phone: String,\n        fax: String,\n        address: String\n      },\n      keywords: [String],\n      organization: {\n        name: String,\n        url: String\n      }\n    }\n  }
\n

Plugin Setup

\n

We are going to focus on four plugins, each for the sitemap, RSS feed, robots.txt file, and Google Analytics (for tracking the SEO success of your site). We’ll initialize the plugins immediately following siteMetaData.

\n
  module.exports = {\n    siteMetadata: {\n      /** SEE ABOVE **/\n    },\n    plugins: [       /** An ARRAY **/    ],   }
\n
    \n
  1. gatsby-plugin-sitemap
    2. \n
\n

The sitemap plugin can be used simply or with options. Generally, you want to include anything and everything with high quality content, and exclude duplicate content, thin content, or pages behind authentication. Gatsby provides a detailed walkthrough for setting up your sitemap.

\n
  plugins: [\n      {\n        resolve: `gatsby-plugin-sitemap`,\n        options: {\n          exclude: [`/admin`, `/tags/links`]        }\n      }\n    },\n  ]
\n
    \n
  1. gatsby-plugin-feed
    2. \n
\n

An RSS feed helps with syndication of content on your site, like if you had a blog and wanted to cross-post to another better established blog, and it helps communicate changes to your site to search engines. This plugin allows you to create any number of different feeds utlizing the power of GraphQL to query your data. Some of what is below is dependent on how you structure your pages and posts in gatsby-node.js. The feed will walk through each of your pages in markdown generate an XML RSS Feed. Gatsby provides a detailed walkthrough for adding an RSS feed.

\n

Note particularly the use of queries below to complete the feed.

\n
  {\n    resolve: `gatsby-plugin-feed`,\n    options: {\n      // graphQL query to get siteMetadata      query: `        {          site {            siteMetadata {              title              description              siteUrl              site_url: siteUrl,              author            }          }        }      `,      feeds: [\n        // an array of feeds, I just have one below\n        {\n          serialize: ({ query: { site, allMarkdownRemark } }) => {\n            const { siteMetadata : { siteUrl } } = site;\n            return allMarkdownRemark.edges.map(edge => {\n              const { \n                node: { \n                  frontmatter: {\n                    title, \n                    date, \n                    path, \n                    author: { name, email }, \n                    featured: { publicURL }, \n                    featuredAlt\n                  },\n                  excerpt, \n                  html\n                } \n              } = edge;\n              return Object.assign({}, edge.node.frontmatter, {\n                language: `en-us`,\n                title,\n                description: excerpt,\n                date,\n                url: siteUrl + path,\n                guid: siteUrl + path,\n                author: `${email} ( ${name} )`,\n                image: {\n                  url: siteUrl + publicURL,\n                  title: featuredAlt,\n                  link: siteUrl + path,\n                },\n                custom_elements: [{ \"content:encoded\": html }],\n              })\n            })\n          },\n          // query to get blog post data          query: `          {            allMarkdownRemark(              sort: { order: DESC, fields: [frontmatter___date] },            ) {              edges {                node {                  excerpt                  html                  frontmatter {                    path                    date                    title                    featured {                      publicURL                    }                    featuredAlt                    author {                      name                      email                    }                  }                }              }            }          }          `,          output: \"/rss.xml\",\n          title: `My Awesome Site | RSS Feed`,\n        },\n      ],\n    },\n  },
\n
    \n
  1. gatsby-plugin-robots-txt
    2. \n
\n

With robots.txt files, you can instruct crawlers to ignore your site and/or individual paths, based on certain conditions. See the plugin description for more detailed use cases.

\n
  {\n    resolve: 'gatsby-plugin-robots-txt',\n    options: {\n      policy: [{ userAgent: '*', allow: '/' }]    }\n  },
\n
    \n
  1. gatsby-plugin-google-analytics
    2. \n
\n

Google analytics will help you track how users find and interact with your site, so you can manage and update your site over time for better SEO results. Verify your site with Google and store your analytics key here:

\n
  {\n    resolve: `gatsby-plugin-google-analytics`,\n    options: {\n      trackingId: ``,    },\n  },
\n

Optimizing the SEO Component

\n

The secret sauce behind the SEO Component is the well-known react-hemlet package. Every page and every template imports the SEO Component and thus you can pass specific information to adjust the metadata for each public facing page.

\n

Use your imagination—what can you pass to this component to create the perfect SEO enabled page? Is the page a landing page, a blog post, a media gallery, a video, a professional profile, a product? There are 614 types of schemas listed on https://schema.org. You can pass specific schema related information to the SEO component.

\n

If any of these values you pass to the component, a StaticQuery would fill in what’s missing with siteMetaData. From this data, react-helmet creates all the <meta> tags, including open graph and twitter card tags, and pass relevant data to another component that returns Google Structured Data.

\n

Rather than including a long code-snippet, refer back to the Before We Begin section, or refer to the gatsby-plugin-react-helment page for installation. But please note, the structure of my SEO Component follows that outlined by this excellent post by Dustin Schau.

\n

As I have tinkered with the SEO Component, here are the features I added:

\n
    \n
  1. Additional Fields Passed to Component to: distinguish between types of pages, such as blog posts, to handle authors of content other than main site author, and to handle changes in date modified for pages and posts. More could be added in the future.
    2. \n
\n
  function SEO({\n    description,\n    lang,\n    meta,\n    keywords,\n    image,\n    title,\n    // highlight start\n    pathname,\n    isBlogPost,\n    author,\n    datePublished = false,\n    dateModified = false\n    // highlight-end\n  }) {
\n
    \n
  1. Setting og:type conditionally
    2. \n
\n
  {\n    property: `og:type`,\n    content: isBlogPost ? `article` : `website`,  },
\n
    \n
  1. Always setting an alt property on the image object
    2. \n
\n
  // ALWAYS ADD IMAGE:ALT  {     property: \"og:image:alt\",     content: image.alt   },   {     property: \"twitter:image:alt\",     content: image.alt   },
\n
    \n
  1. Handling Secure Images
    2. \n
\n
  .concat(\n    // handle Secure Image    metaImage && metaImage.indexOf(\"https\") > -1      ? [          {            property: \"twitter:image:secure_url\",            content: metaImage,          },          { property: \"og:image:secure_url\", content: metaImage },        ]      : []  )
\n
    \n
  1. Adding a Component to handle Google Structured Data using schema.org categories. I came across an example of such a component from reading through various documentation and articles, I can’t recall where I saw the link first, but I borrowed and adapted from Jason Lengstorf. I made two small adaptations to his excellent work.
    2. \n
\n

Configuring the SchemaOrg Component

\n

You will import and call the SchemaOrg Component from within the SEO Component and place it just after the closing tag of the Helmet Component and pass the following properties:

\n
  function SEO(.....) {\n    ...\n    return (\n      <> {/* Fragment Shorthand */}\n        <Helmet \n          {/* All the Meta Tag Configuration */}\n        />\n        <SchemaOrg          isBlogPost={isBlogPost}          url={metaUrl}          title={title}          image={metaImage}          description={metaDescription}          datePublished={datePublished}          dateModified={dateModified}          canonicalUrl={siteUrl}          author={isBlogPost ? author : siteMetadata.author}          organization={organization}          defaultTitle={title}        />      </>\n    )\n  }
\n

I won’t copy and paste the entire SchemaOrg Component here. Grab it from the link above, and give Jason Lengstorf some credit in your code. Below are the few additions I made:

\n
    \n
  1. I added author email to the Schema. This will come from siteMetadata for most pages and from post frontmatter from blog posts. This will support multiple authors for your site and each page can reflect that uniquely if you so choose.
    2. \n
\n
  author: {\n    \"@type\": \"Person\",\n    name: author.name,\n    email: author.email,  },
\n
    \n
  1. I updated the organization logo from a simple URI to an ImageObject type. While the String URI is acceptable to the Organization type, Google has specific expectations and was throwing an error until I changed it to an ImageObject.
    2. \n
\n
  publisher: {\n    \"@type\": \"Organization\",\n    url: organization.url,\n    logo: {      \"@type\": \"ImageObject\",      url: organization.logo.url,      width: organization.logo.width,      height: organization.logo.height,    },    name: organization.name,\n  },
\n
    \n
  1. Add dataModified to reflect changes to the page after initial publication for the BlogPosting type.
    2. \n
\n
  datePublished,\n  dateModified,
\n

When you have more complexity within you site, you can pass flags to this Component to return differing types of schema as needed. But no matter what you do, do not put your site into production without first passing through the script generated by the component to the Google Structured Data Testing Tool.

\n

Concluding Thoughts

\n

When I configured my site according to the plan I outlined above, not only do I get image rich, descriptive Social Sharing cards, I get perfect SEO scores when running a Lighthouse Audit on my site:

\n

\n \n \n \n \n

\n

You also see that I scored 100% for Accessibility on my site. This is so easy to score with Gatsby as well, and I’ll talk about what I learned on this topic in the future.

\n

Cross-Posted: https://dev.to/wesleylhandy/putting-seo-first-with-gatsby-3n2g

","id":"fc7a6836-1cdc-519e-8c65-39beae2150c8","timeToRead":10,"frontmatter":{"date":"2019-04-20","path":"/blog/seo-accessibility-first-gatsby.html","tags":["gatsby","development","seo"],"title":"Putting SEO First with Gatsby","featuredAlt":"Gatsby loves to claim to produce the fastest sites around","redirect_from":null}},{"excerpt":"Changing careers is tough. For many people, it is also an absolute necessity. As valuable as a good college education is for one’s development intellectually, morally, and socially, graduation does not guarantee a life-long career. The more degrees…","html":"

\n \n \n \n \n

\n

Changing careers is tough.

\n

For many people, it is also an absolute necessity. As valuable as a good college education is for one’s development intellectually, morally, and socially, graduation does not guarantee a life-long career. The more degrees one obtains come higher-level and yet more narrow opportunities. Such opportunities fade into nothing if just can’t break-in your desired field.

\n

Over the past three years I have received several phone calls, emails, and direct messages asking me for advice, whether or not one of my friends or their loved ones should consider a career change like I did.

\n

There are a lot of very talented, highly educated people stuck in low-paying, dead-end jobs, or who just can’t break in to their dream field.

\n

I’m writing this post for them and for the many others out there like them. I want to answer some of the most commonly asked questions I have received. I want to be specific to my particular set of choices, recognizing that everybody’s situation is different. I also want to humbly admit that I’m writing from a Western, middle class perspective. Not everyone is afforded the types of opportunities from which I have derived great benefit. This may look different for someone in a developing country, and the sets of choices you have will lean away from formal programs that cost a lot of money. If this is you reading this post, I sympathize with you and want to be an encouragement to you in any way I can. Hit me up on twitter and ask me any questions you got.

\n

This is the first post in a series on my decision to switch careers, attend a bootcamp, and land my first dev job. This post will cover the first two questions in the list below:

\n

Questions I’ll Answer to Aid Your Decision Making Process Through This Series

\n\n

Why You Could Consider a Career Change into Web Development

\n

Web development is one field where you can break-in without a college degree majoring in some technological discipline. The need for developers, data scientists, cybersecurity specialists and many other types of programmers and developers is on the rise. Don’t miss something from that sentence. There are a wide variety of growing fields in the tech job market, of which web development is one.

\n

The job market is competitive, it takes a lot of effort, a lot of networking and building relationships and a little bit of luck to break into tech full-time, but it is possible because the resources to attain the skills necessary to do the job are readily available for free, with minimal cost, or sometimes with more than minimal cost. Nevertheless, switching careers is such a difficult task to undertake, you must be desparate for the change. You have to be willing to go all-in with time, money, effort, and focus.

\n

Why I Had to Switch Careers

\n

The year was 2016; I found myself and my family in a desperate situation. We had moved to New Jersey/Metro New York as part of a Christian ministry, and we have moved without having a full-time job in place. At the time, having an earned PhD from an accredited instituion, I was teaching online for a couple of also-accredited schools. I was able to add to that a part-time gig teaching formal and informal logic, bible and theology at a private school. Honestly, I thought we could make it while I sought either regular Professorship or simply transitioning from my previous full-time job in academic administration to a new institution in the New York area. The NY/NJ MSA is home to hundreds of institutions of higher learning, certainly I could get one to hire me. Fast forward three years, a few hundred applications, a dozen or so interviews, being passed over as a finalist half of those times, and zippo offers.

\n

I was loving life serving a loving group of people as one of their pastors, but my family was just scraping by. The more time that passed, the more useless my resume became, as I had to explain my increasingly longer employment gap. We were on the brink of bankruptcy, and I needed marketable skills where I would be in demand.

\n

Before plunging headlong into the humanities, I completed and enjoyed several years of computer science courses between high school and my first year of college, albeit twenty years prior and with languages like Basic, Pascal and Fortran. Still, even as I pursued philosophy and theology over coding and programming, I never lost my love for tech, becoming the de facto software trainer whatever job I found, culminating in my last academic job, which I loved, in Institutional Research, where I got to play around with SQL queries and advanced Excel spreadsheet programming. It only made sense that I pursue something like web development. Moreover, I was living just a few miles from Silicon Alley - NY has a bustling tech scene and I wanted in, I needed in.

\n

I didn’t fully realize at the time all of what it was going to take to break in, but I was in desparate need and I knew that I could do it and would like doing it.

\n

Why You Should Consider Attending a Web Development Bootcamp

\n

As a preface, let me once again express that I sympathize with those in economic situations where this is not a real possibility. Let me encourage you to look to all those who have worked hard to become quality self-taught programmers. They have put in the long hours and many, many months (sometimes years) to better themselves with marketable skills. I would highly recommend free online bootcamps like FreeCodeCamp and edX courses like Harvard’s CS50

\n

Coding Bootcamps are designed to impart to students techinical training and programming skills that are valuable to employers. They are high-paced, very intense, and can take anywhere from 6 weeks to 6 months to complete. Most require significant pre-bootcamp coursework - usually the fundamentals of HTML/CSS/JavaScript or other primary coding languages. Depending on the duration of the program, they will require anywhere between 20 and 30 hours of time outside of class for homework and projects, and the more time you put in on, the better return you will have on the investment. They are not cheap. Some will offer free tuition in exchange for a hefty chunk of your salary from your first full-time gig, others want cash upfront, with costs ranging between $10,000 and $20,000.

\n

Why I Chose to Take Out Loan for an In-Person Bootcamp Experience

\n

I chose to go into debt and pay to attend an in-person, intensive coding bootcamp. And, after going through the experience I still recommend it. Here are the reasons behind my decision:

\n

First, I am an academic at heart, who loves teaching in the classroom, and yet I also have years of intense experience teaching and administering online courses. I know from experience that classrooms and face-to-face instruction/interaction seemed ideal for learning new stuff, especially new stuff that was going to lead to a new career. (Trust me, I know how impersonal and sometimes how downright crappy online instruction can be - get a bad curriculum or bad instructor or bad grader or a bad school just looking to turn a buck, and good luck!).

\n

Second, I know myself. While I have no problem learning things independently, I also am a very eclectic and distracted learner. I can be reading Plato’s Phaedrus one day and watching Periodic Videos, Numberphile or SmarterEveryDay the next. I could see myself pouring into some online tutorials, and then getting sidetracked by Melville’s Moby Dick for a week or three. I needed a rigorous schedule with clear goals and guidelines.

\n

Third, I know from experience and study the value of a learning community. We need people to challenge us, to push us, to correct us, and to interact with us, as humans, in general. Personally, I need people around me on the same journey. Online community is great, and the coding community on Twitter, blogs, Gitter, Slack, whereever is great, but still not the same as people in person.

\n

Fourth, I desired some sort of organization that has connections with companies for job training and job placement. I didn’t know anyone who lived in my region who could help me get an in for a job. Most bootcamps have some sort of relationship with local and sometimes national and international businesses and they also have some sort of name recognition outside of those relationships. Moreover, I figured there would be previous graduates from the bootcamp who could be an advocate for an open position in my local area.

\n

So, then I had to choose, which bootcamp would I seek to attend?

\n

I knew nothing about recent technology or what to begin learning. My dev buddies mentioned things like Angular or React, which sounded eerily foreign to me at the time, even if they sounded like cool names for a night club. I always wanted to learn more MySQL, and I’d heard of Java, and JavaScript, though I didn’t know they weren’t even related languages to one another.

\n

Where to begin and which school was going to take me there?

\n

I found in my local area there were a few of bootcamps in Manhattan—The Flatiron School, General Assembly, Fullstack Academy, to name a few—but I found just one on the Jersey-side of the Hudson. They had started up a year earlier, graduating a few folks. I could check out their projects online. It was Rutgers Coding Bootcamp.

\n

Nothing against the programs I didn’t choose; plenty of folks jump into tech after completing those courses. I found that each of the programs all had similar curricula. I ended up choosing Rutgers, and I’m glad I did.

\n

If you live near a large city with major universities, odds are you will find a Trilogy Education Bootcamp. Honestly, I can’t more highly recommend them. Of course as an alumnus of a bootcamp, I can sound biased. But I’m not saying any bootcamp is perfect. None are, but in spite of the imperfections here is why I chose to go with them at Rutgers Coding Bootcamp. Maybe some of my reasons will resonate with you.

\n

Why I Chose a Bootcamp by Trilogy Education

\n

Financial Assistance: I really needed financial assistance to attend a bootcamp. I couldn&t afford to work for a discount after graduation, so the free-now/pay-later scheme was highly unattractive to me. Also, I had no assets to foot the bill on my own and I probably couldn’t qualify for an affordable personal loan. Most of the loans offered through other bootcamps were high interest (12–15%) and I wanted to take advantage of the fact that in the US, student loan interest can be tax deductible. Being connected to a major university, I could qualify for a student loan through Sallie Mae with a decent interest rate.

\n

Relevant Curriculum: I asked my buddies to look at Rutger’s Curriculum and they all gave it a stamp of approval. They were teaching the newest tech that was in the most demand at the time. Moreover, the bootcamp advertised they were in constant communication with employers and updating their curriculum to fit the needs of the market. Trilogy continues to tweak its curriculum to meet local market needs, from a brief perusal over various programs around the country, and they are adding tracks in other in-demand fields like data science and cybersecurity.

\n

Appropriate Pace: There are some bootcamps that require 40–60 hours per week of your time to complete, just in class! I found this undesirable for a couple of reasons. Firstly, there is only so much new content you can consume and internalize within a given period of time, especially if your goal is to master that material. At some point, the law of diminishing returns begins to apply. Secondly, I was already committed to 40+ hours of time between my teaching responsibilities and my ministry position. I could not give that much time, nor afford to stop working. What stood out about Rutgers is that they offered two timelines—a full-time twelve-week curriculum, or a twenty-four week flex curriculum. I preferred the longer curriculum to allow myself to dedicate between 20 and 30 hours outside of the ten hours of class time to learning and to also allow myself to continue to supplement my instruction with other training materials, books, and projects online.

\n

Name Recognition: I’m sure employers are familiar with the various bootcamps in Manhattan, but Rutgers University has global name recognition. It’s a major research university, renowned for its academic standards (if not for it’s athletics). I have no clue where my career will take me in twenty years, but twenty years from now, who knows what bootcamps will still be around. My resume will always have Rutgers University attached to it. Even if the Bootcamp is in the Continuing Education department, I still have a certificate issued and sealed by the University. I’m a Rutger’s Alum. On LinkedIn, I rarely come across a job opening at a company that hasn’t hired a Rutger’s graduate - instant connection.

\n

In Conclusion

\n

I hope posting some of my own personal rationale behind my choices can be helpful to you. You will certainly have different circumstances and different criteria to base your decisions upon. I respect that.

\n

The next time I post in this series I want to handle the next three questions, though I might split it up even more:

\n","id":"6e220122-4ed6-5aea-8f9a-ef9da266b59a","timeToRead":10,"frontmatter":{"date":"2019-04-10","path":"/blog/switching-careers-and-decisions-along-the-way.html","tags":["2ndCareerDev","development","bootcamp"],"title":"#2ndCareerDev - Switching Careers and Attending Bootcamp???","featuredAlt":"11 Women and 11 Men graduate from Rutgers Coding Bootcamp - May 6, 2017","redirect_from":null}},{"excerpt":"This site has needed an update for a long time. The last time I published a new professional portfolio was two years ago when I graduated from Rutger’s University Coding Bootcamp. I didn’t have even have a regular full-time developer position yet. I…","html":"

\n \n \nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n return null\n}\n\nfunction InfiniteScrollTemplate(props) {\n return (\n <Layout {...props}>\n <InfiniteScroll {...props}/>\n </Layout>\n )\n}\n\nexport default InfiniteScrollTemplate\n

We will focus on adding the core logic for infinite scroll to the InfiniteScroll functional component. We do not need to declare a React class because of the two aforementioned hooks—useState and useEffect

\n
Creating and Setting Internal State with useState
\n

React hooks allow us to write functional components that can “hook into” other React features. useState allows us to add state that is preserved between renders of a functional component. Unlike state within a React class, useState replaces the previous state rather than merging with previous state. Calling useState takes only one argument, whatever you conceive of as the initial state. The useState hook can be called multiple times, so rather than having a single state object, you can have multiple state-like variables. This is because the call to useState returns an array of two properties - the value of the current state and a function to call to update the value of that state.

\n
const [currentState, setState] = useState(/* some value or fn that returns a value */)
\n

For infinite scroll to work in this example, we need two state variables—a boolean indicating if there are more records to load and an array of the records already loaded. Seed the currentList with the first 10 records. Don’t worry if there is the possibility that the initial set is less than 10, Array.slice will return all records up to the length of the array if you provide an ending value greater than the last index of the array.

\n

Note: if we had a situation where you loaded data asynchronously from an API, we would also need someway to determine if data was in loading state

\n
const [ hasMore, setMore ] = useState(edges.length > 10)\nconst [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n// and if loading from an API asycrhonously\nconst [ isLoading, setLoading ] = useState(false)
\n
Creating Event Handlers to Read and Set State
\n

Reading and setting state will occur within an event listener on the scroll position of the page. If you use an external api and that api is still loading content, we will return immediately, and we will also exit if we know there are no more edges to load. Otherwise, we will check to see if the scroll position of the document plus the innerHeight of the window equals the offsetHeight of the document, and if so, we can load more edges. Basically, this checks to see if the page is scrolled all the way to the bottom.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n    loadEdges(true)\n  }\n}
\n

The loadEdges function will do the following, in order:

\n
    \n
  1. if using an asynchronously api call, will set the loading flag to true
    2. \n
  2. determine if any more edges remaining
    3. \n
  3. slice a new chunk of edges and append to the current list
    4. \n
  4. if using an asynchronously api call, will return the loading flag to false
    5. \n
\n

Since I’m loading from the Context API, I will ignore steps 1 & 2 above.

\n
const loadEdges = () => {\n  const currentLength = currentList.length\n  const more = currentLength < edges.length\n  const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n  setMore(more)\n  addToList([...currentList, ...nextEdges])\n}
\n

How would isLoading be used?

\n

Here is one overly simplistic example:

\n
const loadEdges = async () => {\n  setLoading(true);\n  try {\n      const newEdges = await fetch('https://path/to/some/api')\n      const more = newEdges.length > 0\n      setMore(more)\n      addBusinesses([...currentList, ...nextEdges])\n  } catch(err) {\n      console.error({fetchNewEdgesError: err})\n  }\n  setLoading(false)\n}
\n
Checking The Scroll Position on Each Render with useEffect
\n

The final step to initializing infinite scroll is the useEffect hook. The hook useEffect takes two arguments: a function, and an array. The first argument is the function that will be called every time after the component is rendered. This function is allowed to return another function which will be remembered and gets called as a cleanup function (I’m not sure I fully understand cleanups yet, but I think Dan Abramov does). The second argument is an array of dependencies that would prevent an effect from being called if the values of those dependencies are unchanged between renders. Infinite scroll will a function with a cleanup callback as well as the array full of dependencies to work.

\n
useEffect(\n  () => {\n    /* function that gets called every time */\n    return () => {\n      /* cleanup function to be called */\n    }\n  }, [/* dependencies */])
\n

useEffect is a great place to initialize event listeners on the window or document, as well as to remove those listeners during cleanup, such as listening for scroll events.

\n
  window.addEventListener('scroll', handleScroll)
\n

And thus, the cleanup function:

\n
  window.removeEventListener('scroll', handleScroll)
\n

This gives us an almost complete useEffect function call, we will simply add our state variables to the dependencies array so that effect is only set or cleaned up when the variables change:

\n
useEffect(\n  () => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, isLoading, currentList])
\n

With state, event handlers, effects initialized, we are free to return the jsx for the scrolling list. The following maps over the currentList array. It also adds labels displaying the current state of the list:

\n
return (\n  <> {/* shorthand for React.Fragment */}\n    <ul>\n      {\n        currentList.map(({node: { fields }}, idx) => {\n          return (\n            <li key={`fields-${idx}`} index={idx + 1}>\n              { \n                /* you will know the specifics here from how you load your data */\n                fields \n              }\n            </li>\n          )\n        })\n      }\n    </ul>\n    {\n      !hasMore &&\n        <div>All Businesses Loaded!</div>\n    }\n    {\n      hasMore &&\n        <div>Scroll Down to Load More...</div>\n    }\n    {\n      /* if using this flag, otherwise omit */\n      isLoading && \n        <div>Loading...</div>\n    }\n  </>\n)
\n

Putting It All Together

\n

Now we have a complete picture of the infinite scroll functional component. See below, but don’t leave yet, we still have to account for gatsby build and mobile events.

\n
import React, { useState, useEffect } from 'react'\nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n  const [ hasMore, setMore ] = useState(edges.length > 10)\n  const [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n  \n  const loadEdges = () => {\n    const currentLength = currentList.length\n    const more = currentLength < edges.length\n    const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n    setMore(more)\n    addToList([...currentList, ...nextEdges])\n  }\n\n  const handleScroll = () => {\n    if ( !hasMore || isLoading ) return;\n    if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n      loadEdges()\n    }\n  }\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, currentList])\n\n  return (\n    <> {/* shorthand for React.Fragment */}\n      <ul>\n        {\n          currentList.map(({node: { fields }}, idx) => {\n            return (\n              <li key={`fields-${idx}`} index={idx + 1}>\n                { \n                  /* you will know the specifics here from how you load your data */\n                  fields \n                }\n              </li>\n           )\n          })\n        }\n      </ul>\n      {\n        !hasMore &&\n          <div>All Businesses Loaded!</div>\n      }\n      {\n        hasMore &&\n          <div>Scroll Down to Load More...</div>\n      }\n      {\n    </>\n  )\n}\n\nfunction InfiniteScrollTemplate(props) {\n  return (\n    <Layout {...props}>\n      <InfiniteScroll {...props}/>\n    </Layout>\n  )\n}\n\nexport default InfiniteScrollTemplate
\n

This functional component will work just fine during development on a desktop browser. But you will lose the scroll effect during the build and on touch screens. It will fail during build because client globals like window and document are undefined during the build. It will fail on mobile because scroll is a mouse event. We need to add some conditions for our event listeners to handle both conditions.

\n

Optimizing for Production and Touch Screens

\n

In addition to adding an event listener on scroll, we also need event listeners for touchend and resize (to handle situations where someone resizes their browser), plus we need to add preventDefault to touch events to prevent duplicate events being fired in certain situations where devices have both a mouse and a touch screen. First, create a new event handler for handling touchend. This new handler will simply prevent the default actions on touchend and call the handler for the scroll event (which simply checks to see if we should load more documents). Second, update the useEffect function to add the additional event handlers.

\n
const handleTouchEnd = (e) => {  e.preventDefault();   handleScroll();}\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll)\n  window.addEventListener('resize', handleScroll)  window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window.removeEventListener('scroll', handleScroll)\n    window.removeEventListener('resize', handleScroll)    window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

Finally, we need to add a few simple boolean checks (window &&) to every instance of window or document so that the build process succeeds and so that infinite scroll still operates in the client. Plus, we need to change the scroll position check to be >= instead of the strict equality ===.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window && (     ( window.innerHeight + document.documentElement.scrollTop ) >= document.documentElement.offsetHeight )  ){    loadEdges()\n  }\n}\nuseEffect(() => {\n  window && window.addEventListener('scroll', handleScroll)  window && window.addEventListener('resize', handleScroll)  window && window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window && window.removeEventListener('scroll', handleScroll)    window && window.removeEventListener('resize', handleScroll)    window && window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

There you have it! You have a component that will implement infinite scroll in the browser, on touch screens, and in production within a Gatsby or React application.

\n

Check out the following page in your browser and on mobile to see this code in action.

\n

You can also see my specific implementation of the source code on github.

\n
\n

Update

\n

I had to adjust the touchend handler to account for and exclude touches on links. See my next blog post on this topic.

","id":"7fcb149e-c917-5351-99be-8c78d8765d8b","timeToRead":11,"frontmatter":{"date":"2019-05-20","path":"/blog/infinite-scroll-mobile-desktop-gatsby.html","tags":["gatsby","development","UX","react","hooks","infinite scroll"],"title":"Adding Infinite Scroll For Both Desktop and Mobile in Your Gatsby Project with React Hooks","featuredAlt":"List of items waiting to be updated on scroll","redirect_from":["/blog/inifinite-scroll-mobile-desktop-gatsby.html"]}}],"hooks":[{"excerpt":"I recently created my second production Gatsby application that gives a simple presentation of a local government open data dataset. I say production, though, much of the application is a proof-of-concept for a bigger application I have in the works…","html":"

\n \n \nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n return null\n}\n\nfunction InfiniteScrollTemplate(props) {\n return (\n <Layout {...props}>\n <InfiniteScroll {...props}/>\n </Layout>\n )\n}\n\nexport default InfiniteScrollTemplate\n

We will focus on adding the core logic for infinite scroll to the InfiniteScroll functional component. We do not need to declare a React class because of the two aforementioned hooks—useState and useEffect

\n
Creating and Setting Internal State with useState
\n

React hooks allow us to write functional components that can “hook into” other React features. useState allows us to add state that is preserved between renders of a functional component. Unlike state within a React class, useState replaces the previous state rather than merging with previous state. Calling useState takes only one argument, whatever you conceive of as the initial state. The useState hook can be called multiple times, so rather than having a single state object, you can have multiple state-like variables. This is because the call to useState returns an array of two properties - the value of the current state and a function to call to update the value of that state.

\n
const [currentState, setState] = useState(/* some value or fn that returns a value */)
\n

For infinite scroll to work in this example, we need two state variables—a boolean indicating if there are more records to load and an array of the records already loaded. Seed the currentList with the first 10 records. Don’t worry if there is the possibility that the initial set is less than 10, Array.slice will return all records up to the length of the array if you provide an ending value greater than the last index of the array.

\n

Note: if we had a situation where you loaded data asynchronously from an API, we would also need someway to determine if data was in loading state

\n
const [ hasMore, setMore ] = useState(edges.length > 10)\nconst [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n// and if loading from an API asycrhonously\nconst [ isLoading, setLoading ] = useState(false)
\n
Creating Event Handlers to Read and Set State
\n

Reading and setting state will occur within an event listener on the scroll position of the page. If you use an external api and that api is still loading content, we will return immediately, and we will also exit if we know there are no more edges to load. Otherwise, we will check to see if the scroll position of the document plus the innerHeight of the window equals the offsetHeight of the document, and if so, we can load more edges. Basically, this checks to see if the page is scrolled all the way to the bottom.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n    loadEdges(true)\n  }\n}
\n

The loadEdges function will do the following, in order:

\n
    \n
  1. if using an asynchronously api call, will set the loading flag to true
    2. \n
  2. determine if any more edges remaining
    3. \n
  3. slice a new chunk of edges and append to the current list
    4. \n
  4. if using an asynchronously api call, will return the loading flag to false
    5. \n
\n

Since I’m loading from the Context API, I will ignore steps 1 & 2 above.

\n
const loadEdges = () => {\n  const currentLength = currentList.length\n  const more = currentLength < edges.length\n  const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n  setMore(more)\n  addToList([...currentList, ...nextEdges])\n}
\n

How would isLoading be used?

\n

Here is one overly simplistic example:

\n
const loadEdges = async () => {\n  setLoading(true);\n  try {\n      const newEdges = await fetch('https://path/to/some/api')\n      const more = newEdges.length > 0\n      setMore(more)\n      addBusinesses([...currentList, ...nextEdges])\n  } catch(err) {\n      console.error({fetchNewEdgesError: err})\n  }\n  setLoading(false)\n}
\n
Checking The Scroll Position on Each Render with useEffect
\n

The final step to initializing infinite scroll is the useEffect hook. The hook useEffect takes two arguments: a function, and an array. The first argument is the function that will be called every time after the component is rendered. This function is allowed to return another function which will be remembered and gets called as a cleanup function (I’m not sure I fully understand cleanups yet, but I think Dan Abramov does). The second argument is an array of dependencies that would prevent an effect from being called if the values of those dependencies are unchanged between renders. Infinite scroll will a function with a cleanup callback as well as the array full of dependencies to work.

\n
useEffect(\n  () => {\n    /* function that gets called every time */\n    return () => {\n      /* cleanup function to be called */\n    }\n  }, [/* dependencies */])
\n

useEffect is a great place to initialize event listeners on the window or document, as well as to remove those listeners during cleanup, such as listening for scroll events.

\n
  window.addEventListener('scroll', handleScroll)
\n

And thus, the cleanup function:

\n
  window.removeEventListener('scroll', handleScroll)
\n

This gives us an almost complete useEffect function call, we will simply add our state variables to the dependencies array so that effect is only set or cleaned up when the variables change:

\n
useEffect(\n  () => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, isLoading, currentList])
\n

With state, event handlers, effects initialized, we are free to return the jsx for the scrolling list. The following maps over the currentList array. It also adds labels displaying the current state of the list:

\n
return (\n  <> {/* shorthand for React.Fragment */}\n    <ul>\n      {\n        currentList.map(({node: { fields }}, idx) => {\n          return (\n            <li key={`fields-${idx}`} index={idx + 1}>\n              { \n                /* you will know the specifics here from how you load your data */\n                fields \n              }\n            </li>\n          )\n        })\n      }\n    </ul>\n    {\n      !hasMore &&\n        <div>All Businesses Loaded!</div>\n    }\n    {\n      hasMore &&\n        <div>Scroll Down to Load More...</div>\n    }\n    {\n      /* if using this flag, otherwise omit */\n      isLoading && \n        <div>Loading...</div>\n    }\n  </>\n)
\n

Putting It All Together

\n

Now we have a complete picture of the infinite scroll functional component. See below, but don’t leave yet, we still have to account for gatsby build and mobile events.

\n
import React, { useState, useEffect } from 'react'\nimport Layout from '../components/Layout'\n\nfunction InfiniteScroll({ pageContext: { edges } }) {\n  const [ hasMore, setMore ] = useState(edges.length > 10)\n  const [ currentList, addToList ] = useState([...edges.slice(0, 10)])\n  \n  const loadEdges = () => {\n    const currentLength = currentList.length\n    const more = currentLength < edges.length\n    const nextEdges = more ? edges.slice(currentLength, currentLength + 20) : []\n    setMore(more)\n    addToList([...currentList, ...nextEdges])\n  }\n\n  const handleScroll = () => {\n    if ( !hasMore || isLoading ) return;\n    if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ){\n      loadEdges()\n    }\n  }\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleScroll)\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [hasMore, currentList])\n\n  return (\n    <> {/* shorthand for React.Fragment */}\n      <ul>\n        {\n          currentList.map(({node: { fields }}, idx) => {\n            return (\n              <li key={`fields-${idx}`} index={idx + 1}>\n                { \n                  /* you will know the specifics here from how you load your data */\n                  fields \n                }\n              </li>\n           )\n          })\n        }\n      </ul>\n      {\n        !hasMore &&\n          <div>All Businesses Loaded!</div>\n      }\n      {\n        hasMore &&\n          <div>Scroll Down to Load More...</div>\n      }\n      {\n    </>\n  )\n}\n\nfunction InfiniteScrollTemplate(props) {\n  return (\n    <Layout {...props}>\n      <InfiniteScroll {...props}/>\n    </Layout>\n  )\n}\n\nexport default InfiniteScrollTemplate
\n

This functional component will work just fine during development on a desktop browser. But you will lose the scroll effect during the build and on touch screens. It will fail during build because client globals like window and document are undefined during the build. It will fail on mobile because scroll is a mouse event. We need to add some conditions for our event listeners to handle both conditions.

\n

Optimizing for Production and Touch Screens

\n

In addition to adding an event listener on scroll, we also need event listeners for touchend and resize (to handle situations where someone resizes their browser), plus we need to add preventDefault to touch events to prevent duplicate events being fired in certain situations where devices have both a mouse and a touch screen. First, create a new event handler for handling touchend. This new handler will simply prevent the default actions on touchend and call the handler for the scroll event (which simply checks to see if we should load more documents). Second, update the useEffect function to add the additional event handlers.

\n
const handleTouchEnd = (e) => {  e.preventDefault();   handleScroll();}\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll)\n  window.addEventListener('resize', handleScroll)  window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window.removeEventListener('scroll', handleScroll)\n    window.removeEventListener('resize', handleScroll)    window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

Finally, we need to add a few simple boolean checks (window &&) to every instance of window or document so that the build process succeeds and so that infinite scroll still operates in the client. Plus, we need to change the scroll position check to be >= instead of the strict equality ===.

\n
const handleScroll = () => {\n  if ( !hasMore || isLoading ) return;\n  if ( window && (     ( window.innerHeight + document.documentElement.scrollTop ) >= document.documentElement.offsetHeight )  ){    loadEdges()\n  }\n}\nuseEffect(() => {\n  window && window.addEventListener('scroll', handleScroll)  window && window.addEventListener('resize', handleScroll)  window && window.addEventListener('touchend', handleTouchEnd)  return () => {\n    window && window.removeEventListener('scroll', handleScroll)    window && window.removeEventListener('resize', handleScroll)    window && window.removeEventListener('touchend', handleTouchEnd)  }\n}, [hasMore, currentList])
\n

There you have it! You have a component that will implement infinite scroll in the browser, on touch screens, and in production within a Gatsby or React application.

\n

Check out the following page in your browser and on mobile to see this code in action.

\n

You can also see my specific implementation of the source code on github.

\n
\n

Update

\n

I had to adjust the touchend handler to account for and exclude touches on links. See my next blog post on this topic.

","id":"7fcb149e-c917-5351-99be-8c78d8765d8b","timeToRead":11,"frontmatter":{"date":"2019-05-20","path":"/blog/infinite-scroll-mobile-desktop-gatsby.html","tags":["gatsby","development","UX","react","hooks","infinite scroll"],"title":"Adding Infinite Scroll For Both Desktop and Mobile in Your Gatsby Project with React Hooks","featuredAlt":"List of items waiting to be updated on scroll","redirect_from":["/blog/inifinite-scroll-mobile-desktop-gatsby.html"]}}],"seo":[{"excerpt":"I was drawn to Gatsby out of my love for React, and my desire to serve fast, performant, responsive applications. I started learning React just as the library started embracing ES6 classes, and just as was taking off. It was a challenge at first to…","html":"

\n \n \n \n \n

\n

I was drawn to Gatsby out of my love for React, and my desire to serve fast, performant, responsive applications. I started learning React just as the library started embracing ES6 classes, and just as create-react-app was taking off. It was a challenge at first to learn the simplicity of proxying to get the front end to run concurrently with a node / express API. And yet, to get from that point to server-side rendering took a little more research and effort. It has been fun learning with and from the larger coding community. I could continue to enumerate the other technical issues I have encountered and solved, and yet some others I still have to learn, but note something important so far regarding my journey—it has been a techinical-first-journey, focused on knowledge and skill of the various langauges and libraries, necessary yes, but perhaps not primary. The last thing on mind has been SEO, accessbility, and security.

\n

Setting An SEO-First Mindset

\n

I’ll leave accessibility and then security future posts, but what has impressed me thus far in my dive into the Gatbsy ecosystem has been the ease to configure search engine optimization. In fact, you can create an architecture for your site or app that is SEO driven long before developing your UI. I want to walk you through the things I have learned so far in optimizing a Gatsby site for SEO right from the start.

\n

Before We Begin

\n

You need to have some familiarity with Gatsby. To learn how to install the gatbsy-cli and create a new Gatsby project from one of the many Gatsby Starters, please consider completing the Gatsby tutorial.

\n

Otherwise, pick a starter from the SEO category, and open the SEO component or just use the gatsby-starter-default by running from the command line:

\n
  gatsby new seo-blog https://github.com/gatsbyjs/gatsby-starter-default
\n

The SEO component is dependent upon react-helmet, if your starter does not come with SEO initialized be sure to add it. We also want to add some other features like sitemap, google analytics, and RSS feed, for syndication. Finally, we need to create robots.txt to manage how search engines crawl the site. I’ve split up the commands below for spacing purposes, but they can all run as one yarn add command:

\n
  yarn add react-helmet gatsby-plugin-react-helmet \n  yarn add gatsby-plugin-feed gatsby-plugin-google-analytics gatsby-plugin-sitemap\n  yarn add gatsby-plugin-robots-txt
\n

With your starter and these plugins installed, we are ready to set up our site for SEO Performance.

\n

Setting up gatsby-config.js

\n

Within the root of your new Gatsby project sits the file Gatsby uses to configure siteMetaData and plugins and several other important features.

\n

This file, gatsby-config.js is going to do the heavy lifting of importing all your vital SEO related content into GraphQL or create necessary files directly (like robots.txt).

\n

Site Metadata

\n

Metadata is as it sounds, data that extends across or throughout the entirity of your site. It can be used anywhere, but will come most in handy when configuring your SEO component as well as Google Structured Data.

\n

Initialize your metadata as an Object literal with key/value pairs that can be converted into <meta> tags, or can be passed to sitemaps or footers, wherever you might need global site data:

\n
  <meta name=\"title\" content=\"My Super Awesome Site\"/>\n  <meta name=\"description\" content=\"My Super Awesome Site will blow your mind with radical content, extravagant colors, and hip designs.\"/>
\n

Here is where you need to plan what might use across your site:

\n\n

With siteMetadata set up, your can now query this data to be used within your plugin initialization, even within the same gatsby-config.js file. I’ve organized my siteMetadata so that I can make the following query:

\n
  query: `\n    site {\n      siteMetadata {\n        title\n        description\n        author\n        siteUrl\n        siteVerification {\n          google\n          bing\n        }\n        social {\n          twitter\n        }\n        socialLinks {\n          twitter\n          linkedin\n          facebook\n          stackOverflow\n          github\n          instagram\n          pinterest\n          youtube\n          email\n          phone\n          fax\n          address\n        }\n        keywords\n        organization {\n          name\n          url\n        }\n      }\n    }\n  `
\n

This query returns an object matching this query structure:

\n
  site: {\n    siteMetadata: {\n      title: String,\n      description: String,\n      author: String,\n      siteUrl: String,\n      siteVerification: {\n        google: String,\n        bing: String\n      },\n      social: {\n        twitter: String\n      },\n      socialLinks: {\n        twitter: String,\n        linkedin: String,\n        facebook: String,\n        stackOverflow: String,\n        github: String,\n        instagram: String,\n        pinterest: String,\n        youtube: String,\n        email: String,\n        phone: String,\n        fax: String,\n        address: String\n      },\n      keywords: [String],\n      organization: {\n        name: String,\n        url: String\n      }\n    }\n  }
\n

Plugin Setup

\n

We are going to focus on four plugins, each for the sitemap, RSS feed, robots.txt file, and Google Analytics (for tracking the SEO success of your site). We’ll initialize the plugins immediately following siteMetaData.

\n
  module.exports = {\n    siteMetadata: {\n      /** SEE ABOVE **/\n    },\n    plugins: [       /** An ARRAY **/    ],   }
\n
    \n
  1. gatsby-plugin-sitemap
    2. \n
\n

The sitemap plugin can be used simply or with options. Generally, you want to include anything and everything with high quality content, and exclude duplicate content, thin content, or pages behind authentication. Gatsby provides a detailed walkthrough for setting up your sitemap.

\n
  plugins: [\n      {\n        resolve: `gatsby-plugin-sitemap`,\n        options: {\n          exclude: [`/admin`, `/tags/links`]        }\n      }\n    },\n  ]
\n
    \n
  1. gatsby-plugin-feed
    2. \n
\n

An RSS feed helps with syndication of content on your site, like if you had a blog and wanted to cross-post to another better established blog, and it helps communicate changes to your site to search engines. This plugin allows you to create any number of different feeds utlizing the power of GraphQL to query your data. Some of what is below is dependent on how you structure your pages and posts in gatsby-node.js. The feed will walk through each of your pages in markdown generate an XML RSS Feed. Gatsby provides a detailed walkthrough for adding an RSS feed.

\n

Note particularly the use of queries below to complete the feed.

\n
  {\n    resolve: `gatsby-plugin-feed`,\n    options: {\n      // graphQL query to get siteMetadata      query: `        {          site {            siteMetadata {              title              description              siteUrl              site_url: siteUrl,              author            }          }        }      `,      feeds: [\n        // an array of feeds, I just have one below\n        {\n          serialize: ({ query: { site, allMarkdownRemark } }) => {\n            const { siteMetadata : { siteUrl } } = site;\n            return allMarkdownRemark.edges.map(edge => {\n              const { \n                node: { \n                  frontmatter: {\n                    title, \n                    date, \n                    path, \n                    author: { name, email }, \n                    featured: { publicURL }, \n                    featuredAlt\n                  },\n                  excerpt, \n                  html\n                } \n              } = edge;\n              return Object.assign({}, edge.node.frontmatter, {\n                language: `en-us`,\n                title,\n                description: excerpt,\n                date,\n                url: siteUrl + path,\n                guid: siteUrl + path,\n                author: `${email} ( ${name} )`,\n                image: {\n                  url: siteUrl + publicURL,\n                  title: featuredAlt,\n                  link: siteUrl + path,\n                },\n                custom_elements: [{ \"content:encoded\": html }],\n              })\n            })\n          },\n          // query to get blog post data          query: `          {            allMarkdownRemark(              sort: { order: DESC, fields: [frontmatter___date] },            ) {              edges {                node {                  excerpt                  html                  frontmatter {                    path                    date                    title                    featured {                      publicURL                    }                    featuredAlt                    author {                      name                      email                    }                  }                }              }            }          }          `,          output: \"/rss.xml\",\n          title: `My Awesome Site | RSS Feed`,\n        },\n      ],\n    },\n  },
\n
    \n
  1. gatsby-plugin-robots-txt
    2. \n
\n

With robots.txt files, you can instruct crawlers to ignore your site and/or individual paths, based on certain conditions. See the plugin description for more detailed use cases.

\n
  {\n    resolve: 'gatsby-plugin-robots-txt',\n    options: {\n      policy: [{ userAgent: '*', allow: '/' }]    }\n  },
\n
    \n
  1. gatsby-plugin-google-analytics
    2. \n
\n

Google analytics will help you track how users find and interact with your site, so you can manage and update your site over time for better SEO results. Verify your site with Google and store your analytics key here:

\n
  {\n    resolve: `gatsby-plugin-google-analytics`,\n    options: {\n      trackingId: ``,    },\n  },
\n

Optimizing the SEO Component

\n

The secret sauce behind the SEO Component is the well-known react-hemlet package. Every page and every template imports the SEO Component and thus you can pass specific information to adjust the metadata for each public facing page.

\n

Use your imagination—what can you pass to this component to create the perfect SEO enabled page? Is the page a landing page, a blog post, a media gallery, a video, a professional profile, a product? There are 614 types of schemas listed on https://schema.org. You can pass specific schema related information to the SEO component.

\n

If any of these values you pass to the component, a StaticQuery would fill in what’s missing with siteMetaData. From this data, react-helmet creates all the <meta> tags, including open graph and twitter card tags, and pass relevant data to another component that returns Google Structured Data.

\n

Rather than including a long code-snippet, refer back to the Before We Begin section, or refer to the gatsby-plugin-react-helment page for installation. But please note, the structure of my SEO Component follows that outlined by this excellent post by Dustin Schau.

\n

As I have tinkered with the SEO Component, here are the features I added:

\n
    \n
  1. Additional Fields Passed to Component to: distinguish between types of pages, such as blog posts, to handle authors of content other than main site author, and to handle changes in date modified for pages and posts. More could be added in the future.
    2. \n
\n
  function SEO({\n    description,\n    lang,\n    meta,\n    keywords,\n    image,\n    title,\n    // highlight start\n    pathname,\n    isBlogPost,\n    author,\n    datePublished = false,\n    dateModified = false\n    // highlight-end\n  }) {
\n
    \n
  1. Setting og:type conditionally
    2. \n
\n
  {\n    property: `og:type`,\n    content: isBlogPost ? `article` : `website`,  },
\n
    \n
  1. Always setting an alt property on the image object
    2. \n
\n
  // ALWAYS ADD IMAGE:ALT  {     property: \"og:image:alt\",     content: image.alt   },   {     property: \"twitter:image:alt\",     content: image.alt   },
\n
    \n
  1. Handling Secure Images
    2. \n
\n
  .concat(\n    // handle Secure Image    metaImage && metaImage.indexOf(\"https\") > -1      ? [          {            property: \"twitter:image:secure_url\",            content: metaImage,          },          { property: \"og:image:secure_url\", content: metaImage },        ]      : []  )
\n
    \n
  1. Adding a Component to handle Google Structured Data using schema.org categories. I came across an example of such a component from reading through various documentation and articles, I can’t recall where I saw the link first, but I borrowed and adapted from Jason Lengstorf. I made two small adaptations to his excellent work.
    2. \n
\n

Configuring the SchemaOrg Component

\n

You will import and call the SchemaOrg Component from within the SEO Component and place it just after the closing tag of the Helmet Component and pass the following properties:

\n
  function SEO(.....) {\n    ...\n    return (\n      <> {/* Fragment Shorthand */}\n        <Helmet \n          {/* All the Meta Tag Configuration */}\n        />\n        <SchemaOrg          isBlogPost={isBlogPost}          url={metaUrl}          title={title}          image={metaImage}          description={metaDescription}          datePublished={datePublished}          dateModified={dateModified}          canonicalUrl={siteUrl}          author={isBlogPost ? author : siteMetadata.author}          organization={organization}          defaultTitle={title}        />      </>\n    )\n  }
\n

I won’t copy and paste the entire SchemaOrg Component here. Grab it from the link above, and give Jason Lengstorf some credit in your code. Below are the few additions I made:

\n
    \n
  1. I added author email to the Schema. This will come from siteMetadata for most pages and from post frontmatter from blog posts. This will support multiple authors for your site and each page can reflect that uniquely if you so choose.
    2. \n
\n
  author: {\n    \"@type\": \"Person\",\n    name: author.name,\n    email: author.email,  },
\n
    \n
  1. I updated the organization logo from a simple URI to an ImageObject type. While the String URI is acceptable to the Organization type, Google has specific expectations and was throwing an error until I changed it to an ImageObject.
    2. \n
\n
  publisher: {\n    \"@type\": \"Organization\",\n    url: organization.url,\n    logo: {      \"@type\": \"ImageObject\",      url: organization.logo.url,      width: organization.logo.width,      height: organization.logo.height,    },    name: organization.name,\n  },
\n
    \n
  1. Add dataModified to reflect changes to the page after initial publication for the BlogPosting type.
    2. \n
\n
  datePublished,\n  dateModified,
\n

When you have more complexity within you site, you can pass flags to this Component to return differing types of schema as needed. But no matter what you do, do not put your site into production without first passing through the script generated by the component to the Google Structured Data Testing Tool.

\n

Concluding Thoughts

\n

When I configured my site according to the plan I outlined above, not only do I get image rich, descriptive Social Sharing cards, I get perfect SEO scores when running a Lighthouse Audit on my site:

\n

\n \n \n \n \n

\n

You also see that I scored 100% for Accessibility on my site. This is so easy to score with Gatsby as well, and I’ll talk about what I learned on this topic in the future.

\n

Cross-Posted: https://dev.to/wesleylhandy/putting-seo-first-with-gatsby-3n2g

","id":"fc7a6836-1cdc-519e-8c65-39beae2150c8","timeToRead":10,"frontmatter":{"date":"2019-04-20","path":"/blog/seo-accessibility-first-gatsby.html","tags":["gatsby","development","seo"],"title":"Putting SEO First with Gatsby","featuredAlt":"Gatsby loves to claim to produce the fastest sites around","redirect_from":null}}],"2ndCareerDev":[{"excerpt":"Changing careers is tough. For many people, it is also an absolute necessity. As valuable as a good college education is for one’s development intellectually, morally, and socially, graduation does not guarantee a life-long career. The more degrees…","html":"

\n \n \n \n \n

\n

Changing careers is tough.

\n

For many people, it is also an absolute necessity. As valuable as a good college education is for one’s development intellectually, morally, and socially, graduation does not guarantee a life-long career. The more degrees one obtains come higher-level and yet more narrow opportunities. Such opportunities fade into nothing if just can’t break-in your desired field.

\n

Over the past three years I have received several phone calls, emails, and direct messages asking me for advice, whether or not one of my friends or their loved ones should consider a career change like I did.

\n

There are a lot of very talented, highly educated people stuck in low-paying, dead-end jobs, or who just can’t break in to their dream field.

\n

I’m writing this post for them and for the many others out there like them. I want to answer some of the most commonly asked questions I have received. I want to be specific to my particular set of choices, recognizing that everybody’s situation is different. I also want to humbly admit that I’m writing from a Western, middle class perspective. Not everyone is afforded the types of opportunities from which I have derived great benefit. This may look different for someone in a developing country, and the sets of choices you have will lean away from formal programs that cost a lot of money. If this is you reading this post, I sympathize with you and want to be an encouragement to you in any way I can. Hit me up on twitter and ask me any questions you got.

\n

This is the first post in a series on my decision to switch careers, attend a bootcamp, and land my first dev job. This post will cover the first two questions in the list below:

\n

Questions I’ll Answer to Aid Your Decision Making Process Through This Series

\n\n

Why You Could Consider a Career Change into Web Development

\n

Web development is one field where you can break-in without a college degree majoring in some technological discipline. The need for developers, data scientists, cybersecurity specialists and many other types of programmers and developers is on the rise. Don’t miss something from that sentence. There are a wide variety of growing fields in the tech job market, of which web development is one.

\n

The job market is competitive, it takes a lot of effort, a lot of networking and building relationships and a little bit of luck to break into tech full-time, but it is possible because the resources to attain the skills necessary to do the job are readily available for free, with minimal cost, or sometimes with more than minimal cost. Nevertheless, switching careers is such a difficult task to undertake, you must be desparate for the change. You have to be willing to go all-in with time, money, effort, and focus.

\n

Why I Had to Switch Careers

\n

The year was 2016; I found myself and my family in a desperate situation. We had moved to New Jersey/Metro New York as part of a Christian ministry, and we have moved without having a full-time job in place. At the time, having an earned PhD from an accredited instituion, I was teaching online for a couple of also-accredited schools. I was able to add to that a part-time gig teaching formal and informal logic, bible and theology at a private school. Honestly, I thought we could make it while I sought either regular Professorship or simply transitioning from my previous full-time job in academic administration to a new institution in the New York area. The NY/NJ MSA is home to hundreds of institutions of higher learning, certainly I could get one to hire me. Fast forward three years, a few hundred applications, a dozen or so interviews, being passed over as a finalist half of those times, and zippo offers.

\n

I was loving life serving a loving group of people as one of their pastors, but my family was just scraping by. The more time that passed, the more useless my resume became, as I had to explain my increasingly longer employment gap. We were on the brink of bankruptcy, and I needed marketable skills where I would be in demand.

\n

Before plunging headlong into the humanities, I completed and enjoyed several years of computer science courses between high school and my first year of college, albeit twenty years prior and with languages like Basic, Pascal and Fortran. Still, even as I pursued philosophy and theology over coding and programming, I never lost my love for tech, becoming the de facto software trainer whatever job I found, culminating in my last academic job, which I loved, in Institutional Research, where I got to play around with SQL queries and advanced Excel spreadsheet programming. It only made sense that I pursue something like web development. Moreover, I was living just a few miles from Silicon Alley - NY has a bustling tech scene and I wanted in, I needed in.

\n

I didn’t fully realize at the time all of what it was going to take to break in, but I was in desparate need and I knew that I could do it and would like doing it.

\n

Why You Should Consider Attending a Web Development Bootcamp

\n

As a preface, let me once again express that I sympathize with those in economic situations where this is not a real possibility. Let me encourage you to look to all those who have worked hard to become quality self-taught programmers. They have put in the long hours and many, many months (sometimes years) to better themselves with marketable skills. I would highly recommend free online bootcamps like FreeCodeCamp and edX courses like Harvard’s CS50

\n

Coding Bootcamps are designed to impart to students techinical training and programming skills that are valuable to employers. They are high-paced, very intense, and can take anywhere from 6 weeks to 6 months to complete. Most require significant pre-bootcamp coursework - usually the fundamentals of HTML/CSS/JavaScript or other primary coding languages. Depending on the duration of the program, they will require anywhere between 20 and 30 hours of time outside of class for homework and projects, and the more time you put in on, the better return you will have on the investment. They are not cheap. Some will offer free tuition in exchange for a hefty chunk of your salary from your first full-time gig, others want cash upfront, with costs ranging between $10,000 and $20,000.

\n

Why I Chose to Take Out Loan for an In-Person Bootcamp Experience

\n

I chose to go into debt and pay to attend an in-person, intensive coding bootcamp. And, after going through the experience I still recommend it. Here are the reasons behind my decision:

\n

First, I am an academic at heart, who loves teaching in the classroom, and yet I also have years of intense experience teaching and administering online courses. I know from experience that classrooms and face-to-face instruction/interaction seemed ideal for learning new stuff, especially new stuff that was going to lead to a new career. (Trust me, I know how impersonal and sometimes how downright crappy online instruction can be - get a bad curriculum or bad instructor or bad grader or a bad school just looking to turn a buck, and good luck!).

\n

Second, I know myself. While I have no problem learning things independently, I also am a very eclectic and distracted learner. I can be reading Plato’s Phaedrus one day and watching Periodic Videos, Numberphile or SmarterEveryDay the next. I could see myself pouring into some online tutorials, and then getting sidetracked by Melville’s Moby Dick for a week or three. I needed a rigorous schedule with clear goals and guidelines.

\n

Third, I know from experience and study the value of a learning community. We need people to challenge us, to push us, to correct us, and to interact with us, as humans, in general. Personally, I need people around me on the same journey. Online community is great, and the coding community on Twitter, blogs, Gitter, Slack, whereever is great, but still not the same as people in person.

\n

Fourth, I desired some sort of organization that has connections with companies for job training and job placement. I didn’t know anyone who lived in my region who could help me get an in for a job. Most bootcamps have some sort of relationship with local and sometimes national and international businesses and they also have some sort of name recognition outside of those relationships. Moreover, I figured there would be previous graduates from the bootcamp who could be an advocate for an open position in my local area.

\n

So, then I had to choose, which bootcamp would I seek to attend?

\n

I knew nothing about recent technology or what to begin learning. My dev buddies mentioned things like Angular or React, which sounded eerily foreign to me at the time, even if they sounded like cool names for a night club. I always wanted to learn more MySQL, and I’d heard of Java, and JavaScript, though I didn’t know they weren’t even related languages to one another.

\n

Where to begin and which school was going to take me there?

\n

I found in my local area there were a few of bootcamps in Manhattan—The Flatiron School, General Assembly, Fullstack Academy, to name a few—but I found just one on the Jersey-side of the Hudson. They had started up a year earlier, graduating a few folks. I could check out their projects online. It was Rutgers Coding Bootcamp.

\n

Nothing against the programs I didn’t choose; plenty of folks jump into tech after completing those courses. I found that each of the programs all had similar curricula. I ended up choosing Rutgers, and I’m glad I did.

\n

If you live near a large city with major universities, odds are you will find a Trilogy Education Bootcamp. Honestly, I can’t more highly recommend them. Of course as an alumnus of a bootcamp, I can sound biased. But I’m not saying any bootcamp is perfect. None are, but in spite of the imperfections here is why I chose to go with them at Rutgers Coding Bootcamp. Maybe some of my reasons will resonate with you.

\n

Why I Chose a Bootcamp by Trilogy Education

\n

Financial Assistance: I really needed financial assistance to attend a bootcamp. I couldn&t afford to work for a discount after graduation, so the free-now/pay-later scheme was highly unattractive to me. Also, I had no assets to foot the bill on my own and I probably couldn’t qualify for an affordable personal loan. Most of the loans offered through other bootcamps were high interest (12–15%) and I wanted to take advantage of the fact that in the US, student loan interest can be tax deductible. Being connected to a major university, I could qualify for a student loan through Sallie Mae with a decent interest rate.

\n

Relevant Curriculum: I asked my buddies to look at Rutger’s Curriculum and they all gave it a stamp of approval. They were teaching the newest tech that was in the most demand at the time. Moreover, the bootcamp advertised they were in constant communication with employers and updating their curriculum to fit the needs of the market. Trilogy continues to tweak its curriculum to meet local market needs, from a brief perusal over various programs around the country, and they are adding tracks in other in-demand fields like data science and cybersecurity.

\n

Appropriate Pace: There are some bootcamps that require 40–60 hours per week of your time to complete, just in class! I found this undesirable for a couple of reasons. Firstly, there is only so much new content you can consume and internalize within a given period of time, especially if your goal is to master that material. At some point, the law of diminishing returns begins to apply. Secondly, I was already committed to 40+ hours of time between my teaching responsibilities and my ministry position. I could not give that much time, nor afford to stop working. What stood out about Rutgers is that they offered two timelines—a full-time twelve-week curriculum, or a twenty-four week flex curriculum. I preferred the longer curriculum to allow myself to dedicate between 20 and 30 hours outside of the ten hours of class time to learning and to also allow myself to continue to supplement my instruction with other training materials, books, and projects online.

\n

Name Recognition: I’m sure employers are familiar with the various bootcamps in Manhattan, but Rutgers University has global name recognition. It’s a major research university, renowned for its academic standards (if not for it’s athletics). I have no clue where my career will take me in twenty years, but twenty years from now, who knows what bootcamps will still be around. My resume will always have Rutgers University attached to it. Even if the Bootcamp is in the Continuing Education department, I still have a certificate issued and sealed by the University. I’m a Rutger’s Alum. On LinkedIn, I rarely come across a job opening at a company that hasn’t hired a Rutger’s graduate - instant connection.

\n

In Conclusion

\n

I hope posting some of my own personal rationale behind my choices can be helpful to you. You will certainly have different circumstances and different criteria to base your decisions upon. I respect that.

\n

The next time I post in this series I want to handle the next three questions, though I might split it up even more:

\n","id":"6e220122-4ed6-5aea-8f9a-ef9da266b59a","timeToRead":10,"frontmatter":{"date":"2019-04-10","path":"/blog/switching-careers-and-decisions-along-the-way.html","tags":["2ndCareerDev","development","bootcamp"],"title":"#2ndCareerDev - Switching Careers and Attending Bootcamp???","featuredAlt":"11 Women and 11 Men graduate from Rutgers Coding Bootcamp - May 6, 2017","redirect_from":null}}],"bootcamp":[{"excerpt":"Changing careers is tough. For many people, it is also an absolute necessity. As valuable as a good college education is for one’s development intellectually, morally, and socially, graduation does not guarantee a life-long career. The more degrees…","html":"

\n \n \n \n \n

\n

Changing careers is tough.

\n

For many people, it is also an absolute necessity. As valuable as a good college education is for one’s development intellectually, morally, and socially, graduation does not guarantee a life-long career. The more degrees one obtains come higher-level and yet more narrow opportunities. Such opportunities fade into nothing if just can’t break-in your desired field.

\n

Over the past three years I have received several phone calls, emails, and direct messages asking me for advice, whether or not one of my friends or their loved ones should consider a career change like I did.

\n

There are a lot of very talented, highly educated people stuck in low-paying, dead-end jobs, or who just can’t break in to their dream field.

\n

I’m writing this post for them and for the many others out there like them. I want to answer some of the most commonly asked questions I have received. I want to be specific to my particular set of choices, recognizing that everybody’s situation is different. I also want to humbly admit that I’m writing from a Western, middle class perspective. Not everyone is afforded the types of opportunities from which I have derived great benefit. This may look different for someone in a developing country, and the sets of choices you have will lean away from formal programs that cost a lot of money. If this is you reading this post, I sympathize with you and want to be an encouragement to you in any way I can. Hit me up on twitter and ask me any questions you got.

\n

This is the first post in a series on my decision to switch careers, attend a bootcamp, and land my first dev job. This post will cover the first two questions in the list below:

\n

Questions I’ll Answer to Aid Your Decision Making Process Through This Series

\n\n

Why You Could Consider a Career Change into Web Development

\n

Web development is one field where you can break-in without a college degree majoring in some technological discipline. The need for developers, data scientists, cybersecurity specialists and many other types of programmers and developers is on the rise. Don’t miss something from that sentence. There are a wide variety of growing fields in the tech job market, of which web development is one.

\n

The job market is competitive, it takes a lot of effort, a lot of networking and building relationships and a little bit of luck to break into tech full-time, but it is possible because the resources to attain the skills necessary to do the job are readily available for free, with minimal cost, or sometimes with more than minimal cost. Nevertheless, switching careers is such a difficult task to undertake, you must be desparate for the change. You have to be willing to go all-in with time, money, effort, and focus.

\n

Why I Had to Switch Careers

\n

The year was 2016; I found myself and my family in a desperate situation. We had moved to New Jersey/Metro New York as part of a Christian ministry, and we have moved without having a full-time job in place. At the time, having an earned PhD from an accredited instituion, I was teaching online for a couple of also-accredited schools. I was able to add to that a part-time gig teaching formal and informal logic, bible and theology at a private school. Honestly, I thought we could make it while I sought either regular Professorship or simply transitioning from my previous full-time job in academic administration to a new institution in the New York area. The NY/NJ MSA is home to hundreds of institutions of higher learning, certainly I could get one to hire me. Fast forward three years, a few hundred applications, a dozen or so interviews, being passed over as a finalist half of those times, and zippo offers.

\n

I was loving life serving a loving group of people as one of their pastors, but my family was just scraping by. The more time that passed, the more useless my resume became, as I had to explain my increasingly longer employment gap. We were on the brink of bankruptcy, and I needed marketable skills where I would be in demand.

\n

Before plunging headlong into the humanities, I completed and enjoyed several years of computer science courses between high school and my first year of college, albeit twenty years prior and with languages like Basic, Pascal and Fortran. Still, even as I pursued philosophy and theology over coding and programming, I never lost my love for tech, becoming the de facto software trainer whatever job I found, culminating in my last academic job, which I loved, in Institutional Research, where I got to play around with SQL queries and advanced Excel spreadsheet programming. It only made sense that I pursue something like web development. Moreover, I was living just a few miles from Silicon Alley - NY has a bustling tech scene and I wanted in, I needed in.

\n

I didn’t fully realize at the time all of what it was going to take to break in, but I was in desparate need and I knew that I could do it and would like doing it.

\n

Why You Should Consider Attending a Web Development Bootcamp

\n

As a preface, let me once again express that I sympathize with those in economic situations where this is not a real possibility. Let me encourage you to look to all those who have worked hard to become quality self-taught programmers. They have put in the long hours and many, many months (sometimes years) to better themselves with marketable skills. I would highly recommend free online bootcamps like FreeCodeCamp and edX courses like Harvard’s CS50

\n

Coding Bootcamps are designed to impart to students techinical training and programming skills that are valuable to employers. They are high-paced, very intense, and can take anywhere from 6 weeks to 6 months to complete. Most require significant pre-bootcamp coursework - usually the fundamentals of HTML/CSS/JavaScript or other primary coding languages. Depending on the duration of the program, they will require anywhere between 20 and 30 hours of time outside of class for homework and projects, and the more time you put in on, the better return you will have on the investment. They are not cheap. Some will offer free tuition in exchange for a hefty chunk of your salary from your first full-time gig, others want cash upfront, with costs ranging between $10,000 and $20,000.

\n

Why I Chose to Take Out Loan for an In-Person Bootcamp Experience

\n

I chose to go into debt and pay to attend an in-person, intensive coding bootcamp. And, after going through the experience I still recommend it. Here are the reasons behind my decision:

\n

First, I am an academic at heart, who loves teaching in the classroom, and yet I also have years of intense experience teaching and administering online courses. I know from experience that classrooms and face-to-face instruction/interaction seemed ideal for learning new stuff, especially new stuff that was going to lead to a new career. (Trust me, I know how impersonal and sometimes how downright crappy online instruction can be - get a bad curriculum or bad instructor or bad grader or a bad school just looking to turn a buck, and good luck!).

\n

Second, I know myself. While I have no problem learning things independently, I also am a very eclectic and distracted learner. I can be reading Plato’s Phaedrus one day and watching Periodic Videos, Numberphile or SmarterEveryDay the next. I could see myself pouring into some online tutorials, and then getting sidetracked by Melville’s Moby Dick for a week or three. I needed a rigorous schedule with clear goals and guidelines.

\n

Third, I know from experience and study the value of a learning community. We need people to challenge us, to push us, to correct us, and to interact with us, as humans, in general. Personally, I need people around me on the same journey. Online community is great, and the coding community on Twitter, blogs, Gitter, Slack, whereever is great, but still not the same as people in person.

\n

Fourth, I desired some sort of organization that has connections with companies for job training and job placement. I didn’t know anyone who lived in my region who could help me get an in for a job. Most bootcamps have some sort of relationship with local and sometimes national and international businesses and they also have some sort of name recognition outside of those relationships. Moreover, I figured there would be previous graduates from the bootcamp who could be an advocate for an open position in my local area.

\n

So, then I had to choose, which bootcamp would I seek to attend?

\n

I knew nothing about recent technology or what to begin learning. My dev buddies mentioned things like Angular or React, which sounded eerily foreign to me at the time, even if they sounded like cool names for a night club. I always wanted to learn more MySQL, and I’d heard of Java, and JavaScript, though I didn’t know they weren’t even related languages to one another.

\n

Where to begin and which school was going to take me there?

\n

I found in my local area there were a few of bootcamps in Manhattan—The Flatiron School, General Assembly, Fullstack Academy, to name a few—but I found just one on the Jersey-side of the Hudson. They had started up a year earlier, graduating a few folks. I could check out their projects online. It was Rutgers Coding Bootcamp.

\n

Nothing against the programs I didn’t choose; plenty of folks jump into tech after completing those courses. I found that each of the programs all had similar curricula. I ended up choosing Rutgers, and I’m glad I did.

\n

If you live near a large city with major universities, odds are you will find a Trilogy Education Bootcamp. Honestly, I can’t more highly recommend them. Of course as an alumnus of a bootcamp, I can sound biased. But I’m not saying any bootcamp is perfect. None are, but in spite of the imperfections here is why I chose to go with them at Rutgers Coding Bootcamp. Maybe some of my reasons will resonate with you.

\n

Why I Chose a Bootcamp by Trilogy Education

\n

Financial Assistance: I really needed financial assistance to attend a bootcamp. I couldn&t afford to work for a discount after graduation, so the free-now/pay-later scheme was highly unattractive to me. Also, I had no assets to foot the bill on my own and I probably couldn’t qualify for an affordable personal loan. Most of the loans offered through other bootcamps were high interest (12–15%) and I wanted to take advantage of the fact that in the US, student loan interest can be tax deductible. Being connected to a major university, I could qualify for a student loan through Sallie Mae with a decent interest rate.

\n

Relevant Curriculum: I asked my buddies to look at Rutger’s Curriculum and they all gave it a stamp of approval. They were teaching the newest tech that was in the most demand at the time. Moreover, the bootcamp advertised they were in constant communication with employers and updating their curriculum to fit the needs of the market. Trilogy continues to tweak its curriculum to meet local market needs, from a brief perusal over various programs around the country, and they are adding tracks in other in-demand fields like data science and cybersecurity.

\n

Appropriate Pace: There are some bootcamps that require 40–60 hours per week of your time to complete, just in class! I found this undesirable for a couple of reasons. Firstly, there is only so much new content you can consume and internalize within a given period of time, especially if your goal is to master that material. At some point, the law of diminishing returns begins to apply. Secondly, I was already committed to 40+ hours of time between my teaching responsibilities and my ministry position. I could not give that much time, nor afford to stop working. What stood out about Rutgers is that they offered two timelines—a full-time twelve-week curriculum, or a twenty-four week flex curriculum. I preferred the longer curriculum to allow myself to dedicate between 20 and 30 hours outside of the ten hours of class time to learning and to also allow myself to continue to supplement my instruction with other training materials, books, and projects online.

\n

Name Recognition: I’m sure employers are familiar with the various bootcamps in Manhattan, but Rutgers University has global name recognition. It’s a major research university, renowned for its academic standards (if not for it’s athletics). I have no clue where my career will take me in twenty years, but twenty years from now, who knows what bootcamps will still be around. My resume will always have Rutgers University attached to it. Even if the Bootcamp is in the Continuing Education department, I still have a certificate issued and sealed by the University. I’m a Rutger’s Alum. On LinkedIn, I rarely come across a job opening at a company that hasn’t hired a Rutger’s graduate - instant connection.

\n

In Conclusion

\n

I hope posting some of my own personal rationale behind my choices can be helpful to you. You will certainly have different circumstances and different criteria to base your decisions upon. I respect that.

\n

The next time I post in this series I want to handle the next three questions, though I might split it up even more:

\n","id":"6e220122-4ed6-5aea-8f9a-ef9da266b59a","timeToRead":10,"frontmatter":{"date":"2019-04-10","path":"/blog/switching-careers-and-decisions-along-the-way.html","tags":["2ndCareerDev","development","bootcamp"],"title":"#2ndCareerDev - Switching Careers and Attending Bootcamp???","featuredAlt":"11 Women and 11 Men graduate from Rutgers Coding Bootcamp - May 6, 2017","redirect_from":null}}],"intro":[{"excerpt":"This site has needed an update for a long time. The last time I published a new professional portfolio was two years ago when I graduated from Rutger’s University Coding Bootcamp. I didn’t have even have a regular full-time developer position yet. I…","html":"

\n \n