[en] Internet Explorer, Chrome, Safari transform: skew aliasing aka jagged edges

Let’s say you have an HTML code as this one:

<section>
    <img src="gfx/slider1.jpg" alt=""/>
    <article class="container">
        Lorem ipsum dolor sit amet...
    </article>
</section>

and you skew it using CSS transforms (I’m using LESS):

section {
    position: relative;
    overflow: hidden;
    height: 740px;
    transform: skewY(-2.917deg);

    > img, > article {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    > article {
        transform: skewY(2.917deg);
    }
}

It works nicely in all modern browsers, but of course Internet Explorer must give you a headache by presenting jagged, aliased edge:

To force it to antialias the edge, just apply this little fix:

section > img {
    top: -1px;
}

and suddenly it looks like this:

Why? It seems IE antialiases only the transformed element’s edges, but does nothing for its contents. When image is moved beyond parent, skewed element — its antialiasing takes care of stuff.

If it has jagged edges in Chrome, Safari and other Webkit-based browsers, apply another fix:

section {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

[en] Get NamedQuery as string in Eclipselink

It’s nice to have all the queries in one place and @NamedQuery give you just that. But what if you need to have parametrized ORDER BY or stuff like that — NamedQueries are static and cannot be modified and ORDER can’t use a parameter.

There is no simple way to customize the NamedQuery, too. You can use setMaxResults but not „setOrder”.

My solution is to read @NamedQuery annotation’s „query” parameter and construct the query myself, adding necessary ORDER BY clause.

The code is (Eclipselink-specific):

import javax.persistence.NamedQuery;
import javax.persistence.Query;
import org.eclipse.persistence.internal.jpa.EJBQueryImpl;
import org.eclipse.persistence.queries.DatabaseQuery;
// (...)
public String getNamedQueryString(String namedQuery) {
    Query tmpQuery = entityManager.createNamedQuery(namedQuery);
    DatabaseQuery databaseQuery = ((EJBQueryImpl) tmpQuery).getDatabaseQuery();
    Class resultClass = databaseQuery.getReferenceClass();

    NamedQuery annotation = (NamedQuery) resultClass.getAnnotation(NamedQuery.class);

    // it's possible there's NamedQueries instead of single NamedQuery annotation
    if (annotation == null) {
        NamedQueries annotations = (NamedQueries) resultClass.getAnnotation(NamedQueries.class);
        for (NamedQuery nq : annotations.value()) {
            if (namedQuery.equals(nq.name())) {
                annotation = nq;
                break;
            }
        }
    }

    return annotation.query();
}
// (...)

[en] Bootstrap – accordion closes modal

Because Bootstrap events are not namespaced until they release version 3.0 (see https://github.com/twitter/bootstrap/issues/3736), they conflict with each other. It causes for instance closing modals when switching accordion tabs — they both listen to „hidden” event. A simple, global solution is not to use data-toggle=”collapse” but following code (that attaches „live”, 1.9.x jQuery style):

$(document).on('click', 'a.accordion-toggle', function(event) {
    event.preventDefault();
    var parent = $(this).parent().parent(),
        body = parent.find('.accordion-body');
        
    // hide currently shown group
    parent.parent().find('.accordion-body.collapse.in').collapse('toggle').on('hidden', function(event) {
        event.stopPropagation();
    }); 
    
    // show newly clicked group
    body.collapse('toggle').on('hidden', function(event) {
        event.stopPropagation();
    });
});