Search: Get past English with Solr

Implementing a great search feature for an English website is already quite a task. When you add accented characters like you have in French, things tend to get messy. What about more exotic languages like Japanese and Chinese?

When we tried to implement a search engine for a multi lingual website where we had articles in Chinese, Japanese and Korean, despite not knowing those languages at all, we quickly remarked that our search engine was performing really poorly. On some occasion it wasn’t even returning an article we specifically copied a word from.

We had to do a lot of research to understand what was happening, here is a compilation of what we found along the way in the hope you won’t have to go the same path as us!

Continue reading about Search: Get past English with Solr

Tags: , ,

Discussing ‘open design’ at iadlab15

Andy and I lately got invited to host a ‘lab session’ at the iadlab15 interaction design conference in Bern. We proposed to animate a discussion on a quite abstract topic: open design.

What the true meaning of our topic was, we didn’t know by the time we proposed it. Yet we had a strong feeling that the ‘open’ culture wasn’t as strong in the design scene as it is in the tech scene and wanted to discuss that assumption, openly.

We thus introduced the open design notion with a big question mark: opensource we know since ages, opendata is now proving its value to the world, what about open design?

It turned out the discussions went fantastically well and we got thanked many times for having brought the topic onto the table.

Even more astonishing to us, what we encountered is a generational gap: digital-native creatives showed interest and seem to integrate open practices whereas their elders tended to disregard – if not despise – them.

Continue reading about Discussing ‘open design’ at iadlab15

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

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: , , ,

Let’s celebrate our new Lausanne office!

After 4 years and a growth from 3 to 20 people, our beloved offices in Rue de Bourg 11 were really getting small. We were lucky to find another awesome place downtown : we moved into a two-level office totalizing 800 square meters at Rue Etraz 4, which should leave us enough space to quietly continue growing without worrying about space for a while.

As you know (and maybe can remember our last party on June 10th 2011 in Lausanne), each move comes with its housewarming party and we would be thrilled to have you with us to celebrate! It will happen on

Thursday 17th September 2015 – starting at 4PM

A nice programme has been put together to entertain you until late in the night. Carlos (UEFA) and Daniel (FREITAG) will share their innovative web visions with us. You’ll enjoy great food (Veganopolis and La Ferme Vaudoise) and drinks (including the famous Liip Mojito) while listening to the music of the band Les Marcheurs as well as DJs Mandrax and SL.

All Liip friends, partners and of course our beloved clients are welcome to join with their family (there will even be a kids corner on the site).

Just a small request : it would be nice to inform us of your presence by filling up the form as it will help our organizing team.

Liip Lausanne Office

Writing iOS Layout Constraints The Easy Way

Coming from a web-development background, native iOS development always feels a bit clunky to me when it comes to creating the layouts.

Yes, there is the Interface Builder and it is a great tool, but sometimes,
things get more generic and building the views and layouts can be more efficiently done by hand.

Except – layout constraints! Writing layout constraints can be tedious work.

Example, making an element the half of the width of its parent element in objective-c:

It is not much better in C# with Xamarin either:

But behold! There is our ConstraintHelper!

The ConstraintHelper is a small C# library to help with the layout constraints and it brings less common concepts like Method Chaining to the layout constraints.

ConstraintHelper is Open Source and can be forked from GitHub.

Tags: , , , ,

Liip is over, let’s start at Liip!

Marc Brühwiler, Kim Corminboeuf and me, Matteo De Micheli, finished our apprenticeship successfully this year. Marc and I graduated as application developers at Liip Zurich this summer. Compared to me, Marc did an adult apprenticeship which took just two years instead of four. Kim graduated as commercial employee at Liip Fribourg after 3 years of apprenticeship. We want to share our adventures in form of a little interview.


What was the best part of your apprenticeship at  Liip?


Matteo: I liked the way I was introduced into the professional worklife of a web developer. I started out with little tasks like changing image formats and gradually got into more exciting tasks until being fully integrated in projects.

Marc: I appreciate that I got the perfect amount of freedom. That was important to me, because I was able to schedule my work days a bit differently. Furthermore, I had the possibility to do some things for school at Liip if required.

Kim: I already took interest in the “web-world” before, so it was really interesting to do my apprenticeship here. I learned many things about the development of projects, beside the financial and commercial aspect of the company. Liip is really fair and nice to the apprentices; I was always treated as an employee and not “just” as an apprentice.


How did your supervisor and teammates support you?


Matteo: I liked how Liip tried to integrate me into several projects, so I could experience web development from different sides and roles. There was never a point where I felt helpless, since I could either ask teammates or supervisors for advice.

Marc: I was always able to get help, when needed. I didn’t have to be afraid to ask any Liipers, no matter if it was for school work or projects. Thanks a lot for that!

Kim: I had a lot of help for my school work. I was always able to ask a question when something wasn’t clear and then use that gained knowledge in practice. The employees praised my efforts and I could reassure that it was important what I did.


What was the best / worst experience during your apprenticeship at Liip?


Matteo: My best experience was meeting all the people and them being so open about spreading knowledge. Through pair programming, hackdays and a lot of coding I was able to realize how much can be done when you have the right tools and the Know-How. Even though I always met apprentices my age at school I felt that it gradually became harder for me to stay motivated there. I feel relieved that I can take a little break now from the traditional way of education.

Marc: I’m thankful that right after the confirmation of my successful final exam, I had the freedom to join the team I wanted. Things that are of value to me like what interests I have and where I get the most of joy were all respected. Due to those choices, I as well made up my mind about my future and how I could progress within Liip AG.

Kim: 1 year ago we started a project with all apprentices involved. Our goal was to develop a project that helped new employees to memorize other employees names (like a memory game). I had the role of the PO and Matteo was the Scrum Master. In addition we had Simon Erhardt, Nithuja Nagendram and Mano Speck as developers. It was pretty cool to have a project just with us and it was even cooler that the project was successful! It was also nice to see the apprentices from other offices, even though they work at other locations.


How was your relationship to the supervisors?


Matteo: I had a good relationship with my supervisors throughout the apprenticeship. I liked how I got support at work, as well for school related topics. My opinions were always respected and I never had the feeling that I was treated differently because I’m an apprentice.

Marc: It was really collegial. I could step up to them with whatever the topic was and be sure that I get the right amount of support. Since I had work experience from my apprenticeship as a carpenter I was more comfortable with work life and that probably made the relationship more open.

Kim: Really good. I had different supervisors but they always were here to support me and I learned many things. They also promoted me wherever they could, which helped me a lot because I needed that to improve my skills.


We are very happy to stay a part of Liip and want to thank everyone for the great time!

Playing well with others

I was invited to speak at the T3DD15, the TYPO3 Developer Days 2015, on the topic of community collaboration. Indeed my presence there was also made happen because there was a big interest both from the TYPO3 CMS as well as from Neos CMS to explore adopting Symfony. Another topic was adopting of PHPCR, again both TYPO3 and Neos CMS expressed an interest in this topic, though not as urgently as adopting Symfony. In fact the Symfony adoption is already under way with TYPO3 CMS developers having already integrated the Console component and looking towards the Routing component next. Neos CMS has long ago adopted the Yaml component and are looking towards the Process component next. Indeed especially Neos CMS might be beginning to adopt quite a few more Symfony, and other components. They are even willing to explore going to Symfony full stack, though it would need to be made compatible with their unique Proxy based AOP solution that enables them to effectively overload the “new” operator.

Anyway, back to the title of this blog post. I did in fact choose the same title for my talk in which I tried to give some considerations about legal but more importantly community topics related to working with third party projects. I tried to make it clear that there valid points for choosing to not adopt third party solutions in every case. I also tried to address a bit how to get people from other communities more involved into the TYPO3 and Neos CMS communities. Overall I must say I am still not quite as fluent with soft topic talks compared to hard topic, ie. code related, talks. I still do not know how much content to put on the slides and how much I can free style. I also still have a hard time estimating how long my talk will last. I guess I will get better with practice.

It was also an interesting time to give this talk, as TYPO3 and Neos CMS only recently decided to part ways. It is not clear if this will be the last joint conference. During my talk I wanted to make things a bit more concrete, especially when discussing points about what might prevent people from collaborating with TYPO3 and Neos CMS. It felt a bit strange as I was mentioning issues with each of the projects. I was worried that I might set of a flamewar, but everything seemed to stay quite civil :)

At any rate, I spend two great days with lots of interesting discussions. The location was awesome, essentially right in the Nürnburg castle, with lots of rooms for people to gather to discuss and hack. Aside from the Symfony and PHPCR related discussions I also entered into a session on diversity as well as on CQRS. Overall it was a very productive environment and a fun exchange with lots of old and new faces!

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.

Glad, Sad and…

Most Scrum Masters know the ‘Glad Sad Mad’ retrospective exercise. In the non native english speaking world, people trying out this exercise usually struggle to distinguish between ‘Sad’ and ‘Mad’. In every retrospective where we did this exercise I ended up with several stickies on the line between ‘Sad’ and ‘Mad’.
I tried to make it clearer by rephrasing the words to something more suitable that all of the team members would understand (like ‘I can’t take it anymore’ instead of Mad and ‘Get stuff off my chest’ for Sad for example, see this blog post by Mike Pearce). Although it helped, I still felt that the distinction was not 100% clear to everyone. Frankly, I got tired of having to explain it over and over again.

In a retrospective a few weeks ago when lots of those ‘in between’ stickies were placed on the wall we joked about making a new column for them. During that retrospective I noticed that a lot of the time my team was talking about things that came as a surprise to them that had an impact on the sprint or their feeling towards the project and things that they were scared of that could threaten the project or fears they had about the project’s current status. So I decided to add more columns reflecting that and came up with ‘Glad, Sad, Surprised, Scared’.

Retrospective vs. Futurespective

Adding a ‘Scared’ column opens up the possibility to also talk about fears for the future, which is usually not part of a retrospective but rather a futurespective. However, these fears typically uncover risks and uncertainties relevant to future planning. It also helps me as a Scrum Master to better understand the team’s feelings. Few people will talk about what actually scares them on their own. During the exercise I observed that once someone put a sticky in the ‘Scared’ column, others followed. Of course most of the stickies covered the same topic. But simply realising that they all share the same fear helped them to see that it’s not just their own private problem but that everyone feels that same way and that they actually needed to do something about it.


One can argue that stickies placed in a ‘Surprised’ column would also fit in the ‘Glad’ or ‘Sad’ columns and that’s true. And of course, stickies in that column cover a very broad spectrum of topics. But the value of this column is twofold.
Firstly, it helps to uncover things that arise unexpectedly – both in a positive and in a negative way. This way potential impediments can be spotted and dealt with or it can help to find out why a sprint failed (similar to the ‘Expected and Surprised’ retrospective).
Secondly, ‘I am surprised that…’ often uncovers a richer seam of information than simply ‘Glad’ or ‘Sad’. It allows discussion about why it was surprising and how the person feels about it. Software developers tend to primarily add stickies like ‘Sad about the slow server.’ or other very technical problems on the board. I felt that the ‘Surprised’ column opens up a way to illuminate the other, more personal side of problems which helps the team members to better understand each other and their connection as a team.

Try it out and tell me what you think!

Tags: , ,

DPC – Dutch PHP Conference in Amsterdam


Last week, I was at the Dutch PHP Conference in Amsterdam. I did a workshop on content management with Symfony with the CMF and a workshop as well as a talk on HTTP caching and the Varnish reverse proxy together with David de Boer. I will give a similar tutorial at PHP Summer Camp in Rovinj, Croatia and at PHP Conference Bulgaria in Sofia later this year. Let me know if you are interested in having me give this tutorial at your company.

A nice perk of talking at a conference is of course that I also get to attend the conference and see other talks. There was a couple of interesting talks I managed to attend in Amsterdam. Most notably was Implement Single Sign On easily with Symfony by Sarah Khalil from Sensiolabs, who explained the authentication process of symfony so good that I finally feel like I really understand what is going on. The talk on HTTP/2 was mainly interesting for its detailed analysis of what was cleaned up in HTTP/1.1 since RFC 2616. Another good talk was by Arne Blankerts on the Content Security Policy (CSP). And I really enjoyed Daan van Berkels talk on Ada Lovelace and the Analytical Engine, he made maths and assembler sound like fun! There was also a code night in which David de Boer and I hosted a FOSHttpCache session with the main outcome of providing reusable varnish configuration files for the features of the library, instead of copy-paste documentation.

Besides the conference, there was of course also time to visit the beautiful city of Amsterdam. I had not visited the Netherlands since I was a small child. I even found the time for a trip to Friesland, visiting Schiermonnikoog in the Wadden Sea and taking lots of pictures of sand and birds. On the way back to Amsterdam, I stayed at Leeuwarden to do a Symfony CMF introduction at PHP Friesland Usergroup.