Skip to content

Instantly share code, notes, and snippets.

Avatar
🦍
Swinging from the trees

John Serrao jserrao

🦍
Swinging from the trees
View GitHub Profile
@jserrao
jserrao / gist:2fe9b3770786b9774b537b8b475f53ee
Last active Nov 7, 2017
Verifying my Blockstack ID is secured with the address 19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs https://explorer.blockstack.org/address/19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs
View gist:2fe9b3770786b9774b537b8b475f53ee
Verifying my Blockstack ID is secured with the address 19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs https://explorer.blockstack.org/address/19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs
@jserrao
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
window.getComputedStyle(
document.querySelector('.element'), ':before'
);
@jserrao
jserrao / regex.js
Created Sep 7, 2016
Basic regex for HTML
View regex.js
// All regex start and with forward slashes
/(conditions-here)/
// Put g character at end of regex to get recursion
/(conditions-here)/g
// Matches all opening HTML tags
/(<\w+\b>)/g
// Matches all <a href="anything">
@jserrao
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;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
@jserrao
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
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
<?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
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
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
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
<?php
$my_path = dirname(__FILE__);
echo $my_path;
?>
@jserrao
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() {
$(this).parent().next().slideDown();