yatil.net feed http://yatil.net/blog Kirby Sun, 29 Apr 2018 00:00:00 +0000 The latest updates from Eric Eggert’s blog Sunday Seven for April 29, 2018 http://yatil.net/blog/sunday-seven-for-april-29-2018 blog/sunday-seven-for-april-29-2018 Sun, 29 Apr 2018 00:00:00 +0000
  • Swaziland king renames country Kingdom of eSwatini (The Guardian)

    Internationalization is hard, now you have to fit in a country with a lower case first letter.

    Meaning “place of the Swazi”, eSwatini is the Swazi language name for the tiny state landlocked between South Africa and Mozambique. Unlike some countries, Swaziland did not change its name when it gained independence in 1968 after being a British protectorate for more than 60 years.

  • Hand tremors and the giant-button-problem (Axess Lab)

    In accessibility, we usually argue for large tap areas – but they can be a problem for users with certain motor impairments.

    The user is trying to place his finger between the news stories. He’s hoping the space is unclickable, so that an accidental tap while trying to scroll will not activate a link. However, every part of the screen is linked. It’s like the whole interface is one giant button – hey what a clever comparison, let’s add that to the title of this article!

  • The BBC is letting you download more than 16,000 free sound effect samples from its archive (MusicRadar) > There can be few organisations that have used more sound effects than the BBC, so there’s bound to be great interest in the news that the corporation has now made more than 16,000 of its FX available for free download. These are being released under the RemArc licence, which means that they can be used for “personal, educational or research purposes”.

  • Time.is

    A useful site for people who need to communicate across time zones.

  • For everyone (Hidde de Vries)

    It appears ‘for everyone’ can have different meanings and I think it is important to see the difference between them, so that we are not fooled by for-profit companies that present themselves as charities. The web itself is a place where people are put first, and a place where power is not exercised on people, it is given to people.

  • Bits Up!: Cache-Control: immutable

    In recent months, I have been surprised about the amount and possibilities of HTTP headers. Immutable is certainly one to add to the tool belt.

    When a client supporting immutable sees this attribute it should assume that the resource, if unexpired, is unchanged on the server and therefore should not send a conditional revalidation for it (e.g. If-None-Match or If-Modified-Since) to check for updates. Correcting possible corruption (e.g. shift reload in Firefox) never uses conditional revalidation and still makes sense to do with immutable objects if you're concerned they are corrupted.

  • gridtoflex.com

    Good advice! (However, don’t use emojis in your CSS: It’s less understandable as you think it is, and there are likely weird edge cases in browsers.)

    CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won't really work as you expect (more info here). This site is a solution for you so you can start to progressively enhance without fear!

  • ]]>
    Hyphenation, Languages and Code http://yatil.net/blog/hyphenation-languages-code blog/hyphenation-languages-code Tue, 10 Apr 2018 00:00:00 +0000 Jeremy posted a solution for multi-language sites where you want to switch hyphenation on when the page language is set to (for example) German:

    [lang="de"] { hyphens: auto; }

    This works great until you have code on the page. Even if we have word-wrapping for code enabled (and we should on responsive sites), hyphenation is not what we want, usually. The same goes for code in sentences. So I’d suggest adding the following to the CSS:

    [lang="de"] pre, [lang="de"] code { hyphens: none; }
    ]]>
    On the #A11y Rules Podcast http://yatil.net/blog/on-the-a11y-rules-podcast blog/on-the-a11y-rules-podcast Sun, 08 Apr 2018 00:00:00 +0000 Nic @vavroom Steenhout (Blog) invited me to his #A11y Rules Podcast. We talked about my work with Knowbility and the W3C Web Accessibility Initiative (WAI) and how I got into accessibility. Nic’s podcast is short and sweet, so you don’t have to listen to me waffling on for too long. Nic makes transcripts of the episodes available. Episode 1 of the two-part interview is out now!

    Thank you, Nic, for having me!

    ]]>
    Sunday Seven for April 8, 2018 http://yatil.net/blog/sunday-seven-for-april-8-2018 blog/sunday-seven-for-april-8-2018 Sun, 08 Apr 2018 00:00:00 +0000 I’ve been on vacation for a bit, which was incredibly relaxing. Some pictures are available on Instagram (for now – I need an indie web solution for this).

    • Professionalism: Design’s Lost Generation (Mike Monteiro, Medium) — Everyone who helps to produce a product is a designer, every decision counts. It’s important to make ethical design decisions. There are two words every designer needs to feel comfortable saying: ‘no’ and ‘why’.
    • History: A Short History of WaSP and Why Web Standards Matter (Jay Hoffmann, thehistoryoftheweb.com) — Web standards wouldn’t be widely implemented without the volunteer groups formed in the early days of the internet.
    • Indie Web: It’s Time for an RSS Revival (Brian Barrett, Wired) — I firmly believe that the distributed web is the better model. But feeds aren’t a solution for everything: I would not want to subscribe to a newspaper because of the huge output there. Also it only furthers the information bubble. We need solutions to surface a diverse set of news.
    • Communicating Ideas: Write it down (Mark Boulton) — I often ask people to write down specifics of their problem or suggestions. It often helps me to better understand but also helps others to understand the complexity of their request or find better/other approaches. Conversations are great for brainstorming, but to nail it down, write it down.
    • Accessibility: Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility (Andy Bell, css-tricks.com) — A broad overview over some accessibility techniques. See also the W3C WAI Tips for Getting Started with Web Accessibility.
    • Malpractice on the web: Bei der „Sächsischen Zeitung“ wird Auschwitz zum Genuss-Moment (Stefan Niggemeier, übermedien.de, English machine translation) — There’s a new advertising form that content publisher can use: A swirly overlay that advertises a product inside the article image. It’s just really bad when the article image depicts the Auschwitz entrance gate and there’s no way for publishers to exclude sensitive material. (The whole ad form was disabled after the incident.)
    • Code examples: carbon — If you want to use images of code in your presentation, carbon adds a window frame around it. It looks very sharp. There is a way to export SVG, but I have not looked into the accessibility of it. (Provide a link to the code or add an alternative text.)
    ]]>
    Sunday Seven for March 18, 2018 http://yatil.net/blog/sunday-seven-for-march-18-2018 blog/sunday-seven-for-march-18-2018 Mon, 19 Mar 2018 00:00:00 +0000 I’m in San Diego where I’ll attend the W3C WAI Education and Outreach WG Face-to-Face meeting, and CSUN, the biggest accessibility conference. It’s always amazing to be able to work with my colleagues in one room and to meet all accessibility experts in one place.

    • Beta: W3C/WAI Website – We managed to launch the beta for the new WAI site last week. There are still a few rough edges, but it is essential to get it in front of people. A lot of work from many people went into the site, from design, user testing, development. I made sure we can edit resources in their respective Jekyll projects on GitHub and then integrate it into one repository using git submodules. All repositories use one common theme, so changes to it will be reflected in all resource previews, hosted on GitHub pages.
    • Color: Colorblind Accessibility on the Web – Fail and Success Cases – An excellent overview of colorblindness and common pitfalls.
    • Principles: Accessibility Interview Questions – Everyone should have answers to the question collected by Scott O’Hara. Most aim at general principles than specific techniques.
    • Notifications: Inclusive Components: Notifications – Another excellent write-up by Heydon Pickering.
    • Buttons: Designing Button States – Tyler Sticka on different aspects of button design. Sweating details like this can greatly improve the usability and accessibility of your website or application.
    • PWA: Minimal viable service worker – I don’t know enough about Progressive Web Apps to implement them correctly, yet. However, Jeremy Keith’s article feels like a good starting point to learn more about it.
    • Fonts: Shipping system fonts to GitHub.com – Interesting article on a very particular approach to shipping fonts.
    ]]>
    Sunday Seven for March 11, 2018 http://yatil.net/blog/sunday-seven-for-march-11-2018 blog/sunday-seven-for-march-11-2018 Sun, 11 Mar 2018 00:00:00 +0000 This was a long work week, so here are some games and apps instead of articles as I couldn’t find time to concentrate on pieces.

    • TV: Jessica Jones, Season 2 – While work was plenty, some of it was also repetitive, so I managed to watch the new Season of Jessica Jones. Very intense storytelling.
    • iOS: Altos Odyssey – When I downloaded Alto for the first time, I dismissed it as being too similar to its precursor. However, it has more facets, and it’s easier to achieve goals.
    • Podcast: Playing for Fun with Tiffany Arment and Myke Hurley – Two people talk about the positive of a video game. It’s refreshing and fun. Episode 2 is about “Celeste” which I have never played, but Episode one was about one of my favorite games…
    • Switch: Super Mario Odyssey – Such a refreshing re-imagination of Mario games. Certainly one of the best titles on the Switch to date.
    • Version Control: Tower – Tower is a fantastic app for git version control. The people behind the app also have published a comprehensive learning resource for git.
    • CSS: Third party CSS is not safe by Jake Archibald – Whenever you embed any resource from a third-party server, you are building a tunnel under your site’s security. The same also applies to CSS. Great list of examples from Jake.
    • Browser: Firefox Developer Edition & its inspector – Working with grids and other newer CSS benefits from a good inspector and Firefox has stepped up the game. Especially inspecting grids is impressive. The browser also has a beautiful and distinct dark theme.
    ]]>
    Is this thing still on? http://yatil.net/blog/is-this-thing-still-on blog/is-this-thing-still-on Sun, 04 Mar 2018 00:00:00 +0000 Let’s wipe some dust off this old blog, shall we? There’s a lot to do, including accessibility fixes, but sometimes you just have to start somewhere.

    ]]>
    Sunday Seven for March 4, 2018 http://yatil.net/blog/sunday-seven-for-march-4-2018 blog/sunday-seven-for-march-4-2018 Sun, 04 Mar 2018 00:00:00 +0000 In Sunday Seven I publish a list of seven links to things on the internet. The only criteria to make it in this category is that it is interesting to me.

    • Accessibility: Apple Park’s Visitor Center by twitter user @xarph – An interesting twitter thread about the many small details build for accessibility.1 (If you enjoy twitter threads as much as I do2, read the whole thread as one article on “Thread reader”.)

    • AMP: “Ends and Means” by Jeremy Keith – Insightful post by Jeremy on how companies can act together to help good and how sometimes they go a step too far. To use new CSS properties in Firefox, websites need to support HTTPS before those are available to them. This behavior creates a whole layer of CSS that is harder to be used while learning.

    • Accessibility: “WAI-ARIA Screen Reader Compatibility” – An overview of ARIA support which is good, but there are always edge-cases. It also shows the tests used to determine support, so if you want to get an impression on how different ARIA roles or attributes are voiced, you can look it up here.3

    • Layout: “Layout Land” by Jen Simmons – Lots and lots of short videos that describe how to create different layouts with the new capabilities in CSS & Browsers.

    • TV: “The Tick” (Amazon Originals) – Sometimes, especially while coding, I need to distract parts of my brain while working. The Tick is funny and not hard to follow. I enjoyed it.

    • Podcast: Game Show by The Incomparable – I’m late picking up this particular podcast because I dismissed the idea that game shows as podcasts could work. Boy, was I wrong! I love “Random Pursuit,” “Inconceivable,” “Low Definition,” and the text adventures and they had me spontaneously laughing out loud several times in the last few weeks.

    • Action: #WHOagainstGuns – Over 40 Doctor Who podcasters are supporting actions for gun control in the U.S. and plan to produce an exclusive series of commentary podcasts for the classic story “The War Games.” Access to those unique recordings will be only available to donors. More info, including a list of possible organizations to donate to, is available on the Reality Bomb website.


    1. I don’t necessarily agree with the marking of the AED which should arguably be easier to find, but all in all, it is a testament that accessibility does not need to look ugly.
    2. Which means “not very much.”
    3. Beware: As those test cases are there for testing ARIA attributes the code might not be an example of a best practice but of a possibility.
    ]]>
    My #ID24 talk http://yatil.net/blog/my-id24-talk blog/my-id24-talk Mon, 12 Jun 2017 00:00:00 +0000 On Friday, I was invited to talk at #ID24 about WAI-ARIA, with a special focus on the ramifications of bad ARIA. You can view the slides or watch the video.

    ]]>
    Speaking at Inclusive Design 24 #ID24 http://yatil.net/blog/id24-2017 blog/id24-2017 Mon, 05 Jun 2017 00:00:00 +0000 I am thrilled to be speaking at the annual Inclusive Design 24 event on June 9th. At 5 am UTC time (that is 7 am CEST), I’ll speak about my growing frustrations of ARIA implementations in the wild. The talk is called “ARIA Serious.” Check the event website for a schedule in your time zone and to see the other 23 amazing speakers. As every year, the talks will be available on Youtube after the event and I’ll make sure to link to them from here. Find all the other events, and a backlog of 72 talks, in the recent years on the pages for 2014, 2015, and 2016. The event is organized and sponsored by The Paciello Group.

    ]]>
    Web Accessibility Tutorials updated http://yatil.net/blog/a11y-tutorials-updated blog/a11y-tutorials-updated Sun, 07 May 2017 00:00:00 +0000 As many of you might know, I have been the primary editor of the W3C WAI Web Accessibility Tutorials which provide practical guidance on how to implement web accessibility. A few days ago, the Education and Outreach Working Group and I were able to publish a major update. We added three new tutorials (which were released as a draft before). A lot of thought went into framing the tutorials the right way, and we addressed one of the issues with WAI resources that we often hear about by making it very streamlined and not wordy. I am proud of the new tutorials: Page Structure, Carousels, and Menus. I hope they can be a valuable building block for learning about and teaching web accessibility. As always, we are happy to take suggestions via GitHub; a change log is available. I want to thank my colleagues in the Education and Outreach Working Group for helping me to shape the tutorials. It’s invaluable feedback.

    ]]>
    Teaching at AccessU 2017 http://yatil.net/blog/teaching-at-accessu-2017 blog/teaching-at-accessu-2017 Sat, 22 Apr 2017 00:00:00 +0000 Next month I will continue the tradition of flying over to Austin, TX, USA to attend the annual AccessU conference and teach some classes. Organized by Knowbility, the conference is a gathering of brilliant minds around accessibility and is an excellent opportunity to broaden your accessibility knowledge. Here’s an overview of my four classes:

    • Responsive and Accessible Images (March 17, 2017 – 2:15pm–3:45pm)Images are an important part of the web. This course will give an overview of the considerations for accessible images and their alternative texts, but also take a look from a content strategist perspective on how to present pictures in a responsive context. You will learn how to write good alt text, when longer descriptions are necessary, using resolution-independent images, and how to use different images in different responsive contexts for art direction.
    • Advanced Accessibility: Deep Dive for Developers (March 17, 2017 – 4pm–5:30pm)This session gives a general overview of good development practices that ensure a more accessible web product. It includes ARIA, styling, and advice for making your website more semantic and thus more accessible to everyone.
    • Use ARIA Responsibly (March 18, 2017 – 8:30am–10:00am)How to build web components, websites, and web applications in a way that leverages the capabilities of HTML5. Add ARIA on top to enhance the user experience. You’ll learn where to find information on how to implement ARIA correctly, and shows you a practical example.
    • Simplify Your Development Life with Tools, Tests, and Procedures (March 18, 2017 – 10:15am–11:45am)A condensed overview on how developers can simplify their life by making sure that procedures and tests are in place to ensure accessibility in every step.

    Tickets for AccessU are still available.Also, Knowbility is organizing the Inaugural Knowbility AccessibilityLeadership Symposium on May 15th and 16th: The opportunity for senior management to collaborate, confer and learn about accessibility challenges in the enterprise and how to address them, leading to a more diverse customer base. After AccessU, I’ll attend the W3C Education and Outreach Working Group’s Face to Face Meeting on May 19 and 20.

    ]]>
    :focus-ring http://yatil.net/blog/focus-ring-video blog/focus-ring-video Sat, 25 Mar 2017 00:00:00 +0000 Great video over at the Google Chrome Developers channel about the upcoming CSS Level 4 :focus-ring selector (draft). The focus is often removed for stylistic reasons when using the mouse, but then keyboard users also have no indication of where they are on the website. :focus-ring solves that issue.

    https://www.youtube.com/watch?v=ilj2P5-5CjI&index=1&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g The video includes a shout out to this handy polyfill on Github. There are other videos about accessibility, also presented by Rob Dodson, available on the channel as well. Captions are available.

    ]]>
    My personal review of the 2016 MacBook Pro http://yatil.net/blog/the-2016-macbook-pro blog/the-2016-macbook-pro Sat, 28 Jan 2017 00:00:00 +0000 In 2006 I got my first Mac ever, the 2006 Apple MacBook “Core Duo” 1.83 13”. After owning a humongous Acer 15” Laptop in the previous years, the experience of owning this computer was something from another world. Since 2013 I owned a 13” MacBook Air with 8GB RAM and an 1.7GHz Intel Core i7 processor and while I loved the portability of the device, I recently started to feel the limits of the processor and the disk space (just 128 GB).

    What I got

    I bought a 13” MacBook Pro 2016 with a Intel Core i5 3.1 GHz processor and Touchbar and 16GB of RAM and 512 GB of SSD storage. In Space Grey. ## What I use it for

    I mainly do web development, lots of writing and editing – not something you necessarily need “Pro” hardware, to be honest. But then there are some operations, like optimising images and decoding videos, that happen often enough so I can use the power. It’s also amazing how quickly Jekyll and Middleman projects build. I sometimes need to test websites in Windows, and firing up a virtual machine is now obviously less of an hassle. In addition, I occasionally play Cities: Skylines and while there is a bug with the (unsupported) Intel graphics card, it is really cool to see houses and cars that are not just mushy blobs of textures. ## What I like

    • The Screen is just great. I never had a “Retina” screen before and this is really good. Type looks crisp and icons do, too. However parts of the web look awful as many people are not optimising their graphics. It’s especially appalling with icons. Use SVGs, everyone!
    • The Speakers are phenomenal. I have never really used the built-in speakers in my previous Macs, and I don’t really plan to use the ones built into this machine, but wow, they sound really good.
    • The Touchbar is a great gimmick. When apps support it, it shines, but without support it’s only mildly useful. The Touchbar is empty in that case, so you got a gap on the keyboard. I usually don’t need to use function keys and if I do pressing fn (like I used to do) brings them back. I have accidentally touched the Touchbar while typing and when it happens it is irritating. However it happens less and less. The bar is well integrated into Safari, so you can play and pause video playing in the browser from the bar and also scrub around the video which is much more intuitive and precise than using the touchpad and drag the handle. The only thing that is really annoying is that the Touchbar crashes occasionally – putting the computer to sleep and waking helps.
    • TouchID goes without saying. Unlocking the Mac or 1Password is blazingly fast. Now hurry to provide Apple Pay in Germany, Apple!
    • The built quality and portability. It’s incredible how dense this computer is, when you put the Air and the Pro on top of each other, the Pro is much smaller. It is thicker, but not by much. The space grey color is stunning.

    Other observations

    • The Keyboard is right in my ballpark. It is clicky, it is responsive, it is totally fine. But I don’t have a very specific taste in keyboards and I found every Mac keyboard that I typed on at least OK. Not having the inverted-T shape for the arrow keys is throwing me off however as it is hard to feel for the position of the arrow keys.
    • The Trackpad is working as expected. As a “tap to click” person it’s totally good for me. I haven’t used any force touch features a lot, but using it for the occasional dictionary lookup is useful.
    • Thunderbolt 3/USB-C works as expected. I can charge my Mac from either side, which is great, as the socket is on the right when I’m sitting on my couch. I miss MagSafe though. I bought one USB-C to USB-A and one USB-C to VGA/USB-A/Power adapters from Apple. I also got a two pack of the Aukey USB-C/USB-A adapters (affiliate link). My external display (that I only use for referencing stuff when needed) and microphone are plugged in into the VGA/USB-A/Power adapter all the time. I still need a good SD card adapter but did not find one that I think is worth buying.

    Migration

    • I chose to start fresh and not use Migration Assistant to move my data.
    • I migrated most apps via the Mac App Store and SetApp and downloaded others directly.
    • I moved my data almost exclusively by AirDrop, which worked very well for my 6GB MailMate archive and my 10GB ~/projects folder (yes, I need to clean that up at some point).
    • Other data was synced using iCloud (works well for me, ymmv), Dropbox (where I downgraded to the free plan after moving most of my data to iCloud), and iCloud Photo Library.
    • The most inconvenient part was installing all the command line tools, like Middleman, Jekyll and Gulp. In the end this was just a small portion of the migration experience which took about one day.

    Conclusion

    This is not a Mac for everyone. It might not be for you if you have special needs, or need more power. However I think it is very versatile and while the USB-A to USB-C transition is inconvenient, it is where the future lies. This might be my last PC-type of computer (if there comes more pro functionality to the iOS platform), so being future proof is important.

    ]]>
    Tom Scott: The Little-Known Patterns on British Streets http://yatil.net/blog/tom-scott-tactile-pavement blog/tom-scott-tactile-pavement Tue, 10 Jan 2017 00:00:00 +0000 Tom Scott on tactile pavement: https://www.youtube.com/watch?v=cdPymLgfXSY

    ]]>
    Aleppo http://yatil.net/blog/aleppo blog/aleppo Wed, 05 Oct 2016 00:00:00 +0000 Over the last year, the name of a city is coming up in German news more often than I like it to be: Aleppo. It is not just a city involved in the war in Syria, it is the scene of a standoff that is lasting for months. This city, the mention of its name on the news, the descriptions of the cruelty that happens there, is especially painful for me. When I was in elementary school, we had Syrian neighbors who fled during the Gulf War. Mohammad and I shared a class. We were good friends, played football together, learned together. I still long for his family’s traditionally baked bread sometimes. After a few years, that felt like a whole life for me as a child, they had to go back. Although quite well integrated, there was no way for them to get a permanent working permit, and they were happy to get back into their home country. (Of course I don’t know if that was really really the case, but that was what I gathered as a child.) The children, Mohammad had a little brother and – I think – a baby sister, were not too happy to leave, having their friends in that small town where I grew up. One day, we said goodbye, and they made their way to their home city of Aleppo in Syria. The thought alone, that those people, including my elementary school friend, might be injured or dead is gruesome to me. Hearing from injured or dead children makes me think about the potential children of Mohammad and his siblings. For most, the war in Syria is far, far away. For me, it feels close. This is why I think getting to know other people, other cultures is so important. It allows us to be close with people and to not brush this conflict away as “someone else’s problem”. Image: Palmyra – Temple of Bel: A cultural heritage that was destroyed during the war. Uploaded by Juan Llanos on Flickr. See how that site looks today.

    ]]>
    Speaking at… Accessing Higher Ground http://yatil.net/blog/speaking-at-accessing-higher-ground blog/speaking-at-accessing-higher-ground Tue, 04 Oct 2016 00:00:00 +0000 I’m happy to announce here that I will be speaking at Accessing Higher Ground in November, representing Knowbility. The conference is in Westminster, Colorado and coins itself as an “Accessible Media, Web and Technology Conference”. I will do two three-hour long workshops:

    • Advanced Accessibility: A Deep Dive for DevelopersTuesday, Nov. 15th, 9am
      Focused on UI widgets, WAI-ARIA techniques and semantics, with some JavaScript as a garnish, this workshop will teach how to implement complex widgets in an accessible way that is true to the nature of the web.
    • Simplify your development life with tools, tests and proceduresTuesday, Nov. 15th, 1:30pm
      Developers are lazy. I know this because I am one. So having tools, tests and procedures in place that help developers to produce accessible templates and widgets is helping everyone. This workshop will give a broad overview about the possibilities and will also show how to implement some of the provisions in day-to-day work.

    Also, I will give two talks: - Semantic SubtletiesThursday, Nov. 17th, 8am
    This talk takes some of the semantic particularities that come also up in the workshop and will put them under the microscope and examine their meaning.

    • ARIA Serious?Thursday, Nov. 17th, 4pm
      Here, I will presumably give a few good and lots of bad examples of ARIA implementation and show where the pitfalls and chances of using ARIA are.

    If you are still thinking about going, maybe the fantastic lineup of speakers can lure you in. Register now at accessinghigherground.org.

    ]]>
    The web accessibility basics – Marco's Accessibility Blog http://yatil.net/blog/the-web-accessibility-basics-marcos-accessibility-blog blog/the-web-accessibility-basics-marcos-accessibility-blog Sun, 24 Jan 2016 00:00:00 +0000

    I always thought that it is not so difficult to find resources about these basics, the recurrence of that question prompted me to finally write my own take on this topic. So here it is, my list of absolute web accessibility basics every web developer should know about.

    A very solid overview of basic web accessibility techniques by Marco Zehe.

    ]]>
    My Facebook Time-Out http://yatil.net/blog/my-facebook-time-out blog/my-facebook-time-out Sat, 23 Jan 2016 00:00:00 +0000 Over the past years my social web interaction shifted from Twitter and this very blog more and more to Facebook. I have so many contacts and interactions there that it feels very overwhelming and occupying a good chunk of my free time that I would love to spend otherwise: Hiking through the sun, having random thoughts and ideas, read long-form articles or play video games. I was under the impression that engaging on Facebook – and to a lesser extend on Twitter – would allow me to relax, to have social interactions and would be worth the time. I have realized that this became less and less the case. Either things are fairly irrelevant for me, or there is in-depth political discussion. This made Facebook feel like a burden for me now, and the only way to reevaluate my usage is to stop using it almost completely. While I had a pinned tab with Facebook open at all time, as well as the mobile app installed, I have now closed that tab and removed the app from my iPhone. I have disabled all notifications. This is day three and I only had brief looks into Facebook on the mobile web version to check for important notifications. I also allow myself to syndicate content to Facebook – like this blog post and via an iOS extension called Linky (which doesn’t currently support sharing to WordPress, e.g. this blog hint hint) but also using custom Workflows. Although my brain doesn’t yet know what to do with those free cycles, it feels like a change for the better. I want to continue at least for another week or two. Then I probably need to make significant changes to the websites and people I follow to reduce the load. The experiments of CGP Grey and Myke Hurley inspired me for this time-out. They outline their methods of “Dialing Down” in an Episode of their (much recommended) Cortex podcast. (Image by Jonathan Bean via Unsplash.)

    ]]>
    2015 in Review http://yatil.net/blog/2015-in-review blog/2015-in-review Sun, 03 Jan 2016 00:00:00 +0000 Wowza, that was a densely packed year 2015 for me. Here is my short,long, personal review of the year:

    January

    Slow start into the year, attended a reading by Max Goldt at Zeche Carl (Carl Mine), a former mine and now event location, and even got a poster signed (yes, I’m used to my name being misspelled with a “k” in Germany): Max Goldt signature for Sandra and ErikA week later we’ve been back to Zeche Carl to see the “Terje Rypdal Trio”. It was a nice evening of jazz music and very relaxing. Then winter happened: some snow fell from the sky on the 24th and we decided to do a nice hike through the snow: !Gull on a post More photos on Flickr.[/caption] ## February

    February started with a huge disappointment: We had tickets for Tenacious D in the Paladium in Cologne. The concert itself was fine, but the venue is built in a way so that you are unable to see anything from farther back in the room. It felt like the money for the tickets was pretty much wasted. The weather on Valentine’s day was really nice and as it was a Saturday, we used the opportunity to do a hike and then had our traditional Valentine’s menu. !A walkway with trees More photos on Flickr.[/caption] The month concluded with an intercontinental flight to one of my most favorite cities: San Diego, CA for CSUN. As one of the best ways to cope with jet-lag is to just continue as if it is a loooooong day, we didn’t pass up the opportunity to visit a Nukem show in the Brick by Brick venue to see Norman Leggio of Psychotic Waltz play and have a chat with him. ## March

    It was quite cold and rainy in the first days in San Diego, but I have been at the CSUN conference all day anyway. I met all the nice accessibility folks and it is always refreshing to speak to people face to face instead of over the phone. The conference went swiftly by, including my two panel appearances and a lot of small meet-ups and 1:1 discussions. Afterwards we rented a car and got out to the Anza Borrego Desert State Park. It was beautiful, with all the nice landscape, cactus blossoms and animal wildlife. We even got to see some of the endangered Bighorn Sheep. I am always blown-away by the sheer size of the park. I got to drive a nice SUV for the week and it came in really handy when navigating the dirt roads. !Cactus blossom More photos on Flickr.[/caption] For one day only, we returned to Ocean Beach in San Diego, saying goodbye to the Pacific. !Sea-Gull on the Ocean Beach Pier More photos on Flickr.[/caption] The rest of the month, we were occupied getting out of jet-lag and adjusting to the freezing temperatures in Germany… ## April

    Slow-starting April had its first highlight with a Damian Wilson concert in Düsseldorf, which was really funny and entertaining, we will certainly visit again. Damian WilsonDamian WilsonThen I hopped on a plane again, to Austria this time. I attended BarCamp Graz and met the students of the Content Strategy program that I lectured in the following weeks. As the master program is directed at people who are already in jobs, the lectures were on the evenings or weekends, so it had little impact on my usual work. It was a fun time and I think the students really took something away regarding multi-screen design and accessibility. To close off the month we needed to make up for the disappointing Tenacious D concert in February. Good that Kyle Gass visited with Kyle Gass Band, this time playing in the Turock venue in Essen. We got premium spots on the staircase and could see very well. An enjoyable evening. Kyle Gass Band## May

    In May we visited the local botanic garden called Grugapark where we saw ducklings and goslings. !A Duck More photos on Flickr.[/caption] Just a few days later, I hopped on a train to Paris to attend the W3C@20 symposium, set in one of the nicest venue I’ve been to, and AC meeting. Another great opportunity to get into contact with the W3C members. !Thalys train to Paris More photos on Flickr.[/caption] And to continue the maniac travel, I again took the plane to the US, shortly after arriving from France. The destination this time: Austin, Texas. I was invited to give two presentations at the lovely AccessU conference and we did some light user testing of the How to Meet WCAG 2.0 prototype I worked on. In addition we had a two-day Education & Outreach Working Group meeting. I had half a day off and got to see a nice squirrel: Squirrel in a treeOf course there needed to be some more live music that month as well, and thus we attended the Rock Hard Festival, which is conveniently located just around the corner in the Amphitheater Gelsenkirchen. It was really awesome, three days of Metal and the festival allows for strolling around in the surrounding Nordsternpark. Venom @ Rock Hard Festival## June

    In early June, we took the opportunity to attend a Jan Delay concert that was “free and outside”. The concert was given at the nice world cultural heritage site of Zeche Zollverein here in Essen. Jan Delay at Zeche ZollvereinAlso in June, I got my Apple Watch (finally!). I still find it useful and wear it every day, but it is not as indispensable as a smartphone. Of course I also got onto a train that month. this time my destination was Utrecht in the Netherlands where I attended the face-2-face meetup of the AutoWCAG CG. I again collected user feedback sessions on the How to Meet WCAG 2.0 redesign. Afterwards another train ride brought us to my home town for a few days where we also attended Everyman, a reinterpretation of the classic play in a rock-opera style with support of the there-local band Vanden Plas. I can’t recommend seeing this enough. !Everyman at Pfalztheater Kaiserslautern Photo by @screenorigami.[/caption] ## July–August

    The month of the Sankt Peter Ording and Wacken Open Air vacation in a camper came. Luckily I have already blogged about this muddy mess, so no need to repeat that here. Shortly after coming back from the vacation, the annual Turock Open Air was in full swing. I think we only attended the Sunday because we had to harvest our field that was neglected while we were away. The week after that another short-range trip to Hamm where we stayed in the vegan hotel next to the Kurpark, where we got to watch the reggae night featuring Gentleman and _Jahcoustix._For me, that was a welcome change to the whole Metal this year. Stage at the Kurpark Hamm## September

    In early September I attended the NightlyBuild conference which had a few interesting talks. NightlyBuild.io Conference is about to goThe day before speaking at A-Tag in Vienna, we had planned to attend a concert in Hamburg, so I took Thursday evening off and we traveled to Hamburg, had a look at the Speicherstadt and then attended a concert of the band Eclipse. It was totally worth the hassle to take the really early flight to Vienna the next morning. ## October

    …or Fronteers month, as I prefer to call it. I did my usual talk at the Jam session and attended two extraordinary great days of talks in the main conference. The week after Fronteers, I started going to the gym and do exercises. I am still rolling with it although a medical annoyance has forced me to pause my efforts over the holiday break. View on the display of a cycling device in a gymIn the same week, we hit the Turock again to attend the concert of The Poodles. The concert was so great that we decided to attend the concert the following day in Cologne. The venue was also a bit smaller and thus the whole concert more intimate. On October 21st there was a showing of all three Back to the Future movies in the historic local cinema called Lichtburg which we attended, it was lots of fun and I enjoyed seeing all three back to back. The cinema also hired someone who parked a historic DeLorean in front of the cinema: DeLorean in Front of the CinemaAs my working groups did not meet, there was no need for me to travel all the way to Sapporo, Japan to meet my colleagues, which was a bummer, but honestly, I was traveling enough that year anyway… Instead we went to Bochum to see Eric Martin of Mr. Big play a nice solo concert. ## November

    We attended a show of the very entertaining comedian Willy Astor in Cologne, and watched James Bond: Spectre in the aforementioned Lichtburg cinema. I flew to Graz, Austria (and back) to speak at UX Day Graz, which was a very well organized event with great speakers. I can’t recommend it enough. Uhrturm GrazSunset as seen from Graz AirportThen I flew to Vienna (and back) to speak at DrupalCamp Vienna 2015, which was also a very good event with a very diverse audience and very diverse speakers. I also took the opportunity to visit my colleague Shadi and talk face to face about work. Somewhere in between I celebrated my birthday… Vienna Subway Train## December

    December was rather uneventful, I made it through without travel of any kind. I was published in the 24ways and Webkrauts advent calendars which made me quite happy. Of course we watched Star Wars: The Force Awakens. We also took advantage of the good weather over the holidays and hiked a lot through the sun. Kettwig Mühlengraben with the market churchMintarder Ruhrtalbrücke over the river RuhrWe also played the Thrash’n Roll board game, which has been tremendous fun. Thrash’n Roll board game## Review & Outlook

    I have the feeling that I have forgotten to mention so many of the little things that happened. 2015 was a really dense year but it was totally worth it. Let’s see what 2016 brings.

    ]]>
    The Incomparable on “Star Wars Episode VII: The Force Awakens” http://yatil.net/blog/incomparable-force-awakens blog/incomparable-force-awakens Wed, 23 Dec 2015 00:00:00 +0000 My personal thoughts about “The Force Awakens” are very well mirrored by the discussion on last week’s The Incomparable, Episode 277: Stormtroopers Are People. The panel consists of Jason Snell, Serenity Caldwell, Dan Moren and the hypercritical John Siracusa. I think that Siracusa’s characterization of the movie (around the 2h45 mark) is especially noteworthy, where he states that he managed to judge the movie for its own merits and not to have unfair expectations.

    ]]>
    Sunset http://yatil.net/blog/sunset blog/sunset Wed, 23 Dec 2015 00:00:00 +0000 As seen from the balcony.

    ]]>
    Line-On-Sides Headers Reloaded http://yatil.net/blog/line-on-sides-headers-reloaded blog/line-on-sides-headers-reloaded Sat, 19 Dec 2015 00:00:00 +0000 I read the Webkrauts advent calendar article by Jens Grochtdreis earlier today, it is about headers with lines on the side, quite like in the article image above. Actually exactly like the example above. (There is a similar article by Chris Coyier on CSS-Tricks for English-speaking people out there.) He presents a solution with one or two pseudo elements and an extra <span> in both cases and has a pretty simple code for it, as well. I wondered if there is an even simpler solution and I believe I have found one that doesn’t need the other <span> and just uses the pseudo elements. One caveat: the solution depends on flexbox, so older browsers are out of look and you might need some prefixes. But yeah, progressive enhancement!

    Heading – oh look, no span!

    h2 {
      display: flex;
      align-items: center;
      color: rebeccapurple;
    }
    
    h2::before, h2::after {
      flex: 1;
      height: 3px;
      content: '';
      background-color: currentColor;
    }
    
    h2::before { margin-right: 10px; }
    h2::after  { margin-left:  10px; }

    We define the heading as a flex container, align-items centers the pseudo elements. The ::before and ::after pseudo elements are set to the height that defines the width of the line. Using flex: 1 distributes the pseudo elements evenly, ans as they are before and after the text, they push it to the center. Margins help to have a gap between the text and the lines. To add the left and right variants, these two “modifier classes” (also known as layout classes) can be defined:

    .left-aligned::before {
      flex: 0;
      margin-right: 0;
    }
    
    .right-aligned::after {
      flex: 0;
      margin-left: 0;
    }

    Voilà! The effect works perfectly, is scalable and works when you don’t have tight control over the HTML, such as when you get output from a CMS WYSIWYG editor. You can play with the code in the following codepen:

    See the Pen Line-On-Sides Headers with Flexbox by Eric Eggert (@yatil) on CodePen.

    Addendum

    Of course, while writing this article, Gunnar Bittersman had already posted the flexbox approach to the article comments. He knows everything. But while reading the comments, the topic of more words per line came up and how the solution looks when there are more lines involved. Turns out: Not too good. The lines shrink to 0 and the only thing you see is the margin. Flexbox to the rescue. Again! The flex shorthand can take the values of three other properties: flex-grow, flex-shrink, and flex-basis. If we set flex-basis to 20%, this is the default width of the element. flex-shrink is set to 0 to avoid shrinking below those 20% but the flex-grow is set to 1 to allow growing larger than 20%:

    h2:before, h2:after {
      flex: 1 0 20%;
      height: 3px;
      content: '';
      background-color: currentColor;
    }

    And a codepen for you to play around with this solution:

    See the Pen Line-On-Sides Headers with Flexbox and minimal lines by Eric Eggert (@yatil) on CodePen

    And here is another example. This time we use border-image and an SVG to have an ornament around the heading:

    See the Pen Line-On-Sides Headers with Flexbox and border images by Eric Eggert (@yatil) on CodePen.

    ]]>
    Line-On-Sides-Header http://yatil.net/blog/line-on-sides-header blog/line-on-sides-header Fri, 18 Dec 2015 00:00:00 +0000 Line-On-Sides-Header http://yatil.net/blog/line-on-sides-header-2 blog/line-on-sides-header-2 Fri, 18 Dec 2015 00:00:00 +0000 a11ymindset http://yatil.net/blog/a11ymindset blog/a11ymindset Thu, 17 Dec 2015 00:00:00 +0000 a11ymindsetfb http://yatil.net/blog/a11ymindsetfb blog/a11ymindsetfb Thu, 17 Dec 2015 00:00:00 +0000 On 24ways & Webkrauts advent calendars http://yatil.net/blog/advent-2015 blog/advent-2015 Thu, 17 Dec 2015 00:00:00 +0000 I was asked to write an article for 24ways.org, the well known web advent calendar, this year. It was published today! Hop over and read about The Accessibility Mindset. Thanks for all the good work behind the scene, Drew, Brian, Anna, and Owen! If you prefer to read the article in German, don’t shy away and see Accessibility im Sinn, published on the Webkrauts Adventskalender. Thanks to Matthias, Jens, Nicolai, Kerstin, and Nils for their continuous efforts to bring those articles to the German speaking audience.

    ]]>
    Facebook music challenge: Buffy http://yatil.net/blog/facebook-music-challenge blog/facebook-music-challenge Mon, 07 Dec 2015 00:00:00 +0000

    “The idea is to fill Facebook with music, breaking the monotony of selfies and sensationalism. If you ‘like’ this post you will be assigned a letter for a musician, band, artist or song for you to post on your timeline with this text.”

    I liked Sandra’s post a few days ago and she assigned the letter “B” to me. I don’t have a lot of music I like and even less music that starts with the letter B. However there is one episode of a TV series I have warm feelings for and that is music related: The musical episode of “Buffy, the Vampire Slayer”. It is called “Once more, with feeling” and I watched it first when it first aired in October 2002 in Germany. While the rest of the series was dubbed in German, they decided to broadcast the songs of the musical episode in English with German captions. All the actors sung their own parts, and there was also a lot of dancing going on, which made the episode stand out. Wikipedia has a nice section on why the episode is so special. In Germany, the episode is available on Amazon Prime*, but I don’t think that the episode is too fascinating without knowledge of the Buffy canon. *Affiliate link

    ]]>
    OnceMoreWithFeelingPoster http://yatil.net/blog/oncemorewithfeelingposter blog/oncemorewithfeelingposter Mon, 07 Dec 2015 00:00:00 +0000