How do you show equations on a web page? Every now and then, I write an article that involves math, and I wrestle with that problem.
It was nearly fifteen years ago that MathML was recommended as a standard for embedding equations inside an HTML page. I remember being excited about it back then. There were a few problems -- like the availability of fonts including symbols for integrals, summations and so forth -- but they seemed minor. That was 1998.
Now, in 2012, I found myself wanting to write an article involving an integral, so I looked into the state of MathML. I found that even now, all these years later, it wasn't widely supported.
In Firefox I could show some simple equations, like ∫ x = 0 ∞ &dd x x and x = − b ± b 2 − 4 a c 2 a
But when I tried them in Chromium, I learned that webkit-based browsers don't support MathML. At all. The exception is Safari: apparently Apple has added some MathML support into their browser but hasn't contributed that code back to webkit (yet?)
Besides that, MathML is ridiculously hard to use. Here's the code for that little integral:
<math xmlns="www.w3.org/1998/Math/MathML">
<mrow>
<semantics>
<mrow>
<msubsup>
<mo>∫</mo>
<mn>x = 0</mn>
<mi>∞</mi>
</msubsup>
<mfrac>
<mrow>
<mo>ⅆ</mo>
<mi>x</mi>
</mrow>
<mi>x</mi>
</mfrac>
</mrow>
</semantics>
</mrow>
</math>
Ugh! You can't even specify infinity without using an HTML numeric entity. And the code for the quadratic equation is even worse (use View Source if you want to see it).
Several years ago, I wrote about the Twelve Days of Christmas and how to calculate the total number of gifts represented in the song.
I needed summations, and I was rather proud of working out a way to use HTML tables to display all the sums and line up everything correctly. It wasn't exactly publication-quality graphics, but it was readable.
More recently, I worked out a way to do exponentials that way, and found a hint about how to do integrals:
| now | |||
| ∫ | P (t) | dt | |
| P0 = | ———— | ||
| 1 + t | |||
| 0 |
Looks a little better than the tiny MathML version. But the code isn't any easier to read:
<table border="0" cellpadding="0" cellspacing="0"> <tr><td><td align="center"><small><i>now</i></small></td><td></td><td></td></tr> <tr> <td> <td rowspan="3" valign="middle"><font size="6" style="em">∫</font> <td align="center"><i>P</i> (<i>t</i>)</td> <td rowspan="3" valign="middle"> <i>dt</i></td></tr> <tr><td>P<sub>0</sub> =<td align="center">————</td></tr> <tr><td><td align="center">1 + <i>t</i></td></tr> <tr><td><td valign="top"><small><i>0</i></small></td><td></td><td></td></tr> </table>
And then I discovered MathJAX. It was added recently to the Udacity forums, and I think it's also what MITx is using for their courses.
MathJax is fantastic. It's an open-source library that lets you specify equations in readable ways -- you can use MathML, but you can also use LaTEX or even ASCII math like `x = (-b +- sqrt(b^2-4ac))/(2a) .`
It uses Javascript: you put your equations in the text of the page with delimiters like $$ around them (you can control the delimiters), then run a function that scans the page content and replaces any equations it sees with pretty graphics. (Viewers using NoScript or similar extensions will need to allow mathjax.org to see the equations, unless you make a local copy of the mathjax.org libraries, which you probably should anyway if you're using a lot of equations.)
For displaying those graphics, MathJax might use MathML, HTML and CSS, or whatever, depending on the user's browser ... but you don't have to worry about that. (Alas, even in Firefox, MathML rendering isn't up to par so MathJax doesn't use it by default, though you can specify it as an option if you know your equations render well.)
Here's that integral again, using LaTeX format: $$ P_0 =\int_0^\infty \frac {P(t) dt}{1 + t} $$ and $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
It's beautiful! And although I don't know LaTex at all -- been wanting an excuse to learn it -- I put together that integral with five minutes of web searching. (The quadratic code came from a MathJax demo page.) Here's what the code looks like:
$$ P_0 =\int_0^\infty \frac {P(t) dt}{1 + t} $$
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
MathJax is even smart enough to notice the code there is in a <pre> tag, so I didn't have to find a way to escape it.
I'm sold! The MathJax team has really put together a nice package, and I think we'll be seeing it on a lot more websites. If you want to try it, start here: Getting Started with MathJAX.
10:45 PM
Ridge Racer Unbounded (PC)
Fazendo um teste de gravação.
07:00 PM
The NY Times’ restriction of 10 articles/month for non-subscribers, online viewers means I won’t be reading their Books section anymore. It sort of became a good habit for me and something I look forward to on Sunday mornings: as I drink my coffee and enjoy some peace and quietness as the kids are still asleep, I enjoy catching up with the latest books and reviews. This weekend ritual usually ends with a trip down to the public library with the whole family. Both of my kids are already checking out more books and movies than my wife and I together.
But back to this decision by the NY Times, I understand that a for profit establishment wants to, well, make money, and there’s nothing wrong with that for sure. But for this weekend, Books section only reader the options don’t make a lot of sense: pay $6 for the Sunday edition so I can read a small subset of it is a bit expensive, and I am not very sure how much it costs to get the online version.
02:32 PM
O PIP em uma TV Sony.
O bom desse monitor é que você pode fazer suas tarefas no PC e assistir a algum canal em modo PIP. O problema é que o áudio vem desabilitado de fábrica. Para habilitar (e configurar outras coisas) basta apertar a tecla MENU, navegar até a aba Sistema e apertar o botão central de navegação na palavra PIP (ohh!!).
Lá você pode ajustar o tamanho da janela (duas opções), a posição da janela e a seleção de áudio (Principal: som vindo da entrada HDMI; Subtela: som do canal).
Da próxima vez que quiser usar o PIP é só apertar a tecla TOOLS e escolher a última opção, que no caso é o PIP.
O chato é que não dá pra deixar a TV na imagem principal e o PC no modo PIP. :(
07:35 PM
Monitor TV LED 21.5” Samsung SyncMaster TA550
Possui esse monitor e achou as cores fortes demais no modo monitor? Basta fazer o óbvio: alterar o nome da entrada.
- Mas como?! Como poderei eu fazer isso?!
Basta apertar a tecla SOURCE, escolher a entrada que deseja renomear e pressionar o botão TOOLS. Depois disso é só selecionar o menu Editar Nomes. Mude para PC caso esteja usando um cabo HDMI-HDMI ou DVI PC caso seja um cabo DVI-HDMI (ou com um adaptador, também dá na mesma).
Cabo HDMI-HDMI
Cabo HDMI-DVI
Adaptador DVI-HDMI
:)
07:22 PM
One benefit of living in the Philippines that we’ve finally been able to take advantage of is its proximity to Hong Kong. Earlier this month we hopped on some $30 flights and paid a visit.
We treated ourselves (it was my girl’s birthday, after all) and stayed in a tall and narrow modern boutique hotel in Sheung Wan. Just three rooms to a floor, and quite spacious by Hong Kong standards. It had everything you’d expect from a nice hotel: big comfortable bed, fluffy robes, flatscreen TV, and a sparkling-clean bathroom (with hot water, a big deal for us!).
But what made this hotel particularly special were not the things that were present, but the things it gave away. The fridge was restocked every day with free beer, water and juice. Local phone calls were free. The internet was both free and fast. There was even a menu of DVDs that you could have delivered to the room.
The place felt like a home, because at home no one charges you to use stuff.
Another place that feels like home is the iPad, a computer at its most personal. Also like hotels, it is filled with opportunities for spending your money. Of these, the in-app purchase is one that runs the most risk of feeling like one of those already-expensive hotels that choose to nickel and dime you on every extra service while in their clutches (Sorry, I mean their hospitality). $10 to wash a pair of socks? No thanks.
If $10 to for cleaning socks feels ridiculous, how does it feel to pay $10 to flip a few bits in an app you already have installed? Perhaps not that bad, because I just did it without hesitation to try all the brushes in Fiftythree’s new Paper drawing app for iPad. But I’m no ordinary iPad user, and I actually don’t think Paper’s that far from crossing this line.
They’re twofold. Firstly, you risk people missing out on the features that you put behind the purchase wall. Marco Arment explains this well in Episode 70 of his Build and Analyze podcast. He was asked whether he’d considered using in-app purchases to enable special fonts in Instapaper. His feeling was that most people wouldn’t buy the fonts, leaving them with an inferior experience. They’d miss out on something special. In his words:
People love these new fonts! … The idea of restricting [them] to a very small subset of people who are willing to pay for [them]… would be worse for my sales long term, because people wouldn’t think of it as the app with the great fonts.
Secondly, you risk people perceiving you as the greedy hotel. If your users don’t place the same value on your in-app purchasable items, then it can feel like a money grab, and you lose their favour. This is why so many people reacted badly to Hipstamatic Disposable charging for what felt like single imaginary rolls of film. It’s why I bet hardly anyone’s bought those silly extra photo filters in Path, and why Instagram hasn’t dared put a price on any of theirs.
Of course, one major benefit of the in-app purchase is that it lowers the barrier to entry; a free download will result in many more people trying your app. From that point, you want to keep them there and make some money, but still have everyone feel good about it.
This might mean a single, slightly larger purchase instead of many micro-purchases, exposing all the extra features in one hit. Paper does this, but due to the iTunes price tiers in Australia, it was actually cheaper for me to press “buy” on each brush individually. Or it might mean building some things into an up-front cost (I certainly knew this was the case with my hotel stay). Will an app with a non-zero price tag but fewer in-app purchases actually result in a more revenue and a better userbase?
There’s no single answer here, so I think it’s important just to think hard and tread carefully. I would love to hear your thoughts on this. Get in touch over here.
01:00 AM
Earlier this morning I received the following email from The Pragmatic Programmers:
Dear Og Maciel,
This is just to let you know that Pragmatic Guide to Git (eBook) has recently been updated. You own an electronic version of this book, and so you’ll be able to download this latest version. We have also sent it to Amazon.com for delivery to your kindle.
Changes in This Release
- Third printing: includes a few minor errata fixes.
You can get the update either by logging in to your Bookshelf Home Page, or (if you’re already logged in) by downloading it from here.
Dave and Andy
pragmaticbookshelf.com
Awesome right? They not only have informed me of an updated version of a book I bought from them, but have also automatically sent it to my Kindle! More over, I can download my ebook in PDF, mobi or epub format, all without any senseless “protection mechanism”. It is this type of attention and treatment that have won me over and whenever I need to buy a technical book, I immediately check their store.
Also worth mentioning is their monthly, free publication PragPub magazine, also available in many different electronic types.
Anyhow, I don’t get any type of financial incentive for writing this up, so don’t feel that I’m trying to push off some type of affiliation code in order to make money. I happen to enjoy their service and attitude toward their customers and, if you’re ever decide to buy anything from them I hope your experience will be as enjoyable as mine.
04:01 AM
OK! Estou pronto!
07:58 PM
Clicando no título acima você protege seus dados, evitando que o Google, Facebook ou o Twitter possam ter acesso. :)
10:20 PM
A thread on the Ubuntu-devel-discuss mailing list last month asked about how to find out what processes are making outgoing network connectsion on a Linux machine. It referenced Ubuntu bug 820895: Log File Viewer does not log "Process Name", which is specific to Ubuntu's iptables logging of apps that are already blocked in iptables ... but the question goes deeper.
Several years ago, my job required me to use a program -- never mind which one -- from a prominent closed-source company. This program was doing various annoying things in addition to its primary task -- operations that got around the window manager and left artifacts all over my screen, operations that potentially opened files other than the ones I asked it to open -- but in addition, I noticed that when I ran the program, the lights on the DSL modem started going crazy. It looked like the program was making network connections, when it had no reason to do that. Was it really doing that?
Unfortunately, at the time I couldn't find any Linux command that would tell me the answer. As mentioned in the above Ubuntu thread, there are programs for Mac and even Windows to tell you this sort of information, but there's no obvious way to find out on Linux.
The discussion ensuing in the ubuntu-devel-discuss thread tossed around suggestions like apparmor and selinux -- massive, complex ways of putting up fortifications your whole system. But nobody seemed to have a simple answer to how to find information about what apps are making network connections.
Well, it turns out there are a a couple ofsimple way to get that list. First, you can use ss:
$ ss -tp
State Recv-Q Send-Q Local Address:Port Peer Address:Port
ESTAB 0 0 ::1:58466 ::1:ircd users:(("xchat",1063,43))
ESTAB 0 0 192.168.1.6:57526 140.211.166.64:ircd users:(("xchat",1063,36))
ESTAB 0 0 ::1:ircd ::1:58466 users:(("bitlbee",1076,10))
ESTAB 0 0 192.168.1.6:54253 94.125.182.252:ircd users:(("xchat",1063,24))
ESTAB 0 0 192.168.1.6:52167 184.72.217.144:https
users:(("firefox-bin",1097,47))
-t shows only TCP connections (so you won't see all the interprocess communication among programs running on your machine). -p prints the process associated with each connection.
ss can do some other useful things, too, like show all the programs
connected to your X server right now, or show all your ssh connections.
See man ss for examples.
Or you can use netstat:
$ netstat -A inet -p Active Internet connections (w/o servers) Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program name tcp 0 0 imbrium.timochari:51800 linuxchix.osuosl.o:ircd ESTABLISHED 1063/xchat tcp 0 0 imbrium.timochari:59011 ec2-107-21-74-122.:ircd ESTABLISHED 1063/xchat tcp 0 0 imbrium.timochari:54253 adams.freenode.net:ircd ESTABLISHED 1063/xchat tcp 0 0 imbrium.timochari:58158 s3-1-w.amazonaws.:https ESTABLISHED 1097/firefox-bin
In both cases, the input is a bit crowded and hard to read. If all you want is a list of processes making connections, that's easy enough to do with the usual Unix utilities like grep and sed:
$ ss -tp | grep -v Recv-Q | sed -e 's/.*users:(("//' -e 's/".*$//' | sort | uniq
$ netstat -A inet -p | grep '^tcp' | grep '/' | sed 's_.*/__' | sort | uniq
Finally, you can keep an eye on what's going on by using watch to run one of these commands repeatedly:
watch ss -tp
Using watch with one of the pipelines to print only process names is possible, but harder since you have to escape a lot of quotation marks. If you want to do that, I recommend writing a script.
And back to the concerns expressed on the Ubuntu thread, you could also write a script to keep logs of which processes made connections over the course of a day. That's definitely a tool I'll keep in my arsenal.
06:28 PM
Programa do Mução - Carniça cantando Vinte Mão de Milho
08:05 PM
In a recent Back to Work episode, Dan shared a line from Fight Club that powerfully represents my feelings about clutter:
As Tyler Durden said it best, “The things you own own you, man.”
Back to Work #56, One Giant Beholder Dinosaur, at 45:00.
I’ve removed clutter from my life in a big way. I did it by moving overseas.
What have I been doing here? Working, writing, exploring, drinking coffee, enjoying the company of my wife. Living life as usual. Nearly everything I do is in the 13 inches of my MacBook Pro. Everything I read is in my iPad. I have only a small collection of clothes (it’s the Philippines, after all). Effectively, I’ve been living with a single suitcase worth of things.
Yes, we have bought some furniture and other things to make ourselves comfortable here, but I consider these entirely temporary. At the end of our sojourn here, I’ll not think twice about about parting with them.
The result: an incredible feeling of lightness. A feeling of agility, and possibility. Our next steps are unhindered by our possessions. We’ve been thinking about where in the world we want to visit. About what places we want to get to know better. The future is exciting and ours to wield.
This opening of the mind has extended far beyond geography. We’ve started to think more broadly than ever before about our ambitions for our work, what we create, and how we want to live. This experience will shape every aspect of our lives for years to come. (And at the very least, I’ll certainly have a different mindset about how to populate a home, when we do settle down again)
You might consider packing up and moving overseas a rather extreme way to remove clutter from your life. I agree that it’s extreme, but it has the singular advantage that it facilitates a true mental decluttering along with the physical one. I think this makes it entirely worthwhile.
Perhaps the change doesn’t need to be as extreme as ours. Maybe a house swap would get you away from most of your posessions long enough to give you a different perspective. Or maybe you could extend an overseas holiday and conduct some of your work there, so you can experience ordinary life in another place. Or perhaps you really just need to throw some stuff out.
Whatever you do, taking some concrete steps now may too bring you unexpected new feelings of lightness, feelings that only fold back into further positive action. It’s worth a try.
02:25 AM
Hã?! Ahhh ta…
08:50 PM
Arch Linux ~XFCE 4.8
Papel de parede: IV
Tema XFCE: Moira
:)
12:44 PM
A great guide for keeping your Ruby apps consistent within a team.
Update: Another style guide worth checking out is Github’s, which covers HTML, CSS, JS and Ruby.
Permalink
08:00 AM
Derek Sivers answers “Are business decisions for love or for money?” and summarises everything I want to do in business:
For me? Love. The purpose of money is to trade for things that make you happy. So if you can bypass money and get directly to the happy, you’ve saved a lot of trouble. And it makes others happier, too, when you organize your business around non-monetary things.
If this jibes with you, then his book Anything You Want is well worth a read.
Permalink
07:00 AM
The amazing Spider Man
12:53 PM
Someone asked me about determining whether an image was "portrait" or "landscape" mode from a script.
I've long had a script for automatically rescaling and rotating images, using ImageMagick under the hood and adjusting automatically for aspect ratio. But the scripts are kind of a mess -- I've been using them for over a decade, and they started life as a csh script back in the pnmscale days, gradually added ImageMagick and jpegtran support and eventually got translated to (not very good) Python.
I've had it in the back of my head that I should rewrite this stuff in cleaner Python using the ImageMagick bindings, rather than calling its commandline tools. So the question today spurred me to look into that. I found that ImageMagick isn't the way to go, but PIL would be a fine solution for most of what I need.
Ubuntu has a python-pythonmagick package, which I installed. Unfortunately, it has no documentation, and there seems to be no web documentation either. If you search for it, you find a few other people asking where the documentation is.
Using things like help(PythonMagick) and
help(PythonMagick.Image), you can ferret out a
few details, like how to get an image's size:
import PythonMagick filename = 'img001.jpg' img = PythonMagick.Image(filename) size = img.size() print filename, "is", size.width(), "x", size.height()
Great. Now what if you want to rescale it to some other size? Web searching found examples of that, but it doesn't work, as illustrated here:
>>> img.scale('1024x768')
>>> img.size().height()
640
The built-in help was no help:
>>> help(img.scale)
Help on method scale:
scale(...) method of PythonMagick.Image instance
scale( (Image)arg1, (Geometry)arg2) -> None :
C++ signature :
void scale(Magick::Image {lvalue},Magick::Geometry)
So what does it want for (Geometry)? Strings don't seem to work, 2-tuples don't work, and there's no Geometry object in PythonMagick. By this time I was tired of guesswork. Can the Python Imaging Library do better?
PIL, happily, does have documentation. So it was easy to figure out how to get an image's size:
from PIL import Image im = Image.open(filename) w = im.size[0] h = im.size[1] print filename, "is", w, "x", hIt was equally easy to scale it to half its original size, then write it to a file:
newim = im.resize((w/2, h/2))
newim.save("small-" + filename)
Wow, that's great! How about EXIF -- can you read that? Yes, PIL has a module for that too:
import PIL.ExifTags
exif = im._getexif()
for tag, value in exif.items():
decoded = PIL.ExifTags.TAGS.get(tag, tag)
print decoded, '->', value
There are other ways to read exif -- pyexiv2 seems highly regarded. It has documentation, a tutorial, and apparently it can even write EXIF tags.
If neither PIL nor pyexiv2 meets your needs, here's a Stack Overflow thread on other Python EXIF solutions, and here's another discussion of Python EXIF. But since you probably already have PIL, it's certainly an easy way to get started.
What about the query that started all this: how to find out whether an image is portrait or landscape? Well, the most important thing is the image dimensions themselves -- whether img.size[0] > img.size[1]. But sometimes you want to know what the camera's orientation sensor thought. For that, you can use this code snippet:
for tag, value in exif.items():
decoded = PIL.ExifTags.TAGS.get(tag, tag)
if decoded == 'Orientation':
print decoded, ":", value
Then compare the number you get to this Exif
Orientation table. Normal landscape-mode photos will be 1.
Given all this, have I actually rewritten resizeall and rotateall using PIL? Why, no! I'll put it on my to-do list, honest. But since the scripts are actually working fine (just don't look at the code), I'll leave them be for now.
09:33 PM
Shaun Inman’s Last Rocket is fun to play, and now he’s shared an equally entertaining insight into its development process. What interested me most was just how much the game changed over time. It was truly a process of whittling it down until its release.
The book is bite-sized too; I read it on a flight from Cebu to Hong Kong. Check it out and support Shaun’s work in the process.
Permalink
07:00 AM
I love using Trajectory to manage the development of our apps. Its interface is clean and straightforward and it satisfies all our needs for emergent planning. Mo