Skip to content

Instantly share code, notes, and snippets.

View mike-zarandona's full-sized avatar

Mike Zarandona mike-zarandona

41 followers · 4 following
View GitHub Profile
@mike-zarandona
mike-zarandona / Weather Data + Icons from Yahoo.html
Last active September 14, 2021 13:44
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…
<head>
<!-- Yahoo Weather Data -->
<script>
var yqlCallback = function(data) {
var extractedData = data.query.results.channel.item;
weatherData = extractedData;
},
weatherData;
</script>
@mike-zarandona
mike-zarandona / "Responsive" Google Ads
Last active August 29, 2015 14:06
Fake-out responsive Google Ads. Works by showing one and hiding another at a particular breakpoint without using `display: none` which breaks the ads.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Large Banner -->
<ins class="adsbygoogle adblock_1 large"
style="display:block;width:728px;height:90px"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
@mike-zarandona
mike-zarandona / Inline-Block Columns
Created August 28, 2014 15:51
Pretty un-floated columns.
// columns
[class*="col-"] {
display: inline-block;
margin: 0 4% 0 -4px;
.box-sizing;
vertical-align: top;
&[class*="-left"] {
width: 68%;
text-align: center;
@mike-zarandona
mike-zarandona / PHP Cache Buster
Created January 13, 2014 21:52
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.
<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 October 23, 2013 18:41
Retina LESS Mixin. Makes it super easy to specify one background image to cover both standard and retina views.
.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 December 20, 2015 12:39
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.
.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;