|
|
|
|
Issue #155 (window.opener, Git/CLI, JS Utils)07/07/16
Although it's generally a bad choice to open new windows with JavaScript, you can do some interesting things with it, due to the power given to the different windows, particularly the source window. So if you're new to this sort of thing, here's a quick summary of some features you have at your disposal.
To open a new window you use the window.open() method:
|
window.open('example.html', 'windowName', 'location=no,status=no');
|
The first argument is the page to open, the second argument is a custom window name (of your choice, which you can use to access the window again), followed by a set of "features" separated by commas within the final argument quotes. If you really want to harness the power of opening new windows, however, you'll want to store a reference to the window that's opened:
|
var myWin = window.open('example.html', 'windowName', 'location=no');
|
Now with the myWin variable, you can do stuff like this:
|
myWin.document.body.style.background = 'red';
|
This is done from the original source window. As long as you're obeying cross-origin rules, you have full access to the child window from the source (or parent). Also, from the child page (in this case, example.html), you can do stuff to, or get info from the source window:
|
window.opener.document.body.style.background = 'orange';
|
Here I'm using the window.opener property to reference the original source window, changing the background of the source. And note that although you can close windows from the source window, you can't close the original source window via one of the spawned windows.
I'm sure that's pretty basic stuff for many of you, but if you want to examine a really cool chunk of code that manipulates browser windows, check out Browser Ball, a Chrome Experiment by Mark Mahoney. After you try it out, it's worth viewing and beautifying the source to see what's going on.
Now on to this week's tools!
Git, GitHub, and Command Line Tools
Star History
A line graph generator to display trends for a GitHub repo's star history.
Jasper
"A tool for reading issues and pull requests in GitHub efficiently. You will be able to read issues by condition of author, repository, organization and etc."
nwb
CLI tool. "Provides commands for using Babel, Webpack and Karma together so you can get started developing quickly and reduce the amount of devDependencies and configuration boilerplate."
vim-github-hub
"A Vim filetype plugin for github/hub."
Gitify
Mac OSX. "GitHub Notifications on your menu bar."
Bash Infinity
"A standard library and a boilerplate framework for writing tools using bash."
gulp-shell
"A handy command line interface for Gulp."
pre-commit
"Automatically installs a git pre-commit script in your git repository which runs your `npm test` on pre-commit."
git-standup
"Recall what you did on the last working day ..or be nosy and find what someone else did."
Git
The popular distributed version control system is now at version 2.9.
TMSU
"Provides a simple command-line tool for applying tags and a virtual filesystem so that you can get a tag-based view of your files from within any other program."
OctoTern
Chrome extension. "Links variables to their definition when viewing JavaScript code on Github."
prm
"A minimal project manager for the terminal."
git-secret
"Encrypts files and stores them inside the git repository, so you will have all the changes for every commit."
JavaScript Utilities and Mini Libraries
Real Time Users
"Add a real time user counter to your site in 60 seconds."
Holmes
"Fast and easy searching inside a page."
TDI
An Ajax library that "brings a unified approach allowing server applications to control dynamic updates of client HTML pages."
pipeP
"Functional, composable, immutable and curried promise sequences that automatically handle Promise resolution. 0.8kb Minified & GZIP'd."
strman
"A JavaScript string manipulation library without npm dependencies."
Barba.js
"A small (4.4kb minified and gzipped), flexible and dependency free library that helps you creating fluid and smooth transitions between your website's pages."
intercooler.js
Adds Ajax functionality to an application using just custom HTML attributes.
Microlight.js
A code highlighter that doesn't use colors to highlight code snippets, and works for any language, even multiple within the same code block.
chillout.js
"Provides asynchronous iteration functions that have a Promise based interface and it can execute with low CPU usage."
common-tags
"Useful template literal tags for dealing with strings in ES2015+."
Multimedia Tools
Picla
jQuery plugin that converts alt text on images into simple image labels.
jpeg-autorotate
"Applies the right orientation to a JPEG image, based on its EXIF tag."
Gifs.com
"The fastest way to create animated gifs from Youtube, Facebook, Vimeo and other video sites. Just upload your own video or paste in a URL and click create a gif."
Cloudinary
"The image back-end for web and mobile developers. An end-to-end solution for all your image-related needs."
CCapture.js
"A library to help capturing animations created with HTML5 canvas at a fixed framerate."
Rumble Charts
"React components for building composable and flexible charts. It's based on D3.js under the hood, but most of the time you will not feel that."
Method Draw
A fork of SVG Edit, a web-based SVG editor.
A Tweet for Thought
Thomas Fuch's hyperbolic look at React. There is some truth to that though.
Suggestions / Corrections
Made something? Send links via 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...
You've used console.log, now try console.frog.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
