loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 17th July 2020

iainfreestone profile image Iain Freestone Updated on ใƒป2 min read

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

1. Super Expressive

Super Expressive is a JavaScript library that allows you to build regular expressions in almost natural language - with no extra dependencies, and a lightweight code footprint (less than 3kb with minification + gzip!).

GitHub logo francisrstokes / super-expressive

๐Ÿฆœ Super Expressive is a zero-dependency JavaScript library for building regular expressions in (almost) natural language

Super Expressive

Super Expressive Logo

Super Expressive is a JavaScript library that allows you to build regular expressions in almost natural language - with no extra dependencies, and a lightweight code footprint (less than 4kb with minification + gzip!).


Why?

Regex is a very powerful tool, but its terse and cryptic vocabulary can make constructing and communicating them with others a challenge. Even developers who understand them well can have trouble reading their own back just a few months later! In addition, they can't be easily createdโ€ฆ


2. React Hook Form

Performant, flexible and extensible forms with easy to use validation.

GitHub logo react-hook-form / react-hook-form

๐Ÿ“‹ React Hooks for forms validation (Web + React Native)

Performant, flexible and extensible forms with easy to use validation.

npm downloads npm npm Coverage Status

English | ็นไธญ | ็ฎ€ไธญ | ๆ—ฅๆœฌ่ชž | ํ•œ๊ตญ์–ด | Franรงais | Italiano | Portuguรชs | Espaรฑol | ะ ัƒััะบะธะน | Deutsch | Tรผrkรงe

Features

Install

npm install react-hook-form

Links

Quickstart

import React from 'react'
import { useForm } from 'react-hook-form'
function App() {
  const { register, handleSubmit, errors } = useForm(); // initialise the hook
  const onSubmit = (data) => {
    console.log(data)
  }
  return (
    <form onSubmit={handleSubmit
โ€ฆ

3. Microsoft Fast

This is the FAST monorepo, containing web component packages, tools, examples, and documentation. FAST tech can be used ร  la carte or as a suite to build enterprise-grade websites, applications, components, design systems, and more.

GitHub logo microsoft / fast

The adaptive interface systemโ€จ for modern web experiences.

fast_banner_github_914.png

FAST

License: MIT lerna TypeScript code style: prettier

Maintainability Test Coverage workflows

Discord Twitter

This is the FAST monorepo, containing web component packages, tools, examples, and documentation. FAST tech can be used ร  la carte or as a suite to build enterprise-grade websites, applications, components, design systems, and more.

โญ We appreciate your star, it helps!

Introduction

FAST is a collection of technologies built on Web Components and modern Web Standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.

TL;DR

  • Create reusable UI components based on web component standards.
  • Use our standard library of pre-built web components in your apps.
  • Choose between two adaptive design systems: Fluent Design and FAST Frame.
  • Build your own design system without re-implementing component logic.
  • Integrate with any front-end framework or build system.

For an in-depth explanation of FAST see our docs introduction.

Packages

@microsoft/fast-element

License: MIT npm version

The @microsoft/fast-element library is a lightweight means to easily build performantโ€ฆ


4. Phaser

Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development.

GitHub logo photonstorm / phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Phaser - HTML5 Game Framework

Phaser Header

Discord chat Twitter Follow GitHub All Releases npm

Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development.

Along with the fantastic open source community, Phaser is actively developed and maintained by Photon Storm. As a result of rapid support, and a developer friendly API, Phaser is currently one of the most starred game frameworks on GitHub.

Thousands of developers from indie and multi-national digital agencies, and universities worldwide use Phaser. You can take a look at their incredible games.

Visit: The Phaser website and follow on Twitter (#phaserjs)
Learn: API Docs, Support Forum and StackOverflow
Code: 1700+ Examples (source available in this repo)
Read: The Phaser World Newsletter
Discord: Join usโ€ฆ


5. Tabler Icons

A set of over 550 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.

Devicon it's 78 icons and 200+ versions. And it's growing!

GitHub logo tabler / tabler-icons

A set of over 550 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Tabler Icons

A set of over 550 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.

If you want to support my project and help me grow it, you can become a sponsor on GitHub or just donate on PayPal :)

Preview

Installation

npm install tabler-icons --save

or just download from Github.

Usage

All icons are built with SVG, so you can place them as <img>, background-image and inline in HTML code.

HTML image

If you load an icon as an image, you can modify its size using CSS.

<img src="path/to/icon.svg" alt="icon title" />

Inline HTML

You can paste the content of the icon file into your HTML code to display it on the page.

<a href="">
  <svg
    xmlns="http://www.w3.org/2000/svg
โ€ฆ

6. Quasar

Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!

GitHub logo quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time

Quasar Framework logo

Quasar Framework

Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!

Join the chat at https://chat.quasar.dev https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg

Please submit a PR to https://github.com/quasarframework/quasar-awesome with your website/app/Quasar tutorial/video etc. Thank you!

Supporting Quasar

Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome backers.

Please read our manifest on Why donations are important. If you'd like to become a donator, check out Quasar Framework's Donator campaign.

Proudly sponsored by:

Documentation

Head on to the Quasar Framework official website: https://quasar.dev

Stay in Touch

For latest releases and announcements, follow on Twitter: @quasarframework

Chat Support

Ask questions at the official community Discord server: https://chat.quasar.dev

Community Forum

Ask questions at the official community forum: https://forum.quasar.dev

Contributing

Please make sure to read the Contributing Guideโ€ฆ


7. MDX: Markdown for the component era

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.

GitHub logo mdx-js / mdx

JSX in Markdown for ambitious projects

MDX logo

MDX: Markdown for the component era ๐Ÿš€

Build Status Join the community on Spectrum

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents You can import components, like interactive charts or notifications, and export metadata This makes writing long-form content with components a blast.

Example

See MDX in action:

import { Chart } from '../components/chart'
# Hereโ€™s a chart

The chart is rendered inside our MDX document.

<Chart />

Intro

MDX is markdown for the component era. It lets you write JSX embedded inside markdown. Thatโ€™s a great combination because it allows you to use markdownโ€™s often terse syntax (such as # heading) for the little things and JSX for more advanced components.

โค๏ธ Powerful: MDX blends markdown and JSX syntax to fit perfectly in React/JSX-based projects.

๐Ÿ’ป Everything is a component: Use existing components inside your MDX and import other MDXโ€ฆ


8. Video.js

Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins). It supports video playback on desktops and mobile devices.

GitHub logo videojs / video.js

Video.js - open source HTML5 & Flash video player

Video.js logo

Video.js - HTML5 Video Player

Build Status Coverage Status Greenkeeper badge Slack Status

NPM

Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over 50,000 100,000 200,000 400,000 websites.

Table of Contents

Quick Start

Thanks to the awesome folks over at Fastly, there's a free, CDN hosted version of Video.js that anyone can use. Add these tags to your document's <head>:

<link href="//vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.8.2/video.min.js"></script>

For the latest version of video.js and URLs to use, check out the Getting Started page on our website.

Video.js version 7 (and newer)โ€ฆ


9. Outline

An open, extensible, wiki for your team built using React and Node.js.

GitHub logo outline / outline

The fastest wiki and knowledge base for growing teams. Beautiful, feature rich, and markdown compatible.

An open, extensible, wiki for your team built using React and Node.js.
Try out Outline using our hosted version at www.getoutline.com.

Outline

This is the source code that runs Outline and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at getoutline.com.

If you'd like to run your own copy of Outline or contribute to development then this is the place for you.

Installation

Outline requires the following dependencies:

  • Node.js >= 12
  • Postgres >=9.5
  • Redis >= 4
  • AWS S3 storage bucket for media and other attachments
  • Slack or Google developer application for authentication

Development

In development you can quickly get an environment running using Docker by following these steps:

  1. Install these dependencies if you don't already have them
  2. Docker for Desktop
  3. Node.js (v12 LTS preferred)
  4. Yarn
  5. Clone this repo
  6. Register a Slackโ€ฆ

10. Vite

Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

GitHub logo vitejs / vite

Native-ESM powered web dev build tool. It's fast.

vite โšก

npm node unix CI status windows CI status

Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

  • Lightning fast cold server start
  • Instant hot module replacement (HMR)
  • True on-demand compilation
  • More details in How and Why

Status

In beta and will likely release 1.0 soon.

Getting Started

Note to Vue users: Vite currently only works with Vue 3.x. This also means you can't use libraries that are not yet compatible with Vue 3.

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

If using Yarn:

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

Although Vite is primarily designed to work with Vue 3, it can support other frameworks as well. For example, try npm init vite-app --template react or --templateโ€ฆ


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.

Posted on by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

markdown guide
 

MDX is the bomb, i've been using it on my two blogs built with gatsby and it's been amazing, it really supercharges your markdown thanks to the ability of adding components inside of it.

I wrote a short article about it for people interested to dive into it inspiredwebdev.com/what-is-mdx

 

I'm using React-Hook-Form. The best thing I like about it is the performance. It is better than Formik. I have used it with Material-UI and Yup. I'm planning to write an article soon. Do let me know if anyone is interested

 

I would be very interested. Look forward to reading your article

 

Thanks Iain. I will write it soon and let you know.

 

Hi Iain, my article on React Hook Form with Marterial UI and Yup (validation) is live. dev.to/ammartinwala52/forms-in-rea...
Do let me know your thoughts. Feel free to share if you found it useful.
Thanks a lot again for showing interest.

 

Definitely looking forward to using Microsoft- fast.

Outline too seems pretty useful.

Thanks Iain, just earlier today found your previous articles, just wanted to say thank you for creating these articles ๐Ÿ˜

 

Thank you, I do enjoying researching for the list each week.

 

Tired of updating GitHub profle README with latest features again & again?

If yes, then I have developed a tool to do the same for you in just 1 click ๐Ÿค“

๐Ÿš€ Try the tool: live tool

If you find the tool useful, show some love by giving a โญ on github repo

GitHub logo rahuldkjain / github-profile-readme-generator

๐Ÿš€ Generate github profile README easily with latest add-ons like visitors count, github stats, etc using minimal UI.

Github Profile Readme Generator

Github Profile Readme Generator

github-profile-readme-generator licence

github-profile-readme-generator gif

Tired of editing Github Profile README with new features?

This tool provides an easy way to create github profile readme with latest addons like visitors count, github stats etc.

๐Ÿš€ Try it out: Live demo

๐Ÿง Features

Just fill the details like Name, Tagline, Dev Platforms Username, Current Work, Portfolio, Blog etc. with a minimal UI.

Click on Generate README to get your README in markdown. You can preview the README too.

You can add latest addons like visitors count, shields, dev icons, github stats etc to your README in just one click.

Designed with ๐Ÿ’ซ by Rahul




 

Vite Js is something Which should trend #1 on Github๐Ÿ˜,

Vite is really powerful๐Ÿ˜ผ

 

Also I thought my GitHub Repository would trend๐Ÿ˜...

GitHub logo 8bithemant / 8bithemant

Github README.md. Consists of Lot of Badges, git, png, and a lot of Love, Live Github Stats. Add this to your profile and help me with contributing to this stuff. Github Profile README.md

Hi there, I'm Hemant! ๐Ÿ‘‹.


Hemant Joshi| Twitter Linkedin Telegram Instagram  Reddit Leetcode  Codechef


GIF


Hi ๐Ÿ™‹โ€โ™‚๏ธ,

I'm 18 years old Self-taught Full-Stack developer from India.

- ๐Ÿฅ€ Learning GraphQl ,NextJs &Typescript .

- ๐Ÿ”ญ SpaceX FanBoi,

- ๐Ÿ›ธ Into High Energy Physics and Astrophysics

- ๐Ÿ’ฌ Connect? Here ๐Ÿ‘‰๐Ÿผ


I am Into , ๐Ÿ™

Machine Learning, Web Development, SEO, Micro Services, System Design, Competetive Programming & Physics and Physics ๐Ÿ˜ผ

Github Stats By Anurag



- Languages and Tools...

html csharpjspythonreactvuechromeclouddatascienceawsnpmgcpbashvscode

- Blogs ๐ŸŒฑ

- Podcast โšก๏ธ


Thank You-๐Ÿ™๐Ÿผ