6 ms·

Show HN: Custom New Tab page for Firefox

73 points by jakke 12y ago

milankragujevic 12y ago
Excellent! Much better than what I made for personal use, and it's great that you open sourced it. I'll set it up on my local web server and start using it.
- jakke 12y ago
  Thanks for the feedback! I've had a few prototypes along the years but this was actually something that I figured someone would be interested in. I'll continue to develop this and add customizable user settings etc when I have time
  - milankragujevic 12y ago
    I only have an issue where it's not displaying the temperature. I set the place to Kostolac in the controller and the view, and language to en, and it's just not displaying the temperature. I'm not familiar with Angular so I don't know how to fix it.
  - milankragujevic 12y ago
    http://milankragujevic.com/projects/newtab/ http://milankragujevic.com/projects/newtab/ http://milankragujevic.com/projects/newtab/newtab.zip http://milankragujevic.com/projects/newtab/newtab.zip Here's something I made, since your version doesn't work. It's a rip off of your work, but none of the code is taken and the temperature display works. It's much simpler, doesn't use any fancy JS, and is contained in 4 JS files including jquery and the quotes and the config.
sunilkumarc 12y ago
Is there any other better Javascript library than Moment.js to play around with dates ?
- sleepyhead 12y ago
  No. Are there any issues with it you think?
  - sunilkumarc 12y ago
    Not any that I can think of. I just wanted different way of handling dates.
explorigin 12y ago
Looks really nice. Out of curiosity, why did you use Angular? For a simple, non-interactive page Angular seems like overkill.
- jakke 12y ago
  Thanks! Yeah, you're right. I just love angular and was testing how I'll get it to work with RequireJs, which sort of ended up in this
skykooler 12y ago
An issue I've found is that the URL stays in the address bar. This seems to be caused by Angular adding "#/" to the page URL after it is loaded - any idea how to fix this?
- jakke 12y ago
  Be sure to link it to the #/ address if you're using the plugin. I had the same problem, this is because the router is redirecting all to the #/-address.
  - javamonn 12y ago
    I haven't looked at the app, but if he enables html5 mode you can drop the hash suffix on urls. https://docs.angularjs.org/guide/$location https://docs.angularjs.org/guide/$location
  - skykooler 12y ago
    I ended up rewriting the page without any JS frameworks - now it's a lot more compact. Index.html: http://pastebin.com/EwUDuhYG http://pastebin.com/EwUDuhYG
    - jakke 12y ago
      Neat, thanks for sharing! I ended up using a framework because I had plans to make this easy to customize and add a few more features.
tiggr 12y ago
Interesting to see the image get garbled in Safari 8.0.3.
erikano 12y ago
Looks nice. Off topic: Thank you for the link to the Custom New Tab addon -- been thinking I wanted something like that in my Firefox but hadn't thought to actually look it up. That addon doesn't seem to work for current Firefox on Android, unfortunately. Btw, your link to the addon in your README makes the page show in Finnish, you might want to change your link to point to the English URL.
simi_ 12y ago
As a long time user of Momentum, I like how this looks better. I've never seriously used the "main focus for today" feature.
- filiwickers 12y ago
  You can turn it off in settings on the bottom left.
duvander 12y ago
This looks great. I use something similar* in Chrome for a similar effect. I like that you can make it exactly what you want with your version. * http://momentumdash.com/ http://momentumdash.com/
- Majestic121 12y ago
  According to the description, it is indeed based on Momentum.
rdebeasi 12y ago
This is a really cool start! In the future, I'd love to be able to set preferences and save them to local storage. (For example, it would be nice to be able to set date formatting or location.) I know I could grab a copy of the code and then change those things myself, but then upgrades would be a pain. Overall, though, good stuff!
- jakke 12y ago
  Thanks! I've now added basic level customization from user.json, supports location but I'll work on the date time formatting also in near future.
jamiesonbecker 12y ago
Looks fantastic. It did take a few minutes to get forked over and modify for location, °F instead of °C, etc. Perhaps a future version could use a config.js or something that would just swap those. For the record, you want to edit js/scripts/controllers.js and js/scripts/view/dashboard.html. Replacing Helsinki in the openweathermap.org link with your plain text city name seems to work. For Fahrenheit, replace the "var temp" line in controllers.js with: var temp = Math.round(((parseInt(data.main.temp) - 273.15) * 9/5) + 32, 2) + "°F"; I didn't get the github.io pages working in less than a few minutes, so I just grabbed it locally where it'll probably work faster anyway. Thanks also for the great plugin link. Excellent work Jakke, beautiful typography.
- asyncwords 12y ago
  Similarly, if you prefer the American date format you can change the two $scope.text lines near the end of controllers.js to $scope.text = "Good " + $scope.getStateOfDay(moment().get('hour')) + ", today is " + moment().format('dddd MM/DD/YYYY') + "."; which looks like 'Thursday 03/12/2015'; or you can change both lines to $scope.text = "Good " + $scope.getStateOfDay(moment().get('hour')) + ", today is " + moment().format('dddd, MMMM DD, YYYY') + "."; which looks like 'Thursday, March 12, 2015'.
wongarsu 12y ago
This looks really nice, I'm going to set this up. If you want to keep developing this, you should think about packaging this into a convenient addon. But what I'm missing most right now is a license file! Right now it's just copyrighted without giving anyone the permission to copy or modify it. I don't think that's your intention (If you don't want to think about it, the MIT licence is a good choice)
potch 12y ago
Incidentally, you can do this without installing an addon. In about:config, set the `browser.newtab.url` to any URL (file:///, local, or otherwise) you wish. This is really slick- nice work!
lcnmrn 12y ago
about:blank does its job!
detaro 12y ago
Looks nice. The weather info doesn't show in the demo for me for some reason? EDIT: only works over HTTP, not HTTPS
tarball 12y ago
Inspiring! Here is mine: http://i.imgur.com/HICxcIs.png http://i.imgur.com/HICxcIs.png
throwaway182734 12y ago
I'm the author of the cited add-on: Custom-New-Tab (https://addons.mozilla.org/en/firefox/addon/custom-new-tab/ https://addons.mozilla.org/en/firefox/addon/custom-new-tab/). Thank you so much for promoting it jakke (OP)! Just wanted to quickly respond to the few comments in this thread about my addon. - It doesn't work for FF on Android (I have never looked into it). - It's true that setting browser.newtab.url does achieve similar functionality but only Custom-New-Tab properly places the focus! - CNT can fix your "blanking the URL" problem. Check out the preferences.

73 points by jakke 12y ago

Excellent! Much better than what I made for personal use, and it's great that you open sourced it. I'll set it up on my local web server and start using it.

jakke 12y ago
Thanks for the feedback! I've had a few prototypes along the years but this was actually something that I figured someone would be interested in. I'll continue to develop this and add customizable user settings etc when I have time
- milankragujevic 12y ago
  I only have an issue where it's not displaying the temperature. I set the place to Kostolac in the controller and the view, and language to en, and it's just not displaying the temperature. I'm not familiar with Angular so I don't know how to fix it.
- milankragujevic 12y ago
  http://milankragujevic.com/projects/newtab/ http://milankragujevic.com/projects/newtab/ http://milankragujevic.com/projects/newtab/newtab.zip http://milankragujevic.com/projects/newtab/newtab.zip Here's something I made, since your version doesn't work. It's a rip off of your work, but none of the code is taken and the temperature display works. It's much simpler, doesn't use any fancy JS, and is contained in 4 JS files including jquery and the quotes and the config.

sunilkumarc 12y ago

Is there any other better Javascript library than Moment.js to play around with dates ?

sleepyhead 12y ago
No. Are there any issues with it you think?
- sunilkumarc 12y ago
  Not any that I can think of. I just wanted different way of handling dates.

explorigin 12y ago

Looks really nice. Out of curiosity, why did you use Angular? For a simple, non-interactive page Angular seems like overkill.

jakke 12y ago
Thanks! Yeah, you're right. I just love angular and was testing how I'll get it to work with RequireJs, which sort of ended up in this

skykooler 12y ago

An issue I've found is that the URL stays in the address bar. This seems to be caused by Angular adding "#/" to the page URL after it is loaded - any idea how to fix this?

jakke 12y ago
Be sure to link it to the #/ address if you're using the plugin. I had the same problem, this is because the router is redirecting all to the #/-address.
- javamonn 12y ago
  I haven't looked at the app, but if he enables html5 mode you can drop the hash suffix on urls. https://docs.angularjs.org/guide/$location https://docs.angularjs.org/guide/$location
- skykooler 12y ago
  I ended up rewriting the page without any JS frameworks - now it's a lot more compact. Index.html: http://pastebin.com/EwUDuhYG http://pastebin.com/EwUDuhYG
  - jakke 12y ago
    Neat, thanks for sharing! I ended up using a framework because I had plans to make this easy to customize and add a few more features.

tiggr 12y ago

Interesting to see the image get garbled in Safari 8.0.3.

erikano 12y ago

Looks nice. Off topic: Thank you for the link to the Custom New Tab addon -- been thinking I wanted something like that in my Firefox but hadn't thought to actually look it up. That addon doesn't seem to work for current Firefox on Android, unfortunately. Btw, your link to the addon in your README makes the page show in Finnish, you might want to change your link to point to the English URL.

simi_ 12y ago

As a long time user of Momentum, I like how this looks better. I've never seriously used the "main focus for today" feature.

filiwickers 12y ago
You can turn it off in settings on the bottom left.

duvander 12y ago

This looks great. I use something similar* in Chrome for a similar effect. I like that you can make it exactly what you want with your version. * http://momentumdash.com/ http://momentumdash.com/

Majestic121 12y ago
According to the description, it is indeed based on Momentum.

rdebeasi 12y ago

This is a really cool start! In the future, I'd love to be able to set preferences and save them to local storage. (For example, it would be nice to be able to set date formatting or location.) I know I could grab a copy of the code and then change those things myself, but then upgrades would be a pain. Overall, though, good stuff!

jakke 12y ago
Thanks! I've now added basic level customization from user.json, supports location but I'll work on the date time formatting also in near future.

jamiesonbecker 12y ago

Looks fantastic. It did take a few minutes to get forked over and modify for location, °F instead of °C, etc. Perhaps a future version could use a config.js or something that would just swap those. For the record, you want to edit js/scripts/controllers.js and js/scripts/view/dashboard.html. Replacing Helsinki in the openweathermap.org link with your plain text city name seems to work. For Fahrenheit, replace the "var temp" line in controllers.js with: var temp = Math.round(((parseInt(data.main.temp) - 273.15) * 9/5) + 32, 2) + "°F"; I didn't get the github.io pages working in less than a few minutes, so I just grabbed it locally where it'll probably work faster anyway. Thanks also for the great plugin link. Excellent work Jakke, beautiful typography.

asyncwords 12y ago
Similarly, if you prefer the American date format you can change the two $scope.text lines near the end of controllers.js to $scope.text = "Good " + $scope.getStateOfDay(moment().get('hour')) + ", today is " + moment().format('dddd MM/DD/YYYY') + "."; which looks like 'Thursday 03/12/2015'; or you can change both lines to $scope.text = "Good " + $scope.getStateOfDay(moment().get('hour')) + ", today is " + moment().format('dddd, MMMM DD, YYYY') + "."; which looks like 'Thursday, March 12, 2015'.

wongarsu 12y ago

This looks really nice, I'm going to set this up. If you want to keep developing this, you should think about packaging this into a convenient addon. But what I'm missing most right now is a license file! Right now it's just copyrighted without giving anyone the permission to copy or modify it. I don't think that's your intention (If you don't want to think about it, the MIT licence is a good choice)

potch 12y ago

Incidentally, you can do this without installing an addon. In about:config, set the `browser.newtab.url` to any URL (file:///, local, or otherwise) you wish. This is really slick- nice work!

lcnmrn 12y ago

about:blank does its job!

detaro 12y ago

Looks nice. The weather info doesn't show in the demo for me for some reason? EDIT: only works over HTTP, not HTTPS

tarball 12y ago

Inspiring! Here is mine: http://i.imgur.com/HICxcIs.png http://i.imgur.com/HICxcIs.png

throwaway182734 12y ago

I'm the author of the cited add-on: Custom-New-Tab (https://addons.mozilla.org/en/firefox/addon/custom-new-tab/ https://addons.mozilla.org/en/firefox/addon/custom-new-tab/). Thank you so much for promoting it jakke (OP)! Just wanted to quickly respond to the few comments in this thread about my addon. - It doesn't work for FF on Android (I have never looked into it). - It's true that setting browser.newtab.url does achieve similar functionality but only Custom-New-Tab properly places the focus! - CNT can fix your "blanking the URL" problem. Check out the preferences.