Eysteins personal & professional homepage.
The app I work on needed to align two columns of text, but the nesting made it hard to control. CSS subgrid to the resque! Before After The HTML structure was like something like this. I've simplified it here. < ul > < li > < span class = " date " > 31.01.2024 </ span > < span class = " title " > Further Higher Deeper </ span > </ li > < li > < span class = " date " > 19.11.2024 </ span > < span…
What is accessibility? Why should I care about it? Tim Berners-Lee, W3C Founding Director and inventor of the World Wide Web says that: The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. And I agree! But I'll provide some numbers to back it up as a good business case, in addition to being a good human. Accessible to who? To you! # First…
One of my goals is to make this website more sustainable. One part of doing that is to make it as lightweight as possible. Making it greener, with a smaller carbon footprint, loading faster on all connections and devices, lower server costs. Win win all around! I don't have any javascript, so it's the images that are the main reason for large and slow loads here. To optimise them I needed to…
How to mark the navigation item as active from a sub-page under the active menu item. That's a mouthfull, but that's as simple as I can put it. Site architecture # For this website I have the following hierarchy: _site/ ├─ home ├─ about ├─ posts/ │ ├─ index │ ├─ post 1 │ ├─ post 2 ├─ portfolio/ │ ├─ index │ ├─ work 1 │ ├─ work 2 Original navigation code # Note: This markup is based on v5 of the…
There are 2 types of front-end developers # I, and potential employers and clients, have been caught up by this more than once. So it’s important that you are aware of which one I am. There are 2 types of front-end developers: Front of the front-end and back of the front-end web developers. 1: Front of the front-end # A front-of-the-front-end developer is a web developer who specialises in writing…
The food in a bentobox fits itself itto whatever shape the surrounding box has. Webutviklere har forespurt container queries i snart 10 år, og nå er de endelig her! For øyeblikket kan vi kun kjøre queries på størrelse ( size ). Og per idag (05.10.2022) er det kun Chrome 106 og Safari 16 som har støtte. Can I Use har den beste oversikten over hvilke nettlesere som støtter hva til en hver tid. Hva…
Notes from learning React using the official Reactjs.org tutorial . Day 1 # npx create-react-app my-app Installation takes a while, I went to make a cup of tea. React-app was ready when I came back. Apart from that a pretty smooth install. Luckily I already have Node installed, so didn't need to faff around with that. Since I'm learning something new, I decided to try out a new code editor as…
⚠️ Note: I did this on MacOS. I have no idea if it will work on Windows or Linux. In my previous post I covered how to get set up with Node.js and NPM . It's been a full 2 days since then, and in the meantime there's been an update that caused the Node app I cloned to fail. The most straight forward solution I found was to use the n package in NPM to update Node. Update NPM # First make sure NPM…
So many tutorials start with npm install , but how do you go about actually installing this npm ? I have to look it up fairly regularly, so here are my notes. Node and Homebrew are apps # Homebrew and Node are both installed globally for your user on your computer. Consider them software on your computer in a similar way to Word or Photoshop, tools to create things. Homebrew # Annoyingly, I'll…
In Atom, how do you open the project column on the left side? I was asked this, and figured the easiest way was to show how I do it myself. It's a full 2 step process 🙂 Select the folder you want to view in Finder. Drag-and-drop it on the Atom icon in the Dock.
Make your CV shine. My CV in its previous iteration was decent enough. Out of my 8 last applications I got 4 interviews, which from what I gather is pretty good. But then I came across a job in an amazing organisation. For this I really wanted to do my very best applying. So I did a lot of research, both about how to write a CV in general, and the more culturally specific issues that might come up…
The UN in Geneva. Last week I had the chance to visit the United Nations Office in Geneva for the first time. The reason for my visit was the "Closing the Gender Gap in the Digital World" event organised by ITU and Facebook Developer Circles. Michal Švácha, a Senior Software Engineer from Developer Circles Facebook posed a question for each of the panelists: “What is one thing that men can do to…
The first picture on the Web. On July 18th, 1992 the first image was posted on the web. There's been a few more since then. But an incredibly high number of these images are not equally easy to see for everyone online. I’ve taken it for granted that everybody knew that this can be fixed by using the alt attribute, but I realise that’s not the case. What does the alt attribute do? # The alt…
Facebook created fake notification alerts on their updated Terms page, prompting users to quickly click “agree” without reading in order to access their new messages and updates. This is something I've become more and more aware of during my career, and particularly now that Surveillance Capitalism has become a thing. I've introduced countless friends and family members to the joys of Adblock…
Doing my best to remain calm as I’m about to begin my presentation. This week I did my first non-work, non-study related, completely-out-of-my-own-free-will presentation in front of a crowd, something I don’t think I’ve done since I had to in high-school and at university. Thank you to the ChamGeeks meetup for bringing me in. It’s been 2 days, and I want to write down as many thoughts and feelings…
If you don’t want to rewrite your wp-config.php every time you shift between your local dev environment and another server this trick will help you. Set up the server configs as variables. This lets you connect to each individual database. Replace the default lines with define(‘DB_NAME’, ‘dev_mywebsite’) , DB_USER , DB_PASSWORD , and DB_HOST with this snippet. Don’t forget to change the variables…
Have you ever finished a tutorial, video, or self learning article which teaches you how to code a website? They will help you develop a website on your own computer, but often stop short of actually getting the thing online. And you're just left hanging! The good news is - you've done the development, and you've got yourself a great website. Congratulations! You are awesome! But the majority of…
When you get involved with making websites you'll come across a lot of new words and expressions that seemingly all mean more or less the same thing. When I started out I was very confused about the difference between a "Web Hotel" and "Web Hosting". As it turned out, they are the same thing: Web hosting is a service that allows you to make your website accessible via the World Wide Web. You do…
In the previous post I explained how to add semantic meaning to a raw text using markup in HTML . In this 12 minute video I'll add custom typography, colours and layout to my webpage, while making sure it will work well on mobile as well as desktop browsers. Here is the live code, which you can play around with if you wish. See the Pen Responsive layout with CSS by Eystein Mack Alnaes ( @eystein )…
In this video I explain how to give a raw text semantic meaning with HTML markup. This will tell the browser what part of the text are headers, a link, list and paragraphs. Here is the live code, which you can play around with if you wish. See the Pen Intro to markup in HTML by Eystein Mack Alnaes ( @eystein ) on CodePen . In the next part I'll explain how to style typography and create a…
Last year I felt broke, stressed and anxious. I worried a lot. I worried myself so much I worried I had depression. I even asked my doctor about it, but he laughed it off saying everybody worries about money. That didn’t exactly help, but at least I wasn’t alone then. So I didn’t really have a specific goal in mind when I began meditating. I’d heard good things about it, and had experienced a few…