jQuery Bacon

Everything is new in October: A lot has changed on our website... For example on the team page. It's not just the employee statements that are new. But also their design. We worked with Bacon to achieve this.

Reading duration: approx. 1 Minutes

What is bacon?

No, we're not talking about bacon. It's the jQuery plugin Bacon. jQuery is a well-known JavaScript framework for which there are lots of plugins - in addition to Bacon, for example, there is also TypeButter. Both plugins do not deal with food, but with the styling of texts. In particular, Bacon offers the option of aligning texts along any shape.

Why Bacon?

For the employee statements on the team page, an italic text block was desired as a shape - but please without italics. This is only possible with CSS, the display language for websites, in browsers that have implemented the new CSS standards. Not too many of them (yet). With Bacon, however, the lines could be positioned in italics, but the text could not be positioned in italics - and that in all browsers with JavaScript.

What adjustments were made?

The functionality of the Straight Lines plugin had to be extended so that both the left and right sides of the text block are displayed in italics - without the extension, the text can only be indented on one side. In addition, the RegExp had to be changed so that Bacon does not interpret umlauts as spaces and creates unwanted breaks in the middle of the word.

What were the problems? And how were they solved?

The biggest problem was the short documentation, which only contained three examples of the individual display functions - without going into the individual setting options. A closer look at the source code provided insight and helped to understand and customize the functionality of Bacon. However, the adjustments made could not be created as a separate plugin that would add the desired functionalities to Bacon. Therefore, the changes were made directly in the source code of the plugin.

The result...

...can be viewed on our team page!

Share:

More articles

Keep calm and commit often.
Tobias Nicolay , Entwicklung at punkt.de
Working at punkt.de