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

@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.')
}
})
@jaydenseric
jaydenseric / responsive-iframes.md
Created Jan 9, 2018
“Responsive iframes without wrappers did you say?” blog post: https://jaydenseric.com/blog/responsive-iframes.
View responsive-iframes.md

Responsive iframes without wrappers did you say?

⚠️ This article is outdated: Don’t use jQuery. Also, this JS technique does not work well when server side rendering.

Responsive images are pretty intuitive; apply max-width: 100% and voila. But what to do about those pesky iframes (video embeds!) whose height does not remain in ratio to width when responding down? The most common technique you will come across dates back years and involves wrappers styled to preserve a hard-coded intrinsic aspect ratio (typically 16:9). Most of the popular scripts such as fitvids.js utilize this technique.

This approach sucks for few reasons:

  1. Wrappers may not play nice with your current setup. Perhaps your videos are added, sized and positioned via a CMS WYSIWYG.
  2. Is ~75 lines of jQuery really necessary?
View fun-with-sass-and-font-icons.md

Fun with Sass & font icons

⚠️ This article is outdated: CSS in JS is far superior to Sass, and font icons are no longer a good idea. Use inline SVG React components and in certain situations plain old .svg files in img tags.

Icon fonts have been been best-practice for a while now. They allow us to use tons of fully styleable cross-browser vector icons with one lightweight HTTP request.

Folk typically use font icons via non-semantic presentational markup such as class="icon icon-happy-face" that should be avoided. With a pinch of Sass you can add icons to elements purely via your stylesheet using easy to remember names, without polluting your markup. Yay!

Setup

View os-x-mavericks-rubygems-cleanup-issue.md

OS X Mavericks RubyGems cleanup issue

Ever tried sudo gem cleanup in OS X Mavericks only to be hit with errors like this?

Attempting to uninstall sqlite3-1.3.7
Unable to uninstall sqlite3-1.3.7:
  Gem::InstallError: sqlite3 is not installed in GEM_HOME, try:
  gem uninstall -i /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/gems/2.0.0 sqlite3
View font-icons-like-a-boss-with-sass-and-font-custom.md

Font icons like a boss with Sass & Font Custom

⚠️ This article is outdated: First I moved on to a custom Gulp workflow, then for a while I used SVG symbols and external references with a polyfill. Now I use inline SVG React components, and occasionally plain old .svg files in img tags.

Here we take “Fun with Sass & font icons” to the next level by automating the tedious stuff, including the actual font generation.

Manage all your project’s font icons in one folder as nicely named SVG files. Add icons to this folder to have your fonts magically rebuilt and your Sass automatically set up for you to start using the icons via their nice names; without touching your markup or dealing with non-semantic class names.

What are the perks?

View how-to-optimize-svg.md

How to optimize SVG

Editors like Illustrator can save out some really dumb SVG code sometimes. Properly optimized SVG files can be as much as 80% smaller. Bunches of empty groups, pointless attributes and many other inefficiencies decrease readability and reliability.

Every SVG file should be manually optimized in 3 passes using:

  1. Your vector graphic editor.
  2. The SVGO command-line optimization tool.
  3. Your text editor.
@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
You can’t perform that action at this time.