Sam Warnick

  1. About Me
  2. The Lily & Sam Show

prefers-color-scheme Media Query

With Safari Technology Preview 68, there is a new media query, prefers-color-scheme. I've used it on this site like the following:

@media (prefers-color-scheme: dark) {
    background-color: #000000;
}

Digging around in the WebKit release notes, it looks like it supports dark and light at the moment. I tested both, and the do appear to work.

Anyways, kind of cool! I'm sure my dark mode looks bad, so I'll work on it. But I hope other browsers implement this media query soon as well.

Update 24 Jan 2019

Here is a Tailwind CSS plugin to add a dark and light variants. Just add this to the plugins array in your Tailwind config file.

// You need to make sure you have postcss imported in your config file:
// const postcss = require("postcss");

({ addVariant }) => {
    addVariant("dark", ({ container, separator }) => {
        const mediaRule = postcss.atRule({
            name: "media",
            params: "(prefers-color-scheme: dark)",
        });
        mediaRule.nodes = container.nodes;
        container.nodes = [mediaRule];
        mediaRule.walkRules((rule) => {
            rule.selector = `.dark${separator}${rule.selector.slice(1)}`;
        });
    });
    addVariant("light", ({ container, separator }) => {
        const mediaRule = postcss.atRule({
            name: "media",
            params: "(prefers-color-scheme: light)",
        });
        mediaRule.nodes = container.nodes;
        container.nodes = [mediaRule];
        mediaRule.walkRules((rule) => {
            rule.selector = `.light${separator}${rule.selector.slice(1)}`;
        });
    });
};

More information on adding Tailwind variants can be found here.

First Client Website

A little bit ago, I finished my first project for a client, totalpowerandfoam.com. It’s a simple single page landing page.

Here's what it looks like:

totalpowerandfoam.com screenshot

I really tried to give it a clean professional look without being too boring. Early drafts of the site were way too boring. But by adding shadows and a hero image, I think it came out looking real nice.

As always, hit me up on Twitter if you have any feedback. I'm definitely learning as I go.

Thoughts On Writing Good Code

At ng-conf, John Papa gave a talk on writing readable code. You can watch the video here. I recommend it.

Writing clean, readable code seems like an obvious and simple thing to do, but this talk made me realize that I have been ignoring it. For whatever reasons (I'm guessing the thrill of increasing my throughput 🤓), I've been focusing more on closing tickets than writing good code. Recently, I have really been trying to focus on writing quality, readable code. I've come up with two general steps to help me when I'm working on an issue:

  1. Just fix the issue or get the feature working.
  2. Go back and clean it up.

I've been stopping after step 1. This has produced some code that I definitely don't want to go back to. Ever. Now, I've been trying to slow down and worry less about getting lots of bugs fixed. Instead I'm trying to figure out what it takes for me to not only complete a ticket, but complete it in a way that I'm proud of the code I'm producing. Luckily I work at a company that doesn't pressure me to get more and more tickets done all the time, so I'm able to actually slow down.

Recently, a couple of my coworkers and I have been pushing for more code reviews on our team. I've found this a very effective way to help me write better code. When I know for sure that someone else is going to look at my code, I put more effort into making it readable as I'm working on it. So, code reviews. Do them. Even if it's just with yourself.

For me, focusing on readable code is like switching keyboards: my "productivity" has dropped, but I'm sure it'll pick back up as I get used to it.

Conclusion

I have found that it is okay to slow down, and that I need to. I have felt that focusing on writing readable code has been helping me become a better developer. Next step, make git commits more often.

Hit me up on Twitter if you have and comments or good tips on writing readable code.

The Video

Angular Template References

What is a Template Reference?

A template reference (I'll call it a template ref) is basically a tag you put on an element in your template so that you can easily reference that element later. Can you see why they named it like they did? The syntax is # and then the name. For example, if I want to add a template ref to an email input and call it email, then I would add #email to the input, like the following:

<input type="email" #email />

So how is this useful. Well, elements with a template ref can be used in a template just like a public variable on a component can be.

So if I want a button to validate the email entered, I can do something like:

<input type="email" #email />
<button (click)="validateEmail(email.value)">Validate!</button>

The value of the email input will be passed into the function. Cool!

In a little project I was working on, I had a widget selector and a button to add that widget to the page. The button called a function on the component and needed the selected value from the selector. I could add a variable to the component and change that every time an option was selected, but nothing else needs to know about that selected option, just the function the button calls.

<select #widget>
  <option value="a">Dashboard Title</option>
  <option value="b">Tickets</option>
</select>
<select #width>
  <option value="span-col-1">1 Column</option>
  <option value="span-col-2">2 Columns</option>
</select>
<select #height>
  <option value="span-row-1">1 Row</option>
  <option value="span-row-2">2 Rows</option>
</select>
<button (click)="addWidget(widget.value, width.value, height.value)">
  Add
</button>

If I select "Tickets" "1 Column" and "2 Rows", then click the button, a, span-col-1, and span-col-2 will be passed into addWidget! I like that a lot. It keeps my component cleaner because I don't need to define a bunch of variables to keep state that I don't really need.

Template Refs and Components

You might be asking yourself right about now, "Can I only put template refs on regular ol' HTML elements?" Even if you aren't asking, the answer is no! You can put template refs on components too and access their properties! For example, if we have a hello component that has a property that tells us how many times a hello world has been done, you can access it in your template with a template ref.

<hello #hello></hello>
<p></p>

So there's probably some cool things you can do with that. I haven't messed with it much.

Template Refs in components

The other powerful way you can use template refs, is grabbing template elements inside of your component. Using ViewChild you can grab an ElementRef using your template ref. This lets you do some cool things.

import { Component, ViewChild, ElementRef } from "@angular/core";

@Component({
  selector: "my-app",
  template:
    '<input type="email" #email><button (click)="clickButton()">Click</button>'
})
export class AppComponent {
  @ViewChild("email") emailInput: ElementRef;

  clickButton() {
    console.log(this.emailInput.nativeElement.value);
  }
}

I'll write about this more when I write about ng-template and ng-container. Stay tuned!

A Couple More Things About Template Refs

Template refs need to be unique. You can't have two inputs with the ref #email in the same template.


ref-input is a alternate way of doing #input.

<input type="email" #email />

and

<input type="email" ref-email />

are equivalent.


I've tried doing something like

<input type="text" #input />
<p></p>

In hopes of it printing out the value of the input as you type. It doesn't seem to work. You can add change to the input and that will show the value, not as you type, but on blur.

<input type="text" (change)="true" #input />
<p></p>

Won't lie, don't really understand what's going on here. But adding (change)="true" triggers change detection.


Conclusion

This is the conclusion of this article. Hit me up on Twitter if you have any questions or comments.

ng-conf 2018

Last week, I was able to attend ng-conf in Salt Lake City, UT. ng-conf is a conference dedicated to Angular, and this was their fifth year. I've had never been to a conference before, and the prospect of going to such a large one (around 1400 people!) was a little unnerving. But I was excited to learn stuff about things! I'm not big on "networking" or "talking to people", so I was fortunate to be able to go with a group of about a dozen coworkers. Most of us are Angular noobs. At work, we are on AngularJS 1.6, but we are getting on the current version of Angular soon ("soon" being only a couple months away, for the last year and a half). I have limited experience with Angular. Every time I try learning about it, I feel like I get bogged down by TypeScript. For whatever reason, TypeScript just wrinkles my brain whenever I see it. But, after this conference, I think I have a much stronger grasp on Angular and TypeScript. Well, maybe slightly stronger. Still good!

There were a lot of great talks and workshops about a myriad of topics. But at times, being a noob, it felt like getting firehosed—I left with a long list of things to look up and learn about later. So for the next few weeks, I'm going to take some of those topics on my list, and research, practice, and write about them here.

A few topics I've got in mind to write about so far are:

At the very least, this will help solidify some of the things I learned at ng-conf. If it helps someone else, even better!