Skip to content

Instantly share code, notes, and snippets.

View zemirco's full-sized avatar

Mirco Zeiss zemirco

View GitHub Profile
@khalidx
khalidx / node-typescript-esm.md
Last active November 14, 2024 08:26
A Node + TypeScript + ts-node + ESM experience that works.

The experience of using Node.JS with TypeScript, ts-node, and ESM is horrible.

There are countless guides of how to integrate them, but none of them seem to work.

Here's what worked for me.

Just add the following files and run npm run dev. You'll be good to go!

package.json

@tkrotoff
tkrotoff / FrontendFrameworksPopularity.md
Last active November 8, 2024 20:14
Front-end frameworks popularity (React, Vue, Angular and Svelte)
@ianks
ianks / slugify.sql
Last active August 23, 2024 10:49
Generating Slugs in Postgres
CREATE EXTENSION IF NOT EXISTS "unaccent";
CREATE OR REPLACE FUNCTION slugify("value" TEXT)
RETURNS TEXT AS $$
-- removes accents (diacritic signs) from a given string --
WITH "unaccented" AS (
SELECT unaccent("value") AS "value"
),
-- lowercases the string
"lowercase" AS (

Libraries and Tools for React

If you're developing an application based on React it can be helpful if you don't need to develop all the basic UI components yourself. Here you can find a list with various components, component libraries and complete design systems developed with and for React.

As the list got longer and longer I thought it would be better to have a "real" site for it.

👉 Please find the (new) list here: https://react-libs.nilshartmann.net/

@enricofoltran
enricofoltran / main.go
Last active October 3, 2024 14:08
A simple golang web server with basic logging, tracing, health check, graceful shutdown and zero dependencies
package main
import (
"context"
"flag"
"fmt"
"log"
"net/http"
"os"
"os/signal"
@jlongster
jlongster / forms-with-react.js
Last active May 8, 2017 14:15
higher-order form components w/react
// Simple wrapper to use bootstrap's grid system to position elements side-by-side
var VerticalFieldsElement = React.createClass({
render: function() {
return dom.div(
{ className: 'clearfix' },
React.Children.map(this.props.children, function(child) {
if(!child) {
return child;
}
import { Component } from "react";
export var Enhance = ComposedComponent => class extends Component {
static displayName = "Enhanced"
constructor() {
super();
this.state = { data: null };
}
componentDidMount() {
@sebmarkbage
sebmarkbage / Enhance.js
Last active November 7, 2024 13:05
Higher-order Components
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {

2015-01-29 Unofficial Relay FAQ

Compilation of questions and answers about Relay from React.js Conf.

Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.

What is Relay?

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.