Sergio Leal

Update in Weather Widget Project

Tue, 02 Feb 2016 00:00:00 +0000

I just updated my angularJS Weather Widget component that you can install from bower as a standalone component in your AngularJS app.

Feel free to fork it and also you can use a full demo with the main features.

Watch / Download project on Github

Mixins in SASS

Wed, 09 Sep 2015 00:00:00 +0000

Sass is a great technology that allows us to handle our style files by adding features like variables, nesting, mixins, inheritance…… Basically is like “programming” your css.

The purpose of this post is not to explain how to use and install Sass; If you don’t have any previous experience with Sass, you may want to have a look at the official webpage.

To help me with the preprocessing, I have used a brilliant tool called Scout, very simple to use, to install and to configure.

Mixins is basically a way to refactor and to re-use parts of the code that we will called from different places; it has basically the look of a function. We can even pass arguments.

Let’s imagine we have declared a couple of buttons and we have used some Sass to define their look.

//Style for the main button
.main-button {
background-color: $main-button-color;
width:            $width-all-buttons;
padding:          $padding-all-buttons;
}

//Style for the regular button
.regular-button {
background-color: $regular-button-color;
width:            $width-all-buttons;
padding:          $padding-all-buttons;
}

I won’t add all the code here, you can download it on my Github account using the link at the bottom of the post.

Here we have just defined the width, padding and background color of our two buttons. Note that both width and padding are exactly the same in this example, the buttons only differentiate in the background color.

So, let’s use mixins to declare our ‘function’ and also pass it an argument to pass for the background color (which is the only element that is different in each case).

To create a mixin, we just need to add the special element @mixin, name the mixin and add (optionally) some arguments. Inside of the mixin we will define what this ‘function’ will do:

@mixin all-buttons($button-background-color) {
background-color: $button-background-color;
width:            $width-all-buttons;
padding:          $padding-all-buttons;
}

That’s it, we only need to call this mixin from each button with the @include element, and also pass the parameter to define the color of each background:

.main-button {
@include all-buttons($main-button-color);
}

.regular-button {
@include all-buttons($regular-button-color);
}

As we can see, the refactor leaves our scss file cleaner and easier to use and understand. Also, in the final css file we can check that both before and after treatment gives exactly the same result.

.main-button {
 background-color: #81c3e5;
 width: 250px;
 padding: 5px 5px 5px 5px;
}

.regular-button {
 background-color: #47c333;
 width: 250px;
 padding: 5px 5px 5px 5px;
}

Feel free to fork the sample and play with it to understand how it works and also to try many other capabilities that are not included in this post.

Watch / Download example on Github
Watch how to setup Scout

Computing Industrialization?

Tue, 12 May 2015 09:25:41 +0000

Last week I was discussing with a friend about the technologies to use in our next project. We were arguing about the features, performances, pros and cons of Thymeleaf, JSP’s or JSF, among others.

At some point of the discussion, an idea came up, it was about time computing industry actually get industrialized for good, letting a few companies to decide the destiny and future of the technology, cutting the freedom of developing new ways of doing things but allowing standards to settle and grow.

Java’s universe has been expanding since a long time now, and now it seems like that universe is converging again.

Today for example, JSF is a technology used by thousands of companies around the world, is relatively mature, and has many other projects attached to it that also evolves really fast, such as PrimeFaces or RichFaces. But who can guarantee the future of JSF in the future?

And when I say future, I only talk about 3-5 years. Java has already released a spec to eventually adopt MVC as a standard pattern. Someone may think this move would make JSF to eventually die in the mid-future. In Java, there are several companies that vote each spec of the language, companies like Hewlett-Packard, IBM, RedHat or Oracle. In this case, my friend was convinced that the way to go should be to ‘shutdown’ technologies like Spring or Hibernate, and let those companies to decide the future of java. In this case, it would assure the ‘industrialization’ of the technology since we will always know at any given time what the present and future of the technology is.

In the other hand, at least in the java world, is a fact that technologies like Hibernate or Spring have been moving faster and better than java itself, creating better projects and products, that later java has been taking into account and adopted.

Also .Net core has been released as open source last November ‘14, so even in Redmond’s company values the opportunity given by the fact that a whole community can operate and expand .Net universe and allow others to develop new ideas.

In my opinion, I think Java won’t quit this idea anytime soon, and projects will continue growing and/or dying, and from that evolution java will improved in following releases, and so will .Net. But the task of deciding which technologies to use in projects that need a certain evolution in time is becoming more and more difficult if this expansion never ends.

Static Resources Handling in Spring 4.1

Sat, 25 Apr 2015 00:00:00 +0000

Not long time ago I faced the need of handling static resources with Spring, and I came up with this presentation from Spring Framework committers Brian Clozel and Rossen Stoyanchev.

In the video Brian and Rossen explain how they have developed a new way of handling this type of files and propose from version 4.1 of Spring a very easy and simple way of implement this idea.

In the presentation they explain how they used this in a project called Sagan, which it turns out to be the new Spring’s home page.

Also in this presentation they try to explain how to use this new feature by referring to a much more simple project, based in two parts, a client part, where they handle all the js,css and other static resources, and a server side, where they implement Spring’s part.

I wanted to go one more step in terms of simplifying this demonstration and I’ve created a little boilerplate project with Spring MVC, Spring Boot and a jsp that uses bootstrap and jquery, and in the Spring’s side I use this new implementation to handle my static resources.

There are basically two main parts that we have to take into account in the project.

In the jsp presentation, I handle my resources by using a jstl core tag, for Spring to notice and be aware of them.

<head>
   <link href="<c:url value="resources/css/bootstrap.min.css"/>" rel="stylesheet">
   <script type="text/javascript" src="<c:url value="resources/js/jquery-2.1.3.min.js"/>"></script>
</head>

In the server side, when we configure our files, we extend the WebMvcConfigurerAdapter and we override the addResourceHandlers method to basically tell Spring where to find our resources, how much time we want the resources to be cached in the client and which type of resolvers and transformers we may want to use.

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
   registry.addResourceHandler("/resources/**")
           .addResourceLocations("/resources/")
           .setCachePeriod(10)
           .resourceChain(true)
           .addResolver(new VersionResourceResolver());
}

As of version 4.1.6 of Spring, several things have changed and I have noticed that even classes that I have used in version 4.1.1 don’t exist anymore in the current version, so I have the feeling maybe more things will change in the future about this, but there are many great features in this new part of Spring, having even the possibility of versioning our resources (maybe in another post) and control when and how we want our clients to refresh their versions of our resources.

Again, I encourage you to watch Brian & Rossen’s presentation, where they explain this concept much better than I do.

Watch / Download this demo in Github

What do we have in Java 8 (Part 1)

Sun, 01 Feb 2015 09:25:41 +0000

Stream API

A Stream in the new Java 8 is a typed interface, where we can use a Stream of T elements, being T an integer, a String, an Employer object, etc.

With Stream we can handle data the same way we would work in a Big Data environment, applying map-filter-reduce operations, for example.

But aware you must! a Stream may look like a Collection at first sight, but it is NOT a collection. I repeat. It is not a collection. Collections and Streams work in a total different way. In fact, a Stream object does not store any info, unlike a Collection.

List<String> employees = Arrays
                .asList( "John \"Hannibal\" Smith ", 
                         "Templeton Peck", 
                         " H.M. \"Howling Mad\" Murdock", 
                         "\"Bad Attitude\", Baracus " ); 

//We want all items that start with T 
employees 
   .stream() 
   .filter(s -> s.startsWith("T")) 
   .forEach(e -> System.out.println(e)); 

//But at the end, the employees list remains intact 
System.out.println(employees.size());

If we execute this code, we would get the following console output.

Templeton Peck

4

One of the most interesting features of this Stream interface is the fact that it will work in parallel, meaning, will use all processors we may have in our machine, avoiding the programmer to handle this work for him, in a total transparent way.

Filtering

What we have done in the last piece of code was a nice filter. Filtering data with Streams is fairly simple. In the following example, we want to get all the employees that contains the word 'Attitude'

Stream streamEmployees = listEmployees.stream();

Stream  employeesFiltered = streamEmployees.filter(s -> s.contains("Attitude"));

employeesFiltered.forEach(s -> System.out.println(s));

In this case we would get what we were searching for:

"Bad Attitude", Baracus

There is something very important to remember when we work with Streams. Once we have used a Stream, it cannot be reused, or we will have a nice exception in our console. Hence, if we try to apply the forEach method again:

employeesFiltered.forEach(s -> System.out.println(s));

We will get this message in our console:

Exception in thread "main" java.lang.IllegalStateException: stream has already been operated upon or closed

at java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:229)

at java.util.stream.ReferencePipeline.forEach(ReferencePipeline.java:418)

at com.sergiolealdev.java8.streams.Main.main(Main.java:33)

This is it for the first part of the new features in Java8. New posts arriving soon!!

</a> Watch/Download this code in Github