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

You know, we use ad-blockers as well. 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. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Web Development Reading List #104

What’s happening in the industry? What important techniques have emerged recently? What about new case studies, insights, techniques and tools? Our dear friend Anselm Hannemann1 is keeping track of everything in the web development reading list2 so you don’t have to. The result is a carefully collected list of articles that popped up over the last week and which might interest you. — Ed.

Hey, lovely to have you back here. It’s getting autumn here in Germany which means fog is back again and the trees are getting their lovely golden or red colors again. Time to spend the weekend out in the nature and take a deep breath, far away from your work. Just a few hours can help to get the refreshment you needed for days or a week already. And after that, start catching up with what I serve you in today’s list:

Further Reading on SmashingMag:

News Link

  • As iOS 9 is out since this week, there are a couple of new things you can use now in iOS 9 Safari7: Content Blockers arrived, Safari View Controller can be used instead of WKWebView, NavigationTiming API is back, Picture in Picture is available for iPad, proprietary Backdrop CSS filters, CSS Scroll Snapping and @supports is available, too.
  • Facebook announced that they built their first cross-platform React Native app. While iOS has been announced earlier this year, they now offer React Native for Android8 as well.
  • If you want to try Service Worker from localhost or other insecure origins, you can start Chrome (starting in v44) with the following flag9 via the command line: ./chrome --user-data-dir=/tmp/foo --unsafely-treat-insecure-origin-as-secure=http://your.insecure.host. Of course you should use this only for development and don’t call other sites in this browser instance.
  • Opera 32 is out10 and shares the news with Chromium 45: ES6 Arrow functions, further ES6 array and typed array functions are available now, Object.assign(), CSP Level 2 self rule is implemented and vibration notifications are now possible to trigger.
  • After nearly three years of development, Modernizr 3 is out now11. The new version is modular, has increased tests, no core test separation anymore and they also have new build steps to make it easier for you.

Concepts & Design Link

  • Forms are still hard to build. Especially when we need to ask for more than just the basics, a form can get messy and unusable due to clutter and a rubbish user interface. Here are some tips to a better form UI12.

Tools Link

  • Neocities tries to get back the platform that powered millions of websites in the early days of the web: Geocities. But they don’t want to do the same errors again, so they try to build it on an independent, redundant infrastructure. Now they shared how they want to achieve their vision of the distributed web13. Baseline is to use IPFS14, a peer-to-peer hyper media protocol, with HTTP only as interim “fallback”.

Security Link

Web Performance Link

  • James Avery, CEO of Adzerk, a big ad serving company, has published an article17 in which he shares the opinion of many users: People won’t stop using ad-blockers and privacy tools. And the ad industry will not stop ad-blockers. Instead the industry needs to stick to Do-Not-Track settings, needs to actively support privacy and stop making websites slow. It’s refreshing to read such encouragement and strong words against his own industry while others keep quiet or try to file lawsuits against ad-blockers.

HTML / SVG Link

Accessibility Link

  • In times where we inject animations on scroll, let elements fly in and make use of other playful animations on websites, we also need to think about users who get distracted or get ill by such “enhancements”. Val Head writes how you can really enhance your motion animated website with some controllers that allow people to disable the animations19.

JavaScript Link

  • Jets.js20 is a live search/filter for your site that has great performance. Instead of handling class or style changes on each affected item, it uses dynamic inline CSS rules that are way faster when you have a lot of targets. A simple but great concept.
  • The series “Let’s talk about the Web Animations API21” by Dan Wilson consists of five steps that introduce you to the new API, tell you what it is, how to use it, how to deal with timelines, player options, multiple animations, group or sequence effects, and motion paths.

CSS / Sass Link

  • While you probably used currentColor already, the way older inherit value gets ignored way too often. With “Back to the :roots”, simurai explains what is possible with CSS when you make effective use of the cascade and its specificity. And instead of trying to get rid of it you can use it in your components to be flexible and avoid maintenance work.
  • Organizing CSS files can be quite challenging22. That is why so many people and especially larger teams choose techniques like BEM or ITCSS which help to stay organized with all the selectors being added over time in a project.

Work & Life Link

Think Outside The Box By Seb Lester

Think outside the box by Seb Lester24

Go beyond… Link

  • The world wide fund for nature reports that a single generation of humans (ours) has managed to wipe out nearly 50% of all world’s marine species27. We finally need to recognize that this is reality and that for example the oceans will not at all be a healthy environment anymore without marine species living in there.
  • It’s nice to always have the latest gadget and I’m often not different here. We all like this but what this means to our environment is quite awful28. Maybe we should step back a bit and reconsider if we really need the newest gadget from Kickstarter (that we usually don’t use anyway). The article shows where the resources of our electronic devices are from and how the environment looks like over there.

By the way, I added Stripe as donation option now and you can support WDRL now easier than ever29 with your favourite service!

And with that I’ll close for this week. Please share the list if you liked it and spread the word!

Thanks and all the best,

Anselm


Footnotes Link

  1. 1 https://www.smashingmagazine.com/author/anselm-hannemann/?rel=author
  2. 2 https://wdrl.info/
  3. 3 https://www.smashingmagazine.com/2016/05/fluid-typography/
  4. 4 https://www.smashingmagazine.com/2013/09/introducing-flowtype-js/
  5. 5 https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/
  6. 6 https://www.smashingmagazine.com/2015/05/benton-modern-typography-case-study/
  7. 7 http://www.mobilexweb.com/blog/ios9-safari-for-web-developers
  8. 8 https://code.facebook.com/posts/1189117404435352/
  9. 9 https://groups.google.com/a/chromium.org/d/msg/service-worker-discuss/C9LHhAcz7mw/fp4_lB8iRCYJ
  10. 10 https://dev.opera.com/blog/opera-32/
  11. 11 https://modernizr.com/news/modernizr-3-new-release-site
  12. 12 https://medium.com/@kubachrzecijanek/how-to-build-an-awesome-form-1e9b2c1bd00d
  13. 13 https://blog.neocities.org/its-time-for-the-permanent-web.html
  14. 14 http://ipfs.io/
  15. 15 http://cynosureprime.blogspot.de/2015/09/how-we-cracked-millions-of-ashley.html
  16. 16 http://arstechnica.com/security/2015/09/new-stats-show-ashley-madison-passwords-are-just-as-weak-as-all-the-rest/
  17. 17 http://adexchanger.com/data-driven-thinking/ad-blocking-will-keep-growing-until-we-make-ads-better-2/
  18. 18 https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/
  19. 19 http://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity
  20. 20 https://nexts.github.io/Jets.js/
  21. 21 http://danielcwilson.com/blog/2015/07/animations-intro/
  22. 22 http://thomasbyttebier.be/blog/less-css-mess
  23. 23 http://www.booooooom.com/2015/09/11/an-interview-with-master-calligrapher-seb-lester/
  24. 24 https://instagram.com/p/4RpJngzJ42/?taken-by=seblester
  25. 25 https://dribbble.com/stories/2015/08/12/moonlighting
  26. 26 https://the-pastry-box-project.net/dylan-wilbanks/2015-september-17
  27. 27 http://www.theage.com.au/environment/world-wide-fund-for-nature-says-nearly-half-the-worlds-marine-species-wiped-out-in-single-generation-20150915-gjn8o5.html
  28. 28 http://www.bbc.com/future/story/20150402-the-worst-place-on-earth?ocid=twfut
  29. 29 https://wdrl.info/donate

↑ Back to top Tweet itShare on Facebook

is a freelance front-end developer and architect and cares about sustainable front-end experiences and ethical choices in life. He curates the WDRL, a weekly handcrafted web development newsletter that thousands of developers love, subscribe to, and donate for.

  1. 1

    A form design is 100 time harder than a full web design project. And some UX mistakes in a webpage is acceptable but not in a form.

    0
  2. 2

    I love your development list!

    Thanks so much!

    2
  3. 3

    Luciano Mammino

    September 20, 2015 10:46 am

    The article related to password is extremely interesting and it’s really good to see a website focused mostly on web design to push things related to security! Keep doing it please, the more everything lands online the more security we need and it’s our responsibility, as web developers and designers, to do whatever we can do to for this sake!

    3
  4. 4

    Awesome information in this blog about website development. Very important content describe in this content which is about website development.

    0
  5. 5

    it should be ‘weekly brush up your brain’ :D….am loving it

    0
  6. 6

    Note: The article about the Ashley Madison hack does NOT state that “(…) has shown how to make your originally safe password hashing useless.”

    It rather shows that if you dont know jack nor shit about encryption AND dont test your thrown-together “solutions” whenever something breaks .. after a while, EVERTYTHING is going to break. or worse.

    So reading up a bit on hash salting and enforcing encryption rules for EVERY user .. that might have helped those folks a lot. As such, password hashing aint unsafe, just sloppy implementations are ;)

    cu, w0lf.

    0

↑ Back to top