Author Archives: Marco Barnig

CSS : clear floats

Posted on by

Elements following a floated element will wrap around the floated element. To disable wrapping, you can apply the “clear” property to these following elements. The standard method is to place a complete “cleared” element last in the container :

<div style="clear:both;"></div>

To clear CSS floats without this extra markup you can use the following techniques :

  • Float the container as well
  • Use overflow: hidden on the container
  • Generate content using the :after CSS pseudo-class

A very detailed tutorial about Floats has been published by Vitaly Friedman, editor-in-chief of the Smashing Magazine.

Other useful tutorials are :

HTML5 : block-level and inline elements

Posted on by

Block-level elements like (<div>, <pre>, <p>, <ul>, <ol>, <li>,… ) take up the entire width of their containing element and the height of the default line-height. They stack up underneath each other, top-to-bottom.

Inline elements like (<img>, <em>, <strong>, <a>, <span>, …) are in-line. They stack up next to each other, left-to-right.

All HTML block-level elements have five spacing properties: height, width, padding, border and margin. In the HTML box-model, the width of padding, border and margin are added to the width of the content area.

Applying float to an element will automatically make it a block-level element.

HTML5 editors

Posted on by

My preferred HTML5 editor is Notepad++. Notepad++ is a free source code editor that supports several languages. Running in the Windows environment, its use is governed by GPL License.

There are other HTML5 editors available. Adobe’s Dreamweaver CS5 is the flagship among the commercial tools.

A list of some other useful HTML5 editors is shown below :

  • Aloha Editor (semantic Rich Text Editor framework written in Javascript with best support of xHTML5)
  • Rendera by Brian P. Hogan

ccTLD & gTLD

Posted on by

A  ccTLD (country code top-level domain) is an Internet top-level domain generally used or reserved for a country, a sovereign state, or a dependent territory. In 2010, the IANA (Internet Assigned Numbers Authority) began implementing internationalized country code TLDs, consisting of language-native characters when displayed in an end-user application.

A gTLD (generic top-level domain) is another category of top-level domains maintained by the IANA. The core group of generic top-level domains consists of the com, info, net, and org domains. In addition, the domains biz, name, and pro are also considered generic, however, these are designated as restricted, because registrations within them require proof of eligibility within the guidelines set for each.

A third category of  top-level domains, called sponsored TLD,  is a specialized TLD that has a sponsor representing a specific community served by the domain. The communities involved are based on ethnic, geographical, professional, technical or other theme concepts proposed by private agencies or organizations that establish and enforce rules restricting the eligibility of registrants to use the TLD. Some examples are edu, gov, tel, mobi, …

IANA is operated by ICANN (Internet Corporation for Assigned Names and Numbers).

Lightbox scripts

Posted on by

last update : April 11, 2012

Lightbox is a simple, unobtrusive script (modal dialog box) used to overlay images on the current webpage. It’s a snap to setup and works on all modern browsers. Lightbox was developed by Lokesh Dhakar.

The current version is 2.0.5 released on March 18th, 2011. It’s based on the Prototype Javascript  Framework and on script.aculo.us. There are specific modified versions available like ThickBox (developed by Cody Lindley, but no longer maintained), LyteBox (version 5.5, released on January 26, 2012 by Markus F. Hay) and others. Different plugin’s are available for WordPress.

A very minimal implementation of a lightbox (modal dialog box) is available at the Google code website. More scripts about modal dialog boxes are listed at the Designlabel website.

My favorite script is Lytebox developped by Markus F. Hay. Based on the Lightbox class that Lokesh Dhakar originally wrote, the purpose was to write a self-contained object that eliminated the dependency of the javascript frameworks prototype.js, effects.js, and scriptaculous.js. Lytebox supports iFrames.  Since the original version of Lytebox, major modifications were added as a result of user input to improve performance as well as slideshow support, themes support, HTML content support and many more configurable options that allow you to customize the look and feel of the software.

More informations about modal dialog boxes are available at the following links :

Standalone scripts :

jQuery based scripts :

Miscellanous :

HTML lists

Posted on by

Ordered list :

The <ol> tag defines an ordered list (with digits or characters). This tag is used together with <li> (the ordered item in the list)

Example :

<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>

Unordered list :

The <ul> tag defines an unordered list (with bullets). This tag is used together with <li> (the ordered item in the list)

Example :

<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

Definition list :

The <dl> tag defines a definition list. This tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list).

Example :

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

A useful tutorial about definition lists is available at the website of oneXtrapixel.

Website with GZip compression

Posted on by

last update : 20 August 2012
Compression is a simple, effective way to save bandwidth and speed up a website. The browser sends a header telling the server it accepts compressed content (Accept-Encoding: gzip ; Accept-Encoding: deflate). The server sends a response if the content is actually compressed: Content-Encoding: gzip. If the server doesn’t want to send back compressed content, the browser has to make do with the heavy regular version.

A webserver can be configured (in the settings or in the .htaccess file) to return zipped content if the browser can handle it, saving bandwidth for everyone. If you use the Amazon AWS S3 service as a webserver, you can upload compressed files in the AWS management console and add a metatag

Content-Encoding: gzip

in the HTTP header of the files.

I use the WinGZip utility (version 1) created by Irnis Haliullin to compress the content uploaded to my Amazon AWS S3 buckets. An online tool GIDZip Test to check compressed websites is available at gidnetwork.com.

Some useful documentation about Gzip compression is listed herafter :

mobileOK Checker

Posted on by

mobileOK

W3C provides a mobileOK checker to perform various tests on a Web Page to determine its level of mobile-friendliness. The tests are defined in the mobileOK Basic Tests 1.0 specification.

The checker is based on the open source mobileOK checker library developed by the Mobile Web Best Practices working group.

The mobileOK checker is part of the MobiWeb2.0 Project and of W3C Quality Assurance Tools.

mobileOK conformance can be claimed using POWDER.

CDN push and pull

Posted on by

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.

There are two population methods  : push and pull.

Pull requires virtually no work on the server side:  URL’s are rewritten to the files by replacing  the server domain name with the CDN’s domain name. The CDN will then apply the Origin Pull technique and will periodically pull the files from the origin (the server). How often that is, depends on how headers have been configured  (particularly the Expires header).

Push requires a fair amount of work at the server side to sync files to the CDN. But you gain flexibility because you can decide when files are synced, how often and if any preprocessing should happen.

Most CDN’s support both origin pull and one or more push methods (for instance Amazon Cloudfront).

Wim Leers published on his website his bachelor thesis about “Improving Drupal’s page loading performance” with a chapter of key properties of CDN‘s.