Forem: Colt Borg

UI Challenge 01

Colt Borg — Mon, 16 Mar 2020 00:00:00 +0000

What to do

Let's do some some CSS layout practice!

The above image is a simple website with text and an image. Using whatever CSS technique you'd like, recreate it.

The goal is not to be perfect, but to practice.

The reference image can be seen/downloaded here.

Colors and assets

I'll give you the colors, fonts, and image involved so you don't have to try and look them up yourself.

Colors

Here are the colors set as CSS custom properties. You don't have to use them as custom properties.

:root {
  --green: #1b390f;
  --red: #de5908;
  --white: #e8d9d6;
}

Fonts

For all text except for the heading I'm using the system sans-serif font. You can use any stack you'd like.

The heading text is using a Google font called Catamaran and the weight of 700. You can import it into your code using this snippet:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Catamaran:wght@700&display=swap">

Image

The image is hosted over at Unsplash, created by Travis Yewell. You can use this url.

Solution

I'll publish a solution soon. Until then, try to re-create this on your own.

Credit

Inspiration for this challenge comes from a dribbble post from Davide Baratta.

Visual Studio Code Setup

Colt Borg — Mon, 02 Mar 2020 00:00:00 +0000

I've been using Visual studio code (VSCode) since 2017. It has been one of my all time favorite text editors. This year I decided to look through my set up and document what I use.

Extensions

Bracket pair colorizer 2

This extension is great for focusing on what block of code your looking in. I have some of the more verbose settings enabled so that I can see a lot of colors as I navigate through code. This is especially helpful when I have several nested functions or objects within each other.

Change-case

I use this extension via the command palette a lot. Many times I need to transform a pascal case vue.js component into kebab case or vice versa.

Code spell checker

In the course of typing, I make a lot of spelling mistakes. This extension is a life saver. Plus it helps find little bugs due to typos.

ESLint

ESLint is an essential extension for any JavaScript-based project. Getting all the settings to work are a pain in the ass sometimes, but I couldn't live without it.

Headwind

This extension helps me align my tailwind classes in the same order without having to thing about it. It doesn’t seem like much, but the consistency of the order without having to think about is awesome.

Tailwind CSS intelliSence

IntelliSence is a great feature of VSCode. Why not have it know about my Tailwind classes? Very useful for remembering the number differences for spacing and colors.

Toggle quotes

This extension seems like it would be native to VSCode along with all the other text transformation tools. I can easily switch between single quotes, double quotes, and back ticks. I even like the default keyboard shortcut control + ‘.

Vetur

Vetur gives you easy integration with all things Vue in VSCode. It's an essential extension for working with Vue projects. What are you waiting for, download this package right now!

Vscode-icons

I've used the vscode-icon set since I started using Visual Studio Code. I'm so used to them now, I don't want to switch.

Vue vscode snippets

The best snippet package for Vue.js. I sometimes forget the format of certain features because this package has so many good snippets.

Quick and simple text selection

I've used this extension so much I thought it was baked into VSCode! It makes selecting text within characters—think '', "", [], and ()—a keyboard shortcut away. When I have to do a lot of irregular find and replace tasks, this extension haves my life.

Text Marker

Sometimes I need to highlight a piece of code to copy, refactor, delete, etc. This extension does the trick! I try to use it sparingly and clear all highlights when I'm done.

Font

Victor mono was my most used font in 2019. Along with the ligatures and the cursive italic variant, the large x-height makes it easy for me to read.

If it works well for you, consider donating to the creator.

Italic cursive face not working in VSCode

(Mar 12, 2020 Update)

There is a bug with VSCode font rendering for macOS. If this is happening for you, there is a simple work around. Open up the Font Book app, find the Victor Mono font and disable or delete all "oblique" faces. The "oblique" faces were getting applied instead of the "italic" faces.

Themes

I like color themes. I like having a lot of color themes to choose from. I like light themes for when the sun is out and there is a glare from the window. I like dark themes for the rest of the time.

I tried to stick with one theme for a little while, but I can never make one last. So I keep a handful around and change whenever I feel like it—the cmd + k cmd + t shortcut is handy for quick switching.

Cobalt2

A classic blue and yellow theme from Wes Bos. I tend to not use it, as I think it's too bright for me. But it has a great highlight search color when doing a "Find in files".

Dracula

Great dark theme with purples and pinks. This theme puts a solid vertical pink line between editors when you're in split mode, which I really like. So when I am working with two or three splits for long periods of time, I switch to this theme.

Monokai pro

This theme costs money, but there is a free trial. I'd say it is well worth it since it comes with an icon theme—which I don't use. This is my "home base" theme. I might not use it all the time, but I always come back to it eventually.

Light owl

My favorite light theme. Just enough color to be nice, but everything is still readable. It comes with Night Owl, so a two for one situation.

Night owl

A great theme for late night coding. Sarah Drasner really put a lot of TLC into this theme.

Overnight Slumber Italics

I haven't used this theme very much, but I like the peach and purple vibe of this theme. I think I like the "slumber" alternative better than the base theme.

SynthWave '84

SUPER POP COLORS! When I really need to tell the difference between variables and functions, I turn on this theme. I don't turn on the custom glow CSS because glow is very distracting to me.

Thanks for reading

Next up I'll be writing up what keyboard shortcuts I use and customized to save myself time.

What extensions/themes do you use for VSCode? I'd love to hear about your setup!

Bring focus to things app

Colt Borg — Wed, 08 Jan 2020 00:00:00 +0000

I love the app Things 3. I have been using it since it’s design update in (look up when Things 3 released).

My only problem with it is that it does have the ability to defer tasks or hide tasks until I can start them.

However, I’ve found a nice work around to only show the tasks that I’m working in right not.

I created a new tag called now.

When I’m working on a task, I add the now tag to the task.

Then on the top of the page—usually the Today page for me—select the now tag to only show tasks that have that tag.

I usually only add the tag to one task at a time. And more I don’t see any other tasks while I’m working on what’s important. This might seem easy or not that big of a deal, but not seeing clutter ready improves my focus.

Target elements without classes

Colt Borg — Thu, 19 Dec 2019 00:00:00 +0000

Why did I need to target classless elements?

In making this blog site, I want to style content that comes from markdown files. I found a nice trick to apply styles to the elements that don’t have any classes one them—aka coming from the markdown content.

I can do this by combining the not() and attribute selectors. For example, if I want to target any paragraph without a class, it would look like this:

p:not([class]) {
  margin: 1rem 0;
}

Why :not()

:not() is a negation pseudo-class. So whatever you put in it, it will look for things that are not that thing.

Your best friend Attribute Selectors

Attribute selectors are really powerful. They can check for a whole bunch of different things. But in this case, we can use them to detect if class is placed on the element. In this case we don't care which or how many classes are used.

Make node list into an array

Colt Borg — Sat, 07 Dec 2019 00:00:00 +0000

Most of the time when I'm coding with node lists, I want to iterate through each of them and preform some action. My first thought is, "Node lists are _like_ arrays, I should be able to use the array methods like .map() or .filter() right?" 🤔

But every time it backfires because Node lists are actually objects.

const nodeArray = document.querySelectorAll('p');

nodeArray.map(node =\> console.log(node); // ❗️TypeError: nodeArray.map is not a function

To quickly fix this, I could either use the .forEach() method instead of .map().

const nodeArray = document.querySelectorAll('p');

nodeArray.forEach(node =\> console.log(node); // ✅ That works!

Or I could quickly turn the node list into an array using the spread operator.

const nodeArray = document.querySelectorAll('p');
const realArray = [...nodeArray];

realArray.map(node =\> console.log(node);
// ✅ That works!