jaydenseric

$(document).ready(function() {
	$(document).on('click keypress', function(event) {
		if (event.type == 'click' || event.which == 13) {
			$(event.target).trigger('activate');
		}
	});
	$("button").on('activate', function() {
		alert('Button activated!');
	});
});

jaydenseric

<!------------------------ AboutPage layout -->

<header>
	<!-- Header stuff -->
<header>
<% include HeroBanner %>
	{$HeroBannerContent}
<% end_include %>
{$Content}
<footer>

jaydenseric

Atom setup guide

Config

• Settings, Editor, Invisibles. Tick Show Indent Guide and Show Invisibles.

Plugins

To install all the universally recommended plugins, in Terminal run:

jaydenseric

// Fixes some browsers allowing invalid forms to submit, mostly an issue with Safari allowing empty required fields.
// http://caniuse.com/#search=required
window.addEventListener('submit', (event) => {
  if (!event.target.noValidate && !event.target.checkValidity()) {
    event.preventDefault()
    window.alert('Please correct invalid form fields and resubmit.')
  }
})

jaydenseric

Fun with Sass & font icons

⚠️ This article is outdated: CSS in JS is far superior to Sass, and font icons are no longer a good idea. Use inline SVG React components and in certain situations plain old .svg files in img tags.

Icon fonts have been been best-practice for a while now. They allow us to use tons of fully styleable cross-browser vector icons with one lightweight HTTP request.

Folk typically use font icons via non-semantic presentational markup such as class="icon icon-happy-face" that should be avoided. With a pinch of Sass you can add icons to elements purely via your stylesheet using easy to remember names, without polluting your markup. Yay!

Setup

jaydenseric

OS X Mavericks RubyGems cleanup issue

Ever tried sudo gem cleanup in OS X Mavericks only to be hit with errors like this?

Attempting to uninstall sqlite3-1.3.7
Unable to uninstall sqlite3-1.3.7:
  Gem::InstallError: sqlite3 is not installed in GEM_HOME, try:
  gem uninstall -i /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/gems/2.0.0 sqlite3

jaydenseric

Font icons like a boss with Sass & Font Custom

⚠️ This article is outdated: First I moved on to a custom Gulp workflow, then for a while I used SVG symbols and external references with a polyfill. Now I use inline SVG React components, and occasionally plain old .svg files in img tags.

Here we take “Fun with Sass & font icons” to the next level by automating the tedious stuff, including the actual font generation.

Manage all your project’s font icons in one folder as nicely named SVG files. Add icons to this folder to have your fonts magically rebuilt and your Sass automatically set up for you to start using the icons via their nice names; without touching your markup or dealing with non-semantic class names.

What are the perks?

jaydenseric

How to write smarter CSS animations

There are several tricks to writing efficient CSS animations that few people seem aware of. Most people borrow directly from common libraries such as Animate.css without realising how bloated they are.

You can:

1. Omit start or end frames for greater versatility with less code.
2. Combine similar frames.
3. Combine animations to reduce keyframes declarations.
4. Reverse animations to avoid separate "In" and "Out" keyframes.

jaydenseric

import { ApolloLink } from 'apollo-link'

const createTokenLink = ({ getToken }) =>
  new ApolloLink((operation, forward) => {
    const token = getToken()
    if (token)
      operation.setContext({
        headers: {
          authorization: `Bearer ${token}`
        }

jaydenseric

GRAPHQL_URI=http://localhost:3001/graphql