Bookmarks (1665)

shareon: Simple and Stylish 'Share Buttons' — They also boast good ethics as there’s no tracking code involved.

▶  The Easiest Flappy Bird Tutorial Ever? — A 13-minute YouTube video on how to create your own Flappy Bird clone using straight up HTML, JS, and CSS. No framework, no build tools, the code isn’t perfect, but that’s not the point :-)

jsplot: A Quick Way to Plot the Results of a Function — It’s really quick and minimal but this basic Web tool does a quick plot from the results of the JavaScript you supply.

N3.js: Fast, Spec-Compatible, Streaming RDF Library — If you need/use RDF you’ll know, but basically it’s a format for modeling and specifying Web resources and this library works in Node and browser alike.

Khan Academy's Transition to React Native — The tale of the multi-year project to move both the iOS and Android apps of the popular education platform over to using React Native.

Puppeteer 5.0 Released: The Headless Chrome Control Library — Puppeteer 4.0 was only three weeks ago but there are breaking changes here and work on making Puppeteer environment agnostic is in full flow.

useWebAnimations: React Hook for Flexible Web Animations API Animations — While still badged an ‘experimental technology’ by MDN, the Web Animinations API provides an approach for describing animations on DOM elements.

Financial: A Zero-Dependency Financial Calculations Library — Based on numpy-financial but aimed at Node, Deno, and browser alike, Financial gives you functions for calculating things like future values, repayments, interest rates, etc.

Temporal, a Future API for Dates and Times in JavaScript — TC39 seeks your help with the future of JavaScript! They’re working on a proposal for a modern date/time API for ECMAScript/JS. Check out these examples for a feel of what the API would give us. You’re encouraged to have a play and fill out this survey.

Perf Track: Tracking the Performance of Sites Using Popular JS Frameworks — Aiming to ‘track framework performance at scale’, Perf Track lets you get answers to questions like how many Vue apps use compression (and what type), how big React apps tend to be, or how many Ember apps have a good first contentful paint time.

How to Communicate on a Remote Team: Tools and Templates — Learn how to overcome the two biggest challenges of remote communication: understanding tone and upholding a collaboration framework.

Creating Tiny Desktop Apps with Tauri and Vue.js — Tauri is a toolkit (built in Rust) for building cross platform, JavaScript and CSS powered desktop apps, and the eventual app size can be pretty small (under a megabyte).

Malina.js: A Front-End Compiler Inspired by Svelte — A tool similar to Svelte that pre-compiles an app (think a compile-time framework, rather than a runtime one) for better performance. See examples on the REPL. One developer created the same app with Svelte and Malina and has things to say, too.

A Case Study of Moving a Three.js WebXR App Off the Main Thread — You can’t argue about Surma’s dedication to Web Workers and here we get a practical demonstration of how they can help to improve performance.

Moving from TypeScript to Rust and WebAssembly — There’s not a lot to this quick writeup, but it’s interesting that this sort of move is now at least possible and it may well suit your use case too.

Four Ways to Fetch Data in React — It’s really three ways you perhaps don’t want to fetch data, building towards a solid case for the best approach. But we like the logical progression through the alternatives.

Debounce Explained: How to Make Your Code Wait For Your User To Finish Typing — Debounce functions are higher-order functions that limit the rate at which another function can be run.

Flattening Arrays with Array.flat() — Knowing about flat() is useful enough, but did you know you can flatten an array of any depth with .flat(Infinity)?

Barebones WebGL in 75 Lines of Code — WebGL is pretty intimidating but this boils it down to the bare essentials. And if you want to go further, I still think this thorough guide is one of the best. Of course, you may see all of the boilerplate needed and just use Three.js instead, which is fine too! 😄

▶  Learn Next.js: A Video Course — A free video course on how to build both Jamstack and SSR sites using React and Next.js. No signing up needed either.

emoji-picker-element: A Lightweight Emoji Picker for the Modern Web — See a live demo here. Some cool performance advantages for this: It’s a web component and it’s built on Svelte and IndexedDB.

JavaScript's Creator Recommends We Call JavaScript 'JS' — In response to a lively Twitter thread this week posing the question “If you were given the chance to rename JavaScript, what would you call it?” Brendan Eich wisely suggested, nay declared, we go with JS. While there’s an aspect of fun around this whole debate, it seems a sensible idea given JS has no relation to Java at all, although it might take us a while to rebrand ;-)

A Brief Status Update on Vue 3.0 — The 18th beta of Vue 3.0 is out. Amongst other things, they’re targeting mid July for the first release candidate, then early August for the final Vue 3.0 release. You’re encouraged to start using it already though.

▶  What’s New in V8 and JavaScript — A 20-minute talk from this week’s web.dev LIVE event that Google put on. The speakers cover a variety of new features and improvements to JavaScript generally as well as in V8 and Chrome.

Announcing TypeScript 4.0 Beta — Last week we said the TS 4 beta was “due any moment” and last thing on a Friday was clearly the time to shine 😂 4.0 has no substantial breaking changes but there are lots of bits and pieces to play with including variadic tuple types, short-circuiting assignment operators, and editor improvements.

V8 Release V8.4 — The next release of V8 (due to come out in coordinate with Chrome 84) boasts improved startup time, support for weak references and finalizers (worth seeing the code examples for these advanced features), and private methods and accessors.

Understanding Template Literals — I really like Tania’s tutorials as they are both straightforward and thorough. Template literals are a piece of syntax (introduced in ES6/ES2015) worth understanding if you don’t use them yet.

The !! Operator and a Misunderstanding of How JS Handles Truthy / Falsy Values — Ben Nadel has noticed developers using the double-bang (!!) operator far more often in their JavaScript code than they have to. As such, he provides a series of unnecessary examples followed by cleaner, more intuitive examples.

▶  Low Code for the Node.js Developer with Node-RED — The project lead of Node-RED, a visual, Node-based ‘low code’ programming tool, talks about the concepts of ‘low code’ in the Node space and how Node-RED works.

▶  The Bits And Bytes of Binary — Do you need to know the ins and outs of messing with binary in order to build a web app? No. But binary nonetheless runs the show at the low level, including in many algorithms, and this series from Low Level JavaScript covers the basics well.

Tips for Golfing in JavaScript — If you're thinking of entering JS1024 or otherwise want to take pleasure in crushing your JavaScript into as few bytes as possible, this collection of tips and tricks is for you. (Golfing is the art of representing an idea in as little code as possible.)

An In-Depth Beginner's Guide to Testing React Apps — A lot of posts will say ‘in-depth’ and be 500 words long – this isn’t one of those! If you’re a beginner to testing, there’s a lot to chew on here but it stays accessible throughout.

Exploring the Web Speech API — One of those APIs I keep forgetting exists but with which you can do some pretty cool stuff.

TodoMVC Implemented Using a Game Architecture: ECS — Can you build more traditional GUIs with the Entity Component System as popular in game development? An interesting idea.

Hyperapp: (Another) Tiny Framework for Building Web Interfaces — Claims to be 2x faster than React and comes in at less than 2KB.

Textures.js: SVG Textures for Data Visualization — Built on top of d3.js, this lets you bring together patterns and colors in an elegant and, dare we say, old school manner.

24a2: An Ultra-Minimalist Dot Matrix-Based Game Engine — What makes this different is that it has a limited set of features so you can build a game in a few hours. Here’s an example.

PHONK: A Creative Scripting Toolbox for Android Devices — If you’ve got any old Android devices sat around, this could be a way to have some fun with them. It’s based around JavaScript.

parallax-effect: Parallax Effect in JavaScript using Face Tracking — A lot of designers seem to love parallax effects, whereas a lot of us end users aren’t so keen. But if you’re going to do it, do it in an over the top creative way like this 😂

A Little Bit of Plain JavaScript Can Do A Lot — For anyone more than happy to dive in and write JavaScript without dragging in an entire framework and tooling to manage it, there will be no surprises here, but this is a nice reminder otherwise. Do you always need a 'framework'? No.

Checkboxland: Render 'Anything' as HTML Checkboxes — This frivolous experiment is equal parts terrifying and impressive. It’s a JS library that displays animations, text, and arbitrary data using nothing but HTML checkboxes and, to be fair, they’ve presented it really well!

Vest: Effortless Validations Inspired by Testing Frameworks — If you’re used to unit testing, the syntax used here will be familiar.

Tragopan: A Minimal Dependency-Free Pan/Zoom Library — Try it out here. Claims to work faster due to use of native browser scrolling for panning (left/right/up/down) and transform/scale for zooming.

▶  Creating a Basic Implemention of 'Subway Surfers' — No modules, webpack or such-like here.. just exploring the joy of throwing a game mechanic together quickly using rough and ready JavaScript. Love it.

Build a CRUD App with Vue.js, Spring Boot, and Kotlin — It’s a fact of life that not everyone is building apps with JavaScript at every level of the stack. Sometimes.. people use Java too 🤫

Understanding Generators in JavaScript — Generator functions can be paused and resumed and yield multiple values over time and were introduced in ES6/ES2015.

How to Dynamically Get All CSS Custom Properties on a Page — Some fun DOM and stylesheet wrangling on display here.