The Latest

15/10/2022

#latest#learning#project#style-guide

Return to form

I've just returned to work after some much needed time away. I didn't do too much, but I was able to launch a client project, and rebuild this website. It was really quite a productive time.

I reset my goals and routine to track my progress. This is all to help me actually complete some ideas, instead of leaving them on paper. Which means I am back to working on the unnamed Brand Tool project. I'm rebuilding it with a similar stack to what I use at work, so I should be able to power through it a bit quicker this time.

Random things I've picked up recently

:nth-of-type Psuedo selectors only work on elements

You cannot select elements with only a class name when using :nth type psuedo-class selector.

.class:nth-of-type(2){ color: red; }

You instead need to specify the element, then the class:

p.class:nth-of-type(2){ color: red; }

Always give components and component parts meaningful class names

Should be a obvious note, BUT working with Tailwind CSS and the long list of classes can make it easy to forget adding a meaningful class name or id. Adding these can allow you to target items more easily when it comes to tracking event/analytics or e2e testing.

Custom css editor on page with content editable

I can't remember where I saw this, but you can add a live css editor to your html by adding { display: block; } to your <style>, giving it a contenteditable attribute, and wrapping it in a <pre> tag

css rules with multiple selectors will not work if one is invalid

This will work:

.class1, .class2, .class3{ color: red; }

This will not work, even if the other selectors are valid:

.class1, .class2, ..class3{ color: red; }

Chrome and Firefox resolve .sort() slightly differently

For some reason (that I haven't looked at), Firefox and Chrome behave differently when using the .sort() method in JavaScript

This example will evaluate differently.

const plainSort = myArray.sort( (a, b) => { return a > b } );

To fix this, we need to specify a return number.

const adjustedSort = myArray.sort( (a, b) => {
    return  a > b ? 1 : -1
});