Skip to content

Instantly share code, notes, and snippets.

🇦🇺
JS, GraphQL & React

Jayden Seric jaydenseric

🇦🇺
JS, GraphQL & React
Block or report user

Report or block jaydenseric

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
@jaydenseric
jaydenseric / gist:7113093
Created Oct 23, 2013
How to make a custom jQuery `activate` event. This is useful for UI elements that can be activated by mouse click or using the enter key for keyboard accessibility.
View gist:7113093
$(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
jaydenseric / AboutPage.ss
Created Dec 15, 2013
Proposed syntax for SilverStripe template includes with content as a parameter like Sass mixin content.
View AboutPage.ss
<!------------------------ AboutPage layout -->
<header>
<!-- Header stuff -->
<header>
<% include HeroBanner %>
{$HeroBannerContent}
<% end_include %>
{$Content}
<footer>
@jaydenseric
jaydenseric / ffmpeg-web-video-guide.md
Last active Nov 10, 2019
A quick guide to using FFmpeg to create cross-device web videos.
View ffmpeg-web-video-guide.md

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
jaydenseric / gist:a4e33d4b990539471af9
Created Sep 28, 2015
Batch ImageAlpha processing via Terminal
View gist:a4e33d4b990539471af9
/Applications/ImageAlpha.app/Contents/MacOS/pngquant 64 *.png --ext .png --force
@jaydenseric
jaydenseric / front-end-development-methodology.md
Last active Jan 26, 2019
Front end development methodology
View front-end-development-methodology.md

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
jaydenseric / find-unused-sass-variables.sh
Last active Mar 12, 2019
Find unused Sass variables via Terminal
View find-unused-sass-variables.sh
#!/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
jaydenseric / VideoPlayer.html
Last active Jun 27, 2019
A simple HTML5 video player.
View VideoPlayer.html
<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
jaydenseric / gource.sh
Last active May 6, 2018
Gource repo visualization
View gource.sh
#!/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
jaydenseric / form-validation-buggyfill.js
Created Jun 26, 2016
Fixes some browsers allowing invalid forms to submit.
View form-validation-buggyfill.js
// 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.')
}
})
View atom-setup-guide.md

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:

You can’t perform that action at this time.