Recently at work we started a new Slack channel called #TIL inspired by this post by Brendan Seerup. The idea is to share anything you have learned today. It could be a small code snippet, brief explanation or simply a new keyboard shortcut. It can also be helpful to solidify existing knowledge and an opportunity to share.

This post is a round up of my #TIL’s from the past week, hopefully you can take something from it.

Script Defer browser support

The script defer attribute indicates to the browser that the script is meant to be executed after the document has been parsed.

It now has pretty decent browser support and depending on your requirements can be used today. But be careful, some implementations cause deferred scripts to run out-of-order.

Debugging CSS with the outline property

The outline css property, which acts similar to border but draws on top of the content is super handy for debugging i.e to highlight all component classes when using BEM with namespaces. Outline doesn’t allow a radius in most major browsers, but this can be done with box-shadow’s instead. I discovered outline from Harry Roberts fantastic post on namespaces.

[class^="c-"],
[class*=" c-"] {
  outline: 3px solid cyan;
}

Let flexbox children shrink

Whilst working on a layout this week, I struck an issue where text inside of a flexbox child wouldn’t truncate as I expected it to. When the text was nested inside a child element, it was breaking out of the container. Text which was directly inside of the flex child was correctly truncated.

It turns out that flexbox children refuse to shrink past their minimum intrinsic width unless you specify a min-width value, this is because of the new default min-width value for flex items.

See the Pen Flexbox Child Element Text Overflow by Eddie Blundell (@eddiebluh) on CodePen.

SVG fill color using parents text color

We’ve been using SVG’s for icons for a while now and whilst they provide many benefits, they can also cause stylesheets to become littered with svg fill definitions which quickly gets out of hand.

You can use fill: currentColor on svg elements so they inherit their parents color property, this allows you to have SVG icons follow their parent’s text color, similar to how icon fonts behave.

See the Pen SVG currentColor by Eddie Blundell (@eddiebluh) on CodePen.

Spy on function calls with monitor()

TIL You can use the monitor function inside chrome devtools to ‘Spy’ on a function. The function arguments will be logged to the console when invoked. Haven’t had a real use case for this yet, but thought it was neat.

function doit(someArg) { 
  ...
}

monitor(doit);
doit('abc');

function doit called with arguments: abc

One way component bindings in Angular 1.5

In angular >= 1.5 you can specify one way bindings in isolate scope expressions for components. This means changes only propagate to the component, changes will not propagate back upwards from within the component.

angular.module('app.submodule')
  .component('messageRow', {
    binding: {
      message: '<'
    },
    template: '<div>{{$ctrl.message}}</div>'
  });

This can help use keep our component’s “dumb” in angular, similar to how props work with react.

Roundup

I only included the relevant #TILs in this post as note-to-self and hope to curate more in the future. If you notice any mistakes please let me know 😁