Thirteen years ago I published my first article on this site, and it's still alive (is it?). This site # I've only posted once in the past year, and that's perfectly fine. I could list all the reasons for my irregular posting schedule, but honestly, it boils down to time and motivation. The best part is that I still have this space online to publish whatever I want, whenever I want. Social # I'm…
This morning I shared an article about Balancing text in CSS (it's a great article, read it) on LinkedIn. To give a quick preview I decided to create a simple GIF of the first interactive example in the article. The GIF showed more or less how I clicked a button, which, after I clicked it, applied the CSS text-wrap: balance; to the text, and the text visually looked more balanced after that. I…
Twelve years ago I published my first article on this site, and it's still alive (is it?). Writing # I haven't published anything in the last year. Last year I thought I will come back to writing again, but it didn't happen. Maybe I will get back to writing again here, but I just don't know. Social # I'm also not really active anymore on social media. I do browse through my Mastodon timeline from…
Eleven years ago I published my first article on this site, and it's still alive. Writing # I haven't really published anything in the last year, only five thoughts (notes), but no technical article at all. After spending a lot of time in 2021 working on the Learn Forms course I needed a break from writing, and somehow never managed to get back to writing again. I hope to get back to writing, but…
Rating: 4,5/5 Would recommend: yes Would read again: yes Review and takeaway # After reading this book, I reminded myself to be more open, be more human. I was often acting like a machine in the last month, doing good work, but missing the human part, the important part of working. It also reminded me to say No more often, to trust others. It's also a good reminder how important communication is,…
Browser supports :has() and container queries. So, why shouldn't they be able to support lazy loading HTML? HTML includes # In PHP (Hypertext Preprocessor), it's done like this: <?php include 'component.php';?> In HTML, it may look like this: < div include = " component.html " > </ div > or < include src = " component.html " > How would this work? # Instead of preprocessing the final HTML before…
No, I am not really building a house. This is a story about many houses (websites) are build these days. The building # You are a group of developers and get the task to build a house. You have done this before multiple times, you check the acceptance criteria and start building; you build the base, walls and the roof. After that, you paint the house like requested. The issue # The house looks…
As of 15th of June 2022 Internet Explorer has retired and is officially out of support . Great, let's stop supporting Internet Explorer finally, you say? Sure, I will do the same, but your support may be different from how I approach this. Let's have a look. Ways to support a browser # There are two ways to support a browser: Add polyfills /workarounds, so all unsupported features work the same in…
Reached the milestone of one decade of publishing. On this day ten years ago, I published my first article on this site. Since then, I published over 145 articles and notes. From the ~315.569,520 seconds since I published the first article, I wasted quite some time staring at loading screens, and trying to interact with inaccessible websites. Hopefully, though, saved some seconds for others, by…
Over the last ten years I spend many hours to keep up-to-date with the web platform: Reading articles, writing articles, trying out new web platform features, listening to web development podcasts, using Twitter to stay in the loop, watching conference talks, reading books, reading RSS feeds. Out of interest, I asked on Twitter how much time my followers spend on keeping up-to-date with the web…
This year I was fortunate enough to write a complete course about HTML forms together with the help of Rachel Andrew and Sam Dutton . It has been some intense months of writing and editing, and I am really excited how it turned out. In total, there are 22 modules. Use forms to get data from users Help users enter data in forms Help users avoid re-entering data in forms Help users enter the right…
After tweeting about a CSS property for 100 days in a row last year, I did it again this year, this time it was all about HTML elements. Again, I learned quite a lot about a language I have been using for over 15 years now almost daily. There is some interesting about almost every HTML element. I also have to say that it is fantastic to have MDN as a reference available. You can learn so much by…
A friend of mine upgraded their bicycle to an electric bicycle some years ago, mainly to improve their commute to work. It sounded like a great choice, in the end the upgrade did however not make their life easier. The upgrade had the opposite effect. This article is all about enhancements, enhancements going too far; Overenhancements. "Simplicity is a great virtue but it requires hard work to…
I have a document in Writerie which is called The Void - every time (at least most of the time) I am angry about something or want to complain and would normally tweet it out, I instead write it down in The Void. This way it is out of the way, and at the same time I don't tweet something stupid I may regret later. Getting it out of my head is very important for me. If I don't write it down, I will…
I am currently working on a side-project, where most parts are static, but there are pages where I need to access a database and do things on the server which I can not pre-build. In the past I would have probably used Node.js with an Express server for this, but I thought it is time to give Next.js a try. After using it for some weeks, I have to say I like it, and it is a good option for these…
The site is live now for almost a decade. Nine years ago I published my first article here. Since then, I published over 140 more articles and notes. The biggest change on this site since last year is, that I now a have a bookmark section . I wrote an article about this change and how you too can integrate Pocket in your Eleventy site . There is also another section coming to this page - the…
I have been using Pocket since many years to organize my bookmarks and reading list and thought it would be great to show them on my blog where I use Eleventy . In this article you will learn how to get your data from Pocket and show them on your Eleventy site. Get a consumer key from Pocket # We assume that you already have a Pocket account, if not you should register an account there first.…
I am currently building a book section for this site and thought it would be cool to show the books in 3D and also to make it visible how many pages a book has. In this article I would like to show you how to use CSS custom properties to adapt the depth of a 3D book showing how many pages the book has. 3D Book in CSS # There are many resources and code examples how to build a 3D Book in CSS. As a…
In the last weeks there has been another round of approaches about loading HTML and server-rendered components . We had the option to only load and replace some parts of an HTML page for over 20 years with JavaScript, and even longer by using framesets . The idea is always the same, replace only some parts of HTML instead of loading everything again. There has been many approaches to load and…
On the 12th of November I decided to take a break from Twitter. I really enjoy the little bubble I have there, meet new people there, made new friends, and discovered lots of fantastic resources there. It also helps me to keep up-to-date with all the stuff happening in Frontend. The problem is that it is too much, the constant feeling of missing out if I don't check my Twitter feed for some time,…
I recently worked on a FAQ page, and as I like semantic and accessible HTML I chose to use the <details> element to show the questions and answers. The default styling of <details> is pretty okay, but the designer had something different in mind, and so I had to find ways to style it according to the design specification. In this article you will learn how to style the summary, change the default…
I sometimes run accessibility audits and one issue I almost always find is missing or insufficient alt text for images. Many of these images are from authors publishing the images via some sort of CMS. To make it easier for them and for everybody else to see if an image has insufficient alt text I created a browser extension which lets you run a check on every website. Note: This is meant for…
Yesterday I was frustrated again that so many websites are still inaccessible, so as you do, I tweeted . More and more convinced that the only way to improve accessibility of the web is to have laws. Laws written by accessibility experts in force in every country. GDPR, but done right. As this got quite some replies, and as Twitter is a bad place to write about complex stuff, you can now read here…
I recently added Text to speech for Writerie and here is what I learned about using the Web Speech API. Check for support # Before using it we have to check if the browser supports the Web Speech API. We can do this by using a feature test. if ( 'speechSynthesis' in window ) { // Great, browser supports the Web Speech API - let's use it } Voices # With that in place, we can now start using it.…
Earlier this week I finally launched Writerie – a distraction free writing tool. Here is my story why I build it, what it is and what the future will be for Writerie. Background # I first started to build a writing tool in summer 2017, because I wanted a place where I could store all my documents and articles and not being tracked. Until this point I mostly just used my code editor to write in…
At the beginning of the year I thought it may be fun to tweet about a CSS property for 100 days in a row. Before I started I wasn't really sure if there are even so many different CSS properties, but I soon realized there are much more, especially if you count all the long-hand properties as separate properties. Or did you know that there are 61 properties starting with border? I have to say I…
Last week I started a poll on twitter to find out how much we rely on third-party code in front end. I asked the people how much of their JavaScript and CSS code is third-party. On average, how much of all the KB of JavaScript you ship, are written by yourself versus third-party code? — Michael Scharnagl (@justmarkup) April 1, 2020 Next round: CSS On average, how much of all the KB of CSS…
If you ever worked in an agile team and used SCRUM you probably heard of Definition of Done. While I am still skeptical that SCRUM is the best way to build a product, I find having a Definition of Done to be really helpful. Here are some things I find to be valuable to have in there when it comes to testing. 1) Tests on devices/browsers listed in the project assumptions passed # What devices and…
Building for the frontend on the web comes with the challenge of many unknowns. Many seem to dislike this and want to build only for one environment. I really like the challenge and you should too if you are a Front-end developer. All the browser and devices # At the moment there are about 63.000 browser-platform-device combinations. That's a lot. And there will be even more in the future. It is…
Cards, teaser, preview blocks – there are many different ways to name them – one thing they all have in common is that they usually consist of a headline, an image, some text and a read more link. The other similarity is that all these elements should link to the same goal. In theory, writing the HTML for this pattern seems pretty straightforward, but there are some accessibility concerns which…
Last year my daughter was born, and of course we wanted to be able to share pictures of her with family and friends. I could have used any of the available services to share photos/galleries with them, but I don't feel comfortable at all that pictures of here are saved somewhere I don't really have access to. So, I made a simple web app, where my partner and me can upload the images to my server…
It's been eight years since I launched this site with my first article. Since then I published 130 more articles and notes and one even explains why this site is named justmarkup . Last year I wrote that I plan to switch from WordPress to a Static Site generator. This is done now, and this site is now using 11ty and I am more than happy with it. If you are curious, the code behind this very site…
When starting a new web project one often reaches for new cutting-edge technologies to be up-to-date. However, why not start with the basics first and add stuff on top if you really need it. Boring by default. I really like new and cutting-edge technology, but lately, I feel more and more that we're just over-engineering everything... 😢 I spent the last hour solving problems that I wouldn't have…
The infamous hamburger menu is one of the examples where I see bad practice very often. Surf the web one day using a screen reader or using only your keyboard and you will most likely experience some of the problems as well. Let's have a look at the most common errors and how to avoid them. Using the hamburger menu # Before even thinking about the best way to implement a hamburger menu, one should…
I am currently working on a little side project, where I upload images to my server (using file input and additionally Web Share Target) to make them available to others. While I had a first working version ready pretty quickly there was one problem – when uploading a portrait image from my phone, the image was shown with the wrong orientation. In this article you will learn about the current…
When I finally launched feediary last summer I was really excited. It was my first side project which I turned into a business. It was the first time I asked users to pay for my project. It was scary. From fun to business # It all started when I was looking for a RSS reader. I wanted to use RSS again and wanted a tool which respects privacy, can be used on the web and is accessible. None of the…
I just released a new version of justmarkup.com . 🎉 This is now the 8th version of this site and while it is still far from perfect, I decided it is about time to release it anyway. In terms of layout there isn't much of a change since the last version, but I tried to make it more readable and also improved the design of the code examples and the embed data. I certainly will tweak the design more…
Over the last years, browsers implemented various features to react to user preferences on the web using CSS, JavaScript or by checking for preferences on the server-side. In this article, I would like to show which user preferences are currently exposed by browsers, the best way to handle them and a look in to the future to see what might be available soon. Reduced Motion # Let’s start with the…
On the 31th of January 2012 this site was launched with an article me saying Servus (Hello). Since then I published 120 more articles and notes and one even explains why this site is named justmarkup . I still enjoy writing articles about my experience and findings and I always have a big smile in my face when I search for a problem and find an old article I wrote with a solution. I also have the…
I recently worked on a web site which used big headlines (as in font-size) and also is available in German. This means there are often rather long words and they often don’t fit in the surrounding container. Without doing anything this would »break« the layout as a horizontal scroll bar would appear. So, I reread an article I wrote almost four years ago about Dealing with long words and…
One of the enhancement patterns I use quite a lot is transforming a link to a button – a link to a new page becomes a button which opens a dialog with the content, an on-page link to the navigation becomes a button to toggle the visibility of the navigation. In this article, I would like to explain why it is often useful to transform a link to a button, how to enhance a login link and why a button…
One of my goals for 2019 is to finally launch a redesign of this site and more importantly switch from WordPress to a Static Site. To get this rolling, I first need to have all my posts saved as Markdown. I first looked for some existing WordPress plugins to achieve this, but this wasn’t really working for me. I also could have used the WordPress REST API or even the RSS feed to get the data –…
When I started working as a Front-end Developer (or rather Web designer, as people doing HTML, CSS and a bit of JavaScript were usually called back then), all the Back-end people working at the company *laughed* at me because I was »just« doing HTML and CSS and not »real programming«. They thought all you need to know in HTML are <font> , <br> and some form elements (including <input> without…
Today, I saw a tweet from Jeremy Keith (@adactio) Too many businesses treat analytics and tracking scripts as victimless technologies — they only see the benefits (in data acquisation) without understanding the costs (in performance). which inspired me to write about the benefits and the costs for a business and for the user when using tracking scripts. On the business side # Benefits # 1) Free…
This past week has been really exciting with the launch of feediary.com on the 24th of July and all the awesome feedback I got afterwards. In the official announcement I already wrote about what feediary is and why you should try it. In this article I would like to talk about the Why – Why did I build the RSS reader feediary? It all started in the middle of January 2018 – at this point I was not…
I am currently building a RSS reader ( intro blog article about feediary ) and like always it is progressive enhanced. In short this means the main features of the site will all work in older browsers, but there are several enhancements only available for supported browsers. This strategy worked great until I started working on a new feature – Themes. It is a feature only available for paid…
Many new web platform features require a connection via https nowadays. So if you want to use and test Service Worker, you need a domain which runs on https and has a valid SSL certificate. If you have a public domain (like .com or .party), your hosting company most likely offers SSL certificates (often free now thanks to Let’s Encrypt ), which are also easy to install in most cases. But, if you…
Some time ago I asked on twitter about the favorite CSS snippets people use regularly. What’s you favorite CSS snippets which you use again and again? Rules: – Has to fit in one tweet – Has to be vanilla CSS (not Sass, Less…) – You don’t have to include vendor prefixes Go! — Michael Scharnagl (@justmarkup) 16. März 2018 A lot of people replied with great snippets. So, without further ado, here are…
Recently, I got reminded about the Do Not Track (DNT) request header . As a user, you can enable DNT in various browsers and as a website this setting should be respected. In reality very few websites honor DNT as there are no legal or technological requirements to do so and sadly most prefer to collect as much data as possible instead of respecting privacy. What many of these websites may not…
In 2017, the average transfer size for websites was 3,4 MB . A big part of it (on average 1.8 MB) are images. Especially on article sites, many of these images may be GIFs. Some of these GIFs are multiple MBs and while looking at GIFs can be really funny, it is less so if you watch them on a slow device or when exceeding your available data by reading only one article. In this article, I will show…