My boy's wicked smaht

Issue #29.January 4, 2021.2 Minute read.
Bytes

In this special edition of Bytes, I send it out late in the day because we’re an under resourced, bootstrapped startup just doing our best so be nice ok bye.

Basecamp releases Hotwire

DHH

Hotrod, meet Hotwire

First, they brought you Ruby on Rails… back in 2004. Then @DHH & friends got a few million bucks from Jeff Bezos, started racing F-1 cars, and developed terrible takes on startup equity.

But now they’re back to tech with a new release, Hotwire — Hotwire is a new, JavaScript-light approach to building web apps. It’s what they used to implement all of the frontend elements of Hey.com, the paid email service that you probably churned off of because it’s slow not free.

How does it work? Hotwire sends HTML instead of JSON over the wire, which (theoretically) allows for faster first-load pages, a lot less JavaScript, template rendering on the server, and a simpler dev experience.

It’s a collection of three frameworks — Turbo, Stimulus, and Strada — that work together to provide all the benefits mentioned above without (again, theoretically) sacrificing the speed or responsiveness of traditional SPA’s. Let’s take a closer look at each.

  • Turbo: A set of 4 “complementary techniques” that greatly reduces how much custom JavaScript you need to write. It speeds up page changes and form submissions, divides complex pages into components, and streams partial page updates over WebSocket for you. Turbo is the meat and potatoes of the Hotwire dinner plate.

  • Stimulus: A “modest” JavaScript framework to help you write custom JS when you need it. It doesn’t actually render HTML, but it does provide an “HTML-centric” approach to things like state and wiring. It’s the dinner rolls and stuffing of Hotwire.

  • Strada: Provides bridge tooling for how the web and native parts of a mobile hybrid app talk to each other. It hasn’t been released yet, but it sounds like the gravy that will go on top of the whole Hotwire dinner.

For a deeper dive, check out DHH’s appearance on the Full Stack Radio Podcast with Adam Wathan.

The Bottom Line

Is Hotwire a game changer? Probably not. Is it worth checking out because it’s an interesting approach to building web apps and you want to hedge your downsides in case they are actually right? Of course.

Thanks for the Memories, Flash

Update your Flash Player

Hackers are in shambles

Adobe officially discontinued Flash last week, marking the end of an era that began in the PJS (Pre-JavaScript) days in 1993. Back then, Flash was known as SmartSketch and was a vector drawing application developed by a company called FutureWave Software.

The company was acquired by Macromedia and rebranded to Flash in late 1996, where its functionality was expanded to a two-part system — a graphics and animation editor known as Macromedia Flash, and a player known as Macromedia Flash Player.

Adobe bought out Macromedia in 2005 which ushered in the Golden Age of Flash for the next 7-8 years. Sadly as happens with all good things, Flash’s days were numbered.

Steve Jobs Flash’s inability to innovate and scale with an evolving web ultimately doomed it. Flash sites were never able to reach an acceptable standard of speed, accessibility, reliability, and mobile-friendliness that we pretend to have on the web today.

RIP Flash.

JS Tip - React’s useRef Hook

The marketing pitch for React.useState is that it allows you to add state to function components. This is true, but we can break it down even further. Fundamentally, the useState Hook gives you two things - a value that will persist across renders and an API to update that value and trigger a re-render.

const [value, setValueAndReRender] = React.useState(
  'initial value'
)

When building UI, both are necessary. Without the ability to persist the value across renders, you’d lose the ability to have dynamic data in your app. Without the ability to update the value and trigger a re-render, the UI would never update.

Now, what if you had a use case where you weren’t dealing with any UI, so you didn’t care about re-rendering, but you did need to persist a value across renders? In this scenario, it’s like you need the half of useState that lets you persist a value across renders but not the other half that triggers a re-render — Something like this.

function usePersistentValue (initialValue) {
  return React.useState({
    current: initialValue
  })[0]
}

Spoiler alert, the functionality of our custom usePersistentValue Hook is very similar to the built-in React.useRef Hook.

If you want to add state to your component that persists across renders and can trigger a re-render when it’s updated, go with useState (or useReducer). If you want to add state to your component that persists across renders but doesn’t trigger a re-render when it’s updated, go with useRef.

For more info on useRef (and a deeper explanation of how useState is similar to useRef), visit Understanding React’s useRef Hook

Cool Bits

  1. Lee Robinson (a member of the Next.js team) made a quick video that covers 10 Next.js tips you probably didn’t know.

  2. In this post, Lucjan walks you through creating a free URL shortener with Cloudflare Workers. Much better than the other approach of spending all your allowance money on a short domain name.

  3. The Github Team wrote an in-depth blog post about how they built the Github Globe. tl;dr npm install globe.

  4. Brad Traversy released his annual Web Development in 2021 video where he covers recent trends and what the landscape looks like for web development in 2021. Great to see Brad back on YouTube!

  5. MyDrive is an open source cloud file storage server that just released v3 last week. Might be good to back up all your Google Drive files here, in case Google Drive goes down again 🙃.

  6. WickedBlocks is a collection of 120+ layout blocks and components built with Tailwind CSS ready to copy-paste into your Tailwind project. If you’d like the New England version, check out WickedBlachs. My boy’s wicked smaht.

  7. svgrepo.com is a collection of 300,000+ free SVG vectors and icons. Now it’s easier than ever to waste an entire day agonizing over which icon set to use.

  8. Project Lightspeed is an open source, fully self contained, live streaming server. Can’t wait to see what they come out with for Project Ludicrous Speed.