How I launched flickrup.com in less than two weeks
19 comments
I love it that "flickr" phonetically means "faggot" (flikker) in Dutch and "flickrup" means "fuck off" (flikker op).
Can you make it so that "comments made" next to the picture on the front page links to the comments on flickr? It's a little annoying to click on a picture twice and scroll down just to see the comments.
done and done
I get down voted because I actually implemented what he said?
Possible someone just hit the wrong arrow. Happens from time to time :\
Can you change the captcha implementation? I tried a few times and could not get it right. The text is not clear. Believe me, i'm a human :)
Looks very nice. The fact that you got it up just using the standard tools rather than reinventing the wheel shows remarkable restraint for a coder (wish I could stop reinventing wheels :( ).
Must look into blueprint, CSS frameworks seem to be the way to go.
Well done
Must look into blueprint, CSS frameworks seem to be the way to go.
Well done
Nice...i like the simple design and functionality.
But, a serious question in regards to how you implemented it. Isn't that how you would usually go about implementing something?
As in, the rule of thumb is: think of the least functionality needed to launch a first version, use a CSS framework to avoid writing your own, use a JS framework to avoid writing your own, start up with a simple design, use some kind of code framework to avoid re-implementing common functionality such as authentication and caching..., and so on....
After testing the water with that, you can start replacing stuff if needed, hiring a designer for a more fancy look and the like...
But, a serious question in regards to how you implemented it. Isn't that how you would usually go about implementing something?
As in, the rule of thumb is: think of the least functionality needed to launch a first version, use a CSS framework to avoid writing your own, use a JS framework to avoid writing your own, start up with a simple design, use some kind of code framework to avoid re-implementing common functionality such as authentication and caching..., and so on....
After testing the water with that, you can start replacing stuff if needed, hiring a designer for a more fancy look and the like...
Yes all those things that you mentioned are done by default. What I'm simply saying is that you have to watch out for the temptation of adding non-critical features or rolling your own solution without doing your hw first. It's easier said than done.
In regards to design, people spend a lot of time creating photoshop mockups, then modeling it with css and html. I'm just saying, if you want to get it done quickly, just skip all that and keep it minimal.
In regards to design, people spend a lot of time creating photoshop mockups, then modeling it with css and html. I'm just saying, if you want to get it done quickly, just skip all that and keep it minimal.
Very nice, concise writeup on getting the idea to the ground. I must shamefully admit, I've been quite guilty of ideating a lot of the no-nos you've talked about!
Nice app. Do you use a plugin for the authentication? I also use CI for some of my projects. Its my favorite PHP framework so far.
I use Pear's Flickr api library and then use the built in CI sessions library to handle login/logout.
Pretty cool. I'm curious, did you use the Flickr API to process the flickr url and get the thumbnail? or did you scrape it?
I just exploded the link using "/", grabbed the ID of the photo and I used the flickr api to make sure that it's a valid photo_id.
I've been playing with CodeIgniter, thinking of using it for a small project. Did you like working with it?
I love working with it and it's also relatively fast compared to the other existing php frameworks. However, I have not used any of the others, so I can't really compare it. Maybe someone else can chime in.
Kohana's a CI fork that's optimized for faster. Think Merb as a Rails fork - lots of love, but a need for something along a slightly different path.
I don't think Kohana is faster, I think it's about the same. But it's strict PHP5 OOP, and there are a few other differences.
http://pr0digy.com/codeigniter/benchmark-static-cake-codeign...
http://pr0digy.com/codeigniter/benchmark-static-cake-codeign...
Cool site. Did you spend all your time on it, or was this something you made on nights and weekends?
It looks nice.
It looks nice.
I have a full time job so just nights and weekends.
Couldn't your domain name be a problem in the future? I always thought trademark owners need to fight other people using their trademark in order to keep it.
So Yahoo will have to ask you to change your domain to something else, right?
So Yahoo will have to ask you to change your domain to something else, right?
Love the design. Does anyone have any recommendations for a CSS framework?
I'm currently in love with http://www.blueprintcss.org/
You could also try the yahoo user interface library (yui).
http://developer.yahoo.com/yui/base/ http://developer.yahoo.com/yui/reset/ http://developer.yahoo.com/yui/grids/ http://developer.yahoo.com/yui/fonts/
http://developer.yahoo.com/yui/base/ http://developer.yahoo.com/yui/reset/ http://developer.yahoo.com/yui/grids/ http://developer.yahoo.com/yui/fonts/
In addition to blueprint, you could go meta with compass: http://wiki.github.com/chriseppstein/compass
I do love blueprint. It made the frontend design a snap.
The mention of blueprint got me thinking about CSS frameworks and that there's probably alot of value in using one. What are its strengths? weaknesses?
CSS frameworks generally do the same thing.
They reset the browsers setting, e.g., setting body, div, span's margins and padding to zero.
They setup the typography, picking a global font, setting up font-sizes, margins and padding for html elements such as h1, p, ordered and unored list, etc...
They provide a way of setting up a grid. Blueprint, by default, uses a grid chunked into 40px segments, creating 940px wide design. You then place divs inline or nested to create your design.
Blueprint also provides some extra goodies like defining styles for forms, error and success styles for divs, and some ie fixes.
They reset the browsers setting, e.g., setting body, div, span's margins and padding to zero.
They setup the typography, picking a global font, setting up font-sizes, margins and padding for html elements such as h1, p, ordered and unored list, etc...
They provide a way of setting up a grid. Blueprint, by default, uses a grid chunked into 40px segments, creating 940px wide design. You then place divs inline or nested to create your design.
Blueprint also provides some extra goodies like defining styles for forms, error and success styles for divs, and some ie fixes.
nice idea, I would be in favour of a longer front-page though..as a side, I'm nearly sure someone either attempted or is about to attempt a similar site using slinkset.
Any recommendations as to how many should be shown?
Not surprising, on the front page with majority votes: a picture of a cat. Nice application
That's because it's newer and so it has a greater weight. The site is brand new so if someone submits garbage, it is very likely that it will end up on the frontpage. This problem should go away as the site grows and people start submitting more photos.
The work could have been done in less than 1wk if some web famework(django, ROR) were used.
side note: I have a full time job and I just did this on the weekends and after work on the weekdays
nice writeup thanks
please consider adding categories
I could maybe show the top tags used? What do you think?
Flickrup allows people to submit flickr photos and vote on them.
The idea with Flickrup! was to launch a working, stable site as fast as possible. The idea I had when I started working on the site was to be as minimalist as possible in regards to design, code complexity (frontend and backend), db schema design and user authentication to name a few. I also wanted it to be ridiculously easy to submit and vote on photos. So here are some of the things I did.
frontend design:
I used a css framework (blueprint) to assist in creating a grid based layout and also utilized all the predefined styles for elements. Instead of creating my own css classes and ending up with a cluttered mess, I forced my self to use the classes defined in blueprint as often as possible.
I didn't waste time making a logo. The logo is simply a text link to the frontpage.
I didn't clutter the frontpage with flashy css based buttons and login/signup links everywhere. Instead, when someone hovers over a vote link, a css popup comes up which allows them to vote anonymously or using the flickr account.
I didn't waste time setting up a blog for the site.
backend design:
No brainer: I used a well known php framework (codeigniter) and forced myself to use as many classes and helpers they had to offer including: (pagination, session control, url helper, captcha, date helper)
I had a problem that needed some solvin' and I was greatly tempted to roll my own solution, but I searched until I found an already existing one.
Database:
I have four tables. That's it. Photos, sessions, users and votes.
Authentication:
There isn't an ugly login/signup link to be found on the frontpage and it doesn't need one. Logging in is inconspicuously placed in the flow of voting and submitting.
You don't have to sign up to use the service. You can vote and submit anonymously. It's true that you can vote for a photo as many times as you want as an anonymous user, but so what? If someone wants to spend their precious time painstakingly figuring out the captcha a dozen times to fluf their votes, who cares?