Skip to content

Instantly share code, notes, and snippets.

View lanqy's full-sized avatar
🎯
Focusing

Lan Qingyong lanqy

🎯
Focusing
  • Shenzhen,China
View GitHub Profile

tracked npm

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation

@gaearon
gaearon / reducers.js
Last active December 11, 2020 14:56
How I'd do code splitting in Redux (pseudo code, not tested!)
import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';
export default function createReducer(asyncReducers) {
return combineReducers({
users,
posts,
...asyncReducers
});
@sebmarkbage
sebmarkbage / ReactCanvasDrawing.js
Created July 25, 2014 19:14
Canvas Drawing Example
/** @jsx React.DOM */
var Graphic = React.createClass({
componentDidMount: function() {
var context = this.getDOMNode().getContext('2d');
this.paint(context);
},
componentDidUpdate: function() {
@lpalmes
lpalmes / react.md
Last active May 7, 2021 17:59
React and Reconcilers in Reason

React

This is the base of all projects and it will include the foundation for all potential react-based projects in Reason.

This base package should include a ReasonReact api to promote collaboration and familiarity with people using a ReasonReact, and for the modern world of React this should also include a Hooks api that currently revery uses.

React module

All blocks in Jsx are of type React.reactElement. This reactElement should represent:

@gaearon
gaearon / index.js
Last active January 5, 2022 18:45
Breaking out of Redux paradigm to isolate apps
import React, { Component } from 'react'
import Subapp from './subapp/Root'
class BigApp extends Component {
render() {
return (
<div>
<Subapp />
<Subapp />
<Subapp />
@danielphillips
danielphillips / UILabel+dynamicSizeMe.h
Created June 2, 2011 22:54
Adjust UILabel to change it's frame according to it's content
@interface UILabel (dynamicSizeMe)
-(float)resizeToFit;
-(float)expectedHeight;
@end
@paztek
paztek / app.controller.ts
Last active March 30, 2022 09:34
nestjs-redis-example-1
import { Body, Controller, Get, Put } from '@nestjs/common';
import { AppService } from './app.service';
@Controller('/hello')
export class AppController {
constructor(
private readonly appService: AppService,
) {}
@pi0
pi0 / colors
Last active August 4, 2022 17:35
Super Simple Node.js String Colors Support
This snippets add super Simple Node.js String Colors Support.
See here:
http://stackoverflow.com/questions/32474241/node-js-terminal-color
http://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color
@lilactown
lilactown / promises.re
Last active August 20, 2022 07:56
Notes on using JavaScript Promises in ReasonML/BuckleScript
/**
* Making promises
*/
let okPromise = Js.Promise.make((~resolve, ~reject as _) => [@bs] resolve("ok"));
/* Simpler promise creation for static values */
Js.Promise.resolve("easy");
Js.Promise.reject(Invalid_argument("too easy"));
@lihnux
lihnux / StringToByteArray.js
Created August 6, 2014 06:05
Javascript Convert String to Byte Array
var url = "Hello World";
var data = [];
for (var i = 0; i < url.length; i++){
data.push(url.charCodeAt(i));
}