# Crinkles

> I'm Kevin Pennekamp, a Dutch front-end engineer specializing in CSS and security. I write about architecture and the craft of building thoughtful software.

## Writing

- [When coding gets cheap, engineering gets harder](https://crinkles.dev/writing/when-coding-gets-cheap-engineering-gets-harder.md): Teams plateau after the first gains from AI coding tools. Moving beyond it means engineering the system around the agent, not reaching for a better model.
- [The mythical magical button](https://crinkles.dev/writing/the-mythical-magical-button.md): How to create a minimal stylesheet with modern CSS that allows you to create a whole new range of buttons with just a single custom property.
- [Slightly enhanced sticky revealing footer](https://crinkles.dev/writing/enhanced-sticky-footer.md): Andy Bell showed a nice little UI effect with his “sticky revealing footer”. But on some pages the experience was mediocre, so a quest began to improve it.
- [A modern picture showcase using CSS](https://crinkles.dev/writing/a-modern-image-showcase-using-css.md): Grid template areas combined with other modern CSS make for powerful adaptable layouts. I use them here to build a picture showcase for many configurations.
- [I cannot wait for the CSS @function](https://crinkles.dev/writing/i-cannot-wait-for-css-functions.md): In my quest to apply as much cool CSS tricks as possible, I encountered an issue that navigated me towards a new and exciting CSSWG draft.
- [The importance of shipping source code as a library maintainer](https://crinkles.dev/writing/the-importance-of-shipping-source-code.md): When library maintainers ship there source code can help application builders in debugging critical and weird issues.
- [MacOS-like dock effect with a “previous-sibling combinator”](https://crinkles.dev/writing/a-modern-css-previous-sibling-combinator.md): A guide on using the “previous-sibling combinator” trick to recreate the magnifier effect of the MacOS dock.
- [Using recursive CSS to change styles based on depth](https://crinkles.dev/writing/using-recursive-css-to-change-styles-based-on-depth.md): Can CSS be used recursively to change styles based on the depth of an element in a container? Well it can, but it is a little tricky.
- [Combining :has and :only-child to change tab containers](https://crinkles.dev/writing/combining-has-and-only-child-to-change-tab-containers.md): For a styling implementation detail, I set the challenge to come up with a CSS-only solution, instead of implementing the logic in a front-end framework.
- [Combining :placeholder-shown and :has](https://crinkles.dev/writing/combining-placeholder-shown-and-has-selectors.md): My wife told me about the :placeholder-shown selector. I had never heard of it before, but it sparked my curiosity about what it could do combined with :has.
- [Interdependencies and code stability](https://crinkles.dev/writing/code-stability.md): As engineers we tend to over-engineer, making our code as reusable and DRY as possible. But in that quest, we often create unstable code.
- [I was wrong about service workers](https://crinkles.dev/writing/i-was-wrong-about-service-workers.md): I was wrong about service workers. I wrongly assumed certain use cases for them. But I was missing out on them.
- [Going back to CSS-only after years of SCSS](https://crinkles.dev/writing/going-back-to-css-only-after-years-of-scss.md): When migrating my website to Eleventy, it ditched SCSS and went old school. I went removed a complexity layer to see if CSS-only is a viable option these days.
- [Old man yelling at a cloud](https://crinkles.dev/writing/old-man-yelling-at-a-cloud.md): Front-end development really became a pop culture around big company frameworks. It has become an investor-focused industry.
- [Engineering, UX design and the value stream](https://crinkles.dev/writing/how-to-make-framework-decisions.md): Understanding how to make better technology, framework, and library decisions in front-end development
- [State machines and state management](https://crinkles.dev/writing/state-management.md): State management is one of the most complicated, and opinionated topics in modern and JavaScript-focused front-end development. Let's make it easier.
- [Different approaches to fluid typography and layouts](https://crinkles.dev/writing/different-approaches-to-fluid-typography-and-layouts.md): Fluid web page design can be more user-friendly, because it adjusts to the user's set up. There are several approaches to achieving this.
- [Hiding side content in responsive design](https://crinkles.dev/writing/hiding-side-content-in-responsive-design.md): A trick to hide content in specific responsive layout patterns without the need for media queries. But with a few gotchas.
- [Use the child-element count in CSS](https://crinkles.dev/writing/use-the-child-element-count-in-css.md): A little CSS trick to get a count of child elements on your parent selector.
- [A nth-child CSS trick](https://crinkles.dev/writing/a-nth-child-css-trick.md): A little CSS trick that allows you to use nth-child values in the CSS calc() function.
- [Creating a stacked bar chart using only CSS](https://crinkles.dev/writing/css-only-stacked-bar-chart.md): How to make an interactive stacked bar chart using only CSS and HTML
- [Updating my graph layout algorithm](https://crinkles.dev/writing/digl-revisited.md): Updating my graph layout algorithm based on new requirements and requests from the community
- [The case for state machines in client-side applications](https://crinkles.dev/writing/the-case-for-state-machines.md): Features that seem simple can become unmaintainable due to unforeseen state management issues. State machines help avoid this.
- [An ode to the CSS owl selector](https://crinkles.dev/writing/an-ode-to-the-css-owl-selector.md): One off the most beautiful CSS selectors is the Lobotomized Owl Selector of Heydon Pickering
- [Scalable CSS architecture](https://crinkles.dev/writing/my-css-architecture.md): My CSS architecture had become too complex, but utility-first frameworks were not for me either. I needed a mix. Then came CUBE CSS and it all clicked.
- [SWR-like data fetching in Svelte](https://crinkles.dev/writing/data-fetching-swr-svelte.md): I am a big fan of the [SWR](https://swr.vercel.app/) package of Vercel. Let's see how to implement something similar in Svelte.
- [Authentication token management](https://crinkles.dev/writing/client-side-token-refresh.md): Complex client-side applications require sophisticated solutions around authentication management and background refreshing.
- [Horizontal centering in CSS](https://crinkles.dev/writing/horizontal-centering-in-css.md): Horizontal centering is an ancient problem in CSS. CSS Grid lets us enhance the pattern, but it introduces other issues. Let's find a better solution.
- [Creating an auto-layout algorithm for graphs](https://crinkles.dev/writing/auto-graph-layout-algorithm.md): Laying out a visual graph, like a state machine, so that it stays human-readable is one of the most fun challenges I have encountered. Here is how I did it.
- [Binding CSS and JavaScript with HTML data-attributes](https://crinkles.dev/writing/css-data-attributes.md): HTML data-attributes bind CSS and JavaScript more closely. Use them to cut the JavaScript needed for styling and move that responsibility back to CSS.
- [Modern CSS grid solutions to common layout problems](https://crinkles.dev/writing/css-layout-patterns.md): Responsive layouts are one of the more complicated problems in CSS. With the addition of CSS grids, we are now able to solve complex problems.
- [Demystifying the component architecture](https://crinkles.dev/writing/ui-component-anatomy.md): Our little UI components do more for us than we give them credits for. Their internals are more complex than we know.

## Pages

- [About / User manual](https://crinkles.dev/about/)
- [Uses](https://crinkles.dev/uses/)