Anselm Hannemann

About The Author

Anselm Hannemann Anselm Hannemann is a freelance front-end developer and architect. He curates WDRL — a weekly, handcrafted web development newsletter. Apart from that he helped the RICG, built opendevicelab.com and organizes the NightlyBuild 2015 conference in Cologne, Germany. He is available for freelance jobs.

Web Development Reading List #134: AI, Keyboard Interactions And Living Style Guides

For a great project, we need a well-functioning team, solid style guides, smooth workflows and well-organized kick-off meetings. Last week, I found a couple of resources that help you achieve just that. And, a bit further down the road, the developers shouldn’t miss out on anything either, of course, — having a proper workflow is essential to be productive, and that’s why it might be a...

For a great project, we need a well-functioning team, solid style guides, smooth workflows and well-organized kick-off meetings. Last week, I found a couple of resources that help you achieve just that.

And, a bit further down the road, the developers shouldn’t miss out on anything either, of course, — having a proper workflow is essential to be productive, and that’s why it might be a good idea to start playing with Docker. Have a productive week ahead!

General

Concepts & Design

  • Robert Hoekman Jr shares an important lesson on taking charge of a UX kick-off meeting. It features his experience with agencies which didn’t manage to get this right and stresses how important it is to ask the right questions before designers and developers start to work on the project.

Tools

  • The google-webfonts-helper is an app that gives you instant previews and usage snippets for all Google web fonts. And it does a much better job at doing so than the official website.
  • Creating a solid, living style guide system is usually not an easy task. But devbridge-styleguide is an attempt to make it easier. It gives you a Node.js-based tool that generates a style guide based on some markers (comments) in your source files.
  • Daniel Demmel shares why using Docker to set up a web development environment locally can be such a relief. Considering what I’ve seen so far in projects, investing in a proper setup that runs smoothly on every programmer’s machine is the best thing you can do. And as Docker keeps evolving and fixing things like Mac OS compatibility and improving Windows support, I think it’s worth taking a closer look at the tool for upcoming projects, especially as it’s relatively easy to set up and play with.
DevBridge Styleguide
devbridge-styleguide uses Node.js to generate a living style guide based on markers in your source files.

Security

  • The Node Security Project has a new Node.js and Gulp task to check your dependencies for known vulnerabilities. It’s great to have it back and to have two fine tools to improve security for Node.js applications now along with Snyk.

Privacy

  • AI assistants can give you the news, order you a pizza, and tell you a joke. All you have to do is trust them — completely. An interesting story about the new listen-to-us devices that can scare the hell out of you if they surprise you. Reading George Orwell’s “Nineteen Eighty-Four” currently, I keep asking myself how we can still want to have such devices that are fully controlled by some company that only has commercial interests in selling them.
  • Microsoft, vendor of several cloud-services with privacy-related content like mail, contacts, messages, and other files, published an interesting article about how often they get government inquiries to tap user accounts that they’re not allowed to talk about. As the number of non-disclosable requests grows, Microsoft wants to challenge if that is still in the users’ interest and filed a legal ECPA complaint about this matter.
  • Philosophy professor Michael Lynch says that privacy violations erode individuals’ rights to autonomously make their own decisions and exercise individual power. An interview worth reading.

HTML/SVG

  • You probably have some sort of picture list for those occasions when you need to display a country flag. When this happened to me in the past, I was annoyed that I didn’t have an appropriate resource set based on SVG. Luckily, there is Flag-Icon-CSS, an MIT-licensed set of SVG country flags.

Accessibility

  • Microsoft shares their Microsoft Edge accessibility architecture and how it improves the usability of websites for everyone while at the same time making it easier for us developers to build better solutions.
  • If you’re building custom controls in HTML and JavaScript (a custom select-, typeahead-field or similar components, for example) you should bear in mind this helpful W3C checklist on how to make custom controls usable and accessible. This one is not about the usual accessibility for screenreaders but for things like keyboard and touch operability, contrast and a clear focus indication state.
  • Have you ever noticed that Chrome DevTools come with accessibility inspection? Umar Hansa shares how to use it.
Chrome DevTools come with a built-in accessibility inspection.
Chrome DevTools come with a built-in accessibility inspection.

JavaScript

  • Listening to keyboard actions via JavaScript has always been a bit of a pain due to inconsistent behavior and localization. Fortunately, browser vendors and the W3C want to improve the situation and now give us a unified way to handle keyboard events with key and code. You can see the difference in this neat demo.

CSS/Sass

  • Using multi-column properties and Flexbox together lets you achieve a masonry layout only with CSS.
  • Do you use scss-lint? It’s a nice tool to ensure SCSS coding conventions. However, one drawback of it has always been that it’s Ruby-based and does not have a lot of granular options. Stylelint, a Node.js-based alternative, is much more powerful, giving you full, fast linting capacity for your CSS, SCSS or Less code. And with stylefmt you can even auto-format code based on your rules.

Work & Life

  • We’re all in a field where we need full concentration when we work. Whether you’re a programmer or designer, your tasks require you to concentrate on solely the task you’re doing. This is why it’s so important not to be disturbed. Create an ‘atmosphere of focus’ by teaching your clients not to call you and your colleagues to not interrupt you by dropping over to your desk if you haven’t asked for it.

Going beyond…

And with that, I’ll close for today. If you like what I write each week, please support me with a donation or share this resource with other people. You can learn more about the costs of the project here. It’s available via email, RSS and online.

Thanks and all the best,
Anselm


More Articles on

How To Land A First-Rate Graphic Design Internship

by Mason Gentry

My first experience in the design world came through an internship at a small motion graphics studio called Motion Theory. I was fresh out of school and had never worked with so many talented people before. It was intense, difficult and nerve-wracking. And I loved it. It made me a better designer. And the lessons I learned there have served me well throughout my years as a freelancer....

Read more

Web Development Reading List #133: Workflow Tools And The Aesthetics Of Invisible Code

by Anselm Hannemann

I write about it often, but it’s a topic that makes me love my job, it’s the reason why communities work and why great people are great. I’m talking about honesty and ethics in everything we do, in how we live. Reading about corruption, tax avoidance tricks, wars, and also about poorly written code or bad user experiences has taught me a lot. Looking back at projects where I stood behind...

Read more

Web Development Reading List #132: The Challenges In Our Field, Debouncing And The Contain CSS Property

by Anselm Hannemann

What has been your biggest web development challenge recently? Was it a development issue, a communication issue or an education issue in your team? Facing so many things that don't work as expected these days in many different teams and projects, I now realize that we all are part of a very young industry, and by challenging not only our technical foundations but also traditional working...

Read more