Issue #284 (Intro Hiatus, CSS Tools, Media, Uncats)
The intro tip will be on hiatus during this end-of-year down time, but will likely return some time in January. Make sure to check out next week's issue in which I'll feature the 30 most-clicked tools of the year.
Before getting to this week's list of tools, I just wanted to thank everyone for continuing to subscribe and enjoy the newsletter. I've received a lot of positive feedback from those who really enjoy every issue, so that's great to hear. This year was certainly the most successful year for the newsletter in terms of advertisers. And I'm happy that most of the advertisers have featured products that my readers really are interested in. In fact, many of the top clicked links of the year were ads (but those won't be included in next week's year-end roundup).
If you have any feedback or suggestions for the newsletter, feel free to hit reply and let me know what you think can be improved in the coming months. I do realize that every issue has a lot of tools, which many might find overwhelming. The thing is, if I decided to cut down on the number of tools, then that means I'd have to cut a lot of not-so-popular ones. So that's likely not going to happen. As it is, including 25-35 links every week still isn't enough to exhaust all the stuff I find!
So that's it for Web Tools Weekly in 2018. I hope you all can continue to find the newsletter practical, interesting, and entertaining.
Now on to this week's tools!
CSS and HTML Tools
Online tool to debug and generate meta tags for your website. Edit and experiment with your content then preview how your web page will look on Google, Facebook, Twitter and more.
An alternative to custom elements. Components for the DOM as you've never seen before.
CSS File Icons
Pure CSS file icons for popular extensions.
CSS Syntax Validator
Online CSS validator that will tell you how many unique properties, unique declarations, valid and invalid declarations, and any mismatched values.
PostCSS Auto Reset
PostCSS plugin for automatic conditional rules reset. Useful for creation of bullet-proof styles isolation in your extension.
CSS Grid Layout Generator
Use a visual interface to produce a CSS Grid then copy the code to paste into your CSS.
A tool for creating Atomic CSS, a collection of single purpose styling units for maximum reuse.
CSS Accordion Slider
Online tool to build an accordion-style widget in pure CSS, for showing/hiding content.
A bookmarklet that allows you to view, debug, and learn from a site's HTML structure.
Recommended Courses by Wes Bos:
Media Tools (SVG, Video, Audio, etc.)
Create SVG-based bar graphs and pie charts using a visual interface.
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images.
A free and simple tool to draw entity-relationship diagrams by just writing code. Designed for developers and data analysts.
Free online design editor supporting PSD, Gimp, Sketch files, and more.
Upload any photo of a person or people or enter a photo URL and this tool will use AI to remove the background.
Online tool to show metadata of a photo. Merge your photo and Exif tags into beautiful images.
Make images smaller using best-in-class codecs, right in the browser.
A service to transcribe audio for a small fee, based on the length of the audio. First transcription is free.
Compress SVG and save 80% bandwidth. Minify and automatically embed SVG fonts in a single step, includes export to multiple image formats.
A pack of more than 480 beautifully crafted Open Source icons for common actions and items.
Vimeo player component for React.
Recommended Reading for Developers
Nginx configuration generator with a slew of options.
Make any website social with just a few lines of code. Basically it's a full framework for adding login, comments, profiles, etc.
A search engine from Google that allows you to search for (or add your own) datasets.
Boilerplate App for SaaS Product
Open source web app that saves you weeks of work when building your own SaaS product.
Mix and match illustrations of people using this design library, free for commercial or personal use.
An open source web page that allows you to share and search content on the distributed web.
A better way to sync, organize, and display your WordPress content. Creates a special folder in your Dropbox, allowing you to publish the files you place inside.
A widget that you install on your blog (WordPress, Ghost, Medium, Jekyll, etc.) so users can sign up to be notified of new posts.
Minimal Google Analytics Snippet
A simple snippet for tracking page views on your website without having to add external libraries.
Super simple chat, also available as a browser extension (Chrome and Firefox). Just click a button and share the link with a friend.
Build pages with Gutenberg using pre-built blocks/components.
A Tweet for Thought
If you're seeing any not-so-tech-savvy relatives this week, this little graphic might help.
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Hacker News Tops allows you to view the top posts from Hacker News from the past week, year, month, or all-time.
Thanks to all for subscribing and reading!