Issue #307 (Wheel Events, CSS/HTML, Testing, Uncats)06/06/19
In addition to common mouse-based events like click, you can also use JavaScript to detect if the user's mouse wheel has been scrolled. This is based on a relatively new spec called Wheel Events.
So you might have code that looks like this:
|
document.addEventListener('wheel', function (e) {
console.log(e.deltaY);
}
|
Here I'm listening for a wheel event and then printing out a message. The info is obtained from the event object, abbreviated here as just 'e'. The above code includes one of the properties exposed. These are:
- deltaY - Revealing the amount of vertical scroll
- deltaX - Amount of horizontal scroll (e.g. for sideways scrolling pages)
- deltaZ - Amount of scroll on the z-axis
- deltaMode - Revealing the unit of the scroll amount
So far, with my testing, I've had a lot of trouble getting any kind of usable value from most of these properties. Here's a CodePen demo where you can try it out. Scroll the wheel on your mouse or hold the SHIFT key while scrolling (for horizontal scroll) to see the results on the page. Here are some of my comments:
- The amount of scroll is almost always the same, depending on the browser. For example, Chrome seems to do 100px, while Firefox oddly does 3px on each scroll. Very weird.
- MS Edge scrolls precisely in increments of 105.5999984741211px which just makes me say LOL OK
- The deltaMode property returns 0 in Chrome and Edge but returns 1 in Firefox. For the meaning of those, see MDN's article.
- Mobile devices don't recognize the wheel event.
- Reading the deltaX property for horizontal scroll doesn't seem to work (I get a value of 0 every time).
I have no idea if these results have something to do with my OS and the kind of mouse I'm using, so that might be a factor. But I'm guessing most of you will have similar results. If you see something different, let me know by responding to this email.
Based on my findings, the only really reliable thing you can do with this is check if the wheel was scrolled up or down. Other than that, the quirks seem to be too many.
For more info on this interface, see MDN's main page or the spec page linked at the beginning.
Now on to this week's tools!
|
CSS and HTML Tools
JavaScript & DOM E-Books Bundle - $12
A collection of 200+ JavaScript and DOM API coding tips in 3 e-books. EPUB, MOBI, and PDF formats, with 200+ interactive CodePen demos. All book code and demos now updated with ES6 syntax. promoted
subsetcss
CSS linter that limits you to a defined subset of values, keeping everyone touching the code on the same page as a project evolves.
Embetty
HTML/JS component that displays remote content like tweets or YouTube videos without compromising privacy.
ColorKitty
Generates a color palette from a photo which you can export as a URL, PNG, SCSS, JSON, or Hex.
mouthful
Generate a concatenated file of all CSS used on a given website.
typetura
A fluid typesetting tool. Use the slider at the top of the screen to select the breakpoint you want to style, then use the panel on the left of the screen to style your page.
CSSeffectsSnippets
A collection of CSS animations and effects.
RFS
Responsive Font Size. Sass, Less, Stylus or PostCSS plugin that works as a font size engine that automatically calculates the appropriate font size based on the dimensions of the browser viewport.
Cattle Grid
A simple ~20kb responsive flexbox grid framework.
Infinity CSS Grid
Fluid flex solution for making infinite grid columns.
Assets to Enqueues Converter
For WordPress. Batch converts your CSS and JavaScript asset references to proper WordPress enqueues.
CSS Grid Generator
Online interactive tool to generate CSS grid code from a graphical representation of the grid.
CSS Transform Functions Visualizer
2D and 3D CSS transform functions visualizer and code generator. Looks like a good way to learn the subtleties of transforms.
|
Testing and Debugging Tools
Tech Productivity
A brief weekly newsletter featuring articles, tools, and resources to help you be more productive. promoted
log-process-errors
Node.js error logging that fixes some problems inherent in Node's normal console error messages.
headingsMap
Chrome extension. Generates a document map or index of any web document structured with headings (which become clickable).
Fontanello
A browser extension for Google Chrome and Firefox that lets you display the basic typographic styles of a text by right-clicking it.
Accessible Brand Colors
Add your colors to generate a chart to see how they can be used together for accessibility, and find similar colors that work better, to ensure your colors are ADA (Americans with Disabilities Act) compliant.
capture-website
Puppeteer-based script that captures website screenshots.
Usability Hike
Chrome extension that aims to be a fast and easy tool to spot potential visual problems that can produce frustration and confusion among your visitors.
Pixelcheetah
Track anything by making HTTP requests to your pixel address. The query parameters are mapped to database columns and you get full SQL access to your data.
Fyipe
Status Page, monitoring, and on-call made simple. Monitors your website, dashboards, API's, and more, and alerts your team when downtime happens.
GFWaaS
Helps you test the performance and identify the underlying bottlenecks of how your website loads in China.
performance-budgets
Gives you a simple way to check and stay on top of performance via a Docker command. Easy to run and configure with your custom budgets.
|
The Uncategorizables
Tech Productivity
A brief weekly newsletter for tech pros who want to get stuff done. promoted
Palettte App
Build, analyze and edit smooth color palettes.
Tweakr
The fastest way to get visual feedback. Upload any file you want and share the Link. Get visual feedback with everyone involved.
Input
A monospaced coding font with generous spacing, large punctuation, and easily distinguishable characters.
AngularDoc
Architectural analysis and visualization for JavaScript projects.
Shortcuts JS
Enables you to use JavaScript to create complex shortcuts in iOS 12.
Volument
A new take on website analytics, focused solely on conversion optimization.
Frontity
A free and open source framework to build super fast WordPress themes using React.
Tanker
Enables cloud application makers to sell to the growing market of privacy and security minded customers.
Keikai
Effortlessly build spreadsheet-driven web apps.
Cube.js
A complete open source analytics solution. Visualization agnostic front-end SDKs and API backed by analytical server infrastructure.
Churnkit
Finds out who removed your service and is no longer engaged so you can find out why, and win them back.
|
A Tweet for Thought
Good advice from Sophie Alpert if people tend to criticize your use of certain "inferior" tools.
Send Me Your Tools!
Made something? Send links via Direct Message on 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 is pretty neat: A People Map of the US. You can zoom in as far as you want to view city names and above each city is the person "most Wikipedia'ed" (i.e. most famous) from that city/town.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
