Experimenting with React Create App and Google Sheets API

Since the opening of our Lausanne office, a person who shall remain anonymous collected the most epic — from weirdest to funniest — statements made in the open space to fulfill a constantly growing database of quotes. From post-its to Google Docs to Google Spreadsheets, it definitely deserved a better interface to read, filter and… vote!

Quotes React app

Setting up the development environment

After having done some projects with it, it was clear React would be a good choice. But unlike the previous occasions, I did not want to waste time setting everything up; experiments are about coding right? There’s plenty of React boilerplates out there and whereas some are great, most usually include too many tools and dependencies.

Continue reading about Experimenting with React Create App and Google Sheets API

Tags: , , , , , ,

When music and dance meet web technologies

Who am I ?

I’m Jordan Assayah, I am 18 years old and am currently working at Liip as a trainee from February 1st to August 31st. My main job is to work in a team and develop new functionalities for the zebra project. I’m also a dancer (especially a tap dancer) and love music. Every year since ~ 4 / 5 years , I go to the tapdance world championships to represent Switzerland.

Personal project

After 4 months of really nice integration in the team, I’ve asked to David J. if it was possible to restart a project that I was developing at home. The main goal of the project is to produce music over WIFI with little and cheap modules (because I’m a student) that you can put on your shoes and control the whole thing from a web application where you can choose sounds for sensors, the velocity, the volume, etc.

I was searching for good and cheap modules for a long time and I finally found something : ParticleIO. They sell WIFI and GSM modules arduino compatible. The perfect microcontroller for the project. So I’ve bought two of those and try to use them. The cool thing about it is that there are multiple tools like a Particle CLI, a dashboard to sniff data, an online IDE (little bit weird, I know), a Particle JS library, an IOS and Android SDK, a firmware documentation and the best for the end, a local REST API server.

So far, I’ve only hacked a little bit the local server to let WIFI modules send data much faster (about 80 |  70 [ms]). This let me make a lot of queries in a second and allows the app to be a “Real Time App”. I did, but not yet completed, the interface that let user choose sounds, activate /deactivate sensors, etc.

Continue reading about When music and dance meet web technologies

Tags: , , , , , ,

What’s your twitter mood?

The idea

  • Analyze tweets of a user for being positive, negative or neutral using machine learning techniques
  • Show how the mood of your tweets change over time

Why?

  • Fun way to experiment with Sentiment Analysis
  • Experiment with language detection

How

Gathering data

We analyzed tweets from Switzerland, England, and Brazil. We put extra care to make sure our model can do well against Swiss-German text.

Make awesome model in node

We created custom fast Natural Language Processor in node.js. Why node? It has very good run-time when dealing with lots and lots of strings. We used unsupervised machine learning techniques to teach our model the Swiss German and English writing model. Once we had a working model, we added couple other models using Bayesian inference to create an ensemble https://en.wikipedia.org/wiki/Ensemble_learning

Make nice front-end

portugese sentiment analysys

Once we got our server working we thought about adding some better UI. We asked our User Experience specialist Laura to suggest improvements. See for yourself:

mood-detector-graph1

Problems and learnings

Language detection is needed to use the right sentiment model

Design model for Swiss-German is especially hard: the language incorporates German, with a lot of French and Italian words. Also spelling of words changes from canton to canton. If we add that most people when writing tweets are forced to use abbreviation, we get the whole picture of the challenge.

An accurate model needs a lot of data

In order to get a good result we needed to incorporate data from various people and different nationalities. The good thing is that the more you use our model the more accurate it gets.

Training data is available

One of the problems is that for humans is hard to understand the irony or sarcasm. Especially in short tweets. So it’s also hard for a machine.

If you want to play with our results in this machine learning experiment:

http://liip.to/twittersentiment

 

I would like to thanks Andrey Poplavskiy for his “css love”, and Adrian Philipp for his huge contribution and encouragement towards this project.

PS.

Some comments that we received, were not so nice, but as always we are happy to receive any feedback.

twitter-mood-not-so-nice

Swiss Confederation, the Styleguide version 3

What is a StyleGuide for ?

It is a long-term and flexible solution listing and exemplifying web components and tools useful to create a website. For instance, it explains how to use each component, how they should appear on the web and interact. It is a support for developers while integrating, and useful for designers, as it allows them to keep a general vision on the style and the system’s functionalities. It is obviously necessary to keep a StyleGuide up-to-date, anytime the Corporate Design or Corporate Identity is modified.

Why is it for the Swiss Confederation useful?

The Swiss Confederation is split in multiple departments, each of them owning one or more website. The StyleGuide supplies them a common ground for the creation and their websites, while ensuring a coherent visual identity for the user. The StyleGuide does not only offers web-component AA certified according to the Web Content Accessibility Guidelines’ recommendations about accessibility, it also provides additional information. The StyleGuide aims at ensuring a wide access to information to any kind of users, including disabled people (for instance sight or hearing disability). These recommendations are also useful to all users.

Swiss Confederation Web Guideline 3

Swiss Confederation web guidelines define the graphic guidelines of the Swiss Confederation on the web. It ensure coherence on the different websites developed under the admin.ch domain.

Innovations of the 3 version

  1. Change in the system generating the StyleGuide. Hologram (coded in Ruby) was replaced by Fabricator (identic but coded in Node). It facilitates its installation and development with Windows
  2. It is translated in the swiss national languages
  3. The components’ accessibility is improved (AA)
  4. Problems raised on Github solved

Who are the users ?

The StyleGuide is to be used by internal federal project manager and external service providers. The code is opensource, each can use, modify, solve issues or propose improvement. The StyleGuide is very convenient to use in all projects and easy to install with NPM or Bower. It is possible to download an archive or duplicate the project from Github. The whole installation process is available on Github.

The last version of the StyleGuide is built on a Fabricator. It is automatically multilingually generated with Gulp. Gulp is also gathers and improve all necessary files for the framework to work properly. The documentation is written in markdown, the components are dynamic templates Handlebars. The translation is performed with the support of a personalised Handelbars, referencing translated files in YAML.

Hackday React Native for Android

When React Native for Android came out I was excited to investigate it more at one of Liips monthly innovation days. Liip already developed a React Native app for iOS and we wanted to know how it works for Android. We were: Andrey, Germain, Lukasz and me. Germain is currently working on a cross platform app written with Xamarin.

For this hackday we tried to port an existing React Native iOS app to Android.

TL;DR: We are waiting for WebViews to be supported. See the pull request for changes. We didn’t need to dive deep into Android APIs like XML Layouts for views.

Continue reading about Hackday React Native for Android

Tags: , ,

FutureJS ’15

Full Stack Fest

Last week some Liipers and I were in Barcelona for Full Stack Fest, 5 days of Ruby and JavaScript talks, workshops and hackathons. I personally only attended the second part, FutureJS, and this is going to be today’s topic.

Progressive enhancement FTW

The first talk I’d like to share was everything but disappointing. I already saw Rachel Andrew last year at the Front-end Conference in Zürich — an impressive talk about the CSS Grid Layout — and so I was eager to listen to her again. This time the topic was “The business of front-end development” and covered various themes related to her current work and experience.

So what is front-end development? As she said, it used to be mostly being a browser bugs expert. But as they become more and more focused on standards and keep updating frequently — and even automatically — we can finally focus on the most important: creating a good user experience.

The problem is, we tend to be lazy and installing frameworks and libraries without even thinking about the drawbacks is becoming the standard. As Rachel said, we are for sure gaining time on our sides, making our processes quicker but is it worth it? It might cause accessibility issues or even increase the site loading time and you should probably care about this.

Projects are all different, put your usual tools aside when they don’t fit. Think about your visitors’ browser, the country they live in and the usual network connection they have. Focus on the core experience and then — and only then — make it shine.

The slides are available on Speaker Deck.

Web security is hard

The second talk that particularly caught my attention was the one from Alex Sexton about “Hacking Front-end Apps”. I knew security on the web was hard, but I really got impressed by his examples of possible hacks.

As he told us, we all have a friend named <script>alert('Hacked')</script> somewhere in our database but that’s just the tip of the iceberg. All the libraries you hot-link from CDNs, the JSONP requests you do, all these flaws could potentially result in external code being executed on your site.

“You cannot detect malicious code”; I totally approve this assertion, myself having been hacked in the past. The upcoming solution therefore totally makes sense: block everything by default and then white-list only what you trust.

“Content Security Policy”, a W3C Candidate Recommendation, is a standard HTTP header designed to allow websites to declare approved sources of content that browsers are allowed to load into the current page.

CSP will disable inline JavaScript and CSS, eval() and any cross-domain resources including images and fonts by default. It even offers the possibility to report violation to your the URL of your choice. Ain’t that great?

All you have to do then is to define a white-list of resources you want the browser to load. The support is pretty good and you can read more about it on content-security-policy.com.

Discover a bunch of the most weird front-end hacks in the slides.

But that’s not all…

The interactive presentation of Ben Foxall about browser capabilities was fun. Listening to Tom Dale talking about the process behind Glimmer, Ember’s rendering engine, was interesting. Also watching James Halliday creating a Twitter-like messaging system based on P2P was pretty impressive. And finally, hearing Mikeal Rogers saying that Node and IO will be together again to release Node 4 under the Node Foundation was reassuring.

This edition of FutureJS was great; especially the venue and the party at the beach. The biggest disappointment was probably the Wi-Fi who was actually worse than the one from the hotel. If anyone from the organizers is reading this, please do something for next year! Full Stack Fest will takes place again for sure but the dates aren’t known yet, check the line-up once its released!

Tags: , , ,

Load client side resources in a content centric application

We saw in a previous post, best-practices to optimize the client-side resources load, and by the way, reduce our web page’s loading time. Let’s keep in mind these concepts and solutions and assume that we develop a content-centric application in Java/JSP.

This application contains components that have many renditions for multi-channel usage. (As explained in our previous webmardi about content-centric application.)

Let’s take a component with a “in page” rendition, and a “standalone” rendition. So this component can be displayed integrated to a page, for example by sling or the JCR api, and as standalone HTML by a direct HTTP request. And in both cases, this component requires some client-side resources to be well displayed.

In the “standalone” usage of the component: We must refer the resources inside the component’s “standalone” rendition script:

Then in the “in-page” usage: We refer the resources in our “container” page rendition’s script.

We see in this inclusion that we must specify a “in-page” rendition that doesn’t include the resource again. And here is this “in-page” rendition:

Again we include our script in our container page rather than in the component, exactly to manage coherence of the resources inclusions.

This content centric application model, doesn’t solve the problem described in previous post: We still have to find the golden mean between too much or not enough granularity in the categories of the client-side resources.

But we see that renditions of a component are not dependent each other. Meaning, we can choose what resource to load in “standalone”, “in-page”, or any else renditions.

Note that if it’s not a problem to make “standalone” and “in-line” renditions dependent each other, you can put all the common code (the ul and foreach loop) in a common script, and include it with standard JSP methods.

AEM ClientLibs

The JCR/Sling based CMS “Adobe Experience Manager” comes with a great feature, designed to automate all these inclusions and to ensure a good coherence of your resources categories. This is the “clientlib” system.

First we create somewhere in the JCR, a node with the primary type “cq:ClientLibraryFolder”. This node will have a property “categories” where we’ll name one or many categories (for example “my-internal-lib”). In this node, we put our scripts (JS and CSS), that we want to be loaded, when we call (in a rendition jsp) the previously named category. That is the basic concept.

Added to this, “cq:ClientLibraryFolder” have these very useful properties:

Property Type Description
dependencies String[] List categories this one depends on
categories String[] List the categories that this folder constitute
embed String[] Embed the code of listed categories, in the categories this folder constitute.
channels String[] List the channels (related to devices or sites) for which the constituted categories are valid

Here’s a client-library-folder for our carousel component example:

  • carousel-clientlib – cq:ClientLibraryFolder
    dependencies: modernizr, internallib → any dependencies you need.
    categories: carousel → We call it “carousel”.

    • carousel.js → any external library you need)
    • carousel-init.js → any custom specific code you need).

In the rendition JSP, I call this category with a jsp tag:

  • The HTML will contain inclusions of all dependent scripts.
  • The call order is automatically calculated by the system, base on the dependencies chain.
  • A script will never be included more than once.
  • We don’t need two different renditions anymore. This one works fine for “standalone” and “in-page” usage of the component.

Use of clientlib system is not required by AEM, but at Liip in the AEM squad, we find the feature great. So we use it.

Unfortunately there’s a little performance problem with this. We know that JS should be loaded at the end of the body. To stay compliant to the content-centric model while providing these features, or for any reason I don’t know, AEM decided to print the inclusions right where the tag is used.

The easy solution we found at Liip to resolve this last problem is just to encapsulate the AEM tag in a custom tag:

In this encapsulation, we buffered the output generated by AEM’s clientlib system, until we print this output with:

A way to do big, clean, and scalable content-centric application, with very good client side performance.

WebSpeech APIs

Ever since I saw the film Iron Man I wanted to build a voice controlled personal assistant, similar to Tony Stark’s Jarvis. Thanks to the WebSpeech APIs provided by Chrome you can now build something similar in your browser.

Continue reading about WebSpeech APIs

Tags: , , ,

AngularJS – End-to-end testing with Protractor

We use AngularJS here at Liip, and as developers concerned with the quality of our work, we employ a multitude of tools and patterns to ensure that everything works as expected. In short, we test our software.

The goal of this post is to give you a short overview about some of our experiences with testing AngularJS applications.

Continue reading about AngularJS – End-to-end testing with Protractor

Tags: , , , , ,

FullFrontal 2014: A great JavaScript Conference!

Last week I was at FullFrontal 2014 in Brighton, a single day conference for front-end developers. Here is some interesting stuff from the talks:

Physical Web

Scott Jenson presented “The Physical Web” which
is an experimental project from Google. The main principle is to transmit URLs on demand through Bluetooth Low Energy devices like iBeacon and then use the mobile web browser instead of native apps (which you have to install first).

I think it’s a very good idea! For example, if you are in a bus station and you want to know when the bus arrives, you don’t want to download a mobile application or enter the url of the bus company. With “physical web”, an iBeacon can transmit the url of the bus station with the time of the next bus directly to your smart device.

More info on Physical Web website and Documentation page on Github.

Continue reading about FullFrontal 2014: A great JavaScript Conference!

Tags: , , , , ,