|
|
|
|
Issue #87 (window.scrollBy(), Git/CLI Tools, JS Libraries)03/19/15
Here's a DOM method that's really simple, is supported in all browsers including oldIE, but doesn't seem to have been added to the spec until recently: window.scrollBy().
Let's look at some example code. We'll assume we have a really long page of content with two button elements:
var btn = document.querySelector('button');
btn2 = document.querySelectorAll('button')[1];
btn.addEventListener('click', function () {
window.scrollBy(0, window.innerHeight);
}, false);
btn2.addEventListener('click', function () {
window.scrollBy(0, -(window.innerHeight));
}, false);
|
Here's a demo.
If you click the first button, the page scrolls down. If you click the second button, it scrolls up. If there's no room to scroll, it will do nothing. The scrollBy() method takes two arguments, an number that's a pixel value to scroll horizontally (x-axis) and one to scroll vertically (y-axis, which is what you'll normally use).
In this case, I'm using the value of the window's innerHeight property to allow the buttons to scroll up and down exactly one page. As you can see in the second example, the arguments can be negative, to scroll either up (for vertical) and left (for horizontal).
You can find some details on scrollBy() in the CSSOM View spec and on the Dottoro reference.
Now on to this week's tools!
Git, GitHub, and Command Line Tools
bish
"A lightweight language created to bring shell scripting into the 21st century. It gives programmers the comfort of modern syntax but compiles to Bash, resulting in good portability."
Trending Extension
Chrome extension that lists GitHub projects that are trending.
calc
"A simple, fast command-line calculator written in Go."
p2pvc
"A point to point color terminal video chat."
Git Extras
"Git utilities -- repo summary, repl, changelog population, author commit percentages and more."
Git-ftp
"Most of the low-cost web hosting companies do not provide SSH or git support, but only FTP. That is why I needed an easy way to deploy my git tracked projects."
chalk
"Terminal string styling done right."
Git Hunt
An interface to view new and trending projects on GitHub, along with APIs for "lazy programmer excuses" and the trending repos.
HubPress
"A web application to build your Blog on GitHub."
mkcast
"A tool for creating GIF screencasts of a terminal, with key presses overlaid."
hub
"A command-line wrapper for git that makes you better at GitHub."
Documents, Content, etc.
Hjson
"The Human JSON. A configuration file format that caters to humans and helps reduce the errors they make."
SC5 Style Guide Generator
"Informative and easily navigable live style guide which can be edited directly in the browser."
markdown-live
"Markdown preview with live update."
countries
"World countries in JSON, CSV, XML and Yaml."
fake2db
"Create test databases that are populated with fake data."
Frontend.md
"Generate simple documentation for your frontend code."
PDF to Text
"The best online service for easily extracting text from your PDF files. Conversion from PDF to TXT is really fast thanks to our in-browser conversion architecture."
Draftback
"A Chrome extension that lets you play back any Google Doc’s revision history (for docs you can edit). It’s like going back in time to look over your own shoulder as you write."
ReadMe.io
"Beautiful documentation made easy." Used by Mozilla and internally by BMW.
Avatars.io
"Every app needs avatars, we make it hassle-free. Hosted user avatar service for your apps and sites."
JavaScript Libraries and Frameworks
Radium
"A set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS."
jem.js
A JavaScript event manager to help in writing event-driven JavaScript. No dependencies.
marty.js
An implementation of Facebook's Flux architecture, for state management in React applications.
NgReact
"A small library providing helpers and showing examples of achieving interoperability between React and Angular."
Griddle
"A simple grid component for use with React."
JointJS
"A modern HTML5 JavaScript library for visualization and interaction with diagrams and graphs. It can be used to create either static diagrams or ... fully interactive diagramming tools and application builders."
lodash
This popular and extensive JavaScript utility library (arrays, functions, dates, strings, etc.) is now at version 3.5.x.
Reactor
"A reactive programming library... that allows you to write functions that automatically respond to variable changes within them. This allows you to think of your project as a single, static state."
grunt-hamlbars-js
"Convert Haml to precompiled Handlebars templates (a ruby gem "hamlbars" is not required)."
A Tweet for Thought
Mat Marquis on the importance of progressive enhancement and accessibility in modern web apps.
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 might want to try out Streamus. It's a Chrome extension that "turns YouTube into the music player you always wanted."
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
