Spy Kids 2: The Island of Lost Dreams

Issue #62.August 22, 2021.2 Minute read.
Bytes

This week, we’ve got big news from React Native-land, DHH writing blog posts again, and an OSS creator who’s really committed to rhyming. Welcome to #62.

Hades

I improved CPU-intensive workloads by 20-50%!

React Native releases v0.65 and shares its future plans

Everyone’s favorite mobile UI framework released v0.65 last week, and the biggest changes were some new upgrades to the Hermes Engine — Facebook’s open source JavaScript VM.

  • Way faster garbage collector — A new, concurrent approach has led to 30x shorter pause times and has improved CPU-intensive workloads by 20-50%. The new garbage collector is named Hades, because Facebook couldn’t find a “Greek God of overthrowing democracies”.

  • ECMAScript Internationalization API — This API is now built into Hermes on Android by default, so Hermes users don’t need to do local polyfills anymore.

  • Improved accessibility — React Native has started making good on Facebook’s recent accessibility pledge by allowing specification of high-contrast light and dark values, general fixes to optimize for TalkBack/VoiceOver, and more.

The React Native Roadmap didn’t include anything too groundbreaking, but there were a few highlights:

  • React Native has already incorporated architecture updates like concurrent rendering into all of Facebook’s mobile products, and they’re in the process of incorporating those updates to React Native itself.

  • They’ve promised to more effectively manage the React Native project itself by reviewing PR’s more frequently, adopting a more consistent release schedule, and communicating more openly with the RN community.

  • They shared plans to target new platforms like VR and Desktop (RIP Electron?).

Bottom Line: React Native is kind of like that one person you dated in college — it’s a lot of fun, but it’s definitely not fully stable. Hopefully this latest release and new roadmap will help chart a path towards React Native 1.0, and hopefully your Ex went to therapy.

Hasura Meme

duh [sponsored]

Hasura is by far the easiest way to GraphQL

You know that feeling when you see all the Cool Developers™ on Twitter talking about how great GraphQL is, and you think, “Damn, I wish I could try using GraphQL like them, but I don’t have enough time to learn it because I’m not a developer advocate at a huge tech company?”

Well now you can get all the benefits of GraphQL without spending hours to learn it at all master the details, thanks to Hasura.

It lets you set up a production ready GraphQL API in 5 minutes or less, so your app can query, update, and receive real-time notifications of your data. Plus, Hasura — AKA The Haskell Demon (IYKYK) — handles all the gross DB stuff for you like observability, security, and caching, so you don’t have to worry about it.

Look who’s “working smarter” now, random web dev influencer guy who somehow has 100k Twitter followers?

👉 Check out Hasura Cloud’s Always-Free Developer Tier, and give yourself the power of GraphQL without the headaches.

Gamora Meme

🥲

NPM dependencies vs devDependencies

tl;dr

dependencies are required by your application at runtime. Packages like react, redux, and lodash are all examples of dependencies. devDependencies are only required to develop and or build your application. Packages like babel, enzyme, and prettier are examples of devDependencies.

npm install

The actual difference between dependencies and devDependencies are seen when you run npm install.

If you run npm install from a directory that contains a package.json file (which you typically do after you clone a project, for example).

✅ All of the packages located in dependencies will be installed ✅ All of the packages located in devDependencies will be installed

If you run npm install <package-name> (which you typically do when you want to add a new package to your existing project), i.e. npm install react.

✅ All of the packages located in dependencies will be installed ❌ None of the packages located in devDependencies will be installed

Transitive Dependencies

If package A depends on package B and package B depends on C, then package C is a transitive dependency to Package A. What that means is that in order for Package A to run properly, it needs Package B installed. However, in order for Package B to run properly, it needs package C installed. Why do I bring this up? Well dependencies and devDependencies treat transitive dependencies differently as well. When you npm install from a directory that contains a package.json file,

dependencies - ✅ Downloads all transitive dependencies. devDependencies - ❌ Doesn’t download any transitive dependencies.

Specifying dependencies vs devDependencies

As of NPM 5, when you run npm install <package-name>, that package is automatically going to be saved inside of your dependencies in your package.json file. If you wanted to specify that the specific package should be included in devDependencies instead, you’d append the --save-dev flag.

npm install prettier --save-dev

Installing on a production server

Often times you’ll need to install your project on a production server. When you do that, you don’t want to install devDependencies since you obviously won’t be needing them on your production server. To install only the dependencies (and not devDependencies), you can use the --production flag.

npm install --production

Jobs

2x Sr. Frontend Engineers - React | 100% Remote

Close.com is looking for two experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. They are a 100% globally distributed team of ~45 high-performing, happy people that are dedicated to building a product our customers love.

Cool Bits

  1. DHH (the guy who likes to drive cars fast, oh also the creator of Ruby on Rails and Basecamp) wrote a blog post about building modern web apps without JavaScript bundling or transpiling. Unlike some of his previous blog posts, this one hasn’t resulted in 50% of Basecamp employees immediately quitting (yet).

  2. Wavesurfer.js is a customizable audio waveform visualization that’s built on top of the Web Audio API and will help you get pitted, so pitted brah.

  3. James Long wrote about a future for SQL on the web and his new project, Absurd-sql. Not to be confused with another absurd sequel, Spy Kids 2: The Island of Lost Dreams.

  4. In this episode of The Firebase Podcast, David East and Jeff Huleatt (which we think should be renamed to “Playing with Fire”), the maintainer of ReactFire, discuss how Firebase will take advantage of new React 18 features like Suspense.

  5. CSS Accent Color (from the CSS UI specification) lets you bring your brand color to built-in HTML form inputs with one line of code.

  6. Microsoft and Google worked together to bring native support for CSS Modules to Chromium. It’s awesome Google and Microsoft are finally listening to the community and embracing the CSS Modules we’ve all known and loved for years. What? This is a different CSS Modules?

  7. Imba is a new programming language (7 years in the making) that compiles to JavaScript and is meant to be a JS alternative. Imba was created by a guy named Sindre, who is the CTO of a company called Scrimba. And sometimes, Sindre likes to take a break from building Scrimba and Imba by playing his marimba and watching the Lion King, starring Simba.