Saint Nicholas in CSS

Happy Saint Nicholas Day ! And special present for all CSS geecks: CSS SantaHappy Saint Nicholas Day ! And special present for all CSS geecks: CSS Santa

Happy Saint Nicholas Day ! And special present for all CSS geeks: CSS Santa Example on jsfiddle can be found here (thanks to Piotr Przybylski)

html {
    height: 100%;
}
body {
    background-image: url('background.png');
    display: table;
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: #eee;
}
.panelWrapper {
    display: table-cell;
    vertical-align: middle;
}

.face {
    background-color: #FFC4A7;
    border-radius: 60px 60px 60px 60px;
    height: 102px;
    left: 50px;
    position: absolute;
    top: 105px;
    width: 100px;
}

.santa {
    height: 300px;
    width: 200px;
    position: relative;
    margin: 50px auto 0;
    cursor: pointer;
}

.santa .hat {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -50px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 50px 110px 50px;
    border-color: transparent transparent #a40000 transparent;
    line-height: 0px;
    _border-color: #000000 #000000 #a40000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 
}

.santa .hat:after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 40px 0 0 100px;
    border-color: transparent transparent transparent #a40000;

    -webkit-transform: rotate(15deg);
    -webkit-transform-origin: top left;

    -moz-transform: rotate(15deg);
    -moz-transform-origin: top left;

    -ms-transform: rotate(15deg);
    -ms-transform-origin: top left;

    -o-transform: rotate(15deg);
    -o-transform-origin: top left;

    transform: rotate(15deg);
    transform-origin: top left;
}

.santa .hat:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    left: 75px;
    top: 55px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
}

.santa .hatFur {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50px 50px 50px 50px;
    box-shadow: 0 6px 2px -6px #000000;
    height: 24px;
    left: 50%;
    margin: 0 0 0 -55px;
    position: absolute;
    top: 100px;
    width: 110px;
}

.santa .eyeLeft {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    content: "";
    height: 16px;
    left: 65px;
    position: absolute;
    top: 135px;
    width: 20px;
}

.santa .eyeRight {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    content: "";
    height: 16px;
    position: absolute;
    right: 65px;
    top: 135px;
    width: 20px;
}

.eyeLeft:after, .eyeRight:after {
    background-color: #000099;
    border-radius: 5px 5px 5px 5px;
    content: "";
    height: 10px;
    left: 6px;
    opacity: 0.75;
    position: absolute;
    top: 4px;
    width: 10px;
}

.santa:hover .eyeLeft:after, .santa:hover .eyeRight:after {
    opacity: 0.05;
}

.santa:hover .eyeLeft, .santa:hover .eyeRight {
    background-color: #FFB391;
    border-bottom: 1px solid #FF7D55;
    height: 14px;
}

.santa .beard_left, .santa .beard_right {
    position: absolute;
    height: 120px;
    width: 60px;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -60px;
    overflow: hidden;
}

.santa .beard_right {
    margin: 0;
}

.santa .beard_left:after {
    content: '';
    position: absolute;
    background: white;
    width: 150px;
    height: 150px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    bottom: 0px;
    left: 0;
}

.santa .beard_left:before {
    content: '';
    position: absolute;
    background-color: #FFC4A7;
    width: 73px;
    height: 50px;
    border-radius: 50%;
    top: -45px;
    left: 2px;
    z-index: 5;
}

.santa .beard_right:after {
    content: '';
    position: absolute;
    background-color: #FFC4A7;
    width: 73px;
    height: 50px;
    border-radius: 50%;
    top: -45px;
    right: 2px;
    z-index: 5;
}

.santa .beard_right:before {
    content: '';
    position: absolute;
    background: white;
    width: 150px;
    height: 150px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    bottom: 0px;
    right: 0
}
.nose {
    background-color: #FFB391;
    border: 1px solid #FFB391;
    border-radius: 10px 10px 5px 5px;
    box-shadow: 0 3px 2px #666666;
    height: 20px;
    left: 93px;
    position: absolute;
    top: 162px;
    width: 15px;
    z-index: 100;
}

.mouth {
    background-color: #FFB391;
    border-radius: 0 0 15px 15px;
    height: 10px;
    left: 87px;
    position: absolute;
    top: 200px;
    width: 30px;
}
You May Also Like

JBoss Envers and Spring transaction managers

I've stumbled upon a bug with my configuration for JBoss Envers today, despite having integration tests all over the application. I have to admit, it casted a dark shadow of doubt about the value of all the tests for a moment. I've been practicing TDD since 2005, and frankly speaking, I should have been smarter than that.

My fault was simple. I've started using Envers the right way, with exploratory tests and a prototype. Then I've deleted the prototype and created some integration tests using in-memory H2 that looked more or less like this example:

@Test
public void savingAndUpdatingPersonShouldCreateTwoHistoricalVersions() {
    //given
    Person person = createAndSavePerson();
    String oldFirstName = person.getFirstName();
    String newFirstName = oldFirstName + "NEW";

    //when
    updatePersonWithNewName(person, newFirstName);

    //then
    verifyTwoHistoricalVersionsWereSaved(oldFirstName, newFirstName);
}

private Person createAndSavePerson() {
    Transaction transaction = session.beginTransaction();
    Person person = PersonFactory.createPerson();
    session.save(person);
    transaction.commit();
    return person;
}    

private void updatePersonWithNewName(Person person, String newName) {
    Transaction transaction = session.beginTransaction();
    person.setFirstName(newName);
    session.update(person);
    transaction.commit();
}

private void verifyTwoHistoricalVersionsWereSaved(String oldFirstName, String newFirstName) {
    List<Object[]> personRevisions = getPersonRevisions();
    assertEquals(2, personRevisions.size());
    assertEquals(oldFirstName, ((Person)personRevisions.get(0)[0]).getFirstName());
    assertEquals(newFirstName, ((Person)personRevisions.get(1)[0]).getFirstName());
}

private List<Object[]> getPersonRevisions() {
    Transaction transaction = session.beginTransaction();
    AuditReader auditReader = AuditReaderFactory.get(session);
    List<Object[]> personRevisions = auditReader.createQuery()
            .forRevisionsOfEntity(Person.class, false, true)
            .getResultList();
    transaction.commit();
    return personRevisions;
}

Because Envers inserts audit data when the transaction is commited (in a new temporary session), I thought I have to create and commit the transaction manually. And that is true to some point.

My fault was that I didn't have an end-to-end integration/acceptance test, that would call to entry point of the application (in this case a service which is called by GWT via RPC), because then I'd notice, that the Spring @Transactional annotation, and calling transaction.commit() are two, very different things.

Spring @Transactional annotation will use a transaction manager configured for the application. Envers on the other hand is used by subscribing a listener to hibernate's SessionFactory like this:

<bean id="sessionFactory" class="org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean" >        
...
 <property name="eventListeners">
     <map key-type="java.lang.String" value-type="org.hibernate.event.EventListeners">
         <entry key="post-insert" value-ref="auditEventListener"/>
         <entry key="post-update" value-ref="auditEventListener"/>
         <entry key="post-delete" value-ref="auditEventListener"/>
         <entry key="pre-collection-update" value-ref="auditEventListener"/>
         <entry key="pre-collection-remove" value-ref="auditEventListener"/>
         <entry key="post-collection-recreate" value-ref="auditEventListener"/>
     </map>
 </property>
</bean>

<bean id="auditEventListener" class="org.hibernate.envers.event.AuditEventListener" />

Envers creates and collects something called AuditWorkUnits whenever you update/delete/insert audited entities, but audit tables are not populated until something calls AuditProcess.beforeCompletion, which makes sense. If you are using org.hibernate.transaction.JDBCTransaction manually, this is called on commit() when notifying all subscribed javax.transaction.Synchronization objects (and enver's AuditProcess is one of them).

The problem was, that I used a wrong transaction manager.

<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager" >
    <property name="dataSource" ref="dataSource"/>
</bean>

This transaction manager doesn't know anything about hibernate and doesn't use org.hibernate.transaction.JDBCTransaction. While Synchronization is an interface from javax.transaction package, DataSourceTransactionManager doesn't use it (maybe because of simplicity, I didn't dig deep enough in org.springframework.jdbc.datasource), and thus Envers works fine except not pushing the data to the database.

Which is the whole point of using Envers.

Use right tools for the task, they say. The whole problem is solved by using a transaction manager that is well aware of hibernate underneath.

<bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager" >
    <property name="sessionFactory" ref="sessionFactory"/>
</bean>

Lesson learned: always make sure your acceptance tests are testing the right thing. If there is a doubt about the value of your tests, you just don't have enough of them,

Journal.IO 1.3 released

AboutJust a moment ago (in February 17th) Journal.IO 1.3 has been released. Journal.IO (https://github.com/sbtourist/Journal.IO) is a lightweight, zero-dependency journal storage implementation written in Java. We use it in our project for storing appl...AboutJust a moment ago (in February 17th) Journal.IO 1.3 has been released. Journal.IO (https://github.com/sbtourist/Journal.IO) is a lightweight, zero-dependency journal storage implementation written in Java. We use it in our project for storing appl...