November 2022 Summaries

With Netlify Edge Functions, developers can serve content from the CDN server closest to the user, modifying network requests at the edge with JavaScript or TypeScript. PolyScale is a Global Database Cache as a Service that allows developers to cache database data locally to users, reducing latency and scaling throughput. In this tutorial, the author uses Astro as a framework and creates an Edge function using Deno to query a Supabase database through PolyScale, demonstrating how to bring edge functions to any project and make interactions with databases blazingly fast. The author sets up a Supabase database, creates a PolyScale cache, and writes an Edge function that queries the DB, showcasing the benefits of caching database data locally to users. With this setup, developers can now apply this technique to applications where they have a database setup, pulling in the edge function into the action to improve performance.

Serverless solutions are empowering small teams to focus on their business by reducing operational management. Serverless infrastructures provide scaling on-demand, distributed systems lower network latency for users, and superior end-user experiences. When making architectural decisions, engineers need to consider performance impacts, cold start times, long running processes, network overhead, and vendor lock-in. Building a fully-composed web application requires deploying static assets to a Content Delivery Network (CDN), building an API with Serverless Functions, providing authentication with an Identity Provider, providing dynamic data with a Serverless Database, handling cron jobs and long-running processes, and implementing Continuous Integration. To build a composed stack, consider using Cloudinary for image optimization, Contentful for content management, Algolia Search for search engines, Stripe for payment processing, AWS WebSocket APIs in Amazon API Gateway for web sockets, HERE for geocoding, Plaid for financial data access, and shared modules to keep code DRY. Front-end considerations include using Web Components for composable components. To get started with Netlify, Fauna, GitHub Actions, Stencil, and a local shared module, use the starter repository as an example.

You can now delegate a subdomain to Netlify DNS without having to bring over the apex domain, allowing you to manage subdomains like app.example.com while leaving the primary domain on your existing DNS service. This move provides several benefits, including easy branching for multiple environments, automatic SSL certificates, and improved content delivery network (CDN) performance. To set up this feature, you need to ensure your domain registrar supports NS records on subdomains and then follow a few steps in the Netlify UI, which may take 24 hours or more to propagate. The new feature is based on customer requests and invites feedback from users.

Bandwidth is a crucial factor to consider when choosing a web host, as excessive traffic can lead to slower load times, website crashes, or overage fees. To calculate bandwidth usage, developers must estimate page weight, average pageviews per day, and downloadable content. A simple equation calculates the required bandwidth by multiplying these factors with a redundant factor of 1.5. Optimizing for bandwidth involves reducing page weight through image optimizations, caching settings, lazy loading images, and monitoring optimizations. Some web hosts, like Netlify, offer increased bandwidth limits in their plans to minimize overage fees.

The text discusses the importance of Open Graph (OG) images in social media platforms like Twitter, Facebook, and Slack. The author, Tuple, ran a campaign to send OSS developers on vacation and wanted to create a compelling experience for their community. They used Netlify Functions to dynamically generate thousands of custom OG images based on user votes. The process involved creating a generator.js file that would use Puppeteer to launch Google Chrome, load an HTML template, take a screenshot, and return it as an image. The images were made dynamic by using a double mustache templating syntax to replace placeholders with user data. To pass through each user's dynamic key, they used Netlify's experimental Edge Functions to modify the OG image tag. The Edge Function would inject the key into the HTML and then use it to look up the user's vote in a database and construct the image based on their data. This allowed them to create a unique image for each user without having to host or scale the images themselves. The process can be simplified or complicated as needed, and the possibilities are endless.

The 'edge' refers to data centers that live outside of an Availability Zone (AZ), where Edge Functions run on these data centers. These Edge Functions can handle requests for users in different regions, reducing latency and improving performance by serving content closer to the user. They have lower CPU time limits compared to standard serverless functions and are better suited for handling frequent requests such as authenticating users or A/B split testing. By transitioning server-side rendered pages to static ones using Edge Functions, sites can improve performance, reduce costs, and simplify their architecture.

### Localizing to the user’s dialect of Spanish using Next.js Middleware and Netlify Next.js middleware is a software layer that sits between an operating system (like a web server) and its applications, allowing for efficient ways to deliver localized and translated content. By leveraging Next.js advanced middleware on Netlify's servers, developers can intercept requests-in-progress, rewrite, redirect, add headers, or set cookies to their content. This enables the creation of personalized experiences based on geolocation data, such as localized text and page props in a website. The tutorial demonstrates how to set up Next.js middleware with Netlify by installing required packages, setting up a development server, creating a middleware file, editing an index page to work with middleware, deploying to Netlify, and accessing the prototype in action.

Serverless WebSockets` is a concept that may seem contradictory at first, as `serverless` implies a lack of server management, while `WebSockets` require a persistent connection between a client and a server. However, by using a service like Ably, developers can maintain a WebSocket connection in a serverless environment without the operational overhead of managing a server. Ably provides auto-scaling, managed WebSocket servers that eliminate the engineering overhead of managing a WebSocket connection, allowing developers to focus on building engaging experiences with WebSockets. By leveraging Ably's service, developers can create interactive, multi-user experiences in their serverless environments without worrying about scalability, maintenance, uptime, or patching. The Ably platform provides a simple and seamless way to integrate Realtime Edge Messaging into serverless applications, making it easy to add real-time functionality to apps.

The 2022 Jamstack Community Survey reveals that a significant majority of developers are working remotely, with 55% saying they would quit rather than work in person. The survey also shows that serverless technology has become increasingly popular, with 70% of developers having tried it and 35% using it regularly. Additionally, the survey highlights the growing adoption of Next.js, with 47% of developers reporting regular use. The CMS space is undergoing a transition, with WordPress declining in usage share and new challengers emerging. The full results are available on Jamstack.org.

Scopes and contextual values for environment variables are now generally available on Netlify, offering new features such as scope limits and deploy context-specific variable settings. These changes aim to improve the management of environment variables, allowing developers to better control data access and reduce potential issues with Lambda functions. The new experience is production-ready and can be used across all sites today, with existing teams able to opt-in on a site-by-site basis or automatically migrate to the new experience in early 2023.

The Netlify Lighthouse Integration allows users to access Google Lighthouse auditing tool directly on their deploys, providing a full report on performance, accessibility, SEO, and more. The plugin offers various features, including custom settings for specifying subdirectories, failing builds based on scores, and setting the type of experience. New features include serving only a specified subdirectory, failing builds when a score isn't met, setting locale and language for reports, and running Lighthouse audits for desktop experiences. Users can install the plugin with a one-click install or configure it through the netlify.toml file. The plugin is available in the latest version of 4.0, and users need to have the latest version to access all the new features.

We've got a brand new Nhost starter template for you! You can check out the code and clone the project here: https://github.com/nhost/nhost-netlify-starter-nextjs-reactquery or click the button below to step through the process of creating a new repo, new Netlify project, and deploy it (you will need to add Nhost env vars to get full functionality). For a full step-by-step tutorial, check out this YouTube video: Deploy the Next App with Netlify. To deploy the app, you can either clone the existing repo or create a new Netlify project and connect it to your own repo. Once deployed, you'll need to set two environment variables in your Netlify project via the dashboard to get the full functionality of the app. These environment variables are located in the upper right corner of your nhost project dashboard under "Project Info". With these variables set, you can trigger a new deploy and everything will work as expected!

Netlify has implemented a new Email Integration feature that enables users to customize email templates, inject dynamic parameters, and preview them during development. This integration streamlines the process of setting up email triggers by allowing developers to configure email triggers and edit templates directly in their source code, resulting in time savings and reduced complexity. The integration also provides a fetch snippet for triggering emails, which can be used to send requests to an email handler for custom email templates. Additionally, Netlify Functions can be used to send emails directly from the project code, allowing developers to trigger emails based on various events such as form submissions or data changes. With this feature, developers can test and deploy their email services more efficiently, making it easier to manage email workflows in their web applications.