May 2020 Summaries

The Jamstack model has shifted the needs of content delivery networks (CDNs), requiring them to be fast, highly customizable, and up to date within a fraction of a second. Traditional static CDNs are insufficient to handle dynamic, personalized content, prompting Netlify to release Edge Handlers, which allows running code directly from the CDN. This feature enables full control over how content is served to end-users, enabling dynamic serving based on user permissions, language, or country. With Edge Handlers, users can augment their content with highly personalized data, such as COVID-19 cases in a specific area, by rewriting content based on incoming request headers. The release of Edge Handlers brings new possibilities to the CDN and pushes the boundaries of what is possible within a Jamstack model, offering developers inventive ways to create dynamic content.

Netlify has released Build Plugins, which allow users to automate build tasks, customize their build process, and make development easier by adding additional code to the netlify.toml configuration file or clicking the 'Install' button on the Build Plugins page. These plugins can be used to cache files, check for broken links, trigger testing, and more. The community has created numerous resources, including documentation, tutorials, and examples of how to use and create Build Plugins. Available plugins include those that look for accessibility failures, add Instagram, check for misspelled brand words, and trigger testing during deployment outside set hours. Additionally, the Netlify dashboard now lists a 'Plugins' page at the top, making it easy to access and manage Build Plugins.

The Jamstack architecture is no longer the new kid on the block but has become a maturing and rapidly expanding field with a wide distribution of demographics among its active users. The community skews towards newer developers, but many respondents reported extensive experience in their current role. Jamstack developers are building a variety of software types, including enterprise applications, consumer software, internal tooling, and personal blogs. The architecture is seeing mainstream adoption across multiple industries beyond the tech sector, with significant presence in advertising, media, education, finance, and business support sectors. Despite this widespread adoption, 71% of respondents have been using the Jamstack for 2 years or less, indicating a wave of new developers entering the community. The Jamstack's appeal lies not just in its scalability but also in its workflow and tooling, which are valued by developers. The survey results provide insights into best practices, technical preferences, and future trends within the Jamstack ecosystem.

To build a form into a Next.js website without setting up a backend, you can use Netlify Forms. This involves creating a contact page component with a form and adding a `data-netlify` attribute to the form tag. You also need to create a success page that will be displayed after the form is submitted successfully. The form submissions can be verified in the Netlify dashboard, and there are additional features such as spam prevention and serverless functions available for customization.

The Netlify Build Plugins series has reached its third part, where publishing and sharing plugins are covered. To publish a plugin, developers must first create a package.json file with specific requirements, including a name that starts with "netlify-plugin-", keywords containing "netlify" and "netlify-plugin", and repository and bugs fields set to the plugin's repo and issues path respectively. Developers can then push the plugin to npm using `npm login` and `npm publish`, updating the version before each new release. Once published, plugins are listed on the Build Plugins repo, where they can be cloned or forked and added to the `plugins.json` file with author information, description, name, package, repository, and version fields. The final step is to push code up and make a pull request for review, after which the plugin is added to the master list and can be shared within the community.

Netlify has released its May newsletter, which includes a re-publication of their previous issue, updates on the company's product roadmap, new features such as environment variables control over sensitive data in automated builds and deploy previews, tutorials on building a Markdown blog with Next.js 9.3 and deploying it to Netlify, as well as other helpful content for developers using the Jamstack. The newsletter also includes information about upcoming events, including Jamstack Conf Virtual, which is free to attend, and invites users to provide feedback on the company's product roadmap. Additionally, Netlify welcomes new customers and celebrates its first birthday of the community forum.

The Payment Request API allows developers to access payment credentials stored in digital wallets like Apple Pay, Google Pay, and Chrome. Stripe provides a Payment Request Button Element that securely tokenizes these credentials for a convenient checkout experience on mobile devices. The tutorial demonstrates how to add support for the Payment Request API to a React site using Stripe and React. It covers setting up a new React project, installing dependencies, creating a Payment Request object, checking if a digital wallet is available, processing payment details from the customer's wallet, charging the payment details in a Netlify function, and automating fulfillment with webhook events. The tutorial provides a demo application and source code for reference.

A staging environment often has different context than a production environment, particularly when it comes to handling environment variables. This can lead to burdensome and error-prone manual checks for differences in context. However, with build plugins, developers can access and modify environment variables on the fly without having to repetitively account for differences in context. By using deploy contexts to identify specific environments, build plugins can dynamically swap out process.env variables, saving developers from pesky conditionals. Additionally, there are pre-built plugins available that provide this functionality, such as netlify-plugin-contextual-env, which can be easily added to a Netlify configuration file.

Netlify Edge has introduced automatic Brotli compression for assets delivered by the platform, providing instant performance boosts and smaller asset sizes. This upgrade is enabled automatically, without requiring developers to take any action, and benefits visitors to sites by delivering correctly compressed assets depending on the requesting browser's support for Brotli. The use of Brotli compression results in median file size reductions of 14% for JavaScript files, 21% for HTML files, and 17% for CSS files compared to gzip compression, leading to better performance and reduced bandwidth usage.

This post walks through the process of creating a Netlify Build Plugin, which is a powerful tool for customizing and automating builds on Netlify. The plugin can trigger different build events, access user inputs, handle errors, and utilize constants provided by Netlify. The plugin's functionality can be conditionally executed based on user input values, making it dynamic and adaptable to each project's needs. The post covers the essential files needed for a Build Plugin, including `index.js`, `manifest.yml`, and `package.json`. It also introduces various utilities available in the Netlify build repo, such as `build`, `cache-utils`, `config`, `functions-utils`, and `git`. These utilities enable plugins to handle errors, access caches, read configuration files, inject functions, and run commands within builds. The post concludes by encouraging developers to create their own Build Plugins and share them with the community, which can lead to better builds and more prosperity for developers.

Deploy Previews on Netlify offer a valuable glimpse into the future and provide insights and visibility to contributors and maintainers alike, but users must be mindful of sensitive environment variables that could be exposed during automated builds triggered by pull requests from unrecognized authors. To address this concern, Netlify provides controls over how environment variables are handled in these builds, including options such as deploying without sensitive variables, requiring approval to deploy, or opting out of restrictions altogether. These controls aim to provide greater visibility and oversight into the build process, while also allowing users to continue using Deploy Previews for their development and content authoring activities.

The Netlify Community forums have reached their one-year milestone, marking a significant increase in activity with tenfold more daily posts and a dramatic rise in signups, daily active users, and pageviews. The success can be attributed to several key factors, including picking the right platform, intentionally creating an inclusive and collaborative culture, custom tooling that automates certain actions, and building Community into the company's culture, which surfaces valuable information for everyone involved.

Fast Refresh`, `Absolute Imports and Aliases`, and `Web Vitals Reporting` are new features in Next.js 9.4, bringing improvements to hot reloading, import management, and performance optimization respectively. With these updates, developers can expect more accurate error locations, preserved application state during hot reloading, and easier debugging. Additionally, Next.js now supports custom module aliases, allowing for cleaner and more organized imports. The new `Web Vitals Reporting` feature provides a unified way to measure key performance metrics, enabling developers to optimize their projects for better user experience.

Design teams need to find a balance between working together and apart, depending on the stage of the design process. They should not "throw things over the wall" and instead communicate throughout the design and development process. Building cross-functional communication skills is crucial, but can be challenging, especially in teams with tension or past unsuccessful attempts at collaboration. To overcome this, it's essential to start by incentivizing the change, reframing large changes as low-risk tests, and running pilot programs to prove out benefits. Designers and developers should speak the same language and use terminology that aligns with their shared goals of building high-quality software faster. Ultimately, driving adoption requires investing in internal training, workshops, and communication, creating a breadcrumb trail of documentation, and making the value of the design system clear to all team members.

The Jamstack Conf Virtual event is scheduled to take place on May 27-28, with over 6,000 registrations from 123 countries. The event will explore the current pandemic and its role in the web, featuring keynote speakers such as Harper Reed, Erin Kissane, Tom Preston-Werner, Christian Nwamba, Matt Biilmann, and Laurie Voss. Additionally, live workshops are available on May 28, covering topics like authoring experience for Jamstack sites, predictable performance, React Hooks, and building a live streaming platform with the Jamstack. The event is sponsored by several companies, including Commerce Layer, Kentico Kontent, Magnolia, Mux, Prismic, Strapi, and Vonage, who will be showcasing their latest technologies during the event.

Netlify is a popular platform that enables unprecedented productivity and control for web development, offering various features that have become core to how developers build for the web. The Developer Experience team highlights several key features, including Starter templates and Deploy To Netlify button, which simplify the process of experimenting with new technologies and deploying projects. Instant Rollbacks allow users to quickly revert to previous deployments in case of issues, while Ignore Builds provides fine-grained control over site builds. Role-Based Access Control enables adding permissions to pages and sites from redirects files. Serverless functions without configuration headaches make it easy to create and deploy serverless applications. Local development with the Netlify CLI allows for faster and more powerful project management. The Redirects API offers a simple way to define rules for how the CDN handles requests, allowing for rewrites, proxies, and shadowing. Branch Deploys provide immediate, unlimited environments, making it easy to test and deploy sites without requiring separate hosting environments. Deploy Previews enable users to see what changes have been made on a given PR without building the site locally, while Stop Builds allows for complete control over builds and deploys. Build Hooks and Webhooks trigger new builds or deployments via URLs, and Customizing Builds with Netlify Build Plugins enables integrating other parts of the build and deploy process. Deploy contexts give users greater control over how their builds run and what configuration they might pass to them when they occur in different contexts. Overall, these features make Netlify a powerful platform for web development and deployment.

** Design systems exist to help teams ship good software by providing guidance and guardrails, but they should not be overemphasized as processes that generate ephemeral artifacts. Effective design systems balance speed and quality, introducing the right amount of friction to encourage good practices while avoiding bureaucracy. Design tools are critical but serve a purpose, creating temporary pictures of software that help guide development but ultimately become disposable. The goal is to ship good software quickly, not to create perfect designs or processes. Teams should focus on building design toolkits that empower them to create designs efficiently and effectively, embracing creative chaos over dogmatic approaches and removing layers of abstraction. Ultimately, the value lies in shipping software, not in the design artifacts themselves.

A design system is a collection of components and guidelines that an organization needs to improve digital products. It's not about creating a rigid definition, but rather being intentional about the design decisions made. A good design system should be adaptable to the organization it serves, and can be either deliberate or emergent, with most systems falling somewhere in between. The key is finding the right balance of drift and intention, allowing for flexibility while still providing guidance. This approach enables teams to make more consistent, higher-quality products in less time, without unnecessary cost or formality. By being intentional about design system decisions, organizations can create a system that improves their effectiveness over time.

Customizing Open Graph metadata to improve the appearance of shared links on social media platforms can be achieved using Next.js, a static site builder. By adding programmatically customized `<meta>` tags to every page using the `next/head` component, developers can control the metadata displayed when sharing their content. This includes adding Open Graph tags such as `og:title`, `og:description`, and `og:image`, as well as Twitter-specific tags like `twitter:card` and `twitter:creator`. The use of static site builders allows for more flexibility in customizing metadata per page, unlike single-page applications which are restricted by their nature.

Impossible Foods, a fast-growing alternative meat company, faced challenges with their original website as demand for their plant-based products increased. The website struggled to scale and provide users with an easy way to find local retailers and restaurants offering Impossible Burgers. To address these issues, the company turned to Netlify and Gatsby to create a new website that included an interactive store locator map. This allowed customers to quickly find nearby locations where they could purchase Impossible Foods products. The redesigned site also improved overall user experience and reduced bounce rates by 30-40%.

The team at Netlify aimed to optimize the structure of their existing system by reducing the work involved in deploying files. They identified performance issues with their current system, which was causing problems with large deploys and concurrent operations on MongoDB. To address this, they introduced a new approach that separates the concerns of tracking deploy state and resolving origin requests. The solution involves creating a new collection to store metadata for each file, deferring the creation of the final tree until the deploy is done, and batching file diff operations. This resulted in a 2x increase in deploy speed, known as "nitro deploys." The team faced challenges during the rollout, including edge cases that required careful handling, but ultimately successfully deployed the feature at 100% without issues. The new approach has improved testing and observability, allowing for better handling of massive scale and concurrency.

This guide provides a step-by-step tutorial on building a Markdown blog with Next.js 9.4 and deploying it to Netlify. The author assumes the reader has knowledge of React, JavaScript, and CSS. The tutorial covers setting up the project, creating the blog's layout and components, processing Markdown files, listing posts, and customizing the site for deployment on Netlify. The guide includes code examples, explanations, and advice on styling and optimizing the site for performance. By following this tutorial, readers can create a static site with dynamic routing and automatic updates using Next.js and Netlify.