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 »
Theming 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 »
What are directives?
To 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."
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.
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.
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.
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)!
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
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.
This is the first entry in a new series of what we hope will become a regular appearance on our Trifork blog: “from the trenches”, with blogs that explain in a no-nonsense just-the-tech fashion how we applied certain tools, technologies, libraries and frameworks in our own projects to solve real-world challenges that we faced while building solutions for our clients. We hope that by sharing the solutions we came up with, we can provide you with some examples and ideas that you can apply to your own projects -- with the confidence of knowing that these techniques have proven themselves in real production systems.
We are also open to your suggestions on what technologies you might want us to cover. So don't be shy and just drop us a note if you have any ideas.
In this first blog I’d like to cover how we used FreeMarker to build a small library of macros that make it very easy and effort-free to work with Twitter Bootstrap-based forms in a Spring-MVC application.
TL;DR: we've built a set of FreeMarker form macros for Spring-MVC apps with a Twitter Bootstrap-based frontend that allow one-liners in your form templates to render full Bootstrap-based HTML structures for various input types that include internationalized labels and rendering of binding and validation errors while allowing passing in custom attributes and nested contents. It’s awesome.