I hosted a Show & Tell event at CSS Dev Conf 2015. It was in the style of most CodePen Meetups where we've been encouraging that format, since it's been so much fun.

boat

Here's some of the things presented.


I kicked things off by talking about SVG type a bit. Brenna O'Brien talked about "lockups" in her talk the day before, so I thought we could expand on that concept a little bit by creating one ourselves.

A lockup is a typographic design. Words and letters are placed and styled very much by design. Sized, stacked, colored, rotated, positioned, tweaked... whatever. Like you designed a headline for a print magazine in Adobe Illustrator.

Shot of the room by Amy Dalrymple

In fact, we did just that. We designed a lockup using a font we downloaded from Google Fonts (so we knew we could use it on the web). Then exported the SVG, ensuring the text was SVG <text>.

The advantages are many. The text is...

  • Accessible
  • Searchable
  • Selectable
  • SEO friendly
  • Scaleable (maintaining the lockup)

Like this:


Sam Richards of IBM showed us Chef Watson which uses Watson's super computer brain to connect ingredients together to suggest recipes, but then also invent new recipes based on all the data and computational power it has.

watson cooking

The thing: Watson isn't this supercomputer locked in a closet that is wheeled out to beat people at Jeopardy! It's open API's that you can use to build stuff yourself.


The team from Grommet was there. I hadn't heard of it until then. It's a framework, not unlike Bootstrap or Foundation (e.g. "you should use this to build your things"), but targeted at enterprise.

Enterprise is kind of a loaded term, but it just might fit here. Much of the competentry and patterns they make available is standard (e.g. forms, tabs) and some feels enterprisey (e.g. date picker, charts). It's also opinionated on tech (which I think enterprise likes a lot of times):

  • You download and update from npm
  • You initialize new apps with custom CLI commands
  • You pull down the actual Grommet resources with Bower
  • You run a Grommet app through Gulp
  • Everything is built as React components (JSX)
  • Styling is SCSS based on InuitCSS

grommet


Francisco Dias and Cris Necochea from HubSpot gave a hilarious, almost Abbott & Costello, back-and-forth CSS battle. They had a SVG shape of the spy from Spy vs. Spy and took turns fighting each other on turning it from black to white and vice versa. It started out as a CSS specificity battle, then it got dirty with trickery.

spy vs spy

Look forward to that as an upcoming CSS-Tricks article ;).


For all the talk about SVG at the conference, somehow nobody mentioned Affinity Designer. To be fair, I'd never heard of it either.

Then (I think her name was Deb? Oh my god I'm the worst, I'm so sorry) came up and gave a demo of it. It has quite a lot of compelling vector editing tools. To me it almost felt like seeing Sketch for the first time after being so used to how Photoshop does things. It was very impressive. Just the super fast zooming/scaling of the artboard was impressive. The output tools were cool too.

People were absolutely peppering her with questions. I think the room was in agreement we would have liked to have an entire session just on this software.


Jake Albaugh (recently an employee!) showed off some of his creative Pens.


Stacy Kvernmo presented on a cool little trick for visually displaying the current breakpoint:

Just as cool were the breakpoint Sass mixins themselves, the storage of the breakpoints in a map, the naming of them, and the loop to create them.


Shape Morphing in SVG was talked about at the conference a bit, but nobody mentioned GreenSocks new MorphSVG plugin. It's extremely cool so I thought I'd give it a very small demo. One of the SVG icons on The Noun Project that came up at the top when I opened their Mac app was a buttface icon. Literally a dude in a suit with a butt for a face. So the demo morphed a gear icon into that and I was very pleased with the result:


We learned about some Sublime Text customization options like how to override normal pasting with paste with indent which is almost surely what you want. (Was this you Brad Westfall? - I'm having trouble remembering. I'm the worst.)

We also learned about Syntax-Specific settings in Sublime, where you can control all kinds of stuff depending on what kind of file is open:

sssettings


Bastian Albers told us all about CSSclasses which is kind of this open source curriculum for one-day learn a bunch about CSS events.

AN EVENT AROUND CSS… REALLY?

Yes! We believe that CSS is one of the quickest and most fun ways to understand how websites are built and get your hands into coding. And that doesn't mean CSS is for beginners only: Just check out the many unbelievable experiments on Codepen.io or see what leading developers are discussing at events like CSSconf EU to get inspired and see how far you can take the language.

Bastian also showed us a polyfill for CSS grids when I was showing off what little I know about CSS grid layout. Which was largely from this cool Pen I found a few days ago from Heather Buchel:


So yeah! Fun was had. More conferences should have CodePen sponsored Show & Tells =)

coaster


1784 2 15