✨2023#15: Unlazy: Universal Lazy Loading
Tags: webdev, javascript, typescript, node
Published: 2023-04-19 17:31:00

Hi JS developers👋
[JSTools Weekly](https://jstools.substack.com/) newsletter, issue [2023#15](https://jstools.substack.com/p/2023-newjstools-15) (top new JS releases) just released.

[See full list of new javascript tools](https://jstools.substack.com/p/2023-newjstools-15)

![JSTools Weekly - issue 2023#15 - new js tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqszwjz5ni9qol01n1wn.png)

[**unlazy**](https://github.com/johannschopplich/unlazy)**:** 🪧 Universal lazy loading library for placeholder images leveraging native browser APIs

[![unlazy library](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F706eedc7-317f-44d9-898f-e036192ad213_2400x1260.jpeg "unlazy library")](https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F706eedc7-317f-44d9-898f-e036192ad213_2400x1260.jpeg)

[source](https://github.com/johannschopplich/unlazy)

-   🎀 **Native**: Utilizes the `loading="lazy"` attribute

-   🎛️ **Framework-agnostic**: Works with any framework or no framework at all

-   🌊 **BlurHash support**: SSR & Client-Side BlurHash Decoding

-   🪄 **Sizing**: Automatically calculates the `sizes` attribute

-   🔍 **SEO-friendly**: Detects search engine bots and preloads all images

-   🎟 `<picture>`: Supports multiple image tags

-   🏎 **Auto-initialize**: Usable without a build step

[**jscanify**](https://github.com/ColonelParrot/jscanify)**:** Open-source Javascript mobile document scanner.

-   paper detection & highlighting

-   paper scanning with distortion correction

[**strz**](https://github.com/dilan-dio4/strz)**:** 💪 Very strongly typed string functions in TypeScript

[**vue-c2c**](https://github.com/webfansplz/vue-c2c)**:** Transforming Vue components to composable functions

[![vue-c2c](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F93f8c813-6f81-4dd5-a1bc-80ad2d612d6c_903x589.png "vue-c2c")](https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F93f8c813-6f81-4dd5-a1bc-80ad2d612d6c_903x589.png)

[source](https://github.com/webfansplz/vue-c2c)

[**vue-reuse-template**](https://github.com/antfu/vue-reuse-template)**:** Define and reuse Vue template inside the component scope.

[**next-zod-router**](https://github.com/steelydylan/next-zod-router)**:** Zod driven simple method routing for Next.js

-   Type-safe API routing

-   Type-safe API call

-   Validation using zod

-   Error handling

-   Type definition file generation for client-side use

-   Middleware support

[**telegram-chatgpt-concierge-bot**](https://github.com/RafalWilinski/telegram-chatgpt-concierge-bot)**:** Interact with OpenAI's ChatGPT via Telegram and Voice.

[**ai-legion**](https://github.com/eumemic/ai-legion)**:** An LLM-powered autonomous agent platform

[**autogpt-gui**](https://github.com/thecookingsenpai/autogpt-gui)**:** A graphical user interface for AutoGPT

[**ai-brainstore**](https://github.com/mckaywrigley/ai-brainstore)**:** A proof-of-concept of a brain for an AI agent.

[**babyagijs**](https://github.com/ericciarla/babyagijs)**:** AI-powered task management system in Javascript

-   Task creation: Generates new tasks based on the current context and objectives.

-   Task prioritization: Reorders tasks according to their importance and relevance to the main objective.

-   Task execution: Performs tasks and returns results.

[**babyagi-ts**](https://github.com/context-labs/babyagi-ts)**:** A CLI tool for creating and managing BabyGI agents

[**gptrpg**](https://github.com/dzoba/gptrpg)**:** A demo of an GPT-based agent existing in an RPG-like environment

[**gpt-assistant**](https://github.com/BuilderIO/gpt-assistant)**:** An experiment to give an autonomous GPT agent access to a browser and have it accomplish tasks

[![Gif example](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fab79e998-021e-457e-895c-2792ba60c013_800x517.gif "Gif example")](https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fab79e998-021e-457e-895c-2792ba60c013_800x517.gif)

[source](https://github.com/BuilderIO/gpt-assistant)

[**nextjs-chatgpt-plugin-starter**](https://github.com/dabit3/nextjs-chatgpt-plugin-starter)**:** ChatGPT plugin starter project using Next.js

[**langchain-pdf-qa**](https://github.com/bdcorps/langchain-pdf-qa)**:** use a local PDF/text file to ask questions and generate asnwers.

[**weathergpt**](https://github.com/steven-tey/weathergpt)**:** WeatherGPT is a ChatGPT Plugin to get the weather of any given location.

[![CleanShot 2023-04-13 at 13 16 45](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85ddd817-c1b3-41ea-9995-79bf7538a933_920x677.png "CleanShot 2023-04-13 at 13 16 45")](https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F85ddd817-c1b3-41ea-9995-79bf7538a933_920x677.png)

[source](https://github.com/steven-tey/weathergpt)

[**superpower-chatgpt**](https://github.com/saeedezzati/superpower-chatgpt)**:** Superpower ChatGPT Chrome Extension

[**zod-chatgpt**](https://github.com/olup/zod-chatgpt)**:** use of zod and openai's chatgpt to generate formatted, typed, consistent output

[**ethgpt**](https://github.com/jiayaoqijia/ethgpt)**:** Chatbot for Ethereum codebase and docs.

[**yaml-runner**](https://github.com/mbusigin/yaml-runner)**:** yaml-runner is a command-line tool that automates the execution of tasks based on instructions defined in YAML files.

[**autoheal**](https://github.com/dion-/autoheal)**:** AutoGPT Agent which automatically fixes your tests. GPT-powered TDD.

[![Autoheal Logo](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc12cf7d9-3675-4aeb-a53c-6cba50463400_1199x508.png "Autoheal Logo")](https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc12cf7d9-3675-4aeb-a53c-6cba50463400_1199x508.png)

[source](https://github.com/dion-/autoheal)

[**flowgpt**](https://github.com/nilooy/flowgpt)**:** Generate diagram with AI

[**SQLiteGPT**](https://github.com/Airsequel/SQLiteGPT)**:** SQL function for SQLite to directly query OpenAI's ChatGPT

[**liquery**](https://github.com/haxtra/liquery)**:** Powerful search, tagging, filtering and sorting via simple text query language, for SQLite databases

[See full list of new javascript tools](https://jstools.substack.com/p/2023-newjstools-15)