MathJax, MathML, and WordPress

 General, Technology, WordPress, XML  9 Responses »
Jun 242014
 

I’ve been work­ing at Design Sci­ence for a couple of months now, as Seni­or Product Man­ager con­cen­trat­ing on the Math­Flow products. So I figured I should enable Math­ML sup­port on my blog. It’s not hard, but like everything in tech there are a few nig­gly details. Many of those issues are caused by Word­Press’s over-eager help­ful­ness, which has to be reined in on a reg­u­lar basis if you’re doing any­thing at all out of the ordin­ary. Like edit­ing your posts dir­ectly in HTML rather than using some pseudo-WYSI­WYG editor.

The­or­et­ic­ally, show­ing Math­ML in a browser is easy, at least for the sort of equa­tions that most people put in blog posts, even though not all browsers sup­port Math­ML dir­ectly. You just use the Math­Jax JavaS­cript lib­rary. On Word­Press there is even a plu­gin that adds the right script ele­ment, the Math­Jax-Latex plu­gin. You can make every page load Math­Jax, or use the [math­jax] short­code to tell it when to load.

The wrinkle comes with Word­Press’ tend­ency to “cor­rect” the markup. When you add the Math­ML, Word­Press sprinkles it with <br/> tags. Math­Jax chokes on those and shows noth­ing. Since the tags don’t show up in the edit­or view, you need some way of stop­ping Word­Press from adding them. The best way I’ve found is with the Raw HTML plugin.

But there’s a wrinkle with that too. For some reas­on if you use the short­code ver­sion of the begin and end mark­ers ([raw]) the edit­or decides that the XML char­ac­ters between those mark­ers has to be turned into the char­ac­ter entit­ies, so for example the < char­ac­ters are turned into &lt;. To stop that, you need to a) check all the check­boxes in the Raw HTML set­tings on the post, and b) use the com­ment ver­sion (<– raw –> and <– /raw –>) to mark the begin­ning and end of the sec­tion instead of the short­code version.

Once it’s done it’s easy to add equa­tions to your pages, so it’s worth the extra few minutes to set it all up.

A couple of examples taken from the Math­Jax samples page

Curl of a Vec­tor Field
∇→×F→=(∂Fz∂y−∂Fy∂z)i+(∂Fx∂z−∂Fz∂x)j+(∂Fy∂x−∂Fx∂y)k
Stand­ard Deviation
σ=1N∑i=1N(xi−μ)2

and one from my thes­is from way back when

fλ=n!⁢∏i<k(li-lk)l1!⁢l2!⁢⋯⁢lr!

No password issues

 Identity and Privacy, Technology  2 Responses »
Jan 212014
 

In prin­ciple I’m in favour of the ‘log in with X’ way of doing things (mod­ulo user exper­i­ence issues such as try­ing to remem­ber which ser­vice you picked to sign up with in the first place). There is, how­ever, more to it than that in some cases. Example: using the online repos­it­ory ser­vice bit­buck­et.

Sign­ing up in the first place with one of my Google accounts worked as expec­ted. The next step, of adding a git repos­it­ory and push­ing files to it, was a little more com­plic­ated. You need to use a reg­u­lar pass­word for git push and, of course, bit­buck­et does­n’t have the pass­word for my Google account. And I did­n’t have a reg­u­lar pass­word for the account, hav­ing set it up using my Google account, so I had to go through the pass­word-reset dance to cre­ate a new pass­word that bit­buck­et is allowed to know.

In oth­er words, for these sorts of ser­vices I need a pass­word that the ser­vice is allowed to know; log­ging in with oth­er ser­vices is an add-on but not a replace­ment. This isn’t hard to under­stand when you stop and think about what’s going on (in the browser the ser­vice relies on a lot of browser redir­ects which aren’t avail­able in the com­mand line), but it did take me a minute or two to fig­ure out that I would have to reset my here­to­fore blank pass­word to get one that I could use. (Bit­buck­et also sup­ports SSH iden­tit­ies and I’ll prob­ably set that up instead of the password.)

Spaghetti with HTML and CSS

 Technology, XML  1 Response »
Oct 222013
 

I see the dis­cus­sion about how best to struc­ture your HTML+CSS to be both appeal­ing to the read­er and easy to main­tain is con­tinu­ing; see The Semant­ic CSS Debate for some of it and links to more. What par­tic­u­larly struck me was this sentence: 

I now find myself act­ively advoc­at­ing against lib­rar­ies like boot­strap due to the long term main­tain­ab­il­ity issues their approach to CSS causes.

On the sur­face, this appears to be one issue that tem­plat­ing sys­tems can help solve. Wheth­er you use XSLT to gen­er­ate a web site from Word doc­u­ments or XML, or some­thing like Jekyll (which I use for the Tex­tu­al­ity web site), or a data­base-driv­en sys­tem, to gen­er­ate the site, you should be able use both a frame­work such as boot­strap and your semant­ic con­tent. You do have to be pre­pared to put in an inter­me­di­ate step, that of gen­er­at­ing the out­put from the input and plan in advance for the fact that you may wish to switch from format a to format b.

This seems to me to be a logic­al way of doing things, or maybe it’s simply because I’m steeped in the idea of cre­at­ing the data in a format that can be trans­formed to an appro­pri­ate out­put format. This idea does make the choice of out­put format (in this case pre­cisely which HTML + CSS frame­work to use) some­what less daunt­ing, or rather, the cost of chan­ging it later some­what less (although not neg­li­gible since the trans­form­a­tion sys­tem needs to be changed).

Dis­claim­er: yes, I do write my blog posts using pointy brack­ets. Word­Press provides a tem­plat­ing sys­tem which enables chan­ging styles fairly read­ily; all I write by hand is the con­tent with­in the main con­tent block.

Removing Devices

 Rants, Technology  1 Response »
Oct 142013
 

I’m on my third Android phone now, and appar­ently there is no way to delete the pre­vi­ous phone(s) from my Google Account. The Android Device Man­ager sup­port page tells you how to find the phone and wipe it, but I wiped them before passing them on to new homes. And I don’t care about their cur­rent loc­a­tions. You can hide a device from the list, but not delete it, and I’m puzzled as to why. Do they need a list of all pre­vi­ous own­ers of any device? Why?

And, the page to revoke access to Google accounts from these old devices still looks some­thing like this:

Google account revoke access page

and does­n’t tell you which device or account is meant by ‘Android Login Ser­vice — Full Account Access’. I guess I could turn off each one in turn and see which I need to turn back on, but it should be pos­sible for Google to put some identi­fy­ing inform­a­tion there to help with the pro­cess, even if it’s only the date on which access was requested. 

TIL: Drupal 6 -> 7

 Technology  No Responses »
Oct 092013
 

One of my web­site cli­ents has a Drupal site, and it was time to upgrade from Drupal 6 to 7. Drupal is one of those vastly com­plic­ated, able-to-do-any­thing plat­forms that is part blog­ging soft­ware, part CMS, and part play­ground for PHP developers, with the inev­it­able res­ult that Drupal 7 is a worth­while upgrade over Drupal 6, but requires more than a little time to fig­ure out what needs doing. Thanks to Shane at Left Right Minds who poin­ted me in the right dir­ec­tion on sev­er­al occa­sions. With power comes com­plex­ity and there are many ways to get things wrong.

As always, the basics are clear: use a devel­op­ment site for the upgrade to get all the issues out of the way while not affect­ing the pro­duc­tion site. Allow more time than you think you will need. Ensure an adequate sup­ply of chocol­ate and/or cof­fee. Take breaks as needed.

Copy the files on the pro­duc­tion site to the devel­op­ment site (which I’m call­ing {yourdevweb­site}). Cre­ate a backup and restore that on the devel­op­ment site. Next time: turn off cach­ing and clear the cache before mak­ing the backup. Make sure cach­ing is turned off while developing.

List all the mod­ules on the cur­rent site, see if they have Drupal 7 equi­val­ents. Spend some time fig­ur­ing out wheth­er the new ver­sions are worth­while, or if there’s a bet­ter way to add func­tion X in Drupal 7 (ask­ing an expert, like Shane, is really help­ful at this stage).

Upgrade the core by installing Drupal 7, solve any issues. If the pre­vi­ous sysad­min changed the defaults so none of the menus appear to work, go to {yourdevwebsite}/admin/structure/menu to reset them to the defaults.

Drupal 7 allows upgrad­ing mod­ules from a URL, yay! So the pro­cess of upgrad­ing mod­ules turns into a fairly simple one , if no errors crop up. The first step is to determ­ine the order in which to upgrade the mod­ules — Backup and Migrate should be the first, Con­tent Con­struc­tion Kit (CCK) second since it requires some field con­ver­sion. Then Date, Token, and Views (nev­er under­es­tim­ate the power of a View). Once you have those basics done, upgrade the oth­er mod­ules in whatever order makes sense. I like to order things so I fix what’s on the front page of the web site first, then the oth­er pages.

  1. Go to {yourdevwebsite}/admin/modules/install, add the link for the latest stable Drupal 7 ver­sion, and install. 
  2. Enable the mod­ule, then run {yourdevwebsite}/update.php
  3. Fix any errors.
  4. Run the backup to back up the changes.
  5. Con­fig­ure the mod­ule, adjust menus, etc, until the mod­ule more or less does what you need. Final tweak­ing can wait until all the mod­ules are installed, but get the main func­tion­al­ity in place for each mod­ule as you upgrade it.
  6. Repeat for your list of modules

Be aware, some mod­ules just don’t work in Drupal 7 and for those you need to find anoth­er way to get that func­tion­al­ity. Some mod­ules (e.g., Cal­en­dar) changed the way they work between Drupal 6 and Drupal 7. Some mod­ules use the stand­ard con­fig­ur­a­tion meth­ods, oth­ers (Cal­en­dar again) are con­figured using dif­fer­ent methods.

Drupal 7 lets you split lib­rar­ies and the mod­ule. For example, a good way to install the CK edit­or is to get the down­load from the web site and put in /sites/all/libraries. Then install the CKed­it­or mod­ule, which will use that lib­rary via the lib­rar­ies API.

IMCE is a nice image and file browser/uploader.

When it comes to updat­ing themes, be aware that even if the theme has the same name as one in Drupal 6, it will prob­ably have sig­ni­fic­ant changes. Respons­ive design tech­niques and the avail­ab­il­ity of more base themes con­trib­uted to this, as well as the changes due to the actu­al plat­form. Expect to spend more time than you expec­ted to tweak the theme back to some­thing approach­ing the ori­gin­al look and feel (assum­ing that’s what the cli­ent wants).

Allow time for train­ing people on the new fea­tures. Even an hour or two helps.

Teaching HTML5

 Presentations, XML  2 Responses »
Aug 272013
 

For the XML Sum­mer School this year, I’m teach­ing about HTML5, CSS3 and ePub in the Hands-on Web Pub­lish­ing course. The basic premise of the course is to show what tech­no­lo­gies are involved in tak­ing a bunch of Word doc­u­ments or XML files and turn­ing them into a decent-look­ing web­site or ePub. The course includes les­sons on rel­ev­ant bits of XSLT trans­form­a­tion (since Word is XML under the cov­ers, if you dig deeply enough), script­ing in Ruby to auto­mate as much as pos­sible, and, of course, enough inform­a­tion about HTML and CSS that people can make a decent-look­ing web­site in class in the hands-on part.

As a start­ing point for the exer­cises, we’ll use a gen­er­ated tem­plate from HTML5 boil­er­plate, since, if you pick the right options, it is rel­at­ively clean and simple to under­stand. Look­ing at the cur­rent com­mon design prac­tices used across a num­ber of options (HTML5 boil­er­plate, Boot­strap, Word­Press tem­plates for example) coupled with web com­pon­ents and the sheer size and num­ber of HTM­L5-related spe­cific­a­tions from WHATWG and the W3C, I’m won­der­ing just how much more com­plic­ated it can all get before the pen­du­lum starts swinging back again towards sim­pli­city and sep­ar­a­tion of con­tent from pro­cessing. Even a bare-bones tem­plate has a num­ber of lines in it to deal with older ver­sions of IE, or to load some JavaS­cript or (mostly) jQuery lib­rary. It’s no won­der we’re start­ing to see so many frame­works that try to cov­er up all of that com­plex­ity (Boot­strap again, or Ember, for example). 

In the mean­time, at least I have a reas­on­ably con­strained use case to help me decide which of the myri­ad pos­sib­il­it­ies are worth spend­ing time teach­ing, and which are best left for the del­eg­ates to read up on after the class. 

 Older Entries  Newer Entries
/* ]]> */