Issue #185 (link(), Git/CLI, Testing, Media)02/02/17
I just came across one of these obscure JavaScript features that maybe you've seen before but it's a first for me. It's a way to create an HTML link from a String object, and it's part of the ECMAScript specification (i.e. it's not a DOM method). Best way to explain it is to see an example:
|
let linkText = 'Web Tools Weekly';
let url = 'http://webtoolsweekly.com';
document.body.innerHTML = 'Visit the '
+ linkText.link(url)
+ ' 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.
|
console.log(typeof linkText.link('example'));
// "string"
console.log(linkText.link('example'));
// "<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
GitShowcase
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.
GitHubContributionsiOS
iOS app to show off your GitHub contributions from your lock screen.
Bors-NG
A merge bot for GitHub pull requests.
gitsync
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.
GitPlex
Git repository management and code review server.
gallery.sh
Bash Script to generate static web galleries. No server-side programs (i.e. PHP, MySQL) required.
Command Pad
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
Form Filler
Chrome extension that allows you to fill all form inputs (textboxes, textareas, radio buttons, dropdowns, etc.) with random/dummy data for quicker testing.
Cronitor
Monitor cron jobs, micro-services, daemons and almost anything else, no setup required. Easier cron troubleshooting and no more silent failures.
tlapse
A tiny utility that takes periodic screenshots of your site while you develop.
Hex Naw
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.
MotionMark
A graphics benchmark that measures a browser’s capability to animate complex scenes at a target frame rate.
Monitaure
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.
Librato
A cloud monitoring platform for real-time operations and performance analytics. Loved equally by devops, and data engineers.
Datadog
See metrics from all of your apps, tools, and services in one place.
|
Multimedia Tools
Victory
An ecosystem of composable React components for building interactive data visualizations.
Thum.io
Provides real-time screenshots of websites. The only website screenshot generator to stream screenshots as soon as you request them.
BigTube!
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.
Pigeon Maps
React maps without external dependencies.
Video-React
A web video player built from the ground up for an HTML5 world using React.
xvg
A Chrome extension for debugging SVG paths by converting them to outlines and displaying anchors, control points, handles and arc ellipses.
Sodaphonic
An online audio editor for humans.
LosslessCut
Simple, cross platform video editor for lossless trimming / cutting of videos. Great for rough processing of large video files.
|
|
