A frontend blog (mostly)
Motivation • Recently I went low-tech , and I’ve been super happy with Light Phone II ’s very limited capabilities [1] besides texting and calling. One thing was missing though: ChatGPT. I’ve gotten used to querying random stuff, and wanted a way to access it from my dumb phone. So I thought — wait a minute. We have all the technology available to build this. The concept • text a number with a…
Lately, I’ve spent roughly 3 to 5 hours a day looking at my phone. Classic doom scrolling: watching reels, sending reels, laughing at reels that my friends sent me. Reading the news, online window-shopping, curating my mood boards — while algorithms were curating my mood. This was a problem. I did not think the smart phone itself was such a big issue, but I did not function in a way I would have…
Deep down I’ve wanted to build my own bicycle for a long while. I’ve only done very minor maintenance so far, so it’s definitely a step out of my comfort zone. I can feel this when I ask about components, but as one repair shop attendant, when I admitted not knowing all the jargon yet, told me: “the key here is yet.” The idea • A light-weight single speed bicycle with the prettiest frame I can…
I first started programming a bit more than six years ago. I have worked in good teams, bad teams, for good money, for very little money… It’s been said enough times that between nice coworkers, cool product and money (maybe add exciting tech stack), you can choose two (or three if you are lucky), but not all of them. However, you don’t have to settle on the same aspects forever. Entry level:…
We spend a lot of time sitting at our desks. This is not too healthy: we don’t get enough fresh air, don’t move enough, and, quite often, don’t pay enough attention to our joints and muscles. Take an ergonomic self-assessment . Can you answer most questions with ‘Yes’? If so, go do something else, get some fresh air, thanks for reading my blog! If not, here are a few tips to improve your…
Have you ever had to select all zebra crossings, buses, or traffic lights, sometimes repeatedly? It’s such a dreadful user experience, isn’t it? “Don’t do unto others what you don’t want done unto you.” — Confucius In real Confucian spirit, just as we shouldn’t litter a website with popups, we shouldn’t ask anyone to perform 5-6 or more extra clicks just so they can log in, view content or search…
At the very beginning of my developer career, I had a conversation with a good friend and mentor, who (somewhat indirectly) recommended for me to read Clean Code . He told me about how, as a junior developer at a prominent startup [1] , he was given the book, and was told to read it (before writing any code, if my memory is not mistaken). I thought, all right, it must be important then! A good…
Or, what the heck does getDisabledHours do? Every now and then, I come across a function call and have no clue what it does. I have to go to the definition and check the function body. One of my biggest fears in programming is writing code that’s difficult to understand — I don’t want my name to be the answer to “Holy $*?!, who wrote this??” I’ve found two opportunities where naming can be…
This is just a short photo dump of my second keeb, a Lily58 . If you are interested in what this is all about, please read this post . All the components laid out Close-up on Pro Micros and their sockets The finished keyboard P.s.: Yes, those are blank keycaps, and yes, I know where the keys are. Touch typing is super useful to learn, because it makes you write faster, reduces cognitive load, and…
Designing for the probably even less than 0.2% may sound like an overkill. Static sites (such as Gatsby, Svelte, Jekyll, Hugo, 11ty etc.) will cover non-script users most of the time. But if you need more fine-grained control, <noscript> is here to save the day. If you turn off JavaScript in a browser, and open up any React app, you’re quite likely to see the sentence “This app works best with…
Progressive web apps (PWAs) are installable, responsive web applications that work on any device (within reason) and deliver a reliable experience on unreliable networks, and even work offline (once they’ve loaded, of course). The progressive in the name suggests that they provide an acceptable experience on as many browsers as possible [1] , while offering an advanced experience on modern…
I’ve been looking forward to this. Not having to commute, living in a small town close to nature, still being able to contribute in an exciting startup in a meaningful way. What have I been expecting exactly, and how has it worked out, you ask? Here’s a list of all my assumptions (and, in some cases, doubts). I noted down all the expectations a couple days before I started working remotely, and…
When implementing a hash-based navigation, it’s not trivial to control the actual starting position of headings. This could cause headings to be cut off or hidden below your floating navigation. I’ll show you two ways to fix that. But first: what’s the problem? • When using hash navigation, browsers take advantage of the id attribute to find and jump to elements on the page. This is very useful in…
Recently released in beta, GitHub CLI managed to integrate seamlessly in my workflow, like it’s always been there. As oh-my-zsh’s git aliases , they quickly became muscle memory. Of course, there are two kinds of programmers: those who use a desktop client for git , and those who don’t [1] . Vim being my editor of choice, you can probably guess which camp I’m in. Hearing that GitHub have released…
Working full-time remote is a bit different from the occasional home office. With this ugly virus going around and forcing a lot of employees to stay home, I’d like to share a couple of tips for a healthy work/life balance and avoiding isolation. 1. Separate office space (and time) • One can occasionally work from home at the kitchen table or from the sofa, but for any more than a day or two, this…
The closest I ever got to gaming was Abe’s Oddysee (I guess Robot Unicorn Attack doesn’t count.) — but I do enjoy the odd game now and then. Here’s an absolutely subjective selection for killing (not too much) time. Lunar lander What: a simple but challenging game where you have to land a rover on the moon. How to play: online on moonlander.seb.ly Why: because it’s so pretty and monochrome.…
Dark mode is here to stay, and many websites, including DuckDuckGo , Twitter and my personal favourite Gatsby, make sure they blend in seamlessly with the user’s UI preferences. Some have offered their own dark mode before this could have been picked up fron the OS settings (for example, CryptoCompare has a ‘Turn Lights On/Off’ switch in their footer). [1] But now, there’s a media query for that .…
A solid CV is crucial to get that first interview. It is a good summary of what you can offer, and if that’s not obvious after a few seconds, hiring managers might just discard it without reading, no matter how good you are. So what does an ideal CV look like? Quite simply, it enables hiring managers to decide in 3–5 seconds whether a call with the candidate is worth their time or not. They might…
There’s lots of subtle but very convenient features on GitHub’s UI, one of them is being able to copy stuff from an action menu. Let’s see how we can replicate that behaviour. When is this useful? • One really good use case is GitHub’s links to specific lines in files — generally places where it’s just not feasible to show all of them. (Imagine how littered it would look!) It’s also a nice touch…
In many cases, particularly in Gatsby , pages are wrapped in a <Layout> component. Today, Iʼll describe a way to test these pages isolated from their wrapper. A <Layout> component might look something like this simplified specimen: export default function Layout ( { children } ) { return ( < div > < SiteHeader /> < main > {children} </ main > < SiteFooter /> </ div > ); } As an example, letʼs…
There comes a time when you need an npm package that doesnʼt exist — or just want to share something with the world. In my case, itʼs a Typography.js theme. Iʼll use yarn as this is my favourite package manager, but npm can be used in a similar fashion. Creating a module • This part is quite simple. yarn init and answer all the questions. Using npm packages locally • We should also test the…
A while ago, the household got a mechanical keyboard. I tried it out, and immediately knew I needed a proper keeb. Fast forward a few months, and I’m building my own, actually soldering parts together. How it all started • After I tried the mech board at home, I fell in love with the feeling and got myself a lovely Vortex Race 3 for the office. It looks, um, like a mechanical keyboard, so it gets…
In the second part, I will turn a simple Lamda function into an API endpoint. If you havenʼt, now is a good time to read Part 1 first :) From function to API • First, let’s prepare our serverless config so that it can handle HTTP requests, and will only allow those from my website. functions: getWeather: ... events: - http: path: weather method: get cors: origins: -…
I’m back to building a weather app, this time not in Flask, but React. I wanted to skip the server part, but DarkSky is strict about CORS [1] , so I had to build a proxy. Not really a front-end topic, but good to know if you work daily with backend engineers (which I do). Enter serverless • Constantly running a server just to proxy a single API call would be an overkill — Serverless on AWS Lambda…
In unit testing with Jest and Enzyme, a shallow render is a good way to test whether a component works like it should. But with abstract classes [1] that don’t have a render() method (like one I’m trying to test right now), this fails. So how can we test abstracts? A simple abstract class • Our abstract may look something like this calculator. For the sake of simplicity, it can only do one…
For this post, I will start from zero and experiment my way through the problem, to show it’s not that hard to build impressive animations. A reading progress bar this time. My initial hunch is that it has to do with scroll position and the blog post’s height. Quite useful in this case if blog posts sit in their own nice semantic <article> elements, so we don’t have to rely on the height of the…
In my post about loading speed, I promised to write about how I lazy load images. It is a useful technique for when you have large photos above the fold, that would take noticeable time to load. The solution is quite simple: we can make use of CSS’s blur filter, with the help of opacity . The basic sequence is: load page with a tiny, blurred version of the image, and on top of it, a transparent,…
People hate to wait. More than that, they don’t wait, if your website doesn’t show anything nice or useful in a few seconds, they just close it. There’s plenty other websites out there that load a little bit faster. So before all the images are sharp, animations smooth, fonts reflecting the most recent trends, there’s one important thing to do: make sure it is real fast. Every millisecond counts.…
Let’s imagine I’d like to show a one-line introduction on my website, but can’t decide what to say about myself. So I’d like to rotate between the phrases I’m a web developer , I like coffee , and I write about stuff I’m no expert in . I could grab the code from the internet, but I’d like to challenge myself today and come up with a solution on my own — which is also a good way to prove it’s not…
SVGs are lovely: they are small, scalable, and easily editable by a developer. They can also be animated using CSS, which means that while keeping their tiny size, they can do much better than a GIF. Need those champagne bubbles to bubble a little faster? No problem. Whatever the designer suggests can be done with a few lines of CSS, without significantly modifying the original asset. The main…
I love flexbox . It’s… flexible. Today, developers have to think about almost as many resolutions as devices. Things have to shrink (and grow!), fit, and not cover anything else. In some cases, they have to reorder themselves (more on that in a future blog post). Flexbox can do all this. One caveat though — it does not work well with absolute or fixed positioning. So how do we keep a sidebar in…
A few reasons why: I forget stuff. I prefer sharing stuff here than on social media. If this helps anyone, I helped someone. <3