NotesMostly revealed to the Web by Solid.js, shortly after embraced by Preact, but also blended into usignal, or implemented by many others, this pattern convinced tons of developers that hooks might not be the best solution to reactivity out there, but while the concept might look and feel super simple and natural to deal with, the complexity behind spans from 30LOC to pretty convoluted code bases.FeedEmbedUnfurl
NotesOur compact signals implementation is inspired by Andrea Giammarchiās excellent article on signals. If youāre curious about the nitty-gritty, I highly recommend giving it a read.
NotesI recently stumbled on a super cool, well-executed hover effect from the clerk.com website where a bloom of tiny pixels light up, their glow staggering from the center to the edges of its container. With some available free time over this Thanksgiving break, I hacked together my own version of a pixel canvas background shimmer. It quickly evolved into a pixel-canvas Web Component that can be enjoyed in the demo below. The component script and demo code have also been pushed up to a GitHub repo.FeedUnfurl
Notesletās spend some time looking at disclosures (<details> and <summary>), the Dialog API, the Popover API, and more. Weāll look at the right time to use each one depending on your needs. Modal or non-modal? JavaScript or pure HTML/CSS? Not sure? Donāt worry, weāll go into all that.FeedEmbedUnfurl
NotesIn this job we need to think a lot about the tools we choose and why, so I cataloged all the places where web components (for me) feel like āthe right tool for the jobā. Your list may be different and Iād love to read it. And because I donāt want this to be 100% propaganda, Iāll also cover some of the not-so-great parts of web components as well.FeedUnfurl
NotesA simple JavaScript library to help you quickly identify unseemly images; all in the client's browser. NSFWJS isn't perfect, but it's pretty accurate (~90% with small and ~93% with midsized model)... and it's getting more accurate all the time.Unfurl
NotesAdding commandfor and command attributes to <button> and elements would allow authors to assign behaviour to buttons in a more accessible and declarative way, while reducing bugs and simplifying the amount of JavaScript pages are required to ship for interactivity. Buttons with command will - when clicked, touched, or enacted via keypress - dispatch a CommandEvent on the element referenced by commandfor, with some default behaviours.Unfurl
NotesThe Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.FeedUnfurl
NotesIn this article, we will implement a toy 2d physics engine that supports basic forces, collisions and constraints (joints) for circle-shaped objects.FeedEmbedUnfurl
NotesTangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn.Unfurl
NotesI participated in this year's js13kGames, a JavaScript game development competition with a file size limit of 13kb, including code, assets and everything else. My entry was Underrun, a twin stick shooter using WebGL.FeedUnfurl
NotesThatās when I picked up Rust instead of C++ to implement a native module. I figured out that it is a great choice thanks to the safety and ease of use it provides.FeedEmbedUnfurl
NotesSo what do I want? I want a world where the core JS engine is swappable. Maybe Iām deploying on an architecture not supported by V8 (Node on SPARC came up while working on SpiderNode). Maybe my employer only wants to use the JVM. Or maybe Microsoft can get some performance wins by using Chakra for Windows Azure. Back to modules, I donāt want to get rid of npm. Or maybe I do and I want something that only supports ES6+ modules.FeedUnfurl
Notes In the summer of 2010, we created Sand Trap, a game that we entered in a competition on HTML5 games for mobile phones. But most mobile phones either displayed only part of the game or made the game too smallāmaking it completely unplayable. So we took it upon ourselves to make the game fluidly adjust to match any resolution. After a bit of re-programming and using ideas outlined in this article, we had a game that scaled across any modern browser, whether it ran in a desktop or a mobile device. Unfurl
NotesUnfortunately, sometimes web developers try to get a bit too clever in creating their interfaces. What if I want something to look like a link but act like a button?FeedUnfurl
NotesThese instructions work for the Raspberry Pi running Raspbian (hard float) and create a hardware optimized version of NodeJS for the Raspberry PI, (and include a working install and NPM!!!)FeedUnfurl
Notes"Most people throw around the term āpub/subā to describe any kind of eventing/messaging ā but I think this term fails to adequately communicate the abstraction. Yes, ultimately, something is subscribing to what something else is publishing. But the level at which publishers and subscribers are encapsulated has the power to make a good pattern turn to the dark side. So, whatās the difference?"Unfurl
NotesHaraka is an SMTP server which uses a plugin architecture to implement most of its functionality. It uses a highly scalable event model to be able to cope with thousands of concurrent connections. Plugins are written in Javascript using Node.js, and as such perform extremely quickly. The core Haraka framework is capable of processing thousands of messages per second on the right hardware.Unfurl
Notesnpm, the package manager that comes bundled with node.js, is generally described as āawesomeā. While it was originally a separate project, npm has been bundled with node.js for the past few releases and the number of npm packages available in the npm registry has exploded.Unfurl
NotesPresence is an IRC logger and client that is optimized for my specific use of IRC ā scan logs for a few specific channels, respond to direct messages and mentions, and only occasionally participate in discussion. It probably won't work for you if you're a heavy IRC user.Unfurl
NotesWhen a file is run directly from Node, require.main is set to its module. That means that you can determine whether a file has been run directly by testing require.main === moduleUnfurl
NotesStarting with Node's built in REPL, add in a completely redone inspect formatter, actual functioning separate V8 contexts, keybindings to create, switch, and delete between them, combine it with a bunch of color. ULTRA REPL Unfurl
NotesWhile CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.FeedEmbedUnfurl
Notes2011 has been a great year for JavaScript. Web browsers have given us great new tools to use and we have taken web applications to new heights, competing with native applications and bringing sexy back to the web with countless impressive demos. A week or so ago, we put out a survey to all of you asking what you thought the most badass JavaScript demo of 2011 was. Of course, this would be a boring post if we just said what the outcome was, so weāre going to list the top JavaScript accomplishments of 2011 here, from demos to libraries and applications themselves. And to all of you in the JS community, Happy New Year and keep up the good work in 2012!FeedEmbedUnfurl
Notes I would like to document an emerging set of programming conventions, philosophies, and values that I see evolving in the node.js community. I call this the node aesthetic. Unfurl
Notes Do you want a 7 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable? Yeah!
Do you also want the possibility to add, edit and remove items by dead simple templating? Hell yeah!Unfurl
NotesFor a node.js project Iām working on I wanted to generate a Sphinx xmlpipe2 data stream. The options for generating XML with node.js seemed a bit limited. The main contender appeared to be libmljs but it segfaulted whenever I tried to use it. So with previous experience using Tim Brayās Genx C library I decided to write bindings for node. The result is node-genx, which is available via npm.Unfurl
NotesThis is my Javascript port of the classic 1970s Super Star Trek game, one of a number of (mostly) related trek-themed games from that era. Step into the flared trousers of James T Kirk and command the Enterprise to repel an invasion of evil Klingon battlecruisers. Unfurl
Notes"Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.<br />
<br />
2D drag and tap, mouse and touch (mobile tested), 12kB unminified. No dependency."Unfurl
Web Performance Calendar Ā» Signals: the nitty-gritty
Durable websites | Go Make Things
The Pixel Canvas Shimmer Effect
</> htmx ~ You Can't Build Interactive Web Apps Except as Single Page Applications... And Other Myths
Where web components shine - daverupert.com
Popover API - Web APIs | MDN
Creating a 2D physics engine from scratch in Javascript ā AILEF
Tangle: a JavaScript library for reactive documents
Underrun ā Making Of - PhobosLab
Writing fast and safe native Node.js modules with Rust | @RisingStack
Loving It: How to change the playback speed of a YouTube video
Case Study: Auto-Resizing HTML5 Games - HTML5 Rocks
You canāt create a button | NCZOnline
Coquette
Working Node.js on Raspberry Pi
Javascript Hero: Change Computer History Forever Ā« ASCII by Jason Scott
Arctext.js - Curving Text with CSS3 and jQuery | Codrops
List.js - Add search, sort and flexibility to plain HTML lists with cross-browser native JavaScript by @javve
