GSMLG Web

## Breakthrough of the Year A project that contributes to the JavaScript ecosystem and adds new dimensions and possibilities for further development. New concepts and ideas with excellent first realization and huge future potential. ### Solid A declarative, efficient, and flexible JavaScript library for building user interfaces. https://github.com/solidjs/solid Solid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun. ### Hoppscotch Open source API development ecosystem. https://github.com/hoppscotch/hoppscotch Run with ```bash docker run --rm --name hoppscotch -p 3000:3000 hoppscotch/hoppscotch:latest ``` ### Web3.js Ethereum JavaScript API https://github.com/ChainSafe/web3.js This is the Ethereum [JavaScript API](http://web3js.readthedocs.io/) which connects to the [Generic JSON-RPC](https://github.com/ethereum/wiki/wiki/JSON-RPC) spec. You need to run a local or remote [Ethereum](https://www.ethereum.org/) node to use this library. ## The Most Exciting Use of Technology Unique and unconventional use of JavaScript: a mix of original software and technologies that make the language shine and boost the development. ### Partytown Relocate resource intensive third-party scripts off of the main thread and into a web worker. https://github.com/BuilderIO/partytown Partytown is a lazy-loaded library to help relocate resource intensive scripts into a [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) , and off of the [main thread](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread) . Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker. The philosophy is that the main thread should be dedicated to your code, and any scripts that are not required to be in the [critical path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path) should be moved to a web worker. Main thread performance is, without question, more important than web worker thread performance. ### vanilla-extract Zero-runtime Stylesheets-in-TypeScript. https://github.com/seek-oss/vanilla-extract Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time. Basically, it’s [“CSS Modules](https://github.com/css-modules/css-modules) -in-TypeScript” but with scoped CSS Variables + heaps more. ### tRPC End-to-end typesafe APIs made easy. https://github.com/trpc/trpc tRPC allows you to easily build & consume fully typesafe APIs, without schemas or code generation. This is a full stack type system used in next.js. ### zx A tool for writing better scripts. https://github.com/google/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. ### Q.js Quantum computing in your browser. https://github.com/stewdio/q.js **Quantum, made easy.** Q is a quantum circuit simulator, drag-and-drop circuit editor, and powerful JavaScript library that runs right here in your web browser. There’s nothing to install and nothing to configure, so jump right in and experiment! Fire up the [Q editor](https://quantumjavascript.app/) , then tap and drag the pieces around to get a feel for how it works. It’s easy to use on both desktop and mobile devices. Made a mistake? Just tap the Undo button. ### Tauri Build smaller, faster, and more secure desktop applications with a web frontend. https://github.com/tauri-apps/tauri **Introduction** Tauri is a framework for building tiny, blazingly fast binaries for all major desktop platforms. Developers can integrate any front-end framework that compiles to HTML, JS and CSS for building their user interface. The backend of the application is a rust-sourced binary with an API that the front-end can interact with. The user interface in Tauri apps currently leverages [tao](https://docs.rs/tao) as a window handling library on macOS and Windows, and [gtk](https://gtk-rs.org/docs/gtk/) on Linux via the **Tauri-team** incubated and maintained [WRY](https://github.com/tauri-apps/wry) , which creates a unified interface to the system webview (and other goodies like Menu and Taskbar), leveraging WebKit on macOS, WebView2 on Windows and WebKitGTK on Linux. ## Fun Side Project of the Year Fun projects that would make you go “wow”, without specific purpose or logic, but interesting and entertaining. ### Gaze Detection Use machine learning in JavaScript to detect eye movements and build gaze-controlled experiences. https://github.com/charliegerard/gaze-detection Uses Tensorflow.js's [face landmark detection model](https://www.npmjs.com/package/@tensorflow-models/face-landmarks-detection) . This tool detects when the user looks right, left, up and straight forward. ### Big Heads Easily create characters for your projects. https://github.com/RobertBroersma/bigheads Generate avaters as a react component with a list of settings. ### Ossart Print your GitHub activity as an artwork. https://github.com/djyde/ossart This is a tool to generate your GitHub activity as an artwork. You can generate a near 6 years contribution map by any username, and then print it to an A4 paper and wrap it in a photo frame you bought yourself. ### Yoha A practical hand tracking engine. [GitHub - RobertBroersma/bigheads: Easily create characters for your projects](https://github.com/RobertBroersma/bigheads) Yoha is a hand tracking engine that is built with the goal of being a versatile solution in practical scenarios where hand tracking is employed to add value to an application. While ultimately the goal is to be a general purpose hand tracking engine supporting any hand pose, the engine evolves around specific hand poses that users/developers find useful. ## The Most Impactful Contribution Projects that contribute the most to the development and growth of the community. ### pnpm Fast, disk space efficient package manager. https://github.com/pnpm/pnpm Already used in work. ### Three.js journey Get good at Three.js with only one course. https://threejs-journey.com/# Start Learning with $95. 😄 ### Dev for Ukraine Devs For Ukraine was a free, online engineering conference with the goal to raise funds and provide support to Ukraine. https://www.devsforukraine.io/ Devs For Ukraine was a free, online engineering conference with the goal to raise funds and provide support to Ukraine. 🇺🇦 ### Medusa The open-source Shopify alternative. https://github.com/medusajs/medusa Medusa is an open source composable commerce engine built with Node.js. Medusa enables developers to build scalable and sophisticated commerce setups with low effort and great developer experience. ### Bytes.dev The Best JavaScript Newsletter. https://bytes.dev/ Staying informed on the JavaScript ecosystem has never been so entertaining. Delivered every Monday and Thursday, for free. ## Productivity Booster The best projects that improve the efficiency of the development work. ### Omni The all-in-one tool to supercharge your productivity. https://github.com/alyssaxuu/omni The most powerful interface for your browser 🔥 With Omni you can use your browser like a pro. Manage tabs, bookmarks, your browser history, perform all sorts of actions and more with a simple command interface. Browser plugin like Alfred in macOS. ### Amplication Amplication auto-generates backend apps built with TypeScript and Node.js, and a client built with React. https://github.com/amplication/amplication Amplication is an open‑source development platform. It helps professional Node.js developers build quality Node.js applications without spending time on repetitive coding tasks. Amplication provides the following features: * Production-ready APIs * Data Model * Role Based Access Control (RBAC) * Microservices Support * Continuous GitHub Sync * TypeScript and Node.js Source Code * Plugin System * Monorepo or Polyrepo * Custom Code * Admin UI * Amplication Console & CLI ### Zod TypeScript-first schema validation with static type inference. https://github.com/colinhacks/zod Zod is a TypeScript-first schema declaration and validation library. I’m using the term “schema” to broadly refer to any data type, from a simple string to a complex nested object. Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator *once* and Zod will automatically infer the static TypeScript type. It’s easy to compose simpler types into complex data structures. Some other great aspects: * Zero dependencies * Works in Node.js and all modern browsers * Tiny: 8kb minified + zipped * Immutable: methods (i.e. .optional()) return a new instance * Concise, chainable interface * Functional approach: [parse, don’t validate](https://lexi-lambda.github.io/blog/2019/11/05/parse-don-t-validate/) * Works with plain JavaScript too! You don’t need to use TypeScript. ### Hardhat Hardhat is a development environment to compile, deploy, test, and debug your Ethereum software. https://github.com/NomicFoundation/hardhat Hardhat is an Ethereum development environment for professionals. It facilitates performing frequent tasks, such as running tests, automatically checking code for mistakes or interacting with a smart contract. Check out the [plugin list](https://hardhat.org/plugins/) to use it with your existing tools.