Skip to content

Instantly share code, notes, and snippets.

Jof Arnold JofArnold

Block or report user

Report or block JofArnold

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@JofArnold
JofArnold / Login.m
Last active Sep 17, 2019
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]
You can’t perform that action at this time.