As an independent developer, I spend a lot of time teaching myself new concepts. Luckily, the internet is full of free educational resources to help web professionals improve their craft. This is my attempt to consolidate the best ones in a single location.
Format: Article
Focus: Front-end
Skill Level: All
URL: https://alistapart.com/
Articles exploring the design, development, and meaning of web content, with a special focus on web standards and best practices.
Format: Article
Focus: Accessibility
Skill Level: All
URL: https://www.a11yproject.com/
The A11Y Project is a community-driven effort to make digital accessibility easier.
Format: Interactive Focus: Algorithms Skill Level: Moderate…
With the abstractions that modern front-end frameworks provide, it’s easy to dismiss plain old HTML as a thing of the past — a mere starting point that necessarily leads to “bigger and better” options. Developers with intimate knowledge of HTML are becoming rarer, and at the same time, experts in accessibility and progressive enhancement are needed like never before.
Despite its lack of “cool factor,” HTML is a dynamic tool that is very much alive and evolving. In fact, developers have been using the lessons learned from building front-end applications to improve HTML itself, and as the language evolves so…
In 2019 I wrote an article about how Google Analytics is problematic due to its privacy problems and immense size, and encouraged developers to use an alternative for tracking website or app usage. Plenty of privacy-minded developers have noticed that Google Analytics requires over 40KB of JavaScript and gathers much more data than is generally needed to understand how users interact with their projects. As a result, alternative analytics platforms are popping up that are more lightweight, open-source, and privacy-focused.
This article takes a closer look at the stand-out solutions that will allow you to avoid using Google Analytics. …
This is the roadmap I wish I had when I first started coding: a sequential list of free, quality resources designed to help beginners get started in front-end web development. There are tons of great free resources out there, but it’s hard to know where to start, what to learn, and how to use those skills in the real world. These study guides cover the basics of JavaScript, HTML, and CSS using what I’ve found to be some of the most effective online learning platforms.
The last couple of years have not been pretty for the tech industry. With the average user growing more wary of how their online data is being used and more frustrated by disruptive online advertising, how can developers work to create a safer, more useful, and more ethical web in 2020?
Consider the “share” button snippet provided by Facebook:
<!-- Load Facebook SDK for JavaScript --> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!-- Your share button code -->…
React is the developer’s equivalent of Avocado Toast. It’s great, but it’s expensive and has a lot of unnecessary toppings. React rewrites a lot of native browser functionality with features like the Virtual DOM and synthetic browser events. This practice negatively impacts SEO, progressive enhancement and initial load time. Read on for some light-weight alternatives that still allow for a rich user experience.
Who said you had to use a front-end framework? For a lot of projects, the most efficient way to handle DOM manipulation is with regular-old JavaScript. …
Have you ever noticed how much JavaScript gets loaded on big news sites? As of this writing, Wired’s website loads over 3MB of JavaScript files alone, making it almost unusable for anyone with a slow internet connection. Tracking scripts provided by Google, Facebook, and their friends are responsible for a large portion of this bloat. These scripts are used to monitor your behavior around the internet, ensuring that the ads you see are a sufficiently creepy reflection of your browsing history.
I used to work for a small design/development agency where adding the Google Analytics script to websites served as…
Front-end Developer, Educator, Accessibility Enthusiast, Inhabitant of Stockholm.