• End of An Era

    Today I gave a talk on the EU Web Accessibility Directive at WordCamp Turku. The slides to my talk are on SlideShare, but a blog post summarising the talk will be up here next week. Today was also my last day at Zeeland Family.

    I joined H1 in 2012 as the third employee. It was my first “real” web development job working for a company, after almost 4 years of working as a freelancer. In 2016 our small team was acquired by Zeeland Family, and overnight we gained over 130 new colleagues. During these years I’ve had the priviledge of working with extremely talented, smart people and all-round fun and lovable human beings. Thank you, you know who you are.

    Now though it’s time to move on, meet new people, face new challenges and learn new things. 

  • Gutenberg editor styling: more work for CSS developers?

    Many agencies trying out Gutenberg early seem to have run into issues styling the editor. Keeping the front end and editor styles similar and in sync will be even more important with the new editor because of its visual nature, but it doesn’t seem like it’s going to be easy for developers.

    In June, Marie Manandise wrote about her Gutenberg research at Studio 24. The post is quite long and worth reading even though Gutenberg development has progressed a lot since then. One of her main conclusions was quite scary though:

    Were we to implement one of our current websites with Gutenberg now, we estimate that the extra CSS work required to style blocks in the editor and the complexity of updating block markup would more than double our development and QA time.

    And that’s not counting the time to invest in coming up with internal best practices, build tools and a potential bank of re-usable components. 

    “We tried converting a bespoke website design in WordPress with Gutenberg” on Medium

    Luehrsen Heinrich‘s more recent experiences building a site for a game studio were overall positive, but they too mentioned this in WP Tavern’s article:

    From a development perspective, Luehrsen said his team still struggles with the backend styles for the editor and that frontend and backend styles differ wildly because of that. They also haven’t yet found a maintainable, stable way of applying global styles to the Gutenberg editor.

    “How a Munich-based Game Studio is Using WordPress and Gutenberg to Power Its Website” on WP Tavern

    Exciting times. Hopefully there’s still time to do something about that now that 5.0 development has been pushed back to November.

  • Trying out webmention support on my blog

    This post is a test. I like the idea of owning my content, instead of leaving it inside corporate silos like Twitter, Instagram and Facebook. Webmentions are a cool W3C recommendation for mentioning/replying to another page on the Internet from your own site. I see it as a standardised way to do what bloggers used to do in the old days anyway, before all these fancy comment forms and social networks.

    This post should also be automatically posted to, and collect comments and retweets from Twitter using Bridgy, if the works as advertised. Let’s see.

    If you want to try out these things, start by installing the IndieWeb plugin for WordPress, or read more on IndieWeb.org if you’re using some other system.

  • The Paciello Group on accessibility for people with anxiety and panic disorders

    I’ve always thought the prompts on booking sites that tell you there are only 2 rooms left were annoying, but hadn’t considered them an accessibility issue until now. Good read, and there’s a second part coming too.

    The web is awash with all manner of so-called dark patterns, designed to convert visitors and part them from their money. While such intrusions can be a source of irritation or even stress for many people, they may be complete showstoppers for people with anxiety or panic disorders.
    — Read on developer.paciellogroup.com/blog/2018/08/a-web-of-anxiety-accessibility-for-people-with-anxiety-and-panic-disorders-part-1/

  • Not Our (Accessibility) Problem

    I was walking around town with my 1-year-old daughter, who was in a push-chair. We were at the basement level of a new shopping center, following the signposts to get to the exit nearest to a bus stop. At one point, there was a flight of stairs, with a small lift next to them, so of course I assumed that lift would take us to ground level.

    (more…)
  • Page Size and Plugins

    After switching to a very minimal blog design, I realised what a huge impact (relatively speaking) libraries like jQuery and plugins like Jetpack can have on the weight of a page.

    (more…)
  • Express Review: Going Offline by Jeremy Keith

    Jeremy nails it again with this beginner-friendly introduction to Service Workers and Progressive Web Apps. The foreword to the book says “you’ll gain a solid understanding of how to put this new technology to work for you right away” and I’d say that is very accurate.

    One of the important things the book emphasizes is that any existing website can benefit from service workers, not only fancy single page apps.

    If you’re like me and don’t know much about service workers, get this book now: abookapart.com/products/going-offline

  • Moving from CSS Frameworks to CSS Grid

    https://wordpress.tv/2018/02/18/daniel-koskinen-moving-from-css-frameworks-to-css-grid/
    This is a long-overdue blog post version of a talk I did at WordCamp Stockholm in November 2017.

    I’ve been playing around with various CSS frameworks for the past eight years. All these frameworks like Foundation, Bootstrap and Blueprint have really only served one purpose for me: to disguise the fact that until now, layout in CSS has been a hack.

    (more…)
  • Thoughts on the Contrast Swap Technique for Improving Performance

    In her post three days ago on CSS Tricks, Una Kravets described a clever technique she discovered for significantly reducing image sizes on the web with little loss of quality. Essentially the idea is this: 

    1. Reduce the contrast of the image in Photoshop
    2. Re-apply contrast using CSS filter()

    With this process, Kravets managed to get between 23% to 28% reduction in image size, which can add up to a lot of KB if you have many images on the page. I think this technique is a great discovery and a boost for image-heavy sites that don’t need to worry much about good IE support… but. But, I can’t help but think it does smell a bit hacky.

    This kind of contrast trickery shouldn’t be done in CSS, it should be in the image format. And to be clear, I don’t mean to criticize Una’s discovery. If it’s possible to reduce contrast and then re-apply it on the fly with little perceptible loss in quality, surely those instructions could be passed along in the image files themselves and not have to rely on a separate stylesheet which may or may not load? I guess we’d need a new image format for that…

  • Lifehack Tip: Make Better Use of Your Time by Rearranging Icons

    I recently discovered it’s pretty easy to trick myself into reading more books and wasting less time looking at my Twitter feed. A lot of my phone usage is just a habit and habits can be changed.

    So here’s the magic 3-step program:

    1. Move social media apps into a folder or off the home screen of your phone. Or even better, remove them completely (which I have done to Facebook and Instagram a while ago)
    2. Replace with stuff you actually want to be doing. For me that means iBooks for various ebooks and Pocket for saved articles.
    3. Profit!