{ "items": [ { "id": "23647", "url": "https://matthiasott.com/notes/fixing-the-logitech-spotlight", "title": "Fixing the Logitech Spotlight", "content_html": "
The Logitech Spotlight presentation remote is a sleek piece of hardware. It is comparatively small, fits nicely in the palm of your hand, and the buttons come with a very satisfying, albeit for my taste a tiny bit too loud, click. But most importantly, the brushed aluminium design feels sturdy, high-quality, and elegant. Exactly the piece of gear that you buy because you want a reliable, long-lasting device that does not fail you.
\n\nImagine my irritation, when I pulled out my Spotlight after several months of not using it \u2013 and it just didn\u2019t charge anymore. Not with the supplied USB-C cable, not with any USB-C cable. Regardless of which cable and power source I tried, the remote remained silent and also didn\u2019t show the pulsating light at the top that would indicate that the device is being charged.
\n\nNow, further imagine my disbelief and bewilderment when a quick online search brought up this tutorial on YouTube of how to \u201cfix\u201d this issue: https://www.youtube.com/watch?v=KuDt2un6zvI
\n\nTldw; Because of how the Spotlight is engineered, it will die if you not charge it regularly and there is no way to reset it or bring it back to life in any other way. Even if you plug it in for hours, it won\u2019t come back to life because it doesn\u2019t even have that last little spark of electricity in it that would allow the device to recognize that it is being charged. The only solution presented in the video: soldering two wires to the contacts of the battery and then charging it with an external charger \u2013 after forcefully opening (and possibly damaging) the device. What a mess.
\n\nBut then, one of the comments drew my attention:
\n\n\u201cI charged very briefly (1 Minute) by using just 2 AA batteries, that was enough to give it the boost to wake up. Amazing advice, thank you so much!\u201d
\n\nThat didn\u2019t sound all that bad anymore! Charging it briefly with a few AA batteries? I can try that. So I got to work \u2013 and ultimately brought the remote back to life. If you happen to have a Spotlight as well and ever run into the same problem, I hope this helps. Here\u2019s a short guide:
\nI used a tool from iFixit they call Jimmy, which has a very thin steel blade, to open the back and lift it up a little bit at the middle of the device. Do this very slowly \u2013 the back plate is just glued onto the frame, but it can break, especially at the upper end, where it has a plastic latch. Then, I used opening picks to carefully lift up the back plate all around, ending at the top.
\nIf you\u2019re like me and don\u2019t happen to have something like a (LiPo) battery charger at hand, connect two or three AA batteries in series, e.g. with some tape, so that their contacts are touching each other. Also attach two wires, one on the positive and one on the negative terminal of your \u201cbattery pack\u201d.
\nNow, hold the cables to the contacts of the Spotlight\u2019s battery. The hot, positive wire should touch the positive contact (that\u2019s the one with a little red cable connected to it) and the negative wire the other terminal.
\nI had to try twice but only held the cables onto the contacts for about 30 seconds, which was enough to provide a tiny spark of life. You won\u2019t see or hear anything yet, though. But now \u2026
\n\nIt should reward you with a very satisfying vibration to let you know that it is indeed back from the dead. Also, the pulsating LED at the top should now be back. \ud83e\udd73
\nHappy charging \u2013 and happy presenting! Oh, and don\u2019t forget to regularly charge this touchy little piece of hardware in the future.
\n", "date_published": "2024-03-19T23:28:00+01:00", "date_modified": "2024-03-19T23:31:41+01:00", "author": { "name": "Matthias Ott" } }, { "id": "23533", "url": "https://matthiasott.com/notes/making-own-your-web-more-sustainable", "title": "Making Own Your Web More Sustainable", "content_html": "I just published the 11th issue of Own Your Web, my newsletter about designing, building, creating, and publishing on the Web. When I started the newsletter back in autumn of 2023, I didn\u2019t yet know what form the newsletter would take on, if people would like it, and also whether I would like doing it or not. Eleven issues in, I can say with confidence that I enjoy researching and writing those issues a lot! And with more than 1700 subscribers via email and RSS after just a few months and after all the feedback I received via social media and email \u2013 thank you all! \ud83e\udd17\ud83e\udd73\ud83d\udc9a \u2013, I want to keep running this project as long as possible. In order to do that, though, I need to make it more sustainable. Naturally, setting up such a project and writing a newsletter every other week takes up a considerable amount of time. Also, hosting a newsletter costs a bit of money as well. Currently, I use Buttondown to do all the management and sending of the issues, and although Buttondown is not one of the most expensive solutions out there and is definitely worth every penny, the monthly fee still adds up. Providing a \u201cfree\u201d newsletter isn\u2019t that free for the person writing it, after all.
\n\nSo, going forward, my goal is to make Own Your Web a little more sustainable, first of all by making sure that at least the costs and, going forward, maybe even a good portion of my working hours that go into this newsletter are covered.
\n\nBut how do you make a newsletter sustainable? Do you add a paywall? Do you offer memberships for supporters? Do you ask people to buy you a coffee? Do you add sponsors or ads to the newsletter? Do you plaster it with affiliate links until it is indiscernible from spam? Do you do all of the above?
\n\n\u201cMonetizing\u201d any type of work online certainly isn\u2019t easy. Many platforms promise that you can grow your publication into a thriving online business in no time \u2013 or at least make it sustainable. But in reality, they are often the only ones who really start earning money that actually pays the bills. And so, many people desperately try to do anything they can to squeeze out the last few dollars out of a project that started as a fun idea.
\n\nThere is something that really bugs me about this race to the bottom: I started this newsletter out of a passion for the open web and want it to be a genuinely useful, impactful, but also trustworthy resource. And that\u2019s why I feel deeply that it would be a mistake to not be true to the values that connect me with my readers. Like, for example, the belief in a web that is open, distributed, and controlled by people creating beautiful things instead of marketing departments flooding the web with crap content, the targeted advertising industry harvesting data to create user profiles, and a few social media platforms manipulating your behavior to hook you into their walled gardens. Or values like the belief that owning your work, your data, your identity, and your connections online is one of the most valuable and empowering aspects of being a citizen of the open web. But most importantly, the conviction that the Web we all want to build together needs to be built on mutual respect and an appreciation of each other\u2019s unique perspectives, struggles, and identities.
\n\nTherefore, whatever I do to make the newsletter more sustainable, it needs to be in line with what this newsletter is: a newsletter about being independent, about owning your web.
\n\nThat\u2019s why I will start looking for people or companies that would like to support the newsletter as sponsors \u2013 but I will be very careful in selecting them. They need to be in line with the values and goals of the newsletter. They need to be a perfect fit for you, the readers. They need to be people and companies that are trustworthy and supportive of the open web and that bring real value to you and everyone else who wants to own their web. Regarding the type of sponsorship, I am currently considering either a short \u201csupported by\u201d line with a link or, if it offers real value to my readers, a short shoutout inside the newsletter.
\n\nSo: if you would like to support the publication or can think of a company that would be a good fit, let me know: \ud83d\udc49mail@matthiasott.com\ud83d\udc48
\n\nAnd then, there is still also the option of asking all of you for support. Completely optional and voluntary \u2013 the newsletter will always be free \u2013, but maybe a small contribution on a pay-what-you-want basis is something that a few of you would indeed do if it helps support the publication. I guess I\u2019ll do that as well and see how it plays out.
\n\nI\u2019m curious: how do you feel about all that? What kind of support or sponsorship do you find the most appropriate and valuable? Are you already supporting other projects? Or, do you also not mind a few ads for interesting products if they don\u2019t track you? Or are you maybe even running a project yourself and have figured out a way to make it work sustainably for you? I\u2019d love to hear your thoughts on this! So let me know via Webmention, Mastodon, email, or in a response blog post.
\n\r\n ", "date_published": "2024-03-16T01:21:41+01:00", "date_modified": "2024-03-16T01:21:41+01:00", "author": { "name": "Matthias Ott" } }, { "id": "23522", "url": "https://matthiasott.com/notes/welcome-to-the-indieweb", "title": "Welcome to the IndieWeb", "content_html": "Imagine you post and make new friends on an online network for more than a decade \u2013 and suddenly, your account gets suspended for no apparent reason. And there is nothing you can do about it.
\n\nOr imagine the online community you were an active part of for years just closes down and all user data gets deleted after a few months. And there is nothing you can do about it.
\n\nOr imagine that a site you poured all your thoughts and writing into decides overnight that it might be a good idea to sell access to all user data to a company that is training their large language model with it. And again, there is nothing you can do about it.
\n\nNow imagine a place where you actually own your content, your connections, and your online identity.
\n\nAnd now, imagine that this place is your personal website, under your own domain name, under your control.
\n\nThis is the basic idea behind the IndieWeb.
\n\nThe IndieWeb is a community of independent and personal websites and the people behind those sites creating tools that enable a decentralized, people-focused alternative to the corporate web and its social media silos. Initiated in 2010 by Aaron Parecki, editor of the Webmention and Micropub open web standards, and Tantek \u00c7elik, co-author of microformats, the IndieWeb has grown into an active community with members and followers worldwide.
\n\nIf you want to get involved, you can attend (or even help to organize) one of the IndieWebCamps, which are regular brainstorming and building events that take place several times a year in the US and Europe. They are a wonderful opportunity to meet like-minded people and work together on community topics and also tinker with your personal site. Typically, an IndieWebCamp will span two days. On the first day, participants learn, share, and discuss ideas and concepts in various sessions. The second day is for creating, hacking, and, at the end of the day, demonstrating what everyone managed to build. It is an exciting and inspiring experience in a very welcoming atmosphere. I\u2019ve been to a few IndieWebCamps (D\u00fcsseldorf, Berlin, and Nuremberg) and it was always fantastic!
\n\nAnother great way to meet people and work on your personal sites together are the Homebrew Website Club meetups that regularly take place in several cities around the globe. See https://events.indieweb.org/ for upcoming events \u2013 and don\u2019t hesitate to start something in your city, if you feel like it.
\n\nBut also if you don\u2019t want or can\u2019t attend in-person events or join the IndieWeb chat, there are many ideas and technologies that have come out of the IndieWeb movement and its underlying principles that are worth checking out.
\n\nOne of the most useful and impactful concepts of the IndieWeb is the idea to publish everything you create on your own site first and then syndicate it elsewhere, also called POSSE. This simple but effective principle allows you to stay in charge of your content and each post\u2018s canonical URL while also distributing it into the many different social networks and online communities where friends who aren\u2019t part of the IndieWeb or don\u2019t (yet) have a personal site might hang out. And because you ideally always link back to your original post, discovery of your original content is improved as well. You can learn more about the many advantages of POSSE on the IndieWeb wiki: https://indieweb.org/POSSE
\n\nAnother IndieWeb building block that you\u2019ve probably heard of before is the Webmention protocol. Webmentions allow you to collect interactions like comments, likes, reposts, or other responses from various sources and feed them back into your site. How it works is simple: if you link to a website in a post, you can send a Webmention to notify it. If the site supports Webmentions, it may display your post as a reaction. And you can do the same for all sites that send you a Webmention. This way, you can have a conversation from one website to another, sending posts back and forth.
\n\nThere are also many other promising tools like IndieAuth, which lets you use your own domain to sign in to other sites and services, Micropub, an API for creating, editing, and deleting posts on websites like your own, or WebSub, an open protocol to send and receive notifications when web content \u2013 like the feed of a personal website \u2013 is updated.
\n\nOne complaint I frequently hear though when I talk to people about the IndieWeb is that many of its technologies are still not accessible enough to people without a web development background. And there is some truth to that. Despite a growing number of useful plugins, for example for WordPress or Kirby, and a lot of helpful articles and tutorials, e.g. for Eleventy, many of the solutions that the IndieWeb offers are still very much nerd territory. All the more important are projects like the amazing Indiekit by Paul Robert Lloyd, a little Node.js server with all the parts needed to publish content on your personal website and share it on social networks.
\n\nThe IndieWeb has already been playing a key role in developing many of the tools that make an independent, decentralized network of personal websites possible. This in itself is invaluable. Now it is on all of us to implement more and more of those features into our sites, build even more tools and solutions for the independent web, and help to lower the barrier of entry so that the IndieWeb\u2019s vision of owning your content and online identity will be more accessible to evermore people. Every step we take will change the Web for the better. Because ultimately, the IndieWeb is for everyone.
\n\nThe next chapter of the IndieWeb awaits and the fight for an independent, open web seems more worthwhile and promising than ever. Tim Berners-Lee once said: \u201cYou can make the walled garden very very sweet. But the jungle outside is always more appealing in the long term.\u201d
\n\nLet\u2019s make this jungle wild, exciting, and beautiful again.
\n\r\n ", "date_published": "2024-03-14T17:36:43+01:00", "date_modified": "2024-03-14T17:36:43+01:00", "author": { "name": "Matthias Ott" } }, { "id": "23528", "url": "https://matthiasott.com/notes/links-worth-sharing", "title": "Links Worth Sharing", "content_html": "Every day, we browse the Web and scroll our timelines. And every day, we find even more interesting websites, blog posts, articles, videos, podcasts, and other insights and ideas that we want to document, preserve, and share. The most obvious way to save something of interest still is to create a good old bookmark. And there are many different ways to do this.
\n\nFirst of all, you could save your bookmarks in your browser. While there is generally nothing wrong about that and I know many people for whom this solution works well, it can still be a bit cumbersome to organize your bookmarks this way, especially if you want to also add tags or notes. You could also save your favorites in a read-it-later app like Pocket or Omnivore. Or, you could save and manage your favorite links with bookmarking services like Raindrop, Pinboard, or the open-source tool LinkAce.
\n\nBut all those solutions are missing an important bit: the social aspect of bookmarking, also known as sharing links with others. Once upon a system time, sites like Zootool, StumbleUpon, or Delicious not only let us save bookmarks, but also made it possible to discover new, interesting links that others had saved. This social aspect, this way of curating and sharing a collection of links that others can follow, has become a lost art.
\n\nToday, social media sites have made it seductively convenient to quickly post links that will immediately be rewarded with views, likes, and reposts. As a result, many of us seem to instinctively drop most of the interesting links we find right into the timelines of the many \u2013 oh, so many! \u2013 social media silos. With the recent revival of personal websites and blogs, however, a lot of people are rediscovering a more thoughtful and persistent alternative: sharing links on their personal websites.
\n\nSharing links on your own site indeed has several advantages:
\n\nYou own them. Bookmarking services come and go. On your own site, you can build up an archive of links that will survive any turmoil.
\n\nYou can look at them again. Because that\u2019s the reason you are saving a bookmark in the first place, right?
\n\nYou can share them. If you add a links section to your website, people will be able to discover new and relevant content through someone they know and trust. No algorithm can beat that.
\n\nYou can provide an RSS feed. This makes it easier for people to always get your latest links automatically. And, as mentioned in the last issue about RSS, this also helps with the discoverability of all our sites and posts.
\n\nYou can cross-post your links. Using tools like IFTTT, Zapier, n8n, or Echo, you could take the RSS feed of your links section, for example, and automatically cross-post new links to Mastodon, LinkedIn, and BlueSky (via Micro.blog) \u2013 or also backup your links on other services like Pinboard or Notion.
\n\nYou can send Webmentions and notify the sites you bookmarked that you did so.
\n\nYou can turn your links into a weekly roundup post or a little newsletter for everyone who does not visit your site regularly but might enjoy a regular bunch of links.
\n\nYou can create a solution that is as sophisticated as you want it to be. You can add (colorful) tags, notes, a search, filters, screenshots \u2013 and whatever else you come up with and are adventurous enough to build.
\n\nIf you are athirst for some inspiration or want to start following the link blogs of others, take a look at the many sites people shared on Mastodon. (Thank you! \ud83e\udd17) Ana is sharing bookmarks on her site, as well. So do Nicolas, Marc, and Hidde, who recently also wrote about his approach. Andy is collecting links as well now and also shared a run-down of his links setup. One of my personal favorites is Jeremy\u2019s links section, just because he constantly adds new and interesting links including a short but succinct comment. And, to end the roundup with a shameless plug, my own site has a links section as well.
\n\nIn whatever way you decide to implement your collection of links, pay attention to two things: first, try to make posting links regularly a habit. This works best when the links section of your site is your primary place where you collect bookmarks. And secondly, make adding and publishing bookmarks as easy as possible, for example by adding a bookmarklet. The easier adding a link is, the more likely it is that you will stick to it.
\n\nHow do you currently save and share your links? Do you already have a links section on your site? Or are you planning to do so? Let me know via Webmention, Mastodon, email, or in a response blog post.
\n\r\n ", "date_published": "2024-03-14T17:33:00+01:00", "date_modified": "2024-03-15T06:21:45+01:00", "author": { "name": "Matthias Ott" } }, { "id": "23382", "url": "https://matthiasott.com/notes/we-love-rss", "title": "We \u2764\ufe0f RSS", "content_html": "In the last issue of Own Your Web, we looked at blogrolls as one way to improve the visibility and discoverability of our sites. Whether or not you want to add a blogroll to your site is a matter of personal preference. But there is something else which probably everyone with a personal website should do: adding an RSS feed.
\n\nRSS, which stands for either \u201cReally Simple Syndication\u201d or also \u201cRDF Site Summary\u201d or \u201cRich Site Summary\u201d, is a way to distribute the content of your site through a feed that people can subscribe to. Basically, you provide a feed of your website\u2019s content that gets updated every time you publish something new. People can subscribe to that feed \u2013 and the feeds of other websites \u2013 and then read all updates in their feed reader of choice, all in one place. This way, readers don\u2019t have to repeatedly visit various websites and other sources of interest to look if new posts have been published, but can instead pull in all new posts automatically. For you as a publisher, this also has the huge advantage that people who enjoy reading your posts will automatically get to see them once their feed reader updates all sources.
\n\nDeveloped around the turn of the millennium by people like Dan Libby and Ramanathan V. Guha at Netscape, as well as Dave Winer and the late Aaron Swartz, RSS became widely popular during the first blogging wave in the early 2000s. Today, it is the technology underpinning many news aggregators and also the distribution mechanism behind podcasting.
\n\nWhat makes RSS so powerful is that it is an open format. RSS is one of the reasons the blogosphere grew so rapidly and it is the reason why podcasting exploded: because this open format allowed everyone to participate by simply publishing a feed anywhere on the web, without being restricted by platform requirements, closed APIs, and paywalls. And this superpower is also why RSS is having a renaissance today: it allows everyone to subscribe to, share, syndicate, and cross-post content on the open web. And it also enables creative automations using tools like Zapier, IFTTT, Huggin, or n8n.
\n\nHow easy it is to an RSS feed to your site \u2013 or also individual feeds for different content types \u2013 depends on the system you are using. Many services, platforms, and content management systems already come with a built-in feed, so there is nothing to do on your side. If you have a WordPress site, for example, people can simply add /feed/
to the end of the domain name to get the RSS feed of your site: https://pfefferle.org/feed/. The same works for Tumblr or Ghost URLs if you add /rss/
at the end. Medium also provides RSS feeds for profiles, publications, and topics. (By the way: did you know that you can also add .rss
to the end of any Mastodon user profile URL to get an RSS feed? https://mastodon.social/@matthiasott.rss)
Sometimes, adding a feed to your site takes a little more work, though, because you might have to install a plugin, like for Kirby or Eleventy, or even write the XML template code for the feed yourself, for example if you are using Craft CMS. Adding a feed is such a common problem, however, that you should be able to find a straightforward solution fairly quickly. In any case, make sure to validate your feed, for instance with the W3C Feed Validation Service.
\n\nOh, and if you are feeling adventurous, you can even style your RSS feed with XSL(T). \ud83c\udfa8
\n\nOnce your site has an RSS feed, it makes sense to put a prominent link to the feed somewhere on your site so that people will actually find it. Many blogs and personal websites have a link to their RSS feed(s) in the header or footer of the layout. If you also add an (orange) RSS icon, it is even easier to spot. Ideally, you should also expose the RSS feed in the <head>
of your HTML so that browsers and feed readers can automatically find the feed when someone pastes in the site\u2019s URL. Some of you also provide additional information about their feeds on a separate page, especially if they provide several different feeds, like Jose or Jeremy do, for example.
You might at times hear people moan about RSS not being used anymore. But that doesn\u2019t reflect my experience at all, at least in my little web design and development bubble. Although RSS is far from being used by the average mainstream internet user (for now), it is as useful as ever if you are looking for a more deliberate, calm, and algorithm-free way of reading your favorite blogs and newsletters. And there are now more feed readers and content aggregation platforms than ever before which allow you to collect and manage feeds while also providing a great reading experience. Yes, Google killed Google Reader in 2013, which was quite popular at the time. But several other services and apps jumped in to fill the gap so that innovation in that space never really came to a halt. Most of those services come with their own web-based reading interfaces and mobile apps, but you can almost always combine them with other native apps to improve your reading experience, especially on mobile devices. Here are a few popular options:
\n\nFeedbin \u2013 One of the most popular readers for web feeds, newsletters, podcasts, and YouTube channels. For $5 a month, you get a clean interface with native apps and all search, management, import, and export options you need.
inoreader \u2013 Another popular RSS reader and content aggregation platform with a free plan and a well-designed interface, mobile apps, and advanced features like keyword monitoring and automation options.
feedly - Feedly used to be one the most popular RSS reader for beginners. They still offer a free plan that allows you to follow up to 100 feeds and organize them into 3 folders.
The Old Reader - Free for up to 100 feeds, The Old Reader has been around since 2012. In addition to classical features, it also lets you find friends on Facebook or Google contacts and like, share, and discuss posts with them.
NewsBlur \u2013 A reader that is free on the web, iPad, iPhone, and Android for up to 64 sites. Useful premium features start at $36 per year.
BazQux Reader \u2013 For $30 a year, you get a fast and clean in\u00adter\u00adface with a focus on read\u00ading, without ads and tracking.
Flipboard \u2013 Flipboard is a news app and \u201csmart magazine\u201d that aggregates content from various sources that recently even federated with the Fediverse, allowing you to discover and follow millions of people who are posting content on the Fediverse.
Reeder - my RSS reader of choice for Mac and iOS, which you can even use without an additional hosted service via iCloud sync.
NetNewsWire - a very popular, free and open source RSS reading app for Mac, iPhone, and iPad.
RSSOwl \u2013 a free and cross-platform desktop app (Windows, Linux, and Mac).
Tiny Tiny RSS - a self-hosted, web-based, open-source reader that also comes with an Android client.
To get the most out of your RSS experience, it makes sense to slowly and carefully add more websites you like to your feed reader. Tailoring your feed of feeds to your interests this way can reduce the noise and will leave you with a selection of people that regularly publish high-quality posts. As a starting point, you could take a look at the many RSS feeds people shared when I asked on Mastodon last week and in 2022. Manuel also asked everyone to share their feeds a while ago and just yesterday, Molly White asked people to share their blog URLs. At the time of writing, she has already received more than 400 replies.
\n\nIt can also be interesting to see which feeds others are following. That\u2019s where OPML comes in. If you export a list of feeds from your RSS reader, it will probably be exported in the OPML format. And some people like to share their OPML files publicly. Stuart was one of the first people I saw sharing their list, Chris shared his humongous list as well, here is Paul\u2019s collection, here\u2019s \u0160ime\u2019s, this is Jeremy\u2019s, and here is mine.
\n\nAnd, last but not least, you can also browse directories like Blogroll, this Big List of Personal Websites, ohh.directory, or Personalsit.es to find interesting blogs and websites to follow.
\n\nThere is no denying that RSS is having a moment again. Not only because it allows us all to improve the discoverability of our work and explore online content in a personalized and deliberate way, but also because it remains one of the most powerful and influential technologies of the open web. RSS already is the cornerstone of many open technology systems like podcasting, which can\u2019t be owned and controlled by any one company. As Anil Dash notes, this alone is radical, because it is the triumph of exactly the kind of technology that's supposed to be impossible: open and empowering tech that allows people to have ownership over their work and their relationship with their audience.
\n\nAnd we\u2019re just getting started.
\n\r\n ", "date_published": "2024-02-14T16:45:00+01:00", "date_modified": "2024-02-15T00:05:47+01:00", "author": { "name": "Matthias Ott" } }, { "id": "23264", "url": "https://matthiasott.com/notes/all-things-being-equalized", "title": "All Things Being Equalized", "content_html": "For my birthday, I got a new pair of speakers for my home office / home studio. After looking around for quite some time, I settled on the ADAM Audio T5V in the end. The T5Vs are affordable, entry-level studio monitors with a 5\u201c woofer that are optimized for smaller rooms. And it doesn\u2019t make sense to blast much more bass into my 3 by 3 meter office anyway. I\u2019m still far from being experienced when it comes to judging the sound quality coming out of professional speakers, but I wanted something that would allow me to reliably judge occasional (and soon more frequent?) audio recordings. A first listen confirmed the many positive reviews I watched and read: connected to the MOTU M2 via balanced XLR, and without having had the time to properly burn them in yet, the T5Vs still produced an impressively clear, rich, and powerful sound.
\n\nLooking at the frequency response curve of the speakers, you\u2019ll see that they in fact have a relatively flat response curve, which means that neither the lows (the \u201cbass\u201d) nor the mids are too pronounced. There seems to be a little boost in the higher frequencies above 5 kHz but this can probably be adjusted via a switch on the back.
\nA flat frequency response is exactly what we want when the goal is to assess and master audio recordings, but of course, I also want to use the speakers to listen to music of all genres. From Run the Jewels, MF DOOM (all caps when you spell the man name), or Kendrick to The Strokes, the Arctic Monkeys, or David Bowie to Portishead, DJ Krush, Max Richter, Hans Zimmer\u2019s Dune, or Beethoven played by the Vienna Philharmonic or Igor Levit. And that\u2019s when you realize you need some equalization.
\n\nThus far, I\u2019d been mostly using headphones while at work and whenever I wanted to slightly adjust the sound, I opened a little app called eqMac. But I also recently switched to the more analytical sounding Austrian Audio Hi-X60 which had already increased my appetite for a proper solution for EQing my Macs audio output.
\n\nLast but not least, equalization can be useful to compensate for problematic resonances or other characteristics of your room. But thus far, I\u2019ve not entered those spheres (yet).
\nThere are a few ways you can use equalization on the Mac. First, you could use the built-in equalizer of Spotify or any other music app. In the case of Spotify though, I got horrifying results. I don\u2019t know what they do but it destroyed the signal completely and introduced crackles and clipping.
\n\nThen, there are a few apps that adjust the output of your Mac\u2019s system audio and sometimes also let you add effects, like eqMac, Sound Control, or Boom 2. My experience using eqMac, which comes with a free and a pro version, was fine overall. It allowed me to make quick basic adjustments, but it was also annoying at times, especially because I regularly had to start it twice (?) until it finally opened or when the EQ settings quickly lead to clipping audio.
\nSo I had another look around, and the most promising app, which also a few people suggested on Mastodon, is SoundSource by Rogue Amoeba. Rogue Amoeba are also the creators of LoopBack, an ingenious and indispensable tool for routing and combining different audio signals and outputs, especially when you are running online workshops or streaming sessions.
\n\nSoundSource lives in your menu bar and lets you not only adjust the volume of your system audio, but also individually for each of the running applications. You can adjust the audio with a 10-band equalizer, again both system-wide as well as on a per-app basis, and much more. What really sets SoundSource apart and convinced me in the end, though, are two more effects: the headphone EQ effect allows you to automatically equalize and tailor the sound to your specific headphone model. You can pick from thousands of presets and also add your own.
\nThe second killer feature is support for Audio Units, Apple\u2019s system-level plug-in architecture for Core Audio. What this basically means is that you can use all the free or paid plugins that you can use in audio workstations \u2013 like Logic Pro, Audition, Pro Tools, Reaper, Ableton Live, or PreSonus Studio One \u2013 to adjust your system audio, too.
\n\nAnd suddenly, the possibilities for equalization on the Mac seem endless. Just look at this list of only a few popular EQ plugins:
\n\nIn my case, this means I can use iZotope Nectar 3 Elements, for example:
\nAnd who knows, maybe I\u2019ll soon actually adjust for all the weird resonances in here\u2026
\n\nWhat do you use to adjust the audio on your Mac or in your room? What are your favorite plugins? Let me know via Webmention, Mastodon, email, or in a response blog post.
\n", "date_published": "2024-01-10T01:28:42+01:00", "date_modified": "2024-01-10T01:28:42+01:00", "author": { "name": "Matthias Ott" } }, { "id": "23114", "url": "https://matthiasott.com/notes/42-for-42", "title": "42 for 42", "content_html": "I\u2019m turning 42 today and yes, I am as surprised about that number as you are. If 42 really is the answer to life, the universe, and everything, then maybe it makes sense to look back on what the old lad actually learned in all those years. So, here is a list of 42 life lessons, similar to the one Chris wrote when he was still 40. Incomplete and mostly unstructured. For my younger self as much as for my children and anyone reading this.
\n\nWhether you are running online workshops, hosting a live stream, or recording audio or video content, optimal audio quality is absolutely essential. People in your audience might tolerate if your video is noisy or not perfectly sharp. But if your audio quality is poor, for example when something is constantly crackling or whooshing in the background or your voice is distorted, it gets irritating and annoying for your listeners pretty quickly.
\n\nI\u2019m therefore constantly experimenting with various ways to improve the audio (and video) setup and the acoustics in my little home office in the attic. Last year, I added a dynamic broadcast microphone, the R\u00f8de Procaster, for spoken word which has a cardioid polar pattern and great off-axis rejection, meaning it primarily records what\u2019s directly in front of it. I also added an audio interface with really clean preamps, the MOTU M2, and treated my room a bit. However, the key to recording impeccable audio is not only good technical equipment, but also making sure you record the right things in the first place. An important part of that: removing background noise as much as possible.
\n\nWhich type of background noise you have to deal with depends on the environment you are recording in. In my case, there is a street outside which can get quite loud at times. Unfortunately, there is not too much you can do to block that kind of outside noise from entering the room other than trying to improve the insulation of the windows or the door. The second type of background noise, however, is one that you often can in fact control. And that\u2019s the noise inside your room. Be it an air conditioner, loud computer fans, or other appliances \u2013 you might want to turn everything off that makes noise before you hit record.
\n\nIn the past, I had a monitor, for example, that made a constant, very high-pitched beeping sound which then turned up in the recordings as well. So I had to turn this monitor off when recording and eventually replaced it. This improved the noise floor of the audio considerably.
\n\nBut there were still two pain points that I had to deal with: the hum of the fan of my key light, an Aputure Amaran 200d, and the whirr of a fan I attached to the back of my camera, a Sony ZV-E10, to prevent it from overheating during longer sessions like online workshops. Both sounds were still clearly audible on recordings and the way I had dealt with in the past was to pull down the respective frequencies with the live equalizer of the Blackmagic ATEM Mini, through which the audio runs for live streams:
\nThis worked fairly well. But, of course, I wasn\u2019t satisfied. I wanted to be able to record audio also without the ATEM Mini, only using the MOTU M2 audio interface. What I had tried in the past as well was to record a few seconds of silence and then use this snippet\u2019s noise floor to eliminate the hum and hiss with a de-noise plugin. I got good results from that, too. But this is still another extra production step that you don\u2019t want to have to do every time you record something. The best way to reduce noise and get a clean recording is still to eliminate the original sound source in the first place. So I went on a little quest to do exactly that.
\n\nThe Aputure Amaran 200d is an affordable LED light that can output a lot of light. It can therefore get quite hot and that\u2019s why it has a fan built in. When I bought the light, there was no way to adjust the speed of this fan. Once you turned the light on, the fan would run at full speed, regardless of how hot the device actually was. But a few days ago, I had an idea: what if Aputure in the meantime had released a firmware update for the device? And in fact, there it was: a firmware update that allows you to switch the fan from \u201cmedium\u201d to \u201csmart\u201d in the Sidus Link app controlling the light so that the fan adjusts its speed to the actual temperature. This immediately reduced the fan speed from 1500 rpm to under 1000 rpm and the hum was gone. First problem solved! \ud83e\udd73
\nSony cameras are well-known for overheating in challenging situations. So one of the first things people do when they get a new Sony camera is to switch the \u201cAuto Power OFF Temp.\u201d setting to \u201cHigh\u201d. This prevents the system from shutting off too early to cool down. My ZV-E10, an entry-level mirrorless camera, has the same issues. When you record in 4K or are using the camera in USB cam mode, it overheats fairly quickly. I\u2019d even say that this is a construction error, because it prevents you to use the camera as advertised. Using it as a USB camera is basically impossible. But there are a few things you can do to work around this issue:
\n\nAll those measures helped a lot already, but the camera still shut down at times after long usage or when the office got hotter in summer. So, as a last resort, I mounted a small Noctua fan to the back of the camera and connected it to a USB power adapter. The camera never overheated again.
\nBut as it is the case with over-engineered solutions (\ud83d\udc4b, SPAs), as soon as you solve one problem you realize that you just created at least one new one. In my case, it was the aforementioned whirring noise of the fan which was, although the fan is already quite silent (max. 19.6 dB(A)), still audible in recordings.
\n\nSo last week, I decided to finally tackle this problem with two a two-layered approach. First, I replaced the fan with cheap aluminium heat sinks. I had to cut off three rows of fins from one of the heat sinks to be able to affix not only one. In a perfect world, this will suffice to fix the problem. But because Murphy\u2019s law, I re-added the fan as well, and ordered a USB fan controller to be able to adjust the output voltage and thus throttle the speed of the fan, just in case I\u2019ll ever have to turn it on again. Second problem solved. For now. I guess\u2026
\nAs you can see, sometimes it takes a bit of creativity and tinkering to optimize your setup. I\u2019m fully aware that most of you won\u2019t run into the same problems as I did. But maybe sharing this example of my tour de-noise helps you to approach similar problems with the same mindset. You might think that putting in that much effort into such seemingly small details isn\u2019t worth the time and energy. You might be right. And you can and should definitely start recording anything without worrying that much about background noise. Yet in my experience, caring about and honing in the details often makes the difference between good and great. Regardless of what you\u2019re building or creating, paying attention to the final touch is worth it and can be very satisfying. And you\u2019ll also learn a lot along the way. For example, in which direction you should mount a cooling fan.*
\n\nDo you have a setup to record audio or video? Did you run into similar problems? What tricks and hacks did you use to improve your setup and the quality of your recordings? Let me know via Webmention, Mastodon, email, or \u2013 my personal favorite \u2013 in a response blog post.
\n\n*So that it pulls and blows the hot air away from the device.
\n", "date_published": "2024-01-07T15:34:00+01:00", "date_modified": "2024-01-07T21:01:14+01:00", "author": { "name": "Matthias Ott" } }, { "id": "23055", "url": "https://matthiasott.com/notes/whats-too-good-to-be-true", "title": "What\u2019s Too Good to Be True?", "content_html": "The web platform is changing rapidly these days. With every major browser release, more and more powerful features get added, many of which are based on previous input about what web developers need to build better for the web. One way for\nbrowser vendors and developer advocates to get this useful input is to ask web developers about what features they are interested in or where their biggest pain points are. Last year, for example, many people shared their CSS wishlists.
\n\nBrian Kardell, developer advocate at Igalia, just asked the opposite question: which of the features that got shipped in the last few years have actually proved to be the most valuable? Which features do you use all the time? An interesting question to think about for a little while. Also because we tend to overlook how fantastic it is to be able to use those features which would have been unimaginable just a few years ago. Or, as Jeremy demonstrated in his talk at border:none last year, many of the features we now take for granted actually almost sound \u201ctoo good to be true\u201d.
\n\nSo, what features are this for me? What features am I using almost daily or don\u2019t want to miss anymore? Here\u2019s a quick list:
\n\nCSS math functions min(), max() and clamp() \u2013 I use clamp() all the time, both as a smarter replacement of min-width and max-width in fluid layouts, as well as to dynamically scale my typography based on the viewport width.
Lazy loading via attribute for images & iframes \u2013 Being able to lazily slap a loading=\"lazy\" attribute on all images in my HTML (except for the images within the first viewport) for a considerable performance boost without a single line of JavaScript is just amazing.
:focus-visible CSS pseudo-class \u2013 I\u2019ve already written about how useful this seemingly little addition to CSS can be to improve the accessibility of our sites. I\u2019m now using :focus-visible in every single project I build.
CSS font-display \u2013 Another seemingly small addition to CSS with an invaluable impact: using font-display: swap as the most basic but also a performant and robust font loading strategy.
CSS selectors: :where() and :is() \u2013 I\u2019ve started using both selectors, but especially :where() because it always has 0 specificity, in my base style sheets whenever I\u2019m declaring something that might later be overwritten. Like heading styles, for example.
prefers-color-scheme media query \u2013 Isn\u2019t it amazing that we now can sit in our bed in the evening and write blog posts in the dark with dark mode turned on? And isn\u2019t it too good to be true to be able to adjust our designs to that preference?
I\u2019m sure I\u2019m forgetting a few things and you might have your own favorites, so feel free to reply with your own blog post. I\u2019m curious to see what features you can\u2019t live without anymore.
\n", "date_published": "2024-01-04T02:23:59+01:00", "date_modified": "2024-01-04T02:23:59+01:00", "author": { "name": "Matthias Ott" } }, { "id": "23021", "url": "https://matthiasott.com/notes/best-comment-section-on-the-internet", "title": "The Best Comment Section on the Internet", "content_html": "Matt Mullenweg, co-founder of WordPress and CEO of Automattic, recently sat down with Tim Ferriss to talk about a bunch of different things. One of those things: blogging.
\n\nIt might not come as a surprise, but Matt described blogging as one of the most rewarding things he did last year. Not only because blogging, or writing in general, forces you to clarify your thinking, or because publishing is such a vulnerable, scary, and thus brave act, but in particular because of what happens afterwards and how much you learn from it. All the comments, the interactions, the follow-ups that make blogging so beautiful.
\n\nThat was when Tim shared something he had noticed: that the discussions that used to happen in comments, have, for the most part, moved over to social media. Which is definitely something I noticed, too. So many blogs \u2013 even some big names \u2013 either have empty or neglected comment sections these days, or even none at all.
\n\nComments are tricky. You probably need to manage them to prevent annoying or nasty comments, spam, or SEO backlink posts. As Matt points out, by being very clear about what you allow in your comment section, you also set an example. You set the tone and the standard which people will follow. But even if you manage to do all that, how do you get people to comment on your site in the first place? Because when you in fact do get them, comments can be an invaluable and vital feedback mechanism.
\n\nSo, the question becomes:
\nHow could one create the best comment section on the internet?
The two briefly touch on that but mostly from the moderation perspective. Yet I feel like there is much more to it. The best comment section on the internet could, for example:
\n\nEspecially the last point seems worth exploring. Because if we not only want to bring back blogging but also create a thriving ecosystem of interconnected sites, combining comments on your sites with comments coming from other sources could be vital. Webmentions, for instance, currently still come in completely different flavors and most often, the snippet that gets displayed does not feel like a comment at all. Taken out of context like that, it is often not very useful if you don\u2019t want to visit the other site as well. What if we could change that and make at least the snippet more useful? Or, what if we combined likes of an article with real comments and so on and created a truly vibrant section \u2013 interesting, entertaining, and highly interactive?
\n\nComments used to be at the heart of the interactions that happened around blogs and personal sites. It\u2019s time to bring them \u2013 and the people \u2013 back to our sites.
\n\nWhat do you think? How should the best comment section on the internet look like? Does your site have comments? And what are the best comment sections you have come across? I'd love to hear your thoughts \u2013 ideally in a blog post. Because this site doesn't have comments yet\u2026
\n", "date_published": "2024-01-03T02:23:48+01:00", "date_modified": "2024-01-03T02:23:48+01:00", "author": { "name": "Matthias Ott" } }, { "id": "22900", "url": "https://matthiasott.com/notes/2024-the-year-of-the-personal-website", "title": "2024: The Year of the Personal Website", "content_html": "At the beginning of 2023, I wrote in a blog post which I titled The Year of the Personal Website:
\nIn the search for a permanent home on the web, more and more people are now rediscovering the personal website as a place to share and document their thoughts and publish their work. [I\u2019ve written at length before](https://matthiasott.com/articles/into-the-personal-website-verse) about why this is such a good idea: Your personal website is a place that provides immense creative freedom and control. It\u2019s a place to write, create, and share whatever you like, without the need to ask for anyone\u2019s permission. It is also the perfect place to explore and try new things, like different types of posts, different styles, and new web technologies. It is your playground, your platform, your personal corner on the Web.\r\n
So how about we make 2023 the year of the personal website? The year in which we launch our first site or redesign our old one, publish a little more often, and add RSS and Webmentions to our websites so that we can write posts back and forth. The year we make our sites more fussy, more quirky, and more personal. The year we document what we improved, share what we learned, and help each other getting started. The year we finally create a community of critical mass around all our personal websites. The year we take back our Web.
And, looking back at 2023, did we deliver?
\n\nYou bet. \ud83d\ude01
\n\nIt all started with articles like Bring back personal blogging by Monique Judge for The Verge or the Bring Back Blogging project by Ash Huang and Ryan Putnam, who encouraged us all to get into the habit and publish at least three blog posts until the end of January 2023.
\n\nThroughout the year, fueled by the further decay of Twitter and the ongoing reshuffling of power on the internet, heaps of us indeed rediscovered blogging and started tinkering with their sites again. It was a joy to follow this development and add more and more sites to my RSS reader. If you want to get a glimpse of the richness of posts people published this year, take a look at all the replies to this question I posted on Mastodon: what were your favorite blog posts of the year?
\n\nAll of this feels adventurous and exciting, but it also feels like we\u2019re just getting started. There is still so much we can improve on our existing sites and so much we can learn about making our sites a central part of our online identities. There are still so many tools to be created to improve the discoverability of sites and posts and to connect our sites to each other and to the Fediverse, for example. And there are still so many sites to be built and blog posts to be written and published. So, how about we make 2024 the year of the personal website again? And, for maximum consistency, every year that follows? How about, from now on, we make every year the year of the personal website \u2013 and make the internet human, creative, personal, and weird again?
\n\nHere\u2019s to a successful, healthy, playful, and fearless 2024. I can\u2019t wait to see what you create.
\n\n\ud83c\udf86\ud83d\udc9a\u270a
\nThis post first appeared in Issue 6 of Own Your Web, my newsletter about building and running personal websites and creating and publishing on the Web.
\n\nSign up here:
\n\ud83d\udc49 https://matthiasott.com/newsletter
It\u2019s not going well.
\n\nAfter all-time heat records were shattered worldwide during heat waves across all continents and ongoing wildfires eradicated 5 % of the entire forest area of Canada, 2023 will be the hottest year ever recorded (1.43\u00b0C above the 1850-1900 pre-industrial average to date). At the same time, it feels like nobody is really listening to the scientists who have been warning about the consequences of burning fossil fuels for decades. Greenhouse gas emissions are rising faster than ever, the fossil fuel industry is making record profits (I don\u2019t need to look for a link for that one, right?) and \u2013 despite all the greenwashing \u2013 is investing billions into new oil and gas projects. Meanwhile, governments in Germany and elsewhere are still subsidizing fossil fuels and even invested billions into gas and oil to prevent an energy crisis brought about by one of the world\u2019s major gas exporting countries by inflicting war on a neighboring country. And now, the highest German court has ruled a \u20ac60 billion climate fund unconstitutional, because reallocating unused debt from the COVID-19 pandemic for climate action and the green energy transition \u201cdoes not satisfy the constitutional requirements for emergency borrowing.\u201c Well\u2026
\n\nIt\u2019s not going well. There\u2019s no denying it.
\n\nBut there\u2019s also simply no alternative to rapidly changing our energy sectors, agriculture, housing, and transportation systems, if we want to avoid the most severe impacts of global warming. So what can we do? Repeat the warnings and share ever more depressing news about the growing impact of a rapidly changing climate? This did raise awareness for the problem in the past, but it also creates feelings of guilt and powerlessness, even in the most determined amongst us. Or, even worse, fear paralysis.
\n\nAs Jason Kottke writes, \u201cclimate scientist Kate Marvel is done warning people about the problems with our climate and has moved on to highlighting our success in combatting it.\u201d Why? Because, as grim as the outlook might seem, there are also lots of reasons to be optimistic:
\nAs a result, Portugal just ran on 100% renewable energy for six days in a row and China\u2019s CO2 emissions may be falling already, seven years ahead of their already ambitious schedule.
\n\nHumans are allergic to change. And, as Jeremy impressively demonstrated, we tend to overlook the changes that happen more gradually. We want the Big Bang, the sudden change, the headline that reads, \u201csuccessful nuclear fusion solves climate change for good.\u201d But that\u2019s (usually) not how change works. Change often happens gradually, first very slowly, and then, once it reaches a certain threshold, it can happen overnight. The future is already here, it\u2019s just not very evenly distributed yet. Another reason to be hopeful.
\n\nBut the most important reason is that humans thrive on stories. We need them to guide us. Stories, in particular shared stories within a group, unite us in our endeavors and lead the way when things get tough. And herein lies the power of the narrative that there is indeed a way forward, a way out of this mess into a more healthy and less deadly future. It works for everyone: Suddenly, being a climate activist doesn\u2019t mean to be against something or someone (okay, let\u2019s still be against fossil fuel companies). Suddenly, being a climate activist means being for something, rewarding your dopamine system with little steps towards a worthwhile goal: bringing about positive change now.
\nIt\u2019s not going well. But that\u2019s about to change.
\n", "date_published": "2023-11-22T00:23:29+01:00", "date_modified": "2023-11-22T00:23:29+01:00", "author": { "name": "Matthias Ott" } }, { "id": "22836", "url": "https://matthiasott.com/notes/no-borders", "title": "No Borders", "content_html": "Where were you in 2013 and what were you doing back then? What have you done over those last ten years? How have the last ten years changed your life, your work, or what\u2019s important to you? I don\u2019t know about you, but I definitely don\u2019t often pause to reflect about the past decade like that. Far too often, we are too busy and caught in the here and now.
\n\nNow, imagine you get asked by two conference organizers to not only reflect about the last ten years but to actually give a talk about what has changed for you over that time span. That\u2019s exactly what Joschi Kuphal and Marc Thiele did when they came up with the idea to organize a very special event: a ten-year anniversary edition of border:none. Same venue, same speakers, same price (30 \u20ac). Plus a second day and more speakers with a focus on diversity and inclusion.
\n\nAnd so, people got the rare opportunity to either talk about or listen to a very special collection of retrospectives and stories. Already after the first few talks, an interesting theme emerged: almost nobody gave a technical talk. Many even expressed a feeling of disillusionment with the state of the Web and the tech industry in general. Instead, people talked about very personal observations, journeys, struggles, and passions.
\n\nJay, for example, spoke about the monsters inside our heads that hold us back from inducing necessary change and how important it is to not stay silent in the face of lies and hate. Tobias shared a deeply personal story about how his family history lead him to always search for new communities while, deep down inside, never feeling quite at home. Bastian reflected on failure, the satisfaction that comes from building things, and the value of a sense of quality, trust, honesty, and happiness. And Rodney took us to where he found relief from not being able to think about nothing but work: up in the air, paragliding. \ud83e\udd2f
\n\nOur brains are wired to prioritize short-term problem solving (= survival) over long-term thinking. That\u2019s why we often end up sliding from one seemingly urgent task into the next without considering the long term implications of our actions. And before we know it, ten years have passed. Border:none 2023 demonstrated impressively that what truly matters in the end isn\u2019t how good you are at running in the hamster wheel. In hindsight, the things you will remember, the things you will be most proud of, are the things that brought you a sense of purpose, happiness, and belonging, as well as the moments when you took a risk or stood up for something. At the same time, the things you\u2019ll regret probably won\u2019t be the things you did as much as the things you didn\u2019t do.
\n\nAs Jeremy illustrated in his talk Of Time And the Web, it\u2019s easy to overlook the profound positive changes that can happen over larger timescales. Things we take for granted today, like the eradication of a disease like smallpox, are actually things that we would have considered \u201ctoo good to be true\u201d just a few years earlier. In much the same way, every little step we take, every decision we make, can add up to make a profound difference. Change is possible. It is on us to take the first steps, although we might have to step out of our comfort zone and the outcome might be uncertain. We all only get to play once, so we better play without fear and create something beautiful.
\n\nThen, there really are no borders.
\n\n~
\n\nPS: What border:none also showed me is how wonderful and replenishing it is to meet so many people again whom I can consider my friends now. It was amazing to see and talk to all of you. Thank you for creating this invaluable opportunity, Joschi and Marc! \u2764\ufe0f
\n", "date_published": "2023-10-30T01:33:00+01:00", "date_modified": "2023-10-30T12:04:32+01:00", "author": { "name": "Matthias Ott" } }, { "id": "22800", "url": "https://matthiasott.com/notes/my-new-newsletter-own-your-web", "title": "My New Newsletter: Own Your Web", "content_html": "I just sent out the first issue of my new newsletter Own Your Web.
\n\nOwn Your Web is a newsletter for anyone who wants to design, build, create, and publish on the Web. Every other week, I\u2019ll send out an email full of actionable insights, best practices, hacks, links, books, tools, and other high-quality insights I found or explored. Whether you want to get started with your own personal website or level up as a designer, developer, or independent creator working with the ever-changing material of the Web, this little email is for you.
\n\nHaving a personal website in 2023 is a superpower. It\u2019s a place to write, create, explore, and share whatever you like, without limitations. It\u2019s a playground to try out new things, tinker with new technologies, and build something beyond the ordinary. It\u2019s a tool to make yourself heard, to participate in online discourse, create community, and make new friends. And, it\u2019s a place to truly own your content and tell your story. It\u2019s your personal home on the Web.
\n\nBut while it is as easy as never before to get started with a personal site, is it, at the same time, harder than ever to handle the complexity that surrounds websites today. Which domain should you pick? Which tech stack, content management system, or platform is the right one? Or should you use a static site generator instead? What about frameworks? Do I need to learn JavaScript? How do I choose a typeface in less than a year\u2019s time? Which modern CSS features are safe to use? How can I make my site performant and accessible for everyone? To SEO or not to SEO? What are Webmentions? What\u2019s RSS? And, what the heck should I write about, after all?!?
\n\nAs you can see, there\u2019s no shortage of topics to cover in a newsletter like this one. \ud83d\ude09 My current plan therefore is that each issue will highlight one specific topic, idea, or question that we all run into at some point. But I\u2019ll always also include a tasty bunch of generally useful links that popped up in my feed reader.
\n\nIf that sounds like something you might enjoy, sign up for free here:
\n\n\ud83d\udc49 https://matthiasott.com/newsletter
\n\n\u2013
\n\nPS: If you are thinking about starting your own newsletter soon, have a look at Buttondown, the service I\u2019m using for Own Your Web. Setting up the newsletter was a breeze and Justin and team were quick to respond whenever I had questions. But what I enjoy the most is how easy it is to actually write your newsletter. You can write your email in plain markdown or, if you prefer that, in a rich text editor. To add images, you simply drag and drop them into your text. They will automatically get delivered via CDN. You can also configure your own sending (or even hosting) domain and there are numerous advanced features (depending on the plan), like automations, webhooks, tags, or an API to programmatically interact with your newsletter and subscribers. And, starting with the basic plan, you can customize your newsletter with your own HTML and CSS snippets.
\n\nIf you use the following link, you\u2019ll get $9 off of your first month of Buttondown. In return, I\u2019ll earn a commission that supports my newsletter. \ud83e\udd17
\n\nhttps://buttondown.email/refer/ownyourweb
\n", "date_published": "2023-10-22T09:07:00+02:00", "date_modified": "2023-10-22T09:11:34+02:00", "author": { "name": "Matthias Ott" } }, { "id": "22608", "url": "https://matthiasott.com/notes/my-favorite-mac-apps-in-2023", "title": "My Favorite Mac Apps in 2023", "content_html": "After three years, I finally replaced my old Intel MacBook Pro \u2013 and its cracked screen \u2013 with a new machine. I\u2019m still holding back a bit with my excitement for this 16-inch M1 Max MacBook Pro, just because I was really disappointed with my previous Mac. But thus far, it has been amazing. While I\u2019m writing this, I\u2019m sitting in bed, with the computer on my lap, and everything is running so smoothly and blazingly fast. This is as close as it gets to working at the speed of thought \u2013 and all this without any fan noise.
\n\nWhenever I get a new computer, I use it as an opportunity to start fresh. It\u2019s a bit like moving: you only take with you what you really need and want in your new home. That\u2019s why I also like to reevaluate which apps I use or don\u2019t use anymore and have a look at what other applications I could try to improve my setup. After all, that\u2019s part of the joy of setting up a new machine, right?
\n\nHere\u2019s a list of all the apps I installed on my Mac this time in addition to what\u2019s installed on a new Mac already. I might install more apps and I\u2019ll add them to this post later. I\u2019ll also leave out all the chat and video conferencing apps like Slack, Discord, Zoom, MS Teams, Skype, WebEx, and so forth. Also, it\u2019d be great to hear: which apps you can\u2019t live without on your Mac?
\n\nMy writing app of choice. \ud83d\ude0d iA Writer is where I jot down rough notes, write shitty first drafts, and finish my final posts. Everything is synched across my devices via iCloud so I can write and take notes whenever and wherever I want. I\u2019ve been using it for years now and can\u2019t imagine working without it.
\n\nRSS! RSS! RSS! (Almost) every day, I start the day by opening Reeder to see what all of you wrote on their personal sites. You\u2019ll find my OPML of personal sites here, by the way. The latest version of this neat RSS feed reader app even comes with sync via iCloud, so you don\u2019t need an additional service like Feedly anymore to save and sync your feeds.
\n\nIt took a bit getting used to Notion, because it offers so much flexibility in how you structure your documents and workspaces. But it has since become an invaluable tool for me to document and refine project information and workflows. Notion is like Confluence should be. ;) Notion is also completely free to get started.
\n\nIn case you want to try it, you can use this link to sign up, by which you\u2019ll also help support me and my content \ud83e\udd17: Get Notion
\n\nThings is the task management tool I use to organize my days and projects. It is available for Mac, iPhone (and Watch), and iPad and it is just great to be able to access your lists of lists from everywhere. Although I\u2019m not a practitioner of GTD (Getting Things Done) or any other productivity technique, I still use Things on a daily basis to keep track of the most important tasks.
\n\nI track my hours across all my clients projects (and, as of late, unpaid side projects) with Toggl. It works really well in the browser, but the mobile app has always been a pain to use, especially when it comes to entering times manually. I recently came across Timery, which provides a great UI on top of free or paid Toggl accounts. Thus far, it looks like it might enhance my time tracking experience a lot, especially on iOS.
\n\nCron is \u201cthe next-generation calendar for professionals and teams\u201d with an intuitive UI built for speed and I wanted to give it a try. It currently only works with Google Calendar, which might keep me from switching completely as my whole calendar is on iCloud at the moment. But we\u2019ll see how it goes.
\n\nI don\u2019t function without music. It\u2019s also my favorite productivity tool. \ud83d\ude09
\n\nRaycast is a launcher for MacOS. It replaces the default Spotlight search and lets you complete tasks, calculate (and you can hit \ufeff\u23ce to copy the result!), search, and, of course, open apps quickly. You can also install various extensions for tools like the Calendar, Shortcuts, GitHub, Notion, VS Code, Zoom, and many more. My personal favorite: the window management extension that lets you define keyboard shortcuts for all kinds of window positions.
\n\nA neat little tool to unpack all kinds of archives, from ZIP to RAR to Tar to 7z.
\n\nSometimes, your Mac just shouldn\u2019t go to sleep. In a workshop or while presenting or teaching online, for example. Amphetamine takes care of that.
\n\nJust like Little Snitch, Radio Silence is a firewall app that monitors your internet connection and shows you every network connection in real time. This way, you can quickly identify whenever an app wants to \u201cphone home\u201d and block it with a single slick.
\n\nAiko is a free app by Sindre Sorhus that provides high-quality transcription for audio files from meetings, lectures, podcasts, and more. It is powered by powered by OpenAI\u2019s Whisper model running locally on your device.
\n\nIf you\u2019re running online workshops or recording screencasts, it can be really helpful to display all your keystrokes in a corner of the screen. KeyCastr is a free, open-source utility that lets you do this.
\n\nPro Mouse is another useful utility when you\u2019re presenting or running workshops online. It puts a circle around your mouse pointer and lets you zoom in and even draw on the screen.
\n\nWell, it\u2019s VS Code. \u00af_(\u30c4)_/\u00af
\n\nTower is my Git client of choice. It\u2019s simple and a joy to use and makes some of the more advanced Git features easy to handle for people who don\u2019t like to do everything via the command line.
\n\nAnother Git client that some people recommended. I will give it a try and see how it does compared to Tower.
\n\nI still use SFTP regularly, and Transmit by Panic just gets the job done, fast and reliably, including rules (\u201cdon\u2019t upload .DS_Store files, please\u201d) and file sync.
\n\niTerm2 is a replacement for the macOS Terminal with great features like search and autocomplete.
\n\nSequel Ace is the \u201csequel\u201d to Sequel Pro. It\u2019s a fast, easy-to-use database management application for working with MySQL and MariaDB databases.
\n\nImageOptim is an open-source tool to dramatically reduce the size of images using modern image optimization tools and encoders. Invaluable if you care about web performance or need to stay within a certain file size budget with your images.
\n\nFor anyone working in the creative industry, Adobe\u2019s apps like Photoshop or Illustrator are indispensable tools and many of them are effectively industry standards. In my work with agencies, for example, I use Photoshop, Illustrator, and currently also Adobe XD on a daily basis.
\n\nMore and more agencies and clients of mine are using Figma, so that\u2019s obviously a must-have as well.
\n\nIf you\u2019re looking for design and photo editing software that is easy to use and not subscription-based, Affinity\u2019s apps might be for you. For \u20ac179.99, you\u2019ll get three powerful apps that run smoothly on Mac, Windows, and iPadOS. You can also try them out for free for 30 days.
\n\nRogue Amoeba\u2019s Loopback is an amazing, invaluable tool if you want full control over your audio workflow. With Loopback, you can combine audio coming from applications and audio input devices and turn them into as many virtual input or output devices as you need.
\n\nMy workshop setup also includes an ATEM Mini video switcher and ATEM Software Control lets me configure everything, including on-the-fly equalization of the microphone audio signal.
\n\nAn equalizer for macOS for more oomph! when listening to RTJ, Kendrick, etc.
\n\nReaper is a DAW (digital audio workstation) for recording, editing and producing audio. Ultraschall is a free extension for Reaper that turns the UI into an optimized podcast production environment.
\n\niZotope\u2019s audio plugins and software tools let you mix, repair, clean up, and improve your audio recordings.
\n\nHandBrake is a useful little open-source tool to convert video from nearly any format to a selection of modern, widely supported codecs and formats like MP4 or WebM.
\n\nUsed by Hollywood, Blackmagic\u2019s DaVinci Resolve is an all-in-one software for video editing, color correction, and motion graphics, much like Adobe Premiere or Apple\u2019s Final Cut Pro. With one key difference: it\u2019s free.
\n\n\u2615\ufe0e
\n\nAlright, that\u2019s the list for now. Let me know in the Webmentions below, for example by answering to this post on Mastodon, which apps you can\u2019t live without and make sure to subscribe via RSS for the next blog post. \ud83d\ude09
\n", "date_published": "2023-09-11T10:25:00+02:00", "date_modified": "2023-09-11T10:26:44+02:00", "author": { "name": "Matthias Ott" } }, { "id": "22306", "url": "https://matthiasott.com/notes/woff-has-left-the-building", "title": "WOFF Has Left the Building", "content_html": "In a recent project, the web fonts I bought and downloaded were only available as WOFF2 files. Staring in disbelief at the unpacked folder full of WOFF2 files, I wondered: Why did they not include WOFF files as well? Isn\u2019t WOFF still needed? Or is it finally time to ditch WOFF? At least building for the Web includes regularly reevaluating how you do things. So, I asked the people of Mastodon. The unanimous answer: It\u2019s WOFF2 or nothin\u2019!
\n\nI still vividly remember how a post by Zach at the end of 2016 made me abandon the \u201cbulletproof\u201d @font-face syntax that also included TTF, EOT, and SVG font formats in favor of a much-reduced version using only two font formats: WOFF2 and WOFF.
\n\nApparently, the web font world has changed once more and the new modern @font-face syntax now looks like this:
\n@font-face {\r\n\r\n font-family: \"Open Sans\";\r\n src: url(\"opensans.woff2\") format('woff2');\r\n\r\n}
\r\n
Pretty simple, right? Just one format.
\n\nAs Zach wrote in his article, \u201cgiven that web fonts for readable content fall back to system fonts when formats are not supported, it\u2019s ok to be progressive here.\u201d
\n\nWhich browsers are we sending into the dark lands of system fonts with this syntax?
\n\nAccording to Caniuse.com, almost 95 % of users have a browser with support for WOFF2 today. If you look at the date relative statistics, you\u2019ll notice that the major shift happened in 2015 and 2016. By the end of 2016, all major browsers supported WOFF2 in their latest versions. Seven years later, support has grown to a level where it seems totally fine to not include WOFF anymore \u2013 unless you know for a fact that a large percentage of your users is still using older devices and browsers. On the other hand, there is no reason to remove WOFF from already existing projects either. If you include WOFF2 before WOFF in your @font-face syntax \u2013 and the order really matters here \u2013, modern browsers will use and download the WOFF2 versions anyway.
\n\nBut if you find yourself sitting in front of your computer one day, staring at a folder full of only WOFF2 files, it is comforting to know that WOFF has indeed left the building.
\n", "date_published": "2023-09-07T10:16:00+02:00", "date_modified": "2023-09-07T19:35:39+02:00", "author": { "name": "Matthias Ott" } }, { "id": "22204", "url": "https://matthiasott.com/notes/pointing-fingers", "title": "Pointing Fingers", "content_html": "Regardless of which country and school system you grew up in, chances are you have heard this sentence at least once from one of your teachers. I, for one, remember my elementary school teacher rebuking pupils who were pointing at the lines of words in their books. And thirty years later, as my son just confirmed to me, this hasn\u2019t changed a bit. At a certain age, students are told to not read with their fingers anymore.
\n\nThe idea behind this is that fluent readers don\u2019t have to rely on their fingers anymore and that pointing will slow students down and prevent them from growing into fluent, expressive readers. So while almost all children learning to read will naturally use their fingers as training wheels to not lose focus and to stay in line, the same behavior is later often seen as an indicator for poor reading abilities and, sometimes, even a reason for concern. If little Jack can\u2019t read properly without using his index finger as a pointer, he probably has some reading difficulties, right?
\n\nImagine my astonishment, when I listened to an interview with Jim Kwik in which he said (I\u2019m paraphrasing):
\nWhat? \ud83e\udd2f
\n\nAnd indeed, as a quick online search revealed, this seems to be a well-known fact in the speed reading community, which I am \u2013 obviously \u2013 not a member of.
\n\nBut why does it work?
\n\nAs Jim explains, our brains are wired to detect and be attracted by movement. If anything moves in our field of view \u2013 let\u2019s take a saber-tooth tiger in a bush as an underused example, or a lightsaber, if you like \u2013 it is hard to not let your attention be grabbed by it. By using our finger, we force our brain to focus on the movement right in front of us. More focus means less distraction and this faster reading. Another reason is that our visual and tactile senses are closely linked. What does a baby do when you rattle with a key or a colorful toy in front of her eyes? She grabs for the toy. You can see and grab the thing? Now, that must be real.
\n\nAll this is also backed up by scientific studies: as one study by researchers at the University of Sydney showed, for example, finger tracing even makes learning in general easier and more motivating. Associate Professor Paul Ginns provides an additional explanation:
\n\n\u201cIt seems that humans are biologically wired so that we pay closer attention to the space near our hands. So, when using an index finger to trace visual stimuli, these elements of a lesson receive processing priority. Tracing can also assist learning because it \u2018chunks\u2019 all the important elements of new material into one piece of information, making it easier for us to learn.\u201d
\n\n", "date_published": "2023-08-31T23:08:00+02:00", "date_modified": "2023-09-07T10:16:53+02:00", "author": { "name": "Matthias Ott" } }, { "id": "22083", "url": "https://matthiasott.com/notes/good-riddance-gptbot", "title": "Good Riddance, GPTBot", "content_html": "Just like Google is constantly indexing the Web, OpenAI is now crawling the open Web to scrape content from websites for free to train their LLM (lucrative language model) \u201cAI\u201d products.
\n\nBut, as I learned from a post by Ethan on Mastodon, you can disallow GPTBot to get its tiny robot hands on your writing by adding those two lines of code to your website\u2019s robots.txt:
\nUser-agent: GPTBot\r\nDisallow: /\r\n
Good riddance, GPTBot! \ud83d\udc4b
\n", "date_published": "2023-08-09T23:14:00+02:00", "date_modified": "2023-08-10T09:20:05+02:00", "author": { "name": "Matthias Ott" } }, { "id": "21837", "url": "https://matthiasott.com/notes/the-new-css", "title": "The New CSS", "content_html": "Alright, let\u2019s write more about CSS! CSS! CSS!
\n\nI\u2019ve been writing CSS since the early 2000s, shortly after we ditched building web layouts with tables and spacer GIFs in favor of hacking our designs together with floats. CSS has since become my favorite programming language and, looking back on how the language has developed in all those years, one thing is certain: CSS is not the same anymore. The CSS we were writing in 2003 was different from the CSS we were writing ten years later in 2013. Fast forward another ten years, and the CSS we are writing today is again far more powerful but also far more complex than ever before.
\n\nThe fact that CSS has evolved isn\u2019t a huge revelation in the first place, of course. CSS, just like the Web, has always been changing. Remember the excitement, for example, when we first got to use properties like box-shadow, background-size, or border-radius?
\n\nIf you attended this year\u2019s CSS Day in Amsterdam, however, or watched the videos via the live stream, like I did, you might have noticed that this time, something feels different. This time, the changes coming to CSS are so fundamental on so many levels that it almost feels like a singularity. There is now the CSS before and the CSS after the early 2020s. Want to select the parent of an element? Not possible because of how the browser parses CSS? Well, now it is, with :has(). Want to adjust an element based on the dimensions of its container? Not possible because it might create endless loops? Well, it is now, thanks to container queries and the accompanying new length units. Each of those features in itself is an incredibly useful and long-awaited addition to CSS and the Web platform. Together with other modern features like custom properties, min(), max(), or clamp(), sizing keywords like min-content, max-content, and fit-content, you can create flexible and robust components and layouts like never before. The very foundations of how we understand and write CSS have changed radically.
\n\nBeyond all this, however, there is an even bigger and more fundamental shift happening that characterizes this new era of CSS:
\n\nCSS is now the most powerful design tool for the Web.
\n\nFor many, many years, creating high-quality websites largely meant that designers had to fight what felt like an uphill battle to somehow make their ideas work in browsers. At the same time, sentences like \u201cI\u2019m really sorry, but this solution you designed just can\u2019t be done with CSS\u201d became part of each developer\u2019s repertoire of standard answers. The pretty pictures designers envisioned (and got approval for from stakeholders) were often too advanced for the still maturing styling language. Creating killer websites meant understanding and working around the constraints and quirks of CSS.
\n\nSo the designers learned their lessons and started to create more compatible layouts, for example by using the average 12-column grid almost exclusively. The platform was the limiting factor.
\n\nThis has now changed to the opposite.
\n\nWant to emulate and confidently design a layout that leverages the potential of CSS Grid in any of the major design tools like Figma, Adobe XD, or Sketch? Not possible. Want to define a color in one of the wide gamut color spaces like OKLCH, which result in more vibrant and natural colors on modern screens, maybe by using a color picker? Not possible. You want to simulate fluid typography that dynamically scales font sizes based on the viewport or container size and also define minimum and maximum values like you can do it in CSS with clamp()? Not possible. Or how about defining a fallback font in case your web font doesn\u2019t load? Good luck using any screen design tool on the market. Not only are all of those things \u2013 very clearly \u2013 important design decisions, but they are also easily possible with just a few lines of CSS. In this new era of CSS, the design tools are now the limiting factor.
\n\nIn a talk I gave last year at CSS Caf\u00e9, I also talked about ways to close this growing gap between design tools and CSS. Closer collaboration, more prototyping, and more people engineering the design at the intersection of web design and development are just some of the things we can do. But all of this isn\u2019t easy and will take time. Some teams are already exploring and working in new, more connected ways. For others, it will be harder to break old habits.
\n\nWhat I expect to see overall is that the perception and thus the role of CSS in the design process will change from being mainly a presentational styling tool at the end of the waterfall to a tool that is being used at the heart of making design decisions early on. The value of a designer who knows how to prototype and build web components with modern CSS will therefore increase a lot. As a design engineering freelancer, I\u2019m noticing this already.
\n\nAfter his talk at CSS Day, Heydon got asked whether he thinks that designers should now learn CSS. He answered with the polite restraint and diplomatic prudence of someone who had (possibly) once broken the Large Hadron Collider. But his answer showed how CSS has already been understood and used by many people: as a design tool, a means to an end, a material to explore and work with. And, as a tool that lets you think and make decisions, at the center of the design process.
\nThis is the new CSS. The most powerful design tool for the Web ever. Only by using CSS, you can leverage what the platform is now capable of. Only by designing with the new CSS, you can create designs that flexibly adapt to different contexts and different types of content. Only by using the new CSS, you can build designs that are truly \u201cof the Web\u201d, materially honest, and elegantly efficient. Should designers learn CSS? As Heydon said:
\n", "date_published": "2023-06-18T23:29:00+02:00", "date_modified": "2023-06-19T18:59:54+02:00", "author": { "name": "Matthias Ott" } }, { "id": "21558", "url": "https://matthiasott.com/notes/writing-fragments-and-the-memex-method", "title": "Writing, Fragments, and the Memex Method", "content_html": "This piece by Cory Doctorow about blogging, which I read a few days ago, is exceptional. Why?
\n\nI already knew that blogging \u2013 and having a personal website in general \u2013 is a superpower.
\n\nI had heard before of Vannevar Bush\u2019s groundbreaking essay \u201cAs We May Think\u201d that directly inspired the invention of hypertext by Ted Nelson and Douglas Engelbart, which, in turn, had a huge influence on the WorldWideWeb project.
\n\nI also knew that a blog lets you document your thoughts and impressions in what can become an archive for your notes and a record of your experiences over time.
\n\nI knew that by sitting down and writing, your writing will inevitably improve.
\n\nAnd, I knew that some people are bad at writing regularly and that others \u2013 and that\u2019s why we like to call them \u201cwriters\u201d \u2013 aren\u2019t.
\n\nWhat Cory describes in his post, however, goes far beyond those individual ideas. He combines them into an approach to blogging that is maybe the most compelling and empowering reason to have a blog.
\n\nIt all starts with the idea that a blog isn\u2019t just a mere collection of notes in a Web-log. It is more than that because it involves one crucially important, magical act: publishing. Publishing our notes holds us as authors accountable, it forces us to shape our notes so that others will be able to make sense of them as well. Instead of quickly jotting down an incomplete fragment, we are forced to think about what it really is that makes the thought we are writing about so valuable. Why is it relevant? What is the essence of it? What is the best structure to convey that? What do we need to include to communicate it to someone reading our post? This, in turn, also makes it easier for ourselves to interpret our notes later. Instead of kidding ourselves into thinking that our future self will certainly be able to decode our dashed off notes, when we want to consult our record of collected memories, publishing our notes forces us to exercise care. As Cory writes: \u201cWriting for an audience keeps me honest.\u201d
\n\nThe second important realization is that blogging allows you to collect a vast amount of disparate fragments of information. Any thought, any link, any idea that you come across and that seems to be significant can be documented \u2013 including the context and why it seems important \u2013 and collected into your own personal \u201cMemex\u201d. That\u2019s the name Vannevar Bush picked in \u201cAs We May Think\u201d for his vision of a future device \u201cin which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.\u201d
\n\nAs a supplement to your memory, all those disparate notes sit there ready to suddenly merge into new ideas and turn into something bigger:
\nRick Rubin describes a similar creative process in his book \u201cThe Creative Act\u201d, which I recently listened to in the excellent audiobook version. His approach is to not limit his input at all, meaning that he curiously allows to enter his mind whatever draws his attention, regardless of whether it might seem relevant or \u201cuseless\u201d in his current situation. There is no such thing as useless information, because you never know which new ideas will emerge as a synthesis of all the individual fragments of creative input you were exposed to in the past. Limiting your input will limit the potential for new combinations to arise. Everything we see, do, think, feel, imagine, and experience is the source material, and from it, we build each creative moment.
\nThe thing is: This process isn\u2019t a science. The only thing we can do is to be curious, keep a record of the things we deem to be significant, and constantly look for clues pointing to new ideas, for fragments of thought suddenly turning into something bigger.
\n\nWhat does Cory Doctorow do when one of those \u201cnucleation events\u201d occurs? He uses the search and the tag-based filters built into his blog(s) to surface everything he has ever written about that subject. For one, to aide his memory, but also as a starting point for further research.
\nThere is just one piece missing in the puzzle for this \u201cMemex Method\u201d to work. Writing regularly. Daily, even. I know that many of us \u2013 including myself \u2013 often don\u2019t \u201cfind\u201d enough time to write. But here\u2019s the catch: writing every day isn\u2019t just an aspirational goal, it\u2019s a decision. You don\u2019t wait until you find some time to write or only write when you\u2019re kissed by the muse. No, you make the conscious decision to write every day, because that\u2019s what a writer does. Over time, your writing will improve, but more importantly, writing and filling your archive will turn into a habit.
\n\nWouldn\u2019t it be great to feel invincible because you\u2019re building an archive?
\n", "date_published": "2023-05-16T23:26:00+02:00", "date_modified": "2023-05-16T23:44:30+02:00", "author": { "name": "Matthias Ott" } }, { "id": "21409", "url": "https://matthiasott.com/notes/simple-truths-about-personal-websites", "title": "Simple Truths About Personal Websites", "content_html": "Nobody knows you.
\n\nYou are not entitled to anyone\u2019s attention.
\n\nBe respectful, be helpful, be kind.
\n\nYour personal website isn\u2019t a replacement for social media. It\u2019s much more than that.
\n\nWho is your site for?
\n\nDocument your life.
\n\nYour perspective matters.
\n\nCapture your thoughts.
\n\nShare what makes you lean forward.
\n\nUse RSS.
\n\nYou never know what sticks.
\n\nMake it easy to publish.
\n\nEnjoy the process.
\n\nThe adverb is not your friend.
\n\nTypography is everything.
\n\nYou will surprise yourself.
\n\nYou will grow.
\n\nBe curious. Be intentional.
\n\nThis is your playground. Play.
\n\nYour canvas is limitless.
\n\nSell the world.
\n\nHit publish.
\n\nIt\u2019s yours.
\n", "date_published": "2023-04-30T02:14:00+02:00", "date_modified": "2023-04-30T07:51:16+02:00", "author": { "name": "Matthias Ott" } }, { "id": "21265", "url": "https://matthiasott.com/notes/custom-properties-beyond-the-root", "title": "CSS Custom Properties Beyond the :root", "content_html": "\nIt\u2019s a great question: Everybody just seems to define most of their global custom properties (aka CSS variables) on the :root
selector without giving it a second thought \u2013 and so am I. But why :root
?
The answer is that there is no real reason. It\u2019s just a convention. Defining custom properties on the :root
selector might make them look a bit more like global variables, because :root
is the equivalent of the root element of your document. In HTML, this is the html
element. In SVG, it is the svg
element. But besides this potential gain of flexibility \u2013 in case you ever wanted to apply the same properties to different types of documents \u2013 there is no real technical benefit. You could just as well define all global custom properties on the body
element and they would still work exactly the same way.
Sure, you would need to write your JavaScript in a slightly different way, if you wanted to work with your custom properties in JS. Instead of accessing them via the document root element like this:
\ngetComputedStyle(document.documentElement).getPropertyValue(\"--color\")
\r\n
you would need to retrieve or set their values on the body element:
\ngetComputedStyle(document.body).getPropertyValue(\"--color\")
\r\n
But this also is just a matter of preference.
\n\nAlso, the fact that :root
has a higher specificity than html
might be interesting to know but also doesn\u2019t really make a difference in practice.
So yes, there seem to be no real differences between using :root
and body
. And therefore, using :root
, as it is the outermost element, seems to make the most sense. However, Manuel pointed me to the fact that because of how the CSS inheritance model works, using :root
does not always guarantee that a custom property is indeed inherited into all elements. It doesn\u2019t currently work for the ::backdrop
pseudo-element, for example, which is the element behind elements in full screen mode like
Regardless of those inconsistencies in inheritance and although we could also define them on
, using the:root
selector to define our global custom properties has become a common practice. But what\u2019s really interesting to me is that by using this convention, we also seem to have become a bit complacent in the way we use custom properties. Because defining most or all of your custom properties on :root
can also become a problem. Kevin Powell has written about this on CSS-Tricks: if you just use this single place for all your custom properties, you might be able to manage all the \u201csettings\u201d of your CSS in one place, but you will also lose a lot of flexibility. When building components, for example, it is important to design and code them in such a way that you can easily change the implementation or add or remove them without affecting the global code around them or even breaking other parts of the system. Globally defined local properties would make that a lot harder. There is just no reason to define local custom properties in :root
that actually belong to individual components.\n\nAs Lea Verou noted in her brilliant talk CSS Variable Secrets at CSS Day last year, we are also still not leveraging the full potential of custom properties when it comes to their depth, meaning how many properties inherit or include values from other properties. Or, to put it in another way, we don\u2019t put custom properties inside each other very often. One reason might be that we are still mostly treating CSS custom properties like constants. We mostly use them as replacements for fixed values that we only have to define in one central place, which often happens to be, you guessed it, :root
. Leaving this habit behind, however, and understanding that custom properties can do so much more is the key to unlocking their full potential.
To give you just one example derived from Lea\u2019s talk, you can use custom properties locally that are basically like private variables but based on a global variable. Sounds complicated?\nImagine a simple button component with a background color stored in a global custom property:
\n/* tokens.css */\r\n:root {\r\n\t--color: hsl(160, 100%, 75%);\r\n}\r\n\r\n/* button.css */\r\nbutton {\r\n background-color: var(--color);\r\n}
\r\n
This would work well in general and would also inherit the color value nicely into the button component. In a design system (or a modular website), this is exactly what you want. However, it is always a good idea to provide a fallback for custom properties, also because the component would then still work well even without the --color
property being defined. With a local custom property that is based on the global property but already has the fallback baked in, you maintain the flexibility of being able to manipulate the color from the outside of the component. At the same time, you make the implementation much more robust:
/* tokens.css */\r\n:root {\r\n\t--color: hsl(160, 100%, 75%);\r\n}\r\n\r\n/* button.css */\r\nbutton {\r\n --_color: var(--color, black)\r\n background-color: var(--_color);\r\n}
\r\n
If we now use the button component within a system that provides a --color
, the button has a background in the color we defined. If not, the component still works and uses the fallback color, black, instead. Inside of our component, we can use the local custom property (written with an underscore, again a convention) to define hover styles, borders, box-shadows, and more. And, we can still manipulate or set the --color
variable from the outside of our component without breaking it. As Lea puts it: CSS variables effectively allow us to create a higher-level styling API.
This is just one powerful example which shows that combining global with local properties can lead to much more flexible and robust CSS. So while it might be still a good idea to define your global custom properties on :root
as a best practice, also try to think beyond that. You can use CSS custom properties everywhere all at once.
Today, I started a new project with Kirby CMS. (No, it\u2019s not my personal site. That one\u2019s still brewing\u2026)
\n\nKirby is a lightweight, no-fuzz content management system (CMS) created by Bastian Allgeier, which works well for projects of any size. It is easy to install and amazing to work with in development, also because it adapts to the structure and size of your project and you can flexibly configure the interface of the backend, the Kirby Panel, accordingly.
\n\nKirby is a so-called flat file CMS, which means that in order to create the structure of your website (\u201capp\u201d) with all its subpages and routes etc., you basically create a folder structure and put text files or images inside of those folders. Kirby then pulls the content from those files and displays them. This speeds up the initial setup of the project structure a lot and also means that, if you want to, you can put all your content in the same Git repository you\u2019re using for the rest of your code. No database needed. The nice thing is: your team mates, clients, or content managers don\u2019t have to be as nerdy as you and can still use the Panel to add and edit content as well. As a developer, you get the full flexibility of writing your own templates and template snippets and you can use the many smart, built-in objects and methods to display and manipulate your content. Kirby has great docs, a rich plugin ecosystem, an API to interact with your site or access content, and it can also be used as a headless CMS. The team behind and the community around the CMS is lovely and always ready to support you via the Community Forum , which is already full of answers as well. One last thing: a lot of people seem to be prejudiced against PHP these days, so you will be delighted to learn that Kirby is based on PHP with all the robustness and broad support across the industry that comes with it. \ud83d\ude09
\n\nSo yes, as you might have noticed by now, I am a big fan of Kirby, especially because it allows you to solve common problems in a straightforward way, making my life as a designer and developer so much easier, but also because my clients have always been very happy with the content editing experience in the backend \u2013 without exception. Kirby enables successful projects.
\n\nBut it is not only really useful to build client projects. It also powers loads of personal websites and side projects. So if you are looking for a CMS that is fast as heck and a joy to work with, I\u2019d give it a try.
\n\nMy plan is to share a bit of my experience and process from this project and from building a few projects with Kirby in the past here on my site. I don\u2019t know which steps or learnings will make it into a post, but I\u2019d love to document a few crucial steps for myself and anyone who wants to build a site with Kirby.
\n\nIf there is anything that you would like to learn, let me know via a blog post of your own \u2013 and a Webmention \u2013 or on Mastodon. Although I certainly don\u2019t have all the answers, I might run into similar challenges and feel the urge to share how a solution could look like.
\n\nOh! Have you published a post, a tutorial, a plugin, or anything else that could be useful for the community? Let me know as well.
\n\nPS: My friend Manuel Matuzovi\u0107 is rebuilding his personal site with Kirby at the moment and shares his process and many useful tricks on how to build a modern, accessible website in short videos on Vimeo.
\n", "date_published": "2023-04-18T23:24:00+02:00", "date_modified": "2023-04-18T23:47:21+02:00", "author": { "name": "Matthias Ott" } }, { "id": "21144", "url": "https://matthiasott.com/notes/a-readme-template-with-an-automatically-generated-table-of-contents", "title": "A README Template \u2013 With an Automatically Generated Table of Contents", "content_html": "A while ago, I wrote about what you could include in a README file for a project. Based on this post and a few practical examples of READMEs, I created and published a template that I will use in my own projects going forward.
\n\nIt is available on GitHub: https://github.com/matthiasott/README-template
\n\nThe template might certainly change a bit over time. But as it is now, I think it includes the most important sections I might need in most projects. Because not every project is created equal, the idea is to just use what you need and delete the rest of the template. So in case you want to use it as a starting point, feel free to modify it \u2013 and also notify me about any improvements that could be made.
\n\nDepending on the size of your README, it might also make sense to also include a TOC, a Table of Contents, at the start of the file. You could create such a TOC manually, but I also found a neat little package called DocToc, that automatically creates such a TOC for you, including anchor links to the respective sections of your file. Actually, you can use DocToc to generate a table of contents not only for a README but for any kind of markdown file inside a local git repository.
\n\nYou install the package globally via npm (so Node.js and npm are a requirement):
\nnpm install -g doctoc
\r\n
You can then generate or update table of contents for all markdown files including all subfolders with the command
\ndoctoc .
\r\n
If you only want to generate or update a TOC in an individual file, you add the file name to the command:
\ndoctoc README.md
\r\n
By default, DocToc will create a TOC including anchor links using the GitHub markdown parser. But you can also tell it to create compatible links in the style of Bitbucket, Gitlab, or Ghost, for example, by using a flag:
\ndoctoc README.md --bitbucket
\r\n
If you want to specify where in your README DocToc adds the table of contents, you can place two lines of comments in your files and DocToc will place (and update) your TOC at this position:
\n<!-- START doctoc -->\r\n<!-- END doctoc -->
\r\n
You can even specify a title for the TOC with the --title
option:
doctoc --title '**Table of Contents**'
\r\n
So, in my case, I used this command to automatically generate the table of contents for my README template:
\ndoctoc README.md --title '## Table of Contents'
\r\n
Now, every time I need to update the TOC, I run DocToc and it will automatically update all items, titles, and links. Nice!
\n\nJust a quick addition: While doing a bit more research for a good README structure, I also stumbled upon a handy editor made by Katherine Oelsner. Readme.so lets you create an individual README by adding sections from a list of snippets. You just select the sections you want to include in your README, rearrange them via drag and drop if needed, adjust the text, and download your template. A nice and easy way to create your README as well, especially if none of your projects is like the other and a rigid template structure therefore wouldn\u2019t make much sense.
\n", "date_published": "2023-04-11T16:28:00+02:00", "date_modified": "2023-04-11T16:31:11+02:00", "author": { "name": "Matthias Ott" } }, { "id": "21030", "url": "https://matthiasott.com/notes/how-i-write-blog-posts", "title": "How I (Usually) Write Blog Posts", "content_html": "Manuel shared how he approaches writing and publishing blog posts on his personal site. If you follow him, and especially if his RSS feed is on your list of feeds, you know that Manuel indeed does put out a lot of posts. Just recently, he completed 100 posts about more or less modern CSS, so his process certainly works for him.
\n\nWhat works for some people might not work for others. So if you struggle to put out blog posts, Manuel\u2019s approach might work well for you or also not work at all. But there are a few things he mentions that are, in my experience, key if you want to publish posts more easily. For example, he does not care about the details too much, particularly early in the process. This keeps the friction low and it keeps you going. It maintains momentum. This includes that he doesn\u2019t care about typos, correct sentence structure, or anything else that people might call \u201ca mistake\u201d. Separating a quick, messy research and drafting phase and a final writing phase also makes writing much easier because you already know what you want to write about.
\n\nMy usual process is somewhat similar. I also collect all the stuff I can find \u2013 links, examples, own thoughts \u2013 in a very messy and rough way in iA Writer in a markdown file in my drafts folder. Sometimes I have nothing but a first idea or a post title. Sometimes I\u2019ll write down a few keywords and paste a bunch of links into the document, sometimes I\u2019ll write a few sentences with key points, and sometimes even a few paragraphs. This really depends on the topic and my form of the day. \ud83d\ude09 It helps if this input collection phase is short and, for example, done in just one hour or throughout a day. For some posts, I might also collect ideas and links for several weeks.
\n\nI then write most of the shitty first draft of the post, usually in one go, and I also don\u2019t fiddle around with the sentences and grammar yet. There might also be a bit of German in there when I can\u2019t find the right word for something immediately. This first version of your post is not about getting it right. It\u2019s about getting it out. And knowing that you don\u2019t need to get it right at the first try gives you an immense amount of freedom. It permits you to write freely and without pressure. By the way: not putting pressure on yourself also means that if you have a great idea for a sentence or happen to write a paragraph in one go that is just right, you are, of course, allowed to polish it a little right away. The important thing is just to not lose the flow and keep going until the end of the post.
\n\nAfter writing this first draft, I go through the post with my \u201ceditor self\u201d, often on the next day with a clear mind and bit of distance. It is amazing how different a post can feel after a good night of sleep. I now try to cut out all the unnecessary stuff. I read the post out loud and imagine that I\u2019m reading it for the very first time. Is everything clear and concise? Do the sentences connect? Could I add a few headings to make the structure of the text more clear? Does the main point come across? Are the code samples fine? It the title good?
\n\nWhat is important in this phase is that you don\u2019t confuse the editor in you with the inner critic. As Rick Rubin writes in his book \u201cThe Creative Act\u201d, the inner critic doubts the work and undermines it, while \u201cthe editor steps back, views the work holistically, and supports its full potential.\u201d
\n\nThe last important step is to not overdo it with the fine-tuning of the post. As Chris Coyier said, \u201cwe\u2019re not shootin\u2019 for the Pulitzer over here\u201d. So, at some point, I ignore the voice in my head that tells me that I could still improve the post further, move the text over to Craft CMS to look at it in preview mode, and, ultimately, hit publish.
\n\nHow do I know that a post is ready? I have no clue. I think there is a sense of completeness that can be felt, the feeling that while you could hone the details forever, it would not make the post any better. And you also can\u2019t really add or remove something without making the piece worse. That feeling often comes out of a sudden. Just seconds ago, a post might have felt unfinished. You change just one little detail and, suddenly, it\u2019s done.
\n\nAfter publishing it on my site, I always read the post one last time. And almost every time, I will find something that I overlooked. A missing link, a typo, whatever it is \u2013 that last check is always worth it.
\n\nWhat is your process of writing blog posts? I\u2019d love to hear what works for you. Maybe in a blog post in response to this one?
\n", "date_published": "2023-04-07T17:44:34+02:00", "date_modified": "2023-04-07T17:44:34+02:00", "author": { "name": "Matthias Ott" } }, { "id": "20989", "url": "https://matthiasott.com/notes/how-to-readme", "title": "How To README", "content_html": "Solid documentation of a project is important, especially if you\u2019re working in a team. When all information about how to install, deploy, or contribute to a project is buried in only one person\u2019s brain, you\u2019re in trouble once you have to make changes and that person is on vacation or has even left the team. So, a README file at the root of your project is not only your friend, it\u2019s essential.
\n\nBut what information should you put into the README of, let\u2019s say, a website project? I\u2019ve seen (and written) quite a few short and incomplete READMEs, so coming up with a good one surely is an art in itself.
\n\nThe answer is, as always: it depends. It depends on the project itself, the team size, or the time and budget you have. So there really is no right or wrong here. There are, however, a few things almost every README has. Here\u2019s a list of things you might consider to include:
\n\nWhat is this project about? What does the project do? Why is it useful? What problem does it solve? Who is it for?
\n\nHow do you install the project and what do you need for it? Mention all dependencies that need to be installed first. Ideally, you also provide version numbers. (I\u2019m looking at you, Node.js\u2026)
\n\nInstructions for how to configure, run, and use the project. For example, you can include the commands needed to start the development environment or any other useful and important commands.
\n\nInstructions for how to deploy the project to a production environment, including any server requirements and commands used. And, in case you are using a CI/CD pipeline, for example, how do any automated processes work?
\n\nAny unit or integration tests people can run to assure that everything\u2019s working as expected? Any frameworks or commands that are needed here? And are there any tests in your deployment pipeline that ensure that no errors make it into the live site?
\n\nOften overlooked, but so important: how do you contribute to the project? Are there any guidelines you should adhere to, for example, related to the coding syntax? But also: how is the approval process? Do people commit their changes to Git branches? Do they write pull requests? Who can merge and push, and so on? And who is the point of contact for the project in case you have questions?
\n\nIf applicable, and especially if the project is publicly available, provide license information.
\n\nWhat are you planning to add in the future? Any known bugs or missing features?
\n\nWhat did change with which version?
\n\nIf people helped to build the project or provided useful contributions like features or bug fixes, or also if your project is built on other people\u2019s open source code, mention them and \u2013 thank them!
\n\n~
\n\nI\u2019m sure that I\u2019m still missing some things. So if there is anything you would add, write a quick response blog post. ;) But whatever you include in your next README (template?), keep in mind that a good README is concise, complete, and up to date. It doesn\u2019t necessarily have to be short. If there\u2019s a lot to say and know about a project, then write it down. But always have the people in mind who will read the file. Keep it as short and simple as possible and also consider that not everyone might know what you know. So better include a few bits of information or links too many to make sure everyone will be able to get started and successfully work with your project.
\n\nFor more useful tips and resources about READMEs, also have a look at the GitHub docs, this article by Binyamin Green, Make a README, and Awesome READMEs.
\n", "date_published": "2023-03-23T00:32:00+01:00", "date_modified": "2023-03-23T00:33:34+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20967", "url": "https://matthiasott.com/notes/synthe-size-me", "title": "Synthe Size Me", "content_html": "Leonie Watson just shared an interesting audio snippet on Mastodon:
\n\nhttps://front-end.social/@tink/110007014963441869
\n\nWhat sounds like her speaking about accessibility is actually not Leonie, but an AI-generated synthetic voice, a cloned version of Leonie\u2019s voice based on audio training data.
\n\nI was aware of the fact that speech synthesis is getting much better and that machine learning plays a big role in synthetic voices sounding more realistic, for example by adding modulation, variation, and emotion. But when you listen to some of the samples of the voices on play.ht, it is astonishing to see just how accurate and realistic those voices, and especially cloned voices, have become. It is now almost impossible to distinguish a human speaker from a synthetic voice. Mind-blowing and, at the same time, scary and full of potential for misuse.
\n\nFirst of all, this is an amazing thing for everyone who, like Leonie, uses assistive technology to browse the Web, read content, and who interacts with any other kind of user interface that is based on audio output. Listening to robotic, unemotional voices everywhere isn\u2019t fun. So imagine how beautiful the Web suddenly sounds once you let a warm, gentle, human-sounding voice \u2013 or maybe even a familiar voice like your very own \u2013 read the content for you. Imagine a chat where the voices of many contacts will be synthesized so that not only people reading messages visually will, very literally, hear the other person\u2019s voice in their head without the distracting artificial charm of Siri. Or imagine someone visiting your website and, if they like, they can listen to an audio version of all the posts you ever wrote \u2013 read by you. Or you \u2013 no, everyone! \u2013 speaking every language fluently in business calls. You can already use tools like resemble.ai to clone a voice based on three minutes of data and use an API to integrate that voice into whatever you\u2019re building.
\n\nBut I\u2019m sure that by now, you\u2019ve also thought about a bunch of not to desirable futures. Voice bots calling you in the middle of the night, trying to sell you an insurance (okay, this is already happening). Scammers calling your grandma. People canceling your orders or placing new ones on your behalf. Artists getting their voices pirated and used to create an endless stream of sameness. Basically everyone could be stealing and remixing each other\u2019s voices, because they\u2019re up for grabs. Prank\u2019d!
\n\n(Related: I\u2019m now pretty sure that my descendants will have a fully interactive virtual version of me in some kind of app that they can open whenever they miss me\u2026)
\n\nAll of this will happen in some way or another. But with all things related to \u201cAI\u201d, it\u2019s on us to decide which future we want to create.
\n", "date_published": "2023-03-12T22:53:00+01:00", "date_modified": "2023-03-12T22:56:26+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20942", "url": "https://matthiasott.com/notes/dig-deeper", "title": "Dig Deeper", "content_html": "After about a year of living in our new home, after waiting for our neighbors to finish their driveway (life lesson: don\u2019t expect gratitude from strangers), after our wholehearted horticulturist recovered from an acute illness, and after thaw had set in in the southwestern part of Germany, the circumstances finally were ideal for the ground work on our garden to begin.
\n\nMy humble role in it: digging a whole between the sidewalk and our front door for the bushes. Not necessarily those typically German bushes that grow into a beautiful, thick hedge, but still large enough to keep the kids from running into the street or to (hopefully) impress a few Swabian SUV drivers to not use the sidewalk for a little sidestep. The latter won\u2019t happen, I know. It\u2019s just to keep us motivated.
\n\nSo I dug a pit. About 50 centimeters deep. Beautiful. Impressive, even, to the amateur craftsman. But then, the crucial question: is it deep enough? Didn\u2019t our horticulturist say that about 50\u201370 centimeters should be enough? But it\u2019s a narrow pit, so\u2026 On the other hand, our (friendly) neighbors tell me that their whole in the ground wasn\u2019t much deeper. And look at their tree back there, it clearly has enough fertile soil to, one day, grow into a huge, magnificent\u2026 does it, though?
\n\nAfter pondering about it for a little while, I gave in and stopped digging. 50 centimeters should do it. Also, my back and my arms hurt. Time to call it a day. It\u2019s Saturday and my football (\u26bd\ufe0f) team won.
\n\nBut during the evening and the whole Sunday, that nagging feeling remained. What if 50 centimeters\u2026 ah, come on, that\u2019s plenty! I dug like a pro!
\n\nThe horticulturist (what a lovely word) arrives.
\n\n\u201cOh, I see you were busy! That should do it. The bushes won\u2019t grow very tall and you\u2019ll probably need a bit more fertilizer, but it\u2019s okay.\u201d
\n\n\u201cBut what if we want beautiful, healthy plants?\u201d
\nSo that\u2019s what I did today. 20 more centimeters.
\n\nSometimes, it\u2019s better to trust that gut feeling that tells you that if you don\u2019t want to half-ass it, you need to go a little further.
\n\nAnd sometimes, you just need someone who tells you to dig deeper.
\n", "date_published": "2023-02-20T23:50:00+01:00", "date_modified": "2023-02-21T00:28:43+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20873", "url": "https://matthiasott.com/notes/expand-and-stabilize-explore-and-craft", "title": "Expand and Stabilize, Explore and Craft", "content_html": "Dave wrote about what he calls The Feature Work \u2192 Maintenance Work Loop: he often finds himself working in cycles of Feature Work and Maintenance Work, \u201cbalancing the growth and health of a product with a cycle of building and repairing\u201d.
\n\nI\u2019ve noticed the same both in design and development work. There are phases in all creative work where we go broad, where we explore new ideas, concepts, or features, where we create lots of layout variations or build prototypes. This work is about the broad strokes, about expansion, discovery, and play. It is is then often followed by a phase of refinement, of fine-tuning the details, selecting the pieces we want to continue with and throwing out the superfluous. But it can also be about maintenance, taking care of a design system or a code base and improving what\u2019s there to be able to move efficiently again.
\n\nRick Rubin talks about very similar phases in his latest book The Creative Act. In the experimentation phase it is all about growth, about generating possibilities, and discovering which creative seeds have the most potential.
\nIn the crafting phase that follows, we start with the labor of building out what has revealed itself as the best way forward. You might feel less excited about this phase because it can be daunting and is often less glamorous. But, as Rubin notes:
\nSo if you feel like this crafting phase is less enthralling, remember that it is equally important as the exploration phase for the final result. It might, as Rubin writes, help to think of it as another opportunity to play. Just that this time, you\u2019re playing at a much more fine-grained, more intricate level. You\u2019re now in control over the details. If you put love and care into this phase, it can be clearly recognized in the final work. Or, in the words of Charles Eames:
\n", "date_published": "2023-02-18T23:26:16+01:00", "date_modified": "2023-02-18T23:26:17+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20803", "url": "https://matthiasott.com/notes/web-push-it-real-good", "title": "Web Push It Real Good", "content_html": "Let\u2019s call it what it is: Progressive Web Apps (PWAs) were a great idea full of potential but they never really caught on. One reason for that was that although you could add any website to the Home Screen in Apple\u2019s iOS, it always felt like nothing more but a fancy bookmark. Your PWA would get a nice app icon and open immediately, but it had no access to crucial system level features like notifications.
\n\nThis changed yesterday with the release of iOS and iPadOS 16.4 beta 1. What nobody would have deemed possible for years finally happened: Apple added support for Web Push to home screen web apps. Developers can now use the Push API, Notifications API, and Service Workers to send system notifications after asking for permission. Those notifications will work exactly like other app notifications. They will show up in places like your Lock Screen or in Notification Center and you control them via the system settings.
\n\nOne more thing\u2026
\n\niOS and iPadOS 16.4 will also add support for the Screen Wake Lock API, the Screen Orientation API, the User Activation API, and Web Codecs API video support.
\n\nThe Web platform always wins.
\n", "date_published": "2023-02-17T22:46:00+01:00", "date_modified": "2023-02-17T22:47:15+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20797", "url": "https://matthiasott.com/notes/css-speech-module-level-1", "title": "CSS Speech Module Level 1", "content_html": "As I noted yesterday, screen readers don\u2019t convey the semantics of many HTML elements like strong
or em
.
When I shared my post on Mastodon, St\u00e9phane Deschamps chimed in and pointed to an promising candidate recommendation fresh from the press that might give authors much more control over how screen readers handle their content: CSS Speech Module Level 1.
\n\nPlease bear in mind that this is still only a so-called W3C Candidate Recommendation Draft. This means that it is not a standard (yet), nothing of this is available in any browser as of today, and a lot of things might still change before any browser implements any of those features.
\n\nStill, it is worth to have a first look at what is being discussed at the W3C. And because the process is quite open these days, you can also provide feedback if you want.
\n\nReading through the document, you\u2019ll encounter a few really exciting properties that might one day find their way into CSS.
\n\nThe voice-volume
property, for example, allows authors to control the volume level of the speech synthesizer with keywords like \u2018x-soft\u2019, \u2018soft\u2019, \u2018medium\u2019, \u2018loud\u2019, \u2018x-loud\u2019 \u2013 or adjust the volume by a certain decibel value.
With the speak
property, you\u2019ll be able to declare whether or not a piece of text should be read at all using keywords like \u2018auto\u2019, \u2018never\u2019, or \u2018always\u2019.
Where it gets really interesting is the speak-as
property. With the \u2018spell-out\u2019 keyword, text will be spelled one letter at a time. \u2018digits\u2019 will make the screen reader speak numbers one digit at a time. And with \u2018literal-punctuation\u2019 or \u2018no-punctuation\u2019, you can control whether or not semicolons, braces, and so on are named aloud. Really useful, not only for product, brand, or band names.
There are many more interesting properties that let you insert pauses, for example, or playback auditory cues before or after an element. And you will even be able to adjust voice characteristics like age or gender with the voice-family
property and the voice-rate
at which voice is spoken in words per minute.
Overall, this looks like a really exciting new draft of a document of which the first version, as I realized, was published more than ten years ago. It is great to see that editors like L\u00e9onie Watson and Elika Etemad (fantasai) are now working on this again. Let\u2019s hope that this time, also with the growing awareness for accessibility in Corporate America and the EU, enough momentum can be gained so that many of those properties make it into browsers as soon as possible.
\n", "date_published": "2023-02-17T22:15:53+01:00", "date_modified": "2023-02-17T22:15:53+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20763", "url": "https://matthiasott.com/notes/screen-readers-semantics-strong-em", "title": "Screen Readers Don\u2019t Convey the Semantics of STRONG and EM", "content_html": "I always was under the impression that if I add emphasis to a piece of text in HTML by adding an em
or a strong
element, this emphasis would also be indicated to screen reader users in some way. For example, by a change of the tone of voice, much like if you are reading a text out aloud and add emphasis to a certain word by speaking slightly louder.
It turns out that this is not the case at all. As Steve Faulkner recently documented (again), none of the most commonly used screen readers like VoiceOver, JAWS, or NVDA convey the text semantics of those elements to users. And they also don\u2019t expose em
or strong
element role semantics in the accessibility tree.
At first, I was kind of disappointed to hear that. Isn\u2019t emphasis an important part of the design? Isn\u2019t this the reason we are writing semantic HTML in the first place? But honestly, the explanation as to why NVDA, which supported it for a while, even removed support again reads more than plausible:
\nDoes this mean that you don\u2019t need to use semantic elements to convey emphasis? Of course not. You never know where the semantics still matter. And it is also just the right way to indicate emphasis in HTML for the majority of users. But it is nevertheless interesting and important to know that screen readers don\u2019t care by default.
\n", "date_published": "2023-02-16T14:36:00+01:00", "date_modified": "2023-02-16T14:39:24+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20740", "url": "https://matthiasott.com/notes/uncontainable-container-query-excitement", "title": "Uncontainable Container Query Excitement", "content_html": "CSS Container Queries are now available in all major browsers. \ud83e\udd73 With the release of Firefox 110 yesterday, the stable versions of Chrome, Safari, Edge, and Firefox all support them. There have been many major additions to CSS in recent years, but this one is definitely one of the most impactful game changers. Being able to use not only features of the browser viewport but the dimensions (or other characteristics) of individual containers to change our layouts will once more fundamentally change the way we create responsive and even more flexible layouts on the Web.
\n\nDuring work on the spec, the syntax for Container Queries changed several times. This is also why I held back on writing a longer post exploring container queries in the past. Now, however, the syntax for size queries and units is stable and you can start to use Container Queries in production. So make sure that you use the correct syntax \u2013 Miriam has written about this \u2013 and that you progressively enhance your layout, of course, so that people with older browsers (which will still be the majority of users for a little bit of time) get a solid baseline experience.
\n\nI personally can\u2019t wait to use them more often from now on and I\u2019m sure that if you keep your eyes open, opportunities to effectively apply container queries will surface everywhere, just as with :has(). And particularly because they work so well on smaller elements, I\u2019m quite sure that there will be plenty of ways to also use them without breaking our layouts in older browsers.
\n\nAnd I also can\u2019t wait to see all your demos and best practices emerge. \ud83c\udf89
\n\n~
\n\nHere are a few fantastic posts and examples to get you started:
\n\nDay 56: container queries, by Manuel Matuzovi\u0107
\nhttps://www.matuzo.at/blog/2022/100daysof-day56/
Use the Right Container Query Syntax, by Miriam Suzanne
\nhttps://www.oddbird.net/2022/08/18/cq-syntax/
A Primer On CSS Container Queries, by Stephanie Eckles
\nhttps://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/
CSS container queries are finally here, by Ahmad Shadeed
\nhttps://ishadeed.com/article/container-queries-are-finally-here/
A CodePen collection of container query examples by Miriam Suzanne
\nhttps://codepen.io/collection/XQrgJo
I want to start a little experiment: I want to see if I can reduce my TTFB, which is, of course, short for \u201ctime to fresh blogpost\u201d.
\n\nWhy? Because I think this is something where I can still improve a lot. Although I am aware that a few of you are indeed reading my posts and that this comes with some responsibility, I now also know that there really is no bar for a blog post. And although I\u2019ll always strive to write useful things, I\u2019ve reached a point where I think that writing about more things faster is actually a worthwhile goal. The more ideas you put out into the world, the larger the surface for those ideas to connect, interact, and flourish.
\n\nOne thing that keeps me from publishing more is that I (still) fiddle around with many posts for too long. There is a time for perfecting a post and going really deep, don\u2019t get me wrong. On the Web, however, it\u2019s smart to save this polishing for the pieces you love the most. For the rest, the most important thing is that you hit publish.
\n\nSo, here is the challenge: Each day, I\u2019ll write about something for no more than half an hour. 30 minutes. If I am faster than that, fine. If not, then\u2026 I don\u2019t know, haha. Maybe I\u2019ll publish the post anyway \u2013 unfinished? For how long do I want to do this? I have no idea, either. Looks like I still have to think about a few details, but hey \u2013 I just finished the first post.
\n", "date_published": "2023-02-14T23:57:45+01:00", "date_modified": "2023-02-14T23:57:45+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20665", "url": "https://matthiasott.com/notes/streams-of-consciousness", "title": "Streams of Consciousness", "content_html": "Jeremy wrote a little something about streams, in particular about streams on personal websites. His home page actually is like a stream: links, notes, and blog posts all appear underneath each other in chronological order.
\n\nMany of us are now rediscovering or reviving their personal sites, not only because the demise of Twitter has made it abundantly clear that we need to shift our attention away from large social media silos when we share our ideas, thoughts, and ramblings online. Our personal sites are the perfect home for all those personal bits and pieces. All those short and long-form posts, notes, thoughts, photos, links, but also just little things we notice in our world, things we learn, and things that excite us \u2013 they all belong on our personal websites first. So if you were asking yourself what you should post on your site, the correct answer is, of course, \u201ceverything you want\u201d. Your personal site is your home on the Web. It is your playground but it is also a very subjective and individual account of all the things you think and care about. All the things that happen in your head. And on your home page, it can all come together in one large stream of different kinds of posts.
\n\nYou could even think of this home stream as what in literature is called a \u201cstream of consciousness\u201d: a constant stream of the multitudinous thoughts and feelings which pass through the mind of a narrator. Your website is a way for you to share your stream of consciousness, that temporary and subjective and highly biased snippet of the universe, with everyone else, including your future self. In all its multitudes.
\n\nIf you look at my home page, you can see that I haven\u2019t yet turned it into a stream. It almost looks like I haven\u2019t posted anything since 2019. This wasn\u2019t a conscious decision and it is something that I am going to change in the process of redesigning my site this year. And I couldn\u2019t agree more to what Jeremy wrote. If your home stream looks like a collection of posts that all look visually distinct, more \u201clike a chaotic second-hand bookstore\u201d, it will be much closer to who you and your unpolished stream of consciousness actually are. It will make your site more personal and, if you want future visitors to be able to tell the difference between you and an AI, more human.
\n", "date_published": "2023-02-11T00:45:24+01:00", "date_modified": "2023-02-11T00:45:24+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20589", "url": "https://matthiasott.com/notes/reflections", "title": "Reflections", "content_html": "A lot of us are still working from home these days. Many are in meetings every day, more and more people are holding important customer presentations or running workshops from their little home office, and some are even joining podcasts and online meetups as guests, or are starting their own video channels or video courses.
\n\nNaturally, high-quality sound is something to think about. It might even be the most important part of your appearance, even more crucial than good video and lighting. So we might buy better microphones or treat out rooms with foam or, way way better, absorbing sound panels.
\n\nThere is, however, one little detail that many noobs \u2013 me included \u2013 tend to forget about but which makes a huge difference in how our recordings sound, even (or especially) with the best of microphones: the reflective surfaces right in front of you.
\n\nIf you have the feeling (or recorded proof) that your microphone picks up a lot of boomy reflections, consider adjusting the position so that it faces more away from your desk or computer monitors. As Bandrew demonstrates in this plain and simple explainer video, this tiny change can make a huge difference!
\n\nAnd it might even save you a bit of money, as well. Boom! (Sorry.)
\n", "date_published": "2023-02-08T00:58:00+01:00", "date_modified": "2023-02-08T01:04:27+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20563", "url": "https://matthiasott.com/notes/analytics-analysis", "title": "Analytics Analysis", "content_html": "When it comes to tracking and analyzing a website\u2018s traffic, Google Analytics (GA) seems to be the obvious choice: everyone knows it, it\u2019s powerful, it\u2019s free, it\u2019s used by millions of sites. 53 % of sites worldwide, to be precise. No wonder many clients ask for it and many people who build websites willingly add it to the sites they build and sell.
\n\nThere are, however, a lot of downsides that come with using GA. And some of them are actually real downers. Using GA can be bad for the performance of your site, you are giving all the stats about your site to the largest ad-tech firm in the world for free (that companies readily do this still blows my mind), and most people will never use it for more than to occasionally access a few (often partially inaccurate) stats, also lacking any proper strategy on which insights they really want to collect and how to translate those insights into real action. The most daunting drawbacks, however, are related to privacy and regulations like GDPR. When you add GA to a site, it will transfer personal information to Google, so you not only have to adjust your privacy policy accordingly but also obtain consent from your users. The same goes for the cookies that GA stores on your users\u2019 machines. Using GA means that your site needs a cookie consent banner \u2013 lovely!
\n\nLooks like there are many good reasons to look for alternatives to Google Analytics. And thankfully, there are quite a few these days, many of which not only provide a nice set of features but are also privacy-focused and often even cookie-free.
\n\nHere\u2019s a short list of some interesting options. Many of them were suggested to me by all the lovely people who replied to a post of mine on Mastodon. By the way: if you ask a question on Mastodon, you\u2019ll receive so many helpful answers \u2013 it\u2019s wild! Imagine Twitter but with real human interaction.
\n\n\n\nAlso, Pelle shared a link to a longer list of European alternatives to GA.
\n", "date_published": "2023-02-07T23:20:00+01:00", "date_modified": "2023-02-08T01:04:41+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20518", "url": "https://matthiasott.com/notes/tapetenwechsel-or-breaking-the-sameness", "title": "Tapetenwechsel, or: Breaking the Sameness", "content_html": "We all want to do our best work. We all want to create something of value. But what if you\u2019re stuck? What if the solution just doesn\u2019t show up, the idea just won\u2019t come, the interesting just doesn\u2019t want to happen? Writers sometimes call it writer\u2019s block, but not only writers experience it. Everyone who does creative work knows this feeling of just not being able to make progress.
\n\nWhenever we\u2019re stuck like this, it is important to recognize that this is totally normal and nothing to be worried about. Such a creative block isn\u2019t really a blocker, it\u2019s more of a short break. The best way to cope with this is to first of all continue to work. Inspiration strikes not when we sit and wait but when we start immersing ourselves in a problem. So don\u2019t wait for the muse to kiss you. Walk on.
\n\nI\u2019m currently listening to the audio version of The Creative Act: A Way of Being, a fantastic new book on the creative process by Rick Rubin, the legendary music producer who not only co-founded Def Jam Recordings but has also worked with artists like the Beastie Boys, Run-DMC, Slayer, Danzig, Johnny Cash, System of a Down, the Red Hot Chili Peppers, Metallica, Eminem, Jay-Z, The Strokes, and many more.
\n\nIn his book, Rubin shares one of the secrets of getting unstuck when you\u2019ve hit a wall and your work isn\u2019t getting any better: breaking the sameness. This can happen in various ways. You could, for example, break down a large, seemingly insurmountable challenge into small tasks. Like: write just one line every day, no matter how good or bad you think it is. Soon, you\u2019ll be able to write entire songs again.
\n\nWhat can also help is a change of the environment, or, how we call it in German, a \u201cTapetenwechsel\u201d (= a \u201cchange of the wallpaper\u201d), to inspire a fresh perspective. When the Red Hot Chili Peppers told him that they had enough of recording studios, Rubin took them to a (haunted\u2026?) mansion to record Blood Sugar Sex Magik there. Other artists recorded in the dark, early in the morning, on a mountain playing for the ocean, or even hanging upside down while singing. By creating conditions outside of the normal we increase the surface area for new feelings to arise and new ideas to happen.
\n\nSuch a Tapetenwechsel might also be a change of context. When a singer doesn\u2019t connect to a song, it can be helpful to add a new meaning or backstory to the lyrics of a song. A love song, for example, might sound different if sung for a long-lost soulmate, a partner of thirty years that you don\u2019t get along with, a person you saw on the street but never spoke to, or your mother. With one artist, Rubin suggested singing a love song written to a woman as a devotional to God instead.\n(As Rubin revealed in an interview, this artist was Johnny Cash and the song was \u201cFirst Time I Ever Saw Your Face\u201d.)
\n\nAnother Tapetenwechsel you could try is to change or break the rules of the game. When you intentionally redefine the limitations and constraints of your project, you can break up patterns that hold you back. When you set parameters that force you out of your comfort zone, it is easier to innovate and find a new side of yourself and your work. If you always write on a laptop, try writing by hand. If you\u2019re right-handed, paint with your left hand. If you always write long paragraphs, force yourself to only write short sentences. If you always use small font sizes, go big with your typography. Whatever you choose, it\u2019s of little importance if your work is better. As Rubin writes:
\n", "date_published": "2023-02-06T01:28:00+01:00", "date_modified": "2023-02-06T21:47:51+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20504", "url": "https://matthiasott.com/notes/spirits-that-ive-cited", "title": "Spirits That I\u2019ve Cited", "content_html": "I have a tip for everyone who\u2019s now \u2013 or very soon \u2013 trying to find out whether a text was written by a human or an AI.
\n\nSure, you could train another AI to look for clues and confidently call it a \u201cclassifier\u201d. But chances are, your classifier won\u2019t be fully reliable. It might not work on short texts. Or, it might incorrectly but confidently label AI-written text as human-written. Also, people will sure as hell edit AI-written text so that it can\u2019t be detected anymore.
\n\nGiven that you have no idea how those algorithms really work, you might as well just use the classifier written by the same company that is currently gifting you the gift of AI for free. Sounds really reassuring, right?
\n\nInstead, how about you try this:
\n\nLook for the soul.
\n", "date_published": "2023-02-01T00:36:37+01:00", "date_modified": "2023-02-01T00:36:37+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20234", "url": "https://matthiasott.com/notes/a-birthday-audio-gear-upgrade", "title": "A Birthday Audio Gear Upgrade", "content_html": "Today, I turned 41. It was a wonderful, relaxed day with my family \u2013 and my parents\u2019 dog who is a bit of a maniac\u2026 \ud83d\ude05
\n\nI also got to try out my two \u201coffice\u201d birthday presents: a new microphone for voice, the R\u00f8de Procaster, and an audio interface, the MOTU M2.
\n\nThe R\u00f8de Procaster is a dynamic microphone that was primarily designed for spoken word. Unfortunately, my office in the attic is much noisier than I had hoped, because there is a street with a bit of traffic outside. So while my default workshop XLR microphone, boomed out of frame, is great when you are running a more lively session and you don\u2019t want a boom arm in your face, it still picks up a lot of ambient noise like traffic or playing kids. That\u2019s why I needed a dynamic microphone, which, by nature of it\u2019s design and the resulting \u201ccardioid polar pattern\u201d, will pick up much less ambient noise and allows me to first and foremost record what\u2019s being said right in front of the microphone.
\n\nChoosing a microphone turned out to be much harder than expected. I wanted something that would be sufficient for occasional podcast visits (for now) or to record the voiceover track for tutorial videos I sometimes do for clients. After countless hours of watching reviews on YouTube, two microphones made it to the finals: the legendary Shure SM7B and the R\u00f8de Procaster. The Shure definitely seems to be the better and more popular microphone overall, but it comes with a hefty price tag of about 380\u2013400 Euro (or Dollars). I know that this is not what audio engineers would call an expensive microphone, but it is a lot if you don\u2019t want to use the mic that often. The R\u00f8de Procaster, which comes in at around 180 Euro, is a much more budget-friendly option that received a lot of favorable reviews. It is susceptible to handling noise and p-p-p-plosive sounds, but when it comes to the audio quality, it outperforms both microphones that are a little bit cheaper (R\u00f8de Podmic) and a bit pricier (Shure MV7X). It also does a really good job at rejecting noise. So I ultimately decided to give it a try and see for myself. With the nice side effect that I got a microphone and an audio interface for the price of an SM7B.
\nThe MOTU M2 is an audio interface that lets you connect two inputs, like XLR microphones, for example. It comes with really good preamps with very low self noise and up to 60 db of gain to boost the signal of your microphone. Dynamic microphones like the Shure SM7B or the R\u00f8de Procaster are quiet microphones that need a lot of additional boost. The M2 can drive both of them without an additional signal booster like a Cloudlifter or a Fethead. And what\u2019s just fabulous is that the M2 has a little color LCD display with level meters for inputs and outputs, so you can immediately see when your signal is too low or clipping. And they\u2019re fun to watch, too, of course.
\n\nI\u2019m really looking forward to using these two devices in my setup this year. What are you using to record audio and what is your favorite microphone? Looking forward to your answer \u2013 in a blog post maybe?
\n", "date_published": "2023-01-08T23:45:00+01:00", "date_modified": "2023-01-09T01:44:05+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20215", "url": "https://matthiasott.com/notes/updating-my-site-in-2023", "title": "Updating My Site in 2023", "content_html": "Alright. Enough talk. Let\u2019s get to it.
\n\nOne of my plans for 2023 is to redesign this website. Here is the thing: it is easy to promise things to yourself. It is much harder to deliver, especially when the project is quite large and you have to do it in your spare time, like the redesign of a personal site. So the best way to finally begin is to start today. And that\u2019s what I\u2019m doing.
\n\nThere are a few considerations to make when you redesign a site that has been around for a while and on which quite a bit of content has been published over the years. So I will try to share in the best possible way my thought process and the steps I will take (and not take) to redesign the site, and I hope it might help some of you who are or will be in a similar situation. (That might well include my future self.) Of course, everything I document will only be applicable to other sites to a certain extent. So take it with a grain of salt and draw your own conclusions.
\n\nMy current website is now about seven years old. I am generally still mostly happy with it regarding the convenience of posting and, astonishingly, the design. But there are also a lot of things that need to be updated to more modern browser technologies or which simply don\u2019t work anymore. For example, the site runs on Craft CMS and when I built it in 2015 and 2016, there was no Webmention plugin available for Craft. So I had to write one from scratch because I really wanted to add them to the site. The code of this Webmention plugin has been neglected quite a bit: I wrote the plugin for version 2 of Craft. The current version is 4. Consequently, updating the plugin for the latest version of the CMS will probably be one of the major parts of the redesign, because how you build plugins for Craft has changed significantly.
\n\nWhat else do I have to do?
\n\nFirst of all, I want to update the site itself to Craft 4. Craft is a somewhat classical PHP CMS with a database. This has many advantages when it comes to handling data on the server, but upgrading a static site that uses markdown files for the posts would probably save me some of the database hassle. I will first have to upgrade the site and the database from version 2 to 3 and then from 3 to 4. We\u2019ll see how well this goes.
\n\nMy current site still uses Grunt (\u2026remember?) to build the CSS and a little bit of JavaScript. I have since not used Grunt a lot anymore and feel much more comfortable working with Gulp or Vite with PostCSS. So I want to set up a new build process from scratch, keeping it as lightweight and simple as possible. At least, it should serve me for another 5 to 10 (?!?) years. For this, I might re-use some of the code of my Eleventy starter kit, qu'est appel\u00e9e Eleventy Plus Vite.
\n\nThe structure of the site will probably stay more or less the same. Over time, I pushed the works section more and more into the back. Just because I did not have the time to add more projects or an NDA didn\u2019t allow for it. I might merge the articles and notes sections, though. When I started the site, I had the idea of writing mostly longer blog posts and to publish them only a few times a year. This has changed a lot, also with me becoming more fluent in writing in English and because I realized that I don\u2019t publish \u201carticles\u201d anymore \u2013 I write blog posts. Maybe the new section will therefore just be called \u201cblog\u201d or \u201cwriting\u201d. Again, we\u2019ll see.
\n\nKeeping the structure intact also means that I won\u2019t do a lot of changes to the HTML of the templates. At least, that\u2019s the plan for now. I will remove some of the older stuff like JavaScript lazy loading of images and do this with the loading
HTML attribute instead. And I also want to make more use of includes and partials, thinking more in components, and improve the overall quality of the HTML.
Over the last few years, I\u2019ve been learning a lot about creating accessible interfaces for the Web and there is quite a bit that can be improved on my site. The same goes for performance. Although I tried my best to reach a four hundos Lighthouse score when I built the site, many best practices have since improved and I want to make the site load faster (again). This will involve a lot of tinkering \u2013 I\u2019m looking at you, Service Worker \u2013 but it also promises to be a lot of fun.
\n\nI can\u2019t wait to start with this part. My plan is to throw almost all the CSS into the bin and start fresh, using all the great new (layout) features that CSS offers these days. I will heavily make use of CSS Grid and Flexbox, of course. But also experimenting with more experimental features like :has()
and container queries might be fun. But definitely, I will make the typography completely fluid this time, using an approach like Utopia. I also will use variable fonts \u2013 and I already have a few typefaces on the shortlist. More on that in a separate post about the typography of the site once it is done. Ah! The new design should also have a dark mode, using custom properties for the theming.
As you can see, there is already a lot on the list. And I probably also forgot a few things that will pop up in the process. So expect a lot of blog posts about many of the aspects of the redesign.
\n\nHowever, I\u2019m still not sure whether I should do an open redesign or if it makes more sense to document most of the redesign separately and share those posts once the new design goes live. What do you think?
\n", "date_published": "2023-01-07T02:00:00+01:00", "date_modified": "2023-01-07T12:55:35+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20209", "url": "https://matthiasott.com/notes/the-year-of-the-personal-website", "title": "The Year of the Personal Website", "content_html": "We all know that it is going to happen. It\u2019s not a question of if, but when Twitter will collapse. By the way: one day, Medium will follow. So will Instagram, YouTube, and TikTok. Or Mastodon.
\n\nMany people are now desperately waiting for their Twitter archives, hoping that they\u2019ll arrive before all their content is lost for good. For those who were using Twitter primarily for ephemeral chatter, all this isn\u2019t that tragic. But for others, all their posts, conversations, and connections on the social network were a significant part of their online identity. They are about to lose a place on the Web into which they put a huge amount of time, attention, and energy.
\n\nEspecially if you are a designer, an artist, a photographer, a writer, a blogger, a creator of any kind, owning your work is as important as ever. Social media platforms might be great for distributing your content and creating a network of like-minded people around you. But they will always be ephemeral, transient, and impermanent \u2013 not the best place to preserve your thoughts, words, and brushstrokes.
\n\nIn the search for a permanent home on the web, more and more people are now rediscovering the personal website as a place to share and document their thoughts and publish their work. I\u2019ve written at length before about why this is such a good idea: Your personal website is a place that provides immense creative freedom and control. It\u2019s a place to write, create, and share whatever you like, without the need to ask for anyone\u2019s permission. It is also the perfect place to explore and try new things, like different types of posts, different styles, and new web technologies. It is your playground, your platform, your personal corner on the Web.
\n\nThat\u2019s why it warms my heart to read articles like Bring back personal blogging by Monique Judge on a site like The Verge or to add my site to projects like Bring Back Blogging by Ash Huang and Ryan Putnam, who encourage us all to get into the habit and publish at least three blog posts until the end of January. Oh, and if that\u2019s important to you, as Chris Coyier notes, There Can Be Money in Blogging, too.
\n\nSo how about we make 2023 the year of the personal website? The year in which we launch our first site or redesign our old one, publish a little more often, and add RSS and Webmentions to our websites so that we can write posts back and forth. The year we make our sites more fussy, more quirky, and more personal. The year we document what we improved, share what we learned, and help each other getting started. The year we finally create a community of critical mass around all our personal websites. The year we take back our Web.
\n\nI\u2019ll start tonight.
\n", "date_published": "2023-01-06T20:14:00+01:00", "date_modified": "2023-01-06T21:53:17+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20101", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-24", "title": "Independent Type Foundry Advent Calendar \u2013 Day 24: NaN", "content_html": "For the last day of this year\u2019s Independent Type Foundry Advent Calendar, we\u2019re back in Berlin. NaN is a foundry and type design practice \u201cbalancing weirdness and wisdom\u201d that was founded by designer Luke Prowse. In late 2021, Luke was joined by Jean-Baptiste Morizot, who had already launched Phantom Foundry in 2018.
\n\nNaN\u2019s growing library of retail typefaces could be described as beautifully weird and playful, full of expressive creative talent combined with font engineering at the highest level.
\n\nNaN Tragedy is a functional but unconventional serif designed by Jean-Baptiste Morizot. Based on a classic skeleton, quirky details and an exaggerated calligraphic contrast are less pronounced in the text styles but more extreme and expressive in the display cuts.
\n\nNaN Holo by Luke Prowse is a constructed neo-grotesk with \u201cbiological forms disrupting an otherwise tensely machined flow.\u201d The mix of rounded and squared details makes it a solid and reliable but also surprising and warm design.
\n\nNaN Jaune by J\u00e9r\u00e9my Landes is a sans-serif full of contrast and contradictions \u2013 from closed apertures to deep ink-traps to extreme stroke contrast, in three different optical sizes \u2013 Maxi, Midi, and Mini.
\n\nAnd then, there\u2019s NaN Tresor, Christoph Koeberlin\u2019s latest masterpiece. Peculiar, charming, full of energy, and immediately recognizable. A revival not of a single typeface, but of an entire genre. NaN Tresor is an homage to the very first grotesk typefaces with all their charming inconsistencies. To reproduce the feeling of this era, Christoph took an unconventional approach: he carefully translated the historical inconsistencies and quirky design details into a typeface with three optical sizes and almost 2000 characters and glyph variations, sometimes eight alternates per glyph plus swashes. In the variable font, this idea fully unfolds: the individual irregularities and distinctive characteristics of the design can flexibly inform each other into a wide range of playful variations.
\n\nYou can get trial fonts of all NaN typefaces \u2013 and also make sure to try the lovely color picker in the upper right corner if you\u2019re visiting the website on a larger screen\u2026 \ud83d\ude0d
\n\n\u261e https://www.nan.xyz
\n\nPS: Happy Holidays! \u2728\ud83c\udf84\ud83e\udd17
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-24T12:45:05+01:00", "date_modified": "2022-12-24T12:45:05+01:00", "author": { "name": "Matthias Ott" } }, { "id": "20022", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-23", "title": "Independent Type Foundry Advent Calendar \u2013 Day 23: Typotheque", "content_html": "Typotheque is a type design studio based in The Hague, Netherlands. Founded in 1999 by Peter Bi\u013eak, who also teaches typeface design at the renowned postgraduate course TypeMedia at the Royal Academy of Art in The Hague, the foundry is well-known for the excellent design quality of its typefaces and a focus on extended language support. Many of the typefaces in the vast catalogue are superfamilies that come with sans, serif, display, or mono styles and support for hundreds of languages.
\n\nGreta is a superfamily designed by Peter Bi\u013eak that was been planned from the outset as a system of interrelated styles. Following the architectural approach Adrian Frutiger pioneered with his Univers, Greta was not only designed as a family of weights and styles but also as a system of continuous optical sizes.
\n\nBrenner is a superfamily designed by Nikola Djurek that also combines various styles, like a rational, unobtrusive neo-grotesk sans-serif and a confident, high-contrast serif, into a coherent type system.
\n\nPing is a resolutely modern, fluid sans-serif typeface designed by Peter Bi\u013eak and various others with a special design approach: its simplified letterforms are constructed with the least number of pen strokes. So lowercase letters \u2018a\u2019, \u2018d\u2019, \u2018p\u2019, \u2018b\u2019 and \u2018g\u2019 are drawn without lifting the pen at all.
\n\nRapida by Michelangelo Nigra\u2019s, which started as a thesis project on the TypeMedia master's course, is a charming serif designed for long form reading. It\u2019s counterpart, Rapidissima, takes the design ideas behind Rapids to the extremes with dramatic sloping (24 degrees), very high contrast between strokes, and sharp and extressive lettershapes.
\n\nYou can try all Typotheque fonts with Fontstand and they also offer an 80 % educational discount for students, teachers, faculty, schools, and educational institutions.
\n\n\u261e https://www.typotheque.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-23T12:25:31+01:00", "date_modified": "2022-12-23T12:25:31+01:00", "author": { "name": "Matthias Ott" } }, { "id": "19960", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-22", "title": "Independent Type Foundry Advent Calendar \u2013 Day 22: 205TF", "content_html": "205TF is a type foundry based in Lyon, France. It was founded in 2017 by Damien Gautier and Florence Roller who run the foundry together with foundry manager R\u00e9mi Forte. Collaborating with many independent type designers, they have built a library of typefaces that is wonderfully diverse, full of energy, and that has its very own character. As they write on their website, in all their designs \u201ca certain French spirit can be felt.\u201d And so, the TF in the foundry\u2019s name stands not only for Type Foundry but also Typographie Fran\u00e7aise.
\n\nYou could probably spend hours browsing the catalog that consists in the majority of expressive and quirky display and editorial typefaces. So it\u2019s again hard to pick any favorites \u2013 it will depend on your project which typeface suits your needs. Here are a few for which you will also find great design examples on Fonts In Use.
\n\nPlaak designed by Damien Gautier and inspired by French street signs, is a sturdy, expressive sans-serif with a wide range of styles. Maax, also by Damien, takes an interesting approach: each style of the sans-serif consists of four variations with slightly adjusted letterforms \u2013 Standard, Geometric, Modern, and Grotesk. Clifton by Yoann Minet is a poetic serif with inverted contrast. And Louize by Matthieu Cortat is a warm and elegant old-style serif, a revival of \u201cAugustaux\u201d by Lyonnais printer Louis Perrin, in itself one of the first revivals in the history of typography.
\n\nI could go on and on like that. :) Maybe just have a look at the many wonderful designs yourself and download free test versions I of your favorites to try them.
\n\n\u261e https://www.205.tf
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-22T10:59:00+01:00", "date_modified": "2022-12-22T17:16:44+01:00", "author": { "name": "Matthias Ott" } }, { "id": "19771", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-21", "title": "Independent Type Foundry Advent Calendar \u2013 Day 21: HvD Fonts", "content_html": "For day 21, we\u2019re back in Berlin, where a young graphic designer with a love for type decided in 2008 to make his passion his full-time job. Today, Hannes von D\u00f6hren\u2019s type foundry called HvD Fonts sells a wide range of typefaces, some of them being hugely popular designs. The catalog does not only include high-quality sans-serif and serif typefaces but also a surprisingly large variety of expressive display fonts.
\n\nBrandon Grotesque was the typeface that put Hannes on the map for many of us. Awarded with a Certificate of Typographic Excellence by the Type Directors Club in 2011, this geometric sans captures the atmosphere of the 1920s and classics like Futura but combines it with the warmth of slightly rounded corners and a charming, contemporary openness.
\n\nFF Mark, released in 2013 and created by Hannes von D\u00f6hren, Christoph Koeberlin, and the FontFont Type Department with creative input of Erik Spiekermann, is one of the most iconic contemporary geometric sans-serif designs out there \u2013 clean, balanced, and readable.
\n\nFabrikat, designed by Christoph Koeberlin, Hannes von D\u00f6hren, and Inga Pl\u00f6nnigs, is a geometric sans reminiscent of DIN. Engineered, straightforward, reduced, functional, and also available in a narrower version and a monospaced design.
\n\nPalast, designed by Hannes von D\u00f6hren and Bernd Volmer, is a transitional, slightly geometric serif typeface that comes in three optical sizes: Poster, Display, and Text.
\n\nAnd the latest addition to the library is Hannes\u2019s Match, a compact and confident grotesk.
\n\n\u261e https://www.hvdfonts.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-21T10:24:36+01:00", "date_modified": "2022-12-21T10:24:36+01:00", "author": { "name": "Matthias Ott" } }, { "id": "19720", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-20", "title": "Independent Type Foundry Advent Calendar \u2013 Day 20: Frere-Jones Type", "content_html": "Tobias Frere-Jones is one of the most accomplished type designers in the world. He worked at Font Bureau in Boston where he designed modern classics like Benton Sans or Interstate. He later returned to his hometown New York City and, at Hoefler & Frere-Jones, created timeless designs like Whitney and Gotham. Then, in 2015, Tobias founded his own company, Frere-Jones type. A year later, he was joined by Nina St\u00f6ssinger, who, just like Tobias, teaches type design at Yale School of Art.
\n\nThe library of Frere-Jones Type is small but exquisite, with all typefaces being designed with intention, care, and a lot of attention to detail. A few highlights:
\n\nMallory was the first release of the foundry and Tobias\u2019s take on combining his own mixed heritage, being part British part American, into a geometric but relaxed type family.
\n\nExchange is a sturdy, compact, and clear serif that started as a commission for The Wall Street Journal and was revised and extended for the retail release.
\n\nMagnet is an energetic and surprising sans-serif family, designed by Inga Pl\u00f6nnigs. Tightly packed headline cuts \u2013 including backslanted versions \u2013 are combined with standard styles that are quieter but still intriguing with their deeply cut notches and unusual details.
\n\n\ufffcCommunity Gothic, designed by Tobias Frere-Jones, Fred Shallcrass, and Nina St\u00f6ssinger, is a patchwork family, inspired by the sans serif \u201cjobbing\u201d typefaces of the nineteenth century. Each style draws from different historical examples, leading to different shapes and different construction styles of the individual weights that were then finely tuned into a system that has a common, reliable base but allows each glyph to deviate from the norm to a certain extent.
\n\nAlso make sure to read some of the blog posts that meticulously document the design of each release. Each is a little type design lesson on its own.
\n\n\u261e https://frerejones.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-20T10:29:13+01:00", "date_modified": "2022-12-20T10:29:13+01:00", "author": { "name": "Matthias Ott" } }, { "id": "19566", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-19", "title": "Independent Type Foundry Advent Calendar \u2013 Day 19: Fontwerk", "content_html": "Fontwerk was founded in 2019 by Ivo Gabrowitsch in Berlin. Building on his excellent network and years of experience as marketing director at FontShop and Monotype, Ivo has assembled a permanent team of great designers and font engineers that also regularly collaborates with a freelance network of international design professionals.
\n\nOne look at the library and you can already see the signature style of the \u201ctypographic epicentre\u201d that is Berlin: typefaces of extremely high quality and a lot of attention to detail. Useful, thorough, aesthetically pleasing \u2013 and always recognizable in their design.
\n\nCase is a neo-grotesk superfamily in the tradition of Akzidenz Grotesk or Univers designed by Erik Spiekermann, Anja Meiners, and Ralph du Carrois. They put in all their experience to design a typeface that captures the essence of the best parts of this genre but also adds in new ideas. The result is a design that achieves something that is incredibly hard: it has a familiar, solid, and clear base but at the same time it has its very own individual, contemporary character.
\n\nThe versatile Nice Superfamily by Jan Fromm is a clear but lively serif that comes in four optical sizes. The smaller optical sizes are optimized for legibility while the larger sizes emphasize expressiveness with high stroke contrasts and sharp serifs.
\n\nAnd Christoph Koeberlin\u2019s Pangea Superfamily is a compact but friendly geometric sans that brilliantly weaves in elements of grotesk typefaces like a double-story a or a \u201cspectacle-g\u201d. It comes in a wide range of styles and optical sizes and, as you would expect from one of the best font engineers out there, is available as a variable font as well. You can try out the different axes and read more about the design on Christoph\u2019s website. Also remarkable: Christoph is donating 25% of his income from Pangea to the preservation of the rainforest and to large-scale reforestation projects.
\n\nOh, and also make sure to have a look at Nikolai, designed by Franziska Weitgruber. A striking contemporary reinterpretation of Renaissance serifs that evolved on Future Fonts into a beautiful design full of character.
\n\nFontwerk provides trial fonts for all typefaces and students can purchase all font families for the price of a regular weight. Fantastic!
\n\n\u261e https://fontwerk.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-19T01:07:00+01:00", "date_modified": "2022-12-19T12:09:14+01:00", "author": { "name": "Matthias Ott" } }, { "id": "19441", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-18", "title": "Independent Type Foundry Advent Calendar \u2013 Day 18: Vectro", "content_html": "Vectro is a type design studio based in Portland founded in 2021 by Lizy Gershenzon and Travis Kochel. The two have been running the design studio Scribble Tone for several years but their most-noticed project (and company) is probably Future Fonts, a platform for experimental, high-quality fonts in progress. On Future Fonts, type designers can sell early, unfinished versions of their typefaces at a fraction of the final price to support further development and get early feedback. But most importantly, Lizy and Travis have created a community with Future Fonts that empowers type designers to grow and learn. Foundries like Ohno or Blast owe much of their success to the visibility they have on Future Fonts, and in the community Slack channel, seasoned designers like Kris Sowersby are providing feedback and useful advice.
\n\nVectro is Lizy\u2018s and Travis\u2018s latest endeavor and the new home for all their own typefaces going forward. But they\u2019re also collaborating with other type designers to build up a library that is useful, playful, and expressive, but that also leverages latest font technologies like variable fonts.
\n\nRainer is a tightly compressed sans with a large x-height by Philipp Neumeyer (whom you might remember from his designs published with TypeMates). The typeface started out on Future Fonts as well and now found its way into Vectro\u2018s catalog. Vctr Mono is a warm and slightly goofy monospaced typeface by Travis and Lizy that was inspired by text found on the lenses and bodies of manual cameras. Analog is a confident, wide industrial sans-serif with low contrast. And WHOA is an experimental variable font, \u201cnamed after the sound commonly heard after dragging the slider for the first time.\u201d Try it. It\u2019s true. :)
\n\nTrial fonts are available and students get a 50 % discount on all fonts.
\n\n\u261e https://www.vectrotype.com/
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-18T02:00:00+01:00", "date_modified": "2022-12-18T14:26:33+01:00", "author": { "name": "Matthias Ott" } }, { "id": "19436", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-17", "title": "Independent Type Foundry Advent Calendar \u2013 Day 17: Studio Ren\u00e9 Bieder", "content_html": "You probably have seen several of his typefaces on MyFonts before. Maybe you even purchased one or more of them. For almost 10 years, he was selling his fonts on Monotype platforms. This year, Berlin-born and -based designer Ren\u00e9 Bieder launched his own independent shop for his typefaces. And it is full of treasures.
\n\nWhen the idea to sell the typefaces of his studio independently grew in Ren\u00e9 about two years ago, he immediately knew that he would have to raise the bar for such a huge project and he started to revise some of his most popular designs. At first, he planned to do only a few minor adjustments. But as time progressed, he realized that if you change just a few small details in the system that is a typeface, you might as well rework the whole family and include even more adjustments. All of a sudden, he found himself jumping back and forth between revisions of six of his existing typefaces while also working on new designs \u2013 with the positive side effect that he could always look at the work with fresh eyes. The result? A whopping total of 14 revised or new type families, designed within two years. Since October 2022, Ren\u00e9 has been publishing one of the eight completely new families every month. So there\u2019s even more to come.
\n\nWith that many designs of outstanding quality, it is incredibly hard to pick a few favorites. I will give it a try, but promise me to look at the typefaces in the library yourself.
\n\nNeue Campton is the redesign of one of Ren\u00e9\u2019s most successful typefaces. The challenge in reworking the geometric sans-serif was to keep the balance between creating an expressive, new aesthetic while also keeping the original spirit of Campton alive.
\n\nWith Neue Faktum, a grotesk that combines organic and mechanical shapes into a cohesive design, the process of revising the family proved to be easier, because the design details of the typeface were distinctive enough already. So, Ren\u00e9 primarily redrew all the curves.
\n\nKreol was the first one of the new designs to be released. The serif typeface comes with gorgeous high-contrast strokes and a sturdy, sometimes crisp, but always elegant appearance.
\n\nSpyk takes some of the details that can be found in Kreol even further and turns up the volume into an extroverted, lively, and razor-sharp design. This might well be a TDC winner in 2023. ;)
\n\nTrial fonts are available for all typefaces. And if you hurry up and buy one of the new type families, you will get a limited edition poster for free.
\n\n\u261e https://www.renebieder.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-17T01:52:00+01:00", "date_modified": "2022-12-17T08:38:13+01:00", "author": { "name": "Matthias Ott" } }, { "id": "19354", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-16", "title": "Independent Type Foundry Advent Calendar \u2013 Day 16: R-Typography", "content_html": "R-Typography is a type foundry based in Lisbon Portugal, founded by Rui Abreu in 2008 and now run together with Catarina Vaz.
\n\nRui drew his first type designs while still working as a designer in advertising agencies. One day, he decided to send a design to to Peter Bruhn of the Swedish foundry Fountain. Peter not only recognized that this young designer from Portugal could draw letters, but he would also become his mentor as they collaborated for a few projects, including the TDC award-winning Orbe. From Peter, Rui not only learned how much hard work and dedication it takes to produce a typeface, but he also realized that a foundry is more than the sum of its collective typefaces. As he says, \u201cWhat makes a foundry is the whole body of knowledge.\u201d
\n\nAnd so, when you look at the growing catalogue of R-Typography, it seems that what is driving Rui today is not only the desire to cover a wide range of styles and curate a collection of useful and beautiful typefaces. Just as important is that the foundry\u2019s \u2018body of knowledge\u2019 is growing artistically but also regarding methods, production techniques, and tooling.
\n\nThe library of R-Typography now contains a range of great sans-serifs, like the geometric but pleasantly warm Azo Sans in all its variations, the constructed Sul Sans, sort of a Portuguese version of DIN, and Rui\u2019s recent reinterpretation of Futura: Atica. Staff is a sturdy, contemporary neo-grotesk sans family for wide range of applications and a more recent, text-oriented version in Staff Grotesk.
\n\nThe serif families are where you can see that Rui really knows how to balance contrast and shape. Like in Grifo and Gliko Modern, two serif designs for editorial use with high stroke contrast, or Flecha, a sharp, sturdy, yet delicate and \u201cFleischmann-y\u201d old-style typeface. The latest release of the foundry is Rizoma, a contemporary typographic interpretation of Roman inscription letters, elegant and slightly constructivist.
\n\nAs it is the standard nowadays, you can get free test fonts with a limited character set. And I also encourage you to read a few of the interesting post in the stories section, where Rui writes about the design ideas behind the typefaces.
\n\n\u261e https://www.r-typography.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-16T10:37:00+01:00", "date_modified": "2023-01-05T21:54:56+01:00", "author": { "name": "Matthias Ott" } }, { "id": "19271", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-15", "title": "Independent Type Foundry Advent Calendar \u2013 Day 15: David Jonathan Ross", "content_html": "David Jonathan Ross (DJR) had been working with The Font Bureau for nearly a decade, when he decided to start his own type foundry in 2016, now located in the hills of Western Massachusetts.
\n\nDavid\u2019s typefaces literally come in all shapes and sizes, and in all of them, his love for exploration, experimentation, and play is evident. It almost seems as if David just can\u2019t get enough of trying out new genres, drawing new shapes, finding new ideas for typefaces that nobody has done before, while pushing the boundaries of what font technology and type engineering can do. As a result, David has been awarded with several TDC awards and, in 2018, received the Prix Charles Peignot by the Association Typographique Internationale.
\n\nMany of David\u2019s experiments and up as fonts in his Font of the Month Club. For a tiny subscription fee, members of the club will get one of David\u2019s latest fonts every month. And the variety of designs on this \u201cplayground\u201d is just stunning. So just scroll through the history of fonts \u2013 and also take a look at the type designs on David\u2019s website that I don\u2019t mention here.
\n\nWhile many of David\u2019s designs remain experiments or single fonts (for now), some of them even grow into whole type families. Like the much applauded Roslindale, a serif family that comes with sturdy and stylish text styles but gets expressive and ornate in display sizes.
\n\nOr Forma DJR, a revival of the classic Italian sans-serif from 1968, that was the Italian type foundry Nebiolo\u2019s answer to Helvetica. Based on proofs Indra Kupferschmid printed from a casting of the original Forma in lead, David and Roger Black designed a contemporary digital version of Forma that captures the charm of all the interesting, unintentional byproducts of the printing process in the typeface\u2019s design details.
\n\nAlso worth mentioning, especially for the coders out there, is Input, a monospaced (and proportional) type system David specifically designed for coding environments. The typeface comes in a wide range of widths and styles, so that you can pick the right type face for your editor according to your personal preference. I have been using Input as my typeface in Sublime Text and later Visual Studio Code for years now and don\u2019t want to miss it.
\n\nFor all typefaces, you can get trial fonts, sometimes even including the variable font versions, for evaluation and internal testing purposes.
\n\nAnd if you love conference talks, also make sure to watch the talks David gave at beyond tellerrand in 2016 and 2018 for a deep-dive into type design and (extreme) typography.
\n\n\u261e https://djr.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-15T12:11:00+01:00", "date_modified": "2022-12-15T12:16:49+01:00", "author": { "name": "Matthias Ott" } }, { "id": "19184", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-14", "title": "Independent Type Foundry Advent Calendar \u2013 Day 14: Interval Type", "content_html": "Bonjour Paris! The type design community in Paris is buzzing and today, we\u2019re looking at one of the younger foundries that has already received a lot of praise. Interval Type is the foundry of art director and type designer Ilya Naumoff. Before he founded Interval Type, Ilya was part of Black[Foundry] and worked with foundries in France and Switzerland.
\n\nThe library of Interval Type is small but already full of gems. Englisch is a playful display typeface that draws inspiration from 17th and 18th century English type designs to create a slightly eccentric and charming contemporary design that has been awarded with a TDC award for type design this year.
\n\nFactor A and Factor B are the geometric sans-serifs in the collection. Factor A is the warmer of the two, Factor B is more rational in its shapes. But both have a contemporary appeal, not only because of little quirky details but also because of a wide set of squiggly alternates.
\n\nRooftop is a sturdy grotesk inspired by the american grotesks of the early 20th century but with slightly squarish curves, a design detail that I fondly remember from designs like T-Star and my only clumsy attempt at type design as a student in the early 2000s. Stravinsky is a a slightly chaotic, experimental grotesk display typeface.
\n\nAnd then there is Oceanic. Full of bold, organic shapes and exuberant, contrasting friskiness. Odd, quirky, elegant \u2013 and TDC-awarded in 2022 as well. Oceanic Text, the more sober serif counterpart for running text completes the family, creating the perfect mix for a wide range of applications.
\n\nFor all fonts, you can get free trial fonts with a limited character set.
\n\n\u261e https://intervaltype.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-14T09:32:00+01:00", "date_modified": "2022-12-14T10:02:55+01:00", "author": { "name": "Matthias Ott" } }, { "id": "19076", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-13", "title": "Independent Type Foundry Advent Calendar \u2013 Day 13: Newglyph", "content_html": "Newglyph is a type design studio based in Lausanne, Switzerland, founded by Ian Party and his team in 2019. If that name rings a bell, it\u2019s because just yesterday, we looked at another foundry Ian co-founded: Swiss Typefaces. Newglyph is his latest endeavor and is focused on \u201cthe research, design, and development of fonts and variable font technology\u201d. Also, 10% of the foundry\u2019s proceeds go to non-profit organizations \u201ccommitted to protecting our planet and all life on earth\u201d.
\n\nThe library of Newglyph currently consists of two major font collections that were all designed by Ian himself. In a way, the collections are taking the design approach Ian used for his designs at Swiss Typefaces one step further by making all of the designs variable fonts. Ian\u2019s goal was to make \u201call these styles interpolate and blend together to make it a fluid aesthetic variable font with enormous possibilities in styles that had never been done before.\u201d If you give the website access to your motion sensor (gyroscope) on a mobile device, you\u2019ll be able to manipulate the weight and width of the files by moving your device, by the way. On devices with a pointing device, the cursor movement will change the weight and width of the type.
\n\nThe Classic collection consists of 7 variable fonts \u2013 Antarctica, Baikal, Crystal, Sunlight, Alpaga, Amazonia, Alaska, and Atacama \u2013 that range from grotesk and geometric sans-serifs over monospaced fonts to several serif designs. All designs share the same attention to detail and a certain Swiss precision but also have their very own contemporary character.
\nThe Discovery collection, on the other hand, is all about expressiveness. It\u2019s all in there: geometric shapes, organic shapes, extreme contrasts, abruptly cut-off terminals, and confident strokes in all directions. And again, almost all typefaces in the collection are variable fonts.
\n\nThe license for all fonts includes desktop, web, apps, electronic publications, video, and much more \u2013 basically everything you\u2019ll ever need as well as free updates. You can get free trial fonts with a limited character set and students can buy a lifetime license for each typeface for 50 CHF and only 150 CHF for whole collections.
\n\n\u261e https://newglyph.com/
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-13T12:01:00+01:00", "date_modified": "2022-12-13T18:21:52+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18980", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-12", "title": "Independent Type Foundry Advent Calendar \u2013 Day 12: Swiss Typefaces", "content_html": "Many type foundries claim to be offering innovative designs and flexible type systems. But few deliver on this promise like Swiss Typefaces does. Founded in 2005 in Lausanne by Maxime B\u00fcchi and Ian Party (first as B&P type foundry), who were later joined by Emmanuel Rey, the foundry approaches a lot of things differently. Where other foundries offer type families with a certain range of weights and styles, Swiss Typefaces provides designers with typeface collections that share similar foundational design elements but offer a wide range of visual variation, allowing for true flexibility.
\n\nCenterpiece of the library is Ian Party\u2019s Suisse typeface that consists of 6 collections with a total of 55 styles, including the grotesque Suisse Int\u2019l and its serif counterpart Suisse Works.
\n\nSangBleu follows the same conceptional approach but manages to take it even further to a point where it breaks with conventional typeface classifications like sans/serif/slab. The five collections of SangBleu are all romans, but their design characteristics, like contrast or serifs, become sometimes more, sometimes less pronounced. The result is an innovative, organic supercollection that offers a lot of flexibility.
\n\nEuclid, designed by Emmanuel Rey, is the geometric sans-serif in the library, With its variations Circular A, Circular B, Square, Triangle, and Flex, it is worth a closer look as well.
\n\nAnother thing that sets Swiss Typefaces apart is their licensing model. If you buy one of their typefaces, the license will always include desktop as well as web fonts. For students, they even offer lifetime licenses of their typeface collections for only 50 CHF. They also have a Lab section on their site, where you can get early, experimental versions of upcoming type designs. And if you want to try the typefaces, you can always get free trial versions in desktop and web formats with a limited character set.
\n\n\u261e https://www.swisstypefaces.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-12T08:21:00+01:00", "date_modified": "2022-12-12T08:23:48+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18917", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-11", "title": "Independent Type Foundry Advent Calendar \u2013 Day 11: Sharp Type", "content_html": "Sharp Type is a digital type foundry based in New York City and was founded in 2015 by Chantra Malee and Lucas Sharp. Chantra is in charge of strategy, brand management, graphic design, sales, and communication for the foundry, while Lucas acts as type director. Before he got into type design, Lucas Sharp was a painter. That\u2019s why his work is, above all, shaped by the love of balanced and compelling form and beauty, but his foundry\u2019s type designs also uniquely combine those traits with the utilitarian aspect of design and state-of-the-art type engineering. Many of the typefaces in the library are exploring edges and are groundbreaking in how they bring together expressive, contrasting details with a coherent visual appearance.
\n\nSharp Type\u2019s library contains a broad variety of styles, ranging from expressive display typefaces like Frauen, an ode to German calligraphy, or the contemporary blackletter Respira Black, to charming serif designs like Doyle.
\n\nThe most notable designs of the catalog are, however, the sans serifs. There is the warm but neutral geometric sans-serif Sharp Sans, for example, an iteration of the display typeface used by Michael Bierut\u2019s team at Pentagram for the Hillary Clinton 2016 campaign.
\n\nSharp Grotesk is a neo-grotesk superfamily with an incredibly wide range of styles that explores the edges of what is possible in sans-serif typography. Or, to quote from the Sharp Type website: \u201cSwiss styling collides with the unexpected construction and wonky imperfectionism of 20th-century American wood type in Lucas Sharp\u2019s monument to Adrian Frutiger.\u201d
\n\nGarnett is the first typeface designed by Connor Davenport, senior typeface designer and technical director at Sharp Type. The design of the family combines the source material of the early, quirky grotesques of 19th-century Britain with hints of American Gothics into a confident, striking, and distinct contemporary typeface.
\n\nAnd then, there is Marc Rouault\u2019s Trois Mille \u2013 expressive, unseen, and truly genre-redefining in its innovative design. The design of the type family that started as Marc\u2019s TypeMedia thesis project in 2016 is based on a simple but effective idea: by always orienting the pen at 0\u00b0 for horizontal strokes and 90\u00b0 for verticals, hairlines only occur at the stroke intersections and some interior strokes and joins, while the rest of the strokes remain thick. This breakthrough idea led to a contrast methodology Sharp calls \u201cinternal contrast\u201d. It\u2019s what makes Trois Mille so exiting and charmingly weird and it is also the foundational methodology behind Beatrice, with all its dramatic visual oddity culminating in Beatrice Display.
\n\nTrial fonts with a limited character set are available as well as a few nice things.
\n\n\u261e https://sharptype.co
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-11T12:53:00+01:00", "date_modified": "2022-12-11T12:56:30+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18877", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-10", "title": "Independent Type Foundry Advent Calendar \u2013 Day 10: Colophon Foundry", "content_html": "Colophon Foundry is a foundry based on London founded by Anthony Sheret and Edd Harrington. The two designers started working together in 2009 in a shared graphic design studio in Brighton and began designing their own typefaces for the projects of their studio The Entente.
\nTheir most popular typeface, especially in the early years of the foundry, is Aper\u00e7u, a quirky grotesque full of references to classic realist typefaces like Johnston, Gill Sans, Neuzeit, and Franklin Gothic, but with a contemporary feel.
\n\nOther notable releases in the wide-ranging library are Basis and the recently released Chromatic superfamily that travels different genres of sans-serifs.
\n\nIf you want to test the typefaces first, you can get free demo fonts with a limited character set. And you can also order goods like posters and scarfs.
\n\n\u261e https://www.colophon-foundry.org/
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-10T10:34:00+01:00", "date_modified": "2022-12-10T10:54:44+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18807", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-09", "title": "Independent Type Foundry Advent Calendar \u2013 Day 9: Commercial Type", "content_html": "Commercial Type is a custom type design studio founded in 2007 by Paul Barnes and Christian Schwartz, based in New York City and London. They have worked to build a growing library of excellent quality with \u201ca balance between highly versatile \u2018vanilla\u2019 typefaces that can do whatever a designer needs, and expressive typefaces that allow a designer to sit back and let the typeface do the hard work of making a piece of design interesting and memorable.\u201d
\n\nPaul and Christian both have a background in publication design and had already collaborated on the type system for the newspaper The Guardian. So, when they founded Commercial Type, the Guardian Collection became the cornerstone and most successful set of typefaces of their library.
\n\nOther popular typefaces include sans-serif workhorses like the clear and optimistic Atlas and the plain but friendly Graphik, but also more expressive, characterful designs like Action Text, Druk, Original Sans, or Canela. Make sure to also have a look at Commercial Classics, their library of typefaces based on classic designs from typographic history.
\n\nBoth designers have also collaborated with other foundries like Font Bureau, FontFont, or House Industries, with one notable release being Neue Haas Grotesk, a revival of Max Miedinger\u2019s original Helvetica, which Commercial Type published in collaboration with Linotype in 2011.
\n\nJust like it is the case for all foundries features in this advent calendar, Commercial Type\u2019s fonts are available as web fonts for self-hosting and you can get trial fonts as well.
\n\n\u261e https://commercialtype.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-09T09:15:09+01:00", "date_modified": "2022-12-09T09:15:09+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18741", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-08", "title": "Independent Type Foundry Advent Calendar \u2013 Day 8: Letters from Sweden", "content_html": "Hej! Time to look at the next type foundry and this time, we travel to Scandinavia. Letters from Sweden, founded by self taught type designer G\u00f6ran S\u00f6derstr\u00f6m in 2011, is based in Stockholm and designs retail and custom typefaces for local and international clients. Instead of following an overly conceptual or even dogmatic approach, the type designs of Letters from Sweden all share a certain uncontrived, straightforward, but also crafty style.
\nHighlights of the library include the straightforward Lab Grotesque, the sturdy but elegant serif superfamily Ivar, strongly influenced by Times, and the geometric sans serif Rund that comes with a nice design detail: Rund\u2019s curved strokes have subtly concave terminal shapes, as if they were cut off by a circle.
\n\nYou can try out all fonts on the website by typing and even changing the font wherever there is a type sample on the site. Test fonts with a limited character set are available on request.
\n\n\u261e https://lettersfromsweden.se
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-08T10:02:00+01:00", "date_modified": "2022-12-08T10:03:38+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18690", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-07", "title": "Independent Type Foundry Advent Calendar \u2013 Day 7: Lineto", "content_html": "Founded in 1993 by Cornel Windlin and Stephan M\u00fcller, Lineto is Switzerland\u2019s first digital type foundry. Over the last three decades, Lineto has collaborated with type designers from all around the world and shaped one of the most impressive and high-quality libraries available. The catalogue covers many different genres but is definitely best-known for typefaces that are deeply rooted in the history of Swiss type design. When people think of the contemporary Swiss Style, they first think of Lineto.
\n\nLaurenz Brunner\u2019s critically acclaimed and immensely popular LL Akkurat, first published in 2004, is maybe the most famous of the bunch. It is precise, robust, and constructed, so everything you would expect from a classic, neo-modernist sans-serif. But in all its rationality, it also maintains subtle warmth and contemporary appeal.
\n\nLL Circular is a geometric sans-serif and Laurenz Brunner\u2019s second official release after LL Akkurat. It\u2019s a fresh take on the genre that has its roots in the Germany of the 1920s with typefaces like Futura or Kabel. LL Circular evolved from a purely geometric approach into a design with a lot of character that again combines purity with warmth.
\n\nAnd LL Unica77 is the only official digital revival of the legendary Haas Unica. Haas Unica\u2019s original designers, like 83-year-old Christian Mengelt, joined Lineto to re-master the typeface from their own drawings, and they continue to participate in the type family\u2019s ongoing expansion.
\n\nThere are even more fantastic works to explore in the collection, like LL Replica by Zurich-based studio NORM, LL Lettera Text by Kobi Benezri which is inspired by a typewriter font designed by Josef M\u00fcller-Brockmann for Olivetti in 1968, or Arve B\u00e5tevik\u2019s new take on Paul Renner\u2019s Futura: LL Supreme. So make sure to delve a bit among the various typefaces. For all of them, you can get demo fonts after creating an account.
\n\n\u261e https://lineto.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-07T11:25:00+01:00", "date_modified": "2022-12-08T10:03:56+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18559", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-06", "title": "Independent Type Foundry Advent Calendar \u2013 Day 6: Ohno Type Company", "content_html": "Sometimes, it can take quite a while for a foundry to finally become sustainable. Sometimes, like in the case of James Edmondson, it can take 17 type families.
\n\nJames Edmondson started Ohno in 2015, \u201cborn from a love of expressive typography and craft.\u201d And, as he shares in a wonderful account of his life story, it took about 6 years until Degular came \u201clike a bolt of lightning\u201d to the library, immediately making the foundry sustainable. It certainly is one of the designs with more focus on practicality than expressiveness, but still you feel a bit of the playful and quirky design details that make other typefaces of the foundry so unique and give it its very own expressive visual style. Like Covik Sans, which started as James\u2019 graduation project in TypeMedia in a effort to create something interesting and original. Or the even more expressive and charmingly bold display fonts like Beastly, Irregardless, or Blazeface. My personal highlight, Obviously, is a playful sans-serif that combines the charm of hand painted signage with impact of Impact. Unmistakable, confident, dense, wide, and with a delicious semislant in the variable font.\nIf you want to learn more about each typeface, by the way, read the texts in the type specimens. ;) And if you want to test them, you can get free demo fonts with a limited character set.
\n\nOh no! I almost forgot to mention that you can also get merch from Ohno and listen to fabulous conversations with people like Christian Schwarz, Lizy Gershenzon, and Travis Kochel on the Ohno Radio podcast.
\n\nAnd if you\u2019re inspired now and want to learn more about type design, have a look at the Ohno Type School.
\n\n\u261e https://ohnotype.co
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-06T06:56:00+01:00", "date_modified": "2022-12-06T09:18:43+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18460", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-05", "title": "Independent Type Foundry Advent Calendar \u2013 Day 5: Milieu Grotesque", "content_html": "Milieu Grotesque was founded in 2010 by graphic and type designers Timo Gaessner and Alexander Colby in Zurich. Today, the foundry is based in Lisbon, Portugal. Milieu Grotesque\u2019s typefaces are versatile and system-oriented but also have a distinctive and often slightly quirky character which has made them a popular choice for contemporary graphic designers.
\n\nMilieu Grotesque\u2019s small but refined library is steadily being expanded and regularly updated. Their most recognized typeface is Maison Neue, a reworking of Maison with slightly less quirky details, that was published as a superfamily in 2012 and revised in 2017. Maison Neue is a grotesk that references the reduced formality of the constructed sans-serifs of the early 20th century, bringing the oddities of those typefaces it into the present day in a well-balanced and less dogmatic way.
\n\nBut also the other typefaces in the catalogue are worth a cover look, not only because they are all made with a lot of care and attention to detail and very well executed and mastered. All of their designs combine the functional with the unexpected. There is Lacrima, a comprehensive family based on the famous IBM Golfball typewriter. Patron is based on the contradictory ideas of type designers G\u00fcnther Gerhard Lange and Roger Excoffon, merging expressiveness and consequent precision into a modern, versatile grotesk. And Brezel Grotesk is a modern but friendly grotesk with an \u201cinward curling stroke ends that subtly commemorate the ubiquitous silhouette of a Bavarian pretzel.\u201d
\n\n\u261e https://www.milieugrotesque.com/
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-05T12:30:00+01:00", "date_modified": "2022-12-05T15:45:31+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18410", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-04", "title": "Independent Type Foundry Advent Calendar \u2013 Day 4: TypeMates", "content_html": "TypeMates is a comparatively young foundry from Germany, founded in 2015 by Lisa Fischbach, Jakob Runge, and Nils Thomsen. Despite its young age, the foundry has already worked with large clients on custom typefaces and has managed to grow its catalogue of typefaces into an impressive collection of extremely high-quality, distinctive designs, collaborating with type designers from all around Europe.
\n\nHighlights of the collection are the indestructible Pensum Pro, the poetic (and TDC awarded) Resonay, the sturdy yet warm slab serif Harrison Serif Pro (also TDC awarded), the pragmatic constructed grotesk Halvar, and the unaffected and confident Norbert Superfamily by Philipp Neumeyer, which also just received a Certificate of Typographic Excellence by the Type Directors Club. TypeMates offer free demo fonts with a limited character set for all their typefaces.
\n\n\u261e https://www.typemates.com/
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-04T17:41:00+01:00", "date_modified": "2022-12-05T12:29:32+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18351", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-03", "title": "Independent Type Foundry Advent Calendar \u2013 Day 3: Klim Type Foundry", "content_html": "For day three, we travel to New Zealand, where Klim Type Foundry was founded in 2005 by type designer Kris Sowersby. After having worked a while as a graphic designer, Kris was contacted by Chester Jenkins from Vllg who wanted to release Kris\u2019 first typeface Feijoa. It was published in 2007 and the first royalty cheques from the sales of Feijoa allowed him to focus on type design full time.
\n\nKlim (\u201cmilk\u201d spelled backwards) has since published a broad range of high-quality typefaces of which many can be considered modern classics already. National first gained Klim international recognition, also because of a TDC award in 2008. Since then, Klim has touched on many genres of type design, always drawing inspiration and paying tribute to classics of type history but creating contemporary designs at an extraordinary level of detail and quality. Calibre is a neo-grotesk sans serif inspired by lettering on West Berlin street signs. Epicene is a poetic hommage to the crackling Baroque letterforms of designers like Rosart and Fleischmann. And then there is S\u00f6hne, the ultimate descendant of Akzidenz Grotesk \u2013 confident, sturdy, and authentic.
\nWhen you visit Klim\u2019s website, definitely take some time to read a few of the design information posts that Kris is writing for each release, like this one for S\u00f6hne. They are just outstanding. Each is a little, respectful journey into the history of type design but also documents the extraordinary attention to detail and craftsmanship that is evident in all typefaces of the Klim Type Foundry.
\n\nOh, and they also have a store, Klim Goods with a lot of beautiful products and sold-out posters. ;)
\n\n\u261e https://klim.co.nz/
\n", "date_published": "2022-12-03T12:57:00+01:00", "date_modified": "2022-12-04T18:35:10+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18176", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-02", "title": "Independent Type Foundry Advent Calendar \u2013 Day 2: Dinamo", "content_html": "Dinamo is another type foundry from Switzerland, founded by Fabian Harb and Johannes Breyer in Basel. After moving to Berlin for a few years, they now operate from different cities and via a network of satellite members across the globe. They don\u2019t see themselves as a foundry only but take on various projects from graphic design to app design and beyond. Dinamo also runs a small shop, Dinamo Hardware, where they transform type-thinking into tangible objects.
\n\nOne of their most important and popular type designs is Favorit, which has been used by the independent label Warp records (home to Aphex Twin and Brian Eno, for example) as their official typeface. The sans-serif feels somewhat familiar but still different and interesting. Fabian Harb describes its DNA like this: slightly \u201cmechanical\u201d in character, \u201clow contrast\u201d in terms of the way in which it is drawn, a real \u201cworkhorse\u201d in that it has the ability to handle any content, and, very importantly, having a \u201chumorous touch\u201d \u2014 the odd, toothless uncle you meet at a birthday party who always tells the best jokes.
\n\nTheir catalogue of fonts includes various designs from sans (Repro, Monument Grotesk) to serif (Laica) to mono (Diatype Rounded Mono) as well as more experimental typefaces like Grow or Maxi. Gravity also stands out as a playful and powerful headline typeface.
\n\nDinamo also lets you customize your font files with their Font Customizer\u2122 before checkout so that you can select which alternate character like double or single story a should be the default for your fonts. Really nice.
\n\nThey offer variable fonts for most of their typefaces and you can download trial fonts for free.
\n\nAlso check out their great tutorial on how to use (and animate!) variable fonts.
\n\n\u261e https://abcdinamo.com \ud83d\udc44
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-02T11:44:00+01:00", "date_modified": "2022-12-08T10:05:04+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18066", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022-01", "title": "Independent Type Foundry Advent Calendar \u2013 Day 1: Grilli Type", "content_html": "We\u2019ll start the advent calendar with one of the most successful foundries of the last decade. Grilli Type is a Swiss type foundry that was founded in 2009 by No\u00ebl Leu and Thierry Blancpain. Today, the studio numbers eight people dispersed all across the globe. The foundry is known for creating high-quality, contemporary typefaces that push the boundaries of what is possible with type design. Some of their most notable typefaces include GT Planar, GT Sectra, and GT America \u2013 but it is actually really hard to pick a favorite because all of their type designs are distinctive and unique.
\n\nAlso make sure to have a look at the special minisites that accompany each Grilli Type release. Each of them is a beautifully designed digital type specimen that often also shows the intricate details and characteristic design elements in animated infographics. And in case you want to test drive some of their fonts, they offer trial versions with a subset of characters.
\n\nIn case you understand German, you might also enjoy the conversation with type designer and account director at Grilli Type Tobias Rechsteiner in episode 85 of the podcast OHNE DEN HYPE.
\n\n\u261e https://www.grillitype.com
\n❦
This post is part of the Independent Type Foundry Advent Calendar 2022
\n", "date_published": "2022-12-01T18:30:00+01:00", "date_modified": "2022-12-08T10:04:24+01:00", "author": { "name": "Matthias Ott" } }, { "id": "18068", "url": "https://matthiasott.com/notes/independent-type-foundry-advent-calendar-2022", "title": "The Independent Type Foundry Advent Calendar 2022", "content_html": "The independent type design community has grown tremendously over the last couple of years and the quality and variety of fonts is truly breathtaking. A little while ago, I started jotting down a few type foundries to have a list that I could come back to whenever I was in need of inspiration for new typefaces for a project. What started with a few dozen foundries grew and grew over time to a list that now contains more than 110 foundries.
\n\nWhen I shared this on Mastodon, I did not only receive a reply from the Type Directors Club that my list is actually dwarfed by their own list of almost 2000 independent foundries, but also, Andreas suggested that instead of waiting forever until I share my list, I could also make an advent calendar out of it. So, here it is (sorry, Andreas \u00af\_(\u30c4)_/\u00af):
\n\nThe Independent Type Foundry Advent Calendar 2022.
\n\nEach day of the advent calendar will feature a different type foundry and highlight some of their most notable typefaces. It will be a highly opinionated and almost arbitrary selection of a few of my favorites from the list. So don\u2019t be upset, if your personal favorite foundry doesn\u2019t make it into the calendar. And who knows, maybe we\u2019ll have another calendar next year. But first, let\u2019s look at 24 of the best independent type foundries from all over the world.
\n\n\r\nI just had a casual chat with ChatGPT that I wanted to share with you. Many of the things I asked and the answers I received are related to a talk I gave last week at CSS Caf\u00e9. I wanted to know what an algorithm might think about all of this.
\n\nDecide for yourself where this sits on a scale between interesting and scary. Here\u2019s our \u201cconversation\u201d about typography, the Web, prototyping, design engineering, and tabs versus spaces.
\n\n\u2014
\nMe: Hi ChatGPT! Could you explain the typographic concept of kerning to me?
\n\nChatGPT: Yes, certainly! Kerning is the process of adjusting the space between individual letters in a font to improve the overall appearance of the text. This is typically done to make the letters appear more evenly spaced and visually appealing. Kerning is an important typographic concept because it helps to create a more cohesive and harmonious look for the text, which can improve readability and overall design aesthetic.
\n\nBut how does this differ from letter spacing?
\n\nLetter spacing, also known as tracking, refers to the overall spacing of the letters in a block of text. This is different from kerning, which is the adjustment of the space between individual letters. While kerning is typically used to improve the appearance of specific letter pairs, letter spacing is applied to an entire block of text to adjust the overall density of the letters.
\n\nThank you! And what would you say is most important when working with typography on the web?
\n\nWhen working with typography on the web, there are a few key factors to consider to ensure that your text is legible and visually appealing. Some of the most important factors include:
\n\nOverall, the most important thing to keep in mind when working with typography on the web is to prioritize readability and user experience.
\n\nInteresting! What do you mean by appropriate line spacing?
\n\nLine spacing, also known as leading, refers to the amount of space between the lines of text on a page. In general, it's important to use appropriate line spacing to ensure that the text is easy to read and understand. Too little line spacing can make the text feel cramped and difficult to read, while too much line spacing can make the text feel scattered and disorganized.
\n\nThe appropriate line spacing for a given block of text will depend on factors such as the font size, typeface, and overall design of the page. In general, a line spacing of 1.5 times the font size is considered to be a good starting point for most text. This can be adjusted as needed based on the specific requirements of the design.
\n\nIn addition to choosing an appropriate line spacing, it's also important to ensure that the spacing between lines is consistent throughout the text. This will help to create a cohesive and harmonious design, and will make the text easier to read.
\n\nI see\u2026 so would you say that line spacing is the most important element of good typography?
\n\nWhile line spacing is an important element of good typography, it's not the only factor to consider. In general, good typography involves a combination of factors, including the choice of font, font size and style, color, and overall design. All of these elements work together to create a cohesive and visually appealing design, and to improve the readability of the text.
\n\nAs such, it's not accurate to say that any one element of typography is the most important. Instead, it's important to consider all of the factors that contribute to good typography, and to balance them in a way that achieves the desired aesthetic and readability.
\n\nDo you know what fluid web typography is?
\n\nFluid web typography refers to the use of responsive design techniques to ensure that text is displayed optimally on different screen sizes and devices. This typically involves using relative units, such as percentages or ems, for font sizes and other typographic elements, rather than absolute units like pixels. This allows the text to scale and adjust automatically as the screen size or device changes, ensuring that the text is always legible and easy to read.
\n\nFluid web typography is an important concept because it allows web designers to create websites that are easily readable and user-friendly on a wide range of devices and screen sizes. This is especially important in the current landscape, where people use a variety of devices to access the web, including smartphones, tablets, laptops, and desktop computers. By using responsive design techniques, web designers can ensure that their websites are accessible and usable on any device.
\n\nOh wow! So it adjusts to the size of the screen automatically? And how can I come up with harmonic sizes for headings and body text?
\n\nYes, that's correct! With fluid web typography, the text is automatically adjusted to the size of the screen using responsive design techniques. This ensures that the text is always legible and easy to read, regardless of the device or screen size.
\n\nAs for choosing harmonic sizes for headings and body text, there are a few general guidelines that you can follow. In general, it's a good idea to use a hierarchy of font sizes for your headings, with the largest font size reserved for the main heading and smaller font sizes used for subheadings and other hierarchy levels. This will help to create a clear and organized structure for your text, and will make it easier for readers to navigate the content.
\n\nWhen it comes to body text, it's generally recommended to use a font size of at least 16 pixels for easy readability. This can vary depending on the specific font and design, but in general, it's a good starting point. You can then adjust the font size as needed based on the specific requirements of your design.
\n\nOverall, the key to creating harmonic sizes for headings and body text is to experiment and adjust as needed to achieve the desired aesthetic and readability. There is no one-size-fits-all solution, so it's important to be willing to try different font sizes and styles to find the best fit for your specific design.
\n\nWould a modular scale help in this case?
\n\nA modular scale is a tool that designers can use to create a harmonious and consistent visual hierarchy in their designs. It's based on the principle that certain numerical relationships, such as those found in the Fibonacci sequence, can create a sense of order and balance in design.
\n\nTo use a modular scale, a designer selects a base font size and then creates a range of sizes based on the chosen scale. For example, if the base font size is 16 pixels, the designer might create a range of sizes that includes 24 pixels, 36 pixels, and 48 pixels, based on the selected scale. This allows the designer to create a consistent and harmonious hierarchy of font sizes for headings and body text.
\n\nIn terms of creating harmonic sizes for headings and body text, a modular scale can be a useful tool. It can help designers to create a consistent and organized structure for their text, and to ensure that the different font sizes used throughout the design are in harmony with one another. However, it's important to remember that a modular scale is just one tool among many, and that the ultimate goal is to create a design that is aesthetically pleasing and easy to read. As such, designers should be willing to experiment and adjust their designs as needed to achieve the desired results.
\n\nOh yes, experimentation is really important. What about the importance of prototyping for creating things on the web?
\n\nPrototyping is an important part of the design process, including when creating things on the web. Prototyping allows designers to quickly and easily create a working model of their design, which they can then test and refine. This allows designers to try out different ideas and approaches, and to see how they work in practice before committing to a final design.
\n\nThere are many benefits to prototyping when creating things on the web. Some of the key benefits include:
\n\nOverall, prototyping is an essential part of the design process, and can greatly facilitate the creation of effective and user-friendly designs for the web.
\n\nAh, I understand. Would you say that prototyping also helps designers and developers to collaborate better?
\n\nYes, that's correct! Prototyping can be a valuable tool for facilitating collaboration between designers and developers. By providing a working model of the design, a prototype can help designers and developers to communicate and coordinate more effectively.
\n\nHaving a prototype can make it easier for designers and developers to discuss and understand the design, and to identify any potential issues or challenges. It can also provide a common point of reference for designers and developers to work from, which can help to ensure that everyone is on the same page and working towards the same goal.
\n\nIn addition, a prototype can serve as a starting point for the development process, providing a clear direction and a solid foundation for the work that needs to be done. This can help to streamline the development process, and can reduce the need for extensive back-and-forth communication and coordination.
\n\nOverall, prototyping can be a valuable tool for facilitating collaboration between designers and developers, and can help to create more effective and efficient working relationships.
\n\nOh yes, creating better working relationships is so important today. What else could help with this?
\n\nThere are many different strategies and approaches that can help to facilitate better working relationships between designers and developers. Some of the key strategies that can be effective include:
\n\nOverall, the key to creating effective working relationships between designers and developers is to prioritize communication, collaboration, and continuous improvement. By implementing strategies and approaches that support these goals, organizations can create a more cohesive and productive working environment that benefits everyone involved.
\n\nA clear division of labor? Really? I think that working in silos is one of the core problems that contributes to the widening gap between design and engineering, don\u2019t you think? What about design engineering, for example? Or learning from each other at the intersection of design and development? Don\u2019t you think that this would help a lot because it creates a better understanding of each other's problems and mental models?
\n\nYou're right, working in silos can create barriers and hinder collaboration between designers and developers. This is why it's important to promote open communication and collaboration, and to encourage designers and developers to learn from one another and work together to solve problems.
\n\nDesign engineering, which involves the integration of design and engineering principles and practices, is one approach that can help to bridge the gap between design and development. By combining the creative and aesthetic perspective of design with the technical and functional perspective of engineering, design engineering can help to create more effective and user-friendly products and services.
\n\nIn addition, learning from one another at the intersection of design and development can also be a valuable way to improve collaboration and understanding. By fostering an environment in which designers and developers can learn from and support one another, organizations can create a more cohesive and productive working environment.
\n\nOverall, it's important to avoid working in silos, and to instead promote open communication and collaboration between designers and developers. This can help to create a better understanding of each other's perspectives and needs, and can facilitate the creation of more effective and user-friendly products and services.
\n\nI see you agree with me here. One thing that bugs me at the moment is that it seems like there is so much movement in the world of web standards and so many new features are coming to browsers that it sometimes feels like everyone is having a hard time staying up to date. It almost feels like we don\u2019t know what is possible with the web as a material anymore. So we end up designing standard solutions that don\u2019t leverage the potential of the web platform. Would you agree? And how can we solve that?
\n\nYes, it's true that there is a lot of movement and change in the world of web standards, and that can make it challenging for designers and developers to stay up to date. This is especially true given the rapid pace of technological change and the constant evolution of the web as a platform.
\n\nOne of the key challenges in this regard is that many designers and developers are accustomed to working with familiar tools and approaches, and may be hesitant to try new technologies or approaches. This can result in the use of \"standard\" solutions that don't fully leverage the potential of the web platform, and that may not be as effective or user-friendly as they could be.
\n\nTo address this challenge, it's important for designers and developers to continuously learn and adapt to new technologies and approaches. This can involve staying up to date with the latest developments in the world of web standards, attending conferences and workshops, and experimenting with new technologies and approaches.
\n\nIn addition, it's also important to foster a culture of collaboration and learning within organizations. By encouraging designers and developers to learn from and support one another, organizations can create an environment that promotes continuous learning and innovation.
\n\nOverall, staying up to date with the latest developments in web standards and technologies can be challenging, but it's an essential part of creating effective and user-friendly designs. By continuously learning and adapting, designers and developers can ensure that they are fully leveraging the potential of the web platform.
\n\nOh yes, true words of wisdom here. Thank you. Is there a book you could recommend for people who want to learn more?
\n\nI'm sorry, but I am not able to recommend books as I am a large language model trained by OpenAI and do not have the ability to browse the web or access external information. I am only able to provide information based on the knowledge I have been trained on, which has a fixed cutoff point.
\n\nIf you are interested in learning more about web design and development, there are many books available on the subject. A quick online search for books on web design and development should provide a range of options to choose from. Some of the most popular and highly-rated books on the subject include \"Don't Make Me Think\" by Steve Krug, \"Designing Web Interfaces\" by Bill Scott and Theresa Neil, and \"HTML & CSS: Design and Build Websites\" by Jon Duckett. These books and others like them can provide valuable insights and practical guidance for anyone interested in learning more about web design and development.
\n\nI just received a question from Bastian, one of our readers: Would you say that designers should learn to code?
\n\nThe decision of whether or not designers should learn to code is a complex one, and ultimately depends on individual circumstances and goals. There are arguments both for and against designers learning to code, and there is no one-size-fits-all answer to this question.
\n\nOne argument in favor of designers learning to code is that it can help them to better understand the technical limitations and capabilities of the web platform, and to create more effective and user-friendly designs. By having a working knowledge of coding, designers can communicate more effectively with developers and have a better understanding of how their designs will be implemented.
\n\nOn the other hand, there is also a strong argument that designers should focus on design principles and concepts, rather than on specific technical skills like coding. Designers have a unique perspective and skill set that is valuable in its own right, and learning to code does not necessarily make them better designers.
\n\nUltimately, whether or not designers should learn to code is a decision that each individual designer must make for themselves, based on their own goals and circumstances. Some designers may benefit from learning to code, while others may be better served by focusing on design principles and concepts.
\n\nThat\u2019s a very diplomatic answer, thank you. One last question: Tabs or spaces?
\n\nThe debate over whether to use tabs or spaces for indentation in code is a long-standing one, and there is no one right answer. Both tabs and spaces have their pros and cons, and the choice ultimately depends on personal preference and the specific requirements of the project.
\n\nOne advantage of using tabs is that they take up less space than spaces, which can be useful in cases where file size is a concern. In addition, tabs are generally considered to be more flexible than spaces, as they can be adjusted to fit different indentation levels and styles.
\n\nOn the other hand, spaces are often preferred by some developers because they are more predictable and consistent. Since spaces always take up the same amount of space, regardless of the size of the font or the display device, they can be easier to work with in some cases. In addition, spaces are also more widely supported by code editors and other tools, which can make them a more practical choice in some cases.
\n\nUltimately, the choice between tabs and spaces is a matter of personal preference and project requirements. Some developers may prefer tabs, while others may prefer spaces. As long as the indentation is consistent and the code is readable, either option can be effective.
\n\nI heard that tabs are actually better for accessibility? For blind developers, for example. What\u2019s your opinion on that?
\n\nIt's true that tabs can be more accessible for blind developers, as they can be more easily interpreted by screen reader software. Since screen readers typically interpret tabs as a single unit, rather than as a series of individual spaces, they can be easier for blind developers to navigate and understand.
\n\nIn contrast, spaces can be more difficult for screen readers to interpret, as they are typically read out one space at a time. This can make it harder for blind developers to understand the structure and indentation of the code, which can be a barrier to accessibility.
\n\nOverall, while tabs and spaces both have their pros and cons, tabs may be the more accessible option for blind developers. By using tabs for indentation, developers can ensure that their code is more easily interpreted by screen reader software, and can make it more accessible to blind developers.
\n\nThank you. That was a great conversation. I enjoyed it a lot. Is there anything you would like to say to the people who might read our conversation? Any parting words?
\n\nThank you for the kind words! I'm glad that you enjoyed our conversation. As for any parting words, I would just like to remind readers that staying up to date with the latest developments in web standards and technologies is an essential part of creating effective and user-friendly designs. By continuously learning and adapting, designers and developers can ensure that they are fully leveraging the potential of the web platform, and can create designs that are engaging, user-friendly, and innovative.
\n", "date_published": "2022-12-01T11:26:00+01:00", "date_modified": "2022-12-01T14:32:17+01:00", "author": { "name": "Matthias Ott" } }, { "id": "17989", "url": "https://matthiasott.com/notes/chatgpt-explain-websites-william-shakespeare", "title": "ChatGPT, please explain websites in the words of William Shakespeare", "content_html": "Websites, oh websites!
\n\nThou art a vast and wondrous realm, filled with knowledge and information to be explored.
\n\nThou art a tool for communication and connection, allowing us to share our thoughts and ideas with others across the globe.
\n\nThou art a source of entertainment and delight, providing us with endless hours of distraction and enjoyment.
\n\nWebsites, thou art a marvel of modern technology, a gift to humanity.
\n\nLong may thou reign!
\n\n\u2605
\n\nGenerated with ChatGPT, which you can currently test for free during the research preview.
\n", "date_published": "2022-12-01T10:01:00+01:00", "date_modified": "2022-12-01T10:03:35+01:00", "author": { "name": "Matthias Ott" } }, { "id": "17969", "url": "https://matthiasott.com/notes/transient-frameworks", "title": "Transient Frameworks", "content_html": "Since the first days of the Web, people have been thinking and debating hard about the best ways forward. The network, the protocols, the browsers, the documents, HTML, CSS, and Javascript \u2013 all those things are the result of years of countless discussions, fights, mistakes, and course-corrections. And as long as the Web has been around, people have been looking for ways to innovate, to improve, and to move the Web forward.
\n\nIt all started with an era where only a very few early adopters were laying the very foundations of what we take for granted today \u2013 including weird and also wrong decisions that we have to work with today. New HTML elements, for example, were introduced with or sometimes also, famously, without much consensus. Like in the case of the IMG tag that Marc Andreessen casually suggested in an email thread in 1993 and then, although it was met with some opposition, simply released in the next version of his Mosaic browser. A few years later, we witnessed the browser wars with Microsoft emerging as the winning company that would dominate the browser market for quite some time. Just like Netscape did with its Navigator, Microsoft implemented its own exclusive features at the time in an attempt to reinforce Internet Explorer\u2019s monopoly position. That browsers pushed for their own agenda started to become a real problem for web designers and developers who had a hard time building for this fragmented Web and, as a response to all the frustration, in 1998, the Web Standards Project was born. Its goal was to remind browser vendors that \u201cHTML, XML, CSS and the DOM are more than just a set of interesting technologies\u201d and that by defining their own standards, companies were actively hurting both authors and users of the Web. I sometimes wonder how the Web would look like today if the people who started the Web Standards movement had remained silent or if their project would not have been successful.
\n\nBut their efforts were successful and it is one of the main reasons why we have quite a healthy standards process today, with all browser vendors and developers at companies like Google, Apple, or Mozilla working towards the same goal: a consistent and thorough implementation of W3C-specified standards. These open and evolving platform standards are the foundation of everything we build on the Web today. They move slower than some of us might wish, but that\u2019s intentional. Everyone has learned from the mistakes of the past where elements like
\n\nThe web platform in 2022 is less fragmented and more powerful than ever. Not only in terms of occasional new HTML elements like picture, but also when it comes to new CSS features. CSS Grid arrived in almost all major browsers roughly at the same time. And the same thing is now happening with features like :has(), Container Queries, or Cascade Layers. New JavaScript Web APIs make the platform more capable than ever and native Web Components are opening the door for technology-agnostic, robust implementations of custom user interface components.
\n\nIn recent years, JavaScript frameworks have dominated the public discussion. To many developers, they not only offer a very convenient way to work, but they also seem to be superior to web standards that have even been labeled as being \u201cbroken\u201d by some. Why?
\n\nMaybe Jeremy is right. Maybe the majority of full-stack developers doesn\u2019t trust native platform features enough. Maybe they\u2019re under the impression that much of what they\u2019re trying to do is so sophisticated and advanced that native browser features and plain HTML, CSS, and JavaScript can\u2019t possibly be powerful enough to compete. Maybe they believe that this is also the reason why frameworks exist in the first place: because browsers are inconsistent, unreliable, and antiquated, and because plain HTML, CSS, and JavaScript are limited and not up to par with the requirements of modern web development. This is exactly the card some frameworks play when they proclaim on their websites that \u201cbest practices don\u2019t work.\u201d
\n\nYes, frameworks often provide a great developer experience, they make things easy that used to be harder to achieve before, and they seemingly work at the bleeding edge of technology and innovate at mind-blowing speed.
\n\nAnd as, once more, Jeremy Keith points out in his great talk In and Out Of Style, we depend on all the innovation that happens in the faster, more trendy corners because people build things to solve problems for which the standards might not offer a solution yet. Many of the latest additions to HTML, CSS, and JavaScript first existed as JavaScript libraries or frameworks or pre-processors or polyfills and then found their way into the standards process, back into the layers of web technology that move slower and are more resilient.
\n\nBut does this make web standards and native platform features weaker or even obsolete? To the contrary. Frameworks come and go. They are transient. Web standards, on the other hand, are the reason the Web is good now and it will become even better in the future. Web standards are why we can all build for the Web using a shared understanding of what it actually means to build resilient, performant, and accessible solutions with the foundational material of the Web. In fact, it feels like the pendulum has just started to swing back again as people realize just how bad frameworks are for performance and as they start exploring new CSS features, native web components, and what can be built on top of all that. Let\u2019s just not forget that we need to take everyone with us, including clients, managers, content strategists, designers, and developers on all sides of all front- and backends.
\n\nHappy Blue Beanie Day, everyone.
\n", "date_published": "2022-11-30T23:30:00+01:00", "date_modified": "2022-12-01T00:26:11+01:00", "author": { "name": "Matthias Ott" } }, { "id": "17160", "url": "https://matthiasott.com/notes/leaving-twitter-behind", "title": "Leaving Twitter Behind", "content_html": "Twitter is not well. Many of us were worried that Elon Musk might rapidly change the face of the platform. But only very few expected things to go down so rapidly. After the latest deadline to respond whether they want to stay, it looks like about 75 % of the remaining workforce has not opted in to the tech billionaire\u2018s \u201cextremely hardcore\u201d Twitter 2.0 and will therefore leave the company. From the outside, it all looks like a complete mess and that it\u2019s only a matter of time until we see a data breach or a major outage, because nobody can guarantee the stability of the platform anymore.
\n\nFor many of us, Twitter was a special place on the Web. It was the place where not only celebrities, politicians, or journalists were commenting on the latest trends in society. It was also the home of the majority of the Web community. On Twitter, we would meet people who shared our values and interests, we got to know peers in our industry, and many of the people we briefly tweeted with at first became good online \u2013 or even offline \u2013 friends over the years.
\n\nDespite many questionable management decisions or problems with moderation, despite changes to the timeline and many failed attempts to introduce new features, Twitter prevailed because of the people on the platform who made this comparatively small social network relevant and interesting.
\n\nNow that everything seems to go up in flames, people are posting farewell messages or are retweeting some of their favorite tweets for a last time. There are lots of emotions involved, which just shows that many of us would have loved to see this place thrive just a little longer. But what I also noticed is that many of those who are jumping ship and getting an account on Mastodon, are mentioning that \u201cit feels like the early Twitter from 2009\u201d. There was something missing that they now recognize while scrolling down a much calmer, chronological timeline again.
\n\nBecause, as sad as all this is, Twitter already had already become but a shadow of it\u2019s former self. Many people had already turned their back on the attention-sucking algorithmic version of what had once been a place to have amazing conversations. Those who stayed didn\u2019t do it because Twitter was becoming better, but because they still valued their remaining friends on the site and, maybe, also because they kept clinging to the memory of early Twitter, unwilling to let go. Maybe the Twitter we all loved was long gone, anyway.
\n\nThe end of Twitter as we know it might be a perfect time to take a step back and review our use of social media in general. Whenever a site like Twitter goes down, it takes a vast amount of data and a large chunk of our collective web history down with it. And that\u2019s also true for all the other social media platforms people are now starting to use as alternatives.
\n\nThere is one place, however, that will stay with you whatever happens to all the platforms you post on: your personal website. So if you don\u2019t have your own website yet, get a domain today, own your content, and publish on your own site. This doesn\u2019t mean that you need to stop using social media or that you should use solely your website instead of other tools of communication. But think about the things that you would like to preserve or share that aren\u2019t ephemeral and temporary. For those things, those thoughts, a personal website is the perfect place. Plus, it is the perfect playground to explore new web technologies or try out new stuff. The possibilities are endless.
\n\nIn every ending there is a new beginning. The end of Twitter is also a huge opportunity to start something new and amazing, to build new communities and new tools for communicating online. It is a chance to explore new ways to connect our websites to each other, develop new formats for publishing our thoughts, or rediscover alternative ways to discover content, like RSS. And, if you look closely, you can already see and feel a spark of enthusiasm all around. People are linking to their blogs, are sending out their newsletters, or are suddenly reviving old side-projects. Almost as if they just needed permission to finally move on.
\n\nThe end of Twitter could prove to be a blessing for the Open Web.
\n\nOr, to quote Brent Simmons: \u201cThe web is wide open again, for the first time in what feels like forever.\u201d
\n", "date_published": "2022-11-18T12:02:11+01:00", "date_modified": "2022-11-18T12:02:11+01:00", "author": { "name": "Matthias Ott" } }, { "id": "16863", "url": "https://matthiasott.com/notes/converting-your-twitter-archive-to-markdown", "title": "Converting Your Twitter Archive to Markdown", "content_html": "The bird is not well. So it is time to request and download an archive of your Twitter data now, if you haven\u2019t done this recently. After you have requested your archive, it can take a while until you receive it. I requested my archive on the day Elon walked in and got an email notice that my archive is ready for download after about a day. I suppose it might take a little longer at the moment because more people might request their data.
\n\nOnce your archive is on your machine, you will have a browsable HTML archive of your tweets, direct messages, and moments including media like images, videos, and GIFs. This is nice, but it also has a few flaws. For one, you can\u2019t easily copy your Tweets somewhere else, for example, into your website because they are stored in a complex JSON structure. But even more dangerous: your links are all still t.co links. This hides the original URL you shared and redirects all traffic over Twitter\u2019s servers. But this is not only inconvenient, it is also dangerous. Just imagine what happens when t.co ever goes down: all URLs you ever shared are now unretrievable. And then, there are the images: all images in your archive are much smaller than the ones you originally shared, and when you click to expand them, you are taken to the Twitter website once again. So, your Twitter archive is far from being a safe, independent backup in case you want to delete your account or if Twitter ever dies completely.
\n\nBut luckily, there is help in the form of a Python script called Twitter Archive Parser, a project startet by Tim Hutton.
\n\nThis script does the following:
\n\nThe most challenging part of using it might be that you need to install Python3 first (\ud83d\ude05). But once this is done, all you have to do is to put the little parser.py script into your downloaded Twitter archive folder and run it via python parser.py
.
And that\u2019s it. My Tweets are now available as Markdown and all links are converted into the originally shared URLs. \ud83c\udf89
\n\nLike in this Tweet from 2011:
\n'I've been doing this for fifty years and I know what I'm doing!' Rand v Jobs: when egos collide http://www.creativereview.co.uk/cr-blog/2011/october/jobs-v-rand #design\r\n\r\n(Originally on Twitter: [Wed Nov 02 07:05:48 +0000 2011](https://twitter.com/m_ott/status/131628052932341761))
\r\n
If you also want to download high-res versions of your images, you can optionally do that as well, but it will ask you first \u2013 and downloading them can take a little while.
\n\nThere are other scripts that do similar or slightly other things \u2013 you can find links to some of them in the GitHub repository as well \u2013 yet in my case those two little scripts did the job well and it was all I needed (for now). Thanks a lot, Tim! \ud83d\udc4f
\n", "date_published": "2022-11-15T12:24:00+01:00", "date_modified": "2022-11-22T23:16:50+01:00", "author": { "name": "Matthias Ott" } }, { "id": "16854", "url": "https://matthiasott.com/notes/the-wrong-question", "title": "The Wrong Question", "content_html": "When author Jim Collins first met his hero Peter Drucker, whom many regard as the greatest management thinker of all time, the two men where at very different points in their lives. Here, a man in his thirties, eager to start a new endeavor, a new self-directed path, but equally terrified by the uncertainty of the outcome. There, in his rattan Wicker chair, the seasoned and accomplished 86-year-old \u2013 curiously asking questions and answering those of his counterpart with eloquence and wisdom.
\n\nWhen their long conversation came to an end, Collins, thankful for all the advice he had received, asked Drucker how he could pay him back. Drucker replied:
\n\n\u201cYou have already paid me back because I have learned.
\n\nBut I do have a request: that you change your question a little bit.
\n\nIt seems to me you spend a lot of time trying \u2014 worrying about if you\u2019re going to survive. Well, you\u2019ll probably survive. And you spend too much time thinking about if you\u2019ll be successful. It\u2019s the wrong question.
\n\nThe question is, how to be useful.\u201d
\n\u2013
\n\nFrom a great conversation on the Tim Ferriss Show, episode #361. Transcript.
\n", "date_published": "2022-11-15T09:53:00+01:00", "date_modified": "2022-11-15T12:40:29+01:00", "author": { "name": "Matthias Ott" } }, { "id": "15334", "url": "https://matthiasott.com/notes/it-wasnt-written", "title": "It Wasn\u2019t Written", "content_html": "It takes years to become good at it. So we read books, take classes, and visit workshops to become better. And still, it may take a lifetime to master it. But more than anything, it is one of the things that makes us human:
\n\nWriting.
\n\nBut now, the algorithms are coming for us. Artificial intelligence algorithms, in particular GPT-3, are not only able to produce news reports, product descriptions, or SEO mashup pieces today, but also texts in the styles of different authors that read astonishingly well, especially to the more casual reader.
\n\nServices that let you create document outlines for certain topics or that write whole long-form blog posts within seconds are popping up by the dozens. Just take a look at the huge list at the end of this post. Currently, the quality of the generated texts still varies. You might end up with a piece that feels clunky and unfinished, or you might read a text that is more or less indistinguishable from something a human being could have written. Given the rate of innovation in the field of AI, however, very soon we won\u2019t be able to tell whether a human being or an algorithm has written what we are reading.
\n\nHow will we use those tools?
\n\nAs a bicycle for the mind? For example, to improve our own writing by generating alternative phrases or paragraphs that we can use as inspiration or starting points? Or, will we use them to first replace the junior copywriters at our company and later everyone else who is creating written pieces?
\n\nBesides the ethical implications of all that, I wonder, however: What about the process of writing? What about intention and the careful choice of words? What about the electricity of metaphor and the magic of rhythm? What about evoking emotions in our audience? What about imagination? What about personality?
\n\nEverything an AI burps out will always be \u201cproduced\u201d. It will never be \u201cwritten\u201d.
\n\nSturgeon's law states that \u201cninety percent of everything is crap\u201d (thanks, Jeremy). This law can easily be applied to written content on the Internet. Out of that 90 %, a large percentage will soon be coming from algorithms that will reproduce information at a speed and cost no human will be able to compete with.
\n\nBut the remaining 10 %, those are our playing field. Genuine, respectful, imperfect, imaginative, inspirational \u2013 and full of the evocative power of language.
\n\nThe hellsite has a new king. And so, many are moving from Twitter to other social networks like micro.blog or Mastodon or are at least trying out those other options while waiting how things might develop.
\n\nOne of the first questions that comes to mind is: how can I post on both Twitter and Mastodon so that I don\u2019t have to post my status updates separately? A good idea and something that can be done in various ways.
\n\nThere are, however, a few problems that come with cross-posting from one platform to another. For one, it can look a little weird when your posts on one platform obviously look like they have been written for another platform. Your tweets might contain user handles from Mastodon that don\u2019t exist on Twitter or a Mastodon post could contain a \u201cRT\u201d (for retweet) or quoted tweets. This can look like you don\u2019t really care about the people spending time on the other platform. But especially the user handles can be problematic because people might not know what to do with them or why they look so differently.
\n\nBut even if you are fine with all that, cross-posting doesn\u2019t solve one of the biggest problems when it comes to posting content online: if you post your thoughts into a silo like Twitter, they are, to a certain extent, out of your control. You can delete (or maybe even edit) them, yes. But when a platform goes down, you end up with the problem of having to export and backup your data again.
\n\nWouldn\u2019t it be great to be able to post tweets, toots, or other status updates on your own site first? Especially the more important ones that you want to preserve? At least, your own site will be with you even when Twitter goes away or your account suddenly gets suspended. This is one of the basic principles of the IndieWeb: publish on your own site, syndicate elsewhere. Or short: POSSE.
\n\nYou can see an example here on my site. I am syndicating all posts of my microblog section to Twitter, micro.blog, and Mastodon.
\n\nThe first thing you need to do to achieve all this is to create a section on your site that you can use to post short status updates. This microblogging section then needs an RSS feed. Mine is this one, for example. Whenever you post a status, a new item will be added to the feed. And we can then use the feed to send new items to Mastodon, Twitter, or any other platform.
\n\nI won\u2019t cover in this post how you can set up an RSS feed for your site. Yet it shouldn\u2019t be that hard to find solutions online for whatever you are using under the hood of your site. And for the sake of brevity, I will also focus on syndicating your posts to Twitter and Mastodon only.
\n\nWith an RSS feed in place, the next step is now to use a service that will send new feed items to the different platforms. We\u2019ll use IFTTT for that, so you will need at least a free account there. Of course, you could also use Zapier or any other automation tool that you prefer.
\n\nLet\u2019s start with how you can set things up for Twitter.
\n\nThe first step is to create a new Applet:
\nNow, under \u201cIf this\u201d, select \u201cAdd\u201d to add a trigger and search for and select \u201cRSS Feed\u201d. Select \u201cNew feed item\u201d, which creates a trigger that fires every time a new item is added to your feed. Paste in your RSS feed URL and finish this step via the \u201cCreate trigger\u201d button.
\nNext, we need to define what should happen when the trigger fires. Select \u201cAdd\u201d next to \u201cThen that\u201d and search for and select \u201cTwitter\u201d. Select \u201cPost a tweet\u201d or also \u201cPost a tweet with image\u201d. Connect your Twitter account. For the Tweet text, you can use the fields that are available under \u201cAdd ingredient\u201d. You can use {{EntryTitle}}
,{{EntryUrl}}
, or {{EntryContent}}
, for example.
Select continue, rename your applet if you want to, and complete the process with the \u201cfinish\u201d button. And you\u2019re done! \ud83d\ude4c
\n\nIf you have a free account, your applet will only run once every hour or so. But whenever there is a new item, IFTTT will automatically post a tweet for you.
\n\nWith Mastodon, setting up syndication is a little bit trickier. That\u2019s simply because there is no built-in integration for Mastodon in IFTTT. Thankfully, I found a helpful article by Kelson Vibber about \u201cHow to Post to Mastodon From Anything Using IFTTT\u201d.
\n\nYou can still post to Mastodon using a feature called Webhooks. IFTTT Webhooks let you create Applets that can make or receive any kind of web request. So first, we need to activate that.
\n\nGo to IFTTT Webhooks and activate the feature by clicking on \u201cConnect\u201c button.
\n\nNow we need to make sure IFTTT is allowed to make a request to post stuff. For this, we need to add IFTTT as an application in the settings of your Mastodon account. Go to Preferences > Development/Your Applications (e.g. on mastodon.social you\u2019ll find it here). Add a new application and enter a name for it. Under Application website, you need to add the full URL of your IFTTT Webhook. You\u2019ll find it on the Webhooks Settings page. From the checkboxes below, only select write:statuses
.
Now, everything is ready to create our applet. The first step is the same like in the Twitter example. Create a new Applet and add your RSS feed as the trigger. Now comes the juicy part: Select \u201cAdd\u201d next to \u201cThen that\u201d and search for \u201cWebhooks\u201d, select it, and then choose \u201cMake a web request\u201d.
\nNow you need to add the details of the request to Mastodon.
\n\nThe \u201cURL\u201d should look like this:
\n\nhttps://mastodon.example.com/api/v1/statuses?access_token=1234567890
Make sure to replace the mastodon.example.com with the domain of your instance\u2019s server! Also replace 1234567890 at the end of the URL with the access token of the application you created in Mastodon in the settings. To find the token, click on the Application and look for \u201cYour access token\u201d.
\n\nThe \u201cMethod\u201d should be POST
.
For the \u201cContent Type\u201d, select application/x-www-form-urlencoded
.
Ignore \u201cAdditional Headers\u201d. For the \u201dBody\u201d of the Request, use something like
\n\nstatus={{EntryContent}}
You can also add other ingredients like the URL or date of the post. Just make sure to include the status=
part so that everything is working properly.
Lastly, select continue, rename your applet if you want to, and complete the process with the \u201cfinish\u201d button.
\n\nAnd you\u2019re done again!
\n\nNow, whenever you post a status update on your own site, it will show up (after a little delay) on both platforms. \ud83c\udf89
\n", "date_published": "2022-10-31T02:11:00+01:00", "date_modified": "2022-11-08T12:01:08+01:00", "author": { "name": "Matthias Ott" } }, { "id": "14995", "url": "https://matthiasott.com/notes/suspension", "title": "Suspension", "content_html": "It could happen out of the blue, without any warning. It could happen without you knowing what you did wrong. It could happen today.
\n\nTwitter could just suspend you.
\n\nGone. Your Tweets, your followers, your thoughts, your jokes, your conversations. They\u2019re just gone.
\n\nGone, not because you did something wrong, like not abiding by the Twitter rules. No. Gone, because a flawed algorithm or an overwhelmed moderator decided that something justified a suspension. Maybe you wrote something that could be misinterpreted when taken out of context. Or, an army of trolls or bots with bad intentions reported you. You probably wouldn\u2019t know because Twitter just wouldn\u2019t tell you. They would just erase your content.
\n\nGone. Years of careful consideration, of sharing your knowledge, of building connections, of building a reputation.
\n\nMy friend Manuel Matuzovi\u0107 just got his account suspended by Twitter. He does not know why \u2013 Twitter did not yet give a reason for banning him.
\n\nThankfully, Manuel still has a platform that he owns. A platform that nobody can simply suspend or delete. His own personal website.
\n\nI\u2019ve written before about the many good reasons why a personal website is your ultimate home on the Web. Twitter randomly banning users by accident is just another example of the many ways you can lose your content if you don\u2019t own it.
\n\nSo if you are on Twitter, download a copy of your data from time to time. In fact, it could be a good idea to do it this week before the Elon Musk deal might close. You could also connect your Twitter account to your website and archive your Tweets to take ownership of them. Or, you can do it like Jeremy Keith and many others on the IndieWeb and write Tweets and even replies via your website and post them to Twitter from there.
\n\nBut most importantly, always write your most important thoughts on your own site. You can share the link on as many platforms as you like and have conversations with anyone who wants to connect with you and your work. But nobody can take it from you. You are in control. Forever.
\n", "date_published": "2022-10-26T00:36:00+02:00", "date_modified": "2022-10-26T08:37:09+02:00", "author": { "name": "Matthias Ott" } }, { "id": "14737", "url": "https://matthiasott.com/notes/none-of-your-business", "title": "None of Your Business", "content_html": "I bet you know this: You\u2019ve created something \u2013 a drawing, a layout, a video, a piece of code, or a blog post \u2013 and after you\u2019re more or less done, you pause and you look at it. And you don\u2019t like it.
\n\nMaybe it is a little detail that is not right, or maybe you don\u2019t like the whole piece for reasons you cannot explain. Whatever it is, you are just sure that this one piece of work isn\u2019t particularly good. Or is it?
\n\nWhenever I\u2019m in such a situation or people mention feeling the same way, I have to think about an interview Debbie Millman did for her Design Matters podcast. In their lovely conversation, comic artist Lynda Barry told a story about one of her teachers in art school. Lynda had just finished a drawing. She and her teacher were looking at it, when Lynda said: \u201cI don\u2019t really like this drawing.\u201d Her teacher paused, then she went:
\nWhat?
\n\n\u201cThe drawing is already here. It\u2019s none of your business whether you like it or not.\u201d
\n\nFor Lynda, this was the crucial moment of her entire career. She realized that there is another way to look at her work besides just asking \u201cdo I like it or not?\u201d
\n\nYou don\u2019t have to like your work for it to work. Liking or not liking it isn\u2019t the essential part of making something. As long as you are the only judge and as long as it is unpublished, even, what\u2019s the difference whether you like it or not? Or, to put it another way: everything you create will only work if it helps other people or if they like what you created. Every piece of art that is supposed to have a value and impact in our culture is meaningless unless it is seen by someone. Only by the interplay between your work and the people who interact with it, its real value will reveal itself.
\n\nSo, if you did your best when you created a piece of work, but your perfectionism or fear of judgement or lack of confidence makes you not like it, ask yourself: who is this piece for and will it work? And then, allow it to exist, to grow, to evolve, to improve, to fade away, or to shine. But first, make it work.
\n", "date_published": "2022-10-15T22:43:00+02:00", "date_modified": "2022-10-17T14:23:55+02:00", "author": { "name": "Matthias Ott" } }, { "id": "14715", "url": "https://matthiasott.com/notes/shitty-code-prototypes", "title": "Shitty Code Prototypes", "content_html": "I love building prototypes. They allow me to explore and sketch ideas, test my assumptions, and try out things at an early stage to make better design decisions. \nPrototyping is the single best tool we have in our toolbox as designers and developers. And because anything can be a prototype, I use whatever gets the job done: Sometimes, I grab a pen and do a series of rough sketches. Sometimes, I use prototyping software like Adobe XD or ProtoPie to try out an idea for an interaction. And sometimes, I write code.
\n\nPrototyping with code is my favorite way to build prototypes whenever I want to work with the real material of the Web and sketch out an idea in the browser with HTML, CSS, and JavaScript. Maybe it\u2019s a layout that uses CSS Grid, a GSAP animation test, or a little interactive component. Whatever it is, I try to focus on the essence of what I want to try out and learn. What I don\u2019t focus on, however, is code quality. And this is where it can get complicated.
\n\nWhat I\u2019ve experienced several times now, is that other team members will misunderstand this conscious decision to not write production code in a prototype. Some engineers will wonder why code prototypes were created when they can\u2019t even reuse the code of those prototypes in production. To project managers, it sometimes feels like we are doing work twice and are wasting precious time and budget. Maybe the problem also lies in how differently designers and developers understand prototypes. Here\u2019s Bill Buxton quoting a junior industrial designer:
\nMaybe that\u2019s it: To me, a prototype is a means to an end, a rough sketch, a shitty first draft. It will probably even be thrown away once we\u2019ve found what we were looking for. A code prototype is not a first step in the process of building the final thing, it is a tool that helps you decide whether and how you should build something in the first place.
\n\nA prototype lets us make better design decisions at any step of the process because we can see what works. And to see what works, we don\u2019t need production-ready code. A shitty code prototype will do.
\n", "date_published": "2022-09-29T00:50:37+02:00", "date_modified": "2022-09-29T00:50:37+02:00", "author": { "name": "Matthias Ott" } }, { "id": "14570", "url": "https://matthiasott.com/notes/better-bridges", "title": "Better Bridges", "content_html": "I couldn\u2019t agree more to what Dave wrote in his recent blog post about the increasing demands of the front-end web: the job of a front-end developer is getting ever more complex. From writing well-structured, semantic HTML to the latest (fantastic) new CSS features, to accessibility, performance, animation, data handling, components, frameworks, and so many more things \u2013 it almost seems impossible to become an expert at everything a developer is expected to know today. Therefore, we need to find ways to split the responsibilities. We need new roles at the intersections.
\n\nAt the same time, I see more and more designers struggling to get an idea of what is possible even with the most basic materials we all build with: HTML, CSS, and JavaScript. Just take all the new CSS layout features as an example: CSS Grid, Flexbox, multi-column layout, fluid layouts with clamp(), min(), and max(), and so on. Browsers are more capable today than ever before and layout on the Web isn\u2019t a hack anymore. Yet in my experience, and from asking designers in my workshops, I know that most designers (unless they write CSS themselves) have no idea that the very fundamentals of how we do layout on the web have changed unlike ever before. How are they going to make the best use of what\u2019s possible and design materially honest solutions when they don\u2019t even know those features exist let alone have an idea how they work?
\n\nSo yes, our jobs as builders for the front-end web have become mind-bogglingly complex and inventing new roles will help to release some of the pressure we all feel. But there is still the need to learn from each other across disciplines, as well. Designers need to know what is possible in the front end. Front-end developers have to get a better understanding of design basics to fill the gaps in a design, for example, between breakpoints.
\n\nAdding roles at the intersections could provide the knowledge needed to close those gaps. Because instead of fiddling around with something you don\u2019t fully understand or don\u2019t feel comfortable with yet, especially when working under a tight deadline, imagine having someone who can actually show you the most important bits and provide the necessary context. What would that leave you with? The knowledge and understanding of why and how to do it on your own next time. And: more time to do what you are best at doing.
\n\nAt the same time, it is important to not shift all the responsibility upon the person filling a new role like \u201cDesign Engineer\u201d, \u201cCSS Engineer\u201c, or \u201cFront-end Designer\u201d. Building for the Web is a team sport and it is crucial that we never stop to talk to each other and learn from each other frequently, openly, and with a beginner\u2019s mind, regardless of each other\u2019s roles and responsibilities. Learning from each other happens gradually and sometimes slowly, but it is one of the superpowers of cross-functional teams. And yet again, roles at the intersections can help with this, because they increase the surface area for collaboration.
\n\nJust like Dave, \u201cI don\u2019t have answers, only questions\u201d. Adding bridge roles is a good thing and something that does happen already. In fact, I am working in a design engineering role in many of my projects these days. But what else can we do about the growing complexity of the Web? Do we need to eliminate 80 % of the work? Do we need to improve education? Do we need to become more open and supportive as a community? Do we need to talk more, write more, teach more, prototype more, and share more best practices? Or, do we maybe need less? Do we need to focus on the essentials?
\n\nA while ago, I wrote about Dieter Rams\u2019 principle of \u201cless but better\u201d. What could \u201cless but better\u201d look like for the front-end web?
\n", "date_published": "2022-08-31T00:40:00+02:00", "date_modified": "2022-08-31T00:43:50+02:00", "author": { "name": "Matthias Ott" } }, { "id": "14494", "url": "https://matthiasott.com/notes/foundations", "title": "Foundations", "content_html": "Please use whatever tool gets the job done and makes sense for you.
\n\nBut then again, I\u2019ve seen so many frameworks and tools come and go that it can be dangerous to put all your eggs in one basket. You know what really is time well spent and a worthy investment into your future, your career, and your team? Learning the basics and becoming really good at them.
\n\nTherefore, don\u2019t let tools cover up weak spots in your or your team\u2019s knowledge. Because what looks like a flaw at first glance is actually an opportunity to learn and improve.
\n\nAnd don\u2019t let any tool make you believe that it isn\u2019t worthwhile to learn the foundations of web technology or let it stop you from participating in the vital dialogue that pushes the platform and its standards forward.
\n", "date_published": "2022-08-10T16:17:00+02:00", "date_modified": "2022-08-10T16:22:14+02:00", "author": { "name": "Matthias Ott" } }, { "id": "14369", "url": "https://matthiasott.com/notes/detecting-css-selector-support-with-javascript", "title": "Detecting CSS Selector Support with JavaScript", "content_html": "There are many ways to adjust your CSS code to a browser\u2019s support for a specific CSS feature. If you want to check if a certain property is supported, you can write a feature query using the @supports at-rule, for example:
\n@supports (display: grid) {\r\n div {\r\n display: grid;\r\n }\r\n}
\r\n
If the browser supports display: grid
, it will apply all the styles inside of the at-rule. Otherwise, it will just ignore the whole block.
If you want to check for support of a whole selector, you can use the @supports selector()
function, which has surprisingly good browser support.
@supports selector(:nth-child(1 of .class)) {\r\n\t/* Do something\u2026 */\r\n}
\r\n
In case you want to learn more, Chris Coyier also wrote a nice piece about how to use @supports selector().
\n\nIn a current project, however, I ran into a situation where I needed to test for support of the relatively new :where() selector. The tricky situation: both :where()
and @supports selector()
landed in browsers at about the same time, so if you want to check for support in an older browser, like Safari 13, you\u2019re out of luck. Providing a sensible fallback for older browsers was one of the requirements, though, so I had to look for an alternative. And in the end, I decided to use JavaScript.
I found the solution in a post by Lea Verou. In 2011, she wrote about how to test for CSS selector support by creating a new
You probably know this situation. You are working on a project and one of the npm packages you are working with contains a nasty bug or is lacking a critical feature. Of course, you first head over to the repository, e.g. on GitHub, and draft an issue. Maybe you even write a fix yourself and create a pull request. But, depending on the project, it might take a while until someone finds the time to review your issue or merge and publish the pull request. Sometimes, the project even is completely unmaintained. Whatever the reason, you might want to patch the package yourself to be able to move on. So what do you do?
\n\nWouldn\u2019t it be ideal to be able to fix the issue immediately but still maintain the connection to npm, being able to update the package with all other dependencies?
\n\nThis is what patch-package does.
\n\nYou install it via npm
\nnpm i -D patch-package
\r\n
And add a script command to your package.json
file that runs after npm install
:
\"scripts\": {\r\n+ \"postinstall\": \"patch-package\"\r\n }
\r\n
Now you can fix the bug in one of your dependencies, hit save, and, when you\u2019re done, run:
\nnpx patch-package your-package-name
\r\n
This will create a .patch file that contains your changes. All the patches you create this way are then applied automatically when you use npm
(or yarn
).
Patch-package might not be the right solution for larger fixes or when you are writing a change that is really consequential. Also keep in mind that you might not be able to oversee all the consequences of a change, also regarding other packages. But for minor fixes, patch-package can save your day.
\n\nAnd, once your pull request has been merged, you can \u2013 and should \u2013 remove your patch again, of course.
\n", "date_published": "2022-07-20T16:58:28+02:00", "date_modified": "2022-07-20T16:58:28+02:00", "author": { "name": "Matthias Ott" } }, { "id": "14252", "url": "https://matthiasott.com/notes/brain-dump", "title": "Brain Dump", "content_html": "You know what makes it so easy for many people to just dump their thoughts into a silo like Twitter instead of writing a post on their own site?
\n\nYou don\u2019t have to come up with a title for your post.
\n", "date_published": "2022-07-13T20:23:31+02:00", "date_modified": "2022-07-13T20:23:31+02:00", "author": { "name": "Matthias Ott" } }, { "id": "14179", "url": "https://matthiasott.com/notes/level-up-your-headings-game", "title": "Level Up Your Headings Game", "content_html": "Providing a proper document outline is one of the most effective things you can do to improve the accessibility of your HTML. Like the headings of the chapters and subchapters in a book, the structure of the heading elements in our HTML should have a semantic, tree-like structure. The most important headline, most often also the title of your document, is the one and only
The advantage of providing such a clear structure is not only that you force yourself to structure your document more thoroughly. The headings of your document are also a way to provide your users with a first glimpse of what is on your page and how it is structured. Scanning the headings of your page, users get a feeling of what you want to tell them and if that\u2019s what they are looking for. The same is true for screenreader users, but they can also use your headings as a tool to quickly navigate to the sections that interest them. VoiceOver, the screenreader built into macOS and iOS, for example, does provide a feature called \u201crotor\u201d. With the rotor, users are able to navigate through a list of headlines. But this feature can only be used effectively if the document outline is properly structured. If your document provides a mess of different heading levels all mixed up (maybe also because you used headings to visually style text), it will be much harder for users to understand the structure of the page.
\n\nLong story short: a nicely structured document outline, with a clear hierarchy and no skipped heading levels, is one of the hallmarks of accessible web design. And it is also a requirement for a website to pass an accessibility test. But what can you do if you want to check the heading structure of a page? Do you open up the developer tools of your favorite browser and start clicking through the document structure, opening all the nodes to check whether there is a headline in there and if it has the right level? Although this would be very dutiful, there are, of course, more efficient ways to check your heading structure. There is now a plethora of options out there that can help you with this. Some list all headings for you, others highlight the heading levels directly on the page, many do both. But which tool is good? What are people using most often? I wasn\u2019t sure myself, so I asked Twitter:
\nWhat tool do you use when you want to see the headings outline of an HTML document?
— Matthias Ott (@m_ott) July 12, 2022
The amount of answers I received was staggering (thank you all!) and while a few people mentioned tools I already knew, many more were useful additions I didn\u2019t know before. Here is a little list of (almost) all the answers I got. Some of those tools are also useful to check for other accessibility issues, like color contrast, general markup issues, or missing alt attributes. So make sure to not just pick the first one from the list but try out a few of them:
\n\nYesterday, I shared how to test a whole website for accessibility issues with Pa11y and how to output the results as HTML. I also shared the link on Twitter, as I usually do, and Darek Kay chimed in, mentioning an alternative tool he created: Evaluatory.
\n\nJust like Pa11y, Evaluatory scans a website for accessibility and markup issues. Under the hood, it uses Deque Systems\u2019 axe-core to test for accessibility issues and html-validate to validate your markup. It then outputs the results into a folder as HTML as well. Compared to the Pa11y check, Evaluatory comes with a few nice improvements. It checks for issues at multiple breakpoints at the same time, it can emulate dark mode, disable JavaScript (yes, Heydon!), and also run tests for all URLs referenced in a sitemap. And, it even takes screenshots for different breakpoints of each page it tests.
\n\nYou can install it globally via npm, for example:
\nnpm install -g evaluatory
\r\n
And then run a test against a sitemap:
\nevaluatory --sitemap https://www.porsche.com/germany/Sitemap.smap
\r\n
And this is how the HTML looks like after the tests are finished \u2013 in my case, in dark mode:
\nI really like the way Evaluatory presents the results! You get a link to the web page that was tested for quick access and can also open a detailed summary for each page. Here, the test results are sorted by category (base, axe-core, html-validate, and screenshots). A link to the respective rule that was violated is provided for more information and you also get syntax-highlighted code snippets which makes it easy to find the lines in your code that are affected. Overall, Evaluatory looks like a great addition \u2013 or even an alternative \u2013 to scanning your sites with Pa11y. Nice work, Darek! \ud83d\udc4f
\n", "date_published": "2022-07-12T14:54:00+02:00", "date_modified": "2022-07-12T14:56:37+02:00", "author": { "name": "Matthias Ott" } }, { "id": "14071", "url": "https://matthiasott.com/notes/generating-accessibility-test-results-with-pa11y-ci", "title": "Generating Accessibility Test Results for a Whole Website With Pa11y CI", "content_html": "This week, I\u2019m doing an accessibility audit for a client. One of the first steps is to have a general look at the site. You can \u2013 and should \u2013 do that manually for sure, but another very useful way to get a good first impression of how good or bad things are is to use an automated tool like Pa11y.
\n\nPa11y is a set of free and open-source tools with which you can test a website for all kinds of accessibility (a11y) issues like insufficient color contrast, missing alt texts, missing labels, wrong heading levels, problems regarding ARIA roles, or general HTML validation issues. There are different tools available: pa11y itself is a command-line interface to run a one-off accessibility test against a web page. Pa11y Dashboard is a web interface for Pa11y to constantly keep an eye on the current a11y status of one or more websites. It is powered by Pa11y Webservice. And then, there is Pa11y CI, an accessibility test runner built using Pa11y that lets you run tests as part of a Continuous Integration environment. This is especially useful if you want to make sure that no issues make it to the live site.
\n\nNode.js is a prerequisite \u2013 you might want to install it via nvm first. Then, install Pa11y globally via the command line:
\nnpm install -g pa11y
\r\n
Now, you can run tests against a URL\u2026
\npa11y https://example.com
\r\n
\u2026or a file:
\npa11y ./path/to/your/file.html
\r\n
Pa11y will run the test and display the results in the terminal.
\nThere is much more you can do with Pa11y, in particular the JavaScript Interface, but this would be beyond the scope of this post. So have a look at the GitHub repository in case you want to learn more.
\n\nRunning a test against a URL or a file is already super helpful, but wouldn\u2019t it be nice to run a test for a whole site and, let\u2019s say, get a report of the results in HTML?
\n\nThis is can be done with Pa11y CI. While Pa11y CI is best used to run automated tests, you can run it manually as a command-line tool as well. And it comes with a neat feature: you can tell it to run a test against a whole sitemap. Let\u2019s try this. First, we install Pa11y CI globally:
\nnpm install -g pa11y-ci
\r\n
Now, you could create a config file that includes all the URLs that Pa11y CI should check. But you can also feed it with an XML sitemap with the --sitemap
option:
pa11y-ci --sitemap https://pa11y.org/sitemap.xml
\r\n
We\u2019ve seen that when we run a test with either pa11y
or pa11y-ci
, the results will be output to the command line by default. But this can be changed by switching the so-called \u201creporter\u201d from cli
to something else. You could use csv
or json
, for example, but you can also output the test results as HTML. Pa11y now has an HTML reporter built in. The reporter can be set via the --reporter
option. So when you are using Pa11y, you can write:
pa11y --reporter html https://example.com
\r\n
But in our case, we want to run a test against a whole sitemap with Pa11y CI. Here, we have to install one additional rpm package that adds an HTML reporter: Pa11y CI HTML Reporter.
\n\nYou install it via npm again:
\nnpm install pa11y-ci-reporter-html
\r\n
Now, this reporter can again be set via the --reporter
option:
pa11y-ci --reporter=pa11y-ci-reporter-html https://pa11y.org/
\r\n
Pa11y CI will now run its test(s) and output the results in the current working directory as HTML. Nice! In the example above, we ran the test against a single URL, so the last step is to run the tests against a sitemap using the HTML reporter:
\npa11y-ci --reporter=pa11y-ci-reporter-html --sitemap https://pa11y.org/sitemap.xml
\r\n
The result:
\nEt voil\u00e0! We have generated a nice HTML overview of the test results of the whole website we want to test. Now, we can go on and dig deeper, document existing issues in more detail, or even \u2013 if we have access to the codebase \u2013 immediately fix a few things to reduce the number of issues we see.
\n\nAgain, an automated tool like Pa11y is not a substitute for a proper accessibility audit by an actual human being \u2013 particularly one using a screen reader. But it does give you a good general overview and helps you to quickly address many of the things that are wrong in your codebase.
\n", "date_published": "2022-07-11T19:09:00+02:00", "date_modified": "2022-07-11T19:21:33+02:00", "author": { "name": "Matthias Ott" } }, { "id": "13978", "url": "https://matthiasott.com/notes/the-css-cascade-a-deep-dive", "title": "The CSS Cascade, a Deep Dive", "content_html": "The Cascade is legendary. Legendary because it is the C in CSS. Legendary in how well it works to determine which selector wins when browsers apply styles to HTML. And legendary in how little many of us really know about it.
\n\nBramus van Damme recently gave a fantastic talk about the Cascade at CSS Day. Whether you want to learn what the Cascade is and how it works or you already are familiar with it, watching this talk will be equally valuable for you. Bramus does a great job explaining the different steps of the Cascade and what specificity has to do with it in a way that you really understand it.
\nHe then goes on to show how the new concept of Cascade Layers works and what you can do with them. For example, they can be used to better separate the styles of a component library or third party components from the rest of your CSS. Cascade Layers are already supported by all modern browsers, so it is time to get familiar with them.
\nIf you want to learn more about the Cascade and Cascade Layers, have a look at the slides from Bramus\u2019 talk, his great blog post about Cascade Layers, and also the following articles:
\n\nCascade layers are coming to your browser, Una Kravets
A Complete Guide to CSS Cascade Layers, Miriam Suzanne
Getting Started With CSS Cascade Layers, Stephanie Eckles
What\u2019s the single best thing you can do if you want to learn a new tool or evaluate a new technology? Right, it\u2019s getting your hands dirty.
\n\nOnly by building something tangible, like a realistic prototype or even a real project, you\u2019ll get immediate answers to the questions that are relevant to you and your specific context. Based on those insights, you can then make an informed decision about whether this tool is the right one for you or not. Also, it is so much fun to build something new, right?
\n\nSo imagine my excitement (\ud83e\udd73\ud83c\udf88) when I recently decided to start a new side project and finally got to try out Eleventy, Zach Leatherman\u2019s lovely Static Site Generator. And because every good side project begins by starting another side project and also because the The Law of Eleventy\u2122 demands that you create a starter project as the first step of your learning journey, I did exactly this: set up a starter project.
\n\nAnother thought I had immediately was that I could also try out Vite, Evan You\u2019s blazing-fast build tool. I had heard a lot of praise for it and also listened to a really intriguing episode of Chris\u2019s and Dave\u2019s ShopTalk Show with Evan You. So I had a look at it and, luckily, also found a plugin Zach had published earlier this year that lets you use Vite with Eleventy.
\n\nThe thing with starter projects is that they grow old very quickly. Of course, when you set everything up, you want to add the latest tools, all those dependencies that are currently state-of-the-art, and also want to try out new things. But this, in turn, means that you now might have to update your project more regularly and also re-evaluate some of the decisions you made. On the other hand, as long as, for example, a build process works, you might not need to change a running system. And there is always the process of learning something new that makes setting up a starter project valuable in itself.
\n\nSo, I set out to create a starter that should be as simple and concise as possible, not only to make it easier to understand for anyone who wants to get their head around it as well \u2013 including or my future self \u2013 but also to reduce the need for maintenance. At the same time, I wanted it to have all the features already built in that I would enjoy in such a base project. For example, a really performant base with Critical CSS, a web font loading strategy, or also base styles for responsive typography. And, of course, RSS.
\n\nThe result of my endeavors is Eleventy Plus Vite, a starter project with the following features:
\n\nmedia
loading strategy (adds media=\"print\" and swaps to media=\"all\" once loaded)prefers-color-scheme
and CSS Custom Properties)There were quite a few things to get my head around, besides learning about how to use Eleventy and Vite. For example, I had also not worked with Rollup before, which Vite uses to bundle JavaScript modules. And many of the plugins I now use in the starter were also new to me. But that\u2019s exactly why building something real is so valuable: in order to find solutions for problems that seem complex and unsolvable at first, you are forced to play, explore, and blindly try out things that sometimes work and most often don\u2019t. And step by step, you understand how everything works.
\n\nIf you want to get started with Eleventy as well, maybe you better don\u2019t use my starter. \ud83d\ude09 Have a look at Eleventy and a few other starter projects yourself. There is also a brilliant introduction by Andy Bell, Learn Eleventy From Scratch. The course is now Open Source and although it might be outdated here and there because it is from 2020, it still explains the basic concepts very well. Stephanie Eckles wrote A Deep Dive Into Eleventy Static Site Generator for Smashing Magazine and she also collected a lot of useful resources on the website 11ty Rocks!. And, besides many more articles you can find on the Web, there is the Eleventy Documentation, to help you get started.
\n\nThanks so much again to all the people who created a starter project or Eleventy site before me, especially Stephanie, Miriam, Max, and Zach. I learned so much from your different approaches (and shamelessly copied a bit of code here and there as well\u2026 \ud83d\ude07)!
\n\nOh yes, and I\u2019ll keep you posted on any updates I make to the project, for example, the dark mode toggle I am currently working on.
\n", "date_published": "2022-07-10T00:43:00+02:00", "date_modified": "2022-07-10T00:45:39+02:00", "author": { "name": "Matthias Ott" } }, { "id": "13929", "url": "https://matthiasott.com/notes/you-a-million-times", "title": "You, a Million Times", "content_html": "Who should you write for? Your friends and family? Your colleagues and peers? The people you look up to? Everyone in the community? Everyone on the Internet?
\n\nThe answer? None of those people. You should only write for one person and one person only: you.
\n\nMe? But who would read the things I write only for myself?
\n\nWell, you would. Or, more precisely, all the people who are a lot like you. People who are a good match to your interests, your ideas, your values, and who can, therefore, relate to your stories. And on the Internet, more people than you think might be a lot like you.
\n\nThere are, roughly estimated, about 4.5 billion people online, of which about 25 % speak English. That\u2019s around 1.125 billion potential readers. If only one out of a thousand people is a bit like you and enjoys the work you create just for yourself, that\u2019s still more than a million people. Of course, you won\u2019t reach them all. But the more they love what they read, the more likely it is that they tell someone who is also a lot like you.
\n\nSo, the next time you start thinking about your audience and whether they might like what you are writing or not, or what you can do to appeal to as many of them as possible, try this: do it like Tim Urban and picture a stadium full of people who are just like you*. Would they like what you write? What would they like to have a discussion about? What would make them laugh? What would fascinate them? Would they care if your English not be perfect? Would they be angry if you made a spelilng error? (I mean, if they really would, go ahead and correct those errors, but you get the point.) And then, do it like Chris Coyier and \u201cpunt out a thought early rather than wait until [you] have some perfect way to present it.\u201d
\n\nSomeone just like you might like it, share it, mention it at a meetup or conference, and, most importantly, might connect with you. Because ultimately, all of this isn\u2019t about clicks, visits, and likes. It\u2019s about human connection and building relationships while we share a bit of time together on this little blue dot. Right, Miriam?
\n\n\u2014
\n\n*This is just one of the many interesting topics Julian Shapiro and Courtland Allen talk about in their latest Brains podcast episode about writing with David Perell and Tim Urban.
\n", "date_published": "2022-06-30T00:13:00+02:00", "date_modified": "2022-06-30T00:13:44+02:00", "author": { "name": "Matthias Ott" } }, { "id": "13890", "url": "https://matthiasott.com/notes/updates-about-updates", "title": "Updates About Updates", "content_html": "I love reading posts in which people talk about recent updates to their personal sites. It does three things:
\n\nJust recently, Hidde wrote an in-depth post outlining his approach to adding a dark mode toggle to his site. This made Kilian link to a post in which he explains his approach of adding a third option for the default system setting. And now, Ethan has written about his recent updates to his site, including, you already guessed it, his new theme switcher.
\n\nLast week, I released a little starter kit for Eleventy Plus Vite that already respects the user\u2019s system settings for a light or dark mode via the prefers-color-scheme
media query. The next thing on my list is to add a theme switcher. I\u2019ll read all posts I can find, including Hidde\u2019s, Kilian\u2019s, and Ethan\u2019s, with much interest and will then publish an update about this update here.
Why don\u2019t you do the same with something you are working on?
\n", "date_published": "2022-06-27T00:16:00+02:00", "date_modified": "2022-06-30T15:10:01+02:00", "author": { "name": "Matthias Ott" } }, { "id": "13888", "url": "https://matthiasott.com/notes/in-and-out-of-style", "title": "In and Out of Style", "content_html": "One of the most fascinating things about the Web is how it has evolved. By that, I don\u2019t mean so much the mind-blowing speed of growth, but rather how the foundational languages, APIs, and browsers have been able to adapt to an ever-evolving, ever-changing environment. With all the innovation going on, we somehow still managed to create robust foundational layers \u2013 like HTML, CSS, and JavaScript \u2013 that allowed for steady improvement but that also didn\u2019t fail. And this is maybe the most amazing fact about the Web as a system of systems: it was resilient enough to persist and, at the same time, flexible enough to adapt.
\n\nFor one, this is thanks to a lot of smart people who, despite all the arbitrariness involved in the creation of the Web, also made a lot of smart, foundational decisions. Like Tim Berners-Lee, the inventor of the World Wide Web, who recognized that the success of his invention would highly depend on how easy it would be for people to adapt it and who, therefore, not only based HTML on SGML, a language the folks at CERN were already familiar with, but who also decided that it would be sufficient for a hyperlink on the Web to go in one direction only, instead of being bidirectional, which would have made it much harder for people to link to a source.
\n\nBut today\u2019s success of the Web is also based on another principle: agreement. The agreement on certain standards that everyone will adhere to \u2013 the people writing the specs, the browser makers implementing them, and all authors writing code for the Web. Unlike in the dark times of the browser wars, what becomes a standard is today based on agreement. Agreement is what made it possible that new features like CSS Grid shipped in a short timeframe in all major browsers. Agreement on what should become part of the foundational technologies of the Web is also why we now have variables, aka Custom Properties, in CSS, or why we now can select DOM elements by querying for a CSS selector with Vanilla JavaScript (with querySelector
and querySelectorAll
) \u2013 something that had only been possible with jQuery for a long time. And only one of the many things you might not need jQuery for anymore.
Jeremy Keith has just given a fantastic talk at CSS Day about all of this: in \u201cIn And Out Of Style,\u201d Jeremy not only talks about the foundational ideas and principles \nbehind CSS, but also about how long-term trends always appeared and disappeared over time and how they have influenced and shaped the Web Standards we work with today. It is a wonderful talk, for one because of the way Jeremy tells the stories about the Web and its history, but also because of the underlying message: by hacking our way around the shortcomings of the Web, we influence what we agree upon and what ultimately becomes a standard. So, just like promoting the idea that Web Standards, CSS, or other best-practices are broken, is wrong, we should also not just accept things as they are. All the hacks, libraries, and frameworks that help us get things done today might well shape how the Web of the future looks like. As creators, we are actively influencing the future of the Web. What a great reason to become part of that feedback loop, share your thoughts and experience, and get involved in important projects that push the Web forward \u2013 like open-ui.org.
\n", "date_published": "2022-06-26T18:07:00+02:00", "date_modified": "2022-06-26T18:42:53+02:00", "author": { "name": "Matthias Ott" } }, { "id": "13689", "url": "https://matthiasott.com/notes/just-put-stuff-out-there", "title": "Just Put Stuff Out There", "content_html": "Even if you have been posting on your own site for quite some time, blogging regularly can still be challenging. Ask almost anyone who blogs and they will probably tell you the same: They would very much like to hit that publish button more often, but, somehow, it just doesn\u2019t happen. One reason for that can be that we feel like every post has to be perfect, so we start fiddling with our text longer and longer. Another reason could be that we don\u2019t find the time to write more often between everything else that is going on in our lives. And then, there are all the things related to writing itself that can hold us back, like finding something to write about in the first place, structuring our writing, editing the posts, and so on. And, just like with other habits, once you let the series break and more and more time has passed since your last post, it is getting even harder to publish again.
\n\nHere is a thought. Maybe, we are overthinking it. Maybe, the one thing we should care most about is just putting stuff out there. At least, this is the primary reason we have a personal website, right? We have it to document and share random thoughts, things we learned, and nuggets we found. If we don\u2019t put stuff out there, why have a website in the first place?
\n\nWhen I think of people who publish regularly, three come to mind immediately. For one, there is Seth Godin, of course, who has been publishing a blog post every single day since 1548 or so. Jeremy Keith is another avid writer and a busy bee when it comes to posting all kinds of thoughts and links on this website \u2013 which really feels like an extension of his mind. But the guy who is the primary reason I sat down to write the post you are reading is Chris Coyier. Chris, who recently sold his blog CSS-Tricks to Digital Ocean, is now posting a lot on his personal site again, and it\u2019s so inspiring and refreshing to see how he approaches it. Some posts are longer while others are short. There are a lot of posts about the Web and web technology, of course, but there are also others about health, mandolins, writing, teaching, identifying plants, good typography, and collections of random thoughts. It really feels like a personal site that is there for a reason.
\n\nSo how do they do it? Do they sit down at their desk \u2013 very consciously \u2013 and take the time to write? You better believe they do. Do they write without worrying too much about what others might think or how polished their posts are? For sure. But, more importantly, it looks like they are enjoying the process of creating and have found a way to make publishing easy for them. And those two things might really be the key to publishing more often:
\n\nEnjoy the practice.
Make it as convenient and comfortable as possible to publish.
Now, there\u2019s only one thing left to do to just put stuff out there.
\n\nDon\u2019t overthink it \u2013 hit publish.
\n", "date_published": "2022-06-16T12:19:08+02:00", "date_modified": "2022-06-16T12:19:08+02:00", "author": { "name": "Matthias Ott" } }, { "id": "13649", "url": "https://matthiasott.com/notes/how-to-delete-your-commit-history-in-git", "title": "How to Delete Your Commit History in Git", "content_html": "Maybe you want to publish a project but don\u2019t want everyone to see what mess you created before your initial release. Maybe you want to hand over a Git repository to a third party who should not peek into your complete git commit history. Whatever the reason, here is how you can get rid of all past commits in a branch without losing your latest work.
\n\nDisclaimer: what follows are a few Git commands for the terminal. If you are a little bit like me, you probably prefer a GUI like Git Tower (\u2764\ufe0f). But in this case, using the command line seems to be the fastest solution. Also, make sure to install Git on your machine. And probably don\u2019t do this in an established repo that you share with a larger team as it might break stuff for them.
\n\nFirst, make sure you are in a your project root directory and checkout a new branch with the --orphan
flag.
git checkout --orphan latest_branch
This will create a new, empty (\u201corphaned\u201d) branch without any commits. Then, add all the files in your working directory:
\n\ngit add -A
Now commit all your changes.
\n git commit -am \"first commit message\"
With all your work safely stored in the new branch, it is time to delete the old branch, e.g. the main
branch:
git branch -D main
Now \u2013 and you probably already guessed it, right? \u2013 rename the current branch (the one you just created) into main
:
git branch -m main
And finally, update the remote repository using the force of Git. Thanks to Frederic Hemberger for pointing out that --force-with-lease
is probably better than using --force
because it won\u2019t overwrite the commits of others in case the branch has changed in the meantime.
git push --force-with-lease origin main
\ud83d\ude4c\ud83c\udf89
\n\nI know all this might sound obvious to some of you and yes, I found this solution on StackOverflow, but I wanted to write it down to have it at hand the next time I need it. And maybe it is useful for you as well?
\n\nBTW, do you know what\u2019s also useful when working with Git in the command line? Oh Shit, Git!
\n", "date_published": "2022-06-09T01:02:00+02:00", "date_modified": "2022-06-09T10:35:09+02:00", "author": { "name": "Matthias Ott" } }, { "id": "13624", "url": "https://matthiasott.com/notes/unblocking-your-writing-blocks-part-3-i-cant-write", "title": "Unblocking Your Writing Blocks, Part 3: I Can\u2019t Write", "content_html": "Maybe you are afraid to start writing because you think that you can\u2019t write.
\n\nI don\u2019t believe that\u2019s true. Everyone can write. You have written letters or email before, right? You are constantly writing coworkers, friends, and family text messages or are chatting on your social networks of choice.
\n\nWhat I do believe, though, is that we are our most cruel critics. In reality, other\u2019s often don\u2019t care half as much about your writing as you do. Most of us aren\u2019t born with the writing styles of James Joyce, Ray Bradbury, or Toni Morrison. But rest assured that even they started at some point, creating things that many would consider bad writing.
\n\nSo, don\u2019t hesitate to put bad writing on paper or on the screen. Here\u2019s one good way to start: Write down everything you know about a random topic you care about in loose fragments. Just a bunch of unrelated words, sentences, or paragraphs will do. Write shitty first drafts. Resist the urge to polish at this early stage. Then look at all the mess you produced and give yourself a pat on the back. You now have material to work with! Try to make sense of it. What are the main points you want to make? What should people remember to get value out of your ramblings? What could you talk about first? What isn\u2019t necessary for the main storyline of your post? Then begin to rewrite the post. Start to polish a few sentences here and there that don\u2019t look right. Leave out the less important bits. Read it out loud. Correct what still sounds weird or might be unclear. Look at your draft with a beginners\u2019 mind. Then hit publish even though you think you did a terrible job. Repeat.
\n\nSchool teaches us to avoid mistakes at all costs. This was useful back when making a mistake at the assembly line would mean you\u2019d lose your thumb and the whole production would come to a halt. Those days are long gone. We now live in a world where making mistakes is slowly being recognized as what it is: the most natural way to learn by experience. Just look at how kids play and learn!
\n\nSo let me correct my own mistake from the beginning of this post. Yes, your writing might indeed be really, really bad. Not only your drafts might be shitty. But that doesn\u2019t mean that your views on things are less valuable. You will become better. You will grow.
\n\nWhat a great reason to start.
\n\n~
\n\nThis post is part of a series:
\n\nUnblocking Your Writing Blocks, Part 2: I\u2019m Not an Expert nor a \u201cThought Leader\u201d
One of the reasons you\u2019re not blogging on your own personal website might be that you\u2019re thinking: \u201cWhy would people listen to what I have to say? I\u2019m not an industry expert, after all.\u201d
\n\nI get that. You might not work for the Apples, Googles, or Microsofts out there. You might not speak at meetups or conferences or publish articles at one of the online magazines everyone is reading. You might even think that what you are struggling with every day isn\u2019t worth sharing at all. Who wants to read about your boring day-to-day stuff, right?
\n\nWell, I do. Who said that only so-called \u201cexperts\u201d or \u201cthought leaders\u201d are allowed to share their observations and opinions? Everyone of us brings their unique set of experiences to the table and has something valuable to contribute, even if it is the tiniest of thoughts. You might think it isn\u2019t worth sharing, but maybe you also underestimate how much you actually know and overestimate how much others know? Maybe, your opinion is even more valuable than that of a well-known public figure because your experience paints an unfiltered, more accurate picture of the reality of building for the Web or creating something special?
\n\nSo, write about what you know. Write about the questions you have. Write about your successes. Write about what you learned. Write about what didn\u2019t work. Write about why you think others might be wrong about something. Write about why you do the work you love the way you do it. Or, write about how you would love to do your work.
\n\nOnce you start writing about something, you will also realize that explaining an idea to others is one of the best ways to learn and grow your own expertise. You don\u2019t have to consider yourself an expert to start writing, but you might well become one along the way.
\n\nYou\u2019ll never find out unless you try.
\n\n~
\n\nThis post is part of a series:
\n\n\n", "date_published": "2022-05-13T18:58:00+02:00", "date_modified": "2022-05-13T19:01:12+02:00", "author": { "name": "Matthias Ott" } }, { "id": "13556", "url": "https://matthiasott.com/notes/connections", "title": "Connections", "content_html": "I\u2019m sitting in the ICE 205, one of the German high-speed trains, traveling back home after two days in D\u00fcsseldorf at Beyond Tellerrand, Marc Thiele\u2019s lovely conference about design, development, the Web, and creativity in general. It was the first time I went to an in-person event since the beginning of the pandemic, and to say it was great to finally meet people again would be an understatement. It was outright amazing.
\n\nWe all got used to meeting and collaborating online over the past two years, and many of our favorite conferences and meetups moved online, too. But while running community events online can definitely work and might have its own unique advantages \u2013 one being that you can join from anywhere in the world \u2013 there is still something missing from all those online experiences: connecting with each other in person. All the smiles, the stories, and different personalities. All the spontaneous discussions, inspiring conversations, and relaxed chats. Listening to the talks of others together, learning together, and laughing together. Meeting like-minded people, seeing old friends again, and finding new ones. Human connection. This is what's at the heart of Beyond Tellerrand and it's what makes in-person events so valuable and special.
\n\nOnce again, I am returning home full of new insights, new ideas, new memories, and new energy. It was such a pleasure to meet all of you!
\n", "date_published": "2022-05-04T00:37:48+02:00", "date_modified": "2022-05-04T00:37:48+02:00", "author": { "name": "Matthias Ott" } }, { "id": "12161", "url": "https://matthiasott.com/notes/css-has-a-parent-selector-now", "title": "CSS :has( ) A Parent Selector Now", "content_html": "I don\u2019t remember the exact moment anymore. But I remember that it was with a mix of disbelief and disappointment that I realized one day that there was no way to select the parent of an element in CSS.
\n\nWait, what? This can\u2019t be. Why?
\n\nObviously, I wasn\u2019t alone. Everyone who has ever learned CSS has probably found themselves in the same situation and asked themselves the same question: Why is it that we don\u2019t have a parent selector in CSS? As Jonathan Snook described in an elaborate post back in 2010, it was not only because of performance concerns but also because of the way browsers render a document and apply the computed styles to elements: as a stream, one element after the other as they come in. When an element is rendered to the viewport, its parent is already there, including all its beautiful styling. Repainting the parent \u2013 and, consequently, all other parents \u2013 after the fact would then require another evaluation of all parent selectors. This, Remy Sharp agreed back then, would again be so expensive on the render engine that it wouldn't make sense to implement a parent selector.
\n\nSo, we all accepted the inevitable and did our best to work around it. We added helper classes to our templates via back-end logic or with JavaScript in the frontend. And it somewhat worked. But in almost every project, there still was this one moment where a parent selector would have been the quickest and most \u201cmaterially honest\u201d solution.
\n\nAll of this changed last month when Apple released Safari 15.4 which, as the first browser, supports the :has()
pseudo-class, which is one of the CSS Level 4 Selectors. \u201cIt was long thought such a selector was not possible, but our team figured out a way to highly optimize performance and deliver a flexible solution that does not slow the page,\u201d Jen Simmons and Jon Davis wrote in the release notes.
There it is. A parent selector. But :has
is not only useful as a parent selector. It also opens up a lot more interesting opportunities. But first, let\u2019s have a look at how it works.
The :has
pseudo-class takes a relative selector list and will then represent an element if at least one other element matches the selectors in the list. Sounds overly complicated when you write it down, so here is a basic example. Let\u2019s say you want to select all button
elements which include an svg
element, like an icon. You can now write:
button:has(svg) { \u2026 }
\r\n
Try the CodePen demo \u2013 and make sure to view it in Safari 15.4. ;)
\n\nOr, if you want to style an article differently if it has a headline inside that is followed by a paragraph:
\narticle:has(h2 + p, h3 + p) { \u2026 }
\r\n
You can also combine :has
with the :not
pseudo-class to select an element if it does not contain certain other elements, in this case, a headline:
section:not(:has(h1, h2, h3, h4, h5, h6)) { \u2026 }
\r\n
It is also possible to use pseudo-classes like :hover
, :focus
, or :checked
. You could style a form element when a checkbox inside has been checked, for example:
form:has(input[type=\"checkbox\"]:checked) { \u2026 }
\r\n
You could then also use the general sibling combinator ~
to change the styling of the form depending on how many of the checkboxes have been selected:
/* Two checkboxes are :checked\u2026 */\r\n\r\nform:has(input[type=\"checkbox\"]:checked ~ input[type=\"checkbox\"]:checked) { \r\n box-shadow: inset 0 0 0 0.5rem blue;\r\n background-color: rgb(150, 187, 235);\r\n}\r\n\r\n/* Three checkboxes are :checked\u2026 */\r\n\r\nform:has(input[type=\"checkbox\"]:checked ~ input[type=\"checkbox\"]:checked ~ input[type=\"checkbox\"]:checked) { \r\n box-shadow: inset 0 0 0 0.5rem rgb(0, 160, 0);\r\n background-color: rgb(136, 233, 136);\r\n}
\r\n
\n\nAlthough this demo might not be the most practical example, all this is still starting to get interesting, right?
\n\nCSS Grid generally works from the container in and before :has
, there wasn\u2019t really a way to adjust the Grid based on what\u2019s inside. What if we could use :has
to adjust the CSS Grid layout of a container based on the number of elements inside of it? Here, so-called quantity queries can be useful. Heydon Pickering has written the ultimate article about them. By combining the :nth-child
and :nth-last-child
pseudo-classes inside our :has
selector list, we can adjust the layout by \u201ccounting\u201d the elements inside. Here is how we can target a grid with two elements inside, for example:
.grid:has(:nth-child(2):last-child) {\r\n grid-template-columns: 1fr 1fr;\r\n}
\r\n
So, if our Grid container has an element inside that is both the second child as well as the last child of our container, the grid should have two columns. The same also works with three columns:
\n.grid:has(:nth-child(3):last-child) {\r\n grid-template-columns: 1fr 1fr 1fr;\r\n}
\r\n
Finally, we can also create a grid layout that has four columns if the container has four or more elements inside. To achieve this, we select at least one element that is either the fourth or one of all following elements:
\n.grid:has(:nth-child(n+4)) {\r\n grid-template-columns: repeat(4, 1fr);\r\n}
\r\n
Here is a CodePen demo again.
\n\nAs you can see, there are lots of amazing use cases for :has
as a parent selector and it still feels like this is only scratching the surface of what people will come up with. :has
lets us style elements based on whether the child of an element is selected, has focus, or whether it is present at all. And we can even target an element based on how many children it has. All this will allow for much more flexible components. Just think of all the variations of content and context that can exist inside a design system and you know how valuable this will be.
But wait, there is more!
\n\nBecause :has
accepts a relative selector list, you can also select an element if it has another element that follows it. Or, in other words, we can use :has
to select the previous sibling of an element:
:has(+ .second) {\r\n background-color: darkmagenta;\r\n}
\r\n
\n\nAgain, there are so many practical use cases for this! For example, you could style an image differently when there is a caption below it:
\nfigure img:has(+ figcaption) {\r\n /* Do something with the image */\r\n}
\r\n
The possibilities of using :has
in useful and creative ways to write more flexible and robust CSS seem endless. And as is the case with so many of the new features that are currently being added to CSS, I can't wait to see what other creative uses for :has
you all come up with. One recent example is this brilliant demo by Michelle Barker, where she combines animated grid tracks with the :has
selector.
For now, Safari is the only browser with support for :has
. In the upcoming version 101 of Chrome, you\u2019ll be able to activate it via the Experimental Web Platform features flag, however. While this is promising, it will certainly take a little while until :has
is supported by the majority of browsers. In the meantime, we can once more use progressive enhancement to already use :has
in browsers that support it. As Michelle Barker notes, you can test for support for :has
with a @supports
feature query using the selector()
function:
@supports selector(:has(*)) {\r\n /* Code for browsers with support for :has */\r\n}
\r\n
Thus, you can target supporting browsers in a future friendly way. Because once :has
is supported by another browser, your code will work automatically in this browser as well.
Do you have more ideas about how to use :has
? Have you seen more interesting examples and demos? And will you start using it already? Let me know via Webmention, email, or Twitter.
Hans Zimmer just won an Academy Award for his musical score for \u201cDune,\u201d and if you have seen the movie or listened to the soundtrack, you know why. Zimmer\u2019s soundtrack for Denis Villeneuve\u2019s adaptation of Frank Herbert\u2019s classic sci-fi novel is an otherworldly masterpiece that combines Zimmer\u2019s deep, gigantic trademark sound with unorthodox elements like whistling bamboo flutes, distorted guitars that sound like bagpipes, actual bagpipes, scraping metal, and synthesized, rumbling drums. The result is a mysterious, menacing, and captivating soundscape that defies comparison. Disturbing in its beauty, enchanting in its intensity.
\n\nWhen Zimmer was asked to write the music for Dune, one of the first things he knew was that he didn\u2019t want to create the next classical orchestra soundtrack for a science-fiction movie. Instead, he had a certain idea of a sound in his head that would match the setting of the story. A story that was supposed to happen in the future, in a different culture, and on a different planet. So he set out to invent new sounds by using and combining existing instruments in unconventional ways and by even inventing instruments that didn\u2019t yet exist. He worked with an instrument sculptor who builds instruments out of metal, distorted human voices with a compressor beyond recognition, and asked his musicians to play their instruments in the most unusual ways. \u201cDon\u2019t play it like the flute,\u201d Zimmer said to his flutist Pedro Eustache, \u201cPlay it as if it was the wind whistling through the desert dunes.\u201d
\n\r\n\r\nWhy am I telling you all of this? Because no matter what you love to create, there is something to be learned from the way Zimmer approached this project. We are all striving to create work that is novel, innovative, memorable, and inspiring. To get there, however, we tend to focus on getting things right, on avoiding mistakes, on \u201cbeing professional\u201d. Yes, it is important to have the commitment, dedication, and attention to detail of a professional. But being right? That will only take you so far. What is much more important is to approach the problem in front of you with curiosity and an open mind. With an urge to explore what can be found beyond the ordinary, beyond the right way of doing things. If you want to create something that nobody has come up with yet, it is important that you try out all the crazy ideas others are afraid to try, that you build prototypes, improvise, and freely play with the materials and the technologies you have at hand.
\n\nYou might not know where this play will lead you. You will discover that some things work and others don\u2019t. You will run into dead ends and discover other paths that open up before you. You will have to abandon some of your ideas while new ideas are born. To discover something totally new, you need to play this game as unafraid and reckless as a child. Play it loud or quiet, fast or slow, alone or, even better, in a team.
\n\nJust make sure you don\u2019t play it like the flute.
\n\nHans Zimmer on technology and music:
\n\r\n\u201cIt took a while for us to figure out how to actually use this. You have to learn technology in one way or the other. And I don\u2019t mean by reading a book [\u2026] or by going on the Internet and spending a bit of time. It\u2019s a more instinctive type of learning where you figure out how far you can push the thing. Where is the sweet spot?\u201d\r\n", "date_published": "2022-04-09T01:21:16+02:00", "date_modified": "2022-04-09T01:21:16+02:00", "author": { "name": "Matthias Ott" } }, { "id": "12117", "url": "https://matthiasott.com/notes/unblocking-your-writing-blocks-01", "title": "Unblocking Your Writing Blocks, Or: Debunking the Reasons That Keep You from Writing Your First Blog Post Today.", "content_html": "
Why is it that although we are now in the millions building and creating for the Web, only very few share their knowledge and experience on their own websites? Or, in other words: Why doesn\u2019t every one of us have a blog?
\n\nZach Leatherman asked this question on Twitter the other day and added: \u201ccan you imagine knowing everything you know and not sharing it? It\u2019s a little selfish when you think about it.\u201d
\n\nZach was teasing, of course, but the responses that followed painted a pretty accurate picture of why it is so hard for many people to publish on their sites: There are a million reasons to not even start.
\n\nBut many of the reasons holding us back aren\u2019t actually the blockers we think they are. So why not have a look at the most common ones and debunk them, one blog post at a time? Written from the perspective of someone who hesitated for more than 10 years until he finally started his blog. Someone who has written quite a few posts in which he promises to \u201cwrite again more regularly (promise!)\u201d. And someone who now believes that starting to write on his site was one of the best decisions of his life.
\n\nAll of those thoughts and worries were floating around in my head at some point as well. And many remain to be regular guests at the writing table.
\n\nLet\u2019s start with one of the most obvious ones:
\n\nOf course, you don\u2019t have an audience. Your writing doesn\u2019t exist out there yet. But does it even matter? The first thing you have to do if you want to publish work on your site is to let go of the idea that the more people read your articles the better your articles \u2013 or you as a writer \u2013 are. Quantity is not the same as quality or value. Yes, it is great when a lot of people read what you have to say. But far too often, we measure success only by looking at the number of visitors or page views, while instead we should be looking at how valuable our posts can be for other people. An idea that I like a lot in this regard is the one Sara Soueidan shared in her post \u201cJust Write\u201d: \u201cEven if only one person learns something from your article, you\u2019ll feel great, and that you\u2019ve contributed \u2014 even if just a little bit \u2014 to this amazing community that we\u2019re all constantly learning from.\u201d Even if only a few people read your post, it can have a profound impact on them \u2013 and on you.
\n\nYes, you will probably start by writing into the void, not knowing if anyone reads your articles or cares at all. View it as a chance to practice, to make mistakes, and to get better. This is your chance for unlimited bowling and your chance to learn what kind of writing brings you joy. And if you end up writing things that people like, great! Over time, more and more people will take notice.
\n\n~
\n\nWhat are some of the reasons that keep or kept you from getting started? Let me know via Webmention, email, or Twitter. And make sure to subscribe to my RSS feed to not miss the next post debunking reason number two: \u201cI\u2019m not an expert nor a \u2018thought leader\u2019\u201d.
\n", "date_published": "2022-03-13T20:21:07+01:00", "date_modified": "2022-03-13T20:21:07+01:00", "author": { "name": "Matthias Ott" } } ], "version": "https://jsonfeed.org/version/1", "title": "Matthias Ott \u2013 Notes", "home_page_url": "https://matthiasott.com/notes/", "feed_url": "https://matthiasott.com/notes/feed.json", "description": "Selected notes by Matthias Ott, independent user experience designer and user interface engineer from Stuttgart, Germany.", "icon": "https://matthiasott.com/apple-touch-icon-180x180.png", "favicon": "https://matthiasott.com/favicon-96x96.png", "author": { "name": "Matthias Ott" }, "next_url": "https://matthiasott.com/notes/feed.json?page=2" }