Daniel Koskinen

  • Trainspotting

    Black and white photo of a train passing through an urban environment. The train engine fills most of the frame. In the foreground, lower right corner a child is waving at the train from behind a wooden fence. The driver of the train can be seen waving back through the window of the engine.
    Fujifilm X-T3, XF 16-55 f2.8 @ f2.8

  • More Northern Lights

    There was a magnetic storm yesterday that gave us a spectacular light show even down in Tampere, where we rarely see the Northern Lights. I walked up to place where I could see the northern sky, and what a show it was! If only there weren’t so many streetlights.

    View of a clear night sky over a lake. Hundreds of stars are visible in the top half of the photo, emerald green aurora borealis cover the sky from left to right.
    Green curtains hanging from the Heavens.
    View of a brightly lit wintery street at night. A white wooden house is in the foreground on the left. Green and red aurora borealis cover the sky above.
    View straight up of aurora borealis in the night sky. Green and red streaks of light radiate from the centre. Stars are visible in the background.

  • Three Things to Instantly Improve the Quality of Your Front-End Code

    Today is Global Accessibility Awareness Day, which exists as a yearly reminder that about 1 billion people in the world have some form of disability, and that among other things, digital products and services should be usable and accessible to all regardless of ability. In this post I’ll list three simple things you can do to increase the accessibility and overall quality of your digital product. There are many other things that should be done too, like manual accessibility evaluation and testing with real users, but this will get you started.

    1. Use real buttons

    If you’re about to add a click event handler on a span or div, stop. There are very rarely any good reasons for doing this. What you probably want is a button.

    <button>: The Button element on MDN.

    Yes, it is possible to turn a div or span into an accessible button, but you have to take care of keyboard accessibility yourself and make sure it won’t break later. Hardly worth it.

    If you’re a code reviewer and you see a click event handler on something which is not a native interactive element, reject the pull request unless there is very good justification for making the code more complex than it probably needs to be, accessibility has been taken care of and there are tests in place to make sure it stays accessible.

    If you’re building something more complex, follow the specs instead of reinventing the wheel:

    2. Do keyboard testing

    When you’re developing things for the web, you’re probably doing this on a keyboard. This means it should hardly take any extra time at all to start doing keyboard testing. Also consider whether you’d be able to use your fancy custom component with a keyboard without instructions. If not, add instructions or even better, fix the user interface. Follow WAI-ARIA specs for common components instead of inventing your own.

    3. Do automated testing

    Begin by installing a browser extension such as axe by Deque or Wave by WebAIM (or both). Automated testing can catch only a subset of accessibility issues, but it doesn’t mean it’s not useful.

    When you’ve got the hang of using the browser extensions to fix issues, try adding automated accessibility testing to your pipeline for example with one of the many packages in the axe-core-npm repository.

    Hope you found these tips useful, for more about Global Accessibility Awareness Day, see the official GAAD website.

    ,

  • Detecting Windows High Contrast Mode for New and Old Browsers

    There was a good post by Scott O’Hara last Thursday on how to detect Windows High Contrast mode in JavaScript and CSS.

    The most straight forward way to do this is to use their media queries in CSS (forced-colors: active and prefers-color-scheme: dark, respectively).

    While the media query for forced-colors works well with all modern browsers in Windows (Chromium Edge, Chrome, Firefox), it doesn’t work in IE or old Edge. Since many people using assistive technology might still be stuck on IE for various reasons (see e.g. WebAIM’s latest survey), it might be a good idea to support the old proprietary media query -ms-high-contrast.

    As detailed in a Microsoft blog post from 2020 on styling for Windows high contrast, you can support both old and new in CSS with
    @media (forced-colors: active), (-ms-high-contrast: active) { /* ... */ }     and in JavaScript matchMedia('(forced-colors: active), (-ms-high-contrast: active)').

    ,

  • Automated accessibility tools don’t catch HTML parsing errors

    It would save a lot of time in the day of an accessibility practitioner if automated tools could catch more accessibility errors. However, I think it’s a reasonable assumption that they should catch errors with incorrect nesting of HTML or ARIA. Unfortunately this is not the case, and Adrian Roselli has a nice breakdown with tests on his blog:

    Developers who build a broken thing, but do not have the necessary testing or even standards experience might rely on automated tools and produce problematic content as a result.

    Source: Beware False Negatives | Adrian Roselli

  • Accessibility and Progressive Enhancement

    Thinking with a progressive enhancement mindset, that is starting with the most basic HTML features and enhancing with more advanced stuff, is in my opinion the best way to go about building inclusive, accessible websites. Jeremy Keith wrote about some accessibility feedback he got and how his originally robust code made the solution an easy fix:

    Drag’n’drop revisited

    ,
    ,

  • Clouds and Ice

    Thick clouds above an icy lake, sunlight coming through in distance
    View South-West from Pispala, Tampere over Lake Pyhäjärvi. Taken on March 10, 2019 with Canon EOS 100D
    EF40mm f/2.8 STM @ f/8, 1/1600s

  • Getting into Night Sky Photography

    Since a child, I’ve been a space nerd. Go and ask 14-year-old me about space and he could tell you a whole lot about black holes, quasars and quantum mechanics. Weirdly enough this interest in space did not extend to observing the actual night sky that much. Possibly this was because most of the time we’d lived near the center of town where light pollution ensured that the night sky didn’t look very interesting. Recently, though, this has changed, thanks to a growing interest in photography. Digital camera sensors can gather a whole lot more photons than the naked eye is able to perceive.

    (more…)
    ,

  • The First WordCamp Nordic

    A little bit over a week ago, 600 people from all over the Nordics and beyond gathered in Helsinki for the first-ever WordCamp Nordic. I enjoyed it very much, not least because it was the first time at a Finnish WordCamp that I wasn’t speaking at or organising the event. Huge thanks to my former colleague Marco Martins and the other organisers who put in a lot of work to make it happen.

    I wrote about the event in Finnish on the company blog

  • Christmas Pudding, Revisited

    Nine years ago I wrote a post on my first experience making my own Christmas Pudding at home, just like my mum used to make them. I haven’t been bothered to make my own for a few years now, especially since they are easier to find these days in Finland. Like I wrote in my 2009 post, they should be steamed for up to 6 hours, which is A Bother. This year my wife and I made them ourselves again, but it turned out we had made twice the amount of pudding mixture required to fill the two Pyrex bowls we had bought specially for them. My wife then had an excellent idea: let’s make pudding cupcakes!

    (more…)
    ,