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:
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.
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:
Just fix the issue or get the feature working.
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
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
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.
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
if you have and comments or good tips on writing readable code.
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:
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
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.
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.
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
you can grab an
using your template ref. This lets you do some cool things.
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:
ng-container and ng-template
Writing clean code
NgRx (I didn't go to any sessions about this, but it was all anyone
was talking about, so I figure I should learn about it)
At the very least, this will help solidify some of the things I
learned at ng-conf. If it helps someone else, even better!