Issue #314 (DevTools Hide, Testing, Media/SVG, Git/CLI)
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:
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:
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.
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.
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 React component to allow a user to crop images with easy interactions.
More than 1100 open source icons, categorized and searchable.
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.
An illustrated avatar collection for developers and designers.
Git, GitHub, and CLI Tools
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.
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.
Collect issues on GitHub tagged with help-wanted.
A minimal blog platform using GitHub and Vue.