Skip to content

Instantly share code, notes, and snippets.

Avatar

Mike Zarandona mike-zarandona

View GitHub Profile
@mike-zarandona
mike-zarandona / commands.js
Created Apr 5, 2019
Cypress custom command to check if an element is in the viewport
View commands.js
Cypress.Commands.add('shouldBeInViewport', { prevSubject: true }, subject => {
cy.document().then(doc => {
let clientHeight = doc.documentElement.clientHeight
let viewportTop = doc.documentElement.scrollTop
let viewportBottom = viewportTop + clientHeight
let subjectTop = subject[0].offsetTop
cy.expect(subjectTop).to.be.at.least(viewportTop)
cy.expect(subjectTop).to.be.at.most(viewportBottom)
})
@mike-zarandona
mike-zarandona / coolers-shades.js
Last active Nov 5, 2018
A tiny script which can be pasted into the console at https://coolers.co to create a listing of all the generated color shades.
View coolers-shades.js
let allColors = [[], [], [], [], []]
$('.palette-shades-row').each((i, thisRow) => {
$(thisRow)
.find('.palette-shades-col')
.each((j, thisCol) => {
allColors[j].push('#' + $(thisCol).data('color'))
})
})
@mike-zarandona
mike-zarandona / Statamic-Admin-iOS-Install-as-WebApp
Created Oct 12, 2014
Two `<meta/>` tags and a `<script/>` tag to allow iOS users to use the "Add to Home Screen" function in Mobile Safari. This is convenient in maximizing screen real estate when composing in `/admin`. This is a modification to `/admin/themes/ascent/layouts/default.php`
View Statamic-Admin-iOS-Install-as-WebApp
<?php
$current_user = Auth::getCurrentMember();
$name = $current_user->get('name');
?><!doctype html>
<html lang="<?php echo Config::getCurrentLanguage(); ?>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Statamic Control Panel</title>
<link rel="stylesheet" href="<?php echo Path::tidy(Config::getSiteRoot().'/'.$app->config['theme_path']) ?>css/ascent.min.css">
@mike-zarandona
mike-zarandona / editor-style.css
Created Jun 2, 2017 — forked from vielhuber/editor-style.css
TinyMCE Advanced Custom Formats / Styles / Shortcode Buttons
View editor-style.css
/* step 1: load this in editor-style.css in the theme folder */
/* step 2: activate function "Create CSS classes menu" in tinymce advanced */
/* this gets shown automatically in the formats dropdown */
.MY-CUSTOM-CLASS {
background-color:red;
}
@mike-zarandona
mike-zarandona / For Sandwiches
Last active May 8, 2017
for_sandwiches.js?
View For Sandwiches
for { sandwiches
while lettuce => 0
return true; }
else (return vicky);
@mike-zarandona
mike-zarandona / Weather Data + Icons from Yahoo.html
Last active Jan 8, 2016
Weather icon output parameter functions. `weatherData()` will fetch data from Yahoo's servers for a particular geography, and `weatherOutput()` handles parsing the data and writing the results to the DOM. Relies on the Yahoo Weather API and Weather Icons by Erik Flowers https://developer.yahoo.com/weather/ http://erikflowers.github.io/weather-ic…
View Weather Data + Icons from Yahoo.html
<head>
<!-- Yahoo Weather Data -->
<script>
var yqlCallback = function(data) {
var extractedData = data.query.results.channel.item;
weatherData = extractedData;
},
weatherData;
</script>
@mike-zarandona
mike-zarandona / PHP Cache Buster
Created Jan 13, 2014
Adding this bit of PHP to the end of a stylesheet or script incorporation will dynamically append the UTC time to the URL - making it "unique" on every load. EXTREMELY helpful for clients who might not know how to clear their browser cache.
View PHP Cache Buster
<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css?r=<?php echo time(); ?>" />
<script type="text/javascript" href="path/to/javascript.js?r=<?php echo time(); ?>"></script>
@mike-zarandona
mike-zarandona / RetinaMixin.less
Created Oct 23, 2013
Retina LESS Mixin. Makes it super easy to specify one background image to cover both standard and retina views.
View RetinaMixin.less
.retina(@bg-image, @size: cover, @file-type: 'png'){
background-image: url('@{path}@{bg-image}.@{file-type}');
background-size: @size;
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
background-image: url('@{path}@{bg-image}@2x.@{file-type}');
background-size: @size;
@mike-zarandona
mike-zarandona / TicketPunch.less
Last active Dec 20, 2015
The .ticket-punch() mix-in allows for very easy creation of "punchouts" on the left and right side of an element using :before and :after pseudo-elements.
View TicketPunch.less
.ticket(@size: 11px, @bgColor: #fff, @borderStyle: solid, @borderWidth: 1px, @borderColor: #333) {
position: relative;
border: @borderStyle @borderWidth @borderColor;
text-align: center;
padding: 10px 20px;
display: inline-block;
&:before {
position: absolute;
content: '';
width: @size;
@mike-zarandona
mike-zarandona / RetinaMixin3.less
Last active Aug 29, 2015
Retina LESS Mixin v3 - now makes it super easy to specify one background image to cover three image sizes (@1x|@2x|@3x).
View RetinaMixin3.less
.retina3(@bg-image, @size: cover, @file-type: 'png'){
background-image: url('@{path}@{bg-image}.@{file-type}');
background-size: @size;
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
background-image: url('@{path}@{bg-image}@2x.@{file-type}');
background-size: @size;