Skip to main content

Louis Lazaris

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

Article

An Introduction and Guide to the CSS Object Model (CSSOM)

If you've been writing JavaScript for some time now, it's almost certain you've written some scripts dealing with the Document Object Model (DOM). DOM scripting takes advantage of the fact that a web page opens up a set of APIs (or interfaces) so you can manipulate and otherwise deal with elements on a page.

But there's another object model you might want to become more familiar with: The CSS Object Model (CSSOM). Likely you've already used it but didn't necessarily … Read article

Article

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 … Read article

Article

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 … Read article

Almanac

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.… Read article

Almanac

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.

.delay-me {
  transition-delay: 0.25s;
}

The value can be one of the following:

  • A valid time value defined in seconds or milliseconds e.g. 1.3s or 125ms
  • A comma-separated list of time values, for defining separate delay values on multiple transitions for a single element e.g. 1s background-color, 350ms transform

The default value for transition-delay is … Read article

Almanac

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 … Read article

Almanac

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-durationRead article

icon-link icon-logo-star icon-search icon-star