jserrao

/* Mixin */
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {

jserrao

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

    <?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

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

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

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

// How to read a pseudo class in JS
window.getComputedStyle(
	document.querySelector('.element'), ':before'
);

jserrao

Verifying my Blockstack ID is secured with the address 19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs https://explorer.blockstack.org/address/19Qdh8zaHkHj6QxQdgf7eRnRjhhZkzaSBs

jserrao

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

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