johndjameson.com

Styling Fallback Fonts with Sass

2016-06-13T19:00:00-05:00

If you’ve ever read a blog post about loading web fonts asynchronously for performance, you’ve probably encountered CSS like this before:

html {
  font-family: 'Arial', sans-serif;
}

html.wf-active {
  font-family: 'Source Sans Pro', 'Arial', sans-serif;;
}

Look familiar? In that example, I’m using the Web Font Loader to load Source Sans Pro via JavaScript. When the fonts finish downloading, the library adds a wf-active class to the html element. Then the font family switches from Arial to Source Sans Pro — or from fallback font to web font.

Unfortunately, most web fonts don’t have ideal system font equivalents. To soften the janky reflow when switching fonts, you’ll need to fine-tune the fallback family’s size and other properties.

Arial is bigger than Source Sans Pro, so in this example, I reduced its font size to 20px to match Source Sans Pro at 21px. To compensate for the decrease in font size, I also increased Arial’s line height.

html {
  font-family: 'Arial', sans-serif;
  font-size: 20px;
  line-height: 1.45;
}

html.wf-active {
  font-family: 'Source Sans Pro', 'Arial', sans-serif;
  font-size: 21px;
  line-height: 1.35;
}

Here, I wrote two selectors: html and html.wf-active. It’s a pretty intuitive for properties inherited from the html element, but relying on a similar approach elsewhere will introduce a couple maintenance problems throughout the CSS.

Let’s go over the issues one by one and I’ll show you ways to use Sass to clean things up.

Nest with the Ampersand Selector

The first thing we can do is use Sass’ ampersand selector to nest the current selector within an ancestor. It’s easier explain with an example:

h1 {
  font-family: 'Arial', sans-serif;
  font-size: 34px;
  line-height: 1.25;

  html.wf-active & {
    font-family: 'Source Sans Pro', 'Arial', sans-serif;
    font-size: 36px;
    line-height: 1.1;
  }
}

The compiled CSS looks like this:

h1 {
  /* Fallback styles */
}

html.wf-active h1 {
  /* Web font styles */
}

See how the h1 comes after html.wf-active? Nesting this way cuts down on a little repetition, but there’s a lot more we can do.

Decrease Specificity

html.wf-active h1 is a compound selector, which makes it difficult to override any of its styles later on in the style sheet. Its specificity is unreasonably high for what should be a base style.

We can address that problem by flipping the selector so it affects specificity only when web fonts haven’t loaded. The not() pseudo-class lets us do exactly that.

h1 {
  font-family: 'Source Sans Pro', 'Arial', serif;
  font-size: 36px;
  line-height: 1.1;

  html:not(.wf-active) & {
    font-family: 'Arial', serif;
    font-size: 34px;
    line-height: 1.25;
  }
}

Now when web fonts finish loading and the wf-active class gets applied, html:not(.wf-active) h1 styles are ignored and the h1 specificity stays nice and low.

Put It in a Mixin

I don’t know about you, but I don’t want to write html:not(.wf-loaded) & for every fallback font style throughout my code. It’s easy to forget and tedious to write.

So let’s create a mixin to speed things up. The syntax for this one is simple. Name yours whatever you like, put the ampersand selector in there, and specify where the content goes.

@mixin fontless {
  html:not(.wf-active) & {
    @content;
  }
}

Now use that mixin to apply fallback font styles with ease.

h1 {
  font-family: 'Source Sans Pro', 'Arial', sans-serif;
  font-size: 36px;
  line-height: 1.1;

  @include fontless {
    font-family: 'Arial', sans-serif;
    font-size: 34px;
    line-height: 1.25;
  }
}

If you want to use the same mixin on the html element, you’ll need to add a conditional to make sure it doesn’t nest inside itself.

@mixin fontless {
  @if is-superselector('html', &) {
    &:not(.wf-active) {
      @content;
    }
  }
  @else {
    html:not(.wf-active) & {
      @content;
    }
  }
}

And then it works on html. Kablamo.

html {
  font-family: 'Source Sans Pro', 'Arial', sans-serif;
  font-size: 21px;
  line-height: 1.35;

  @include fontless {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    line-height: 1.45;
  }
}

Okay, we’re done here. Who needs conclusions on front-end blog posts? You learned a thing — go have fun jank busting fallback fonts. Or send me a tweet if you liked the article or have any questions. That’s cool, too.

Sidebearings & Alignment

2015-09-29T19:00:00-05:00

Sidebearings are a necesary part of any font; along with kerning, they ensure that letters look well-spaced next to one another. If you look at one of the glyphs in a font, its sidebearings are the spaces to the left and right of the letterform. These, along with the character itself, span a glyph’s entire width.

So how can sidebearings cause problems with alignment?

In left-aligned type, each line’s first glyph begins at the same point, but because of their sidebearings, the actual characters don’t. This causes large type to look indented — especially when set above or below smaller type.

In the example above, you can see that the larger the font size is, the more indented the type appears.

Negative margins

Accounting for sidebearings in left-aligned type is pretty straightforward in CSS: you can use margin-left with a negative value.

Depending on the typeface and font size, the value you’ll need can differ wildly, so try out several values to see what works best. I’ve found that they usually fall within the -0.02em to -0.1em range.

And there you have it: the type now looks properly aligned, thanks to a few negative margins.

Takeaways

Tweaking alignment with CSS can become a hassle if you try to manage all the type across a website. I think it’s best to focus on just the largest type, and then make adjustments elsewhere as needed. It’s simple to do and can have a huge effect on how cohesive your web typography looks.

As always, feel free to message me on Twitter if you have any questions, feedback, or topic suggestions.

Making Sense of Ch Units

2015-09-15T19:00:00-05:00

Ch units can be an invaluable tool when you’re working with monospaced fonts. For example, you can declare width: 60ch on an element and it’ll be the perfect size to fit 60 characters per line of text.

But when using ch units with non-monospaced (proportional) fonts, you’ll encounter some unexpected results. Declaring the same width of 60ch on a container should work, but it doesn’t. You’ll end up with somewhere around 70 or 75 characters per line.

So what causes them to be so inaccurate?

It comes down to the defintion of a ch unit. According to the specification, a ch unit is equal to the width of the 0 (zero) glyph found in the font used to render it. This definition works for monospaced fonts (where every glyph shares an identical width), but it’s completely unreliable for proportional fonts. On average, a ch unit ends up being 15–30% larger than the width of a font’s other glyphs.

See the problem? When compared to a line of zeros, ch units perform exactly as the specification defines them. But when compared to a line of text, ch units are too wide to be useful.

So let’s fix the problem

Ch units have a lot of potential, but it’ll take some math to get them working with proportional fonts.

Let’s say you have a 1000-character-long line of text and a div with a width of 1000ch. Like in the demo above, the line of text will be shorter than the same number of ch units. Okay, we expect that now. But what’s cool is that you can divide the width of the line of text by the width of the div to calculate a ratio that accounts for the discrepancy. The number you’ll end up with is usually in the 0.75–0.85 range for non-monospaced fonts.

Multiply by that number when using ch units, and the resulting value gives you a number much closer to what you’re looking for.

The more text there is, the more reliable the resulting number becomes.

Takeaways

Ch units offer a lot of interesting potential once you get past their quirks. They’re invaluable tools when working with monospaced fonts, and if you’re willing to take a few measurements and calculate a couple ratios, they’re excellent for proportional fonts, too.

Send me a message on Twitter if you have any questions or feedback — or if you just want to geek out over web typography.

Kerning & Ligatures in Letterspaced Type

2015-08-31T19:00:00-05:00

I recently wrote an article about the general guidelines for letterspacing type on the web. This article is a follow-up and much more focused, so bear that in mind as you continue reading. I’d recommend checking out the last one if you want a quick overview of using letterspacing on the web.

Now with that out of the way, let’s jump right into the rules for letterspacing type with kerning and ligatures.

Kerning

It’s a good practice to enable kerning in titles, headings, and other display type. These elements attract the most attention in a design, so it’s important to get their details just right when typesetting.

Tight letterspacing

The majority of kerning decreases the space present between letters. By enabling kerning alone, you can often decrease the horizontal spacing in a line of type — similar to reducing letterspacing. Tight letterspacing exaggerates the need for kerning, so if you make negative adjustments to the letter-spacing property, you should probably enable kerning, too.

In the example above, there’s a noticeable gap between the unkerned T and o pair at the beginning of the word Tomato. It looks awkward in an otherwise tightly spaced context. Enabling kerning here tightens up the initial spacing and improves the overall look and feel of the word.

Loose letterspacing

Kerning becomes less important as letterspacing increases, and at a certain point, it’s barely even noticeable.

If we look at the same word Tomato — now set with positive letterspacing — the difference is too subtle to make an impact. Kerning becomes a nice-to-have here, instead of a necessity.

Ligatures

Since ligatures are the combined form of two or more letters, and letterspacing adjusts the space in between those letters, you end up with two typesetting techniques that are at cross-purposes. That’s not to say you shouldn’t letterspace type containing ligatures, but there are a couple considerations to keep in mind.

Loose letterspacing

Ligatures are always a fixed width, but you can still letterspace the type surrounding them. As a result, ligatures end up looking clumped together within a word. It’s best to avoid them altogether in loosely letterspaced type.

In this example, we’re much better off using the version of liftoff that doesn’t contain ligatures.

Tight letterspacing

Ligatures are often narrower than their two related characters, so they look right at home in lightly tightened type. In a very tight setting, however, ligatures can stand out as noticeably wider than other letters.

If you look closely at the ff and ft pairs in the second word liftoff, you’ll see an awkward gap between their crossbars. Enabling ligatures fixes this problem by combining the separate letters into a single glyph and merging the two crossbars into one.

Browser support

The default behavior of most browsers is to disable kerning and ligatures wherever the letter-spacing property is applied. Due to current browser support, it takes some very precise CSS to get all three components working together.

The biggest issue is that Safari doesn’t actually support font-feature-settings. Declare the property in any way, and Safari enables both kerning and ligatures. Want to turn on small caps? You get kerning and ligatures. Want to disable kerning and ligatures? You get kerning and ligatures. This is particularly problematic when the property is inherited, since there’s no way to unset it by using the property itself.

I made a CodePen demo with more information on browser support. It’s a little too in-depth to embed here, but definitely take a look if you plan on using kerning and ligatures together with with the letter-spacing property.

And that’s it!

Before we wrap up, I have to give a shout-out to Bram Stein for his work on The State of Web Type. That site has been a huge help for me in figuring out an approach that works across browsers.

If you have any questions about letterspacing on the web — or if you just want to chat about web typography — send me a message over on Twitter.

Guidelines for Letterspacing Type

2015-08-17T19:00:00-05:00

I know very few web designers who ever adjust letterspacing when setting type on the web. Small changes can have an enormous effect on the readability of text. That means it’s hard to make those decisions unless you’re very confident with your knowledge in web typography.

Effectively letterspacing text can make the difference between good typography and great typography. With that in mind, I decided to put together some guidelines for letterspacing type on the web.

Capital letters

It’s almost always a good idea to increase letterspacing with uppercase type. Default spacing between uppercase letters is designed to be the minimum necessary, so you’ll usually want to add a little more breathing room between the characters.

This usually involves setting a letter-spacing value around 0.2–0.25 ems for headings and a value around 0.05–0.1 ems for acronyms.

In this example, “HTML” and “CSS” are set in small caps, but the same advice applies here, too.

Font weight

Like with font size, the relationship between font weight and letterspacing follows a simple pattern: as weight increases, letterspacing decreases, and as weight decreases, letterspacing increases.

This is because of the way typefaces at look and feel at certain weights. Light typefaces have an airy aesthetic that’s complemented by open letterspacing, while bold typefaces have a dark and heavy aesthetic that’s complemented by pulling the letters closer together.

For a more in-depth explanation on how weight affects letterspacing decisions, check out Carolina de Bartolo’s Typography Matters talk over on YouTube.

Light-on-dark text

Light type set on a dark background usually benefits from a small increase in letterspacing.

If you look at the following example, you’ll notice that the white-on-black text appears bolder than the black-on-white text. They’re the exact same size and weight, but the white-on-black text still looks a little bit thicker. To compensate for that difference, you’ll need to make a subtle increase in letterspacing.

CSS supports letter-spacing values in quarter-pixel increments, so I’m able to specify 0.5px in this example. When setting type at a small size, you’ll often find comfortable letterspacing somewhere in between whole pixel values.

There’s always more to learn

This article just scratches the surface of letterspacing type on the web. Once you start combining different elements of typography, you’ll run into situations where its best to work outside these guidelines. For example, how does type set in italics respond to letterspacing? And in what situations does wordspacing come into play?

I’m still figuring out the answers to those questions myself, but if you’d like to start a conversation about web typography, hit me up on Twitter.

Typographic Units in CSS

2015-08-04T19:00:00-05:00

Ex and ch are typographic units, meaning their values depend on an element’s font family. When you use em or rem units, the browser computes their values based on the element’s font size. It doesn’t matter what font gets displayed onscreen, the browser will compute the same values for every typeface. This is where ex and ch units offer a little more flexibility. They require the browser to reference an element’s font family before computing values and applying styles.

Let’s take a look at these two typographic units in more detail.

Ex units

In typographic terms, x-height is determined by the height of a typeface’s lowercase letters. This is often measured by the letter x, which doesn’t have any ascenders or descenders. The relationship between a typeface’s font size and x-height can tell you a lot about the typeface’s proportions with only a couple of measurements.

Ex units get their value from the x-height of the font context they’re computed in, which is determined by two things: font family and font size. In other words, they’re equal to the x-height of a specific font family at a specific font size.

To illustrate this, if Helvetica Neue is set at a font size of 100px, then you can expect 1ex to equal about 52px:

Using ex units in CSS is just like using any other units. You’re able to write them with any CSS property you’d use with pixels or em units.

Ch units

Ch units are based on the characters of a typeface, drawing their value from the width of a font’s 0 glyph. I’ll warn you that this is somewhat arbitrary, and the width of a 0 is often a poor estimate of a typeface’s average character width. However, when using a monospace typeface — where all glyphs share identical widths — ch units are always dependable.

With this constraint in mind, here are some of the use cases where I’ve found ch units to be particularly useful:

Setting a container’s width
Letter-spacing text (instead of using height-based units like em)
Creating gutters that are based on a typeface’s proportions

In the following example, I’m able to declare max-width: 75ch on the paragraph element, ensuring ideal line length as the user’s viewport widens.

Takeaways

I’ll admit that ex and ch units are more than a little weird. They’re unlike any other units CSS has to offer. Weirdness aside, these typographic units offer front-end developers a lot of opportunities to explore web typography. With any luck, I hope that ex and ch pave the road for additional typographic units to follow.

Data Attributes for Keyboard Shortcuts

2015-03-15T19:00:00-05:00

Assigning keyboard shortcuts on the web could be as simple as adding an HTML attribute onto an element and setting its value. Even though browsers are unlikely to support this approach natively, you’re still able to define shortcut keys in your markup by using data attributes and a touch of JavaScript.

<button data-shortcut='s'>Do Something</button>

I think that’s pretty intuitive. Think about all the common use cases:

Clicking a button
Following a link
Focusing a form input

Other than scrolling past copy on code-related blog posts, these three things make up most of the interactions on the web. Using data attributes can give you an expressive, reusable syntax for assigning keyboard shortcuts to each of these use cases.

Let’s go over how it works.

Set up dependencies

Before getting started, you’ll need to grab jQuery and jQuery Hotkeys, and link them up in your project. You can get by on your own without either library, but including them both helps simplify the code we’ll cover down below.

Using Bower, you can download a copy of each library by entering the following shell command:

bower install jquery jquery.hotkeys --save

Write some JavaScript

Remember our three use cases? Well, in JavaScript, they translate into the following behaviors:

Triggering a click event
Changing window.location
Giving focus to an element

With jQuery Hotkeys set up in your project, write a $(document).ready() call that contains the following JavaScript:

$('[data-shortcut]').each(function() {
  var $element = $(this),
      key = $element.data('shortcut');

  $(document).on('keyup', null, String(key), function() {
    $element.trigger('focus').trigger('click');

    if ($element.prop('tagName').toLowerCase() === 'a') {
      window.location = element.attr('href');
    }
  });
});

This code will loop through every HTML element that has a [data-shortcut] attribute and attach the keyboard shortcut’s event handler. Now when you press an assigned key, the keyup event will trigger both click and focus events on its related DOM element. Additionally, if the element is an <a> tag, your browser will follow the link provided by the element’s href attribute.

Assign your shortcuts

Your JavaScript is up and running, so you can finally start assigning keyboard shortcuts in your markup! Find an <a>, <button>, or <input> tag that could use a shortcut, and add a data-shortcut attribute with the intended key as its value.

<a href='http://example.com/edit' data-shortcut='e'>Edit</a>

If you want to assign a keyboard shortcut that requires pressing two or more keys at once, you’ll need to use the syntax that jQuery Hotkeys provides. The jQuery Hotkeys example page has even more key combinations.

<a href='/index.html' data-shortcut='shift+1'>

<button data-shortcut='alt+m'>Menu</button>

<input type='submit' data-shortcut='ctrl+alt+enter'>

And that’s it — you’ve set up everything you need to start assigning keyboard shortcuts in your markup. Now go forth and empower efficiency.

Filtering Google Results with Alfred

2014-08-19T19:00:00-05:00

Filtering search results on Google is always a bit of a hassle. The search tools are difficult to find, and once you’ve found them, you have to click each filter individually before refreshing the page to enable another one. For commonly used filters or groups of filters, this can add up to be a real productivity killer. Thanks to Alfred, however, you can configure these filters a single time, and then save them as a custom Web Search to use again in the future.

For an introduction to Alfred check out Drew Barontini’s excellent article on how to set up Aflred like a pro.

Adding a custom search

To get started, open the Preferences window in Alfred, click the Features tab, and then select the Web Search sidebar item. You should encounter a table of Alfred’s built-in Web Searches that you can augment by clicking Add Custom Search.

The modal that appears will let you define a custom search URL, as well as a title and keyword to use via Alfred’s main window. Once you configure a Google search just the way you like it, find the part of the URL that matches your search text and replace the words with {query}. Then paste your modified URL into the Search URL input field and label it to your liking.

In the example above, I’ve defined a custom Google search that filters out any web pages published more than a year ago. This idea was inspired by Olivier Lacan’s blog post Put a Date on It and helps me every day when searching for up-to-date information on web-related nerdery.

Feel free to copy the URL below:

https://www.google.com/search?q={query}&tbs=qdr:y

Useful Google searches

Configuring Google searches via the website can generate some scary-looking URLs littered with unnecessary parameters. You can shorten these dramatically before adding them to Alfred, but the process involved is rarely better than Delete Things until It Breaks.™

If you want to avoid that hassle altogether, here are a few more Google search URLS you can paste into Alfred and start using today.

Web results

Last month:
https://www.google.com/search?q={query}&tbs=qdr:m

Last week:
https://www.google.com/search?q={query}&tbs=qdr:w

Last 24 hours (great for news and Smash Bros. rumors):
https://www.google.com/search?q={query}&tbs=qdr:d

Verbatim:
https://www.google.com/search?q={query}&tbs=li:1

Image results

Animated GIFs:
https://www.google.com/search?q={query}&tbm=isch&tbs=ift:gif,itp:animated

Show sizes:
https://www.google.com/search?q={query}&tbm=isch&tbs=imgo:1

Labeled for reuse with modification:
https://www.google.com/search?q={query}&tbm=isch&tbs=sur:fmc

Keep ‘em coming

That’s it for now, but as a crazy efficiency nerd, I’ll make sure to add to this post whenever I think of another useful Google search. Until then, have fun experimenting with custom search URLs on different websites. For example, you could search for only Prime-eligible items on Amazon—or even tweets you’ve posted in the last month.

Updating Your Shell with Homebrew

2014-07-20T19:00:00-05:00

OS X ships with an outdated version of Bash as its default shell. The preinstalled version dates back to 2007, and since then, Bash has been updated to add features and fix troublesome bugs. If you want to use an updated version of Bash—or even Zsh—as your shell, you can install it by using Homebrew, a package manager for OS X.

Installing via Homebrew

To get things started, you need to tell Homebrew to install the latest version of your shell. Whether you prefer using Bash or Zsh, the following instructions will work for both. Just change the word bash to zsh, and you’ll be good to go.

Open your terminal and enter this command:

brew install bash

Homebrew installs packages to /usr/local/bin/, so you’ll need to specify that path when looking for any Homebrew packages. In the following three commands, we’ll initiate a shell as the root user, append our desired shell’s path to a file of whitelisted system shells, and then change the system shell globally.

sudo -s
echo /usr/local/bin/bash >> /etc/shells
chsh -s /usr/local/bin/bash

Now you can close and reopen your terminal. With just those few commands, you should be using with the latest version of your shell. You can double-check the version you’re using with the command echo $BASH_VERSION. Or, if you’ve installed Zsh, you can use the command echo $ZSH_VERSION to do the same.

That’s it for installing your brand-new shell. Let’s take a look at how to keep it up-to-date with the help of Homebrew.

Staying current

The Homebrew command update actually refers to updating Homebrew itself. If you want to install the latest version of a Homebrew package, you’ll have to use the word upgrade instead:

brew upgrade bash

In this example, Homebrew will look for the package named bash on your computer and install the latest version. If you already have the newest version installed, Homebrew will print an error message telling you exactly that. You’ll have to run this command manually from time to time, but it’s a much more reliable approach than downloading directly from source or maintaining a cloned version control repository.

Now go out and write shell scripts for all the things.

Using Emmet with Sublime Text

2014-04-27T19:00:00-05:00

One of the biggest problems with hand-authoring HTML is the monotony of writing the common markup that surrounds content itself. While several templating languages exist to alleviate this issue, they introduce dependencies and abstractions that have a somewhat steep learning curve to master. Fortunately, a tool called Emmet walks the line between both manual and automated approaches—and has become one of the most useful additions to my workflow.

What is Emmet?

Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. — Emmet Documentation

This means that by using Emmet we can:

Type HTML and CSS using simple shortcuts
Save time writing code
Make life easier

Scaffolding an HTML document and common navigation using Emmet

Pretty useful, right? Let’s find out how to install it using Sublime Text.

Installing plugins

Sublime Text has an amazing add-on called Package Control that lets you find and install virtually any plug-in from within the application itself. The line of code to install Package Control changes with every release, so you’ll have to copy it directly from the offcial website.

Once you have the snippet for your version of Sublime, launch the program and show the Console (⌘+` on OS X). Paste the intended code, hit Enter, then watch Package Control install itself like magic.

With Package Control installed, you can download additional plug-ins by opening the Command Palette (Shift+⌘+P on OS X) and typing “Install Package” and then submitting the top result. A similar menu opens next, revealing the list of packages available for installation. Type “Emmet” here and choose the top result.

Installing Emmet using Package Control

Using Emmet

Now that we have Emmet installed, we can finally start having fun with some of its incredible shortcuts. The formula for using Emmet is very straightforward:

Type a supported shortcut
Press Tab

And that’s it! Check out some of the most useful shortcuts you can start using right now.

Getting better

If you’re like me, getting up to speed with new tools is an endless struggle. Fortunately, Emmet is completely optional once installed and you can ignore all of its features until you want to use them. This makes mastering Emmet as flexible as gradually adding shortcuts to your workflow when you need them. Start with the shorthand for a class or ID, for example, and then build up from there, learning more ambitious shortcuts along the way.

You can visit the official documentation to discover all of Emmet’s features, or if that isn’t your cup of tea, CSS-Tricks’ Chris Coyier has a sweet screencast covering the basics along with everything else you’ll need to know.

johndjameson.com

Styling Fallback Fonts with Sass

Nest with the Ampersand Selector

Decrease Specificity

Put It in a Mixin

Sidebearings & Alignment

Negative margins

Takeaways

Making Sense of Ch Units

So let’s fix the problem

Takeaways

Kerning & Ligatures in Letterspaced Type

Kerning

Tight letterspacing

Loose letterspacing

Ligatures

Loose letterspacing

Tight letterspacing

Browser support

And that’s it!

Guidelines for Letterspacing Type

Capital letters

Font size

Font weight

Light-on-dark text

There’s always more to learn

Typographic Units in CSS

Ex units

Ch units

Takeaways

Data Attributes for Keyboard Shortcuts

Set up dependencies

Write some JavaScript

Assign your shortcuts

Filtering Google Results with Alfred

Adding a custom search

Useful Google searches

Web results

Image results

Keep ‘em coming

Updating Your Shell with Homebrew

Installing via Homebrew

Staying current

Using Emmet with Sublime Text

What is Emmet?

Installing plugins

Using Emmet

Getting better