Skip to content

Instantly share code, notes, and snippets.

Ian McNally ianmcnally

Block or report user

Report or block ianmcnally

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
ianmcnally / ssr-react-with-hooks-and-hoc.js
Last active Oct 6, 2019
Server rendering React component that fetch data
View ssr-react-with-hooks-and-hoc.js
const React = require('react')
const ReactDomServer = require('react-dom/server')
const fetch = require('node-fetch')
function App(props) {
const { repos } = props
return React.createElement('p', {
children: repos.length ? repos[0].name : 'no name',
ianmcnally / grid-auto-placement-polyfill.js
Last active Feb 24, 2019
Grid auto placement polyfill
View grid-auto-placement-polyfill.js
import { columns, display, gridSpans, margin } from './css-modules-styles'
const COLUMNS = 12
const toArray = arrayLike =>
const placeItemsOnGrid = grid => {
const withGutters = grid.classList.contains(columns.withGutters)
let currentColumnSpansInRow = 0
let currentRow = 1
ianmcnally / lazy-image.js
Last active Sep 5, 2019
Lazy image loading
View lazy-image.js
import React, { Component } from 'react'
import type { ElementRef } from 'react'
type Props = { src: string, alt: string }
type State = { source?: string }
export default class LazyImage extends Component<Props, State> {
state = {}
ianmcnally / mock-css-modules-for-jest.js
Last active Jun 5, 2018
Mocks a directory of css files with a css-modules like object
View mock-css-modules-for-jest.js
const { parse } = require('css')
const { readdirSync, readFileSync } = require('fs')
const { basename, extname, resolve } = require('path')
const camel = require('lodash.camelcase')
const baseNameForCSSFile = filename => basename(filename, '.css')
const isAClassSelector = selector => /^\./.test(selector)
const removeLeadingDotAndTrailingSelectors = selector =>
ianmcnally / .eslintrc
Last active Jun 27, 2016
My eslint config
View .eslintrc
"rules": {
"indent": [
2, 2
"quotes": [
"linebreak-style": [
ianmcnally /
Created Aug 4, 2015
Stopping force pushes to master
currentBranch=$(git rev-parse --abbrev-ref HEAD)
lastCommand=$(ps -ocommand= -p $PPID)
if [[ $lastCommand =~ $disallowedCommand ]] && [ $currentBranch = $protectedBranch ]; then
echo "Force pushing to $protectedBranch is not allowed. Your push is rejected."
ianmcnally /
Last active Aug 9, 2018
Javascript frameworks for Gust

Javascript frameworks at Gust

Q: What’s it like at Gust?

  • Architecture of client-side code
  • Responsibilities

ianmcnally / .jscsrc
Last active Mar 3, 2016
JSCS config file
View .jscsrc
"disallowImplicitTypeConversion": ["numeric", "boolean", "binary", "string"],
"disallowKeywordsOnNewLine": ["else"],
"disallowMixedSpacesAndTabs": true,
"disallowTrailingWhitespace": true,
"disallowTrailingComma": true,
"disallowYodaConditions": true,
"disallowKeywords": [ "with" ],
"disallowMultipleLineBreaks": true,
"disallowMultipleVarDecl": "strict",
ianmcnally / gist:c986117b81f60bc107d3
Last active Aug 29, 2015
My week in angular, js, testing
View gist:c986117b81f60bc107d3

A week's small victories: Angular, Equality and Testing

Our work weeks are made up of victories both big and small. What really gets me writing is the small. The a-ha! moments. The high fives (internal ones count too). The green builds. The git pushes.

I spent my week creating dynamic forms and lists in Angular. I made them, fought with them, tested them, and came out the other side in one piece. Here's my story:

Writing and testing custom form validators

Custom form validators are a powerful feature in Angular.

ianmcnally /
Last active Aug 29, 2015
Coming to React from Angular

Coming to React from Angular

My friends started using it, Stride clients started asking for it, and it's been getting serious buzz on the internet. So I realized it was time for me to learn React.

I've been an Angular guy for the past couple years, and I've gotten pretty good at it. I've seen its nooks and crannies, and I've grown fond of it.

But, like I said, it was hard to ignore React.

It's fast, it's light, it's new and shiny. So I dug in. I recently released an app, Farely, which I'd written in Angular. (Note: I didn't use directives like I should have.) I thought it'd be the perfect opportunity to try out React, since the app could be composed of components. It also wouldn't need anything React doesn't offer, like routing or complex data modeling.

You can’t perform that action at this time.