Kontrastor 82M – Dynamic Cascading Style Enhancer

Style Mixer Tube Style Mixer Tube Style Mixer Tube
Skip to main content
Matthias OttWeb Design Engineer
  • Home
  • Notes
  • Articles
  • Newsletter
  • Workshops
  • Links
  • About

Links

  • #a11y (10)
  • #accessibility (5)
  • #agile (1)
  • #algorithms (1)
  • #animation (3)
  • #apps (2)
  • #architecture (1)
  • #articles (1)
  • #automation (1)
  • #basics (2)
  • #books (3)
  • #branding (1)
  • #browsers (1)
  • #build pipeline (1)
  • #business (2)
  • #carbon management (1)
  • #chrome (1)
  • #climate (2)
  • #climate action (1)
  • #climate change (2)
  • #code (6)
  • #color (2)
  • #component libraries (1)
  • #components (3)
  • #compression (1)
  • #craft (1)
  • #css (14)
  • #css grid (1)
  • #culture (3)
  • #dark mode (1)
  • #dashboards (1)
  • #data (2)
  • #data visualization (1)
  • #dataviz (1)
  • #dependencies (1)
  • #design (29)
  • #design thinking (2)
  • #design-systems (6)
  • #development (7)
  • #devices (1)
  • #economy (1)
  • #education (1)
  • #energy transformation (1)
  • #engine (1)
  • #enhancement (1)
  • #flexbox (2)
  • #font (1)
  • #fonts (2)
  • #footer (1)
  • #foundations (1)
  • #freelancing (1)
  • #gallery (1)
  • #game (1)
  • #git (1)
  • #github (1)
  • #graphics (1)
  • #grid (2)
  • #grunt (1)
  • #handbooks (1)
  • #head (1)
  • #history (2)
  • #hosting (1)
  • #html (4)
  • #hypertext (1)
  • #ia (1)
  • #icons (1)
  • #image (4)
  • #image optimization (1)
  • #inclusive design (2)
  • #indieweb (2)
  • #information (2)
  • #inspiration (1)
  • #iterative (1)
  • #javascript (4)
  • #js (1)
  • #language (1)
  • #layout (6)
  • #leadership (2)
  • #learning (3)
  • #machine learning (1)
  • #media (1)
  • #media- (1)
  • #meta (1)
  • #modular (1)
  • #navigation (1)
  • #newsletters (1)
  • #optimization (1)
  • #organizations (1)
  • #pattern libraries (6)
  • #performance (6)
  • #perspective (1)
  • #physics (1)
  • #picture (1)
  • #platform (1)
  • #polyfills (1)
  • #postels-law (1)
  • #principles (4)
  • #process (6)
  • #progressive (2)
  • #progressive-enhancement (1)
  • #prototyping (4)
  • #public speaking (1)
  • #pwa (1)
  • #reference (2)
  • #renewables (1)
  • #resource (3)
  • #responsibility (1)
  • #responsive (4)
  • #robots (1)
  • #rss (1)
  • #rwd (4)
  • #sass (1)
  • #science (1)
  • #semantics (1)
  • #sketching (1)
  • #social (1)
  • #society (1)
  • #space (1)
  • #static generators (1)
  • #style (1)
  • #style guides (1)
  • #styleguides (9)
  • #svg (3)
  • #systems (1)
  • #tags (1)
  • #takebackyourweb (2)
  • #talks (2)
  • #teaching (1)
  • #technology (2)
  • #terms (1)
  • #testing (1)
  • #theory (1)
  • #tools (7)
  • #training (1)
  • #type design (1)
  • #typefaces (1)
  • #typography (7)
  • #ui (8)
  • #ui engineering (1)
  • #user experience (1)
  • #ux (7)
  • #variable fonts (1)
  • #web (13)
  • #Web (1)
  • #web design (1)
  • #webfonts (3)
  • #webmention (1)
  • #webp (1)
  • #websites (2)
  • #wireframes (1)
  • #workshops (1)
  • #World Wide Web (1)
  • #writing (1)

🔗 Yuni Grotesque

https://www.typemates.com/fonts/yuni-grotesque

Beautiful new release by Philipp Neumeyer and TypeMates. 😍 Next TDC Award incoming … 😉

  • #type design
  • #typefaces
  • #fonts
  • #typography

🔗 The History of the Web

https://thehistoryoftheweb.com/

A wonderful newsletter by Jay Hoffmann about the web's history, the incredible people that built it, and all the websites, code, and browsers you've never heard of.

  • #web
  • #history
  • #newsletters
  • #World Wide Web

🔗 Footer — The only footer gallery on earth.

https://www.footer.design/

A really nice gallery with a lot of footer design inspiration in all forms and colours, sorted by type and style. The footer often is a neglected part of a design. But it doesn’t have to be this way.

  • #web
  • #web design
  • #design
  • #inspiration
  • #footer
  • #gallery

🔗 Dark Mode: How Users Think About It and Issues to Avoid

https://www.nngroup.com/articles/dark-mode-users-issues/

An in-depth look at dark mode. Summary: it is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues.

  • #ui
  • #design
  • #a11y
  • #accessibility
  • #ux
  • #dark mode

🔗 Green Web Directory

https://www.thegreenwebfoundation.org/directory/

For every country, the Green Web Directory lists the hosting providers that provided evidence of their green services.

  • #climate
  • #climate change
  • #web
  • #hosting
  • #energy transformation
  • #renewables
  • #climate action

🔗 Gravity

https://www.gravityclimate.com

Gravity is a platform for carbon management, purpose-built for companies with complex value chains. It lets you calculate the carbon footprint of your organization and helps you identify areas to reduce emissions effectively.

“Gravity's platform quickly ingests, calculates, and distributes key emissions data about our businesses.”

  • #tools
  • #platform
  • #climate
  • #climate change
  • #economy
  • #data
  • #carbon management

🔗 Observable

https://observablehq.com

With 200,000+ community examples, Observable is the fastest way to build custom data visualizations, apps, and dashboards to uncover deeper insights. From the creators of D3.

  • #tools
  • #data
  • #dataviz
  • #dashboards
  • #data visualization

🔗 Accessibility Developer Guide

https://www.accessibility-developer-guide.com

The «Accessibility Developer Guide» is an initiative of «Access for all», Swiss Foundation for technology adapted to people with disabilities. It is developed and maintained in collaboration with a number of acclaimed web agencies. The vision behind the Accessibility Developer Guide is to bridge the gap between providers of websites and users with special needs.

  • #a11y
  • #accessibility
  • #Web
  • #development
  • #inclusive design
  • #tools

🔗 Building Web Layouts For Dual-Screen And Foldable Devices

https://www.smashingmagazine.com/2022/03/building-web-layouts-dual-screen-foldable-devices/

Stephanie Stimac: “Dual-screen devices have been on the market for nearly three years. In that time new web platform technologies have been built with developer feedback to enable layout on the web that adapts to these devices. These web platform capabilities integrate with existing concepts, such as the viewport and media queries, so that developers and designers can spend more time ideating about how to leverage two displays to create enhanced experiences rather than learning a new set of code to build them.”

  • #css
  • #css grid
  • #browsers
  • #devices
  • #responsive
  • #rwd

🔗 The Elements of UI Engineering

https://overreacted.io/the-elements-of-ui-engineering/

A brilliant post by Dan Abramov on common UI and design / engineering problems and how trying to solve them is often a greater lesson than only learning about a new technology. “Learning comes from exploring the problem space and trying different possible tradeoffs.”

  • #learning
  • #ui
  • #design
  • #ui engineering

🔗 Accessibility, Back to the Future | Bruce Lawson | Monki Gras 2019

https://www.youtube.com/watch?v=T2CjuAwrAq8

Bruce says: When Sir Uncle Timbo invented the Web it was accessible by default. Developers, we broke it. Dull Old Web Farts like me wagged our fingers and advised developers to Be Nice To Cripples and sometimes shook our fists and shouted “Be careful of lawsuits”. But by going back to basics, I’ll show you how accessibility means inclusion, and makes the web better for all – not just disabled people, but billions of new customers. So, fire up the flux capacitor and let’s go. NB: I’ll still wag my finger a bit, for old times’ sake.

  • #accessibility
  • #a11y
  • #talks

🔗 A Chaotic Good Guide to Image Performance, Part 1

https://cloudinary.com/blog/a_chaotic_good_guide_to_image_performance_part_1

A great guide to image performance by Mat Marquis.

  • #performance
  • #image
  • #web
  • #image optimization

🔗 Very Dictionary

https://www.verydictionary.com/

Do you use “very” very often? This very nice website provides very good alternatives to “very” so you don't have to use “very” less often. Very useful …ermm… advantageous!

  • #writing
  • #tools
  • #style

🔗 The business value of design

https://www.mckinsey.com/business-functions/mckinsey-design/our-insights/the-business-value-of-design

How do the best design performers increase their revenues and shareholder returns at nearly twice the rate of their industry counterparts? The McKinsey Design Index (MDI) highlights four key areas of action companies must take to join the top quartile of design performers. What they found and point out in their report: There is a strong correlation between high MDI scores and superior business performance.

  • #design
  • #business

🔗 Personal sites

https://personalsit.es/

A directory of personal websites by Andy Bell

  • #websites
  • #takebackyourweb

🔗 The Learning/Doing Gap

https://seths.blog/2019/06/the-learning-doing-gap/

A nice post by Seth Godin about a huge mistake our society often makes: We separate learning from doing. What happens if the learning we do is accomplished by always engaging in it in conjunction with our doing?

  • #learning
  • #education

🔗 webmention.app

https://webmention.app/ Automate your outgoing webmentions – a platform agnostic service that will check a given URL for links to other sites, discover if they support webmentions, then send a webmention to the target.
  • #webmention
  • #indieweb
  • #websites
  • #takebackyourweb

🔗 Should I Use JavaScript to Load My Web Fonts?

https://www.filamentgroup.com/lab/js-web-fonts.html

Recently, browser support for new and safer CSS-only strategies have left some developers wondering: are JavaScript methods to load web fonts necessary? Are they useful? Zach Leatherman takes a closer look.

  • #performance
  • #webfonts
  • #javascript

🔗 Font-display, by @notwaldorf

https://font-display.glitch.me/

A small and concise explainer on font loading with the font-display property by Monica Dinculescu on Glitch.

  • #fonts
  • #webfonts
  • #performance
  • #css

🔗 High Resolution: Interview with Tom Kelley

https://www.highresolution.design/16-tom-kelley-ideo/

A great interview with IDEO's Tom Kelley on design, design thinking, and what it takes to build your creative confidence.

  • #design
  • #design thinking

Pagination

  • 1
  • 2
  • 3
  • 4
  • 5
  • Next

Get in touch!

mail@matthiasott.com +491776546175

Click here!

  • Home
  • Notes
  • Articles
  • Newsletter
  • Workshops
  • Links
  • About
  • /now
  • /uses

Socialize!

  • RSS Feed
  • Mastodon
  • Bluesky
  • Threads
  • Instagram
  • LinkedIn
  • Xing
  • GitHub
  • CodePen
  • YouTube
Matthias Ott 

Legal Information

  • Webmention endpoint
  • Privacy Policy
  • Site Notice / Impressum

Design and code © 2007–2026 Matthias Ott • Made with HTML, CSS, enhanced with JavaScript, powered by Craft CMS • Set in NaN Tresor and NaN Tragedy •