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.

Good vibes at DjangoCon Europe 2015


Last year’s DjangoCon Europe took place on its own island, and this time we were welcomed by the beautiful Cardiff University. One of the goals the organizers immediately set was to promote diversity and embrace minorities, encouraging them to participate to this event. I remember when I bought my ticket and I read “all dietary requirements can be met” and I thought “they’re probably trying to set the bar too high”. This is a not so unusual statement, but when confronted to reality you usually end up with dishes not adapted to your dietary requirements, and, as a minority, having to ask for something special can really make you feel excluded. This time was different, as the organizers meticulously took care of that.

I talked about dietary requirements because it’s an important topic for me, but they also made sure to have a code of conduct, a financial assistance for people who want but can’t afford to attend, a wellbeing service, a subscription system for meals to avoid wasting food, reusable aluminum bottles instead of plastic water bottles, live transcription of talks (for hard of hearing or non-english people), and even a crèche.

All of this was not just buzzwords but was carefully handled by the organizers. In the end, it made everyone feel welcome and put a very warm atmosphere to the event. Talking with people was very interesting and rewarding because of the incredible diversity of backgrounds. A few days after the conference the Django Software Foundation even released a diversity statement to make sure everyone feels welcome in the Django community.

The choice of talks was about 50/50 between technical talks and community talks. I found the community talks to be very inspiring such as Ola Sendecka’s “Into the rabbit hole” which reminded me the benefits of the Pomodoro technique and pair programming. Also Adrienne Lowe’s talk “Coding with knives” and Russell Keith-Magee’s touching talk about burnout debunked the myth of the rock-star programmer, and how important it is to help people to get started on things they’re not comfortable with.

I can’t list all the talks I loved because there are way too many but among those I could find the slides for were Ana Balica’s “Demystifying mixins with Django“, Erik Romijn’s “A sincere tale of Django, developers and security“, Aaron Bassett’s “Effortless real time apps in Django“, James Bennett’s “The net is dark and full of terrors“, and of course Rae Knowler’s “Randomised testing for Django with Hypothesis“.

The 3 days of talks were followed by 2 days of sprints and this was a very good opportunity to dive into Django’s code and start fixing things. The core developers did a good job at helping people setup a development environment and start hacking on the code. This was a very rewarding part of the conference as this allowed me to do my first pull requests on Django and Django CMS.

Thanks to the DjangoCon Europe team who did an amazing job at organizing this event. See you next year in Budapest!

Tags: , ,

Optimize your website by managing the client side resources

In a lot of projects I worked on, JS & CSS inclusions were a mess. Too much files, no coherence, bad cache usability, etc. In this article, I’ll try to bring you some concepts and solutions to solve these problems and optimize the loading time of your pages.

These concepts and solutions are valid for both JS and CSS. So I’ll use the words client-side resources for files and client-side scripts for piece of code. And that always will be about JS and CSS. I won’t talk about compression, or minification of resources. We know that they should be compressed, regardless what CMS or tools we are using. I will talk about unification options, and choices that impact on performance.

Assume we develop a site with ten different pages. Some client-side scripts are common, (used by more than one page). In contrast, there’s also some heavy scripts that are specific to a page. Finally, some pages don’t need scripts at all.

Now the questions are:

  • How many client-side resources (how many files) we’ll have ;
  • Whichresource contains which scripts ;
  • And from where they will be loaded.

The unique file approach

We unify all the client-side scripts in one single resource, a “complete-website.js” or “styles.css”. This reduces the number of requests. And this resource is putted in the caches after a visit of one page of our site. Every visits on other pages will benefit of the cache usage.

But even a simple call to one page will load a heavy file with maybe only 5% used. The cache may be empty when we visit a page, and we’ll load awesome UI stuffs such as carousel, swiping and parallax, for nothing. Do we really want to?

Now if we do a modification on a small script used by one page, we have to reunify our big resource and invalidate caches that store it. Modification on a small script happens, meaning frequent cache invalidations.

Many feature-related files approach

So what if each page has it’s own resource? We’ll have files with small code, and we load only the code we need. A client-side resource contains the code for the features a page provides.

But there are many chances that we want to reuse our code in other pages. And I’d rather work on IE than duplicate a code. So let’s say “a client-side resource contains the code of a feature” ! We’ll have files with small code, and we’ll load only the code we need. It’s more modular and easy to maintain.

If we have to modify one of these resources, we just do it, and invalidate caches for one specific URI. Meaning good cache usage.

But if we visit for example a homepage with many client-side features, we will have to load many files. Only the code we need, yes, but with many requests.

So what’s the best approach?

Round-trip time (RTT) is known as more problematic than latency due to bandwidth limitation or too heavy files. So the problem are big amount of files and bad cache usage.

As Andrew B. King says in his book first tip is to limit number of requests.

And as Ilya Grigorik demonstrate in this post, we first have to:

  • Reduce RTT latency by using caches (and especially geolocalized cache such as Akamai).
  • Reduce number of RTT simply by reducing number of requests.

So for a good cache usage in a project that is modified frequently, we’ll choose the “Many feature-related files” approach. And for a less number of requests, we’ll choose “the unique file approach”.

Find the golden mean

If the site is not huge, and the client side scripts not frequently updated. Stop digging your head. Choose the unique file approach. It will be cached. And we’ll have only one request to load all the scripts.

But on a big site, we need some modularity. At least, we need to segment our client-side scripts in three categories :

  • A common client-side resource used by all pages. Let’s name it “internal-lib” ;
  • A few resources for very specific codes, used by only a few pages: “specific-lib” ;
  • And the external libraries or framework we use (but never modify): “external-libs”.

As we never modify the “external-libs”, the cache usage is good. And if we are using cdn and have a bit of chance, the “external-libs” may be cached even before the client visit our site. The internal-lib” is unified, used everywhere, and cached if we don’t modify it too frequently. And finally the “specific-libs” are loaded, just on need. As far as I know, this is a very good compromise.


In a classic architecture, such as Twig & Symfony2. We include all our resources in a “layout” page level, exactly to manage coherence (our golden mean) in one single place. And of course, to do these inclusions in the head of the DOM for CSS and at the end of it for our JS.

The problem is that, at this level, we may not know what specific code we have to include. For the “specific-libs”, we’ll have to determine which templates will be used before we access these templates.

That’s a bit tricky. I would say that all the very specific pages that needs specifics scripts, should use a specific “layout” page, and redo the inclusions at all. In twig, we simply use the blocks and extensions.

In your default twig:

In your specific page:


After all

How to ensure that resources are included in the right order (respecting the dependency chain)? Should it only be about “layout” page coding, and developer‘s good will?

If we don’t pay attention while the project grows and evolve, our “internal-lib” will grow up, becoming a mess, our “specific-libs” will become a transversal norm, and our “external-libs” will be loaded in bad orders. I even seen “external-libs” included multiple time with different versions for a same page!

These kind of problems may need a large refactoring and be very difficult to resolve after a year of development. So when you add a page that needs some client-side scripts, ask yourself:

  • Is that feature already given by “internal-lib” ?
  • If not, should I add it ?
  • Do I really need a new “external-lib” ?
  • Can I replace an old “external-lib” by a new one that meet old and new goals ?

Then, always call the “external-libs” first, then the “internal-lib” and finally the “specific-libs”. If you have problem with dependencies using this order, it probably means that some code in your “specific-libs” should be moved in you “internal-lib”.


Applying these practices will not ensure a high website optimization and performance, but it will contribute for sure.

  • It will allow to control browser cache, in an efficient way, by setting the cache instructions on each client-side resource.
  • It will reduce the weight of your page and number of RTT. Two very important impacts on page performance.

I just heard about new HTTP2 protocol that tend to resolve the performances problems itself. At least regarding RTT. As far as I know, if you design your website for HTTP2, you should reduce amount of data with a high granularity of resources.

In the next article, we’ll adapt these concepts and solutions to a content-centric application and more specifically to Adobe Experience Manager (AEM).

Self managed companies in Switzerland?

“Self-managed companies” or “teal organizations” are a hot topic in many circles. Especially the books “Reinventing Organisations” and “Holacracy” are among the bestsellers in that area.

We at Liip try to be somehow self-managed since quite some time, it comes quite naturally with being agile. Teams (between 5 and 20 people) can decide a lot by themselves already. But of course, there’s still a management on top, which decides about company wide things and also not so company wide things. We now started an active discussion within the company (for example with a session at the last LiipConf) about how it could work, without such a central, top-down management. We haven’t figured out the details yet, but we’re very eager to try.

But we’re also very interested to get to know people who are already doing that or also want to try it. So, please get in contact with me, if you’d like to meet.

To get an idea, what I personally mean with “self-managed company”, here are some questions. If you can answer them with yes, you’re pretty self-managed (in my opinion)

  • Does your company not have a top-down management?
  • Do you have no hierarchy and fixed roles, especially not through job titles?
  • Can people in your company decide on their own without approval from someone “higher up”? Also for investments?
  • Are there no fixed budgets defined from above/centrally?
  • Do people decide about hiring and firing?
  • Do people even decide about their salary?
  • Are you more than “just the founders”? (not sooo important, but maybe for a future growth of your company)
  • Do you have a process to solve conflicts, so that not the one with the bigger voice always wins?
  • Can anyone take responsibility where they want? Define their own roles?
  • Don’t you always try to find a consensus while not trying to please everyone?
  • Do you trust everyone in your company that they take the right decision at that current time?

One important thing in all this is, that “decide on their own” doesn’t mean, they can just do whatever they want or what feels right. There are many different ways to approach this, but the most important part in all of them is, that you have to get advice from the others before deciding something.

I’m really looking forward to the discussions

Tags: , ,

“Time for Coffee!” open sourced!

The public transport app “Time for Coffee!”, made by some Liipers, was finally published at Github under the MIT License. Furthermore the Apple Watch app for it was also released last week, just in time for the watch release in Switzerland this Friday.

Read more about it at the Time for Coffee! blog post.

Tags: , ,