Skip to content

Instantly share code, notes, and snippets.

💭
Smelling the roses...

John Serrao jserrao

💭
Smelling the roses...
Block or report user

Report or block jserrao

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
@jserrao
jserrao / gatsby-node.js
Last active Nov 25, 2018
gatsby-node.js with DOM Parsing
View gatsby-node.js
// Give Node access to path
const path = require('path')
const fs = require('fs')
// Setup parser for taking apart the HTML Description hack stuff from Shopify
const DomParser = require('dom-parser')
const shopifyDescParser = new DomParser()
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
@jserrao
jserrao / wp-menu-switch.js
Created Apr 18, 2018
A JS <a> and <li> switcher for WordPress menus
View wp-menu-switch.js
/* MAIN MENU ITEM SWITCH
*
* Description:
* For whatever reason, it's near impossible to get the WP markup in the menu to switch around
* So we're begrudgingly doing it in JS
* This is accomplished by using a regex that breaks the capture after each list item end tag
*
* Usage:
* Really simple - just pass in the class / ID for the sidebar menu container
* This function is not really reusable due to the regex but encapsulation is a good idea in a big JS file
@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 / scroll-checker.js
Last active Oct 31, 2016
Click anywhere to close an active off-canvas menu
View scroll-checker.js
/* SCROLL CHECKER
*
* Description:
* This function scans all incoming clicks.
* This allows users to easily click outside an active offcanvas menu.
*
*
* Usage:
* This function analyzes the kinds of clicks that could come a page and an offcanvas menu.
* It's checking for a hamburger menu, a menu closing mechanism, links in a menu and links on a page
@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 / url-segment.js
Created Jul 27, 2016
Get Last Segment of a URL in Javascript
View url-segment.js
var pageURL = window.location.href;
var lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
console.log(lastURLSegment);
@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
You can’t perform that action at this time.