5 ms·

Slightly off topic, your site design is awesome. Would you share what libraries/frameworks/skills/time-resources are needed for something like this. Just curiou

by chdir 12y ago

Slightly off topic, your site design is awesome. Would you share what libraries/frameworks/skills/time-resources are needed for something like this. Just curious. For me, the graphics & layout are far more interesting.

donniezazen 12y ago
http://aprilzero.com/about/ http://aprilzero.com/about/
- chdir 12y ago
  That link points to a bunch of data sources, not how the site was designed, unless I missed something. A little sleuthing says the site is more about the launch of a CSS animations framework rather than a health tracker. Somewhere maybe there's d3.
evanrelf 12y ago
http://builtwith.com/aprilzero.com http://builtwith.com/aprilzero.com
- crishoj 12y ago
  While certainly a neat tool, it doesn't shed a lot of light on the client side stack, and apart from revealing the hosting service and web server, doesn't say much about the server side stack either.
deleted 12y ago
[deleted]
PhrosTT 12y ago
The icons are from FourSquare - http://1x57.com/b/art-and-icons-of-foursquare-can-you-decipher-the-meaning/ http://1x57.com/b/art-and-icons-of-foursquare-can-you-deciph... He's using d3, jQuery, mapbox, jquery-pjax Lot's of analytics (NewRelic, gaug.es, segment.io) Skillwise you'd need great js, great d3, eye for design, patience to layout a million state transitions and animate them all with css + js, wiring up a million data sources & api's, jquery, ajax, pushstate, and pretty legit backend skills to keep this thing running ATM.
aprilzero 12y ago
I'm working on a detailed blog post about that. Some highlights: • Running Django on Heroku • Coffeescript, jQuery • SASS • A lot of webkit transitions & some animations • A souped up version of pjax for loading pages • Getting the data from APIs from Moves, Runkeeper, Withings, Foursquare, Github, Instagram, etc. • The run maps are a set of coordinates passed to Mapbox to make the map tiles & Leaflet for creating the SVG line. • D3 has really nice geo stuff, I use their mercator projection to convert lat/longs to points on the map of the world
- thoughtpalette 12y ago
  Love the spinning animations! Reminds me of the "tech" look and feel from early 2000's. Think Winamp skins.
totony 12y ago
It is fairly easy to do such animations (if you talk about the animations) with jquery alone. A lot of simple fades in/out and background color changes compose the website as far as I have seen. The site is slightly unresponsive, but this is probably due to all the traffic HN is generating. OP should consider adding loading animations, it would make the transitions more fluid in such a busy time.
tabrischen 12y ago
There's also a nifty Chrome plugin you can use that shows you the backend any site is using: https://wappalyzer.com https://wappalyzer.com
kayge 12y ago
Agreed. The mobile version is also quite impressive (viewed on iPhone 4s w/ Safari). Nice work!

by chdir 12y ago

donniezazen 12y ago

http://aprilzero.com/about/ http://aprilzero.com/about/

chdir 12y ago
That link points to a bunch of data sources, not how the site was designed, unless I missed something. A little sleuthing says the site is more about the launch of a CSS animations framework rather than a health tracker. Somewhere maybe there's d3.

evanrelf 12y ago

http://builtwith.com/aprilzero.com http://builtwith.com/aprilzero.com

crishoj 12y ago
While certainly a neat tool, it doesn't shed a lot of light on the client side stack, and apart from revealing the hosting service and web server, doesn't say much about the server side stack either.

deleted 12y ago

[deleted]

PhrosTT 12y ago

The icons are from FourSquare - http://1x57.com/b/art-and-icons-of-foursquare-can-you-decipher-the-meaning/ http://1x57.com/b/art-and-icons-of-foursquare-can-you-deciph... He's using d3, jQuery, mapbox, jquery-pjax Lot's of analytics (NewRelic, gaug.es, segment.io) Skillwise you'd need great js, great d3, eye for design, patience to layout a million state transitions and animate them all with css + js, wiring up a million data sources & api's, jquery, ajax, pushstate, and pretty legit backend skills to keep this thing running ATM.

aprilzero 12y ago

I'm working on a detailed blog post about that. Some highlights: • Running Django on Heroku • Coffeescript, jQuery • SASS • A lot of webkit transitions & some animations • A souped up version of pjax for loading pages • Getting the data from APIs from Moves, Runkeeper, Withings, Foursquare, Github, Instagram, etc. • The run maps are a set of coordinates passed to Mapbox to make the map tiles & Leaflet for creating the SVG line. • D3 has really nice geo stuff, I use their mercator projection to convert lat/longs to points on the map of the world

thoughtpalette 12y ago
Love the spinning animations! Reminds me of the "tech" look and feel from early 2000's. Think Winamp skins.

totony 12y ago

It is fairly easy to do such animations (if you talk about the animations) with jquery alone. A lot of simple fades in/out and background color changes compose the website as far as I have seen. The site is slightly unresponsive, but this is probably due to all the traffic HN is generating. OP should consider adding loading animations, it would make the transitions more fluid in such a busy time.

tabrischen 12y ago

There's also a nifty Chrome plugin you can use that shows you the backend any site is using: https://wappalyzer.com https://wappalyzer.com

kayge 12y ago

Agreed. The mobile version is also quite impressive (viewed on iPhone 4s w/ Safari). Nice work!