If you have an HTML element that you want to make interactive, but only via the keyboard , there might be a few ways to achieve it, depending on your objective. Using tabindex="0" Tabindex is an HTML attribute that makes HTML elements tabbable —as in, focusable by pressing Tab . It’s primarily intended to enhance accessibility . However, if you find yourself needing to use it, consider whether a…
Think a little about why you enjoy what you enjoy. Why do you code? What do you like about it? I’ve been asking myself these questions, but I haven’t quite found the answer yet. Maybe there’s no single answer, after all. For me, it’s an ensemble ; there’s a whole range of reasons that make programming so enticing to me. For example, I feel like… Programming is like writing a poem. A beautiful set…
After blogging on and off for 12 years about tech-related topics, I felt it was time for a change. Since all tech is political , with this article I aim to explore critical issues such as systems of social control, ethics and freedom, while offloading all of the “thinking” to a computer, in order to avoid my own personal biases. I’m writing this at a time when AI is disrupting society and the…
The HTML language is pretty awesome. It’s constantly evolving, just like CSS and JavaScript, and likely has anything you need out of the box. This time I’ll cover a lesser-known HTML attribute, inert . It’s kind of like disabled , but not quite. If you need to disable a link , you might be tempted to do it this way: <a href= "#" disabled > I am a disabled link </a> Or maybe through CSS: a […
I use Jekyll and I wanted to make all of my headings linkable. In HTML you can achieve this with a simple link to an element on the same page , except that the link would be self-referencing — for example: <h2 id= "my-heading" > <a href= "#my-heading" > My Heading </a> </h2> In Markdown, it is equivalent to: ## [My Heading](#my-heading) This works because Kramdown , the default Markdown renderer…
In an era where 95% of sites are bloated with cookie banners and behavioral tracking scripts, here’s a refreshing approach to web development. Nowadays, loading a website on your device of choice can be painful — both for the browser, which has to parse and render all that stuff, and for you, the user, who has to wait for it (and pay for that data plan). The issue is only exacerbated by the fact…
If you need to install an npm package globally , rather than locally , but don’t know how to do this on Heroku , you can follow this how-to guide. Before we start, a quick word of warning: it’s generally considered good practice to install your npm dependencies in the local node_modules folder, whenever possible. This means simply running npm install without the --global ( -g ) flag. However,…
I wanted to have a clean separation between work-related repositories and my personal projects, as I often need to use a different email: for example, I’d like to sign git commits in the work repo with my work email, but keep using my personal email for the rest. How do you achieve this? It’s actually pretty simple: I’ll show you how. Two folders — one for your projects, one for work I like the…
I was building a generic data store with Rust and I needed to implement a heterogeneous collection of keys and values. Essentially what I needed was a dictionary, but with values of dynamic type, like both strings and integers at the same time. Rust is a statically typed language and, due to the memory safety guarantees we are given, all values of some type must have a known, fixed size at compile…
Let’s say you have two Git repositories: one on GitHub, and one on your computer. They contain identical (or very similar) files, and what you want to do is “synchronize” them (i.e. make them look exactly the same). Maybe all you need is to download a few missing files from GitHub to your computer, or simply push some changes from your machine to GitHub. You have tried git pull , but you’re…
If you want to toggle between light and dark mode, it can be done with a single shell command: osascript - e ' tell app "System Events" to tell appearance preferences to set dark mode to not dark mode ' Try it and it will switch the mode immediately. No need to restart or install anything. How does it work? It’s AppleScript . dark mode is a boolean value in the user defaults system. not dark mode…
Context menus are one of those very useful UI widgets that still haven't reached the HTML spec. There have been attempts , but for now everyone tends to make their own custom implementation. Especially with the advent of React, the tendency is to write a custom menu component that uses JavaScript to open/close itself, perhaps by using an invisible overlay to detect clicks outside the menu and…
Back in the days, when I got serious about becoming a "real programmer", I decided I wanted to learn Java. I didn’t know anything about OOP, Design Patterns, Single Responsibility… all I knew was some PHP, Visual Basic, and database design stuff. That was it. So I went to a book store and I bought this book about Object-Oriented Programming in Java 6. It was a massive book, probably around 1000…
The Elixir Logger is pretty good. You can easily log anything with it, just call one of debug , info , warn or error . For example: Logger . info ( "something happened" ) Turns into: 12:34:56.789 [info] something happened Very nice. However, there are cases where you may want to, say, change some data structure, like update a map or a list, and then log the transition, without breaking the pipe .…
Another fun kata: Given an array of arbitrarily nested objects, return a flat array with all the objects marked as “good”. The definition above is quite generic, so I’ll provide examples to show exactly what I mean. The array in JavaScript looks like this: var items = [{ id : 1 , good : true }, { id : 2 , children : [{ id : 3 , good : true }, { id : 4 , good : true }, { id : 5 , children : [{ id :…
Here’s a fun kata: Create a blend function that, given two lists of the same length, returns a new list with each element alternated. E.g.: blend [1, 2, 3] [4, 5, 6] => [1, 4, 2, 5, 3, 6] As with all challenges, it can be solved in many different ways. However this particular one is easily solvable with functional programming techniques such as recursion. You can try implementing it on your own…
Getting the AST (Abstract Syntax Tree) representation of an Elixir source is pretty simple. Let’s say we want to get the AST of this file : # lib/hello.ex defmodule Hello do def hi ( name ) do IO . puts "Hello " <> name end end We can do it right away from iex : $ iex Erlang / OTP 18 [ erts - 7.0 ] [ source ] [ 64 - bit ] [ smp: 8 : 8 ] [ async - threads: 10 ] [ kernel - poll: false ] Interactive…
Preface: Why? Environment variables are very useful for configuring your app depending on the environment, without having to hardcode any value in the source. At my current company we are building a microservice infrastructure , where the frontend and the backend are completely decoupled applications. We also use Docker to manage these microservices and link them together. Turns out that storing…
“Pong is one of the earliest arcade video games; it is a tennis sports game featuring simple two-dimensional graphics.” - Wikipedia Have you ever dreamed of building a game in JavaScript? I did, and I also managed to make my first one. Of course I also wrote some tips and gotchas to help you complete this nice challenge. How to make Pong in HTML5 canvas Pong, at it’s core, is an extremely simple…
There are many ways of installing Sublime Text 3 on Linux , but if you’re looking for a fast, straightforward way, I believe you are in the right place. This script will install the latest build of Sublime Text 3 . Open your terminal and run: curl -L git.io/sublimetext | sh It will install the Package Control as well, so you don’t have to do it yourself. If you are interested to see the actual…