Author: Lise

Hi, I'm Lise Fracalossi, a web developer, writer, and time-lost noblethem. I live in Central Massachusetts with my husband, too many cats, and a collection of ridiculous hats that I rarely wear.

#TBT, the text edition (Thursday, January 22nd)

I love the idea of Throwback Thursday, but I never participate — mostly because I seem to perpetually lack pictures of myself.

Words, however. I’ve got words in abundance.

So have some words from the past.

January 22, 2004. So…. if I got a webcam so that I could keep an eye on Burnbright during the day while I’m at work, would that be a redeeming use of a webcam? (I suspect this wasn’t long after I got him — which I think was in November of 2003)

January 22, 2006. After seeing this casting questionnaire for a LARP I’m attending at InterCon this year, holy shit, I’ll never complain about casting questionnaires again. This one is quite literally likely to reduce me to tears. My favorite “bug-eyed monster”? My favorite universe? Essay questions involving theremin and Vogon poetry? ::cries::

Holy shit, that was for Across the Sea of Stars, at my very first Intercon, Intercon F. Man… I was complaining about casting questionnaires even then? When I had filled out, what, two of them? (And, um, sorry, Jeff D. I understand the purpose of casting questionnaires a lot better now).

Also I believe that the job interview I’m preparing for (mentioned at the end of the entry) is for the job I eventually accepted (and eventually lost) at an educational marketing company. DON’T DO IT, LISE. DON’T GO INTO THAT SCARY CAVE.

January 22, 2007. HOLY SHIT VETIVER. Ah, so this was when I was first discovering BPAL. Little did I know then how much Matt would end up liking Highwayman, and how little subsequent bottles would smell like that imp.

Arisia 2015

Importing this post from LJ; please excuse the markup.

I hadn’t been to Arisia in… possibly a decade? I know the last time I went it was at the Ziggurat/Q-bert Hotel/the terrible Hyatt in Cambridge, and there was a snowpocalypse that weekend, and we drove home to Watertown in that. At that time, I promised I wouldn’t go back until it was not at that hotel. That took five years or so, and at that time I wasn’t attending many conventions besides LARP ones.

But this year, the delightful Phoebe R. had a show, Mrs. Hawking, going up on Friday night, and having read the script, I really wanted to see it performed. Plus, N.K. Jemisin, whose work I enjoy, was the author GOH, and I thought she would have some interesting things to say. And, of course, there’s the fact that nearly all my friends go — the ones that aren’t doing Mystery Hunt, that is.

So I bought a membership very last minute, and went! I had an amazing time, too. There was some concern that I wouldn’t be able to make it to the con in time for Mrs. Hawking, but I was able to work remotely from the hotel on Friday afternoon, so that worked out well.

Things wot I did:

– A long-ish wait in the registration line with my roomie natbudin on Friday night, in which I ran into approximately everyone I knew, ever.

– Went to Mrs. Hawking, which was wonderful to see staged, especially the action scenes. Things like the scene at the club — where Mrs. Hawking uses a knife as a step to climb up into the rafters — worked surprisingly well with the set. (I suppose not that surprising, since the set was basically a deconstructed jungle gym). If I have any complaints, it’s that the sound wasn’t great, and I ended up having to move to the front rows to hear better.

– Attended the “Tricksters of All Trades” panel on Friday night, with Jemisin, Andrea Hairston, Daniel José Older, Vikki Ciaffone, and Catt Kingsgrave. What an entertaining panel! A lot of it was Older and Hairston talking about Yoruba gods and Santeria orisha who were tricksters, like Eshu and Elegba. This was fine with me, since they were clearly very excited about the topic, and brought that to the table. It succeeded in making me want to read Older’s new book, Half-Resurrection Blues, if nothing else! Jemisin talked about the tricksters in the Inheritance trilogy — primarily Sieh — and very obligingly told us all to cover our ears at the right point if we didn’t want to be spoiled on The Awakened Kingdoms. (I’m making my way through The Broken Kingdoms right now).

– Went to Tess’ Friday night party — sadly, never made it to laura47‘s — which was mostly WPI grads and related folks. I talked with Brian E., who was wearing a great Earthforce uniform, about the Elder Scrolls for a while (“are you in the Morrowind camp, the Skyrim camp, or the wrong camp?”) and to hanasaseru about Cottington Woods. I drank moscato and a Dark & Stormy that was mostly rum; sprrwhwk showed up later in the evening, and we ended the evening chatting in his room, drinking most of a bottle of Templeton Rye — the favorite drink of Al Capone, I’m told!

– I spent most of Saturday with the worst hangover of my life — and blind, because I had thrown out my disposable contacts before I realized I’d forgotten to bring my glasses or any other pairs with me 🙁 As a result I went to very few events, but in the afternoon, I was able to catch up with juldea, who had a similar prescription to me, and used the same brand of disposables, and gave me some of hers.

– I did stop in at the “Avoiding Culturefail” panel, but I ended up feeling so sick I had to leave. It didn’t help that the room was approximately 300 degrees, I couldn’t see the panelists, and they kept talking not about how to avoid culturefail in writing SFF, but the ethnic makeup of the U.S. post-WWII. While that could be an interesting topic, a) that wasn’t what the panel was about, and b) it wasn’t.

– Able to see and feeling half-human, I went to Jemisin’s reading at 4pm. She had three unpublished pieces in the world of the Inheritance trilogy she could read, and she let the audience vote on which — one from the POV of Glee (Oree’s daughter), one from the POV of Nahadoth, and one from the POV of… a character I haven’t met yet. Well, since I’m not far enough along in The Broken Kingdoms that I wanted spoilers about Oree or her offspring, I voted for Naha, and so did most of the audience. So we listened to a really cool piece, set before The Hundred Thousand Kingdoms (I think? Time is wibbly-wobbly if you’re a god), which was about him being convinced to fight back against the Arameri.

I had questions I wanted to ask about the piece in the Q&A, but unfortunately, we were subjected instead to inane questions like, “What do you think the future of books is?” (To which Jemisin replied, “… could you be a little more specific?”) and “Why did you decide to write this piece?” (“For the same reason I write anything?”)

– A Codex dinner was planned, but fell through; I ended up having drinks at the bar with John Murphy, Joy Marchand and her husband, and the aforementioned Kevin (who it is uncanny to hear called “Kellan.” I will never get used to calling friends by their pen names). I tried to convince Joy to come to Intercon or Festival, as she was interested in trying out LARP; John told us about the “Ain’t Nobody Got Time for That” anime panel, which apparently went pretty far off the rails, and didn’t actually discuss short series, like it had promised to. Instead we gave him some of our suggestions — Baccano, Spice & Wolf, Madoka, and of course I had to mention Hellsing and Gankutsuou 🙂

– I went to PMRP’s gender-swapped radio play of “Space Seed,” the famous classic Trek episode that introduced Khan. It was delightful — nothing like gender reversal to really make it clear how creepy 1960s sexism was! Adria–who I know from NPCing Shadows of Amun, and who most people know for being on The Quest — played Spock, and was delightful in that role. Liz Salazar (I think that was her name?) who played Khan was amazing too, as was the gentleman who played the unfortunate historical officer Khan seduces.

– I browsed the art show, since the dealer’s room wasn’t open that late on Saturday night. I especially liked the photography series of cosplayers/costumers in costume and in street clothes. I also really enjoyed the exhibit for the artist GOH, Lee Moyer, who I did not realize had done the cover for The Broken Kingdoms and for one of the Kushiel books. And, apparently, several Lovecraft collections; there were a few HPL-with-tentacles portraits. If I had $375, I would have taken one home! I also enjoyed his series of gender-swapped classic author pinups (i.e. Miss Carroll, Miss Dumas).

– While in the art show, I noticed a guy dressed in what I noticed immediately was cavalier-era garb (I guessed 1620s at first). This is impressive, because while Arisia has a lot of cosplay, most of it (that isn’t re-creation) tends towards the medieval or steampunk; the cavalier era doesn’t get a lot of love. I asked him about it, and he told me he was part of the Salem Trayned Band, a re-enactment group of one of the first civilian militias in the U.S., dating to around 1630. I missed their pike demonstration, alas, but I saw him later on the “So You Think You Can Write A Fight” panel.

I turned in early on Sunday, due to my severe lack of sleep the night before, and was up, feeling mostly human, at 9am the next day…

– The first panel I made it out to on Sunday was the end of the “So You Think You Can Write A Fight” discussion, where audience members read fight scenes they had written, and the panelists critiqued them. Among the panelists I recognized not only Uncle Jim (who I expected), but also aforementioned re-enactor (Mark Millman?), giving advice on halberds, and Gie, who I knew not as an editor for an SFF erotica magazine (which she apparently is!) but as someone I played Masquerade with, back in the day. To me she will always be the Assamite cheerleader who wanted to be a Toreador. Who also, apparently, knows a lot about martial arts and writes lesbian vampire pr0n.

– I ran into John Murphy again at this panel, and together we ended up going to “Tales from the Slush Pile,” held in a room which was entirely too small for its popularity. Gie was on this panel, as well as Joy Marchand, Cecilia Tan, Joy Crelin, Hildy Silverman, and Inanna Arthen. Since many of these editors dealt in erotica, a lot of the examples of terribleness from the slush pile were bad smut. Although, kudos to Gie for pointing out that sometimes the line between ridiculous and hot is paper-thin.

– I spent some time in my room writing after this. I wanted to prep for my 4pm event (more on that in a minute), but I happened to look at the writing prompts for this week’s round of the Codex flash contest, and one of them sparked an idea for a short piece in the world of Lioness, telling the story of how Yfre ended up accused of treason and nearly hanged. The prompt in question was “someone has made a terrible mistake and someone else must pay for it,” which is pretty much the definition of what happened to Yfre. I knew I couldn’t make it 750 words without ruining it, however, so I was in no hurry to finish that day. Which is fine, because nevacarusoand Nat came back to the room around then, and we ended up chatting about various things.

– I headed off at 4pm to my final event of the con — the pitch session with Nora Jemisin, which I had to sign up for ahead of time. To be fair, this was really more of a practice pitch session — as she pointed out, she’s not an agent or an editor, and her agent is pretty much not taking new clients. (I did query her already!) So I got my ten minutes with her, pitching G&F. My pitch came in under five minutes, which was the perfect length, and she said she was intrigued by it, but offered suggestions for making it better. One of the best pieces of advice she gave me was when I asked how to deal with the fact that there are two protagonists, but trying to focus on both in a query letter comes out muddled. She suggested I send the Serevic-focused one to male agents, and the Mirasa-focused one to female agents — because everyone wants to read a story with a character of their own gender. I had never thought of doing that before, but it makes perfect sense.

I mentioned I was also a VP grad, and we chatted very briefly about that. (I asked her if The Hundred Thousand Kingdoms was her submission piece; she told me it was actually The Killing Moon, it just took a lot longer to sell).

All in all, she was cordial and complimentary of my pitch, which left me a bit reeling! I tried not to be too much of a fangirl, but I did tell her in parting how much I enjoyed her work.

And that was the end of the con for me! I had to go home Sunday night because someone was coming to my house the next day to fix my central vac. Also it’s pretty much all I feel up for writing, because I have come down with a cold and feel like my head is stuffed with cotton.

Abbreviated BPAL Yule 2014 reviews

I have a bunch of testers of this year’s Yules. I need to test them before the Yules come down in February. Unfortunately, I am busy as hell and don’t have a lot of time to even put on perfumes, let alone write down my impressions. But if I don’t, I won’t remember anything, and getting testers (which is like a 1/4 of an imp) means I don’t have a lot to work with.

So far I have tried:

Butter Rum Cookie. Rum-soaked brown butter cookies, crusted with sugar, soaked in almond and garnished with orange rind and pummeled pecans. Pretty good. More cookie than rummy. Not sure I need more foody scents.

Chocolate Stout Cupcakes. Bittersweet chocolate cupcakes whisked with stout and topped with inky dark chocolate frosting. This oil has a lot of dark sediment in a lighter base. For about a nanosecond, this smells perfectly like chocolate frosting. Then it starts to just smell generically sweet and a little playdo-y.

Mari Lwyd. Welsh cakes and ale with a smattering of dried lavender. This one is a winner for me. The lavender doesn’t become overpowering or sneezy or awful, and mostly just mellows out the foody notes, which can be too heavy on their own. On drydown, it reminds me a bit of Tweedledee/Tweedledum, in that it’s something sweet anchored by something base.

I think I also tried Hot Buttered Rum? It smelled as advertised, which is probably too foody to add to my currently INCREDIBLY FOODY collection.

Lise’s HTML/CSS pet peeves, part 3 of 4: misuse of the !important flag

Remember these posts? I’ve been holding off on posting #3 because I realized I didn’t have as much as I thought to say about “nudging” with absolute and relative positioning. I would much rather talk about misuse of the !important flag. So, slight change of plan: I’m going to do that first.

Lise, what the hell is !important?

Not, in fact, a philosophical question.

If you’re a hobbyist CSS-slinger working mostly with your own code, you might not have ever heard of the !important flag. It’s the kind of thing that only really becomes relevant in large stylesheets, and usually only those touched by multiple developers.

I still recall, with something less than fondness, the first time I saw it. I was contracting as a front-end developer at a company that really wanted me to also be a designer and a back-end developer (for $30/hour — ha!) At first glance, I thought it was some sort of comment, like “this is important, do not delete.” I had to look it up.

What !important does, if you are unfamiliar, is move a CSS attribute to the head of the cascade.

So what’s the problem with it, Lise?

!important is kind of like a pushy jerk cutting in line, breaking the order which is the core of, you know, cascading style sheets. This is kind of a nuke-like power, and so it is important to use it sparingly.

So you say. Can you give me an example?

Let’s say you’ve just realized, after writing a bunch of CSS already, that you want ALL the <p> tags on your page to have a font-size of 15px, rather than setting it individually. You might write a style like this:

p {
	font-size:15px;
}

As it happens, you also have a div called .box that has <p> tags inside of it, and you look to see that *gasp* these paragraphs are not obeying your command. They have a font-size of 14px, even though you said, right there on line 101, that all <p> tags should have a font size of 15px! This must not stand! You “fix” this by applying the important flag:

p {
	font-size:15px !important;
}

Whew. Problem solved, right? Your paragraph has a font-size of 15px, everyone is happy.

But… what you may not have realized is that, somewhere lurking in your stylesheet, there’s a style that says:

.box p {
	font-size:14px;
}

… which you have just knocked over and taken the lunch of. Someone else — or an earlier version of you — has decided that paragraph tags within .box get the font-size of 14px, and you have just shot that style right in the head.

And? So what, Lise?

What happens if someone wants to override this style for another set of .box p elements? They will need an !important tag to override THAT style.

In a long enough stylesheet, you end up with an escalating war of the !important tags.

If this doesn’t seem that bad to you, imagine working on thousands of lines of CSS, much of it written by other people — which is what I do every day. The temptation in that instance, when your precious style is being overridden by something unwanted higher in the cascade, is to pull the pin on the !important grenade. It’s this use case:

  1. WHY IS MY FRAGGLE ROCKING CSS NOT WORKING INTERROBANG
  2. (use !important rule)
  3. OK, now it’s working

“When Using !important Is the Right Choice,” Chris Coyier, css-tricks.com

And yet, this is exactly the sort of place where you should not do this.

All right, I’m beginning to see. So what should you do instead of applying an !important flag and breaking the cascade we all know and love?

Some options:

– You can change or get rid of the style for .box p. Not always possible, but if you are the only front-end developer working on a project, you can refactor all you like. (Oh, for that kind of freedom!)
– If what you are trying to accomplish is: “All paragraphs have a font size of 16px, except for the ones inside of .box… oh, except for this one example,” the best thing to do is to work with the cascade by making a more specific style. Maybe you want a special sort of .box, a callout box, to have a larger font size. So you set:

<div class="box callout">
</div>

And then set a style of:

.box.callout p {
font-size:16px
}

(This is also an example of modular CSS, which I like).

Cascading makes my head hurt.

Here’s a rule of thumb: the longer the style declaration, the more specific it is. Everytime you add a selector, you make it more specific.

Is there anything !important is good for?

!important is very useful for overriding styles you don’t want that come in from sources you can’t control, like inline styles on social media sharing buttons. Have no compunction about overriding Facebook’s shitty JS-applied inline styles for its Like button. It won’t hurt Zuck’s feelings any.

Go back to: Part 1 | Part 2

Lise’s HTML/CSS pet peeves, part 2 of 4: clearer divs

This post is about another of my front-end web dev pet peeves: clearer divs, and associated float/clear madness.

(For those of you not webbily-inclined, we are not talking about what happens when you flush the toilet. It is — slightly — more pleasant than raw sewage).

Clearer divs fit under the category of “extraneous markup”, but I’ve given them their own bullet point because they INFURIATE me. Seriously, seeing a document riddled with this:

<div class="clearfix"></div>

Or worse yet:

<div style="clear:both;"></div>

…is enough to send me into a raaaaaage.

To explain the annoyance factor here, I need to explain a little about floats and clears for the front-end web dev n00bs in the audience. Most website layouts these days are based around multiple <div>s made into columns by applying the style “float:left” or “float:right” to them. Take this bit of markup:

<style>
#box {
   width:50%;
}
#left_column {
   width:20%;
   float:left;
}
#right_column {
   width:80%;
   float:right;
}
</style>
<div id="box">
   <div id="left_column">This is the left column</div>
   <div id="right_column">This is the right column</div>
</div>

The content within those <div>s will form themselves into two rudimentary columns which continue down the page indefinitely. Like this:

This is the left column and it goes on for as long as you have content to fill it
This is the right column and because it’s wider it can go on longer and longer and longer and longer and longer

Unfortunately, it’s that indefinitely wherein the problem lies. Elements that come after those two columns will continue to contort themselves to accommodate that float, unless you tell them otherwise. This can cause a number of strange behaviors that are boggling to CSS newbies — the source of 90% of problems when my friends come to me with their webpages and say, “You know CSS; make this work!”

“But Lise!” you say, “your two columns above aren’t have any problems.” Well, that’s because I have cleared them. If you know your way around Firebug/Chrome Dev Tools, try toggling off the style on #box. You’ll see something like this (picture):

Screen Shot 2014-10-02 at 6.58.57 PM

So floats are tricksy, like hobbitses. But they can be countered by the clear CSS property. I like to think of an element with “clear:both” on it as CSS Gandalf, spanning the width of the parent element and saying “None shall pass!”

… I’ve just compared balrogs and hobbits. This LOTR analogy is breaking down, so let’s leave it aside. Will miss pointy hat.

The easy, ugly way to clear a float is to put a new, empty element after it — within the parent element — with “clear:both” applied to it:

<style>
#box {
   width:50%;
}
#left_column {
   width:20%;
   float:left;
}
#right_column {
   width:80%;
   float:right;
}
.clear {
   clear:both;
}
</style>
<div id="box">
   <div id="left_column">This is the left column</div>
   <div id="right_column">This is the right column</div>
   <div class="clear"></div>
</div>

This will do the trick — your successive content won’t try to jump up into #box.

So what’s wrong with it?

Well, it’s non-semantic and extraneous markup, which we’ve already talked about a little. That <div> isn’t pulling its weight; it has no meaning on the page, and exists only for appearance reasons — rather like a Wodehouse protagonist.

Moreover, there are a bajillion (okay, five or so) other ways to clear floats (more) semantically. To name them:

Floating the parent (in this example, #box). Floated parent elements will expand to contain floated children. Understandably, this doesn’t work everywhere; you may not want that element to jog to the left.

Setting overflow:hidden or overflow:auto on the parent. This is the method I used above to wrangle our columns. Like with floated parents, elements with overflow:hidden on them will expand to contain floated children. It has a few cons to its use, however:

  • It’s not supported in IE7 or below. But none of us are supporting that any more, right
  • overflow:hidden interacts weirdly with box-shadows
  • Obviously, if you need a different value for the overflow property, this won’t work for you

That said, I find a lot of use for this one, and it tends to be my go-to clear method.

Set clear:both on an existing (unfloated) semantic element that follows. Here you’re doing what you’re trying to do with a clearer div, on an element that would be on the page anyway. Dependent though it is on a very specific structure, this method is worth mentioning because this is common way of building a two column layout — float one div left, float one right, and have a footer that spans the document beneath it. Put clear:both on the footer and you’re good to go.

The so-called easy clearing method (warning, dated), where you apply clear:both to an empty space inserted into the DOM via the :after pseudo-classes. I didn’t use this one for a long time, due to lack of support in IE7 or lower for these pseudo-classes. It’s also a tetch non-semantic. But with IE7 being phased out more globally, it has become the most generally applicable method of clearing something — all the previous methods only work in a subset of cases.

A slight improvement on this is the micro clearfix. If you use Sass with Bourbon, it’s the method you get if you use @include clearfix().

(And this is why I’m a front-end web developer — so I can say my job involves sass and bourbon).

One troubleshooting hint: if you’re seeing odd behavior on a page, and floats are involved, try inspecting the parent element in Firebug or Chrome Dev Tools. (You are using these, right?) If it appears with no height, and on selection doesn’t appear to wrap its child elements, there’s likely an uncleared float somewhere in there.

That’s enough info, right?

.
.
.

All right, all right. I will acknowledge there may be corner cases where you have to stick clear:both on a piece of markup that wouldn’t otherwise exist. But I have only rarely come across such cases.

In case this rant didn’t help you to understand floats and clears, I point you towards a couple of my favorite resources. They are both a few years old, but — aside from the browser bugs — floats and clears haven’t changed much in ten years.
http://alistapart.com/article/css-floats-101
http://css-tricks.com/all-about-floats/

Next time, HTML/CSS bugaboo #3 – “nudging” with absolute and relative positioning.

Lise’s HTML/CSS pet peeves, part 1 of 4

I’ve been a front-end web developer full-time since 2010, but I’ve been playing with HTML and CSS since 1997. I remember the paradigm shift from tabular layouts to CSS positioning. I remember IE for Mac. I recall the dark days before Firebug and Chrome Developer Tools. I remember *shudder* the <blink> tag.

And in that time, I’ve seen a lot of bad code*, mang.

In particular, there are four things I see again and again that bug me. They are newbie goofs, or they are the kind of things non-specialist** developers do. They are common mistakes which I guarantee I made a metric shitload of when I was first starting out.

I only hope that by sharing this, I can save you some time 🙂

The four pet peeves I’m going to address in four posts are:

  1. Extraneous markup
  2. Clearer divs (and general float/clear madness)
  3. Over-using absolute/relative positioning for “nudging.”
  4. Over-using the !important flag.

Let’s get right to the first one: Extraneous markup

This is rather broad, but let me give you an example, based on something I see a lot in my job:

<div id="box">
   <a href="#">
      <p>line 1 of text</p>
      <p>line 2 of text</p>
   </a>
</div>

The purpose of this markup is to make a link that spans multiple block-level elements. This is not default behavior for a link–<a> tags are inline elements by default in most browsers–but it is possible and a common need. <div>s on the other hand are block-level by default. In essence you’re making the link block level by wrapping it in a block-level element.

It works, but you have to make sure the link expands to fill the <div> so the whole block is clickable, being sure to account for padding, etc…

… or you could just make the <a> block level. Seriously. It’s one line of CSS: display:block;. Just do it, and can the <div>. It gives you this slightly neater HTML:

<a id="box" href="#">
   <p>line 1 of text</p>
   <p>line 2 of text</p>
</a>

(I just did a test in Chrome, and it looks like these days you don’t even have to set display:block; on the <a>. I’m pretty sure this was not always the case).

Other things that get my goat:
– “Spacer” blocks, i.e. empty elements that exist only to add space to a site design. Remember those days before CSS borders, when creating a vertical rule was hard? This is no longer the case! These days we have margin and padding and borders and outlines, and we should use them.
– Elements with no styles applied to them. If a tree falls in the forest and no one is there to hear it, does it make a sound? If an element has no styles attached to it, can it really be said to live at all?
– non-semantic markup in general, i.e. things like <p class=”red”>.

That’s all for now, but the next post deals with my favorite (not really) non-semantic markup bugaboo: clearer divs.

* I used to be pedantic about not calling HTML/CSS “code” because it’s not procedural. But a) I am softening in my old age, b) I also write JS these days, too, so I can get away with it.
** Unsolicited opinion time: I think “full-stack development” is getting to be a worse and worse idea every day. The body of knowledge in front-end development has become large, and I think it’s unrealistic to expect someone who’s spent their career hacking at C++ to have a thorough understanding of floats and clears, the cascade, and cross-browser quirks.