Bytes.dev - Bytes: making FTP cool again

Bytes banner (Turn on images 😘)

“WTF is this?” First off, watch your language. The RWD Weekly newsletter (of which you were subscribed) has merged with Bytes (this newsletter) to bring you our educational, yet delightful dose of JavaScript and web development each week.

We hope you enjoy it. If it’s not your thing, you can unsubscribe below.

This week, we’ve got a comeback role for Macaulay Culkin, generic-looking functions, and TypeScript Mother Goose.

Welcome to #96


Richy Rich Meme

Richie Rich-text back in the lab

Lexical

If you’ve ever had to build a rich text editing experience before, you know that there’s only one word to describe it. That’s probably why Facebook abandoned Draft.js (along with all their users under the age of 40).

But last week, Dominic Gannaway (a former React Core Team member) changed the game when he open sourced a new-and-improved rich text editor framework called Lexical.

If you’ve never experienced the pain of building this yourself, it might not sound like a big deal – so let me paint you a picture.

When dealing with rich text, managing selection state is a nightmare. You have to translate the selection back and forth between the text string, and the html it represents, all while keeping track of the history of changes. Previous frameworks like Draft provide a solution for this, but it’s slow, it doesn’t work on mobile, and you have to use Immutable.js (lol).

So what makes Lexical different? The biggest thing is that Dominic (aka Richie Rich-text) made sure it doesn’t have any baggage dependencies, which unlocks some cool features:

  1. Speed: Lexical is up to 70% faster than Draft and is only 22kb over the wire, which means you’ll have plenty of bytes left to waste on state management libraries.

  2. Framework agnostic: It works with (or without) the JavaScript framework of your choice. It already comes with bindings for React out of the box, and bindings for other popular frameworks are in the works.

  3. Accessibility: Unlike many rich text editors, Lexical follows all of the WCAG best practices and is compatible with screen readers and other assistive technologies.

  4. Plugins: You can easily extend the core functionality to add @ mentions, #hashtags, undo/redo – all the goodies that will get your PM excited.

Bottom Line: A rich text editor framework that *actually* works? Now we just gotta figure out how to get Macaulay Culkin to play Dominic in the Lexical movie.


Sleepover Meme

Me at my first sleepover (in 2015)

TypeScript 4.7 coming in hot

We get it – TypeScript is amazing and it’s taking over the world.

But the last few releases have been boring AF more focused on incremental improvements than exciting new features. Thankfully, last week’s v4.7 beta release is coming in hot with some long-requested new features and functionality that should actually make our lives easier.

Here’s the 3 most interesting things you should know about TS 4.7:

  • Better support for Legacy Modules – Ageism in tech is a serious issue, so it’s good to see TypeScript looking out for the elderly modules. 4.7 makes it much nicer to import legacy CommonJS files into the more modern ES Modules. It also added support for .cjs and .mjs file extensions as well as the type and exports properties in package.json.

  • Big improvements in two key areas – How TypeScript analyzes computed object properties and how TS handles inference problems when a function is defined in an object. There’s a lot going on under the hood to make both of these things happen, but all you need to know is that TypeScript should yell at you less now.

  • Enhanced generics functionality lets you pass generic type parameters to functions without calling the function itself, allowing you to create a more narrowly typed function from an existing generic function (not to be confused with this generic-looking function).

Bottom Line: You know how hard it is to make these TypeScript updates enjoyable to read? It’s the IRS of the JavaScript ecosystem. Boring, mostly just yells at you, but necessary to make things function consistently (I’m told).


Jobs

Synapse Studios is looking for Senior JavaScript Engineers in the US

Synapse is a software consultancy (Node/React) with a focus on engineering excellence and tightly knit, low-ego teams. We believe devs want to feel productive, challenged, and supported and build our culture around those concepts. Come join our growing crew as we solve interesting challenges in healthcare, fitness, IoT, retail and more, for a variety of clients, at scale.

Yeti Labs is looking for Frontend (React + Typescript) developers

Yeti Labs is a human-centered frontend studio designing and building web apps for DeFi protocols. We love UI animations, innovative UXs, best practices, reusing our code, improving our workflow and learning new things. Come join our crew as we solve interesting challenges while having fun.


🔬 Spot the Bug – Sponsored by Retool

Retool is the best way to build internal tools and dashboards. We use it, and it’s easily saved us 45+ engineering hours.

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. Huy wrote an article on How the TypeScript compiler compiles. Hopefully his next article will be called, “How many types could the TypeScript type if the script types were strictly typed?” – so he can earn the official title of TypeScript Mother Goose.

  2. CarbonQA provides QA services geared for dev teams. They’ll boost your team’s morale sky-high by… breaking your code repeatedly. But the good news is that you’ll never have to waste time on testing again. They work in your tools, talk with your team on Slack, and let your devs be devs. [sponsored]

  3. Josh Comeau wrote about how Understanding Layout Algorithms can help you feel more confident with CSS. Now he just needs to write something that’ll help this guy feel more confident about wearing hats.

  4. Gergely Orosz wrote a deep dive on the longest Atlassian outage of all time. But why say Jira’s down when you could say atlassian shrugged? (src because we’re not that funny.)

  5. Mark Erikson didn’t sleep for two weeks so that the official React bindings for Redux could be completely rewritten in TypeScript, have a newly modernized build output, and be compatible with React 18. Thanks Mark.

  6. Wild Wild Path lets you access object property paths with wildcards and regex. It’s even crazier than it sounds, much like Will Smith’s 1999 film, Wild Wild West – a movie so bad that if you say its name three times into your bathroom mirror, Will Smith shows up and slaps you in the face.

  7. Jakub Roztočil wrote about How he lost 54k GitHub stars overnight – which sounds like the title for the nerdiest possible remake of “How to Lose a Guy in 10 Days.”

  8. Netlify Drop is making FTP cool again with a slick drag and drop way to upload a folder of files to get your website online. It’s just as easy as uploading a photo album to MySpace – but instead of a bunch of low-quality bathroom mirror selfies with the flash on, it’s just a bunch of JavaScript files for your over-engineered personal blog. How we have fallen.


🔬 Spot the Bug Solution – Sponsored by Retool

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;
  }
}

Share Bytes

ui.dev banner
 

We work hard to make Bytes something you'd want to share with your developer friends. And to make it a little easier, we'll give you free stuff when you do.

Your bits

Your Referral Page

Your shareable link

https://bytes.dev?x=1697807915
 

Have a product you think our developers will love?
Advertise in Bytes

youtube icon youtube icon twitter icon instagram icon

50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101

Unsubscribe from Bytes

Older messages

Bytes: The Edge is just a spicy CDN

Tuesday, May 3, 2022

This week, we're experimenting with our runtime features, learning about The Edge™️, and (hopefully) avoiding accidental tax fraud. Welcome to #97. Some experiments pay off Node gets experimental

You Might Also Like

Charted | The Composition of U.S. Households Over Time (1960-2023) 📈

Wednesday, November 6, 2024

The structure of American households has shifted significantly since 1960, driven by record-low fertility rates and more people living alone. View Online | Subscribe | Download Our App Presented by:

🔊 How Alexa Speakers Have Changed in 10 Years — I Want More Expensive Mobile Games

Wednesday, November 6, 2024

Also: Using Symbolic Links in Linux, and More! How-To Geek Logo November 6, 2024 Did You Know Merv Griffin composed the theme song used for Jeopardy and, since the inception of the show, made over 70

JSK Daily for Nov 6, 2024

Wednesday, November 6, 2024

JSK Daily for Nov 6, 2024 View this email in your browser A community curated daily e-mail of JavaScript news Unveiling the New Angular 3D Circular Charts Component The Angular 3D Circular Charts

Daily Coding Problem: Problem #1600 [Easy]

Wednesday, November 6, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Amazon. Implement a stack API using only a heap. A stack implements the following

Know What You Control 🪰

Wednesday, November 6, 2024

How a bug-fixing endeavor gave me a good POV on election night. Here's a version for your browser. Hunting for the end of the long tail • November 06, 2024 Know What You Control If you're stuck

Spyglass Dispatch 003: Lina Gone • Prediction Market Victory Laps • TikTok Saved? • Apple's Smarter AI • The Return of Tim Apple

Wednesday, November 6, 2024

Lina Gone • Prediction Market Victory Laps • TikTok Saved? • Apple's Smarter AI • The Return of Tim Apple The Spyglass Dispatch is a free newsletter sent out daily on weekdays. Feel free to forward

Top Tech Deals 💰 $20 Monster Earbuds, TCL TVs, Anker Power Station, and More

Wednesday, November 6, 2024

Pre-Black Friday deals you won't want to miss. How-To Geek Logo November 6, 2024 Top Tech Deals: $20 Monster Earbuds, TCL TVs, Anker Power Station, and More Pre-Black Friday deals you won't

Zuzalu is Dead. Long Live Zuzalu! - Metamorphosis Commenced v3

Wednesday, November 6, 2024

Top Tech Content sent at Noon! NODES 2024, a Dev Conference on AI, Knowledge Graphs & Apps Read this email in your browser How are you, @newsletterest1? 🪐 What's happening in tech today,

The best open-source AI models

Wednesday, November 6, 2024

Drone flight goggles; Kindle Paperwhite hands-on; Best laptop deals -- ZDNET ZDNET Tech Today - US November 6, 2024 ai concept The best open-source AI models: All your free-to-use options explained

Bolster Your Cyber Defenses with CIS Controls v8.1

Wednesday, November 6, 2024

Key changes to help you mature your cybersecurity posture... ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌