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

Video conversion with FFmpeg

Install

On mac:

1. Download the latest release.
2. Extract the binary and place it in /usr/local/bin.

Command basics

jaydenseric

/Applications/ImageAlpha.app/Contents/MacOS/pngquant 64 *.png --ext .png --force

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.

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

<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

#!/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

// 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

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: