Skip to content

Commit c8d038a

Browse files
deltaepsilondeltaepsilon
committed
Tooling, custom claims and outro scripts
1 parent c3d9a15 commit c8d038a

File tree

3 files changed

+347
-0
lines changed

3 files changed

+347
-0
lines changed

‎scripts/YouTube/0001.007 - tooling.txt

+213
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
I've fielded quite a few questions over the years regarding my coding setup.
2+
3+
Programmers are always looking for tips and tricks to improve their coding productivity.
4+
5+
Everything can make a difference...
6+
7+
...from your operating system, to your code editor, to your keyboard.
8+
9+
So here's a quick rundown of my favorite tools.
10+
11+
First off is the operating system.
12+
13+
I switch off regularly between macOS and Windows 10.
14+
15+
I run a Windows box at home because I need a full-sized graphics card for video processing.
16+
17+
I built my Windows box with recommendations from `LogicalIncrements dot com`...
18+
19+
...but I'd probably buy a pre-built machine if I had to do it again.
20+
21+
It was my first computer build, and while it went off without a hitch...
22+
23+
...I'm not sure how much money I saved for my efforts.
24+
25+
My work machine is a Macbook Pro with the touchbar.
26+
27+
I frankly prefer my Windows box at this point, but it doesn't make much difference.
28+
29+
You get used to your tools and any operating system will work fine with a little customization.
30+
31+
The nicest things that I can say about macOS...
32+
33+
...is that its Bash command line is easier to use than even Windows Linux Subsystem...
34+
35+
...and macOS has better font display... by a wide, wide margin
36+
37+
You wouldn't think that font quality matters much... until you switch back and forth every day.
38+
39+
Next up is my code editor, which has been VSCode for the last few years.
40+
41+
VSCode is taking over the open-source editor market.
42+
43+
I've used Sublime Text, Atom, WebStorm, TextMate... and even Vim...
44+
45+
...but VSCode slays all comers.
46+
47+
I haven't found a system that I like nearly as well.
48+
49+
My next most common text editor is Vim, but that's just because it's quick from the command line.
50+
51+
I know a lot of you love your Vim, and I understand...
52+
53+
...but I'm just not productive enough with Vim.
54+
55+
And if you're wondering why my text looks the way that it does....
56+
57+
...it's because I use Dank Mono with ligatures as my font.
58+
59+
The next most important bit of tooling that I love is Chrome DevTools and my Chrome extensions.
60+
61+
I could write a whole series of videos on DevTools and the workflows that make me smile.
62+
63+
...but for now just know that DevTools is the key to productively building web front ends.
64+
65+
I like Firefox for browsing, and its developer tools are good and even better at a few things...
66+
67+
...but Chrome DevTools sets the standard with excellent breakpoint handling...
68+
69+
...performance reporting and PWA application support.
70+
71+
As far as Chrome extensions go, I use 1Password for all of my security...
72+
73+
...Toby for managing my tabs and saving tab sessions...
74+
75+
...and Liner for highlighting web pages.
76+
77+
I'm also a fan of Wunderlist for to-do lists...
78+
79+
...and `Carbon dot now dot sh` for visually appealing code images.
80+
81+
I do a fair bit of mock matching when working on front ends, so I'll use xScope on Mac...
82+
83+
...and the PerfectPixel Chrome extension to dial in the pixels.
84+
85+
Pixel matching is often looked down on by hardcore JavaScript devs;
86+
87+
however, I respect my designers and want to do their pixel-perfect designs justice...
88+
89+
...so I suck it up and pixel match my designs whenever possible.
90+
91+
And when I'm not coding, I'm generating video.
92+
93+
I do a bunch of screencasting and take lots of screenshots...
94+
95+
...so I have to give a shout out to Camtasia and Snagit.
96+
97+
They're pretty expensive, so I waited a while before I bought them...
98+
99+
...however, they've been a huge productivity boost.
100+
101+
I searched high and low for cheaper options, and nothing else compares to the Camtasia suite.
102+
103+
Of course, video editing is Adobe Premiere...
104+
105+
...audio editing is Adobe Audition and images are Photoshop.
106+
107+
My wife is a graphic designer so we pay for the Adobe Creative Suite already.
108+
109+
Again... it's expensive software that's worth every dime.
110+
111+
And finally... let's cover some quick hardware decisions.
112+
113+
I'm rocking a Razer DeathAdder Elite mouse...
114+
115+
...although I try not to use the mouse much, and I'm not picky about mice.
116+
117+
I've been using my DasKeyboard with Cherry MX browns since 2011.
118+
119+
Yeah... if the baldness wasn't a hint... I'm that old.
120+
121+
I gave up on my original Finance career and taught myself to code in 2011...
122+
123+
...so I'm already deep into my second career at 35.
124+
125+
Anyway... I need new keycaps because the original set is not only mirror-finish shiny...
126+
127+
...but the reference bumps are almost gone after seven years of frantic typing.
128+
129+
I don't understand how folks type on anything other than mechanical keyboards.
130+
131+
Seriously Apple... what is up with those scissor switches and their half millimeter of travel?
132+
133+
Your keyboards are beautiful and thin... but they're so slow and error prone for touch typing.
134+
135+
Anyway... let's keep moving...
136+
137+
...for monitors I use two cheap Samsung 4k displays.
138+
139+
I can't remember the model numbers, but they're the cheapest 28 inch Samsung 4k panels on Amazon...
140+
141+
...they were less than $300 a piece.
142+
143+
The key is that they're high resolution and there are two of them.
144+
145+
The viewing angles on these things are horrible, so I do not trust them for graphic design.
146+
147+
My designer wife hates sitting down to my machine, because all of the colors are screwy...
148+
149+
...however, I spend my time with code editors and websites...
150+
151+
...so maybe I'll buy a fancier color-reference monitor in a year or two...
152+
153+
...but I've spent too much on hardware for now.
154+
155+
And speaking of overspending...
156+
157+
...shooting videos is a hardware-intensive exercise.
158+
159+
I use a Sony A6000 with a fancy aftermarket lens for shooting video.
160+
161+
Audio is handled with a Rode NTG-2 shotgun mic and a Tascam DR-40 recorder.
162+
163+
Getting good audio is probably harder than good video.
164+
165+
Or maybe I'm audio deficient... but landing on the Rode and Tascam combo took trial and error.
166+
167+
I use Sennheiser HD280 Pro wired headphones and Bose QC35s for bluetooth noise cancelling.
168+
169+
You wouldn't think that headphones matter that much...
170+
171+
...but the Bose are critical for long plane flights...
172+
173+
...and the Sennheisers are comfortable for all-day coding sessions.
174+
175+
And while we're doing the office tour...
176+
177+
...you can't shoot good video without a ton of supplemental lighting.
178+
179+
I've had a great experience with my four Neewer LED panel lights.
180+
181+
Neewer is available on Amazon and their stuff is aggressively priced.
182+
183+
Any LED panels lights would probably work great... but I found that I need a bunch of them.
184+
185+
Any fewer than three panel lights and my face is surrounded by distracting shadows.
186+
187+
And finally, I always get questions about my backpack.
188+
189+
The programmer and the backpack are joined at the hip...
190+
191+
...and like a lot of people, I'm a sucker for a pretty backpack.
192+
193+
So I've spent the last couple of years with my prized Peak Designs Everyday 20 liter.
194+
195+
I highly recommend Peak Designs if you can justify the expense.
196+
197+
Unfortunately, all of this gear has cost me a ton of money.
198+
199+
I've been scrounging it off of eBay and Amazon Warehouse deals for a few years now.
200+
201+
You can find some great deals if you're patient enough...
202+
203+
...but it's a slow process if you're not willing to pay full price for high-end gear.
204+
205+
My office is the product of years of scrounging and tough buying decisions...
206+
207+
...and I'm very curious to see how other folks have managed their setups.
208+
209+
So please share your recommendations in the comments!
210+
211+
I would love to hear what makes you more productive.
212+
213+

‎scripts/YouTube/0001.008 - custom claims.txt

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
I'd like to talk about my favorite feature of Firebase Authentication.
2+
3+
You probably haven't heard of it...
4+
5+
...because it's buried in one of the "getting started" guides in the Firebase docs...
6+
7+
...and nobody reads ALL OF THE DOCS!
8+
9+
I only discovered custom claims when I complained about the lack of user role management.
10+
11+
I mean, if I want to tag a user as an admin, do I have to make a database entry?
12+
13+
Because if that's the case, I have to query the database every time I authenticate a user...
14+
15+
...and while I've done that for a long time...
16+
17+
...it's a slow, cumbersome operation.
18+
19+
So I was whining, I can't remember if it was online or at a Firebase event...
20+
21+
...and a Firebase team member mentioned Custom Claims as an easy solution to my problem.
22+
23+
Why is this feature hidden!!!
24+
25+
Every Firebase app should be using Custom Claims, and it's buried deep in the docs!
26+
27+
Any non-trivial app eventually needs user roles.
28+
29+
I need to mark users as administrators or managers or moderators or just plain paid-up users.
30+
31+
And Custom Claims allows me to set simple user attributes directly on my user's JWT.
32+
33+
A JWT is a Json Web Token, which is the `currentUser` object in Firebase Authentication.
34+
35+
So every time I authenticate on the client I get a `currentUser` JWT...
36+
37+
...and if I've set custom claims on my user...
38+
39+
...I can extract the custom claims from the user JWT.
40+
41+
I have a sample Cloud Function that does just this, and I'll link to the files below.
42+
43+
So let's talk through that code and I'll show it all in action.
44+
45+
We'll get started with my Cloud Function called `authorization on create`.
46+
47+
`authorization on create` is triggered by new user creation in Firebase Authentication.
48+
49+
I'm saving all of my custom claims data by user email address in the Realtime Database...
50+
51+
...so the first thing to do is to get that data from the RTDB.
52+
53+
Once I have the relevant claims data for my user, I just need to set it.
54+
55+
That's an easy call to `firebase dot auth dot setCustomUserClaims`.
56+
57+
I just pass in the user's UID that I get from the JWT and the claims object.
58+
59+
The claims object can be anything really...
60+
61+
...but it must be under 1000 bytes...
62+
63+
...and you should only use it for access-control.
64+
65+
There are performance implications to trying to save too much data in a custom claim...
66+
67+
...so just follow best-practices and keep that sort of data in the RTDB or Firestore.
68+
69+
In this case I want to set `isAdmin` and `isModerator` flags on my user.
70+
71+
I developed this Cloud Function with test-driven development methodologies...
72+
73+
...so I am very proud to say that it worked the very first time I deployed it.
74+
75+
To prove that this works, I'll go ahead and delete my user from Firebase Authentication.
76+
77+
Now I'll register a new user and we can see that the claims are not there yet.
78+
79+
I can refresh my page and the claims still won't be there...
80+
81+
...so I'll have to sign out and sign back in...
82+
83+
...and there they are.
84+
85+
My `isAdmin` and `isModerator` flags are set and I'm ready to start writing my admin dashboard.
86+
87+
I'm getting my custom claims data by calling `currentUser dot getIdTokenResult`.
88+
89+
It's an async function that returns an `idTokenResult`.
90+
91+
The `idTokenResult` has a `claims` attribute with the custom claims as children.
92+
93+
Getting and setting custom claims is dead simple.
94+
95+
All of the complexity comes from writing the Cloud Function to do it...
96+
97+
...so go ahead and copy/paste my function to get started!
98+
99+
I write very opinionated Cloud Functions code...
100+
101+
...so take my code with a grain of salt.
102+
103+
You don't need to complicate your Cloud Functions as much as I do.
104+
105+
Go ahead and keep it simple, and I hope you love custom claims.
106+
107+
They're fantastic.
108+
109+
I'm just mad that it took me so long to find them.
110+
111+
112+
113+
114+

‎scripts/YouTube/0001.009 - outro.txt

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
I don't own any cats, and I'm just not that funny...
2+
3+
...so thanks for watching me talk about programming.
4+
5+
This is a boutique channel...
6+
7+
...meaning that it's super niche and kinda tiny.
8+
9+
But tiny YouTube channels are great...
10+
11+
...especially if you really, really like writing code.
12+
13+
Every subscription, like and comment helps...
14+
15+
...but seriously, I'm going to shoot videos anyway.
16+
17+
You can't stop me.
18+
19+
It's too late.
20+

0 commit comments

Comments
 (0)