HTML5 Drag and Drop Uploads

You want people to upload files to your site. This is traditionally done through the input tag. but it a pain to style and kinda unreasonable to ask people to use it these days.

Luckily HTML5 has some really cool API's, namely the File API, the FileReader API, and the FormData API that allow for drag and drop uploads and much more. Since we should always use HTML5's functionality when supported, lets code up a super bare bones drag and drop file uploading interface that we can easily plug in whenever file uploads are needed in a project.

You can check out what we will be making here

Demo

Or if you just want the code...

Source

Read more...

8 April 2014

Parallax and other Scrolling Effects

It seems like every other project I start these days, the word parallax comes up, and it is all over Square Space's commercials. If you don't know what this effect is go ahead and look here. I don't mind this fad but I do think people tend to go overboard with it. Also there are other effects that can be triggered on scroll which can subtly breath life into your site without making anyones head spin.

Read more...

Social Icons

Social icons are pretty much a ubiquitous component on any site or even post. This is how I like to do them. I use anchors with overlapping elements with alternate states on the same svg sprite and then transition the opacity property between them. This is a neat trick for getting a css3 transitions working for image backgrounds.

You don't have to use svg, you could use a png with 2x fallback for retina, but come on lets all get down with vector everything and kiss support for IE8 goodbye. Another way would be to package these into a font-face and then just transition the color. I haven't gotten around to that yet. Click Read More to checkout the code and demo.

Read more...

8 March 2014

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

Google Maps Trace

Google Maps Trace

I recently started a new project aimed at making it easier to align image overlays onto Google Maps.

Google Maps Trace makes it easy to align custom image overlay geometry with an underlying Google Map and retrieve the bounds for that overlay. I had a couple of projects that wanted to use the navigation and geographical features of Google Maps but with total custom geometry and styles for features such as land, roads, buildings etc. Luckily this is easily accomplished using image overlays with svg/png fallback. Unfortonuly there aren't any simple tools out there to align the overlay's geometry with Google Map's. That's where this comes in.

View Project or Fork it on Github

25 January 2014

Custom Mapper

Custom Mapper

Often times projects demanded the same degree of customization and behavior from Google Maps in terms of Appearance. This can all be accomplished through Google Maps API, but rather than build these custom maps over and over again this is an attempt at packaging that functionality into a couple of classes which provide an easy interface for custom styles for the map, custom Marker images including hover and selected states, dynamic html content in Markers, custom infoboxes for each marker. All of the map and marker data, styles and content are loaded from json object to generate the custom map.

View Project or Fork it on Github

24 January 2014

Helvetica Neue Font Stack

I can never remember all of these, so just putting it here for convenience. Click read more to see the lengthy font stack

Read more...

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

Robocons

Custom Mapper

Every designer has there own curated / authored and tweaked collection of go to icons for various UI elements, I decided to collect and release my own.

Robocons is constantly evolving set of icons (80 and counting) that I develop in response to common User Interface needs that appear during development. Icon's range from basic navigational elements, media controls to quirky characters and include different weights in some cases. It is completely free, open source and comes in SVG TTF WOFF and EOT.

Fork it on Github

3 January 2014

Jekyll Themes

In case you wanted to know this blog is powered by Jekyll, the nerdiest blogging platform (or generator rather). I have become a huge fan for its super simple approach both in content management and design. While playing around I developed two themes. Both are available on Github.

Caviar

Custom Mapper

Fork it on Github

and

Pyramid

Custom Mapper

Fork it on Github

5 October 2013

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.io, 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