Categories
Browsers CSS DHTML HTML Java Script Jquery Web & Programming

Building and Testing your JavaScript app with Yeoman

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

I really like automation, especially when its smart.
I am talking here about building applications, testing, building for production and some other process may needed.

We will talk here about these tools:
Bower: is a dependencies manager. Managing your app by simply installing packages needed to your app.
GruntJS: is a Build and Testing tool. So, you can build your application, unit testing, minify CSS and JS files… etc.

Yeoman came to combine these 2 tools and some other tools into one. Yeoman job is to create a development application with a standard structure of files and directories.

jQuery, RequireJS and HTML5 Boilerplate are included by default with Yeoman to build your application.

This structure is like:

Yeoman files and directories

As you see, its using HTML5 boilerplate structure.

How to install Yeoman?

First, you will need to know that NodeJS is required. So, you will need to install it first.
To install Yeoman, write this in your command line:

npm install -g yo

How to build application with Yeoman?

Once its installed, all you have to do is:In your command line, go to the directory (folder) you want to setup your application in. Then, run this command:

yo webapp

Note: the setup directory should be empty, or you will get errors.

After building your application, you can start writing code and developing your app.

How to test my application?

You will need to run this command:

grunt server

It will prepare things and will open the browser for you to see your app.

Note: Make sure that port 9000 is not used by any application, while grunt is using it for testing.

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

While you are testing, don’t close the command line, and you won’t need to refresh the page. Grunt will do that for you when you update files.

How to build my application for production?

All you need is to run this command:

grunt build

Note: You will need to wait for a minute or two till this process is done.

You will see new folder in your application called dist that contains all built files.

grunt build

You see that script files are combined into one file. And every time you run the build command, it will create another file version for you.

How to install all dependencies and packages for my application?

You will need to know about this when you update your dependencies, or when you install the app in another place.
Because you don’t have to download all libraries and dependencies manually, your app will be clean, simple and be installed anywhere.

All you have to do when you want to install these dependencies is to run this:

bower install

If you already have dependencies installed, and you changed something or you need to update them, run this command:

bower update

But, How to tell my applications about dependencies and requirements?

You will need to update you bower.js highlighted with yellow here:

Bower.js file

For more information, please read:

Enjoy

 

Categories
Bootstrap CSS HTML Java Script Jquery touch Web & Programming

Overriding Javascript in Twitter Bootstrap

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

You all know about Twitter Bootstrap. It’s the top front-end development framework and it’s spreading more and more. And while this framework was made on standards and most of useful components were added to it, some of us may need to override some code of it for his/her needs.

I had a chance to work on that, i mean overriding. Let me explain what I was doing and how I did that.

I was working on Left Tabs explained below:

left-tabs

I put a Youtube video in the Tab Content side and when screen size gets smaller, the video gets smaller. This is a really bad behavior for using this.
So, I added an exceptional case for Content to get beneath the tabs in small screens.

In HTML, I made this:

 
<div class="tabbable tabs-left">
	<ul class="nav nav-tabs">
		<li class="active"><a href="#tab1" data-toggle="tab">
			<span class="video-title">1st video</span>
		</a></li>
		<li><a href="#tab2" data-toggle="tab">
			<span class="video-title">2nd video</span>
		</a></li>
		<li><a href="#tab3" data-toggle="tab">
			<span class="video-title">3rd video</span>
		</a></li>
	</ul>
	<!-- Here is what i've added -->
	<div class="clearer"></div>
	<div class="tab-content">
		<div class="tab-pane active" id="tab1">
			<div class="tab-content">
				<p>
					<h4>1st video</h4>
				</p>
				<iframe width="98%" height="400" src="//www.youtube.com/embed/Sui1IDorBsQ?rel=0" frameborder="0" allowfullscreen></iframe>
			</div>
		</div><!-- #tab1 -->
		<div class="tab-pane" id="tab2">
			<div class="tab-content">
				<p>
					<h4>2nd video</h4>
				</p>
				<iframe width="98%" height="400" src="//www.youtube.com/embed/Sui1IDorBsQ?rel=0" frameborder="0" allowfullscreen></iframe>
			</div>
		</div><!-- #tab2 -->
		<div class="tab-pane" id="tab3">
			<div class="tab-content">
				<p>
					<h4>3rd video</h4>
				</p>
				<iframe width="98%" height="400" src="//www.youtube.com/embed/Sui1IDorBsQ?rel=0" frameborder="0" allowfullscreen></iframe>
			</div>
		</div><!-- #tab3 -->
	</div><!-- .tab-content -->
</div><!-- .tabbable -->

The CSS used for the <div class="clearer"></div> is here:

 
@media (max-width:480px){
.clearer {
  *zoom: 1;
}
.clearer:before, .clearer:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearer:after {
  clear: both;
}
}

Why was all that?
I needed to use Left Tabs, and clear the float when viewing in a small screen like mobile.

The problem I’ve got is:
When I click on tabs, when tab content are not in view area, I feel nothing happens. While it’s working fine. But its not scrolling down to tab content.

I tried to add scrolling on Click event, but it didn’t work. The reason is, they are using Event Delegation.

I fixed this with the code below:

// this line will remove the Previous event.
$(document).off('click.tab.data-api');
// This will add event but wthout e.preventDefault(); line
$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    $(this).tab('show');
});

The Bootstrap code was:

$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    e.preventDefault()
    $(this).tab('show')
})

The bootstrap JS file I am talking about is: https://github.com/twbs/bootstrap/blob/master/js/tab.js scroll to the end of file to line 131

Resources for solution: