Category: Web Tools

Bower – A Package Manager

Recently I blogged on Modern Web App development, in which I mentioned few tools which will ease the web development. Today, let’s explore one more tool – Bower, the package manager for Web.

As you may aware that modern web application development requires one to many libraries or frameworks, and maintaining all of them is really hard, especially while upgrading! Isn’t cool, if we have a tool to do this job! Let’s take a look at the tool –

Bower is a great tool which helps us to maintain the project or app dependencies in more elegant way!

How it works?

Bower uses bower.json manifest (similar to package.json) file to hold all the package information. You can easily edit this manifest file. Works like a configuration file for your packages. Using Bower commands you can install all those packages at once.

Installing Bower

You can install Bower using npm (Node Package Manager). If you don’t know what is npm, you can learn here – https://docs.npmjs.com/. So, if you don’t have npm installed on your machine. Install the Node.js, which will install Node as well as npm.

NOTE: Bower requires Git. So install Git before you proceed with Bower installation.

  1. Node.js 
  2. Git

You may have to open Terminal(on MAC OS) or PowerShell / Command Prompt (on Windows). [I recommend PowerShell on Windows than Command Prompt.]

Type the following command –

npm install -g bower

NOTE: You may get permission issues, so you run the above command using sudo in MAC. On Windows, run the PowerShell or Command Prompt with Administrator Privileges.

Once you are done installing Bower globally, now we are ready to play with it!

Now, we need to create bower.json manifest file. You can create this manifest file manually or through bower.

Manually creating bower.json – Create a file and rename it to bower.json. That’s it! Data included in this manifest file should adhere to the spec –  https://github.com/bower/bower.json-spec

A Sample bower.json for Angular app

{
 "name": "demo-app",
 "version": "1.0.0",
 "dependencies": {
 "angular": "^1.3.0",
  "bootstrap": "^3.2.0",
 "angular-animate": "^1.3.0",
 "angular-cookies": "^1.3.0",
 "angular-resource": "^1.3.0",
 "angular-route": "^1.3.0",
 "angular-sanitize": "^1.3.0",
 "angular-touch": "^1.3.0"
 },
 "devDependencies": {
 "angular-mocks": "~1.3.0",
 "angular-scenario": "~1.3.0"
 },
 
}

Interactively create bower.json – You can create the bower.json interactively using  –

bower init

Answer the questions popped by Bower and it will create the file for you.

How to add new packages?

Try the following command –

//install the package and add it to bower.json dependencies
bower install <package-name> --save
//Ex: bower install jquery --save

You can search for available packages  – http://bower.io/search/

Update the bower package  –

bower update <package-name> <package-name> [options]

//-F: Force latest version on conflict

//Ex: bower update jquery -F

Uninstall the bower package  –

bower uninstall <package-name> [options]

//-S: Remove uninstalled packages from the project’s bower.json dependencies

//Ex: bower uninstall jquery -S

More Bower API’s – http://bower.io/docs/api/

Can I register my own package or library?

Yep, you can do that using bower register – 

bower register <your-package-name> <git-endpoint>

//Ex: bower register mylibrary git://github.com/user/example.git

You can also unregister – http://bower.io/docs/creating-packages/#unregister

Bower comes with lot of tools, which allows you to integrate the Bower with other IDE’s and tools. More info – http://bower.io/docs/tools/

Hope you have got quick overview of Bower package manager and usage of the tool.

Happy Web Programming!

Useful Chrome Apps & Extensions for Web Developers

I have made by work easy by using the extensions / plugins whatsoever we call them. It can be on Chrome or Firefox. In this post, i would like show you few apps & extensions for Google Chrome(my favorite browser).

I strongly believe that Tools are great assets for web developers to debug the resolve the issues in no time. Tooling is gradually gaining momentum and it’s reaching peaks!

Backbone Debugger : Developer Tools extension for debugging Backbone.js applications. It allows to debug the Backbone.js web application by inspecting the Views, Models, Collections, Routers objects.

It’s a great debugging tool to find the daemon views which is left in the DOM and it tracks the events triggered.

You can install it from Chrome Web Store – Backbone Debugger

Ember Inspector : Tool for debugging Ember applications. It allows you to –

  • View all the routes defined in your app.
  • Information about templates, controllers and models that are currently rendered.
  • Inspect the Objects – Models, Collections etc.,
  • Make your application’s objects available in the console as $E variable.

You can install it from Chrome Web Store – Ember Inspector

Grunt DevTools : It’s an awesome tool to run your grunt tasks right inside your chrome browser. Also, it’s capable of running grunt tasks from multiple projects.

You can install it from Chrome Web Store – Grunt DevTools

JSON Editor : One of my favorite JSON editor tools which allows to edit JSON in the browser. It formats the JSON and you can live preview the results.

I know there are multiple apps / extensions for JSON, but i feel this is pretty useful to me atleast. You can install it from Chrome Web Store – JSON Editor

Tincr: Allows editing and fast reloading of local files from Chrome developer tools. With this tool, you don’t need to traverse between your source code and web browser. You can edit the source code inside the browser and changes will be automatically saved to the source. Cool Isn’t it!

In addition, Tincr does auto reloading of JavaScript and CSS changes made in other editors.

You can install it from Chrome Web Store – Tincr

Clear Cache : It allows to clear the cache / history of the browser from the beginning with a click. It’s an extension written by me and yet to publish to Chrome Web Store. It available in GIT and you can pull from it and install manually!

Download from my Git – Clear Cache

I will post more tools as i found useful to web developers like us 🙂

Happy Web App programming!

Web Tools from Microsoft – modern.IE

I was amazed with the amazing tools provided by Microsoft for Web developers and they hosted a website specially for these tools – modern.IE

So, I’m planning to brief about the Tools in modern.IE site in this post. Let’s see what’s in?

Website Tile – I love this feature! It allows to create Windows Tile in few seconds. Allows the user the user to pin the website to their Windows 8 start screen.

Virtual Machines – It provides virtual machines for different platforms – PC, Mac and Linux. Allows to test your website on different versions of Internet Explorer from your Mac or Linux.

Site Scan – This is a service which allows you to scan your website for coding problems. It helps developers to improve the performance of the site by fixing the pitfalls. It’s Open Source!

Compatibility Scan – It allows to scan your website for your code which is no longer supported and you can update it! This is very useful for outdated browser support especially for < IE 9+ versions.

Browser ScreenShots – It takes the screenshots of your web site in different browser on various platforms includes Mobile Safari and Android.

Developer Channel – Like Firefox and Chrome, IE started pushing nightly build with upcoming features enabled on it! It allows the developers to test the upcoming features in IE to take advantage of latest features!

It has much more in it including Community Support, MSDN resources etc., It’s all yours to explore the hidden information!

Happy Website – IE programming!!!

Build Hybrid Apps Online with Adobe PhoneGap Build

The Pain area while creating Hybrid Mobile Apps is building to multiple Platforms. I’m NOT saying it’s too difficult, also, it’s not simple process. How it will be if you have a tool which does this BUILD process automated for different platforms? Super Cool… Isn’t it!

It’s Adobe PhoneGap Build tool! Adobe offers this as a CLOUD service, where you don’t need to install any Software on your PC/MAC. Great, Thanks to Adobe for making this. Personally, i love this 🙂

How to use this Adobe PhoneGap Build?

Before going to know about this tool, be ready with your source code for HYBRID Mobile App which includes – HTML, CSS and JavaScript.

Now, visit the PhoneGap Build URL – https://build.phonegap.com/. Register yourself. You have FREE and also PAID plans and it totally depends on your needs. If you are OSS developer, then FREE plan should be fine.

Once you logged in, you may have to click on + new app

newapp

It allows you to pull the code from GIT repo. It can be a Public or Private repo. To build Private repo’s you may have to pay for it and maximum number of Apps you can create is 25(with single login)!

newapp

I have pushed a demo app to Git to test this PhoneGap Build and if you wish to try out, you can use it. It’s https://github.com/roopeshreddy/PhoneGapAppDemo/

Once you have entered your .git URL, you can click on pull from .git repository. This will fetch the source files from Git and make it ready for BUILD.

NOTE: You can also upload zipped folder instead of .git repo!

Now, it will be ready to create BUILD. You can edit the name of the application, enable debugging etc.,

newapp

Once all the options are set, click on Ready to Build which will create respective installer files for different platforms!

Untitled

Aaah, we are ready with installer files for different Platforms. Just click on the platform icons to download the respective installer file.

As of now, Adobe PhoneGap Build supports following platforms –

  • iOS
  • Android
  • Windows Phone
  • BlackBerry
  • HP WebOS
  • Symbian

NOTE: As per the Official blog of Adobe PhoneGap, they are depreciating BlackBerry, HP Web OS and Symbian Platforms. you can ready more about it here – Phone Gap Platform depreciations

Happy Mobile App Development!

Web Tools – makes WEB more beautiful.

I strongly believe we need great tools to build great Web Apps. I will walk you through few tools which i use in my development. It may be helpful for you too 🙂

 

Brackets   An awesome IDE.

Brackets from Adobe is an open source project which is an awesome tool for Web developers. It’s available across the platform include – Mac, PC and Linux. I strongly recommend to try this IDE, if you didn’t try it!

It has plug-in support which includes JS Hint, CSS Hint etc., which makes this tool more awesome.

extractcss.com – An awesome CSS tool.

It’s an Online tool to extract the inline styles to make clean HTML.

jsbeautifier.org – An awesome JavaScript & HTML beautifying tool.

It’s an Online tool to make the JavaScript and HTML readable. Also it makes the code adheres to JS Lint (Indentation only)!

Online JSON Viewer – An awesome Online JSON Viewer tool.

It’s an online tool to view and edit JSON data. Also, we can load data from external URL.

JS Hint – An awesome JS code quality tool.

It’s an online tool to make the JS lint free. Also available as plugin for Visual Studio, Brackets IDE etc.,

JS Bin –  An awesome WEB tool.

It’s an online tool to create Web snippets includes HTML, CSS, JavaScript. Allows exporting to GIT as gist. Many more features to explore!

Watch this space for more web tools!