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. ...
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 Make It Stick (Peter C. Brown, 2014) A Mind for Numbers (Barbara Oakley, 2014) Ultralearning (Scott Young, 2019) How to Take Smart Notes (Sönke Ahrens, 2017)
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. ...
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. ...
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. ...
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
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: ...
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. ...
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. ...
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. ...
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. ...
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. ...
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. ...
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.)
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 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. ...
Google web authoring statistics. An analysis of over a billion pages to see how people use HTML markup.
Speed up your pages.
10 places you must use Ajax.
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
Screenshots of my website. From Browsershots.
A list of 10 trends to keep an eye on over the next 10 years. Includes the Long tail, Ajax, PDAs, Tagging and RSS.
Google Maps API. But for some reason, it doesn’t work on Geocities. Related links: Google Maps Mania, London Traffic (and cameras)
Amazon image abuse. How you can change Amazon images in practically every way that Amazon itself can.
How to make your own annotated Google Maps. Like a craigslist on Google Maps.
How Google Maps works: a look behind the Javascript of Google Maps. Whereas GMail uses XMLHttp to make calls back to the server, Google Maps uses a hidden IFrame. The method has its benefits. The push-pins and info-popups are a different matter. Simply placing them is no big trick; an absolutely-positioned transparent GIF does the trick nicely. The shadows, however, are a different matter. They are PNGs with 8-bit alpha channels. ...
My new commenting system is based on the principle of “scribbling on the margin”. If you’re interested, have a look at the source code for this page. It is as clear as mud, so best of luck! Comments Ammadio 1 Feb 2005 12:00 pm: Where do these comments get stored Navneet 1 Feb 2005 12:00 pm: Nice commenting system. A couple of points though…It took me a while to figure out how to post the comment :). Maybe a note on that somewhere would help.. Also the text colour when I’m typing in the comment is almost invisible. S Anand 1 Feb 2005 12:00 pm: I fixed those two. Is it OK? Anything else? TOPFRAME 1 Feb 2005 12:00 pm: Good to see you back, Anand. :)
I’ve managed to get my commenting system to work. Feedback welcome. Comments ashish 25 Jan 2005 12:00 pm: cool harish_an 25 Jan 2005 12:00 pm: hey snand… howdy? back to regular blogging i guess ritzkini 25 Jan 2005 12:00 pm: good to have u back anand…been irregular with ur posts last few months… SHAMIT 25 Jan 2005 12:00 pm: Javascript ?
Geobytes is a piece of Javascript you can insert in your page, that will show visitors where they are from. via FilterCoffee
[V]Host – interesting text-to-speech web application. You can put Flash characters on your site that’ll read out anything.
Poodle predictor: good diagnostic tool for websites. via Filter Coffee
I’ve seen the Economic Times server have lots of problems. But this is a new one on me. (Didn’t last long, though…)
How good can a 256 byte webpage be? See the 256b.htm competition. I was particularly impressed by Bonz-Mandelbrot, Poi-Metaballs and Mados-Divo. 256b.com has more 256-byte stuff.
IE6 is out with new features. My site has already had quite a few hits with people using IE6! BTW, it doesn’t have Java or Plugin support.
My site actually has pretty bad design against these parameters. Need to work on it. Besides, the time is up for static sites. Dynamic website design will rule. Wonder when Geocities will start offering these features.
I’m fiddling around with Yahoo’s add-ons like guestbook, site stats, etc. Don’t be surprised to see wierd things popping up on my page.
Learn web-development at w3schools.
The Kleinman report is another interesting (monthly) report on web happenings.
I was playing around with CGI and wrote a script to determine when somebody last logged in. Read about CGI.pm.