All posts by Raef Kandil

Senior Technical Developer/Technical Teamleader
Front-end Complete Course

Front-end Tutorial 1 – Level 5

Leave a comment

The next series of tutorials we will be spending to create the famous snakes games.

These are the functional requirements:-

  • The snake goes on devouring new blocks that increase his size.
  • The more blocks that he devours, the more score that the user will get and the more difficult it would become to manoeuvre on the screen.
  • If the snake hits the side of the screen, game will be over and the snake would be dead.
  •  There are three difficulty levels: Easy, Medium and Hard: the difference being the speed the snake moves.
  • The initial high score is 1000 and as the user plays, the score gets altered with the highest score achieved.

snakes game

New words for you:-

Functional Requirements: These are the requirements that specify how the program/website is supposed to behave. These specify the normal interactions with the website and how the program will respond.

Non-functional Requirements: These are the requirements that the user will not directly see, however, it affects his overall satisfaction in the website. Examples including performance and security.

Front-end Complete Course

Front-end Tutorial 1 – Level 0

Leave a comment

Build an html document.

  • Open a text editor like notepad, text edit or vi.
  • Copy and paste the following code into it.

<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>

  • Name the file: HelloWhatsapp.html. If you are using windows, make sure that it doesn’t rename the file to HelloWhatsapp.html.txt. Make sure that you unhide file extensions in the folder options.

Technical Background: This is HTML 5 syntax

This is HTML structure

Structured as tags. <start-tag></start-tag>. If you don’t end the start tag with the same end tag, browsers will interrogate you!

received_557986761304381

  • Open the file using your favourite internet browser.
  • Change the title to “Hello Whatsapp” and save the file.
  • Note the title change in the browser after you refresh the browser.
  • In the body type in the following:-

<article>

<h1>HTML is boring</h1>

<p> HTML is capable of doing very little on it’s own, without Javascript and CSS</p>

</aricle>

  • Refresh the browser and note the results.
HTML and CSS

Making a speech bubble with pure CSS

Leave a comment

I wanted to make a chat bubble and found many tutorials on how to do it. However, I haven’t found a step by step tutorial to clearly explain the logic behind it. It has taken me a while to figure it out and as Einstein said, “If you can’t explain it to a six year old, you don’t understand it yourself.” The purpose of this tutorial is not to make you through the same pains in order to figure out how a chat bubble is done using pure CSS and HTML.

How to make a triangle

Let us make a square using four borders with different colors:-

This is the code:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
border-width: 20px;
border-bottom-color: orange;
border-top-color: red;
border-left-color: green;
border-right-color: yellow;
min-width: 20px;
min-height: 20px;
border-style: solid;
max-width: 20px;
max-height: 20px;

}
</style>
</head>

<body>
<div class=”square”></div>
</body>

</html>

This is the output:-

border-colors

Note how borders interlace. You could almost spot a triangle or a polygon. There is a red polygon, green polygon, yellow polygon and an orange polygon.

Now, let us try to turn width into 0. This is the code:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
border-width: 20px;
border-bottom-color: orange;
border-top-color: red;
border-left-color: green;
border-right-color: yellow;

border-style: solid;
width: 0;

}
</style>
</head>

<body>
<div class=”square”></div>
</body>

</html>

And this is the output:-

Untitled

And you can see four triangles: red triangle, green triangle, yellow triangle and an orange triangle.

Now we will only keep the red triangle:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
border-width: 20px;
border-bottom-color: transparent;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;

border-style: solid;
width: 0;

}
</style>
</head>

<body>
<div class=”square”></div>
</body>

</html>

And this is the output:-

red-triangle

Now, let us create a square and put our triangle code in the after. Our code would look like this:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
background-color: red;
color: white;
font-size: 22;
width: 400px;
}
.square:after {
content:””;
border-width: 20px;
border-bottom-color: transparent;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;

border-style: solid;
width: 0;

}
</style>
</head>

<body>
<div class=”square”>Hello Bubble Box World!</div>
</body>

</html>

And our output would look like this:-

Bubble Box

 

Thanks for reading. Please, do not bother to create comments that contain advertisements. I am not going to publish them.  Cheers 🙂

Uncategorized

Twenty First world

Leave a comment

Google find new websites in a matter of few hours after their creation sometimes. Google then makes a list of all popular keywords that people search for in Google Adwords so that people are encouraged to buy dot coms’. Sites like GoDaddy sell domain names at a very cheap price. WordPress can make websites within few  minutes without the need of designer or developer. One can lean on web hosting so he doesn’t have to own his own hardware resources at a very cheap price. Sites like Stack Overflow encourage very rough competition for answering questions that one can find sound answers within few minutes after a question was posted sometimes. It seams like an option whether or not you want to get engaged in an online community but it is not an option nowadays. The gap between you and the internet world is increasing every moment you don’t engage yourself in it. The whole world is getting digitized and you must engage yourself in an online community because your very survival depends on it. No matter how old or young you are, you cannot turn your back to the internet world.

Youtube world have made an enormous wealth of information available to all kinds of people with all amounts of knowledge and information and one has only to catch this change. These people who are broadcasting information on Youtube are people wanting to get famous, rich or get hired. Being famous is no longer tied to the selected and lucky few who can get themselves on TV. Nowadays, one doesn’t have to be on TV to get known and famous. This even affected the Movie and TV market adversely. All one wants to get visible is to have an internet cable,  PC and a digital video camera. One would tend to think that getting visible had became easier this way. On the contrary, it had became harder as the competition had become much fiercer than ever it was  before.

There had been a drastic change in Today’s world when compared to the world twenty or thirty years ago. This change had left many people clueless and jobless. Primary change had been on internet and information sharing. This totally changed the form of media and how to expose yourself to the employment market and to the world in general. Bachelor degree in any field is meaningless nowadays, because anyone can get the same amount of information and more if he engages himself in online discussions and forums.

 

Team Leadership

Team Leadership – Basic Guidelines

Leave a comment

I had been a good technical developer for a good portion of my career until I became a technical team leader and a senior team member. This transition was not a smooth one for me for the fact that leadership was a new concept to me. It is like the transition that one has to undertake first time he drives a car and he realizes that everything that he took for granted doesn’t exist anymore. He does not know for instance that his decisions on the road determines whether or not he and the rest of the car passengers arrive safely home. This blog entry is based on my experience because when you are a senior team member of team-leader, you need some basic “driving skills” that determines the safety of your team members and sometimes, the future of your company. So, you can imagine what kind of responsibility falls on your shoulders. This is why you have to be more proactive, more alert and I will convey you some basic guidelines that I learned the hard way.

1) Defend your team members. Your team members need your support and protection. Convey a positive image for them in front of the customer and do not fight against them. You want to build a team and you have to lead by example. Otherwise, your team gets broken and once you don’t have a team, you can forget about the success of the project.

2) Be honest in conveying problems to the project manager and the rest of your team. Don’t be brutally honest, but state facts as you are. Don’t convey personal comments and make it a habit to disturb everybody’s sweet dreams. There are so many projects that failed because the team-leader failed raise the red alert. Raise as many red alerts as you want but not to the point as to make people discouraged to work. Give people around you hope that this can work if only we can do this even if you are not so sure!

3) Stay focused on technical problems. Scope issues should be covered by project manager. You do your work, and let the project manager do his work. Don’t try to over-discuss with the customer or with the project manager whether this is in scope or should we do this or not? It reflects that you are not able to do it. As a technical team-leader, you get judged on whether or not you are able to solve technical problems.

4) Take ownership. Be in charge. Don’t try to hide away when it feels like the ship is sinking. If you hide, everybody in your team starts hiding and you lose your fighting edge. Customers like it when they can see that you are in charge and it feels to them that you are able to solve the problem. If they have this hope, they would be willing to extend the deadline and co-operate with you. If you are escaping they start attacking you.

5) Customers are the ones who pay money and they like to feel this way. Customers would like to feel that they are special, do not treat them as if they are a part of your team. Give them this extra respect and show them that you are there to make their wishes come true. Of course, real life is different, but they like to feel this way.

6) Stay focused. Be focused and don’t scatter your and your team’s efforts. Have this laser-focus on whatever you want to accomplish and never leave behind loose ends. Loose ends are going to hunt you later on. Have this determination to get rid of problems and pains.

7) Keep a friendly attitude. Don’t be bossy. Don’t make your team members that you don’t listen to your ideas and that you have the upper hand over them. Be nice to them and accept their ideas and then put your final touches. Don’t make everybody constrained and incapable to put his input in the project. Take two steps back and accept everybody’s faults and never expose their downfalls. Encourage them to talk, speak and have some say in the project.

8) Appreciate the efforts of good team members. Be sure to promote the superior team members, this gives them always the incentive to put more efforts into the project. Don’t be afraid to disturb the team members that are not performing as well. They would be encouraged when they see the rewards.

9) Don’t expect the perfect atmosphere. This is real life, so don’t follow theories. When you are working as a technical team leader, your position is based not just on your technical skills, it is based also on your political skills. Try to be creative in solving the problems without expecting the perfect work environment. Don’t make it a habit to dictate to the customer how they are supposed to think and what they are supposed to do. Don’t criticize the customers because they are not knowledgeable technically.

10) Always, defend your company. You can have so many internal problems with your company, but you are coming to the customer as a company’s representative and your customer is looking at you as if you are the company. Do not convey the internal problems that you have in your company to the customer.

WCM

Date Conversion from Arabic to English in IBM WCM

Leave a comment

When you display the dates, it get displayed according to the locales. For example, 8/7/2005 06:15:33 will be ٨/٧/٢٠٠٥   ٠٦:١٥:٣٣ for Arabic locale.  This is usually not a problem except when you use the date in a script like an event calendar that only understands English numbers. In this case, it becomes an issue since you want the date to be in English. I ran into this problem several times, so I expect that you could face it too. To counteract this problem in IBM WCM 7.0, 8.0 and 8.5, you can use the below code

[Plugin:Matches pattern=”en(.*)” text=”[Plugin:Locale]”][Element context=”autofill” type=”content” key=”End” format=”MM/dd/yyyy hh:mm:ss”][/Plugin:Matches][Plugin:Matches pattern=”ar(.*)” text=”[Plugin:Locale]”][Plugin:Matches pattern=”(.)(.)/(.)(.)/(.)(.)(.)(.) (.)(.):(.)(.):(.)(.)” text=”[Element context=’autofill’ type=’content’ key=’End’ format=’MM/dd/yyyy hh:mm:ss’]”][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’1′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’1′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’1′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’1′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’1′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’1′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’1′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’1′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’1′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’1′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’2′]”]0/[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’2′]”]1/[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’2′]”]2/[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’2′]”]3/[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’2′]”]4/[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’2′]”]5/[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’2′]”]6/[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’2′]”]7/[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’2′]”]8/[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’2′]”]9/[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’3′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’3′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’3′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’3′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’3′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’3′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’3′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’3′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’3′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’3′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’4′]”]0/[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’4′]”]1/[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’4′]”]2/[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’4′]”]3/[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’4′]”]4/[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’4′]”]5/[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’4′]”]6/[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’4′]”]7/[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’4′]”]8/[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’4′]”]9/[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’5′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’5′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’5′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’5′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’5′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’5′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’5′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’5′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’5′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’5′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’6′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’6′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’6′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’6′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’6′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’6′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’6′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’6′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’6′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’6′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’7′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’7′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’7′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’7′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’7′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’7′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’7′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’7′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’7′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’7′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’8′]”]0 [/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’8′]”]1 [/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’8′]”]2 [/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’8′]”]3 [/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’8′]”]4 [/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’8′]”]5 [/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’8′]”]6 [/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’8′]”]7 [/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’8′]”]8 [/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’8′]”]9 [/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’9′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’9′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’9′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’9′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’9′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’9′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’9′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’9′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’9′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’9′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’10’]”]0:[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’10’]”]1:[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’10’]”]2:[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’10’]”]3:[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’10’]”]4:[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’10’]”]5:[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’10’]”]6:[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’10’]”]7:[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’10’]”]8:[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’10’]”]9:[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’11’]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’11’]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’11’]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’11’]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’11’]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’11’]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’11’]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’11’]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’11’]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’11’]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’12’]”]0:[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’12’]”]1:[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’12’]”]2:[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’12’]”]3:[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’12’]”]4:[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’12’]”]5:[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’12’]”]6:[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’12’]”]7:[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’12’]”]8:[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’12’]”]9:[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’13’]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’13’]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’13’]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’13’]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’13’]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’13’]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’13’]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’13’]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’13’]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’13’]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’14’]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’14’]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’14’]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’14’]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’14’]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’14’]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’14’]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’14’]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’14’]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’14’]”]9[/Plugin:Equals][/Plugin:Matches]

This code looks complicated, but it is quite easy to understand. Once you follow the logic, it becomes very simple. You take as the input, the date field and you match it against the pattern which is the same pattern as the date field. (.) in a regular expression means a single character. Then, each character you check the number in Arabic and you put it’s equivalent in English.

As this code is painful to look at and painful to rewrite, put it in an HTML component and reuse it when you want.

One thing to note that for certain matched groups, you are going to have to add slashes or spaces or you will get only numbers. Something like: 872005061533 which is not what you want.  This is why if you notice, for example for matchedGroup 2 there is a slash after the number.

[Plugin:MatchedGroup group=’2′]”]0/[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’2′]”]1/[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’2′]”]2/[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’2′]”]3/[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’2′]”]4/[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’2′]”]5/[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’2′]”]6/[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’2′]”]7/[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’2′]”]8/[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’2′]”]9/[/Plugin:Equals]

This will not work for all formats. It would work only for this format: MM/dd/yyyy hh:mm:ss.

Make sure that your code is in a single line. Multiple lines will cause you a problem in your output as dates are expected to be a single line.

SEO

SEO – Technical Details

2 Comments

How do you raise your search ranking? This question often is very important to all businesses as more clicks means more publicity means more money. There are number of factors to consider like the quality of your output which is out of the scope of this blog. This blog focuses mainly on the Technical Aspects of the Search Engine Optimization:-

1) Use a descriptive page title

8-10-2015 7-59-18 PM

 

A descriptive title is very important as user is more inclined to click on a descriptive title rather than a non-descriptive one. This would not increase page ranking directly, but it would help increase the click rate which in turn can increase the page ranking as more users decide to visit and share your website.

2) Use description meta tag:-

<meta name=”description” content=”A very good description that would show in the search engines”/>

If we don’t have a description, the SEO would take snippets from the page as the description. The user is unlikely to click on it. This would not increase the page ranking directly, but it would help increase the click rate which in turn can increase the page ranking if more users decide to visit and share your website.

3) Use canonical url’s:-

<link rel=”canonical” href=”http://[your domain name]/page/canonical/url” />

The advantage of canonical urls’ is to make sure that as search engines crawl over the internet, your page ranking is going to increase rather than be divided. Suppose, for example, the search crawler finds http://[your domain name] and in another http://[your domain name]/1. Even if they point to the same page, for the search engines, these are two separate pages and the page ranking is going to be divided and the search engine is going to have multiple copies of the same page. However, if you use canonical urls’, the page ranking is going to go up rather than be divided across multiple urls. So, canonical url’s in this case is very important.

4) Do not use javascript or ajax to write contents to pages. Search Engines are not able to execute these, so, if you use ajax or javascript to write contents to pages, the Search Engines would not be able to read them when they are crawling over the internet.

5) Have a facility to share your contents to social media pages. The more your contents are shared to social media pages. Although there is no evidence that the number of comments and likes increase page rankings, but they help increase publicity and the more your site becomes public, the more likely that your page ranking is going to increase.

6) Make social media pages to advertise your website. Pay special attention to Google Plus.

7) Use Open Graph meta tags. Open Graph meta tags are good tools to customize your social media experience. It tells the social media pages which picture, description and title to use and therefore, makes sharing content to social media pages, better and offer a better publicity. Which translates in turn to a higher pages ranking.

8) If you can afford it, use paid advertisements. Paid advertisements clicks do not increase the page ranking, but they can help make your website in top of the search results. This increases the number of visitors which in turn leads to higher page ranking as more users decide to share your website.

From a technical perspective, these are the most important factors to increase your page ranking.

WCM

IBM WCM – when to use what

Leave a comment

More Often than not, WCM designer is faced with the choice of when should he use: Out of the Box components, Custom Components, Workflow actions, Rendering Plugins, JSP components and so forth. This choice means the success or failure of his design. This article’s purpose is to provide some basic guidelines for the designer to be able to make the right choices at the right time and come up with a successful, maintainable design.

1) Rely on Out of the box components as much as possible. Usually, if the designer has some development skills, he is inclined to demonstrate it by injecting more and more custom components. The disadvantage of that being:-

a) Will not receive support from IBM. IBM wouldn’t claim responsibility for  custom-made code.

b) Would not receive updates from IBM. As new fix packs come from IBM, it wouldn’t benefit the custom-made components.

c) It would less maintainable by the client as the client would have less of the expertise of the designer. So, they would not be able to maintain the custom-made code.

2) If Out of the Box components fail, try to rely on custom rendering plugins. Custom rendering plugins are easier to maintain and they are reusable across multiple components.

3) If rendering plugins fail, use JSP components. JSP’s are harder to maintain. Try to delay this choice as much as possible.

4) JSP validations are good and they are recommended. Make javascript validations for components by making custom jsp for fields in the authoring templates. They are usually effective and they are good features that impress the business. However, try to separate the JSP validations from the field elements themselves. Making an extra text element that validates the elements using javascript means that the author does not have to save to know that something is wrong with his input. Also, not all validations are covered in the authoring templates. Making the authoring templates smart is one of the key factors for a successful WCM design. However, if one adds the validation inside the same element that renders the authoring template element is only good if the designer wants to change the behavior of the element. It must be thoroughly tested if this is the case to handle all possible conditions.

5) Use Workflow custom actions only if the need arises. Do not over-use the feature, and do not over-complicate the design with workflow custom actions. Custom actions usually come as a response to the requirement of the customer rather than at the will of the designer to come up with a superb design.