<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Paul van den Dool</title>
  <subtitle>Personal blog of Paul van den Dool.</subtitle>
  <link href="https://www.paulvandendool.nl/feed.xml" rel="self" />
  <link href="https://www.paulvandendool.nl/" />
  <updated>2026-07-26T00:00:00Z</updated>
  <id>https://www.paulvandendool.nl/</id>
  <author>
    <name>Paul van den Dool</name>
    <email>contact@paulvandendool.nl</email>
  </author>
  <entry>
    <title>Development is changing</title>
    <link href="https://www.paulvandendool.nl/posts/2026-07-26-development-is-changing/" />
    <updated>2026-07-26T00:00:00Z</updated>
    <id>https://www.paulvandendool.nl/posts/2026-07-26-development-is-changing/</id>
    <content type="html">&lt;p&gt;In February 2026 I walked out of a five-hour-long meeting that my CTO had named “Why should we still write code”. We discussed what it would take for us to never write a single line of code anymore and what that would look like. I remember coming out of that meeting feeling like we were on the precipice of a major shift. That my work would be drastically different before the end of the year.&lt;/p&gt;
&lt;p&gt;I was not mistaken.&lt;/p&gt;
&lt;p&gt;At my company we’ve set up a workflow enabling “agentic development”, an environment of agents and skills that you only have to feed a ticket describing a bug, improvement or feature. The ticket is analysed and a plan is written. A human reviews the plan and either forces changes to the plan or gives the green light to start implementation. After implementation, the human tests the work and reviews the code.&lt;/p&gt;
&lt;p&gt;It’s terrible.&lt;/p&gt;
&lt;p&gt;Not because of the code quality—which is surprisingly decent, though it’s hard to measure across so many changes—but because of the process. Reviewing code has always been part of the job, but it’s rapidly becoming &lt;em&gt;all&lt;/em&gt; of the job. You hear people say that the work is now shifting from implementation to further up the pipeline, where you bring your technical expertise to refining the briefing statement. For some developers, the work might shift that way, but this isn’t the case for everybody. If you have 60 developers working on the software, maybe only about a quarter of them are included in the discussions where the feature description takes shape. The others are merely implementers, either not senior enough or simply not the type of people who think about the product that way. Those are the developers who especially love writing code, wrangling zeros and ones into a working product—and they’re the ones who will start to hate their jobs. They’re turned into reverse centaurs.&lt;/p&gt;
&lt;h2&gt;Reverse centaurs&lt;/h2&gt;
&lt;p&gt;I like how Cory Doctorow describes what’s happening. He mentions centaurs and reverse centaurs. Centaurs are workers that are enhanced by AI. They’re in control and use AI to augment their abilities and make their tasks easier. Reverse centaurs are not in control, they are in service to the AI—though not in the dystopian kind of way, not really. If all you do is check the work AI has done, you’re a reverse centaur. And being a reverse centaur sucks the fun out of work.&lt;/p&gt;
&lt;p&gt;I wholly believe that making reverse centaurs out of your employees will have a negative effect on the quality of the software and ultimately your company. It’s too soon to confidently predict the fallout and it will likely be a combination of things. AI can generate a lot of code and seem very productive, but the number of bugs being introduced to the software will increase as well. Developers are struggling to keep up with the amount of code that needs to be reviewed. They’ll get lax, or they’ll fail to understand the code. Critical thinking is being outsourced and no developer truly owns the code that is being written. But it’s where the perceived monetary gain is at. If you can get AI to do most of the thinking, you can “right-size” (how I loathe that word) your engineering department by 30–50%—assuming that same 30–50% hasn’t already quit out of sheer frustration.&lt;/p&gt;
&lt;h2&gt;Centaurs&lt;/h2&gt;
&lt;p&gt;I’m not saying developing with AI is bad and will lead to bad code. Leaving aside everything wrong with the power-hungry data centres and the money-hungry companies financing it all, AI as a technical achievement is mind-blowing and it is the most powerful tool in a developer’s tool belt ever, full stop. But it’s only positive if it’s used like that: a tool. Something that enhances the abilities of a developer—augments them—makes centaurs out of them.&lt;/p&gt;
&lt;p&gt;When used responsibly it can give junior developers wings. They will be able to do a lot more than previously would be thought possible. But junior developers would be wise to make sure they understand and own the code that they generate. When used responsibly it can make senior developers super productive.&lt;/p&gt;
&lt;h2&gt;Still fun&lt;/h2&gt;
&lt;p&gt;I consider myself fortunate. As a lead front-end developer, my role still has plenty of texture. I lead a platform team, improving our software’s shared library and underlying architecture. I align cross-functional teams, and spend a good chunk of my time executing work myself. When I use AI, I use it as a sparring partner, do analysis, or automate tedious work. I’m still learning, and I still like what I do.&lt;/p&gt;
&lt;p&gt;But if you’re reading this and feel like you’ve been relegated to a reverse centaur, don’t accept it as the new normal. Talk to your CTO or engineering manager. In many cases, leadership doesn’t set out to make your job miserable; they just want productivity gains and assume “agentic workflows” are the best way to get them. If you can demonstrate that you’re a sharper, more effective, and happier developer when you’re driving the AI rather than babysitting it, most reasonable managers will listen.&lt;/p&gt;
&lt;p&gt;And if they don’t? Well, you might want to ask yourself how long you want to keep holding the leash.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Preferred Array Type Notation</title>
    <link href="https://www.paulvandendool.nl/posts/2026-06-25-preferred-array-type-notation/" />
    <updated>2026-06-25T00:00:00Z</updated>
    <id>https://www.paulvandendool.nl/posts/2026-06-25-preferred-array-type-notation/</id>
    <summary>Array&lt;string&gt; versus string[]</summary>
    <content type="html">&lt;p&gt;My preferred way of writing an Array type is &lt;code&gt;Array&amp;lt;string&amp;gt;&lt;/code&gt; and not the shorthand &lt;code&gt;string[]&lt;/code&gt; and there are two short, simple reasons: Readability and Consistency.&lt;/p&gt;
&lt;h2&gt;Readability&lt;/h2&gt;
&lt;p&gt;The shorthand &lt;code&gt;string[]&lt;/code&gt; is shorter than &lt;code&gt;Array&amp;lt;string&amp;gt;&lt;/code&gt; and might in a codebase reduce visual noise.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-ts&quot;&gt;const fruits: string[] = [ &amp;quot;Apples&amp;quot;, &amp;quot;Oranges&amp;quot; ];
const vegetables: Array&amp;lt;string&amp;gt; = [ &amp;quot;Broccoli&amp;quot;, &amp;quot;Brussels Sprouts&amp;quot; ];
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;A compiler reads them the same, but a developer reads them in two different ways: &lt;code&gt;Array&amp;lt;string&amp;gt;&lt;/code&gt; is read from left to right, and &lt;code&gt;string[]&lt;/code&gt; is read from right to left. &amp;quot;An Array of strings&amp;quot; versus &amp;quot;Strings in an Array&amp;quot;. This difference is negligible for simple types, but becomes more noticeable on longer and more complex types.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-ts&quot;&gt;const nerds: { id: number, name: string, hobbies: string[] }[] = [];
const geeks: Array&amp;lt;{ id: number, name: string, hobbies: Array&amp;lt;string&amp;gt; }&amp;gt; = [];
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;When reading the type for the &lt;code&gt;nerds&lt;/code&gt; constant, you&#39;re reading an object and only at the end do you notice it&#39;s actually an Array.&lt;/p&gt;
&lt;p&gt;When reading the type for the &lt;code&gt;geeks&lt;/code&gt; constant, you immediately know the outer type is an Array.&lt;/p&gt;
&lt;p&gt;We read code top down, from left to right; reading a type should be in the same cadence.&lt;/p&gt;
&lt;h2&gt;Consistency&lt;/h2&gt;
&lt;p&gt;Array is the only type that has a shorthand, other generic types don&#39;t. There&#39;s &lt;code&gt;Map&amp;lt;T&amp;gt;&lt;/code&gt;, &lt;code&gt;Set&amp;lt;T&amp;gt;&lt;/code&gt;, and &lt;code&gt;Promise&amp;lt;T&amp;gt;&lt;/code&gt; amongst many others. Personally, I like things to be consistent.&lt;/p&gt;
&lt;h2&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;It&#39;s a personal preference in the end. TypeScript&#39;s own documentation and frankly most examples I see only lean towards the shorthand. I find the Readability and Consistency arguments conclusive enough to go with the longhand form.&lt;/p&gt;
&lt;p&gt;The choice starts to weigh more the larger the codebase gets and the more developers working on the project. Different people with different preferences on the same codebase gets messy fast. That&#39;s where it stops being about which form is &amp;quot;better&amp;quot; and becomes about picking one and enforcing it — the value is in the consistency, not the choice itself.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Dealing with new lines in HTML and CSS</title>
    <link href="https://www.paulvandendool.nl/posts/2021-01-02-white-space/" />
    <updated>2021-01-02T00:00:00Z</updated>
    <id>https://www.paulvandendool.nl/posts/2021-01-02-white-space/</id>
    <summary>A deep dive into the white-space property</summary>
    <content type="html">&lt;p&gt;I&#39;ve got 15 years of experience with CSS, but I&#39;ve never really completely understood how the CSS property &lt;code&gt;white-space&lt;/code&gt; works. This became apparent when working with new line characters that originated from a &lt;code&gt;textarea&lt;/code&gt;. In my case it was a string returned from the database that had come from a &lt;code&gt;textarea&lt;/code&gt;. The string looked like this: &lt;code&gt;test↵with new line&lt;/code&gt;. The arrow represents a new line character. I had to display that string in a simple paragraph tag. But it displayed as a single line where the new line character is treated as a simple (white) space: &amp;quot;test with new line&amp;quot;. I tried detecting the new line with JavaScript and replace it with a &lt;code&gt;&amp;lt;br&amp;gt;&lt;/code&gt;, but I couldn&#39;t detect the new line properly. It took me a little while, but I eventually came across a small comment on StackOverflow that said &amp;quot;Just use &lt;code&gt;white-space: pre-wrap&lt;/code&gt;&amp;quot;.&lt;/p&gt;
&lt;h2&gt;Break on new lines&lt;/h2&gt;
&lt;p&gt;To break on new lines you have several options.&lt;/p&gt;
&lt;h3&gt;white-space: pre;&lt;/h3&gt;
&lt;p&gt;It breaks on new lines, but has some other behaviour you need to be aware of.
It preserves spaces and tabs. You know how HTML normally collapses two spaces into one? This will preserve those.
It also doesn&#39;t wrap. Like &lt;code&gt;white-space: no-wrap&lt;/code&gt;. So when the line becomes wider than the parent element it is in, it just keeps on going.&lt;/p&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;232&quot; data-theme-id=&quot;light&quot; data-default-tab=&quot;result&quot; data-user=&quot;paulvddool&quot; data-slug-hash=&quot;JjRLEpx&quot; style=&quot;height: 232px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; data-pen-title=&quot;JjRLEpx&quot;&gt;
  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/paulvddool/pen/JjRLEpx&quot;&gt;
  JjRLEpx&lt;/a&gt; by Paul van den Dool (&lt;a href=&quot;https://codepen.io/paulvddool&quot;&gt;@paulvddool&lt;/a&gt;)
  on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;h3&gt;white-space: pre-wrap;&lt;/h3&gt;
&lt;p&gt;This will also break on new lines, but unlike &lt;code&gt;pre&lt;/code&gt; it will wrap within the parent element. And like &lt;code&gt;pre&lt;/code&gt;, it will also preserve spaces and tabs, but will &amp;quot;hang&amp;quot; any spaces at the end of the line. See &lt;code&gt;break-spaces&lt;/code&gt; next for more information.&lt;/p&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;305&quot; data-theme-id=&quot;light&quot; data-default-tab=&quot;result&quot; data-user=&quot;paulvddool&quot; data-slug-hash=&quot;PoGRWRN&quot; style=&quot;height: 305px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; data-pen-title=&quot;white-space: pre-wrap&quot;&gt;
  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/paulvddool/pen/PoGRWRN&quot;&gt;
  white-space: pre-wrap&lt;/a&gt; by Paul van den Dool (&lt;a href=&quot;https://codepen.io/paulvddool&quot;&gt;@paulvddool&lt;/a&gt;)
  on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;h3&gt;white-space: break-spaces;&lt;/h3&gt;
&lt;p&gt;This one is a lot like &lt;code&gt;white-space: pre-wrap&lt;/code&gt;. It will break on new lines, it will wrap and it will preserve spaces and tabs. The only difference is with &amp;quot;end-of-line spaces&amp;quot;. Spaces at the end of the sentence. With &lt;code&gt;white-space: pre-wrap&lt;/code&gt; those spaces will &amp;quot;hang&amp;quot;. This means that the space is preserved but if it causes the sentence to be wider than the width of the parent element, it will &lt;em&gt;not&lt;/em&gt; wrap to a new line. It will &amp;quot;hang&amp;quot; over the side. With &lt;code&gt;white-space: break-spaces&lt;/code&gt; it &lt;em&gt;will&lt;/em&gt; wrap to a new line.&lt;/p&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;304&quot; data-theme-id=&quot;light&quot; data-default-tab=&quot;result&quot; data-user=&quot;paulvddool&quot; data-slug-hash=&quot;ExgEZEO&quot; style=&quot;height: 304px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; data-pen-title=&quot;white-space: break-spaces&quot;&gt;
  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/paulvddool/pen/ExgEZEO&quot;&gt;
  white-space: break-spaces&lt;/a&gt; by Paul van den Dool (&lt;a href=&quot;https://codepen.io/paulvddool&quot;&gt;@paulvddool&lt;/a&gt;)
  on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;h3&gt;white-space: pre-line;&lt;/h3&gt;
&lt;p&gt;This one behaves the most like the default behaviour: &lt;code&gt;white-space: normal&lt;/code&gt;. It will collapse spaces and tabs, it will wrap correctly and it removes end-of-line spaces. But unlike &lt;code&gt;white-space: normal&lt;/code&gt; it &lt;em&gt;will&lt;/em&gt; break on new lines.&lt;/p&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;280&quot; data-theme-id=&quot;light&quot; data-default-tab=&quot;result&quot; data-user=&quot;paulvddool&quot; data-slug-hash=&quot;KKgoaoX&quot; style=&quot;height: 280px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; data-pen-title=&quot;white-space: pre-line&quot;&gt;
  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/paulvddool/pen/KKgoaoX&quot;&gt;
  white-space: pre-line&lt;/a&gt; by Paul van den Dool (&lt;a href=&quot;https://codepen.io/paulvddool&quot;&gt;@paulvddool&lt;/a&gt;)
  on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;This last option is what I chose because of its default behaviour.&lt;/p&gt;
&lt;h2&gt;The other values&lt;/h2&gt;
&lt;p&gt;The &lt;code&gt;white-space&lt;/code&gt; property takes five more values. Only two of those are what they call &amp;quot;keyword values&amp;quot; like the ones described above. The other three are &amp;quot;global values&amp;quot;.&lt;/p&gt;
&lt;h3&gt;white-space: normal;&lt;/h3&gt;
&lt;p&gt;The default behaviour. It collapses new lines, so probably not the value you want if you are reading this. It also collapses any spaces and tabs into just a single space. It wraps so text stays within the parent container and any spaces at the end are removed.&lt;/p&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;250&quot; data-theme-id=&quot;light&quot; data-default-tab=&quot;result&quot; data-user=&quot;paulvddool&quot; data-slug-hash=&quot;ZEpxLvx&quot; style=&quot;height: 250px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; data-pen-title=&quot;white-space: normal&quot;&gt;
  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/paulvddool/pen/ZEpxLvx&quot;&gt;
  white-space: normal&lt;/a&gt; by Paul van den Dool (&lt;a href=&quot;https://codepen.io/paulvddool&quot;&gt;@paulvddool&lt;/a&gt;)
  on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;h3&gt;white-space: nowrap;&lt;/h3&gt;
&lt;p&gt;It behaves much the same as &lt;code&gt;white-space: normal&lt;/code&gt; but doesn&#39;t wrap the text.&lt;/p&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;157&quot; data-theme-id=&quot;light&quot; data-default-tab=&quot;result&quot; data-user=&quot;paulvddool&quot; data-slug-hash=&quot;PoGRWQN&quot; style=&quot;height: 157px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; data-pen-title=&quot;white-space: nowrap&quot;&gt;
  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/paulvddool/pen/PoGRWQN&quot;&gt;
  white-space: nowrap&lt;/a&gt; by Paul van den Dool (&lt;a href=&quot;https://codepen.io/paulvddool&quot;&gt;@paulvddool&lt;/a&gt;)
  on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;h3&gt;white-space: inherit;&lt;/h3&gt;
&lt;p&gt;This will go searching up the DOM tree to the first parent element it can find that also has the white-space property declared.&lt;/p&gt;
&lt;h3&gt;white-space: initial;&lt;/h3&gt;
&lt;p&gt;This will set the value back to the default value. For the &lt;code&gt;white-space&lt;/code&gt; property this is &lt;code&gt;white-space: normal&lt;/code&gt;. You can use this in case you don&#39;t remember what the default value is.&lt;/p&gt;
&lt;h3&gt;white-space: unset;&lt;/h3&gt;
&lt;p&gt;The &lt;code&gt;unset&lt;/code&gt; value in CSS resets a property to it&#39;s inherited value. If it doesn&#39;t have an inherited value, it will reset to it&#39;s initial value. For the &lt;code&gt;white-space&lt;/code&gt; property this means that when you already have a block of CSS defining the &lt;code&gt;white-space&lt;/code&gt; on an element but you don&#39;t want it to apply to that specific element while still maintaining any other styling, you can set the &lt;code&gt;white-space&lt;/code&gt; to &lt;code&gt;unset&lt;/code&gt;. It will then take any &lt;code&gt;white-space&lt;/code&gt; styling from a parent element (&lt;code&gt;inherit&lt;/code&gt;), or revert to &lt;code&gt;white-space: normal&lt;/code&gt; (&lt;code&gt;initial&lt;/code&gt;).&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://codepen.io/paulvddool/pen/qBapMJX&quot;&gt;Here&#39;s&lt;/a&gt; a CodePen with all the examples in one place.&lt;/p&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;265&quot; data-theme-id=&quot;light&quot; data-default-tab=&quot;result&quot; data-user=&quot;paulvddool&quot; data-slug-hash=&quot;qBapMJX&quot; data-preview=&quot;true&quot; style=&quot;height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; data-pen-title=&quot;The white-space property&quot;&gt;
  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/paulvddool/pen/qBapMJX&quot;&gt;
  The white-space property&lt;/a&gt; by Paul van den Dool (&lt;a href=&quot;https://codepen.io/paulvddool&quot;&gt;@paulvddool&lt;/a&gt;)
  on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;p&gt;I liked writing this post, and I&#39;m thinking of doing more of this kind of posts. Got a suggestion for a next deep dive? &lt;a href=&quot;https://twitter.com/PaulvdDool&quot;&gt;@ me on Twitter&lt;/a&gt; or send a pigeon.&lt;/p&gt;
&lt;script async src=&quot;https://cpwebassets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;</content>
  </entry>
  <entry>
    <title>Clean Slate</title>
    <link href="https://www.paulvandendool.nl/posts/2020-05-02-clean-slate/" />
    <updated>2020-05-02T00:00:00Z</updated>
    <id>https://www.paulvandendool.nl/posts/2020-05-02-clean-slate/</id>
    <summary>A working method for refactoring large codebases</summary>
    <content type="html">&lt;p&gt;I&#39;ve learned something about myself recently. I work best on a clean slate.&lt;/p&gt;
&lt;p&gt;I&#39;ve always loved to format my computer and start fresh with a reinstall. I never ever put back any backups. I feel there is no need. Before I format I do of course check if I have any documents or pictures on the machine locally that are not synced to the cloud. But after the format I download some of the applications I&#39;d like to continue using and I&#39;ll tweak my settings a bit so they&#39;re back to how I like them, but that&#39;s it. I feel like it gets rid of all the junk and unnecessary stuff that piles up after using it for so long. You can spend a lot of time searching for old stuff and deciding if it can be removed. Or you can reformat the computer and only put back what you need.&lt;br&gt;
This also applies to reformatting my phone. I only download back whatever apps I&#39;m truly using. It gets rid of those apps I download once and never use after a while.&lt;br&gt;
It turns out this same principle, the same metaphor, can be applied to developing.&lt;/p&gt;
&lt;h2&gt;Refactor&lt;/h2&gt;
&lt;p&gt;At Maxxton we&#39;ve reached a point in our software where we noticed the code wasn&#39;t that maintainable any more. Two or three years ago some foundational choices were made without knowing where we would stand two or three years later. The software has grown bigger than we anticipated and as a result the code is starting to form cracks.&lt;br&gt;
In my team, several developers have been working on the same parts of the software for quite some time, adding or removing stuff as time went on. New clients came in with a different way of working that we wanted to support or we changed stuff based on new found information. The code slowly grew into a Frankenstein&#39;s monster and could be used as a school example of &amp;quot;spaghetti code&amp;quot;. Bugs were common and it was easy to break stuff while working on a different thing.&lt;br&gt;
So a bunch of weeks ago we decided to do a big refactor of one of the most error prone areas of our software. Use proper State Management and building the code while knowing what we know now.&lt;br&gt;
Me and my teammates each got our own part to refactor and went ahead with this pretty massive job.&lt;br&gt;
It turns out though that my teammates have a very different approach than me though.&lt;/p&gt;
&lt;h2&gt;Slow down and focus&lt;/h2&gt;
&lt;p&gt;I love doing the refactor. I get to revisit code that has been written a few years ago, possibly even by me, and make it better. Do you ever have that, when in hindsight you think of better ways to develop a particular feature? Well, I do. And normally I don&#39;t really get to revisit it, but now I do! And there&#39;s at least a year of extra knowledge in my head on how to do it better. It is very satisfying.&lt;br&gt;
But it is difficult. Before tackling a certain page or component, I spend quite some time analysing it. How does it work? Is it supposed to work like that? What happens at every step? What stuff is still needed and what can be thrown out? Think of it as Marie Kondo for your code.&lt;br&gt;
Do you know the proverb &amp;quot;not being able to see the wood for the trees&amp;quot;? The Dutch equivalent for that proverb would translate to &amp;quot;not being able to see the forest through the trees&amp;quot;, which works slightly better in my opinion. This is often the same thing when looking at a large codebase. The amount of code can be so overwhelming that it&#39;s hard to figure out what it all is doing. It&#39;s more difficult to understand what all of it is doing if you&#39;re trying to take it in as a whole. For me, parts of the code I don&#39;t really have to look at at that moment are creating noise which hinders me from truly understanding the parts of the code I am trying to focus on. Isolating parts of the code helps me to focus on it. Therefore I always like to create an empty component or page next to the original and start fresh. I find it simpler to write everything again from scratch having the old code as a reference from which I can copy and paste if necessary. I can take pieces of the code and isolate them in this new component. I can start with improvements to the overall layout if necessary—which is easier if there isn&#39;t a ton of code inside them— and add pieces of the component or page back one at a time. And by checking every parameter while I type them in allows me to follow it and see if it&#39;s still necessary. Starting fresh on a clean slate forces me to slow down and helps me focus on one thing at a time. My head is much calmer than when it&#39;s filled with the noise of a whole lot of other person&#39;s code. Eventually the code in the new component will grow and grow but the code already there won&#39;t be as noisy as before as I already understand what it does and what its purpose is.&lt;/p&gt;
&lt;h2&gt;It might seem tedious&lt;/h2&gt;
&lt;p&gt;It turns out though that in my team I&#39;m the only one that prefers to work like that. My coworkers seem to prefer converting components as they are. Rewriting bits and pieces to work with the State Management that we are implementing. That can work just fine, but in my experience you end up with a lot of old code that if you were to look closer, could actually be removed. In my experience it&#39;s also very hard to wrap your mind around all of the code to understand what it is all doing and what parts are needed and what parts could be further optimised or even dropped. So you end up with refactored code that you don&#39;t really know as well as you should.&lt;br&gt;
In my experience it takes a fair bit of domain knowledge in order to successfully refactor code in this manner; Knowing what the code does and what it is supposed to do. But on large codebases or old codebases this domain knowledge is either lacking for new developers or everything is fuzzy for developers who are around longer at the company. In my case there could be parts I haven&#39;t worked on, or parts I did work on but have been tweaked and changed by others over time, or parts I simply forgot how they were constructed or should work because it has been a while since I worked on it. It happens more than I would like to, that I wonder who wrote that subpar piece of code only to find out it was me a year and a half ago. But hey, we all grow, we all learn, and we all get smarter over time. It&#39;s only in retrospect that we often know the full scope of the problem we are solving and how the solution we just build lacks or could have been built better. But it&#39;s a luxury if you get to revisit and improve on it. Most teams work with deadlines and customer expectations. Those working in agencies even more than we do at Maxxton with our enterprise B2B software. You sometimes have to make due with something that you could perhaps do a better job on if you got to revisit it.&lt;br&gt;
In that aspect, even refactors can be constrained by time. Developers are expected to refactor a portion off the application within a certain timeframe. In our case at Maxxton we&#39;ve already extended that deadline by a month and we&#39;re still not gonna make it.&lt;br&gt;
My method might seem tedious and more likely to take up more time since I&#39;m basically starting from scratch instead of modifying what is already there. But I beg to differ. The clean working area gives me the focus I need to fix the HTML groundworks. Things might have been added over time that I can now take into account when creating a better scaffolding. I get to revisit every feature and method one by one, figuring out how they work and how they&#39;re supposed to work without any other features interfering. I would say that that increase in focus and decrease in noise actually increases my productivity and efficiency. I can often copy paste decent chunks of code and in other cases I can type referencing the old code.&lt;br&gt;
This new intricate knowledge of the code also helps me on the long run. I own the code more and if I were ever have to revisit again due to a bug or a new feature I would be better able to solve the bug or implement the new feature. I&#39;ve already been noticing that in the short timespan that we&#39;ve been doing the refactor. I&#39;ve been able to quickly and accurately answer questions about how certain parts of the code work to other coworkers.&lt;/p&gt;
&lt;h2&gt;Give it a try&lt;/h2&gt;
&lt;p&gt;I&#39;m not yet sure if this working method works best for all or just for me. Why else would I be the only in my team working like this, no? It could very well be a lack of domain knowledge on how it all is supposed to work that refrains my coworkers from also working from a clean slate. They might think all bits and pieces are vital. I don&#39;t know. I might bring it up during the next retrospective.
If you yourself have been in similar situations, or still are, and you have any input on this I&#39;ll be extremely curious to hear. Or be sure to try it out next time and let me know then.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>How I got into web development</title>
    <link href="https://www.paulvandendool.nl/posts/2019-07-01-how-i-got-into-webdevelopment/" />
    <updated>2019-07-01T00:00:00Z</updated>
    <id>https://www.paulvandendool.nl/posts/2019-07-01-how-i-got-into-webdevelopment/</id>
    <content type="html">&lt;p&gt;I always like other people’s story on how they started with webdevelopment. I’ve recounted mine often enough, so I thought, let’s jot it down.&lt;/p&gt;
&lt;p&gt;I first came into contact with HTML in 2000, when &lt;a href=&quot;https://nl.wikipedia.org/wiki/CU2&quot; target=&quot;_blank&quot;&gt;&lt;abbr title=&quot;Dutch profile website, one of the firsts&quot;&gt;CU2&lt;/abbr&gt;&lt;/a&gt; became popular in the Netherlands. I was still in primary school. It gave you a personal landing page and a lot of control over the look of the page and what displayed on it. It was the wild west of HTML customisation, with GIF counters showing you how many people visited your page and all that 90’s goodness. I got good at styling the pages and was asked to help classmates with their pages.&lt;/p&gt;
&lt;p&gt;The interest stayed, and eventually I was making websites from scratch. I can’t remember how exactly I managed, but there was a way for me to host one website on a free .dk domain. In the early zeros, I made quite a few websites on this domain. Mainly websites for MapleStory — the mmorpg I was playing at the time. It was still the time of tables and inline CSS, and I wrote it all in Notepad. I loved how HTML and CSS enabled me to build something. I kept self-learning by finding resources online.&lt;/p&gt;
&lt;p&gt;The interest blossomed in secondary school with IT classes. At that time, Macromedia Flash (later Adobe Flash) was hot and happening. I must have designed 20 different versions of a personal website in Flash, but none ever saw the light of day.&lt;/p&gt;
&lt;p&gt;I was 15 when I knew what school I wanted to go to next. I had found an education in line with my interests. With the level I did in secondary school, I could go to Research University, where they offered IT courses, but those were very technical, teaching back-end related programming languages. It was too technical for me. I loved the creative part — what I didn’t know was called “front-end”. So I wound up going to a University of Applied Sciences at age 18, where I studied Communication and Multimedia Design. I got programming classes and learned to work with Adobe’s software. I had drawing classes, and I did a minor in art history and another in 3D modelling. But they also had classes in what they called “Interaction Design”, but what I would have called “User Experience Design”. That particular direction definitely piqued my interest, and I started learning about more than what they could teach me at school by reading a lot of articles and blog posts.&lt;/p&gt;
&lt;p&gt;My first real job after school was heavily UX related, but lasted less than 4 weeks due to a terrible boss creating a toxic work atmosphere. I ran screaming. But it turned out to be a great choice. I ended up working at this awesome little studio, where I could work on websites for a few restaurants, a major Michelin star chef, and other interesting projects. It was a fun small team that gave me a lot of responsibilities and valued my input. I eventually went on to a different company, my current company, where the role is a lot more technical. I wouldn’t call it webdevelopment anymore, even though I’m building in the browser — I’m now doing proper front-end development. But still, at its core, it feels the same as when I was tweaking CU2 pages in Notepad: shaping something out of nothing and watching it come to life.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Intuitive Design Is Hard</title>
    <link href="https://www.paulvandendool.nl/posts/2019-05-04-intuitive-design-is-hard/" />
    <updated>2019-05-04T00:00:00Z</updated>
    <id>https://www.paulvandendool.nl/posts/2019-05-04-intuitive-design-is-hard/</id>
    <summary>When target knowledge overlaps with current knowledge</summary>
    <content type="html">&lt;p&gt;There is a video going around on Twitter recently about two teenage boys who are asked to make a phone call on an old rotary phone. TLDR; they fail miserably.&lt;/p&gt;
&lt;iframe class=&quot;video&quot; 
  width=&quot;560&quot;
  height=&quot;315&quot;
  src=&quot;https://www.youtube.com/embed/1OADXNGnJok&quot;
  srcdoc=&quot;&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a href=https://www.youtube.com/embed/1OADXNGnJok?autoplay=1&gt;&lt;img src=https://img.youtube.com/vi/1OADXNGnJok/hqdefault.jpg alt=&#39;Video 17 year olds dial a rotary phone&#39;&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;&quot;
  frameborder=&quot;0&quot; 
  allow=&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot; 
  allowfullscreen
  title=&quot;17 year olds dial a rotary phone&quot;
  loading=&quot;lazy&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;The video is a prime example of how difficult it is to create intuitive design. There is no one real answer to what actually makes design intuitive. That all depends on your user and what they would consider as intuitive. And like in the video, the intuitiveness of a design can become outdated with time.&lt;/p&gt;
&lt;p&gt;Let&#39;s first look at what the definition is of intuitive design. I like the explanation Jared Spool gives. It&#39;s when the target knowledge, the knowledge needed to use the design, overlaps with the current knowledge of the user. Or when the design has enough signifiers to bridge that gap without any significant mental effort by the user.&lt;/p&gt;
&lt;p&gt;Take for instance a door handle. You&#39;ve probably learned how to use a door handle long before you could even reach it. You&#39;ve seen your parents or older siblings do it a million times but you&#39;re just not tall enough to reach yet.
Once you&#39;re tall enough though, your current knowledge is enough to perform the task of opening the door.&lt;/p&gt;
&lt;p&gt;Recently I had to turn the door handles of some of the doors in my house upwards because my youngest was able to reach them and we don&#39;t want him wandering onto the street in an unguarded moment where we didn&#39;t lock the front door. Suddenly there was this gap between my current knowledge and target knowledge, however small. I suddenly had to keep my hand in a different angle and the vertical motion to pull the handle down suddenly turned into a horizontal motion.
But luckily there were enough signifiers. The handle still looked the same, it was just at a different angle. I knew that it would rotate the same direction. And I still had the knowledge of how the mechanism inside a door works that helped me in understanding how the angled door handle would work.
My eldest boy had some more difficulty in bridging that knowledge gap.&lt;/p&gt;
&lt;p&gt;But not all things are as common as a door knob. Especially digital products. Where door handles or door knobs haven&#39;t changed much since the 1800s, computers and the internet have only been around a few decades and have changed a lot.
Digital products have often only been around for a few years and have already changed even more so. In this area the knowledge gap can be enormous.
To make this gap smaller, digital products relied on metaphors; a resemblance to a physical object with similar traits. Only up until a few years ago skeuomorphic design helped in this.
Apple did this like no other. Take their note app for example. It had a lot of visual cues it borrowed from an actual note pad. It even had this edge of torn paper at the top as if there were already some sheets of paper used and torn off.
Buttons needed to look like buttons, like they afforded to be pushed down.
Since a few years we&#39;ve stepped away from skeuomorphic design in favour of flat design. I&#39;m not going into the pros and cons of flat design, but the reason we could make that step from skeuomorphic to flat was partially because the knowledge gap was small enough. A flat button doesn&#39;t look anything like a real button, but it has enough of the traits of the skeuomorphic button that people can make the association quite easily. We&#39;re so accustomed to digital interfaces that nowadays we don&#39;t have to make the association with physical objects anymore. It&#39;s more about convention, how familiar users already are with certain patterns and their mental model, how they expect it to behave based on prior knowledge of similar products.&lt;/p&gt;
&lt;p&gt;Before designing anything you should have an intricate knowledge of your user. What are these conventions your users are familiar with?&lt;/p&gt;
&lt;p&gt;In case of the teenagers in the video clip, it&#39;s easy to say they have never seen a rotary phone before. At least one of the two does seem to recognise the horn for what it is.&lt;/p&gt;
&lt;p&gt;It&#39;s also a fine example that even something as common and institutionalised as a phone can be unintuitive. At least, dialing a number on one can be.
Designers should never assume their current knowledge is the same as the users&#39; current knowledge. The thing you&#39;re designing may very well be less intuitive than you think. Creating something intuitive requires careful thought and plenty of research. Creating something intuitive is hard.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Reaction To CSS Tricks Newsletter on Using Data</title>
    <link href="https://www.paulvandendool.nl/posts/2019-04-25-CSS-tricks-newsletter-response-on-using-data/" />
    <updated>2019-04-25T00:00:00Z</updated>
    <id>https://www.paulvandendool.nl/posts/2019-04-25-CSS-tricks-newsletter-response-on-using-data/</id>
    <summary>Robin says we collect too much data. I disagree</summary>
    <content type="html">&lt;p&gt;Robin, who writes the CSS Tricks&#39; newsletter each week, talks about data (analytics) in the intro of the newsletter (&lt;a href=&quot;https://css-tricks.com/newsletters/&quot;&gt;issue 142&lt;/a&gt;) and shares his take on it. In his opinion, we collect too much data. He wonders why we even need analytics. Why we need to know the users&#39; viewport sizes. Why we need to A/B test the colour of a button. In his experience, it&#39;s often used to justify not supporting certain browsers or browser versions because only a small percentage of users is using it.&lt;/p&gt;
&lt;p&gt;I acknowledge that there will always be some executive that will only think about the bottom line and will make the trade-off for not spending resources on something that will have very little immediate return on investment. I agree this is the wrong use of analytics and that it&#39;s bad for the user and bad for the company in the long run. I also agree that a lot of the data that is collected is unnecessary.
But what I certainly don&#39;t agree on is what Robin says next.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;If anything, it prevents us from iterating and confidently making changes. It makes us think twice before we do things and it slows us down immensely from improving an interface. Data alone won’t make better websites.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;How would you make changes confidently that will improve an interface if not backed by some data? How would you even know what needs improving and how it can be improved, if not for data. I would say yes, think twice before you do things. It&#39;s said by people smarter than me that it is more costly to rectify a mistake than to properly research the correct solution. Data alone won&#39;t make better websites, but it can point you to areas that need addressing. Some people use an obscure browser and you want to include them as well in the experience. A growing number of users is using a large viewport you never tested the website on. Your layout might break on those sizes or you could do so much more with the extra space.&lt;/p&gt;
&lt;p&gt;See what I did there? I basically reversed what Robin said. It&#39;s not about the data, it&#39;s about what you do with the data.
The bit by Robin feels as if he is throwing the towel into the ring. Why even bother if the data is only going to be used in the wrong way?
I say you need the data, collected in  a responsible way, in order to make sensible decisions on how to improve a website or application. But data alone will not help you do that. It also requires the intention to actually do something useful with the data and the right people to interpret it.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Sliders Are Bad Practice</title>
    <link href="https://www.paulvandendool.nl/posts/2015-08-15-sliders-are-bad-practice/" />
    <updated>2015-08-15T00:00:00Z</updated>
    <id>https://www.paulvandendool.nl/posts/2015-08-15-sliders-are-bad-practice/</id>
    <summary>Think twice before using numeric sliders</summary>
    <content type="html">&lt;p&gt;This post is my reaction to seeing more and more numeric or range sliders in web- or mobile design used for the wrong reasons.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium—not about setting the value to 2 or 5. — Microsoft&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I hate saying this, but listen to Mr. Microsoft. Using a slider to select a specific number is horrible, on touch devices even more so. The larger the value range on a slider, the easier it is to select the wrong number. Like Mr. Microsoft says, using it to select a relative quantity is OK. Only people with certain compulsions will want to set the volume to an exact number. Or maybe people who know eighty is the perfect volume on their TV when watching their favorite show on Netflix. When I’m ordering beer at the bar I’m not like “Five to ten beers please”. I want six for me and my buddies and I don’t want it to order like “Five beers, no eight, wait, seven, no six beers please”.&lt;br&gt;
So please, only use sliders when users have direct feedback on the change. Like the changing of the volume or the changing of the brightness.&lt;/p&gt;
&lt;h2&gt;What should I use then?&lt;/h2&gt;
&lt;p&gt;When deciding on your input method consider the value that needs to be entered. If you want to restrict the user you could use radio buttons if the restriction is up to four values. For anything more than four values I recommend using select boxes (or custom drop down list for more creative freedom). If you don’t want to restrict your user, just use a input box. HTML5 has a special numeric input type which even gives you the option to set a minimum and maximum value.&lt;/p&gt;
</content>
  </entry>
</feed>
