Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Web Development Reading List #121: The Illusion Of Completeness, Client Hints, CSS Subgrids

Over the last two weeks, I had the chance to review about eighty job applications for a front-end position. The position requires strong JavaScript knowledge, but it also requires HTML and CSS. And here’s a thing: nearly no one could show off substantial markup skills, not to talk about accessibility.

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.

General Link

  • 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 view2 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

Security Link

The anatomy of a web app attack9
Jack Leonard’s infographic explains the anatomy of a web app attack10.

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.

Accessibility Link

  • 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.
pa11y, automated accessibility testing15
pa11y1613, your new best friend when it comes to automated accessibility testing.

JavaScript Link

CSS / Sass Link

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,
Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2011/11/html5-semantics/
  2. 2 https://remysharp.com/2016/01/20/why-i-love-working-with-the-web
  3. 3 http://overpassfont.org/
  4. 4 https://www.nngroup.com/articles/illusion-of-completeness/
  5. 5 https://blog.barricade.io/anatomy-of-a-web-app-attack/
  6. 6 https://blog.barricade.io/developing-for-security/
  7. 7 https://helloanselm.com/2016/choose-your-own-https/
  8. 8 https://css-tricks.com/interview-web-security/
  9. 9 https://blog.barricade.io/anatomy-of-a-web-app-attack/
  10. 10 https://blog.barricade.io/anatomy-of-a-web-app-attack/
  11. 11 https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/
  12. 12 https://surma.link/things/h2setup/
  13. 13 http://pa11y.org/
  14. 14 http://tenon.io/
  15. 15 http://pa11y.org/
  16. 16 http://pa11y.org/
  17. 17 https://console.spec.whatwg.org/
  18. 18 https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3
  19. 19 https://github.com/anselmh/object-fit/
  20. 20 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263790-object-fit-and-object-position
  21. 21 https://medium.com/javascript-scene/how-to-learn-es6-47d9a1ac2620
  22. 22 http://meyerweb.com/eric/thoughts/2016/01/15/subgrids-considered-essential/
  23. 23 https://medium.com/@ajsharp/please-please-don-t-use-css-in-js-ffeae26f20f
  24. 24 http://blog.doismellburning.co.uk/cover-letters-always-send-one/
  25. 25 http://www.aljazeera.com/indepth/opinion/2016/01/world-inequality-countdown-160118072153499.html
  26. 26 https://www.oxfam.org/en/pressroom/reactions/oxfam-applauds-world-banks-rejection-trickle-down-economics-and-recognition-huge
  27. 27 https://wdrl.info/donate
  28. 28 https://wdrl.info/costs/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

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.

  1. 1

    Thanks Anselm for all your hard work compiling these reading lists.

    Your 1st 2 paragraphs struck a chord with me.

    I’m a passionate advocate of semantics & accessibility, and I find it extremely frustrating when I find code examples & documentation in these frameworks that don’t even get the basics right.

    Grrrr.

    6
  2. 2

    Dmitri Tcherbadji

    January 22, 2016 3:41 pm

    Congrats on going https, Smashing Mag :)

    Also noticed you switched the order of comment fields. A small change yet a unique approach. Hope it works well enough for you to write it up.

    Anselm, I read every single one of your posts here on SM at the end of the week and borrow a lot of your insights and research to inform my team in turn as well. I owe you, more than one. Thank you.

    4
    • 3

      The comment order was like this already some time ago. Glad they switched it back (makes more sense to have the smaller numbers reflect older posts, would make the most sense to have the number display the post order, but it wasn’t that way ever yet).

      0
  3. 4
  4. 5

    Thanks for compiling this list, but please stop putting non-tech/non-web related things in it, especially of the social, political, or economic nature. You’re embarrassing me as a developer.

    If we don’t change anything and do not oblige people to pay their taxes in their own countries or reject trickle-down economics as the World Bank officially declared just recently, this system will break and our own lives are likely to be affected.

    There is no “trickle down” economics as defined by economists, the term is almost exclusively used by critics of policies with other established names.

    ~Wikipedia via Thomas Sowell

    You’re celebrating a win over a strawman argument.

    -10
    • 6

      Anselm Hannemann

      January 29, 2016 8:06 pm

      I’m sorry to see you being embarrassed by this. I can only repeat what I wrote a couple of times already: Please read the things you want to read here in my lists. If you don’t like a specific link (especially in the “go beyond” section which is all about non-tech but inspiration, thoughts, experiments, personal opinions) then please just don’t read this section or ignore the one link. I don’t take this personally and I fully understand and am aware that not everyone agrees with my opinion in that last section.

      Cheers,
      Anselm

      8
  5. 7

    I’ve been at one fortune ~20 company with over 30k employees where I was the only one who had a firm grasp on web standards and accessibility while also keeping abreast of new frameworks and libraries. We had a scattering of people who knew JavaScript really well but couldn’t produce markup to save their life, people who could produce HTML and JavaScript well enough but failed miserably with CSS and people who could produce fairly clean HTML and CSS but didn’t “get” JavaScript. I’m now working for a fairly large quasi government organization and again feel like I’m the only one in a very large organization that has all of the requisite skills. The sad state of the matter is that I know there are people in other companies in the same position. They are sitting right beside “full-stack” developers who don’t know that you can’t wrap a li with a div and don’t understand that if you can’t hide important content in a JavaScript popover that people with disabilities can never reach.

    The only thing that seems to work in these situations is for people who know the standards to be the coaches and leads, constantly fielding questions, defining architecture, and doing code reviews to keep people in line. Teaching the people the standards only goes so far as people are willing to learn. Some people are perfectly happy with their level of ignorance and they’ll look for ways to shirk the work they don’t want to do off onto similarly minded people who just want to sit in their silos and do one specific type of work. That can be used to produce assembly lines of parallel work if you can chunk it right. But then you can have the opposite problem of the people who think they can do it all (but can’t) complaining to the bosses that everything is too siloed and all we need is more ‘full-stack’ developers. When we get those “full-stack” developers we usually find they know Java really well and they did some JSP once and mucked around in EXT or DOJO for some widget on a project 6 years ago.

    Recently we hired a guy who nailed his interview. Answered all the tech questions right, Angular experience, understood the need for JS unit testing, knew which libraries to do that, on and on… first code review all of his code had to be pulled out and rewritten. He didn’t actually execute on anything he said he knew, didn’t understand jQuery chaining or selectors, produced awful markup… just really disappointing.

    Not exactly sure how to fix that. Maybe it happens all over but we notice it more in our industry.

    5
    • 8

      Depends on the job ad. Did you search for a wise-cracking know-all with decades of knowledge, though only having been at work for less than 6 years (the usual), or for some actual experienced developer?

      Is it the tool that makes the experience, or is it the experience that makes the tool, or maybe is it both or more factors that actually get the job well done?

      And is selling yourself the major factor? I’ve been around for a bit, and been repeatedly told “you know how to sell yourself”. Maybe. I just talk. A lot. With experience behind it, though. But, basically it’s all just data-mining and extrapolation on it. After a few interviews, you know how to handle “the crowd” and yourself.

      So .. there is no “the solution”. It’s a combined issue, that finding of “THE right guy/gal/whatever” for the job. But I’d go the “small project way” – go by fuzzy logic; not JUST the one who got it aaaaaaaaw right, yo man baby gimme five, but also those who maybe got 60% or 70% right. Throw them a few bits. Do they get it done well? What happens if there is no clear solution? And what happens if there is a sudden change in the direction of the project? How do they react? Do they come up with clever, creative solutions – even harsh workarounds and q’n’d hacks … are worthy to consider.

      The knowledge means nothing, if you dont know jack nor shit how to actually apply it.

      Yeah, in a big fucking company, it’s quite a hassle to get that “human” element somehow .. confined. Nailed down to statistics and stuff. But if you dont want a desaster as you described it – it’s worth the effort ;)

      just my .02 cents,
      cu, w0lf.

      0
      • 9

        Anselm Hannemann

        January 29, 2016 8:12 pm

        Thanks for these insights, they were very inspiring to me. I completely agree that it depends on the job ad, on the interviews. I indeed see a problem in the hiring process. I believe that expending the hiring process and have a chat/call/meeting with almost everybody who could potentially match the position or has the ambition to learn the required skills would be great. In such interviews you could find out if the person fits to a team, wants to improve the skills and learn something new. However, the problem in small companies without much resources is to spend that much time into the process. And in big companies you often face large workflows for hiring processes which also keeps away applicants who don’t match exactly by their numbers or CV. Ultimately, we should at least try to make it a little better each time and I learned a lot from all job interviews I gave, and had, as did I from all your feedback here – I’m really amazed and grateful for this discussion here! :)

        0
  6. 10

    Marcelo A Carrillo

    January 23, 2016 4:55 am

    I worked for many years for a government agency in NY as a Front-End Designer and I learned that people who are Web Designer Do not understand and care about going deep understanding the semantic or server side. They only care about Design and nice they look. Time has pass so fast it has been almost 7 years I see exactly the same issues but this time it is more and more easy to find Front-End Designer with those issues since everything become so complex and each area become more specialized so companies don’t understand the difference between a UI/UX Designer or the Difference between a Front-End Web Designer and a Web Developer.
    Also, the new online schools are great but they are falling on teaching the new generations on the server side and security.

    2
    • 11

      Anselm Hannemann

      January 29, 2016 8:15 pm

      I think we (and with that I mean you and me, too) should really put more effort in improving exactly this situation. Whether it’s explaining the one designer we work with why semantics are important, or if we reach out to such schools and give feedback or even offer them to give a class on writing semantic markup, learn accessibility or things like that. I for myself decided to improve myself a lot regarding that and started giving such feedback and reaching out to companies again.

      1
  7. 12

    your posting is very useful i read this post then after i have more improve my website design .
    thanks for your posting.

    1
  8. 13

    Matthew Darnell

    January 25, 2016 6:45 pm

    The intro to this hits right on the money. After running a team of UX focused developers, I came to the realization that computer science programs and development teams in general do a great disservice to developers.

    On the large scale development team for the company I worked for, most of the entry level developers right out of college had very little javascript experience, let alone HTML, CSS or accessibility, despite this being their core function in their new position. The difficulty coming at front end development starting with something like angular is astounding, and it was no surprise that most of those folks had never even read about semantic markup, let alone have the first clue how to use CSS to apply a consistent design across and entire application without using another library.

    Start with the basics folks. Before you get in too deep.

    4
  9. 14

    Hey

    Firstly, I really appreciate ALL the articles that you post and appreciate that you are bringing more than just the average design/development into things. We do need to be more conscious, because at the end of the day there’s more to life than just 1’s and 0’s.

    With that being said, I read this article last year (wish I could find it and swear you almost posted it) about hiring the person not the programmer or designer. Finding someone who is a better fit and has the capacity, eagerness, and confidence to figure stuff out is more important than someone who can talk back, in a nervous interview, the specifics of various terms. Interviews suck in general… and people will memorize a bunch of junk they have never used…. (as someone already pointed out above)….

    I get caught in the “can’t remember what that does” loop when I do interviews too. Why? Cause I am extremely visual and when I need to learn something I go out and do it and then viola I remember it.

    Just my $0.02

    1
  10. 16

    There is a very wise guy that said: If inequality is unavoidable, wouldn’t it be the best to have it affecting only the least people? Shouldn’t a few 65 people then contribute a lot more to it than 3,500,000,000 people ever can?

    2
    • 17

      Even more so, if you’re thinking about the fact, that 3,500,000,000 have to make a living out of what they have the same way the 65 people have to.

      So the value at stake is a lot higher for the few than for the very most. Whoever has a great fortune, it doesn’t cost him one to live his life. However that rule would sound the opposite way applied the other way around: if you need everything you have to survive, there will be nothing left for others.

      1

↑ Back to top