How to preserve Aspect Ratio of Images with Tailwind CSS
A cool trick by Adam Argyle to create a responsive signup form with flexbox in very few lines of code.
You might reach for <input type="number> when you’re, you know, trying to collect a number in a form. But it’s got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn’t one (like how a credit card number has spaces), because it’s really just a string of numbers. Even more importantly, there are a variety of screen reader problems. Solution: <input type="text" inputmode="numeric" pattern="[0-9]*">
A Comparison of Contentful, Storyblok, Sanity.io, Forestry, DatoCMS, Prismic, NetlifyCMS, Strati, Headless Wordpress and TinaCMS.
Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first.
TL;DR: Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so anyway, inform users in text.
Since Tomorrow just felt too red to me, I replaced that color with a nice green. Out came a less red and more green version of Base16 Tomorrow Dark Theme with some modifications in secondary colors. Now also optimised for writing distraction-free in markdown. It displays bold bold and italic in italics.
The CSS Cascade is one of the most powerful parts of CSS. But it can also be very frustrating, if not well understood. Anyone who’s worked on a large enough website has complained "Why won’t this CSS property work?!" And we’ve all been tempted to throw an !important to strong-arm things into place. Amazing interactive Article by Amelia Wattenberger.
A collection of bad practices in HTML, copied from real websites. By Manuel Matuzovic
When it came to the point that we needed a new Website at Service Innovation Labs, we had the requirement to make it extremely flexible, but still maintainable by non-technical users. I think I found the near-perfect solution.
Web performance is a tricky beast, isn’t it? How do we actually know where we stand in terms of performance, and what our performance bottlenecks exactly are? A checklist by smashingmagazine.
Browsers’ visual display of headings nested inside <section> elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies. TLDR: don't use 'section' 🤯
This post contains everything you need to know about alt-texts! When to use them and how to perfectly craft them. By a web developer with vision impairment who uses a screen reader in day-to-day life.
There are three major HTML elements involved in quotations: <blockquote>, <q>, <cite>. Let’s take a look.
The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section.
Convert videos to high-quality GIFs on your Mac
Superfriendly is an expanding directory of resources to help your products work for everyone. Tools, Articles, Podcasts, etc.
Great set of Open-source illustrations available as svg
A collection of useful online web development tools by Stefan Judis.
Concept, Design and Development of a Website für Roman, a Entrepreneur, Innovation Strategist and Digital Thinker. (2019)
For every HTML Video element, you can change the playback speed, with a simple console input.
Links to highlights from this year's Chaos Communication Congress including talks from David Kriesel and Moxie Marlinspike
The all shorthand CSS property resets all of an element's properties. It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.
A Serious Card Game I co-designed at SI Labs that lets you develop new directions for your business.
In this session, Sara will be building and refactoring common UI components, and share a couple of techniques she often uses to build with accessibility in mind. Even though she will be building only as many patterns as the time allows, you’ll leave with many small but important and impactful strategies that you can apply to many other UI components, as well as to your design process and coding. From this sweet series of mini component-level case studies, you will learn how to think, and code, accessibly.
The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class, and the UA determines via heuristics that the focus should be specially indicated on the element (typically via a “focus ring”).
Scrollbars still look like 1995 on Windows, so here is an example how to style browser scrollbars (in use on this website).
I just learned that elements in nested components are stylable from the parent while still having scoped css with the `/deep/` selector.
How to set rel=canonical to primary domain in Nuxt.js (and let search engines know to ignore duplicate content on staging server):
To be honest: I'm not really sure myself. There are several motivations for building this website..
[German] Warum können vermeintlich kleine Interaktionen so wichtig sein? Wodurch wird eine (Mikro-)Interaktion ausgelöst? Wie funktioniert sie und woher weiß ein Nutzer wie sie funktioniert? Welche Rolle spielen Zeit und Bewegung?
During my time working at Service Innovation Labs, I helped launching one of VW's first digital services: A parking ticket app.
Development of a simple Website for AKR-TAX Tax Concultancy.
Zukunft Leben lässt uns auf sinnliche Weise erfahren, was Nachhaltigkeit bedeutet. Ergänzend zum gleichnamigen Hörbuch des Silberfuchs-Verlags entsteht hier eine neue Form digitalen Magazins. Dem Besucher wird das Thema Nachhaltigkeit ansprechend und niedrigschwellig mit Hilfe formatfüllender Bilder, Animationsvideos und interaktiven Inhalten nahegebracht.
[German] Ein politisch nicht ganz korrekter Erklärfilm, den jeder Studierende der HS Wismar gesehen haben sollte.
A typographic audiovisualisation ispired by Op-Artist Victor Vasarely.