Issue #185 (link(), Git/CLI, Testing, Media)02/02/17
let linkText = 'Web Tools Weekly';
let url = 'http://webtoolsweekly.com';
document.body.innerHTML = 'Visit the '
+ ' website.';
You can view this example on JS Bin
As the code above demonstrates, in order to generate a link from the link text and the URL, I simply call the link()
method on the string that holds the link text. The link()
method takes one argument: the URL that will become the href
value of the generated link.
As you can see from the code and comments in the example below, the link method returns a String object, not an HTML element.
// "<a href=\"example\">Web Tools Weekly</a>"
Once you have the returned result, it's trivial to insert the returned value into the DOM using something like innerHTML()
. By contrast, if I was to use the textContent()
property to inject the string, then I'd get the HTML characters as text on the page, as seen in this demo
. Likely not what I want, but it helps to understand what gets returned.
You can see this feature in the latest ES spec
, and on MDN
Now on to this week's tools!
Git, GitHub and Command Line Tools
Plug-and-play GitHub portfolio. Sign-in with your GitHub account, authorize GitShowcase, get a portfolio to call your own.
GIT quick statistics
A simple and efficient way to access various statistics in git repository.
GitHub Report Card
Visualize your 2016 GitHub contributions, languages, and trends.
iOS app to show off your GitHub contributions from your lock screen.
A merge bot for GitHub pull requests.
A simple shell script to ensure that a local clone is in sync with a remote. That is, no local, non-committed changes, and no new commits on the remote.
Git repository management and code review server.
Bash Script to generate static web galleries. No server-side programs (i.e. PHP, MySQL) required.
A handy GUI application for running your command line tasks. It helps to start and stop a command line tools easily and you can also monitor the output.
Testing and Debugging Tools
Chrome extension that allows you to fill all form inputs (textboxes, textareas, radio buttons, dropdowns, etc.) with random/dummy data for quicker testing.
Monitor cron jobs, micro-services, daemons and almost anything else, no setup required. Easier cron troubleshooting and no more silent failures.
A tiny utility that takes periodic screenshots of your site while you develop.
Helps designers and developers test entire color systems for contrast and accessibility. Plug in your palette or color system and let Hex Naw do the rest.
A graphics benchmark that measures a browser’s capability to animate complex scenes at a target frame rate.
A simple and hassle-free server monitoring dashboard.
Accessibility Developer Tools
Chrome extension that adds an Accessibility audit, and an Accessibility sidebar pane in the Elements tab, to DevTools.
A cloud monitoring platform for real-time operations and performance analytics. Loved equally by devops, and data engineers.
See metrics from all of your apps, tools, and services in one place.
An ecosystem of composable React components for building interactive data visualizations.
Provides real-time screenshots of websites. The only website screenshot generator to stream screenshots as soon as you request them.
For devs who watch coding tutorials on YouTube, making it easier to see the code on the screen at full size while still using your computer to follow along.
React maps without external dependencies.
A web video player built from the ground up for an HTML5 world using React.
A Chrome extension for debugging SVG paths by converting them to outlines and displaying anchors, control points, handles and arc ellipses.
An online audio editor for humans.
Simple, cross platform video editor for lossless trimming / cutting of videos. Great for rough processing of large video files.