Web Tools Weekly
What a Tool!

Issue #314  (DevTools Hide, Testing, Media/SVG, Git/CLI)07/25/19

Advertisement via ThoughtLeaders
You + Your Dream Job = Perfect Love Story
Join Hired and let 10,000+ companies apply to you. Get salary + equity details up front, before the interview. It's simple, just tell us what you love to do and get customized job offers tailored for you.
Join Hired, Where Dreams Come True

While debugging a website layout, you might want to hide an element temporarily while still maintaining the flow of the elements around it, as well as maintaining the space occupied by the hidden element. Well, if you know CSS pretty well, you know you can do this by setting the element to visibility: hidden.

But here's a quick shortcut: In the developer tools in both Firefox and Chrome you can select an element inside the Elements panel (or Inspector in Firefox), press the 'h' key on your keyboard and this will instantly 'hide' the element:

Hidden element in Firefox Developer Tools

As shown in the screenshot above, Firefox adds a browser style with a custom class to hide the element. Chrome is a little different, it adds the CSS using !important but it's not a listed as a browser style:

Hidden element in Chrome DevTools

Microsoft's Edge browser doesn't seem to have this feature and I did not test in Safari. So if you're mainly debugging in Chrome and Firefox, this is an easy way to hide an element while still maintaining the flow of the layout.

Now on to this week's tools!

Testing and Debugging Tools

You + Your Dream Job = Perfect Love Story
Join Hired and let 10,000+ companies apply to you. Get salary + equity details up front, before the interview. It's simple, just tell us what you love to do and get customized job offers tailored for you.    ad via ThoughtLeaders

Checks HTTP(S) URL endpoints for a HTTP status code (or errors on the lower TCP stack) and sends an e-mail on status change.

Site Monki
Monitors your website uptime, performs SSL certificate checks and monitors cron jobs all in one simple web interface.

Automate quality assurance with codeless software testing. Spend less time finding, creating, and maintaining your automated tests with the power of AI.

Uses Lighthouse to analyze the impact of a browser extension on web performance.

Monitor, analyze and optimize the key elements of your website efficiently with one tool.

A free and open source test automation framework that takes the pain out of acceptance testing.

React Hot Loader
Now well into version 4+. Tweak React components in real time.

React Testing Library
Simple and complete React DOM testing utilities that encourage good testing practices.

ARC Toolkit
A professional-level accessibility testing tool that gives you the power to quickly and efficiently evaluate screens for accessibility and uncover issues related to the WCAG 2.1 Level A and AA guidelines.

 A fast, interactive web-based viewer for performance profiles.

Media Tools (SVG, Audio, etc.)

Tech Productivity Newsletter
A brief weekly newsletter featuring productivity tools, articles, and resources for tech pros.  promoted

Audio Repeater Pro
Professional audio streaming tool made for broadcasters and gamers.

Create high quality GIFs without watermark from YouTube, Facebook, Vimeo, Twitter, Instagram and hundreds of sites that have embedded videos.

A standalone JavaScript library for rendering code dependency diagrams on your web page.

A React component to allow a user to crop images with easy interactions.

Font Kiko
More than 1100 open source icons, categorized and searchable.

Rad Lines
Online tool for generating SVGs of polygons for plotting.

Easy to configure, lightweight, editable vector graphics in your React components.

Get unlimited access to millions of free transparent PNG files created by designers, for designers.

Joe Schmoe
An illustrated avatar collection for developers and designers.

Git, GitHub, and CLI Tools

Bash Infinity
A standard library and a boilerplate framework for writing tools using Bash. It's modular and lightweight, while managing to implement some concepts from C#, Java, and JavaScript into bash.

Personal website + blog for every GitHub user.

The SSH client that works on desktop and mobile. Use modern SSH for macOS, Windows, and Linux to organize, access, and connect to your servers.

A shell utility allowing users to navigate to aliased directories supporting auto-completion.

Makes it easier to organize all your command line tasks in one place. Organize tasks into projects and run them whenever you want with a click of button.

Release It!
Automate versioning and package publishing.

A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more.

A better way to manage your GitHub Issues. Multi-repo Boards, Epics, individual Workspaces and reports — all without ever leaving GitHub.

Help Wanted
Collect issues on GitHub tagged with help-wanted.

A minimal blog platform using GitHub and Vue.

A Tweet for Thought

Dan Abramov with a few tweets on technical skills vs. human skills when considering hires.

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

Open Source Game Clones is a collection of open-source remakes of great old games from various platforms.

Thanks to all for subscribing and reading!

Keep tooling,