Skip to content

Instantly share code, notes, and snippets.

Swinging from the trees

John Serrao jserrao

Swinging from the trees
View GitHub Profile
jserrao / gist:2fe9b3770786b9774b537b8b475f53ee
Last active Nov 7, 2017
Verifying my Blockstack ID is secured with the address 19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs
View gist:2fe9b3770786b9774b537b8b475f53ee
Verifying my Blockstack ID is secured with the address 19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs
jserrao / pseudo-reader.js
Created Feb 24, 2017
Read a pseudo class in JS
View pseudo-reader.js
// How to read a pseudo class in JS
document.querySelector('.element'), ':before'
jserrao / regex.js
Created Sep 7, 2016
Basic regex for HTML
View regex.js
// All regex start and with forward slashes
// Put g character at end of regex to get recursion
// Matches all opening HTML tags
// Matches all <a href="anything">
jserrao / text-stroke.css
Created Jul 27, 2016
CSS Text Stroke with Text Shadow
View text-stroke.css
/* Adding text stroke using text-shadow, which most browsers actually know */
h1 {
color: white;
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
jserrao / _bootstrap-grid-supersmall-extension.scss
Created Jun 6, 2016
Bootstrap grid extension adds 5th breakpoint for super small devices (iPhone SE)
View _bootstrap-grid-supersmall-extension.scss
// Extending bootstrap grid concept for an extra smaller breakpoint via mixin
// Set small breakpoints (default xs is 480px)
$screen-xxs-min: 380px;
$screen-xs-min: 480px;
// Generate the super columns (xxs extension)
@mixin make-xxs-column($columns, $gutter: $grid-gutter-width) {
position: relative;
float: left;
jserrao / list-creator.php
Created Mar 15, 2016
Create four equally sized unordered lists <ul> with indeterminate amount of list items <li>
View list-creator.php
/* This is trickier than it sounds
* You have to think about getting the number of list items and then dynamically generating the lists
* In HTML, you have to know when to close the lists too but there aren't finite objects in this model
* The following example is using WordPress but you could do this on any PHP app
// 1- Setup WP_query variable to get all location posts
// posts_per_page=-1 shows all locations
// orderby=title, orders locations alphabetically by title
jserrao / slug.php
Created Jan 15, 2016
WordPress - Get Slug
View slug.php
// Something important to remember about WordPress is that it's functions act differently depending on your template
// This might be the single most annoying thing about WP
// You can get information out of WP but it's very situational
// 1- get the slug is with get_queried_object (on a page)
$slug = get_queried_object()->post_name;
// 2- Checkout the permalink, another way to do this (on a page)
$slug = basename(get_permalink());
jserrao / vertical_centering.scss
Created Jan 11, 2016
Vertical centering that works IE10+
View vertical_centering.scss
/* Mixin */
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
.element p {
jserrao / file_my_path.php
Created Oct 20, 2013
Easy way to figure out your server's path to the folder you are in. Just call this file in whatever folder and it will spit out the directory string.
View file_my_path.php
$my_path = dirname(__FILE__);
echo $my_path;
jserrao / jquery-accordion-icon-font.js
Created Sep 16, 2013
Doing an accordion with font icons that fade in/out
View jquery-accordion-icon-font.js
<script type="text/javascript">
(function($) {
//hides all older job panels to start and icons
var allPanels = $('.accordion > ul').hide();
var upIcons = $('.icon-circle-arrow-up').hide();
//.toggle function opens panel, switches icon on first click, closes panel, resets icon on second click
$('.accordion > h3 > a').toggle(
function() {