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

JSK Daily for Jul 26, 2021

Monday, July 26, 2021

JSK Daily for Jul 26, 2021 View this email in your browser A community curated daily e-mail of JavaScript news Understanding 'this' keyword in JavaScript If you belong to a programming

Max Q - How about I knock off $2 billion?

Monday, July 26, 2021

TechCrunch Newsletter TechCrunch logo Max Q logo Monday, July 26, 2021 • By Darrell Etherington The space industry is still abuzz with the aftermath of Jeff Bezos' brief jaunt, and the

Mapped | Visualizing GDP per Capita Worldwide in 2021 💰

Monday, July 26, 2021

GDP per capita is one of the best measures of a country's standard of living. This map showcases the GDP per capita in every country globally. FEATURED STORY Mapped: GDP per Capita Worldwide in

3-2-1: The State of Developer Ecosystem 2021, Future of Web, Hidden Door to Build Personal Brand, How to Run Good Meetings, Guidelines to Write High Quality CSS and Bonus

Monday, July 26, 2021

Hello my friends! Here are 3 hand-picked articles from the tech world, 2 web development guides, and 1 best Tweet of the week. 🔥 Picks from the tech world 1. The State of Developer Ecosystem 2021​ This

Playing Games to Earn a Living in the Metaverse

Monday, July 26, 2021

“As a player, you actually earn 2-3x more than an entry-level job” - Gabby Dizon, co-founder of Yield Guild Games ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

You’re Invited: Getting Maximum Value from Cloud-Native Master Data Management

Monday, July 26, 2021

Webinar on August 10, 9am PT Hi there, Investing in high-quality, curated customer data fuels business results, from revenue growth to analytics adoption and productivity gains. However, quantifying

Just Launched: Startups of the Year 🚀

Monday, July 26, 2021

4.5k+ Cities; 37k+ Startups: Who'll Achieve Startup of the Year Status in Your City? Vote for 2021's Startups of the Year with Hacker Noon! How's it hanging, Hacker? 👋 Hacker Noon just

The best SaaS products with a free plan

Monday, July 26, 2021

This past week on Twitter, I asked people what their favorite SaaS products with a free plan were. The list is full of gems. Hiten's Pick The Highest Forms of Wealth What does it mean to be wealthy

Daily Coding Problem: Problem #476 [Medium]

Monday, July 26, 2021

Daily Coding Problem Good morning! Here's a solution to yesterday's problem. This is your coding interview problem for today. This problem was asked by Google. You are given an array of length

What ransomware victims saved thanks to free decryption tools

Monday, July 26, 2021

The best cheap VPNs; Beyond Raspberry Pi ZDNet Facebook Twitter LinkedIn ZDNet Tech Today July 26, 2021 placeholder Ransomware: Here's how much victims have saved in ransom payments by using these