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
coding-horror
/
basic-computer-games
An updated version of the classic "Basic Computer Games" book, with well-written examples in a variety of common MEMORY SAFE, SCRIPTING programming languages. See https://coding-horror.github.io/basic-computer-games/
What are we doing?
We’re updating the first million selling computer book, BASIC Computer Games, for 2022 and beyond!
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…
2. The Art of Node
A short introduction to node.js
max-mapper
/
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
- Understanding node
- Core modules
- Callbacks
- Events
- Streams
- Modules and npm
- Client side development with npm
- Going with the grain
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.
clsx 
A tiny (239B) utility for constructing
classNamestrings conditionally.
Also serves as a faster & smaller drop-in replacement for theclassnamesmodule.
This module is available in three formats:
-
ES Module:
dist/clsx.mjs -
CommonJS:
dist/clsx.js -
UMD:
dist/clsx.min.js
Install
$ npm install --save clsx
Usage
import clsx from 'clsx';
// or
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'…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.
react-static
/
react-static
⚛️ 🚀 A progressive static site generator for React.
This is now in maintenance only mode. No new major versions will be released.
Remix and NextJS are good alternatives.
Where is react-static 8? The state of react-static -- and its inevitable death. #1661
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…
5. Houdini
The "disappearing" Svelte GraphQL client with support for Sapper and Sveltekit.
HoudiniGraphql
/
houdini
The disappearing GraphQL framework
The disappearing GraphQL framework
✨ Features
- Composable and colocated data requirements for your components
- Normalized cache with declarative updates
- Generated types
- Subscriptions
- Pagination (cursors and offsets)
At its core, houdini seeks to enable a high quality developer experience without compromising bundle size. 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.
🕹 Example
For a detailed example, you can check out the example-sveltekit-todo or the final version of the Pokédex application from the Getting Started guide.
📚 Documentation
For documentation, please visit the api reference on the website.
🚀 Getting Started
For an in-depth guide to getting started with Houdini, check out the guide on our website.
✏️ Contributing
If you are interested in helping out, the contributing guide should provide some guidance. If you need something more specific…
6. Ream
A super-fast SSR framework for Vue.js 3
Ream
A super fast SSR framework for Vue.js.
❤️ 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.
Documentation (WIP)
Sponsors
License
MIT © EGOIST
7. Awesome CSS Frameworks
List of awesome CSS frameworks.
troxler
/
awesome-css-frameworks
List of awesome CSS frameworks in 2024
Awesome CSS Frameworks 
List of awesome CSS frameworks.
Feel free to contribute.
Supported by FrontAid CMS:
Contents
- Base / Reset / Normalize
- Class-less
- Very Lightweight
- General Purpose
- Material Design
- Utility-based
- Specialized
- Toolkits
- Stalled Development
Base / Reset / Normalize
-
modern-normalize - Normalize browsers' default style.
Repo | #CSS
-
Natural Selection - Collection of best-practice CSS selectors.
| #CSS
Class-less
Frameworks that use semantic HTML and do not rely on classes.
-
MVP.css - Minimalist stylesheet for HTML elements.
Docs, Repo | #CSS
-
sakura - Minimal classless CSS framework/theme.
Demo, Repo | #SCSS
-
Simple.css - Lightweight, classless CSS framework.
Demo, Docs, Repo | #CSS
-
Tacit - CSS framework for dummies, without classes.
Repo | #SCSS
Very Lightweight
Frameworks that are smaller than ~5KB.
-
Pure - Set of small, responsive CSS modules that you can use in every web…
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.
single-spa
/
single-spa
The router for easy microfrontends
single-spa
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:
- Use multiple frameworks on the same page without refreshing the page (React, AngularJS, Angular, Ember, or whatever you're using)
- Write new code, possibly with a new framework, without rewriting your existing app
- Lazy load code for improved initial load time.
Sponsors
To add your company's logo to this section:
- Become a recurring Open Collective sponsor of at least $100 a month.
- Become a recurring Github sponsor of at least $100 a month.
- Sponsor a core team member to implement a specific feature for single-spa. Pay our regular consulting rate. Inquire in our Slack workspace.
Documentation
You can find the single-spa documentation on the…
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.
mikro-orm
/
mikro-orm
TypeScript ORM for Node.js based on Data Mapper, Unit of Work and Identity Map patterns. Supports MongoDB, MySQL, MariaDB, MS SQL Server, PostgreSQL and SQLite/libSQL databases.
TypeScript ORM for Node.js based on Data Mapper, Unit of Work and Identity Map patterns. Supports MongoDB, MySQL, MariaDB, PostgreSQL and SQLite (including libSQL) databases.
🤔 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…
10. Awesome Vite.js
A curated list of awesome things related to Vite.js
vitejs
/
awesome-vite
⚡️ A curated list of awesome things related to Vite.js
Awesome Vite.js
A curated list of awesome things related to Vite.js
Table of Contents
Use the "Table of Contents" menu on the top-right corner to explore the list.
Resources
Official Resources
Get Started
- create-vite - Scaffolding Your First Vite Project.
- create-vitawind - Scaffolding for TailwindCSS project.
- create-electron-vite - Scaffolding Your Electron + Vite Project.
- create-vite-app - Scaffolding Your Out Of The Box Vite Project.
- create-nx-workspace - Scaffolding a Nx + React + Vite + Vitest.
- bati - Scaffolding a Vike project.
- create-awesome-node-app - Scaffolding your project choosing between different templates.
Templates
Vanilla
- vite-vanilla-ts-lib-starter - Starter for library (CJS, ESM, IIFE) with TypeScript, ESLint, Stylelint, Prettier, Jest, Husky + lint-staged.
- vite-tailwind-nojs-starter - NoJS Tailwind CSS starter template.
- vite-tailwind-stimulus-starter - Starter template for Tailwind CSS and Stimulus controllers.
- vite-phaser-ts - Starter template with Phaser and Typescript.
- vite-tinybase - Starter…
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)