JavaScript Icon

JavaScript

Tracking all things JavaScript
903 Stories
All Topics

Julia Evans jvns.ca

A little bit of plain JavaScript can do a lot

Julia Evans:

I was pretty surprised by how much I could get done with just plain JS. I ended up writing about 50 lines of JS to do everything I wanted to do, plus a bit extra to collect some anonymous metrics about what folks were learning.

Listeners of JS Party know I’m an advocate for JavaScript sprinkles. Not on every site, but on most sites I think that’s the best way to start out.

Now more than ever, you can get a lot done with what’s right there in the browser. Wait until you feel the pain before you solve the problem. Who knows, maybe you’ll never have to…

YouTube Icon YouTube

JS Danger: OpenJS World Edition

This episode of JS Danger recorded for OpenJS World won’t be hitting the audio feed, so I figured I should log it in news for those interested. What’s JS Danger?

JS Party’s don’t-call-it-jeopardy game show where 3 OpenJS World speakers put their web dev knowledge to the test. Can you out-wit your fellow devs? Play along to find out with special guests Cassidy Williams, Prosper Otemuyiwa, and Tiffany Le-Nguyen.

HTML htmx.org

High powered tools for HTML

htmx allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.

htmx is small (~7kb gzipped), dependency-free, and even IE11 compatible. It’s the successor to intercooler.js and even comes bundled with a very nice haiku:

javascript fatigue:
longing for a hypertext
already in hand

JavaScript github.com

Easy authentication for Next.js and Serverless

This auth lib has a nice set of features, including support for a bunch of oauth providers. What I really appreciate about a solution like this (vs relying on a 3rd party) is the own your own data bit:

  • An open source solution that allows you to keep control of your data
  • Supports Bring Your Own Database (BYOD) and can be used with any database
  • Built-in support for for MySQL, MariaDB, Postgres, MongoDB and SQLite
  • Works great with databases from popular hosting providers
  • Can also be used without a database (e.g. OAuth + JWT)

Nikola Đuza pragmaticpineapple.com

Don't follow JavaScript trends

How’s the saying go? Choose well-understood, “boring technologies”…we often reach for the new and shiny just for the joy of tinkering with something.

Psst, I have invented the time machine (don’t tell anyone)! Let us quickly travel back in time to 2016. SWOOSH! We are there. JavaScript landscape looks like this:

If you are using a JavaScript framework or want to use a framework, Angular.js is probably something you would choose. But, the news about Angular 2 that will make you rewrite almost everything is just around the corner. Also, this new kid on the block - React.js is coming up and getting ripe. Of course, Vanilla JS and no-framework-folks are there. Not using a framework is still a popular opinion in 2016, but is slowly fading.

Knowing all this, what would you do? Which path would you choose and why?

JavaScript github.com

Easy P2P file transfer powered by WebRTC

This is inspired by Apple’s AirDrop (which is the greatest thing since Napster). ShareDrop lets you transfer files directly between devices without having to upload them to a server first.

ShareDrop allows you to send files to other devices in the same local network (i.e. devices with the same public IP address) without any configuration - simply open www.sharedrop.io on all devices and they will see each other. It also allows you to send files between networks - just click the + button in the top right corner of the page to create a room with a unique URL and share this URL with other people you want to send a file to. Once they open this page in a browser on their devices, you’ll see each other’s avatars.

The major advantage that AirDrop has is that you need an internet connection to discover devices with ShareDrop. The major advantage that ShareDrop has is that you can share between Android and Apple devices.

JavaScript roughnotation.com

Create and animate hand-drawn annotations on a web page

Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.

Follow the headline link to see it in action on the project’s website. This would be great for product or feature walk-throughs. What would be super cool is some way to use this on any website and send the annotated version to someone for review. Then it could be used for bug reporting, etc.

Evan You Increment

Making Vue 3

Evan You writes up lessons learned from rewriting the next major version of Vue.js.

Two key considerations led us to the new major version (and rewrite) of Vue: First, the general availability of new JavaScript language features in mainstream browsers. Second, design and architectural issues in the current codebase that had been exposed over time.

I found the section on overcoming the bottleneck of the Virtual DOM (and decreasing CPU time by up to 90%) fascinating. ASTs FTW once again!

Lea Verou lea.verou.me

Today’s JavaScript, from an outsider’s perspective

Lea Verou shared this story of using Javascript for the first time…

Today I tried to help a friend who is a great computer scientist, but not a JS person use a JS module he found on Github. Since for the past 6 years my day job is doing usability research & teaching at MIT, I couldn’t help but cringe at the slog that this was. Lo and behold, a pile of unnecessary error conditions, cryptic errors, and lack of proper feedback. And I don’t feel I did a good job communicating the frustration he went through in the one hour or so until he gave up.

It went a bit like this…

Tobias Uhlig github.com

A UI framework that runs (almost) entirely in Web Workers

Tobias Uhlig:

Neo is based on top of ES8 and uses the latest ES features as long as they can run directly inside the browser. This is one of the major design goals: the dev mode can run inside a browser without needing any JS related builds or transpilations. Instead of using any kind of templates, persistent JSON structures are in place. The combinations of these concepts lead to a pretty amazing performance and adds new possibilities for scaling to the UI area.

I haven’t seen any benchmarks or examples where using Neo produces extreme performance, but conceptually it makes sense that moving computationally expensive things to background threads would keep your UI thread snappy.

Webpack github.com

A loader that lets you use esbuild with webpack

I’ve had my eye on esbuild for awhile now (because I’m impatient), but there didn’t seem to be an easy way to use the Go-based JS bundler with our current webpack setup. (I want speed, after all, but I don’t want to have to work for it!)

I’m pretty excited by esbuild-loader, because its README says:

It makes sense to use [esbuild] over Babel/TSC with webpack to take advantage of both worlds (Speed and the webpack ecosystem).

That’s music to my ears, right there. I’ll report back how it works for us. ✊

Ember pzuraq.com

Comparing Ember Octane and React

This is a very detailed article on:

directly comparing Ember and React, using the latest idioms and best practices from both frameworks.

It goes really deep into the differences and the developer experiences of both frameworks and is a really good read for someone who is curious about what modern Ember looks like, especially if they have some previous React knowledge.

0:00 / 0:00