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 / 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 / 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 / custom-search-acf-wordpress.php
Last active Sep 8, 2022 — forked from charleslouis/custom-search-acf-wordpress.php
PHP - Wordpress - Search - wordpress custom search function that encompasses ACF/advanced custom fields and taxonomies and split expression before request. I updated this original script with better documentation and XSS / SQL injection support.
View custom-search-acf-wordpress.php
/*
##############################
########### 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
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 / _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 / 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 / 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 / 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 / scroll-checker.js
Last active May 25, 2021
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 / 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'
);