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
Free Stuff Misc Web & Programming

Stop using apps for Git, use command line

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.

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.

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 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
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
Design E-Commerce Misc

5 Resources for Free PNG icons

I have collected 5 resources for free PNG icons. They could be used on websites, mobile applications and other stuff.
They are available with multi-dimentions as follow:

 

1) 25 Glossy iPhone style icons

These icons are available with PSD file. Free to download.
25 Glossy iphone style icons

Categories
AJAX CSS Design Free Stuff HTML Java Script Jquery Misc News PHP Web & Programming

15 Free IDEs for Developers

Komodo Edit (Windows, Mac, Linux)

Komodo Edit

Komodo Edit is an open source application that has support for PHP, Python, Ruby, JavaScript, Perl, Tcl, XML, HTML 5 and CSS 3.

It has syntax coloring, folding, background syntax checking,  auto-complete and calltips. It also includes libraries for autocompletion for jQuery, Ext JS, Ruby on rails and more.

I just recommend Komoodo Edit.

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 HTML Java Script Jquery Misc Web & Programming Web Browsers XHTML

Scroll window smoothly using jQuery

Using jQuery animate() function to do a smooth scrolling:

I have also created a div as follow:


<div id="scrollToHere">
Scroll to here
</div>

You need something to run your script. Create a button like this:


<input type="button" onclick="scollWin();" value="Scroll up" />

The jQuery Code will be like this:


function scrollWin(){
$('html,body').animate({
scrollTop: $("#scrollToHere").offset().top
}, 800);
}

Here is something to try:

now jQuery window scrolling is done with animation.

Enjoy it..

Categories
Browsers CSS Design DHTML Misc Web & Programming XHTML

Web page transparency for all browsers

Every browser has different CSS properties for less-used actions like: transparency or opacity.
It was something weird to do transparency on your web page because there are lot of different web browsers. To make that easy, I have collected information and generated a CSS class that will work on most of the browsers.
See the Code below:


.transparent {
	filter:alpha(opacity=75);
	-moz-opacity:0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
}

filter:alpha(opacity=75); is used for Internet Explorer.
-moz-opacity:0.75; is used for Mozilla, Firefox, Netscape browsers (old versions).
-khtml-opacity: 0.75; is used for old versions of Safari.
opacity: 0.75; is used as a standard CSS property for browsers like Firefox 2+ and Safari 3+ and Opera