Skip to content

Instantly share code, notes, and snippets.

@MrJackdaw
MrJackdaw / api-config.example.js
Last active August 9, 2021 00:44
SPA Core | Application State and Network Manager
import APIconfig from "./api-config";
// SECTION 1: Create Your endpoints.
// For separation of concerns, you can create these in a separate file
// and import them wherever you create your `APIConfig` instance.
//
// Note: the following is entirely mocked (i.e. not a real API that
// I know of), but is meant to convey the idea of using `APIConfig`.
const MY_BASE_URL = "https://api.example.com"
@MrJackdaw
MrJackdaw / AsyncComponentLoader.js
Created April 18, 2019 01:45
React Async Component Loader
import React, { Component } from 'react';
/**
* HOC for asynchronously loading a component dependency.
*
* Use: replace
* import MyComponent from './path/to/my-component';
*
* With:
* const MyComponent = AsyncLoader(() => import('./path/to/my-component'));
#!//bin/bash
# Helper script to install and initialize @jackcom libraries and subdirectories
# after create-react-app install. `chmod 700` and run from app's `package.json` layer.
#
# Note: Installs @jackcom/raphsducks and @jackcom/app-network-layer
function makeIndexFile {
if [ ! -e $1 ]
then
@MrJackdaw
MrJackdaw / animations.scss
Last active August 19, 2021 00:54
CSS Quick-Start
/******************************************
* File : Animations.scss
*******************************************/
@keyframes beacon {
0% {
transform: scale(1, 1);
opacity: 1;
}
100% {
transform: scale(4, 4);
@MrJackdaw
MrJackdaw / AsyncScriptLoader.js
Last active April 18, 2019 13:48
Reusable class for loading external script files (e.g. from CDN)
// Inspiration from: https://www.fullstackreact.com/articles/Declaratively_loading_JS_libraries/index.html
// ================================================================================
// Summary: a handy class for dynamically loading and using async JS libs in a ReactJS app
// ================================================================================
//
// Usage:
// 1. create a `ScriptCache` instance:
// const scriptCache = new ScriptCache(["http://remote.cdn.com/myLibrary.min.js", "http://..."]);
// 2. pass any functions that depend on window globals (from your script) into `scriptCache.onLoad`
// ================================================================================
@MrJackdaw
MrJackdaw / UIView+Border.swift
Last active May 12, 2023 19:02
Swift 3 Extension for adding border to one side of UIView
// This syntax reflects changes made to the Swift language as of Aug. '16
extension UIView {
// Example use: myView.addBorder(toSide: .Left, withColor: UIColor.redColor().CGColor, andThickness: 1.0)
enum ViewSide {
case Left, Right, Top, Bottom
}
@MrJackdaw
MrJackdaw / UIView+Border.swift
Last active January 21, 2019 12:40
Swift 2 Extension for adding a border to one side of a UIView object
extension UIView {
/* Example use: myView.addBorder(
toSide: .Left,
withColor: UIColor.redColor().CGColor,
andThickness: 1.0
)
*/
enum ViewSide {
@MrJackdaw
MrJackdaw / pieChart.js
Created August 26, 2015 18:10
Function for generating a two-color pie chart using D3. Assumes d3 is included and accessible in current scope.
/**
* Params below: use as-is to generate a hollow two-figure pie chart (donut chart)
* @var[width]: pie chart width
* @var[height]: pie chart height
* @var[innerRadius]: inner (hollow) circle radius
* @var[colorRange]: first and second (respective) colors rendered in pie chart
* @var
*/
var width = 90,
height = 90,
@MrJackdaw
MrJackdaw / fixElem.js
Last active August 29, 2015 14:24
A small AngularJS directive (ng-1.3.x+) for affixing an element on page scroll
'use strict';
/**
* 'FIX ELEMENT': Locks element to specified coordinates (or window top)
* Optional Directive Attributes:
* [number] top: Fixed Element's distance from top (px),
* [number] left: Fixed Element's distance from left (px),
* [number] right: Fixed Element's distance from right (px),
* [number] padStart: Additional px padding used to calculate when the fix should be triggered
* [string] target: CSS selector of a sibling element.