DEV Community

loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 24th December 2020

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. 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.

GitHub logo prisma / prisma

Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server & SQLite

Prisma

Prisma ยท

Quickstart ย ย โ€ขย ย  Website ย ย โ€ขย ย  Docs ย ย โ€ขย ย  Examples ย ย โ€ขย ย  Blog ย ย โ€ขย ย  Slack ย ย โ€ขย ย  Twitter ย ย โ€ขย ย  Demo videos ย ย โ€ขย ย  Prisma 1

What is Prisma?

Prisma is a database toolkit that consists of these tools:

  • Prisma Client: Auto-generated and type-safe query builder for Node.js & TypeScript
  • Prisma Migrate (experimental): 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โ€ฆ


2. OpenTelemetry JavaScript

This is the JavaScript version of OpenTelemetry, a framework for collecting traces and metrics from applications.

GitHub logo open-telemetry / opentelemetry-js

OpenTelemetry JavaScript API and SDK


Getting Started ย ย โ€ขย ย  API Documentation ย ย โ€ขย ย  Getting In Touch (Gitter)

GitHub release (latest by date including pre-releases) Codecov Status license
Build Status Beta

Contributing ย ย โ€ขย ย  Development Guide ย ย โ€ขย ย  Benchmarks ย ย โ€ขย ย  Examples


About this project

This is the JavaScript version of OpenTelemetry, a framework for collecting traces and metrics from applications.

Quick start

Application Owner

To get started tracing your own application, see the Getting Started Guide. For more information about automatic instrumentation see @opentelemetry/node, which provides auto-instrumentation for Node.js applications. If the automatic instrumentation does not suit your needs, or you would like to create manual traces, see @opentelemetry/tracing

Library Author

If you are a library author looking to build OpenTelemetry into your library, please see the documentation. As a library author, it is important that you only depend on properties and methods published on the public API. If you use any properties or methods from the SDK that are not officially a part of the public API, yourโ€ฆ


3. Storybook

The UI component explorer. Develop, document, & test for React, Vue, Angular, Ember, Web Components, & more!

GitHub logo storybookjs / storybook

๐Ÿ““ The UI component explorer. Develop, document, & test for React, Vue, Angular, Ember, Web Components, & more!

Storybook

Build bulletproof UI components faster

Build Status on CircleCI CodeFactor Known Vulnerabilities codecov License
Storybook Community Backers on Open Collective Sponsors on Open Collective Official Twitter Handle

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.

View README for:
latest next

Table of contents

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.

GitHub logo hotwired / stimulus

A modest JavaScript framework for the HTML you already have

Stimulus 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 Turbolinks 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>
Enter fullscreen mode Exit fullscreen mode

Then write a compatible controller. Stimulus brings it to life automatically:

// hello_controller.js
import { Controller } from "stimulus"
export default class extends
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

5. Carbon

Create and share beautiful images of your source code

GitHub logo carbon-app / carbon

๐Ÿ–ค Create and share beautiful images of your source code

maintained with Ranger All Contributors MIT License FOSSA Status

Open Collective sponsors Open Collective backers Open Collective sponsors

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.

Carbon example

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:


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.

GitHub logo 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
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo simple-icons / simple-icons

SVG icons for popular brands

Simple Icons

Simple Icons

Over 1000 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub. Started by Dan Leech.

Usage

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@v4/icons/[ICON NAME].svg" /&gt
<img height="32" width="32" src="https://unpkg.com/simple-icons@v4/icons/[ICON NAME].svg" />
Enter fullscreen mode Exit fullscreen mode

Where [ICON NAME] is replaced by the icon name, for example:

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/simpleicons.svg" /&gt
<img
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

8. MDN Content

The content behind MDN Web Docs

GitHub logo mdn / content

The content behind MDN Web Docs

Contributing to the content of MDN Web Docs

๐ŸŽ‰ First of all, thanks for taking the time to contribute to 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.

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 the Writing style guide.

Setup

No matter how you wish to contribute, you'll need a GitHub account if you don't have one already If you're not familiar with git and GitHubโ€ฆ


9. Computer Science Flash Cards

Mini website for testing both general CS knowledge and enforce coding practice and common algorithm/data structure memorization.

GitHub logo 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.

Card UI


The front of a General flash card.

Memorizing general knowledge


The reverse (answer side) of a Code flash card.

Code view

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โ€ฆ


10. Notion Blog

A Next.js site using new SSG support with a Notion backed blog

GitHub logo 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.now.sh/

Getting Started

To view the steps to setup Notion to work with this example view the post at https://notion-blog.now.sh/blog/my-first-post or follow the steps below.

Deploy Your Own

Deploy your own Notion blog with Vercel.

Deploy with Vercel

or

  1. Clone this repo git clone https://github.com/ijjk/notion-blog.git
  2. Configure project with vc
  3. Add your NOTION_TOKEN and BLOG_INDEX_ID as environment variables in your project. See here for how to find these values
  4. 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.

Discussion (1)

pic
Editor guide
Collapse
ahzu profile image
Ahzu Direct

Thank you for sharing this. :)