Skip to main content

smartsprite to generate sprite automatically

I am a lazy person and like to automate things that can be automated. We had all our sprites hand written earlier and the problem with that approach is that it was append only. Every time you have to add a new image the developer would add it at the end but if I asked to remove an image then they would give me a look like what the heck I am talking about, they would give weeks estimate to go and fix coordinates in each and every place those images were used. Net net this seems like something that should not be that hard to automate and thats where smartsprite came to rescue. A very very handy tool to automatically generate your sprite and biggest benefit is that its non-intrusive and you can start small and keep cleaning your old code and convert to this mode as and when you change that part of code.   This is the link to the tool http://csssprites.org/

So all you need to do is add some comments at the top of  your existing css
/** sprite: kpSmartSprite; sprite-image: url('../images/kpSmartSprite-${md5}.png'); sprite-layout: vertical; */

and then the css rule where you add image reference you have to add the comment

.t-add {
        background-image: url("../images/add.png") !important;  /** sprite-ref: kpSmartSprite;  sprite-alignment: left;  sprite-margin-bottom:6px;*/
}

So you can keep adding these tags. Now you can use an ant target to generate your sprite. The tool will generate the sprite image and will also change you css file to add the coordinates.


    <target name="sprite-images" description="Creates a sprite using smartsprite by reading smart sprite annotations">
        <taskdef resource="smartsprites.xml">
          <classpath>
            <fileset dir="${thirdParty}/tools/smartsprites-0.2.8/lib">
              <include name="*.jar" />
            </fileset>
          </classpath>
        </taskdef>
        <smartsprites rootdir="${war.path}/css"
                      documentrootdir=""
                      outputdir="${war.path}/css-sprite"
                      cssfileencoding="UTF-8"
                      cssfilesuffix=""
                      loglevel="INFO"
                      spritepngdepth="AUTO"
                      spritepngie6="false" />
               <move todir="${war.path}/css" failonerror="no">
            <fileset dir="${war.path}/css-sprite" />
        </move>
</target>

Comments

Popular posts from this blog

RabbitMQ java clients for beginners

Here is a sample of a consumer and producer example for RabbitMQ. The steps are
Download ErlangDownload Rabbit MQ ServerDownload Rabbit MQ Java client jarsCompile and run the below two class and you are done.
This sample create a Durable Exchange, Queue and a Message. You will have to start the consumer first before you start the for the first time.

For more information on AMQP, Exchanges, Queues, read this excellent tutorial
http://blogs.digitar.com/jjww/2009/01/rabbits-and-warrens/

+++++++++++++++++RabbitMQProducer.java+++++++++++++++++++++++++++
import com.rabbitmq.client.Connection; import com.rabbitmq.client.Channel; import com.rabbitmq.client.*; public class RabbitMQProducer { public static void main(String []args) throws Exception { ConnectionFactory factory = new ConnectionFactory(); factory.setUsername("guest"); factory.setPassword("guest"); factory.setVirtualHost("/"); factory.setHost("127.0.0.1"); factory.setPort(5672); Conne…

What a rocky start to labor day weekend

Woke up by earthquake at 7:00 AM in morning and then couldn't get to sleep. I took a bath, made my tea and started checking emails and saw that after last night deployment three storage node out of 100s of nodes were running into Full GC. What was special about the 3 nodes was that each one was in a different Data centre but it was named same app02.  This got me curious I asked the node to be taken out of rotation and take a heap dump.  Yesterday night a new release has happened and I had upgraded spymemcached library version as new relic now natively supports instrumentation on it so it was a suspect. And the hunch was a bullseye, the heap dump clearly showed it taking 1.3G and full GCs were taking 6 sec but not claiming anything.



I have a quartz job in each jvm that takes a thread dump every 5 minutes and saves last 300 of them, checking few of them quickly showed a common thread among all 3 data centres. It seems there was a long running job that was trying to replicate pending…

Logging to Graphite monitoring tool from java

We use Graphite as a tool for monitoring some stats and watch trends. A requirement is to monitor impact of new releases as build is deployed to app nodes to see if things like
1) Has the memcache usage increased.
2) Has the no of Java exceptions went up.
3) Is the app using more tomcat threads.
Here is a screenshot

We changed the installer to log a deploy event when a new build is deployed. I wrote a simple spring bean to log graphite events using java. Logging to graphite is easy, all you need to do is open a socket and send lines of events.
import org.slf4j.Logger;import org.slf4j.LoggerFactory; import java.io.OutputStreamWriter; import java.io.Writer; import java.net.Socket; import java.util.HashMap; import java.util.Map; public class GraphiteLogger { private static final Logger logger = LoggerFactory.getLogger(GraphiteLogger.class); private String graphiteHost; private int graphitePort; public String getGraphiteHost() { return graphiteHost; } public void setGraphite…