DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

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

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, 26 lessons, 52 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 🌍

Cloud Advocates at Microsoft are pleased to offer a 12-week, 26-lesson 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 AI for Beginners' curriculum. Pair these lessons with our '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 to our authors…


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

6kb 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 as standard Vue. However, it is specifically optimized for "sprinkling" a small amount of interactions on an existing HTML page rendered by a server framework. See more details on how it differs from standard Vue.

  • Only ~6kb
  • 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…


3. Milkdown

Plugin driven WYSIWYG markdown editor.

GitHub logo Milkdown / milkdown

🍼 Plugin driven WYSIWYG markdown editor framework.

🍼  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 and Mirone. Powered by Theme Nord and Material Design.

Documentation

For more information, please check our official documentation website.

What's Next

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

You can also check milestones to know what's being worked on.

Community

Welcome to join our Discord community.

Contributing

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

Contributor

contributors

Special thanks to @Meo for her work in design.

Sponsors

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

Thanks

Thanks to the following projects and companies for their support to milkdown and the open source community.

Β Β  Β Β  Β Β  Β Β 

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 QwikDev / qwik

Instant-loading web apps, without effort


Qwik Logo

Qwik CI Azure SWA Server Cloudflare Pages Server Netlify Server Node Servers Vercel Edge Vercel Serverless Create Qwik CLI Deno Server AWS Server

Instant-loading web apps, without effort

Qwik offers the fastest possible page load times - regardless of the complexity of your website. Qwik is so fast because it allows fully interactive sites to load with almost no JavaScript and pickup from where the server left off.

As users interact with the site, only the necessary parts of the site load on-demand. This precision lazy-loading is what makes Qwik so quick.

Getting Started

npm create qwik@latest
# or
pnpm create qwik@latest
# or
yarn create qwik@latest
# or
bun create qwik@latest
Enter fullscreen mode Exit fullscreen mode

Resources

Community

Development

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

Related


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 generator and suggestion for VSCode

Captain Stack on Marketplace Captain Stack on Marketplace

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 and Github Gist answers and autocompletes them for you.

βœ… OpenAI and OpenRouter added to generate code with AI (Bring Your Own Key)

Demo Video

1. Usage

Captain Stack provides Code Search (from Github Gist, StackOverflow), and AI Code Generation (with OpenAI and OpenRouter). With multiple options can be enabled at the same time.

To generate/search code, use // find {what you need}.. For example:

// find binary search in JavaScript.

// generate binary search function in Python.
Enter fullscreen mode Exit fullscreen mode

Note:

  • Make sure there is a dot at the end of {what you need} search phrase
  • You can use either // find or // generate to trigger Captain Stack code completion. Both are the same.

2. Settings

To configure…





8. VSCodeVim

VSCodeVim is a Vim emulator for Visual Studio Code.


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 Build jsdelivr

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
  • Install with pnpm to get all source files as they are available on GitHub: pnpm 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…





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.

Top comments (0)