Tag Archives: HTML

How to execute JavaScript after inserting into element.innerHTML automatically

Here is a scenario:

  1. you have some software/component that inserts partial HTML into page using JavaScript element.innerHTML function;
  2. you can insert any HTML tags including <script>;
  3. you can not call any JS function (software/component does not have such functionality), and inserted script using innerHTML is not executed automatically.

After some lost time trying to come up with the solution, I found the following trick using image tag and onload attribute. Again if you try to use script tag, it will not work:
<script type="text/javascript">alert('testing')</script>
However code with image trick will execute JavaScript automatically:
<img src="/images/1x1-transparent.png" onload="alert('testing');this.parentNode.removeChild(this);" />

Note that removeChild, will remove just inserted image, so your HTML code stays unaffected.


CSS first-letter problem with display:inline

According to w3.org first-letter pseudo class works only with block level elements. Here is a paragraph from w3:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

Code with label that works across all browsers:
label:first-letter {text-decoration:underline}

Note, that there should be a space character between first-letter and curly bracket. Otherwise it will not work in IE6. So if you want to punish IE (or your users), use:

Things that will make your website much faster

What will make my website faster? How to optimize page load time? How to make web site appear to load faster for end user?

Updated Feb 9, 2011.

This is excerpt from article: How big HTML images / CSS / JS / png / etc. should be to fit network packet (MTU) efficiently

List of things that will make your website much faster:

  • Server must support Keep-Alive. Otherwise change server / host / hosting company / etc. Do it NOW!
  • Reduce HTTP requests (CSS sprites, combine CSS, combine JS, inline CSS, inline JS)
  • Minifiy HTML, JS, CSS. Google Closure Tools, YUI Compressor, Minification
  • Gzip text/html, css, js (IE6 does not un-gzip CSS and JS, if reference is not from HEAD)
  • For IE 5 & 6 use gzip-only-text/html
  • Check if (Content-Encoding: gzip) then (Vary: Accept-Encoding) to allow cache both versions in proxy servers
  • CSS goes in head, JS goes at bottom – right before body closing tag
  • Defer JS if possible. Defer allows to load js after onload
  • Image formats: for photos – always use JPG, for everything else – PNG 8, for animations – GIF
  • Compress images: for JPG use jpegtran or jpegoptim Adobe Photoshop or Advanced JPEG Compressor (both non-free) or free GIMP, for PNG use OptiPNG or PNGOUT. I use non-free but the best one – PNGOUTWin
  • Think connections! Waterfall. webpagetest.org (probably the best site for web page speed / optimization test), Zoompf (a little overkill, but can be useful), Pingdom Tools
  • Try to serve assets in parallel, e.g, images.example.com, images2.example.com; subdomains can be on the same IP
  • Use 2-3 max 4 sub-domains
  • Optimize response headers, smaller, meaningful
  • Avoid redirects (301, 302, META refresh, document.location)
  • Remove ETAG
  • Use Expires + cache-control
  • 25k and greater files are not cached on iPhone
  • Cache dynamic content PHP, ASPX, ruby etc.
  • example.com?param is not cached by most proxies
  • Serve static assets from cookie-less domain, like yimg.yahoo.com
  • After onload via js can pre-cache images (if you know where visitor will go next)
  • Can use double heads (if a lot of meta then put 2nd head at the bottom after closing BODY tag)
  • Use CDN if can afford

And remember about:

Related tools / links:

More reading and watching:

While making website faster, do not forget about security:

Things that big guys (such as Google, Microsoft, Yahoo, Akamai) do. This requires custom software, customized Linux / BSD / Apache compilation, and of course deep knowledge in networking, OSI model, TCP, etc.:

P.S. This blog (wishmesh.com) is not optimized for anything (speed, size, etc.). People are lazy. They optimize only when there is reason to do it, and we like most humans are lazy, so this blog runs on default WordPress hosted on shared server.