By default <input type="number"> elements will increment/decrement by its step attribute value when pressing the up/down arrows. Kilian Valkhof provides us with some JavaScript to have these elements also respond to up/down keypresses while holding modifier keys. When someone uses the arrow keys in the input field, we want the following to happen: If they […]
Author Archives: Bramus!
Make
Go Make Things: Service Workers
Chris Ferdinandi has been writing an excellent post series on Service Workers. After first explaining what Service Workers are and how to create one, he — as per usual on Go Make Things — also provides us with practical scenarios such as making pages available offline, caching web fonts to improve rendering, etc. Go Make […]
Understanding Git: Dispelling the magic of git merge
If you’ve ever wondered how Git internally manages commits and merges, Zvonimir Spajic (@konrad_126) has got you covered: Creating branches in git is blazingly fast and having a bunch of them is pretty cheap. This means we get to merge them quite often. But how is a branch represented internally and what does it mean […]
Making Facebook.com accessible to as many people as possible
With the new Facebook coming soon to all users, the developers saw an opportunity to build a11y in from the start: To make the new site more accessible, we were able to introduce guardrails right from the beginning, integrate focus management into the core infrastructure, support features that weren’t available when we built the original […]
A Five-Minute Guide to Better Typography
A talk by Pierrick Calvez. I especially like the part on the hyphen vs. en dash vs. em dash — the latter being a symbol which I use quite a lot — and the mentioning of keming 🙂 A Five-Minute Guide to Better Typography →
Parse the output of git log using PHP
This gist might come in handy one day:
Remote Control OBS Studio with obs-websocket
If you’re using OBS Studio for your streaming needs, obs-websocket might come in handy: ot’s a WebSocket Server that allows you to remotely control OBS. Once installed and activated you can then use something like obs-tablet-remote as a GUI for it. obs-websocket WebSockets API for OBS Studio →OBS Tablet Remote → Via Patrick 💡 If […]
Visualizing How Gradient Angles in CSS Work
Nils Binder noticed that Gradient Angles in Sketch, Figma, and CSS don’t behave exactly the same. To dig deeper into the subject he built this wonderful Pen that visualizes how gradient angles in CSS behave: The pen visualizes linear-gradient(var(–angle), #f09, #3023AE, #0ff). Very nice!
Creating 3D Illustrations with CSS
Alex Trost at Frontend Horse: One style I’ve been loving is the 3D work that Ricardo Oliva Alonso creates on CodePen. It’s a style that looks like it was drawn in Adobe Illustrator or modeled with Three.js. Ricardo will often find a piece on Dribbble and recreate it on CodePen, styling it entirely with HTML […]
Say No To Complexity With AlpineJS
If you’re looking for a quick rundown of the aforementioned AlpineJS, here’s a talk by AlpineJS’s author Caleb Porzio which he presented at JSNation: