Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. Prisma
Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server & SQLite
Prisma Client can be used in any Node.js or TypeScript backend application (including serverless applications and microservices). This can be a REST API, a GraphQL API a gRPC API or anything else that needs a database.
prisma / prisma
Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite & MongoDB (Preview)
Prisma
Quickstart ย ย โขย ย Website ย ย โขย ย Docs ย ย โขย ย Examples ย ย โขย ย Blog ย ย โขย ย Slack ย ย โขย ย Twitter ย ย โขย ย Prisma 1
What is Prisma?
Prisma is a next-generation ORM that consists of these tools:
- Prisma Client: Auto-generated and type-safe query builder for Node.js & TypeScript
- Prisma Migrate: Declarative data modeling & migration system
- Prisma Studio: GUI to view and edit data in your database
Prisma Client can be used in any Node.js or TypeScript backend application (including serverless applications and microservices). This can be a REST API, a GraphQL API a gRPC API, or anything else that needs a database.
Are you looking for Prisma 1? The Prisma 1 repository has been renamed to
prisma/prisma1
.
Getting started
The fastest way to get started with Prisma is by following the Quickstart (5 min).
The Quickstart is based on a preconfigured SQLite database. You can also get started with yourโฆ
2. OpenTelemetry JavaScript
This is the JavaScript version of OpenTelemetry, a framework for collecting traces and metrics from applications.
open-telemetry / opentelemetry-js
OpenTelemetry JavaScript Client
Getting Started ย ย โขย ย API Reference ย ย โขย ย SDK Reference
Contributing ย ย โขย ย Development Guide ย ย โขย ย Benchmarks ย ย โขย ย Examples
About this project
This is the JavaScript version of OpenTelemetry, a framework for collecting traces and metrics from applications.
Compatibility Matrix
API Version | Core version | Contrib Version |
---|---|---|
1.0.x | 0.25.x | ------ |
1.0.x | 0.24.x | 0.24.x |
1.0.x | 0.23.x | 0.23.x |
1.0.x | 0.22.x | 0.22.x |
0.21.x | 0.21.x | 0.21.x |
0.20.x | 0.20.x | 0.20.x |
v1.0.0-rc.3 | 0.19.x | 0.16.x |
0.18.x | 0.18.x | 0.14.x |
0.17.x | ------ | |
0.16.x | ------ | |
0.15.x | 0.13.x | |
0.14.x | 0.12.x | |
0.13.x | ------ | |
0.12.x | 0.11.x | |
0.11.x | 0.10.x |
Versioning
The current version for each package can be found in the respective package.json
file for that module. For additional details see the versioning and stability document in the specification.
Quick start
Application Owner
Install Dependencies
npm install --save @opentelemetry/api
npm install --save @opentelemetry/sdk-node
npm install --save @opentelemetry/auto-instrumentations-node
Note: auto-instrumentations-node
is a meta package from opentelemetry-js-contrib that provides a simple way to initialize multiple Node.js instrumentations.
Instantiate Tracing
3. Storybook
The UI component explorer. Develop, document, & test for React, Vue, Angular, Ember, Web Components, & more!
storybookjs / storybook
๐ The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Build bulletproof UI components faster
Storybook is a development environment for UI components It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Find out more at https://storybook.js.org.
Table of contents
-
๐ Getting Started -
๐ Projects-
๐ Supported Frameworks & Examples -
๐ Sub Projects -
๐ Addons
-
-
๐ Badges & Presentation materials -
๐ฅ Community -
๐ Contributing-
๐จโ๐ป Development scripts -
๐ต Backers -
๐ธ Sponsors
-
-
๐ License
Getting Started
Visit Storybook's website to learn more about Storybook, and to get started.
Documentation
Documentation can be found Storybook's docs site.
Examples
Here are some featured examples that you can reference to see how Storybook works: https://storybook.js.org/docs/react/get-started/examples
Storybook comes with a lot of addons for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even beenโฆ
4. Stimulus
Stimulus is a JavaScript framework with modest ambitions. It doesn't seek to take over your entire front-endโin fact, it's not concerned with rendering HTML at all. Instead, it's designed to augment your HTML with just enough behavior to make it shine.
Stimulus
A modest JavaScript framework for the HTML you already have
Stimulus is a JavaScript framework with modest ambitions. It doesn't seek to take over your entire front-endโin fact, it's not concerned with rendering HTML at all. Instead, it's designed to augment your HTML with just enough behavior to make it shine. Stimulus pairs beautifully with Turbo to provide a complete solution for fast, compelling applications with a minimal amount of effort.
How does it work? Sprinkle your HTML with controller, target, and action attributes:
<div data-controller="hello">
<input data-hello-target="name" type="text">
<button data-action="click->hello#greet">Greet</button>
<span data-hello-target="output"></span>
</div>
Then write a compatible controller. Stimulus brings it to life automatically:
// hello_controller.js
import { Controller } from "stimulus"
export default class extends
โฆ5. Carbon
Create and share beautiful images of your source code
carbon-app / carbon
๐ค Create and share beautiful images of your source code
Translations
Introduction
You know all of those code screenshots you see on Twitter? Though the code's usually impressive, we saw room for improvement in the aesthetic department. Carbon makes it easy to create and share beautiful images of your source code. So what are you waiting for? Go impress all of your followers with your newfound design prowess.
Features
- Customization. Customize things like your image's syntax theme, font style, and more
- Share quickly. Save your image or a link with one click
- Save snippets. Create an account to save snippets for later. Shared snippets are automatically unfurled on Twitter and Slack.
Usage
Import
There are a few different ways to import code into Carbon:
- Drop a file onto the editor
- Append a GitHub gist ID toโฆ
6. Docker Getting Started Tutorial
This tutorial has been written with the intent of helping folks get up and running with containers and is designed to work with Docker Desktop.
docker / getting-started
Getting started with Docker
Docker Getting Started Tutorial
This tutorial has been written with the intent of helping folks get up and running with containers and is designed to work with Docker Desktop. While not going too much into depth, it covers the following topics:
- Running your first container
- Building containers
- Learning what containers are running and removing them
- Using volumes to persist data
- Using bind mounts to support development
- Using container networking to support multi-container applications
- Using Docker Compose to simplify the definition and sharing of applications
- Using image layer caching to speed up builds and reduce push/pull size
- Using multi-stage builds to separate build-time and runtime dependencies
Getting Started
If you wish to run the tutorial, you can use the following command after installing Docker Desktop:
docker run -d -p 80:80 docker/getting-started
Once it has started, you can open your browser to http://localhost.
Development
This project has a docker-compose.yml
file, whichโฆ
7. Simple Icons
Over 1000 Free SVG icons for popular brands.
simple-icons / simple-icons
SVG icons for popular brands
Simple Icons
Over 1500 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub.
Usage
โน๏ธ We ask that all users read our legal disclaimer before using icons from Simple Icons.
General Usage
Icons can be downloaded as SVGs directly from our website - simply click the icon you want, and the download should start automatically.
CDN Usage
Icons can be served from a CDN such as JSDelivr or Unpkg. Simply use the simple-icons
npm package and specify a version in the URL like the following:
<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/[ICON SLUG].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v5/icons/[ICON SLUG].svg" />
Where [ICON SLUG]
is replaced by the slug of the icon you want to use, for example:
8. MDN Content
The content behind MDN Web Docs
Contributing to the content of MDN Web Docs
The following is a set of guidelines for contributing to the content of MDN Web Docs, which is hosted within the MDN Organization on GitHub.
Note: Just want to find a task and jump in See Getting started on MDN for an overview of how to join, and Contributing to MDN for a filtered list of tasks.
Code of Conduct
Everyone participating in this project is expected to follow our Code of Conduct.
License
When contributing to the content you agree to license your contributions according to our license.
Making contributions
A good place to learn about general guidelines for contributing to MDN Web Docs is the Guidelines document For example, you can find out more about MDN's writing-style guidelines viaโฆ
9. Computer Science Flash Cards
Mini website for testing both general CS knowledge and enforce coding practice and common algorithm/data structure memorization.
jwasham / computer-science-flash-cards
Mini website for testing both general CS knowledge and enforce coding practice and common algorithm/data structure memorization.
Computer Science Flash Cards
This is a little website I've put together to allow me to easily make flash cards and quiz myself for memorization of:
- General cs knowledge
- vocabulary
- definitions of processes
- powers of 2
- design patterns
- Code
- data structures
- algorithms
- solving problems
- bitwise operations
Will be able to use it on:
- desktop
- mobile (phone and tablet)
It uses:
- Python 3
- Flask
- SQLite
About the Site
Here's a brief rundown: https://startupnextdoor.com/flash-cards-site-complete/
Screenshots
UI for listing cards. From here you can add and edit cards.
The front of a General flash card.
The reverse (answer side) of a Code flash card.
Important Note
The set included in this project (cards-jwasham.db) is not my full set, and is way too big already.
Thanks for asking for my list of 1,792 cards. But itโs too much. I even printed them out. Itโs 50 pages, front and back, in tiny textโฆ
10. Notion Blog
A Next.js site using new SSG support with a Notion backed blog
ijjk / notion-blog
A Next.js site using new SSG support with a Notion backed blog
Notion Blog
This is an example Next.js project that shows Next.js' upcoming SSG (static-site generation) support using Notion's private API for a backend.
Note: This example uses the experimental SSG hooks only available in the Next.js canary branch! The APIs used within this example will change over time. Since it is using a private API and experimental features, use at your own risk as these things could change at any moment.
Live Example hosted on Vercel: https://notion-blog.vercel.app/
Getting Started
To view the steps to setup Notion to work with this example view the post at https://notion-blog.vercel.app/blog/my-first-post or follow the steps below.
Deploy Your Own
Deploy your own Notion blog with Vercel.
or
- Clone this repo
git clone https://github.com/ijjk/notion-blog.git
- Configure project with
vc
- Add your
NOTION_TOKEN
andBLOG_INDEX_ID
as environment variables in your project. See here for how to find these values - Do final deployment with
vc
Noteโฆ
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 (1)
Thank you for sharing this. :)