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.

04 Sep 2013, 09:30

Web Roundup 4/9
  • Great Responsive Web Design is a Matter of Process - Design for Content not for Devices : the web was originally fluid and adaptive until the box and table model came. A good reminder and the promotion of the best practice that you should think about content and not about devices.You have to focus on two axes :
    •  Visual design : ie not focusing on the global layout but ,on a component perspective and think on how your content will be presented.
    • Content hierarchy : your mockups will no longer be based on the layout but on the hierachy of the content ; indeed, on mobile, due to the narrower screen, you will organise your content based on their importance (most importent content on the top and the rest below)
  • An event apart : The long web : notes from a conference with a lot of best practices and food for thoughts ; a few one I would highlight :
    • Importance of the URL schema you will develop as URL is the base to access information. URL is the API of your site.
    • Mobile first is to prioritise content / tasks
    • Mobile first is content first, navigation second
    • Have a component approach from which you will build your HTML pages
    • ...
  • Javascript design patterns : where the author reminds why patterns are important and introduce each of them with an example and additional resources.
  • CSS units you should be using now : we all know the "px" and "em" units on CSS but there are a few more like "rem" and "vh"/"vw" ones. The article will remind the issue with em based approach and introduce why "rem" based approach is better. It also introdue the vh/vw units which are based on the viewport (~ size resolution) of the screen.
  • Testing your frontend javascript with mocha, chai and sinon : introduction to unit test your javascript code with the 3 tools.

21 Aug 2013, 23:41

CSS, the next steps

CSS, for Cascading Style Sheet, is the way to define how your site/app will look like. Up to now and as it is a declarative language, it was done mainly manually, with no automation, nor testing tools except you, opening your browser and validating the rendering on your code. So for large application, you may miss the impact of some changes.

For a few months/years, we can see some improvements :

  • One one side, being able to automate/compute your CSS by being able to use "variables" , inheritence, default value etc.
  • On the other side, being able to test your CSS  in all ways (syntax, styleguides, regression, rendering)

Computing CSS

Main actors on this topic are Less and Sass or even Compass (which is based on Sass). Idea behind such tools is to extend CSS by bringing some dynamic through variables, mixins, functions, etc.

As you did for CSS previously, you will define your style in a file, bur with using some advantages of the less/sass syntax.

Example with less ; let's say you want to have rounded corners (the famous one) for the boxes on your site. You may say that by default, the size should be 5px but for some cases, you need 10px.

In pure (old-school) CSS: you will have wrotten :

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

What you would write with Less :

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Here, we defined :

  • Define the .rounded-corners mixin which would include all directives for all browsers about rounded-corners.
  • Define the radius variable with a default value of 5px but that you overwrite for the footer with a size of 10px.

If you give the "less" file to your browser, your site will not render well. Indeed, you need first to compute/compile your final css file based on the instruction of your less/sass file.

So at the end, less will generate the CSS code you would have written yourself but in a more structured and consised way. Look at the example on each site to have a deeper overview as above example tends to be the basic one.

Such tools aimes to ease maintenance of your CSS files.

Testing your CSS

At the end, even if the maintenance of your CSS were simplified by such tools, you always need to test them to avoid regressions. A recent initiative CSSTest is born, which aims to gather all the tools, techniques and methodology about testing your CSS. 4 types of test are to be made :

  • Syntax : Did you literally make mistakes in your CSS?
  • Project : Does this CSS meet the standards you set?
  • Reference : Does the rendered page look as you expect it to? Cross-browser as well.
  • Regression : After actions are performed, does the page look as you expect it to?

The author of this initiative gives an example in the article "4 tools for automatic CSS testing" covering each topic mentionned above. He also present his approach and existing tools in automated testing and the tale of orangered.

This second topic is quite new but improves quickly ; for the 2 first topics, I'm quite confident about the tools. For the two last topics, I'm a little bit sceptical as I'm not sure about dev to write "CSS Unit Tests" something like :

Feature: Navigation As a Web Designer I would like to test my CSS 

Scenario: CSS

Given I go to "/empty.html"

Then the "Main logo" should have "margin" of "1.5em"

And the "Main logo" should have "font family" of "Lobster"

But maybe it's just a matter of time ; and such a test, even if it passed at a semantic point of viiew may fail at a rendering point of view.

Another tool not yet mentionned in the previous initiative : csscss aims to find duplicated declarations in your file.

Did some of you start to use such tools to validate your CSS (beyond HTML inspecctor/Firebug ?)

[Edit 1] : an introduction to LESS with LESS CSS Beginner's guide.

26 Mar 2013, 22:20

Javascript Roundup - 26/3

A quick review about Javascript :

  • Superhero.js is a collection of resources (article, book, videos, etc) on every aspect of Javascript : from the JS syntax to testing / optimising / etc
  • JSBeautifier : first an online tool but which evolves in may ways since (IDE integration, offline mode, command line, etc) and which will allow you to make your HTML, Javascript code or JSON content readable / pretty / well formatted.
  • Understanding "this" keyword in javascript :because of "this" is one of the most confusing thing in Javascript
  • DOM Monster : it is a cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you're on, and give you its bill of health.
  • Google, as part of the Chrome Developer tools, introduced some content about the Javascript console and its feature when it's about javascript in the browser.