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.
SvelteKit
Web development, streamlined. Read the documentation to get started.
Packages
Additional adapters are maintained by the community.
Bug reporting
Please make sure the issue you're reporting involves SvelteKit. Many issues related to how a project builds originate from Vite, which is used to build a SvelteKit project. You can create a new Vite project with npm create vite@latest
for client-side only repros and npm create vite-extra@latest
for SSR or library repros.
If an issue originates from Vite, please report it in the Vite issue tracker.
Contributing
See CONTRIBUTING.md for information on how to develop SvelteKit locally.
Supporting Svelte
Svelte is an MIT-licensed open source project with its ongoing development made possible entirely by fantastic volunteers. If you'd like to…
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.
Flagsmith / flagsmith
Open Source Feature Flagging and Remote Config Service. Host on-prem or use our hosted version at https://flagsmith.com/
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 less than a minute:
curl -o docker-compose.yml https://raw.githubusercontent.com/Flagsmith/flagsmith/main/docker-compose.yml
docker-compose -f docker-compose.yml up
The application will bootstrap an admin user, organisation, and project for you. You'll find a link to set your password in your Compose logs:
Superuser "admin@example.com" created successfully
Please go to the following page and choose a password: http://localhost:8000/password-reset/confirm/.../...
Note: This setup uses http:// for local development. If you've configured SSL for your local environment, you may use https:// instead. For any…
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)
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
Introduction
How They SRE How They SRE is a curated knowledge repository of Site Reliability Engineering (SRE) best practices, tools, techniques, and culture adopted by leading technology or tech-savvy organizations.
Numerous organizations frequently share their insights and expertise, encompassing best practices, tools, and techniques that shape their engineering culture. They do this through various public platforms such as engineering blogs, conferences, and meetups. This repository compiles and presents content gathered from these sources.
Topics
- Site Reliability Engineering
- Hiring and Building SRE teams
- SRE Culture
- DevOps
- Monitoring & Observability
- Alerting
- Incident Response & Post-Mortem
- On-Call
- Testing in Production
- Chaos Engineering
- Automation
- Performance
- Platform Engineering
Organizations
Achievers
Blog Posts
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.
netlify / framework-info
Framework detection utility
Important Notice
This repository was moved into the mono repository of github.com/netlify/build The package name and the versions are preserved!
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)
import { listFrameworks, hasFramework, getFramework } from '@netlify/framework-info'
console.log(await listFrameworks({ projectDir: './path/to/gatsby/website' }))
// [
// {
// id: 'gatsby',
// name: 'Gatsby',
// category: 'static_site_generator',
// dev: {
// commands:
…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.
IanVS / eslint-nibble
Ease into ESLint, by fixing one rule at a time
eslint-nibble
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
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).
Dexie.js
Dexie.js is a wrapper library for indexedDB - the standard database in the browser. https://dexie.org.
Why Dexie.js?
IndexedDB is the portable database for all browser engines. Dexie.js makes it fun and easy to work with.
But also:
- Dexie.js is widely used by 100,000 of web sites, apps and other projects and supports all browsers, Electron for Desktop apps, Capacitor for iOS / Android apps and of course pure PWAs.
- Dexie.js works around bugs in the IndexedDB implementations, giving a more stable user experience.
- It's an easy step to make it sync.
Hello World
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/dexie/dist/dexie.js"></script>
<script>
//
// Declare Database
//
const db = new Dexie('FriendDatabase');
db.version(1).stores({
friends: '++id, age'
});
//
…7. linaria
Zero-runtime CSS in JS library. Write CSS in JS, but with zero runtime, CSS is extracted to CSS files during build
Zero-runtime CSS in JS library
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
- Supports atomic styles with
@linaria/atomic
Learn how Airbnb improved both developer experience and web performance with Linaria
Installation
npm install @linaria/core @linaria/react @wyw-in-js/babel-preset
or
yarn add @linaria/core @linaria/react @wyw-in-js/babel-preset
Setup
Linaria is now built on top of wyw-in-js.dev. It supports various bundlers to extract the CSS at build time. To configure your bundler, check the following guides on the wyw-in-js.dev site:
8. Hint.css
A CSS only tooltip library for your lovely websites.
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:
- GitHub
Full build
- [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.css
- [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css
Base build (Does not include color themes and fancy effects)
- [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.base.css
- [minified] : https://raw.github.com/chinchang/hint.css/master/hint.base.min.css
-
Bower :
bower install hint.css
-
npm:
npm install --save hint.css
-
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="
…9. Grommet Icons
Iconography for Grommet and React.js
grommet / grommet-icons
Iconography for Grommet and React.js
grommet-icons
Iconography for Grommet and React.js
Install
npm install grommet-icons --save
or
yarn add grommet-icons
Usage
import { Facebook } from 'grommet-icons';
<Facebook />
<Facebook color='plain' />
<Facebook size='large' />
<Facebook size='xlarge' />
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:
If an icon is decorative and does not need to be read out by assisstive technologies, use <Blank />
with default properties. If the icon should be read out by assisstive technologies, apply aria-hidden={undefined}
and an appropriate a11yTitle
to <Blank />
.
import React from 'react';
import { Blank } from 'grommet-icons';
export const MyIcon = (props) => (
<Blank {...props}>
{/* your 24x24 svg goes
…10. CyberChef
The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis
gchq / CyberChef
The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis
CyberChef
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 and 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
- The Book Of Secret Knowledge +3,500 stars
- Web Development for Beginners +1,866 stars
- SigNoz +1,741 stars
- React Interview Questions & Answers +1,115 stars
- JavaScript Algorithms +966 stars
Top growth(%) over last 7 days
- TypeStat +109%
- SigNoz +81%
- React Virtual Cool +16%
- Astro +10%
- Solid +10%
Top risers over last 30 days
- Coding Interview University +8,663 stars
- Public APIs +7,084 stars
- The Book Of Secret Knowledge +4,796 stars
- Free Programming Books +3,817 stars
- JavaScript Algorithms +3,571 stars
Top growth(%) over last 30 days
- Plaiceholder +54%
- Flicking +43%
- Vuestic UI +38%
- Grafar +37%
- 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.
Top comments (6)
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.
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
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!
SvelteKit (and Svelte) is wonderful! It's my favorite web framework by far
I have only heard great things about Svelte and SvelteKit. Looking forward to trying it out on a soon,
It's a wonderful framework! I think the button incrementer example shows exactly why Svelte is so loved:
Making things reactive is so easy, not to metion the built-in transitions,
if
statements and loops, inlineawait
-then
-catch
syntax, and more.