|
|
|
|
Issue #134 (beforeprint, Text Editors, Git Tools, JS Utils)02/11/16
Here are two DOM events that I think will be quite useful to many: the beforeprint and afterprint events.
In Microsoft's documentation, beforeprint is explained: "Fires on the object before its associated document prints or previews for printing." Interestingly, the afterprint event is supposed "to undo those changes, reverting the document back to its pre-print or pre-preview state."
These events would trigger whether the browser's print functionality is triggered or just the print preview. MSDN further gives an interesting use case: "This example uses the onbeforeprint to make all hidden sections of the document visible just before the document prints. The onafterprint event is processed after the document prints to return the document to its original state."
Here's how it would look with a couple of simple examples:
|
window.addEventListener('beforeprint', function () {
document.body.innerHTML = 'this is before printing';
}, false);
window.addEventListener('afterprint', function () {
document.body.innerHTML = 'this is after printing';
}, false);
|
(Try it in JS Bin)
I would think another use case would be to track how many times a user has printed or previewed for printing. This way, you don't have to have an actual print button that checks for click events, and which wouldn't tell the whole story. These events will be triggered regardless of the way the print functionality is used.
Browser support seems to go back to IE8 (maybe even earlier) and these events are also supported in Firefox 6+. So full support isn't too far away. More info:
Now on to this week's tools!
Text Editors and Code Playgrounds
GrapesJS
"Free and open source web template editor. Next generation tool for building templates without coding."
LayoutIt!
"Create your frontend code simple and quickly with Bootstrap using our Drag & Drop Interface Builder."
ESNextbin
A JSFiddle-like tool, still in Beta, that allows you to write ES2015 code and import modules from npm.
Bootstrap Live Customizer
"A live customizer for Bootstrap, very similar to Bootstrap's customizer (it works with the same variables), but here the results of the edits are visible live on this page."
SourceLair
"Lets people develop software in their browsers using Python, Node.js, PHP, HTML5 and more."
Codeanywhere
"Cross Platform Cloud IDE." This powerful Web IDE has all the features of a Desktop IDE but with additional features only a cloud application can give you.
Jotted
"Environment for showcasing self-hosted HTML, CSS and JavaScript snippets, with editable source."
Stylizer
A GUI HTML/CSS editor with live preview and cross-browser testing features.
Emmet LiveStyle
"The first bi-directional real-time edit tool for CSS, LESS and SCSS."
Git, GitHub, and Command Line Tools
GitHub Notifier
Chrome extension that sends you desktop notifications for pull requests, new open issues, and the ability to interact with the PRs and issues right from the notification.
Vorpal
"A framework that makes it easy to build mature, immersive command-line applications in JavaScript."
git-vendor
"Git command for managing git vendored dependencies."
openblog
This is pretty interesting. "A GitHub-hosted blog using issues for storing posts and comments."
license-up
"Update outdated license files for your projects from command line."
s
"Web search from the terminal. Just opens in your browser."
GitKraken
"The intuitive, fast, and beautiful cross-platform Git client."
Kommit
"Create more detailed commit messages without committing."
Repo
iOS app that "shows you a list of all of the trending repositories on GitHub that are built using the languages you like."
JavaScript Utilities and Mini Libraries
Griddle
A sortable/filterable grid/table component for React.
Service Worker Precache
"A module for generating a service worker that precaches resources. The module is designed for use with gulp or grunt build scripts, though it also provides a command-line interface."
Viewer.js
A modal/lightbox image viewer component, also available as a jQuery plugin.
Instadate
"A minimal high performance date library for Node.js and Browser. Use it to compare and manipulate dates."
Split.js
"A lightweight, unopinionated utility for creating adjustable split views or panes."
Kodama
"A D3-based tooltip system designed to be simple, fast and small with a fluent API." The on-page demo is really nice.
Waterfall.js
A non-jQuery, lighter Masonry alternative for creating Pinterest-style grids.
roll.js
A small library to help you keep track of position, scrolling, and pagination.
A Tweet for Thought
Jon Gold has crushed my optimism.
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...
This week on SitePoint I released The Ultimate CSS Survey, a 3-part survey on CSS habits and preferences. Share it and take a few minutes to fill it out so we can get as much data as possible on CSS-related stuff.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
