Web Development Reading List #147: Security Guidelines, Accessible UI Components, And Content-First Design

Web Development Reading List #147: Security Guidelines, Accessible UI Components, And Content-First Design

When working in a team, it’s important to stick to rules. A common challenge is to build all your projects with a similar or the same toolset and coding guidelines. Only yesterday I discussed how we could port over a project that outgrew its initial codebase over the years to a fresh, React.js-based source code.

The decision for this wasn’t easy, since we had invested quite a lot of work and money into this project already, and a move to React would require quite some time, too. But since the switch makes sense from a technical perspective and the team is already using React for three other projects, we concluded that this would be a good step to do. It will enable more developers of the team to contribute to the project, to review code and to reduce the shift of technologies in the company. Occasionally, it’s time to re-evaluate your projects and move on.

News Link

  • Bootstrap 4 Alpha 31 has been released this week. It comes with an overhauled grid, updated form controls, a system font stack, and more.
  • Microsoft announced that their JavaScript engine ChakraCore2 now supports Mac OS and Linux. This means, you can now test and run your Node.js applications not only in Google’s V8 engine. Christian Heilmann wrote up why this is an important step3.
Good news for Mac and Linux users: ChakraCore is finally supported5. (Image credit: Christian Heilmann6)

Concept & Design Link

Tools & Workflows Link

  • If you work on small projects, an (S)FTP-client can still be very useful. But on the other hand, it means you need to manually copy files from your git workflow to the server. To solve this issue, the indie developer Jan Östlund built GitFTP-Deploy8, a handy (S)FTP tool for a small fee that does automatic deployments based on your git workflow.
  • The privacy/tracking issue is bigger than we think. Have you ever monitored which apps connect to which service? You suddenly realize that an ad blocker/privacy add-on in your browser is only a drop in the bucket. Apps often connect to Google services, Google Analytics, sometimes to various ad networks, and very often to New Relic’s user tracking service. Fortunately, there’s a solution to nearly every problem: Add tracker hostnames to your /etc/hosts file. There’s even a public sample hosts file that you can use9 that includes most ad networks and trackers. Use it at your own risk though and be aware that some apps might not work anymore. But maybe your privacy is worth it?

Security Link

  • FallibleInc’s “A practical security guide for web developers10” tries to help developers build more secure, less vulnerable solutions. While they claim that it’s by no means a comprehensive guide, it covers stuff based on the most common issues they’ve discovered in the past.
  • We know that HTTPS is not super-secure. That’s why lately a lot of bugs were fixed in the software implementations and a lot of techniques like HSTS and HPKP were added. But sometimes all of this won’t help. Recently, an attack was discovered that can be carried out by operators11 of just about any type of network, including public Wi-Fi networks, which arguably are the places where people need HTTPS the most. There are also hints that this type of attack is already in use by at least the NSA and therefore likely by a lot of other people, too. Please never trust TLS only for your own security but use a VPN for public networks.
HTTPS protection12
Even when the Wi-Fi can’t be trusted, people rely on HTTPS to secure their connection. A fallacy, as a recently-discovered attack13 shows. (Image credit: Ars Technica14)

Privacy Link

  • I don’t want to be the scapegoat here, but Pokémon Go is very popular, and I read some interesting things about the privacy of the game. For example, not only Alphabet (aka Google) is one of the main investors, but there’s also a financial relationship between the game-maker Niantic and the CIA angel investment company In-Q-Tel15. While there’s no evidence on what this could mean for the privacy of users, it definitely means that those companies are highly interested in the data that is provided by the gamers — understandable, as it’d be very hard to get geo information and pictures of private ground in a normal way. I’ve heard that several companies such as BMW already advised their employees that it’s forbidden to play the game at their factory sites and the German army published a similar order to their soldiers. ExpressVPN also published a short summary list with nine privacy issues to consider when playing Pokémon Go16.

Web Performance Link

  • Erik Duindam writes about how a good architecture can save you a lot of money when building a product. He shares how he built a Pokémon Go app with 500k users in just five days17 and reduced the costs of it to a $100/month server infrastructure, compared to many MVP products that burn money by choosing bad technical designs.
  • Jake Archibald shares an interesting little fact about the benefits of using rel=noopener: it’s faster18.

Accessibility Link

JavaScript Link

CSS/Sass Link

Work & Life Link

What happens when you give up multitasking for a week? Lydia Dishman found out28.

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

— Anselm

Footnotes Link

  1. 1 https://blog.getbootstrap.com/2016/07/27/bootstrap-4-alpha-3/
  2. 2 https://github.com/Microsoft/ChakraCore
  3. 3 https://www.christianheilmann.com/2016/07/27/why-chakracore-matters/
  4. 4 https://github.com/Microsoft/ChakraCore
  5. 5 https://github.com/Microsoft/ChakraCore
  6. 6 https://www.christianheilmann.com/2016/07/27/why-chakracore-matters/
  7. 7 http://jgthms.com/web-design-in-4-minutes/
  8. 8 https://eastwest.se/apps/gitftpdeploy
  9. 9 http://winhelp2002.mvps.org/hosts.txt
  10. 10 https://github.com/FallibleInc/security-guide-for-developers
  11. 11 http://arstechnica.com/security/2016/07/new-attack-that-cripples-https-crypto-works-on-macs-windows-and-linux/
  12. 12 http://arstechnica.com/security/2016/07/new-attack-that-cripples-https-crypto-works-on-macs-windows-and-linux/
  13. 13 http://arstechnica.com/security/2016/07/new-attack-that-cripples-https-crypto-works-on-macs-windows-and-linux/
  14. 14 http://arstechnica.com/security/2016/07/new-attack-that-cripples-https-crypto-works-on-macs-windows-and-linux/
  15. 15 https://medium.com/friction-burns/pokémon-spy-17087ae3653d
  16. 16 https://www.expressvpn.com/blog/pokemon-go-privacy-concerns/
  17. 17 https://medium.com/unboxd/how-i-built-an-app-with-500-000-users-in-5-days-on-a-100-server-77deeb238e83#.91iwcl397
  18. 18 https://jakearchibald.com/2016/performance-benefits-of-rel-noopener/
  19. 19 https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67
  20. 20 http://accessibility.voxmedia.com/
  21. 21 http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
  22. 22 http://krasimirtsonev.com/blog/article/react-js-in-design-patterns
  23. 23 https://css-tricks.com/full-width-containers-limited-width-parents
  24. 24 https://css-tricks.com/full-width-containers-limited-width-parents/#article-header-id-6
  25. 25 http://www.paperplanes.de/2015/9/28/always-improve-never-appreciate.html
  26. 26 https://www.fastcompany.com/3062183/your-most-productive-self/what-happened-when-i-gave-up-multitasking-for-a-week
  27. 27 https://www.fastcompany.com/3062183/your-most-productive-self/what-happened-when-i-gave-up-multitasking-for-a-week
  28. 28 https://www.fastcompany.com/3062183/your-most-productive-self/what-happened-when-i-gave-up-multitasking-for-a-week
  29. 29 http://www.flassbeck-economics.com/how-climate-change-is-rapidly-taking-the-planet-apart/
  30. 30 https://www.washingtonpost.com/news/energy-environment/wp/2016/07/19/greenland-lost-a-trillion-tons-of-ice-in-just-four-years/
  31. 31 https://eager.io/blog/the-languages-which-almost-were-css/
  32. 32 https://wdrl.info/donate
  33. 33 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 Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to topTweet itShare on Facebook

(Visited 13 times, 1 visits today)