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

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #418 • July 22, 2021

Advertisement
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.
Get Your Free API Key!
Paragon

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

HTML Sanitizer API

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.

Utilso

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

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

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.

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

Older messages

Web Tools #417 - Testing Tools, React, GitHub/CLI Tools

Friday, July 16, 2021

Web Tools Weekly WEB VERSION Issue #417 • July 15, 2021 Advertisement Ship Embedded SaaS Integrations in Minutes with a Native iPaaS Building native integrations between your app and your customers

Web Tools #416 - ImageKit.io, CSS Tools, React, Jamstack

Saturday, July 10, 2021

Web Tools Weekly WEB VERSION Issue #416 • July 8, 2021 The following intro is a paid product review for ImageKit.io, a global image CDN with built-in optimization, real-time transformations, and more.

Web Tools #414 - Frameworks, JS Utils, Uncats

Thursday, June 24, 2021

Web Tools Weekly WEB VERSION Issue #414 • June 24, 2021 Advertisement IntersectionObserver Examples Practical, real world React examples of Intersection Observer. • No external JavaScript or CSS

Web Tools #413 - DebugBear, VS Code, Build Tools, React

Thursday, June 17, 2021

Web Tools Weekly WEB VERSION Issue #413 • June 17, 2021 The following intro is a paid product review for DebugBear, a Lighthouse-based website speed monitoring tool that provides in-depth reports for

Web Tools #412 - Git/CLI, Media/SVG, Jamstack

Thursday, June 10, 2021

Web Tools Weekly WEB VERSION Issue #412 • June 10, 2021 Advertisement Engineering Leaders Need to Know How to Structure a Remote Hiring Process A new era of remote work suddenly arrived and managers

You Might Also Like

Re: Last Chance

Friday, March 29, 2024

Dear there, By this time tomorrow, your exclusive new subscriber discount will be gone and you'll have to pay twice as much to join Insider and master everything your iPhone has to offer. If, like

Hacker Newsletter #694

Friday, March 29, 2024

Always forgive your enemies - nothing annoys them so much. //Oscar Wilde hackernewsletter Issue #694 // 2024-03-29 // View in your browser Happy Easter if you celebrate it! Heads up - we're taking

Apple RCS 📱, SBF's 25 year sentence 👮, Linux Foundation's Redis fork 👨‍💻

Friday, March 29, 2024

RCS is coming to the iPhone in the fall of 2024 Sign Up|Advertise|View Online TLDR Together With Veracode TLDR 2024-03-29 Build fast, build secure (Sponsor) Software is drowning in security debt.

Data Science Weekly - Issue 540

Friday, March 29, 2024

Curated news, articles and jobs related to Data Science, AI, & Machine Learning ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

This Week in Rust #540

Friday, March 29, 2024

Email isn't displaying correctly? Read this e-mail on the Web This Week in Rust issue 540 — 27 MAR 2024 Hello and welcome to another issue of This Week in Rust! Rust is a programming language

The Value Of A Promise 🤞

Friday, March 29, 2024

How much is a promise from a tech company really worth, anyway? Here's a version for your browser. Hunting for the end of the long tail • March 28, 2024 The Value Of A Promise When you hear a

New Elastic Security for SIEM Training Course

Friday, March 29, 2024

Detect and respond to evolving threats ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ elastic | Search. Observe. Protect Detect anomalies and malicious behavior March

SBF gets 25 years 

Thursday, March 28, 2024

Sam Bankman-Fried is sentenced View this email online in your browser By Christine Hall Thursday, March 28, 2024 Welcome back to TechCrunch PM! The editorial team spent a chunk of the day discussing

💎 Issue 410 - Being laid off in 2023-2024 as an early-career developer

Thursday, March 28, 2024

This week's Awesome Ruby Newsletter Read this email on the Web The Awesome Ruby Newsletter Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Ruby news, articles and

💻 Issue 403 - Microsoft defends .NET 9 features competing with open source ecosystem

Thursday, March 28, 2024

This week's Awesome .NET Weekly Read this email on the Web The Awesome .NET Weekly Issue » 403 Release Date Mar 28, 2024 Your weekly report of the most popular .NET news, articles and projects