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
@alex35mil
alex35mil / 1-styles.css
Created April 18, 2017 06:41
CSS Modules + PostCSS + Webpack
:root {
--my-width: 400px;
}
:export {
myWidth: var(--my-width);
}
.myClass {
width: var(--my-width);

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 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
@gaearon
gaearon / connect.js
Last active April 11, 2024 06:46
connect.js explained
// 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 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 />
@kousik93
kousik93 / Golang - Arbitrary JSON Array Parsing and Type Switch.md
Last active December 8, 2022 14:07
Golang - Arbitrary JSON Array Parsing and Type Switch

##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 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
});
@gaearon
gaearon / slim-redux.js
Last active March 25, 2024 19:12
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
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 March 26, 2020 00:35
Super minimal React + Redux app
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 March 9, 2024 00:32
React Hello World Examples

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.