hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

Web Development Reading List #140: CSS-Only Dropdowns, Toggles And HTML Sliders

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 enhancement.
  • 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 regressive5. 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 researched7 and concluded that cookies are insecure by default, and you need to set __Host-absolutely=secure; Path=/; HTTPOnly; Secure; SameSite=strict; (source8) 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 announced9: “[…] 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 Cookies151410 extension in addition to my Canvas Blocker11 and uBlock Origin12 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 extension13
The Firefox extension Self-Destructing Cookies151410 protects you against trackers by deleting a site’s cookies and LocalStorage as soon as you close its tabs. (Image credit: Self-Destructing Cookies151410)

Web Performance Link

Accessibility Link

JavaScript Link

Send native web push notifications with Angular 221
Alex Castillo’s ng2-notifications lets you send native web push notifications with Angular 22219. (Image credit: Alex Castillo23)

CSS/Sass Link

  • We’re using tooltips, dropdowns, toggles all the time in web projects, and most of the time we choose to do this with JavaScript. But you don’t necessarily need JavaScript for that24 but can use CSS instead. If that’s not enough, you can still enhance with JavaScript and have a progressively enhanced module.

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 donation26 or share this resource with other people. You can learn more about the costs of the project here27. 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://adactio.com/journal/10708
  6. 6 https://medium.com/@jamischarles/adding-autocomplete-to-npm-install-5efd3c424067
  7. 7 http://blog.portswigger.net/2016/05/web-storage-lesser-evil-for-session.html
  8. 8 https://twitter.com/0x6D6172696F/status/738335320467472384
  9. 9 http://www.theverge.com/2016/5/27/11795248/facebook-ad-network-non-users-cookies-plug-ins
  10. 10 https://addons.mozilla.org/en-US/firefox/addon/self-destructing-cookies/
  11. 11 https://addons.mozilla.org/en-US/firefox/addon/canvasblocker/
  12. 12 https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/
  13. 13 https://addons.mozilla.org/en-US/firefox/addon/self-destructing-cookies/
  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 http://designingforperformance.com/
  17. 17 https://una.im/a11y-for-the-masses/
  18. 18 http://lea.verou.me/2016/05/introducing-multirange-a-tiny-polyfill-for-html5-two-handle-sliders/
  19. 19 http://www.castillo.io/blog/2016/4/14/push-notifications-with-angular-2
  20. 20 https://lunarlogic.github.io/starability/
  21. 21 http://www.castillo.io/blog/2016/4/14/push-notifications-with-angular-2
  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 https://robots.thoughtbot.com/you-don-t-need-javascript-for-that
  25. 25 http://arstechnica.com/information-technology/2016/05/how-the-internet-works-submarine-cables-data-centres-last-mile/
  26. 26 https://wdrl.info/donate
  27. 27 https://wdrl.info/costs/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top
Tweet itShare on Facebook

Article source: https://www.smashingmagazine.com/2016/06/web-development-reading-list-140/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.