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.

Further Reading on SmashingMag: Link

News Link

  • Firefox 52 is scheduled for March 7th this year, and it will bring better font fingerprinting protection7. 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 release8. 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 29 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- source10 under the SIL Open Font License.
Source Serif11
The open-source font Source Serif12 got an update and now supports more languages than ever. (Image credit13)

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 words14”.
  • In her “Guide to 2017 Conferences15”, 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 internationalization16.
  • Chen Hui Jing gives insights into the world of East Asian character emojis17. 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 Redesign21
Slava Kornilov and Bohdan Kononets’ concept for a redesign of the New York Times22 gives valuable insights into editorial design patterns. (Image credit23)

Tools & Workflows Link

Security Link

Privacy Link

  • The current revision of the European Union ePrivacy law33 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 Moments43
Tyler McGinnies shares his React “Aha” Moments44. (Image credit45)

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 calls48: 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 project49, has started a new project. “The Human In The Machine50” 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 questions51. 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 donation52 or share this resource with other people. You can learn more about the costs of the project here53. 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.smashingmagazine.com/2014/12/how-to-conduct-website-localization/
  4. 4 https://www.smashingmagazine.com/2016/11/character-sets-encoding-emoji/
  5. 5 https://www.smashingmagazine.com/2013/03/designing-a-better-mobile-checkout-process/
  6. 6 https://www.smashingmagazine.com/2016/07/quick-ux-prototyping-with-adobe-xd-shortcuts-pdf-cheatsheet/
  7. 7 https://www.ghacks.net/2016/12/28/firefox-52-better-font-fingerprinting-protection/
  8. 8 https://developer.microsoft.com/en-us/microsoft-edge/platform/changelog/desktop/15002/
  9. 9 https://blog.typekit.com/2017/01/10/introducing-source-serif-2-0/
  10. 10 https://github.com/adobe-fonts/source-serif-pro
  11. 11 https://blog.typekit.com/2017/01/10/introducing-source-serif-2-0/
  12. 12 https://blog.typekit.com/2017/01/10/introducing-source-serif-2-0/
  13. 13 https://blog.typekit.com/2017/01/10/introducing-source-serif-2-0/
  14. 14 https://rachelandrew.co.uk/archives/2017/01/05/its-more-than-just-the-words/
  15. 15 https://css-tricks.com/guide-2017-conferences/
  16. 16 https://medium.com/dropbox-design/design-for-internationalization-24c12ea6b38f
  17. 17 https://www.chenhuijing.com/blog/east-asian-character-emojis/
  18. 18 https://yeun.github.io/open-color/
  19. 19 http://baymard.com/blog/credit-card-field-auto-format-spaces
  20. 20 https://www.behance.net/gallery/47160365/The-New-York-Times-Redesign
  21. 21 https://www.behance.net/gallery/47160365/The-New-York-Times-Redesign
  22. 22 https://www.behance.net/gallery/47160365/The-New-York-Times-Redesign
  23. 23 https://www.behance.net/gallery/47160365/The-New-York-Times-Redesign
  24. 24 https://medium.com/@olefredrik/adobe-xd-your-new-favorite-design-tool-f03e45ee3f3c
  25. 25 https://ericchiang.github.io/post/containers-from-scratch/
  26. 26 https://mobile.twitter.com/csswizardry/status/819539972722200576
  27. 27 https://www.chenhuijing.com/blog/hosting-static-site-gitlab-pages/
  28. 28 http://survivejs.com/webpack/introduction/
  29. 29 https://leanpub.com/survivejs-webpack
  30. 30 https://ritazh.com/setup-your-own-l2tp-vpn-server-with-raspberry-pi-170d3d4df04c
  31. 31 https://www.mongodb.com/blog/post/how-to-avoid-a-malicious-attack-that-ransoms-your-data
  32. 32 https://snyk.io/blog/mongodb-hack-and-secure-defaults/
  33. 33 https://www.theguardian.com/technology/2017/jan/10/whatsapp-facebook-google-privacy-rules-ec-european-directive
  34. 34 http://techblog.netflix.com/2017/01/crafting-high-performance-tv-user.html
  35. 35 https://ma.ttias.be/virtual-environments-less-cpus/
  36. 36 https://bitsofco.de/document-outlines-in-html-5-1/
  37. 37 https://w3c.github.io/aria-practices/examples/landmarks/
  38. 38 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
  39. 39 http://mxstbr.blog/2017/01/your-first-node-microservice/
  40. 40 http://www.2ality.com/2017/01/import-operator.html
  41. 41 https://github.com/amilajack/eslint-plugin-compat
  42. 42 https://tylermcginnis.com/react-aha-moments/
  43. 43 https://tylermcginnis.com/react-aha-moments/
  44. 44 https://tylermcginnis.com/react-aha-moments/
  45. 45 https://tylermcginnis.com/react-aha-moments/
  46. 46 https://drafts.csswg.org/css-color/#color-function
  47. 47 https://css-tricks.com/colorme-css-color-level-4/
  48. 48 https://www.christianheilmann.com/2017/01/10/7-tricks-to-have-very-successful-conference-calls/
  49. 49 https://the-pastry-box-project.net/
  50. 50 https://superyesmore.com/publication/the-human-in-the-machine-a4064599cde2cb3397239e8d72219f48
  51. 51 https://jvns.ca/blog/good-questions/
  52. 52 https://wdrl.info/donate
  53. 53 https://wdrl.info/costs/

↑ 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

    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