Skip to content

Instantly share code, notes, and snippets.

Avatar

Jake Bellacera jakebellacera

View GitHub Profile
@jakebellacera
jakebellacera / 2x-bg-images.less
Created Apr 6, 2015
simple 2x images in LESS
View 2x-bg-images.less
// Sets a 1x and a 2x background-image on an element.
//
// Arguments:
// @path - a String path to the 1x version of the image. The 2x version of this
// image must exist in the same directory as the 1x and have "_2x" at
// the end of its filename.
// @size - the value for the background-size attribute (e.g. 10px 20px; 100%).
.bg-image(@path, @size) {
background-image: url(@path);
background-size: @size;
View floodlight-click-handler.js
document.getElementById("button").addEventListener("click", function(e) {
e.preventDefault();
var url = this.getAttribute("href", 2);
createFloodlightTag("source", "type", "cat", function() {
window.location = url; // Redirect the user after the tag successfully fires
});
});
function createFloodlightTag(source, type, cat, callback) {
@jakebellacera
jakebellacera / search-posts-by-guest-authors.php
Last active Jul 19, 2018
Include posts from Co-Authors Plus Guest Authors in Wordpress' search results
View search-posts-by-guest-authors.php
<?php defined('ABSPATH') or die();
/**
* Include posts from guest authors in the search results.
* @author jakebellacera
*/
add_filter('posts_clauses', 'search_posts_clauses', 10, 2);
function search_posts_clauses($clauses, $query) {
if (!$query->is_main_query && !$query->is_search && !$query->is_admin)
return $clauses;
@jakebellacera
jakebellacera / backbone.dsl.coffee
Last active Aug 29, 2015
an example demoing a DSL for backbone objects
View backbone.dsl.coffee
class Something extends Backbone.Model
is: ["validatable", "sortable"]
validations:
phoneNumber:
required:
message: "this is a custom message for when you're missing the phone number!"
matches: /\d{10}/
sortable:
@jakebellacera
jakebellacera / frontend-optimization-techniques.md
Created Jul 13, 2014
A random write-up discussing front-end optimization techniques
View frontend-optimization-techniques.md

Below are a list of best practices and techniques that you should be using while building out your HTML5 banners (and other websites).

Styles

CSS should be clear and concise. You should not have any rules that are unused. You can check for unused styles by running the "Audit" feature found in Chrome's Developer Tools. Try to combine rules if possible to retain wasted bytes.

JS

JS should be clear and concise. Try not to use external libraries at all if possible. Try to leverage recursive functions whenever possible to reduce byte-size.

@jakebellacera
jakebellacera / how-to-enable-sourcemaps.md
Last active Jun 14, 2019
How to enable source maps for your browser.
View how-to-enable-sourcemaps.md

How to enable source maps

Source mapping is a technique that "maps" your browser inspector's line numbers to the source file. This is useful when working with assets that are compiled from LESS, SASS, Coffeescript and so on. Source maps can also be used with minified assets that would normally have their line numbers removed. If you're curious, here's some more information regarding source maps.

Chrome

  1. Open Developer Tools.
    • Mac users: View > Developer > Developer Tools.
  2. Click the Settings cog icon in the upper-right corner of the Developer Tools window.
  3. Under the Sources section, check the box(es) for the source maps you want to enable.
View default_osx_httpd.conf
#
# This is the main Apache HTTP server configuration file. It contains the
# configuration directives that give the server its instructions.
# See <URL:http://httpd.apache.org/docs/2.2> for detailed information.
# In particular, see
# <URL:http://httpd.apache.org/docs/2.2/mod/directives.html>
# for a discussion of each configuration directive.
#
# Do NOT simply read the instructions in here without understanding
# what they do. They're here only as hints or reminders. If you are unsure
View markdown-notes-test.md

Just testing notes in Markdown. The one below is in a blockquote:

Protip! Press + Q to make your Mac faster.

The one below is squished between to hrs:


Important! This is something you should know about.

@jakebellacera
jakebellacera / sass_function_var.rb
Created Mar 14, 2014
Dynamically calls a SASS variable by a string (e.g. var("foo" + "bar") => $foobar).
View sass_function_var.rb
# To use this in your SASS project, simply load this module into
# your environment.
module Sass::Script::Functions
# Dynamically calls a variable by a string
# e.g. var("foo" + "bar") => $foobar
def var(name)
assert_type name, :String, :name
@environment.var(name.value)
@jakebellacera
jakebellacera / css_time_to_milliseconds.js
Created Feb 27, 2014
CSS Time to Milliseconds - useful for timing functions around CSS animations
View css_time_to_milliseconds.js
/*
* CSS Time to Milliseconds
* by Jake Bellacera (http://jakebellacera.com)
* ============================================
*
* Converts CSS time into milliseconds. Useful for timing functions around CSS animations.
* It supports both seconds (s) and milliseconds (ms).
*
* Arguments:
* time_string - string representation of a CSS time unit (e.g. "1500ms" or "1.5s")
You can’t perform that action at this time.