Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. Draft.js
Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.
facebookarchive / draft-js
A React framework for building text editors.
Draft.js
Status
THIS PROJECT IS CURRENTLY IN MAINTENANCE MODE. It will not receive any feature updates, only critical security bug patches. On 31st December 2022 the repo will be fully archived.
For users looking for an open source alternative, Meta have been working on migrating to a new framework, called Lexical. It's still experimental, and we're working on adding migration guides, but, we believe, it provides a more performant and accessible alternative.
Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.
- Extensible and Customizable: We provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from basic text styles to embedded media.
- Declarative Rich Text: Draft.js fits seamlessly into React applications abstracting away the details of rendering, selection, and input behavior with a familiar declarative API.
- Immutable Editor State: The Draft.js model is builtβ¦
2. PeerJS: Simple peer-to-peer with WebRTC
PeerJS provides a complete, configurable, and easy-to-use peer-to-peer API built on top of WebRTC, supporting both data channels and media streams.
PeerJS: Simple peer-to-peer with WebRTC
PeerJS provides a complete, configurable, and easy-to-use peer-to-peer API built on top of WebRTC, supporting both data channels and media streams.
Live Example
Here's an example application that uses both media and data connections: https://glitch.com/~peerjs-video. The example also uses its own PeerServer.
Special Announcement:
We now have a Discord Channel
There we plan to discuss roadmaps, feature requests, and more
Join us today
Setup
Include the library
with npm:
npm install peerjs
with yarn:
yarn add peerjs
// The usage -
import { Peer } from "peerjs";
Create a Peer
const peer = new Peer("pick-an-id");
// You can pick your own id or omit the id if you want to get a random one from the server.
Data connections
Connect
const conn = peer.connect("another-peers-id");
conn.on("open", ()
β¦3. Shoelace
A forward-thinking library of web components.
shoelace-style / shoelace
A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME πππ
Shoelace
A forward-thinking library of web components.
- Works with all frameworks π§©
- Works with CDNs π
- Fully customizable with CSS π¨
- Includes an official dark theme π
- Built with accessibility in mind βΏοΈ
- Open source πΈ
Designed in New Hampshire by Cory LaViska.
Documentation: shoelace.style
Source: github.com/shoelace-style/shoelace
Twitter: @shoelace_style
Shoemakers π₯Ύ
Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 14.17 to build and run the project locally.
You don't need to do any of this to use Shoelace! This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace.
If that's not what you're trying to do, the documentation website is where you want to be.
What are you using to build Shoelace?
Components are built with LitElement, a custom elements base classβ¦
4. JavaScript obfuscator
JavaScript Obfuscator is a powerful free obfuscator for JavaScript, containing a variety of features which provide protection for your source code.
javascript-obfuscator / javascript-obfuscator
A powerful obfuscator for JavaScript and Node.js
You can support this project by donating:
- (Github) https://github.com/sponsors/sanex3339
- (OpenCollective) https://opencollective.com/javascript-obfuscator
Huge thanks to all supporters!
JavaScript obfuscator
JavaScript Obfuscator is a powerful free obfuscator for JavaScript, containing a variety of features which provide protection for your source code.
Key features:
- variables renaming
- strings extraction and encryption
- dead code injection
- control flow flattening
- various code transformations
- and more...
The example of obfuscated code: github.com
Online version:
Plugins:
- Webpack plugin: webpack-obfuscator
- Webpack loader: obfuscator-loader
- Gulp: gulp-javascript-obfuscator
- Grunt: grunt-contrib-obfuscator
- Rollup: rollup-plugin-javascript-obfuscator
- Weex: weex-devtool
- Malta: malta-js-obfuscator
- Netlify plugin: netlify-plugin-js-obfuscator
- Snowpack plugin: snowpack-javascript-obfuscator
NOTE! the README on the master branch might not match that of the latest stable release!
If you have a question, check this section first: FAQ
β οΈ Important
Only obfuscate the code that belongs to you.
It is not recommended to obfuscate vendor scripts and polyfills, since the obfuscated code is 15-80% slower (depends on options) and the filesβ¦
5. Macintosh.js
This is Mac OS 8, running in an Electron app pretending to be a 1991 Macintosh Quadra. Yes, it's the full thing.
felixrieseberg / macintosh.js
π₯ A virtual Apple Macintosh with System 8, running in Electron. I'm sorry.
macintosh.js
This is Mac OS 8, running in an Electron app pretending to be a 1991 Macintosh Quadra. Yes, it's the full thing. I'm sorry.
Downloads
Windows |
32-bit
πΏ Installer
|
π¦ Standalone Zip
64-bit πΏ Installer | π¦ Standalone Zip β Don't know what kind of chip you have? Hit start, enter "processor" for info. |
macOS |
Intel Processor
π¦ Standalone Zip
Apple M1 Processor π¦ Standalone Zip β Don't know what kind of chip you have? Learn more at apple.com. |
Linux |
32-bit
πΏ rpm
|
πΏ deb
64-bit πΏ rpm | πΏ deb ARM64 πΏ rpm | πΏ deb ARMv7 (armhf) πΏ rpm | πΏ deb β Don't know what kind of chip you have? Run `uname -m` in the console. |
Does it work?
Yes! Quite well, actually - on macOS, Windows, and Linux. Bear in mind that this is written entirely in JavaScript, so please adjust yourβ¦
6. Formik
Build forms in React, without the tears.
jaredpalmer / formik
Build forms in React, without the tears π
Build forms in React, without the tears
Visit https://formik.org to get started with Formik.
Organizations and projects using Formik
List of organizations and projects using Formik
Authors
- Jared Palmer @jaredpalmer
- Ian White @eonwhite
Contributing
This monorepo uses yarn
, so to start you'll need the package manager installed.
To run E2E tests you'll also need Playwright set up, which can be done locally via npx playwright install
. Afterward, run yarn start:app
and in a separate tab run yarn e2e:ui
to boot up the test runner.
When you're done with your changes, we use changesets to manage release notes. Run yarn changeset
to autogenerate notes to be appended to your pull request.
Thank you!
Contributors
Formik is made with <3 thanks to these wonderful people (emoji key):
7. Awesome Profile README templates
The aim of this repository is to collect awesome READMEs that developers around the world are using on their own profiles to act as an inspiration for others.
kautukkundan / Awesome-Profile-README-templates
A collection of awesome readme templates to display on your profile
The aim of this repository is to collect awesome READMEs that developers around the world are using on their own profiles to act as an inspiration for others. Video about GitHub Profile README
Feel free to add your own or someone else's profile README if you find it super awesome!
Don't forget to leave a if you find this repo useful β
Thankyouπ
8. Docsify
A magical documentation site generator.
A magical documentation site generator
Gold Sponsor via Open Collective
Docsify turns one or more Markdown files into a Website, with no build process required.
Features
- No statically built html files
- Simple and lightweight
- Smart full-text search plugin
- Multiple themes
- Useful plugin API
- Emoji support
Quick Start
Get going fast by using a static web server or GitHub Pages with this ready-to-use Docsify Template, review the quick start tutorial or jump right into a CodeSandbox example site with the button below.
Showcase
A large collection of showcase projects are included in awesome-docsify.
Links
- Documentation
- Docsify CLI (Command Line Interface)
- CDN: UNPKG | jsDelivr | cdnjs
develop
branch preview- Awesome docsify
- Community chat
Contributing
See CONTRIBUTING.md.
Backers
Thank you to all our backers! π [Become a backer]
Sponsors
Thank you for supporting this project! β€οΈ [Become a sponsor]
Contributors
This project exists thanks toβ¦
9. Nerd Fonts
Nerd Fonts is a project that patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as Font Awesome, Devicons, Octicons, and others.
ryanoasis / nerd-fonts
Iconic font aggregator, collection, & patcher. 3,600+ icons, 50+ patched fonts: Hack, Source Code Pro, more. Glyph collections: Font Awesome, Material Design Icons, Octicons, & more
ReleasesΒ Β Β |Β Β Β FontsΒ Β Β |Β Β Β Font PatcherΒ Β Β |Β Β Β Wiki DocumentationΒ Β Β |Β Β Β StickersΒ Β Β |Β Β Β VimDevIcons
Nerd Fonts is a project that patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as Font Awesome, Devicons, Octicons, and others.
The following flow diagram shows the current glyph sets included:
Diagram created using @SankeyMATIC
Important Notices
-
master
branch file paths are not considered stable. Verify your repository URI references - cloning this repository is not recommended (due to Repo size) unless you are going to be contributing to development
Table of Contents
10. html2canvas
The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser.
niklasvh / html2canvas
Screenshots with JavaScript
html2canvas
Homepage | Downloads | Questions
JavaScript HTML renderer
The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
How does it work?
The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.
It does not require any rendering from the server, as the whole image is created on the client's browser. However, as it is heavily dependent on the browser, this library is not suitable to be used in nodejs It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxyβ¦
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 (10)
Awesome post as usual,
Thanks,
Thanks Thinh, glad you enjoy the series. I enjoy creating it, so many great projects out there!
Great and very useful post!!! Thanks a lot Iain!
Thank you SebastiΓ‘n. It is a great series to research and publish each week
I appreciate your work. we probably need these, thanks!
Thank you, appreciated
awesomeοΌsaved.
Thank you εε΄
Awesome stuff! there's always the hidden gem in these posts.
Thanks a bunch.
The hidden gems are always the best ones! Glad you found it useful