Notes

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

  • 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 20, 2019, 12:17 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 20, 2019, 12:17 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 20, 2019, 12:17 PM