DEV Community

Iain Freestone
Iain Freestone

Posted on

🚀10 Trending projects on GitHub for web developers - 7th January 2022

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. Shifty

The fastest JavaScript animation engine on the web. Shifty is a tweening engine for JavaScript. It is a lightweight library meant to be encapsulated by higher level tools.

GitHub logo jeremyckahn / shifty

The fastest TypeScript animation engine on the web

Shifty - The fastest TypeScript animation engine on the web

Current Shifty version

  • main: CI

Shifty is a tweening engine for TypeScript. It is a lightweight library meant to be encapsulated by higher level tools. At its core, Shifty provides:

  • Best-in-class animation performance
  • Playback control of an individual tween
  • Extensibility hooks for key points in the tween lifecycle
  • Promise support for async/await programming

This is useful because it is the least amount of functionality needed to build customizable animations. Shifty is optimized to run with the minimal processing and memory overhead.

import { tween } from 'shifty'
;(async () => {
  const element = document.querySelector('#tweenable')
  const { tweenable } = await tween({
    render: ({ scale, x }) => {
      element.style.transform = `translateX(${x}px) scale(${scale})`
    },
Enter fullscreen mode Exit fullscreen mode

2. readme.so

An online drag-and-drop editor to easily build READMEs

GitHub logo octokatherine / readme.so

An online drag-and-drop editor to easily build READMEs

readme.so

Readme.so is an online editor to help developers make readmes for their project.

Link to production site: readme.so

Features

  • Choose from list of sections to add to your readme
  • Edit the contents of each section
  • Drag and drop to rearrange sections
  • Download your readme file

Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

Tech Stack

Running the Dev Server

To run the dev server, run npm run dev and navigate to localhost:3000

Feedback

Feedback is appreciated! Reach out on Twitter or submit a new issue!

License

MIT

This readme was created with readme.so :)





3. Epub.js

Epub.js is a JavaScript library for rendering ePub documents in the browser, across many devices.

GitHub logo futurepress / epub.js

Enhanced eBooks in the browser.

Epub.js v0.3

FuturePress Views

Epub.js is a JavaScript library for rendering ePub documents in the browser, across many devices.

Epub.js provides an interface for common ebook functions (such as rendering, persistence and pagination) without the need to develop a dedicated application or plugin. Importantly, it has an incredibly permissive Free BSD license.

Try it while reading Moby Dick

Why EPUB

Why EPUB

The EPUB standard is a widely used and easily convertible format. Many books are currently in this format, and it is convertible to many other formats (such as PDF, Mobi and iBooks).

An unzipped EPUB3 is a collection of HTML5 files, CSS, images and other media – just like any other website. However, it enforces a schema of book components, which allows us to render a book and its parts based on a controlled vocabulary.

More specifically, the EPUB schema standardizes the table of contents, provides a manifest that enables the caching…


4. Amplify UI

Amplify UI is an open-source UI library with cloud-connected components that are endlessly customizable, accessible, and can integrate into any application.

GitHub logo aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.

AWS Amplify Logo AWS Amplify


Amplify UI logo

Amplify UI

GitHub Discord Open Bugs Feature Requests GA milestone

Amplify UI is an open-source UI library with cloud-connected components that are endlessly customizable, accessible, and can integrate into any application. Amplify UI consists of:

  1. Connected components that simplify complex cloud-connected workflows, like Authenticator.
  2. Primitive components that create consistency across Amplify UI and allow you to build complete applications that fit your brand, like Buttons and Badges.
  3. Data-bound components that make it easy to display dynamic data, like DataStoreCollections.
  4. Theming capabilities that allow you to customize the appearance of Amplify UI to match your brand.

Documentation

Getting started

Component Matrix

Connected Components React React Native Angular Vue
Authenticator
In-App Messaging
Geo (MapView)
Account Settings
Storage (FileUploader)
Storage (StorageImage)
Liveness (FaceLivenessDetector)
Primitives React Angular Vue
Alert
Autocomplete
Badge
Button
Card
CheckboxField

5. projen

A new generation of project generators. projen synthesizes project configuration files such as package.json, tsconfig.json, .gitignore, GitHub Workflows, eslint, jest, etc from a well-typed definition written in JavaScript.

GitHub logo projen / projen

Rapidly build modern applications with advanced configuration management

projen

Define and maintain complex project configuration through code

Documentation · Changelog · Project types · Join the community

Apache 2.0 License Gitpod ready-to-code Release badge Commit activity

projen synthesizes project configuration files such as package.json, tsconfig.json, .gitignore, GitHub Workflows, eslint, jest, etc. from a well-typed definition written in JavaScript.

As opposed to existing templating/scaffolding tools, projen is not a one-off generator. Synthesized files should never be manually edited (in fact, projen enforces that). To modify your project setup, users interact with rich strongly-typed class and execute projen to update their project configuration files.

By defining a custom project type and using projen in multiple repositories, it's possible to update configuration files and CI/CD workflows across dozens (or hundreds!?) of projects.

Check out this talk about projen from its creator.

Getting Started

projen doesn't need to be installed. You will be using npx to run projen which takes care of all required setup steps.

To create…


6. tsup

The simplest and fastest way to bundle your TypeScript libraries.

GitHub logo egoist / tsup

The simplest and fastest way to bundle your TypeScript libraries.

tsup

npm version npm downloads

Bundle your TypeScript library with no config, powered by esbuild.

👀 What can it bundle?

Anything that's supported by Node.js natively, namely .js, .json, .mjs. And TypeScript .ts, .tsx. CSS support is experimental.

⚙️ Install

Install it locally in your project folder:

npm i tsup -D
# Or Yarn
yarn add tsup --dev
# Or pnpm
pnpm add tsup -D
Enter fullscreen mode Exit fullscreen mode

You can also install it globally but it's not recommended.

📖 Usage

Bundle files

tsup [...files]
Enter fullscreen mode Exit fullscreen mode

Files are written into ./dist.

You can bundle multiple files in one go:

tsup src/index.ts src/cli.ts
Enter fullscreen mode Exit fullscreen mode

This will output dist/index.js and dist/cli.js.

📚 Documentation

For complete usages, please dive into the docs.

For all configuration options, please see the API docs.

💬 Discussions

Head over to the discussions to share your ideas.

Sponsors

Ship UIs faster with automated workflows for Storybook

sponsors

Project Stats

Alt

License

MIT © EGOIST







7. Sakura

A minimal classless css framework / theme. Sakura supports extremely easy theming support using variables for duotone color scheming.

GitHub logo oxalorg / sakura

🌸 a minimal css framework/theme.

sakura: a minimal, classless CSS framework / theme.

npm

[Go to GitHub repository]

The cherry blossoms

The perfect blossom is a rare thing. You could spend your life looking for one, and it would not be a wasted life.

Just drop sakura.css into any webpage and go from an ugly-looking 1900s website to a pretty, modern website in literally 0 seconds.

It's easy to customize and build on top of sakura.

Sakura supports extremely easy theming using variables for duotone color scheming. It comes with several existing themes, which can be found in the css folder of this repository.

Demo

Compare a live page WITH and WITHOUT sakura.

Also, my blog is a nice place to check sakura in action with heavy text (it has a "change theme" button on the top as well):

Bookmark

Don't want to develop using sakura but instead want to use it on websites…


8. Visual Studio Code Remote Development and GitHub Codespaces

A repository of development container definitions for the VS Code Remote - Containers extension and GitHub Codespaces

GitHub logo microsoft / vscode-dev-containers

NOTE: Most of the contents of this repository have been migrated to the new devcontainers GitHub org (https://github.com/devcontainers). See https://github.com/devcontainers/template-starter and https://github.com/devcontainers/feature-starter for information on creating your own!

IMPORTANT NOTE: Dev containers have a new, expanded home in the dev containers GitHub org! We're so excited to connect with you there. To learn more, you can check out our migration announcement.

This repository is no longer active and was archived in November 2023. We've migrated most of the contents of this repo to the devcontainers GitHub org, as part of the work on the open Dev Container specification.

  • Features managed by the Dev Container spec maintainers (such as the VS Code team) are now in devcontainers/features.
  • Definitions/Templates managed by the Dev Container spec maintainers are now in devcontainers/templates.
  • mcr.microsoft.com/devcontainers and mcr.microsoft.com/vscode/devcontainers images are now published from devcontainers/images.

For new Templates/Features, you can now self-publish and optionally make them visible in-tool by following the steps one of the quick start repositories: Templates quick start, Features quick start. No need to


9. A-Frame

A web framework for building virtual reality experiences.

GitHub logo aframevr / aframe

🅰️ Web framework for building virtual reality experiences.

A-Frame

A-Frame

A web framework for building virtual reality experiences.

Coverage Status Downloads Version License

SiteDocsSchoolSlackBlogNewsletter

Examples


Supercraft


A-Painter


Supermedium


A-Blast


A-Saturday-Night


Musical Forest by @googlecreativelab

Find more examples on the homepage, A Week of A-Frame, and WebVR Directory.

Features

👓 Virtual Reality Made Simple: A-Frame handles the 3D and WebXR boilerplate required to get running across platforms including mobile, desktop, and all headsets (compatible with a WebXR capable browser) just by dropping in <a-scene>.

❤️ Declarative HTML: HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR and AR enthusiasts, educators, artists, makers, kids.

🔌 Entity-Component Architecture: A-Frame is a powerful framework on top of three.js, providing a declarative, composable, reusable entity-component structure for three.js. While A-Frame can be used from HTML, developers have unlimited access to JavaScript, DOM APIs, three.js, WebXR, and WebGL.

⚡…


10. Tippy.js

The complete tooltip, popover, dropdown, and menu solution for the web

GitHub logo atomiks / tippyjs

Tooltip, popover, dropdown, and menu library

Tippy.js logo

Tippy.js

The complete tooltip, popover, dropdown, and menu solution for the web

npm Downloads per Month MIT License

Demo and Documentation

➡️ View the latest demo & docs here

Migration Guide

Installation

Package Managers

# npm
npm i tippy.js

# Yarn
yarn add tippy.js
Enter fullscreen mode Exit fullscreen mode

Import the tippy constructor and the core CSS:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
Enter fullscreen mode Exit fullscreen mode

CDN

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
Enter fullscreen mode Exit fullscreen mode

The core CSS comes bundled with the default unpkg import.

Usage

For detailed usage information, visit the docs.

Component Wrappers

License

MIT





Stargazing 📈

Top risers over last 7 days🔗

  1. Basic Computer Games +1,371 stars
  2. Awesome +1,232 stars
  3. Awesome Self Hostsed +795 stars
  4. Tauri +646 stars
  5. Free Programming Books +617stars

Top growth(%) over last 7 days🔗

  1. Basic Computer Games +69%
  2. MindAR +58%
  3. scroll-snap +43%
  4. fresnel +16%
  5. fuite +10%

Top risers over last 30 days🔗

  1. Tabby +6,033 stars
  2. Awesome +4,444 stars
  3. Free Programming Books +3,747 stars
  4. Awesome Self Hostsed +3,723 stars
  5. JavaScript Algorithms +3,311 stars

Top growth(%) over last 30 days🔗

  1. Pico +400%
  2. Rakkas +141%
  3. md-block +107%
  4. Basic Computer Games +70%
  5. Peeky +70%

For all for the latest rankings please checkout Stargazing.dev


Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

If you enjoyed this article you can follow me on Twitter where I regularly post about HTML, CSS and JavaScript.

Top comments (2)

Collapse
 
immazoni profile image
Justin H

Addicted to reading these every week. Thank you!

Collapse
 
iainfreestone profile image
Iain Freestone

Glad you enjoy them. I have fun curating them each week