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

Post a Comment

Popular posts from this blog

Killing a particular Tomcat thread

Update: This JSP does not work on a thread that is inside some native code.  On many occasions I had a thread stuck in JNI code and it wont work. Also in some cases thread.stop can cause jvm to hang. According to javadocs " This method is inherently unsafe. Stopping a thread with Thread.stop causes it to unlock all of the monitors that it has locked". I have used it only in some rare occasions where I wanted to avoid a system shutdown and in some cases we ended up doing system shutdown as jvm was hung so I had a 70-80% success with it.   -------------------------------------------------------------------------------------------------------------------------- We had an interesting requirement. A tomcat thread that was spawned from an ExecutorService ThreadPool had gone Rogue and was causing lots of disk churning issues. We cant bring down the production server as that would involve downtime. Killing this thread was harmless but how to kill it, t
6 comments
Read more

Adding Jitter to cache layer

Thundering herd is an issue common to webapp that rely on heavy caching where if lots of items expire at the same time due to a server restart or temporal event, then suddenly lots of calls will go to database at same time. This can even bring down the database in extreme cases. I wont go into much detail but the app need to do two things solve this issue. 1) Add consistent hashing to cache layer : This way when a memcache server is added/removed from the pool, entire cache is not invalidated.  We use memcahe from both python and Java layer and I still have to find a consistent caching solution that is portable across both languages. hash_ring and spymemcached both use different points for server so need to read/test more. 2) Add a jitter to cache or randomise the expiry time: We expire long term cache  records every 8 hours after that key was added and short term cache expiry is 2 hours. As our customers usually comes to work in morning and access the cloud file server it can happe
Post a Comment
Read more

Preparing for an interview after being employed 11 years at a startup

I would say I didn't prepared a hell lot but  I did 2 hours in night every day and every weekend around 8 hours for 2-3 months. I did 20-30 leetcode medium problems from this list https://leetcode.com/explore/interview/card/top-interview-questions-medium/.  I watched the first 12 videos of Lecture Videos | Introduction to Algorithms | Electrical Engineering and Computer Science | MIT OpenCourseWare I did this course https://www.educative.io/courses/grokking-the-system-design-interview I researched on topics from https://www.educative.io/courses/java-multithreading-for-senior-engineering-interviews and leetcode had around 10 multithreading questions so I did those I watched some 10-20 videos from this channel https://www.youtube.com/channel/UCn1XnDWhsLS5URXTi5wtFTA 
Post a Comment
Read more