Categories
Uncategorized

Thinking, the right way

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.

Introduction

To come up with a new idea 💡 or finding a solution for a problem ✓, you start thinking 🤔. Most of time, you end up with a dead-end without coming up with an idea or a solution.

Let’s try to go through the following example to know what’s happening, then we get to know how to solve the problem.

Example of bad thinking

Let’s make an idea of business about selling water bottles.

Green 🟢 – Red 🔴 Thinking

When you first think about the idea mentioned above, you would say: why this idea? many are doing that. 🔴
Ok, but I might make new product ideas 🟢
Hmm, but ideas might not be accepted. 🔴
But also, I can make the prices affordable. 🟢
I don’t know, it not seems to be a good idea. DEAD

This is the waterfall of thinking. Green for ideas, Red for blockers and problems. Then the whole idea is Dead.

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.

Then we can say: Green, Red … Green, Red … Green, Dead.

How to solve that

The optimal way to think is to collect all the ideas before validating them. I mean collect them without think of they are feasible or not.

After you collected your list, then you start to look at them again and think:
What is not feasible? Can I merge/combine non-feasible ideas to make a new idea?

Now, shortlist your collection. Then do it again, till you have ONE or few ideas to make.

Conclusion

Never say no to any idea. Collect them all then start combining, filtering and reviewing them. You will get a better picture.

Credits
Background vector created by rawpixel.com – www.freepik.com

Categories
CSS Front End Java Script Network

Optimising Aljazeera.net website – Front End case study


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.


Why I choose Aljazeera website?

I have chosen Aljazeera website because of the following reasons:

  1. It’s popular in the MENA (Middle East and North Africa) region and one the top 1,500 websites in the world. Alexa rank (screened on July 15, 2015):
    Aljazeera Alexa Rank
  2. The website is slow like a snail. More than 4.2 seconds download in the best case scenario. Pingdom speed test:
    Aljazeera pingdom test
  3. It has lots of issues that I wanted to cover in this post.

What does it already have?

The website is not well optimised. I can only say it’s HTML code is good. The HTML has some issues like have extra codes that are useless and some inline scripts.
The DOM is defined as HTML5 tag, which is good. And we have a “viewport” META tag, which means the website is responsive. That’s good for SEO too.
So, its going to be a big article covering all areas and optimising all aspects of this website.

Optimising HTML.

The HTML is not optimised. We have some inline Scripts that should be moved to Javascript files. There are 7 <script> tags in the HEAD. 3 are file includes and 4 are inline code.
We have 16 Javascript tags <script> in the page. All these scripts are around the page. And as i mentioned previously, 7 in the <head> tag.
As we also can see, we have around 156 requests including 3rd-party services. These requests could be optimised to smaller number by concatenating CSS files into 1 file, and Javascript files into 1 or 2 Javascript files.

Also there is a refresh META tag. Seems they use it for increasing page views:

<meta http-equiv="refresh" content="900" />

Optimising CSS.

This area needs lots of work.

  1. Commented CSS code.
  2. CSS properties better to be combined in one. Example “background” instead of background-image, background-position, background-repeat
  3. The use of !important; This !important should be used very carefully. While most of engineers say: Don’t use it at all.
  4. Use real and useful values. We have some values like:
    text-indent: -50000px;
  5. using CSS properties in a wrong way, using “overflow:hidden” for body and html. Also using font size for html as percentage. While this, or the body, should have the initial value. Here is an example:
    html {
    	font-size: 62.5%;
    	overflow-x: hidden;
    }
    body {
    	line-height: 1;
    	overflow-x: hidden;
    }
  6. There are deep CSS calls, like:
    .CommentsLiveMod #comments .comments-section #ManinReaderComment .main-comment .start-comment-on-comment .close-commenting:hover
  7. Using generic CSS, and this is really bad. Here is an example (its only One css block here):
    .arab_world_drag_tabs>div>div>div

Optimising images.

Article images are well optimised. But when we take a look at the icons and images loaded from CSS, we find the following:

– Images are not optimised at all.
– All images and icons are separated. They should be combined into image sprites.

Optimising JS

We have lots of work here. Here are some points about improving javascript:

  • Move most of inline Javascript code to JS files.
  • Combine Javascript files together to decrease hits on server. And to decrease rendering time.
  • Call Javascript files from CDN, this will boost the website’s performance, while the file are currently loaded directly.
  • Move Javascript files at the end of document. This will affect some events handling in the website, but updating the events will solve this issue.
  • Javascript code is not minified. This means more Bandwidth and more page loading time.
  • There are couple of 3rd-party scripts are loaded, but i can’t suggest anything here while these are used for monitoring, adding features, and delivering extra features.

 

Categories
Browsers CSS Design HTML Misc Web & Programming

Arabic web fonts are here

When Google Fonts Early Access was released (i guess in 2012), 5 Arabic fonts were added to the list. The Arabic fonts are:

  • Amiri
  • Droid Arabic Kufi
  • Droid Arabic Naskh
  • Lateef
  • Scheherazade

And from that since, only Noto group were added to the list of Arabic fonts:

  • Noto Kufi Arabic
  • Noto Nash Arabic
  • Noto Sans Kufi Arabic

 

And because Arabic websites are lack of Arabic web Fonts, i have developed a website called FontFace.me to serve web fonts for Arabic language.

FontFace.me is a free service to use. I also have FontStatic.com domain to be the CDN to serve CSS and Font files.

I hope this will be used for all Arabic websites soon.

Categories
HTML Java Script Jquery Web & Programming

Objects and Privacy in Javascript

We all know that Javascript does not support (property or method) privacy when you write Object Oriented code. In this post, i will explain how to create private (properties and methods) in Javascript.

Lets start now to do an experiment: lets create a normal object with a property and method, and try to access them to see what we get.

Here is how to create a simple object:

// Creating an Object:
var myObject = {};

// Now setting a method and a property
myObjcet.myProperty = 10;
myObject.myMethod = function (){return 'My Method';};

Now, lets try to access them. I will use my Console on the browser:

console.log(myObject.myProperty);
// This will return 10

console.log(myObject.myMethod());
// This will return 'My Method' string

We can modify our method and property by doing this:

myObject.myProperty = 15;
myObject.myMethod = function (){return 'something else';};

This will be a problem, because we need to access our method and property.. But we don’t want them to be changed or modified.
Let’s try to write this in a different  way to make them private.

var myObject = (function (){
   // this is a private property. Cannot be accessed.
   var privateVar = 10;

   return {
      myProperty = 15,
      myMethod = function (){return 'my public method';}
   };
}());

Now, we can access “myProperty” and “my Method” as the following code:

console.log(myObject.myProperty); // 15
console.log(myObject.myMethod()); // "my public method"

But we can’t access the “privateVar” property. It can be only accessed within the Object scope.
Let’s try to get its value. We will need to write another method to do that:

//Same as previous declaration:
var myObject = (function (){
   // this is a private property. Cannot be accessed.
   var privateVar = 10;

   return {
      myProperty : 15,
      myMethod : function (){return 'my public method';},
      // Here we can get the private value
      myVar : function (){return privateVar;}
   };
}());

Now, if we tried to access all that from our Console, we will get :

console.log(myObject.privateVar);
// undefined

console.log(myObject.myVar);
// 10

There is another way to do this, but it’s not supported by all browsers (supported by Firefox, Chrome, Safari, IE9+ and somehow supported by IE8)
By using:

 

Categories
Free Stuff Misc Web & Programming

Stop using apps for Git, use command line

Lots of developers I’ve met are using applications for their Git repositories. Few who use command line (terminal) to do that. You can see list of these applications in Git-SCM

I can tell that reasons for using apps instead of command line (terminal) are one of:

  • Lack of Help. Because when you have a question, there is no easy way to get your solution for it.
  • Not enough time to try and experience Git commands. (lazy developers)
  • Most think that these apps do work faster and easier.

But I am sure that when you get familiar with Git commands, you will change your mind and forget about these apps.

In this article, I will explain the most used commands for Git and how to use them. Lets split them into points:

Initializing

You have different ways to initialize your repository:

  1. Cloning: by using command
    git clone [email protected]:alaabadran/some-repository.git
  2. Setting remote URL: first, you need to initialize it by
    git init

    Then use this code

    git remote set-url origin [email protected]:alaabadran/some-repository.git
  3. Manual config: You can do this by updating file .git/config

Checking and Fetching

I want to talk about this now because we will be using this alot.

Committing

Every time you do changes, commit it. Its preferred to commit every time you change/add something. Not to do that at the end of your work.

Before committing, you should check your repository status to know what to do.

git status

If there is no message, we can commit safely

git commit [options]

We should add all added/modified files to be committed. We have to way to do that:

git add . //OR 
git add --all

or we can do that in the commit command

git commit -a

You should keep in mind that every commit should have a message. The commit command will be

git commit -m "my commit message" // or 
git commit -am "my commit message" //while m is the option for adding message.

You can do several commits.. And once you want to upload your changes to the server, you should push it

git push origin master

Branches

When you create new repository, you have a master branch. You can create branches to split your work and once this part of work is done and tested, you can merge it with master branch.

So, master branch is for the final running and tested version.

To create a new branch do this:

git checkout -b new-branch

The new branch won’t be available on the server till you do commit and push.

To switch between branches do

git checkout branch-name

Important Note: You can’t switch between branches if you have un-committed work in your current branch.

Merging

When work on branches are done and tested, we can now merge it with master.. Or we may merge it with any other branch. The way to do that is:

git checkout master // Selecting the branch we want to marge to.
git merge new-branch

In the code above, you first select the branch. Then you merge it with other branch. new-branch should be the final tested version.

Merge Conflicts

When you are trying to merge and you’ve got  a warning for a conflict, just to be afraid. Git stores all file versions and nothing will be lost.

All you need is to run this command when you have a conflict

git mergetool

You may see a warning for choosing the tool for merging. Type one of the suggestion. I usually use this command

git mergetool opendiff

You will have to save every file conflicted and exit. Once you are done, merge will be over.

 

There are more things to discuss about Git, i just see that this is a good way to start using command line.
Please let me know if you have a question or feedback

Categories
Browsers CSS DHTML HTML Java Script Jquery Web & Programming

Building and Testing your JavaScript app with Yeoman

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.

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

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:

 

Categories
CSS Design Free Stuff HTML Java Script Jquery Mobiles touch Web & Programming

Responsive CSS Frameworks: What to use?!

The 960 Grid systems are the way to develop a faster websites. At the mean time, developing websites should support mobile browsers while mobile usage is increasing. So, supporting all screen sizes called: Responsive web.

I am not writing this to talk about this, i am writing it to give me details and features about several Grid Systems that mostly common. This will help you decide, what to use? and what is suitable for you.

Categories
AJAX DHTML Forms Java Script Jquery

15 Most Useful jQuery Form Plugins

There are plenty of jQuery plugins to use for Forms. I have collected 15 of them that are the most useful plugins for Forms. Let’s start with:

ALAJAX (Ajaxify your HTML form)

This plugin will easily ajaxify your HTML form. It will prevent the submit action, and then submit data as AJAX using the form’s method and action. The plugin could be applied easily to any form with no more changes on Front-end nor Back-end.

Categories
AJAX Browsers CSS Design DHTML E-Commerce Free Stuff HTML Java Script Jquery Misc Network PHP SEO Web & Programming Web Browsers XHTML

Tips for Better Website Performance

I am here not talking about Server-side improvements. I am here talking about Front-End improvements that really affects the web page speed.

The time spent till the website is running on the client’s browser. If we analyze that time, we will get: