Natalie Marleny

Fouad Matin


Originally published on the [Indent Blog](https://indent.com/blog/scan), written in collaboration with [Fouad Matin](https://fouad.org)

**Indent provides on-demand access for cloud apps and infrastructure.**

We built a free tool called [Indent Scan](https://indent.com/scan) to make finding potential security violations in your stack as easy as possible.

[Interactive example scan report](https://indent.com/scan/example)


Paul Burt


Originally published on the [Indent Blog](https://indent.com/blog/reviewing-web-ui-prs), written in collaboration with [Paul Burt](https://indent.com)

**Indent provides on-demand access for cloud apps and infrastructure.**

Implementing the UI poorly for Indent carries significant risks and consequences:

- In the worst-case scenario, inadequate quality in our engineering process poses a risk of creating **security vulnerabilities**.
- If our UI is not intuitive and user-friendly for our customers, there is a possibility that they may **misconfigure** their system, potentially leading to unauthorized access.
- Failing to deliver a delightful user experience could prevent us from establishing a solid **reputation** and building **trust** with our users.

This is why it’s been so important to us to put in place processes to ensure our UI updates are thoroughly reviewed and tested. We spent so much time thinking about this, we wanted to share our playbook. For the purposes of this guide, let’s use the Indent dashboard as an example.

The web application called "[dashboard](https://indent.com/home)" is the part of Indent that our customers interact with the most. They leverage the dashboard to view and manage many security controls important for their setup. This type of web application relies heavily on displaying and controlling system configuration using common web elements like forms, inputs, tables and lists.

![A screenshot of the Indent Dashboard in 2023](../static/ultimate-guide-to-reviewing-web-ui-prs/dashboard-desktop.png 'Indent Dashboard Desktop')


Given the high importance of the correctness of the configuration in the dashboard, we deem it critical to always provide our users with:

- relevant and up-to-date data
- robust controls allowing for a predictable UX when affecting this data
- a pleasant overall experience that delights our users

## “Web app page-completeness” checklist

When we implement a new feature in the dashboard, it usually consists of creating a new page to host it. To ensure we meet the requirements listed above, we need to get many different aspects of our pages just right. Occasionally we’ve missed the mark on an update because it was hard to keep track of what needed to be implemented on a particular page for it to be release-ready.

This is why we decided to take a page from NASA’s playbook and note all of the elements of a successful page update in a checklist. Checklists are a powerful and arguably an underutilized engineering tool, perfect for launching rockets and new features.

![One of the checklists from the Apollo missions](../static/ultimate-guide-to-reviewing-web-ui-prs/apollo-checklist.jpg 'Apollo Launch Checklist')

We call the checklist that we created the “Web App Page-Completeness” checklist. Utilizing this checklist as the guideline document keeps our team in sync about the important components of an update during the development process. Team members with different purviews can contribute to the checklist in their own unique ways:

- Team members focusing on design use it to provide visual guidance in the interest of standardizing the UI visually. For example, we now require that a 404 (Not Found) page still displays the navigation menus.
- Team members focusing on the logic provide coding guidance in the interest of standardizing the UI behavior, thus improving the development speed and the robustness of the UI. For example, we require the use of a specific Spinner component to represent the loading state.

We don't formally track each item for every code change, but instead rely on the familiarity and judgment of our team members that implement and review the code. Alternatively, the checklist could be used as a metric, indicating the completeness of a page within the development team in the PR implementing a page or within a code comment.

In an ideal world all of the requirements from the checklist could be checked automatically (via a lint rule), but we’ve yet to implement that. Some of the items in the checklist are applicable to all of the pages of a web app, while others are applicable only if the page meets certain conditions (for example, the page has a dynamic path).

### Here’s our Web App Page-Completeness checklist:

- Clearly indicate states
  - entire page is loading
  - entire page is revalidating (while showing stale data)
  - entire page is being submitted (create, update, delete)
  - a page element is loading
  - a page element is revalidating (while showing stale data)

- Handle data appropriately
  - indicate when data is missing (404 page)
  - ensure data is fresh (periodic update, live update or update on focus)
  - ensure data is robustly retrieved (re-fetched on failure)
  - ensure common utilities are used consistently
  - in-app links between pages (next/link)
  - data fetching (SWR, TanStack Query)
  - local storage management
  - global state management

- Indicate status where appropriate
  - notify on success
  - notify on recoverable failure
  - notify on unrecoverable failure

- Forms
  - consistently validate forms
  - highlight invalid inputs
  - disallow saving if local data equals remote data
  - highlight inputs whose data differs from remote data

- UX
  -  page is responsive (renders well on mobile)
  - page is keyboard navigable
  - page is navigable by screen-readers
  - page code is semantic
  - page code is performant

- Help
  - tooltips on hover where appropriate
  - “help” or “contact support” where appropriate

## Tools > Process
Our checklist is possibly the biggest offender to our general view that tools should be favored over process, since process can only go so far.

Tools help make doing the right thing easy by containing the codification of the principles that the team has agreed upon.

### *Here’s a quick overview of some of the tools we find the most helpful:*

### Comments in Vercel for Feedback
Getting feedback from your fellow teammates is a breeze when providing feedback is so easy, so we’ve been loving comments in Vercel Deployments. Since we started using this Vercel feature, we’ve found that previews speed up time-to-feedback by 80% ([Indent case study](https://vercel.com/customers/how-indent-delivers-secure-access-with-next.js-and-vercel)).

### Lighthouse for Accessibility and Performance Tracking
To track the accessibility and performance of our app we frequently check our Lighthouse score. We’ve found that using Next.js as our UI framework is getting us a long way towards our goal by itself. In addition, it’s really easy to keep our app responsive since we’re styling our app almost exclusively with Tailwind CSS which is famous for its “mobile first” philosophy.

### Playwright for E2E Testing
There are many tools that allow for E2E testing of a Web app, but our favorite is Playwright. We’ve found it really straightforward to write sophisticated checks that keep the core experience of our web app stable even when our app changes a lot.

### Hemingway and ChatGPT for Copy Checking
When we need to check a copy somewhere in the Indent app, [Hemingway](https://hemingwayapp.com/) and [ChatGPT](https://chat.openai.com/) are supremely useful.

### Suggestions Welcome
By using the right tools, whether they be checklists or software, we’ve found that we’re able to release higher quality updates more quickly. We’re always eager to hear how other folks approach their releases. If we missed anything or if you have an amazing tool to share, please reach out!


The Ultimate Guide to Reviewing Web UI PRs. Originally posted on the Indent Blog.

Launch Checklist

Indent Scan Interactive Demo. Originally posted on the Indent Blog.

Indent Scan Interactive


Originally posted on the [Indent Blog](https://indent.com/blog/sanity-plugin-referenced-by)

Given the size of our team and the need to revamp the marketing content for our website, we've decided to move the marketing content to a headless CMS.
We've chosen <a href="https://sanity.io/">Sanity.io</a> for this purpose.

<video
    src="https://user-images.githubusercontent.com/31798108/173065472-95294be4-7fc1-4f19-ba6c-e313c67acbed.mov"
    data-canonical-src="https://user-images.githubusercontent.com/31798108/173065472-95294be4-7fc1-4f19-ba6c-e313c67acbed.mov"
    controls="controls"
    style={{ marginTop: 32, marginBottom: 32 }}
>
    {" "}
</video>

Sanity.io is an excellent developer tool and CMS. We thought a plugin which would show at a glance which documents reference a specific document would extend its capability even further.
Think of this functionality as "backlinks", a concept popularised by <a href="https://roamresearch.com/">Roam Research</a>.

This plugin was built as an internal tool for Indent and subsequently we decided it would be useful to share with the community.

<div className="w-full mt-9 mb-8 sm:h-16 flex flex-col items-center">
    <div className="flex items-center mt-3">
        <a href="https://www.sanity.io/plugins/referenced-by" className="flex">
            <div>sanity.io/plugins/referenced-by</div>
        </a>
    </div>
</div>

The `sanityio-referenced-by` plugin is available on [NPM](https://www.npmjs.com/package/@indent-oss/sanityio-referenced-by"), and the source is available on [GitHub](https://github.com/indentinc/sanityio-referenced-by). Included is an [example](https://github.com/indentinc/sanityio-referenced-by/tree/main/example) directory to help with getting started. We'd love to hear your feedback:

<div className="w-full mt-9 mb-8 sm:h-16 flex flex-col items-center">
    <div className="flex items-center mt-3">
        <a
            href="https://www.npmjs.com/package/@indent-oss/sanityio-referenced-by"
            className="flex justify-center items-center"
        >
            <img
                style={{ height: 32, width: 32 }}
                className="w-6 mr-2"
                src="https://logo.clearbit.com/npmjs.com"
            />
            <div>npmjs.com/package/@indent-oss/sanityio-referenced-by</div>
        </a>
    </div>
</div>

<div className="w-full mt-9 mb-8 sm:h-16 flex flex-col items-center">
    <div className="flex items-center mt-3">
        <a
            href="https://github.com/indentinc/sanityio-referenced-by"
            className="flex justify-center items-center"
        >
            <img
                style={{ height: 32, width: 32 }}
                className="w-6 mr-2 sm:inline-block"
                src="https://logo.clearbit.com/github.com"
            />
            <div>github.com/indentinc/sanityio-referenced-by</div>
        </a>
    </div>
</div>

## Credit

Thank you to [Devin Halladay](https://www.sanity.io/exchange/community/theflowingsky) for writing up a recipe: [List Referring Documents (Backlinks) in Sanity](https://www.sanity.io/schemas/list-referring-documents-backlinks-in-sanity-1a8ada64).
This plugin builds upon Devin's recipe on how to setup backlinks for a specific document. The "Referenced By" plugin differs from Devin's receipe in that the backlinks are extracted into their own dedicated view. This view has been conveniently packaged into an easy to install plugin.

## Installing the plugin:

1. Install the `@indent-oss/sanityio-referenced-by` plugin using the command line:

    - NPM

    ```bash
    npm i @indent-oss/sanityio-referenced-by
    ```

    - Yarn

    ```bash
    yarn add @indent-oss/sanityio-referenced-by
    ```

2. Add `@indent-oss/sanityio-referenced-by` to `sanity.json` "plugins":

```json
  // /sanity.json
  "plugins": [
    "@indent-oss/sanityio-referenced-by"
  ],
```

3. Add `sanity-structure.js` reference to `sanity.json` "parts":

```json
  // /sanity.json
  "parts": [
    {
      "name": "part:@sanity/desk-tool/structure",
      "path": "./sanity-structure.js"
    }
  ]
```

4. Create and/or update `sanity-structure.js` in the root directory:

```js
// /sanity-structure.js
import { ReferencedByView } from "part:@indent-oss/sanityio-referenced-by";
import S from "@sanity/desk-tool/structure-builder";

export const getDefaultDocumentNode = () => {
    return S.document().views([
        S.view.form(),
        S.view.component(ReferencedByView).title("Referenced by"),
    ]);
};

export default () => S.list().title("Base").items(S.documentTypeListItems());
```

The "Referenced By" plugin tab will now appear in your Sanity.io Studio Project.


Plugin built for Sanity Studio to see which documents reference a particular document

Sanity Plugin: Referenced By


> I don't quite understand what you're working on at the moment, but I can see that you're very happy.
- My friend's mother, 2021

I first became aware of [Indent](https://indent.com) when one of my best friends and a person whose accomplishments I very much admire, [Tim Neutkens](https://x.com/timneutkens) suggested I check out the interesting work of [Fouad Matin](https://x.com/fouadmatin) (CEO of Indent) and made an introduction.

When the pandemic arrived, I found myself starting my own development agency — a story for another time. Bootstrapping my own company was a joyful and successful enterprise, and I'd really recommend giving running your own company a try if you think this would be interesting to you. After announcing on Twitter that I was branching out and starting my own development agency, Fouad was the first start-up client to proactively reach out to me. I became the first external contributor to the Indent codebase as a contractor on a part-time basis. 

What immediately appealed to me about Indent is that: 

1. The company were using cutting edge technologies
2. The team were solving a difficult-in-the-right-way problem
3. Indent had a world class list of investors and some very notable customers.

I found myself really drawn to the product we were realising at Indent, and found myself learning more from my one-to-one talks with Fouad than I could from any podcast or business book. After months of collaborating and building some interesting features — I was asked to consider joining Indent on a permanent, full-time basis.

**When assessing an opportunity like this, I evaluate it against the following concerns which serve as the North Star for my career:**

## 🧭 Career Priorities 2020 - 2025:
- 👁 Pursue substance over status
- 👩🏻‍💻 Prioritise my progress as a technical individual contributor
- 😌 Be treated with kindness and respect
- 🏡 Work remotely

### 👁 Pursue substance over status
I want to work on projects which add genuine value to the world. 

Security appeals to me as an industry because I enjoy working on a tool which solves real problems for many other businesses. 

With Indent I could see a need for a central system for controlling access to cloud apps and infra (ODAC — on-demand access control) in every company I've worked at and especially in my work as an external contractor. The calibre of potential customers Fouad was already in talks with was exciting and demonstrated that there is a real demand for what we were creating.

Joining a start-up at an early stage and being an early engineering hire requires a particular sort of person: willing to take on responsibility and able to navigate ambiguity and uncertainty, all whilst digging deep on executing quality technical work within a short time frame. I realised I would learn so much more about my craft and about building a start-up being part of Indent's journey than I could going alone.

### 👩🏻‍💻 Prioritise my progress as a technical individual contributor

I want to become one of the best Software Engineers building web applications.

In deciding what to specialise in, I'm looking for the intersection of skills which are in-demand and difficult to acquire, and then work very hard to gain those skills.
The opportunity to focus solely on the Front-End in a [React](https://reactjs.org/) / [Next.js](https://nextjs.org/) / [TypeScript](https://www.typescriptlang.org/) / [TailwindCSS](https://tailwindcss.com/) application will allow me to grow in the areas which are important to me - with particular reference to web performance and codebase composability.

I previously worked on the platform team at [the LEGO Group](https://lego.com). Researching and experimenting with a range of cloud technologies and infrastructure solutions is interesting to me. As variety is key for me to understand the space, I believe that this interest is best nutured outside of my work as an individual contributor.

Joining a start-up led by technical founders who are distinguished individual contributors leaves me confident in organisational buy-in for focussing on technical depth. That said, I have learnt a lot from Fouad's pragmatism and focus on the customer with regards to prioritising when to ship.

### 😌 Be treated with kindness and respect

I understand my best work happens in a kind and respectful environment.

The Indent founders [Dan Gillespie](https://x.com/ethernetdan) and [Fouad Matin](https://x.com/fouadmatin) are genuine and kind people who I enjoy working alongside.

Overall, I feel that Indent as a company has genuinely demonstrated to me, during my contracting period with them, that they are a great employer. I didn't need any extra convincing from their side to prove that this was the case.

### 🏡 Work remotely
For the next decade of my career I am going to decouple being physically present in an office from creating meaningful and successful work.

This requirement was one of my main motivations to pursue writing software as a career choice. I am interested in pursuing projects where work delivered is valued over presenteeism; programming a web application can be done asychronously from anywhere.

Whilst Indent see a future for the company as headquartered in San Francisco and have a beautiful office space to collaborate in, the founders see value in having an early employee located in Europe. My being located in London has helped with gaining clients, making on-call rotations easier, and the time difference hasn't stopped me from being a presence in meetings and interviews.

## 🌉 Indent is hiring
Indent raised a [$5.6 million seed round](https://indent.com/blog/announcing-indent) for building a solution to on-demand access control.

If you're interested, we're hiring across a number of roles which can be found on the [Indent Jobs Page](https://indent.com/jobs#openings).


The next chapter of my engineering career

Joining Indent


## Summary

Among other things, during [React Conf 2021](https://www.youtube.com/watch?v=8dUpL8SCO1w) we learnt about central ideas in the React project that are driving this ecosystem forward.

A key idea in React is that “developers and designers should be able to build together while sharing the same design language” - which React thinks should be - components - or more precisely - [JSX](https://reactjs.org/docs/introducing-jsx.html). A company very dear to my heart, [Framer](https://www.framer.com/fp/), was mentioned as a great tool for this exact purpose.

React markets itself as the tool to “learn once, write anywhere” and this tagline has been reaffirmed during the conference through the initiatives that look to bring React to many new platforms, including Desktop and VR.

In addition, the core team has affirmed their commitment to making no compromises on the user or the developer experience - making sure that React is the platform which gets the best from both the server side and the browser.

I’ve split the contents of this video into several sections, with each focusing on a particular theme from React Conf or React 18.

## ⚛️ React 18

React 18 was formally announced at React Conf, with Suspense and Concurrent rendering being the central features.

This upcoming React release will see these notable improvements which are available out of the box:

1. Better rendering performance
2. Automatic update batching
3. [`useId`](https://github.com/reactwg/react-18/discussions/111) - a hook for generating unique IDs across server and client

In addition to these improvements, React 18 will offer several new fully opt-in features:

1. Streaming SSR with [Suspense](https://reactjs.org/docs/concurrent-mode-reference.html#suspense)
2. [`useDeferredValue`](https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue) - a hook for deferring a value by making it a lower priority for renders
3. [`startTransition`](https://reactjs.org/docs/concurrent-mode-reference.html#usetransition) - an API which allows us to tell React that a state update should be of a lower priority

## ⬆️ React 18 Upgrade

Upgrading to React 18 will require minimal changes to the codebase.

React 18 does introduce the [`ReactDOM.createRoot`](https://github.com/reactwg/react-18/discussions/5) function which replaces “ReactDOM.render” function from React 17 and below. If you’re using a React framework like [Next.js](https://nextjs.org/) you won’t need to do anything to make this change - but if you’ve written your React app from scratch you’ll have to make this change yourself.

In earlier candidate releases of React 18, something called “Concurrent mode” was proposed. “Concurrent mode” has caused some debate in the community because it made the upgrade path from React 17 not straightforward.

I’m pleased to let you know that “Concurrent mode” is nowhere to be found in React 18 anymore, and the upgrade path is entirely: opt-in. The features previously proposed to be part of “Concurrent mode” are now instead part of “[Concurrent rendering](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html#whats-coming-in-react-18)” which is a major reason for the excitement around React 18.

The stable Release candidate for React 18 is now available and the first eagerly anticipated release of React 18 is planned for early 2022.

## 🚧 Server Components

[Server Components](https://www.youtube.com/watch?v=jK0Vg8XbIXk) are a React feature which allows parts of the React UI to be completely rendered on the server and then sent to the browser as HTML with 0 impact on the JavaScript bundle size.

Unfortunately, Server components are still a work in progress and won’t be available in React 18, but they’re expected to ship in one of the minor versions of version 18.

Also, note that a [Server Components Working Group](https://github.com/reactwg/react-18/discussions) has been created to facilitate open discussion about this impactful feature.

## ✨ Suspense Overview

The goal of the [Suspense API](https://reactjs.org/docs/concurrent-mode-suspense.html) is for a React application to be able to read data over the network as easily as it can read props or state.

In other words, you can think of Suspense as a way to decouple the component from its loading state. A Component’s loading state is represented by a “fallback”, for example, a loading spinner of some sort.

Experienced React developers might ask themselves: “Yes, but why would I use Suspense, I already know how to handle loading state in my apps!” - and they would be right, since everything Suspense does can already be accomplished by stitching together React primitives like [`useState`](https://reactjs.org/docs/hooks-state.html) and [`useEffect`](https://reactjs.org/docs/hooks-effect.html).

From what I gathered, there are two major reasons to use Suspense:

1. Cleaner code: Handling state in a React application is unnecessarily verbose and repetitive and Suspense allows us to remove these repetitions, making the code more pleasant to read.
2. Performance improvements: It turns out that if we tell React about the component and its loading state - through using Suspense - React can use this information to make our application faster.

## 👁 Suspense use-cases

You might wonder: “So what are the ways that React can improve the performance of my app if I use [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html)?”. Here we arrive at the use-cases for Suspense in React 18 and as of now there are three of them:

1. “Code splitting” using [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy) which is already available in React 17. [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy) allows us to dynamically import React components and therefore lazy load their JavaScript bundles. Frameworks like Next.js can use this feature to improve “Code Splitting” for us, which I think is great - but from my experience in the application code, this feature is a bit underwhelming and not used very often. Luckily for us “Code splitting” wasn’t the main intended use-case for Suspense.

2. ”[Streaming server rendering](https://github.com/reactwg/react-18/discussions/37)” - and it is a major performance improvement of React 18 and it’s powered by Suspense and Concurrent Rendering.
   To illustrate what ”Streaming server rendering” does, first imagine the steps that a typical server-rendered React page goes through:

   <ol>
     <li>On the server, data is fetched for the entire page</li>
     <li>On the server, HTML is rendered for the entire page</li>
     <li>
       In the browser, we load the HTML, stylesheets and JavaScript for the
       entire page
     </li>
     <li>In the browser, we hydrate the entire page</li>
   </ol>
   Before React 18, the big performance issue in these steps is that the next step
   can be started only after the previous one has finished in its entirety. Each
   step always needs to process the entire page - it cannot process a part of the
   page and say “I’m done”. With React 18, ”Streaming server rendering” allows us
   to use Suspense to denote the sections of our application which are independent
   from each other which can be streamed through the entire process of Server rendering
   without being blocked by other sections in the same page.

3. The use-case of suspense which I’m most excited about is “Data fetching”. This is the use-case whose adoption will eliminate a lot of repetitive code from codebases. It’s important to note that in the initial releases of React 18, this feature is not going to be generally supported, meaning that in React 18.0 you’ll be able to use “Data fetching” only if you’re using Relay as well, since, for obvious reasons, the Relay team has collaborated with the React team to add the required support for Suspense.

That said, the low level APIs for “Data fetching” Suspense support are expected to land in one of the following React releases and as soon as these low level APIs are out, I expect client libraries like [Apollo](https://www.apollographql.com/), [SWR](https://swr.vercel.app/) and [ReactQuery](https://react-query.tanstack.com/) to add support for Suspense - which will make my life a whole lot easier.

## 📱 React Native

“Concurrent Rendering” - the core feature that powers React 18 - was originally inspired by problems found whilst developing [React Native](https://reactnative.dev/). All other mobile frameworks were concurrent so React Native needed to be concurrent as well.

Since being introduced into React Web - “Concurrent Rendering” has first enabled improved performance and better responsiveness. Later it has proven to be an effective programming model as well, allowing for features like “[Code Splitting](https://reactjs.org/docs/code-splitting.html)”, “[Data Fetching](https://reactjs.org/docs/concurrent-mode-suspense.html)”, “[Streaming Server Side Rendering](https://github.com/reactwg/react-18/discussions/37)” and “[Server components](https://www.youtube.com/watch?v=TQQPAU21ZUw)” to be built on top of it.

It seemed to me from React conf that the React team looks at React as a single programming paradigm that gets enhanced overall by incorporating solutions to problems from each platform it runs on - this is known as the “Many Platforms Vision” for React.

The React team already has the experience of solving the low-memory limitation on Android - and after enabling this feature on iOS they have seen the improved performance for React Native on iOS as well! If the improvements from each platform can cumulatively add to the overall improvement of the React core-library, that would be truly remarkable.

The last thing I’ll mention here is that there is now a [React Native Desktop](https://microsoft.github.io/react-native-windows/), which is an initiative by Meta and Microsoft to have React run on MacOS and Windows. As of now, I haven’t seen any mentions of Linux, which is interesting.

Meta’s experiment with porting Desktop Messenger from Electron to React Native Desktop has resulted in tremendous improvements in the app bundle size, cold-start latency and the overall snappiness. I personally welcome a [TypeScript](https://www.typescriptlang.org/) alternative to building desktop applications - so this seems really cool.

## 🔬 React Tooling

A talk at React Conf covered [React Developer Tooling](https://www.youtube.com/watch?v=oxDfrke8rZg) and these are my takeaways:

React Dev Tools aim to improve the:

- Productivity
- Debugging
- App performance

for developers working on React Applications.

They’re delivered mostly as either:

- A browser extension
- A tool embedded into the development sandbox itself

Since recently, React Dev Tools can use sourcemaps to enhance the information available for the developer.

Up until recently the Profiler was the predominant React Dev Tool used for debugging and performance analysis, but now there’s a Timeline tool as well and in the future, the Profiler and the Timeline are expected to be merged into a single tool for performance analysis.

Besides React Developer Tooling - React Conf has also seen the [re-introduction of Relay](https://www.youtube.com/watch?v=lhVGdErZuN4) - which has been celebrated by Meta’s teams as the best framework for building apps which consume [GraphQL](https://graphql.org/) data.

[Relay](https://relay.dev/) has been adapted to work with the new Suspense API from React 18 and it’s therefore going to be the first library to support Suspense for data fetching. Relay has also seen a few other improvements, since I last took a look at it:

- The Meta team has rewritten its query compiler in [Rust](https://www.rust-lang.org/) - so app builds should be much faster
- There’s newly introduced [`@defer`](https://relay.dev/docs/glossary/#defer) and [`@stream`](https://relay.dev/docs/glossary/#stream) directives which should improve the overall app performance

I personally wanted to give Relay a try, but I wasn’t able to find a good overview of how to use it with Next.js which I work with day to day, so I didn’t pursue it further but any suggestions in the comments are very welcome!

## 📝 React Community

The absolute centerpiece of the efforts by or for the React Community was the new React Documentation, currently accessible on [beta.reactjs.org](https://beta.reactjs.org). I really like the new documentation. It has seen:

1. A move to the “hook centric” curriculum
2. A partnership with [Codesandbox](https://codesandbox.io/) to provide interactive examples on every page
3. Code challenges for every lesson
4. Diagrams, illustrations, recipes, Search and even interactive theming.

Multiple speakers in React Conf 2021 have spoken highly of the new documentation site and I personally can’t wait for it to be finished.

Other community driven efforts from React Conf include:

1. React and [Server Components working groups](https://github.com/reactwg/react-18/discussions) which aim to work in the open to ensure a high-quality of React releases

2. Interesting React experiments, like the experiment to [automate away the use of React.memo and useMemo in React applications](https://www.youtube.com/watch?v=lGEMwh32soc) - by using a compiler- which very much reminds me of [Svelte](https://svelte.dev/)!

3. [Useful information](https://www.youtube.com/watch?v=oPfSC5bQPR8) from community experts on how to migrate your library from React 17 to React 18 if your library provides an “external store”

## 🌍 The React Ecosystem

Many companies and individuals talked about their interesting projects during React Conf:

- A [Meta developer](https://www.youtube.com/watch?v=NLj73vrc2I8) demoed the use of pre-trained Machine Learning models in a mobile application built with [React Native](https://reactnative.dev/) - which was really impressive
- Multiple teams have shown their approach to making their applications more accessible via their custom React libraries
- Multi-billion dollar companies have reported on how they’re using React to make their “animation studio app”, “custom storefronts” or “gaming console UIs” more interactive and performant

## 🔗 Key External Links:

- [React Conf 2021](https://www.youtube.com/watch?v=8dUpL8SCO1w&t=0s)
- [New React Documentation (Beta)](https://beta.reactjs.org)
- [React Releases](https://github.com/facebook/react/releases)
- [React 18 Working Group Discussions](https://github.com/reactwg/react-18)


Summary and analysis of React 18 and React Conf 2021 Announcements

React 18


This post looks at the AWS re:Invent 2021 announcements from the perspective of a web developer

## Background and Context

AWS has come a long way since 2006 when they first introduced [EC2](https://aws.amazon.com/ec2/) service and ushered us into a new era of cloud computing.

Today, AWS offers hundreds of different services both specialised and general purpose - and it is truly an archetype of a long-tail service provider in computing - the same way that their parent company is in retail.

AWS re:Invent has seen the introduction of new products across the AWS target markets including: Machine Learning, Internet of Things, general purpose networking, hardware and software improvements of the infrastructure etc.

Out of 140 or so announcements presented during the re:Invent, in this post I've decided to focus on only a handful that were most exciting to me as a Web developer.

I’ve grouped the announcements based on a topic they belong to:

- Price Reductions
- New features to popular services
- Serverless
- Monitoring and alerting
- Security features
- Developer tooling

## 💰 Price Reductions

S3 is Amazon’s immensely popular object storage product which has seen price reductions in terms of:

1. Reductions across the storage classes
2. Intelligent tiering
3. The introduction of a new storage class - Glacier Instant Retrieval

DynamoDB is Amazon’s fully managed NoSQL database which has seen the introduction of Infrequent Access table - which can reduce the price of using DynamoDB for some use-cases.

All of these reductions will automatically be reflected in your AWS bill without any involvement from your side.

### 🔗 Links:
- [Amazon S3 announces a price reduction up to 31% in three storage classes](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-s3-price-reduction-storage-classes/)
- [Announcing the new S3 Intelligent-Tiering Archive Instant Access tier - Automatically save up to 68% on storage costs](https://aws.amazon.com/about-aws/whats-new/2021/11/s3-intelligent-tiering-archive-instant-access-tier/)
- [Announcing the new Amazon S3 Glacier Instant Retrieval storage class - the lowest cost archive storage with milliseconds retrieval](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-s3-glacier-instant-retrieval-storage-class/)
- [Amazon S3 Glacier storage class is now Amazon S3 Glacier Flexible Retrieval; storage price reduced by 10% and bulk retrievals are now free](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-s3-glacier-storage-class-amazon-s3-glacier-flexible-retrieval/)
- [Amazon DynamoDB announces the new Amazon DynamoDB Standard-Infrequent Access table class, which helps you reduce your DynamoDB costs by up to 60 percent](https://aws.amazon.com/about-aws/whats-new/2021/12/amazon-dynamodb-standard-infrequent-access-table-class/)


## ✨ New features to popular services

The most interesting announcement in this section are the S3 Event Notifications within Amazon EventBridge. I’m all about serverless and eliminating state in my applications, and with this feature it’s now easier to build applications which are event driven and react to changes in your S3 objects.

Another new feature added to S3 buckets is called AWS Backup. This feature allows easy central governance of the account-wide back-up policy. This means that from now on you can control the backup strategy for many AWS services from a central place in your AWS account.

### 🔗 Links:
- [Amazon S3 Event Notifications within Amazon EventBridge help you build advanced serverless applications faster](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-s3-event-notifications-amazon-eventbridge-build-advanced-serverless-applications/)
- [Announcing preview of AWS Backup for Amazon S3](https://aws.amazon.com/about-aws/whats-new/2021/11/aws-backup-amazon-s3-backup/)
- [Amazon S3 adds new S3 Event Notifications for S3 Lifecycle, S3 Intelligent-Tiering, object tags, and object access control lists](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-s3-event-notifications-s3-lifecycle-intelligent-tiering-object-tags-object-access-control-lists/)

## ⚡️ Serverless

AWS has been a consistent competitor in serverless space, offering many products that are priced on a pay-as-you-go-basis. Being a serverless proponent myself, I was happy to see the introduction of a several new serverless offerings:

1. AWS MSK - pay as you go, fully managed Apache Kafka cluster
2. Serverless EMR - which will allow serverless analysis of big data
3. Serverless Redshift - would provide a pay-as-you-go pricing model for your Data Warehousing needs. I’d say that this last one was expected since almost all of the AWS database offerings already have a serverless version, so it was only a matter of time before Redshift got one as well.

### 🔗 Links:
- [Introducing Amazon MSK Serverless in public preview](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-msk-serverless-public-preview/)
- [Introducing Amazon EMR Serverless in preview](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-emr-serverless-preview/)
- [Announcing Amazon Redshift Serverless (Preview)](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-redshift-serverless/)

## 🚨 Monitoring and alerting

In terms of Monitoring and Alerting, I was particularly excited about the introduction of Amazon CloudWatch RUM for monitoring applications’ client-side performance. AWS finally has a tool in this category. I’ve previously used NewRelic’s RUM solution and from my experience, having access to a tool like this makes optimising the performance of Web applications significantly easier.

Another announcement in this category is the CloudWatch Metrics Insights, a new product that offers a fast, flexible, SQL based query engine for your metrics. To illustrate how compelling this is: imagine analysing thousands of EC2 instances by CPU Utilisation to troubleshoot an underperforming application. And don’t worry, if you’re not that into SQL, there’s a visual query builder.

### 🔗 Links:
- [Introducing Amazon CloudWatch RUM for monitoring applications’ client-side performance](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-cloudwatch-rum-applications-client-side-performance/)
- [Introducing Amazon CloudWatch Metrics Insights (Preview)](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-cloudwatch-metrics-insights-preview/)

## 🔐 Security features

Most of the notable security features from re:Invent are related to S3:

1. AWS has introduced a new Object Ownership setting known as Bucket owner enforced ownership, which disables access control lists and will let you dramatically simplify access management for data stored in S3 - which is awesome.

2. The S3 console now reports security errors, warnings and suggestions from IAM Access Analyzer, which is very valuable for tracking access to data stored in S3. In addition to that, there’s now a way of validating S3 policies programmatically by using the Access Analyzer API.

One other security feature that caught my eye is the automatic Application-layer DDoS mitigation in AWS Shield Advanced, which is available at no additional cost if you’re already a Shield Advanced subscriber. I’m a fan of not getting DDoSed and of automating things I would otherwise need to do myself, so this is a clear win.

### 🔗 Links:
- [AWS Shield Advanced introduces automatic application-layer DDoS mitigation](https://aws.amazon.com/about-aws/whats-new/2021/12/aws-shield-advanced-application-layer-ddos-mitigation/)
- [Amazon S3 Object Ownership can now disable access control lists to simplify access management for data in S3](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-s3-object-ownership-simplify-access-management-data-s3/)
- [Amazon S3 console now reports security warnings, errors, and suggestions from IAM Access Analyzer as you author your S3 policies](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-s3-console-warnings-errors-suggestions-iam-access-analyzer/)

## 🛠 Developer tooling

The biggest number of announcements from re:Invent that are related to Web development fit the category of Developer Tooling, so here’s my list:

1. The AWS Amplify Studio is a visual editor which automatically translates designs made in Figma to “human-readable” React UI component code.

- After this translation you can use Amplify Studio to set up a backend using Amplify CLI and AWS CDK.
- This product comes with a pre-built React component library which is fully customizable in Figma.

If AWS Amplify Studio delivers on its promise, someone with a design skill-set could build a full-stack application via this visual editor.

2. The general availability of AWS CDK v2 for JavaScript and other languages. This toolkit has become a very popular way to provision infrastructure recently and it’s nice to see AWS’ continued support for it.

Other notable products and features in this section that I’m just going to mention quickly are:

3. Pull through cache repositories for the Amazon Elastic Container Registry

4. General availability of “Construct Hub” - a registry of open-source reusable building blocks of AWS CDK apps

5. AWS Microservice Extractor for .NET which is an assistive tool that analyzes your .NET source code and runtime metrics so you can refactor your codebase into smaller code projects.

6. Terraform account provisioning and customization with AWS Control Tower

7. Amazon Karpenter (with a ‘K’) which is a new open-source Kubernetes cluster autoscaling project from AWS

### 🔗 Links:
- [Introducing AWS Amplify Studio](https://aws.amazon.com/about-aws/whats-new/2021/12/aws-amplify-studio/)
- [AWS Cloud Development Kit (AWS CDK) v2 is now generally available](https://aws.amazon.com/about-aws/whats-new/2021/12/aws-cloud-development-kit-cdk-generally-available/)
- [Amazon WorkSpaces introduces Amazon WorkSpaces Web](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-workspaces-introduces-amazon-workspaces-web/)
- [AWS announces Construct Hub general availability](https://aws.amazon.com/about-aws/whats-new/2021/12/aws-construct-hub-availability/)
- [AWS Karpenter v0.5 Now Generally Available](https://aws.amazon.com/about-aws/whats-new/2021/11/aws-karpenter-v0-5/)
- [AWS Control Tower introduces Terraform account provisioning and customization](https://aws.amazon.com/about-aws/whats-new/2021/11/aws-control-tower-terraform/)
- [Introducing AWS Microservice Extractor for .NET](https://aws.amazon.com/about-aws/whats-new/2021/11/aws-microservice-extractor-net/)
- [AWS customers can now find, subscribe to, and deploy third-party applications that run in any Kubernetes environment from AWS Marketplace](https://aws.amazon.com/about-aws/whats-new/2021/11/aws-customers-find-subscribe-deploy-kubernetes-aws-marketplace/)
- [Amazon ECR announces pull through cache repositories](https://aws.amazon.com/about-aws/whats-new/2021/11/amazon-ecr-cache-repositories/)


A summary of the announcements from AWS re:Invent 2021 with Web Developers in mind

AWS re:Invent 2021


## Background and Context:

Day to day, I build [React](https://reactjs.org/) applications using the amazing [Next.js](https://nextjs.org/) framework. I love the React Ecosystem, but recently I was intrigued by all the interesting developments surrounding Svelte - and not being really familiar with it - I decided to investigate and was very excited by what I discovered.

My overall impression is that Svelte seems to be in a similar place now as the [Rust](https://www.rust-lang.org/) programming language was a few years ago. Svelte is currently very beloved by its still comparably small community of users. But - as it was with Rust a few years ago - Svelte seems almost destined for growth and success.

In my eyes, Svelte is currently the top contender to disrupt the [React](https://reactjs.org/) and [Vue](https://vuejs.org/v2/guide/) duopoly of JavaScript UI libraries. In the next few years, I wouldn’t be surprised at all if Svelte became the dominant way to build for the Web.

Here are my Top #10 reasons for why I think this is the case:

## 10: Growing Ecosystem

The monthly [“What’s new in Svelte”](https://svelte.dev/blog) blog post is regularly filled with announcements of new and interesting projects in the Svelte ecosystem. I think part of the reason why this is the case is the current excitement about Svelte, but I’m convinced that the other part has to do with Svelte's technical architecture - that I’m going to cover higher in this list.

Svelte Fall Summit 2021 has seen the announcements of several libraries built specifically to be used with Svelte

- [svelte-cubed](https://svelte-cubed.vercel.app/) - A three.js component library for Svelte by Rich Harris (the creator of Svelte)
- [svelte-fsm](https://github.com/kenkunz/svelte-fsm) - a tiny finite state machine library for Svelte
- Several static site generation tools - [Primo](https://primo.af/), [Plenti](https://plenti.co/) and [Slinkity](https://slinkity.dev/)

A few self standing open source projects have demoed their support for Svelte during the Summit, among them:

- [vest](https://github.com/ealush/vest) - a framework for form validation
- [unplugin-icons](https://github.com/antfu/unplugin-icons) - a library enabling the universal access to tens of thousands of SVG icons

## 9: Svelte Stores

Svelte takes a different approach to React when it comes to the **application global state**.

While React has a very UN-opinionated stance on this topic - offering only the loosely coupled assortment of utilities that the developer needs to integrate correctly how they see fit, Svelte offers an opinionated default approach in the form of [Svelte stores](https://svelte.dev/docs#run-time-svelte-store) - which feel like a natural extension to JavaScript modules.

In my opinion this is should result in higher productivity when developing with Svelte, since the application global state is such a common feature that it gets reinvented unnecessarily so many times.

## 8: Svelte is a compiler

This cannot be overstated: Svelte is a compiler, and not a library or a framework in the sense that React and Vue are.

In a React app, the React library is sent to the browser as part of the JavaScript bundle alongside the application code.

Svelte compiles the application down to Vanilla JavaScript - and browsers themselves don’t interact with Svelte at all.

Due to not being present in the browser, Svelte is also thought of as being a “disappearing framework”. This approach has already been proven to improve the performance and the overall developer experience.

## 7: Svelte's true reactivity

In React, reactivity is tightly coupled to setting state and rendering the UI.

In Svelte, reactivity is more fundamental and can apply to any JavaScript value at any time - independent of component renders.

Another major difference in how React and Svelte treat reactivity can be seen in the way that a component tree is rendered in each of them:

- In React, an update to the state of a top level component could cause a rerender of entire component tree - to achieve more optimized rendering performance, developers could opt-out of renders by using [React.memo](https://reactjs.org/docs/react-api.html#reactmemo) and the [useMemo](https://reactjs.org/docs/hooks-reference.html#usememo) and [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) hooks

- In Svelte, for updates to propagate to the UI, the developer needs to opt-into the updates explicitly which makes Svelte’s default behavior more performant than the one in React.

## 6: Svelte's embedability

[Guillermo Rauch](https://x.com/rauchg) - Vercel’s CEO - calls this property of Svelte **fractality**.

This term describes that Svelte can incrementally scale from:

- Being embedded in a large software project through to...
- Forming a Single-Page-Application ...
- or even implementing an entire Multi-Page-Application with the use of [SvelteKit](https://kit.svelte.dev/)

Multiple speakers during the Summit have shown how easy it is to embed Svelte into an existing application - whether it’s PHP, React or anything else.

We’ve also seen a demo in which React was embedded into Svelte - proving that Svelte’s embedability goes both ways.

## 5: Vercel's vision for Svelte

[Rich Harris](https://x.com/Rich_Harris), the creator of Svelte, has recently joined [Vercel](https://vercel.com/) and this announcement has sent waves around the Internet.

Vercel is the company behind [Next.js](https://nextjs.org/) and the Vercel serverless platform - and their mission is to “empower developers to make the Web better”.

During the Summit, [Guillermo Rauch](https://x.com/rauchg), the CEO of Vercel, has shared his vision for the future of Web App development, which I would summarize as:

1. Vercel is looking to achieve the ”fewest number of keystrokes from an idea to an app” and they see Svelte playing a key role in this
2. Vercel is all about the edge, and they’re looking to put Svelte apps everywhere - closer to users!

Credit to [Guillermo Rauch](https://x.com/rauchg) for realizing again what the future will look like and steering [Vercel](https://vercel.com/) in the right direction. This decision is particularly impressive in the light of the fact that SvelteKit is a direct competitor to Vercel’s own Next.js.

Out of all of the companies that lead the new wave of innovation in Web Application development - among which I primarily count [Vercel](https://vercel.com/), [Netlify](https://www.netlify.com/) and [Cloudflare](https://www.cloudflare.com/) - Vercel seems to be particularly willing to lead the shaping of the developer tools that the entire community depends on in an open way.

## 4: Svelte's Gentle Learning Curve

A significant amount of anecdotal experience - including my own - backs the idea that it’s easier to learn Svelte than it is to learn React or Vue.

Svelte seems to offer a middle ground between using a full blown UI framework and using Vanilla JavaScript. This is because Svelte concepts build directly upon Web technologies and APIs available in every browser.

Because Svelte is a thin layer on top of the existing Web technologies, [this makes it particularly suitable for teaching HTML, CSS and Javascript](https://svelte.dev/tutorial/basics).

A repeating theme throughout Svelte Summit was the idea that development with Svelte is fun - because Svelte offers a great mix of:

1. The power of a modern declarative UI framework with built-in support for animations, transitions and state management
2. Unhindered access to the underlying technologies that make the Web the awesome platform that it is.

## 3: Svelte Kit

[SvelteKit](https://kit.svelte.dev/) is Svelte’s own Post JAMstack, hybrid framework similar to [Next.js](https://nextjs.org/).

I think the big reason why React is so popular is the amazing tooling ecosystem built around it which includes [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/) and [Create-React-App](https://create-react-app.dev/docs/getting-started/).

Svelte is on track to have an amazing tooling ecosystem as well.

The most prominent tool in this ecosystem is SvelteKit - which is to Svelte what Next.js is to React.

SvelteKit is being prepared for 1.0.0 release and a month ago it was reported that it’s over 80% done.

Internally, SvelteKit is powered by Vite.js and builds on the experience of a previous framework for Svelte - called Sapper.

Now that [Rich Harris](https://x.com/Rich_Harris) is at [Vercel](https://vercel.com/), I wouldn’t be surprised if many great ideas from Next.js end up in SvelteKit and the other way around. I think this can only benefit both React and Svelte development tooling.

An innovation on part of the SvelteKit: it’s not only a toolkit for app development but it’s also intended for Svelte library development as well. This means that both can be developed side by side within a same project and then a developer has a choice of either:

- Deploying the app
- Publishing the library

## 2: Svelte's Ergonomics

The ergonomics of a development tool is the key determining factor in the developer experience and in this category - Svelte is objectively ahead of any other UI framework.

In the React world, the move from [Class based components](https://reactjs.org/docs/react-component.html) to [functional components with hooks](https://reactjs.org/docs/hooks-intro.html) has been hailed as a major improvement to the ergonomics of writing a React application.

In the similar way, it is now argued that when moving from React with Hooks to Svelte, expect to see similar improvements to ergonomics.

Svelte has kept the declarative nature of its predecessors, but offers DX improvements in:

1. Fewer lines of boilerplate code
2. Better composability of the UI code with the other parts of the application

Having this in mind, the argument could be made that Svelte is the next generation framework after React and Vue - and that it has a very bright future indeed.

## 1: Svelte's Performance

Being a compiler opens Svelte to performance improvements that are simply out of reach to other JavaScript UI frameworks.

Svelte doesn’t send its own UI library JavaScript bundle when an end-user visits the page. What is sent over the wire is the exact amount of JavaScript required for the dynamic features of the app - and nothing more.

During [Svelte Summit](https://youtu.be/1Df-9EKvZr0) we have seen comparisons of the same app being built in Svelte, React and Vue, with the Svelte app outperforming the other two libraries across all metrics, including:

- Code Size
- Bundle Size
- [First Contentful Paint](https://web.dev/first-contentful-paint/)
- [Speed index](https://web.dev/speed-index/)

A major factor in Svelte’s performance in the browser is the fact that Svelte has done away with the notion of [Virtual DOM](https://reactjs.org/docs/faq-internals.html) - reducing its memory footprint relative to other frameworks.

The systematic approach of Svelte’s team towards achieving great performance outcomes across the board is also visible in the way they’ve approached NPM packaging and managing their dependencies.

In summary the approach of the entire Svelte project just shows a huge amount of mindfulness and care.

## Key External Svelte Links:

- [Svelte Homepage](https://svelte.dev)
- [Svelte Documentation](https://svelte.dev/docs)
- [Svelte Fall Summit 2021](https://youtu.be/1Df-9EKvZr0)


Reflecting on the Svelte Fall Summit 2021 and giving my top 10 reasons on why Svelte is the future

Why Svelte Is the Future


[Cloudflare's Fullstack Week](https://www.cloudflare.com/full-stack-week/) has seen the introduction of many interesting features to Cloudflare's platform.

My particular interest is in features which further empower developers to build compelling applications and web experiences.

Here are my Top 8 from their announcements this week:

## 8: Cloudflare's Developer Expert Program

→ [Apply for the Cloudflare Developer Expert Program Here](https://blog.cloudflare.com/developer-expert-program/)

You can apply for Cloudflare's Developer Expert Program yourself, or nominate a friend.

The community gives you:

- Early access to features
- Access to a private community of power users
- The ability to participate in calls with Cloudflare PMs, devs and dev advocates
- The opportunity to get sponsorship for OSS work
- Possibly some of Cloudflare's best swag

## 7: Cloudflare announces support for TCP, UDP and QUIC based protocols for Workers

→ Cloudflare Blogpost: [Making connections with TCP and Sockets for Workers](https://blog.cloudflare.com/introducing-socket-workers/)

This is NOT available yet, but is a work in progress. The new type of Workers with this support are going to be called “Socket Workers”.

Socket Workers will enable the creation of many new types of applications on the Workers platform.

Today in November 2021 while building with Workers you’re restricted to using HTTP and Websockets.

## 6: Network Performance Improvements

→ Cloudflare Blogpost: [Network Performance Update: Full Stack Week](https://blog.cloudflare.com/network-performance-update-full-stack-week/)

Cloudflare wants to have the fastest last mile network everywhere in the world.

A few months back, based on a number of metrics they were fastest in around 49% of the networks in the world.

Today, Cloudflare is the fastest in about 66% of the networks around the world - and they say they’re still looking to improve further!

## 5: Partnerships with CMSes and Data Platforms

→ Cloudflare Blogpost: [Cloudflare Pages now partners with your favorite CMS](https://blog.cloudflare.com/cloudflare-pages-headless-cms-partnerships/)

Cloudflare has now partnered with a handful of the most popular headless CMSes: [Wordpress](https://wordpress.org/), [Contentful](https://www.contentful.com/), [Sanity.io](https://www.sanity.io/) and [Strapi](https://strapi.io/).

In addition to this, Cloudflare has now open sourced an example SaaS application with a CMS built completely on top of the Cloudflare stack.

Also, in terms of databases and data platforms which are used by the applications for persisting their data: Cloudflare has announced support for [MongoDB Atlas](https://www.mongodb.com/cloud/atlas/register) and [Prisma](https://www.prisma.io/).

## 4: Cloudflare have dropped all egress charges

→ Cloudflare Blogpost: [Workers, Now Even More Unbound: 15 Minutes, 100 Scripts, and No Egress Fees](https://blog.cloudflare.com/workers-now-even-more-unbound/)

This is a direct response to all of the big cloud providers who (in November 2021) all have somewhat unjustifiably high charges for egress traffic.

It is also in anticipation of [R2](https://blog.cloudflare.com/introducing-r2-object-storage/), the object storage product that Cloudflare announced a couple of months ago, which very impressively is does not have any charges for egress traffic.

## 3: General availability of Durable Objects

→ Cloudflare Blogpost: [Durable Objects — now Generally Available](https://blog.cloudflare.com/durable-objects-ga/)

[Durable Objects](https://developers.cloudflare.com/workers/runtime-apis/durable-objects) are a new and innovative kind of persistent and strongly consistent storage for Cloudflare Workers that has been in open beta since April this year.

As of now, anyone can build with Durable Objects with the confidence that Cloudflare deems the product production ready.

## 2: wrangler 2.0

→ Cloudflare Blogpost: [wrangler 2.0 — a new developer experience for Cloudflare Workers](https://blog.cloudflare.com/wrangler-v2-beta/)

wrangler is Cloudflare's CLI for interacting with the Cloudflare Workers platform. In my opinion wrangler offers an amazing developer experience.

In this milestone v2.0 release the Cloudflare team has incorporated a whole other tool called [Miniflare](https://github.com/cloudflare/miniflare) into wrangler. The addition of Miniflare into wrangler means that by using wrangler 2.0 you can emulate the Cloudflare Workers platform locally - which is amazing.

Other notable improvements in wrangler 2.0 are:

1. wrangler can be run without a config
2. Live debugging has been made meaningfully easier!

## 1: Cloudflare Pages Goes Full Stack

→ Cloudflare Blogpost: [Cloudflare Pages Goes Full Stack](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/)

With this release, Cloudflare is finally showing us how their version of the [Vercel](https://vercel.com/)/[Netlify](https://www.netlify.com/)-like platform is going to look.

Up until now, you could combine [Cloudflare Pages](https://pages.cloudflare.com/) and [Cloudflare Workers](https://developers.cloudflare.com/pages/platform/functions), but you had to stitch them together by yourself. Starting with this release, combining Pages and Workers is incredibly straightforward.

The file-based routing that enables this stitching reveals a great influence of [Next.js](https://nextjs.org/) (and similar frameworks) on this project.

It’s worth noting that the support for preview deployments and [Svelte](https://svelte.dev/) are available immediately with many impactful features still in the pipeline.

## Key External Links:

- [Cloudflare Full Stack Week 2021 Page](https://www.cloudflare.com/full-stack-week/)
- [Cloudflare Developer Expert Program Application](https://blog.cloudflare.com/developer-expert-program/)


Cloudflare Full Stack Week - My Top 8 Announcements

Cloudflare Full Stack Week


Originally published on the [Indent Blog](https://indent.com/blog/next-stories-rfc), written in collaboration with [Fouad Matin](https://fouad.org)

**Indent provides on-demand access for cloud apps and infrastructure.**

Our dashboard is built using the incredible Next.js framework. Introducing a component library into our dashboard was surprisingly tough, so we spent time thinking about how the experience could be improved.

<br />

We're excited to introduce our proposal for Next.js Stories:

- **Zero-config component library** for every Next.js project
- **Automatically generated stories** for components and pages
- **Storybook interface with hooks into the Next.js build system** for a great developer experience
- **First-class `components` directory** similar to `pages`

<br />

If you want to jump to the request for comments and share your thoughts, you can find it in Next.js Discussions:

<div className="w-full mt-9 mb-8 sm:h-16 flex flex-col items-center">
  <div className="h-15 sm:h-9 text-center font-semibold text-xl sm:text-2xl mt-8">
    RFC: Stories
  </div>
  <div className="flex items-center">
    <a
      href="https://github.com/vercel/next.js/discussions/30628"
      className="flex items-center"
    >
      <img
        style={{ height: 32, width: 32 }}
        className="w-6 mr-2 hidden sm:inline-block"
        src="https://logo.clearbit.com/github.com"
        alt=""
      />
      <div>vercel/next.js/discussions/30628</div>
    </a>
  </div>
</div>

<br />

---

<br />

## How would it work?

1. [Automatically creating stories for components and pages](https://github.com/vercel/next.js/discussions/30628)

   - [Recording simple stories](https://github.com/vercel/next.js/discussions/30628)
   - [Recording stories for complex components](https://github.com/vercel/next.js/discussions/30628)

2. [Browsing stories and exporting a component library](https://github.com/vercel/next.js/discussions/30628)
3. [Next.js and Storybook integration](https://github.com/vercel/next.js/discussions/30628)

## What's the story?

Codebases with a sophisticated user interface and complex business logic reach a point of complexity which calls for a separate component library.

In our experience, setting up that component library from scratch for an existing Next.js project can be very tedious and time consuming.

While we rolled our own component library at [Indent](https://indent.com), we considered potential introductions to the Next.js ecosystem which could improve the experience and reliability of developing complex UIs with React.

## Where we started

We built our Next.js app in an idiomatic way, separating components from pages; so why do we still need to invest a lot of time to produce modular components? It reminded us of manually setting up routes with `react-router` before Next.js' `pages` file-based routing.

Some of the challenges we ran into: configuration complexity, difficulty in creating new components and slow builds.

All of the things Next.js has already solved for us.

## Our options

Initially we looked into _just_ rebuilding the stories and the developer interface natively in Next.js... until we talked to people who had done that. Even at much larger companies with more resources, it's hard to keep components and stories up-to-date — let alone having to maintain the design system primitives too.

Looking at all of the total React, Storybook and Next.js downloads, there's a lot of room for Next.js to grow as the de facto way to build a React app. Also, Storybook is more popular than Next.js!

[![Download counts of Storybook vs Next.js vs React](../static/nextjs-stories/next-stories-downloads.png 'Download counts of Storybook at 3.3 million, Next.js at 1.8 million and React at 12 million')](https://www.npmtrends.com/@storybook/ui-vs-next-vs-react)

## Next.js Stories

Our proposal for Next.js Stories provides easy creation and maintenance of component libraries for all Next.js applications with a `components` library.

[Read more &rarr;](https://github.com/vercel/next.js/discussions/30628)

![Files and Storybook in a project using Next.js Stories](../static/nextjs-stories/next-stories-screenshot.png 'Files and Storybook in a project using Next.js Stories')

Admittedly, some parts of this RFC are very ambitious. Our hope in writing an RFC and sharing it with the community is to spark a conversation about the state of component library tooling.

While drafting this RFC, the proposal has received feedback from experienced Next.js practitioners (including the Next.js team). We’re looking forward to further review and feedback from the community.

It would be amazing if Next.js and Storybook as tools and as communities could be brought closer together.

We'd love to hear your feedback on the RFC, so please go to the discussion and add a reaction/your comment:

<div className="w-full mt-9 mb-8 sm:h-16 flex flex-col items-center">
  <div className="flex items-center mt-3">
    <a
      href="https://github.com/vercel/next.js/discussions/30628"
      className="flex items-center"
    >
      <img
        style={{ height: 32, width: 32 }}
        className="w-6 mr-2 sm:inline-block"
        src="https://logo.clearbit.com/github.com"
        alt=""
      />
      <div>vercel/next.js/discussions/30628</div>
    </a>
  </div>
</div>

Thanks to [Tim Neutkens](https://x.com/timneutkens), [Jack Hanford](https://x.com/jackhanford), [Lee Robinson](https://x.com/leeerob), [Brody McKee](https://x.com/mrmckeb) and [Gordon Wintrob](https://x.com/gwintrob) for reviewing drafts of this proposal.

We're going to discuss this in the first iteration of What's Next.js, a virtual meetup hosted by Indent on Friday 22nd October 2021. Join us live via this link: [https://whatsnext.js.org/](https://whatsnext.js.org/)


Introducing our proposal for Next.js Stories, published as an RFC. Originally posted on the Indent Blog.

Next.js Stories RFC


Originally posted on the [Indent Blog](https://indent.com/blog/stale-while-revalidate-beyond-http-requests)

While implementing features in the Indent dashboard, we heavily use the [localStorage browser API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). A convenient way to use the localStorage in React is the `useLocalStorage` hook from [usehooks.com](https://usehooks.com/useLocalStorage/). Below is a simplified example of the pattern that often occurs in our code while using the `useLocalStorage` hook:

```js
const Component1 = () => {
  const [value, setValue] = useLocalStorage('key1')
  return <div>Component1 {value}</div>;
};

const Component2 = () => {
  const [value, setValue] = useLocalStorage('key1')
  return <div>Component2 {value}</div>;
};

const Page = () => (
  <>
    <Component1 />
    <Component2 />
  </>;
);
```

In the above example we have two independent components utilizing the `useLocalStorage` hook with the same key. The original implementation of the `useLocalStorage` has a few drawbacks when used in this manner:

- **Many re-renders** - Each use of the `useLocalStorage` creates a dedicated state variable with `useState`. Each of these states is completely separate from one another. If all of these states need to be updated to a new value, one re-render is going to occur for _each_ of the updates.
- **Inconsistent state** - Each use of the `useLocalStorage` creates a separate `setValue` function that updates only the piece of state that it is associated with. This means that if the `setValue` is called within one of these components the other component wouldn't reflect the correct value of the localStorage entry until the page is refreshed.
- **Potential race condition** - Each use of the `useLocalStorage` independently reads from the localStorage when _the component using `useLocalStorage`_ is mounted. This means that different components on the same page could potentially read different values from the localStorage. The result could be an inconsistent UI.

![Each read from the localStorage happens on the component mount. Each useLocalStorage reads from the localStorage separately.](../static/swr-beyond-http-requests/useLocalStorage-original.png 'useLocalStorage original')

Initially I was using the [`swr` JavaScript library](https://github.com/vercel/swr) (named after the [stale-while-revalidate](https://datatracker.ietf.org/doc/html/rfc5861) pattern) only for HTTP caching, and then I came to the realisation that `swr` is so much more cool and general purpose to only be a library for caching HTTP requests. So I got the idea to write a `useLocalStorage` implementation which has a more optimal behaviour using the `swr` library and here's the result:

```js
import { useCallback, useMemo } from 'react'
import useSWR, { cache } from 'swr'

const localStorageFetcher = async (_fetcherName: string, key: string) => {
  const item = window.localStorage.getItem(key)
  // An Error occurring in the fetcher is gracefully handled by SWR
  if (item == undefined) throw new Error()
  return JSON.parse(item)
}

export function useLocalStorage<T>(
  key: string,
  initialValue?: T | (() => T)
): any[] {
  const swrKey = useMemo(() => ['localStorageFetcher', key], [key])
  const initialData = useMemo(
    () => (initialValue instanceof Function ? initialValue() : initialValue),
    [initialValue]
  )

  const { data: storedValue, mutate } = useSWR(swrKey, localStorageFetcher, {
    initialData,
    // Read from the localStorage only if the value is not in the cache already.
    revalidateOnMount: !cache.has(swrKey),
    // Disable refetching from the localStorage. After the initialization from
    // the localStorage, the value is not re-read until the page is re-loaded.
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
    refreshWhenHidden: false,
    refreshWhenOffline: false,
    shouldRetryOnError: false,
    refreshInterval: 0,
  })

  const setStoredValue = useCallback(
    (value: T | ((c: T) => T)) => {
      mutate(
        (currentStoredValue: any) => {
          const valueToStore =
            value instanceof Function ? value(currentStoredValue) : value
          if (valueToStore === currentStoredValue) return currentStoredValue
          window.localStorage.setItem(key, JSON.stringify(valueToStore))
          return valueToStore
        },
        false // don't refetch from the localStorage, just update the state
      )
    },
    [mutate, key]
  )

  return [storedValue, setStoredValue]
}
```

The new `useLocalStorage` has the same API, but:

- it reads from the localStorage only once per page load for the given localStorage key, regardless of the number of times it is called
- it causes only a single additional re-render after the value has been loaded, regardless of the number of times it is called
- when the new components which use the `useLocalStorage` hook enter the page with the same key, they don't read from the localStorage again, but use the `swr` cached value instead
- changing the value in any of the components, using the `setValue` function causes the immediate change in all other components using `useLocalStorage` with that key. No page refresh is necessary.

All of this means that the performance and the robustness of the UI is going to be improved.

![Instead of having a separate piece of state for every invocation of the useLocalStorage hook, we have a single piece of state that all of the useLocalStorage invocations refer to. Only the first component that mounts reads from the localStorage. Every subsequent component reads from the SWR Cache.](../static/swr-beyond-http-requests/useLocalStorage-with-swr.png 'useLocalStorage with SWR')

After implementing this version of the `useLocalStorage` hook I wasn't surprised to discover that others have attempted to do the same. Most notably the [zydalabs/swr-internal-state](https://github.com/zydalabs/swr-internal-state) library contains a slightly different implementation of `useLocalStorage` using `swr`.


Using SWR to refactor the original useLocalStorage hook from usehooks.

Stale-while-revalidate (SWR) Beyond HTTP Requests


In collaboration with Mailchimp, Shard Systems is announcing the Mailchimp integration for LinkedIn Lead Gen Forms which is available here:

> https://linkedin.mailchimp.com

Make smarter marketing decisions when you sync your LinkedIn Lead Gen Forms' leads with your Mailchimp audiences. See the [Mailchimp Integration directory](https://mailchimp.com/integrations/linkedin/) for more details.

This integration was built and is operated by Shard Systems. It leverages:

- [React](https://reactjs.org/)
- [Next.js](https://nextjs.org/)
- [TailwindCSS](https://tailwindcss.com/)
- [Google Cloud Platform](https://cloud.google.com/)


Announcing the Mailchimp integration for LinkedIn Lead Gen Forms

Mailchimp integration for LinkedIn

Setting up a developer environment for contributing to the JavaScript Open Source Ecosystem