Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Lan Qingyong lanqy

🎯
Focusing
View GitHub Profile
View *tracked.md

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

@pi0
pi0 / colors
Last active May 11, 2020
Super Simple Node.js String Colors Support
View colors
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
@gaearon
gaearon / connect.js
Last active Nov 24, 2020
connect.js explained
View connect.js
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
@gaearon
gaearon / index.js
Last active Oct 29, 2020
Breaking out of Redux paradigm to isolate apps
View index.js
import React, { Component } from 'react'
import Subapp from './subapp/Root'
class BigApp extends Component {
render() {
return (
<div>
<Subapp />
<Subapp />
<Subapp />
@kousik93
kousik93 / Golang - Arbitrary JSON Array Parsing and Type Switch.md
Last active Oct 29, 2020
Golang - Arbitrary JSON Array Parsing and Type Switch
View Golang - Arbitrary JSON Array Parsing and Type Switch.md

##Golang Type Switch - Arbitrary JSON Array Parsing I'm writing this mostly as a reference for myself. This could also be helpful to people who are new to GO.

####Note 1: Until Problem 3 we will assume we are dealing with a JSON for which we know the data types of key,value pairs. Only in Problem 3 we will look at how Type Switch is used to parse a 100% arbitary JSON

####Note 2: I know the following examples given here can be easily solved by declaring approprite structs and just decoding the PUT JSON into them, but, as im not able to come up with a better scenario, im going to stick with this to explain arbitrary JSON parsing.

@gaearon
gaearon / reducers.js
Last active Oct 20, 2020
How I'd do code splitting in Redux (pseudo code, not tested!)
View reducers.js
import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';
export default function createReducer(asyncReducers) {
return combineReducers({
users,
posts,
...asyncReducers
});
@gaearon
gaearon / slim-redux.js
Last active Nov 14, 2020
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
View slim-redux.js
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
}
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
@gaearon
gaearon / ReduxMicroBoilerplate.js
Last active Mar 26, 2020
Super minimal React + Redux app
View ReduxMicroBoilerplate.js
import React, { Component } from 'react';
import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux';
import { provide, connect } from 'react-redux';
import thunk from 'redux-thunk';
const AVAILABLE_SUBREDDITS = ['apple', 'pics'];
// ------------
// reducers
// ------------
@danawoodman
danawoodman / 0-react-hello-world.md
Last active Jul 10, 2020
React Hello World Examples
View 0-react-hello-world.md

React "Hello World" Examples

Below are a small collection of React examples to get anyone started using React. They progress from simpler to more complex/full featured.

They will hopefully get you over the initial learning curve of the hard parts of React (JSX, props vs. state, lifecycle events, etc).

Usage

You will want to create an index.html file and copy/paste the contents of 1-base.html and then create a scripts.js file and copy/paste the contents of one of the examples into it.

View browserify_for_webpack_users.markdown

browserify for webpack users

There's been a strange explosion in misinformation about browserify recently, particularly in comparisons to webpack.

Generally speaking, most of this confusion stems from how webpack is more willing to pull features into its core to ease discoverability while browserify is more likely to push features out to userland instead.

I think that longer-term, separability has more benefits from a maintenance and

You can’t perform that action at this time.