June 2022 Summaries

Next.js has released version 12.2, which includes several significant updates, including the general availability of Middleware with changes to its API, improvements for running Server-Side Rendering and API routes at the edge, and enhancements to next/image support, as well as stable support for On-demand Incremental Static Regeneration. The new release also recommends users switch to Edge Middleware for improved performance and usability, while Netlify Edge Functions are available as an option for significant latency improvements.

The Stack Overflow team, led by Brand Design Director David Longworth, aimed to eliminate technical debt and migrate from a monolithic application to a modern web architecture built with Netlify. This move enabled content creators to publish and edit web pages independently, freeing up engineering cycles for more strategic tasks. By leveraging Sanity, Nuxt, and Netlify's Jamstack capabilities, the team achieved faster shipping times, reduced reliance on SRE teams, and improved security and stability. The new setup also introduced features like Deploy Previews, which allowed for collaborative editing and faster content updates. As a result, the Stack Overflow Brand Design team is now able to get more done with fewer resources, unlocking huge potential for the company's marketing efforts.

Netlify is introducing the ability for team Owners and Collaborators to manually delete any deploy from the Netlify UI, providing peace of mind over old deploys. This feature allows users to permanently delete a deploy, removing all related artifacts, including deploy logs and URLs. However, deleting a deploy is permanent and cannot be undone, and it may disrupt split testing or cause issues with A/B tests referencing the deleted deploy. Additionally, Netlify will automatically delete failed or canceled deploys older than 6 months as part of its new "automated deploy cleanup" feature, aiming to reduce clutter in the timeline and improve sustainability.

We are conducting the third annual Jamstack Community Survey to gain insights into the global web development community, including their experiences with remote work, opinions on "web3", and usage of browser-native web components. `The survey aims to help developers make informed decisions by providing a better understanding of popular tools and standard practices in the industry. `Participation is encouraged from anyone involved in web development, regardless of experience level or tool use, as it will contribute to a more accurate representation of the community. `In appreciation for participating, respondents will receive a free special edition Jamstack sticker if they request one within the first 1,000 responses.

The Netlify team has introduced a new feature in their UI that allows developers to manage scopes and contextual values for environment variables, providing more advanced use cases such as limiting environment variables to specific scopes or changing values based on deploy context. This release is available in beta through Netlify Labs and enables users to set context-based values directly from the app UI, with features including filtering by key and reviewing individual values. The new experience is designed to improve security and flexibility for developer teams, but there are some known limitations during the beta phase, such as limited support for branch deploy contexts and Netlify CLI functionality.

Deploying a new Vue 3 + Vite app can be a daunting task, but with the right tools and a straightforward guide, it can be done in just five minutes. This tutorial provides a step-by-step approach to deploying a Vue 3 + Vite app using Netlify, starting from setting up a project template or building one from scratch. The process involves installing necessary tools such as Node.js, GitHub CLI, and Netlify CLI, then scaffolding the project with Vite, initializing Git integration, and connecting it to Netlify. Once set up, deploying the app is a straightforward process that requires minimal configuration, resulting in automatic continuous deployment and updates whenever changes are pushed to the main branch. With this guide, developers can quickly deploy their Vue 3 + Vite apps and take advantage of Netlify's features for robust app development.

Gatsby has introduced support for Image CDN, which can save build times by handling image processing at runtime, but only works for certain CMS integrations. A new experimental Gatsby Runner has been developed to achieve the same results for all images in Gatsby, including local images, without requiring any changes to your Gatsby code. The Gatsby Runner cuts build times by 84% and total deploy time by 62%, even more for sites with many images. It processes images at runtime, using On-demand Builders, and includes the jobs JSON files inside the builder function bundle. The plugin is still experimental but can be installed as a separate build plugin to save build times.

Nuxt Content is a plugin for Nuxt that enables ingestion of Markdown, YAML, CSV and JSON files into an app, unlocking possibilities such as using local content files as a CMS, utilizing Vue Components in Markdown files, enhanced Markdown syntax, querying content, and utilizing a built-in REST API. To get started, one can use the Deploy to Netlify button for new projects or add `@nuxt/content` as a dependency to an existing Nuxt 3 project and configure it in the `nuxt.config.ts` file. With Nuxt Content v2, developers are now ready to build Nuxt 3 sites using Markdown, YAML, CSV and JSON files to power their content, with additional resources available for further learning and exploration.

Matterday`, a project launched by Plushcap, aims to help development teams save one day per developer by switching to Netlify. The site features fun CSS-only scrolling effects, including layered scrolling artwork, parallax visuals, and creative layering techniques. By using fixed positioning and z-index, Plushcap created an engaging narrative-heavy website that encourages users to imagine what they could do with the time saved. The project showcases various effects, such as re-stacking CSS layers for a "focus" effect, using cutout images for a "Someday" list effect, and experimenting with responsive design to address usability issues. By leveraging CSS alone, Plushcap pushed the boundaries of what is possible in web development, making it an interesting read for developers and designers alike.

Qwik is a resumable JavaScript framework that optimizes performance by rendering server-side HTML, allowing for progressive loading of code without a big bundle upfront. It uses an Optimizer written in Rust to transform the code at build time and leverages Vite for Hot Module Replacement (HMR) and bundling code. Qwik can be deployed on Netlify using either the Netlify CLI or manual git deployment methods, with the former providing a more streamlined experience. The process involves creating a new Qwik app using the CLI tool, installing dependencies, running the dev server locally, and then deploying the site to Netlify, where it can be configured for production deployment.

Formspree-react is a form handling library built specifically for React projects that provides a React-friendly useForm hook to handle form submits, updates the form state and displays server-side errors. This guide shows how to add a contact form to a Next.js website using Formspree and deploy it to Netlify, requiring a Formspree account and an existing web project built with Next.js. The process involves building a form component, setting up a form endpoint, deploying the project to Netlify, and optionally switching between development and production forms using environment variables.

Astro is a new static site generator that helps ship less client-side JavaScript in projects, and it's centered around helping developers deploy their sites seamlessly on Netlify. Astro allows users to write JavaScript, HTML, and CSS in .astro files and integrates with popular front-end frameworks like React, Preact, Svelte, Vue, SolidJS, AlpineJS, and Lit. Users can start a new Astro project using the Astro CLI or browser-based development environments like StackBlitz, CodeSandbox, or GitPod. Once set up, users can deploy their site to Netlify in three ways: static sites, server-rendered sites, or edge-rendered sites. Each deployment method has its own benefits and requirements, and users can choose the one that best fits their project's needs. With Astro and Netlify, developers can create fast, modern web applications with minimal JavaScript code and deploy them easily to a live URL.

All videos from Headless Commerce Summit 2022 are now available to view, featuring talks on trends in the headless commerce landscape, including composable commerce, API-first economy, and customer experience customizations. The summit also explored the future of brands for eCommerce companies, data-driven roadmaps to composable commerce, personalizing ecommerce stores at scale, and internationalization of ecommerce sites with headless commerce.

Deploying a SolidJS application on Netlify involves three main methods: drag-and-drop deploy, Netlify CLI deploy, and manual deployment from Git. The drag-and-drop method allows for easy deployment without a git repository, while the Netlify CLI provides a more automated experience with commands to configure, build, test, and deploy sites. Manual deployment from Git also offers an option to import an existing project or start from a template, with options to customize settings such as functions directories and netlify.toml configuration files. Each method has its own set of steps and benefits, allowing developers to choose the approach that best suits their needs.

This e-commerce theme, developed in collaboration with Matter Design and an award-winning e-commerce agency, offers a well-designed layout with fantastic fonts, allowing users to easily customize the site and add their preferred tools for grabbing product information, cart state management, payment, and more. The theme can be cloned using the 'Use this template' button or by running a Git clone command, and then customized by editing code files such as `src/pages/index.js`. Once customized, the website can be deployed to Netlify using the CLI or through the dashboard, making it live for the world to see. With its flexibility and customization options, this theme is designed to help users create their own e-commerce site that matters to them.

Netlify has released new features and updates in May 2022, including first-class support for Azure DevOps, an Astro Quickstart template, and various updates to the Netlify CLI and integrations with frameworks like Next.js. The company also improved developer experience and maintained key integrations. These changes aim to enhance the overall web development workflow and provide better tools for developers.

Building with Netlify feels like a different universe, where workflows are simplified, productivity is increased, and customer happiness is improved. The team at Netlify heard the pain points of their customers and created a short film to showcase the impact of using their platform. With features such as auto-detection of frameworks, automatic local dev setup, unlimited staging environments, and integration with management tools, Netlify makes it easy for developers to get started quickly and efficiently. The platform also provides a centralized place for feedback collection, automatic deployment to production, and a safe and secure release cycle. By switching to Netlify, developers can simplify their workflows, unify their development process, and join millions of others who have already made the switch.