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

Web Tools Weekly
WEB VERSION
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
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.

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

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

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

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

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

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

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

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

ON THE RELEASE RADAR:

Media Tools (SVG, Audio, etc.)

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

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

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

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

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

Panelle.js
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-force-graph
React component for 2D, 3D, VR and AR force directed graphs.

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

Vue Tools

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

vue-dock-menu
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.

vue-2-3
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.

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

VueTut
Easily build beautiful interactive tutorials with Vue.

vue-use-infinite-scroll
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.

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

Pinia
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,
Louis
@WebToolsWeekly

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

You Might Also Like

From Request to Response: How APIs Work – Beginners Guide

Thursday, March 28, 2024

In the vast expanse of the digital ecosystem, APIs (Application Programming Interfaces) act as critical conduits, facilitating seamless conversations between different software platforms. From clicking

Elastic 8.13 is here: Amazon Bedrock in the AI Assistant for Observability

Thursday, March 28, 2024

Learn about Amazon Bedrock support within the Elastic AI Assistant for Observability ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ elastic | Search. Observe. Protect

A Creative Market Reset 🎨

Thursday, March 28, 2024

Adobe needed some real competition. Now it has some. Here's a version for your browser. Hunting for the end of the long tail • March 27, 2024 A Creative Market Reset Canva's purchase of

Fisker lost millions … then it got them back

Wednesday, March 27, 2024

More Fisker woes View this email online in your browser By Christine Hall Wednesday, March 27, 2024 Welcome back to TechCrunch PM! This afternoon, learn about some new Google features, a startup that

▶️ How to Get Better YouTube Video Recommendations — What to Know About Alexa Skills

Wednesday, March 27, 2024

Also: The Best Samsung Phones of 2024, and More! How-To Geek Logo March 27, 2024 📩 Get expert reviews, the hottest deals, how-to's, breaking news, and more delivered directly to your inbox by

JSK Daily for Mar 27, 2024

Wednesday, March 27, 2024

JSK Daily for Mar 27, 2024 View this email in your browser A community curated daily e-mail of JavaScript news Bad Abstractions Could Be Ruining Your Code The code is easy to read and it runs fine -

Ranked | The World's Biggest Oil Producers in 2023 🛢️

Wednesday, March 27, 2024

The word's three biggest oil producers accounted for 40% of production in 2023. View this graphic to learn more. View Online | Subscribe Presented by FEATURED STORY The World's Biggest Oil

Daily Coding Problem: Problem #1394 [Easy]

Wednesday, March 27, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given the head of a singly linked list, reverse it in-place. Upgrade to premium

Free Event: Watch 10 entrepreneurs launch their AI ideas

Wednesday, March 27, 2024

They built this in 2 months 👀 ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Digging into Marissa Mayer’s newest app

Wednesday, March 27, 2024

Plus a snake robot on Saturn's moon View this email online in your browser By Alex Wilhelm Wednesday, March 27, 2024 Welcome to TechCrunch AM! Today we have notes on Marissa Mayer's new app,