A friendly guide to front-end date pickers!

The Marko programming language

Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript.

Why streaming isn't enough.

An explainer for web development using only vanilla techniques.

snapDOM captures HTML elements as images with exceptional speed and accuracy. - zumerlab/snapdom

Apache ECharts, a powerful, interactive charting and visualization library for browser

A fast and versatile JavaScript animation library

This website allows you to select a city and then draws every single road on a screen.

Learn SQL by creating a SQL database in JavaScript - weinberg/SQLToy

Over the years, Google's treatment of JavaScript has changed, leaving us with misconceptions of how it's indexed. Here, we debunk the myths.

There are too many ways to represent unknown or missing data and this can lead to defects.

They're completely different, but often coupled.

Web component JS frameworks overview by their syntax and features: Svelte 5, React, Vue 3, Angular Renaissance, Angular, Lit, Ember Octane, Solid.js, Svelte 4, Vue 2, Alpine, Ember Polaris, Mithril, Aurelia 2, Qwik, Marko, Aurelia 1

htmx and Unpoly are JavaScript libraries that add interactivity to multi-page applications (MPA). Here’s why Unpoly might be better choice.

Dive into a world where running any WASI and WASIX package in your browser is a breeze. Whether it's Python, Bash, FFmpeg, or [any package published](ht...

It’s been a long time coming, but we finally now have the built-in `structuredClone` function to make deep cloning objects in JavaScript a breeze

EHTML (or Extended HTML) can be described as a set of custom elements that you can place on an HTML page for different purposes and use cases. The goal of this library is to provide a convenient way to eliminate JavaScript code on the client side as much as possible for basic and routine tasks. The biggest focus of this library is to offer the easiest way to perform **AJAX** operations just by using HTML. Also EHTML treat your HTML code code not only as a markup language but also as a templating language.

In my day job, I work on a JavaScript framework (LWC). And although I’ve been working on it for almost three years, I still feel like a dilettante. When I read about what’s going on in …

With the help of Web MIDI API, we can use Google Sheets as a music sequencer.

A simple toolchain that Koding Kitty uses for building its web.

How two simple steps improved the responsiveness of Wikipedia's mobile site

Learn webgpu

The View Transition API lets you add transitions between views of a website.

A JavaScript library to position floating elements and create interactions for them.

Objects in JavaScript are awesome. They can do anything! Literally…anything. Just because you can do something, doesn’t (necessarily) mean you should.

Interactive Music. Scroll to play.

In this article, Juan Diego covers the least known yet extremely useful APIs, such as the Page Visibility API, Web Sharing API, Broadcast Channel API and Internationalization API. Together we will see what they are, where we should use them, and how to use them.

Build your own web framework that deploys to edge and serverless infrastructure.

In this essay, Carson Gross explores alternatives to Single Page Applications (SPAs), advocating for an 'HTML-Centric' development approach. He highlights the drawbacks of SPA complexity and the benefits of embracing HTML as the core medium for web development, offering a simpler, more efficient way to build applications without sacrificing interactivity. Carson discusses how tools like htmx enhance HTML's capabilities and encourages developers to reconsider the dominant SPA paradigm with technical bravery.

A JavaScript client for YouTube's private API, known as InnerTube. - LuanRT/YouTube.js

At Vercel, our mission is to enable developers to build and publish wonderful, high-performant apps and websites. Learn more about Vercel here.

Animations made simple. The fast and light animation library for JS, React and Vue. Motion uses browser APIs like WAAPI and ScrollTimeline for a tiny filesize and superfast performance. Previously Framer Motion.

Last week I gave a talk at AlpineDay entitled "From Vue to Alpine: How & Why". I put up my slides from my AlpineDay talk, "From Vue to Alpine: How & Why":https://t.co/xTzIl0FGunAnd also the files I used to test performance:https://t.co/tB5EThfEEJ pic.twitter.com/Jv8P7iDBcv— Matt Stauffer (@stauffermatt) June 10, 2021 In the talk I shared a few situations in which I've moved applications that were previously using Vue to use Alpine instead, for the sake of Google's Core Web Vitals. These sites were using Vue for light enhancements on top of a server-rendered app, and I found that Alpine is lighter to load and parse in these cases. I still stand by everything I said in the talk. However, a large swath of the Internet discovered my slides, hadn't heard the talk, and assumed I was badmouthing Vue. So, I wanted to write a post about how we can optimize our usage of Vue for this same scenario! How do we minimize Vue's impact on the Core Web Vitals? When Vue is too heavy In my talk, I described working on the Tighten website to improve its Core Web Vitals scores. For that particular site, we were using Vue for some very small components, and the combination of Vue's loading time and the components' initial processing time in the browser led to a significant delay for loading the page. I discovered I could solve our problem by replacing those components with Alpine components, and realized — and then gave a talk about this idea — that Alpine is an ideal fit, even for a Vue-loving agency like ours, for enhancements above vanilla JavaScript and below heavy dashboards and SPAs. Gimme my Vue! However, many of our sites — and likely yours, if you're reading this — are ideal for Vue, so we're not just going to drop it. Instead, let's look: can we optimize our page load speeds? There's a whole group of answers that have to do with code splitting and async loading, which you can find a link to down at the bottom of this post. But there are two strategies that are very similar to what I talked about in my talk, so they're the ones I'm going to cover in this talk. Making Vue load faster If you define your Vue components inline in your HTML (rather than in single-file components), it turns out this requires a heavier (larger file download) and slower (more processing power spent) version of Vue. This version has an in-browser compiler, which causes the impact to load size and processing time. I talked briefly with Evan You, the creator of Vue, who taught me that the "runtime-only" version (meaning, with no compiler) of Vue is 2/3rd the download size of the full Vue. He also gave me two ideas for how we can shrink Vue's load size and processing time. 1. Pre-compile your templates and use the "runtime" Vue build As I mentioned above, if Vue is going to have to compile Vue component definitions from your HTML, it has to include an in-browser compiler, which makes the script file larger and the proces

JavaScript has come a long way since I knew it as the “D” in DHTML. For anyone like me, who’s been reluctant to use the latest syntax that could require polyfills or a transpiler, I’ve written this cheatsheet to get you caught up on all the goodness that’s widely supported in modern browsers.

This book explains how to implement DDD, CQRS and Event Sourcing. The concepts are put into practice with standalone examples and a Sample Application.

Modern JavaScript Tutorial: simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming and more.

Documentation and demos for the open source reveal.js HTML presentation framework.

If you’ll try to google “web scraping tutorial” you’ll get a bunch of tech articles on the subject that tells you how to achieve the result using python. The…

In this post, Kyle Shevlin demonstrates using a switch statement to replicate a form of pattern matching in JavaScript.

I can hear you crying out now: “Why on Earth would you want to use jQuery when there are much better tools available? Madness! What sort of maniac are you?”

Share your videos with friends, family, and the world

htmx gives you access to AJAX, CSS Transitions, 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 (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react

Learn how to use Node ecosystem in Deno.

The problem There are sometimes that we need to perform actions on certain events controll...

So far in 6.859, we've primarily been working with visual analysis grammars like Vega-Lite or VizQL (Tableau). These grammars break visualization design down into a process of specifying mappings (or visual encodings) between data fields and the properties of graphical objects called marks. They're useful for concisely and rapidly creating recognizable visualizations, while giving us more design flexibility (or expressivity) than chart typologies like Microsoft Excel. However, describing visualization desig

You Don't Know JS Ebooks. GitHub Gist: instantly share code, notes, and snippets.

We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the…

Introduction Whatever you do, it's always beneficial to have the right tools at your dispo...

This is a mildly edited transcript of my JSConf Australia talk. Watch the whole talk on YouTube. A sequel to this post is available over here. Hello, I used to build very large JavaScript…

Southeast Asia's largest web developer conference. Spread the word. Follow us on Twitter @jsconfasia

Search for just about any topic on Google, and you're presented with a page of meaningful, relevant results. What you probably didn't realize is that this search results page may be served by a powerful piece of web technology called a service worker.

Build a Realtime Svelte.js 3 App using GraphQL (svelte-apollo and Hasura) and Deploy on Now 2.0 Platform. Instant setup/sample-app ? svelte-apollo

Your first Three.js lesson starting with the fundamentals

Today, after three years of development, we are launching version 1.0 of Uppy,

It’s finally here

There are so many resources in the world of tech that it's hard to sort through and pick the right...

Strap yourself in. In this guide, we compare when it's absolutely vital to be using TypeScript, the strictly-typed programming language, and when it makes sense to stick to vanilla JavaScript.

In this article I introduce Inertia.js, a framework for creating server-driven single-page apps.

Properties can be removed using destructuring in combination with the rest operator. Here password is destructured out (ignored) and the rest of the properties are returned as rest. The…

How browsers schedule and execute scripts can impact the performance of web pages. While techniques like

JSDoc comments are an alternative to TypeScript and Flow for type definitions in JavaScript. In combination with VSCode you can get type checking and IntelliSense just like TypeScript.

A space to discuss and keep up software development and manage your software career

Jonathan Mills shows how to apply all five of the SOLID principles to front-end JavaScript applications.

Learn JavaScript is the easiest, most interactive way to learn & practice modern JavaScript online. Read short lessons, solve challenges & answer flashcards.

This course teaches you how to implement your first data structures and algorithms. In the process, you’ll learn some fundamental computer science conce...

Ganesa189 punya game terbaru super scatter. Hadiah lebih besar dan sound efek yang lebik seru. Login dan nikmati permain terbaru Ganesa 189.

We talk about classes, new, instanceof, prototype chains, and API design.

Javascript audio library for the modern web

At Mozilla, we want WebAssembly to be as fast as it can be. This started with its design, which gives it great throughput. Then we improved load times with a ...

While everyone is hyped up about virtual DOM frameworks like React and Vue, I always felt like something was missing. It wasn’t clicking with me that we had to maintain a “copy” of the DOM in memory…

Pop quiz: what is the difference between these JavaScript timers? Promises setTimeout setInterval setImmediate requestAnimationFrame requestIdleCallback More specifically, if you queue up all of th…

Mithril.js is a modern, small, fast client-side Javascript framework for building Single Page Applications.

If you start learning about functional programming, it won’t be long before you come across the idea of pure functions. And as you go on, you will discover functional programmers appear to be obsessed with them. “Pure functions let you reason about your code,” they say. “Pure functions are less likely to start a thermonuclear war.” “Pure functions giveyou referential transparency”. On and on it goes. And they have a point. Pure functions are a good thing. But what do you do with the impure bits of your code?

The latest release of AWS Amplify now includes modular imports. Let’s take a look at what this means in terms of implementation & benchmarking.

Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll…

TypeScript 3.0 is here! Today marks a new milestone in the TypeScript journey, serving JavaScript users everywhere.If you’re unfamiliar with TypeScript, it’s not too late to learn about it now! TypeScript is an extension of JavaScript that aims to bring static types to modern JavaScript. The TypeScript compiler reads in TypeScript code, which has things […]

All the fundamentals in JavaScript for learning React. Often React beginners realize that most of the learnings are JavaScript, because React has only a small API ...

A tremendous amount of care and attention goes into every detail of the Google Photos experience, the photo grid is just one part of a much bigger product. Here is how we made it.

Normalizes GraphQL and JSON:API payloads into your state management system and provides ORM selectors to prepare data to be consumed by components - blue-chip-js/blue-chip

1kB-ish JavaScript framework for building hypertext applications - jorgebucaran/hyperapp

As Sarah mentioned in her previous post about page transition using Vue.js, there is plenty of motivation for designers and developers to be building page

For my first post on Dev, and I wanted to share with you how I made a news app with React Native.

Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile

Conveniently implementing reusable API calls is now easier than ever before. Read this article about Contentful components and find out how it's done.

Over the last years a modular approach to programming in JS gained a huge following and with the advent of virtual DOM building isomorphic JavaScript applica...