Hacked By By XwoLfTn

Hacked By XwoLfTn

Long life for Tunisia 
long life to Palestine

./Exit

 

awesome select styling

Problem

Style <select> to look better, osm! and not like native select on given OS, basically convert this:

into this:

requirements

Solution

You can find many different approaches over the Internet how to achieve this, but most of them based on JavaScript, just few uses pure CSS, but even than some uncommon CSS tricks are used (ie. pointer-events).

I had to do the same, in project I’m working on we got a new layout design and one of the elements to style was nice looking <select> element. I have started looking for solution and after some time had a working one. The problem was it based on those uncommon tricks as pointer-events – this has very big disadvantages – doesn’t work on IE10 and below. You can try to exclude styling for <= IE10 but still you must add a lot of boilerplate to gain a bit.

Also the problem was that there were no clear option how to target only IE10 – right now there is a solution but I haven’t tested it yet.

After spending a lot of hours chasing the internet and applying any possible idea, I gave up! All of them didn’t work as I expected (especially on IE10) so it was time to figure out my own osm!™ solution!

And here you have.

The idea behind is simple – make select background transparent, hide native arrow button and move new styled icon behind it 🙂 I used FontAwesome to get nice looking arrow icon.

The Source

You can grab the source of example project here, below I am going to explain only few important points.

Select

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
}

The CSS code above remove default look&feel of <select> and add transparent background – the first step. It’s also worth notice that the width of select element must be set to 100% to fill the whole space.

Icon

.dropdown:after {
  background: none repeat scroll 0 0 #2CA7E5;
  color: #FFFFFF;

  content: "\f078";
  font-family: 'FontAwesome';
  font-size: 14px;

  padding: 8px;

  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;

  z-index: -1;
}

With this CSS snippet you can generate a nice looking arrow icon. To get icon shape I have used FontAwesome and appropriate content value, you can take a look here for possible options. Next was padding – to center the icon and fill the whole space. And final piece of puzzles: z-index – it moves the icon behind the select so it can still react on user clicks – you don’t need dirty tricks with pointer-events and so on.

Tricks

As I said I won’t use tricks – I lied 😀 It isn’t possible to not use tricks when you want to target broad scope of web browsers, especially IE10 and below. I have to add at least one uncommon CSS selector to hide arrow button on IEs:

select::-ms-expand {
  display: none;
}

The second was to polish L&F on FireFox and hide bad looking outline on options:

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

Result

Finally, that’s how it looks on different browser:

  • IE8
  • IE9
  • IE10
  • IE11
  • FireFox
  • Chrome
  • Safari

Disadvantage

This solution has one minor problem – when you will have a very long option, it will overflow the arrow icon 🙁 but you can solve it in the same way 🙂

plans

Maybe you know, maybe no – it’s about five years as I’m involved in the Apache Struts project. About two years ago I became a Struts 2 Lead – whatever it means in non-profit organisation working on an opensource project where everyone is equal 🙂 Nevertheless I like what I’m doing – code and refactor 🙂 And as there is a plenty of code in the project and most of them need to be improved – I have what to do for the next few years 😀

Recently I’ve started working on a new plugin – the MVEL plugin – which will allow to use MVEL instead of OGNL to handle expressions. In theory the task wasn’t too difficult, Struts 2 already provides many extension points where you can hook in with your code. Replacing expression engine require to implement two interfaces – very simple and straightforward.  After I did that, I have started testing many possible expression syntaxes which are already present in unit tests.

And then problems show off :/ The main problem is conversion, to give you a hint check the below expression which simple means array in both – MVEL and OGNL

{1,2,3}

but the problem is how both engines handle such statement (pseudo code):

  • MVEL:
    new Object[]{Integer, Integer, Integer}
  • OGNL:
    new ArrayList(){Integer, Integer, Integer}

As you can see the difference is slight but important – the wrapping object is totally different. And then goes conversion logic, as I wanted to get string on output, built-in conversion mechanism do this:

  • MVEL: [1]
  • OGNL: [1,2,3]

Not so good 😉 The problem is that the conversion logic is too narrowed to OGNL. After some internal brainstorming I’ve came up with a plan – to allow other expression engines to work with Struts 2, first I must decouple conversion logic and OGNL 🙂 So the plan is:

  • extract conversion mechanism to allow replacement of it (another extension point)
  • simplify current logic related to converters created by users
  • implement more common logic to allow handle wide list of results
  • implement MVEL specific conversion
  • implement MVEL plugin 🙂

As you see the plan is simple, but as it is with plans – it is good to prepare them, but to follow them is a different story 😉

Finally, I found something interesting in the latest newsletter from TED – something about attention 🙂

digging big data

This time it will be a technical post – some fresh meat from codefield (aka code battlefield) 🙂 I’m involved in a project where we are using all the fancy stuff: Scala language, SprayI/O, Apache Hadoop, Apache Pig, Apache Oozie and MongoDB of course – as you can see top notch developer tools 😀

Anyway, even working with all these bleeding edge technologies you can always discover something what needs to be improved, done better or easier. And as the most of the toolset is released as an Open Source software, you are freely allowed to dig into the source code. And having access to the source code is a big advantage as quite often what is documented doesn’t match what is released as a package 😉

For example, Apache Pig – the best way to explore what functions are already built-in is to download the source code and start crawling over it – you can discover many functions which aren’t documented on wiki, i.e. ToString function – try to find it on the list of the Built In Functions – and it’s very useful allows to format a DateTime to given format.

Another example can be the MongoLoader – function provided by Mongo Hadoop project to allow easily load data from MongoDB and use them with Pig Latin. See the example below:

users = LOAD 'mongodb://localhost/users'
    USING com.mongodb.hadoop.pig.MongoLoader('id:chararray, login:chararray)
    AS (id, login);

There are two problems with that example:

  • url mongodb://localhost/users isn’t user friendly, what if we move to a new server? we will have to change that in dozens of Pig scripts, also it’s hard to remember the url for non-technical persons
  • second it com.mongodb.hadoop.pig.MongoLoader – is it too long?

You can simple improve that with minimal effort – implement your own MongoLoader function 🙂 It isn’t so hard, mostly you will delegate all the calls to the original MongoLoader. See the example below (written in Scala):

package udf

import ...

class MyLoader(userSchema: String, idAlias: String) extends LoadFunc with LoadMetadata 
  with Logging {

  def this(userSchema: String) = this(userSchema, null)

  logger.info(s"Setting up loader with schema [$userSchema] and idAlias [$idAlias]")

  private val loader: MongoLoader = new MongoLoader(userSchema, idAlias)

  private val ConfigFile = "/my-loader.properties"

  def setLocation(location: String, job: Job) {
    val newLocation = buildMongoUrl(location)
    loader.setLocation(newLocation, job)
  }

  def buildMongoUrl(location: String): String = {
    val config = new Properties()
    val resource = getClass.getResourceAsStream(ConfigFile)
    if (resource == null) {
      throw new RuntimeException(s"$ConfigFile cannot be loaded as it doesn't exist on the classpath!")
    }
    config.load(resource)
    val mongoUrl: String = config.getProperty("mongo.url.prefix")
    val finalUrl = mongoUrl + location
    logger.info(s"Final MongoURL: [$finalUrl]")
    finalUrl
  }

  def getInputFormat: InputFormat[_, _] = {
    loader.getInputFormat
  }

  def prepareToRead(reader: RecordReader[_, _], split: PigSplit) {
    loader.prepareToRead(reader, split)
  }

  def getNext: Tuple = {
    loader.getNext
  }

  def getSchema(location: String, job: Job): ResourceSchema = {
    loader.getSchema(location, job)
  }

  def getStatistics(location: String, job: Job): ResourceStatistics = {
    loader.getStatistics(location, job)
  }

  def getPartitionKeys(location: String, job: Job): Array[String] = {
    loader.getPartitionKeys(location, job)
  }

  def setPartitionFilter(partitionFilter: Expression) {
    loader.setPartitionFilter(partitionFilter)
  }

  override def setUDFContextSignature(signature: String) {
    loader.setUDFContextSignature(signature)
  }

  override def relativeToAbsolutePath(location: String, curDir: Path): String = {
    loader.relativeToAbsolutePath(location, curDir)
  }

}

As you can see nothing to worry about – basically what I have done was to wrap the original code and add some honey on top of it, now you can use it as follow (assuming that my-loader.properties file contains: mongo.url.prefix = mongodb://localhost/)

users = LOAD 'users'
    USING udf.MyLoader('id:chararray, login:chararray)
    AS (id, login);

You can extend the idea and create dedicated functions for each collection i.e. UsersLoader, InvoicesLoader, etc. Thus allow to write Pig scripts by guys who are  Scala/Java/Python agnostic 😉 The same idea you can apply to a store functions, just to given you some direction, check out the original example:

STORE result INTO 'users' 
    USING  org.apache.pig.piggybank.storage.DBStorage('com.mysql.jdbc.Driver','jdbc:mysql://127.0.0.1/users','root','password','insert into users (id,login) values (?,?)');

And at the end a small hint how to load nested data from MongoDB:
Pig & MongoDB – How to load document nested fields with MongoLoader?

do you know scrum

Recently I have participated in a Scrum training – to be precise in the Professional Scrum Master training approved by the highest Guru 🙂 Anyway, I thought I know what the Scrum is and how to use it. I have been working with the Scrum from very beginning of my career at SoftwareMill. You can find few my posts related to the Scrum and how we changed it to fit our needs. So we are more agile these days than the Scrum company, but attending the training was kind of self-checking of my knowledge.

And what suppose to be a two days of laziness turned into a journey over known unknown land 😉

I will just mark few things that surprised me during these two days, if you want to know more, attend the training 😉

  • Requirements – don’t think about tasks, implementations, how to write given piece of code and so on. Think about client’s requirements :-). Looks easy but it’s very hard switch for us, tech geeks. When you are planning a next sprint, you must put requirements into it, not tasks.
  • The whole teams is working on one requirement at the given moment – you are the team and you must work together. That’s why you must have requirements to work on, not tasks that cannot be shared among the team.
  • Sprint Backlog is a forecast, not your commitment. You can always throw away requirements from your sprint backlog (maybe not so easily, but you can ;-))
  • Definition of Done is defined per product not per requirement. It can change over time (can be more precise with more details and so on), but it always will be related to a product.

I’m planning a short presentation about what I have learnt during that two days, to spread all these new thinkings in our company. We will see what other say 🙂

And as usual, a very short presentation from TED. Now I know how to use the Space bar 🙂

do it as want to

Why do I like working with the Apache Struts 2? Because I can simple change the framework behaviour and customise it to what I needed. And not just because you have plenty of options to modify, but especially because you can simple develop your own class which can replace version provided by the framework. Yeah, you can replace almost every framework class – Struts 2 was designed with that on mind 🙂

Recently I got involved in working on some old issue – WW-1967 Dynamic Method Invocation, validator with ActionName-aliasName-validation.xml files. The problem is related to Dynamic Method Invocation functionality and how the name of validation definition XML file is created. By default the file name will base on an action class and defined alias name and suffixed with -validation.xml, eg:

<action name="Login" class="org.demo.example.LoginAction">
    <result>/example/Login.jsp</result>
</action>

for action defined as above, the validation definition file name will be constructed as follow:

LoginAction-Login-validation.xml

There be a problem when you want to use DMI to call any public action’s method – which isn’t the best practise, though 😉 Anyway for each method the same validation file will be used, which ins’t a good idea. So, if you try to call an action like this – Login!check.action, the above file will be used to validate input as method name isn’t included in logic used to resolve file name.

How it can be solved? Quite simply, validation is provided by ValidationInterceptor which delegates execution to ActionValidatorManager to perform the validation process. But the context name is constructed by the mentioned interceptor in method:

public String getValidationContext(ActionProxy proxy)

So, to solve the problem you can extend ValidationInterceptor and override the method to provide your own context name like below:

@Override
protected String getValidationContext(ActionProxy proxy) {
    if (dmiEnabled && StringUtils.isNotEmpty(proxy.getMethod())) {
         return proxy.getActionName() + "_" + proxy.getMethod();
    }
    return super.getValidationContext(proxy);
}

After that, the file name will be created as follow:

LoginAction-Login_check-validation.xml

I’ve prepared a small demo how to do it – just check it out from GitHub.

And at the end see this talk from TED and give 10 minutes to solve all your problems 🙂

struts2 improved validators

Recently I’ve worked on how to improve built-in validators in the Apache Struts 2. The basic idea was to allow specify configuration params of the validators as OGNL expressions. Till now you could only statically define these params which was a bit suboptimal. See the example below:

<validator type="stringlength">
    <param name="fieldName">myPurchaseCode</param>
    <param name="minLength">1</param>
    <param name="maxLength">10</param>
    <message>Your purchase code needs to be between 1 to 10 characters long</message>
</validator>

As you see you can only define minLength / maxLength as a static value which sometimes isn’t enough. Quite often you would like depend on a user input or assigned privileges to the user and so on. Having option to dynamically adjust the minLength and maxLength is a nice future, though 🙂

Someone else noticed the same and registered an issue WW-2923, I’ve extended it a bit and added all the sub-tasks to handle each available validator step-by-step. I had to change not only the code, but also documentation. Maybe it’s obvious but very frequently we (developers) forget about that – and then myth like JavaDocs are useless come to light 😉

Anyway, my first thought was to implement the enhancement based on the current param names and just add logic to parse param’s value as an OGNL expression, see below:

<validator type="stringlength">
    <param name="fieldName">myPurchaseCode</param>
    <param name="minLength">${minLenghtValue}</param>
    <param name="maxLength">${maxLengthValue}</param>
    <message>Your purchase code needs to be between ${minLength} to ${maxLength} characters long</message>
</validator>

The problem with this approach is that it breaks backward compatibility, also if you want to use just static values as above, there is an additional overhead – OGNL parser will try to evaluate the expression and fallback to the original value – which is costly.

Then I simple added another set of params to allow specify only these params as an OGNL expression, so you can decide when to use the static values or when to use expressions or when to mix all of them. Thus also simplify migration of existing applications as a developer can migrate each validation when he needs that.

<field-validator type="stringlength">
    <param name="minLengthExpression">${minLengthValue}</param>
    <param name="maxLengthExpression">${maxLengthValue}</param>
    <param name="trimExpression">${trimValue}</param>
    <message>Your purchase code needs to be between ${minLength} to ${maxLength} characters long</message>
</field-validator>

If you want to know more please read the docs. You can try to play with the latest build if you want to use this future. I’m going to work on another improvement in Apache Struts 2 🙂

blooding edge

Probably the same as me you have been reading all over the Internet about all those bleeding edge technologies and was dreaming to be able put your fingers on them. They’re so awesome, with one line you can write alot, functional language will speed up your application, NoSQL will solve all the problems of relational databases – you will be a hero – your users will love you till the end 😉

The truth is, recently I’ve been working on a project which uses all those hyper-technologies like Scala language, Scalatra – a MVC framework and MongoDB as a storage engine. We used AngularJS for frontend to be even more than awesome 😉 We used sbt instead Maven to have even more fun 😉 You can find the project on the GitHub, we decided to open source it under Apache 2.0 license, so you are free to grab the code and do what ever you want with it , enjoy 🙂

You probably think that I have a great job – and you are right, I love to work with teammates from SoftwareMill. The company is great, people are brilliant 🙂 You can check my business card and you will see my job title – Creative Software Engineer – we were allowed to choose whatever title we want, but it just a title and not you 😉

Anyway, I was working for few weeks on the project and on the beginning it was so exciting, everything was new, each step was a new challenge. During the few first days I thought that my head will explode – some many informations, lots of knowledge – I felt like getting high 😀

That was the beginning, but after some time I started to be tired. It was very hard to find any reliable info over the Internet, example projects want work, quite often even could not compile :\ You can find tons of projects on the GitHub but just few of them are useful and even less will compile 😛 And was worse, Scala is still evolving, what was great and awesome feature in 2.7.0 is now deprecated in 2.9.2 and will be removed in 2.10.0 – and you can find a lot of code examples but they will work only with given Scala version. Also some features of the language are terrifying when used in wrong way – implicit is the best example here – especially when you have to add just an import to allow your code to compile. And there is more, Scalatra evolving as well, AngularJS is a least stable from version 1.0.1 – before is like walking on minefield 😛

So, when your hands get dirty, then you can really write something about those awesome technologies and allow others to learn from your mistakes. That’s why we started with the Bootstrap project, to show how to write a remarkable application with bleeding edge technologies. Maybe there are better examples, but this one is our child which was born in sweat, blood and pain 🙂

And remember: with great power comes great responsibility

devoxx 2012

It was my third Devoxx and all I can say it was the best one, but not in case of talks – they are always average at the end – but in case of socialise Wink ;) I met old friends from OSS world that I know just from mailing lists, it’s always good to meet in real, grab few beers and talk. I love the idea about traditional OSS dinner which happening each year during Devoxx – it isn’t connected with Devoxx, it’s just an external initiative of people involved in OSS. And the gran finale at Charleroi, in Taverne Sainte Barbe with teammates from SotwareMill was the best evening ever – delicious beers, huge and astonish t-bone steak and the barman – you must be there to understand Smile :)

Let’s back to Devoxx. At the first day, Wednesday, I really enjoyed Hadi Hariri’s talk – Developers – Prima Donnas of the 21st Century – it was funny, it was interesting, and all of all I must admit Hadi is right – we’re a prima donnas. If you will have a chance to see Hadi on stage, please do it and try to understand his message. That day there was also a great talk about Scala – Effective Scala by Joshua Suereth. As a new player in Scala world I was a bit scared at the beginning that I don’t get his point, but at the end I learnt alot from the talk. And I’m planning to buy his book Scala in Depth to learn even more Smile :)

The second day started with the biggest disappointment ever – talk Effective Dependency Injection by Googlers – it was like siting on a conference in early 2000s, where statements like use constructor injection and not setter injection was like word of a god, like a new brilliant idea – but not at this time. I was really, really disgusted :\ Anyway, I think there is still hope for Google, which was proved by Igor Minar and Misko Hevery’s talk about AngularJS – Re-imagining the browser with AngularJS – funny, concrete, step by step presentation how fast (with few shortcuts Wink ;) ) you can build AngularJS based modern webapp. You can feel almost the same joy by watching this movie – WebStorm 5.0 – Live Edit with Google Chrome.

The last day, Friday is always an easy day – everybody is tired (maybe because of party at Noxx Wink ;)) and it’s just a half of day, the conference ends around 1 PM. Anyway I decided to enter Adam Bien’s talk – Real World Java EE – I love to hear Adam, his jokes, his simple straightforward answers, his attitude is splendid. It was great talk at the end of Devoxx.

See you there next year!

do it yourself

Each day we have  company StandUps – Scrums. It’s a time when we can meet all together and socialize a bit, that’s way we have the fourth question and what I learnt on Friday and the fast wednesday (we moved from thursday to wednesday). And each week an other person from the team is a Scrum Master or it would better to say a StandUp Leader.

Her duties are to prepare the fourth question, call people to join BigBlueButton – our video solution and moderate the StandUp – which project should report first, which one last, who should answer the fourth question when all the projects finished and so on. Juts to organize and keep inline with timeboxing – cut down the discussions, pointing out some connection problems and so on and so on.

That’s the perfect situation, when someone volunteered to be the StandUp Leader, but sometimes there is no one :/

The solution is the Self-Organizing Scrum. The idea was proposed by our company Scrum Master Paweł some weeks ago and when first time with followed it, the whole StandUp took us 10 minutes instead of 15-18 minutes as usual 🙂 Idea is quite simple, each one reports after other, first projects, then the rest of the team. You just start saying,  who was first then he wins, next person must way. It worked perfect after first time and it works now as well – with some minor problems from time to time 😉

The only problem is the fourth question, but we can live without it 😉 And after the official part of the StandUp, right now we have also more a chit-chat to talk about nothing or discuss problems reported during StandUp. The sign to start the chit-chat is word “bakłażan” 🙂

Summer vacations are in progress and it’s a good idea to spend some time playing games, with this TED talk you will be able to increase also your life span 😉 And you can play with others to be a real super hero at https://www.superbetter.com/

Go to Top