DEV Community

loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 9th July 2021

Iain Freestone
A Web developer from Hampshire in the south of England.
Originally published at iainfreestone.com ใƒป3 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. Machine Learning for Beginners

12 weeks, 24 lessons, classic Machine Learning for all.

GitHub logo microsoft / ML-For-Beginners

12 weeks, 25 lessons, 50 quizzes, classic Machine Learning for all

GitHub license GitHub contributors GitHub issues GitHub pull-requests PRs Welcome

GitHub watchers GitHub forks GitHub stars

Machine Learning for Beginners - A Curriculum

๐ŸŒ Travel around the world as we explore Machine Learning by means of world cultures ๐ŸŒ

Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson (plus one!) curriculum all about Machine Learning. In this curriculum, you will learn about what is sometimes called classic machine learning, using primarily Scikit-learn as a library and avoiding deep learning, which is covered in our forthcoming 'AI for Beginners' curriculum. Pair these lessons with our forthcoming 'Data Science for Beginners' curriculum, as well!

Travel with us around the world as we apply these classic techniques to data from many areas of the world. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'.

โœ๏ธ Hearty thanksโ€ฆ


2. petite-vue

petite-vue is an 5kb subset alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for "sprinkling" small amount of interactions on an existing HTML page rendered by a server framework

GitHub logo vuejs / petite-vue

5kb subset of Vue optimized for progressive enhancement

petite-vue

petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for "sprinkling" small amount of interactions on an existing HTML page rendered by a server framework. See more details in how it differs from standard Vue.

  • Only ~5.8kb
  • Vue-compatible template syntax
  • DOM-based, mutates in place
  • Driven by @vue/reactivity

Status

  • This is pretty new. There are probably bugs and there might still be API changes, so use at your own risk. Is it usable though? Very much. Check out the examples to see what it's capable of.

  • The issue list is intentionally disabled because I have higher priority things to focus on for now and don't want to be distracted. If you found a bug, you'll have to either workaround it or submit a PR to fix it yourself. Thatโ€ฆ


3. Milkdown

Plugin driven WYSIWYG markdown editor.

GitHub logo Saul-Mirone / milkdown

๐Ÿผ Plugin driven WYSIWYG markdown editor.

Milkdown

ci ts download-badge version discord-badge commit license

A plugin-driven WYSIWYG markdown Editor, inspired by Typora, built on top of prosemirror and remark.

The website is designed by Meo. Powered by Theme Nord and Material Design.

Documentation

For more information, please check our official documentations:

English | ็ฎ€ไฝ“ไธญๆ–‡

What's Next

You can check our Milkdown TODO project page to know what's on the plan.

Community

Welcome to join our Discord community.

Contributing

Follow our contribution guide to learn how to contribute to milkdown.

Contributor

profile picture of Saul Mirone profile picture of Meo profile picture of xiadd profile picture of EllePeng profile picture of Songhn

Sponsors

If you like this project, please consider fund me to help the maintenance.

profile picture of Johno Scott

License

MIT





4. Fronts

Fronts is a progressive micro frontends framework for building Web applications, and it's based on the module federation of Webpack.

GitHub logo unadlib / fronts

A progressive micro frontends framework for building Web applications

Fronts Logo


Node CI npm version license

Fronts is a progressive micro frontends framework for building Web applications, and it's based on the module federation of Webpack.

Motivation

Among the many micro frontends solutions, single-spa and Module Federation are the best of them.

single-spa is a micro frontends framework based on router configuration. The centralization of configuration brings some limitations, such as it is difficult to granulate nestable micro frontends, module granularity control, module sharing, and so on.

In 2019, Zack Jackson proposed and implemented Module Federation. Module Federation is a completely different concept from single-spa, and allows a JavaScript application to dynamically load code from another application. It completely solves the problem of code dependency sharing and runtime modularity. The idea is true - A game-changer in JavaScript architecture as mentioned in Zack Jackson's article. And it's currently supported by Webpack, Next.js, and Rollup.

Although the Module Federation concept is so amazing, it has not yetโ€ฆ


5. vscode-theme-generator

Easily generate themes for VS Code with only a few colors.

GitHub logo Tyriar / vscode-theme-generator

Easily generate themes for VS Code with only a few colors

vscode-theme-generator

Build Status

This is a preview that leverages the new VS Code theming options in v1.12.

The Problem

  • New themes are typically forked from other themes, carrying the bugs with them
  • .tmThemes are overly verbose and difficult to maintain
  • Themes are difficult to write from scratch

The Solution

What if all you needed to do to generate a theme was specify a few colors and everything else was handled for you? Well that's what this module aims to accomplish. All you need to do is specify a set of "base colors" (background, foreground and 4 accent colors) and you have a reasonably good looking theme.

All other VS Code theme colors are then derived from those base colors, with the option to tweak each underlying color as well.

Example

This is all that's needed to generate a great looking theme:

import { generateTheme, IColorSet } from 'vscode-theme-generator';
const colorSet
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

6. Qwik

An Open-Source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code.

GitHub logo BuilderIO / qwik

An Open-Source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code.


Qwik Logo

Qwik DOM-Centric, Resumable Web-App Framework

An Open-Source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code.

Getting Started

Blog Posts

Development

  • See Developer.md for more information on how to build Qwik from the source and contribute!

Community


Made with โค๏ธ by Builder.io







7. Captain Stack

This feature is somewhat similar to Github Copilot's code suggestion. But instead of using AI, it sends your search query to Google, then retrieves StackOverflow answers and autocompletes them for you.

GitHub logo hieunc229 / copilot-clone

VSCode extension for code suggestion

Captain Stack

Captain Stack โ€” Code suggestion for VSCode

This feature is somewhat similar to Github Copilot's code suggestion. But instead of using AI, it sends your search query to Google, then retrieves StackOverflow answers and autocompletes them for you.

Have questions? Join our Discord server Discord Chat

Demo Video

Table of contents:

  1. Installation
  2. Play with Captain Stack
  3. Notes
  4. Changelog
  5. Troubleshooting
  6. Contributors

Note: โš ๏ธ This extension uses a proposed API (inline-completion) and can only be used for extension development in VSCode Insider release. It's not yet available on VSCode


1. Installation

Check out the installation video: https://youtu.be/MD-kzsF0Scg

Before installation, make sure you have VSCode Insider. You'll be using this version. To install and starting Captain Stack:

  1. Download this repository to your local machine. Unzip and open it on VSCode Insider (make sure the root directory is the same as package.json file)
  2. (optional) Run npm install in the terminal to install dependencies. A postinstallโ€ฆ

8. VSCodeVim

VSCodeVim is a Vim emulator for Visual Studio Code.

GitHub logo VSCodeVim / Vim

โญ Vim for Visual Studio Code


VSCodeVim

Vim emulation for Visual Studio Code

VSCodeVim is a Vim emulator for Visual Studio Code.

  • ๐Ÿšš For a full list of supported Vim features, please refer to our roadmap.
  • ๐Ÿ“ƒ Our change log outlines the breaking/major/minor updates between releases.
  • โ“ If you need to ask any questions, join us on Slack
  • Report missing features/bugs on GitHub.
Table of Contents (click to expand)

๐Ÿ’พ Installation

VSCodeVim is automatically enabled following installation and reloading of VS Code.

Mac

To enable key-repeating execute the following in your Terminal and restart VS Code:

$ defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false         # For VS Code
$ defaults write com.microsoft.VSCodeInsiders ApplePressAndHoldEnabled -bool false # For
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

9. Didact

A DIY guide to build your own React

GitHub logo pomber / didact

A DIY guide to build your own React

Didact

A DIY guide to build your own React

This repository goes together with a series of posts that explains how to build React from scratch step by step. You can jump straight to the last post which is self-contained and includes everything.

Follow @pomber on twitter for updates.

License

The MIT License (MIT)





10. UIkit

A lightweight and modular front-end framework for developing fast and powerful web interfaces

GitHub logo uikit / uikit

A lightweight and modular front-end framework for developing fast and powerful web interfaces

uikit banner

UIkit

Discord

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.


UIkit is an Open Source project developed by YOOtheme.

YOOtheme


Getting started

You have the following options to get UIkit:

  • Download the latest release with pre-built CSS and JS.
  • Install with npm to get all source files as they are available on GitHub: npm install uikit
  • Install with yarn to get all source files as they are available on GitHub: yarn add uikit
  • Directly load UIkit from jsDelivr: https://www.jsdelivr.com/package/npm/uikit
  • Clone the repo to get all source files including build scripts: git clone git://github.com/uikit/uikit.git

Developers

To always have the latest development version of UIkit, even before a release, you may want to use npm or yarn with the dev tag.

  • Using npmโ€ฆ





Stargazing ๐Ÿ“ˆ

Top risers over last 7 days

  1. Public APIs +3,575 stars
  2. Solid +1,631 stars
  3. 50 Projects in 50 Days +1,602 stars
  4. Security Scorecards +727 stars
  5. Web Developer Roadmap +642 stars

Top growth(%) over last 7 days

  1. Security Scorecards +97%
  2. Framework Info +75%
  3. 50 Projects in 50 Days +38%
  4. million +26%
  5. Solid +23%

Top risers over last 30 days

  1. Coding Interview University +7,706 stars
  2. Public APIs +6,905 stars
  3. The Book Of Secret Knowledge +5,288 stars
  4. Web Development for Beginners +3,554 stars
  5. Slides +3,268 stars

Top growth(%) over last 30 days

  1. React Virtual Cool +638%
  2. Slides +305%
  3. million +160%
  4. Security Scorecards +146%
  5. SigNoz +37%

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.

Discussion (0)