Headless CMS options compared
- cms
Simon Hermann
UX/UI Designer & Front-End-Dev
— Linking what belongs togehter —
Latest
How to Create a “Skip to Content” Link
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.
- a11y
Why you should not use target="_blank"
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.
- html
- a11y
Base16 Leaf Tomorrow Theme for VSCode
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.
- project
- tools
The CSS Cascade
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.
- css
HTMHell
A collection of bad practices in HTML, copied from real websites. By Manuel Matuzovic
- a11y
- html
Website: si-labs.com (2019)
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.
- project
- nuxt
Front-End Performance Checklist 2020
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.
- performance
Why You Should Choose HTML5 'article' Over 'section'
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' 🤯
- til
- html
- a11y
Alt-texts: The Ultimate Guide
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.
- html
- a11y
Quoting in HTML: Quotations, Citations, and Blockquotes
There are three major HTML elements involved in quotations: <blockquote>, <q>, <cite>. Let’s take a look.
- a11y
- html
Advanced CSS shadow gererator
- css
- tools
How to section HTML
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.
- a11y
- html
Convert Video to .gif with Gifski
Convert videos to high-quality GIFs on your Mac
- tools
Superfriendy - The Accessibility Library
Superfriendly is an expanding directory of resources to help your products work for everyone. Tools, Articles, Podcasts, etc.
- a11y
unDraw: Free Vector Illustrations
Great set of Open-source illustrations available as svg
- illustration
- inspiration
tiny-helpers.dev
A collection of useful online web development tools by Stefan Judis.
- tools
AI Creates Beautiful Images From Sketches
- inspiration
Website: roman-neumann.com (2019)
Concept, Design and Development of a Website für Roman, a Entrepreneur, Innovation Strategist and Digital Thinker. (2019)
- project
Change the Playback Speed of any Online Video
For every HTML Video element, you can change the playback speed, with a simple console input.
- tools
- js
- html
Highlights from 36c3
Links to highlights from this year's Chaos Communication Congress including talks from David Kriesel and Moxie Marlinspike
- inspiration
- privacy
- security
- community
CSS all shorthand
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.
- til
- css
Business Innovation Cards (2019)
A Serious Card Game I co-designed at SI Labs that lets you develop new directions for your business.
- project
Sara Soueidan on Building Accessible Interfaces
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.
- a11y
:focus-visible CSS pseudo-class
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”).
- til
- css
How to style Browser Scrollbars
Scrollbars still look like 1995 on Windows, so here is an example how to style browser scrollbars (in use on this website).
- css
CSS can do that?
- css
How to inherit scoped styles in Vue to child components
I just learned that elements in nested components are stylable from the parent while still having scoped css with the `/deep/` selector.
- til
- css
- vue
How to define canonical URL in Nuxt.js
How to set rel=canonical to primary domain in Nuxt.js (and let search engines know to ignore duplicate content on staging server):
- seo
- vue
- nuxt
Build a URL shortener with Netlify
- tools
Dark/Light Mode Switch with CSS Variables
- css
What to expect?
To be honest: I'm not really sure myself. There are several motivations for building this website..
Website: Microinteractions (2018)
[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?
- project
- ux
- ui
Launching a Parking Tickets App with Volkswagen (2016)
During my time working at Service Innovation Labs, I helped launching one of VW's first digital services: A parking ticket app.
- service-design
- app
- ui
- ux
Website: AKR-TAX (2016)
Development of a simple Website for AKR-TAX Tax Concultancy.
- project
Website: Zukunft Leben (2015)
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.
- project
- inspiration
Film: How to Hochschulgremien (2014)
[German] Ein politisch nicht ganz korrekter Erklärfilm, den jeder Studierende der HS Wismar gesehen haben sollte.
- project
- illustration
- animation
- film
Film: Vasarely (2014)
A typographic audiovisualisation ispired by Op-Artist Victor Vasarely.
- project
- animation
- film