Skip to content

Instantly share code, notes, and snippets.

View awinogradov's full-sized avatar
:octocat:
Coding happiness

Tony Vi awinogradov

:octocat:
Coding happiness
View GitHub Profile
@FlorianRappl
FlorianRappl / useCarousel.ts
Last active March 27, 2024 13:58
The generic useCarousel hook.
import { useReducer, useEffect } from 'react';
import { useSwipeable, SwipeableHandlers, EventData } from 'react-swipeable';
function previous(length: number, current: number) {
return (current - 1 + length) % length;
}
function next(length: number, current: number) {
return (current + 1) % length;
}
@tejacques
tejacques / HOCBaseRender.tsx
Last active May 2, 2022 13:05
React Higher Order Components in TypeScript
import * as React from 'react';
import { Component } from 'react';
export default function HOCBaseRender<Props, State, ComponentState>(
Comp: new() => Component<Props & State, ComponentState>) {
return class HOCBase extends Component<Props, State> {
render() {
return <Comp {...this.props} {...this.state}/>;
}
}

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).

@bobbygrace
bobbygrace / trello-css-guide.md
Last active April 22, 2024 10:15
Trello CSS Guide

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets


Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

@ericelliott
ericelliott / essential-javascript-links.md
Last active April 22, 2024 10:15
Essential JavaScript Links
@hdragomir
hdragomir / sm-annotated.html
Last active March 5, 2024 08:57
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
@arikon
arikon / i-jquery__my-plugin.js
Created February 1, 2014 16:35
jQuery plugin with bem-core
// If you are using borschik to expand links (bem make and enb do this for you)
// you could use this hack for any jQuery plugin found in the wild
modules.define('i-jquery__my-plugin', ['jquery'], function(provide, $){
var jQuery = $,
window = {jQuery: jQuery};
/*borschik:include:path/to/jquery-plugin.js*/
provide($);
});
@bryanchriswhite
bryanchriswhite / jshintrc
Created March 15, 2013 17:30
Angular project's .jshintrc file for use with grunt and the jshint plugin.
{
"node" : true,
"browser" : true,
"es5" : true,
"esnext" : true,
"bitwise" : true,
"camelcase": true,
"curly" : true,
"eqeqeq" : true,
"immed" : true,
/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column,
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }
.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
git clone git://github.com/wbond/sublime_package_control.git Package\ Control
cd Package\ Control
git checkout python3
# restart Sublime Text 3 and you should have Package Control working