Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. Design resources for developers
Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more.
bradtraversy
/
design-resources-for-developers
Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more
Please read contributing guidelines before submitting new resources.
Table of Contents
- UI Graphics
- Fonts
- Colors
- Icons
- Logos
- Favicons
- Icon Fonts
- Stock Photos
- Stock Videos
- Stock Music & Sound Effects
- Vectors & Clip Art
- Product & Image Mockups
- HTML & CSS Templates
- CSS Frameworks
- CSS Methodologies
- CSS Animations
- Javascript Animation Libraries
- Javascript Chart Libraries
- UI Components & Kits
- React UI Libraries
- Vue UI Libraries
- Angular UI Libraries
- Svelte UI Libraries
- React Native UI Libraries
- Design Systems & Style Guides
- Online Design Tools
- Downloadable Design Software
- Design Inspiration
- Image Compression
- Chrome Extensions
- Firefox Extensions
- AI Graphic Design Tools
- Others
UI Graphics
Websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI
| Website | Description |
|---|---|
| SVG sine waves | Export perfect sine waves as SVG for your front-end projects |
| UI Design Daily | Awesome UI Components of all types |
| 100 Daily UI |
2. Alpine.js
Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit.Think of it like Tailwind for JavaScript.
Alpine.js
Go to the Alpine docs for most things: Alpine Docs
You are welcome to submit updates to the docs by submitting a PR to this repo. Docs are located in the /packages/docs directory.
Stay here for contribution-related information.
Looking for V2 docs? here they are
Contribution Guide:
Quickstart
- clone this repo locally
- run
npm install&npm run build - Include the
/packages/alpinejs/dist/cdn.jsfile from a<script>tag on a webpage and you're good to go!
Brief Tour
You can get everything installed with: npm install in the root directory of this repo after cloning it locally.
This repo is a "mono-repo" using npm workspaces for managing the packages. Each package has its own folder in the /packages directory.
Rather than having to run separate builds for each package, all package bundles are handled with the same command: npm run build
Here's a brief look at each package in this…
3. RSSHub
RSSHub is an open source, easy to use, and extensible RSS feed aggregator, it's capable of generating RSS feeds from pretty much everything.
RSSHub
🧡 Everything is RSSible
Introduction
RSSHub is the world's largest RSS network, consisting of over 5,000 global instances.
RSSHub delivers millions of contents aggregated from all kinds of sources, our vibrant open source community is ensuring the deliver of RSSHub's new routes, new features and bug fixes.
Documentation | Telegram Group | Telegram Channel | X (Twitter)
Related Projects
- RSSHub Radar | A browser extension that can help you quickly discover and subscribe to the RSS and RSSHub of current websites.
- RSSBud | RSSHub Radar for iOS platform, designed specifically for mobile ecosystem optimization.
- RSSAid | RSSHub Radar for Android platform built with Flutter.
- DocSearch | Link RSSHub DocSearch into Raycast
Contribute
We welcome all pull requests. Suggestions and feedback are also welcomed here.
Refer to Quick Start
Deployment
Refer to Deployment
Special Thanks
Author
4. selectize.js
Selectize is an extensible jQuery-based custom UI control. It's useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable experience with a clean and powerful API.
selectize
/
selectize.js
Selectize is the hybrid of a textbox and <select> box. It's jQuery based, and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
selectize.js
→ Selectize is looking for new members on the maintenance team!
Selectize is an extensible jQuery-based custom <select>; UI control. It's useful for tagging, contact lists, country selectors, and so on. The goal is to provide a solid & usable experience with a clean and powerful API.
Features
- Smart Option Searching / Ranking Options are efficiently scored and sorted on-the-fly (using sifter). Want to search for an item's title and description? No problem.
- Caret between items Order matters sometimes. Use the ← and → arrow keys to move between selected items.
- Select & delete multiple items at once Hold down option on Mac or ctrl on Windows to select more than one item to delete.
- Díåcritîçs supported Great for international environments.
- Item creation Allow users to create items on the fly (async saving is supported; the control locks until the callback is…
5. TSDX
Setting up a new TypeScript (x React) library can be tough. Between Rollup, Jest, tsconfig, Yarn resolutions, ESLint, and getting VSCode to play nicely....there is just a whole lot of stuff to do (and things to screw up). TSDX is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease--so you can focus on your awesome new library and not waste another afternoon on the configuration.
jaredpalmer
/
tsdx
Zero-config CLI for TypeScript package development
Despite all the recent hype, setting up a new TypeScript (x React) library can be tough. Between Rollup, Jest, tsconfig, Yarn resolutions, ESLint, and getting VSCode to play nicely....there is just a whole lot of stuff to do (and things to screw up). TSDX is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease--so you can focus on your awesome new library and not waste another afternoon on the configuration.
6. wa-automate-nodejs (WhatsApp)
The most advanced NodeJS WhatsApp library for chatbots with advanced features. wa-automate-nodejs is the most advanced NodeJS library which provides a high-level API to control WhatsApp.
open-wa
/
wa-automate-nodejs
💬 🤖 The most reliable tool for chatbots with advanced features. Be sure to 🌟 this repository for updates!
Warning
By visiting this page you explicitly agree to the Terms of Service (read here)
wa-automate-nodejs
wa-automate-nodejs is the most advanced NodeJS library which provides a high-level API to control WA.
Key Features • Getting Started • Easy API • Documentation • Get a License Key • Support
Installation and Updating
Use this command to install the library for the first time and to keep the library up to date.
> npm i --save @open-wa/wa-automate@latest
Usage
CLI
Want to convert your WA account to an API instantly? You can now with the CLI. For more details see Easy API
> npx @open-wa/wa-automate --help
Custom Setup
Learn more about all possible configuration options here: ConfigObject
const wa = require('@open-wa/wa-automate');
wa.create({
sessionId: "COVID_HELPER",
multiDevice: true, //required to enable multiDevice support
authTimeout: 60, //wait only 60 seconds to get…7. TypeORM
TypeORM is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms and can be used with TypeScript and JavaScript. Its goal is to always support the latest JavaScript features and provide additional features that help you to develop any kind of application that uses databases - from small applications with a few tables to large scale enterprise applications with multiple databases.
typeorm
/
typeorm
ORM for TypeScript and JavaScript. Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.
TypeORM is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms and can be used with TypeScript and JavaScript (ES2021) Its goal is to always support the latest JavaScript features and provide additional features that help you to develop any kind of application that uses databases - from small applications with a few tables to large-scale enterprise applications with multiple databases.
TypeORM supports both Active Record and Data Mapper patterns unlike all other JavaScript ORMs currently in existence which means you can write high-quality, loosely coupled, scalable, maintainable applications in the most productive way.
TypeORM is highly influenced by other ORMs, such as Hibernate, Doctrine and Entity Framework.
Features
- Supports both DataMapper and ActiveRecord (your choice).
- Entities and columns.
- Database-specific column types.
- Entity manager.
- Repositories and custom repositories.
- Clean object-relational model.
- Associations (relations).
- Eager and lazy relations.
- Uni-directional, bi-directional…
8. Zustand
Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn't boilerplatey or opinionated, but still just enough to be explicit and flux-like.
A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.
Don't disregard it because it's cute. It has quite the claws, lots of time was spent dealing with common pitfalls, like the dreaded zombie child problem, react concurrency, and context loss between mixed renderers. It may be the one state-manager in the React space that gets all of these right.
You can try a live demo here.
npm i zustand
First create a store
Your store is a hook! You can put anything in it: primitives, objects, functions. State has to be updated immutably and the set function merges state to help it.
import { create } from 'zustand'
const…9. jsQR
A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.
cozmo
/
jsQR
A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.
jsQR
A pure javascript QR code reading library This library takes in raw images and will locate, extract and parse any QR code found within.
Installation
NPM
Available on npm. Can be used in a Node.js program or with a module bundler such as Webpack or Browserify.
npm install jsqr --save
// ES6 import
import jsQR from "jsqr";
// CommonJS require
const jsQR = require("jsqr");
jsQR(...);
Browser
Alternatively for frontend use jsQR.js can be included with a script tag
<script src="jsQR.js"></script>
<script>
jsQR(...);
</script>
A note on webcams
jsQR is designed to be a completely standalone library for scanning QR codes. By design it does not include any platform specific code. This allows it to just as easily scan a frontend webcam stream…
10. joi
The most powerful schema description language and data validator for JavaScript.
joi
The most powerful schema description language and data validator for JavaScript.
Installation
npm install joi
Visit the joi.dev Developer Portal for tutorials, documentation, and support
Useful resources
Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (4)
Brad Travery's work is always excellent!
Alpine looks very interesting. With the advent of -data- attributes, they may be onto something. This snippet shows their design well.
Notice that the GUI is only concerned with GUI State, whereAs the x-data is used to tie in the event handlers. Pretty cool...
Thanks Iain!
I am also excited to dig into Alpine looks like an awesome project.
Brad Traversy YouTube channel is brilliant, I was a bit sad to see that he will be stepping back from the camera for a while. Hopefully the channel will continue to grow under his guidance.
Great! I also made such list but for react localization and i18n libraries 📦
dev.to/jpomykala/top-12-libraries-...
:D
Some comments may only be visible to logged-in visitors. Sign in to view all comments.