JavaScript Icon

JavaScript

Tracking all things JavaScript
887 Stories
All Topics

Maxime Vaillancourt turven.xyz

See how many other people are currently on the same page as you

A neat idea:

turven is a tiny widget that shows how many people are currently on the same page as you, for “warm fuzzy feelings” purposes. There’s something cool about seeing that there’s another soul out there, somewhere on our little blue planet, who’s reading the same thing at the same moment ✨

In practice, I’m not sure if it’ll make us feel less lonely or more lonely:

You’re the only person in the whole world on this web page right now. Why not invite a friend?

I guess it depends on which web pages you frequent…

Sheshbabu Chinnakonda sheshbabu.com

Rust for JavaScript developers (functions and control flow)

This is part 3 of a three part series from Sheshbabu Chinnakonda introducing the Rust language to JavaScript developers — this one is focused on functions and control flow.

When Shesh kicked off this series he said, “I find it easier to understand something new if it was explained in terms of something I already know. I thought there might be others like me.”

BTW, here are links to the others from this series:

Zach Leatherman zachleat.com

Use Speedlify to continuously measure site performance

Zach Leatherman:

Instantaneous measurement is a good first step. But how do we ensure that the site maintains good performance and best practices when deploys are happening every day? How do we keep the web site fast? The second step is continuous measurement. This is where Speedlify comes in. It’s an Eleventy-generated web site published as an open source repository to help automate continuous performance measurements.

Demo here.

Use Speedlify to continuously measure site performance

npm sambleckley.com

Worrying about the npm ecosystem

Sam Bleckley:

The npm ecosystem seems unwell. If you are concerned with security, reliability, or long-term maintenance, it is almost impossible to pick a suitable package to use — both because there are 1.3 million packages available, and even if you find one that is well documented and maintained, it might depend on hundreds of other packages, with dependency trees stretching ten or more levels deep — as one developer, it’s impossible to validate them all.

He then spends some time measuring the extent of the problem.

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.

0:00 / 0:00