はてなブックマーク

I recently moved a significant codebase from Create-React-App (CRA for short) to Next and thought I would share my experience, because believe me or not, it was quite a journey (and not necessarily a pleasant one). There are plenty reasons why you might want to move to Next from a CRA app. It provides server-side rendering (SSR), and even incremental static regeneration (ISR) when hosted on Vercel

Almost 3 years ago, I wrote about recovering from runtime JavaScript errors thanks to a carefully crafted server-side rendering solution. This is something I was very proud of, and I think a testament of the quality of work that went into the N26 web platform. The idea is to intercept runtime JavaScript errors, and reload the page with a query parameter which causes the JavaScript bundles not to b

I wrote about hiding content during the A11yAdvent calendar, namely how to make something invisible but still accessible for screen readers. I’m going to mention the “accessibility tree” a few times in this article, so be sure to read how accessibility trees inform assistive technologies by Hidde de Vries. In this article, I want to discuss all the ways to hide something, be it through HTML or CSS

In modern web design, it is not uncommon to have a link (or a button) that visually has no text, and is just an icon. Think about social icons, or items in a compact navbar. Relying solely on iconography can be tricky, but it can work, especially when icons are clear and well known. Yet, even if no text is technically displayed, it is important to provide alternative content for people using scree

I have tweeted a few times about the web documentation we built at N26 and how I think this is one of the things we have truly nailed over the last few years. In this article, I would like to share my experience more in details, and give suggestions on how to write helpful documentation. Documentation 101 Fighting obsolescence Keeping it real Publishing documentation Promoting documentation Wrappi

The following is a guest post by David Khourshid about how he uses Sass and the 7-1 pattern to style React components. React being all over the place these days, I am very glad to have him talking about his experience here. Chances are, as a frontend developer, you’ve heard of Facebook’s library for building user interfaces, React. Of course, an important part of building UI is styling it, as well

The other day, I wanted to do something in CSS that turned out to be quite complicated to achieve. Actually it’s amazing that something that common ends up being so difficult to implement. Anyway, how would you do a reverse ellipsis in CSS, or start ellipsis? A single-line end-ellipsis is often used when you have some long content that you want to hide behind a … to prevent a line-break. It is ver

The following is a guest post by Daniel Guillan. Daniel is the co-founder and chief design officer at Vintisis. I am very glad to have him here today, writing about a clever mixin to ease the use of Modernizr with Sass. I use Modernizr on every single project I work on. In a nutshell, it’s a JS library that helps us take decisions based on the capabilities of the browser accessing our site. Modern

One thing I was really looking forward with Sass maps is the ability to have configuration objects for functions and mixins. You know how you pass objects to your JavaScript class constructors instead of several parameters? Well fasten your belt peeps because I’m bringing this to Sass! An insight in the JS way of doing Before digging into Sass awesomeness, let’s first have a look at how we would d

A couple of weeks ago, I wrote a small guide to understand Sass lists. I hope you’ve read it and learnt things from it! Anyway, a couple of days ago I stumbled upon a comment in a Sass issue listing a couple of advanced Sass functions to deal with lists. I found the idea quite appealing so I made my own function library for for this. In my opinion, it is always interesting to go deeper than "it ju

Lists have to be the most complicated and vicious thing in the whole Sass language. The main problem with lists -if a problem it is- is that the syntax is way too permissive. You can do pretty much whatever you want. Anyway, I recently had the opportunity to write an article for CSS-Tricks about a Sass function involving quite a lot of list manipulation. I introduced the topic by clearing a couple