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

@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.')
}
})

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

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

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?

How to write smarter CSS animations

There are several tricks to writing efficient CSS animations that few people seem aware of. Most people borrow directly from common libraries such as Animate.css without realising how bloated they are.

You can:

  1. Omit start or end frames for greater versatility with less code.
  2. Combine similar frames.
  3. Combine animations to reduce keyframes declarations.
  4. Reverse animations to avoid separate "In" and "Out" keyframes.
@jaydenseric
jaydenseric / apollo-link-token.mjs
Created November 11, 2017 08:48
An Apollo Link for setting an auth token header.
@jaydenseric
jaydenseric / .env
Created October 11, 2017 06:11
Custom fragment matcher and schema fetching script for `apollo-cache-inmemory`.
GRAPHQL_URI=http://localhost:3001/graphql