Web Tools #394 - CSS Tools, Icon Sets, Vue Tools

Web Tools Weekly
Tools for Web Developers

Issue #394 • February 4, 2021

The following intro is a paid product review for Snyk, a free platform and toolset for building secure cloud native apps.

Large-scale code bases with huge numbers of dependencies are the norm nowadays for many developers. One thing that's not the norm, however, is making sure our code base and associated dependencies are secure and free of vulnerabilities.

Snyk helps you find vulnerabilities in your code and dependencies

That's where Snyk (pronounced "Sneak") can play a vital role in your ongoing development and maintenance. Snyk includes the following features I'll focus on here:

These software composition analysis (SCA) tools integrate with developer tools and allow you to automatically find, fix, and prevent code vulnerabilities that can creep in through code dependencies, container packages, or modifications. You can get started with Snyk by signing in with GitHub (or another of the many supported platforms) and importing any of your projects to the Snyk dashboard.

Once your projects are imported you'll get immediate feedback on problems and vulnerabilities in your dependencies. I imported a couple of my personal projects along with two forked projects:

Snyk easily integrates with GitHub
Snyk easily integrates with GitHub

As you can see, problems found are categorized as "High Severity" (H), "Medium Severity" (M), and "Low Severity" (L). In this case, one of my projects was flagged with five problems. Good to know! Snyk has built in prioritization scores for vulnerabilities so you'll know which ones to work on first.

You can also install and run Snyk Open Source via its CLI. Once you've installed via npm and authenticated it, run snyk test in your terminal on any directory that has a package.json (or other manifest file). The CLI will give you a run-down of your vulnerabilities similar to what I showed you above via GitHub integration.

Once a project has been scanned via the CLI tool, Snyk will also give you the option to run a Wizard that will guide you through enumerating and fixing possible vulnerabilities in your dependencies. You can also set up alerts for the project so Snyk can notify you when new vulnerabilities are found.

$ snyk test
Testing C:\example\path\...

Tested 146 dependencies for known issues, found 5 issues, 6 vulnerable paths.

You can also use the snyk monitor command in any project folder in your terminal to set up email notifications on new vulnerabilities.

Snyk integrates with a whole slew of tools including container registries, CI/CD tools, selected IDEs, platforms like Heroku, Slack, JIRA, and more.

Another feature that caught my eye is Snyk's Vulnerability Database, which is the most comprehensive such database available and is what powers both Snyk Open Source and Snyk Container. You can try it online by typing in a package name or scan through some of the recently added vulnerabilities in the database.

Snyk's Vulnerability Database
Snyk is based on the most comprehensive vulnerability database

If you're developing in a container environment (like Kubernetes, Google, Azure, etc.), Snyk likewise gives you powerful tools to detect, fix, and continuously monitor for security vulnerabilities.

To integrate Snyk with your container, login with your Snyk account, click on "Integrations" in your dashboard, then select "Container orchestrators" (for Kubernetes) or "Container Registries" for other integrations.

Snyk Container
Snyk can be integrated with multiple supported Container platforms

From there you can select your platform, fill in your account credentials, then add projects to view and monitor for vulnerabilities. Snyk will automatically scan for new vulnerabilities when a container image is rebuilt.

Similar to the commands I mentioned earlier for the CLI, Snyk Container CLI allows you to test for vulnerabilities in a container image using the snyk container test command. Or you can perform continuous monitoring using snyk container monitor command. You can read more on those in the Snyk docs.

Other great features of Snyk worth mentioning are:

  • Integration with Source Code Management tools (GitHub, BitBucket, etc.) for automatic scanning of pull/merge requests
  • CI/CD pipeline integration
  • Unlimited tests for open source projects
  • Up to 100 tests for container vulnerabilities
It's important to note that everything I've discussed here is absolutely free. Snyk also offers paid plans, but the free plan covers more than enough for many developers and teams.

You can get up and running and connected to your repositories in just a few minutes, so give Snyk a try if you're looking for ways to automate your security and vulnerability checks in your code and dependencies.

Now on to this week's tools!

CSS and HTML Tools

Type Scale Clamp Generator
Interactive tool that generates CSS using the clamp() function, for producing a type scale for your headings and other common page elements.

A really simple online HTML editor playground with the ability to save demos and share the URLs.

The speed of a single-page web application without having to write any JavaScript. Uses a number of different techniques, including asynchronous link loading, lazy loading, and more.

Automatically add a progress bar to your site. Customizable before you download the code so you can change the color or style.

A small, zero-dependency, extensible, utility that converts a JavaScript object that you might find in a CSS-in-JS library to regular CSS.

An accessibility contrast checker for your buttons. Also includes some info on what is required for accessible UI elements.

A whole slew of unique pure CSS loading animations. These are great! I don't think I've seen any of these before, but might not work for just any project.

The good line-height
An online calculator for generating the correct line-height for a type scale following a custom baseline grid.

A curated collection of beautiful prebuilt gradients using default colors from the Tailwind CSS color palette.

A React component to find URLs and email addresses in text and turn them into proper HTML links.


Media Tools (SVG, Audio, etc.)

Online tool to generate app icons for iOS, Android, Flutter, React Native, Cordova, and lots more.

A huge set of nicely designed SVG icons, searchable by keyword.

A reusable JavaScript library for creating sketchy, hand-drawn-style charts in the browser, based on D3.js, Rough.js, and a library called Handy.

Flat Icons
A huge icon bundle, not free, but includes 265 icon packs in 17 unique styles, for over 20,000 icons in a number of different formats.

Click-and-paste, customizable SVG icons, patterns, and textures, free to use for any project.

A privacy-friendly online JPEG optimizer that uses a lossy algorithm that reduces the file size while keeping the file looking relatively the same.

This is neat! It's a free comic book layout maker, for building comic book panels. Just upload graphics and customize the panels. Seems tricky to get used to though.

Placeholder Logo
A set of free fake logos in 6 different colrs and PNG and SVG format, for use as placeholders in your designs.

React component for 2D, 3D, VR and AR force directed graphs.

A tiny music generator designed for size-limited JavaScript productions, built on the equally tiny ZzFX sound library.

Vue Tools

Still a work in progress, but this is a static site generator powered by Vite and Vue.

A smart menubar that can be easily docked to any side of the screen via drag and drop. Also transforms into a nice sidebar while docking to the left or right side of the screen.

Vue Flow Form
Create conversational conditional-logic forms with Vue.

Interoperable Vue 2 components with Vue 3 apps and vice-versa.

Vue Context Composition
A useContext hook from React, reimplemented for Vue.js 3.0, to make sharing your composed state a breeze.

Simple, unopinionated, lightweight and extensible state management for Vue 3.

Easily build beautiful interactive tutorials with Vue.

A Vue composition function that makes infinite scroll a breeze.

Vue Described-Data Form
Aims to reduce the of time creating forms, while keeping the flexibility and data-model persistence. Uses something called a Described-Data approach.

A Vue implementation for gtag.js, JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform.

Experimental project. An automatically typed, modular, and lightweight Store for Vue using the composition api with DevTools support

A Tweet for Thought

Developers that watch QA testers might relate to this one.

A Tweet for Thought

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

If you've ever wanted to simulate traffic congestion, bottlenecks, and other road-related dynamics, you might enjoy fiddling around with this Traffic Flow Simulator.

Thanks to everyone for subscribing and reading!

Keep tooling,

Support this newsletter:
PayPal.me    /    Patreon    /    GitHub Sponsors

Older messages

Web Tools #393 - JS Utilities, Testing Tools, Jamstack

Thursday, January 28, 2021

Web Tools Weekly WEB VERSION Issue #393 • January 28, 2021 Advertisement The Free Modern Jira Alternative for Teams Tara AI is the simplest free product development tool, designed for teams moving

Web Tools #392 - CSS Tools, VS Code & IDEs, Build Tools

Thursday, January 21, 2021

Web Tools Weekly WEB VERSION Issue #392 • January 21, 2021 In case you missed it back in November, Addy Osmani wrote about a new unofficial specification called the JavaScript Self-Profiling API. This

Web Tools #391 - JS Libraries, JSON/DB, Uncategorizables

Friday, January 15, 2021

Web Tools Weekly WEB VERSION Issue #391 • January 14, 2021 Advertisement Preflect Surveys Websites of all types use Preflect to create fast on-site surveys. Learn more about your visitors, optimize for

Web Tools #390 - Frontend Frameworks, Testing Tools, Media

Thursday, January 7, 2021

Web Tools Weekly WEB VERSION Issue #390 • January 7, 2021 Promotion Frontendor UI Library A UI library to build beautiful and professional landing pages. Includes 100+ UI Blocks & 6+ Templates. Add

Web Tools #389 - Top 30 Tools of 2020

Thursday, December 31, 2020

Web Tools Weekly WEB VERSION Issue #389 • December 31, 2020 As mentioned last week, this issue is the second part in the countdown of most clicked tools. This week features the 30 most-clicked tools in

Let us serve you, but don't bring us down — and India ruling party's IT cell used AI to show smile on arrested protesters' faces

Monday, May 29, 2023

Issue #1147 — Top 20 stories of May 30, 2023 Issue #1147 — May 30, 2023 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer. 1 Let us

JSK Daily for May 29, 2023

Monday, May 29, 2023

JSK Daily for May 29, 2023 View this email in your browser A community curated daily e-mail of JavaScript news Custom React Hooks: A Secret Weapon for Efficient, Cleaner, and Reusable Code Hello to all

Max Q - Galactic

Monday, May 29, 2023

TechCrunch Newsletter TechCrunch logo Max Q logo By Aria Alamalhodaei Monday, May 29, 2023 Hello and welcome back to Max Q! Happy Memorial Day everyone. In this issue: Astranis' novel approach to

[New post] Rockin’ the Code World: Special Guest Bryan Hogan

Monday, May 29, 2023

dotNetDave posted: " Join me on Saturday, June 10th, 2023, at 10:00 PST on C# Corner TV for show #81 where, for the first time, my special guest will be Bryan Hogan, Software and Cloud Architect.

GCP Newsletter #348

Monday, May 29, 2023

​ Welcome to issue #348 May 29th, 2023 News Infrastructure Official Blog Now open, new Doha cloud region set to support Qatar's National Vision 2030 - The new Google Cloud region in Doha, Qatar is

How Long Do SD Cards Last?

Monday, May 29, 2023

Did You Know?: In 1997, Crayola released a line of crayons that cashed in on the whole Internet craze with color names like “on-line orange,” “web surfin' blue,” and “circuit board green.” Read in

Noonification: Battle Passes: A Boon or a Bumble?

Monday, May 29, 2023

Top Tech Content sent at Noon! HackerNoon Web 2.5 Documentary Coming Soon to Amazon Prime! How are you, @hacker? 🪐 What's happening in tech this week: The Noonification by HackerNoon has got you

Atlanta Spotlight, BBQ & more Gen AI this week at TechCrunch | May 29

Monday, May 29, 2023

What's happening at TechCrunch this week TechCrunch events roundup While most people in the US are enjoying copious amounts of BBQ during the long holiday weekend, I didn't want to miss this

😸 Thanos 🤝 AI

Monday, May 29, 2023

SEO can be intimidating, it can be a lot to wrap your head around when it comes to optimizing your... Product Hunt Read in browser This newsletter is brought to you by AI 🤝 SEO SEO can be intimidating,

Japan will try to beam solar power from space

Monday, May 29, 2023

The Morning After Now available on your smart speaker and wherever you get your podcasts Apple Podcasts | Spotify | Google Podcasts It's Monday, May 29, 2023. JAXA, Japan's NASA equivalent, has