Categories
Browsers CSS Design HTML Misc Web & Programming

Arabic web fonts are here

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.

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
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
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:

Categories
Browsers CSS DHTML Free Stuff HTML Java Script Jquery Misc Mobiles Uncategorized Web & Programming Web Browsers XHTML

Drag and Drop with jQuery for Touch Devices

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.

Categories
Browsers CSS Design DHTML Free Stuff HTML Java Script Jquery Misc News Web & Programming Web Browsers

How to: Drag and Drop with HTML5

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.

Categories
AJAX Browsers CSS Design DHTML Free Stuff HTML Java Script Jquery SEO Web & Programming Web Browsers XHTML

15 Free Ebooks for Front-End Development and Design

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.

Categories
Browsers CSS Design DHTML Java Script Jquery Web & Programming Web Browsers XHTML

jQuery Gloss Plugin

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:

Categories
Browsers CSS Design Free Stuff HTML Web Browsers XHTML

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

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.

Categories
Browsers DHTML Java Script Jquery Misc Web & Programming Web Browsers XHTML

jQuery: Catch Keyboard Events

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 demo below:
jKey demo

Have fun.

Categories
Browsers CSS Design DHTML Free Stuff Java Script Jquery Web & Programming

jQuery Animate

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.