Trifork Blog

Category ‘Frontend’

HTML Canvas

September 3rd, 2014 by
(http://blog.trifork.com/2014/09/03/html-canvas/)

HTML5 Canvas logo

During my holiday I start to read about the HTML5 canvas object which can be used for a variety of graphical presentations or animations. Honestly, I was quite surprised about the possibilities of the canvas element. At first I am going to give a short description about the canvas object. Which is followed by a simple canvas example and a small part about how to draw a circle. In the end a conclusion is given.

Read the rest of this entry »

Creating charts with C3.js

July 29th, 2014 by
(http://blog.trifork.com/2014/07/29/creating-charts-with-c3-js/)

Trifork LogoEverybody remembers that project where you need to display some data in a chart. When you select a library to create these charts you will obviously have a few requirements. One of the requirements will probably be that the charts must look good to impress your customer and if they don’t look the way you want, they must be at least be easy to style. But the most important requirement will be that the code to achieve your goal must be minimal and easy to understand. So one of the well known JavaScript library to create all kind of charts is D3.js. This library provided us the option to create a simple line chart with a tooltip that shows some data. So we thought that this would be a good fit for our project and started to create a chart. But wait… I see you thinking.. the title said C3.js and now you’re using D3.js?! Keep on reading to find out why! Read the rest of this entry »

Trifork NewsBites - July 2014

July 25th, 2014 by
(http://blog.trifork.com/2014/07/25/trifork-newsbites-july-2014/)

Trifork Logo

Dear reader,

The international software development conference GOTO, designed for software developers, IT architects and project managers was back on June 18th-20th at the Beurs van Berlage, Amsterdam. Trifork, GOTO Academy and Axon had each a stand there. 

On June 26th-27th Allard Buijze gave a training on the Axon framework. On July 10th we held a Docker MeetUp in our Trifork office in Amsterdam. Below we relate these events and provide further information about upcoming trainings and more.

Read the rest of this entry »

Angular Directives, a beginners guide - part 2

July 22nd, 2014 by
(http://blog.trifork.com/2014/07/22/angular-directives-a-beginners-guide-part-2/)

Angular logo

In my previous blog post (part 1) about Angular Directives, I provided you with an introduction into what Directives are and how to use them. The short recap is that you can use Directives to add markers to a DOM element and then tell the AngularJS compiler to add behavior or modify that element. In this blog post, I will discuss the two remaining directive types (class and comment).
Read the rest of this entry »

Advanced theming: dynamic SVG backgrounds with SASS, the right way!

May 14th, 2014 by
(http://blog.trifork.com/2014/05/14/advanced-theming-dynamic-svg-backgrounds-with-sass-the-right-way/)

SVG LogoTheming an application is easy, right? A solution like SASS allows you to define variables like colors and sizes in your CSS and then compile them into your theme/template. However, this doesn't work for images, especially if you want to go further than just using a transparent PNG. For a product or solution to be truly dynamic in colors and styling, you want to be able to use the same variables and apply them to the background images for your icons that you want to have the theme colors. People typically resort to writing a batch script for Photoshop, that does the work for you. Or even have your designer create the images manually. These solutions will require that you put a designer on every project which makes use of your product/solution even for minor color changes, this doesn't sound efficient does it? However, there is a more elegant solution and has something to do with SVG... Lets look at a real usecase below. Read the rest of this entry »

Angular Directives, a beginners guide - part 1

April 17th, 2014 by
(http://blog.trifork.com/2014/04/17/angular-directives-a-beginners-guide-part-1/)

What are directives?

AngularJS-largeTo start with Angular Directives we must first know what Google's Angular team defines as directives, so I copied a little piece form their website and I'll comment on that.

"At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children."

Read the rest of this entry »

Internationalization with AngularJS

April 10th, 2014 by
(http://blog.trifork.com/2014/04/10/internationalization-with-angularjs/)


AngularJS-large

Many web applications need to support multiple languages. The process of building in this support in a piece of software can be split in two parts: Getting it technically ready to support multiple languages/regions, and getting it ready for a particular language/region. The first part is called internationalization, often abbreviated to i18n (18 being the number of characters left out in the abbreviation). The second part is called localization, abbreviated as L10n. In this blog post, we'll see how we can support i18n in an AngularJS-based web application. There is an example project available containing all source code. It's a Maven project based on Tomcat 7 (Servlet API 3.0) and JDK 6, and can be downloaded here. The example builds on a an example case I created as part of a previous blog on AngularJS.

Read the rest of this entry »

Dynamic web forms with AngularJS

April 3rd, 2014 by
(http://blog.trifork.com/2014/04/03/dynamic-web-forms-with-angularjs/)


AngularJS-large

When we're building web applications containing data entry forms, it's sometimes a requirement that (part of) the form is dynamic, in the sense that the fields to be included in the form need to be determined at runtime. For instance, this may be required if application managers need to be able to add new data fields quickly through a management console, without support by a programmer.

Read the rest of this entry »

Web forms with Java: AngularJS and other approaches

March 20th, 2014 by
(http://blog.trifork.com/2014/03/20/web-forms-with-java-angularjs-and-other-approaches/)


AngularJS-large

After learning about AngularJS a couple of months ago, I started using it on new Java web projects, and that has been a great pleasure. If you haven't worked with AngularJS yet, you may be wondering what the hype is all about and whether or not it's a thing worthwhile of investing your time in. In this blog, I'd like to put some of the merits of AngularJS in the spotlights, by comparing it to some other approaches for web application programming in the Java world.

Read the rest of this entry »

Twitter Bootstrap, why you should *not* use it

June 4th, 2013 by
(http://blog.trifork.com/2013/06/04/twitter-bootstrap-why-you-should-not-use-it/)

We all know Twitter Bootstrap, a great tool for quickly building "sleek and intuitive" web applications. But why are people actually choosing to use Twitter Bootstrap and why? And more importantly, why I think you should *not* use it (in most cases)!

Disclaimer: I am a frontend developer and wrote this blog entry from my point of view, so if you are a backend developer, take this with a pinch of salt and don't be offended ;-)

You hear it all the time: "You should really use Twitter Bootstrap! It's really good and easy to use". Also, I notice that bootstrap enables backend developers to quickly set up a frontend using twitter bootstrap. And suddenly they have to admit that a little frontend development can actually be a lot of fun. However, typically things turn bad once the project progresses...

So what can bootstrap do for you and what makes that people find it useful:

  • Quickly create a layout (fixed, fluid and responsive)
  • Quickly create a form
  • Everything imediatly in the same style
  • Reasonable grid system
  • Tables
  • Buttons

And there are many other useful things that bootstrap offers and allows you to add in no time. Just dive into it, it's more than worth it...

When and what for should you use bootstrap?

  • A backend system without too much commercial purpose
  • A website without fancy design
  • Show (preliminary) functionality to a product owner during a project

So what remains and why should you *not* use bootstrap?

You have to consider that most frontend developers get their thrill from translating a spiffy design to HTML/CSS using client-side scripting when needed. They are typically good at just that thing using their own preferred tools and frameworks and typically less good at modifying existing code bases that they didn't create from scratch.

So when better not?

  • When you are just interested in the grid layout, then there are better and more resource-friendly alternatives
  • If you are only using one or two features, why not build them yourself? (why not reuse?)
  • When dealing with a design of your own, you might end up removing bootstrap specifics or trying desperately to override them

To conclude, there are defintely reasons and scenarios where Twitter Bootstrap can be handy, but make sure that you don't shoot yourself in the foot, because it might cause you more work in the long run. Especially when using bootstrap in a larger project, it might save you time in the beginning, but it might start to bother you and cost you greatly a little further down the road. In those cases, setting up your project correctly yourself from the beginning, is a more recommendable approach.