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

/*
 ##############################
 ########### Search ###########
 ##############################
 
 Included are steps to help make this script easier for other to follow
 All you have to do is add custom ACF post types into Step 1 and custom taxonomies into Step 10
 I also updated this work to include XSS and SQL injection projection
 [list_searcheable_acf list all the custom fields we want to include in our search query]
 @return [array] [list of custom fields]

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

var pageURL = window.location.href;
var lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
console.log(lastURLSegment);

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

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

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