Web Tools #418 - VS Code, Front-end Frameworks, Uncats

Advertisement

I recently came across an unofficial spec that you might want to keep an eye on: the HTML Sanitizer API, currently being authored by employees from Mozilla, Google, and Cure53 (it's nice to see a diverse author list, rather than something that's Google-centric).

The authors explain that this specification describes:

"...a set of APIs which allow developers to take untrusted HTML input and sanitize it for safe insertion into a document’s DOM."

They also explain why this is important:

"[T]he naive approach of joining strings together and stuffing them into an Element's innerHTML is fraught with risk, as that can and will cause JavaScript execution in a number of unexpected ways."

Logically, the spec also points out that the Sanitizer API will only do so much. For example, it won't protect against certain types of XSS attacks or something called DOM clobbering.

Again, this is not an official spec so it's still in flux and isn't supported by any browser. But you can keep tabs on it on Can I Use and there's already a section on MDN that describes the API. So it does appear to be headed for implementation once the primary features are settled in their syntax.

All that being said, there seems to be some debate as to whether this is the right approach to sanitizing input, which is brought out by some on this Hacker News thread discussing the subject.

Now on to this week's tools!

VS Code, Text Editors, etc.

IP Geolocation API
Identify a visitor’s location based on their IP address with ipapi.com. This reverse IP lookup supports IPv4 and IPv6. Implement in under 10 minutes in JavaScript, PHP, Node, Python, or any other language.   sponsored 

Riju
A fast online playground for every programming language. This literally has just about everything.

GitHub Copilot
GitHub's latest tool is an AI pair programmer that provides suggestions for whole lines or entire functions right inside your editor.

Git Graph
VS Code extension for Git to view a Git Graph of your repository, and perform Git actions from the graph.

JavaScript Booster
Another popular VS Code extension to boost your productivity with advanced JavaScript or TypeScript refactorings and commands.

Utopia
Currently in alpha. A design and coding environment for React projects and components that runs in the browser. It combines VS Code with a design and preview tool, and full two-way synchronization.

Utilso
Not free. An all-in-one native app that combines 21 different tools including a regex tester, JWT verifier, JSON formatter, base64 decoder, code beautifier, and more.

Remote Repositories
VS Code extension that lets you quickly browse, search, edit, and commit to any remote GitHub repository directly from within VS Code.

Simply Markdown
An easy-to-use online tool to create markdown files that includes live preview, built-in templates, and a download option.

Imperial
A code/text sharing site with user experience in mind that has features such as editing, encryption, and integration with GitHub Gists and Discord.

Better Comments
VS Code extension to help you improve your code commenting by annotating with alert, informational, TODOs, and more.

Peacock
Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.
 

Front-end Frameworks

Master Gatsby: Learn Gatsby, React & Friends
A Premium JavaScript + CSS Training Course from Wes Bos. Covers technologies like GraphQL, Headless CMS, Progressive Images, Scoped CSS, Serverless Functions, and more.   promoted 

Windy
 A small React UI kit based on Tailwind that includes about 15 or so components.

Fullstack Boilerplate
An opinionated full-stack boilerplate from the No Quarter team that uses using Typescript, React, GraphQL, and about 15+ other tools and technologies.

Fakeflix
A Netflix clone built with React that you might be able to use as a basis for a Netflix-based app or something similar.

BlackDash
A really nice looking elegant dashboard template built with Next.js, TypeScript, Tailwind, and more.
 
Madosel
A family of responsive front-end frameworks to build semantic and customizable pages that work across devices.

Naive UI
A Vue 3 component library that includes 70+ components using TypeScript and are fully customizable.

Material Tailwind Kit React
An open source UI kit built with Tailwind and React and based on Google's Material Design.

Next Boilerplate
A Next.js app boilerplate that uses TypeScript, EditorConfig, ESLint, Prettier, Husky, Jest, and more.

template.karngyan.com
A dark themed, blog template that's SEO friendly and uses Nuxt.js, Tailwind, Firebase, and more.

Vue 3 Starter
Starter project for Vue 3 with TypeScript, Vue Router, Vuex, Bootstrap 5, and more.

The Uncategorizables

Master Gatsby: Learn Gatsby, React & Friends
A Premium JavaScript + CSS Training Course from Wes Bos. Covers technologies like GraphQL, Headless CMS, Progressive Images, Scoped CSS, Serverless Functions, and more.   promoted 

Snowtrack
Version control for graphic designers and 2D/3D artists.

Brave Search
A brand new privacy-friendly search engine from the makers of the Brave browser.

Time.lol
Convert date and time to ISO 8601, RFC, Unix, week number, Julian Day, any time zone, and more.

System Color Picker
A macOS color picker with color conversion, normal app vs. menu bar option, keyboard shortcuts, always on top, and more.

Mediamodifier
An intuitive drag-and-drop tool to create designs, marketing materials, and product mockups, with thousands of built-in templates to choose from.

Cakebrew
A Mac app that makes it easier to use Homebrew, the popular package manager.

Hookdeck
Receive, monitor and manage all your inbound webhooks from a single place. Free for up to 10,000 events.
 
Exogress
An out-of-the-box CDN, load balancer, TLS, HTTP2, and more, with a decent free plan.

Tooljet
Open-source low-code framework to build and deploy internal tools with minimal engineering effort.

Visual Sitemap Generator
Enter a URL to generate a visual sitemap in different formats. Larger sites require a paid plan.

Splitbee
A website analytics platform, free for websites with 2500 page views per month.

Script Kit
Mac app that makes it easy to create and run scripts that solve your daily problems. Create a new script from the prompt then your script opens in the editor of your choice.
 

Want the latest in productivity tools and articles? Try my other newsletter, Tech Productivity. Includes tools, articles, and tips on productivity and remote work.

A Tweet for Thought

This is the right way to treat a new hire. And the thread that follows that Tweet includes lots of other intern stories too.

 

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 like board games, the Board Game Remix Kit is a collection of 26 new games you can play using the boards and pieces from Trivial Pursuit, Monopoly, Clue, and Scrabble.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Want to get notified of new issues via Twitter, Telegram, or Messenger? You can sign up using a service called Reachme.

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee