My Talk Writing Process

Some people have a talk preparation process that is super organized and runs like a well-oiled machine. Mine, on the other hand, is a bit messy, but it works for me. Even when a talk looks polished and put together on stage, it doesn’t mean the process to get it there was that way too.

Me on stage at An Event Apart.

When putting together a new talk recently, I noticed there was most definitely a pattern to how my talks take shape. Here’s how the talk-making process goes for me:

The Research Phase

True to the nature of research, all my talks start by collecting articles, books, videos, and other things that relate to the topic of the talk. At this point in the talk development process, I usually only have a general topic idea instead of a fully fleshed out point-of-view or main message. That means I end up collecting things that might only be tangentially related to the topic and going down some strange topical rabbit holes.

I’ll save all these as a collection of bookmarks but usually also in a Google Doc with notes or quotes from the piece that seem most relevant. That makes it easier to keep a high-level view of what I’ve collected, and even discover interesting threads that connect some of the seemingly unrelated sources.

This initial phase is intentionally fuzzy on focus. Only a small percentage of the research I collect actually makes it to the end talk content. Sometimes the things that don’t make it spark ideas for other talks, or just gets filed away in my brain for future (hopefully interesting) things.

Outlining: The Giant Mess Phase

There’s probably a smarter sounding name for this phase, but for every talk I’ve done, there’s always a point where I step back and think, “Holy crap this is all a giant mess! What am I even doing with all this!?” So, that’s what I’ll call this phase. This is the phase where I make a general outline for the talk (again in a Google Doc or Word file) and start fitting my thoughts, examples or demos, and relevant research into it.

I outline the major points I think the talk should make and try to fit them into some sort of narrative order. These tend to change and morph a bit as the talk takes shape, but that’s OK because I’m still in the giant mess phase.

At the top of my document I have a three-part block that helps keep me focused:

What is the main question this talk answers (or the main problem it addresses)?

What is the main message of this talk?

Three points that support the main message:

(I started doing this on advice from Bill Smartt, and it’s been a huge help ever since.)

A talk outline for a 30 min talk complete with comments to myself.

The rest of the document addresses the body of the talk with each main point as a headline and some notes underneath it. Personally, I don’t write out talks word-for-word and memorize them. I do write out an introduction and conclusion to make sure I’m setting up the topic and summarizing it well, but the rest of the notes are bulleted lists of points to make and references supporting examples, demos, or references. I leave space at the bottom of the document for random thoughts and notes as well as probably a few too many comments to myself on possible changes to make or different directions to take. Points that don’t fit into the main narrative get moved down to this section too.

Once I feel like I have a cohesive outline, or at least one that isn’t a total mess, I move on to making some visuals.

The Editing Phase

A recent talk with all the edited-out slides shown ghosted out. Those slides never made it to the final talk.

This is the point where I start making slides and such based on the outline. Some people leave slides to the very last thing, but I leave them more to the almost last thing and do some of my thinking and organizing while I build up the slide deck.

I’ll make slides for each point in the outline, take screen recordings of demos or examples, and start piecing things together in order. I tend to think of my talks in sections at this point and, as I create the slides for each section, I’ll try talking through them out loud to see how they flow. (It’s amazing how different things sound when you say them out loud!)

There is a lot of rearranging and cutting out during this phase to work towards something that feels cohesive. I keep working on adding, deleting, and rearranging slides until I’ve got visuals for the full narrative of my outline. Sometimes things fall into place quickly, but for most talks this part can take a while.

At this point I almost always have far too much content. I’ll run through what I have for the talk in 10 to 15 minute chunks, editing down and solidifying points until I’ve got something that fits neatly into the required time length. Most times this means a 30 minutes and 45-60 minute version of the talk depending on the format of the event where it’s being given.

The same talk without the slides that have been edited out.

Rehearsing: The Talking to Myself Phase

Rehearsing is so important but it can also be very awkward. It seems like everyone has a different strategy for rehearsing talks, which totally makes sense. I have a really hard time rehearsing talks in their entirety when I’m standing in my office talking to the wall or to the dog, so I tend to rehearse in 15 or 30 minute chunks; practicing the first half then taking a break to do some other things and coming back to run through the second half. That way I know I have a handle on all the material, but haven’t driven myself (or the dog) up a wall with all that talking to no one in particular.

Ah, that familiar presenter notes view. I like a giant notes window even though I rarely actually read them while I’m on stage. They’re a “just in case” kind of thing.

As often as possible I’ll try to give a new talk to a few friends or at a meetup before doing it on stage for the first time. Having a real live human audience can really help show which points are strong and which might need a bit more work to get across well. I also always run through the “final” talk from start-to-finish at least once in the 24 hours before I’ll be on stage to make sure all the content is fresh in my mind.

A Talk is Never Really Done

Seriously. They really never are. The funny thing about talks is that when you give them more than once, they’re rarely exactly the same. (Yes, it is totally fine to do the same talk more than once.) There is always something to improve, something to add, or new points or examples to add to the narrative.

I usually make notes for myself on what worked or what didn’t right after getting off stage. That’s a good time to recall which parts of the talk felt like they could use some work, but it’s not such a good time to actually make any edits. I’ll go back to those notes a few days later (having some space here is really helpful) and make adjustments as needed. Also, if I come across other relevant examples or research at any point in time, I’ll try to add them into the talk for the next time around.

You Do You

If there’s one thing I’ve learned working on talks and talking to other speakers about their process, it’s that no two people work the same way. Everyone has their own way of putting together talks that they’ve customized for their own habits and preferences. If your talk development process looks nothing like mine, that’s totally fine. And if you haven’t found a process that works for you yet, keep experimenting with different techniques. You’ll find one that works for you!

For more on how to get a talk together, check out these other articles too:

  • How to Write a Talk
  • My Process: Writing a Talk
  • Three things you don’t need to become a speaker
  • How to write a successful talk proposal

My Talk Writing Process is a post from CSS-Tricks

CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this:

html { font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
}

What the heck, right? Why don’t I just tell it what font I want to use and that’s that? The whole idea here is fallbacks. The browser will try to use the font you specified first (Lato, in this case), but if it doesn’t have that font available, it will keep going down that list. So to be really verbose here, what that rule is saying is:

  1. I’d like to use the Lato font here, please.
  2. If you don’t have that, try “Lucida Grande” next.
  3. If you don’t have that, try Tahoma.
  4. All else fails, use whatever you’ve got for the generic keyword Sans-Serif

So in what situation would a browser not have the font you’re asking for? That’s pretty common. There are only a handful of fonts that are considered “web safe”—meaning that it’s likely most computers visiting your site have that font installed and so the browser can use it. Think: Arial, Times New Roman, Courier, Georgia, Verdana, and a handful of others.

But most websites, these days, use custom web fonts. They load up a font as a resource (just as a website loads CSS itself as a resource, or an image, or JavaScript), then that font is available to use. The widely popular Google Fonts makes that pretty clear:

Load this font first, then you can use it in CSS.

Even when you load a font in this way, it’s still possible that the font doesn’t load. While Google is a generally very reliable host, you don’t control their servers; they do. Even more commonly, poor network connections may prevent a font from loading. In any font loading failure scenario, that’s another situation where a fallback font stack comes in handy.

Say I’m using the custom font Merriweather, and I set up my font stack like this:

html { font-family: Merriweather, Impact, Serif;
}

If Merriweather fails to load (or does load, but loads in such a way that it pops into place after it does—also known as FOUT), we’d see something like this:

A fallback font, in this case Impact, is seen. It’s incredibly awkward and doesn’t match the desired look at all.

Better to have your font fall back to something close to your top choice than to something totally unrelated! There is a fantastic tool by Monica Dinculescu call Font style matcher where you can play with fallbacks (that’s how I made that GIF above).

In the example above, we can see that Georgia is a much nicer fallback font than Impact is! The example is a little bit more fancy than just changing the font though. A couple of other settings were changed to make them match as closely as they are. To take advantage of that, you’re in font loading territory, which gets a bit complex. Your best bet there is consulting Zach Leatherman’s A Comprehensive Guide to Font Loading. In any case, picking a nice fallback font alone is worth doing.

Individual Characters

An interesting note about fallback fonts is that it’s not all-or-nothing. Individual characters in a font can fall down the stack if the specified font doesn’t have that character available.

As an extreme example, I’ll load the custom font Source Code Pro from Google Fonts but I’ll force it to only contain a handful of letters.

You can see in the first sentence how the fallback fonts took over and the end result wasn’t disastrous (like the second sentence) even though the custom font didn’t have some of the characters available. This will be more likely to happen with things like uncommon ASCII characters or even accented characters like ü, ā, or ñ.

As some side fun, here’s using that character fallback ability of CSS to do something unique:

See the Pen Ransom Note With Google Font Subsets by Heydon (@heydon) on CodePen.

More Reading

  • Font Stack Snippets: Some common font stacks
  • CSS Font Stack: A collection of web safe CSS font stacks
  • System Font Stack: A snippet that uses the computer’s default system font

CSS Basics: Fallback Font Stacks for More Robust Web Typography is a post from CSS-Tricks

CSS Basics: Styling Links Like a Boss

The web was founded on links. The idea that we can click/tap a link and navigate from one web page to another is how surfin’ the web become a household phrase.

Links in HTML even look different from regular text without any CSS styling at all.

See the Pen Default Link by CSS-Tricks (@css-tricks) on CodePen.

They are blue (purple if visited). They are underlined. That’s a link in it’s purest form.

But what if we want to change things up a bit? Perhaps blue doesn’t work with your website’s design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just we can any other element. All we need to do is target the <a> element in our stylesheet.

Want to use a different font, change the color, remove the underline and make it all uppercase? Sure, why not?

a { color: red; text-decoration: none; text-transform: uppercase;
}

See the Pen Link With Some Style by Geoff Graham (@geoffgraham) on CodePen.

Now we’re cooking with gas! But why stop there? Let’s look at a few other ways we can style links to complete the experience.

Style Each Link State

Links have different states, meaning they adapt when we interact with them on a webpage. There are three additional states of a link that are worth considering anytime we change the default style of links:

  • Hover (:hover): When the mouse cursor is place on top of the link without a click
  • Visited (:visited): The appearance of a link that the user has clicked on the page before when the mouse cursor is not on top of it
  • Active (:active): When the link is in the process of being clicked. It might be super quick, but this is when the mouse button has been depressed and before the click is over.

Here is the same link we have been looking at. First, try hovering your mouse on top of it without clicking and notice that it becomes underlined. Then, click on the link, but leave your mouse button clicked down for a little bit to see how the active style changes the color of the link to black. Finally, let up on the mouse button and the link should turn purple before it’s technically been visited.

See the Pen Link With Styled States by Geoff Graham (@geoffgraham) on CodePen.

Links seem like a simple concept, but boy do they have a lot going on—and CSS gives us some incredible power to customize the experience!

Links as Buttons

While there is some debate about it, we can use CSS to make a text link look like a button.

Like other HTML elements, CSS can add background colors and padding to links that allow us to create the appearance of a button. Here’s our link using those techniques:

a { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase;
}

See the Pen Link as a Button by CSS-Tricks (@css-tricks) on CodePen.

Great! Now, let’s use the state-altering powers we learned in the last section to make our faux-button more interactive. We’ll make the button dark gray on hover, black on active, and light gray on visit:

a { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase;
} a:hover { background-color: #555;
} a:active { background-color: black;
} a:visited { background-color: #ccc;
}

See the Pen Link as a Button With Styled States by Geoff Graham (@geoffgraham) on CodePen.

Styling a link as a button and taking advantage of the states allows us to make some pretty cool effects. For example, let’s create a button with some depth that appears to get pressed when it’s active and pop back up when the click is done.

See the Pen Link as a 3D Button by Geoff Graham (@geoffgraham) on CodePen.

Oh, and Cursors!

We’ve gone into pretty great depth on style links, but there is one more component to them that we cannot ignore: the cursor.

The cursor indicates the position of the mouse on the screen. We’re pretty used to the standard black arrow:

The standard mouse cursor arrow

We can change the arrow to a hand pointer on it’s hover (:hover) state so that it’s easier to see that the link indicates it is an interactive element:

Using cursor:
pointer;
provides an interactive cue.
a:hover { cursor: pointer;
}

See the Pen Link as a 3D Button With Pointer by Geoff Graham (@geoffgraham) on CodePen.

Whew, that’s much nicer! Now, we have a pretty fancy link that looks like a button with proper interactive cues.

Leveling Up

We’ve covered quite a bit of ground here, but it merely scratches the surface of how we can control the style of links. If you’re ready to level up, then here are a few resources you can jump into from here:

  • Mailto Links – A good reference for linking up email addresses instead of webpages.
  • The Current State of Telephone Links – Did you know you can link a phone number? Well, here’s how.
  • Cursor – The CSS-Tricks reference guide for customizing the cursor.
  • When to Use the Button Element – If you’re wondering about the difference between a link button and a traditional form button, then this is a good overview with suggestions for which is better for specific contexts.
  • Button Maker – A free resource for generating the CSS for link buttons.

CSS Basics: Styling Links Like a Boss is a post from CSS-Tricks

CSS Basics: Using Multiple Backgrounds

With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both:

body { background-color: red; background-image: url(pattern.png);
}

Here’s an example where I’m using an SVG image file as the background, embedded right in the CSS as a data URL.

See the Pen background color and image together by Chris Coyier (@chriscoyier) on CodePen.

That’s just a single image there, repeated, but we can actually set multiple background images if we want. We do that by separating the values with commas.

body { background-image: url(image-one.jpg), url(image-two.jpg);
}

If we leave it like that, image-one.jpg will repeat and entirely cover image-two.jpg. But we can control them individually as well, with other background properties.

body { background-image: url(image-one.jpg), url(image-two.jpg); background-position: top right, /* this positions the first image */ bottom left; /* this positions the second image */ background-repeat: no-repeat; /* this applies to both images */
}

See how background-position also has comma-separated values? Those will apply individually to each image respectively. And then how background-repeat has only one value? We could have done two values in the same way, but by using just one value, it applies to both.

Here’s an example using four separate images, one in each corner, offset by a smidge:

See the Pen Example of multiple backgrounds by Chris Coyier (@chriscoyier) on CodePen.

It’s too bad you can’t rotate or flip background images or else we could have used just one. We can rotate and flip entire elements (or psuedo elements) though, so in cases like that, we can get away with using a single image!

See the Pen Flipping Image So You Can Use Just One by Chris Coyier (@chriscoyier) on CodePen.

Just a few other things to be aware of here:

  1. The stacking order of multiple background is “first is on top.”
  2. Gradients are applied through background-image, so they can be used as part of all this. For example, you could set a transparent gradient over a raster image.

See the Pen Tinted Image w/ Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen.


CSS Basics: Using Multiple Backgrounds is a post from CSS-Tricks

CSS Basics: The Second “S” in CSS

CSS is an abbreviation for Cascading Style Sheets.

While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don’t talk a whole lot about is the sheet part of the language. So let’s give that lonely second “S” a little bit of the spotlight and understand what we mean when we say CSS is a style sheet.

The Sheet Contains the Styles

The cascade describes how styles interact with one another. The styles make up the actual code. Then there’s the sheet that contains that code. Like a sheet of paper that we write on, the “sheet” of CSS is the digital file where styles are coded.

If we were to illustrate this, the relationship between the three sort of forms a cascade:

The sheet holds the styles.

There can be multiple sheets all continuing multiple styles all associated with one HTML document. The combination of those and the processes of figuring out what styles take precedence to style what elements is called the cascade (That first “C” in CSS).

The Sheet is a Digital File

The sheet is such a special thing that it’s been given its own file extension: .css. You have the power to create these files on your own. Creating a CSS file can be done in any text editor. They are literally text files. Not “rich text” documents or Word documents, but plain ol’ text.

If you’re on Mac, then you can fire up TextEdit to start writing CSS. Just make sure it’s in “Plain Text” mode.

If you’re on Windows, the default Notepad app is the equivalent. Heck, you can type styles in just about any plain text editor to write CSS, even if that’s not what it says it was designed to do.

Whatever tool you use, the key is to save your document as a .css file. This can usually be done by simply add that to your file name when saving. Here’s how that looks in TextEdit:

Seriously, the choice of which text editor to use for writing CSS is totally up to you. There are many, many to choose from, but here are a few popular ones:

  • Sublime Text
  • Atom
  • VIM
  • PhpStorm
  • Coda
  • Dreamweaver

You might reach for one of those because they’ll do handy things for you like syntax highlight the code (colorize different parts to help it be easier to understand what is what).

Hey look I made some files completely from scratch with my text editor:

Those files are 100% valid in any web browser, new or old. We’ve quite literally just made a website.

The Sheet is Linked Up to the HTML

We do need to connect the HTML and CSS though. As in make sure the styles we wrote in our sheet get loaded onto the web page.

A webpage without CSS is pretty barebones:

See the Pen Style-less Webpage by Geoff Graham (@geoffgraham) on CodePen.

Once we link up the CSS file, voila!

See the Pen Webpage With Styles by Geoff Graham (@geoffgraham) on CodePen.

How did that happen? if you look at the top of any webpage, there’s going to be a <head> tag that contains information about the HTML document:

<!DOCTYPE html>
<html> <head> <!-- a bunch of other stuff --> </head> <body> <!-- the page content --> </body> </html>

Even though the code inside the <head> might look odd, there is typically one line (or more, if we’re using multiple stylesheets) that references the sheet. It looks something like this:

<head> <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

This line tells the web browser as it reads this HTML file:

  1. I’d like to link up a style sheet
  2. Here’s where it is located

You can name the sheet whatever you want:

  • styles.css
  • global.css
  • seriously-whatever-you-want.css

The important thing is to give the correct location of the CSS file, whether that’s on your web server, a The Sheet is Not Required for HTML
You saw the example of a barebones web page above. No web page is required to use a stylesheet.
Also, we can technically write CSS directly in the HTML using the HTML style attribute. This is called inline styling and it goes a little something like this if you imagine you’re looking at the code of an HTML file:
<h1 style=”font-size: 24px; line-height: 36px; color: #333333″>A Headline</h1>
<p style=”font-size: 16px; line-height: 24px; color: #000000;”>Some paragraph content.</p>
<!– and so on –>
While that’s possible, there are three serious strikes against writing styles this way: If you decide to use a stylesheet later, it is extremely difficult to override inline styles with the styles in the HTML. Inline styles take priority over styles in a sheet.
Maintaining all of those styles is tough if you need to make a “quick” change and it makes the HTML hard to read.
There’s something weird about saying we’re writing CSS inline when there really is no cascade or sheet. All we’re really writing are styles. There is a second way to write CSS in the HTML and that’s directly in the <head> in a <style> block:
<head> <style> h1 { color: #333; font-size: 24px; line-height: 36px; } p { color: #000; font-size: 16px; line-height: 24px; } </style>
</head>
That does indeed make the HTML easier to read, already making it better than inline styling. Still, it’s hard to manage all styles this way because it has to be managed on each and every webpage of a site, meaning one “quick” change might have to be done several times, depending on how many pages we’re dealing with.
An external sheet that can be called once in the <head> is usually your best bet.
The Sheet is Important
I hope that you’re starting to see the importance of the sheet by this point. It’s a core part of writing CSS. Without it, styles would be difficult to manage, HTML would get cluttered, and the cascade would be nonexistent in at least one case.
The sheet is the core component of CSS. Sure, it often appears to play second fiddle to the first “S” but perhaps that’s because we all have an quiet understanding of its importance.
Leveling Up
Now that you’re equipped with information about stylesheets, here are more resources you jump into to get a deeper understanding for how CSS behaves: Specifics on Specificity – The cascade is a confusing concept and this article breaks down the concept of specificity, which is a method for how to manage it.

  • The latest ways to deal with the cascade, inheritance and specificity – That’s a lot of words, but the this article provides pro tips on how to manage the cascade, including some ideas that may be possible in the future.
  • Override Inline Styles with CSS – This is an oldie, but goodie. While the technique is probably not best practice today, it’s a good illustration of how to override those inline styles we mentioned earlier.
  • When Using !important is The Right Choice – This article is a perfect call-and-response to the previous article about why that method may not be best practice.

  • CSS Basics: The Second “S” in CSS is a post from CSS-Tricks

    Direction Aware Hover Effects

    This is a particular design trick that never fails to catch people’s eye! I don’t know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I’d round a few of them up here.

    Noel Delagado

    See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen.

    The detection here is done by tracking the mouse position on mouseover and mouseout and calculating which side was crossed. It’s a small amount of clever JavaScript, the meat of which is figuring out that direction:

    var getDirection = function (ev, obj) { var w = obj.offsetWidth, h = obj.offsetHeight, x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)), y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)), d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4; return d;
    };

    Then class names are applied depending on that direction to trigger the directional CSS animations.

    Fabrice Weinberg

    See the Pen Direction aware hover pure CSS by Fabrice Weinberg (@FWeinb) on CodePen.

    Fabrice uses just pure CSS here. They don’t detect the outgoing direction, but they do detect the incoming direction by way of four hidden hoverable boxes, each rotated to cover a triangle. Like this:

    Codrops

    Demo

    In an article by Mary Lou on Codrops from 2012, Direction-Aware Hover Effect with CSS3 and jQuery, the detection is also done in JavaScript. Here’s that part of the plugin:

    _getDir: function (coordinates) { // the width and height of the current div var w = this.$el.width(), h = this.$el.height(), // calculate the x and y to get an angle to the center of the div from that x and y. // gets the x value relative to the center of the DIV and "normalize" it x = (coordinates.x - this.$el.offset().left - (w / 2)) * (w > h ? (h / w) : 1), y = (coordinates.y - this.$el.offset().top - (h / 2)) * (h > w ? (w / h) : 1), // the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123); // first calculate the angle of the point, // add 180 deg to get rid of the negative values // divide by 90 to get the quadrant // add 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/ direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; return direction;
    },

    It’s technically CSS doing the animation though, as inline styles are applied as needed to the elements.

    John Stewart

    See the Pen Direction Aware Hover Goodness by John Stewart (@johnstew) on CodePen.

    John leaned on Greensock to do all the detection and animation work here. Like all the examples, it has its own homegrown geometric math to calculate the direction in which the elements were hovered.

    // Detect Closest Edge
    function closestEdge(x,y,w,h) { var topEdgeDist = distMetric(x,y,w/2,0); var bottomEdgeDist = distMetric(x,y,w/2,h); var leftEdgeDist = distMetric(x,y,0,h/2); var rightEdgeDist = distMetric(x,y,w,h/2); var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist); switch (min) { case leftEdgeDist: return "left"; case rightEdgeDist: return "right"; case topEdgeDist: return "top"; case bottomEdgeDist: return "bottom"; }
    } // Distance Formula
    function distMetric(x,y,x2,y2) { var xDiff = x - x2; var yDiff = y - y2; return (xDiff * xDiff) + (yDiff * yDiff);
    }

    Gabrielle Wee

    See the Pen CSS-Only Direction-Aware Cube Links by Gabrielle Wee ✨ (@gabriellewee) on CodePen.

    Gabrielle gets it done entirely in CSS by positioning four hoverable child elements which trigger the animation on a sibling element (the cube) depending on which one was hovered. There is some tricky stuff here involving clip-path and transforms that I admit I don’t fully understand. The hoverable areas don’t appear to be triangular like you might expect, but rectangles covering half the area. It seems like they would overlap ineffectively, but they don’t seem to. I think it might be that they hang off the edges slightly giving a hover area that allows each edge full edge coverage.

    Elmer Balbin

    See the Pen Direction Aware Tiles using clip-path Pure CSS by Elmer Balbin (@elmzarnsi) on CodePen.

    Elmer is also using clip-path here, but the four hoverable elements are clipped into triangles. You can see how each of them has a point at 50% 50%, the center of the square, and has two other corner points.

    clip-path: polygon(0 0, 100% 0, 50% 50%)
    clip-path: polygon(100% 0, 100% 100%, 50% 50%);
    clip-path: polygon(0 100%, 50% 50%, 100% 100%);
    clip-path: polygon(0 0, 50% 50%, 0 100%);

    Nigel O Toole

    Demo

    Raw JavaScript powers Nigel’s demo here, which is all modernized to work with npm and modules and all that. It’s familiar calculations though:

    const _getDirection = function (e, item) { // Width and height of current item let w = item.offsetWidth; let h = item.offsetHeight; let position = _getPosition(item); // Calculate the x/y value of the pointer entering/exiting, relative to the center of the item. let x = (e.pageX - position.x - (w / 2) * (w > h ? (h / w) : 1)); let y = (e.pageY - position.y - (h / 2) * (h > w ? (w / h) : 1)); // Calculate the angle the pointer entered/exited and convert to clockwise format (top/right/bottom/left = 0/1/2/3). See https://stackoverflow.com/a/3647634 for a full explanation. let d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4; // console.table([x, y, w, h, e.pageX, e.pageY, item.offsetLeft, item.offsetTop, position.x, position.y]); return d;
    };

    The JavaScript ultimately applies classes, which are animated in CSS based on some fancy Sass-generated animations.

    Giana

    A CSS-only take that handles the outgoing direction nicely!

    See the Pen CSS-only directionally aware hover by Giana (@giana) on CodePen.


    Seen any others out there? Ever used this on something you’ve built?


    Direction Aware Hover Effects is a post from CSS-Tricks

    Offline *Only* Viewing

    It made the rounds a while back that Chris Bolin built a page of his personal website that could only be viewed while you are offline.

    This page itself is an experiment in that vein: What if certain content required us to disconnect? What if readers had access to that glorious focus that makes devouring a novel for hours at a time so satisfying? What if creators could pair that with the power of modern devices? Our phones and laptops are amazing platforms for inventive content—if only we could harness our own attention.

    Now Bolin has a whole magazine around this same concept called The Disconnect!

    The Disconnect is an offline-only, digital magazine of commentary, fiction, and poetry. Each issue forces you to disconnect from the internet, giving you a break from constant distractions and relentless advertisements.

    I believe it’s some Service Worker trickery to serve different files depending on the state of the network. Usually, Service Workers are meant to serve cached files when the network is off or slow such as to make the website continue to work. This flips that logic on its head, preventing files from being served until the network is off.


    Offline *Only* Viewing is a post from CSS-Tricks

    Using Default Parameters in ES6

    I’ve recently begun doing more research into what’s new in JavaScript, catching up on a lot of the new features and syntax improvements that have been included in ES6 (i.e. ES2015 and later).

    You’ve likely heard about and started using the usual stuff: arrow functions, let and const, rest and spread operators, and so on. One feature, however, that caught my attention is the use of default parameters in functions, which is now an official ES6+ feature. This is the ability to have your functions initialize parameters with default values even if the function call doesn’t include them.

    The feature itself is pretty straightforward in its simplest form, but there are quite a few subtleties and gotchas that you’ll want to note, which I’ll try to make clear in this post with some code examples and demos.

    Default Parameters in ES5 and Earlier

    A function that automatically provides default values for undeclared parameters can be a beneficial safeguard for your programs, and this is nothing new.

    Prior to ES6, you may have seen or used a pattern like this one:

    function getInfo (name, year, color) { year = (typeof year !== 'undefined') ? year : 2018; color = (typeof color !== 'undefined') ? color : 'Blue'; // remainder of the function...
    }

    In this instance, the getInfo() function has only one mandatory parameter: name. The year and color parameters are optional, so if they’re not provided as arguments when getInfo() is called, they’ll be assigned default values:

    getInfo('Chevy', 1957, 'Green');
    getInfo('Benz', 1965); // default for color is "Blue"
    getInfo('Honda'); // defaults are 2018 and "Blue"

    Try it on CodePen

    Without this kind of check and safeguard in place, any uninitiated parameters would default to a value of undefined, which is usually not desired.

    You could also use a truthy/falsy pattern to check for parameters that don’t have values:

    function getInfo (name, year, color) { year = year || 2018; color = color || 'Blue'; // remainder of the function...
    }

    But this may cause problems in some cases. In the above example, if you pass in a value of “0” for the year, the default 2018 will override it because 0 evaluates as falsy. In this specific example, it’s unlikely you’d be concerned about that, but there are many cases where your app might want to accept a value of 0 as a valid number rather than a falsy value.

    Try it on CodePen

    Of course, even with the typeof pattern, you may have to do further checks to have a truly bulletproof solution. For example, you might expect an optional callback function as a parameter. In that case, checking against undefined alone wouldn’t suffice. You’d also have to check if the passed-in value is a valid function.

    So that’s a bit of a summary covering how we handled default parameters prior to ES6. Let’s look at a much better way.

    Default Parameters in ES6

    If your app requires that you use pre-ES6 features for legacy reasons or because of browser support, then you might have to do something similar to what I’ve described above. But ES6 has made this much easier. Here’s how to define default parameter values in ES6 and beyond:

    function getInfo (name, year = 2018, color = 'blue') { // function body here...
    }

    Try it on CodePen

    It’s that simple.

    If year and color values are passed into the function call, the values passed in as arguments will supersede the ones defined as parameters in the function definition. This works exactly the same way as with the ES5 patterns, but without all that extra code. Much easier to maintain, and much easier to read.

    This feature can be used for any of the parameters in the function head, so you could set a default for the first parameter along with two other expected values that don’t have defaults:

    function getInfo (name = 'Pat', year, color) { // function body here...
    }

    Dealing With Omitted Values

    Note that—in a case like the one above—if you wanted to omit the optional name argument (thus using the default) while including a year and color, you’d have to pass in undefined as a placeholder for the first argument:

    getInfo(undefined, 1995, 'Orange');

    If you don’t do this, then logically the first value will always be assumed to be name.

    The same would apply if you wanted to omit the year argument (the second one) while including the other two (assuming, of course, the second parameter is optional):

    getInfo('Charlie', undefined, 'Pink');

    I should also note that the following may produce unexpected results:

    function getInfo (name, year = 1965, color = 'blue') { console.log(year); // null
    }
    getInfo('Frankie', null, 'Purple');

    Try it on CodePen

    In this case, I’ve passed in the second argument as null, which might lead some to believe the year value inside the function should be 1965, which is the default. But this doesn’t happen, because null is considered a valid value. And this makes sense because, according to the spec, null is viewed by the JavaScript engine as the intentional absence of an object’s value, whereas undefined is viewed as something that happens incidentally (e.g. when a function doesn’t have a return value it returns undefined).

    So make sure to use undefined and not null when you want the default value to be used. Of course, there might be cases where you want to use null and then deal with the null value within the function body, but you should be familiar with this distinction.

    Default Parameter Values and the arguments Object

    Another point worth mentioning here is in relation to the arguments object. The arguments object is an array-like object, accessible inside a function’s body, that represents the arguments passed to a function.

    In non-strict mode, the arguments object reflects any changes made to the argument values inside the function body. For example:

    function getInfo (name, year, color) { console.log(arguments); /* [object Arguments] { 0: "Frankie", 1: 1987, 2: "Red" } */ name = 'Jimmie'; year = 1995; color = 'Orange'; console.log(arguments); /* [object Arguments] { 0: "Jimmie", 1: 1987, 2: "Red" } */
    } getInfo('Frankie', 1987, 'Red');

    Try it on CodePen

    Notice in the above example, if I change the values of the function’s parameters, those changes are reflected in the arguments object. This feature was viewed as more problematic than beneficial, so in strict mode the behavior is different:

    function getInfo (name, year, color) { 'use strict'; name = 'Jimmie'; year = 1995; color = 'Orange'; console.log(arguments); /* [object Arguments] { 0: "Frankie", 1: 1987, 2: "Red" } */
    } getInfo('Frankie', 1987, 'Red');

    Try it on CodePen

    As shown in the demo, in strict mode the arguments object retains its original values for the parameters.

    That brings us to the use of default parameters. How does the arguments object behave when the default parameters feature is used? Take a look at the following code:

    function getInfo (name, year = 1992, color = 'Blue') { console.log(arguments.length); // 1 console.log(year, color); // 1992 // "Blue" year = 1995; color = 'Orange'; console.log(arguments.length); // Still 1 console.log(arguments); /* [object Arguments] { 0: "Frankie" } */ console.log(year, color); // 1995 // "Orange"
    } getInfo('Frankie');

    Try it on CodePen

    There are a few things to note in this example.

    First, the inclusion of default parameters doesn’t change the arguments object. So, as in this case, if I pass only one argument in the functional call, the arguments object will hold a single item—even with the default parameters present for the optional arguments.

    Second, when default parameters are present, the arguments object will always behave the same way in strict mode and non-strict mode. The above example is in non-strict mode, which usually allows the arguments object to be modified. But this doesn’t happen. As you can see, the length of arguments remains the same after modifying the values. Also, when the object itself is logged, the name value is the only one present.

    Expressions as Default Parameters

    The default parameters feature is not limited to static values but can include an expression to be evaluated to determine the default value. Here’s an example to demonstrate a few things that are possible:

    function getAmount() { return 100;
    } function getInfo (name, amount = getAmount(), color = name) { console.log(name, amount, color)
    } getInfo('Scarlet');
    // "Scarlet"
    // 100
    // "Scarlet" getInfo('Scarlet', 200);
    // "Scarlet"
    // 200
    // "Scarlet" getInfo('Scarlet', 200, 'Pink');
    // "Scarlet"
    // 200
    // "Pink"

    Try it on CodePen

    There are a few things to take note of in the code above. First, I’m allowing the second parameter, when it’s not included in the function call, to be evaluated by means of the getAmount() function. This function will be called only if a second argument is not passed in. This is evident in the second getInfo() call and the subsequent log.

    The next key point is that I can use a previous parameter as the default for another parameter. I’m not entirely sure how useful this would be, but it’s good to know it’s possible. As you can see in the above code, the getInfo() function sets the third parameter (color) to equal the first parameter’s value (name), if the third parameter is not included.

    And of course, since it’s possible to use functions to determine default parameters, you can also pass an existing parameter into a function used as a later parameter, as in the following example:

    function getFullPrice(price) { return (price * 1.13);
    } function getValue (price, pricePlusTax = getFullPrice(price)) { console.log(price.toFixed(2), pricePlusTax.toFixed(2))
    } getValue(25);
    // "25.00"
    // "28.25" getValue(25, 30);
    // "25.00"
    // "28.25"

    Try it on CodePen

    In the above example, I’m doing a rudimentary tax calculation in the getFullPrice() function. When this function is called, it uses the existing price parameter as part of the pricePlusTax evaluation. As mentioned earlier, the getFullPrice() function is not called if a second argument is passed into getValue() (as demonstrated in the second getValue() call).

    Two things to keep in mind with regards to the above. First, the function call in the default parameter expression needs to include the parentheses, otherwise you’ll receive a function reference rather than an evaluation of the function call.

    Second, you can only reference previous parameters with default parameters. In other words, you can’t reference the second parameter as an argument in a function to determine the default of the first parameter:

    // this won't work
    function getValue (pricePlusTax = getFullPrice(price), price) { console.log(price.toFixed(2), pricePlusTax.toFixed(2))
    } getValue(25); // throws an error

    Try it on CodePen

    Similarly, as you would expect, you can’t access a variable defined inside the function body from a function parameter.

    Conclusion

    That should cover just about everything you’ll need to know to get the most out of using default parameters in your functions in ES6 and above. The feature itself is quite easy to use in its simplest form but, as I’ve discussed here, there are quite a few details worth understanding.

    If you’d like to read more on this topic, here are some sources:

    • Understanding ECMAScript 6 by Nicholas Zakas. This was my primary source for this article. Nicholas is definitely my favorite JavaScript author.
    • Arguments object on MDN
    • Default Parameters on MDN

    Using Default Parameters in ES6 is a post from CSS-Tricks

    Fallbacks for Videos-as-Images

    Safari 11.1 shipped a strange-but-very-useful feature: the ability to use a video source in the <img> tag. The idea is it does the same job as a GIF (silent, autoplaying, repeating), but with big performance gains. How big? “20x faster and decode 7x faster than the GIF equivalent,” says Colin Bendell.

    Not all browsers support this so, to do a fallback, the <picture> element is ready. Bruce Lawson shows how easy it can be:

    <picture> <source type="video/mp4" srcset="adorable-cat.mp4"> <!-- perhaps even an animated WebP fallback here as well --> <img src="adorable-cat.gif" alt="adorable cat tears throat out of owner and eats his eyeballs">
    </picture>

    Šime Vidas notes you get wider browser support by using the <video> tag:

    <video src="https://media.giphy.com/media/klIaoXlnH9TMY/giphy.mp4" muted autoplay loop playsinline></video>

    But as Bendell noted, the performance benefits aren’t there with video, notably the fact that video isn’t helped out by the preloader. Sadly, <video> it is for now, as:

    there is this nasty WebKit bug in Safari that causes the preloader to download the first <source> regardless of the mimetype declaration. The main DOM loader realizes the error and selects the correct one. However, the damage will be done. The preloader squanders its opportunity to download the image early and on top of that, downloads the wrong version wasting bytes. The good news is that I’ve patched this bug and it should land in Safari TP 45.

    In short, using the <picture> and <source type> for mime-type selection is not advisable until the next version of Safari reaches the 90%+ of the user base.

    Still, eventually, it’ll be quite useful.


    Fallbacks for Videos-as-Images is a post from CSS-Tricks