Skip to content

Instantly share code, notes, and snippets.

View SirMoustache's full-sized avatar
🥕
carrot

Vitalii Hopaniuk SirMoustache

🥕
carrot
4 followers · 7 following
  • Ukraine, Kyiv
View GitHub Profile
@ruizb
ruizb / advanced-example.md
Last active September 26, 2023 20:21
Reader monad example using fp-ts

The following section is not part of monet.js documentation, but I think it's worth showing how we can compose readers using fp-ts.

Reader composition

Let's say we have the following piece of code:

interface Dependencies {
  logger: { log: (message: string) => void }
 env: 'development' | 'production'
@shilman
shilman / storybook-docs-typescript-walkthrough.md
Last active January 29, 2025 02:47
Storybook Docs Typescript Walkthrough

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript
@koss-lebedev
koss-lebedev / Posts.tsx
Created May 20, 2019 14:54
import React from 'react'
import fetch from 'isomorphic-fetch'
import { NextFunctionComponent, NextContext } from 'next'
type InitialProps = PromiseResult<ReturnType<typeof getInitialProps>>
type Props = InitialProps
type Context = NextContext<{ subreddit: string }>
const Posts: NextFunctionComponent<Props, InitialProps, Context> = ({ posts, subreddit }) => (
<div>
@leocristofani
leocristofani / RFReactSelect.js
Last active June 8, 2020 14:59
How to integrate React Select with Redux Form
import React, { PropTypes } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
RFReactSelect.defaultProps = {
multi: false,
className: ""
};
RFReactSelect.propTypes = {
@datchley
datchley / react-redux-style-guide.md
Last active October 2, 2025 20:13
React + Redux Style Guide
@geerlingguy
geerlingguy / yaml-object-example.yml
Last active April 21, 2022 06:00
# In YAML, this...
something:
- { name: test.example }
# ...is the same as this:
something:
- name: test.example
# And this:
something:
@Avaq
Avaq / combinators.js
Last active November 25, 2025 09:37
Common combinators in JavaScript
const I = x => x
const K = x => y => x
const A = f => x => f (x)
const T = x => f => f (x)
const W = f => x => f (x) (x)
const C = f => y => x => f (x) (y)
const B = f => g => x => f (g (x))
const S = f => g => x => f (x) (g (x))
const S_ = f => g => x => f (g (x)) (x)
const S2 = f => g => h => x => f (g (x)) (h (x))
@chantastic
chantastic / on-jsx.markdown
Last active March 1, 2026 06:00
JSX, a year in

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

@justinmc
justinmc / anchor_smooth_scroll.js
Last active May 14, 2019 19:52
Anchor Smooth Scroll - Angular Directive
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* Anchor Smooth Scroll - Smooth scroll to the given anchor on click
* adapted from this stackoverflow answer: http://stackoverflow.com/a/21918502/257494
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
angular.module('yourapp').directive('anchorSmoothScroll', function($location) {
'use strict';
return {
restrict: 'A',
replace: false,