02 Mar 2017
A close look at webpack loaders.
Non running tests are a huge threat to any software project.
Sometimes you are resting assured thinking the tests will catch bugs before they reach production.
But sometimes, you discover your tests are not actually running!
Here are 3 common things that might cause your build to skip tests.
Unidirectional data flow has many benefits. I am sure you already heard about them.
Here is a way you can start implementing it in a couple of minutes!
No new library, no new learning curve..
I love metalsmith. Since I transitioned to it I write more on my blog.
The only thing that annoyed me is that it became a bit slow.
I found myself waiting several seconds between changes.
So yesterday I decided to do something about it and I reached to a 500ms build on change.
I'd like to share with you what I did.
In the last few months I have been taking part in a big Java project.
After several years in the nodejs community, which I love, I find myself obsessing over having the same tools I had in nodejs for my java environment.
If there's one thing I really like in
nodejs is how it loads dependencies.
Each dependency is loaded relatively from the current file or from a known path (usually
Unfortunately in java things are much messier. Today I will show how you can create a folder named
java_modules that acts similarly to
Previously I wrote about how to setup a static website with metalsmith.
Today, I will describe how you can add dynamic and persistent content to your static website using firebase
Recently, everywhere I look, I see Typescript.
The web is full of tutorials about the Typescript language and discussion around it.
Java is moving towards the micro lib world.
For some unknown reason it is called
I guess it is because Java can only have frameworks and no libraries..
The web is full with info about blogs about it and new micro libraries (frameworks!):
Over the years I have maintained a technical blog on blogger.
However, blogger's interface is not so friendly for technical writing.
5 lines of code in angular written once can affect your entire project by auto releasing resources and cancel delayed action after navigating away from the page. in this post i will explore and explain the problem and its solutions.
If there's anything I hate in the programming world, is when something that worked well suddenly breaks.
Unfortunately, today it happens a lot since everything is a "service" that is upgraded under your feet.
My build process broke so many times, I lost count.
Even if you keep it simple like
every project i've been in so far had the same stupid bug with
at the beginning someone got a string instead of an object and they used
JSON.parse to convert it to an object.
then after a while, someone fixed it upstream, and now
JSON.parse is getting an object and fails with a very cryptic error message.
before we reach the final part of hooking it all together there are 2 seo things we should do.
the first one is to add
index.html to your path.
it will make your life easier handling redirects and default index page etc..
it is not a requirement, but i recommend it and i assume you applied this in the rest of the post.
plus - developers are not usually aware of this, but not specifying index.html will cause problems when deadling with iframes.
i am not going to dwell on this here, but only mention that i had 2 iframes in my application that did not work until i added
index.html to the src attribute.
so now that we know how to generate a prerendered version of a page using phantomjs
all we need to is to identify a crawler and redirect them to the prerendered version.
turns out this is the tricky part..
phantomjs is a browser that runs in the memory (no graphics required).
you install it by running
npm -g install phantomjs and then verify it is available by running
when i was asked about how to make an angular site seo friendly, i was shocked to discover that
where values should be, making your search result display as
Recently I started using node and with it yo, grunt and bower. It is nice to get a quick kickstart. But now when I have to add/modify something in the build process, I get stumped a lot.
NodeJS is great but it lacks settings/configuration mechanisms.
Actually - I understand why it lacks it - configuration nowadays is written in JSON anyway.. so in node you just import it..
But there are some features you still want/need that do not exist yet.
Running Play!Framework (I am using 2.0.4) with Sass plugin throws a
Play!Framework 1.0 had a nasty configuration mechanism.
To make a long story short - it was a properties file.
Play!Framework 2.0 came out, and even though the configuration section
got some big improvements, there are still things that annoy me.
In this post I will show you what annoys me and how to resolve it.
This is another post in our "Selenium Extension Library" serie. In this post we will fix our IFrame support so that we support IFrames that are in other IFrames. Previously we:
So far we have written a nifty selenium extension library that allows you to treat the pages as if they were built by components rather than the primitive WebElement.
This brought your page design and development closer to your Selenium test code.
It also allows you a high abstraction and re-usability of your test code which is always good.
My last post was about how we can easily correct the faults in Selenium's Page Model
by constructing smarter components that can expose better API than WebElement.
We got rid of the impotency of the WebElement class by writing our own Decorator and Locator
and thus allowing ourselves to define Components that wrap WebElement in the most natural way you can think.
As an example, we showed a better way to implement a Select rather than exposing some utility function as proposed by Selenium.
Recently I am occupied by automations.
I want to upgrade and troubleshoot as automatically as possible.
If my backend needs a reboot for some odd reason, I want it to be available from some CI tool.
previously we saw some limitations Selenium has.
One of those points was that we are bound to "WebElement" and we cannot define and use "complex" like "select" and invoke "getOptions" on it.
Today, our wishes will become true.
We will need a page to test on.
I chose the this page.
So lets add a select box with id "testme" and 2 options
As AngularJS becomes more popular, the demand for features increases immensely. While chart libraries and effects support take shape, quick fix solutions are useful.
Recently I wanted to do a zigzag header/footer since it is so modern.
I decided to implement it with pure CSS.
I quickly found out a solution over at stackoverflow.
However that solution was only for zigzag facing down.
I decided to enhance the solution, implement it as a mixin in SCSS,
and get the color as parameter.
So far we have a table where we can select the columns, search the content and pagination where we select the page size.
Believe it or not, but the entire code (HTML+CSS+JS) is no longer than 200 lines - without using plugins!
So far we have pagination, and the ability to select the table headers.
We can also change the page size.
Today, we will add "search" to the table.
So far we implemented everything on the client side - which means we get all the data and we manipulate it.
When dealing with a lot of data, you will prefer to move this to the server side - just like the pagination.
In the previous posts we implemented a simple paging for a table
using AngularJS directive and filter.
In this post, we will add a feature that enables us to choose which
columns we show.
The template we are using ( See first post) already places the available headers on the scope.
This is the second part of a serie about AngularJS super table directives
where we add "paging" and "search" and "sort" to a table in a highly
reusable, customizable way.
So far we have a directive that adds "prev" and "next" buttons.
This directive handles disable/enable on the button.
In this post and the next one I will show you how to write
a directive that adds paging to your table using AngularJS.
Thanks to AngularJS great structure, all code is reusable and activated
as easily as adding a class!
AngularJS is GREAT! you should neglect whatever framework you are using right now, and switch to AngularJS immediately!
For a while now I've been trying to figure out an exception I got using EBean and Play!Framework.
I know what OptimisticLockException, and I know why it usually happens, but nothing matched my scenario.
Today I had an enlightenment and I managed to resolve the exception. Thought I'd share.
In this post I will talk about an annoying limitation Selenium presents, and in the next posts I will show how to enhance Selenium to support my wish list.
Your first step would be to include the JS file and then add dependency on cookie module.
So it is late at night, and I am working over the weekend again..
Creating a OneToOne relationship with EBean and exporting schema to create schema upgrade script
when all of a sudden, I get an exception I have never seen before.
Since it took me a couple of minutes to figure it out - maybe too late at night? - I decided to post
the problem and the solution.
A long time ago I wrote a post about how to remove background from images using 2 simple commands with imagemagick.
Recently, I acquired a new computer, and I had to download imagemagick again.
Obviously, I went to my blog to remember the commands I used, and I copy-pasted them, only to discover they do not work!
If you have a lot of static files (images, JS, css) in your WAR,
Or maybe you have static files that are shared between different projects
you might want to pack those resources into a JAR and serve them from there.
Recently I added spring MVC to an existing project using Jetty.
Like all projects, I wanted this one to support DEV mode and PROD mode.
It is a Spring best practice to keep 2 context files (at least).
One file for Spring MVC controllers and stuff,
and the other for beans that can be used outside Spring MVC and reusable everywhere.
Last time I wrote about how to setup a Maven Project with SLF4J using Logback. In this post I will explain how to do the same for Play!Framework 2.0.
In a previous post Being Your Own Rest Client
I explained how REST and API are 2 different things
and using REST API from your front-end is not really recommended
I know that CORS is already here and this is the way to go,
but I find something so appealing in postMessage that I just can't let it go.
This seems very powerful to me.
Using postMessage also forces the API to be in a DOM environment.
I wonder which cool usages this will bring with it.
I recently started migrating my projects to SLF4J.
SLF4J is a single API for all logger implementations.
There are at least 3 implementations I know about:
In my previous post I talked about HTML5 - cross domain messaging with postMessage. I showed how to use a JQuery plugin written by Ben Alman that wraps this method and falls back on hash tags
in the URL for older browsers.
In this post I will talk about how to improve the usage in this plugin to support multiple messages
from different origins.
passing messages across domains.
Now it is easy to send and receive messages to and from an
and define a messages whitelist keeping your frame safe from evil messages.
REST and API are two words that got stuck together.
Using REST between your client and server is one things.
Exposing an API - be it REST or not - is a different thing.
Thinking these are the same thing is a mistake I see a lot lately.
Every now and then you get to show HTML in a textarea.
A common usage for this would be to copy some HTML code you should embed in your site
I recommend Sublime Text Editor.
It has some really nice and strong features, and it has a lot of extensions.
Extensions in Sublime is called a "package" I think... but I will call it "extension".
You'll just need to cope with that.
I just migrated from Java+Play1.0 to Java+Play2.0 and the templates are the hardest part so far, and the best way I found to implement a base template (for title, head etc..) is by using the Http.Context. There is a very nice syntax you can achieve with tags.
Even though I don't support working from the IDE, I have to give support to developers that do.
For example, when I assimilate Maven into the project, I must make sure all workspaces adjust accordingly.
Even though Maven has support for ".project" file auto-generation, there are still so many problems along the way that I have to sit down with each and help resolve all the issues.
In the last project, I assimilated Maven into a GWT project.
This project has dependencies of GWT module type.
These dependencies are simple jars, however, GWT compiler needs their sources in order to use them later on.
All in all I came across 7 different problems. I will show you how I resolved 4 problems
The other problems are related to GWT not synchronizing with Maven.
It is important to note, I did not come across any problems while working with Intellij. Intellij's approach is to enable console commands from the IDE, while Eclipse's approach is to hide Maven in the background. This is the main reason why Intellij introduces less problems.
I found 2 reasons that cause this error in Eclipse.
I defined a custom local repository for Maven, but eclipse simply ignored it.
You can define local repository location easily by modifying
This resulted in a strange behavior. The commands were successful when running from command line but failed on missing artifacts from Eclipse.
Eclipse complained about missing artifacts, but when I check, I saw they were there.
I recently joined a Play!Framework 2.X project.
After 2 years developing with Play!Framework 1.X, it is certainly a big difference.
One of the things I miss most is the nice migrate module.
2.x has something called evolutions, which might be as powerful, but I really didn't like it
So I decided to write my own simple migrate module.
Since I didn't have the motivation to learn how to write a module for Play 2, I decided to implement it with a simple Shell script.
When I followed tutorials and guides for using Maven Jetty Plugin
I kept seeing the same instructions saying:
Sublime Text Editor is a great new text editor.
Its motto is "The Text Editor You'll Fall In Love With" and indeed I did.
I have been a notepad++ user for a long time, but I think I will make the switch.
I find it so useful, I am even writing this very post in sublime.
Later I will copy-paste the content to Blogger.
Wouldn't it be great to have an add-on to sublime though that would work with Blogger?
try running the following query on a MYSQL instance running on windows
So I am writing an application in Play 1.2.1
And I want to use the cool migrate module. This means I need to start writing SQL now.
And I am bad at it.. Sometimes I forget to put "OneToOne" and it takes me a while to see it
I found it useful to tell hibernate to export the DB scheme, thus quickly finding out the problems.
For this post I created the following models
I like Intellij's "live templates" feature and I try to use it as much as possible.
Here some live templates I just can't do without.
Selenium is an automation for GUI testing for Web Applications.
Once you run the automation, a browser popup up, and you will see user action happen on its screen such as :
Today I added "minHeight" feature a JQuery plugin a became quite fond of.. This plugin is called Tiny Scrollbar, and for this post you will need to have a look at the source, as I am going to modify it just a bit, while adding a powerful feature.
As you probably know, if you want to make a sexy button, you need to implement it with a link.
I recently upgraded to play 1.2.1.
As I was running the tests, I got weird exceptions. That contained strings like :
Finally, one of my mysteries is resolved.
As I was looking at my blog's search keys that got people here, I noticed a weird one
I recently learned how to write to a file in Python, and among it how to use Object Serialization library called "pickle".
I just discovered something. I have code with @OneToOne mapped to the DB.
I enabled my apache with SSL recently.. Had to change many files.
And once I managed to get SSL working, I noticed my PHP configuration was messed up..
A while ago I had to find a certain date in the database, but the date column was defined as LONG.
I discovered you can easily turn a LONG to a date, using the following syntax :
So I got a project while back that invoked SOAP messages, and I immediately thought about AXIS.
I used AXIS a long time ago.
This time around I decided to use MAVEN to build the project, and as I searched for axis plugins for maven, I was surprised to know I did the wrong search.
I just downloaded nginx for a bug/feature to simulate the production environment, and I immediately got :
I have worked with hibernate now for 6 years. and yet..
I always forget how to quickly set up log4j in my maven project, even though it is really easy.
On my previous post I introduce some advanced things about generics, when I discovered I forgot a very important feature.
I am living on the edge, working with rails 2.3.4.. As I am moving to production, I decided to integrate with "exception_notification" gem. (or plugin?) , and that's after looking at Ryan's RailsCasts that I love.
Some stuff I picked up about rails that I wanted to share
Last time I explained how I got my Apache to forward calls to the SVN.
It was pretty hard due to lack of documentation.
So I am working on a small project to exercise my new Rails brain muscles. And just as I start to feel good, I run into a problem.
OK. So I went cover to cover for the second time over the agile web development with rails
As I am going over the rails book - I reached the I18N section.
This section required me to upgrade from 2.0.2 to 2.2 or above.
I upgraded to 2.3.4 - while the book uses version 2.3.4.
final is a very intuitive keyword, and even though I use it a lot, I never really took the time to ponder about it. Today is a good day for pondering.. .
In a previous entry I explained how I always get asked the same SQL questions in interviews. Lo and behold, I am asked the very same questions in an interview I had just the other day.
What I wrote here - you won't find in the links below, but if you are looking for tutorials try these cool articles I found
In Java/Tomcat I have a web.xml to define a "welcome-page" which usually points to some index.jsp. This means that if my root URL is http://www.mograbi.co.il/guy_mograbi it will show the page http://www.mograbi.co.il/guy_mograbi/index.jsp .