Extreme programming (XP) practices

// the article is part of my XP presentation/coaching session

What is XP?

Extreme Programming is an agile software development methodology based on values of simplicity, communication, feedback, courage, and respect. XP works by bringing the whole team together (+ the business person) in the presence of simple practices, with enough feedback to enable the team to see where they are and to tune the practices to their unique situation

History

XP was first introduced for a project called Chrysler Comprehensive Compensation System (C3 project) during 1996 – 1999. The project goal was: development of Payroll processing software for 87,000 employees. The dev team consisted of only 8 developers and for the first time a permanent business member was introduced in the team. In 1997 the new C3 system managed to pay 10,000 people. In 2000 DaimlerChrysler shut down the project and de facto banned XP, only to restore it a couple of years later. This is how XP practices were created (by developers for developers).

Pair programming

• One programmer has control over the workstation and is thinking mostly about the coding in detail. The other developer is focused mainly on the big picture. After a while both devs change places
• The huge advantage is that all production code is reviewed by at least one other programmer
• It leads to: better design, better testing, better code – overall much higher quality

Planning game

There are two parts of the “planning game”. The first one is called “release planning” and is a long-term planning

• The client/user presents the desired features to the programmers (high level)
• The programmers roughly estimate their difficulty
• The client/user elaborates a plan for the project / Initial release plans are imprecise: neither the priorities nor the estimates are truly solid – the goal is to have a rough vision / roadmap
• However, even the first release plan is accurate enough for decision making, and XP teams revise the release plan regularly

The second part of the “planning game” is the “iteration planning” itself

• The team is given direction each week/two weeks, delivering running useful software at the end of each iteration
• During iteration planning, the client might change priorities / break-down stories
• The programmers break stories into tasks, and estimate their cost (at a sufficient level of detail)
• The team commits for what will be undertaken in the current iteration – using the velocity from previous one

Test driven development

• Unit tests are written before the eventual code is coded (best practice)
• Therefore, the programmer is stimulated to think about conditions in which the code could fail
• The cycles of adding a test are very short, then checking if it works
• The “unit tests” are all collected together, and every time any programmer releases any code to the repository (and pairs typically release twice a day or more), every single one of the tests must run correctly. 100% all the time
• The programmers get immediate feedback on how they’re doing

Continuous integration

• The development team should always be working on the latest version of the software
• The teams keep the system fully integrated at all times
• Daily builds are for wimps: XP teams build multiple times per day
• The overall goal is to avoid the “integration hell” in the end

Refactoring

• Code, and other work artifacts, are continuously reviewed and kept as clean as possible
• It is not just sufficient that code works, it must also be clean and optimal
• The focus is on removal of duplication (a sure sign of poor design), and on increasing the “cohesion” of the code, while lowering the “coupling”
• XP teams start with a good, simple design, and always have a good, simple design for the software even a couple of months/years into development
• The benefit is sustainable development speed, and general increase of the speed as the project goes forward

Whole team

• All the contributors to an XP project sit together, members of one team
• The team must include a business representative — the “client/user” — who provides the requirements, sets the priorities, and steers/leads the project

Collective code ownership

• On an Extreme Programming project, any pair of programmers can improve any code at any time
• All code gets the benefit of many people’s attention, which increases code quality and reduces defects

Major principals

• One / two week iterations
• Program only what is needed today
• Use simple user stories and tasks - no story / task bigger than 1-2 days of development
• Collocated environment - face to face conversation all the time
• Daily feedback – XP teams want to fail quickly and keep on the right track
• Use spike solutions – to reduce the level of unknown in each future story
• Strictly ‘no overtime policy’ – well rested developers are productive developers

Resources used
www.extremeprogramming.org
www.xprogramming.com

User Experience guide

I. What is User Experience (UX)

User experience is the quality of experience a person has when interacting with a specific product/item. User Experience is the process of taking a set of features and concepts and generating a consistent, predictive and desirable design with the main idea of a service for the user. User experience design has the user at the centre of the service design. Successful UX is the one that meet the exact needs of the user, without fuss or bother, and create something of simplicity and elegance that is a joy to use.

II. Factors for UX

• User needs.
• Technical requirements and Business constraints.
• Engagement through usability.
• Brand Experience through Visual Design.
• Interact and establish relationship through Interaction Design.

III. Goals of UX

1. General

• Shorten the time for users to complete tasks.
• Reduce learning time of an unfamiliar interface.
• Reduce the number of mistakes users make.
• Improve satisfaction with a service.
• Enable new and unique use of a service.

2. Based on specific user need

• Unable users to achieve a task that normally would have been more difficult outside the computer environment.
• Unable user to search for a specific bit of information (Google, Bing, LinkedIn, Spotify, Amazon, customer database) and filtering large data sources (the Internet).
• Unable user to manipulate specific information that relates and enhances a physical environment.
• Being able to complete a puzzle or a challenge, for example: a computer game, diagnostic, LinkedIn profile endorsements, eBay reputations.
• Provide the user with feeling of being social, live, asynchronous, remote, anonymous.

IV. Key principles and aspects

1. General

• Good UX involves a proper balance of needs between the user, the business, and the technology.
• Keep things simple, don’t get in the user’s way, allow them to complete their tasks with ease.
• Don’t short change a good UX by only paying attention to only the most critical parts, the UX is made up of sum of all parts.
• Good UX involves listening to users on both qualitative and quantitative level, without overdoing it.
• UX is should not just be implemented; it should be adopted as a philosophy by the entire organization.

2. Specific

• Obvious menus clearly delineated either across top and/or on the left.
• Home button on every page and on top far left.
• Logo/ identifier top left on every page. The logo/ identifier links to the home page.
• Open search field upright of every page. (If search functionality is required)
• Log in/out in upper right of every page. (If login functionality is required)
• Utility navigation at very bottom of pages and potentially top that is subtly and visually weaker than the main/global navigation (sitemap, contact us, T&Cs, etc).
• Text links outside of main navigation area consistent and differentiated from other navigation.
• Body text line width limited to good readable word lengths (10 to 14 words per line).
• Allow the page to reformat well when accessibility options and tools are used.
• On home page critical content and navigation is ‘above the fold’.
• Content – less is more! Pages are scanned, not read in detail.
• Most important information should be placed at top-left.
• Visitors tend to use “F” shaped eye movement across website.
• Avoid making users scrolling (where possible).
• About 70% of the time is spent on the left half of the page (according to Nielsen).
• Content – write for web and simplify/shorten where possible (ex. “If you need help click on this link” – replaced with icon or just link “Need help?”.
• Keep navigation simple – minimize number of tabs/menus. Tab names should be short and informative.
• Links – keep them short and informative. Most important links should be placed first.
• Consistency is the key. Menu choices, headings, pages structure and elements should be consistent.

3. Aspects

• Navigation - Knowing what users expect and organizing the content accordingly is key to good information architecture and UX design.
• Familiarity - Users' expectations are met when language and visuals are understood and bring a sense of trust. People tend to trust what is familiar to them.
• Consistency - Cohesive experience with the brand the tone of voice and visual language is used consistently across all channels.
• Error prevention - Visual cues and a clear layout should help preventing errors. Yet when a user mistakenly clicks somewhere wrong or forgets something, it should be easy to recognize, diagnose and recover from an error.
• Response on action - A timely manner of response with a user's interaction vastly enhances a site's usability.
• Visual clarity - It creates a sense of attainability for what users may aspire.
• Flexibility & efficiency - The design should be flexible enough to give a feeling of individuality, i.e. through personalization.

4. Accessibility

• The design/product/site must provide equivalent access to auditory and visual content based on user preference.
• The design/product/site must provide compatibility with assistive technologies.
• The website must provide compatibility with keyboards access where possible.
• WebPages must be usable when scripts are turned off or not supported by a user’s browser.

V. UX quotes

• “Web pages are not bank accounts: Full is not better. Cluttered or difficult designs make people less likely to find what they want. Only a person who really needs something on a particular site will grin and bear it through an unpleasant user experience.” - Jakob Nielsen
• “Create solutions by design, not by default.”- Patrick Frick
• “Things we take for granted don't always happen by chance, they happen by design.”
• “The interface should get users to the destination they want quickly, it must not be a challenge it must be almost invisible.”
• “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” - Antoine De Saint-Exupery
• “The best sentence? The shortest.” - Anatole France
• “You’ve got to start with the customer experience and work backwards to the technology.” - Steve Jobs
• “Think like an expert but communicate the words of your visitors”
• “Making the simple complicated is commonplace; making the complicated simple, awesomely simple, that’s creativity.” - Charles Mingus

// Used materials/ideas from Illumina team-members (many thanks)

Contact form – required fields check with JavaScript

 Below is a simple JavaScript to add to your contact form when you need to check if the required fields are empty. The script will not only check but will focus required/empty field.

The form:

<style>
#form fieldset.normal label{width: 10em;display:block; float:left;}
</style>
<form id="form" action="" method="post" name="form" onsubmit="return validateForm(form);"
  <fieldset class="normal">
    <label for="FirstName">First Name *</label><input type="text" name="FirstName" size="40" /><br/>
    <label for="LastName">Last Name *</label><input type="text" name="LastName" size="40" /><br/>
    <label for="EmailAddress">Email Address *</label><input type="text" name="EmailAddress" size="40" /><br/>
        <label for="Message">Message *</label><textarea cols="40" name="Message" rows="10"></textarea><br/>
  </fieldset>
<input type="submit" value="submit" />

The script:

<script type="text/javascript" language="javascript">
function validateForm(thisform){
 if(thisform.FirstName.value=="") {
   alert("Please enter your First Name.");
   thisform.FirstName.focus();
   return false;
 }
 if(thisform.LastName.value=="") {
   alert("Please enter your Last Name.");
   thisform.LastName.focus();
   return false;
 }
 if(thisform.EmailAddress.value=="") {
   alert("Please enter your Email Address.");
   thisform.EmailAddress.focus();
   return false;
 }
if(thisform.Message.value=="") {
   alert("Please enter your Message.");
   thisform.Message.focus();
   return false;
 }
}</script>

And here is the script in action doing the checks in the form:

First Name *
Last Name *
Email Address *
Message *

Thanks to Stuart McMath for cleaning up and enhancing the script code.

Important tweaks and features for your blogger (blogspot) blog

Having your own blog on blogger.com is great but there are some tweaks and features you definitely want to implement to make your blog even better. I am going to show you the most important features and tweaks and for all of these you need to mess up with code of your blog. To reach the html/css code - go to: template -> edit html -> proceed and check the box next to “Expand Widget Templates”. Now the first thing to do is to make a backup of your code (just in case). So copy the entire code (ctrl+a, then ctrl+c) and paste it into an empty notepad document and then save it to txt file (without word wrap selected).

Post titles

If you read my topic about internal SEO, you should already know that having proper post titles is really important. Go to the code of your template and search for:
<title><data:blog.pageTitle/></title>

and replace this piece of code with:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta content=' --- YOUR BLOG DESCRIPTION ---    ' name='description'/>
<meta content=' --- KEYWORD, KEYWORD, KEYWORD ---  ' name='keywords'/>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

This will fix your post titles and maximize the score you will get from the search engines for proper page title. Also, put your own blog description and keywords in the code above. Unfortunately, they will repeat on all of your pages and posts but it is still better than missing them at all.

Facebook like button

To add a “Facebook like” button to your posts search for:
<div class='post-header-line-1'/>

and paste the following code after it:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;https://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>
</b:if>

If you can not find the code above – search for :
<data:post.body/>

and paste the code before it. This will add “Facebook like button” to your posts.

Blog redirect remover

Probably you are not aware of this, but blogger displays your posts and pages using different domains for users in different countries. For example you might see your blog as “yourblog.blogspot.com” but somebody in UK will see it as “yourblog.blogspot.co.uk”. And this will apply for all posts and pages URLs. And as you suspect – this is devastating for your SEO as it creates multiple URLs for a single post and duplicated content (thus getting your blog penalized). In order to get rid of the redirects search for the closing head tag:
</head>

and add the following code above it:
<script type='text/javascript'>
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf(&quot;.&quot;));
if (ctld != &quot;.com&quot;) {
var ncr = &quot;https://&quot; + blog.substr(0, blog.indexOf(&quot;.&quot;));
ncr += &quot;.blogspot.com/ncr&quot; + slug;
window.location.replace(ncr);
}
</script>

This way, everybody will access yourblog and posts at yourblog.blogspot.com.

Related posts

If you want to add related posts below each post – search again for the </head> tag and add the following code above it:
<!--Related posts-->
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: -1.0em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJqvk7bU-C9J4fpqsc99zKNykG0DqWlgo1B0ri0yWm6bmuHQlQ_8auYmAWpqEj21JLXGh-18oPod3nHpkComHsy5XxL9bD3siWwtSY_2x9uJgBNQXWOdPU0UVuyUjG9p-BVrnlQISyOE/s400/noimage.png&quot;;
var maxresults=7;
var splittercolor=&quot;#66ccff&quot;;
var relatedpoststitle=&quot;Related posts:&quot;;
</script>
<script src='https://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

--------------------------------------------------------------------------
Then search for:
<div class='post-footer-line post-footer-line-1'>

and paste the following code below it:
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='https://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='https://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='https://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='https://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

--------------------------------------------------------------------------
If you want to customize the related posts appearance you could play with the variables above. For example:
var maxresults=7; -> Just change the number to get less or more related posts.
var splittercolor=&quot;#66ccff&quot;; -> change the color if you want to have different colored line
var relatedpoststitle="Related Posts"; -> change the title of your “related posts”.
defaultnoimage="…”; -> changes the path to the default no-image.

Basics of php (lesson 1)

I decided to also write a couple of articles describing the basics of php programming language. They are going to be very helpful for those of you who want to start development career, and especially the ones who want to do it fast.

Why php?

- Php is a powerful programming language that allows you to develop huge websites with tons of content. Php and MySQL go hand in hand.
- Php is easy to learn. Compared to Java and C#, php is really a piece of cake to learn. In order to get really good in Java you will probably need years (if you are dedicated enough). And you could get good in php for just a couple of months.
- Php code is easy to maintain, update and tweak.

What do you need to run php scripts?

Ideally you are going to have hosting space on a server (with php installed) where you could upload and test your php files. Other option is to set up your own apache server with php. A good, reliable and fast alternative is to download XAMPP and use it for a portable server with php support and MySQL database.

How to comment in php?

I am starting with comments before everything else, because I will be using a lot of examples and will comment them – just for you to get used to the code quickly. The comments syntaxis is like in C++ programming language and is simply done by using // or /* */, for example:
// this is your comment going on just one row
or
/* this is your
comment going down
several rows */

How to initialize php?

The php code must be saved in php file by default and to initialize it you need to surround your code with either:
<?php
// your code goes here
?>
or if the short tag is unable just
<?
// your code goes here
?>
I would highly recommend you to stick with the first option.

Php variables

To use a variable in php just use $(dollar sign) and then the name of the variable. Be careful because the name is case sensitive and should start with either a letter (A-z) or underscore (_). Php is great because you do not need to declare the type of the variable, to be able to use it (like in the other programming languages) – php will assign the most suitable type depending on the value of the variable. It is also important to remember that you need to assign value to the variable when first using it. Here are some examples:

<?php
// “firstname” variable is assigned string value of “John”
$firstname = “John”;

// “firstnumber” variable is assigned integer value of “5”
$firstnumber = 5;

// “secondnumber” variable is assigned the float number 24.77
$secondnumber = 24.77;

// “a_bool1” is assigned a boolean value of true
$a_bool1 = true;

/* Defining arrays in php is a little bit tricky so I am only showing you the simplest ones below */
// Defining array of integer numbers
$arr_of_numbers1 = array(1, 2, 3, 4, 5, 100, 999, -300);

// Prints “1” on the screen
echo $arr_of_numbers1[0];

// Defining array of strings
$arr_of_colors1 = array('green', 'blue', 'white', 'black');

//Prints “white” on the screen
echo $arr_of_colors1[2];

// Closing php tag
?>

Two basic php functions

To conclude this lesson I am going to introduce you to the two most basic functions in php – “print” and “echo”. Both of them are used for printing a result on the screen.

<?php
// Prints “I am learning php”
print "I am learning php";

// Will print 24.77 on the screen
print $secondnumber;

// Prints “I am learning php”
echo "I am learning php";

// Will print 5 on the screen
echo $firstnumber;

// Will print “The first number is 24.77 and the second number is 5”
echo “The first number is “,$secondnumber, “and the second number is “, $firstnumber;

// Closing php tag
?>