DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 2nd July 2021

Iain Freestone
A Web developer from Hampshire in the south of England.
Originally published at iainfreestone.com ・Updated on ・3 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. SvelteKit

The fastest way to build Svelte apps. SvelteKit is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

GitHub logo sveltejs / kit

The fastest way to build Svelte apps

READ THIS FIRST!

SvelteKit is still in beta. Expect bugs! Read more here, and track progress towards 1.0 here.

Documentation

Please see the documentation for information about getting started and developing with SvelteKit.

Packages

The SvelteKit community also makes additional SvelteKit adapters available for use.

Developing

This monorepo uses pnpm. Install it...

npm i -g pnpm
Enter fullscreen mode Exit fullscreen mode

...then install this repo's dependencies...

pnpm i
Enter fullscreen mode Exit fullscreen mode

...then build SvelteKit and the other packages:

pnpm build
Enter fullscreen mode Exit fullscreen mode

You should now be able to run the examples by navigating to one of the directories and doing pnpm dev.

Run pnpm dev inside the packages/kit directory to continually rebuild @sveltejs/kit as you make changes to SvelteKit. Restarting the example/test apps will cause the newly built version to be used.

To use the git hooks in the…


2. Flagsmith

Flagsmith is an open source, fully featured, Feature Flag and Remote Config service. Use our hosted API, deploy to your own private cloud, or run on-premise.

GitHub logo Flagsmith / flagsmith

Feature flagging and remote config service. Host yourself or use our hosted version at https://flagsmith.com/

Feature Flag, Remote Config and A/B Testing platform, Flagsmith

Flagsmith is an open source, fully featured, Feature Flag and Remote Config service. Use our hosted API, deploy to your own private cloud, or run on-premise.

Flagsmith

Flagsmith makes it easy to create and manage features flags across web, mobile, and server side applications. Just wrap a section of code with a flag, and then use Flagsmith to toggle that feature on or off for different environments, users or user segments.

Get up and running in 1 minute with:

git clone git@github.com:flagsmith/flagsmith.git
docker-compose -f flagsmith/docker/docker-compose.yml up
Enter fullscreen mode Exit fullscreen mode

Flagsmith Screenshot

Features

  • Feature flags. Release features with confidence through phased rollouts.
  • Remote config. Easily toggle individual features on and off, and make changes without deploying new code.
  • A/B and Multivariate Testing. Use segments to run A/B and multivariate tests on new features. With segments, you can also introduce beta programs to get early user feedback.
  • Organization Management. Organizations, projects, and roles…

3. How they Site Reliability Engineering

A curated collection of publicly available resources on how technology and tech-savvy organizations around the world practice Site Reliability Engineering (SRE)

GitHub logo upgundecha / howtheysre

A curated collection of publicly available resources on how technology and tech-savvy organizations around the world practice Site Reliability Engineering (SRE)

How they SRE

PRs Welcome CI

Alt

A curated collection of publicly available resources on how technology and tech-savvy organizations around the world practice Site Reliability Engineering (SRE)

Introduction

How They SRE is a curated knowledge repository of best practices, tools, techniques, and culture of SRE adopted by the leading technology or tech-savvy organizations.

Many organizations regularly come forward and share their best practices, tools, techniques and offer an insight into engineering culture on various public platforms like engineering blogs, conferences & meetups. The content is curated from these avenues and shared in this repository.

Note to readers: This list refers to some of the articles, posts, videos, tools, and techniques published before 2015. Please use such material with caution as there may be recent advances in technology and practices which offer better alternatives and perspectives.

Topics

  • Site Reliability Engineering
  • Hiring and Building SRE teams
  • SRE Culture
  • DevOps
  • Monitoring & Observability
  • Alerting
  • Incident Response…

4. Framework Info

Framework detection utility. Detects which framework a specific website is using. The framework's build/dev commands, directories and server port are also returned.

GitHub logo netlify / framework-info

Framework detection utility

npm version Coverage Status Build Downloads

Framework detection utility.

Detects which framework a specific website is using. The framework's build/dev commands, directories and server port are also returned.

The following frameworks are detected:

  • Static site generators: Gatsby, Hugo, Jekyll, Next.js, Nuxt, Hexo, Gridsome, Docusaurus, Eleventy, Middleman Phenomic, React-static, Stencil, Vuepress, Assemble, DocPad, Harp, Metalsmith, Roots, Wintersmith
  • Front-end frameworks: create-react-app, Vue, Sapper, Angular, Ember, Svelte, Expo, Quasar
  • Build tools: Parcel, Brunch, Grunt, Gulp

If you're looking for a way to run framework-info via CLI check the build-info project.

Additions and updates are welcome!

Example (Node.js)

const { listFrameworks, hasFramework, getFramework } = require('@netlify/framework-info')
console.log(await listFrameworks({ projectDir: './path/to/gatsby/website' }))
// [
//   {
//     id: 'gatsby',
//     name: 'Gatsby',
//     category: 'static_site_generator',
//     dev: {
//       commands: ['gatsby develop'],
//       port: 8000,
//       pollingStrategies: [{ name: 'TCP' }, { name: 'HTTP' }]
//     },
…
Enter fullscreen mode Exit fullscreen mode

5. eslint-nibble

Ease into ESLint, by fixing one rule at a time. eslint-nibble gives a quick overview of your failing rules, and then show the detailed error reports for one rule at a time.

GitHub logo IanVS / eslint-nibble

Ease into ESLint, by fixing one rule at a time

eslint-nibble

npm Build Status

Sometimes running ESLint against an existing project and fixing the hundreds or thousands of errors is biting off more than you can chew.
Instead, eslint-nibble will give a quick overview of your failing rules, and then show the detailed error reports for one rule at a time.

If a rule can be automatically fixed by ESLint, eslint-nibble will allow you to run autofix on individual rules, allowing you to make more focused commits.

Read this excellent blog post from Paul Hands for a clear explanation of what eslint-nibble can do for your project: Hiring a gardener to trim the weeds.

Installation

npm install --no-save eslint-nibble
Enter fullscreen mode Exit fullscreen mode

You can also install eslint-nibble globally, but it is not recommended.

Instead, try installing eslint-nibble in your project with --no-save (as shown above), because this tool is intended only to get you up and running. Once you're happy with your rules and your…


6. Dexie.js

A Minimalistic Wrapper for IndexedDB. Dexie provides a neat database API with a well thought-through API design, robust error handling, extendability, change tracking awareness and extended KeyRange support (case insensitive search, set matches and OR operations).

GitHub logo dfahlander / Dexie.js

A Minimalistic Wrapper for IndexedDB

Dexie.js

NPM Version Build StatusTested with Browserstack

Dexie.js is a wrapper library for indexedDB - the standard database in the browser. http://dexie.org

Why?

Dexie solves three main issues with the native IndexedDB API:

  1. Ambiguous error handling
  2. Poor queries
  3. Code complexity

Dexie provides a neat database API with a well thought-through API design, robust error handling, extendability, change tracking awareness and extended KeyRange support (case insensitive search, set matches and OR operations).

Hello World

<!doctype html>
<html>
 <head>
  <script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
  <script>
   //
   // Declare Database
   //
   var db = new Dexie("FriendDatabase");
   db.version(1).stores({
     friends: "++id,name,age"
   });
   //
   // Manipulate and Query Database
   //
   db.friends.add({name: "Josephine", age: 21}).then(function() {
       return
…
Enter fullscreen mode Exit fullscreen mode

7. linaria

Zero-runtime CSS in JS library. Write CSS in JS, but with zero runtime, CSS is extracted to CSS files during build

GitHub logo callstack / linaria

Zero-runtime CSS in JS library

Linaria

Zero-runtime CSS in JS library


Build Status Code Coverage Version MIT License

All Contributors PRs Welcome Chat Code of Conduct Greenkeeper Sponsored by Callstack

tweet

Features

  • Write CSS in JS, but with zero runtime, CSS is extracted to CSS files during build
  • Familiar CSS syntax with Sass like nesting
  • Use dynamic prop based styles with the React bindings, uses CSS variables behind the scenes
  • Easily find where the style was defined with CSS sourcemaps
  • Lint your CSS in JS with stylelint
  • Use JavaScript for logic, no CSS preprocessor needed
  • Optionally use any CSS preprocessor such as Sass or PostCSS

Why use Linaria

Installation

npm install @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker
Enter fullscreen mode Exit fullscreen mode

or

yarn add @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker
Enter fullscreen mode Exit fullscreen mode

Setup

Linaria currently supports webpack and Rollup to extract the CSS at build time. To configure your bundler, check the following guides:

Or configure Linaria with one of the following integrations:

Optionally, add the @linaria preset to your Babel configuration at the end of the presets list…


8. Hint.css

A CSS only tooltip library for your lovely websites.

GitHub logo chinchang / hint.css

A CSS only tooltip library for your lovely websites.

Hint.css npm version downloads/month Join the chat at https://gitter.im/chinchang/hint.css gzip size

A tooltip library in CSS for your lovely websites

Demo β€’ Get started β€’ Who's using this? β€’ Browser support β€’ FAQs β€’ Contributing β€’ License

hint.css is written as a pure CSS resource using which you can create cool accessible tooltips for your web app. It does not rely on JavaScript but rather uses aria-label/data- attribute*, pseudo elements, content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers.

Get Started

Get the library using one of the following ways:

  1. GitHub

Full build

Base build (Does not include color themes and fancy effects)

  1. Bower : bower install hint.css

  2. npm: npm install --save hint.css

  3. CDN: https://www.jsdelivr.com/package/npm/hint.css or https://cdnjs.com/libraries/hint.css

Now include the library in the HEAD tag of your page:

<link rel="
…
Enter fullscreen mode Exit fullscreen mode

9. Grommet Icons

Iconography for Grommet and React.js

GitHub logo grommet / grommet-icons

Iconography for Grommet and React.js

Slack Build Status Test Coverage Dependency Status PRs Welcome

grommet-icons

Iconography for Grommet and React.js

Install

npm install grommet-icons grommet-styles --save

or

yarn add grommet-icons grommet-styles

Usage

import { Facebook } from 'grommet-icons';

<Facebook />
<Facebook color='plain' />
<Facebook size='large' />
<Facebook size='xlarge' />
Enter fullscreen mode Exit fullscreen mode

Visit our site for more icons.

Create Your Own Grommet Icon

Any 24x24px SVG may be converted to an icon using the <Blank> icon. For example:

import React from 'react';
import { Blank } from 'grommet-icons';
export const MyIcon = props => (
  <Blank {...props}>
    {/* your 24x24 svg goes here - e.g. here's a 24x24px circle */}
    <svg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="5" />
    </svg>
  <
…
Enter fullscreen mode Exit fullscreen mode

10. CyberChef

The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis

GitHub logo gchq / CyberChef

The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis

CyberChef

Language grade: JavaScript dependencies Status npm Gitter

The Cyber Swiss Army Knife

CyberChef is a simple, intuitive web app for carrying out all manner of "cyber" operations within a web browser. These operations include simple encoding like XOR or Base64, more complex encryption like AES, DES and Blowfish, creating binary and hexdumps, compression and decompression of data, calculating hashes and checksums, IPv6 and X.509 parsing, changing character encodings, and much more.

The tool is designed to enable both technical and non-technical analysts to manipulate data in complex ways without having to deal with complex tools or algorithms. It was conceived, designed, built and incrementally improved by an analyst in their 10% innovation time over several years.

Live demo

CyberChef is still under active development. As a result, it shouldn't be considered a finished product. There is still testing and bug fixing to do, new features to be added and additional documentation to write. Please contribute!

Cryptographic…


Stargazing πŸ“ˆ

Top risers over last 7 days

  1. The Book Of Secret Knowledge +3,500 stars
  2. Web Development for Beginners +1,866 stars
  3. SigNoz +1,741 stars
  4. React Interview Questions & Answers +1,115 stars
  5. JavaScript Algorithms +966 stars

Top growth(%) over last 7 days

  1. TypeStat +109%
  2. SigNoz +81%
  3. React Virtual Cool +16%
  4. Astro +10%
  5. Solid +10%

Top risers over last 30 days

  1. Coding Interview University +8,663 stars
  2. Public APIs +7,084 stars
  3. The Book Of Secret Knowledge +4,796 stars
  4. Free Programming Books +3,817 stars
  5. JavaScript Algorithms +3,571 stars

Top growth(%) over last 30 days

  1. Plaiceholder +54%
  2. Flicking +43%
  3. Vuestic UI +38%
  4. Grafar +37%
  5. Observable Plot +34%

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 (6)

Collapse
alex_barashkov profile image
Alex Barashkov

Thanks for featuring us github.com/Flagsmith/flagsmith, still don't understand how github trends work, watched few times when we got a significant number of stars but have not appeared there at all, while some projects with lover numbers for the same period have been.

Collapse
iainfreestone profile image
Iain Freestone Author

Agreed, Github Trending is a bit of a mystery but do find it useful as a discovery tool.

Alongside this weekly trending article/newsletter I have been building a website to track trends in a more obvious way. Which I will hopefully releasing soon.

Flagsmith Stats
Flagsmith Stats

Collapse
mvoloskov profile image
Miloslav πŸ³οΈβ€πŸŒˆ πŸ¦‹ Voloskov

Instead of Grommet icons, use react-icons β€” it includes Grommet icons but offers more variety and standardizes components.

Linaria is great. Instead of generating CSS at the runtime like Styled and bloating it, Linaria does everything at the compilation time and uses CSS variables to pass your JS parameters you use in the templates. It also offers Styled compat, so you can transition quickly!

Collapse
theonlytails profile image
TheOnlyTails

SvelteKit (and Svelte) is wonderful! It's my favorite web framework by far

Collapse
iainfreestone profile image
Iain Freestone Author

I have only heard great things about Svelte and SvelteKit. Looking forward to trying it out on a soon,

Collapse
theonlytails profile image
TheOnlyTails

It's a wonderful framework! I think the button incrementer example shows exactly why Svelte is so loved:

<script lang="ts"> <!-- notice the easy typescript support! -->
  export let count: number;
</script>

<button on:click={() => count++}>Number: {number}</button>
Enter fullscreen mode Exit fullscreen mode

Making things reactive is so easy, not to metion the built-in transitions, if statements and loops, inline await-then-catch syntax, and more.