DEV Community

loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 1st January 2021

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ใƒป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. IconPark

IconPark gives access to more than 1,400 high-quality icons, and introduces an interface for customizing your icons. Transform an SVG icon into multiple themes, and generate React icons๏ผŒVue icons๏ผŒsvg icons

GitHub logo bytedance / IconPark

๐ŸŽTransform an SVG icon into multiple themes, and generate React icons๏ผŒVue icons๏ผŒsvg icons

IconPark

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

Introduction

IconPark gives access to more than 1,400 high-quality icons, and introduces an interface for customizing your icons Instead of using various SVG source files to achieve different themes, We implement a technology transforming attributes of a single SVG source file into multiple themes. Besides, we provide cross-platform components, including react-icons, vue-icons and svg-icons So whether you are a designer or a developer, you can use them in your designs or your projects for free.

Packages

Generate Cross-platform Components

Find packages in packages folder. NPM packages make it painless to import icon components to your project.

Multiple themes

Basic coloring can be done by setting two attributes on the node: fill and strokeโ€ฆ


2. Fre

Coroutine with Fiber which implements the coroutine scheduler in JavaScript, and the rendering is asynchronous, which supports Time slicing and suspense components.

GitHub logo yisar / fre

๐Ÿ‘ป 1kb Coroutine Javascript library with Fiber.

fre logo

Fre

๐Ÿ‘ป Tiny Coroutine framework with Fiber.

Build Status Code Coverage npm-v npm-d brotli

  • Coroutine with Fiber โ€” This is an amazing idea, which implements the coroutine scheduler in JavaScript, and the rendering is asynchronous, which supports Time slicing and suspense components.

  • Highly-optimized algorithm โ€” Fre has a better reconciliation algorithm, which traverses from both ends with O (n) complexity, and supports keyed.

  • Do more with less โ€” After tree shaking, project of hello world is only 1KB, but it has most fetures, virtual DOM, hooks API, functional component and more.

Use

yarn add fre
Enter fullscreen mode Exit fullscreen mode
import { h, render, useState } from 'fre'
function App() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

3. TypeScript Deep Dive

The definitive guide to TypeScript and possibly the best TypeScript book. Free and Open Source

GitHub logo basarat / typescript-book

๐Ÿ“š The definitive guide to TypeScript and possibly the best TypeScript book ๐Ÿ“–. Free and Open Source ๐ŸŒน

TypeScript Deep Dive

I've been looking at the issues that turn up commonly when people start using TypeScript. This is based on the lessons from Stack Overflow / DefinitelyTyped and general engagement with the TypeScript community. You can follow for updates and don't forget to โ˜… on GitHub ๐ŸŒน

Reviews

  • Thanks for the wonderful book. Learned a lot from it. (link)
  • Its probably the Best TypeScript book out there. Good Job (link)
  • Love how precise and clear the examples and explanations are! (link)
  • For the low, low price of free, you get pages of pure awesomeness. Chock full of source code examples and clear, concise explanations, TypeScript Deep Dive will help you learn TypeScript development. (link)
  • Just a big thank you! Best TypeScript 2 detailed explanation! (link)
  • This gitbook got my project going pronto. Fluent easy read 5 starsโ€ฆ

4. Vendure

A headless GraphQL ecommerce framework built on Node.js with Nest & TypeScript, with a focus on developer productivity and ease of customization.

GitHub logo vendure-ecommerce / vendure

A headless GraphQL ecommerce framework for the modern web

Vendure

A headless GraphQL ecommerce framework built on Node.js with Nest & TypeScript, with a focus on developer productivity and ease of customization.

Build Status Publish & Install lerna

www.vendure.io

Structure

This project is a monorepo managed with Lerna. Several npm packages are published from this repo, which can be found in the packages/ directory.

vendure/
โ”œโ”€โ”€ docs/           # Documentation source
โ”œโ”€โ”€ e2e-common/     # Shared config for package e2e tests
โ”œโ”€โ”€ packages/       # Source for the Vendure server, admin-ui & plugin packages
โ”œโ”€โ”€ scripts/
    โ”œโ”€โ”€ changelog/  # Scripts used to generate the changelog based on the git history
    โ”œโ”€โ”€ codegen/    # Scripts used to generate TypeScript code from the GraphQL APIs
    โ”œโ”€โ”€ docs/       # Scripts used to generate documentation markdown from
โ€ฆ

5. Turbo

Turbo uses complementary techniques to dramatically reduce the amount of custom JavaScript that most web applications will need to write

GitHub logo hotwired / turbo

The speed of a single-page web application without having to write any JavaScript.

Turbo

Turbo uses complementary techniques to dramatically reduce the amount of custom JavaScript that most web applications will need to write:

  • Turbo Drive accelerates links and form submissions by negating the need for full page reloads.
  • Turbo Frames decompose pages into independent contexts, which scope navigation and can be lazily loaded.
  • Turbo Streams deliver page changes over WebSocket or in response to form submissions using just HTML and a set of CRUD-like actions.
  • Turbo Native lets your majestic monolith form the center of your native iOS and Android apps, with seamless transitions between web and native sections.

It's all done by sending HTML over the wire. And for those instances when that's not enough, you can reach for the other side of Hotwire, and finish the job with Stimulus.

Read more on turbo.hotwire.dev.

Note: Turbo is currently in beta. We're using it in production with HEY, butโ€ฆ


6. AI Expert Roadmap

Roadmap to becoming an Artificial Intelligence Expert in 2020

GitHub logo AMAI-GmbH / AI-Expert-Roadmap

Roadmap to becoming an Artificial Intelligence Expert in 2020

Developer Roadmap

i.am.ai
AI Expert Roadmap

Roadmap to becoming an Artificial Intelligence Expert in 2020

AMAI GmbH MIT License


Below you find a set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a data scientist, machine learning or an ai expert. We made these charts for our new employees to make them AI Experts but we wanted to share them here to help the community.

If you are interested to become an AI EXPERT at AMAI in Germany, or you want to hire an AI Expert, please say hi@am.ai.

Note

๐Ÿ‘‰ An interactive version with links to follow about each bullet of the list can be found at i.am.ai/roadmap ๐Ÿ‘ˆ

To receive updates star โญ and watch ๐Ÿ‘€ the GitHub Repo to get notified, when we add new content to stay on the top of the most recent research.

Disclaimer

โ€ฆ


7. GraphQL Tools

Build, mock, and stitch a GraphQL schema using the schema language

GitHub logo ardatan / graphql-tools

๐Ÿ”ง Build, mock, and stitch a GraphQL schema using the schema language

toolskit

npm version CI Discord Chat code style: prettier renovate-app badge

This package provides a few useful ways to create a GraphQL schema:

  1. Use the GraphQL schema language to generate a schema with full support for resolvers, interfaces, unions, and custom scalars. The schema produced is completely compatible with GraphQL.js.
  2. Mock your GraphQL API with fine-grained per-type mocking
  3. Automatically stitch multiple schemas together into one larger API

Documentation

Read the docs.

Binding to HTTP

If you want to bind your JavaScript GraphQL schema to an HTTP server, you can use express-graphql.

You can develop your Javascript based GraphQL API with graphql-tools and express-graphql together: One to write the schema and resolver code, and the other to connect it to a web server.

Example

When using graphql-tools, you describe the schema as a GraphQL type language string:

const typeDefs = `
type Author {
  id: ID! # the ! means that every author object _must_ have an id
  firstName:
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

8. react-worker-components

React Worker Components simplify using Web Workers

GitHub logo dai-shi / react-worker-components

React Worker Components simplify using Web Workers

react-worker-components

CI npm size discord

React Worker Components simplify using Web Workers

Introduction

This is an experimental project inspired by React Server Component.

I've been developing several libraries to interact with Web Workers.

RSC style would be pretty useful for Web Workers RWC is the same idea for Web Workers It tries to reproduce the similar behavior as possible Please try the examples. Feedbacks are welcome.

Install

npm install react-worker-components
Enter fullscreen mode Exit fullscreen mode

Usage

TextBox.js

This is a component that can be used in the RWC tree. register is important to enable serialization.

import React, { useState } from 'react';
import { register } from 'react-worker-components';

export const TextBox = () => {
  const [text, setText] = useState('');
  return (
    <div>
      <span>Text: {text}</span>
      <input value={text} onChange
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

9. Smoldash

Smoldash, A tiny lodash alternative built for the modern web

GitHub logo marvinhagemeister / smoldash

Smoldash, A tiny lodash alternative built for the modern web

Smoldash logo

Smoldash - Tiny Lodash alternative

Note: This library hasn't been battle tested yet. There may be bugs, although none have been reported so far.

Lodash is an amazing utility library for JavaScript, but with recent additions to the ECMAScript much of it can be replaced with vanilla features. This library aims to be a thinner alternative with modern browsers in mind.

Supported functions:

  • _.at
  • _.clone
  • _.cloneDeep
  • _.compact
  • _.find
  • _.flatten
  • _.flow
  • _.forEach
  • _.get
  • _.has
  • _.head
  • _.indexOf
  • _.isEmpty
  • _.isEqual
  • _.kebabCase
  • _.merge
  • _.once
  • _.pickBy
  • _.range
  • _.sortBy
  • _.take
  • _.uniqBy
  • _.uniqueId

Installation

npm install smoldash
# or via yarn
yarn add smoldash
Enter fullscreen mode Exit fullscreen mode

License

MIT, see the LICENSE file





10. Bulma

Modern CSS framework based on Flexbox

GitHub logo jgthms / bulma

Modern CSS framework based on Flexbox

Bulma

Bulma is a modern CSS framework based on Flexbox.

Github npm npm Awesome Join the chat at https://gitter.im/jgthms/bulma Build Status

Bulma: a Flexbox CSS framework

Quick install

Bulma is constantly in development! Try it out now:

NPM

npm install bulma
Enter fullscreen mode Exit fullscreen mode

or

Yarn

yarn add bulma
Enter fullscreen mode Exit fullscreen mode

Bower

bower install bulma
Enter fullscreen mode Exit fullscreen mode

Import

After installation, you can import the CSS file into your project using this snippet:

@import 'bulma/css/bulma.css'
Enter fullscreen mode Exit fullscreen mode

CDN

https://www.jsdelivr.com/package/npm/bulma

Feel free to raise an issue or submit a pull request.

CSS only

Bulma is a CSS framework. As such, the sole output is a single CSS file: bulma.css

You can either use that file, "out of the box", or download the Sass source files to customize the variables.

There is no JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.

Browser Support

Bulma uses autoprefixer to make (most) Flexboxโ€ฆ


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 (2)

pic
Editor guide
Collapse
fasani profile image
Michael Fasani

I skim read this every week but I guess I never comment. I just wanted to say I like this post you do, Itโ€™s nice. Thanks for doing it.

Collapse
iainfreestone profile image
Iain Freestone Author

Thank you Michael