Alaa Badran

Responsive CSS Frameworks: What to use?!

Alaa Badran — Mon, 18 Feb 2013 06:13:15 +0000

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.

I know that there are more, but this what i know so far.

Something else, the list below is not sorted. All are awesome CSS systems.

Twitter Bootstrap

Its an awesome CSS framework. Its a 960 Grid system and worked really well. It contains 2 CSS files:

bootstrap.css : This is the main CSS file that contains all CSS styles and Grid system classes. responsive.css : Adding this file to your web ... Read More »

15 Most Useful jQuery Form Plugins

Alaa Badran — Mon, 03 Dec 2012 07:27:25 +0000

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.

jQuery File Upload (AJAX Upload with progress and more)

This is a big plugin with lot of features. I used it multiple times. It has lot of functionalities, it also supports NodeJS.

Niceforms

Simply, make your form pretty in easy way.

Fancy AJAX Contact Form

meioMask (Input field mask plugin)

This plugin applies a Mask to input fields. It’s a cool plugin for input fields.

Elastic (expanding textarea)

This plugin is cool for Textarea. it will ... Read More »

Tips for Better Website Performance

Alaa Badran — Sun, 01 Jul 2012 21:11:42 +0000

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:

Request Time (in milliseconds) Server Process Time, or response time (usually in milliseconds) Downloading web page and files into browser (few to several seconds, depending on internet speed) Rendering on browser.

And here is a preview of all requests to open this blog, and time spent to be done (Click to enlarge):

The question is? how does this effect website’s performance?

Too many requests takes more time. In-general web page size affects web page speed. Does some static files come from CDN? CSS and Javascript file sizes affect that too. Loading images.

Now, here is how to improve this:

Why?! Because we know that the web page’s request time on Server is ... Read More »

Drag and Drop with jQuery for Touch Devices

Alaa Badran — Mon, 23 Jan 2012 11:51:23 +0000

In the last post: Drag and drop with HTML5, i explained how to drag and drop using HTML5 and Javascript (jQuery). I mentioned that touch devices such as iPhone, iPad, BlackBerry, Samsung…. etc, does not support HTML5 Drag and Drop features.

Now, in this post, i want to explain how to make Drag and Drop possible for all devices. Before we start, you must know that it’s all about Javascript.. And i will use jQuery library while i am familiar with it and it simplifies writing javascript.

The Demo Files are available to download, If you want more details.

Th HTML code I used in the example as following:

As you can see above, its a ... Read More »

How to: Drag and Drop with HTML5

Alaa Badran — Mon, 26 Dec 2011 20:55:27 +0000

Drang n’ Drop in HTML 5 is supported by: IE9+, Firefox 3.6+, Safari 4+, Opera 11+ and Chrome 12+. But its not supported yet for touch devices like Touch Mobiles and Tablets. To make things more clear, its not only HTML 5.. Its a combination between HTML 5, CSS 3, and Javascript.

Why we combine Javascript with HTML 5? It’s just because we need validations and functionalities to make drag and drop functioning right.

Here I want to show an example for a drag n’ drop using HTML 5 and then discuss the code. Please check this example: freelancer-id.com/html5-drag-and-drop

The HTML code used in the example is:

<div id="recycle_bin"></div>  <ul> <li id="can1" dragable="true"><a href="#"><img src="images/can1.png" alt="can 1"></a></li> <li id="can2" dragable="true"><a href="#"><img src="images/can2.png" alt="can 1"></a></li> <li id="paper1" dragable="true"><a href="#"><img src="images/paper1.png" alt="can 1"></a></li> <li id="paper2" dragable="true"><a href="#"><img src="images/paper2.png" ... Read More »

Alaa Badran

Responsive CSS Frameworks: What to use?!

Related posts:

15 Most Useful jQuery Form Plugins

Related posts:

Tips for Better Website Performance

Related posts:

Drag and Drop with jQuery for Touch Devices

Related posts:

How to: Drag and Drop with HTML5

Related posts: