Issue #506 (IntersectionObserver, CSS/HTML, Git/CLI, JS Utils)03/30/23
Deliver Internal Tools and Apps at 10X Speed
DronaHQ is a developer toolset that enables businesses to build custom internal software for web and mobile, quickly and easily. DronaHQ is used by businesses to streamline internal processes and build custom tools like database GUIs, admin panels, dashboards, forms, automation, workflows.
The platform provides a range of pre-built drag-and-drop UI components and action blocks, ready connectors, rule engine, multi-platform layouts, user management, and security features, SSO, SAML. DronaHQ supports integrations with a variety of other tools including Slack, GitHub, and Salesforce or using APIs with REST, GraphQL, and gRPC. Offering both self-hosted and cloud versions for users to quickly explore and adopt the toolset.
Sign Up For a Free Trial
|
The IntersectionObserver API has had good browser support for some time now, and has many real-world use cases. As you might know, this feature can be used to detect when a specified HTML element 'intersects' with the viewport or another ancestor element. This is useful for a number of things, but I'll use a simple example to demonstrate.
Suppose I have a large page of text and I want to detect what paragraph has currently been fully scrolled into the viewport. Below is the code, then I'll briefly summarize it:
|
const pars = document.querySelectorAll('p');
const op = document.querySelector('output');
const options = {
root: null,
rootMargin: '-50% 0px 0px 0px',
threshold: 0
};
const observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.intersectionRatio > 0) {
const parentElement = entry.target.parentElement;
const childNumber = Array.from(parentElement.children).indexOf(entry.target);
op.innerHTML = 'P: ' + childNumber;
}
});
}, options);
pars.forEach(function(p) {
observer.observe(p);
});
|
It's not easy to create a simple InterSectionObserver example that's practical, so there is a lot going on above. You can try out the above code in this CodePen demo.
Scroll the page to see the current paragraph number displayed in the little box in the top left area of the screen. This isn't a perfect example, because it doesn't reset properly when you scroll back to the top. That is, it will always show the last paragraph that was fully scrolled into view. But it suffices to demonstrate the technique.
In the code here are a few things to note:
- The options object helps define the characteristics of the observer. The null root indicates I'm using the viewport as the bounds for intersection. I can also use a scrollable element here instead as the root.
- The other options help define where and how exact is the threshold for detecting intersection with the root.
- The IntersectionObserver constructor takes a callback function (in this case it's an anonymous function) which passes in the "entries" observed, namely the paragraphs in this example.
- The observe() method called on the IntersectionObserver instance is what triggers the whole process, repeated for all the paragraphs but I could have chosen to observe a single element here instead.
There's a lot more to discuss when it comes to the options available and the different use cases, but this should help to introduce the subject if it's something you haven't looked into yet.
Now on to this week's tools!
|
CSS and HTML Tools
Modern Font Stacks
A one-stop reference for system font stack CSS, organized by typeface classification for every modern OS.
IMG Quest
An open-source API to generate Open Graph images. Just enter an image URL, select a "theme", and use the resulting URL in your meta tags.
The Fastest Way to Build Internal Tools
Developers can quickly clear their backlog of internal tools and custom operational apps requests with DronaHQ, a developer toolset with pre-built UI components, ready connectors, user management, security, SSO, permissions, and more. Self-hosted and cloud versions available. Try it free. SPONSORED
UI Conrtent
A lorem ipsum alternative that lets you easily copy and paste filler content for your designs and HTML mockups that's more interesting and engaging than traditional lorem ipsum.
wc-progress
A web component that lets you add a highly configurable animated progress element to a page.
node-html-to-image
A Node.js library that generates images from HTML, powered by Puppeteer in headless mode for rendering and uses Handlebars for HTML logic.
Fontpair
A one-stop resource for finding fonts that match well together for use as headings and accompanying body text.
 |
PineTools
A set of online tools in various categories including texts and lists, numbers, math, date/time, images, random generators, and more.
finder
A small JavaScript utility that generates a CSS selector based on a given target (e.g. a click event finds the selector that matches the element click).
Text Highlighter
A JavaScript utility to dynamically highlight search results live in a textarea element, with options for enabling/disabling case sensitive search.
CSS Variable
A tiny ( ~0.3 kb ) tree-shakable library to define CSS custom properties (variables) in JavaScript, compatible with CSS-in-JS solutions including Emotion, styled-components, and Linaria.
Font Library
An open source project to tag and organize Google Fonts using unique categories that aren't available with the regular Google Fonts UI.
|
Git, GitHub, and CLI Tools
git-squash-branch
A script to squash commits in a Git branch or pull request, to consolidate the commits in a branch to a single commit for a cleaner Git history.
Glint
A graphical interface for Git for Windows, Mac, and Linux. Free version includes up to two tabs in use, public and private repos, merge conflict editor, search across commits, and lots more.
voici.js
A Node.js library written in TypeScript for pretty printing your data on the terminal (i.e. for displaying datasets in tabular form).
Stoat
A GitHub Action that vacuums up files and metrics generated by your GitHub build and makes it trivial to aggregate, access, and compare them.
5 Links Per Day, Tailored To Your Interests
Every day Refind picks 5 links from around the web that make you smarter, tailored to your interests. It's a must-read newsletter loved by 200,000+ curious minds. Sign up for free today. SPONSORED
starry-night
A syntax highlighter that aims to mimic GitHub's closed-source project called PrettyLights, which GitHub uses for its live syntax highlighting.
ReadMe.Dev
An online tool to generate a README for your GitHub profile, where you add basic info, social links, and skills.
 |
combine-prs
A GitHub Action to combine multiple pull requests into a single one, used by GitHub's dependabot PRs.
Git-Sim
Visually simulate Git operations in your own repos with a single terminal command. This generates an image (default) or video visualization depicting the Git command's behavior.
Green Wall
Generate an image of your GitHub contributions graph, which you can save and share with others.
First Interaction
A GitHub action for filtering pull requests and issues from first-time contributors.
Star History
An older project that has a new URL and has been updated. Generate an informal drawing of a GitHub repo's star history for any public repo. You can download, embed, or link to the result.
|
JavaScript Utilities
ultrafetch
Modular utilities for enhancing fetch behavior, with support for node-fetch and fetch for unidici (the Node.js HTTP client).
itty-router
A tiny, zero-dependency router with route param and query parsing, built for Cloudflare Workers, but works everywhere.
piecemeal
A dependency-free Node utility to send your data piecemeal, to make incremental delivery possible.
5 Links Per Day, Tailored To Your Interests
Every day Refind picks 5 links from around the web that make you smarter, tailored to your interests. It's a must-read newsletter loved by 200,000+ curious minds. Sign up for free today. SPONSORED
ts-reset
A 'reset' for TypeScript, improving types for common JavaScript APIs, e.g. .json/JSON.parse, .filter(Boolean), array.includes, etc.
Make Bookmarklets
An online tool to easily create JavaScript bookmarklets using a UI that includes JS IntelliSense, multi-line cursor, a button to add to your bookmarks, and more.
JustValidate
A simple, powerful, dependency-free, and lightweight modern form validation library, written in Typescript, with lots of features for customization.
real-cancellable-promise
A simple, lightweight cancellable promise implementation for JavaScript and TypeScript, compatible with fetch, Axios, and jQuery.ajax.
Transformers.js
Run Transformers (i.e. Machine Learning models) in your browser.
Turbowatch
A fast file change detector and task orchestrator for Node.js, similar to Nodemon but more capable.
Chrono
A natural language date parser in JavaScript, designed to handle most date/time formats and extract information from any given text (e.g. 5 days ago, 2 weeks from now, tomorrow, etc).
Poline
An esoteric color palette generator micro library that "harnesses the mystical witchcraft of polar coordinates".
|
|
Commercial Apps and Classifieds
These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
|
UseCSV – Service to add CSV import functionality to your app in minutes.
|
|
Meco – Enjoy newsletters in a space built for mindful reading and give your inbox space to breathe. AD
|
Defer – Zero infrastructure Node.js background jobs with a full-featured API.
|
|
WeWeb – A no-code front-end builder that you can use to build production-grade apps on top of any back end.
|
Tech Brew – A 3-times-a-week newsletter with the latest tech news impacting you and your future. AD
|
|
MadNotes – Chrome extension that adds a minimal Markdown-based notepad to your new tab.
|
Logspot – A web analytics service for you and your customers, to help you make data-driven decisions.
|
|
|
A Tweet for Thought
Remember when buttons on web pages were made of simple rounded corners and subtle gradients? Pepperidge Farm remembers.
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...
If you prefer to buy stuff on a budget after prices go down (who doesn't?), you'll want to check out camelcamelcamel, an Amazon price tracker that monitors millions of products and alerts you when prices drop, which also includes a browser extension.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
