FE-Note

Personal front notes and Resources

This is a personal front notes and include list of various development resources as below that can be helpful in different areas of software development.

Assets

• Fonts:
  • https://fonts.google.com/
• Icons:
  • https://boxicons.com/
  • https://www.iconfont.cn/
  • https://www.reshot.com/free-svg-icons/
• Images:
  • https://www.freepik.com/
  • https://www.pexels.com/zh-cn/
  • https://www.shopify.com/stock-photos

UI Framework

• ant-design: A comprehensive UI framework for building elegant and responsive user interfaces.
• MUI: Move faster with intuitive React UI tools. Follow your own design system, or start with Material Design (Material UI).
• shadcnui

Chart

• echart
• highcharts
• d3

Maps

• mapbox: Utilize the Mapbox.js library for interactive maps.
• turfjs: Perform advanced geospatial analysis with Turf.js.
• jsts:JSTS is an ECMAScript library of spatial predicates and functions for processing geometry conforming to the Simple Features Specification for SQL published by the Open Geospatial Consortium.

Webgl

• three.js
• Babylon.js
• react-three-fiber
• drei: A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber.
• react-babylonjs
• swissgl: SwissGL is a minimalistic wrapper on top of WebGL2 JS API.

Performance

• million.js: Optimize react performance.
• vue-virtual-scroller: Blazing fast scrolling of any amount of data
• recyclerlistview: recyclerlistview for react-native.
• virtual: Headless UI for virtualizing scrollable elements in TS/JS and React.
• react-infinite-scroller: Infinitely load a grid or list of items in React. This component allows you to create a simple, lightweight infinite scrolling page or element by supporting both window and scrollable elements.
• react-lazyload: Lazyload your Components, Images or anything matters the performance.
• flash-list: recycle list for react-native,Fast & performant React Native list. No more blank cells. Swap from FlatList in seconds. Get instant performance.
• react-native-largelist: React-native-largelist is a very high performance large list component for React-Native. (iOS & Android)

Mobile

• React Native
• uni-app
• unity

Other

• next.js: Next.js is a React framework for building full-stack web applications.
• langchainjs: Building applications with LLMs through composability.
• bun: Bun is an all-in-one toolkit for JavaScript and TypeScript apps. It ships as a single executable called bun​.
• wouter: wouter is a tiny router for modern React and Preact apps that relies on Hooks. A router you wanted so bad in your project!
• Pake: Turn any webpage into a desktop app with Rust with ease, Nearly 20 times smaller than an Electron package (around 5M!).
• htmx: htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.
• xstate: XState is a state management and orchestration solution for JavaScript and TypeScript apps.
• pixijs: This project aims to provide a fast, lightweight 2D library that works across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast.
• auto.js

Tools

• git-cz: Simplify your Git commit messages using Git-cz.
• qs: A querystring parsing and stringifying library with some added security.
• css-protips: A collection of tips to help take your CSS skills pro.
• javascript-style: Airbnb JavaScript Style Guide.
• zx: Bash is great, but when it comes to writing more complex scripts, many people prefer a more convenient programming language. JavaScript is a perfect choice, but the Node.js standard library requires additional hassle before using. The zx package provides useful wrappers around child_process, escapes arguments and gives sensible defaults.
• developerFolio: A clean, beautiful and responsive portfolio template for Developers!
• planka: Elegant open source project tracking.