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 / 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) {
$("button").on('activate', function() {
alert('Button activated!');
jaydenseric /
Created Dec 15, 2013
Proposed syntax for SilverStripe template includes with content as a parameter like Sass mixin content.
<!------------------------ AboutPage layout -->
<!-- Header stuff -->
<% include HeroBanner %>
<% end_include %>
jaydenseric /
Last active Nov 10, 2019
A quick guide to using FFmpeg to create cross-device web videos.

Video conversion with FFmpeg


On mac:

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

Command basics

jaydenseric / gist:a4e33d4b990539471af9
Created Sep 28, 2015
Batch ImageAlpha processing via Terminal
View gist:a4e33d4b990539471af9
/Applications/ 64 *.png --ext .png --force
jaydenseric /
Last active Jan 26, 2019
Front end development methodology

Front end development methodology


  • 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 /
Last active Mar 12, 2019
Find unused Sass variables via Terminal
#!/usr/bin/env bash
# Usage:
# 1. Save script in project.
# 2. Run "chmod +x".
# 3. Run script, pointing to Sass directory: "./ ./scss".
find "$1" -type f -name "*.scss" -exec grep -o "\$[$VAR_NAME_CHARS]*" {} ';' | sort | uniq -u
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" />
<button class="play-toggle">Toggle play</button>
<button class="mute-toggle">Toggle mute</button>
// Initialize video player
jaydenseric /
Last active May 6, 2018
Gource repo visualization
# Uses Gource ( to generate a lossless PPM and a high quality MP4 visualizing the history of a Git repo.
# By Jayden Seric:
# Install Gource and FFmpeg with Homebrew:
# brew install gource
# brew install ffmpeg
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.
window.addEventListener('submit', (event) => {
if (! && ! {
window.alert('Please correct invalid form fields and resubmit.')

Atom setup guide


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


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

You can’t perform that action at this time.