26 Nov 2015, 23:59

Retour sur Codeurs en Seine 2015

Aujourd'hui se tenait l'édition 2015 de Codeurs en Seine ; petit résumé de la journée :

  • Test Drive Infrastructure avec Docker (slides ; code):
    • L'idée est d'appliqué les principes du TDD sur la partie infrastructure (versionning, tests, intégration continue, etc).
    • Différents niveaux de tests possibles
      • Tests unitaires : tests au niveau de la fabrication du container en lui même
      • Tests d'intégration : tests du bon fonctionnement des composants de l'infrastructure
      • Mais aussi tests d'acceptance, tests de sécurité, tests de performance, etc.
    • Développement de docker-unit qui permet de tester la bonne exécution d'un docker build en testant le résultat du Dockerfile à chaque étape.
    • Le projet est basé sur dockramp, il est encore jeune mais l'idée est intéressante. L'auteur du projet doit contacter l'équipe Docker pour voir s'il doit continuer ou si cette dernière a déjà des choses dans les cartons.
  • 5 facteurs clés pour l'auto-organisation : l'auteur revient sur l'organisation d'Agile France qui s'est fait dans un contexte particulier. Il en retient 5 clés :
    • Ownership : il a fallu dépasser sa conception "égocentrique" de l'événement pour en faire l'événement de la communauté pour fédérer tout le monde autour du projet
    • Dialogue : passage de la discussion (bruit++) au dialogue (signal++) ; seules les personnes ayant un intérêt sur un sujet donné ont le droit de donner leur avis et de travailler ensemble. Le bruit ambiant généré par les autres est supprimé en les "excluant" du sujet (ou du moins en ignorant leur "moi je pense que...")
    • Leadership ; en prologement du point précédent, plutôt que de chercher un consensus mou, que les personnes intéressées par le sujet prennent le leadership du sujet et avancent. A noter qu'il n'y a pas d'opposition entre auto-organisation et leadership, c'est le passage d'avis vers des intentions.
    • Artefacts : il s'agit de produire des choses visibles et de s'organiser autour de ces artefacts (réunions, etc)
    • Vision : il faut définir un cadre et communiquer autour de ce cadre.
    • En reprenant de bas en haut, un moyen de se rappeler du mot via le terme VALDO.
  • HTTP/2, les bonnes pratiques du web évoluent ; une présentation rapide de HTTP/1.1 et des apports de HTTP/2 avec les principaux apports (push server, multiplexage, priorité des ressources, compression des entêtes, flux binaire plutôt que textuel et https quasi requis de part le support de http/2 dans Chrome/Firefox) et impacts sur nos pratiques actuelles (plus besoin de domain sharding, de concaténation, de sprites CSS ou d'inlining). Par contre, les optimisations d'images, la compression, la minification et l'optimisation des fontes et la gestion du cache restent de mise.
  • Bidouillabilité à l'ère du numérique : Tristan Nitot qui nous parle
    • des débuts de l'ordinateur où ils étaient bidouillables vs les modèles de plus en plus fermés de nos jours
    • des débuts du web s'appuyant sur des formats ouverts vs des sdk "fermés" où en gros on doit demander l'autorisation de...
    • du cloud (dans le sens des offres SaaS) qui n'est rien d'autres que l'ordinateur de quelqu'un d'autre et sur lequel vous n'avez aucun contrôle, dont le code source n'est pas disponible et qui n'est pas bidouillable.
    • Dans le SaaS, le client est celui qui paye pour les données, pas celui qui les fournit (contre un service "gratuit")
    • Tristan Nitot propose le SIRCUS : Système d'Information Redonnant le Contrôle Aux UtilisateurS et ses 7 principes
      • Pas de publicité ciblée
      • Utiliser du matériel que l'on contrôle (Raspberry, CubieTruck, etc en auto hébergement ou à la rigueur chez un hébergeur)
      • Utiliser du logiciel libre (CozyCloud, Owncloud, YunoHost, etc)
      • Utiliser le chiffrement
      • Une UX à la hauteur
      • Interopérabilité
      • Une killer feature que les offres SaaS ne peuvent fournir
        • A ce sujet, Cozycloud réfléchit à croiser les données qui seraient centralisées dans l'instance (ex afficher les noms des contacts en lieu et place de leur numéros sur la facture téléphonique en croisant la facture avec les contacts)
    • Mes enseignements :
      • Même en étant relativement sensibilité à la gestion des données personnelles, cette conférence donne une claque et montre le chemin à parcourir et les enjeux.
      • Toutefois la question de l'auto-hébergement reste un problème ; comment demander et permettre à Mme Michu d'avoir ses données de façon sécurisée ?
      • Par ailleurs, si CozyCloud arrive à tout concentrer en un seul lieu et à croiser les données, quid en cas d'intrusion sur le systmèe (via un hacker ou un cambrioleur ou des forces de l'ordre à la rigueur ?). Qu'est-ce qui est mieux entre une analyse partielle mais permanente des données chez les GAFA vs un risque faible mais un impact très fort si mon instance CozyCloud par ex est récupérée par un tiers, celle-ci contenant nos données ?
      • Il y a peut être des choses intéressantes à faire dans un contexte CozyCloud + VRM.
  • Apache Drill, le SQL pour Hadoop et plus... :
    • Drill permet de manipuler en SQL tout types de données issues d'un cluster hadoop, d'une base de données SQL/NoSQL, de fichiers CSV, JSON,XML, etc. Il permet même au sein d'une même requête de requêter sur plusieurs sources de données.
    • C'est donc du "SQL on everything" avec une logique de schema à la volée en fonction de la requête. Cela peut être distribué notamment dans un cluster Hadoop.
    • A intégrer dans les outils rapidement...
  • AngularJS, the good, the bad and the transition to Angular 2 :
    • Un talk qui présente les bons et mauvais côtés d'Angular V1, une rapide présentation d'Angular V2 et comment migrer
    • Un livre sur Angular2 est en cours de rédaction ; celui sur Angular V1 est dispo => books.ninja-squad.com ; j'ai la V1 mais toujours pas lu ;-)
    • The Good
      • ngHint
      • eslint + plugin Angular
    • The Bad
      • $scope-soup
      • Eviter les conflits de scope parents/enfants via les "ControllerAs"
      • Performances
        • Utliser les bindOnce pour réduire le nombre de watchers
        • Ajouter des "track by" pour éviter de reconstruire le dom d'une vue sur l'autre si on manipule les mêmes objets
        • Utiliser judicieusement ngIf vs ngShow
          • ngIf : détruit le dom et le reconsruit
          • ngShow : cache le bloc mais si celui-ci contient des instructions qui sont calculées, alors elles le seront quand même
        • ng-model-options pour conditionner le déclenchement du cycle de digest/watcher
      • Fuites mémoire ; rajouter des $scope.on("$destroy" ...) pour faire le ménage
    • Angular2
      • Prévoir de l'écrire en ES2015 ou TypeScript
      • Tout est composant
      • Nouveu modèle de template
        • Web Components compatible
        • Web Workers compatible
      • angular-cli
    • Migration vers NG2 dans le cadre d'un projet NG1
      • Utiliser la syntaxe ControllerAs
      • Utiliser les directives pour initier une approche composant ; Angular 1.5 apportera un début de syntaxe "component"
      • Commencer à écrire en ES6
      • ngUpgrade permettra d'utiliser une syntaxe orientée composant et de les "downgrader" en syntaxe Angular 1.
  • Ionic, le framework mobile hybrid carrément addictif :
    • Application hybride = WebView embarqué dans une application native
    • Ionic = AngularJS + Cordova
    • Plugins ng-cordova pour accéder au matériel et fonctionnalités du périphérique
    • Ionic fournit un ensemble d'outil pour aider au développement et au déploiement des applications avec un modèle économique en cours de définition
    • solution manquant encore un peu de maturité ?

Au final, globalement une bonne journée avec une bonne organisation. La diversité des tracks (agile, technologies, web et Java) permettent de trouver son bonheur et d'avoir un programme à la carte. Une bonne formule en somme.

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.

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 !

 

19 Mar 2014, 09:30

Misc - 19/3

UI

  • Brick is a bundle of reusable UI components based on HTML5 and made by Mozilla ; you can read an introduction about it. Seems minimalist to some extend (limited in numbers even if growing) but also very powerful at a qualitative point of view.

DevOps

  • If you are interested in Chef or more widely about IT automation, you can read 3 articles in French on how to run Chef from scratch and cook your first recipes.

Postgres

  • PostgreSQL 9.3.3, 9.2.7, 9.1.12, 9.0.16 and 8.4.20 released! It contains fixes for multiple security issues, as well as several fixes for replication and data integrity issues. It also contains many improvements.
  • Barman seems a very powerful backup and recovery manager for Postgres. Develop by the 2nd Quadrant team which are in the main commiters on Postgres code.
  • Postgresql Studio : a web app to manage your postgres database in a Java container (tomcat, etc). Seems a modern alternative to phpPgAdmin.
  • Postgresql Exercies : to discover Postgres world and train yourself to build SQL queries.

Development

  • Some best practices (in French) about POST vs PUT to use them correctly in your API.
  • The AngularJS team wrote a blog post about what would be in AngularJS 2.0 ; seems very promising both on the improvements part but also what they aim to ease. It's also interesting to see that they inspire from ES6 which is the next version of Javascript (not yet implemented in your browser)
  • Opquast is reviewing their best practices around mobile development til end of March, with a public review. Then final recommendation will be released. If you don't know Opquast (for Open Quality Standards), they released a lot of checklists to asses/review your site.
  • The truth about multiple h1 tags in the HTML5 era : with the change of structure allowed with html5, it's now safe to implement multiple h1 tags.
  • Wonder when/why you should use Node.js for your next project : read this article which explains the paradigm behind Node.js and where it fits best for projects.

19 Feb 2014, 09:30

AngularJS Review - 19/2

No time to code this week, so some readings with a focus on AngularJS

See you maybe next week or in two weeks after Winter break ;-)

06 Nov 2013, 09:30

Web Roundup - 6/11

Keeping on frontend side to change from my current backend tasks (SSO/Kerberos, Postgresql, etc) :

  • Touch and Mouse : together again for the first time :
    • You may consider so far that your application is either used in a touch context (on a tablet) or a mouse on (on the desktop). However with the rise of Touch & Mouse devices (think Microsot Surface, ChromeBooks, etc), you will have to consider both at the same time.
    • Often developers also consider that mouse and touch events are similar, the article will show you some differences. Fortunately, with Pointer Events initiated by Microsoft, there is a standard in progress for managing both at the same time through a standardised API.
    • You can start using Pointer Events with these JS libraries : PointerEvents.js and Hand.js
  • Icon & Pictogram (in French) : a very interesting article to distinguish icons / pictograms and the right way to use them. Not as obvious as we may think first. A good pictogram = icon illustrating the right concept in the right context, being meaninful for most people with/without the associated label, etc.

  • Reminder : do not use @import to load your css files ; prefer the link notation as files would be downloaded in parralel and not one after another.
  • Still about webperf, a "latency for dummies" article to learn more about latency (what is it ? how it impacts my site ? etc.)
  • And to finish, if you want to hightlight differences between HTML4 and HTML5, there is an app a web page for that.

30 Oct 2013, 09:30

Web Roundup - 30/10
  • A placeholder is not a label (English version | French version) : even if placeholder can looks as a substitute for labels in forms and allow you to win some space, you have to remember that once a content is filled in the column, you loose the mention and thus this item in the form has lost its context.
  • Best of both world - mixing HTML5 and native code : a long article which tries to find the "best of breeds" approcha between HTML5 and native apps with samples / best practices.
  • Responsive typography : how to learn how to make your content readable and adapted in size/height/... by adopting relative unites and not fixed ones.
  • Mobile first responsive web design : review / best practices / tools to implement a mobile first and responsive webdesign project and with the question of performance in mind
  • Breaking the 1000ms mobile bareer : from 1s, user can change his mind and is waiting for your app. So you need to go below this threshold. Slides describe the different ways to get there.

16 Oct 2013, 09:30

Paris Web 2013

I had the opportunity to attend Paris Web last week. For those who don't know Paris Web, it's a conference about webdesign, accessibility and quality, but not only/strictly and 2013 was the 8th edition, gathering 600 people in Palais Brongnart and almost 600 online too with the live. All the conferences were recorded, so if you are interested, you'll be able to watch them online later.

For me, It was 2 days with a lot of insights, values and beliefs on what the web should be and how we should work and somehow live with the Web.

Below a summary of the talks I attended.

Day 1:
  • "La folle journée ou la fourberie d'un projet" : a funny introduction with a story with all the "clichés" about a web project : use of trainee, lack of specs, lack of organisation, etc.
  • "API Best practices" by Eric Daspet (slides) : Eric provides some feedbacks about his own exprience on builind API ; a few lessions he learnt and shared :
    • Dates are ambigous, especially when you deal with timezones ; be the most defensive as you can against date (don't assume lazy people will provide UTC based date for example but more a local date with timezone)
    • Plan additional langues to avoid breaking your JSON object and more globally your API when adding a new languages
    • Pagination : your collection can change between two requests ; so implement a strict filter and some before/after pagination than using offset and limits/quantity
    • Enforce pagination and limits to avoid a client making a query on the whole collection
    • Versioning : be compatible but not that much. You will fail to some extend, assume you will have to redesign your API and have a v1, v2, etc
    • Structure : be predictible with your URI schema ; don't have more than 3 levels (collection / item / link)
    • Encoding : avoid special characters to avoid some double encoding in some code (yours or the one of your client)
    • Security : never implement your own system, rely on standards like HTTP-Baisc and oAuth ; provide a mandatory SSL/TLS channel.
    • Make your API simple to start with but the most flexible/opened also to be easily extended later
    • Mix a bunch of state of the art, standards and pragmatism to have the right balance to build your API
  • "I code so I test" :
    • Remember that Ariane 5 rocket exploded for a cost of 370 millions $ for a code from Ariane 4 which was not tested and for a test estimation about 300.000$
    • Review of the main tools for testing (unit / integration / functionnal / UI / validity / compatibility testing)
    • Aim is not to improve code quality by the test ifself but the process it requires
    • Imrprove code resilience, maintenance and evolutivity
    • Imrpove the trust you have in the code, even if you are not the one who developed it
    • There is a learning curve which is not that much about the tools but about the experience on how/what to test
    • Be realistic/pragmatic in your tests but always tests
    • Start better with a wrong test than with none. Never wait for the perfect test and you will improve them over time.
  • HTML5 accessibility (slides) :
    • There is still a long way to go even if browsers do mostly their job. It's because of the WIP status of HTML5 but also the fact that browser are not always connected to the "Assistant tools" to which they should provide information. Even if not up to date, you can check HTML5Accessibility.com.
    • Overuse of "section" tag in HTML5 is what we had with "div" tag in HTML4, whereas "section" are visible in audio system (and not always div, creating too much noise but at least being visible)
    • Aria is to make the bridge for accessibility when native tags are not sufficient. It will use shadow dom
    • Tip 1 : if you use a "section", provide a heading to make your section meaningful for audio/screen reader devices
    • Tip 2 : if you try to enhance some native html tags (like input) to make it looks fine for non paired people, think about accessiblity
    • Tip 3 : Use native html tag instead of Aria components when possible
    • Tip 4 : Do not change/alter native HTML semantics
    • Tip 5 : all interactive ARIA controls must be able to use with keyboard
  • Subtile accessibility :
    • On mobile, you have no keyboard nor short description ("infobulle"). So you need to find alternatives to make your content accessible.
    • Some patterns (navigation, links management, etc) are reviewed with a few tips to improve the accessibility. Some tips can be used also to improve UX for non paired users.
  • Learning to love : crash course in emotional ux design
    • Starts with reminding that design is not just about how it looks like but also how it works (cf Steve Jobs quote)
    • Impaired people have difficulties to choose because of this lack of "emotion".
    • Before an application can create an emational relation with user, it must meet basic needs first.
    • It's not because a product is useful that a product is usable.
    • When for email you use the "no-reply@domain.com", you just say you users you don"t care about them ; you should better use a please-reply@domain.com
    • Introduce emotional design smoothly with a progressive adoption, starting by fixing an issue so that you have a first rolling point for emotional design.
  • A small step for "em", a big step for the Web by Nicolas Hoizey (slides)
    • Start with a reminder that we should allow user to set his own preferences (font size, etc) to adapt the site to its needs, and thus we need to give them control on the site but with keeping the control on main layout.
    • For these need, please enter "em"  (and "rem") units both for font-size but also for vertical and horizontal grid. Idea is to adopt proportional/relative size and adopt the elastic rendering (which is not the same as fluid which was more a fixed side but set in percentage)
    • If you also mix an "em" approach with responsive web design, you should both offer a good accessibility and user experience with an adaptated rendering.
    • Promotion of the Future Friendly movement, which I'm also really fan about and share the vision of the web.
  • Impactful user experience user strategy : thoughts about UX based on a delivery issue use cases, making think about the whole process and the vision of each participants and how it impacted the whole user experience.
  • HTML5 Javascript API : based on a memo game html/js/css based, the author introduced some CSS/JS/HTML5 - I did not find it that interesting but maybe because it was end of the 1st day.

Day 2 :

  • Adaptive images for responsive webdesign : a review of some techniques to make adaptive images and for each of them a review in termes of performance, complexity (use of dependencies, etc). We can conclude so far that there is no obvious solution and that so far you need to find the solution adpated for your needs. So it's still a nightmare to some extend for a frontend developer and the fact that CMS would also have to manage it for end contributors, is another challenge.
  • Integration, the "it depends" universe (slides) : Frontend devs needs to know from day 1 the requirements and the constraints of the project to make the right assumptions on how they will integrate the site at a HTML/CSS/JS point of view and choose the right solutions. The latter you provide information/constraints to him, the more impacts it can have.
  • Retroactions loops or how to customise your application :
  • Think Mobile UX (slides) : a very interesting talk on mobile UX by focusing on "degrated" moments (when waiting, when out of connection, etc)
    • Challenge : need to think about interruption and breaks, with a requirement of efficiency, on a short and narrow screen
    • Work on the waiting time the user felt and not the real waiting time to allow him keeping focus on his task and without making him angry about your app. like trying to provide an app skeleton to make feel the app is loading, or provide first local features or assume your connection and transaction will succeed and provides an immediate feedback and do the transaction asynchronously (like when the like is displayed in instragram)
    • Focus on the main task of the app to make it damend simple and fask. Secondary task can then be sub-optimised
  • Rusy web (slides) : a "philosophical" talk about data resilience, what should be kept/deleted, who should do that, etc. More open questions than anything else but an interesting talk as the web is only 20 years. What may seem useless now may be useful later for historians but you also have the privacy issues and your digital legacy.
  • Designing with sensors, creating adaptive experience
    • Not really related with web topics but was very interesting especially for the issue it raised about use of data, if robots could make human dumb, etc.
    • Adaptive design is to make a user experience dependant on context and user (so it's not responsive design)
    • Sensors and related intelligence start to be everywhere from Google Now to your Heating system sensors or if you enter a shop, your device would awake, open the app of the shop and become a personnal shoping assistant.
  • Mobile and accessibilty, a trojan game (slides) :
    • Accessibility aspect of projects were often neglected making the assumption impaired people were not using your website.
    • When you look closely to mobile web, it makes us feel as impaired people. So web mobile is a great opportunity to make site accessible by meeting the mobile requirement
    • Tip : if you allow transaction on mobile, increase session and use local storage to allow people to go through their transaction even if they are disturbed or punctually disconnected
  • Paradox of choice :
    • The more choice you have, the more disappointed you will be. Indeed the right choice seems impossible to make. For e-commerce, you need then to filter/sort/narrow user's choices to make him chose the right solution for his needs.
    • Tip : instead of suggesting similar products for which you can create a higher deception, better suggest additional products.
    • Focus on the end of the transaction process to provide a feeling of satisfaction ; what happens before does not matter that much
  • Lighning talks session (people to present 1 topic in 4 minutes)
    • Two devs from Microsoft made two live coding talks with the BabylonJS framework, one to show how to implement a tetris game in HTML/JS/CSS and one about building a first version of the solar system. It was really impressive !
    • I stopped to save the world : what happens when you stop being a hero in all your projects and that even if it may explode to some extent, gains are higher than keeping being a hero both for you and your firm and projects.
    • Others were nice but not that worth to be mentionned :)


What I liked by attending Paris Web :

  • It makes you think about your job, your values/beliefs, your vision of the Web. I should definitely have attended earlier and I need to find how to stay close to these microcosm/universe to sustain skills/values/beliefs.
  • Some topics seems very far away from my current challenges but who knows...
  • It confirms/extend your knowledge on some topics but also let you discover new ones

Videos of each conferences should be available soon - I strongly encourage you to watch them and attend the 2014 edition.

Extra resources :

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.

14 Aug 2013, 23:37

There is no mobile internet !

After this one month break, let's go back to the weekly blog post about the Web. I hope all of you enjoyed your summer break (or will soon enjoy for the latest ones)

Going back to last February, a very interesting article about the mobile internet and more precisely the fact there is no mobile internet but better should think about a One Web Experience:

  • People just use internet, whether on their PC, Smarphone, Tablet ; they don't get the mobile internet ; as said Brad Frost (mobile expert) :

    Repeat after me: mobile users will do anything and everything desktop users will do, provided it's presented in a usable way

  • 32% of users chose to see the full site on their mobile device when they can ; meaning that they want to have the same information. Often mobile site have the bad habits to hide/remove content on the mobile version. Your mobile version must be a fully adapted version of your normal site. Don't hide/remove content or your visitors will be disappointed.
  • Internet on Smartphone/mobile is not always about "on the go"  or "action oriented" as most internet access on smartphone is made from home. In your work. At work, we can also hope you are "action oriented" when you consult a site
  • It not because you  browse a site on your smartphone that you are also about the now and the here (geo-location). It's more about a mindset (I want to have information, I want to play, etc). Google back to 2007 set up a few mindsets as bored now, repetitive now, urgent now and a few other ones.

As  stated in the article :

One Web experiences are about creating communications that speak to different mindsets, not to different devices. People need to be able to find various pieces of information, and they expect that the information will be readily available whether they’re on a phone or desktop computer.

That's also the motto of the "Mobile First" approach ; the current approach "Desktop centric" was to say the full version for the desktop and a gracefull degradataion for the mobile whereas Mobile First is about a working version on the mobile device and a progressive enhancement to the desktop version. With mobile first, there is nothing (usefull) removed, opposite to the desktop centric motto.

On this topic, OCTO also just publshed (in French) an infography about Responsive Design and Mobile First which illustrates this difference (look at the 3rd item, even if you don't understand French, images are self explainatory)

So now you will try to be "device-agnostic" !