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
bytedance / IconPark
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
English | 简体中文
Introduction
IconPark gives access to more than 2000 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.
Name | Github link | NPM link |
---|---|---|
React Icons | React Component | @icon-park/react |
Vue2 Icons | Vue Component for old Vue2.0 | @icon-park/vue |
Vue3 Icons | Vue Component for Vue3.0 | @icon-park/vue-next |
SVG Icons | Pure SVG String | @icon-park/svg |
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.
Fre
👻 Tiny Concurrent UI library with Fiber.
-
Concurrent Mode — This is an amazing idea, which implements the coroutine scheduler in JavaScript, it also called Time slicing.
-
Keyed reconcilation algorithm — Fre has a minimal longest-common-subsequence algorithm, It supported keyed, pre-process.
-
Do more with less — After tree shaking, project of hello world is only 1KB, but it has most features, virtual DOM, hooks API, Fragments, Fre.memo and so on.
Contributors
Usage
yarn add fre
import { render, useState } from 'fre'
function App() {
const [count, setCount] = useState(0)
return <>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>+</button>
</>
}
render(<App/>, document.body)
3. TypeScript Deep Dive
The definitive guide to TypeScript and possibly the best TypeScript book. Free and Open Source
basarat / typescript-book
📚 The definitive guide to TypeScript and possibly the best TypeScript book 📖. Free and Open Source 🌹
TypeScript Deep Dive
Learn Professional TypeScript. 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…
4. Vendure
A headless GraphQL ecommerce framework built on Node.js with Nest & TypeScript, with a focus on developer productivity and ease of customization.
vendure-ecommerce / vendure
The commerce platform with customization in its DNA.
Vendure
An open-source headless commerce platform built on Node.js with GraphQL, Nest & TypeScript, with a focus on developer productivity and ease of customization.
- Getting Started: Get Vendure up and running locally in a matter of minutes with a single command
- Live Demo
- Vendure Discord: Join us on Discord for support and answers to your questions
Branches
-
master
- The latest stable release, currently the 2.x series. -
minor
- The next patch release, including new features -
major
- The next major release (v3.0) -
v2.x
- The 2.x line, which will receive critical fixes until the end-of-life on 31.12.2024. The code in this branch is under the MIT license.
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
…5. Turbo
Turbo uses complementary techniques to dramatically reduce the amount of custom JavaScript that most web applications will need to write
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.hotwired.dev.
Contributing
Please read CONTRIBUTING.md.
© 2024 37signals LLC.
6. AI Expert Roadmap
Roadmap to becoming an Artificial Intelligence Expert in 2020
AMAI-GmbH / AI-Expert-Roadmap
Roadmap to becoming an Artificial Intelligence Expert in 2022
i.am.ai
AI Expert Roadmap
Roadmap to becoming an Artificial Intelligence Expert in 2022
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.
Follow…
7. GraphQL Tools
Build, mock, and stitch a GraphQL schema using the schema language
ardatan / graphql-tools
🔧 Utility library for GraphQL to build, stitch and mock GraphQL schemas in the SDL-first approach
This package provides a few useful ways to create a GraphQL schema:
- 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.
- Mock your GraphQL API with fine-grained per-type mocking
- Automatically stitch multiple schemas together into one larger API
Documentation
Binding to HTTP
If you want to bind your JavaScript GraphQL schema to an HTTP server, you can use
GraphQL Yoga
.
You can develop your JavaScript based GraphQL API with graphql-tools
and GraphQL Yoga
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 = /* GraphQL */ `
type Author {
id: ID! # the ! means that every author object
…8. react-worker-components
React Worker Components simplify using Web Workers
dai-shi / react-worker-components
React Worker Components simplify using Web Workers
react-worker-components
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.
While they provide various interfaces with good abstraction RSC style would be another approach which is useful for Web Workers.
RWC is a library to provide RSC-like interface for Web Workers. It serializes React elements keeping their referential identities as much as possible. If a React component is "registered", it will be referenced by string names, and it can be used at the both ends.
Project Status: Experimental but basic examples are working. Welcome to try realistic examples.
Install
npm install react-worker-components
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'
…9. Smoldash
Smoldash, A tiny lodash alternative built for the modern web
marvinhagemeister / smoldash
Smoldash, A tiny lodash alternative built for the modern web
Smoldash - Tiny 2kb 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
_.every
_.findIndex
_.find
_.filter
_.flatten
_.flow
_.forEach
_.get
_.groupBy
_.has
_.head
_.indexOf
_.isEmpty
_.isEqual
_.kebabCase
_.keyBy
-
_.map
- only maps arrays _.merge
_.once
_.pickBy
_.range
_.sortBy
_.some
_.take
_.uniqBy
_.uniqueId
Installation
npm install smoldash
# or via yarn
yarn add smoldash
License
MIT, see the LICENSE file
10. Bulma
Modern CSS framework based on Flexbox
Bulma is a modern CSS framework based on Flexbox.
Quick install
Bulma is constantly in development! Try it out now:
NPM
npm install bulma
or
Yarn
yarn add bulma
Bower
bower install bulma
Import
After installation, you can import the CSS file into your project using this snippet:
@import 'bulma/css/bulma.css'
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.
Top comments (2)
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.
Thank you Michael