Andrew Walpole TCotton

What's SWR?

It's React Hooks for Remote Data Fetching, a hook designed to render data on demand.

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

Theming Ant Design with Sass and Webpack

This is a solution on how to theme/customize Ant Design (which is written in Less) with Sass and webpack. Ant itself offers two solutions and a related article on theming, but these are only applicable if you use Less, the antd-init boilerplate or dva-cli.

What this solution offers:

use a single sass-file to customize (no duplicate variables for your project and Ant)
hot reload compatibility
no dependencies on outdated npm modules
easy integration with your existing webpack setup (webpack 3+ tested)

Deverus Vue.js Style Guide

Guide for developing Vue.js applications.

v. 0.0.1

Vue.js is an amazing framework, which can be as powerful as Angular or React, the two big heavy hitters in the world of front-end frameworks.

However, most of Vue's ease-of-use is due to the use of Observables - a pattern that triggers re-renders and other function calls with the reassignment of a variable.

	import { shadow, ShadowTemplate, html, css } from './shadow.js';

	const template: ShadowTemplate = {
	css: css`
	:host {
	display: contents;
	}
	`.
	html: html`
	<slot></slot>

	config.resolve.fallback = {
	fs: false,
	tls: false,
	net: false,
	module: false,
	dns: false,
	path: require.resolve('path-browserify'),
	"https": require.resolve("https-browserify"),
	"http": require.resolve("stream-http"),
	"zlib": require.resolve("browserify-zlib"),

	import { useState, useEffect } from 'react'

	const UseLocalStorageState = (key: string, defaultValue: any) => {
	const [state, setState] = useState(() => {
	let val
	try {
	val = JSON.parse(window.localStorage.getItem(key) \|\| String(defaultValue))
	} catch (error) {
	val = defaultValue
	}

	# Reference: https://www.exclamationlabs.com/blog/continuous-deployment-to-npm-using-gitlab-ci/

	# GitLab uses docker in the background, so we need to specify the
	# image versions. This is useful because we're freely to use
	# multiple node versions to work with it. They come from the docker
	# repo.
	# Uses NodeJS V 9.4.0
	image: node:9.4.0

	# And to cache them as well.

	$('#container').highcharts({
	chart: {
	alignTicks: true, // When using multiple axis, the ticks of two or more opposite axes will automatically be aligned by adding ticks to the axis or axes with the least ticks.
	animation: true, // Set the overall animation for all chart updating. Animation can be disabled throughout the chart by setting it to false here.
	backgroundColor: '#FFF', // The background color or gradient for the outer chart area.
	borderColor: '#4572A7', // The color of the outer chart border.
	borderRadius: 5, // The corner radius of the outer chart border. In export, the radius defaults to 0. Defaults to 5.
	borderWidth: 0, // The pixel width of the outer chart border.
	className: null, // A CSS class name to apply to the charts container div, allowing unique CSS styling for each chart.
	defaultSeriesType: 'line', // Alias of type.