Vjeux

I came across a CSS problem, text-align: justify does not work with only one line.

Justify behavior

The reason is because it has been designed with paragraphs in mind. It justifies all the lines but the last one.

Solution

The solution (given by cam) is to put an extra tag at the end of the paragraph that will be big enough to create a new line. Fortunately, it is possible to do it without affecting the markup using :after. We are going to put an empty tag as big as the line.

.fulljustify {
  text-align: justify;
}
.fulljustify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

Now you can add class="fulljustify" in order to justify your one-line divs 🙂

MMO-Champion is a World of Warcraft news website. When a new patch is released, we want to show what has changed in the game (Post Example). An english summary of each spell change is hand written, but we want to show the exact tooltip changes.

Generate Tooltips

First, we use the database application to generate the tooltips in HTML form.

Tokenize

We are not going to do a full HTML diff which is really difficult. Instead, the trick is to parse the HTML and extract only text nodes. We split them by space to generate a token stream.

Diff

Paul Butler SimpleDiff algorithm is used on the two token streams to label each token with old, new or both.

Combine

We parse the HTML again. This time we pretty-print the HTML while traversing it. As we parse text nodes, we add <ins> tags where we need to. We just make sure to group contiguous insertions.

Text Diff

We would also like to get a text-based diff we can insert in a Patch Note. We combine both token streams into one.

Chestguard of Nature's Fury
Binds when equipped
Chest
1669 Armor
+341+321 Intellect
+512 Stamina
Red Socket
Socket Bonus: +10 Haste Rating
Requires Level 85
Equip: Improves critical strike rating by 205.
Equip: Increases your mastery rating by 241.221.

Chestguard of Nature's Fury Binds when equipped Chest 1669 Armor +341+321 Intellect +512 Stamina Red Socket Socket Bonus: +10 Haste Rating Requires Level 85 Equip: Improves critical strike rating by 205. Equip: Increases your mastery rating by 241.221.

However, the result isn't that readable. There is too much noise. We want to show only the information that has changed! In order to do that, we are going to keep only the lines that contain changes.

+341+321 Intellect
Red Socket
Socket Bonus: +10 Haste Rating
Equip: Increases your mastery rating by 241.221.

+341+321 Intellect Red Socket Socket Bonus: +10 Haste Rating Equip: Increases your mastery rating by 241.221.

And it works a lot better 🙂

Conclusion

This approach is working really well with the World of Warcraft tooltips. After many patches and hundreds of changes, I haven't seen any weird behavior. They were common before using this technique. The only downside: non textual changes such as icons or colors will be completly ignored.

At school we've been studying Lie Algebra and we were asked to make a 3D representation of a Lie Group. We chose to represent Julia Set in the Quaternion domain.

We were really impressed to see that it was possible to generate many different forms given such a simple equation. Feel free to share links with some cool settings in the comments 🙂

The demo has been written in WebGL using ThreeJS.

A bit of Mathematics

Les ensembles de Julia sont des fractales définies par une suite de récurrence \(z_{n+1} = z^{2}_{n} + r\). Avec \(r\) une constante. Si, pour un \(z_{0}\) fixé, \((z_{n})\) converge alors \(z_{0}\) est dans l'ensemble de Julia.

Les ensembles de Julia peuvent être représentés en 2 dimensions en prenant \(r \in \mathbb{C}\) ou alors en 4 dimensions en prenant \(r \in \mathbb{H}\). \(\mathbb{H}\) étant l'ensemble des quaternions. Les quaternions sont des nombres hypercomplexes de la forme: \[a + i \times b + j \times c + k \times d \ \ \ \ \ \ (a, b, c, d) \in \mathbb{R}\] Avec \(i\), \(j\), \(k\) des racines complexes de l'unité, c'est-à-dire: \(i^{2} = j^{2} = k^{2} = ijk = 1\).

Afin d'obtenir une représentation dans un espace à quatre dimensions on représente chaque point de cet espace par un quaternion. À \(r\) fixé on obtient l'ensemble de Julia correspondant en testant la convergence de
\((z_{n})\) pour tous les points de l'espace.

Dans notre démonstration les coefficients de la constante sont modifiables via les curseurs \(a\), \(b\), \(c\) et \(d\). Pour obtenir une représentation en 3D il est nécessaire de réaliser une coupe de l'ensemble de Julia par un hyperplan. Dans la pratique cela signifie que nous assignons une valeur constante à un même coefficient pour tous les quaternions. On assimile alors les 3 coefficients restants aux axes \(x\), \(y\) et \(z\) d'un repère 3D.

Dans notre démonstration on peut choisir quel coefficient fixer et modifier sa valeur avec le curseur Hyperplane. Une fois un coefficient fixé on fait ensuite varier \(x\), \(y\), et \(z\). Par exemple si on a fixé le coefficient de \(k\) à \(W\), la valeur initiale de la suite est donc: \(z_{0} = x + i \times y + j \times z + k \times W\).

Le point \((x, y, z)\) est alors dans l'ensemble de Julia si après un nombre fixé d'itérations la valeur de la suite n'a pas dépassé un certain seuil. Dans notre démonstration, nous avons choisi d'effectuer 10 itérations.

In my Binary Decision Diagram Library, the performance bottleneck was the uniqueness cache. By reducing the number of cache lookup, it is possible to greatly improve the performances.

Common pattern

In order to test if the key is already in the cache, the usual pattern is to use key in cache. This leads to the following code:

function cachedValue(key) {
  if (key in cache) {
    return cache[key];
  } else {
    var result;
    /* generate result */
    return cache[key] = result;
  }
}

Ideal cache lookup

The expensive operation with a cache is to traverse the data structure in order to find the position where the element should be. In the previous code, there are three independent lookups: key in cache and 2x cache[key].

In order to improve performance, the ideal would be to make that expensive lookup once, and do the test/get/set directly at that position.

function cachedValue(key) {
  var position = cache.lookup(key);
  if (cache.has(position)) {
    return cache.get(position);
  } else {
    var result;
    /* generate result */
    cache.set(position, result);
  }
}

Javascript Workaround

However, there is no API to directly manipulate the lookup and position. We have to find workarounds.

We remark that cache[key] will either return the value or undefined if not present in the cache. The belonging test no longer requires a full lookup, you only have to compare the value with undefined.

function cachedValue(key) {
  var result = cache[key];
  if (result === undefined) {
    /* generate result */
    cache[key] = result;
  }
  return result;
}

There is only one drawback: it is no longer possible to use undefined as a value in your cache.

Without temporary

If the result can be generated inline and your cache will never contains falsy values, you can use a shorter version. It should not impact performance however.

function cachedValue(key) {
  return cache[key] || (cache[key] = /* generate result */);
}

Conclusion

There are still two lookups done in case of a cache miss. If you find a way to factor the code in a way that removes it, I'm really interested in knowing 🙂

At the time of writing, the described technique is faster on all the tested browsers. As performance in browser rapidly evolve, check out the jsPerf entry before you decide to use it in your application.

Lately, I've been advocating to all my student friends to start a blog. Here's an article with the most common questions answered 🙂

What are the benefits?

Being known as an expert. The majority of my blog posts are about advanced Javascript topics. As a result, I'm being tagged as the "Javascript" guy by people that know (broad sense) me. Every time they have a question about Javascript or Web Development they go to me.

Expanding your relations. Through my activities with this blog, I had conversations with celebs such as Bjarne Stroustrup (C++), Brendan Eich (Javascript), Jeremy Ashkenas (CoffeeScript) and many other people that I didn't know before. No one in my close relations is deeply interested in what I am writing. But thanks to the internet, I can meet other people that shares the same interests.

Getting Recruited. As you become an expert in a field, people start to notice and will want you. My blog is barely known and still, I have received several job offers. However this happens at random, take it like a gift but don't expect it to happen, or it won't 🙂

Being better. I've been so much better at Javascript since I started writing about it. But maintaining this blog also helped me improve my writing skills as well as my English.

Benefits are long term. You should not start a blog and expect it to be rewarding the next week. A blog is a presence on the internet. During the first 6 months, I barely had more than 5 visitors per day, but this number slowly started growing as I wrote more articles and time passed. Now, I'm at 100 visitors a day. I'm still amazed to see that so many people come!

Who cares about my blog?

Your friends. The first thing I do when I am done writing an article is to paste the link to some of my MSN contacts that will be vaguely interested in. It is a powerful way to start a conversation with people you did not talk with for a long time. I often re-write parts of the article given the feedback I receive and it leads to great conversations.

People on the Internet. My girlfriend always says "If you thought about it, someone did it". On the same idea, I believe that the following statement is correct: "If you find something interesting, someone else does too". Here is a fact, there are over 100 visitors on my blog everyday. Google connects people with the same interests!

People that want to know about you. The extreme example is your recruiter, but it could be a co-worker or even just a friend. Your blog is the place where you can show who you are and what you are worth. It is much better than a resume as it isn't constrained by a strong standardization and a ridiculous 1-page constraint.

I don't know what to write

Projects you've done. The easiest way to start a blog is to write one article per school/personal projects you have done. Put a screenshot, a description of what it does and you are set. This way, if I want to know about you, I will quickly scroll over your blog and will see what you have done. If something interests me, I'm going to read the article more closely.

Techniques you have used. It is interesting to go over your projects and allocate one blog article for each technical problem you solved. For example, the project Guild Recruitment leaded me to write several articles such as Dynamic Query Throttling, Mysqli Wrapper, Search Optimizations. The latest eventually made me look deeper to write Sorting Table.

Follow-up a conversation. I am often debating with my friends on topics related to computer science. Those discussions are potential targets for a blog post! It is really interesting to go deeper and start writing about it. You'll get more arguments to crush your friends theories 🙂

Start writing and ideas will flow. Once you have an article written, it often generates new ideas. Now, every time I write some code, I ask myself if that would be worth blogging. If yes, I create a draft on WordPress for later. This way when I'm in the mood of writing, I have many things to write.

There are already many article on the subject, why should I write mine?

Influence people around you. I always love reading my friends blog because they are talking about subjects that I'm interested in but that I would not have willingly researched for. It helps expanding my Javascript-centric horizon.

If you write about it, it means you know it. For example I wrote an article about how to use makedepend in makefiles. It tells recruiter multiple things. I have experienced the problem of dependency management. I am confortable with Makefiles as I used them in a fancy way. This is invaluable compared to a Makefile entry in a resume.

Go deeper in the subject. I often find myself writing code pretty easily without too much thinking. Writing about this particular sexy technique in my blog more challenging. It requires me to state the exact problem I try to solve, think about alternatives, seek for already existing solutions ...

After the post has been written, I receive a lot of feedback. My friends almost always talk about how it would have been solved in their own language of predilection. They also provide more use-cases where the technique would and wouldn't work, leads to improve it ...

How long does it take?

Count one evening per post. I usually spend one full evening writing down an involved article like this one. However I think a lot about the subject in a passive way by reading related articles, thinking about it in my bed ... Articles that show off a project are much quicker to write, I'd say about 30 minutes.

Post as often as you want. When I have something I deeply want to share I write an article about it. Once I've written once, I often see myself writing some more about drafts I had. Then there is a period of silence. Overall, I'd say I write every two months, often during holidays.

How many articles. Each new article you write is not going to shadow the other but adds up. When I check my analytics, each article written slightly increases my daily viewer count. But even with one article a blog is worth it.

How do I start?

Install a WordPress. Even if you are a geek, I strongly recommend against you coding your own blog or using some nerdy blog software. I went over that myself and I found myself coding stuff every time I wanted to write an article. WordPress gives you all the tools you need to blog, and if you want to do something a bit special, chances are there's already an extension that does it.

Quickly write your first article. Don't spend so much time finding the perfect theme or installing many extensions you don't even need yet. The first article is the hardest! Write it down and send it to your friends. Listen to their feedback and instead of editing the article, write another article trying to fix those issues. Writing is hard so it'll take more than one shot to feel comfortable with it. The more you practice, the easier it will be.

Conclusion

If I managed to convince your starting a blog, please give me the link! I'd love to read about your stuff and may help you get started if you want.