Archive for the ‘Development’ Category

Introducing Lystee

Thursday, May 26th, 2011

Introducing…

After nearly 6 months of design and development, I’m proud to announce the official beta launch of my first web app, Lystee. I teamed up with Jason Hurt on the project, with whom I’ve done several Hack-a-Thons at Zappos. Jason took care of the back-end and release work while I handled the front-end and design aspects. It was incredibly fun to work on a project from conception to finish (although let’s be honest, what project is every really “finished”?), and it was super fun doing my own design and UX work (which I love, but don’t generally have a chance to do at Zappos). One of my goals for 2011 is to receive a Dribbble invite, so hopefully this design brings me one step closer (anyone?). :D

So, what is it?

LysteeIntroducing Lystee!

I like to describe Lystee as an app that “makes lists fun again.” I have always been a big fan of the book Listography and thought it would be fun to create an app based on that idea. However, I wanted to make the app more social and enjoyable by allowing users to share their lists on their favorite social networking sites and by allowing users to collaborate on lists. We all know there are a ton of list-making apps on the web and mobile platforms, but I wanted this app to stand out in that it is meant for “fun” – not to-do lists, task lists, or grocery lists (although you can certainly still use Lystee for those things… but my favorite to-do app is TeuxDeux), but for lists such as where you’d like to travel, bucket lists, favorite foods, and so on.

The name

Lystee listsLystee lists

Would you believe how hard it is these days to find a free, non-parked .com domain? We went through a ton of names that involved the correct spelling of “list” but couldn’t find anything that was available. Grrrr domain parkers! At one point we were calling the project “SocialLyst” (which we thought was funny) but in the end, we thought the name might offend some people. I’m a huge fan of 2-syllable names and wanted to keep the name short and sweet, so we eventually went with Lystee, whose .com domain was free. It was until after we had already bought and deployed in beta that I realized Lystee sounded like “list tea” and that Listtea.com is available. Oh wells.

The Tech Stack

If anyone is interested in knowing what tech stack we’re using, here it is:

Back-end

  • Python
  • Django
  • MongoDB
  • LightHTTPD
  • memcached

Front-end

  • html5/css3 (some)
  • jQuery
  • handlebarsJS

LLCs

Jason and I decided we didn’t want to be sued for anything regarding what people used our application for, so we registered an LLC. I had no idea how much paperwork would be involved, or how expensive it would be. However, it’s definitely worth the peace of mind we’ll have, for this app and for the future projects we collaborate on.

Tags: , , ,
Posted in Design, Development | No Comments »

New Design

Monday, November 29th, 2010

Yay Hurray!

After nearly two years, I’ve finally updated my site with a new design. This post is a little overdue as the design has been up for a few weeks now, but between the Future of Web Design Conference, moving into a new apartment, and making tweaks to this site, I haven’t found a lot of time to write.

New designJen finally got off her lazy ass and redesigned her site

My last design was put together in a hurry, and not a lot of thought went into it. While this design still doesn’t please me 100%, it doesn’t make me cringe each time I visit my own site (ha!). Mostly, though, I wanted a design that would motivate me to continually update the site: through writing, personal projects, and showcasing the fun things I’ve been working on at work. Much like I can’t focus in a messy space, I’m not easily motivated to add content with a design I hate.

So, what’s new? Honestly, not a lot. However, the redesign did give me an excuse to truly mess with HTML5 and CSS3 for the first time.

HTML5 Elements

My site uses the html5 doctype and implements the new header, footer, article, and nav elements. The contact form uses the email input type and the placeholder attribute.

To make sure this site still works in older browsers, I used the html5 boilerplate and the Modernizr JavaScript library for feature detection.

[NOTE] Don’t forget to checkout A Book Apart’s first publication, HTML5 For Web Designers by Jeremy Keith.

CSS3 Elements

One of my favorite aspects of css3 is the ability to have multiple background images on an element, which I used in two places on this site – once in the header and once in the footer. I’m curious, though – is there a way via JavaScript or jQuery to select all the background images on an element? I wanted to attempt a fun animation using the multiple backgrounds, but wasn’t sure how to go about getting them into an array. Will need to look more into this.

Some other css3 elements I used were border-radius (<3), column-count, and box-shadow. I love, love, love css3. <3

[NOTE] The newest A Book Apart publication, CSS3 For Web Designers by Dan Cederholm is now available!

Fun & Things

IE6 makes us all cryIE6 makes us all cry

The redesign also uses TypeKit (Museo Sans… yes, I know, it’s everywhere… whatever), jQuery, and does not support IE6. Besides, IE6 is dead, anyway.

This was also the first time I created a WordPress theme. Normally I just hack in the pieces of WordPress that I need, but this time I decided to make things simpler on myself and create a template. It wasn’t as complicated as I thought, and now I’m wondering why I avoided it for so long.

Inspired by some of the talks at the Future of Web Design Conference, I’d like to try and add in a few fun elements to the site (like easter eggs) but that will likely have to wait until the new year. I have a few more small projects I’d like to finish before then, one of which I hope to release here shortly.

And that’s it, folks. While I’m still not completely happy with the design (I think I’ll end up redoing the header soon), I’m content with it. Please let me know if you find any bugs or weird style issues. I’m sure I missed something, somewhere.

Tags: , , , , ,
Posted in Design, Development | No Comments »

Future of Web Design 2010

Monday, November 22nd, 2010

Overview

Last week I had the opportunity to attend the Future of Web Design conference in NYC. The conference was 2 days and offered a third day of workshops for those who were interested.

Future of Web Design - New York CityFuture of Web Design – New York City

While I feel I am decent at design, I definitely consider myself a developer above all else. That being said, I wouldn’t recommend this conference for people hoping to get very technical with code, as most of the sessions leaned more towards design and UX than they did towards development. Luckily I happen to have a strong interest in design, UX, and typography, so I still enjoyed the sessions and learned a ton.

[NOTE] If you are hoping to get more technical or could care less about design, go to JSConf or jQuery Conf instead – I immensely enjoyed jQuery Conf when I went this past April.

Speakers & Sessions

Funnily enough, my favorite speakers weren’t the ones who dove into more technical topics (they were still good), but were the ones who talked about user experience and trying to do more than just simply satisfy users. I’ve always been a fan of adding a bit of fun into things and never understood why companies have always felt the need to be so uptight and serious (must be why I love working at Zappos). This seemed to be the theme of FOWD 2010, and at least 3 sessions were geared towards going above and beyond – “Designing for Emotion” by Aarron Walter, “Design to Delight” by Doug Bowman, and “Beyond Usability: The Art of Experience Design” by Aral Balkin. All interesting sessions, all great speakers.

Future of Web Design - SpeakersFuture of Web Design – Speakers

I also very much enjoyed Ethan Marcotte’s session on “Responsive Web Design.” Ethan talks a bit about it in his chapter of Dan Cederholm’s book, Handcrafted CSS, and also wrote a very good article about it on A List Apart back in May. I’ve recently become a big fan and proponent of fluid design (even though my current site isn’t at the moment… I know, I know, I’m working on it…), so I loved listening to and watching Ethan’s code examples.

Matt Smith’s “The Changing Face of Typography” session was also very interesting for a typography novice like myself. Sure, I know how to use and implement TypeKit, but I was really interested to hear about font pairing and how and why different fonts can work well together – stuff I know nothing about.

The End

Overall I enjoyed the conference and walked away very inspired to try some new things with design, but didn’t necessarily learn a lot (that I wasn’t already familiar with) development-wise. Ah well, there’s always Future of Web Apps to look forward to!

Tags: , , , , , , , ,
Posted in Design, Development | No Comments »

Hello, TextMate

Sunday, November 14th, 2010

Meet TextMate

When I started at Zappos.com last year and began using a MacBook and OS X for the first time, I was introduced to TextMate. Being a noob at the whole Apple thing, I had no idea which applications to use for development. On Windows I had always used TextPad. However, given that at Zappos my alternate text editor choice was Vim, I immediately opted for TextMate. Since then, we have become more than just acquaintances – we’ve become friends.

Keyboard shortcuts ftw

Now, I should probably forewarn you and say upfront that I am a keyboard shortcut whore. I love them. The less I have to use my mouse or trackpad, the better. So you can imagine how difficult things were for me the first few weeks when I switched from PC to Mac. I know I could have hacked my keyboard to recognize ctrl instead of cmd, but I was determined to be a true Apple convert. On top of that, a lot of the keyboard shortcuts I had learned in TextPad were different in TextMate. So, one of the first things I did was look up some keyboard shortcut cheat sheets.

For you super nerds, there’s also a TextMate keyboard shortcuts background image available for your desktop.

Make it pretty

I also had to make TextMate pretty. I wasn’t a fan of the default color schemes, so I looked around until I found one I loved, although there are a lot of user-submitted themes available.

Now, make it better

Probably my favorite TextMate find is a keyboard shortcut hack that brings your cursor to the first non-space character on a line.

Gotta love improved efficiency.

Tags: , , ,
Posted in Development, Goodies | No Comments »