March 2021 Summaries

Netlify Labs is a new in-app beta testing area that allows users to control their experience with Netlify by turning features on and off. This feature aims to give more control over the user's account, improve the overall experience, and provide actionable insights for internal teams. The goal of Netlify Labs is to validate assumptions, gather feedback, and iterate quickly while giving users better control over what they find in their account and how it behaves. By using Netlify Labs, users can contribute their opinions and insights directly, further enhancing the company's values of openness and collaboration.

This is a success story of how Backlinko, one of the world's top websites for SEO tips, advice, and training, modernized its tech stack by moving from classic monolithic WordPress to a Jamstack architecture powered by Next.js and Netlify. The company aimed to improve performance, scalability, and maintainability while keeping their beloved WordPress CMS as a headless CMS. After overcoming challenges such as long build times and the need for incremental static regeneration, Backlinko successfully deployed a performant website with improved page loading speeds, faster perceived performance, and better security. The new setup has enabled the company to recognize the Jamstack approach's business potential and achieve its goals without losing any of its functionalities.

The Jamstack has experienced significant growth since 2015, with Netlify playing a crucial role in its development. The company has established a Technology Partner Program to collaborate with technology vendors and web development agencies on joint projects, aiming to further accelerate the adoption of Jamstack technologies. This program has two components: Agency Partners and Technology Partners, which work together to support each other's success and drive growth in the Jamstack ecosystem. Netlify provides support to its partners through various means, including sales calls, brand amplification, and sharing resources and best practices. The company recently hosted its first quarterly Partner Day, recognizing outstanding contributions from agencies and individuals, and is excited to continue building out this program.

The Netlify Lighthouse plugin is a tool that automatically generates a Lighthouse report for every deploy, allowing users to regularly monitor the metrics that matter to their team, such as SEO, site speed, and accessibility. This plugin is part of Netlify's series highlighting Build Plugins, which aims to provide users with an easy way to power up their builds. By integrating Lighthouse into CI systems, users can ensure their performance doesn't degrade over time, and easily roll back to a previous, more performant version of their site if needed. The plugin is available for one-click installation in Netlify's UI, making it simple to get started with monitoring and improving the quality of web pages.

Netlify has been busy in March, releasing new features such as auto-detection and zero-configuration support for Next.js apps on their platform. This allows developers to take advantage of features like preview mode, internationalized routing, and server-side rendering with Netlify Functions. Additionally, Linkable Logs have been introduced, making it easy to reference and share deploy log lines with team members. Other updates include improvements to redirects and build plugins, as well as a case study on Spring's migration from a monolithic Rails app to a microservices-based web architecture. The company also welcomed new customers and announced an upcoming event for migrating to the modern web.

** The Netlify UI codebase is undergoing a refactoring to switch from global CSS to utility-first CSS using Tailwind, aiming to improve maintainability and performance. The current architecture has 35 different CSS files, making it difficult for developers to keep track of styles and overrides. The team has identified the need to refactor due to high-tech debt and the growing number of frontend developers contributing to the codebase. After benchmarking different CSS solutions, they chose Tailwind for its human-readable classes, low specificity by default, and modular/composable nature. To implement this change, they will focus on converting small components first, with a goal of completing the conversion within four weeks. The team has set up milestones and visual regression tests using Percy to track progress and catch potential bugs early. They are also addressing technical difficulties such as readability and overrides, and building a layout component to handle margins between UI components. The ultimate goal is to create composable and consistent page layouts without copying and pasting fragile JSX patterns around the codebase.

Netlify is announcing its `Inline Critical CSS` build plugin, which automatically extracts and inlines critical CSS of a webpage to render content faster. The plugin was contributed by Tom Bonnike, an engineer at Shopify, and can be used with other plugins like the `Inline Source` plugin to speed up content delivery even further. By inlining critical CSS directly into the HTML document, this plugin eliminates additional requests and delivers a "one roundtrip" critical path where only the HTML is a blocking resource. This can be particularly beneficial for websites using the Jamstack for speedy content delivery.

"At Netlify, we've been expanding our adoption of Go-based services for the backend infrastructure that powers our core services. We encountered a CGO crash in production while scaling our service to handle new traffic patterns. The fault was identified as coming from the libredirect library used for redirect parsing, which is wrapped with a C++ smart pointer. After adapting an exhaustive integration testing framework and running stress tests, we were able to reproduce the segfault and identify a race condition triggered by the shared pointers in the CGO bindings. We fixed this issue by changing the return type of the Parse function from 'redirects.Matcher' to '*redirects.Matcher', ensuring that the struct was not deallocated prematurely. The change prevented the segfault, and we were able to safely return to production."

When working with Vue 3's Composition API, a common question is whether to use `ref` or `reactive`. While `ref` is the fundamental building block for reactive data in Vue, it has some downsides, including requiring an understanding of JavaScript proxies and adding bulk to the code. On the other hand, `reactive` is much closer to what developers are already familiar with, being similar to the data option in the Options API. However, using `reactive` requires no unpacking values like `ref`, making it more intuitive and easier to use. Ultimately, `reactive` is recommended as the primary way to manage reactive data in Vue 3's Composition API, but there are still use cases for using `ref`.

The Essential Next.js Plugin has been introduced by Netlify, combining the functionality of the next-on-netlify npm package and the Next.js Build Plugin. This plugin enables features like support for getServerSideProps and getStaticProps with fallbacks, preview mode, internationalized routing, incremental static regeneration, and more. With this plugin, Netlify will automatically detect when a project uses Next.js and enable its features without manual installation. Users can uninstall the old package, remove unnecessary configuration files, or install the new plugin through Netlify's UI or netlify.toml file. The plugin is designed to work seamlessly with existing projects, making it easy for developers to take advantage of the latest Next.js features on Netlify.

This week, Netlify is highlighting a Build Plugin created by one of its partners, Cypress, an end-to-end testing tool for any frontend framework or website. The plugin simplifies the workflow by running Cypress tests after each Netlify build, ensuring quality and confidence with each deploy. With a one-click install in Netlify's UI, users can streamline their workflow further. This plugin makes setting up, writing, running, and debugging tests easy, eliminating the need for multiple separate tools and libraries. The plugin is created by Gleb Bahmutov, a Cypress engineer, who designed it to run an end-to-end test at every build, making it easy for anyone to enable with a click in Netlify's UI.

Incremental Static Regeneration (ISR) is a feature that extends static sites by adding server-side rendering (SSR) capabilities, allowing for more dynamic content to be served without compromising the benefits of static site generation. ISR works by deploying a mostly static site, with routes that aren't built until users hit them, and using a fallback page with skeleton components until data is resolved and cached. This approach combines the performance benefits of static sites with the power of dynamic data, but also breaks atomic and immutable deployment principles, potentially leading to inconsistent user experiences and debugging difficulties. Netlify handles ISR through Next.js and Netlify Functions, but acknowledges its limitations and is working on better solutions for serving unbuilt pages. Ultimately, whether to use ISR depends on weighing its benefits against its caveats.

Spring, a social commerce platform, leverages Netlify's Jamstack architecture to scale its web experience, improve conversion rates, and reduce technical debt. The company migrated from a monolithic to a microservices-based architecture, gradually, using a domain-driven-design approach and the principles of pre-rendering and decoupling. This allowed for faster build times, improved developer experience, and enhanced performance, particularly on mobile devices. With Netlify's High-Performance Edge network, Spring's branded storefronts are dynamically deployed, leading to significant performance increases and upticks in conversion rates. The company plans to continue evolving its use of Jamstack and Netlify capabilities, including Next.js support and edge computing, to further improve its platform.

Netlify has released an update that adds a new feature to its deploy logs, allowing users to easily share specific lines of code or build details with their teammates. The updated logs include more detailed information about the site's build process and can be highlighted for easy sharing. Users can now select individual line numbers or use Shift+select to share relevant sections with others. This update aims to facilitate collaboration and knowledge-sharing among developers, making it easier to troubleshoot issues and discuss code changes.

At Netlify, they utilize a diverse range of technologies, languages, and paradigms to build their product, including JavaScript. The team responsible for several mission-critical Node.js services uses automation, confidence, and consistency as key principles to streamline their workflows. They leverage tools such as Cookiecutter to create consistent project templates, GitHub labels to triage and prioritize issues, and automated tests to ensure robustness. Additionally, they utilize CI/CD pipelines with GitHub Actions, dependency management with Renovate, and automated releases with Release Please. These processes have allowed Netlify to improve efficiency, quality, and consistency across their projects.

This is a comprehensive guide on building an Angular site that grabs data from Sanity.io, a headless CMS, using Netlify Functions and Build Hooks. The project starts with a pre-rendered Angular site template, sets up a headless CMS with Sanity.io, and then adds an Angular Service to handle the incoming data. The service is used to create and update Angular components to display the data. A build hook is set up to update the page when new data is added. The project demonstrates how to use Netlify Functions, Build Hooks, and Angular Universal for pre-rendering. The guide also covers setting up a build hook with Sanity.io, creating a hook, and testing it.

Netlify Redirects allow developers to control routing logic on the Edge from within their site's code and configuration, giving them more power over their site's routing. This can result in greater efficiencies and performance as the site is served from a location closer to the users. Jamstack sites can be immutable and atomic, making it easier to version and manage redirects along with the rest of the site's code. The new course on Jamstack Explorers provides free resources to help developers get the most out of Netlify Redirects, covering topics such as configuration, wildcards, placeholders, 404 rewrites and proxies, migrations, localization, and build optimizations. By using Netlify Redirects, developers can optimize their site's performance without needing specialized tools or expertise.

Netlify Build Plugins have added powerful capabilities to every build, with the Gatsby Cache plugin remaining one of the top 10 plugins in popularity. The plugin provides huge speed improvements by persisting the Gatsby cache between builds. It can be installed from a directory of community plugins or created by developers themselves. Additionally, Netlify offers a wide range of Build Plugins and Tools & Services for building web projects, including a catalog of plugins and resources for creating custom plugins.