Bytes.dev - Bytes: making FTP cool again

“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

---

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.

---

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

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

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

Unsubscribe from Bytes