January 2022 Summaries

SAP Community, a platform for SAP developers and customers to engage collaboratively, has significantly improved its operations by migrating to Gatsby and Contentstack, enhancing page speed, content velocity, and user satisfaction. This transition allowed for more frequent content updates, as evidenced by 160 pushes into production in a single week, and improved SEO rankings due to enhanced page performance. The integration of modern tools like Figma and Storybook has facilitated component design and development, while a larger tech stack, including WordPress and Kafka, supports various functionalities like moderation and search. The migration resulted in a noticeable increase in community satisfaction and feature velocity, enabling more complex user scenarios and expanding content offerings, such as multi-language support and live content aggregation. Ultimately, the new setup has been well-received across the board, with content editors, the business, and development teams all expressing satisfaction with the improved workflows and capabilities.

Gatsby Cloud's CMS Preview is designed to enhance the content editing experience for websites using a headless CMS, offering features that streamline the process for content editors by enabling a preview workflow similar to WordPress. It acts as an automatic staging environment, allowing editors to review draft content efficiently, which is crucial for websites with less-experienced CMS users, high content volumes, or frequently updated high-traffic pages. The platform integrates features like Quick Connect, In-CMS Preview Widgets, and the Preview Status Indicator to facilitate seamless content updates and improve feedback loops. Gatsby Cloud also provides faster preview speeds compared to other platforms, making it a preferred choice for many content editors, as evidenced by its widespread use among Gatsby Cloud customers.

Lighthouse, an open-source tool developed by Google, is instrumental in evaluating website performance through metrics like Core Web Vitals, which influence search rankings. The tool assesses websites based on various criteria, including accessibility and SEO best practices, and can be run via Google PageSpeed Insights, Chrome DevTools, or command line. Key metrics include Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), which measure loading performance, interactivity, and visual stability, respectively. To enhance Lighthouse scores, website optimization strategies include image optimization, reducing page bloat, following progressive web app standards, using lazy loading, minimizing custom fonts, and removing unnecessary features. For Gatsby-powered websites, specific techniques such as using the Gatsby Image Plugin, trimming bloated bundles, delaying script loads, and possibly using Preact instead of React are recommended for improving performance. The document underscores the importance of quality content for search rankings and offers additional resources for further exploration of website optimization.

Gatsby Design Labs, launched in 2021 by Gatsby's design team, serves as a creative space to explore and test ideas about their users and the broader context in which Gatsby operates. A central component of Design Labs is a user research program that involves a core group of Gatsby users who engage in testing upcoming designs. The initiative has already influenced Gatsby's research and design processes, prompting the team to share their progress and findings through a publication on Medium. This platform allows them to document their practice, provide insights for potential candidates, and highlight the integral role of design in Gatsby's success. Monthly updates are planned, with initial posts detailing the challenges and successes of building a research practice tailored to Gatsby's specific needs.

Jordan Quinn explores how practicing Brazilian Jiu-Jitsu has positively influenced his career as a software engineer, fostering personal growth and enhancing his professional skills. Initially competitive for the wrong reasons, Quinn's experiences on the mat taught him humility and the importance of learning, leading to a shift in mindset that improved his approach to work and life. He highlights the Dunning-Kruger effect, which he encountered in both Jiu-Jitsu and software development, emphasizing the reciprocal relationship between growing competence and confidence. Quinn describes how Jiu-Jitsu helped him become a more compassionate mentor and teammate by teaching resilience and the value of setting the ego aside. The practice created a positive momentum in his personal and professional life, encouraging him to pursue passions that blend with his career, resulting in a more fulfilled and capable self. He encourages others to find their own practices that might complement their work, suggesting that the interplay between personal interests and professional endeavors can lead to surprising and enriching outcomes.

WaveDirect, a Canadian internet service provider, significantly improved its digital communication and marketing strategies with the help of Toronto-based digital agency Touchless, using Gatsby, Rudderstack, and Sanity. Faced with data quality issues and a need for a privacy-centric approach due to regulatory requirements, WaveDirect focused on three key areas: designing a data interface with Rudderstack, optimizing website performance through a redesign on Gatsby, and driving SEO with content campaigns using Gatsby and Sanity. The redevelopment involved creating a data flow that prioritized customer eligibility lookups, achieving faster page load times, and enhancing local search rankings. The results were impressive, with a 60% increase in in-market website traffic, a 450% rise in website-to-lead conversion rates, and a marked improvement in search engine performance, leading to a 4X increase in targeted lead volume. This transformation demonstrated the effectiveness of employing best-in-breed, modular technologies to achieve substantial business growth in B2C companies.

The blog post by Paul Scanlon discusses optimizing JavaScript animations in Gatsby sites without affecting performance, particularly focusing on metrics such as Time To Interactive and Total Blocking Time. Using libraries like three.js and react-three-fiber can increase bundle sizes, which impacts these performance metrics. Scanlon suggests employing React's Code-Splitting, React.lazy, and Suspense to defer loading non-essential animations, which are considered incidental and not crucial to the site's content. He emphasizes the importance of not "lazy-loading" critical content and details conditions for further optimizing performance on small screens or when users have data-saving features enabled. The piece balances the need for creative web animations with maintaining a performant and user-friendly experience, advocating for a middle ground between innovation and efficiency.

Paul Scanlon, tasked with building the new GatsbyConf 2022 site, shares an extensive account of the project's development process, highlighting both the technical challenges and collaborative efforts involved. He provides updates on various site features, including the implementation of a YouTube video playlist using Contentful's JSON Editor, the real-time updating of raffle codes during the conference, and the integration of Gatsby's BETA Image CDN to enhance site performance. The blog also details the design and UX improvements made to the site, such as adopting a dark mode theme and creating individual speaker landing pages with timezone-adjusted schedules. Throughout, Paul emphasizes the significance of teamwork, acknowledging the contributions of his collaborators, and reflects on the balance between achieving technical excellence and maintaining design simplicity. The project also reflects Gatsby's commitment to performance optimization and accessibility, with a notable focus on improving image load times and maintaining a visually appealing, user-friendly interface.