Skip to content

Instantly share code, notes, and snippets.

View jaydenseric's full-sized avatar
🇦🇺
Deno, Node.js, GraphQL & React

Jayden Seric jaydenseric

🇦🇺
Deno, Node.js, GraphQL & React
View GitHub Profile
@jaydenseric
jaydenseric / gist:7113093
Created October 23, 2013 05:39
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.
$(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 December 15, 2013 23:53
Proposed syntax for SilverStripe template includes with content as a parameter like Sass mixin content.
<!------------------------ AboutPage layout -->
<header>
<!-- Header stuff -->
<header>
<% include HeroBanner %>
{$HeroBannerContent}
<% end_include %>
{$Content}
<footer>
@jaydenseric
jaydenseric / ffmpeg-web-video-guide.md
Last active November 12, 2024 21:24
A quick guide to using FFmpeg to create cross-device web videos.

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 September 28, 2015 00:42
Batch ImageAlpha processing via Terminal
/Applications/ImageAlpha.app/Contents/MacOS/pngquant 64 *.png --ext .png --force
@jaydenseric
jaydenseric / front-end-development-methodology.md
Last active October 4, 2023 18:43
Front end development methodology

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 December 14, 2019 10:14
Find unused Sass variables via Terminal
#!/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 October 29, 2024 14:40
A simple HTML5 video player.
<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 October 14, 2021 14:33
Gource repo visualization
#!/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 June 26, 2016 04:20
Fixes some browsers allowing invalid forms to submit.
// 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
jaydenseric / atom-setup-guide.md
Last active November 24, 2016 08:13
Atom setup guide

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: