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

jaydenseric

Run each of the following lines, replacing yourdomain.com and codehere with your details:

now dns add yourdomain.com @ TXT google-site-verification=codehere
now dns add yourdomain.com @ MX ASPMX.L.GOOGLE.COM 1
now dns add yourdomain.com @ MX ALT1.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT2.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT3.ASPMX.L.GOOGLE.COM 10
now dns add yourdomain.com @ MX ALT4.ASPMX.L.GOOGLE.COM 10

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

#!/bin/bash

# Uses Gource (http://gource.io) to generate a lossless PPM and a high quality MP4 visualizing the history of a Git repo.

# By Jayden Seric: https://gist.github.com/jaydenseric/df3263eb3c33856c11ce

# Install Gource and FFmpeg with Homebrew:
#   brew install gource
#   brew install ffmpeg

jaydenseric

<figure class="video-player">
  <video preload="none" width="1280" height="720" poster="video.jpg">
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
  </video>
  <button class="play-toggle">Toggle play</button>
  <button class="mute-toggle">Toggle mute</button>
</figure>
<script>
  // Initialize video player

jaydenseric

#!/usr/bin/env bash

# Usage:
# 1. Save script in project.
# 2. Run "chmod +x find-unused-sass-variables.sh".
# 3. Run script, pointing to Sass directory: "./find-unused-sass-variables.sh ./scss".

VAR_NAME_CHARS='A-Za-z0-9_-'
find "$1" -type f -name "*.scss" -exec grep -o "\$[$VAR_NAME_CHARS]*" {} ';' | sort | uniq -u

jaydenseric

Front end development methodology

Philosophy

• All public-facing content crawlable at page load.
• All page content pieces linkable, and linkable cross-device.
• Semantics trumps aesthetics.
• All content to all users. Never show or hide content based on device.
• Device agnostic design and UX. Mobile and widescreen should look and feel similar; basically less media-queries = more device agnostic.
• Consider viewport height as much as width.