JavaScript Icon

JavaScript

Tracking all things JavaScript
1058 Stories
All Topics

Aftab Alam aalam.in

Get up & running with Astro

This is part 1 of a 5-part series on learning Astro, a new-kid-on-the-block static site builder that’s capturing the hearts of web developers due to its Bring Your Own Framework (BYOF) approach and Zero Emitted JS (ZEJS?) by default.

Throughout this series, I’ll walk you, step-by-step, through building an Astro-based blog(codenamed: Astro-Ink). You’ll discover more of Astro, its benefits, and super-interesting constructs and patterns that Astro brings to the table.

jQuery github.com

Auto-generate vanilla JS alternatives for jQuery methods

Migrating off jQuery? So was Sachin Neravath:

Most of the projects use only 15% to 20% or less than 30% of the jquery methods And in most of the cases, I didn’t want to support all the edge cases or legacy browsers. The hardest part was finding the jQuery methods in the existing project and writing the alternative vanilla js methods without making much changes in the codebase. So I wrote this library which automatically finds jquery methods in any particular JavaScript file and generates readable, chainable vanilla js alternatives. This can also be useful if you want to generate your own utility methods similar to jQuery.

Cory Etzkorn notion.so

Notion's journey to Next.js

What Vercel has enabled teams to do with Next.js is next level, and it’s truly evident when you read stories like this one from Cory Etzkorn on Notion migrating their marketing site to Next.js.

We rebuilt our entire marketing site from scratch, choosing to go with a statically generated architecture over our former purely client-rendered approach. Two months and 109 React components later, we’ve now fully migrated to our framework of choice, Next.js, and couldn’t be happier with our decision. Here’s how we got there.

Notion's journey to Next.js

Ryan Dahl deno.com

Deno Deploy Beta 2

Big news from Deno today.

Today we are releasing Deploy Beta 2. This is the second in a series of beta releases that will be made over the coming months. Each release will add features and refine the programming model. The releases will culminate in a General Availability announcement that we estimate will happen in Q4 2021.

Over the past eight months, we have been quietly designing this hosted service to supplement workflows with the open source Deno CLI. Deploy does not run on AWS Lambda nor does it use Cloudflare Workers; this is a new system with a unique design. We encourage people to look past the rough initial UI and explore this new JavaScript runtime.

What’s next: A general availability (GA) release is expected Q4 2021.

JavaScript web.dev

URLPattern brings routing to the web platform

Routing might be implemented in a number of ways: it’s sometimes code running on a server that maps a path to files on disk, or logic in a single-page app that waits for changes to the current location and creates a corresponding piece of DOM to display.

Buggy routing (and breaking your browser’s Back button) has been the achilles heel of SPAs since forver. Hopefully better tooling like this URLPattern proposal will help developers better handle the need.

I like what I see from the linked write-up. The feature is disabled by default in every major browser, but there’s a polyfill you can use in the meantime.

JavaScript zjy.cloud

A simple way to build collaborative web apps

This is an excellent post that takes you along on the author’s journey to build a simple, collaborative (desktop-like interactions and realtime collaborations, such as Notion, Discord, Figma, etc.) todo app:

With the help of many great tools, we’ve successfully built a fast, collaborative todo app. More importantly, we’ve worked out a reasonably simple approach to building similar web apps. As the user base and feature set grow, this approach shall scale well in both performance and complexity.

Both the resulting frontend and backend code are open source and you’ll likely learn about some new tools (like Replicache) along the way.

Henrik Fricke indiepen.tech

Indiepen – a privacy-friendly solution to present your code to people

Henrik Fricke:

Indiepen lets you embed HTML, CSS, and JS code examples on a website. We built it because we wanted to embed code examples on our blog, but many existing solutions set cookies, have a ton of features or just come with a bad performance.

😎 No cookies, no tracking, no external requests
⚡️ Small footprint with less than 20 KB
❤️ Features built for everyone

Congrats, Henrik, on shipping your first open source project! 👏

James Long jlongster.com

A future for SQL on the web

Where by “on the web” James means “in the browser”:

SQL is a great way to build apps. Especially small local web apps. Key/value stores may have their place in large distributed systems, but wow wouldn’t it be great if we could use SQLite on the web?

I’m excited to announce absurd-sql which makes this possible. absurd-sql is a filesystem backend for sql.js that allows SQLite to read/write from IndexedDB in small blocks, just like it would a disk. I ported my app to use and you can try it here.

A very cool project that was inspired by phiresky’s Hosting SQLite databases on Github Pages.

Chris Coyier CSS-Tricks

Choice words about the upcoming deprecation of JavaScript dialogs

Chris Coyier is not too pleased about browsers changing the way cross-origin iframes handle certain native JavaScript calls such as alert and confirm:

Cross-origin iframes are essentially the heart of how CodePen works. You write code, and we execute it for you in an iframe that doesn’t share the same domain as CodePen itself, as the very first line of security defense. We didn’t hear any heads up or anything, but I’m sure the plans were on display.

The change is about security and performance, it seems. There’s a workaround using postMessage, but that comes with its own problems that Chris details. Overall, it seems the way this change is being rolled out is more of a concern than the change itself…

Believe it or not, I generally am a fan of Google and think they do a good job of pushing the web forward. I also think it’s appropriate to waggle fingers when I see problems and request they do better. “Better” here means way more developer and user outreach to spell out the situation, way more conversation about the potential implications and transition ideas, and way more openness to bending the course ahead.

rainerhahnekamp rainerhahnekamp.com

Protractor is dead, long live Cypress

Rainer Hahnekamp:

On 24th April 2021, Angular announced the deprecation of their E2E testing tool protractor. It was unclear if there will be a successor or if Angular delegates this to its users. In this article, I will provide a short overview over the differences between the various E2E frameworks, and argue why you should use Cypress.

I’ve heard nothing but high praise of Cypress and thoroughly enjoyed our conversation with Gleb Bahmutov when he joined us on JS Party.

Ivan Nikolić github.com

Node `timers/promises` for browser and server

Node recently introduced timers/promises API which provides functionality such as setTimeout and setInterval but using Promises. Developers usually achieved that functionality with various 3rd-party packages but now they have full STD support with additional features like native cancellation.

So, I thought it would be useful to have that same API available in browsers (even down to IE11) and older Node versions!

0:00 / 0:00