Issue #292 (scrollTo(), JS Utils, Front-end Frameworks, Uncats)
Normally, you'll see scrollTo() looking something like this:
This line would scroll the page 2000 pixels from the top of the viewport. You have to provide two arguments in order for this to work, one is the horizontal axis and the second is the vertical axis (the more commonly used one).
But there are a few other little tidbits to note about the scrollTo() method.
First, scrollTo() can be invoked not just on the window but on an element. So if a specified element (like a div) is scrollable using a combination of overflow:auto and some overflowing content, then scrollTo() works on that the same way.
Another thing to note is that the arguments passed into scrollTo() can also be expressed as a scrollToOptions object that has three possible properties. Here's an example:
As you can see, scrollToOptions can specify the amount to scroll from the left and from the top (which is the same thing I did previously) along with a behavior value. The behavior indicates if I want the scrolling to occur smoothly (like an animated scroll) or abruptly (which is the default, and which is similar to what happens using in-page target links in HTML).
This CodePen demo uses the scrollToOptions object to do some user-defined custom scrolling. Type a number into the box at the top of the demo and use the select element to choose whether you want the scroll to be 'smooth' or 'auto'.
One last thing to note is that the scrollToOptions object is valid for three different scroll-related methods: scroll(), scrollBy(), and scrollTo(). All three can be invoked on the window or on an element.
Now on to this week's tools!
Yet another command line option parser. Simple argument parsing.
An accessible tab component with keyboard support. Follows ARIA best practices for tab-based UI elements.
Dead-simple parallax scrolling.
Faster subsequent page-loads by prefetching in-viewport links during idle time.
Converts a string to "mocking" case, similar to how the tool's name is stylized.
Small module that helps you maintain state around resources.
Your RegEx companion. Library for writing complex regular expressions with the help of auto-completion.
Free HTML website templates and UI Kits to kickstart your next project.
Minimal and straight-forward CSS grid system utilizing descriptive HTML rather than semantic CSS.
React + Three JS Boilerplate
A minimalistic and extendable React + Three.js boilerplate to get you started with WebGL in the browser in no time.
CodePen development style for React in VSCode.
An easily extensible, feature-rich Node+React framework with no need to configure webpack, Babel, or any other build tools.
Opinionated reset stylesheet that provides a clean slate for styling your HTML.
Static Site Boilerplate
A better workflow for building modern static websites. Automated build processes, a local development server, production minification and optimizations, and the latest standards for static websites.
A modern and minimal CSS framework for terminal lovers.
The simplest, most powerful way to build serverless applications.
Redux Starter Kit
A simple batteries-included tool set to make using Redux easier.
Recommended Reading for Developers
Import CSV files to any web app (Ruby, SQL, PHP, API, and more). Create a delightful data import experience for your customers without weeks of development.
Fast web pages for everybody. A service that allows anyone to post or read simple content that's not on a bloated web page or app.
Google's early access program for acquiring a .dev domain name. Much more expensive if you reserve one prior to February 28.
Turn any website into a serverless API (with SPA support).
Online tool to build a custom emoji and then download it in PNG format.
Mac app. Ultra-light menu bar application that runs inconspicuously in the background and reports any microphone and camera activity to help you figure out if someone’s spying on you.
A beautiful, feature rich, device-friendly wedding website template.
Google's ubiquitous bot-stopping service is now at version 3.
Make any webpage feel like an artboard with this Chrome extension.
Resources, tooling, and design guidelines for building interfaces with GitHub’s design system.