Make <input type="number"> respond to arrow keys with modifier keys

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 press up or down, we want to add or subtract 1
  • If they hold SHIFT and press up or down, we want to add or subtract 10
  • If they hold ALT and press up or down, we want to add or subtract 0.1
  • If they hold CTRL and press up or down, we want to add or subtract 100. On Mac, we want to use the CMD key for consistency.

Supercharging <input type="number"> →

💡 Did you know the DevTools in your browser also support these modifier keys? Try editing a numeric value and press up/down while holding SHIFT/ALT/CMD 😉

⚠️ In some cases you’ll most likely be better off by avoiding <input type="number">, and should use go for <input type="text" inputmode="numeric" pattern="[0-9]*"> instead`.

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 Things: Service Workers →

☝️ You should really follow Chris’s blog as his Daily Developer Tips — in which this Service Workers series appeared — are always very good.

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 to merge them? Understanding how this works internally will help you understand why merge conflicts occur. Let’s dispel the magic.

I’ve seen Zvonimir bring the contents of this post forward during a talk at Full Stack Ghent. Very technical, which I enjoyed quite a lot.

Pointers and tips: dispelling the magic of git merge →

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 site in 2004, and build in monitoring and analysis to help prevent regressions as we continue to add new features.

One of the things I like — and something that’s been often discussed, even way before this Github Issue — is the introduction of a generic Heading component. Leveraging React Context, they then render Contextual Headings.

This snippet for example:

<Heading>
  Main heading
</Heading>
<section>
   <Heading>
     Nested heading
   </Heading>
   Nested content
</section>

Renders this markup:

<h1>Main heading</h1>
<section>
	<h2>Nested heading</h2>
	Nested content
</section>

Making Facebook.com accessible to as many people as possible →

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 you’re using Streamlabs OBS, then you already have a remote control built-in.

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

While I love the style, I had no idea how he was making the pieces. Luckily, Ricardo was kind enough to share his techniques with us.

Creating 3D Illustrations with CSS →

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: