Skip to content

front end performance

list of tools on slide -

advanced aggreggator – advagg – supposed to help with the disappearing CSS! – http://drupal.org/project/advagg

D7 projects: agrcache, core_library

“don’t know if you’ve ever been woken up because your site didn’t look right” – eep. At least I’ve never had that.

the air conditioning in this room IS REALLY LOUD.

problems with not knowing if cache has cleared or not.

gzip, minification, longer browser cache lifetime (sounds like some weird conflict issues between Drupal cache/CSS filename rewriting and browser cache), use google’s cdn for jquery (can that work with ssl?), smart bundling – if you do one change, it’ll only push out new files related to that change – 404 css/js protection – I’m pretty sure that’s a big part of the vanishing CSS issue.

(I wonder if this will help with the vanishing menus.)

css embedded images module – reduces http requests – up to 24k of images (IE restrictions!), so good for tiny layout bits & pieces

Oh, and a bit of quick Googling turns up that the jquery CDN will work over SSL.

cdn module, cookieless_subdomain – so not sending cookies when sending images, makes easier to have parallel domains? either/or: NOT BOTH.

(could/would we run our own cdn?)

files proxy module, file conveyor – not sure if it would be useful in my situation.

changes to .htaccess to extend expiration – “access plus 1 year” – images, css, js – some discussion about query strings and cdns, an issue thread in cdn module queue.

gzip – can be done at php level (inside Drupal) or at apache. sample rules.

if mod_expires, disable etags, if not, enable etags.

putting scripts at the bottom, better to use a module than to do it in the theme: headjs (6 only), labjs (6 and 7?). but some issues with panels, wysiwyg editors. can trim about a second off time. we could probably use it; I’ve done some editing inside panels, but it’s really really rare. headjs requires advagg.

optimizing images – although it sounds like that’s an issue with images uploaded and processed with imagemagick. but might be worth looking into. patch for imageapi. also imageinfo_cache.

advagg_add_css_inline() – not sure about use case for that.

split components across domains, with cdn module. yep, that’s exactly what I thinking that would be. (hilariously, this harks back to an argument C & I got into years and years ago…in which I was completely wrong. thanks, Shelley! ;) but it was good to understand better.)

jquery plugin lazyload.

don’t scale images in html. not generally a problem for me, but might be good for intranet; image resize filter.

favicon in core is 400% bigger than needed. ::facepalm::

webpagetest.org

showslow.com – every 24 hours, get yslow score, see over time.

google page speed – which I saw in the analytics training I was at earlier this week!

some sprite recommendations – I’m not sure if we have anything that would be good with that.

inline image tags – so, wait, printing the binary code inside the html? – particularly for mobile – although that seems like the opposite of the cdn recommendation.

slides: bit.ly/oRdwbp

Posted in Liveblogging, pnwds2011.

Comments Off

By Elaine – October 15, 2011

Day 1 Keynote

I’m going to try moving my professional liveblogging from my personal site over here — which I’m a bit ambivalent about, since I’ve been liveblogging on my personal site since about 2003 or 2004. I may even cross-post, but we’ll see.

Running late – which seems to be the operating mode. Not sure how I feel about the combo badge/pamphlet.

Her story of how she decided to come to Portland sounds a lot like how I decided to go to UPS. :)

They’ve been paying $50k/yr for a trip planning – but only transit mode, get lots of requests for multimodal. GoRoo was the only multimodal they could find – cost excess of 1.?m/yr. TriMet has policy that when looking for new software always compare open source along w/commercial. Developer community is important criteria for open source options.

Got a grant, abt $68k. Brought in partners to develop project.

OpenTripPlanner.org – open process! designed to be easily customizable. used open data wherever possible, incl open street maps. GTFS for transit data. (is that the same as they use for OneTripAway?) Prototype up in about a year. To licence 3 counties for a year (telenav?) would have been $25k/year. Instead used interns to develop some of the data. OpenStreetMap for routing purposes. Interns have been adding data to OpenStreetMap, including better development of bicycle routes.

Even after they ran out of money, code development kept going! Volunteers added all sorts of improvements including multi-lingual support. Implementations in 10 different countries.

First US implementation of fully open-source/open-data trip planner.

From management perspective: both cheaper AND better.

Working on making it a large regional trip planner: Vancouver to Salem.

Multimodal planning has potential to save significant time. 5 minutes bike/transit vs 20 minutes transit only (old system or Google Transit)

Adding more information about vehicular routing, turn restrictions, speed limits, directionality. Working with police to get info into the system, since they write tickets for all that stuff!

Demo: can adjust for time, safety, or for FLATTEST option.

http://rtp.trimet.org/

45 apps by 3rd party developers, because they have open data.

running an app contest, aimed at creating best app for tourists. with prizes! civicapps dataset. want to encourage visitors to use transit.

It would be insane if something like this would be implemented by all the transit agencies from Everett to Eugene.

Safety is street facilities – bike paths, type of street, etc. Don’t (yet?) include volume info.

Question about whether they might use searches to improve their routes and schedules. They’d love to be able to, but

Automated setup for application for cities with GTFS data and (USGS?) data.

“Get it up and running in less than an hour” OMG.

Posted in pnwds2011.

Comments Off

By Elaine – October 15, 2011

SVG for a CSS background

I may have to turn this (tweaking tutorials) into a series or something. Today’s tutorial: Building a starburst with CSS.

I read through and thought that it seemed really inefficient, if kinda cool for learning pseudo-elements and CSS transformations. Then I remembered this tutorial I read a couple of weeks ago on using SVG gradients instead of CSS gradients. (FWIW, I didn’t reread the tutorial at that point; I just went on the vague “hey you can do that, can’t you?” memory.) So this is a remix of two tutorials!

I opened up the copy of  SVG Edit that I’d downloaded; I couldn’t figure out how to make a multipointed star, so I opened Illustrator and created one there, then exported to SVG and imported the meat of the code into SVG Edit, which I saved as a new SVG file. Important: the star has to fill the whole canvas, or weird things happen. My star isn’t identical to the one in the tutorial, but that’s just a matter of changing the Illustrator file.

Then, instead of looking up the tutorial I’d read (!) I just searched for “use svg as background image” — third result was an A List Apart article from last year. (By Shelley! Who is awesome!)

I had a hunch that more recent versions of Firefox would support SVG backgrounds, so I just snagged that bit of code, and dropped it into the CSS from the original tutorial. Yes, it works…except it looked a bit odd.

Time to prune the HTML and CSS, first. No need for a “price-container” div. No need for any of the content generation or transformations. No need for any of the positioning, although I did need to keep display:block for .price span. Moving the font declarations into the price div forced me to recalculate the height and width. Moving the padding there meant increasing the background-size to fit.

Up to this point, I hadn’t declared a background color, but when I went to see what happened in IE, I had a white box with white text. :( But when I declared the background color, I didn’t have the star anymore anywhere else. :( Back to SVG Edit! I created a white box, put it to the back, and added that code to my SVG file. While I was there I realized I could get that nice detail of the white inner border by cloning the star, adding a white stroke, and centering both stars, grabbing the code, etc.

Check out the final result!

BTW, to upload the SVG file through WordPress, I installed the PJW Mime Config plugin. Worked great!

Posted in Tutorials.

Tagged with , , .

Comments Off

By Elaine – October 7, 2011

Improving on a tutorial

I read this tutorial on designing pretty buttons for the web* and found myself somewhat disappointed. The “CSS” solution included creating a background gradient in Photoshop…at the same time that the author was using CSS rounded corners and text shadows. Plus the tutorial itself didn’t include any of the RGB color values, and I didn’t think the “button” needed to be a link inside of a paragraph; it could be just the link by itself.

So I made my own; the only change to the HTML was moving the button class from the P tag to the A tag. This way the button can be contained in any block-level element: a list, a form, a div, whatever makes sense for the page as a whole.

Then I went into the CSS. To get it to lay out properly, I set the display property to “inline-block” and set the width to auto. Having the padding directly on the link makes it easier to click. You can float the link or not, or set the width manually if that makes more sense in the overall design. I added a bit of margin to fit this particular setting.

The border remains the same, the color and font-styling also stay the same. I moved the font-family to be defined at the body level on the assumption that a typical design will do something similar. (BTW, I discovered that the font-weight had been set twice!)

I let the gradient generator create that bit of CSS, given the colors of the two states. I had to zoom way the heck in to get the colors, but after that it was pretty straightforward. I used the ColorZilla Ultimate CSS Gradient Generator; your generator (or hand-built CSS) may vary. I used the two buttons shown at the top of the tutorial for my regular and hover states, which meant I had to tweak the border, text-shadow, and color values to match.

Check it out! (I realized after I uploaded that it’s XHTML 1.0 transitional instead of the new hotness HTML5. I’d say it was an exercise for the reader, but really it’s because that’s my default new HTML template in Dreamweaver.)

* I saw it on Twitter; I can’t remember who posted it!

Posted in Tutorials.

Tagged with , , , .

1 comment

By Elaine – October 3, 2011

Quick hit: book review

Finally read Responsive Web Design yesterday. You should too. (Slighly longer review.)

Posted in General.

Tagged with , , , .

Comments Off

By Elaine – September 26, 2011

Hat Brain: an occupational hazard

I get hat brain. It comes from having to change hats so often during the work day. Designer hat. Project manager hat. CEO hat. Coder hat. Community member hat. Marketer hat. So many hats! And I have to wear many of them each and every day.

Hat Brain, blog post by Laura Scott

I get this. Not just that this happens to me – holy cow, all the time – but that it resonates really deeply as a description for one of the occupational hazards of the Web Generalist. Everybody has problems when switching out of a flow state, but when you’re switching to something entirely different: designing to coding; coding to writing; writing to strategizing, etc., etc., it becomes even more difficult.

Posted in General.

Tagged with , .

Comments Off

By Elaine – September 13, 2011

Drupal 7 status

Went through my spreadsheet again after doing some module switching up on the test server. Now fully 90% of the modules in use are either “good to go” or “in progress” — which is fantastic. But…that last 10% is even more stubbornly not ready.

  • One module that will be obsolete, so I’ll need to rework how the associated content is set up (OpenLayers Geocoder)
  • Three modules with patches but no release (ecard, OpenLayers Proximity, Special menu items)
  • One module with a plan to upgrade, but no releases or patches (SWF Tools)
  • Two modules with issues posted, no patches, no releases, possibility of no upgrade at all (Ad Views, Node import)

I could probably switch from Node import to Feeds, but when I tried it, I found the setup incredibly daunting. I usually need it for one-off situations: new content type for which I have a spreadsheet, that sort of thing; so a cumbersome setup is a deal-breaker.

The Ad Views situation is the most problematic, because it’s fairly integral to the homepage, but it’s been abandoned almost entirely, and it would require upgrading to Views 3 if I wanted to adopt the module. Whew. So either I need to get cracking on learning how to write modules for Drupal 7 & Views 3 (gulp) or completely rework how that particular chunk of the homepage works (double gulp).

Instead, I’m just going to put off upgrading, because it’s not as though I don’t have a TON of stuff to do as it is.

Posted in General.

Tagged with .

Comments Off

By Elaine – August 1, 2011

Random Reference Hilarity

Yesterday I was looking up how to do something in MySQL from the command line and found a really nice page listing off pretty much everything I needed. So I decided to add it to my Pinboard…and discovered that I saved it already in March 2010. One of the minor hilarities of working with a less-used skillset, I suppose.

Posted in General.

Tagged with , .

Comments Off

By Elaine – July 28, 2011

Smashing Magazine article

Paul Boag: Defending The Generalists In The Web Design Industry

While my peers are becoming more specialized, I have stoically refused to do so, remaining a generalist. If anything, my interests have broadened, encompassing subjects such as marketing, psychology and business strategy.

What do you think?

(FWIW, I think he covers a lot of things that I’ve struggled to articulate. I appreciate that.)

Posted in General.

Tagged with .

Comments Off

By Elaine – July 26, 2011

Preparing for Drupal 7

I have two tools for monitoring whether the modules I’m using can be upgraded to Drupal 7:

I use the spreadsheet to make notes and to add details about the modules without releases recognized by Upgrade Status. I also use it to make a cool pie chart of Drupal 7 readiness.

I went through it again this morning to pin the latest pie chart up in my cubicle, and I noticed something. Because I have copies of all my previous pie charts, at least back to the end of March, I can see how things are progressing in general.

The “in progress” category (has a non-final release) has been pretty stable: mid-40s this whole time. The “good to go” category (in core or has a final release) has gone up steadily, starting around 1/3 of the total, now over 40%. Quite a few modules have gone from no release to in progress to final. To be honest, I’m not using final versions of some of those modules in Drupal 6 either, so I consider “in progress” likely to be “good enough.”

The various no release categories* have dropped from almost a quarter to 14% or so.  But looking at the particulars, that 14% with no release is very stable. In fact, some of the decline comes from me switching modules, where there are several similar options, and there’s another one further along in progress towards D7. There’s a couple more of those moribund modules that I’m looking into dropping…but there’s four modules** that are show-stoppers as far as I can figure out.

So I have to decide: do I change how things work on my site? Do I look harder for a replacement? Or do I step up to learn module-writing so I can take them on myself? It’s a tough question, which I have yet to answer.

* Issue with patch; issue with no patch; issue where alternatives are suggested.

** FWIW: Ad Views, ecard, Generate Password, Special menu items. I’m seriously considering adopting Ad Views and ecard.

Posted in General.

Tagged with .

Comments Off

By Elaine – July 22, 2011