Surprise Cameras!

Last weekend I attended “Hack MS”, a hackathon aimed at reducing stress for people with Multiple Sclerosis. My mom has MS, so I decided to finally attend a “proper” hackathon (as opposed to hack days, givecamp, etc). I’m happy with the product I ended up with, and extra happy that my teammate was OK with releasing it open source… but overall I don’t think I want to do this again.

As soon as I got there, I was immediately asked to sign a video/photo release form, and it was pretty clear that there was no way to say “I’m not okay with this”. There was no explanation what the video was going to be used for, and everything screamed “marketing.” (I was too flustered to ask that night, but I did ask the next morning, and yes, it was for marketing- but I’m still not sure if it’s marketing for Biogen Idec or Hack 2.0)

I don’t particularly like to be on camera. I never know what I should be doing, I become immediately over-conscious of every movement I make, and I can’t focus on what I was just doing*. Not a great mindset when I’m trying to create a functional product in a day.

There are of course other reasons someone might not want to be on camera (detailed at Geek Feminism Wiki), and when it came down to it the photographer and videographer were definitely professional (I wasn’t followed around or anything). But it still made me uncomfortable, because in addition to how anxious it made me, I was also wondering how much focus I’d get as one of the few women at the event. Since I have no insight into how the organizers chose photos to use, I can only guess, but my photo did in fact end up on the website.

In the end, I left some comments and links in their post-event survey, so maybe cameras will be less prominent at the next event, or there will be a clear way to opt out.


* The only exception to this is when I’m giving a presentation, like at a WordCamp (or even the project presentations at the end of the weekend). There I’m already in the mindset for people watching me, and it doesn’t put me on edge the same way.

Using Tonesque & Sass to generate color schemes

Last month, I posted about Umbra being released on WordPress.org. I’m excited about the release of this one, since I think what we did with colors is really cool.

Click through to see the demo, and be sure to click around on some posts to see the different colors.

The theme defaults to a purple, grey, and gold color scheme, but you can customize this in the customizer. By default, on single pages, it’ll also grab the color from the featured image (or first image in the post).

How did we do it? It’s easier than you might think. By pulling in some libraries from Jetpack, most of the hard work is already done. If you use the theme without Jetpack, you’ll just have the purple/gold theme in the screenshot.

Get a base color from Tonesque

Tonesque isn’t really documented in any user-accessible way, so your best bet is to go right to the source. If you check out theme-tools.php, you’ll see that to load Tonesque, Jetpack looks for theme support. This is a pretty cool feature of core, that you can add support for arbitrary theme features.

So if we want to use tonesque, all we need to do is confirm we support it.

// Support tonesque from Jetpack
add_theme_support( 'tonesque' );

Now we can use Tonesque’s methods. We’ll first create a new Tonesque object, which takes an image URL (you can check out Umbra’s source for how I get the image URL). Once we have that, we can get the sampled color from the image. (If you want to rabbit-hole like I did, you can investigate grab_color & grab_points, to see how the color is picked from the image)

$image = new Tonesque( $image_src );
$color = $image->color();

Create the scheme with Sass

A single color doesn’t really make for an entire color scheme. Luckily Jetpack has more awesome to help us out. To support using CSS preprocessors in the custom css module, it includes libraries for parsing Sass & LESS into plain CSS. Again, check out the source for all the details.

To start, I pulled all my color definitions into a single Sass (.scss) file, along with rules to generate a lot of other colors from a single “base color”. The file I ended up with is a bit of a mess – so if you’re planning on doing this, think about your colors from the start.

Note
Since we’re uploading this to WordPress.org, we can’t use the PHP filesystem methods to read from a sass file. That’s why base-scss.php is a PHP file.

After walking through how Jetpack saves and renders CSS (see get_css), I figured out that I can use the minify method, which will also conveniently minify the generated CSS. Now we can combine the global variable from our Sass PHP file with the real base color. The $sass variable now contains a valid string of Sass, and can be processed to give us our CSS. From here, we’ll inject this CSS into the header on the wp_head hook.

$sass = '$base-color: #' . $color . '; ' . $umbra_base_scss;
$css = Jetpack_Custom_CSS::minify( $sass, 'sass' );

The last step is to wrap all this in caching. We don’t want to run all this processing on every page load every time, it should only run once per color. You can check out how I handled this in generate_css.


Thanks for reading! I hope I gave you some fun ideas for how to work with dynamic colors in your themes. Feel free to ask any questions in the comments 🙂

Other people doing similar cool things:

Champagne Jello Cups

Everyone likes a little Jello sometimes, right? There’s just something so fun about it.

They’re more fun when you step away from the uber-sweet Jello brand & make your own flavors… and everything’s better with a little booze, right?

(no, I’m not going to talk about the kind of Jello shots you make in college to hide the taste of terrible rum or vodka…)

These are champagne jello shots.

photo 2

I made them for a New Years’s party, and they were great.

I knew immediately that I wanted to serve them in tiny champagne glasses. After confirming such a thing existed (2oz glasses from party city, yay), I went searching through almost a dozen recipes. None hit exactly what I wanted, but in the end I mostly followed this recipe.

I was worried about them being too sweet and not bubbly enough, so I swapped out the sugar for a half-cup of ginger ale. This worked for me – since I didn’t plan on making the “jigglers” shapes, I could get away with adding more liquid.

My final recipe was this:

Champagne Jello Cups

  • Servings: 40-50 2oz cups
  • Print

Ingredients

  • 1 bottle champagne
  • 1/2 cup peach schnapps
  • 1/2 cup ginger ale
  • 4 envelopes Knox gelatin
  • 1 small splash vanilla extract
  • Flat tray to set jello in

Directions

  1. Mix about 2 cups of champagne and 4 packets of gelatin together, and let sit for about 1-2 minutes.
  2. Heat mixture until the gelatin dissolves. This will smell pretty weird, but it’s not strong. Don’t let it boil.
  3. Add vanilla & take off heat.
  4. In another bowl, combine the rest of the champagne, peach schnapps, and ginger ale (I used the tray I was setting the jello in, since it wasn’t very shallow).
  5. Mix in the gelatin concoction, stirring gently to keep the mixture carbonated.
  6. Pour into your pan (if not there already), and refrigerate overnight or until set – I left mine at least 20hrs.
  7. Once at the party, I chopped up the pan into cubes and served them in the cups. We ended up with at least 40, maybe more? We kept refilling cups, and people kept eating them 🙂

It didn’t keep as much of the carbonated “flavor” as I was hoping, but the champagne taste was definitely there. I also bought a gold sugar I was going to sprinkle on for the sparkling texture, but in the flurry to get to the party, I forgot it. They were totally fine without it – overall a big hit.

I wonder what I’ll do for the next party?