Quick Recap of CSSConf 2016

I recently had the opportunity to speak at CSSConf 2016. These are some of my personal notes on the experience. For a more extensive recap on the talks, check out Miriam‘s write-up.

CSSConf 2016 sticker

The Conference

The conference was held in Boston, which was great, because it finally gave me a reason to travel there. I didn’t have much time to explore, but I liked what I saw. Nice city.

Boston at night

The talks were awesome. CSS doesn’t always get a lot of love from my programmer peers, so it was nice to be in the company of people that geek out about CSS as much as I do. Even when people disagreed on certain points, it was still refreshing that people had opinions and cared enough about CSS to disagree.

The conference took place at Laugh Boston, a comedy club, which was a fantastic choice. The casual atmosphere was a welcome change of pace from your typical conference room. And now I can say I’ve performed at a comedy club.

My Talk

You can watch my talk, Silky Smooth Animation with CSS, embedded below. Slides are available here.

The wifi went out during my talk, which taught me a very valuable lesson in public speaking: make sure that you have your demos saved locally AND that they work offline. I only had the former. Fortunately I was able to hop on the wifi from the pub next door, otherwise I would have been dead in the water.

Until Next Time

It was great to finally meet a lot of people I’d only known on Twitter, as well as a bunch of new people. The front-end community is top notch. Other talks are up on the CSSConf 2016 site. Definitely worth checking out.

0 comments » Related topics:

Sassy CSS Hexagons

Need a hexagon? You can make one with CSS. Not surprising, considering the far crazier things CSS can pull off. This article will show you how to make a CSS hexagon and how Sass can help with all the math involved.

Sassy CSS Hexagons

The Approach

There are several ways to do this, but the “1 rectangle + 2 rhombuses” approach worked best for me. This is best explained visually, so here’s an animation for it.

See the Pen CSS Hexagon Visualized by Will Boyd (@lonekorean) on CodePen.

We’ll need 3 HTML elements, one for each shape. To keep the markup light, we can use a single <div> with its ::before and ::after pseudo-elements. Block elements are rectangular by default, so the rectangle part is easy. The rhombuses are achieved by applying a transform style to the rectangular pseudo-elements, flattening with scaleY() and rotating with rotate().

Time for Math

With the general shapes accounted for, it’s time to take on some math. There’s a bit of trigonometry involved to figure out the measurements. Various widths, heights, and offsets need to be precisely calculated so elements line up to form a perfect hexagon.

I’m not going to step through the math here, because honestly, that’d be boring. I will mention how Sass helped me tremendously, though. With Sass, you can use variables and set their values via formulas, like this.

In this example, I’m defining the length of a side of the hexagon in terms of the width of the hexagon. This means I don’t have to crunch the numbers manually. Even better, if I decide to change $width, $side-length will be automatically updated.

So I can create a bunch of little formulas in Sass to calculate all the numbers I need, all based off whatever width I want for the hexagon. Side note: I’m using Compass to gain access to helper functions like cos() and sqrt().

This also helps make the Sass more self-documenting, since I have descriptive variable names instead of crazy pixel values all over the place.

And there you have it, a perfect hexagon in CSS.

Keep Playing

The CSS hexagon I’ve shown you is very tweakable. It’s all just CSS, so go nuts. Tiling CSS hexagons together can also produce some neat effects.

See the Pen CSS Hexagons by Will Boyd (@lonekorean) on CodePen.

Thanks for reading!

0 comments » Related topics:

Highlight Text Inside a Textarea

Let’s start with the bad news. You can’t actually highlight text in a <textarea>. Any markup you would add to do so would simply display as plain text within the <textarea>. The good news is, with some carefully crafted CSS and JavaScript, you can fake it.

This article will show you how to pull it off, but if you just want the solution, feel free to go straight to the jQuery plugin: highlight-within-textarea.

Highlight within textarea

Why?

Way back in 2010, I made a site called Regex Storm that would highlight regex matches in a <textarea>, like this. It’s not hard to imagine other applications for this sort of “find and highlight” functionality. 5 years is a long time though, so I decided to revisit the concept and fix it up for modern browsers.

The Plan

The basic idea is to carefully position a <div> behind the <textarea>. JavaScript will be used to copy any text entered into the <textarea> to the <div>. A bit more JavaScript will make that both elements scroll as one. With everything perfectly aligned, we can add markup inside the <div> to highlight text, which will show through the <textarea>, completing the illusion.

A demo should make this all clear. Scroll around and edit the text. Then click Toggle Perspective and edit and scroll some more.

See the Pen Highlight Text Inside a Textarea by Will Boyd (@lonekorean) on CodePen.

HTML

It takes a couple of elements to achieve the layout we need.

The container <div> simply serves as an anchor to position other elements within. The highlights <div> is nested within the backdrop <div>, which may seem like 1 more <div> than we need, but doing it this way fixes some subtle scrolling bugs (which we’ll get to later).

The <mark> tag is the best semantic choice for highlighting text inside the highlights <div>. We’ll be inserting these tags with JavaScript.

CSS

Elements must be laid out with pixel perfection. This can be tricky, as many browsers have very subtle differences that normally aren’t worth caring about, but are very noticeable in this case.

For example, Firefox adds a single pixel of margin to the top and bottom of a <textarea>. And iOS adds a border-radius to <textarea>. So we have to fix these styles (and others I haven’t specifically mentioned).

CSS is used to make text inside the highlights <div> wrap and scroll exactly like the text inside the <textarea>.

It’s also important to set the visibility of things so that our stacked elements display properly together. Remember, the <textarea> sits on top of the highlights <div>.

JavaScript

The JavaScript has 3 main responsibilities.

  1. Keep text in the highlights <div> synced with text in the <textarea>.
  2. Highlight text in the highlights <div> with <mark>.
  3. Make the highlights <div> scroll in tandem with the <textarea>.

Let’s start by binding 2 events.

The input event triggers whenever text in the <textarea> is changed. The callback function takes this text, applies highlights to it, then inserts it into the highlights <div>.

And here’s the applyHighlights() function.

applyHighlights() actually does 2 things. On line 3, it fixes a bug where a trailing carriage return causes the highlights <div> to become misaligned. Then on line 4, it does the actual highlighting by inserting <mark> tags. The regex in this example highlights all capitalized words, but this can be customized.

The scroll callback copies the scroll position of the <textarea> to the backdrop <div>, so that they both scroll in tandem.

Wrap Up

That covers the basic mechanics of (fake) highlighting within a <textarea>. Please note that there are some finer details that this article didn’t discuss and the demo didn’t account for. For the more comprehensive, more bullet-proof solution, check out the highlight-within-textarea jQuery plugin on GitHub.

Ember in Atlanta

Every once in a while I’ll make a “what I’m up to” post. I guess it’s time for one now. Along with some bonus rambling about Ember and Less.

Laptop stickers

Back in Atlanta

We moved out of Seattle and back to Atlanta. Seattle is a good city, really enjoyed living downtown, but in my experience the Seattle Freeze is real — especially when compared to Southern Hospitality. Regardless, we both had good jobs waiting for us in Atlanta, so things worked out nicely. I’m now working for Pardot/Salesforce, still doing front-end development. So far, it’s great.

Ember vs. Backbone

The new gig has me working in Ember instead of Backbone. Ember is a little less mature, still evolving, deciding the best way to do things. It’s fun to watch it evolve, but frustrating when so much seems to change out from under you.

Ember is really big on convention over configuration. It does a lot of “magic” behind the scenes instead of burdening you with explicit declaration of behavior, like you’d more commonly see in Backbone. This is great when you know the nuances, but until you do, a lot of it is not obvious. This contributes to a steeper learning curve.

Ember is more opinionated. I kind of like it that way. While there might be several ways to do something in Backbone, Ember would tell you that there is one right way to do that something.

Take this all with a grain of salt. These are just my opinions so far. I’m still learning Ember.

Less vs. Sass

The new job has me leaving Sass for Less. Honestly, it doesn’t matter. They both do variables, arithmetic, nesting, and mixins just fine, which is 99% of what we need. Leaves me wondering why this stuff isn’t baked into CSS (aside from calc() and Firefox’s syntactically awkward var(--variable) implementation).

Later

I’m working on a little something I hope to share soon. It’s part of a bigger plan, but I don’t want to get too far ahead of myself. Until next time.