Skip to content

Instantly share code, notes, and snippets.

Nicolas Gallagher necolas

Block or report user

Report or block necolas

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
@necolas
necolas / README.md
Last active Nov 5, 2019
Experimenting with component-based HTML/CSS naming and patterns
View README.md

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name
@necolas
necolas / Hoverable.js
Last active Nov 4, 2019
Hover styles in React Native for Web
View Hoverable.js
import createHoverMonitor from './createHoverMonitor';
import { element, func, oneOfType } from 'prop-types';
import React, { Component } from 'react';
const hover = createHoverMonitor();
/**
* Use:
* <Hoverable>
* {(hover) => <View style={hover && styles.hovered} />}
@necolas
necolas / Composite-Link.js
Created Sep 19, 2018
Next.js links with React Native for Web
View Composite-Link.js
@necolas
necolas / snippet.js
Created Jun 14, 2011
Optimised async loading of cross-domain scripts
View snippet.js
/*
* Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
* Better handling of scripts without supplied ids.
*
* N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
*/
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
@necolas
necolas / App.js
Last active Jul 10, 2019 — forked from trueadm/flare-ideas.jsx
React event responders
View App.js
// We can listen for events (e.g., 'press. or 'focuswithin') that are fired from responders,
// if they are allowed to bubble.
//
// context.dispatchEvent(eventObject, listener, eventPriority, bubbles)
//
// This allows us to prevent certain events from bubbling up the tree, e.g., 'focus', 'scroll'.
import React, {useRef, useState} from 'react';
import {Pressable, Text, View} from 'react-ui';
import {PressListener} from 'react-events/press';
View ie-css-hacks.css
/*
* Property prefix hacks
*/
/* IE6 only - any combination of these characters */
_ - £ ¬ ¦
/* IE6/7 only - any combination of these characters */
@necolas
necolas / .htaccess
Created Apr 9, 2012
Simple, quick way to concatenate, minify, and version static files in a Wordpress theme
View .htaccess
# Filename-based cache busting
# taken from https://github.com/h5bp/html5-boilerplate/
# This rewrites file names of the form `name.123456.js` to `name.js`
# so that the browser doesn't use the cached version when you have
# updated (but not manually renamed) the file.
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
@necolas
necolas / _todo.md
Created Jun 30, 2012
Grunt tasks to process HTML files and produce a deploy directory of optimized files
View _todo.md
  • Avoid reprocessing the same block in different HTML files.
  • Throw warning when processing a different block to an existing destination file. Hashing will avoid collisions, but introduce confusion.
  • Add file versioning for inline media and CSS images.
  • Avoid need for 'usemin' task - get the replacement element pattern from the first/last HTML element in actual block being replaced. Added benefit of preserving other attributes that may exist (e.g. title, media).

Acknowledgements: This is an adaption of some of Mickael Daniel's work on h5bp/node-build-script

@necolas
necolas / stylesheet-injector.js
Created Nov 5, 2010
Create and append style sheets to document <head> using JavaScript
View stylesheet-injector.js
(function() {
var css = [
'/css/default.css',
'/css/section.css',
'/css/custom.css'
],
i = 0,
link = document.createElement('link'),
head = document.getElementsByTagName('head')[0],
tmp;
@necolas
necolas / using-OnLayout.js
Last active Mar 14, 2019
React Pressable / OnLayout
View using-OnLayout.js
/**
* OnLayout is built upon: View (and ResizeObserver), StyleSheet
*/
const elementBreakpoints = {
small: { minWidth: 200 },
medium: { minWidth: 300 }
large: { minWidth: 500 }
};
You can’t perform that action at this time.