DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 5th March 2021

Iain Freestone
A Web developer from Hampshire in the south of England.
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. BASIC Computer Games

An updated version of the classic "Basic Computer Games" book, with well-written examples in a variety of common programming languages

GitHub logo coding-horror / basic-computer-games

An updated version of the classic "Basic Computer Games" book, with well-written examples in a variety of common programming languages

What are we doing?

We're updating the first million selling computer book, BASIC Computer Games, for 2021!

Where can we discuss it?

Please see the discussion here for a worklog and conversation around this project.

Project structure

I have moved all the original BASIC source code into a folder for each project in the original book (first volume). Note that Lyle Kopnicky has generously normalized all the code (thanks Lyle!) to run against Vintage Basic circa 2009:

I've included all the games here for your tinkering pleasure. I've tested and tweaked each one of them to make sure they'll run with Vintage BASIC, though you may see a few oddities. That's part of the fun of playing with BASIC: it never works quite the same on two machines. The games will play better if you keep CAPS LOCK on, as they were designed to be used with capital-letter input.

…


2. The Art of Node

A short introduction to node.js

GitHub logo maxogden / art-of-node

❄️ a short introduction to node.js

The Art of Node

An introduction to Node.js

This document is intended for readers who know at least a little bit of a couple of things:

  • a scripting language like JavaScript, Ruby, Python, Perl, etc. If you aren't a programmer yet then it is probably easier to start by reading JavaScript for Cats. 🐈
  • git and github. These are the open source collaboration tools that people in the node community use to share modules. You just need to know the basics. Here are three great intro tutorials: 1, 2, 3

Table of contents

Learn node interactively

In addition to reading this guide it's super important to also bust out your favorite text editor and actually write some node code. I always find that when I…


3. clsx

A tiny (228B) utility for constructing className strings conditionally. Also serves as a faster & smaller drop-in replacement for the classnames module.

GitHub logo lukeed / clsx

A tiny (228B) utility for constructing `className` strings conditionally.

clsx CI codecov

A tiny (228B) utility for constructing className strings conditionally.
Also serves as a faster & smaller drop-in replacement for the classnames module.

This module is available in three formats:

  • ES Module: dist/clsx.m.js
  • CommonJS: dist/clsx.js
  • UMD: dist/clsx.min.js

Install

$ npm install --save clsx

Usage

import clsx from 'clsx';
// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'
// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'
// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'
// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'],
…
Enter fullscreen mode Exit fullscreen mode

4. React Static

React-Static is a fast, lightweight, and powerful progressive static site generator based on React and its ecosystem. It resembles the simplicity and developer experience you're used to in tools like Create React App and has been carefully designed for performance, flexibility, and user/developer experience.

GitHub logo react-static / react-static

βš›οΈ πŸš€ A progressive static site generator for React.

React Static Logo

Travis CI Build Status David Dependancy Status npm package v npm package dm Join the community on Spectrum Github Stars Twitter Follow



You are viewing the docs for v7 of React Static. You can browse all historical versions via Github branches!

React Static

A progressive static-site generator for React.

React-Static is a fast, lightweight, and powerful progressive static site generator based on React and its ecosystem. It resembles the simplicity and developer experience you're used to in tools like Create React App and has been carefully designed for performance, flexibility, and user/developer experience.

Features

  • βš›οΈ 100% React (and friends!)
  • πŸš€ Blazing fast builds and performance.
  • 🚚 Data Agnostic. Supply your site with data from anywhere, however you want!
  • βœ‚οΈ Automatic code and data splitting!
  • πŸ’₯ Instant navigation and page views
  • β˜”οΈ Progressively Enhanced and mobile-ready
  • 🎯 SEO Friendly.
  • πŸ₯‡ React-centric developer experience.
  • 😌 Painless project setup & migration.
  • πŸ’― Supports 100% of the React ecosystem. Including CSS-in-JS libraries, custom Query layers like GraphQL, and even Redux.
  • πŸ”₯ Hot Reloadable out-of-the-box. Edit…

5. Houdini

The "disappearing" Svelte GraphQL client with support for Sapper and Sveltekit.

GitHub logo AlecAivazis / houdini

The "disappearing" Svelte GraphQL client with support for Sapper and Sveltekit

houdini

The disappearing GraphQL client built for Sapper and Sveltekit

✨  Features

  • Composable and colocated data requirements for your components
  • Document caching with declarative updates
  • Sapper/Sveltekit ready
  • Generated types
  • Customizable error handling (coming soon)

At its core, houdini seeks to enable a high quality developer experience without compromising bundle size. Like Svelte, houdini shifts what is traditionally handled by a bloated runtime into a compile step that allows for the generation of an incredibly lean GraphQL abstraction for your application.

πŸ“šΒ Β Table of Contents

  1. Example
  2. Installation
  3. Configuring Your Application
    1. Sveltekit
  4. Running the Compiler
  5. Fetching Data
    1. Query variables and page data
    2. What about preload?
  6. Fragments
  7. Mutations
    1. Updating fields
    2. Connections
      1. Insert
      2. Remove
      3. Delete
      4. Conditionals
  8. Authentication
  9. Notes, Constraints, and Conventions

πŸ•ΉοΈΒ Β Example

A demo can be found in the example directory.

Please note that the examples in that directory and this readme showcase the typescript definitions generated by the compiler. While it is…


6. Ream

A super-fast SSR framework for Vue.js 3

GitHub logo ream / ream

A super-fast SSR framework for Vue.js 3 ⚑️

Ream

A super fast SSR framework for Vue.js.

sponsor egoist npm version build status npm downloads

❀️ Please sponsor me to support this project or prioritize a feature you want. I will work on this project for full-time once I have 150+ sponsors.

Website

Documentation (WIP)

Sponsors

powered by vercel

License

MIT Β© EGOIST





7. Awesome CSS Frameworks

List of awesome CSS frameworks.

GitHub logo troxler / awesome-css-frameworks

List of awesome CSS frameworks

Awesome CSS Frameworks Awesome

List of awesome CSS frameworks.
Feel free to contribute.

Supported by FrontAid CMS:

FrontAid CMS - Agile Content Management with Git.

Contents

Base / Reset / Normalize

Class-less

Frameworks that use semantic HTML and do…


8. single-spa

The router for easy microfrontends. Build micro frontends that coexist and can (but don't need to) be written with their own framework.

GitHub logo single-spa / single-spa

The router for easy microfrontends

npm version NPM Downloads

single-spa

Join the chat on Slack

Donate to this project

A javascript framework for front-end microservices

Build micro frontends that coexist and can (but don't need to) be written with their own framework. This allows you to:

Documentation

You can find the single-spa documentation on the website.

Check out the Getting Started page for a quick overview.

Demo and examples

Please see the examples page on the website.

Want to help?

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing on the single-spa website.

Contributing

The main purpose of this repository…


9. Mikro ORM

TypeScript ORM for Node.js based on Data Mapper, Unit of Work and Identity Map patterns. Supports MongoDB, MySQL, MariaDB, PostgreSQL and SQLite databases.

GitHub logo mikro-orm / mikro-orm

TypeScript ORM for Node.js based on Data Mapper, Unit of Work and Identity Map patterns. Supports MongoDB, MySQL, MariaDB, PostgreSQL and SQLite databases.

MikroORM

TypeScript ORM for Node.js based on Data Mapper, Unit of Work and Identity Map patterns. Supports MongoDB, MySQL MariaDB, PostgreSQL and SQLite databases.

Heavily inspired by Doctrine and Nextras Orm.

NPM version NPM dev version Chat on slack Downloads Coverage Status Maintainability Build Status

πŸ€” Unit of What?

You might be asking: What the hell is Unit of Work and why should I care about it?

Unit of Work maintains a list of objects (entities) affected by a business transaction and coordinates the writing out of changes. (Martin Fowler)

Identity Map ensures that each object (entity) gets loaded only once by keeping every loaded object in a map. Looks up objects using the map when referring to them (Martin Fowler)

So what benefits does it bring to us?

Implicit Transactions

First and most important implication of having Unit of Work is that it allows handling transactions automatically.

When you call em.flush(), all computed changes are queried inside a…


10. Awesome Vite.js

A curated list of awesome things related to Vite.js

GitHub logo vitejs / awesome-vite

⚑️ A curated list of awesome things related to Vite.js


logo of awesome-vite repository

Awesome Vite.js

A curated list of awesome things related to Vite.js

Awesome

This awesome list is for Vite 2.x and onward. Vite 1.x's list is archived.

Table of Contents

Resources

Official Resources

Get Started

Templates

Vue 3






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)