jQuery Emoji Picker

posted in Freebies, Programming, Tutorials

While at Wedgies last year, my team decided that we wanted to hop on the April Fools Day bandwagon and release something to hopefully garner a little press. But rather than creating something silly and useless, we thought it would be more fun to create something that people would actually use. And that’s how the jQuery Emoji Picker was born.

Quickly after being hired at Wedgies, my team learned about my love and adoration for emojis. This led to us discussing adding emojis to Wedgies polls, however, I wasn’t able to find a plugin that I liked enough or which had the features I felt would lead to a comfortable experience for the user, namely:

  • Search by shortcode
  • Recently used
  • Easy-to-understand taxonomy/sorting
  • A clean design

Additionally, I wanted the developer (in this case, us) to choose which emoji set to use out of the 3 popular sets: Apple, Twitter (my personal favorite), and Google.

The most difficult part of the picker was the taxonomy. The JSON data that we used for the emojis was based upon the wemoji repository, but the data had no specific ordering to it. Smiley emojis were intermixed with symbols and food and flags, etc. Because the ordering and taxonomy was incredibly important for users being able to find the emoji they were looking for, I spent an entire day ordering the data appropriately. Ooof.

This has been one of my favorite projects to work on to-date, in part because I really love emojis, but also because it’s been a highly useful project both professionally and personally. There’s still some bugs and tweaks to work out, but it makes me immensely happy to see others using and contributing to it as well.

I have installation instructions written on the Github repository, so I won’t reiterate them here.

0

Adding Seasonal Flair To Your Site

posted in Tutorials

One thing I enjoy doing to websites is giving the site different visual treatments depending on the season or holiday. For example, during the winter I’ll add snowflakes to the background, and in the spring I like adding little pops of color, whether that be through images or background colors. This is really easy to do, and all you need is some basic CSS knowledge and a little bit of client-side programming knowledge. The example below uses PHP, but it could easily be translated into any client-side or templating language.

The PHP


  <?php function findSeason() {
      if(date('m') == '01' || date('m') == '02' || date('m') == '12') {
         return " class='winter'";
      } else if (date('m') == '03' || date('m') == '04' || date('m') == '05') {
         return " class='spring'";
      }
  } ?>

This code just checks to see what the current month is, and if it’s January (01), February (02), or December (12), it returns the markup for winter. If it’s March (03), April (04), or May (05), it returns the markup for spring. You could extend this code for Summer and Spring as well, or also just check for singular months:


  <?php function findSeason() {

      // Return October
      if(date('m') == '10') {
         return " class='october'";
      }

      // Return Halloween
      if(date('m') == '10' && date('d') == '31') {
         return " class='halloween'";
      }
  } ?>

The PHP code can then be placed in your HTML markup, like so:


  <!-- Adding the season to the body tag -->
  <body<?php findSeason(); ?>>

The CSS


  body {
    background:transparent url('/images/background.png') top left no-repeat;
  }

  .winter {
    background:transparent url('/images/background-winter.png') top left no-repeat;
  }

  .spring {
    background:transparent url('/images/background-spring.png') top left no-repeat;
  }

The body styles will be overridden when you apply the .winter or .spring class to them. When the month/season/holiday is over, the class will no longer be applied and your default body styles will be used.

There are endless possibilities for styling your site – enjoy!

0

Freebie: Vector Snowflakes

posted in Design, Freebies

Merry Christmas, everyone! Here's a little freebie from me to you that will hopefully add a little holiday cheer to your designs or websites. I had so much fun creating these... there are endless possibilities when creating snowflakes! If you'd like to create some snowflakes of your own, I highly recommend following Veerle's Snowflake tutorial. Enjoy!

download

1

Sushi San

posted in Design

I recently added a new theme to a friend’s web slot game, Slot Stravaganza, called Sushi San. I’m really happy with how this theme turned out. I love the cute colors and I think adding expressions to the symbols adds a lot of personality.

This is my second attempt at digital illustration and I think it’s definitely an improvement over my previous theme, Sweet Shoppe. I did do a lot of “research” beforehand, though, which basically consisted of doing a Google image search for anything “kawaii”. Hey, real artists imitate, right?

sushisan

0

Project Kokeshi: Doll #5

posted in Design

Here is the fourth doll in my Project Kokeshi series. Introducing, Happily Candied Kokeshi! This kokeshi doll in particular was inspired by my good friend Lauren (who writes over at www.happilycandied.com) who is a big lover of pink and all things cute and sweet. ^__^

happily_candied_kokeshi

0

Next Page »