Issue #394 (Snyk Review, CSS/HTML, Media, Vue)02/04/21
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
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 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 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.
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.
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.
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.
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 all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
