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 #140: CSS-Only Dropdowns, Toggles And HTML Sliders

In times where Facebook announces to track all web users whenever it can, it feels weird to work on disaster management tools1. You may now ask why, but if you consider what data you work with in such a project, you’re likely to be monitored because of a lot of keywords in there. And that’s what bothers me most: That people who want to do good need to fear that they’re under complete surveillance. I like Tor and secure VPNs more than ever for that reason. Speaking about web development, here’s why using Tor or VPNs for testing performance2 is a great idea.

News Link

  • Chrome 51 is out3 and with it, various security issues have been fixed. No big new features but more stability and improved performance for Chrome this time :)

General Link

  • Peter-Paul Koch shares why he thinks that the adage “Don’t Repeat Yourself” isn’t always useful in browser contexts4. We’re building our websites for browsers, and to make the page work properly, we need to repeat ourselves, especially when using progressive enhancement5.
  • It’s about raising the barrier. Jeremy Keith has talked and written about this a couple of times already, and now in times where the term “Progressive Web Apps” is shared all over the web, Jeremy says that Google makes web apps regressive6. A web app requires HTTPS, service workers, a manifest JSON and a few recent visits by the user to be installable — for most websites dealbreakers. Also the fact that the URL must not be displayed in the web app turns out to be harmful to the web itself as it depends on URLs.

Tools & Workflow Link

Security Link

  • Since we have widespread support for web storage solutions like Session Storage, the question arises if we still need cookies at all. James Kettle researched8 and concluded that cookies are insecure by default, and you need to set __Host-absolutely=secure; Path=/; HTTPOnly; Secure; SameSite=strict; (source9) to make them secure while Session Storage is secure by default. On the other hand, one aspect speaks clearly for cookies: They are controllable by the client and the server.

Privacy Link

  • Facebook is already known for not respecting privacy. They now announced10: “[…] we’re expanding Audience Network so publishers and developers can show better ads to everyone — including those who don’t use or aren’t connected to Facebook.” This basically means that they now track every user who gets in touch with some Facebook tracking technology (cookies, web storage, embedded fb-scripts, etc.) without asking. For Firefox, I added the Self-Destructing Cookies161511 extension in addition to my Canvas Blocker12 and uBlock Origin13 to browse more safely. But remember that an open Facebook tab still might track you on other sites, so the browser’s private mode seems more appropriate.
Self-Destructing Cookies browser extension14
The Firefox extension Self-Destructing Cookies161511 protects you against trackers by deleting a site’s cookies and LocalStorage as soon as you close its tabs. (Image credit: Self-Destructing Cookies161511)

Web Performance Link

Accessibility Link

JavaScript Link

  • Since browsers don’t support multirange sliders natively very well, a polyfill is needed. But most polyfills are really hacky and bring problems with customized styles. Not so Lea Verou’s tiny, flexible polyfill for multirange inputs19.
  • Alex Castillo shares how you make your web application send native web push notifications with Angular 22320.
  • Many projects feature a star-rating component. But very often they are a nightmare to build properly across various browsers and most of the time the solution isn’t accessible either. Starability21 comes as an accessible, simple module to solve the issue.
Send native web push notifications with Angular 222
Alex Castillo’s ng2-notifications lets you send native web push notifications with Angular 22320. (Image credit: Alex Castillo24)

CSS/Sass 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 donation28 or share this resource with other people. You can learn more about the costs of the project here29. It’s available via email, RSS and online.

Thanks and all the best,
Anselm

Footnotes Link

  1. 1 https://twitter.com/helloanselm/status/737316074354577408
  2. 2 https://helloanselm.com/2016/using-vpn-tor-for-web-development/
  3. 3 http://googlechromereleases.blogspot.de/2016/06/stable-channel-update.html
  4. 4 http://www.quirksmode.org/blog/archives/2016/05/dry_do_repeat_y.html
  5. 5 https://www.smashingmagazine.com/2013/09/progressive-enhancement-is-faster/
  6. 6 https://adactio.com/journal/10708
  7. 7 https://medium.com/@jamischarles/adding-autocomplete-to-npm-install-5efd3c424067
  8. 8 http://blog.portswigger.net/2016/05/web-storage-lesser-evil-for-session.html
  9. 9 https://twitter.com/0x6D6172696F/status/738335320467472384
  10. 10 http://www.theverge.com/2016/5/27/11795248/facebook-ad-network-non-users-cookies-plug-ins
  11. 11 https://addons.mozilla.org/en-US/firefox/addon/self-destructing-cookies/
  12. 12 https://addons.mozilla.org/en-US/firefox/addon/canvasblocker/
  13. 13 https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/
  14. 14 https://addons.mozilla.org/en-US/firefox/addon/self-destructing-cookies/
  15. 15 https://addons.mozilla.org/en-US/firefox/addon/self-destructing-cookies/
  16. 16 https://addons.mozilla.org/en-US/firefox/addon/self-destructing-cookies/
  17. 17 http://designingforperformance.com/
  18. 18 https://una.im/a11y-for-the-masses/
  19. 19 http://lea.verou.me/2016/05/introducing-multirange-a-tiny-polyfill-for-html5-two-handle-sliders/
  20. 20 http://www.castillo.io/blog/2016/4/14/push-notifications-with-angular-2
  21. 21 https://lunarlogic.github.io/starability/
  22. 22 http://www.castillo.io/blog/2016/4/14/push-notifications-with-angular-2
  23. 23 http://www.castillo.io/blog/2016/4/14/push-notifications-with-angular-2
  24. 24 http://www.castillo.io/blog/2016/4/14/push-notifications-with-angular-2
  25. 25 https://www.smashingmagazine.com/2016/04/inspiring-ui-demos-logins-menus-toggles-and-more/
  26. 26 https://robots.thoughtbot.com/you-don-t-need-javascript-for-that
  27. 27 http://arstechnica.com/information-technology/2016/05/how-the-internet-works-submarine-cables-data-centres-last-mile/
  28. 28 https://wdrl.info/donate
  29. 29 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

    Priya sharma

    June 3, 2016 1:15 pm

    lovely Anselm….
    i really liked your article….and the things you have told us about JavaScript and css is really great…………

    -5
  2. 2

    About cookies vs. Web Storage API: All these fancyful “new” and “modern” methods tend to turn into a big pitfall (aka PITA), as soon as you bring in multiple languages / i18n and in a few cases even accessibility.

    Had lots of “happy times” trying to debug multilingual carts of several major shopping / e-commerce solutions (including WooCommerce and Magento), which ultimately led to the conclusion: Use cookies. Proven as reliable and working.

    cu, w0lf.

    1
  3. 3

    Web Design Tampa

    June 4, 2016 10:42 pm

    Great article!

    1
  4. 4

    Hemang Rindani

    June 6, 2016 11:09 am

    If security is an issue than the most crucial factor to take care of are cookies. Make your cookies secured using https or work with VPNs.
    For better security, you must understand the criticality of online information and select the tools that can help you protect your privacy. Firewalls, banning cookies, VPN, using encryption and a secured web development tool like Drupal or Sitefinity CMS for web development are few of the best ways to stay safe.

    -1
  5. 5

    ARKA Softwares

    June 8, 2016 7:00 am

    This article is quite helpful as you have added important information regarding general news, JavaScript and CSS. It helps us in keeping ourselves updated. Thanks for posting!!

    0
  6. 6

    Nice article, thanks for mentioning Starability.css! It would be cool to move it to other section though, as the lib doesn’t even need JavaScript to work. :)

    0

↑ Back to top