Issue #284  (Intro Hiatus, CSS/HTML, Media, Uncats)12/27/18

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

Meta Tags
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.

wickedElements
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.

jsincss
A plugin that allows you to use JavaScript to template the creation of CSS stylesheets at run-time based on events happening in the browser. This allows you to use JavaScript to easily extend CSS to include new features.

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.

exkited
A minimalistic templating language that lets you generate markup with JavaScript.

CSS Grid Layout Generator
Use a visual interface to produce a CSS Grid then copy the code to paste into your CSS.

Atomizer
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.

Construct.css
A bookmarklet that allows you to view, debug, and learn from a site's HTML structure.

Media Tools (SVG, Video, Audio, etc.)

ChartGen
Create SVG-based bar graphs and pie charts using a visual interface.

Sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images.

dbdiagram.io
A free and simple tool to draw entity-relationship diagrams by just writing code. Designed for developers and data analysts.

Photopea
Free online design editor supporting PSD, Gimp, Sketch files, and more.

remove.bg
Upload any photo of a person or people or enter a photo URL and this tool will use AI to remove the background.

ExifShot
Online tool to show metadata of a photo. Merge your photo and Exif tags into beautiful images.

Squoosh
Make images smaller using best-in-class codecs, right in the browser.

Scribe
A service to transcribe audio for a small fee, based on the length of the audio. First transcription is free.

nano
Compress SVG and save 80% bandwidth. Minify and automatically embed SVG fonts in a single step, includes export to multiple image formats.

Eva Icons
A pack of more than 480 beautifully crafted Open Source icons for common actions and items.

react-vimeo
Vimeo player component for React.

The Uncategorizables

nginxconfig.io
Nginx configuration generator with a slew of options.

GraphJS
Make any website social with just a few lines of code. Basically it's a full framework for adding login, comments, profiles, etc.

Dataset Search
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.

humaaans
Mix and match illustrations of people using this design library, free for commercial or personal use.

Dweb.page
An open source web page that allows you to share and search content on the distributed web.

ScribeWP
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.

blogsend.io
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.

zhoo.app
Super simple chat, also available as a browser extension (Chrome and Firefox). Just click a button and share the link with a friend.

Otter Blocks
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!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris