July 2021 Summaries

To process multipart/form-data inside a Netlify Function, you can use a high-performance parser like busboy, which is also used internally by popular Express package multer. The parsing logic involves setting up handlers for file and normal fields, as well as the finish event to resolve the promise with the resulted fields. This allows you to extract form values, including files, from Netlify Function events in a convenient and efficient manner. By using busboy, you can simplify the process of handling multipart/form-data encoding in your serverless functions.

Netlify partners are development agencies and technologists who help advocate for the Jamstack, a serverless architecture approach that enables faster and more secure web development. These partners bring the benefits of the Jamstack to more web teams through various projects and implementations, including e-commerce solutions, high-scale sites, and large content catalogs. Netlify recently hosted its quarterly Partner Kickoff event, where partners learned about new product features, shared success stories, and received resources on how to manage projects with Netlify. The company also announced new partnerships in the Jamstack Database and Backend spaces, recognized top-performing agencies, and showcased a product demo and roadmap update.

The developer experience team at Netlify built a Shopify store using Astro and React, with the goal of showcasing different ways to build a shopping site. The project uses serverless functions shared across projects to query the Shopify API, with functionality including getting products, lists, adding to cart, and removing from cart. To set up Shopify, users need to create an account, generate API credentials, and create a private app. For Astro, users need to clone or start a new project, populate environment variables, and set up serverless functions for data fetching. The final product includes pages for the homepage, cart, and product details, populated with data from serverless functions using Astro's various data fetching options.

The Shopify Storefront API has been enhanced to allow the management of a cart, making it easier for developers to build headless e-commerce sites. This enhancement is particularly useful when integrating with frameworks like Nuxt, which has seen the release of the Shopify + Nuxt Kit that leverages this new API to provide features such as product filtering and detailed item variants in the shopping cart. The kit also implements features related to user interaction with the cart, including adding items, removing items, and displaying subtotal, tax, and total amounts. By utilizing this kit, developers can more easily create seamless e-commerce experiences for their customers.

Netlify Functions are serverless functions written in Node.js, TypeScript, or Go that can be used for various tasks such as fetching data and sending notifications. They can be triggered automatically by certain Netlify events, allowing developers to automate their projects with event-driven functionality. For example, a deploy-failed function can be named after the event it's triggered by, such as `deploy-failed.js`, and can send a Slack notification with a GIF when a deployment fails. The use of background functions allows for longer-running jobs, while the Giphy API is used to fetch a random 'fail' GIF for the notification.

** When Shopify expanded their Storefront API, developers gained access to product, pricing and stock level data through an expressive GraphQL interface, allowing for more control over the shopping experience. To help get started with using the API, Netlify's DX team built reference templates using various front-end tools and frameworks, including Eleventy, Gridsome, Astro, Nuxt, and Angular. The DX team chose to use Eleventy to pull product data from the API and generate pages during build time, while adding HTML forms and JavaScript to interact with the API for cart management. A demo site was created using this approach, showcasing a complete Shopify store with products that reflect common interests of the DX team. The UI made calls directly to the Shopify API, but also used serverless functions to abstract away the complexity, making it easier to reuse and extend the code. Utility functions were written once and used by different UIs, providing a simplified API for the sites. Netlify's redirects API was used to make URLs palatable, allowing friendly and readable URLs whenever possible. Client-side JavaScript was added later to manage cart management and other interactive features, but only 80 lines of commented code were needed. The decoupled model provides fantastic levels of control when crafting the experience for users, and agencies can use this approach to deliver on design promises and generate differentiation through user experience.

Netlify has launched partnerships with four data layer providers, DataStax, Fauna, Nimbella, and StepZen, to help developers build dynamic applications on the Jamstack. These partners enable Netlify users to get up and running faster by providing integrations that make it easy to process and query data, talk to a database like any other API, and deploy serverless functions quickly. The partnerships aim to simplify the development experience for Jamstack developers, allowing them to focus on code while leveraging the scalability of serverless technologies. Netlify customers can still use any backend or database they prefer, but these new integrations provide an additional layer of support for building dynamic applications on the platform.

Netlify has enhanced its collaborative Deploy Previews by integrating with BrowserStack, enabling developers to better troubleshoot QA issues through a feature called "View on BrowserStack." This integration allows developers to replicate a reviewer’s browser environment with a single click, facilitating easier identification and resolution of frontend issues without needing to manually gather browser settings or details. This collaboration not only streamlines feedback processes by syncing comments with platforms like GitHub and Trello but also offers Netlify users an extended 60 minutes of free testing on BrowserStack, doubling the usual free trial duration. These improvements aim to provide a more seamless and efficient review process, encouraging team collaboration through features like screen recording and annotations, and are accessible to all Netlify users, including those in the new free Reviewer role.

The Shopify Storefront API has been enhanced, allowing store owners to access and manage their entire store and inventory via APIs. This unlocks new use cases for store owners, such as building a Shopify-powered e-commerce site without having a Shopify site, or selling products from any application. The author of the article created a Shopify Gridsome Starter Template using the Storefront API, which can be used as a starting point for building an e-commerce site. The template includes examples of how to retrieve data from the store, manage the shopping cart, and remove items from the cart. The article also discusses thoughts on working with Gridsome and the benefits of using a Shopify-powered backend system.

Netlify agency partners are active participants in the Netlify community, suggesting improvements to developer experience and educating clients about the productivity and performance benefits of developing web apps on Netlify. Agency partners should create an agency sandbox for proofs-of-concept and demos, include technology fees in service-level agreements (SOW), and pitch projects effectively to ensure success. Dedicated client accounts are recommended for each project to avoid data management risks and enable better support from the Netlify team. Deploy Previews allow agencies to collaborate with their teams and clients during development, while collaborative Deploy Previews provide a new way for reviewers to share feedback on web projects. Working with internal teams involves adding contributors to the Netlify account, while working with client teams involves adding Reviewers to enable seamless collaboration. Before deploying a project to production, agencies should consider installing guardrail plugins, setting up DNS and SSL, and planning for any custom requirements. The Netlify Partner Team is available for support and resources, including co-selling assistance and win-story sharing.

Medallia, a customer feedback management software company, migrated their marketing site from a monolithic WordPress application to the Jamstack powered by Netlify. This migration enabled shorter development cycles, increased deploy speed, and improved performance, with Core Web Vitals scores improving by 50%. The new architecture allows for faster content updates, reduced deployment times, and better collaboration between teams. With Netlify's features such as Serverless Functions, Prismic for component-based content editing, and Nuxt.js for performant static site generation in Vue, Medallia was able to achieve a seamless development workflow. The migration also provided cost savings through reduced server management time and increased productivity. Rob Kristie, Global Head of Web Development at Medallia, notes that Netlify is the "one piece" that gives him peace of mind, as it automates many tasks and provides a scalable infrastructure for his team to build on.

Rollbacks are an interesting feature of the Jamstack that allow developers to recover from errors by reverting to a previous deploy in seconds. The concept is made possible by atomic and immutable deploy concepts, ensuring each deploy can function independently. In Netlify, rollbacks can be achieved by going to the Deploys tab, selecting the previous production deploy, and clicking publish deploy, restoring the site to its stable working state. This feature provides a safety net for developers, allowing them to quickly identify and fix issues without impacting users or causing reputational damage. Additionally, Netlify offers the option to lock publishing to a specific deploy, ensuring that changes do not inadvertently overwrite previously published versions.

With Netlify, you can centrally manage your environment variables in your site's deploy settings admin, and access them in your local build when running `netlify dev`. This allows for a safer way to handle sensitive data. The Netlify CLI provides additional functionality, such as the ability to create, update, and delete environment variables directly from the terminal, without needing to commit a `.env` file or manually record variables locally. You can also use the CLI to list all environment variables, import them from a file, and manage them for teams, making it easier to collaborate and be more productive when creating and managing sites.

Astro is a new framework that aims to ship less client-side JavaScript by loading scripts only when needed. It comes with pre-configured renderers for popular frameworks like React, Vue, and Svelte, allowing users to build applications without installing these frameworks separately. Astro files are similar to HTML but contain extra JavaScript goodies, enabling powerful templates and components. The framework supports page-based routing, styling, and state management, although some features are still in early implementation. Astro also includes tools for styling, state management, and custom configurations, making it an attractive option for developers looking to build fast and efficient web applications.

The newly updated documentation on Netlify's monorepo support provides clear guidance on setting up base directories, configuring deploy notification settings, and recommended setups based on specific tools and project needs. The updates aim to improve the developer experience by addressing issues such as slower build times for Yarn workspaces and making configuration more obvious in the Netlify UI. The documentation team's process involved a cross-team effort to illuminate hidden settings and make the whole process more clear, resulting in a more seamless setup for developers working with monorepos.

This post discusses Google's latest ranking update, the "Page Experience" update, which includes the addition of three perceptual speed metrics to the search engine's ranking algorithm, collectively referred to as "Core Web Vitals." These metrics measure the experience a page provides based on the time it takes to load and become interactive. The update aims to measure the experience a page provides and will roll out gradually through August 2021. Most e-commerce sites fail Core Web Vitals tests due to rich imagery, pop-ups, dynamic pricing, and real-time inventory lookups leading to slow pages and frustrating UX. Jamstack sites face extra challenges passing CWVs as Chrome UX report only measures their first loads. Proven techniques to optimize Jamstack e-commerce sites for 'good' LCP, FID, and CLS scores are shared, including optimizing largest contentful paint, first input delay, cumulative layout shift, and using static site generation. By combining these techniques with a best-of-breed Jamstack hosting provider like Netlify, the performance of your site visitors can be significantly improved. Google has integrated CWV data throughout its tools for analyzing site performance, allowing users to see page-level results as well origin results for any site on PageSpeed Insights and dive into their site's performance page by page with the CWV report in Search Console.

Netlify has released several updates in June, including improvements to Deploy Previews, a new Essential Gatsby plugin for Gatsby Functions, and Nuxt Image for image optimization. Other notable changes include updated audit logs, changes to internal file paths of Netlify Functions, fixes for monorepo configurations, end-of-life notifications for older build images, and updates to Node.js support. These changes aim to enhance usability, performance, and security for developers using Netlify's services.

When it comes to handling sensitive information like private keys in Netlify projects, there are three ways to set environment variables: via the project dashboard, team settings, or the `netlify.toml` configuration file. This allows for secure and accessible management of sensitive data, such as private keys, without compromising code security. By storing environment variables on the project dashboard, teams can access and edit them, while also keeping sensitive information out of code repositories. Additionally, Netlify's auto-served environment variables in `ntl dev` mode enable local coding with the correct environment variables, making it easier to work on projects. The use of environment variables provides benefits such as reduced errors due to forgotten `.env` files and more secure collaboration, allowing teams to access project settings without exposing sensitive information.