August 2022 Summaries

Netlify has launched the Beta release of Edge Functions, an innovative edge logic-layer that allows developers to modify network requests to personalize content, serve relevant ads, and raise Core Web Vitals scores with just a few lines of JavaScript or TypeScript code. This feature enables non-technical professionals to A/B test content or personalize pages without writing code, using Uniform tools and no-code solutions. Edge Functions bring personalization and A/B testing capabilities to Jamstack sites, addressing the need for server-side rendering while maintaining performance, scalability, and security characteristics. With Uniform Context plugged into Netlify Edge Functions, nontechnical professionals can manage both personalization and A/B testing without developer involvement. The technology offers edge-side personalization, eliminating issues like flickers and content swaps, and allows for real-time data-driven decision-making.

Transforming a Next.js page to allow for personalization without creating multiple versions of the page or needing complex workarounds is possible using Netlify's Next.js Advanced Middleware. This technique enables transforming both the rendered HTML and props data, avoiding React hydration errors that occur when server-rendered markup does not match client-rendered pages. By utilizing middleware, users can customize what's displayed per user without requiring full server-rendering strategies, making it an ideal solution for personalization, split testing, and A/B testing.

The Jamstack community will be recognizing innovative projects and individuals who are pushing the boundaries of the Jamstack ecosystem through the annual Jammies awards ceremony, which will take place at Jamstack Conf. The nomination deadline is September 23rd, and nominations can be submitted for eight award categories, including Social Impact Award, Ecosystem Innovation Award, Jamstack Project of the Year, and more. The community will then vote on the top nominees, with winners announced throughout the conference on November 7th and 8th. The Jammies awards aim to showcase the incredible work being done within the ecosystem and provide a platform for recognition and celebration of outstanding achievements in the Jamstack community.

Now you can use Netlify’s collaborative Deploy Previews for pages built with Incremental Static Regeneration (ISR) or Server-side Rendering (SSR), allowing developers to invite teammates to leave feedback on web pages while a pull request is still open. This feature, now available for pages built with ISR/SSR, enables collaboration and testing of projects in development using frameworks like Next.js. With the new functionality, users can quickly share videos, screenshots, and comments directly into tools like GitHub or JIRA, making it easier to gather feedback and test projects without the hassle of typing out long URLs or navigating app UIs.

The SvelteKit has undergone significant changes, including a new routing system, layout overhaul, and a switch to the Vite CLI. The old file-based routing system has been replaced with directory-based routing, requiring a + prefix to generate routes. This change aims to improve code organization and reduce confusion. Additionally, the load function has moved from .svelte files to endpoint files, allowing for more flexibility in data loading. The exports that dictate page behavior have also changed, and SvelteKit is now a Vite project with a vite.config.js file. A migration guide and command, npx svelte-migrate routes, are available to help users navigate these changes. To migrate, users need to remove old lock files and node_modules, update dependencies, run the migration command, update props in +page.svelte files, remove <script context="module"> tags, and ensure scripts have been updated to the Vite CLI.

Netlify has released a new runtime for Next.js, which allows developers to transform content at the edge without client-side JavaScript or complicated server-side strategies. The new runtime environment is available on Netlify today and includes a new package `@netlify/next` that extends what's possible with Next.js Middleware. With this release, developers can achieve personalization use cases like localization and authentication with better performance and less effort, and unlock access to modify responses and request headers at the edge. The new runtime environment is perfectly fitted for running Next.js with zero configuration, and includes additional features unique to Netlify's platform such as a GraphQL-powered API mesh and granular release management features.

Next.js Advanced Middleware allows developers to intercept and rewrite the response of a Next.js statically generated page at the edge based on geolocation data, transforming page props on the fly. With Netlify Edge Functions, this middleware can run code before an HTTP request is completed, modifying the HTTP response before it's returned. The middleware can be used to personalize pages with location-specific content, and can also update page props using `setPageProp`. The process involves creating a new Next.js project, adding a static route, and writing middleware code in TypeScript that uses Netlify Edge Functions to rewrite the HTML response. The demo site is deployed to Netlify, where the changes can be seen in real-time on a live URL.

The Netlify UI has been updated to allow teams to set different values for specific branches on environment variables. This change allows developers to manage branch-specific configurations and preview site updates with specific API tokens without needing netlify.toml configuration or build plugins. The update also includes support for the Netlify CLI and API, enabling teams to scope environment variables and set values for specific deploy contexts using new flags and endpoints. With this change, shared environment variables will apply to all Sites in a Team, and developers can now locally emulate builds from specific branches using the `netlify dev` command.

Netlify has achieved ISO 27001 certification, demonstrating its commitment to keeping customer data safe and secure. The company's Information Security Management System was established over a year ago and underwent rigorous testing and operationalization. This achievement further solidifies Netlify's leadership in the cloud security space, providing customers with an independent third-party assurance of their trust. ISO 27001 is an international standard for managing information security, detailing requirements for establishing, implementing, maintaining, and continually improving an ISMS. The certification provides a model for establishing best practices, allowing customers to verify Netlify's security practices and maintain trust in the company's data protection measures.

Netlify Scheduled Functions allow users to automate their deploys on a regular interval, making it easier to manage static websites with new content every week. These functions are considered experimental and require enabling them in Netlify Labs. A scheduled function consists of a CRON expression defining the interval and a callback function that will be executed at this schedule. Users can define their scheduled functions directly in their serverless functions or within their netlify.toml file, with the latter approach being more suitable for those familiar with serverless functions. To get started, users need to install required dependencies, configure a build hook, and create a new serverless function that invokes the schedule helper function. The CRON expression is used to define the interval at which the function should run, and it can be customized to fit specific needs. Once deployed, scheduled deploys will automate the deployment process, making life easier for developers managing their websites or applications.

Personalization is a key aspect of creating customized experiences for website visitors in 2022. Shipping less client-side JavaScript is also a significant topic, with new front-end frameworks like Astro and Eleventy aiming to reduce the need for JavaScript by default. Netlify Edge Functions enable dynamic personalization without requiring client-side JavaScript, offering a great developer experience and better end-user outcomes. With Edge Functions, developers can intercept HTTP requests, transform responses on the fly, and return updated responses to browsers. This allows for personalized experiences without relying on browser JavaScript. The tutorial demonstrates how to use Netlify Edge Functions to add personalization to static HTML with no browser JavaScript required, making it a valuable tool for reducing client-side JavaScript in the browser while still providing a personalized experience for users.

Astro v1 has been released, offering a new way for developers to create server-side rendered (SSR) applications with Netlify Edge Functions. To help get started, resources such as starter templates and documentation pages have been created by the Astro team, including an Astro Netlify Edge Function Starter Project that uses Astro's @astrojs/netlify package to deploy sites with SSR enabled. Additionally, quickstart templates for lightweight projects and a toolbox template for integrating various Netlify features are also available. With these resources, developers can create their own Astro projects on Netlify and take advantage of the new features and capabilities offered by Astro v1.

The Netlify documentation team uses a combination of user feedback forms, support pairing, and internal stakeholders to monitor and improve the quality of their documentation. They receive around 14 pieces of feedback for every 10,000 page views, with freeform comments providing actionable insights into customer pain points. The team has published 40 updates based on this feedback in the past six months, and uses collaborative Deploy Previews to gather reviews from support colleagues when making updates. To ensure empathy for users and maintain knowledge outside of specific focus areas, the Docs team engages in regular feedback-related rotation work. Additionally, internal stakeholders from across the company highlight content gaps or note customer issues, which informs the prioritization of content overhaul projects. The team aims to move towards more collaborative documentation with the community, while continuing to assess user success and address customer problems.

You can create a production-ready application using Remix and Tailwind CSS together, which makes getting started easily. To set up Remix, run `npx create-remix@latest` to start the CLI and follow the prompts to select your project type and deployment target. After setting up Remix, install the required packages for Tailwind, initialize it with `npx tailwindcss init`, and configure the file paths in the `tailwind.config.js` file. Replace the scripts in the `package.json` file with new ones that use Tailwind to generate CSS files and update build and dev scripts. Create an initial location for the CSS and add the @tailwind directives, then run `npm run dev` to generate the output CSS file. Finally, import the generated CSS into your app's root component and start using Tailwind classes in your components to style your application.

The Jamstack Conference is a gathering of developers to discuss modern web development technologies and techniques that don't require a server as part of the solution. The conference will take place in San Francisco with an in-person format, allowing for more people to share their stories and experiences. Proposals are now open until August 12th, and the team invites speakers from all backgrounds and skills to submit their ideas. The conference focuses on topics such as web development best practices, Jamstack case studies, modern browser capabilities, integrations, services, APIs, and responsible web development. Successful applicants will receive a speaker's honorarium, travel expenses, accommodation, support in crafting their presentation, and more. The event also features workshops, the expo, social events, and a livestream for those unable to attend in person.