Category: Browsers


Arabic web fonts are here

Posted by Alaa Badran in Browsers, CSS, Design, HTML, Misc, Web & Programming. 3 comments

16th November

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.



Building and Testing your JavaScript app with Yeoman

15th August

A simple guide about how to use Yeoman to setup your web application, test it and then built it for production.
Its the professional way to build your web app.



Tips for Better Website Performance

1st July

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.



Drag and Drop with jQuery for Touch Devices

23rd January

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.


How to: Drag and Drop with HTML5

26th December

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.



15 Free Ebooks for Front-End Development and Design

13th July

Hi reader,I have collected 15 free ebooks for front-end development to put it between your hands. Not all are PDF files, some are websites and online samples.


jQuery Gloss Plugin

17th January

It’s lovely to make you webpage interactive. jQuery plugins add effects to multiple elements of HTML. jQuery Gloss adds a Gloss (shining) effect to images by simple and lightweight code.

This effect is added on hover effect (mouseover, mouseout).

This plugin is ~2.2 Kb and it’s simple as:

Add a DIV element to hold the image with class=”gloss”. eg:
<div class=”gloss”><img src=”” alt=”Image gloss effect” /></div>
Include the script file of jQuery Gloss plugin. eg:
<script type=”text/javascript” src=”gloss.1.0.js”></script>
Call the Gloss function. eg:
<script type=”text/javascript”>$(document).ready(function (){ $.gloss(); });</script>
OR
add this before </body>: <script type=”text/javascript”> $.gloss();  </script>

Resources:

jQuery Plugins: plugins.jquery.com/project/gloss
Source & Demo: www.freelancer-id.com/gloss


Apply a custom font to your website, Works on all Browsers

Posted by Alaa Badran in Browsers, CSS, Design, Free Stuff, HTML, Web Browsers, XHTML. 11 comments

2nd June

For web developers and web designers who want to add their FONT to websites without using Standard Web Fonts and without making text as images.

Google has create a Google Font API for public use to give web developers and web designers the ability to use extra fonts on the web, not only the standard web fonts.


jQuery: Catch Keyboard Events

18th June

Lot of jQuery projects relies on keyboard/mouse event like pressing “p” for previous and “n” for next also using the arrows.

Because this is important, I have managed a code to get the keyboard character on 3 events:
– Keypress
– Keyup
– Keydown

I have created a function to return the key as below:

function getKey(key){
if ( key == null ) {
keycode = event.keyCode; // To Mozilla
} else {
keycode = key.keyCode;
}
// Return the key in lower case form
return String.fromCharCode(keycode).toLowerCase();
}

Now let’s use the events:

/*Keypress*/
$(document).keypress(function (eh){
alert(“Keypress: The key is: “+getKey(eh));
});

/*Keyup*/
$(document).keyup(function (eh){
alert(“Keyup: The key is: “+getKey(eh));
});

/*keydown*/
$(document).keydown(function (eh){
alert(“Keydown: The key is: “+getKey(eh));
});

To see an exaple of this code, please check the … Read More »


jQuery Animate

19th May

Here I will mention how to use the jquery animate function and the usability and flexibility of it.
The syntax of this function is:

$.animate(options, settings, callback);
/* you can replace setting with duration (in milliseconds) or words: ‘slow’, ‘normal’ or ‘fast’.
callback is optional */

Below is a list of popular and most used animation:

increasing/decreasing width and height
moving or scrolling html element
changing opacity
scrolling window

Now let me explain each in an example.