Menu Search
Jump to the content X X
Smashing Conf San Francisco

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 San Francisco, dedicated to smart front-end techniques and design patterns.

Web Development Reading List #165: Starting The New Year With Browser News, Container Architecture, And React “Aha” Moments

Happy new year! I hope you had a good start and can feel positive about what 2017 might bring. As mentioned in the last edition of the past year, I don’t like New Year’s resolutions too much, but I’d like to point you to something that Marc Thiele wishes for this year1:

“So my wish then also is, that you reflect and ask yourself, if you want to post the text or maybe even just have another, a second look on the text you are about to post. Maybe you decide, that you don’t post it. Maybe this helps, that less negative posts and emotions are spread.”

By the way, to recall the most important milestones that the web has gone through in the past twelve months, you can visit the Almanac 20162. It’s a yearbook that sums up all the 47 editions of past year’s Web Development Reading Lists.

News Link

  • Firefox 52 is scheduled for March 7th this year, and it will bring better font fingerprinting protection3. This means that when checking for system fonts, Firefox will only return the fonts that you have whitelisted instead of returning all fonts installed on the operating system.
  • The Windows 10 build 15002 comes with a new Microsoft Edge release4. It includes a number of improvements such as a preview of the Web Payments API, Flash content is now blocked by default, TCP Fast Open is now default, too, and support for Content-Security-Policy 2.0 and the WebVR API have also been added.
  • Do you remember or even use the font “Source Serif”? Version 25 is a major step forward. The character set was upgraded from Adobe Latin 3 to Adobe Latin 4 which means nearly double the number of characters and broader language support. The existing characters also got updates and now look even better. Last but not least, Source Serif 2 is completely open- source6 under the SIL Open Font License.
Source Serif7
The open-source font Source Serif8 got an update and now supports more languages than ever. (Image credit9)

General Link

  • “As we move our code to CodePen, our writing to Medium, our photographs to Instagram we don’t just run the risk of losing that content and the associated metadata if those services vanish. We also lose our own place to experiment and add personality to that content, in the context of our own home on the web.” — Rachel Andrew in “It’s more than just the words10”.
  • In her “Guide to 2017 Conferences11”, Sarah Drasner collected a vast selection of web design related events that’ll take place this year. If you can, talk to your boss, select the event(s) you like most and attend them if possible.
  • John Saito shares his thoughts on the importance of designing for internationalization12.
  • Chen Hui Jing gives insights into the world of East Asian character emojis13. For Western people like me, this is an interesting exploration into foreign languages and how emojis can be different around the world. ㊗️, for example, is a Kanji character meaning “congratulations”.

Concept & Design Link

The New York Times Redesign17
Slava Kornilov and Bohdan Kononets’ concept for a redesign of the New York Times18 gives valuable insights into editorial design patterns. (Image credit19)

Tools & Workflows Link

Security Link

Privacy Link

  • The current revision of the European Union ePrivacy law29 tries to protect communication confidentiality, block nonconsensual tracking, and lessen cookie warnings. A step in the right direction to make the web a safer, clearer place. For us developers it’s also great since the annoying cookie warnings are now questioned.

Web Performance Link

HTML & SVG Link

Accessibility Link

JavaScript Link

React Aha Moments39
Tyler McGinnies shares his React “Aha” Moments40. (Image credit41)

CSS/Sass Link

Work & Life Link

  • When you work remotely with a team, you will have conference calls from time to time. To make them successful and enjoyable for everyone, make sure to follow Chris Heilmann’s tricks for conference calls44: Be on time and stick to the duration, have a meeting agenda and stick to it, avoid unnecessary sounds.
  • Alex Duloz, the head behind The Pastry Box project45, has started a new project. “The Human In The Machine46” will be a 365 articles in one year project, about how humans define and deal with ‘productivity’.

Going Beyond… Link

  • Julia Evans on how to ask good questions47. Some great considerations we should follow before asking questions to make communication more effective and generally better.

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

— Anselm

Footnotes Link

  1. 1 https://marcthiele.com/notes/think
  2. 2 https://wdrl.info/almanac/2016
  3. 3 https://www.ghacks.net/2016/12/28/firefox-52-better-font-fingerprinting-protection/
  4. 4 https://developer.microsoft.com/en-us/microsoft-edge/platform/changelog/desktop/15002/
  5. 5 https://blog.typekit.com/2017/01/10/introducing-source-serif-2-0/
  6. 6 https://github.com/adobe-fonts/source-serif-pro
  7. 7 https://blog.typekit.com/2017/01/10/introducing-source-serif-2-0/
  8. 8 https://blog.typekit.com/2017/01/10/introducing-source-serif-2-0/
  9. 9 https://blog.typekit.com/2017/01/10/introducing-source-serif-2-0/
  10. 10 https://rachelandrew.co.uk/archives/2017/01/05/its-more-than-just-the-words/
  11. 11 https://css-tricks.com/guide-2017-conferences/
  12. 12 https://medium.com/dropbox-design/design-for-internationalization-24c12ea6b38f
  13. 13 https://www.chenhuijing.com/blog/east-asian-character-emojis/
  14. 14 https://yeun.github.io/open-color/
  15. 15 http://baymard.com/blog/credit-card-field-auto-format-spaces
  16. 16 https://www.behance.net/gallery/47160365/The-New-York-Times-Redesign
  17. 17 https://www.behance.net/gallery/47160365/The-New-York-Times-Redesign
  18. 18 https://www.behance.net/gallery/47160365/The-New-York-Times-Redesign
  19. 19 https://www.behance.net/gallery/47160365/The-New-York-Times-Redesign
  20. 20 https://medium.com/@olefredrik/adobe-xd-your-new-favorite-design-tool-f03e45ee3f3c
  21. 21 https://ericchiang.github.io/post/containers-from-scratch/
  22. 22 https://mobile.twitter.com/csswizardry/status/819539972722200576
  23. 23 https://www.chenhuijing.com/blog/hosting-static-site-gitlab-pages/
  24. 24 http://survivejs.com/webpack/introduction/
  25. 25 https://leanpub.com/survivejs-webpack
  26. 26 https://ritazh.com/setup-your-own-l2tp-vpn-server-with-raspberry-pi-170d3d4df04c
  27. 27 https://www.mongodb.com/blog/post/how-to-avoid-a-malicious-attack-that-ransoms-your-data
  28. 28 https://snyk.io/blog/mongodb-hack-and-secure-defaults/
  29. 29 https://www.theguardian.com/technology/2017/jan/10/whatsapp-facebook-google-privacy-rules-ec-european-directive
  30. 30 http://techblog.netflix.com/2017/01/crafting-high-performance-tv-user.html
  31. 31 https://ma.ttias.be/virtual-environments-less-cpus/
  32. 32 https://bitsofco.de/document-outlines-in-html-5-1/
  33. 33 https://w3c.github.io/aria-practices/examples/landmarks/
  34. 34 http://www.lexology.com/library/detail.aspx?g=e627e1be-eddf-44cb-9459-c8f72de48334&utm_term=&utm_content=buffer7c5a6&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
  35. 35 http://mxstbr.blog/2017/01/your-first-node-microservice/
  36. 36 http://www.2ality.com/2017/01/import-operator.html
  37. 37 https://github.com/amilajack/eslint-plugin-compat
  38. 38 https://tylermcginnis.com/react-aha-moments/
  39. 39 https://tylermcginnis.com/react-aha-moments/
  40. 40 https://tylermcginnis.com/react-aha-moments/
  41. 41 https://tylermcginnis.com/react-aha-moments/
  42. 42 https://drafts.csswg.org/css-color/#color-function
  43. 43 https://css-tricks.com/colorme-css-color-level-4/
  44. 44 https://www.christianheilmann.com/2017/01/10/7-tricks-to-have-very-successful-conference-calls/
  45. 45 https://the-pastry-box-project.net/
  46. 46 https://superyesmore.com/publication/the-human-in-the-machine-a4064599cde2cb3397239e8d72219f48
  47. 47 https://jvns.ca/blog/good-questions/
  48. 48 https://wdrl.info/donate
  49. 49 https://wdrl.info/costs/

↑ Back to top Tweet itShare on Facebook

Anselm Hannemann 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 and subscribe to.

  1. 1

    Anselm,

    Thanks a trillion for this! Great article with extremely helpful links. I appreciate the fact that you introduced each of them with insightful paragraphs and not just a simple numbered list.

    Kudos!

    4
  2. 2

    Thank you!

    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top