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 #167: On Team Retreats, Immutable Cache, And Eliminating Clearfix Hacks

When working in a team, we focus so much on the work, that we often forget that we all have something in common. Something that is so obvious that we underestimate it: we all are human beings. And well, if we want to grow as a team and get better at what we do, we should embrace this fact more. In fact, I just came back from a week-long team retreat where we had team activities, team games, and sessions and discussions about how we can achieve just that.

We figured out how much we value diversity, we realized how different the English language and its words are perceived by people from different countries, and we’ve seen short talks on various topics like work-life-balance but also on technical stuff like Docker or intercepting any computer’s traffic with a Raspberry Zero. So if you have the chance to work in a team, use the opportunity and exchange views and share information with your co-workers. Work is part of your life, so why not make it a lovely part?

Further Reading on SmashingMag: Link

News Link

  • Say hello to Firefox 515. It ships unprefixed ::placeholder, broader ES2015 support, WebGL 2, IndexedDB v2, and tabindex for SVG. Scripts served with an image/*, video/*, audio/* or text/csv MIME type are now blocked.
  • Samuel Reed shares how Google Chrome 56 will make throttling of background tabs more aggressive6, what this actually means and what the plans for Chrome 57 are.

General Link

Tools & Workflow Link

Security Link

Web Performance Link

HTML & SVG Link

  • SVG icons often have one problem: They don’t align well to the text surrounding them. Elliot Dahl explains how to fix that13.
Aligning SVG Icons To Text14
SVG icons and text neatly aligned. Elliot Dahl explains how to do it15.

JavaScript Link

How To Build An Accessible Tooltip18
How can you make a tooltip like the one in the top right corner accessible? Sara Soueidan explains19. (Image credit20)

CSS/Sass Link

  • Rachel Andrew explains the new display property value flow-root21 that was added to Chrome and Firefox (both Nightly/Canary only) and why it will finally replace the old clearfix hacks that we’re currently using to fix parent box sizes when floating inner elements.

Work & Life Link

Going Beyond… Link

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

— Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/
  2. 2 https://www.smashingmagazine.com/2009/08/simple-ways-freelancers-can-increase-productivity/
  3. 3 https://www.smashingmagazine.com/2011/12/the-messy-art-of-ux-sketching/
  4. 4 https://www.smashingmagazine.com/2016/04/stop-installing-your-webdev-environment-locally-with-docker/
  5. 5 https://developer.mozilla.org/en-US/Firefox/Releases/51
  6. 6 http://blog.strml.net/2017/01/chrome-56-now-aggressively-throttles.html
  7. 7 https://wdrl.info/archive/137/bits-up-cache-control-immutable
  8. 8 https://hacks.mozilla.org/2017/01/using-immutable-caching-to-speed-up-the-web/
  9. 9 https://annevankesteren.nl/2017/01/secure-secure-shell
  10. 10 https://jkphl.is/articles/certbot-http-public-key-pinning-hpkp/
  11. 11 https://ma.ttias.be/return-unauthenticated-unfirewalled-protocols/
  12. 12 https://blog.twitter.com/2017/the-infrastructure-behind-twitter-scale
  13. 13 https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  14. 14 https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  15. 15 https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  16. 16 https://sarasoueidan.com/blog/accessible-tooltips/
  17. 17 https://mathiasbynens.be/notes/es-regexp-proposals
  18. 18 https://sarasoueidan.com/blog/accessible-tooltips/
  19. 19 https://sarasoueidan.com/blog/accessible-tooltips/
  20. 20 https://sarasoueidan.com/blog/accessible-tooltips/
  21. 21 https://www.rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/
  22. 22 http://larahogan.me/blog/better-meetings/
  23. 23 https://superyesmore.com/productivity-has-a-personality-8d71d90938e9a85b64bb67dcfe06012c
  24. 24 https://slapdashery.org/thinking-with-paper-6e1064b1c67a
  25. 25 https://wdrl.info/donate
  26. 26 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

    About the “end of the clearfix ‘hack'”: So instead of clear:both we apply another property .. how does that change anything? You just trade the clearing fix for something similar [1}.

    cu, w0lf.

    [1] Ignoring the fact that it just works in the nightly builds of two browsers, and not globally for EVERY current, stable browser.

    1
    • 2

      Anselm Hannemann

      January 28, 2017 11:23 pm

      Well, the new value for the display property (note that it’s not a new property itself) is something that fixes the previous hacks that required pseudo-element selectors and some weird syntax to emulate this behavior. It’s nothing special but still nice that after years this has been fixed properly now. Of course it’ll take some more time until all browser catch up so we can use it as standalone.

      1
  2. 3

    Thanks for sharing with us !
    This post help us to create a website easily.
    Thanks .

    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