October 2017 Summaries

Tal Bereznitskey, CTO at a stealth mode startup called Torii, shares his journey in searching for the ideal universal JavaScript framework. While the text doesn't specify the conclusion of his search or the framework he ultimately chose, it suggests an exploration of various options, such as React and SSR (Server-Side Rendering). The article encourages readers to engage with Gatsby experts to enhance their website performance, indicating the potential benefits of consulting professionals in the field for optimal web development solutions.

Benjamin Read, a frontend designer, discusses his journey from developing websites primarily with WordPress to embracing React and Gatsby.js, driven by the need to meet evolving client demands and prepare for the Gutenberg editor's integration into WordPress. Initially a specialist in HTML and CSS with limited JavaScript use, Read describes his transition to React as a way to streamline his workflow, manage everything in one place, and reduce the complexity traditionally associated with WordPress templating. He highlights the advantages of using Gatsby.js, such as its integration with GraphQL for efficient data querying and the simplification of CSS management through JavaScript. Despite initial challenges, including adapting to JSX and CSS-in-JS techniques, Read has come to appreciate the efficiency and enhanced security offered by Gatsby’s "Bring Your Own Data" strategy, particularly when combined with WordPress as a backend. The shift has not only improved loading times and security for client websites but has also allowed Read and his team to anticipate future web development trends with greater clarity.

Implementing internationalization (i18n) in a Gatsby site is a straightforward process that enhances user experience by serving content in multiple languages, allowing for cultural nuances that automated translation tools like Google Translate cannot capture. The process involves replacing hard-coded strings with variables that switch language based on user preference, using language codes and locales to manage different versions of a language, such as American and British English. Collaborating with professional translators, such as Applingua, ensures accuracy and consistency in translations, while react-i18next is a preferred package due to its documentation and compatibility with existing systems. Setting up i18n involves creating a folder structure for translation strings, configuring the Gatsby setup to handle these translations, and using higher-order components (HOCs) to manage language switching in components. The guide also offers tips on using translation strings for page titles with React Helmet and creating components for seamless language switching, ultimately demonstrating that with the right setup, serving international users on a Gatsby site is efficient and manageable.

Kyle Mathews reflects on the challenges and joys of building websites, emphasizing the importance of simplicity and effective building blocks in technology. He recounts his experience with React, specifically how it simplified the development of complex web components like react-headroom compared to traditional HTML/JS/CSS approaches. Mathews highlights the role of Gatsby, a framework he founded, in further simplifying web development by integrating data processing and modern React components, such as gatsby-image, to streamline tasks like image optimization and lazy loading. He argues that by reducing complexity and leveraging advanced tools, building fast and efficient websites becomes more enjoyable and accessible, inviting others to explore and contribute to this evolving ecosystem.

David James shares his experience of rebuilding his portfolio website using GatsbyJS, highlighting the benefits of using this React-based static site generator over traditional WordPress themes. Inspired by Scott Tolinski's video, James chose GatsbyJS for its ability to create fast, modern sites with blogging capabilities and the flexibility to integrate with APIs or CMSs like WordPress. He describes how easy it was to use Gatsby's GraphQL features to query data, simplifying the process of pulling content from WordPress and enhancing his skills in React and JavaScript. James emphasizes Gatsby's impressive out-of-the-box performance, achieving high scores on Google's Lighthouse tool, and expresses his intention to continue using it for client projects due to its efficiency and the growing demand for performant websites and Progressive Web Apps.

At smartive, a Swiss-based web agency, the transition from Wintersmith and Next.js to Gatsby for their company website marked a significant improvement in performance and maintainability. Initially using a custom PHP application, the company switched to Wintersmith, a Node.js-based static site generator, which later presented limitations like lack of code splitting and difficult build process optimizations. Seeking a React-based solution, they briefly experimented with Next.js but found Gatsby's simplicity and GraphQL-based content integration more appealing. This transition was facilitated by their existing knowledge of React, and they successfully adapted their components for Gatsby, using JSON files and the gatsby-transformer-json plugin. Despite challenges like the absence of a plugin to feature their Medium blog posts, they developed a custom plugin and automated the site's rebuild and deployment using IFTTT and GitLab CI. The switch to Gatsby resulted in superior Google PageSpeed scores due to its efficient code splitting and cache handling, and their code is available on GitHub for those interested in exploring their setup.

Ian Sinnott's article details the process of migrating a blog from Hexo to Gatsby, emphasizing Gatsby's flexibility and power in static site generation. The migration involves several steps, including preparing the existing blog for migration, configuring Gatsby to handle markdown, querying markdown files using GraphQL, and generating static pages. Sinnott explains the necessity of cleaning up the source repository, setting up Gatsby's file structure, and customizing the layout and data queries using GraphQL. He highlights the use of plugins for handling markdown and adds custom data to the GraphQL schema to generate URLs for blog posts. The article underscores Gatsby's extensibility and its capability to handle arbitrary data sources, though it acknowledges some areas, like the global GraphQL object, that could benefit from improvement. Despite these minor drawbacks, Sinnott advocates for Gatsby as a superior static site generator due to its powerful plugin API and automatic code splitting features.