Issue #314 (DevTools Hide, Testing, Media/SVG, Git/CLI)07/25/19
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
ciao
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.
Qanairy
Automate quality assurance with codeless software testing. Spend less time finding, creating, and maintaining your automated tests with the power of AI.
Exthouse
Uses Lighthouse to analyze the impact of a browser extension on web performance.
Ryte
Monitor, analyze and optimize the key elements of your website efficiently with one tool.
Gauge
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.
speedscope
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.
GifRun
Create high quality GIFs without watermark from YouTube, Facebook, Vimeo, Twitter, Instagram and hundreds of sites that have embedded videos.
Pinker
A standalone JavaScript library for rendering code dependency diagrams on your web page.
react-easy-crop
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.
react-designer
Easy to configure, lightweight, editable vector graphics in your React components.
IMGBIN
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.
gitfolio
Personal website + blog for every GitHub user.
Termius
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.
goto
A shell utility allowing users to navigate to aliased directories supporting auto-completion.
ten-hands
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.
Utterances
A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more.
ZenHub
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.
minblog
A minimal blog platform using GitHub and Vue.
|
|
