Notes

Byte-sized thoughts, links, and quotes. Subscribe via RSS.

  • We assume that complex problems always require complex solutions. We try to solve complexity by inventing tools and technologies to address a problem; but in the process, we create another layer of complexity that, in turn, causes its own set of issues.

    Max Böck, On Simplicity
    Mar 29, 2019, 7:16 PM
  • As a front-end developer, emmet is such an important tool in my toolbelt. In short emmet provides shortcuts that you can type and expand into full HTML or CSS.

    HTML example:

    ul.list>li.list__item*3>a[tab]
    <ul class="list">
    <li class="list__item"><a href="http://" target="_blank" rel="noopener noreferrer"></a></li>
    <li class="list__item"><a href="http://" target="_blank" rel="noopener noreferrer"></a></li>
    <li class="list__item"><a href="http://" target="_blank" rel="noopener noreferrer"></a></li>
    </ul>

    CSS example:

    .list {
    pt0[tab]
    }
    .list {
    padding-top: 0;
    }

    It can take a bit to get used to the syntax and usage but it will dramatically improve your proficiency as well as reduce HTML errors.

    Learn more about Emmet in Visual Studio Code.

    Mar 29, 2019, 7:16 PM
  • A quick tip that I use all the time when working with list items.

    Add CSS properties to all items except the last item:

    li {
    margin-right: 1rem;
    }
    li:last-of-type {
    margin-right: 0;
    }
    /* Replace the above lines with this */
    li:not(:last-of-type) {
    margin-right: 1rem;
    }

    This also works great for blog listings.

    li:not(:last-of-type) {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #ddd;
    }

    I am using this piece of CSS on listing pages of this site.

    Mar 29, 2019, 7:16 PM
  • This CSS trick allows you to create responsive overlapping elements without the use of position: absolute. Works great for tab panels of differing heights.

    .tab__panel {
    position: relative;
    top: 0;
    left: 100%;
    width: 100%;
    margin-left: -100%;
    float: left;
    padding: 40px;
    background-color: #fff;
    }

    Checkout this demo to see it in action.

    Mar 29, 2019, 7:16 PM