27 May 2015, 09:30

Around the Web - May 2015

API

Misc

  • A day at Devoxx France (in French) : a summary from Xebia about the Devoxx France conference (Java based but not only) and their findings.
  • Mix-IT Web was in Lyon in April, and the M6 Web tech team wrote a feedback in French - Day 1 - Day 2 ; it deals both with tech and agile topics.

Browsers

PHP

UX

  • The Apple Watch: User-Experience Appraisal : a review on how you app should behave (or not behave) on the new Apple IWatch ; transition with iPhone is also managed and the way to dealt with content and how you should manage your interactions.

Web performance

NoSQL, ElasticSearch

  • Elastic released a new (commercial) plugin for ElasticSearch caled "Watcher" and which aims to raise "alerts" when some events occured and according to some conditions, it may generate an action (email being sent, interaction with another system, etc).
  • M6 Web Tech team published a video (in French) about an introduction to Cassandra.

Geolocation

  • Indoor geolocation technology : article (in French) about indoor geolocation technology, describing and comparing Wifi vs NFC vs Beacon vs Magnetic field to provide geolocation.

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]

25 Mar 2015, 09:30

Around the Web - March 2015

Browser

Responsive Web Design (RWD)

HTML5/CSS/Javascript

  • This API is so Fetching : fetch API is to be used for asynchronous actions and is to be more resilient than a XHR (ie ajax) call. Some exemples are given in the blog post ; it can be used from Firefox 39 and Chrome 42 (currently in dev status) but a Fetch Polyfill exists to start using this API from now.
  • CSS Reference which introduces itself as an extensive CSS reference with all the important properties and info to learn CSS from the basics ; this article gives a more introduction on its purpose and how to use it.
  • Meteor, develop faster than a rocket (in French) : an introduction to Meteor  a full stack and isomorphic javascript framework in which you use Javascript both on client and server side. It also uses MongoDB (NoSQL Document Oriented database & schemaless) to store data and it's based on Node.JS. A second article will show how you can create a mobile app easily.

Thoughts

  • Your job is not to write code : Engineers' job is not to write code, Project Managers' job is not to manage project and so on. Our job is to make a better product.
  • A Bug Hero to fight against bug invasion (in French): in an agile team, in each sprint, a developper is commited to do the 1st level support, fix bug and manage incident to avoid disturbing the whole team and sacrifice the sprint. If no bugs, developer is aimed to fix small tasks that are not on the critical path for the sprint dlivery. Interesting both for the disturbing management effect and as it enforces developpers to have a global knowledge of the system, not only his own part.  

SQL

  • Understanding SQL's null : because querying null is not as easy as it may be and also null may not mean null in the way you expect.
  • PoWa (Postgresql Workload Analyser), released as a 2.0 version, provides a better (from what it is said, not tested) monitoring and performance tools on your Postgres 9.4 cluster.

Virtualisation

Compose is a way of defining and running multi-container distributed applications with Docker. Back in December we opened up its design to the community. Based on the feedback from that, Compose will be based on Fig, a tool for running development environments with Docker.

Machine takes you from “zero-to-Docker” with a single command. It lets you easily deploy Docker Engines on your computer, on cloud providers, and in your own data center

Swarm is native clustering for Docker containers. It pools together several Docker Engines into a single, virtual host. Point a Docker client or third party tool (e.g., Compose, Dokku, Shipyard, Jenkins, the Docker client, etc.) at Swarm and it will transparently scale to multiple hosts. A beta version of Swarm is now available, and we’re working on integrations with Amazon Web Services, IBM Bluemix, Joyent, Kubernetes, Mesos, and Microsoft Azure.

  • so now you can orchestrate all your process from zero to production using docker (based) solutions. Even if some products are still in beta so far, a very interesting move !

 

24 Sep 2014, 09:30

Web Roundup - 24/09

Web components

I thought I spoke about them earlier but couldn't find the related post ; so nevermind. Nuxeo (Document & Media Management System) wrote two blog posts so far about how web components could enhance the way we can manage content platform :

More about Web Components.

Tools

  • Microsot to provide IE Web Driver tool for IE11 ; it aims to allow you having automated tests in IE11, simulating user interactions on web pages. Multiple windows, pages, tabs are reported supported !
  • Polyfill Service : The Financial Teams provides a polyfill as a service. Based on user agent, end user will only load in his browser the polyfill that he will require. It avoids modern browsers to load polyfill they do not require. You can also host it on your infrastructure.

Docker

  • Two articles on using Docker on production ; the first one and one of its replies. At least it shows that migrating to docker is not that easy or straight forward. You need to rethink your whole way to manage your infrastructure and the related tools when necessary.
  • You can now even use Docker on your Raspberry Pi. Not sure how much ressources are left for your docker container but there may be some use cases.

Web performance

23 Apr 2014, 09:30

Web Roundup - 23/4

This blog is not (yet) dead ; some links :

  • Internet Explorer Web Platform Status and Roadmap : To know if/when some features of HTML5/CSS3/JS have been implemented in Internet Explorer from IE9 to "Under Consideration" or "Not currently planned"
  • If you want to build Windows 8 apps in JS (instead of .net technologies) but also more general UI in HTML/CSS/JS (more sceptical on this one), you may be interested by WinJS, recently opensourced by Microsoft. You can even try it first and then look at the code/project.
  • HTML5 Security Cheat sheet : some security points to have in mind
  • WTF, HTML and CSS? : Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.
  • A "Should I use" in French about some ergonomic pitfalls like caroussel, intrusive pop-in, fixed headers/footers, etc with samples. Still work in progress but with some good examples.

Till next time !

26 Jun 2013, 23:24

Content Security Policy (CSP)

On a similar topic as CORS and the same origin police I wrote some months ago, there is another initiative called Content Security Policy which is defined as follow in the Mozilla Developper Network CSP Page :

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware.

Principle

The idea behind is that you will "whitelist" the code you accept to render whether it is hosted on third party serivces (like facebook or google buttons) up to inline code within your page (yes, I mean the CSS and JS code you add with the <style> and <script> tags)

What does it look like ?

It's so far only a HTTP Header called "Content-Security-Policy" you will have to set ; for the 1.1 Specs, it will also be a "meta" tags you can set in your HTML.

You will define then the diffrent directives you want to have, depending on your needs :

  • connect-src limits the origins to which you can connect (via XHR, WebSockets, and EventSource).
  • font-src specifies the origins that can serve web fonts. Google’s Web Fonts could be enabled via font-src https://themes.googleusercontent.com
  • frame-src lists the origins that can be embedded as frames. For example: frame-src https://youtube.com would enable embedding YouTube videos, but no other origins.
  • img-src defines the origins from which images can be loaded.
  • media-src restricts the origins allowed to deliver video and audio.
  • object-src allows control over Flash and other plugins.
  • script-src lists the origin of scripts that would be loaded
  • style-src is script-src’s counterpart for stylesheets.

Let's see an example :

Content-Security-Policy: script-src 'self' https://apis.google.com

It would mean that :

  • any script loaded from my domain and from https://apis.google.com will be loaded.
  • If you try to load jquery from code.jquery.com in your html, it will not be loaded as this host has not been whitelisted.

Another example to illustrate to what extend you can fine tune this directive :

Content-Security-Policy: default-src 'none'; script-src https://cdn.mybank.net; style-src https://cdn.mybank.net; img-src https://cdn.mybank.net; connect-src https://api.mybank.com; frame-src 'self'

It would mean that :

  • You will not load any code hosted on your domain
  • Script, Style and Image files can only be loaded fomr https://cdn.mybank.net
  • You can connect via Ajax or similar only to https://api.mybank.com/
  • and load frame only from your domain
  • Outside of this rules, all other code/content will never be loaded.

Last one, if you want your site to load all the required files for social widgets (like Facebook, Twiitter, Google ones), the directive would be :

Content-Security-Policy: default-src 'self'; script-src https://apis.google.com https://platform.twitter.com; frame-src https://plusone.google.com https://facebook.com https://platform.twitter.com

Inline CSS / JS Code

Sometime you do have some Javascript / CSS code in your html. Even if you defined "self" as default-src, it will prevent from loading indline JS/CSS code and also prevent "eval()" to be computed.

So the best practice is of course to put your CSS / JS code in external files. However, if you can't, you will have to add the "unsafe-inline" and "unsafe-eval" directives. Of course, it's strongly disrecommended. Indeed, if anyone can inject code in your page, then it will do whatever he wants.

Reporting & Monitoring

Introducing CSP may hurt your site to some extend  as you may forgot to declare some required resources and of course you may be interested to know if someone tries to inject code. CSP also provides some directives for these two needs.

First, for debug purposes, you have the "report-only" directive that would report files to be excluded but will not block them ; you will then use :

Content-Security-Policy-Report-Only: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;

Once you are fine and go in production, you want to know what happens in reality and prevent malicious code to be loaded. Just do as follow :

Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;

For both cases, once the rule is hit, the browser will POST the information to your report uri and you will have something like :

{
  "csp-report": {
    "document-uri": "http://example.org/page.html",
    "referrer": "http://evil.example.com/",
    "blocked-uri": "http://evil.example.com/evil.js",
    "violated-directive": "script-src 'self' https://apis.google.com",
    "original-policy": "script-src 'self' https://apis.google.com; report-uri http://example.org/my_amazing_csp_report_parser"
  }
}

Current support in browsers

  • Firefox from Firefox 23 (next stable release) and later. Firefox for Android and Firefox OS soon to follow.
  • Chrome :  25 and later
  • Internet Explorer : 10 and later (sandbox directive only)

How if differs from CORS ?

CORS also aims to mitigate the "same origin policy" issue by allowing which sites can load your content. CSP is the opposite as you would define which hosts you want to load content from and will go deeper as it allows a fine grained control on the loaded/computed code.

I would say CSP it really security focused whereas CORS was more to ease developper tasks to load content from another place.

More resources on CSP

[Edit 1] : An example on how to play safely in sanboxed iframes.