display | more...

Not a real log but a bit of a concept that people might want to mull over.

Above the box I am typing in it tells me "Turn on WYSIWYG editing if you prefer to see roughly how the writeup will look as you enter it, rather than entering HTML tags by hand. Note that you will lose the current contents of this text area." Hey it sounds like a good idea, I even tried it myself once.

It isn't a good idea. It introduces weird formatting into writeups (noticed writeups lately with extra carriage returns between each paragraph, thank tinyMCE), loads the html down with code that we can't even use, and god forbid you even think of pasting in rich text because if you do that then it will really destroy the formatting and specify the font dozens or hundreds of time within the writeup, doing so right in the middle of words, creating a sick monster of a writeup that is almost impossible to edit later.

I am not saying that a WYSIWYG editor on E2 is a bad idea, but tinyMCE creates sick code that gets even sicker if it is pasted in, and last time I checked we weren't really supposed to be typing our nodes directly into the box in the first place.

Why not use that same space that advertises tinyMCE and tell new users how to make a hard link, you know the thing with the square brackets that 95 percent of all new users don't include on their first writeup and then often flee afterwards because they get all downvoted to hell.

So really now, how about a big honking message right there over the submit box for newbies telling them how to make a hardlink. Save that other advice up there for when they are level 2.

How Not To Develop An E2 Zen Theme: A Cautionary Tale

Recently I decided I'd like to have a crack at CSS and make a Zen theme of my own.

I did not know anything about CSS at the time, and I do not know much more than that now.

I was messing around for a while, gradually building up a colour scheme and style that I liked (I personally don't think there's much wrong with E2's default layout), but not initially knowing that Opera - my browser of choice - appears to cache stylesheets and not thinking to try a CTRL+refresh, I moved over to Firefox for a slightly easier developing life. After a few days of poking it to see how it twitched when I did, the Firefox theme was more or less complete.

It will probably surprise few to hear that when I loaded this theme up in Opera, it looked absolute gash. The layout was completely broken, and since my theme uses intersecting borders as separator bars for several sections of the page it's important that the various elements align as they should.

Now having actually thought to try forced refreshes on Opera, I moved over to develop it there. Still wrestling with how alterations to different CSS element properties affected page layout, I decided that rather than try to force the square peg of my Firefox theme into Opera's, um, round hole, I would start it again from scratch. Fine.

After another day or so of prodding the theme was progressing nicely, but I was frustrated by small details. Portions of pages were not quite lining up as they should which, as anyone who knows me will not be surprised to hear, drove me absolutely nuts. I just could not figure out what was calling this misalignment of elements, and they had to be pixel-perfect.

My last resort, after trying to reposition various things and it having no effect on the alignment problems, was to "remove" various elements of E2 pages from my style; I use quote marks because I was not actually removing these elements, just setting them to not display. Those elements would still be present in the pages that E2 was serving to my browser, but as per the stylesheet's instructions it would not display them. Fair enough so far.

So I started plodding through my stylesheet, "removing" elements one at a time in the hope of eventually removing the one that was breaking the layout.

Before I continue it's worth noting a couple of things. Firstly, I was using browser tabs to develop my stylesheet. Tab A contained the edit page for my theme, and tab B contained a random writeup. Whenever I updated the theme in tab A, I would do a force refresh on tab B to see how the changes affected the way E2 rendered. I never did a force refresh on tab A, in case my changes caused the layout to go all loopy and stopped me from undoing them for whatever reason.

Secondly - and this is more for the benefit of those who haven't read Simulacron3's various nodes on Zen theme development, or aren't coders here - every E2 page consists of three basic elements: the header (which contains the 'Everything2' masthead and the search box), the mainbody (which contains writeups and their edit windows) and the sidebar (which contains all the nodelets you have chosen to have visible).

I guess some of you can probably see where this is going.

I was plodding merrily along, removing elements one at a time, over and over again seeing no change to the aforementioned alignment problem. This became somewhat automatic; pasting "display: none;" into a CSS statement in tab A, refreshing tab B and seeing the same broken layout. Usually accompanied by a sigh.

So yeah, by the time I finally reached my stylesheet's #mainbody statement and pasted "display: none;" into it, a horrific inevitability had long coloured the proceedings.

I refreshed tab B and, after the customary pageload delay, frowned at the result. For a few seconds I wondered where E2 had gone. As the moments passed, my eyes widened and my mouth opened slightly as I realised what I had just done, and flicked back to tab A only to be confronted by another gaping window of blackness. I spammed the 'back' button in both tabs, but was only greeted by the same accusatorily blank page.

Without thinking, I had set the mainbody section of all E2 pages to be invisible.

The mainbody section contains all nodes and their edit windows. It also contains the edit window for stylesheets.

The very nature of the error I had just made prevented me from correcting it.

I flicked over in my head what I could do now. I initially assumed the worst case: that I had to all intents and purposes incapacitated my E2 account. This isn't nominally the end of the world, but unfortunately in this case, all Zen themes are visible and available for consumption by any registered user! Anyone that tried my theme would also lose a major part of E2's functionality.

I quickly then created another user account so I could use it to contact a god to get my theme edited, or at least killed. Then I thought to check my own account again: fortunately I had not got to the sidebar yet and it remained, hiding off one side of the page. As I had the catbox nodelet displayed (if I had disabled that in my user settings, this account would temporarily have been quite screwed) I was still able to send messages, so I spoke to the first god I saw. TheDeadGuy pointed me in the direction of the magnificent Oolong, who soon removed the offending code from my stylesheet, congratulating me on my "wonderful mistake" after doing so.

As far as I know there was never any collateral damage (and my themes are quite safe for consumption - promise!), but it was rather a heart-in-the-mouth moment. I broke E2. Only nominally for me, of course, but I still broke it. An incredibly stupid mistake to make.

To this day (I say, theatrically, as if I didn't do this just a few days ago) I don't know why this error had also affected my 'editing' tab, and I'm sure I will get some messages following this telling me how I could have got out of this without involving anyone else, but there we are. A lesson learned. Don't bring da CSS unless you're paying attention, and Opera always caches stylesheets... usually.*

I can't even remember what was breaking the layout now.


*Not that the absence of this in other browsers would have permitted avoidance of the problem.

Also, thanks to XWiz, Waldermarxkul, DonJamie, ascorbic, Oldminer, e-lainey and solaraddict who have messaged me with advice following this writeup.

A brief update re: Dell Ubuntu Laptop

Iris's Debian baptism is, for all intents and purposes, complete. I installed all the developer tools on her that I'll need for contributing to GNU Octave, e2, and Debian itself. I got all of the hardware working again, with a few minor snags. For the record, here are the things that I can't get working yet:

  1. Wireless is a little flakey. It seems to wimp out more easily than before if the signal strength isn't good enough
  2. Suspend, hibernate, and battery status isn't fully working.
  3. My X fonts are too big.

I think number 1 will be eventually fixed as Intel improves its mostly open driver (turns out it needs binary firmware, so it's a blob after all). Number 2 I think I know how to fix, but it involves recompiling a kernel. Number 3 just needs a magic invocation in the config files that I haven't figured out yet, but it will happen.

On the upside, I got 3d effects working more beautifully than I had ever seen. I've also decided to use the GNOME desktop, ditching KDE after many years of service. Everything else also works beautifully in Debian now (although it took quite a bit of tweaking).

Iris is finally the Debian lappy I always wanted her to be.

Log in or register to write something here or to contact authors.