July 2022 Summaries

Netlify simplifies the process of handling forms in web development by utilizing static HTML files at build time, which do not require extra API calls or server-side logic. This feature can be utilized with SvelteKit by creating a prerendered route and using an HTML form. To set up this feature in a new SvelteKit project, one needs to run specific commands such as `npm init svelte@next your-site-name` and install the adapter-netlify package. The Netlify TOML file is used to hold build configurations, including specifying the command to be executed during builds and where to publish static files. In SvelteKit, the routes directory contains page files that can be either `.svelte` or `.server.js`, with the latter being for server-side rendering and the former for client-side rendering. A form is set up using standard HTML elements with specific attributes such as `data-netlify` and `netlify-honeypot`. The form submission data is then displayed in the Netlify dashboard under the Forms tab.

We've created a new Web Ecosystem Webinar Series, which will help Jamstack site and app developers unlock new capabilities and use cases by showcasing proven enterprise partner solutions, plugins, and API integrations to improve website performance and team productivity.

The Shopify Storefront API offers a more secure and scalable alternative to the Admin API, providing read-only access to product data without exposing sensitive information. The article demonstrates how to authenticate with Shopify using a reusable function, `postToShopify`, which abstracts away the complexity of making requests to the Shopify API endpoint. The example shows how to use this function to fetch all available products and their variants, as well as retrieve specific product details by handle. The article also highlights the importance of using GraphQL queries to structure requests for data retrieval.

DocuSign, a global company operating in multiple markets, aimed to improve their developer experience and migrate from Drupal to a modern stack. They adopted a headless approach using a mix of homegrown APIs, Contentful, Next.js, and Netlify to enhance security, performance, and scalability. The goal was to empower developers to ship better web experiences faster, while meeting the company's security and performance needs. With Netlify at its foundation, DocuSign's Jamstack architecture enables flexible development workflows and best-of-breed tools to build what the business needs, with the workflows they love.

Netlify Graph, a GraphQL-powered experience, has been updated to reduce friction from API-based workflows, allowing developers to focus on their project or business. The new release introduces a simpler starter experience, removing the need for CLI installation and enabling direct import of built-in samples into applications. Cloud sessions and CLI-less experimentation are also introduced, providing a cloud sandbox environment for development and exploration without installing anything on the developer's machine. Additionally, API authentication support has been added for services such as Cloudinary and Sanity, making it easier to authenticate with their respective APIs.

The Hugo Quickstart Template is a new resource available for creating and deploying a bare-bones Hugo app quickly, allowing users to create and share their content with the world fast. The template can be cloned from its repository or used directly through a button on the Netlify website, and it comes with a live demo and video walkthrough for easy setup and deployment. With the Netlify CLI, users can deploy their site to production and utilize continuous deployment through GitHub webhooks. The template also includes resources such as documentation and an integration page for Hugo on Netlify.

Netlify has introduced the Lighthouse Scores Visualizations plugin to help developers keep track of their website's performance, accessibility, and SEO scores. The plugin allows users to view Google Lighthouse scores per deploy in the Netlify UI, providing a centralized location for monitoring and improvement. By installing the plugin and enabling it in Netlify Labs, developers can access detailed score summaries and stay on top of their site's performance, even if they forget to review scores before deploying new features. This feature is available as an experimental feature and can be enabled by individual team members, with plans for regular updates and additional functionality.

Serverless functions on Netlify allow developers to deploy server-side code as API endpoints, spinning up automatically when triggered by an event and handling the request before spinning down. This enables faster iteration, quick deployments, and abstracts away the setup and maintenance of a physical server. With pros including lowered barrier to entry for devs, inexpensive, and faster iteration, cons include not being built for long-running processes and being stateless. Serverless functions on Netlify can be customized by adding custom headers and using event parameters to manipulate data before returning it to the frontend. This allows developers to solve business needs with a wider range of tools and techniques without needing to manage any infrastructure.

I've been working on a project using Astro and had an issue with node-fetch v3 not working in my Netlify Serverless Functions, which was caused by a breaking change that made the module no longer compatible with CommonJS. To resolve this issue, I had to update my import statement from `require()` to `import` and also updated my `netlify.toml` file or added `"type": "module"` to my `package.json`, which allows Netlify to recognize the ESM module and fix the error. With these updates, my fetch request is now working as expected.

To personalize an ecommerce site, finding the right balance between performance and personalization can be challenging. One approach is to use a hybrid framework like Next.js that supports both statically and dynamically rendered pages. However, this can lead to slower page loads and suboptimal user experience. A better solution is to use Netlify Edge Functions, which allow you to execute arbitrary code at the edge of the network. By creating a middleware function with Builder.io's React SDK, you can personalize your site by rewriting URLs based on query parameters and targeting specific audiences. With this approach, you can create personalized pages using Builder.io's Visual Editor, set up custom targeting attributes, and deploy the site to Netlify for a performant and scalable ecommerce experience.

This blog post discusses how to enable marketers to visually edit and preview static pages using Next.js, a leading React framework for building server-side rendered and statically generated websites. The solution connects the Magnolia Digital Experience Platform (DXP) to a Next.js app built with Netlify, allowing marketers to place components, control column layouts, and add content in a WYSIWYG fashion. The tech stack includes Next.js, Netlify, and Magnolia DXP, enabling authors to edit content visually while maintaining the benefits of static site generation. The solution also sets up two Netlify sites for generating site previews for content authors and serving the static site to end users.

The Jamstack community is coming together to celebrate their accomplishments over the past year at an upcoming conference in San Francisco. As the web development community begins returning to live events, local meet-ups are also re-emerging after a quiet period. The Jamstack team wants to support communities in bringing events back to their cities and is offering assistance through a simple online form or direct communication with Phil and myself within the Jamstack Discord.

The Jamstack Innovation Fund has launched with a $100,000 investment for each of the first 10 participating startups, including ChiselStrike, Clerk, Clutch, Convex, Deno, Everfund, NuxtLabs, Snaplet, TakeShape, and Tigris Data. The fund aims to support early-stage companies driving forward the modern web with Jamstack-based tooling and practices. The selected startups will also participate in a free accelerator program that includes startup advisory, product and integration support, and joint storytelling to the millions of members in the Jamstack community. The program benefits include funding, awareness, and access to industry leaders, which will help fuel a healthy and vibrant Jamstack ecosystem.

The Astro Toolbox template is a new Netlify template that allows developers to quickly deploy and customize their Astro applications with features such as serverless functions, forms, redirects, and more. The template provides a live demo, codebase repository, and instructions on how to clone, deploy, and develop the project locally. It includes examples of how to use Netlify Forms, Netlify Functions, and redirects, showcasing how these features can be used to enhance the application's functionality and robustness. With this template, developers can create their own projects and customize them as needed, making it easier to build and deploy web applications with Astro and Netlify.

Sennheiser Audio, a leading audio equipment company, successfully migrated their flagship e-commerce store to a headless commerce architecture in just 11 weeks, exceeding their goal of completing the migration within four months. With the help of agency AKQA and tools like Netlify and headless Shopify, they achieved a 136.7% increase in e-commerce conversion rate, reduced QA time by 60%, and increased add-to-carts by 74.8%. The company's decision to use best-of-breed tools, such as Hygraph for content management and Search.io for site search, enabled them to build their minimum lovable product faster. This successful migration demonstrates the benefits of a composable commerce approach, including reduced development time, increased revenue, and improved user engagement.

In recent years, web development has evolved significantly since the term "Jamstack" was coined in 2015, with tools and services advancing rapidly. The Jamstack architectural approach decouples the web experience layer from data and business logic to improve flexibility, scalability, performance, and maintainability. By removing the need for business logic to dictate the web experience, Jamstack enables a composable architecture where custom logic and third-party services are consumed through APIs. The best practices for building with Jamstack evolve alongside modern technologies, acknowledging that the approach is not a strict set of rules but rather an ongoing process of iteration and improvement. At its core, Jamstack aims to decouple the web experience layer from business logic and explore the possibilities of composable architectures, delivering web projects without taking on logical burdens. The Jamstack definition has been refined over time to better reflect its key characteristics, which will likely continue to evolve alongside emerging technologies.