June 2021 Summaries

When it comes to implementing a checkout process on an eCommerce site, using Stripe's API can be a quick and efficient solution. By integrating Stripe into an Angular application using Netlify Functions, developers can leverage Stripe's expertise in payment processing while still maintaining control over the user experience. The project involves setting up Stripe credentials, creating a serverless function that interacts with the Stripe API, listening for button clicks to trigger the function, and making a function to load Stripe and redirect users to the checkout page. With this setup, developers can focus on building their application's UI while leaving the payment processing to Stripe.

Deploy previews empower teams to collaborate on changes early in the development cycle, speeding up the development cycle and paving the way for better end-to-end testing. With deploy previews, every commit has its own public URL, allowing teams to test as soon as they commit, find bugs before deploying to staging or production, and reproduce and share test failures with ease. This enables companies of all sizes to leverage modern tooling to test as fast as they commit, reducing the time it takes to run tests from hours to a few minutes. Deploy previews also help remove environment differences as a cause of test failures, making it easier for teams to identify and fix issues.

Supabase is a database as a service that offers an elegant API, lovely documentation, and a shallow on-ramp for quick development. It provides an intuitive UI to create tables and supports various authentication methods to access data programmatically without leaking sensitive details. The Supabase JavaScript client can be used with serverless functions to save content and retrieve it. With its dynamic API documentation, users can discover how to work with their data quickly. The API allows for various query options, such as filtering by specific values or columns. Supabase is a great choice for rapidly adding data persistence and querying capabilities, either during the build process or dynamically from serverless functions.

Ghost Inspector is a tool that allows you to record and run automated browser tests for your websites and web apps from the cloud, making it easy to get started with end-to-end testing. Their no-code editor simplifies building and maintaining automated tests, while advanced features allow experienced testers to dig deeper into edge cases. The Ghost Inspector Build plugin integrates seamlessly with Netlify builds, automatically running E2E tests on every deploy, allowing you to bake testing into your deployment process. This plugin can be easily configured to run in specific contexts, such as previews or production environments, and can be installed through the Netlify UI or GitHub repository. With this plugin, developers can power up their builds with comprehensive end-to-end testing, ensuring that their web applications are thoroughly tested before going live.

The Jamstack community is invited to participate in the second annual Jamstack Community Survey, which aims to understand who is building Jamstack sites and apps, what tools and best practices are being used, and how the community has grown or changed over time. The survey is designed to provide a sense of context for everyone in the ecosystem and can help participants navigate current pain points or reassure them about their choices. The results will be shared with the community for free online, and at the upcoming Jamstack Conference event in October. The survey should take just 10 minutes to complete and is optional, with a special edition Jamstack sticker available to those who share the survey on social media.

The Netlify engineering team has migrated their Cypress tests from a GitHub action to a custom Netlify Build Plugin. This migration was done due to issues with the original workflow, such as failed tests on deploy previews and missing notification of test failures in production. The new plugin provides more control over testing and output, including running tests on deploy successes, updating status checks on GitHub, displaying information in the deploy summary, and posting Slack messages when tests fail in production. The team has built their own plugin to combine both Cypress and Percy visual regression tests, allowing for more flexibility in test execution.

The Jamstack offers several cool features that can improve development efficiency, user experience, and security. Build hooks allow for automated communications between services, while caching ensures smooth performance. Netlify provides various tools such as build plugins, Git integration, and background functions to further enhance the development process. These features enable developers to personalize their projects, manage dependencies, and optimize site performance, ultimately leading to a better experience for users.

The Netlify's second Headless Commerce Summit provided a platform for presenters to share their stories and hard-won lessons on e-commerce on the Jamstack, highlighting that there is no one-size-fits-all approach to e-commerce on the Jamstack. The summit featured talks from various companies including Spring, Manscaped, ComplexLand, Everlane, Buskana.com, Algolia, Commerce Layer, BigCommerce, and others, showcasing their experiences with headless commerce and its benefits such as better customer experiences, improved performance, and increased scalability. Attendees can now access the summit videos to learn from these companies on how they implemented headless commerce strategies for their businesses. The event also highlighted the importance of team adoption, workflows, and adoption strategies in getting the benefits of headless commerce.

Next.js has become a popular framework for building React applications, particularly in the Jamstack. Initially, Next.js was not compatible with the core Jamstack principle of prerendering statically generated sites, but it later introduced better support for static site generation and server-side rendering, allowing developers to build both types of applications and hybrid models that combine them. This enables the benefits of the Jamstack, such as speed and security, while still leveraging Next.js's features, making it an attractive choice for building Jamstack applications.

Nuxt Image is a plug-and-play image optimization module designed to simplify the process of managing images on the modern web. It allows developers to generate optimized images in various sizes and formats, while also providing a seamless way to add responsive breakpoints to their HTML code. By leveraging Nuxt Image, developers can reduce the overhead of manually generating and optimizing images, resulting in improved site performance and easier maintenance.

Google's recent update to Core Web Vitals prioritizes user experience on websites, ranking search results accordingly. The three pillars of Core Web Vitals are speed, responsiveness, and visual stability, measured by Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) respectively. LCP measures perceived load speed, FID measures interactivity, and CLS measures visual stability. To improve these metrics, developers can optimize images, reduce JavaScript execution time, cache assets, avoid excessive DOM size, and adopt a Jamstack architecture on Netlify, which enables compression, minification, and caching by default, resulting in faster site delivery and better user experience.

A developer created a database-driven Eleventy site using a MySQL database, leveraging the StepZen Netlify Build Plugin to deploy a GraphQL API that pulls data from the database. The process involves setting up a MySQL database and a Hugo site, creating a GraphQL schema connected to the database using StepZen, and then deploying the site to Netlify with the StepZen plugin. The developer created a Node script to pull content from the StepZen API and generate Markdown files for the site. The process can be easily adapted to other static site generators like Next.js or Gatsby, and also supports multiple data sources through GraphQL queries.

We are so very excited to announce that you can now be rewarded for learning, literally. When completing a mission with Jamstack Explorers, users receive a pack of JAMazing stickers as a reward, which can be redeemed by copying their reward code and clicking on the link to see the stickers and add them to their cart. Users can browse the Swag Store or apply the reward code to checkout and show off their smartness with stickers. The Jamstack Explorers missions cover various topics such as serverless functions, building a lyric blog, Angular dynamic data, Next.js, Netlify redirects, and more, providing users with valuable learning experiences and fun rewards.

React 18 has been released with new features that bring significant improvements to the React ecosystem. The New Root API replaces the Legacy Root API, allowing developers to upgrade their client without major code changes. This change also enables improved performance and responsiveness in applications. Suspense, a long-awaited feature, now offers full support for delayed transitions, placeholder throttling, and coordinated component rendering. Additionally, React 18 introduces several opt-in features, including startTransition, useDeferredValue, SuspenseList, and server-side rendering with selective hydration, which can be used flexibly throughout the application. These new features are available through the `@alpha` tag in npm, allowing developers to install React 18 and begin exploring its capabilities.

This template project is a pre-rendered Angular project using Scully static site generator and Netlify setup, providing a head start for developers to easily deploy their next project to a global CDN. The project is open-sourced and can be used by clicking the "Template" button or cloning the repository locally with a new name if desired. To run the project, developers can use the Angular command `ng serve || ng s` to serve the site at localhost:4200, rebuild with changes using `ng build`, and deploy to Netlify's CDN using the Netlify CLI. The template also includes features such as continuous deployment and collaborative preview capabilities, allowing teams to give impactful feedback on projects. The project is open to contributions and welcomes issues and pull requests from developers.

The Netlify team has introduced several updates to the Deploy Previews feature, which enables project reviewers to comment, screen record, and annotate within a preview while all feedback gets posted in the GitHub pull request or connected tools. The new features include the ability to drag the Netlify Drawer icon to move it to any corner of the preview, adding permalink and branch deploy link access to the Deploy Preview Settings, and making avatar titles accessible to screen readers in GitHub. These updates aim to improve the Reviewer experience and make getting feedback from Reviewers easier and more accessible for unlimited users.

At this year's Headless Commerce Summit, Nacelle CEO Brian Anderson and Senior Sales Engineer Devin Saxon discussed Eventual Consistency and Interoperability in Headless Commerce. They compared microservice vs monolithic eCommerce architecture, highlighting that while monolithic systems are easy to start with and have ACID guarantees, they can become expensive to scale and are not ideal for bespoke services. In contrast, microservices promote best-of-breed strategy, flexibility, and the ability to quickly change tools. The three common ways to go headless were discussed, including a "Daisy Chain" approach that leaves room for eventual consistency issues, a model where all backend systems communicate independently with the frontend, and an approach using an abstraction layer and event-driven core, which Nacelle's platform is built on. This last approach addresses interoperability concerns and provides flexibility without requiring significant upfront costs.

Netlify is now offering Gatsby Functions, a serverless functions feature, as part of its Essential Gatsby plugin. This allows developers to quickly set up a serverless API for their Gatsby sites. The new plugin provides support for incremental builds and image caching, making it easier to build fast and scalable websites. To get started, install the plugin in your Gatsby site as a dev dependency, add it to your netlify.toml file, and commit the changes. Then, push to your repository, and Netlify will rebuild your site with full Gatsby Functions support. The Essential Gatsby plugin is officially supported by Netlify and makes Gatsby work on Netlify "out of the box." Developers can try out the new plugin and send feedback to help improve its functionality.

The VMware Tanzu Developer Center, built on the Jamstack approach with Netlify as its hosting provider, has seen a significant increase in user engagement, tripling expectations within the first year of launch. The site's success can be attributed to its ease of use, collaboration features, and dynamic capabilities, which allow developers to create and contribute content without requiring extensive technical expertise. With Netlify's deploy previews, instant rollbacks, and continuous integration and deployment tools, the team was able to minimize friction and maximize productivity, ultimately achieving a scalable web architecture that can support growth with a small team of three. The site's foundation is built on Hugo, which provides quick builds and integrates well with GitHub, making it an ideal choice for the Jamstack approach. By leveraging Netlify's capabilities, VMware has created a developer-centric platform that enables collaboration, reduces technical overhead, and fosters innovation.

This year has seen significant growth in static site generators (SSGs) as developers continue to prioritize rapid development workflows, integrations, and performance. Gatsby remains a popular choice, leveraging React and GraphQL for a robust component model and plugin ecosystem. Next.js gained popularity in 2021, focusing on hybrid SSG/SSR models and server-side rendering with support for incremental regeneration. Nuxt.js offers a Vue-based approach, providing modularity and composability through its underlying Vue component model and plugins. Jekyll continues to be a trusted tool, particularly within the GitHub environment, while Hugo delivers fast site build speeds and a large library of ready-made themes. Gridsome is a Vue.js-powered framework for building static generated websites & apps, emphasizing progressive enhancement and hot-reloading. Docusaurus is focused on delivering documentation sites, utilizing MDX for content writing and embedding JSX/React components into markdown. Eleventy remains popular among performance-focused developers, offering transparency and unobtrusiveness in its site generation process. Scully delivers SSG capabilities to Angular applications, while SvelteKit adopts a progressive enhancement approach with Svelte components and serverless back-ends. Vite is an open-source project aiming to provide a faster and leaner development experience for the web, leveraging Rollup and smart defaults. With new tools emerging and approaches evolving, this space continues to be interesting and dynamic.

Netlify has been busy in May, announcing its first acquisition and the next generation of Deploy Previews, which aims to help teams gather feedback faster on web projects. The company has also made several product improvements and helpful updates, including a new Build Image based on Ubuntu 20.04 Focal Fossa, a feature to configure Build Plugins by deploy context, and the ability to delete forms through the Netlify UI. Additionally, Netlify welcomed FeaturePeek to its team to deliver Deploy Previews, and has seen success stories from companies like Pan Macmillan, which saw a 25% conversion increase after migrating to Netlify.

Shallow routing in Next.js allows for changing website URLs without re-running data fetching methods again, making it useful for adding query strings or routes that change based on user behavior. To use shallow routing, the `useRouter` hook is used with `{ shallow: true }` added to router push commands. This technique can be applied manually by developers to improve performance and reduce database queries in their applications.