Issue #507  (Observer Opts, Frameworks, AI Tools, Mobile)04/06/23

I previously covered a quick introduction to using the IntersectionObserver API, with a real-world example of recognizing paragraphs being scrolled into the viewport. I didn't cover much of the details on how you define an observer, but I thought I would briefly go over it here.

The main customizations you can make for an observer are inside the options object, which gets passed in as the second parameter. As a refresher, the basic code for the options object looks like this:

Technically all three of the options in the options object are optional, so you could leave the options object out altogether. If you do so, it would be equivalent to the values I've included above. And of course, you can name the options object whatever you want, but it's more useful to name it 'options' in line with what it does.

Here are what each of the options represent and how they affect the observer instance:

• root – This tells the observer what root element the observed element should be compared against. It can be any DOM element or even a Document object. If omitted, the root is the viewport of the document, which is the same as the value null. This value is specified to resolve as an object (i.e. no quotes).
• rootMargin – This is a string value that specifies up to four offsets, using CSS-like syntax, that represent top, left, bottom, and right margins. These offsets essentially allow you to shrink and grow the intersection area (defined by the root element) by the amounts specified on each margin. So if your root element is exactly 500px by 500px, a margin of 10px all around would technically trigger 'intersection' at 520 by 520px. A negative value would effectively shrink the viewport in a similar way.
• threshold – This value is a decimal value between 0.0 and 1.0 (similar to defining a CSS opacity value) that determines at what threshold the object is considered 'visible' in the intersection area (the root). A value of 0.0 means a single pixel inside the area triggers intersection (thus triggering the callback function). A value of 1.0 (which is like saying "100%") means the full element has to be visible inside the intersection area to trigger the callback.

Web Frameworks

Float UI
A set of 100+ responsive and accessible UI components with RTL support, built with React and Tailwind, along with 5 free templates.

PBandJ
An all-in-one tool to quickly create and publish a high-quality component library for React, taking care of tedious setup and ensuring best practices.

Start a Multi-language Blog
Hyvor Blogs is a blogging platform to start a multi-language blog. It comes with fully-customizable themes, custom domains, in-built SEO, and many features to make blogging easier.   SPONSORED  

Template
A simple JavaScript framework that uses JavaScript classes to manage HTML templates for creating interactive applications.

Precedent
An opinionated collection of accessibility-first components, hooks, and utilities for Next.js, powered by Tailwind CSS, Radix UI, and Framer Motion.

express-mongodb-rest-api-typescript-boilerplate
A boilerplate for Node.js apps, with a Rest API, authentication from scratch, powered by Express, MongoDB, and TypeScript.

Flowbite Admin Dashboard
An open-source UI admin dashboard template built with Flowbite and based on Tailwind, featuring charts, tables, widgets, CRUD layouts, modals, drawers, and more.

Ripple UI
A collection of 30+ components and utilities built on top of Tailwind CSS, with theming based on Radix UI Colors.

Horizon UI Chakra
A nice looking open-source admin template for Chakra UI and React.

Nuxt Storefront
A batteries-included, production-ready, headless, and open-source e-commerce template for Nuxt 3-powered storefronts.

starter-markdown
A Markdown starter project for Maizzle (the framework for building HTML emails with CSS utility classes) to generate HTML emails from Markdown files.

Anu
A developer-focused utility-based Vue component library built on top of UnoCSS and VueUse.

ChatGPT, AI Tools, etc.

Chatbox
A cross-platform desktop app for the ChatGPT API that's fast, data is stored locally, supports GPT-4, and more.

Chatbot UI
An open source clone of OpenAI's ChatGPT UI that allows you to plug in your API key to use this UI with the OpenAI one.

Awesome ChatGPT Prompts
A collection of prompt examples you can use with ChatGPT.

Web Weekly
If you're a front-end or full-stack web developer, and not subscribed to Stefan's newsletter, you're missing out! It's always packed with news, tips, and updates on front-end technologies, often including info you won't see anywhere else.   SPONSORED  

chatgpt-i18n
A TypeScript-based UI and utility to translate your locale JSON  files with AI assistance.

Microapp
An AI-powered component generator that lets you create and preview React and Tailwind components using AI by simply typing an word or phrase to describe what you want built.

Second
A.I. developer bots that can generate new web applications or add full-stack features to existing ones. Includes a simple free plan for founders and hobbyists.

ColorMagic
Enter a keyword or phrase and this tool will use AI to generate a color palette that matches what you want. Includes 5 free per day.

Cursor
Windows, Mac, and Linux app to write, edit, and chat about your code with a powerful AI.

Adrenaline
A UI you can use online or install locally to talk directly to your codebase like you would an expert, powered by static analysis, vector search, and large language models.

Auto-Photoshop-StableDiffusion-Plugin
A user-friendly plug-in that makes it easy to generate stable diffusion images inside Photoshop.

CommitAI
A GPT-3-based CLI that automatically generates commit messages based on the output of a Git diff.
 

React Native and Mobile Tools

react-native-select-pro
A React Native dropdown (select) component that's customizable, includes multi-select, is searchable, accessible, and has TypeScript support

Web Weekly
If you're a front-end or full-stack web developer, and not subscribed to Stefan's newsletter, you're missing out! It's always packed with news, tips, and updates on front-end technologies, often including info you won't see anywhere else.   SPONSORED  

react-native-animated-stopwatch-timer
A cross-platform React Native stopwatch/timer component that empowers reanimated worklets to smoothly animate the digit change.

React Native Echarts
React Native version of Apache Echarts, based on react-native-svg and react-native-skia, with better performance than webview-based solutions.
 
Tomorrow.js
A React Native ecosystem that provides a set of tools to help you build your app faster and easier. Like Next.js for React Native.

React Native Fiesta
A set of celebration and user engagement animations powered by Shopify's React Native Skia featuring fireworks, hearts, stars, emojis, and more.

Lottie Editor
A web-based editor that allows you to edit, tweak, and personalize your Lottie animations.

react-native-openai-jsx
Use OpenAI to generate functioning React Native components, based high-level descriptions that you provide.

React Native Bouncy Checkbox
A React Native component that adds fully customizable animated bouncy checkbox to your project.

Body Scroll Lock
A JavaScript utility that enables body scroll locking (e.g. for preventing scroll while focused inside a modal or fly-out menu) with support for iOS, Android, and desktop Safari, Chrome, and Firefox.

React Native Lens UI Kit
A React Native UI kit for Lens Protocol, a service for building decentralized social media apps.

react-simple-pull-to-refresh
A simple pull-to-refresh component for React with no dependencies, and works on mobile and desktop.
 

Commercial Apps and Classifieds

A Tweet for Thought

I don't know what you've personally accomplished this year but, chances are, Marc Grabanski's accomplishment is better!
   

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...

As you may have noticed, this issue is the first time I've included a category for AI/ChatGPT tools. I'll continue that in future issues but in harmony with that theme, check out RoomGPT, a website that lets you take a photo of a room and it will use AI to suggest improvements based on a selected theme. Includes 4 free credits when you sign up.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris