June 18 Bower Package tool

Yesterday i was working on Yeoman. Yeoman has 3 tools
1. Scaffolding tool-Yo
2. The Build tool- Grunt and Glup
3. The Package manager- npm and bower
Now lets discuss about Bower.
Why?
As in earlier times we have to download or manage our scripts manually or you can say as a dependency management. But now this problem solved by using two main tools npm and Bower

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

How? How bower do that?
Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file,bower.json. How you use packages is up to you. Bower provides hooks to facilitate using packages in your tools and workflows.

What?
Bower is optimized for the front-end. Bower uses a flat dependency tree, requiring only one version for each package, reducing page load to a minimum.

By this my Yeoman is finished now I am waiting for my seminar. Lets see What’s my next task? I am really excited about it.

June 17: Yo Yeoman

Yesterday i was working on java script using superhero.js. So after that i have started working on yeoman
Many of us knows how to develop a web app. And Rest of us want to know.
So shall we discuss about the problems faced during developing a web app?
1. Start- many of us are lazy to start developing a web app
2. Manage- how to manage the bulk of code?
3. Optimize speed
4. Testing- a lot of time is wasted to think and find the tool for testing testing is also of various types
5. Application database
Till the end we were totally fed up and quit before completing the app

Good news for all of us
Yeoman beautifully and amazingly solve this problem
1. Kick start
2. Grunt
3. Create skeleton
4. Scaffolding
Now what is yeoman
Yeoman is the web scaffolding tool for the modern web.
It has a generator eco system( generator is a plugin which scaffold using yo command)
Tools used in yeoman
1. The scaffolding tool –Yo
2. The build tool- grunt and glup
3. The package manager- bower and npm

The build tool
Why?
– css valid or not – wouldn’t you find it interesting to know whether the css is valid or not?
– optimized- would u like the css and js html to be already optimized
– load time- have u tested your code without remembering to check the load time
– structure or simplify your work
– less or sass

What is grunt?
The java script task runner
With literally 100 of plugins to choose from you can use grunt to automate
You can publish ur own grunt too

Plugins available-
Coffee script
Handlebars
Jade
Js hint
{Less}
Require .js
SASS
Stylus

How?
Npm install -g grunt-cli
Npm install grunt

Preparing a new grunt project
Add two files in your project
1. Package.json- used by npm to store metadata
2. Gruntfile – gruntfile.js or gruntfile.coffee

And more over today my friends Gaurav and Gurjit explain me about Susy. Ahaan Susy nice name.
Susy is a css toolkit

Now why Susy ?
In bootstrap foundation their are fixed number of columns and everything is fixed here u just need to implement your site. But the major drawback in bootstrap the website design of bootstrap look similar with other websites which are design in it. The same button,
Same text box, so to over come all this we use susy

Susy is totally flexible toolkit. The columns can be defined by user itself. Moreover it has more functionality and tools.

How?
Susy has two mixins
1.Container mixin- To define container
2. Span mixin- to define number of column
For more go their Susy