Super Mario Clouds

Mario Clouds

Back in 2002 Cory Archangel made this awesome project where he took out everything from Super Mario Brothers but the looping clouds in the background. A bit different, this experiment randomly generates and scrolls clouds from Super Mario across an html 5 canvas forever.

View Project

23 February 2014

Helix Loader

Another Preloader (note only built for webkit right now)




click Read More to see the code.

Read more...

14 February 2014

Newport

newport

This small canvas experiment generates the geometry behind the icon Newport package design through javascript. I liked it so much I turned it into an iOS wallpaper, funny enough it the proportions are the same as the iOS home screen.

View Project

4 February 2014

Helvetica Neue Font Stack

I can never remember all of these, so just putting it here for convenience.

font-family: "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:800; font-stretch:normal;

font-family: "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:700; font-stretch:normal;

font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:normal;

font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal;

font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:normal;

font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:normal;

font-family: "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:200; font-stretch:normal;

font-family: "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:100; font-stretch:normal;

font-family: "HelveticaNeueBlackExtended", "HelveticaNeue-Black-Extended", "Helvetica Neue Black Extended", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:800; font-stretch:expanded;

font-family: "HelveticaNeueHeavyExtended", "HelveticaNeue-Heavy-Extended", "Helvetica Neue Heavy Extended", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; font-weight:700; font-stretch:expanded;

font-family: "HelveticaNeueBoldExtended", "HelveticaNeue-Bold-Extended", "Helvetica Neue Bold Extended", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:expanded;

font-family: "HelveticaNeueMediumExtended", "HelveticaNeue-Medium-Extended", "Helvetica Neue Medium Extended", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:expanded;

font-family: "HelveticaNeueExtended", "HelveticaNeue-Extended", "Helvetica Neue Extended", "HelveticaNeueRomanExtended", "HelveticaNeue-Roman-Extended", "Helvetica Neue Roman Extended", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:expanded;

font-family: "HelveticaNeueLightExtended", "HelveticaNeue-Light-Extended", "Helvetica Neue Light Extended", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:expanded;

font-family: "HelveticaNeueThinExtended", "HelveticaNeue-Thin-Extended", "Helvetica Neue Thin Extended", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:200; font-stretch:expanded;

font-family: "HelveticaNeueUltraLightExtended", "HelveticaNeue-Ultra-Light-Extended", "Helvetica Neue Ultra Light Extended", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:100; font-stretch:expanded;

font-family: "HelveticaNeueBlackCondensed", "HelveticaNeue-Black-Condensed", "Helvetica Neue Black Condensed", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:800; font-stretch:condensed;

font-family: "HelveticaNeueHeavyCondensed", "HelveticaNeue-Heavy-Condensed", "Helvetica Neue Heavy Condensed", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:700; font-stretch:condensed;

font-family: "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;

font-family: "HelveticaNeueMediumCondensed", "HelveticaNeue-Medium-Condensed", "Helvetica Neue Medium Condensed", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:500; font-stretch:condensed;

font-family: "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", "HelveticaNeueRomanCondensed", "HelveticaNeue-Roman-Condensed", "Helvetica Neue Roman Condensed", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:400; font-stretch:condensed;

font-family: "HelveticaNeueLightCondensed", "HelveticaNeue-Light-Condensed", "Helvetica Neue Light Condensed", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:300; font-stretch:condensed;

font-family: "HelveticaNeueThinCondensed", "HelveticaNeue-Thin-Condensed", "Helvetica Neue Thin Condensed", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif; font-weight:200; font-stretch:condensed;

font-family: "HelveticaNeueUltraLightCondensed", "HelveticaNeue-Ultra-Light-Condensed", "Helvetica Neue Ultra Light Condensed", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif; font-weight:100; font-stretch:condensed;

20 January 2014

Vertical Centering

Kinda the most common problem in css is centering content vertically. This post will be updated over time with all my favorite techniques for centering content vertically depending on different constraints.

The Table Method

.container-table{

    width:100%;
    height:500px;
    background-color: blue;
    margin-bottom: 20px;
}

.centered-table {
   display: table;
   width: 100%;
   height:100%;
}
.content-table {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
<div class="container-table">
    <div class="centered-table">
        <div class="content-table">
            <h1>table method</h1>
            <p>who knows</p>
        </div>
    </div>
</div>

The Pseudo Element Method

.container{

    width:100%;
    height:50%;
    background-color: blue;
    margin-bottom: 20px;
}

.centered{
    font-size:0;
    height:100%;
    margin: 0 auto;
    background-color: red;
    text-align: center;
}

.centered:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  /*margin-left: -0.25em;*/
}

.content{
    font-size:20px;
  text-align:left;
  background-color: blue;
  display: inline-block;
  vertical-align: middle;
}
<div class="container">
    <div class="centered">
        <div class="content full-width">
                <h1>Some content</h1>
                <p>some more content</p>
        </div>
    </div>
</div>

Or parent is unknown but child is known

.container
{
    position: relative;
}

.centered
{
    position: absolute;
    height: Xpx;
    width: Ypx;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
<div class="container">
    <div class="centered">
        <h1>Some content</h1>
        <p>some more content</p>
    </div>
</div>

18 January 2014

CSS3 Preloader

Here it is

Click Read More to see the code

Read more...

16 January 2014

Full Window Images With CSS and jQuery

Often for the landing page of a site we want to make a big impression and hit the user with a big image that takes up the full width of there browser. Here is a solution for doing so accomadating any image dimensions, and window sizes.

The HTML

<div class="splash">
<h1>Hello Splash</h1>
</div>

The CSS

.splash{
    background-image:url(splash.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    overflow: auto;
}

.splash h1{
    font-family: helvetica;
    position: relative;
    color:#fff;
    font-size: 72px;
    margin: 0;
    margin-top:-36px;
    width: 100%;
    text-align: center;
    display: block;
    height:72px;
    line-height: 72px;
    top:50%;
}

The Javascript

function setSplashHeight($el){
    $el.css({
        height: $(window).height()
    });
}

$(window).resize(function(){
    setSplashHeight($('.splash'));
}).resize();

The Result: View Demo

15 January 2014

Psuedo Element Hovers

The Result

The Markup

<ul id="#cool-links" class="inline">
    <li><a href="#" class="item selected">Art</a></li>
    <li><a href="#" class="item">Architecture</a></li>
    <li><a href="#" class="item">Interactive</a></li>
    <li><a href="#" class="item">Graphic Design</a></li>
</ul>

The Styles

#cool-links a.item{
    position: relative;
}

#cool-links a.item:before{
   content: "";
   opacity: 0;
   background-color: #000;
   display: block;
   width: 100%;
   height: 5px;
   margin-bottom: 3px;
}

#cool-links a.item:hover:before,
#cool-links a.item.selected:hover:before{
     opacity: 1;
}

#cool-links a.item.selected:before{
    opacity: .25;
}

5 October 2013

I Moved To New York

ny

21 September 2013

Rails 3 & Bootstrap Fading Flash Alerts

I wanted to publish a tutorial on how to easily make temporary flash alerts that fade away using Rails 3 flash notices and Bootstrap’s alert class. This technique has some nifty features like passing a key to boostraps alert class, so that a flash indicating success is green, warning is yellow and error is red etc. and be reusable in all your controllers.

Fading Flash Alerts

Read more...

8 August 2013

Sketch Wire

I recently published an old project that’s a lot of fun.

Sketch Wire

or fork it on github.

6 August 2013

Rails 3 Tags With Tag Manager

Rails 3 + Bootstrap Typeahead + bootstrap-tagmanager + acts-as-taggable-on = Baller Tags

I was looking for a simple and easy tagging solution to work with Twitter Bootstrap’ Typeahead functionality. I haven’t seen any examples of this on the internet so I thought I would share my solution which both works great and is pretty simple to setup. So in less than 5 minutes we will create a tagging system that looks like this.

Baller Tags

Read more...

Haruka.io

a Japanese to English Slang Dictionary

I just launched Haruka, my first Ruby on Rails app!

Japanese Slang is constantly mutating and growing and speeds which make conventional dictionaries maintained by specific authorities burdensome or impossible to keep up with. Words are constantly being shortened, combined and invented. Haruka aims the be the simple and definitive Japanese to English slang dictionary by opening its doors to anyone willing to contribute.

What makes Haruka Awesome?

  1. A fully searchable database of terms including Kanji, Kana, definitions, literal translations and additional descriptions.
  2. Keep track of terms you authored and add other terms to your personal list of favorites.
  3. Vote terms up and down to give a sense of accuracy.
  4. Flag irrelevant content.
  5. Ability to add pictures, comments and phrases to terms.
  6. Create associations between related terms.
  7. Simple, beautiful responsive design adapts across all browsers, mobile devices and tablets.
  8. Environment Variables allow you to easily customize and deploy to your own server.

Its open source! go fork it on github!

24 July 2013

Do You Like jQuery Plugins?

I just published 3 lightweight JQuery plugins. Check out

CharCycle

jQuery plugin to cycle through characters on an event. This effect is inspired by the classic actionscript effect on yugop.com.

AutoScroll

an incredibly small and simple JQuery plugin that allows overflowing elements with lists scrollable based on the vertical mouse position within that element.

SlidePanel

a JQuery plugin that allows elements to expand and collapse creating a sliding panel effect.

11 April 2012