Skip to content

Instantly share code, notes, and snippets.

Avatar
🚗
Consulting at Statens Vegvesen

Kristofer Giltvedt Selbekk selbekk

🚗
Consulting at Statens Vegvesen
View GitHub Profile
View code-snippets.json
{
"Create a useState block": {
"prefix": ["useState", "us"],
"body": [
"const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = React.useState(${2:initialState})"
],
"description": "Create a regular useState hook"
},
"Create a useEffect block": {
"prefix": ["useEffect", "ue"],
@selbekk
selbekk / Main.elm
Created Jan 2, 2020
Dad joke app in Elm
View Main.elm
module Main exposing (..)
import Browser
import Html exposing (..)
import Html.Attributes as A
import Html.Events as Events
import Http
main =
@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();
You can’t perform that action at this time.