Notes

Byte-sized thoughts, links, and quotes.

  • The past few months I've noticed this trend of cheeky remarks on Twitter about the tooling folks choose to use to build their own personal site/blog. I've had to start muting a few individuals – all who I have enjoyed following over the years because of their mostly positive contributions to the community.

    My personal website has been the biggest source of learning over the years. It has gone through many iterations and technology stacks, all for the sake of learning and exploration. So it is frustraiting when I hear people discouraging others from using a certain tool to build their own site.

    Please feel free to choose whatever tool you want to build your own personal site. I know the positive impact these experiments can have on your career.

    Jul 19, 2019

  • 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

    Jul 18, 2019

  • Comparison is the thief of joy

    Theodore Roosevelt

    Jul 17, 2019

  • 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.

    Jul 16, 2019

  • 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.

    Jul 15, 2019

  • 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.

    Jul 14, 2019