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 use a screen reader in my 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?
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.