Skip to content

Instantly share code, notes, and snippets.

💭
Working on a design system

Kristofer Selbekk selbekk

💭
Working on a design system
Block or report user

Report or block selbekk

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@selbekk
selbekk / image-optimizer.js
Created Aug 24, 2018
An image optimizer in JS
View image-optimizer.js
import Pica from 'pica';
const getImageFromFile = file =>
new Promise(resolve => {
const reader = new FileReader();
const image = new Image();
reader.onload = async fileReaderEvent => {
image.onload = () => resolve(image);
image.src = await fileReaderEvent.target.result;
};
@selbekk
selbekk / webpack.config.js
Last active Aug 1, 2018
webpack and less -webpack.config.js
View webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const config = {
// First, let's define an entry point for webpack to start its crawling.
entry: './src/index.js',
// Second, we define where the files webpack produce, are placed
output: {
@selbekk
selbekk / webpack.config.js
Last active Aug 1, 2018
webpack and less - webpack.config.js
View webpack.config.js
const path = require('path');
const config = {
// First, let's define an entry point for webpack to start its crawling.
entry: './src/index.js',
// Second, we define where the files webpack produce, are placed
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
@selbekk
selbekk / my-styles.less
Created Aug 1, 2018
webpack and less - my-styles.less
View my-styles.less
@color: palevioletred;
.with-styles {
background-color: @color;
}
@selbekk
selbekk / index.js
Created Aug 1, 2018
webpack and less - index.js
View index.js
import './my-styles.less';
document.querySelector('body').classList.add('with-styles');
@selbekk
selbekk / webpack.config.js
Last active Aug 1, 2018
webpack and less - webpack.config.js
View webpack.config.js
const path = require('path');
const config = {
// First, let's define an entry point for webpack to start its crawling.
entry: './src/index.js',
// Second, we define where the files webpack produce, are placed
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
@selbekk
selbekk / withApiState.js
Created Jul 24, 2018
A simple api state machine implementation
View withApiState.js
const withApiState = TargetComponent =>
class extends React.Component {
state = {
current: "idle"
};
apiState = {
pending: () => this.setState({ current: "pending" }),
success: () => this.setState({ current: "success" }),
error: () => this.setState({ current: "error" }),
@selbekk
selbekk / TheBestPage.js
Last active Jul 25, 2018
A pretty neat boring ol' page!
View TheBestPage.js
class SomePage extends React.Component {
async componentDidMount() {
const { apiState } = this.props;
apiState.pending();
try {
const res = await fetch('/api/some-data');
const data = await res.json();
apiState.success();
} catch (e) {
apiState.error();
@selbekk
selbekk / SomeBetterPage.js
Last active Jul 25, 2018
A slightly less boring ol' API backed page
View SomeBetterPage.js
class SomePage extends React.Component {
async componentDidMount() {
const { apiState= this.props;
apiState.next();
try {
const res = await fetch('/api/some-data');
const data = await res.json();
apiState.next(true);
} catch (e) {
apiState.next(false);
@selbekk
selbekk / ApiStateMachinePart2.js
Created Jul 23, 2018
API state machine part 2
View ApiStateMachinePart2.js
const withApiState = TargetComponent => class extends React.Component {
state = {
current: 'idle',
};
next = (input) => {
let nextState;
switch (this.state.current) {
case 'idle': nextState = 'pending'; break;
case 'pending': nextState = input ? 'success' : 'error'; break;
default: nextState = 'idle';
You can’t perform that action at this time.