The weekly nerd

Iris kreike || todays date

In this edition

Click to flip to the page

Stop Using JS for That

Killian Valkhof || Date

On the World Wide Web, there are an infinite number of ways to solve each problem. These are the most useful tips and tricks, and how to apply them.

Rule of the Least Power

The Rule of the Least Power means that you should choose to write in the least powerful language suitable for the task. This way, the browser doesn't have to work as hard, which improves performance and results in a better user experience. On the Web, both HTML and CSS are lighter than JavaScript.

HTML and CSS Tricks

There are many features in standard HTML and CSS that, when used correctly, eliminate the need for JavaScript.

Custom Switches

If you want to make a custom switch, start with appearance: none;. This resets the default styling applied by the browser while keeping its functionality intact. When redesigning, consider the :focus-visible pseudo-class for keyboard navigation.

In-Page Transitions

The Parent Selector

Reflection #1

This Weekly Nerd by Killian was a good start to the minor—it broadened my perspective and opened my eyes to the possibilities of the World Wide Web. It provides a solid foundation for techniques and terms that will be used later in the minor.

Pay the Web Forward with Web Monetization

Peter-Paul Koch || 26-2-25

The decision for the web to be free was made in the late ’90s. This has become a bad habit that we should change. The way people currently make money on the web is through the use of ads. This has two effects: the user thinks they don’t have to do anything, and all users only get the results that rich people and companies want us to see.

What Do We Want?

As website developers, we want our work to be appreciated and valued properly. Currently, a good site takes a lot of work and earns barely anything. If visitors give money on their own initiative, developers will be encouraged to improve their sites so users stay longer or return more often.

How Can We Do This?

Support

A link tag in the head of the HTML is checked by the browser extension. An initial signal is sent to establish a connection. Afterwards, the money is sent either by the streaming method (sent live) or post-paid (sent afterward, with a good internet connection).

Wanne earn money?

Ad passive income to your site and be appriciated for your work- click here!

Reflection #2

A Weekly Nerd, or a sales pitch? Peter-Paul Koch told us about payments on the web, and his reasons seemed very ethical and strong. His view on the state and the future of the internet opened my eyes. It did seem to melt into a sales pitch, which was a shame. I don’t know enough about it to ask accurate questions, but the questions my classmates asked made me doubt his product.

Beyond Tweening

Cassie Evans || 7-3-25

Cassie Evans works for GSAP, an animation library with which you can animate anything!

Main Elements

The GSAP library contains two main elements, with which you can make the whole library work.

Tween

The method used to call and use the library. It commonly looks like this:

gsap. to( '.box' (x=20d))

This string consists of:

call gsap method object method

Timelines

Timelines are used to time your animations and are similar in use to how animations in After Effects work. For example, this makes the standard animations play one after another instead of at the same time.

Animation Toolbox

When you are writing code, you often use only what you know and don't think about new ways to do it. There are many better ways to do things, but you need to know which tools to use and where to find them.

"To a man with a hammer, everything looks like a nail." - Mark Twain

Useful Features

Utils
Easing

With the GSAP Ease Visualizer, it's very easy to test your easings before implementing them in your code. It also has a feature to directly implement the easings into CSS.

Visualize NOW with the GSAP Visualizer

Need to do a tricky animation and going frame-by-frame is too much to ask? Graphs and motion are your thing? Try the GSAP Visualizer now!

Only $0.00 – no terms and conditions apply

Other Useful Stuff

Reflection #3

I had never used or heard of GSAP before, which made the introduction mildly interesting and the code examples somewhat useless. The lecture did make me interested in trying out the library, though not for a specific project or using the highlighted features.

Declarative Design

Jeremy || 12-3-25

There are two approaches to design in the workplace: declarative and imperative. Neither is wrong, neither is right, but we’re going to go over some highlights of both methods.

First, the Basics

With imperative design, you work with precise instructions. With declarative design, you work with the output you want and let the software figure out how to get there.

How Does This Apply to the World Wide Web?

This makes both HTML and CSS fault-tolerant, while JavaScript stops execution if there is an error in the code.

“JavaScript should only do what only JavaScript can do.”

Why Does It Matter?

This distinction between mindsets is, at its root, a difference in control. Why do you choose to make your own button, or to trust the browser to make one for you? Do you see the code the browser gives you as features or as bugs? My advice: let the browser work for you.

"Be the browser’s mentor (imperative), not its micromanager (declarative)."

Thinking About Thinking

These systems operate in the real world as well. Does your company give you specific hex codes to implement (declarative), or a ruleset that the colors have to folow? (imparative) A computer is a machine. Machines can do math. So let the computer do all the math for you, and you just set the limits.

Reflection #4

This lecture by Jeremy was really interesting, and he is a great storyteller. You could tell he is willing to share his experience and knowledge and is not trying to sell us anything. Key points are:

  • Find the culture that fits
  • Find the way of working that fits you
  • Find yourself

Playlist Prescription

your weekly selection of music

I found this song when i was studying for the final high school exams. It perfectly portrayes how i felt going for a new chapter in my life, and every year since when I have to make big desisions it shows up on my desk. Give a listen to it, and maybe it will bring you a sense of reassurance too. Because everything will land on its feet in the end.

Hackers United

Rosa || 3-4-25

What is a hacker? Somebody with a hoodie and sunglasses typing green numbers on a computer all day? – No! A hacker is a person skilled in information technology who achieves goals using non-standard methods.

What Happens If…

You just try stuff? Something wonderful might happen. I myself tried making image magic: Photoshop with code. The process is weird and clunky, but the results are satisfying, because I made it together with the machines. I make all my posters using this method now.

"Make shit out of your old shit"

(Un)repair Café

Located in Rotterdam at De Versterking, the Radar Squad has their home. Join them in breaking tech in new ways and experimenting with the web.

Reflection #5

This lecture by Rose covered the mindset: what if you just try it? It really spoke to me personally because I like making weird stuff, and to see that it is possible with tech was great. There wasn’t a lot of factual information, but the mindset is one to consider when growing and learning.

Geld verdienen met project FUGU

Niels leenheer || 9-4-25

Project FUGU Makes Native web applications, things that work in the browser and on the Internet. How do you do this for a register?

Analog appliances have different end points for different functionalities. Which was originally probably a great idea, but now we need to figure out which endpoint to send the information to, and in which language.

ASCII

A lot of the languages are build on a ASCII language system. This means letters numbers and symbols are placed on a grid, with the y axes being first and the x axes being second. In the below example this would entail that A has the sign 41.

ASCII table. The A stands on the row numbered 4 in column numbered 1

Then, you have the issue of which type letter to use, and how to tell the machine this. For this, we use commando (esc) language.

Esc E 1

In this, we start the command with the esc sign, which tells the machine a code is coming. The second sigil is what we want to interact with, in this case E for emphasis, bold text. The 1 means we put in on, a zero in this would end the emphasized line.

What about images?

Well, if you take an image, convert it to black and white, then place the pixels in rows of three, then translate it though some codes it might just about work. If you need to do this, I wrote a library for it. Saves a lot of headache.

“If somebody says – you don’t need another receipt printer - Ignore Them!”

libraries

The restrictions of the 70’s make for some interesting choices, but lucky for you there exist libraries now! You don’t need to do this the way I did. Please don’t. Save yourself the headache.

Reflection #6

Niels Leenheer came to talk about registers. The conclusion basically was: If you’re gonna do it, don’t — because I did it for you, and it HURT. The secondary message was: Things communicate in different languages. It was fun to learn more about how computers think, alphabets, and the 0's and 1's of it all. It showed how deep the rabbit hole sometimes goes, and I hope to be as passionate about a subject to follow it down the rabbit hole as far as he is willing to.

Practical Fixes for Common WCAG Problems

Erik Kroes || 16-4-25

There are four objects that are so often done wrong—and yet so easy to get right. Spending just a few seconds thinking about these issues can make the web more accessible. An accessible product is one that’s usable by everybody, including people with disabilities.

"A hole in the wall is technically accessible because people can get inside."

Keyboard

You should be able to use Tab and Shift+Tab to reach all interactive elements on the page. A link to skip the navigation when necessary saves minutes of time and repeated information. A controlled focus state makes the website clearer. And remember the biggest sin of all: a div with a role of button.

div role="button"

This makes the entire element inaccessible by keyboard.

Contrast

You might think contrast isn’t a regular problem, but when the sun shines, it becomes a problem for everybody.

The contrast ratio should be 3:1 for large text (24+ px) and bold text (19+ px). All other text should have a contrast ratio of at least 4.5:1.

Alternatives

Captions, transcripts, and text alternatives for images. These don’t always have to be in the code—if you add them to your site, they help everyone. Even when there’s no audio, it’s very useful to know that! Common problems include images in buttons or links, and video content.

Sizing

The internet should be functional at all shapes and sizes—even on a screen that’s only 320px wide. External content like cookie banners and popups often overlook this, so consider whether you really need those services.

Meme. 1st panel: I get that it works on your computer. 2nd panel: We are not giving your computer to the client.

SolidStart

SolidStart site

Thinking Outside the Accessibility Box

Nienke de Keizer || 16-4-25

During my internship at GVB, I noticed that the app is not as accessible as it should be. For my master's assignment, I decided to research and redesign it, focusing on people with limited vision.

“Accessibility is made for a small group, but they matter.”

A very practical example of new technology being inaccessible to people with limited vision is the introduction of electric buses. Previously, people would listen to the diesel engines to know a bus was arriving. Now that those sounds are gone, a new system has been implemented in the signage that announces bus arrivals audibly.

Previously, the ReisAssist app was created for the visually impaired. In the long term, this new app might replace that or the outdated techniques currently used in the app.

Nienke de Keizer has introduced accessibility improvements to GVB.

Reflection #7

Nienke's talk was very intimidating. Is that supposed to be me in two years? Am I on the right track, and passionate enough? Her work was impressive and important, and I admire her for what she does.

Erik’s talk had useful information, though it wasn’t entirely new. It’s good to emphasize these points again because they’re often forgotten. It all seems so simple—and in practice, it *is* simple! You just have to think about it.

The Rise of AI-Powered Voice Interfaces

Dave Bitter || 15-5-25

Voice recognition has existed and been developed since 1950. It has slowly been changing the way people find information. From having microphone detection in your search bar to now whole AIs and applications built on this concept, developments in the last few years have been fast and successful. The newest AI tools all contain 4 key parts.

But it doesn’t feel quite natural yet. Using another AI, we could imitate human speech patterns with intonation. However, the step to send the information back and forth as a whole creates big delays, making the conversation slow and unnatural.

To fix this problem, I cut up the response of the AI into separate sentences and ‘humanised’ the information while it was speaking, thus removing some of the delay and making the conversation more fluent.

“AI is just another data source.”

Twitter follow bot and follower scraper

Steve Jonk || 14-5-25

I once got asked by a marketing bureau to make a Twitter bot that follows all followers of another account. Let me show you how I did it. Disclaimer: this is not entirely legal.

Tools

Obstacles

Making and using a bot is against Twitter’s terms of service. So I had to make my bot seem as if it was not a machine, and act like a human. I will follow, pause, and after a randomised amount of time unfollow or follow the next person.

The next obstacle I encountered was how to get the data. Twitter has an API of their own, but to use it to the extent that I needed, the cost would be in the five figures. So, I used a scraper to get publicly accessible follower information from the internet. However, this information is only available on different pages. So again, randomise and pause.

Final product

In the end, I made a working product that took longer than expected, is visually supported by n8n, and is borderline illegal.

Conclusion: it can be very lucrative to work for yourself in this field.

How do you automate testing your components like a real user

Clarke verdel || 14-5-25

What if… we can ship software that just works

The testing Trophy

While creating any application, make sure to do the nececarry tests at each step

Static testing

Unit and Component testing

Integration testing

E2E (end to end testing)

Confidence in your code

There is only one valid way to gain confidence in your code: lots and lots of testing. I recommend these:

“a good developer is a developer that can test”

Reflection #8

I really liked the tree talks we had at IO. It really shows the advancement of technology and web development, and the growing number of ways we can utilize it. The first two talks gave insight on how a web developer works, their thinking process and actions. The last one gave insight about the importance of testing during the process of creation, with tips and best practices on how to do so.

Goals

Iris || 8-5-25

Learning goals for the master assignment

CSS Layout & Structure

I have learned a lot about style and css in this minor, but i think there is more to learn. I have tried multiple times to incorperate grid-area, yet have never succeeded. In the master assigment i would like to practice with different kinds of grid-styling and structure.

By the end of the project, I can write consistent, scalable CSS using modern layout techniques, including CSS Grid, Subgrid, Container Queries, and Grid Areas. I will demonstrate this by developing responsive components or pages that apply these techniques effectively.

Team Collaboration

A part of the Hackathon that i found most diffecult was working together with my teammates. Partly because i had never collaborated on such a project before. I also found it hard to understand what my team was doing, and felt I was making things without thinking. I would like to change this and do better during this assigment.

Throughout the project, I will actively contribute to team discussions, give and respond to feedback, and reflect on my own role and communication within the team through weekly updates and in my product biography.

Proffessional documentation

In my last feedback for API I got some tips and tricks about making a readme proffessional and usable. I think practicing this is a great skill to practice and will improve productbiography's and maybe even this collection of weekly Nerds.

Throughout the project, I will maintain clear and structured documentation of my design and development process by updating my product biography weekly. This will include design iterations, technical decisions, team contributions, feedback received, and how it influenced the product, making the rationale behind the project traceable and reviewable.

Accessibility

During this minor and especially during the weekly nerds there was an emphasis on accesibility. In the last few weeks of the minor Id like to dive a little deeper in it myself.

I will apply accessibility best practices throughout the project, including semantic HTML, proper color contrast, keyboard navigability, and screen reader support. I will test these aspects and document how accessibility was addressed in both design and code.

Subject Reflection

Iris || 7-5-25

Web Apps From Scratch

The WAFS week was very useful to get back into the flow of coding. It was fun to have the freedom to make literally anything. It helped me brush up on my terminology and coding tricks, and I learned some new ones in the process.

CSS to the Rescue

This was a very fun subject to take a deep dive into. It forced me to think outside the box (in my case, maybe a bit too much for Sanne’s taste) and it taught me to style quickly and just try things if I think they might work. I did notice that I struggled with using some techniques because they were new, since my intuition is usually to learn new things only when they become necessary.

Browser Technologies

BT showed me how useful HTML elements are and how much they can do on their own. It inspired me to look a bit further when searching for a feature, because it might already exist.

Hackathon

Concept

The concept for the hackathon project was an infinite scroll screen where all the Women of Tech had a card. Clicking on a card would open a popup with more information about that person. The goal was to create a giant wall of fame, giving each person a place to shine and be acknowledged.

Experimental Tech

I took this assignment to experiment with some new tech, mostly in CSS. Most notably were the clamp function (we were even nicknamed “Clampers”) and the “use” tag for SVGs.

My Contribution

I created a pure CSS animation to indicate the canvas could be swiped. I coded the extended card displayed when more information about a Woman in Tech is requested. I also worked with and transformed the SVGs of the countries.

Reflection

The beginning is always the hardest part of an assignment. Not only due to doubt and insecurity, but also mental and physical exhaustion — battles fought and hurdles encountered. In an assignment with a duration of less than four days, these issues are amplified. For the first two days, I was unable to be my best self and deliver my best work, which is a crucial moment in the decision-making process. I am very glad for my team and that we got this far.

API

I learned a lot during API. I was ambitious with my goal of making a chat website, but with the help of Declan and Cyd, it turned out better than expected. I am really proud of what I made, and I do understand what I did, although I doubt I could recreate it on my own. Sadly, there were a few bugs, partly due to it being put online, but I still had many ideas on how to improve at the end of the course.

HCD

This was a really fun project to work on. I started with the idea of a sound graph, but through tests and experience, it transformed into lines moving up and down, moving shapes, and the addition of emojis and subtitles. It was really rewarding to dive into the requirements of one specific person and find creative solutions to common problems.

Meet George

A duck elephand hybrid

Georgy is a rubber duck I used throughout the minor to 'rubber duck' and solve bugs and problems. He mostly lived in my bag since I got him on day one, and he kinda needs a paint job to clear up his lines. Figured he deserved an honerable mention, as he solved about as many bugs as me.

Picure of a rubber duck-circus elephant hybrid

Q42 and its projects

Marvin || 21-5-25

Our visit to Q42

"Yes, it’s not fully set up yet."

Accesibility

Design is about more senses than just sight. So if you design for sight only, you automatically disable people.

Q42 focusses on designing with accesibility in mind, making digital products that make life smarter and happier. They use their device wall to test on all possible screens

a wall with all different kind of devices displayed

Sensemath

A project to teach mathematical formulas using sound. There was a lot of testing involved with different instruments and signals. A piano sounds nice, but it leaves gaps in information. Stretching sounds causes a loss of detail as well. Everyone has their preferences — so let’s give them options.

To convey all the information you get from a visual graph, you need a whole range of sound effects:

Oculi Mundi

"not yo mummas website"

Oculi Mundi is a site built to display giant, ancient maps. The real challenge in this project was incorporating accessibility into a non-standard experience. Using only HTML and CSS, they created a scrollable 3D environment — which meant they could still rely on the built-in accessibility features of HTML and CSS.

Reflection #9

I really enjoyed the visit at q42, and the projects they showed were truly something to look up to. They make their product based on accesibility, and even with these restraints manage to build intracate and beautiful works of interactive art.

Digital accessibility in practice

Marieke || 28-5-25

32% of the Dutch population has a permanent disability. That is 5.5 million people. But it is not just people with a permanent disability who benefit from web accessibility. People with a temporary disability, such as a broken arm, or a situational limitation, such as screen glare when the sun is shining, also profit from it.

What do you do in this field of work

There are 3 main columns of work I do.

  1. Audits. Making sure WCAG guidelines were followed. I mainly use plugins for this.
  2. Consultancy. Giving advice to companies. Guided by questions and projects of the client.
  3. Courses. Teaching other the knowledge. For example, this newspaper article about a talk.

European accesibility act

Exceptions

What if you dont follow the guidelines

It will start with notifications, but can ramp up to fines worth 20 million, or 10% of revenue

Reflection #10

In the previous weeks, we heard so much about the new rules, but barely anything about what they actually say or how they will be handled. Having concrete examples from someone who knows and works with it directly brings much more clarity than hearing it second-hand.

Unwrapping Web Design

Nils binder || 4-6-25

What does a wrapper do?

  1. It sets a max with
  2. It creates padding
  3. It centeres your content

Nowadays, every site looks the same: content in the middle, white space on both ends. Is this normal? Would a genius designer who has been on an island for 20 years make the same thing?

tweet. It reads: Wich of these two websites are you currently designing? Accompanied by a picture of two very common web structures

Why do we make websites this way

Figma is a design tool made for the web. However, it was built around the popular web designs of 2016 — and hasn’t changed much since. As a result, we end up in the "triangle of boring": Tailwind + Figma + ChatGPT. These tools will always give you the simplest option.

lets change that

Goodbye mirrored layouts, goodbye inflexibility. When using Grid, use the fr unit to make columns into fractions of one another. It’s balanced, and gives you the freedom to design as playfully as you like.

"Lets stop wrapping our animation and unwrap the web"

A perfect example of breaking the rules

With playful, off-center text a perfect example of breaking the grid: dasruhrgebiet.de

Reflection #11-1

We already had this talk with Nils at the start of the minor, but hearing it again with more knowledge was definitely beneficial. You notice new details and topics that interest you more now. I already used some of the padding structures displayed in a project.

Politics in Tech

Miriam Suzanne || 4-6-2024

The world has become bad. Tech has become bad. Let’s take a look at how it started.

The cascade

Or the 'C' in CSS. It solved a massive problem for the industry: making sure information would remain usable on future machines by 'cascading' down. It’s not the World Wide Web if it only works on your machine — every machine should be accessible to everyone. Thus, no fonts allowed.

Style Revolution

When images started appearing, the World Wide Web began to break. People started writing 'suggestions' on how to fix it. But browsers need exactly one value per property. Thus, Cascading Style Sheets were born.

User friendly

We need to allow the users to create better tools for themselves. How? Two philosophies emerged:

  1. To be open and adaptable. All the customisation and possibility, but you might need some skill to use it. Example: bootstrap
  2. To be invisable and intuiative. A black box where things happen, but that everybody can use. Example: press and play

TThere isn’t one right choice for every situation. It's personal, variable, and based on preferences — and that’s exactly the point.

"You cant make a world wide web by saying it only works on my design"

Reflection #11-2

Miriam's talk was quite interesting and very fast-paced. She shared many examples, jumping rapidly between topics — so many that her main point became somewhat lost. I do think it’s valuable to reflect on where we started and the project's original intention. Comparing it to today's standards shows that there’s still much we can learn from the past.

Goals

And if i reached them

CSS layout and structure

During this project, I challenged myself to use and research new grid and flexbox techniques. It was in this project that I finally managed to get grid-area working. I had tried to implement this in projects before but had never succeeded.

I based my grid on Liam's design. In that design, the title of the card was part of the relation box, and the idea was to have it separate from the other items in the HTML. However, due to the way grid works, these items would stack and not order themselves in a box. Due to this, I decided to alter the design slightly so the title would be at the top, separate from other relations.

During this time, Matthijs was working on a component similar to mine. When he wanted to try his hand at learning grid and making a grid for the component, I was able to help him get set up with an explanation, some useful sites, and a few sketches.

For the mobile-scaled version, I debated using container queries vs media queries. However, since only the card itself needed to scale, and not its contents, I opted for using media queries

During my discovery, I also came across the columns property, which automatically sorts items in columns, with scalable widths, lines in between, and a whole lot of other solutions. I didn’t get to use this in the Master Assessment, but I did use it in the Weekly Nerd (see the wide articles).

Team Collaboration

During this second team project of the minor, I wanted to be more of an active member of the group. I do think I managed to do this, though I found it difficult to share my ideas and point out flaws I noticed. To overcome this social obstacle, I started writing things down, either fixing them myself or bringing them up later. This worked for me, opening communication and not causing excess stress.

Communication within the team during the project was clear. In the first weeks of the project, people started working on components, and if there were changes for that part later, the original person fixed it. This way, no one would overwrite each other's work or cause conflicts.

I also made an effort to check in with my teammates more often, to see what they were working on and to stay up to date on the latest decisions. I also informed teammates of any decisions I made that could affect their work, to prevent unexpected issues.

Proffessional documentation

To complete my goal of improving my documentation, I made sure to update my product biography weekly. To do this accurately, I made small updates throughout the week, writing bullet points for different tasks and topics that I knew I would expand on later. At the end of the week, or at the start of the next, I reviewed all the bullet points and rephrased them, incorporating everything I had learned during the week.

Because I kept my biography up to date, many people — teammates and others — copied my layout. I told them this was fine, as it demonstrated that I had created a professional and well-structured biography.

I also made sure to document our talks with the client. I took notes during the presentations and later added them to the wiki, so the whole team could review and access them. This ensured we wouldn’t forget any important points and allowed us to acknowledge items that were discussed but not included in the project.

Accessibility

When I started this project, I wanted to focus on accessibility, but I found it difficult. The first weeks were mostly spent on design and planning. We chose to focus on visual impairments, specifically blindness and partial sight. However, due to the nature of the project, we couldn’t exclusively target people with those disabilities or create a fully HCD-level solution tailored to them.

Even so, while making our design, I wanted to make it as semantically correct as possible. This worked initially, but with multiple people working on designs, the complexity of the Liquid file structure, and time pressure, we missed some obvious issues—like inputs without labels.

While writing the structure of the HTML, I wanted it to be as semantic as possible and even go the extra mile. We ensured each page had a manageable number of links, placed the title first in the HTML order (even though the initial design called for it elsewhere), made the entire relationship card clickable instead of just the title, and used progressive enhancement to hide extra relations.

I tested a lot during the creation of the site. I used different tests, like a screen reader and colorblind extensions, to simulate different conditions. I discovered several issues this way, such as duplicate buttons and inconsistent icon titles.

I also paid special attention to the color palette. I checked contrast levels and the distinguishability of colors for different types of colorblindness. The current official FF colors mostly passed the contrast check but failed the color-differentiation test. I decided to use a new palette based on a professionally made set for colorblind users. One of the colors didn’t have enough contrast with black lettering, so I replaced it to meet both criteria. I also added a legend to make the color coding clear for users.