Compress Javascript/CSS to keep web pages lightweight, and improve its performance

Improving the design of a page or a web application usually yields the biggest savings and that should always be a primary strategy. There are many secondary strategies for improving performance such as minification of the code, HTTP compression, using CSS sprites, etc.

The importance of keeping web pages as lightweight as possible can be understood by the fact that about 20% of all page views can be done with an empty cache using these techniques! 40% to 60% of web users could have an empty cache experience.

In terms of code minification, one of the the most widely used tools is to minify JavaScript code. Most of the file size reduction is achieved by removing comments and extra whitespace characters that are not needed by web browsers or visitors. It can also be useful measure in order to make it obfuscate(unclear) javascript code from external users.

The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol).

There are many sites available for compressing Javascript or JS Code online like refresh-sf.com/yui/jscompress.com. You can either upload your js file or simply copy code.

There are many other sites, just google ‘compress javascript code’. Likewise, you can compress your CSS files too; google ‘compress css’.

Receive Android notifications in your browser !!!

It’s established that Android is the world’s most popular mobile platform used by hundreds of millions of mobile devices in more than 190 countries around the world. I use it too…

Recently, i came across this wonderful app/extension from Google Chrome. Now, you can receive notifications of your Android phone on your Browser(Google Chrome)! How cool is that!!

In order to use this cool app you need to download and install an app for your Android phone or tablet. After installing the app on the phone, it randomly generates a code. Enter the code in the settings of this Chrome extension to start receiving notifications.

If you are interested in getting notifications on Desktop, then visit following link:

https://play.google.com/store/apps/details?id=org.hcilab.projects.notification

Tridiv: an amazing web-based CSS 3D editor

Coder Julian Garnier has made waves in the development community with the release of his extraordinary web-based 3D editor, Tridiv.

The editor provides a traditional four-pane interface that gives a view from each plane, as well as a preview pane showing the final object. It’s possible to create extremely sophisticated 3D objects, as demonstrated by this impressive example. HTML and CSS is generated on the fly and can be edited within Tridiv or over on CodePen.

Garnier suggests that a good use-case for Tridiv is in creating logo animations similar to the one he uses on the landing page: “No JavaScript is needed, and it runs pretty smoothly on iOS devices (I haven’t tested other mobile platforms yet), which is a scenario in which JavaScript will fail most of the time. So I think it can be really be useful for logos and simple UI elements, where using JavaScript is probably not worth it.”

Trivdiv is free to use and available now.

How do I align text and image with CSS?

I had a problem while aligning some text before an image.

Image

My Code:

<div align=’center’>
<span style=”vertical-align:middle”>Thank you for contacting us! We’ll get in touch with you shortly.</span>
<img src=”A.jpg” alt=”Thank You” style=”width: 60px; height: 60px; ” />
</div>

Tried many alterations and finally came to a solution!

Actually, in this case, i was applying vertical align to the text since it’s all in one line, it’s really the image I want aligned, not the text.

So, final code:

<div align=”center”>
<span>Thank you for contacting us! We’ll get in touch with you shortly.</span>
<img src=”A.jpg” alt=”Thank You” style=”width: 60px; height: 60px; vertical-align: middle;” />
</div>

Checked on IE 7,8 and FF 3, and it’s working great 🙂

Image