Although I only had the chance to review their personal websites or GitHub profiles and this might of course not be a full show-off of their knowledge, it assured my lately developed opinion on web developers. Many are not able to choose the right HTML elements, to explain why and how a
clearfix works, or what ARIA roles are for, but they can use React and Angular. If you got some spare time over the next weeks, learn semantics1 and re-read the basics (or specs if you like the challenge) of HTML and CSS from time to time.
Further Reading on SmashingMag:
- Mind Your En And Em Dashes: Typographic Etiquette2
- Macrotypography For A More Readable Web Page3
- How To Choose A Typeface — A Step-By-Step Guide!4
- Respect Thy Typography5
- There’s a lot of discussion currently about the web getting too complex, and some even claim the web is broken. Remy Sharp instead has a different view6 on the new technologies, options we have today and how we can use them together with our base technology from 25 years ago. The article is best described by Remy’s own words: “Why I love working with the web”.
Concepts & Design Link
- Overpass7 is a new open source web font family inspired by Highway Gothic, looking fresh and solid.
- Kim Flaherty examines the user’s illusion of completeness on websites8 and explains why it’s important to clearly show a user that additional content exists off-screen.
- Jack Leonard from Barricade, a security service provider, explains with a very nice infographic how an attack to a web app works today. In another post he also describes how you can develop for security.
- As a follow-up to my recent article on being careful when choosing a third party to handle your HTTPS9, Robin Rendle interviewed me for CSS-Tricks10. In the interview, I give a deeper insight and some more practical advice and background on the topic.
Web Performance Link
- Because a
<picture>-element can get really bloated when you provide a lot of resolutions and image sources, Jon Arne Sæterås explains how to use Client Hints for a leaner, more automated approach to serve responsive images11. The only issue here is that you need a server to support it and that not all browsers support Client Hints at the moment, so you need to find a smart fallback for those.
- This amazing guide12 gives you a full introduction into how to set up HTTP/2 from scratch — including the required TLS certificate and server configurations needed.
- pa11y1613 is your new best friend if you want to have automated accessibility testing. It monitors your website and reports accessibility issues. In that, it is similar to Tenon14, a commercial SaaS alternative that you don’t need to set up and maintain on your own.
letonly where it is required and
varto identify code which needs to be refactored”.
- Since years we use
consolein our code all the time to debug our applications. Finally, the WHATWG created a specification that standardizes APIs for console debugging facilities17.
- This neat trick for CSS object-fit fallback on Edge (and other browsers)18 by Primož Cigler explains how you can build an easy, basic fallback for IE11 and MS Edge for
object-fit. Actually, as my own polyfill19 for this is non-functional in Edge, this is a great way to add support for it. And if you really love the property, let Microsoft know with your vote20.
- This short guidance article gives you some of the best resources on how to learn ES621.
CSS / Sass Link
- Eric Meyer wrote about why CSS grid layouts are such a great thing for us developers but also noted why they will utterly fail if browsers ship them without providing support for subgrids22.
Work & Life Link
- After reviewing a lot of applications in the past days, I can only agree with Kristian Glass here and say: “If you get the chance, always send a cover letter24”. It’s your opportunity to say something about yourself and make clear why you apply for the job.
Going beyond… Link
- We have an ongoing problem with growing inequality around the world and a few super rich people (latest numbers say it’s down to 65) have as much money as the poorest 3.5 billion people. If we don’t change anything and do not oblige people to pay their taxes in their own countries25 or reject trickle-down economics26 as the World Bank officially declared just recently, this system will break and our own lives are likely to be affected.
And with that, I’ll close for this week. If you like what I write each week, please support me with a donation27 or share this resource with other people. You can learn more about the costs of the project here28. It’s available via e-mail, RSS and online.
Thanks and all the best,
- 1 https://www.smashingmagazine.com/2011/11/html5-semantics/
- 2 https://www.smashingmagazine.com/2011/08/mind-your-en-and-em-dashes-typographic-etiquette/
- 3 https://www.smashingmagazine.com/2012/05/applying-macrotypography-for-readable-web-page/
- 4 https://www.smashingmagazine.com/2011/03/how-to-choose-a-typeface/
- 5 https://www.smashingmagazine.com/2012/03/respect-thy-typography/
- 6 https://remysharp.com/2016/01/20/why-i-love-working-with-the-web
- 7 http://overpassfont.org/
- 8 https://www.nngroup.com/articles/illusion-of-completeness/
- 9 https://helloanselm.com/2016/choose-your-own-https/
- 10 https://css-tricks.com/interview-web-security/
- 11 https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/
- 12 https://surma.link/things/h2setup/
- 13 http://pa11y.org/
- 14 http://tenon.io/
- 15 http://pa11y.org/
- 16 http://pa11y.org/
- 17 https://console.spec.whatwg.org/
- 18 https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3
- 19 https://github.com/anselmh/object-fit/
- 20 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263790-object-fit-and-object-position
- 22 http://meyerweb.com/eric/thoughts/2016/01/15/subgrids-considered-essential/
- 23 https://medium.com/@ajsharp/please-please-don-t-use-css-in-js-ffeae26f20f
- 24 http://blog.doismellburning.co.uk/cover-letters-always-send-one/
- 25 http://www.aljazeera.com/indepth/opinion/2016/01/world-inequality-countdown-160118072153499.html
- 26 https://www.oxfam.org/en/pressroom/reactions/oxfam-applauds-world-banks-rejection-trickle-down-economics-and-recognition-huge
- 27 https://wdrl.info/donate
- 28 https://wdrl.info/costs/