Skip to content

Instantly share code, notes, and snippets.

Avatar

Jof Arnold JofArnold

View GitHub Profile
@JofArnold
JofArnold / Fastfile
Last active Jul 5, 2021
Fastfile for creating apps on App Store Connect as well as certs, building and uploading to Testflight
View Fastfile
# --------------------------------------------------------------------------------
#
# About
#
# Here is a useful Fastfile for delivering a multiple varients (targets) of an app
# to, ultimately, Testflight.
# The project is called "cione" and has two schemes and two targets called
# "cione" and "citwo".
@JofArnold
JofArnold / Login.m
Last active Jun 24, 2021
Using promises in React Native modules with Swift
View Login.m
// Created by react-native-create-bridge
// import RCTBridgeModule
#if __has_include(<React/RCTBridgeModule.h>)
#import <React/RCTBridgeModule.h>
#elif __has_include(“RCTBridgeModule.h”)
#import “RCTBridgeModule.h”
#else
#import “React/RCTBridgeModule.h” // Required when used as a Pod in a Swift project
#endif
@JofArnold
JofArnold / NavLink.js
Created Feb 1, 2018
React Router NavLink with inactiveClassName and isActive child function enhancements
View NavLink.js
@JofArnold
JofArnold / downshift-example.js
Last active Dec 1, 2017
Example of how to use Downshift as a controlled component with arbitrary items
View downshift-example.js
// Untested code, but hopefully it gives you an idea.
// Ping me @jofarnold on Twitter if you get stuck
import React, { Component } from "react";
import Downshift from "downshift";
import PropTypes from "prop-types";
function nodeFromItem(id, items) {
return items.find(({ uuid }) => uuid === id);
}
@JofArnold
JofArnold / donut.js
Created Sep 29, 2017
Donut Chart using Styled Components
View donut.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
const dimsFromProps = ({ size, strokeWidth, value }) => {
const halfsize = size * 0.5;
const radius = halfsize - strokeWidth * 0.5;
const circumference = 2 * Math.PI * radius;
const strokeVal = value * circumference / 100;
const dashVal = strokeVal + " " + circumference;
View css-composition.md

The problem with SASS mixins*

  1. mixins with SASS can balloon your css files quickly.
  2. mixins stop it being clear where stuff came from (can't search for class names for instance).

WARNING: The below is pseudo-code as I'm too lazy to double-check the APIs, output etc:

@mixin flexThing {
  color: red;
@JofArnold
JofArnold / bem-v-css-modules.scss
Last active Dec 31, 2016
How BEM encourages inflation of code whereas CSS modules compares reduction of code
View bem-v-css-modules.scss
/*
You have a component called MyComponent.jsx and a decidated "locally scoped"
scss file called MyComponent.scss.
For one of the HTML nodes you wish to add a clearfix using something like:
*/
...:after {
clear: both;
content: ".";
@JofArnold
JofArnold / grunt-contrib-concat-json
Created Jul 26, 2013
Snippet of Gruntfile.coffee code to wrap a number of json files and attach them to the namespace. Requires grunt-contrib-concat. More flexible than using some of the grunt json packages
View grunt-contrib-concat-json
concat:
json:
src: ['source/files/here.json']
dest: 'output/files/here.js'
options:
banner: "(function(namespace){\n'use strict'\nnamespace.json={};\n"
footer: "\n})(YOURNAMESPACEHERE)"
process: (src,filepath) ->
arr = filepath.split '/'
filename = arr[arr.length-1]