Web Components - The Good Parts

The Main Thing

Enhance... enhance...

Enhancing the web

You know how “healthy” cereals like Kix used to have slogans like, “Kid tested. Mother approved”?

Well, it might be time to dust off that catch phrase for Enhance — a brand new JavaScript HTML framework that offers an easy-to-swallow way to use Web Components that feels a lot like Next.js and Remix.

Developer tested. Platform approved.

How we got here: If you’ve never worked for Google, you may not be aware that Web Components have actually been around for over a decade now.

They’re a set of web platform API’s that lets you create custom, reusable HTML tags based on existing web standards – which gives them great performance. But they’re such a pain to work with that even the official Web Components website tries to talk you out of building your own from scratch.

That’s one reason why many web developers have historically reached for JavaScript frameworks instead, even though that can often introduce unnecessary bloat and complexity.

So let’s dive a little deeper into what makes Enhance’s “best-of-both-worlds” approach so compelling:

• File-based routing with plain HTML — Imagine Next but you open the /pages directory, and surprise the files inside end in .html.

• Single File Components — When you name your framework after progressive enhancement, you better believe you’re gonna get dependency free, pure web components as reusable building blocks.

• State Management — Enhance has its own store solution for complex data types (arrays, objects) that don’t play nice with WC, and attrs for the rest of the attributes that do.

• API Routes — You can’t compete in the hunger meta framework games unless you have API routes. These routes can send JSON or text/HTML and handle all REST-y stuff.

Bottom Line: There’s definitely some irony that Enhance, which already seems like the most developer-friendly way to use Web Components, looks a lot like React (at least in some examples).

But hey, sometimes moms need to trick their kids into eating healthy, and framework authors need to trick developers into using the platform.

Our Friends
(With Benefits)

Just Ship It™

Retool is better than we thought

A while back, we decided it was time to start paying attention to a few stats — like how many new people subscribed to Bytes, how they found us, etc. (It took us over 100 issues, but here we are.)

So we spent a few hours arguing about discussing what data we wanted to get, how to get it, how to display it — and the whole process was taking forever. And when someone mentioned that we “might want to set up a SQL database for tracking analytics,” I knew we’d gone off the rails.

But then I remembered Retool.

So we signed up for a free trial — and it took me literally one afternoon to connect to all of our third-party data sources and set up all the charts, tables, and graphs we could ever want by myself.

Since then, it’s easily saved us 75+ hours of engineering time. And since our free trial is about to run out, we’re actually going to (gulp) start paying for it. (Truly the highest praise I can give.)

Thankfully, startups can apply to receive one year for free — so I’ll try that out first 🙏

Check it out, and save yourself a future headache.

The Job Board

	Senior or Staff Front-end Engineer
	100% Remote React
	Close.com is looking for 3 experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. Close is a 100% globally distributed team of ~55 high-performing, happy people that are dedicated to building a product our customers love.

Spot the Bug

Sponsored by Mergify

Teams at Amazon and Mozilla use Mergify to prioritize, queue, and automatically merge their PR’s. You’ll probably like it too. Check out their Startup Program to get 12 months free.

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      const todos = state.todos
      return { 
        ...state, todos: 
        todos.concat(action.payload) 
      }
    case 'REMOVE_TODO':
      const todos = state.todos
      const newTodos = todos.filter(
        (todo) => todo.id !== action.id
      )
      return { ...state, todos: newTodos }
    default:
      return state
  }
}

Cool Bits

1. Ives van Hoorne (the creator of CodeSandBox) wrote about How CodeSandbox clones a running VM in 2 seconds. It was an insightful post that really makes you wonder… what happened to Dolly, the sheep they cloned in the ’90s? And why did we all read about it in Time Magazine for Kids back in elementary school?

2. TypeScript 4.8 was just released with better narrowing and inference, primitive parsing from template string types, and lots of new correctness checks. I spent 20 minutes trying to think of a way to make that sound more exciting – but I’m just a man, not a magician.

3. Unlayer created this drag-and-drop email editor, page builder and popup builder that you can easily embed in your SaaS app. With any luck, you’ll build something that makes designing emails less painful than filing down your fingernails with a cheese grater. [sponsored]

4. Ahmad Shadeed wrote all about CSS container queries — now that they are finally supported in both Chrome and (almost) Safari. I haven’t seen developers this excited about CSS since the popular kids in their 9th-grade class asked if anyone could help them customize their MySpace pages.

5. For those of you who are really, really bored at work – GradeJS lets you analyze Webpack production bundles (without having access to the source code of a website) and detect any vulnerable or outdated packages.

6. Lloyd Atkinson wrote about how Default Exports in JavaScript Modules Are Terrible. What’s the over/under that Lloyd is an IIFE truther?

7. Almog Gabay created an in-depth case study on client-side rendered apps vs. server-side. It reminded me of another intense showdown: my wife’s determination to decorate for Fall vs. a 110-degree heat wave that refuses to let up. Let’s get ready to rumble.

8. Ryan Dahl wrote a letter/blog post to Oracle asking them to Please release the JavaScript trademark What Ryan didn’t mention was a trendy hashtag that we can all tweet to feel like we’re accomplishing something - #FreeJS, you’re welcome, Ryan.

Spot the Bug: Solution

Sponsored by Mergify

The todos variable is being re-declared within the same block. Variables declared with const and let are block-scoped, meaning they don’t exist outside of the block they were called in. Blocks are created with {} brackets around if/else statements, loops, and functions.

There are many solutions, including changing the variable name in the different cases or removing the variable altogether. We can also wrap each of our cases in a block to isolate the variables.

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO': {
      const todos = state.todos
      return { 
        ...state, todos: 
        todos.concat(action.payload) 
      }
    }
    case 'REMOVE_TODO': {
      const todos = state.todos
      const newTodos = todos.filter(
        (todo) => todo.id !== action.id
      )
      return { ...state, todos: newTodos }
    }
    default:
      return state
  }
}