Bower - Digging a bit deeper

I've been using Bower to install packages into my apps in WebStorm for a while now. I really like how unobtrusive it is compared with Nuget in Visual Studio which always leaves me wondering what it has installed and where.

Bower is described as 'unopinionated' which I guess means that it doesn't try to tell you what to do with the packages it downloads and trusts you to do the right thing. This pleases me as I hate filling my projects full of junk an not knowing what has been altered.

Bower keeps the packages it downloads tidily away in a folder called 'bower_components', I just leave the files in there and reference them from my pages.

I've even started using bower in my Visual Studio projects recently rather than Nuget, I guess that says a lot about how much of my coding has moved to client side over the last year or so.

As with other great tools like Git or Resharper I always feel like I'm only using a fraction of whats there so I was pleased to see a new course on Pluralsight by one of my favorite course authors Joe Eames digging a bit deeper into what can be done with Bower.

As always with Pluralsight it's a great course and having watched it and taken a few notes, i'm now ready to use Bower to manage my dependencies in a smarter way rather than just using it to install packages and nothing else.

Here's what I learnt:

1. The .bowerrrc file stores where the files are located so that when you manage your dependencies bower knows where to put them.
   
2. bower init
   Rruns you through the creation of a bower.json file for your project.
   
   
3. bower info <packagename>  
   shows you what versions are available. By default Bower will download the latest.
   
   
4. bower update  
   updates all your bower installed packages to the latest versions.
   
   
5. bower install <packagename>
   not only installs the package initially but is used again to update the package to a later version if available.
   
   
6. bower list
   shows your installed packages and dependencies in a tree view.
   
   
7. bower search
   searches for bower packages in the bower repository where the title contains specified text.  Joe mentions that this does not search descriptions and you'll need to go to the bower website for that.
   
   
8. bower cache clean
   Bower keeps a local cache of packages so that if you download the same one more than once for different applications it will use the one it has stored locally if its the newest.
   
   
9. bower install <packagename> --o 
   Installs the package from the cache in offline mode not checking for the latest version from the Bower repository.
   
   
10. bower install <path>
    installs your own package from a local git repository. (the Bower repository is just a GitHub repo)
    
    
11. bower install <urltofile>
    Installs a single js file when the full Url to it is provided
    
    
12. bower install <package> --save
    saves a reference to the package in the bower.json file meaning that you can check your project in without the packages and pull them in when needed using bower install --production
    
    
13. bower install <packagename> --save-dev
    saves a reference to the dev packages in the bower.json file meaning that you can check your project in without the packages and pull them in when needed.
    
    
14. bower help
    Lists commands and options
    
    
15. bower help <command>
    List deeper info on that command
    
    
16. bower lookup <package>
    Gets the GitHub Url to the package.
    
    
17. bower prune
    Uninstall any package which is not listed as a dependency in the bower.json file.
    
    
18. bower install <packagename> <packagename> <packagename>  --save
    Multiple packages can be installed in one go.
    

Joe goes into a lot more detail and also demonstrates publishing your own project to GitHub, registering it with Bower and then pulling it into a new application with Bower. I'd definitely recommend doing this course. If you don't have a Pluralsight subscription you can get a free trial. This course is only an hour long but there are lots more great courses in there.

Links

Bower Fundamentals - Pluralsight
Joe Eames - Pluralsight
Bower Website
GitHub

1.0.0.2 Update of Food Hygiene Checker

It's been a while since I've updated the Windows Phone version of my Food Hygiene Checker app so I thought it about time I added at least one of the features I'd had in the back of my mind for it.

Watch List
I've been thinking that it would be good if you could add establishments to a sort of 'favourites' list. Of course an establishment you are adding to a list may well not be your favourite so 'Watch List' seemed more appropriate.

New Home Screen
To accommodate the new page, I've made the home screen tiles smaller and added a new 'Watching' tile as well as a tile directing users to the 'About' pane.

Version History
I've also taken the opportunity to add an extra panel to the home screen to show the version history of the application. I home to more actively develop the app and its Windows 8 Store Version more regularly in the coming months so this will be a place where users can keep track of what's changed.

Feedback
As always, I'm happy to hear from users regarding any bugs they might find as well as suggestions for improvements, insults etc. (ok.. not insults!)

Submitted for certification
The update was submitted for certification with the Windows Phone Store today (6th December 2013) and assuming it passes should be in the store in a few days.

Thanks for reading this and/or using Food Hygiene Checker

Alan

Food Hygiene Checker in the Windows Phone Store
Food Hygiene Checker in the Windows 8 Store

Radio Andra Player For Android

My latest application is a bit of a break from the norm for me as it's an android application. Having already created a Windows 8 Store version of this online radio player there was a need for an Android version.

Radio Andra Player in the Google Play Store

 



Radio Andra Player for Windows 8

Just released the Radio Andra Player for Windows 8 Store. Allows users to stream Radio Andra in the background whilst doing other stuff.

 

 

An iOS version of this app already exists but I plan to create Android and Windows Phone Versions in the coming months.

Food Hygiene Checker

Food Hygiene Checker is an application developed for the Windows 8 and Windows Phone platforms to allow users to find the Food Standards Agency ratings if establishments.

To download the Windows 8 version click here

For the Windows Phone version click here

Some Screenshots

Windows Phone Version

Windows 8 Version

Food Hygiene Checker for Windows Store

The latest version of Food Hygiene Checker for Windows Store has just been sent to be certified, it should be in the store in a few days if all goes well.

To keep it in line with the phone version I've added a more info page contains the full details of an establishment alongside a map showing the location.

A Custom Loading Indicator Using AngularJS

I'm currently writing a web version of my Windows Phone & Windows 8 App 'Food Hygiene Cchecker'. Food Hygiene Checker is an app which used the api provided by the UK Food Standards Agency (http://www.food.gov.uk/) to provide the food hygiene rating of establishments both near their location and throughout the UK.

As this is just a fun home project with no time restraints I thought it would be an ideal opportunity to learn the AngularJS framework.

If course I could have created an animated gif for this but where is the fun in that. I also considered using HTML5 css animation but as I say, I wanted to learn AngularJS and this solution would be more controllable.

The result of my experiment is shown below. It mirrors the custom loader I have in the app versions of Food Hygiene Checker which was created in XAML.




The Javascript, HTML and  CSS can be seen below:


My first foray into AngularJS was very positive indeed, it was similar to the time I discovered jQuery and everything changed. As a next step I plan to package this into a reusable AngularJS component.

AngularJS has a new fan.

Alan