3 ms·

This Developer Harlem Shakes Your Website

5 points by wynter 14y ago

DigitalSea 14y ago
Wow. I am speechless. Such a simple, but highly amusing idea. This is going to be huge, nicely done as well using CSS3 animations. So damn amusing! I tried putting Hacker News through it and it's funny because it doesn't really work that well: http://www.harlemify.com/?url=news.ycombinator.com http://www.harlemify.com/?url=news.ycombinator.com
- wynter 14y ago
  Haha - must admit I hadn't tried that. Still gets Hacker News to shake though! I think it's really smart how Monir built on the Harlem Shake's virality, but made it fun for everyone.
  - DigitalSea 14y ago
    Yes, definitely. I used it for a project presentation the other day and it was a hit. I started it off with, "So here's what I've been building for the last few months" and Harlemified the site, people were amused.
    - Monir 14y ago
      Thanks for sharing the link, I am glad that you both liked it! :D as you might know, Technically it's really hard to determine the main logo element in any web page, since HTML coding styles differ from site to another, and there is no standard for such a case. So to overcome this issue I made some assumptions on how can I find the logo element ( the dance Starter element ). I assumed logically that I should find the keyword "logo" in 3 possible Locations on a visible HTML Element 1- in the "id" attribute. 2- in the "class" attribute. 3- in the "src" attribute of an html <img /> tag. if I found any, I will simply get the First element found. But for some websites non of the assumptions will be correct, for this case, I wrote a simple brute-force like solution to try to find an element that is currently visible on the screen view area and has a size between ( 40x80 and 380x380 ), again I assumed the size range here since the logos are usually in this range; based on a simple test that I made. And I didn't include elements smaller than 40x80 because animating a small element alone is not as cool as a larger one. So apparently for Hacker News' website, all of my logo finding assumptions failed... I fixed it by adding a code block that handles special cases based on the domain name, and that's by specifying hard-coded jQuery Selectors :) So it should work fine now, try it again here: http://bit.ly/ZcxOIc http://bit.ly/ZcxOIc
jamessb 14y ago
Previously on Hacker News, hsmaker: http://news.ycombinator.com/item?id=5235709 http://news.ycombinator.com/item?id=5235709
- Monir 14y ago
  I built http://harlemify.com/ http://harlemify.com/ without knowing about this one... and I'm happy for not knowing about it because seriously If I knew, I wouldn't build a new website. :) Anyway, I built it in 7 hours just for fun. After testing the other site, I felt that I didn't waste my time building it for nothing, because I believe that I handled much more cases in mine than the other site :) Such as: - Ending the song and animation ( ending the show. ) - Share functionality at the end of the show. - Passing the same user's browser headers when crawling requested website. - Handling most of the webpage character encoding types (including Arabic). - Handling gzip encoded websites ( for example, try mashable.com on both websites ). - iOS Browser Support. Enjoy! :)

5 points by wynter 14y ago

Wow. I am speechless. Such a simple, but highly amusing idea. This is going to be huge, nicely done as well using CSS3 animations. So damn amusing! I tried putting Hacker News through it and it's funny because it doesn't really work that well: http://www.harlemify.com/?url=news.ycombinator.com http://www.harlemify.com/?url=news.ycombinator.com

wynter 14y ago
Haha - must admit I hadn't tried that. Still gets Hacker News to shake though! I think it's really smart how Monir built on the Harlem Shake's virality, but made it fun for everyone.
- DigitalSea 14y ago
  Yes, definitely. I used it for a project presentation the other day and it was a hit. I started it off with, "So here's what I've been building for the last few months" and Harlemified the site, people were amused.
  - Monir 14y ago
    Thanks for sharing the link, I am glad that you both liked it! :D as you might know, Technically it's really hard to determine the main logo element in any web page, since HTML coding styles differ from site to another, and there is no standard for such a case. So to overcome this issue I made some assumptions on how can I find the logo element ( the dance Starter element ). I assumed logically that I should find the keyword "logo" in 3 possible Locations on a visible HTML Element 1- in the "id" attribute. 2- in the "class" attribute. 3- in the "src" attribute of an html <img /> tag. if I found any, I will simply get the First element found. But for some websites non of the assumptions will be correct, for this case, I wrote a simple brute-force like solution to try to find an element that is currently visible on the screen view area and has a size between ( 40x80 and 380x380 ), again I assumed the size range here since the logos are usually in this range; based on a simple test that I made. And I didn't include elements smaller than 40x80 because animating a small element alone is not as cool as a larger one. So apparently for Hacker News' website, all of my logo finding assumptions failed... I fixed it by adding a code block that handles special cases based on the domain name, and that's by specifying hard-coded jQuery Selectors :) So it should work fine now, try it again here: http://bit.ly/ZcxOIc http://bit.ly/ZcxOIc

jamessb 14y ago

Previously on Hacker News, hsmaker: http://news.ycombinator.com/item?id=5235709 http://news.ycombinator.com/item?id=5235709

Monir 14y ago
I built http://harlemify.com/ http://harlemify.com/ without knowing about this one... and I'm happy for not knowing about it because seriously If I knew, I wouldn't build a new website. :) Anyway, I built it in 7 hours just for fun. After testing the other site, I felt that I didn't waste my time building it for nothing, because I believe that I handled much more cases in mine than the other site :) Such as: - Ending the song and animation ( ending the show. ) - Share functionality at the end of the show. - Passing the same user's browser headers when crawling requested website. - Handling most of the webpage character encoding types (including Arabic). - Handling gzip encoded websites ( for example, try mashable.com on both websites ). - iOS Browser Support. Enjoy! :)