Web Tools #552 - Vulnerabilities, JS Utilities, SVG, Mobile Tools

WEB VERSION

Advertisement

Porkbun — Best Domain Registrar for Tech
Porkbun was named the #1 domain registrar by USA Today and is the favorite domain registrar for developers, web designers, and anyone in tech. They offer more than 500 domain extensions ranging from .com and .tech to .dev, and .app so you can get the perfect domain name for your next project.

Backed by personalized support 365 days a year, every domain from Porkbun comes with freebies like SSL certificates, WHOIS privacy, DNS, URL forwarding, hosting trials, and more.

They also have a wide range of powerful hosting options like Easy WordPress and shared cPanel hosting plans to meet your needs.

Register Your Domain Name Now →

For those of you developing large complex JavaScript applications either server-side or client-side, you'll certainly want to be well-versed in code security best practices. A little while ago I came across a fantastic video from freeCodeCamp's YouTube channel that covers 10 Security Vulnerabilities Every JavaScript Developer Should Know.

The video is by an engineer from Semgrep named Brandon, and it's very easy to follow as long as you have a fairly good understanding of JavaScript.

Because this is a video, researching the different vulnerabilities is not as easy, so I thought it would be good to briefly list all the vulnerabilities here along with a brief description of his solutions.

This way you can do some extra research on each one of these (many of which I hadn't even heard of!) depending on how important they might be to your team's projects.

• Cross-site Scripting via Query Parameters

  • Solution: Sanitize/validate URLs
• Server-side Request Forgery (SSRF)
  • Solution: Approve only allowed URLs for fetching
• Timing Attack
  • Solution: Make timing info less transparent
• Prototype Pollution
  • Solution: Use hasOwnProperty()
• NoSQL Injection
  • Solution: Ensure usernames are strings only
• Regular Expression Denial of Service (REDOS) Attack
  • Solution: Use a validator library instead of your own regex
• Security misconfiguration in a Docker File
  • Solution: Run user-level permissions instead of root/admin
• Hard-coded credentials
  • Solution: Use environment variables
• Mass Assignment Attack
  • Solution: Prevent setting properties on an entire object; don't store passwords in plain text
• Host Header Injection Attack
  • Solution: Avoid using a host header; use an environment variable

JavaScript Utilities

remoteStorage —  A simple library that combines the localStorage API with a remote server to persist data across sessions.

Ordena.js — A dependency-free utility that enhances nested lists, allowing you to create drag-and-drop, editable, and interactive lists of elements, featuring serialized JSON output and dragstart/stop events.

debounce — A utility to delay function calls until a set time elapses after the last invocation.

Save $1 Off Your Domain Name — Porkbun has a user-friendly interface and lots of personality! Manage everything about your new domain in one place without having to hunt around. Get your next domain at Porkbun today.     SPONSORED 

Heat.js — A powerful, dependency-free heat map and chart library with lots of settings to customize and configure the charts, plus support for 40+ languages, 10+ themes, and lots more.

Schedule-X — A calendar and date picker component styled with Material Design and featuring drag-and-drop rescheduling, dark/light modes, and lots of customization options.

pixelpage — A multiplayer shared pixel art canvas in the style of /r/place, which was a popular subreddit that allowed users to place one pixel at a time to create collaborative art.

unlazy — A framework agnostic, universal lazy loading library for placeholder images that uses native browser APIs and has BlurHash and ThumbHash support, among many other features.

humanfs — A modern filesystem API that offers a new approach that streamlines the most common operations while providing useful ways to test the expected functionality.

Reka.js — A state management system with an AST-powered state system, for building no-code editors.

Media Tools (SVG, Video, etc.)

OG Studio — Create static or dynamic Open Graph images with an intuitive, Figma-like visual editor. Browse ready-to-use templates, and export your images to SVG/PNG or to a dynamic URL.

Pikimov — A free web-based motion design and video editor that features layer-based compositions, a keyframe animations system, and files are saved locally.

An AI Co-pilot That Knows Your Product — Iteration X issue tracker comes with AI co-pilots that learn from your Docs, project history, and team. They can create, assign, and fully document tasks, suggest solutions, run Python code, search Google and more... all in your task feed.    SPONSORED 

DiceBear — An avatar library, playground, API, CLI, and Figma Plugin that allow you to create custom avatars by picking from dozens of styles and 20+ customizations, in SVG, PNG, or JPEG formats.

libav.js — A compilation of libraries associated with handling audio and video in FFmpeg (namely, libavformat, libavcodec, libavfilter, libavutil and libswresample) for WebAssembly and asm.js.

inpaint-web — A free and open-source package, powered by WebGPU and WebAssembly, that allows pages to include image upscaling and object removal from images.

FlowGPT — A package built with Next.js and DaisyUI that allows you to use OpenAI to generate flowcharts with AI.

Game-icons.net — A niche directory of 4,000+ free icons designed for game development, filterable via categories covering things like fantasy RPG, Sci-Fi, all customizable and downloadable in PNG or SVG format.

QRious — An AI-based platform to generate artistic, branded, attention-grabbing QR codes for use with your products and pages.

Svgl — A directory of 370+ product logos for popular brands and services, searchable and filterable by category, and available in SVG format.

Advertisement

Hiring Revelations: What Top Companies Keep Under Wraps
When competing with tech giants like Google and Apple for top talent seems daunting, consider this: Many A-players in these large companies have extra hours in their schedules—20-30 to be exact. Explore the strategy of fractional hiring to grow your team without the need to compete head-to-head.

Introducing Fraction, your shortcut to assembling the best team of US-based senior developers, designers, and product managers at offshore rates, without the commitment. Allowing you to create immediate impact, reduce costs, and gain a competitive edge.

Plus, enjoy a risk-free trial – we'll replace hires if they don't work out.

Learn More →

React Native & Mobile Tools

Radix UI Icon Library — An easy-to-use and customizable React Native icon library featuring Radix UI icons, to enhance your mobile applications with a wide range of icons.

vision-camera-barcode-scanner — A high-performance barcode scanner for React Native powered by VisionCamera, popular React Native camera library.

react-native-compressor — A react-native package that compresses images, video, and audio before uploading, without knowing the compression algorithm, similar to the functionality in WhatsApp.

An AI Co-pilot That Knows Your Product — Iteration X issue tracker comes with AI co-pilots that learn from your Docs, project history, and team. They can create, assign, and fully document tasks, suggest solutions, run Python code, search Google and more... all in your task feed.    SPONSORED 

vxrn — A single Vite instance powering React Native and web at the same time, for a "Vite meets React Native" solution.

ProtoNative — An all-in-one React Native prototyping tool for mobile development that has a seamless drag-and-drop interface, live code preview, and more.

victory-native-xl — A charting library for React Native, powered by D3, Skia, and Reanimated, with a focus on performance and customization.

react-native-pdf-renderer — A zoomable, blazing fast, zero dependency, pure native, typed PDF renderer for Android and iOS.

React Native Boilerplate — A starter project from the design and development team at Mirego, for creating React Native projects.

react-native-unistyles — A stylesheet solution for React Native, with features for breakpoints and media queries, multiple themes, 99% test coverage, extendable via custom plugins, and lots more.

Commercial Apps & Classifieds

An X Post for Thought

While Microsoft has certainly gained a bad reputation when it comes to the history of their browser and some other matters, they have rehabilitated that image with other products over the years, as this Tweet alludes to – which didn't even mention GitHub!

 

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (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...

Speaking of Microsoft products, if you like playing Minesweeper, you'll want to check out Minesweeper Twist, which is a version of Minesweeper that has the added challenge of indicating tile-mine connections diagonally in addition to the usual side-by-side manner.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly

Copyright © 2024 Lazarpress, all rights reserved.

Curious about this email? Well, at some point you subscribed, likely at webtoolsweekly.com

unsubscribe from this list
update subscription preferences

Privacy Policy