Skip to content

Instantly share code, notes, and snippets.

View TCotton's full-sized avatar
🏠
Working from home

Andrew Walpole TCotton

🏠
Working from home
View GitHub Profile
@deebloo
deebloo / shadow-element.ts
Last active January 25, 2023 22:04
Small utility for apply html template and construct-able stylesheets to custom elements.
import { shadow, ShadowTemplate, html, css } from './shadow.js';
const template: ShadowTemplate = {
css: css`
:host {
display: contents;
}
`.
html: html`
<slot></slot>
@sibelius
sibelius / webpack_node_fallback.ts
Created April 12, 2021 19:29
Webpack 5 Node fallback
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
}

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);
@superjose
superjose / .gitlab-ci.yml
Last active February 19, 2024 10:22
This is an example of a .gitlab-ci.yml that is required for Continuous Integration on GitLab projects.
# 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.
@Kruemelkatze
Kruemelkatze / ! Theming Ant Design with Sass and Webpack.md
Last active June 4, 2024 21:55
Theming Ant Design with Sass and Webpack

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)
@kerryboyko
kerryboyko / README.md
Last active April 26, 2023 16:08
VueJS Best Practices Guide

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.

@mulhoon
mulhoon / Highcharts Cheat Sheet
Last active March 22, 2023 18:43
Highcharts Cheat Sheet
$('#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.