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.

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...

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.

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...

By rajaraodv It’s hard to keep track of what’s new in JavaScript (ECMAScript). And it’s even harder to find useful code examples. So in this article, I’ll cover all 18 features that are listed in the TC39’s finished proposals that were added in ES201...

Everyday I see the questions “How to work with API?”, “Can you give some best practices”, “How to cook axios” in frontend chats. They get a lot of answers but all of them can be reduced to three…

Most of my functions now accept a single parameter of type `object` and many of them return or resolve to a value of type `object` as well. Thanks in part to the _destructuring_ feature introduced in ES2015, I’ve found this to be a powerful pattern...

This is post # 11 of the series dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use…

Rough.js is a light weight javascript library that lets you draw graphics with a hand-drawn, sketchy, appearance.

Helpful tips to use javascript promises better

Keeping up with JavaScript frameworks can be a challenge. There are a lot of them, and seemingly another one every month. How do you know which ones might be right for your project? What are their strengths and weaknesses? How do you get started? That’s where this guide comes in.

How we crafted a declarative interface to an imperative API that is more expressive, easier to extend and better hides the complexity of interacting with a stateful system.

Webpack promises great things for Vue developers. But the range of possibilities of Webpack are also why it's so intimidating to learn. In this article, I'll give you a gentle introduction to Webpack without the jargon that may have you bewildered.

The what, why, and how to use scrollama.js for your next scrollytelling story.

As we build sites more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this post, I’ll cover why a little discipline can help if…

As web developers, we know how easy it is to end up with web page bloat. But loading a webpage is much more than shipping bytes down the wire. Once the browser has downloaded our page’s scripts it…

Draggable is a lightweight, responsive, modern drag and drop JavaScript library – the ideal choice for adding slick native-feeling drag and drop behaviour to your web apps.

JSX react in depth - an interactive tutorial

I am in search of the simplest React Stack. It has to be future-proof and feature-packed, but most importantly it has to be a breeze to work with. In this series I will look for easy-to-use solutions…

Are you confused by the `this` keyword in JavaScript? It confuses everyone in the beginning, so don't worry about it. You're not alone. But that doesn't mean you can go on without understanding `this` forever. It is used so much in JavaScript and in tutorials everywhere that you need to grasp what `this` is sooner or later. Once you understand `this`, you'll realize that it's much simpler than you think it is. By the end of this article, you would have demystified `this` for yourself. You'll know what it is, what it does and how to use it.

Tired of making TODO apps over and over? Try this instead.

Is it possible to use Laravel Mix - the "Webpack simplifier" - in non-Laravel projects? Let's find out! Join Lasse Rafn on this explanatory journey!

In this article, we will look at all the steps that were involved to build an Open Source real-time voting App using GraphQL and React. This App will allow attendees of an event to ask questions

Overview: We recently rethought the architecture for the JavaScript side of our codebase at Airbnb. This post will look at (1) the product drivers that precipitated the changes, (2) the steps we took…

Last year was a great time for Javascript newcomers! A lot of starter-kit projects were published, refined, and some of them eventually went on to offer comm...

Redux is a simple library that helps you manage the state of your JavaScript app. Despite that simplicity, it's easy to fall down rabbit holes when learning it. I often find myself explaining Redux, and almost always start by showing how I'd implement it. So that's what we'll do here:...

Clean Code concepts adapted for JavaScript

My JavaScript Basics course is now live on freeCodeCamp’s YouTube channel. The great thing about this course is that it also aligns with the Basic JavaScript Challenges on the freeCodeCamp curriculum. You can practice what you're learning through the...

Creating a fast web application involves many cycles of measuring where time is wasted, understanding why it’s happening, and applying potential solutions. Unfortunately, there’s never just one quick…

Ember.js (or should we say Amber.js) turned five years old last December. In some ways, five years is a short amount of time. But when measured in web framework years, it...

Unlock microservices potential with Apollo GraphQL. Seamlessly integrate APIs, manage data, and enhance performance. Explore Apollo's innovative solutions.

Neutrino is a tool which brings together the best parts of the modern JavaScript toolchain with the ease of zero upfront configuration. Built to let you hit the ground running, ...