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 labels of course).
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.
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 subscriptions and I wanted to make the feature available to as many different browsers and users as possible.
This got me thinking. I could build this using CSS Custom Properties, browser support is ~88% at the moment (July 2018). Still, ~10% of potential users may not be able to use the feature. I could build a fallback version for them, but this would take quite some time I have to spend on top of building it with Custom Properties. So, in the end I decided to not use Custom Properties for themes. In this article I will explain why I decided against using a new web platform feature in this case and options to list a feature not available in all browsers.
Last week I twittered a poll asking which browser will be the first to bring full support for Progressive Web Apps (PWA) to desktop. Here are the results:
Wonder which browser will be the first* to bring full support for PWA to desktop.
*Yes, Samsung Internet for DeX already does, but would say it is not traditional desktop.
— Michael Scharnagl (@justmarkup) 31. Januar 2018
54% think Chrome will be the first, 27% see Firefox as the leader, 18% bet on Edge and only 1% think Safari will be the first one to ship.
When viewing code you will most likely come around a note along the lines of // Quick fix. Todo: Cleanup later at some point. There are many reasons developers went for a quick fix instead of a proper fix.
A critical bug was detected after a new release which needs to be fixed immediately, and there is no option to revert to an older version. Or a feature needs to be released tomorrow and you found a bug last minute and there is simple no way to postpone the feature and not enough time to do a proper fix.
I wrote about how I keep track of my working time for @humanthemachine. You can read the full article on superyesmore.com.
tl;dr: Don’t share bad practise. Be responsible. Be nice. Thanks.
Some time ago I sent a tweet which got quite a lot of interactions:
If you publish articles/demos/experiments, please make them accessible.
– Use <img> -> add alt text
– Use <input> -> use associated label
– Use <span class=".btn"> – use <button>
…Many will use/copy these. Don't share bad practise. Be responsible. Be nice. Thanks.
— Michael Scharnagl (@justmarkup) 1. November 2017
I read a lot of articles related to web development (HTML, CSS, JavaScript), which I discover via twitter, RSS or one of the many newsletters I am subscribed to; I enjoy reading them and I learn a lot from them.
Many of these articles include code examples and this is the point where I get sad sometimes. I am sad because these examples use bad practice: Inaccessible patterns, non-semantic HTML, –prefix-only CSS or JavaScript without feature tests.
Have you ever changed a class name in HTML and some time later got a bug report that a JavaScript functionality was not working anymore? I did and the issue was that the className was not only used as an attribute in HTML and as a selector in CSS, but has also been used by another developer in JavaScript. Over the years, working as a Frontend Developer I realized how important it is when and how to use id, class and data attributes in HTML, CSS and JavaScript.
So, I thought I share my current practise of using them.
Read more about My approach on using id, class and data attributes in HTML, CSS and JavaScript
When people talk about progressive enhancement it is often reduced to JavaScript. It involves much more – accessibility, performance, robustness… and also CSS. Badly written CSS can make a site as usable as a JavaScript error or using non-semantic HTML.
Let’s see why CSS can fail, why fallbacks are important and how to progressively enhance CSS.
In this article I would like to go through the why and when of using new features, ways to use features early and the responsibility of early adopters.
Read more about Early adopters – Using new web platform features
Info: If you are using a certificate from StartCom (for example the free StartSSL certificate) or WoSign you should start switching to another certificate (from Let’s Encrypt or any other trusted one). Otherwise, your site will be marked as insecure and might not be accessible to users in the next stable Version of Chrome (56) and Firefox (51) which will both be released at the beginning of 2017.
As of October 15, 2016 the average web page is about 2.5MB. The size is increasing and increasing. Five years ago it was 830kb and I don’t want to think of how big it will be in five years from now. In the past five years browsers changed a lot, among other things they also got a lot fast. So, on hand hand browsers get faster on the other we build heavier sites; It is a cat-and-mouse game.
It’s pretty crazy when you think about it. Browsers get faster, we have new technologies (responsive images, new image formats, Service Worker, HTTP/2…) and still surfing the web often feels as slow or even slower as five years ago. The main reason is that we build sites that are bloated and not optimized.
There are many reasons why slow and inaccessible web sites are launched day by day: Time, Budget, uninformed developers, false assumptions …
And there is another reason, I think has an impact: Browsers, browsers being tolerant and letting you load a 5MB background image, browsers being tolerant and letting you listen to events on inaccessible elements. You can throw a lot of *bad* things at browsers and they will not complain. Instead, they will do everything they can to clean up the mess.
Read more about Browsers should be more intolerant and punish bad practice
Yesterday at Polymer Summit, Alex Russell gave a fantastic talk about adapting to the Mobile Web; You should watch it!
“You need to be interactive in about 3 seconds, on 3G, on a $200 phone. Then, in less than 1 second on next visit”
He talked about that we are not succeeding on the mobile web at the moment mostly because our sites are too slow. After watching the video I thought a lot about the past, present and future of the web.
Let’s have a look at the last couple of years in web development.
Here is the post, you should read first before reading my thoughts,
This is a cross-post, the content I wrote down here is the same as in the original comment I left on his site.
I am currently working on a project where I have to build an interactive graph to accompany some content (text, images). I made sure it is accessible, but what if the JavaScript fails (an error in our JavaScript, connection timeout or because of another reason? For the last few days I wondered if I should make the content of the graph somehow available if the JavaScript fails or if the graph is not part of the core content and therefore an enhancement.
6 years ago, Ethan Marcotte published the article Responsive Web Design. It was a new concept, it was exciting, we all needed to learn how to adapt responsive design for our sites, we all made a lot of mistakes by doing so and are still learning.
Now, in 2016, there is a new term – Progressive Web Apps (PWA) – a “umbrella” term for responsive, connectivity independent, fresh, safe, discoverable, re-engageable, installable, linkable Apps/web sites with app-like interactions. Once again, we all need to learn how to integrate the concept of PWA’s, we need to find out what makes sense for our sites and we need to discuss and exchange a lot – we need to avoid the errors we made at the beginning of responsive web design.
While this headline is not true now (April 2016) it may be a headline of the near future. This morning one of my clients asked for switching to https for their site. I tried to convince many clients, including this one, over the last years to use https for all their sites saying that it will prevent many security and privacy issues, users will have more trust in a https site and so on; They didn’t really care. At least not until Google announced to reward sites with https in search rankings. From that moment they all wanted https and they also didn’t care how much it would cost them anymore. Read more about Google to reward sites with service worker (offline ready) in search rankings
Today I was curious to find out if there is a photo editor I could use in my browser. My requirements are that it should work offline, be responsive and progressive – so basically a progressive web app (pwa).
Read more about Discoverability of progressive web apps
*Every* time a new platform feature gets announced/implemented it doesn’t take long until people moan about not being able to use it because of the poor browser support. Shortly after people will blame browsers for not implementing the feature right away. Accompanied by complaints that the web sucks, browsers are stupid, specifications are **** and other useless statements. If you want a feature to be implemented in a browser – write about it, explain why you need it, prepare use cases, help finding bugs – be helpful and not another troll.
We can’t use feature X because it is not supported in browser Y. “By too many developers”
Some time ago I wrote about why I think every browser should show the alternative text while images are loading. I opened issues for every major browser engine and was looking forward to hear positive replies as I was really sure there couldn’t be a negative aspect about it. Some kindly people replied, said they already tested it and the user experience was not improved, pointed me to edge cases I haven’t thought about and made me rethink. It’s one of the cases where I say to myself “Hey, this should be really easy to implement” without thinking about the whole picture.
Some days ago Šime Vidas tweeted: Why don’t Chrome, Safari reserve space for <img> with height attribute in responsive layouts? As part of the discussion and after some testing in different browsers I found that Firefox is the only browser at the moment who shows the alt attribute while images are loading. I think it would be great if every browser would show the alternative text while images are loading – especially on slow connections this would be very helpful.
Read more about Showing the alternative text while images are loading
Earlier this week – January 11, 2016 – Apple announced the release of Safari 9.1 which will be available soon is available now. It ships with exciting features – picture element, fast-tap, CSS variables – to name a few. I was as surprised, as other web developers to see this happen and it makes me happy.
Read more about On the Safari 9.1 release
As of today, January 12, 2016, Microsoft will no longer support older versions (8, 9 and 10) of Internet Explorer. Many people are celebrating the “death” of these browsers and seem to be very relieved that they no longer have to support these outdated browsers. It seems for many it is all or nothing, black or white, no support or support and I am not very happy with this thinking.
If I open an URL and all I get is a blank page – be it because I turned JavaScript off, use an Adblocker, use an outdated browser or anything else – the developer building the site failed – no excuses. This is the case for every type of web site/app/whateveryoucallit – be it a WebGL game, a single-page application, an article or a cat gallery.
Read more about Every web site has to start with server-side rendered HTML – no exceptions.
I never had syntax highlighting for my code examples on this site and thought it is finally time to add one. After looking at some solutions I decided to use Prism as it is well tested and maintained and extensible.
Read more about Syntax highlighting as an enhancement
As part of the open redesign of this WordPress site I also added a Service Worker – to improve performance and to offer an offline experience. I encountered some problems along the way so I thought it is a good idea to write about my findings. As a starting point I used this basic implementation by Brandon Rozek.