Tuesday, November 25, 2014

Have a check list before being catch up

Here is a small history of subtle points with hosting from my experience.


One of our clients asked us at HighRobotics to redesign Wordpress site. We designed it and then started the creation of a theme. It is done with mix of PHP, javascript and CSS. Everything was going good till once I made an error in PHP code, while moving the code and updating the live site!
Whole site was crashed, so there was no possibility even to login in WP administration panel.
It can be simply fixed with changing code in corrupted PHP file.
The customer was not remember where the site was hosted and thought that Wordpress.com was used for hosting.
What was my surprise when I found that Wordpress.com does not support file access. At all!

It means that any small error on PHP and bye-bye to site!

Gladly customer uses Wordpress on another hosting and error was immediately fixed.

Mochahost is a cheap hosting company that we are using for our site. It costs for us only 250$ a year. However sometimes technical people can just stop the site for a day without any informing. Other point is that it is written on 50s page of there help that they do not responsible for site backup. There were some technical issues and they just deleted all files for the site (not with us)! You can find hundreds of this stories in the internet. So if you do not making DB and files backup you can say bye-bye to your business site.



Check important points before making agreement with company, even if it has good reviews.

Sunday, October 26, 2014

SVG fallback pure CSS: Can I use Part 5

Previous: External SVG: Can I use Part 4


SVG is old technology, but there are even older browsers in use that do not support SVG.
The idea of supporting such pure browsers is to provide PNG (JPG or GIF) image in background.

After making big research the best solution without using java-script is found with SVG trick:
  • switch tag, which takes first supported element
  • foreignObject tag, that gives ability to insert object from alien namespace
For inline SVG this works as:
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
If browser supports SVG it will take <circle> as first child, otherwise <div class="nicolas_cage fallback"> is shown.

For external SVG we can use standard object fallback:
    <object type="image/svg+xml" data="circle_orange.svg">
     <div class="nicolas_cage fallback"></div>
    </object>

And inside <HEAD> just add a class with background image for fallback:
  <head>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>

For "No SVG" Nicolas Cage will show up

The <div> is chosen instead of <img> because image is mostly always downloaded by browsers, though {display: none} is set for <img>.

However test also showed that IE and Firefox still download background images for <div>, while Chrome and Safari works great with it. The twice download problem only occurs with
<foreignObject>
   <div class="nicolas_cage fallback"></div>
</foreignObject>
and is not a trouble for <object> fallback. At first I tried to set {display: none;} for <fallback> element in <head> style, but Android 2.x and Mobile Safari 4.0.4 parses it as object and hides hole object.

The solution is to set {display: none; background: none; } for <div>, then IE and Firefox stops download <div> background images. Finally the question appears:

How can we update <div> for SVG supporting browsers and hide it while leave it unchanged for those browsers that do not support SVG?

One solution is found, though it can not feet for all.
The trick is with ability of SVG to take a style from another SVG object.
 <svg id="SVG_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
      width="20" height="20">
      <style>
        <![CDATA[
        .orange {
          fill: #FF9900;
        }
        ]]>
      </style>
 </svg>
 <svg id="SVG_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
  width="20" height="20">
 <circle cx="10" cy="10" r="8" class="orange" />
</svg>

SVG_2 takes .orange style from SVG_1 even though they are different objects in one HTML file.

The solution is to paste special SVG inside <body> element with clear image style:
.fallback { background: none; background-image: none; display: none; }

And the result test page:
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <style type="text/css">
     .nicolas_cage {
         background: url('nicolas_cage.jpg');
         width: 20px;
         height: 15px;
     }
     .fallback {
     }
    </style>
  </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="width:0; height:0; display:0">
 <style>
 <![CDATA[ 
  .fallback { background: none; background-image: none; display: none; }
 ]]>
 </style>
</svg>

<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <switch>
     <circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
     <foreignObject>
         <div class="nicolas_cage fallback"></div>
     </foreignObject>
  </switch>
</svg>
<hr/>
<!-- external svg -->
    <object type="image/svg+xml" data="circle_orange.svg">
     <div class="nicolas_cage fallback"></div>
    </object>
</body>
</html>

Starting tests in different browsers:

All renders great: small Cage for "No SVG" browsers and circles for those that support SVG.

What about fallback image downloading for SVG supporting browsers? 

Gladly double downloading does not occur with latest versions of browsers (IE 11, Chrome 38, Safari 8, Firefox 33).
As a plus this solution pushes strong hint to avoid downloading fallback images with
.fallback { background: none; background-image: none; display: none; },  
and it with a high degree will work for new SVG browsers that are hard to test (Kindle, Noble, etc).


UPD: eliminated error in CDATA closing tag ]]>, added style="width:0; height:0; display:0" to SVG fallback.

Saturday, October 25, 2014

External SVG: Can I use Part 4

Previous: Inline SVG, CSS and defs: Can I use Part 3

External SVG file can be included inside HTML with one of the next methods:
  • <object type="image/svg+xml" data="circle_orange.svg" class="blockSize" />
    
  • <img src="circle_orange.svg" class="blockSize" />
  • <iframe src="circle_orange.svg" class="blockSize" />
    
  • <embed type="image/svg+xml" src="circle_orange.svg" class="blockSize" />
  • CSS background with svg file
Each method, except CSS background, is tested for browser support. In addition we investigated CSS support in <head> section of HTML page and style inlining in external SVG file.

All browsers (except that do not support SVG) showed good results and support external svg referencing.


While investigating render with browsers that do not support SVG, at first all went as expected. Here is the result for IE 7:


But then Android Mobile Browser 2.2 showed this: 

You can see the CSS code, which should not be shown. It is inlined in external SVG.
The suggestion falls in 3d section with iframe in both cases. To confirm the suggestion the page with iframe reference is created:
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
  </head>
 <body>
    <iframe src="circle_orange_defs.svg" class="blockSize"></iframe>
</body>
</html>

File circle_orange_defs.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
      width="20" height="20">
      <style>
      <![CDATA[
        .orange_internal {
          fill: #FF9900;
        }
        >
      </style>
      <defs>
          <circle id="circle_orange" cx="10" cy="10" r="8" stroke="grey" stroke-width="2" class="orange_internal" />
      </defs>
      <use xlink:href="#circle_orange" width="20" height="20" />
</svg>
And Android 2.2 renders it as

As suggested old Android cannot clearly render iframe with external SVG, that contains inlined style.
We can use some tricks to fix it, but simple solution is not to use iframe for SVG at all, there are at least 4 alternatives to reference SVG file.

CSS support

All browsers that can render SVG support style in external files if they are inlined in SVG.
There is no possibility to apply HTML CSS from <head> section to external SVG file, because browser does not consider it as part of the DOM. This is the reason why one of the line with circles is black (lack of style).


Test results

Browsers that support SVG process external files without a problem. Android Mobile browser 2.2 has bad behaviour with <iframe>.

The results for desktop:
Chrome: 38, ..., 16 *
Internet Explorer: 11, 10, 9,  8, 7, 6
Firefox: 31, ..., 4, 3.6, 3.5
Safari: 8, 7, 6.1, 5.1

* - green - works as expected, red - does not support SVG 

The result for mobile devices:
Chrome Mobile: 37, ..., 31
Android Browser: 4.0, 2.2
Mobile Safari: 5.1, 5.02, 4.0.5, 4.0.4

In this test external reference with hash tag is not tested and will be done in future. There are some known problems with partial referencing (#) <img src="circle_orange.svg#circle" />. 

Next: SVG  fallback image without java-script.

Inline SVG, CSS and defs: Can I use Part 3

Previous: Inline SVG: Can I use Part 2

One of the great feature of SVG is <defs> or definitions, that allows graphic reusing.
Take a star with path
<path d="M46.19 9.21l1.96 7.76 7.98-.54-6.77 4.26 2.97 7.43-6.14-5.12-6.14 5.12 2.97-7.43-6.77-4.26 7.98.54z" id="star">

We can reuse the code of star and make some transformation (move, scale, rotate) for basic figure.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160" height="152">
  <defs>
    <path id="star" d="M46.19 9.21l1.96 7.76 7.98-.54-6.77 4.26 2.97 7.43-6.14-5.12-6.14 5.12 2.97-7.43-6.77-4.26 7.98.54z"/>
  </defs>
    <use xlink:href="#star"/>
    <use xlink:href="#star" x="90" y="20" />
    <use xlink:href="#star" x="14" y="80" />
</svg>

What about browser support?

For test we use same page and the results are gladly equals to previous test.


Test are taken with inlined SVG (inside HTML as in previous tests).

The results for desktop:
Chrome: 38, ..., 16 *
Internet Explorer: 11, 10, 9,  8, 7, 6
Firefox: 31, ..., 4, 3.6, 3.5
Safari: 8, 7, 6.1, 5.1

* - green - works as expected, red - does not support SVG

The result for mobile devices:
Chrome Mobile: 37, ..., 31
Android Browser: 4.0, 2.2
Mobile Safari: 5.1, 5.02, 4.0.5, 4.0.4

Combining it with previous test we can make a rule:
If browsers supports SVG then it supports <defs> definitions.

There is convenient diagram for browser support: Can I use SVG.  And our tests confirm there topicality.


Next section: External SVG using Part 4

Friday, October 24, 2014

Inline SVG: Can I use Part 2

Let's draw simple circle in svg file.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
  width="200" height="200">
 <circle cx="100" cy="100" r="80" stroke="grey" stroke-width="3" fill="#3f85e5" />
</svg>



We can inline svg inside HTML page, svg becomes an element in any part inside <body> tag:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline SVG Demo</title>
</head>
<body>
</body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
  width="200" height="200">
 <circle cx="100" cy="100" r="80" stroke="grey" stroke-width="3" fill="#3f85e5" />
</svg>
</html>

The test window for cross browser testing:


The test results are shown in small windows and can be opened in own virtual machine.


Next point is to test CSS styling. It can be added in two ways with SVG inlined. 
First approach is usual CSS styling in HTML <head> section:
<!DOCTYPE html>
<html>
  <head>
    <title>CSS and SVG test</title>
    <style type="text/CSS">
      .redness {
        fill: #FF0066;
      }
    </style>
  </head>
 <body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
      width="20" height="20">
     <circle cx="10" cy="10" r="8" stroke="grey" stroke-width="2" class="redness" />
    </svg>
</body>
</html>

Second approach is to inline CSS within SVG itself. To ignore special symbols, like less or grater sign use <![CDATA[ ... ]]> for CSS:
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
      width="20" height="20">
      <style>
        <![CDATA[
        .orange {
          fill: #FF9900;
        }
        >
      </style>
     <circle cx="10" cy="10" r="8" stroke="grey" stroke-width="2" class="orange" />
    </svg>

For SVG support testing special page is created at http://highrobotics.com/media/context/article/svg_compatability/svg_test.html 

Test results

Next desktop operating systems were in use: Mac OSX 10.9 and 10.6, Windows 7 x64, Windows XP SP2 x32, Ubuntu 11.10 (only Chrome v. 16).

Mobile and tablet devices are shown on the left with their browsers. Only Windows Phone is missing.

The results for desktop:

Chrome: 38, ..., 16 *
Internet Explorer: 11, 10, 9,  8, 7, 6
Firefox: 31, ..., 4, 3.6, 3.5
Safari: 8, 7, 6.1, 5.1

* - green - works as expected, red - does not support SVG

The result for mobile devices are very good for developers. Every tested browser, except Android Browser v. 2.2, supports basic SVG:
Chrome Mobile: 37, ..., 31
Android Browser: 4.0, 2.2
Mobile Safari: 5.1, 5.02, 4.0.5, 4.0.4


Mostly all popular browsers have support for basic inlined SVG:
  • simple graphics
  • SVG CSS from HTML <head> section
  • CSS inside SVG


Problematic browsers are Internet Explorer 6, 7, 8 and Android Mobile Browser 2.2, they are still popular, but do not support vector graphics at all.
Here is how Andoroid 2.2 renders simple SVG test page
Similar works IE version 8 or earlier and shows empty place.

SVG: Can I use Part 1

For one of our client we decided to add delight vector images in motion. SVG feet best in this case: it is scalable and takes small file size.

One of the image is a pencil with form:


It would be brilliant to have a working solution and show this image to every user. However not all browsers support different technologies produced by W3C. There is a rumor on the internet whether SVG will work or not in one or another case. We decided to make our own investigation on this field and clear the dirty spots.

CrossBrowserTesting is chosen to help in inspection in variety of browsers.

First test is simple: browser compatibility for svg image inlined in HTML.





Tuesday, September 9, 2014

Chrome favicon corrupted

One strange bug is found in Google Chrome. It corrupts favicon icon.

Here is screenshot of Chrome tabs:

At the same time Firefox and Internet Explorer shows good icon representation.

One solution is to use PNG or GIF favicon instead of ICO. But this new formats are supported only in modern browsers.

Another solution is to resave icon in an icon editor program. For me IcoFX solved the problem. Just open corrupted icon, make small changes and save it under favicon.ico.

Then check linking on html page:
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">

Sunday, April 20, 2014

C# ref parameter

One of the most vague point in C.#NET is passing argument by reference, or shortly by ref.
Though it is very simple idea in passing arguments to function:


  • If argument is passed by reference then it represents link to the source data (Pointer in C).
    This is true for structures and classes.
  • Otherwise for a class copy of link is passed. And for a struct copy of whole struct is passed (except class property objects).

Take an example without ref:

 class Cat
 {
     public string Name {get;set;}
 }

 class Program
    {
        static void Main(string[] args)
        {
            var catOscar = new Cat { Name = "Oscar" };
            ChangeCatToSimba(catOscar);

            Console.WriteLine("Cat name: " + catOscar.Name);
            Console.ReadKey();
        }

        // By default copy of reference is passed (without ref keyword)
        // Same as copy of Pointer can be passed in C language
         private static void ChangeCatToSimba(Cat cat)
        {
            // reassign source will do nothing with Oscar
            cat = new Cat { Name = "Simba" };
        }
    }

And here is example with ref:
class Program
    {
        static void Main(string[] args)
        {
            var catOscar = new Cat { Name = "Oscar" };
            ChangeCatToSimba(ref catOscar);

            Console.WriteLine("Cat name: " + catOscar.Name);
            Console.ReadKey();
        }

        // Ref takes memory address reference to cat object
        private static void ChangeCatToSimba(ref Cat cat)
        {
            // reassign source
            cat = new Cat { Name = "Simba" };
        }
    }


In the first example (without ref) result is "Oscar". In the second example reassigning occurs and result is "Simba".

Sunday, April 13, 2014

HTML 5 Data-* Attribute

Data-* attribute is special novelty in HTML 5 that can be used for own purposes.

For example, we can use our own data-author, data-title, data-text, data-car-model attributes (anything starting with data-) and it will be valid HTML. Custom data attribute can be used on any element:

<span data-author>Miguel de Cervantes Saavedra</span>
<span data-title>Don Quixote</span>


One of the big architecture flaw appears: there is no namespace!
And I predict there will be lots of conflicts, especially when one famous javascript framework will use same data- designation as another framework, or it will conflict with you own clear attribute names.
Microsoft already uses data-* attributes in ASP.NET MVC for validation.


Thursday, March 27, 2014

Windows Map disk D: to disk C:

As stupidity is inherent part of humanity :) the next case occurred:

In our big corporate project we must install external program and use special libraries. This external application can be installed only on disk D:\ and there is no way to change it. Yes, 21st century.

And what to do if you do not have disk D:?

One of the simplest solution in such case can be mapping all calls of the disk D: to disk C: with regedit:


REGEDIT4

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\DOS Devices]
"D:"="\\??\\C:\\D"

Wednesday, March 12, 2014

Digits in Regular Expression

There are two ways for matching any digit via regular expression: \d and [0-9].
[0-9] matches any arabic numeral, i.e. 0,1,2,3,4,5,6,7,8,9;
\d matches any unicode number.

In addition to arabic numeral unicode contains more than 300 numbers from different cultures. For example, indian numbers  (0),  (1),  (2), etc.

With simple C# script all possible unicode numbers can be found (up to 65536 characters)
0: 0,٠,۰,߀,०,০,੦,૦,୦,௦,౦,೦,൦,๐,໐,༠,၀,႐,០,᠐,᥆,᧐,᭐,᮰,᱀,᱐,꘠,꣐,꤀,꩐,0
1: 1,١,۱,߁,१,১,੧,૧,୧,௧,౧,೧,൧,๑,໑,༡,၁,႑,១,᠑,᥇,᧑,᭑,᮱,᱁,᱑,꘡,꣑,꤁,꩑,1
2: 2,٢,۲,߂,२,২,੨,૨,୨,௨,౨,೨,൨,๒,໒,༢,၂,႒,២,᠒,᥈,᧒,᭒,᮲,᱂,᱒,꘢,꣒,꤂,꩒,2
3: 3,٣,۳,߃,३,৩,੩,૩,୩,௩,౩,೩,൩,๓,໓,༣,၃,႓,៣,᠓,᥉,᧓,᭓,᮳,᱃,᱓,꘣,꣓,꤃,꩓,3
4: 4,٤,۴,߄,४,৪,੪,૪,୪,௪,౪,೪,൪,๔,໔,༤,၄,႔,៤,᠔,᥊,᧔,᭔,᮴,᱄,᱔,꘤,꣔,꤄,꩔,4
5: 5,٥,۵,߅,५,৫,੫,૫,୫,௫,౫,೫,൫,๕,໕,༥,၅,႕,៥,᠕,᥋,᧕,᭕,᮵,᱅,᱕,꘥,꣕,꤅,꩕,5
6: 6,٦,۶,߆,६,৬,੬,૬,୬,௬,౬,೬,൬,๖,໖,༦,၆,႖,៦,᠖,᥌,᧖,᭖,᮶,᱆,᱖,꘦,꣖,꤆,꩖,6
7: 7,٧,۷,߇,७,৭,੭,૭,୭,௭,౭,೭,൭,๗,໗,༧,၇,႗,៧,᠗,᥍,᧗,᭗,᮷,᱇,᱗,꘧,꣗,꤇,꩗,7
8: 8,٨,۸,߈,८,৮,੮,૮,୮,௮,౮,೮,൮,๘,໘,༨,၈,႘,៨,᠘,᥎,᧘,᭘,᮸,᱈,᱘,꘨,꣘,꤈,꩘,8
9: 9,٩,۹,߉,९,৯,੯,૯,୯,௯,౯,೯,൯,๙,໙,༩,၉,႙,៩,᠙,᥏,᧙,᭙,᮹,᱉,᱙,꘩,꣙,꤉,꩙,9 

Code

In online regex tool you can find the proof for this unicode test.
By the way java script does not support unicode in regular expressions by default, so there \d is the same as [0-9].
And here is code in C# that collects all numbers:

Does your e-mail checking regular expression have protection from unicode special numbers?
Or they will appear in a company database? :)

var stringBuilder = new StringBuilder();
 
 var digitRegex = new Regex(@"\d");
 var charDigitGroups = Enumerable.Range(Char.MinValue, Char.MaxValue)
                                 .Select(Convert.ToChar)
                                 .Where(ch => digitRegex.IsMatch(ch.ToString()))
                                 .GroupBy(ch => Char.GetNumericValue(ch));
 
foreach (var charGroup in charDigitGroups)
{
      string joinedValues = String.Join(",", charGroup);
      string rowResult = String.Concat(charGroup.Key.ToString(), ": ", joinedValues);
      stringBuilder.AppendLine(rowResult); 
} 

Idea is based on Turkey Test.

Go to Basic/ .NET Floating Numbers

One can surprise why d1 does not equal d2 in the next example

double d1 = 0.6 - 0.2;
double d2 = 0.4;
Assert.AreNotEqual(d1, d2); // d1 != d2

This is a normal behaviour :)

However there are some funny bugs in .NET (imho). For example,

Decimal.Convert(1.51m) != Convert.ToInt32(1.51m);

More cases with explanation can be found at my Go to Basic/ .NET Floating Numbers tips and tricks at codeproject.


Wednesday, January 29, 2014

WeakReference example

WeakReference is a great mechanism.
Usual references are called Strong References.
For example,
string referenceToString = new string("The string!");

Garbage Collector collects and destroys the object if there is no any Strong reference to it.

string referenceToString = null;
If there is no strong reference to "The string!" then it will be collected by garbage collector and destroyed.

WeakReference is a wrapper on top of a Strong reference with one core distinction "WeakReference does not protect from garbage collection".

string referenceToString = new string("The string!");
var wr = new WeakReference(referenceToString);
referenceToString = null;

// some execution time left
// here wr can point to: 
// 1) NULLL if it was garbage collected or
// 2) object "The string!" if it was not garbage collected

var wrTarget = wr.Target as string; // return internal object of weak reference

Usually weak references are used wrong. Take the dialog from my old interview:
Interviewer: What is WeakReference?
Me: I did not know.
Interviewer: (answers the definition)
Me: But where it can be applied?
Interviewer: Mmmm... for example, in a cache. You can have very heavy resources, and resource can be recreated after WeakReference internal object will be garbage collected.


It is very hard to find good example of proper usage for WeakReference. Why on the earth cache mechanism should depend on Garbage Collection time? There are lots of customisable and convenient solutions for caching.

One of the great example was found for Android development (Java).
UI thread can be locked if the image will be loaded not from memory (disk, net). This can be solved by creating asynchronous task that will load the image. The problem arises if user goes out from current page of the application or Android unloads invisible part of the page. Then the image container on the page (ImageView) will not be needed at all when async operation finishes. This can be smartly solved with WeakReference:

class BitmapWorkerTask extends AsyncTask<Integer, Void, Bitmap> {
    private final WeakReference<ImageView> imageViewReference;

    public BitmapWorkerTask(ImageView imageView) {
        imageViewReference = new WeakReference<ImageView>(imageView);
    }
    // Method for getting bitmap is removed for code clearness

    // Once complete, see if ImageView is still around and set bitmap.
    @Override
    protected void onPostExecute(Bitmap bitmap) {
        if (imageViewReference != null && bitmap != null) {
            final ImageView imageView = imageViewReference.get();
            if (imageView != null) {
                imageView.setImageBitmap(bitmap);
            }
        }
    }
}
Now image container can be garbage collected.

Monday, January 13, 2014

Prettify does not work with Blogger

The solution is a tricky one:
<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
    prettyPrint();
});
</script>

Source: http://stackoverflow.com/a/14659603/304371


Thursday, January 9, 2014

Software patterns problem/ Alexander patterns

Software patterns were provided by the Gang of Four (Erich Gamma, ...) in the book Design Patterns: Elements of ReusableObject-Oriented Software in 1994. The main concept Pattern is provided as reusable behaviour that developers can use and share among each other. The pattern concept is got from the book A Pattern Language written by Christopher Alexander (architect).

Developers communicates with people very poor. And the Gang of Four took evil inside their book by interchanging initial Alexander pattern concept. The Pattern by Alexander is not only a reusable instrument for specialists, but also is a part of common language that clients can understand and which resolve clients problem. 

For example, The pattern 107 Wings of Light explains the benefits of having natural light coming in from many directions. A room that has light coming in from only one direction feels flat and dead. Sunlight coming into a room from 2 or more directions gives the room dimension that triggers a positive emotional response.

How it can be applied to software development? Developers could talk to clients in common language and describe reusable features that can be applied:
  • Load data on scroll pattern (instead of loading full data)
  • Social network sign-on pattern (instead of only registration process)
  • etc

Eric Evans makes us closer to the clients in his book Domain Driven Design by introducing Ubiquitous language and Domain models.


If clients could describe what they want with such common patterns would it work in your projects?