web-development on S Anand

When the prompt is longer than the code

Fri, 05 Jun 2026 17:14:17 +0800

I used pi to create a compact home page for media.s-anand.net using these prompts:

Create index.html - a simple, elegant page that says that this page (media.s-anand.net) serves large media files for Anand - that’s where they should look instead.

… followed by:

Skip the part that says “Please visit …”

… then:

Shorten index.html to just 2-3 elegant rules of CSS. I want it MUCH smaller and simpler.

… and finally:

Center vertically and horizontally.

These prompts ended up being larger than the 471-byte index.html:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>media.s-anand.net</title>
<style>
  body { min-height: 100vh; display: grid; place-content: center; margin: auto; font: 1.25rem/1.6 system-ui, sans-serif; }
  h1 { font-size: clamp(2rem, 8vw, 4rem); }
</style>
<h1>media.s-anand.net</h1>
<p>This domain serves large media files for <a href="https://www.s-anand.net/">Anand</a>.</p>
</html>

Not that this matters, because:

I didn’t know what I wanted and having an AI coding agent generate a first draft helped with starting trouble and ideation.
I don’t know how to center on the screen and this did it for me.
I am practicing the skill that matters - reviewing - and not the skill AI is taking over - writing code.

Things I Learned - 11 Jan 2026

Sun, 11 Jan 2026 00:00:00 +0000

This week, I learned:

Software Heritage is a non-profit that archives software. You can submit any Git repo for archival. Over 400 million projects have been archived so far.
Everything Bad Is Good For You by Steven Johnson (2005) argues that pop culture isn’t all bad. But it isn’t all good either, unlike the book’s claims. Claude
- Popular culture formats (e.g. video games, manga, soap operas, game shows) are steadily more cognitively demanding, complex.
- They provide a dopamine kick from problem-solving.
- These may have led to the Flynn Effect (rising IQs in 1990s-2000s). Or it may be due to nutrition, smaller families, education, etc.
- Action games correlate with visual-spatial skills. Strategy games correlate with memory, planning. But is it causation? It doesn’t always translate to real-world skills.
- Also, side effects are real and bad: screen-time, addiction, misinformation, etc.
The purpose of a featured image in a blog post is to help readers decide whether to read it. Share the article’s output/focus (e.g. for data stories, products). Else a visual summary (e.g. sketchnote, comic capturing the essence). Else skip. Avoid stock photos. #
NFLSavant.com has play-by-play data for NFL games.
Ten of the least well known psychology / sociology research findings. ChatGPT
- Learning styles are a myth. People might prefer visual / audio / … learning but it doesn’t help learning. Mix learning modes. NotebookLM can help.
- Casual acquaintances help find new information or jobs much more than close friends, since they’re in different social circles. Nurture weak ties. Use a relationship architect.
- Tell a lie often enough and people mistake familiarity for truth. Fact-check habitually.
- The more you see / hear something the more you like it. (Exposure effect.) Expose to good things.
- When others mess up, we blame them. When we mess up, we blame the situation. (Attribution error.) Pause before judging.
- Sometimes, rewarding people makes them like doing it less. (Overjustification effect.)
- People who know less over-estimate their knowledge. (Dunning-Kruger effect.) Habitualize calibration via feedback and tests.
- People do worse when they’re afraid their failure will reflect on their stereotype. (Stereotype threat.) Practice emotional resets.
- Higher expectations lead to better performance. (Pygmalion effect.) Engineer positive expectations.
- Benevolent sexism (e.g. protective paternalism) can be harmful too. Scan for well-meaning bias.
Liberalism => economic growth, peace and expanding rights. Also colonial violence, exclusions (women, slavery, …), and eroding community. It is vulnerable to authoritarianism (e.g. emergency powers, recessions). Since 2006, democracy has consecutively declined, reversing half the progress since WW2. But alternatives are unclear. Claude
Notes from The Periodic Table by Primo Levi.
- Pure Zinc does not dissolve easily in sulphuric acid. An impurity like Copper Sulphate pulls electrons from Zinc and offers them to Hydrogen ions, speeding up the reaction. Impurities, foreign bodies, etc. have a purpose, too.
- Discomfort = Information. Overcoming discomfort = Capability. Capability = Freedom. Therefore: Seeking discomfort (carefully, purposefully) = Building freedom.
- Simple != Easy. Simple = Clear. Clear = Actionable.
- Indifference often feels like malice.
- ⭐ Analogies have limits. (The Map is not the Territory.) When using analogies, always explore where, when and why they will break. Pay close attention near where they break.
- ⭐ Knowledge vanishes with people unless written down. Write “Do X. Because of Y. Unless Z changes.” The last two are critical.
- I could NOT have read the book without a Randall Munroe re-styling. I cried anyway.
“There’s about 300-400 that were corporate assets. One watched them all the time. These are people who in 15 years could be CEO. There’s something about them that caught your fancy when you were in a meeting… brilliant ideas that challenged your thinking… We called them “Corporate Assets” and tracked them, to make sure we game-planned them, give them the right assignments.” Indra Nooyi, The Knowledge Project
The accesskey attribute works a bit like magic. Adding an accesskey="h" on a home page link, or an accesskey="t" on a theme toggle button automatically enables keyboard shortcuts Alt+H or Alt+T to activate them. (Varies by browser and OS, but hovering shows the shortcut!)
Familiarity and recency feel like learning but they’re not. Instead: Take tests. Review (spaced repetition). Interleave learning. That’s what helps. Claude

Sat, 25 Oct 2025 00:00:00 +0000

I asked multiple coding agents and models to build the same app:

Create a single-page web app at index.html that beautifully renders a GitHub user profile and activity comprehensively. Pick the ID in the URL ?id=…, default to ?id=torvalds.

… and compared their quality, cost, and speed.

My observations:

Quality variance is the highest. Some models / agents produce great visuals, some average, some fail completely.

Cost and time variance are lower among the successful models. About 2X variance in each.

This is unlike non-code usage, where quality varies less than cost.

My takeaway: Pick the best model / agent. Don’t worry about speed and cost - the variance is lower.

Results: https://sanand0.github.io/llmevals/coding-agents/

Always use value= for dynamic HTML options

Mon, 31 Jul 2023 06:45:48 +0000

Even after 30 years of HTML, I learn new things about it.

This Monday morning, I woke up to a mail from Sundeep saying requests for a Data Engineer - AWS/Azure/GCP in our internal fulfilment portal raised an error.

My guess was one of these:

The “/” in the role is causing a problem. (Developer mistake.)
The role exists in one table but not the other. (Recruitment team mistake.)
The application wasn’t set up / restarted properly. (IT mistake.)

All three were wrong. So I dug deeper.

The role was defined as Data Engineer - AWS/Azure/GCP (note the 2 spaces before the hyphen). But the form kept sending Data Engineer - AWS/Azure/GCP (spaces were condensed).

I swear there was NOTHING in the code that changes the options. The relevant line just picked up the role and rendered it inside the <select>:

```markup
<option>{{ row['Role'] }}</option>

I used the browser’s developer tools to inspect the <select> element. It showed the options with the 2 spaces:

<option>Data Engineer  - AWS/Azure/GCP</option>

But, when I selected it and printed the value, it had only one space.

> console.log(document.querySelector("#role").value<br/>'Data Engineer - AWS/Azure/GCP'

That’s when it hit me. HTML condenses whitespaces.

Till date, I only ever used <option value=""> when specifying a value different from what’s displayed. I never thought of using it to preserve the value.

LESSON: If you’re dynamically generating <option>s, ALWAYS use value= with the same value as the text.

Create SVG with PowerPoint

Mon, 21 Dec 2020 16:24:00 +0000

With Office 365, PowerPoint supports SVG editing. This is really powerful. It means you can draw in PowerPoint and render it on the web – including as interactive or animated visuals.

For example, the SVG in this simulator was created just with PowerPoint.

The process is simple. Draw anything. Select any shapes and right-click. Select Save As Picture… and choose SVG.

For example, you can use PowerPoint to create Smart Art, export it as SVG, and embed it into a page. See this example on CodePen.

See the Pen Smart Art SVG by S Anand (@sanand0) on CodePen.

The SVG is fairly well structured and easy to edit. The code generated for these 2 simple shapes:

… is quite straight-forward – just two SVG shapes.

<rect x="125.5" y="185.5" width="107" height="107" stroke="#2F528F" stroke-width="1.33333" stroke-miterlimit="8" fill="#4472C4"/>
<path d="M243.5 292.5 297 185.5 350.5 292.5Z" stroke="#2F528F" stroke-width="1.33333" stroke-miterlimit="8" fill="#4472C4" fill-rule="evenodd"/>

I was worried about the lack of SVG authoring tools in Windows. (InkScape is not usable, and Adobe’s tools are complex and expensive.) PowerPoint fits perfectly.

A-Z of my browsing history

Fri, 09 May 2014 16:16:38 +0000

When you start typing in the address bar, Chrome suggests a link to visit, based on frecency. What do my recommendations look like?

A is for airtel.in/smartbyte-s/page.html – the page where you can check your bandwidth usage. I used to check it infrequently until I upgraded to a 125GB connection. Now I check it every few days and feel miserable that I’ve nowhere near used up my quota. This has coerced me to watch many Telugu movies, of which I don’t understand a word.
B is for blog.gramener.com – I blog there on data stories. The last month or so has been fairly active thanks to the elections.
C is for calendar.google.com – which has become primarily a shared calendar. It was always indispensible to manage my time. Now it helps my colleagues pick when to call me. Right now, my calendar has events booked about two months in advance.
D is for docs.google.com – for effectively one single purpose: shared spreadsheets. This is such a common and powerful use case, and I’m surprised it hasn’t become much easier to use.
E is for epaper.timesofindia.com – some of our content has been published by The Economic Times, and I keep doing ego-searches in the print edition. But close behind is eci.nic.in which I’ve been scraping a lot, and election-results.ibnlive.in.com which we created for CNN-IBN.
F is for flipkart.com – not facebook.com. I’m not often on Facebook.
G is for gramener.com. Naturally. (It’s not surprising that it’s not google.com: I search directly from the address bar.)
H is for handsontable.com – a library that I’ve been using a lot recently, followed by html5please.com that tells me which HTML5 features are ready for use.
I is for ibn.gramener.com – another property we created, but it only just beats irctc.co.in.
J is for join.me – a clean way to share your screen without the audience having to install anything (though you the sharer do have to install the software.)
K is for kraken.io – an amazingly efficient image compressor. As you might have guessed, I lead a strange life.
L is for learn.gramener.com – our Intranet. Sorry, you can’t access this one.
M is for mail.google.com. I’ll probably be moving away from gmail as a backend this weekend to Mail-in-a-box, though. Google’s pulling the plug on Google Reader has shaken my faith.
N is for news.ycombinator.com. When I’m bored and want to watch something while I have dinner, I don’t open YouTube. I open Hacker News.
O is for odc.datameet.org – the Open Data Camp. I’m quite into open data.
P is for pay.airtel.com, but if you ignore the number of bills I pay, it would be pandas.pydata.org, the home page of a remarkable data processing library.
Q is for quirksmode.org, PPK’s remarkable browser-compatibility guide
R is for reader.s-anand.net, my self-hosted RSS reader. It used to be reader.google.com, but Google let me down there.
S is for s-anand.net – this blog.
T is for twitter.com. Unlike Facebook, I don’t dislike Twitter so much.
U is for underscorejs.org. Clearly I need to get a life.
V is for visualizing.org. They have a number of interesting data visualisations.
W is for webpagetest.org – it helps measure the speed of web pages.
X is for xem.github.io. I’ve probably visited this page once, but it’s the only one in my recent history that starts with X
Y is for youtube.com. I lied. I spend an order of magnitude more time watching Telugu movies on YouTube than on Hacker News.
Z is for zoemob.com. Again, a page I visited only once, but there’s nothing else in Z at the moment.

Comments

Software I currently use | s-anand.net 9 May 2014 6:24 pm (pingback): […] course, some of my apps apps have moved online, and my earlier post on the A-Z of my browsing history covers that. But there are a few applications that I’ve hosted which I must talk about. […]
chandigarh 13 Oct 2015 7:27 pm: you can delete your web search history through link https://history.google.com/history

Auto reloading pages

Sun, 30 Sep 2012 10:33:15 +0000

After watching Bret Victor’s Inventing on Principle, I just had to figure out a way of getting live reloading to work. I know about LiveReload, of course, and everything I’ve heard about it is good. But their Windows version is in alpha, and I’m not about to experiment just yet.

This little script does it for me instead:

(function(interval, location) {
  var lastdate = "";
  function updateIfChanged() {
    var req = new XMLHttpRequest();
    req.open("HEAD", location.href, false);
    req.send(null);
    var date = req.getResponseHeader("Last-Modified");
    if (!lastdate) {
      lastdate = date;
    } else if (lastdate != date) {
      location.reload();
    }
  }
  setInterval(updateIfChanged, interval);
})(300, window.location);

It checks the current page every 300 milliseconds and reloads it if the Last-Modified header is changed. I usually include it as a minified script:

<script>(function(d,c){var b="";setInterval(function(){var a=new
XMLHttpRequest;a.open("HEAD",c.href,false);a.send(null);
a=a.getResponseHeader("Last-Modified");if(b)b!=a&&
c.reload();else b=a},d)})(300,window.location)</script>

There are no dependencies on any library, like jQuery. However, it requires that the file be on a web server. (It’s easy to fix that, but since I always run a local webserver, I’ll let you solve that problem yourself.)

HTML 4 & 5: The complete Reference

Wed, 09 Feb 2011 17:08:02 +0000

HTML 4 & 5: The Complete Reference is an iPhone / iPad app that does exactly what it says: a reference for HTML 4 and 5.

It has a list of all tags, clearly demarcated as HTML4, HTML5 or both. The application is fairly easy to scroll through to find the tag or attribute you want. Clicking on a tag, you get:

a brief description of what it’s for
what attributes are valid – the good part is you can see clearly which attributes are specific to the element, and which ones are common (like class, id, etc.). You can also see the possible values for the attribute, which helps.
and an example of how the tag is used. The examples are quite simplistic, and there’s only one per tag, but it does have a rendered version of the code, which helps.

You can also scroll through the list of attributes and see which tags they’re valid for.

The part that quite interested me was the “characters” or HTML entities. Quite often, I’d want the pound (£) or right angle quotes (»), but wouldn’t know the character or entity reference. So far, I’ve been using this HTML entity reference to search for characters, where I can just type in the word (e.g. pound or quote) and it filters the list to show what I want. I was really hoping to see that on the app, but was disappointed. It lets you search, but it’s not search as you type. And the result points you to a section that contains the character – not directly to the character. (It’s a bit difficult to find the character in the longer sections).

There’s also a section where you can see elements by “task” – e.g. Forms, Link-related, Document Setup, Interaction, etc. This is a pretty useful break-up if you’re looking for the right element for the job, or browsing for interesting new elements to discover in HTML5. (I found the <menu> and <command> tags this way.

You do have the option of just downloading the PDF version of the HTML5 spec and reading it in iBooks, of course. So while I find the book useful, without a search-as-you-type feature, I suspect it won’t do much for my speed of looking up things, so I’ll just stick to the spec for the moment.

Disclosure: I’m writing this post as part of O’Reilly’s blogger review program. While I’m not getting paid to review the app, I did get it for free.

HTML5: Up and Running

Fri, 05 Nov 2010 13:30:59 +0000

HTML5: Up and Running is the book version of Mark Pilgrim’s comprehensive introduction to HTML5 at DiveIntoHTML5.org. Whether you buy the book or read it online, it’s the best introduction to the topic you’ll find.

Mark begins with the history of HTML5 (using email archaeology, as he calls it). You’d never guess that many of the problems we have with XHTML, MIME types, etc. have roots in discussions over 20 years ago. From then on, he moves into feature detection (which uses the Modernizr library), new tags, canvas, video, geo-location, storage, offline web apps, new form features and microdata. Each chapter can be read independently – so if you’re planning to use this as a reference, you may be better of reading the links kept up-to-date at DiveIntoHTML5.org. If you’re interesting in learning about the features, it’s a very readable book, terse, simple, and above all, delightfully intelligent.

Incidentally, if you’re starting off on a new HTML5 project, you’re probably best off using HTML5BoilerPlate.com. It’s very actively maintained, and contains some really nifty tricks you can learn like the protocol-relative URL.

Disclosure: I’m writing this post as part of O’Reilly’s blogger review program. While I’m not getting paid to review books, I sure am getting to read them for free.

Modular CSS frameworks

Sun, 19 Sep 2010 21:34:37 +0000

A fair number of the CSS frameworks I’ve seen – Blueprint, Tripoli, YUI, SenCSS – are monolithic. What I’d like is to be able to mix and match specific components of these.

For example, 960.gs has a simple grid system that I’d love to combine with the vertical rhythm that SenCSS offers. (Vertical rhythm ensures that sentences align vertically.) I’d love to have a CSS framework that just sets the fonts, for example, and touches nothing else. Or something that defines the colour schemes, and lets you change the theme like Microsoft Office does.

LessCSS

Less CSS has been invaluable in helping with this. It extends the CSS language without deviating significantly from it. Compared to SASS and CleverCSS, I’d say it has a better chance of getting incorporated as into, say, CSS4.

LessCSS offers variables. I can define a variable:

@foreground : #112233;

and use it like this:

h1 { color: @foreground; }
a:hover { background-color: @foreground; }

When I change @foreground, it’s replaced everywhere.

LessCSS offers multiple inheritance.

.highlight { color: red; }
.button { border-radius: 10px; }
.action {
  .highlight;
  .button;
}

This assigns the properties of the highlight and the button classes to the action class. Any changes made to the parents automatically get inherited.

LessCSS has a Javascript pre-processor. So I can include it directly in the HTML, and add the pre-processor, which converts it into CSS.

<link href="style.less" rel="stylesheet/less"/>
<script src="less.js"></script>

I now use LessCSS as the basis of all new projects.

CSS libraries

My first attempt to consolidate modular CSS libraries is at bitbucket.org/sanand0/csslibs. As far as possible, I’ve tried to avoid creating new libraries, or even tweaking existing ones. Over time, I hope to completely eliminate any new code.

There are two types 2 types of libraries. Some just have variable definitions. Others actually define styles. For example, I’ve got three libraries that just define variables:

color_themes.less: Defines a standard set of color themes (based on the Office 2007 color themes)
font_stacks.less: Defines Web-safe font stacks (based on Sitepoint’s article)
backgrounds.less: Transparent background patterns (randomly useful images)

Including the above libraries will have no effect. You need to explicitly use them. For example:

@import "font_stacks.less";         // Does nothing
h1 { font-family: .font[@serif]; }  // Makes H1 a serif font

The following libraries define styles. Including them will define new classes or change the style of tags / classes.

reset.less: Resets default styles consistently across browsers. I chose YUI3 CSS Reset arbitrarily. I think HTML5boilerplate’s CSS reset may be a better choice, though.
grids.less: Defines classes for fixed and fluid grids. I choose YUI3 CSS Grids over 960.gs (which I’ve used for some years) because of its ability to offer fixed as well as fluid layouts, and the sheer brilliance of its minimality.
lineheight.less: Sets font sizes, ensuring that lines have a vertical rhythm. This is a stripped-down version of SenCSS, but over time, I’ll phase this out and use some standard framework someone comes up with.

Between these, I think the base infrastructure for most applications is in place. What’s required next are widgets. Specifically, I’d like:

Buttons. A really good, cross-browser, non-image-based button that offers rounded corners, gradients and borders.
Forms. Consistent form styling, without forcing me to use a specific form layout.
Icons. A standard icon library with replaceable CSS sprite-sets.

I’ll try keep the code updated as I find these. Do pass me any suggestions you may have.

Comments

Abhishek Singh 20 Sep 2010 6:23 pm: This is really cool… I think i wont be facing any build kit issues from now on :-)

Make backgrounds transparent

Wed, 28 Apr 2010 06:57:37 +0000

This is the simplest way that I’ve found to make the background colour of an image transparent.

Download GIMP
Open your image. I’ll pick this one:
Optional: Select Image – Mode – RGB if it’s not RGB.
Select Colors – Colors to Alpha…
Click on the white button next to “From” and select the eye-dropper.
Pick the green colour on the image, and click OK

The anti-aliasing is preserved as well.

Comments

Vinu 28 Apr 2010 11:21 pm: There is a tool in MS Office products (Word, Excel, PowerPoint) to set the transparent color as well, assuming of course that you plan to embed the image in a document…
S Anand 29 Apr 2010 7:19 am: Need to use the image in web pages, mostly. Would this MS Office tool still work?
S Anand 29 Apr 2010 7:20 am: True, Ravi. I need to automate this task, though. Tried ImageMagick at first, but gave up after a while.
Vinu 30 Apr 2010 5:51 pm: Good question. If you use a drag and drop, WYSIWYG web page editor, then perhaps it will translate. I tested it between Powerpoint & Word and it worked. Here’s the location of the control on PowerPoint 2007: on the Picture Tools /Format ribbon> Recolor (in the Adjust group, first from the left) drop down to “Set Transparent Color’. Keyboard accelerator = Alt + J P E S.
Atluri 28 Apr 2010 3:59 pm: This works well only for text and images with strong contrast against their background text as an image is outdated ;) and for images i would use blend->merge->eraser for edges!
Vipul 13 May 2010 5:31 am: Remove background option in MS-PowerPoint 2010 works even better. In love with that feature. :)

IE6 in Corporates

Wed, 17 Jun 2009 09:13:03 +0000

PPK’s State of the Browser – IE Edition mentions one reason why IE6 will probably stay on for a while.

Now why do I expect IE6 to stick around while IE7 goes down? The answer is simple: Intranets… many office workers will continue to be condemned to IE6.

At work, that is. It’s quite likely that on their private computer at home they run another browser — IE7 or 8, Firefox, or maybe one of the smaller ones.

… Basically, most of the IE6 market share comes from office-hour surfing, while it drops significantly in the after-hours period.

I checked the numbers on my site. It’s bang on. Last month, the percentage of IE6 users around noon was a little over 40%. At midnight, the percentage was 20%.

Percentage of IE6 users over a 24-hour window

Given that the bulk of my audience is from India, I would assume that these statistics are probably representative of Indian corporates. But I guess it means that there’s a fair bit of music listening happening at work. Probably a good thing.

Comments

Karthik A 17 Jun 2009 5:03 pm: Yes, even our corporate IT deploys IE6. In fact , many of our enterprise apps support only IE6. Personally, I have upgraded and find that Javascripts that are unresponsive in IE8 and Chrome dont actually throw up that error in IE6.
ppk 18 Jun 2009 2:43 pm: Thanks for these figures! It’s good to have some actual data to point at, even though it’s anecdotal. Added link to main article.
Thejesh GN 8 Jul 2009 2:03 pm: Interesting stats. I need to check my stats.
Naveen Arur 13 Jul 2009 10:14 am: Bang on target. Fortunately, my organization, which can be counted as large one, has woken up and we are moving forward(if there is such a thing with Microsoft) to IE 7 by end of the year….which also means more work for me to check if my applications work on IE7.
Khair 22 Sep 2009 3:06 pm: The reason why corporates don’t adapt to the changes is because of money invovled in upgrading. They have an awful time and money in making legacy applications compatible with new version of IE!!

Error logging with Google Analytics

Sat, 23 May 2009 19:29:01 +0000

A quick note: I blogged earlier about Javascript error logging, saying that you can wrap every function in your code (automatically) in a try{} catch{} block, and log the error message in the catch{} block.

I used to write the error message to a Perl script. But now I use Google’s event tracking.

var s = [];
for (var i in err) s.push(i + "=" + err[i]);
s = s.join(" ").substr(0, 500);
pageTracker._trackEvent("Error", function_name, s);

The good part is that it makes error monitoring a whole lot easier. Within a day of implementing this, I managed to get a couple of errors fixed that had been pending for months.

Comments

Thejesh GN 29 May 2009 7:40 am: That is a good tip. I can use the present infrastructure for error logging..

Short notes

Wed, 20 May 2009 05:15:32 +0000

I’m quite busy on a project right now, and don’t get time to write long articles. So for a while, I’m going to stick to short notes on interesting stuff.

Peter Bregman has a very interesting piece on Why You Should Encourage Weakness. It boils down to a choice: do you focus on on improving strengths or minimising weaknesses? Conventional performance evaluations focus on the latter. I very strongly support Bregman’s view on this. The weakness isn’t why you hired the person! Unless it’s killing the organisation, just leave them to focus on their strengths.
Google Analytics has a fairly interesting API that I hadn’t explored until recently. Picked up [Advanced Web Metrics with Google Analytics](http://www.s-anand.net/amazon-browser.html#advanced web metrics with google analytics) and learnt that you can track outbound clicks, page load times, Javascript events and error logs, almost anything at all using Google Analytics. You can also mirror the logging on your local server using pageTracker._setLocalRemoteServerMode()
The whole concept of a Sandbox environment seems to be picking up within Google. There’s a Checkout sandbox, an AJAX API playground, an AdWords sandbox, an AdSense API sandbox, the Mapstraction API sandbox, even an event called Developer Sandbox. (After saying Sandbox 6 times, I feel a bit like Hobbes.)

WordPress themes on Live Writer

Sun, 08 Mar 2009 01:27:20 +0000

One of the reasons I moved to WordPress was the ability to write posts offline, for which I use Windows Live Writer most of the time. The beauty of this is that I can preview the post exactly as it will appear on my site. Nothing else that I know is as WYSIWYG, and it’s very useful to be able to type knowing exactly where each word will be.

The only hitch is: if you write your own WordPress theme, Live Writer probably won’t be able to detect your theme — unless you’re an expert theme writer.

I hunted on Google to see how to get my theme to work with Live Writer. I didn’t find any tutorials. So after a bit of hit-and-miss, I’m sharing a quick primer of what worked for me. If you don’t want to go through the hassle, you can always call on professionals who are adept at services like professional custom website design.

Open any post on your blog (using your new theme) and save that as view.html in your theme folder. Now replace the page’s title with {post-title} and the page’s content with {post-body}. For example:

<h1>{post-title}</h1>

{post-body}

This is the file Live Writer will be using as its theme. This page will be displayed exactly as it is by Live Writer, with {post-title} and {post-body} replaced with what you type. You can put in anything you want in this page — but at least make sure you include your CSS files.

To let Live Writer know that view.html is what it should display, copy WordPress’ /wp-includes/wlw-manifest.xml to your theme folder and add the following lines just before </manifest>.

WebLayout

Live Writer searches for wlmanifest.xml in the <link rel="wlmanifest"> tag of your home page. Since WordPress already links to its default wlwmanifest.xml, we need remove that link and add our own. So add the following code to your functions.php:

function my_wlwmanifest_link() { echo
  '';
}
remove_action('wp_head', 'wlwmanifest_link');
add_action('wp_head', 'my_wlwmanifest_link');

That’s it. Now if you add your blog to Live Writer, it will automatically detect the theme.

Comments

Windows Live Writer 向 DEDECMS 发文章 | 快乐生活，快乐工作 30 Apr 2009 8:39 am (pingback): […] WordPress themes on Live Writer […]
San Diego Web Design 22 Jun 2009 9:04 pm: Note to my first post as it doesn’t show correctly: What I did is I ended up adding the part between the tags to the regular wlwmanifest.xlm file.
vivek 15 Jun 2009 6:23 am: Hi, Thanks great information
San Diego Web Design 22 Jun 2009 9:02 pm: Thank you, thank you, thank you! I was trying for hours to fix this before I found your post! Actually, the way you described it didn’t exactly work for me (I guess I did something wrong with the paths), but I ended up just adding the WebLayout with the absolute path to the regular wlwmanifest.xlm inside the includes folder and now it works! Thanks again, your post was the only one describing this problem and helping me fix it!
shawn 29 Jan 2010 7:37 pm: I was having this issue today and came across this page. I came up with a very simple fix that requires no coding. When setting up your blog in WLW, go to your admin settings in the wordpress dashboard and temporarily set your “Reading” settings to “Front page displays -> Your latest posts “. WLW will successfully download the theme, then set your Front page displays back to your custom setting.
zimmi 27 Jan 2010 7:53 pm: What if it still doesn’t work? Anything else I can try?
S 15 Jul 2010 5:45 pm: Thank you so much!!!!!!!!!! this worked.
girls information 27 Sep 2010 7:19 am: this worked for me tanks for sharing
Graphene, Child Themes, and Live Writer - Eyes2Design 28 Jul 2012 4:57 am (pingback): […] came across this page by www.s-anand.net which helped me a lot in understanding how Live Writer and WordPress get along together. So follow […]

Caching pages on Apache

Thu, 14 Aug 2008 12:00:00 +0000

I don’t use any blogging software for my site. I just hand-wired it some years ago. When doing this, one of the biggest problems was caching.

Consider each blog entry page. Each page has the same template, but different content. Both the template and content could be changed. So ideally, blog pages should be served dynamically. That is, every time someone requests the page, I should look up the content, look up the template, and put them together.

I did that, and within a few days outgrew my hosting service’s CPU usage limit. Running such a program for every page hit is too heavy on the CPU.

One way around this is to create the pages beforehand and serve it as regular HTML. But every time the template changes, you need to re-generate every single page. I had over 2,500 pages. That would kill the CPU usage if I changed the template often.

At that point, I did a piece of analysis. Do I really need to regenerate all 2000 blog entries? Wouldn’t the 80-20 rule apply? The Apache log confirmed that 20% of the URLs were accounting for 76% of the hits. So I’d be wasting my time regenerating all the pages every time I changed the template.

So based on this, I decided to dynamically cache the pages. When a page is requested for the first time, I create the page and save it in a cache. The next time, I’d just serve it from the cache. If the template changes, I just need to delete the cache. This way, I only generate pages that are requested, and they’re only generated once.

OK, so that’s the background. Now let me get to how I did it.

I wrote a Perl script, blog.pl, that would generate a page in the html folder whenever it is called. Next, I changed Apache’s .htaccess to run this program only if the page did not exist in the html folder.

# Redirect to cache first
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]*)\.html$       html/$1.html

# If not found, run program to create page
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^html/([^/]*)\.html$  blog.pl?t=$1

The first block redirects Apache to the cache. The second block checks if the file exists in the cache. If it doesn’t, the Apache redirects to the program. The program creates the page in the cache and displays it. Thereafter, Apache will just serve the file from the cache.

This Apache trick can be used in another way. I keep files organised in different folders to simplify my work. But to visitors of this site, that organisation is irrelevant. So I effectively merge these folders into one. For example, I have a folder called a in which I keep my static content. I also have this piece of code:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)$   a/$1

If any file is not found in the main folder, just check in the a/ folder. So I can access the file /a/hindholam.midi as </hindholam.midi> as well.

This can be extended to a series of folders: either as a cascade of caches, or to merge many folders into one.

Comments

Kannan Ekanath 17 Aug 2008 7:00 am: [http://random-thoughts-and-rambling.blogspot.com/]

Hi, I wanted to know a comparison/contrast how setting up blog etc in your own hosted space compares with things like http://sites.google.com. I have always postponed this buying of a domain in favour of things like sites.google.com. Obviously I understand that the advantages would be you can control the LAF, the content, the organisation etc. But have you got a comparison doc or something on what precisely one would get if he hosts things in his own domain instead of a google/yahoo powered wiki style page?
S Anand 17 Aug 2008 1:31 pm: @Kannan: Don’t have anything offhand, Kannan. But buying a domain would make sense anyway – you could point your domain to sites.google.com transparently. If you wanted to build your own blogging system for your site, though, I’d advise against it. I did it because I started in 1999 and there weren’t many blogging systems then. Today, it just doesn’t make sense.
Nirupam 18 Aug 2008 7:43 am: Hi Want to create a site for myself. Should I go for own hosted space or should I start using sites like Geosites etc. I want to deploy web-based applications in my site. Can you please advise?
S Anand 19 Aug 2008 11:24 am: @Nirupam: If you want to deploy your own applications, you should probably create your own site. Get a free hosting service to start with. I’ve used 110mb.com, freestarthost.com and awardspace.com, and found them to be OK.

Google web authoring statistics

Wed, 25 Jan 2006 12:00:00 +0000

Google web authoring statistics. An analysis of over a billion pages to see how people use HTML markup.

Speed up your pages

Tue, 03 Jan 2006 12:00:00 +0000

Speed up your pages.

10 places you must use Ajax

Sun, 04 Dec 2005 12:00:00 +0000

10 places you must use Ajax.

Google Adsense

Wed, 28 Sep 2005 12:00:00 +0000

I’ve put in Google Adsense on my page. But the results are ridiculously irrelevant!

Comments

Raghuraman 9 Sep 2008 9:15 am: google adsense work in expliand in tamil language, For an approval of adsense and how to publish my website to the visitors for click programe and get earn by this work. Thanking you