Skip to content

Instantly share code, notes, and snippets.

View volkancakil's full-sized avatar
Trying to quit vim

Volkan Çakıl volkancakil

Trying to quit vim
  • Antalya, Turkey
View GitHub Profile
ericelliott /
Last active March 28, 2024 23:01
Essential JavaScript Links

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.

sebmarkbage / Enhance.js
Last active January 31, 2024 18:33
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() {
aldendaniels /
Last active October 6, 2018 09:50
Alternative to Higher-order Components

React now supports the use of ES6 classes as an alternative to React.createClass().

React's concept of Mixins, however, doesn't have a corollary when using ES6 classes. This left the community without an established pattern for code that both handles cross-cutting concerns and requires access to Component Life Cycle Methods.

In this gist, @sebmarkbage proposed an alternative pattern to React mixins: decorate components with a wrapping "higher order" component that handles whatever lifecycle methods it needs to and then invokes the wrapped component in its render() method, passing through props.

While a viable solution, this has a few drawbacks:

  1. There's no way for the child component to override functionality defined on the higher order component.
CMCDragonkai /
Last active March 31, 2024 17:45
Rust/Haskell: Higher-Kinded Types (HKT)

Rust/Haskell: Higher-Kinded Types (HKT)

A higher kinded type is a concept that reifies a type constructor as an actual type.

A type constructor can be thought of in these analogies:

  • like a function in the type universe
  • as a type with a "hole" in it
paulirish /
Last active April 13, 2024 14:05
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
emilong / component.jsx
Created May 27, 2016 20:35
Creating semantic links for react-router using HOCs
import React, { Component } from 'react'
import { SubWidgetLink } from './routes'
export default class MyComponentWithALink extends Component {
render() {
const { widget } = this.props
return (
davestewart /
Last active April 1, 2024 16:47
Example of using BroadcastChannel to communicate with pages in the same domain


regilero / nginx.conf
Last active February 26, 2021 12:22 — forked from thoop/nginx.conf
Altered nginx.conf for nginx
# Change YOUR_TOKEN to your prerender token and uncomment that line if you want to cache urls and view crawl stats
# Change (server_name) to your website url
# Change /path/to/your/root to the correct value
# Generate $prerender_ua bool value based on user agent
# indexation bots will get this as 1,
# prerender user agent will always get 0 (avoid loops)
map $http_user_agent $prerender_ua {
default 0;