Articles by
Louis Lazaris

Front-end developer, author, speaker, and curator of Web Tools Weekly.

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.

(more…)

Front-End Tools: My Favorite Finds of 2017

Another twelve months have passed and I'm sure all of you have come across some interesting new coding techniques, technologies, CSS tricks (of course!), and other stuff that will make you more productive in 2018.

As some of you might know, I curate a weekly newsletter called Web Tools Weekly, in which I feature dozens of links every week to new tools, mostly focusing on stuff that's useful for front-end developers. So it's an understatement to say that I've come across lots of new tools over the past 12 months.

As I've done in years past, I've put together a brief look at some of my favorite finds in front-end tools.

(more…)

outline-offset

The outline-offset property in CSS offsets a defined outline from an element's border edge by a specified amount. An outline, which is different from a border, does not take up any space on the page (like an absolutely positioned element) so the outline can be offset in any amount and it will not affect the position or layout of surrounding elements.

(more…)

overflow-wrap

The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.

(more…)

caption-side

The caption-side property in CSS allows you to define where to position HTML's <caption></caption> element, used on HTML tables. This property can also apply to any element whose display property is set to caption-side.

(more…)

transition-delay

The transition-delay property, normally used as part of transition shorthand, is used to define a length of time to delay the start of a transition.

.example {
    transition-delay: 5s;
}

The value can be one of the following:

  • A valid time value (defined in seconds or milliseconds)
  • A comma-separated list of time values, for defining separate delay values on multiple transitions for a single element

The default value for transition-delay is 0s, meaning that no delay will take place and the transition will start to occur immediately. The time value can be expressed as a decimal-based number for more precise timing.

When a transition has a delay value that is negative, it will cause the transition to begin immediately (with no delay), however the transition will begin partway through the process, as though it had already begun.

The following CodePen shows a hover effect on a box that uses a transition-delay value of 2s with a transition duration of 1s:

Check out this Pen!

Now compare that to the following demo, which has a delay of -1s and a duration of 3s:

Check out this Pen!

Notice that in the second example, only the final two-thirds of the actual transition are visible and there is no delay. The negative value removes the delay and effectively cuts into the duration.

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

.example {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

IE10 (the first stable version of IE to support transition-delay) does not require the -ms- prefix.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works 4+ 10.5+ 10+ 2.1+ 3.2+

transition-timing-function

The transition-timing-function property, normally used as part of transition shorthand, is used to define a function that describes how a transition will proceed over its duration, allowing a transition to change speed during its course.

.example {
    transition-timing-function: ease-out;
}

These timing functions are commonly called easing functions, and can be defined using a predefined keyword value, a stepping function, or a cubic Bézier curve.

The predefined keyword values allowed are:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end

For some values, the effect may not be as obvious unless the transition duration is set to a larger value.

Each of the predefined keywords has an equivalent cubic Bézier curve value or equivalent stepping function value. For example, the following two timing function values would be equivalent to each other:

.example {
    transition-timing-function: ease-out;
}

.example-2 {
    transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

As would the following two:

.example {
    transition-timing-function: step-start;
}

.example-2 {
    transition-timing-function: steps(1, start);
}

Using steps() and Bézier curves

The steps() function allows you to specify intervals for the timing function. It takes one or two parameters, separated by a comma: a positive integer and an optional value of either start or end. If no second parameter is included, it will default to end.

To understand stepping functions, here is a demo that uses steps(4, start) for the box on the left, and steps(4, end) for the box on the right (hover over a box or reload the frame to view the transitions):

Check out this Pen!

When start is specified, the change of values occurs at the start of each interval, while end causes the change of values to occur at the end of each interval.

A detailed look at Bézier curve values is beyond the scope of this reference, however see the references in the related links section for tools that demonstrate visually how these values work.

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

.example {
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

IE10 (the first stable version of IE to support transition-timing-function) does not require the -ms- prefix.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works 4+ 10.5+ 10+ 2.1+ 3.2+

transition-duration

The transition-duration property, normally used as part of transition shorthand, is used to define the duration of a specified transition. That is, the length of time it will take for the targeted element to transition between two defined states.

.example {
    transition-duration: 3s;
}

The value can be one of the following:

  • A valid time value (defined in seconds or milliseconds)
  • A comma-separated list of time values, for transitioning multiple properties on a single element

The default value for transition-duration is 0s, meaning that no transition will take place and the property change will take place immediately, even if the other transition-related properties are defined. The time value can be expressed as a decimal-based number for more precise timing and negative values are not allowed.

The following CodePen shows a hover effect on a box that uses a transition-duration value of 1s to gradually change the background color:

Check out this Pen!

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

.example {
    -webkit-transition-duration: 700ms;
    -moz-transition-duration: 700ms;
    -o-transition-duration: 700ms;
    transition-duration: 700ms;
}

IE10 (the first stable version of IE to support transition-duration) does not require the -ms- prefix.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works 4+ 10.5+ 10+ 2.1+ 3.2+

transition-property

The transition-property property, normally used as part of transition shorthand, is used to define what property, or properties, you want to apply a transition effect to.

This is done by providing the name of the property as the value:

.example {
    transition-property: color;
}

The value can be one of the following:

  • A single property name, as in the example above
  • A comma-separated list of property names (shorthand or longhand), for transitioning multiple properties on a single element
  • The keyword none, which indicates that no property will transition
  • The keyword all, which indicates that all properties will transition (the default)

When comma separating the values, the property names are essentially mapped to the other transition properties defined (transition-timing-function, transition-duration, and transition-delay). So this means if a comma-separated list of properties includes one or more property names that are invalid, the other properties will still transition, and will map to their intended related transition properties.

The spec describes this by saying:

“[U]nrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.”

When using a value of none or the universal keywords inherit or initial, these values cannot be used as part of a comma-separated list, otherwise this will result in a syntax error and the entire line will be ignored.

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

.example {
    -webkit-transition-property: color;
    -moz-transition-property: color;
    -o-transition-property: color;
    transition-property: color;
}

IE10 (the first stable version of IE to support transition-property) does not require the -ms- prefix.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works 4+ 10.5+ 10+ 2.1+ 3.2+
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag