5 ms·

HTML-based weather app

39 points by simurai 14y ago

mserdarsanli 14y ago
There is not a single good comment about this, yet it is on front-page. WhyHN?
coley 14y ago
This is a nice example of how html5 has come a long way. Thanks for sharing. I did come across one bug, however. After changing the color scheme, Sun reloads, flashes "changing colors...", and then hangs on the loading indicator.
pan69 14y ago
For the love of God, if this is HTML then why is it only working on iOS devices? Is the iPhone/iPad the new Internet Explorer?
- elliottkember 14y ago
  If this is HTML, then why not take the source and make a cross-browser version? I guess I don't see the harm in just making an HTML iPhone app. Personally, for instance, I wouldn't be happy if I shipped something as "cross-browser" that looked just awful in most browsers no matter what I tried.
  - zevyoura 14y ago
    >If this is HTML, then why not take the source and make a cross-browser version? Given that there's no apparent license agreement, this would presumably be copyright infringement.
    - elliottkember 14y ago
      True. Well, it just seems ungrateful. It's an iPhone app, built with HTML5. They've built something really nice, for free, and yet people feel entitled to more.
sachleen 14y ago
It's HTML 5 but requires iOS? Why. I spoofed the user agent in Chrome and it wants me to add it to my iOS home screen before I can try it out. Why not just show me the app when I go to the page? And if I want to add it to my home screen, I will.
nilliams 14y ago
Beautiful and the nav is impressively slick. Shame the desktop landing page (though pretty) doesn't show off just how nice the rest of the UI is when visited from iOS. (There are a few pics on the author's Dribbble for the curious [1]). Would love to read a good illustrated blog post on the making of this. It'd be interesting to know what frameworks (if any) were used. [1] http://dribbble.com/jalifax http://dribbble.com/jalifax
timesachangin 14y ago
Looks lovely. Really swish animation. Brilliant showcase of HTML5 based apps. Shame it locked my entire phone up!?
- ekryski 14y ago
  Totally agree on all accounts. My phone locked as well.
  - cheeaun 14y ago
    Oh wow, it locked my iPhone (4S) too just now. Home and Sleep/Wake buttons stopped working and I have to force reboot the whole thing. The first time I add it to the homescreen, the page sort of borks. Second time I launch it, everything works but that's when the phone locks itself :(
jakozaur 14y ago
Great design, but a few things could be improved: - no preview on desktop - landscape mode is broken - no client-side caching
benguild 14y ago
This is great!
nickpresta 14y ago
✓ Claims to be an HTML5 app ✓ Requires iOS for no apparent reason ✓ You must install to homescreen first, even if you are on iOS What does this do and why did you make the above decisions? EDIT: To get around this, open up your JS console, put a breakpoint on line 509 inside sunny.js and set `window.navigator.standalone = true;`. Things should be fine from that point on if you have "emulate touch events" turned on.
- nilliams 14y ago
  I don't think the snarky checklist is necessary and am pretty saddened you've got upvotes for merely stating the obvious in such a derisive way. We don't know the context in which the creator made this, and who is to say that just because something is written in HTML you have a God-given right to be able to run it in your desktop browser. I hope more apps like this do appear and push e.g. Android to sort out their home screen/web app integration. We should be able to have the experience this app provides on iOS everywhere by now, here's hoping Android get this sorted soon.
  - nickpresta 14y ago
    Which homescreen integration would that be? With the exception of having the chrome (URL bar) hidden by default, Android can add webpages to the homescreen and treat the tile like a native app, already. It isn't so much that we should be able to run it in our browser, it is that the author is intentionally looking for iOS, with the site added to your homescreen. Had the title been "HTML5 Homescreen App for iOS" I think people's expectations would be different.
    - nilliams 14y ago
      >> With the exception of having the chrome (URL bar) hidden by default... Yeah that's one pretty major problem that shatters any illusion of feeling native on Android. The other problem is that the ability to add to homescreen is not particularly obvious to users and most probably aren't aware it can be done: >> Create a bookmark via the menu, find it in the bookmark list, long-press on it, and tap "Add to home screen". [1] [1] https://developers.google.com/chrome/mobile/docs/faq https://developers.google.com/chrome/mobile/docs/faq
artursapek 14y ago
Shit, it's 3° in Redmond? I better stay inside.
- ewang1 14y ago
  It defaults to Celsius, so you'll have to change it to Fahrenheit.
taf2 14y ago
installed it on my phone, but i just see a spinning wheel and a pink background... the 3d effect when flipping to the other locations looks nice, but perhaps the location api times out or there's a service call that's timing out because it looks to be frozen, for my location.
suhailpatel 14y ago
Great design but not sure why this needs to be iOS only and why it needs to be installed to the homescreen. I still don't think it's better than a native app because it took 30 seconds to actually show anything from a black screen and then a minute or so to load the data on stable fast WiFi (bet it'd be worse over 3G). A native app has UI code and fancy animations on board and if this was an initial impression of something I wasn't really interested in observing, i'd uninstall it straight away. Granted it does load faster on subsequent launches (caching maybe?) but it's the initial launch which matters to me.
- nilliams 14y ago
  Is the initial launch not simply comparable to downloading a native app from the app-store?
Nux 14y ago
"Sun is a web app designed for the iPhone and iPad." - why bother make it a "web" app then? Waste of time.
- ewang1 14y ago
  perhaps b/c it's much faster to make it in html5 than in Obj-C?
quasimo 14y ago
I shared this long time ago: http://blog.linz.im/2012/webapp-sun.html http://blog.linz.im/2012/webapp-sun.html
hnriot 14y ago
I installed it and all I see is a pink screen with my location and temp. Completely boring "app" google weather is far superior (in HTML and works on more than just my iPad)
- dangrossman 14y ago
  Pinch and swipe, as it says.
arms 14y ago
Slick presentation, but simply takes too long to display data and seems buggy - caused my phone to freeze.
hayksaakian 14y ago
Not sure what I'm supposed to be looking at. I don't suppose that a nice picture of an iPhone == weather app. http://www.imgur.com/djVjc.png http://www.imgur.com/djVjc.png
- pan69 14y ago
  What app you use to make screenshots with?
  - hayksaakian 14y ago
    Native screenshotting plus imgur app for sharing to a URL quickly.
  - nickpresta 14y ago
    Android since version 4.0 has the ability to natively take a screenshot. Hold the Volume Down + Power button and you should see a little camera flash and a notification about your screenshot.
  - roryokane 14y ago
    Since that’s Android 4, he’s probably using the built-in screenshot function. Just hold down the Volume Down and Power buttons at the same time. You can then access the screenshot from the resulting notification or in the Gallery. More info: http://www.howtogeek.com/121133/how-to-take-screenshots-on-android-devices-since-4.0/ http://www.howtogeek.com/121133/how-to-take-screenshots-on-a...
simurai 14y ago
Don't forget to pinch out (kinda hard to discover), once you're on a location and you get a details view like this http://drbl.in/glDK http://drbl.in/glDK
fideloper 14y ago
The design is beautiful! This would make a great native app - Which I only say because HTML5 on iOS seems a bit choppy for such nice animations. It's unfortunate to find such snark for something which I'll bet took a lot of effort to do. It makes sense for an HTML app to be friendly to all devices, and probably that is something to aim for. Obviously has room for improvement, but I think we (myself included) can all do better at delivering feedback.
- cnp 14y ago
  Yeah totally. I think he did a fantastic job. All of the transitions and functionality and design is gorgeous. Agreed, it was a little confusing with the home screen issue in the beginning, but I totally get why he did it, and after a few seconds everything was working like it should. Really great work.
chacha102 14y ago
Ever since the iPhone weather app, I get really annoyed when weather apps display the weather to be 'sunny' at night. Its not sunny. PS: Yes, its not a huge deal. If there was a 'feature' list, it wouldn't be listed. But trying to tell me San Diego will be 'sunny' at midnight is just wrong. </rant>
yock 14y ago
An honest question. Is there any technical reason this is limited to iOS?
flixic 14y ago
The most amazing feature of this, that I have seen NONE other app do, is the changing icon. Install the app, and change the colors. Then, close the app. Its icon's colors have changed to reflect the color theme change.
sktrdie 14y ago
Wonderful! I love these beautiful minimalist UX experiments. Especially when using open technology such as HTML5. Any info on how you built all the really nifty animations? Used any tool to get it just right?

39 points by simurai 14y ago

There is not a single good comment about this, yet it is on front-page. WhyHN?

coley 14y ago

This is a nice example of how html5 has come a long way. Thanks for sharing. I did come across one bug, however. After changing the color scheme, Sun reloads, flashes "changing colors...", and then hangs on the loading indicator.

pan69 14y ago

For the love of God, if this is HTML then why is it only working on iOS devices? Is the iPhone/iPad the new Internet Explorer?

elliottkember 14y ago
If this is HTML, then why not take the source and make a cross-browser version? I guess I don't see the harm in just making an HTML iPhone app. Personally, for instance, I wouldn't be happy if I shipped something as "cross-browser" that looked just awful in most browsers no matter what I tried.
- zevyoura 14y ago
  >If this is HTML, then why not take the source and make a cross-browser version? Given that there's no apparent license agreement, this would presumably be copyright infringement.
  - elliottkember 14y ago
    True. Well, it just seems ungrateful. It's an iPhone app, built with HTML5. They've built something really nice, for free, and yet people feel entitled to more.

sachleen 14y ago

It's HTML 5 but requires iOS? Why. I spoofed the user agent in Chrome and it wants me to add it to my iOS home screen before I can try it out. Why not just show me the app when I go to the page? And if I want to add it to my home screen, I will.

nilliams 14y ago

Beautiful and the nav is impressively slick. Shame the desktop landing page (though pretty) doesn't show off just how nice the rest of the UI is when visited from iOS. (There are a few pics on the author's Dribbble for the curious [1]). Would love to read a good illustrated blog post on the making of this. It'd be interesting to know what frameworks (if any) were used. [1] http://dribbble.com/jalifax http://dribbble.com/jalifax

timesachangin 14y ago

Looks lovely. Really swish animation. Brilliant showcase of HTML5 based apps. Shame it locked my entire phone up!?

ekryski 14y ago
Totally agree on all accounts. My phone locked as well.
- cheeaun 14y ago
  Oh wow, it locked my iPhone (4S) too just now. Home and Sleep/Wake buttons stopped working and I have to force reboot the whole thing. The first time I add it to the homescreen, the page sort of borks. Second time I launch it, everything works but that's when the phone locks itself :(

jakozaur 14y ago

Great design, but a few things could be improved: - no preview on desktop - landscape mode is broken - no client-side caching

benguild 14y ago

This is great!

nickpresta 14y ago

✓ Claims to be an HTML5 app ✓ Requires iOS for no apparent reason ✓ You must install to homescreen first, even if you are on iOS What does this do and why did you make the above decisions? EDIT: To get around this, open up your JS console, put a breakpoint on line 509 inside sunny.js and set `window.navigator.standalone = true;`. Things should be fine from that point on if you have "emulate touch events" turned on.

nilliams 14y ago
I don't think the snarky checklist is necessary and am pretty saddened you've got upvotes for merely stating the obvious in such a derisive way. We don't know the context in which the creator made this, and who is to say that just because something is written in HTML you have a God-given right to be able to run it in your desktop browser. I hope more apps like this do appear and push e.g. Android to sort out their home screen/web app integration. We should be able to have the experience this app provides on iOS everywhere by now, here's hoping Android get this sorted soon.
- nickpresta 14y ago
  Which homescreen integration would that be? With the exception of having the chrome (URL bar) hidden by default, Android can add webpages to the homescreen and treat the tile like a native app, already. It isn't so much that we should be able to run it in our browser, it is that the author is intentionally looking for iOS, with the site added to your homescreen. Had the title been "HTML5 Homescreen App for iOS" I think people's expectations would be different.
  - nilliams 14y ago
    >> With the exception of having the chrome (URL bar) hidden by default... Yeah that's one pretty major problem that shatters any illusion of feeling native on Android. The other problem is that the ability to add to homescreen is not particularly obvious to users and most probably aren't aware it can be done: >> Create a bookmark via the menu, find it in the bookmark list, long-press on it, and tap "Add to home screen". [1] [1] https://developers.google.com/chrome/mobile/docs/faq https://developers.google.com/chrome/mobile/docs/faq

artursapek 14y ago

Shit, it's 3° in Redmond? I better stay inside.

ewang1 14y ago
It defaults to Celsius, so you'll have to change it to Fahrenheit.

taf2 14y ago

installed it on my phone, but i just see a spinning wheel and a pink background... the 3d effect when flipping to the other locations looks nice, but perhaps the location api times out or there's a service call that's timing out because it looks to be frozen, for my location.

suhailpatel 14y ago

Great design but not sure why this needs to be iOS only and why it needs to be installed to the homescreen. I still don't think it's better than a native app because it took 30 seconds to actually show anything from a black screen and then a minute or so to load the data on stable fast WiFi (bet it'd be worse over 3G). A native app has UI code and fancy animations on board and if this was an initial impression of something I wasn't really interested in observing, i'd uninstall it straight away. Granted it does load faster on subsequent launches (caching maybe?) but it's the initial launch which matters to me.

nilliams 14y ago
Is the initial launch not simply comparable to downloading a native app from the app-store?

Nux 14y ago

"Sun is a web app designed for the iPhone and iPad." - why bother make it a "web" app then? Waste of time.

ewang1 14y ago
perhaps b/c it's much faster to make it in html5 than in Obj-C?

quasimo 14y ago

I shared this long time ago: http://blog.linz.im/2012/webapp-sun.html http://blog.linz.im/2012/webapp-sun.html

hnriot 14y ago

I installed it and all I see is a pink screen with my location and temp. Completely boring "app" google weather is far superior (in HTML and works on more than just my iPad)

dangrossman 14y ago
Pinch and swipe, as it says.

arms 14y ago

Slick presentation, but simply takes too long to display data and seems buggy - caused my phone to freeze.

hayksaakian 14y ago

Not sure what I'm supposed to be looking at. I don't suppose that a nice picture of an iPhone == weather app. http://www.imgur.com/djVjc.png http://www.imgur.com/djVjc.png

pan69 14y ago
What app you use to make screenshots with?
- hayksaakian 14y ago
  Native screenshotting plus imgur app for sharing to a URL quickly.
- nickpresta 14y ago
  Android since version 4.0 has the ability to natively take a screenshot. Hold the Volume Down + Power button and you should see a little camera flash and a notification about your screenshot.
- roryokane 14y ago
  Since that’s Android 4, he’s probably using the built-in screenshot function. Just hold down the Volume Down and Power buttons at the same time. You can then access the screenshot from the resulting notification or in the Gallery. More info: http://www.howtogeek.com/121133/how-to-take-screenshots-on-android-devices-since-4.0/ http://www.howtogeek.com/121133/how-to-take-screenshots-on-a...

simurai 14y ago

Don't forget to pinch out (kinda hard to discover), once you're on a location and you get a details view like this http://drbl.in/glDK http://drbl.in/glDK

fideloper 14y ago

The design is beautiful! This would make a great native app - Which I only say because HTML5 on iOS seems a bit choppy for such nice animations. It's unfortunate to find such snark for something which I'll bet took a lot of effort to do. It makes sense for an HTML app to be friendly to all devices, and probably that is something to aim for. Obviously has room for improvement, but I think we (myself included) can all do better at delivering feedback.

cnp 14y ago
Yeah totally. I think he did a fantastic job. All of the transitions and functionality and design is gorgeous. Agreed, it was a little confusing with the home screen issue in the beginning, but I totally get why he did it, and after a few seconds everything was working like it should. Really great work.

chacha102 14y ago

Ever since the iPhone weather app, I get really annoyed when weather apps display the weather to be 'sunny' at night. Its not sunny. PS: Yes, its not a huge deal. If there was a 'feature' list, it wouldn't be listed. But trying to tell me San Diego will be 'sunny' at midnight is just wrong. </rant>

yock 14y ago

An honest question. Is there any technical reason this is limited to iOS?

flixic 14y ago

The most amazing feature of this, that I have seen NONE other app do, is the changing icon. Install the app, and change the colors. Then, close the app. Its icon's colors have changed to reflect the color theme change.

sktrdie 14y ago

Wonderful! I love these beautiful minimalist UX experiments. Especially when using open technology such as HTML5. Any info on how you built all the really nifty animations? Used any tool to get it just right?