29 Apr 2015, 09:30

Around the Web - April 2015

Ergonomy / User Experience

  • The best icon is a text label : a reminder that icon must be meaningful, with some examples of do's/don'ts and at the end that a text label may be more accurate than an icon.

Mobile

Over the 4 years we have slowly moved away from device specific breakpoints in favour of content specific breakpoints, i.e. adding a breakpoint when the content is no longer easy to consume (whatever the device is).

Backend

Frontend

  • M6Web Tech team published an article (English version ; French version) on how they mocked a backend application while they were building the frontend one and til the backend is fianlised. Beyond the tool involved, the most important point is the "interface agreement" in which backend and frontend teams agreed on how the coming API would work and be used to avoid bad surprises as much as possible at the end.
  • A visual guide to CSS3 Flexbox properties : title is self explainatory about what it is !
  • Introduction to Service Workers : Service Worker will allow offline experiences, periodic background syncs, push notifications and other things that would normally require a native application. Atricle introduce on how service workers are working and some current limitations ; if you are not familar with Javascript promises syntax, have a look at this article "Javascript Promises".

Responsive Web Design

Tests

Virtualisation (Docker)

[Edit 18/5, 21/5, 28/5,19/6,10/7 - Update docker tutorial list]

02 Oct 2013, 09:30

Web Roundup - 02/10

A bunch of things, not really classified this time :

On Javascript side :

On tools side :

  • Google just released a new WYSIWYG authoring tool called Web Designer ; so far I always remained far away from such tools (remember  Dreamweaver in the early 2000s ?), but first feedback seems positive so far. Even Mozilla evangelist Christian Heilman is positive about it.
  • If you are a Raspberry Pi owner, you can also have a look at another Google's project called "coder". It aims to make you learn about web development.
  • The top 25 (responsive) design tools : a bunch of tools to ease the way you will build your site, not all are about responsive and can be used for "traditional" needs or not only for responsive designs.
  • Telize is a JSON IP and GeoIP REST API for IP Geolocation : This service offers a REST API allowing to get a visitor IP address and to query location information from any IP address. It outputs JSON-encoded IP geolocation data, and supports both JSON and JSONP.
  • Jq, a lightweight and flexible command-line JSON processor.

On HTML/CSS side

On tests side :

  • Test first : you could sum up the article with You should write tests. You should write tests first. You should write clean tests first! and test are specs (as in the RSpecs language where tests can be read as a specification)

On webperf side :

One day I hope I'll have enough time to write about AngularJS, Web Components Grunt/Yeoman and ElasticSearch, which I find promising and interesting, but need some time to dive in.

10 Jan 2013, 22:59

CSS : Table display mode (and not HTML tables !)

For those who built web sites in the end 90s or early 2000s, you had to use HTML tables to define the structure of your page, leading to awful imbrications and other crazyness. Fortunately, CSS2 arrived with the "display" and "float" attributes, For display attribute, we are used to the block, inline, none or inline-block values but you have a few other ones and especially the table one.

From IE8 and other recent version from modern browsers, you can use the "display: table" syntax which can allow you to manage positionning as you managed a HTML table some decades ago.

Openweb.eu published an article (in French so far) about this table value for the display attribute in CSS : le modèle tabulaire en CSS.

Below a quick presentation of the different values and their equivalent in a traditionnal html table :

table
Define a table behaviour for a block type element. (~ <table> rendering)
inline-table
Define a inline table behaviour for an element.
table-row
Define that the eelement is displayed as  a rang of rows (~ <tr>)
table-row-group
Define that an elemen groups one or more ranges ( ~ <tbody>)
table-header-group
Provides a header for a table-row-group block ( ~ <thead>)
table-footer-group
Provides a footer for a table-row-group block. ( ~ <tfoot>)
table-column
Define that an element represent a colomn of cells (~ <col>)
table-column-group
Define an element which groups one or several columns (~ <colgroup>)
table-cell
Define that an element must be displayed as a cell of the table ( ~ <th> & <td>)
table-caption
Define the legend of a table. ( ~<caption>)

So for example, you could manage this :

repartition2.png

What you can also manage with the table rendering in CSS :

  • Fixed or automatic layout (ie cells adapts to content or not) and the related overflow / word-wrap / hyphens if necessary to manage content adaptation to cell/table size
  • Border management
  • Horizontal / Vertical alignement,
  • Management of empty cells
  • Compatible & incompatible attributes

Article go much deeper in the presentation and it would take too much time to summarise it unfortunately. I strongly recommend you to read it if you read French.

As a conclusion, CSS table display mode :

  • Can give you a new and easiyer way to render your site when needed
  • Allow you to keep a sementical code on HTML side (compare to the old html table rendering method)

Do someone here were aware of this table attribute ? Do someone already use it ?