Forem: Michael Lee 🍕

Why is it you can execute a function on the right side of an AND && operator in JavaScript

Michael Lee 🍕 — Thu, 31 Mar 2022 18:39:56 +0000

I always assumed that operators like && and || are for comparing true and false statements on both sides.

But I'm seeing a pattern in React where, on the right side is a function and the left is a truthy statement that will then allow the right to be executed.

Example:

truthy statement && function

I understand that JavaScript will check this from left to right, so left being true will then allow it to check the right. But my assumption is the right should expect a true or false statement, but in this case it's just a function.

I'm so used to seeing the && operator in this context:

if (true && true) {
  // Execute this
}

That this:

true && execute this

Works at all.

I guess my assumption is that JavaScript will just evaluate anything next to an operator whether it returns a true or false.

Add a YouTube stats widget to your iPhone with JavaScript

Michael Lee 🍕 — Tue, 26 Jan 2021 03:45:01 +0000

In this article, I'll be showing you how to add a YouTube widget to your iPhone that pulls in a couple of stats from your YouTube channel—total subscribers and total views.

What will it look like on my phone?!

Great question, here's a screenshot of the widget on my phone with my excellent channel stats 🥳

Looks nice right? You want one on your phone too, you say? Well let me show you how!

What it won't do

Wait...before we get started let me tell you what the widget won't do for you. It won't create new videos for you. It won't give you more subscribers. It won't make you a YouTube sensation.

Unfortunately, you'll have to still put in the work to make all your YouTube dreams come true.

What the widget could do is give you a little motivation every time you look at your iPhone's Home Screen to keep creating and putting your work out into the world.

I hope you still want this widget on your phone...I just wanted to set the right expectations first 😬

What you'll need to get started

In order to get this widget on your phone and working correctly you'll need four things.

You'll need an iPhone with iOS 14—the first version of iOS where widgets appeared.
An app called Scriptable.
A Google API key—you can follow instructions here to set up an account and get one.
A little patience as there's some code involved. No worries if you're not a coder, I'll do my best to guide you along and make it as not scary as possible.

Once you've got all four of the items in the list above, it's time to grab your YouTube channel ID.

Where to find your YouTube channel ID

The easiest way to grab your YouTube channel's ID is to pull up the channel in your browser.

In the address bar, you should see,

www.youtube.com/channel/****

Where *** represents your channel's ID.

Write your channel ID down or copy and paste it somewhere because you're going to need it in a little bit.

But wait Michael, I'm MKBHD and I've got a totally sweet short URL for my channel like this,

How do I get my channel's ID?

Glad you asked Marques!

This is how you find your channel's ID if you've got one of those fancy short URLs for your YouTube channel.

Click on any video in your channel
Hover over your profile's name on the video page, you'll notice that it's actually linking to your channel with the non-fancy, long obscure ID.
Right click over your name and select the copy link and now you've got your channel URL with the ID. Throw away everything but the channel ID.

The code

Now comes the part where it might get a little scary if you've never touched code before, but I promise I'll try to make it as not scary as possible.

In this part we'll put some code into Scriptable and then use some of the things we've been collecting to finally get our widget set up.

Open up Scriptable and create a new script by pressing the + button in the top right hand corner.

Copy and paste this code in there,

const apiKey = ""
const channelID = ""
const channelName = "My channel"

if (config.runsInWidget) {
  const widget = await createWidget()
  Script.setWidget(widget)
  Script.complete()
}

async function getData (channelID, apiKey) {
  const url = `https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${channelID}&key=${apiKey}`
  const r = new Request(url)
  const body = await r.loadJSON()
  return body
}

async function createWidget() {
  const widget = new ListWidget()

  let ytData = await getData(channelID, apiKey)
  ytData = ytData.items[0]

  const subscribers = widget.addText(abbreviateNumber(ytData.statistics.subscriberCount, 2))
  subscribers.font = Font.boldSystemFont(36)
  subscribers.centerAlignText()

  const subscribersLabel = widget.addText("Subscribers")
  subscribersLabel.font = Font.semiboldSystemFont(10)
  subscribersLabel.centerAlignText()

  widget.addSpacer()

  const viewsBlock = widget.addStack()
  viewsBlock.addSpacer()

  const viewsContainer = viewsBlock.addStack()
  viewsContainer.layoutHorizontally()
  viewsContainer.centerAlignContent()

  const viewSymbol = SFSymbol.named("play.fill")
  const viewImage = viewsContainer.addImage(viewSymbol.image)
  viewImage.tintColor = Color.white()
  viewImage.imageSize = new Size(12, 12)

  viewsContainer.addSpacer(4)

  const views = viewsContainer.addText(abbreviateNumber(ytData.statistics.viewCount))
  views.font = Font.semiboldSystemFont(20)
  views.centerAlignText()

  viewsBlock.addSpacer()

  const viewsLabel = widget.addText("Views")
  viewsLabel.font = Font.semiboldSystemFont(10);
  viewsLabel.centerAlignText()

  widget.addSpacer()

  let channelLabel = widget.addText(channelName)
  channelLabel.font = Font.semiboldRoundedSystemFont(10);
  channelLabel.centerAlignText()

  widget.addSpacer(2)

  let reloadStack = widget.addStack()
  reloadStack.layoutHorizontally()
  reloadStack.centerAlignContent()

  reloadStack.addSpacer()

  let reloadSymbol = SFSymbol.named("arrow.triangle.2.circlepath")
  let reloadImage = reloadStack.addImage(reloadSymbol.image)
  reloadImage.tintColor = Color.white()
  reloadImage.imageSize = new Size(8, 8)
  reloadImage.imageOpacity = 0.9
  reloadImage.centerAlignImage()

  reloadStack.addSpacer(2)

  let today = new Date()
  let updateTime = `${today.getMonth() + 1}/${today.getDate()} ${zeroPad(today.getHours())}:${zeroPad(today.getMinutes())}`

  let updateLabel = reloadStack.addText(updateTime)
  updateLabel.font = Font.semiboldRoundedSystemFont(8)
  updateLabel.textOpacity = 0.9
  updateLabel.centerAlignText()

  reloadStack.addSpacer()

  const startColor = new Color("#ff0000")
  const endColor = new Color("#e40000")
  const gradient = new LinearGradient()
  gradient.colors = [startColor, endColor]
  gradient.locations = [0.0, 1]
  widget.backgroundGradient = gradient

  return widget
}

// Credit: https://stackoverflow.com/a/32638472
// Thanks to https://stackoverflow.com/users/1438550/d-deriso
function abbreviateNumber(num, fixed) {
  num = Number(num)
  if (num === null) { return null; } // terminate early
  if (num === 0) { return '0'; } // terminate early
  fixed = (!fixed || fixed < 0) ? 0 : fixed; // number of decimal places to show
  var b = (num).toPrecision(2).split("e"), // get power
  k = b.length === 1 ? 0 : Math.floor(Math.min(b[1].slice(1), 14) / 3), // floor at decimals, ceiling at trillions
  c = k < 1 ? num.toFixed(0 + fixed) : (num / Math.pow(10, k * 3) ).toFixed(1 + fixed), // divide by power
  d = c < 0 ? c : Math.abs(c), // enforce -0 is 0
  e = d + ['', 'K', 'M', 'B', 'T'][k]; // append power
  return e;
}

function zeroPad(numToPad) {
  if (numToPad > 9) {
    return numToPad
  } else {
    return `0${numToPad}` 
  }
}

Add your API key to the first line in the code that starts like this,
```
const apiKey = ""
```
You'll want to add the API key in between the two quotation marks "". Once you do, the first line of code should look something like this,
```
const apiKey = "yourAPIKeyFromGoogle"
```
Add your channel key to the second line in the code that starts like this,
```
const channelID = ""
```
Again, you'll want to add the ID in between the two quotation marks "". Once you do, the second line of code should look something like this,
```
const channelID = "yourChannelIDWeGrabbedEarlier"
```
And that's it for the coding portion! Now let's add just a little bit of flair by giving our script a name, icon and color. You can do this by pressing the icon in the bottom left corner of your screen.

You'll get this screen where you can set a name, icon and color.
Now that you're done. Close the window and tap Done to exit our of your script. We're ready for the moment we've all been waiting for...the widget!

The widget

In this section, I'll show you how to get the new Scriptable widget on your Home Screen. If you're already familiar with this process, feel free to skip over this step and go to the next section.

To add the widget to your Home Screen you'll want to do this.

Tap and hold anywhere on your Home Screen until the apps start to jiggle.
Tap the plus + button in the top left hand corner,
Scroll down until you see Scriptable and tap it.
Select the small widget (which should be the default one shown) and tap Add Widget
Once the widget is added to your Home Screen, you'll see the widget display, Select script in widget configurator, tap the new widget and you should get the widget configurator.
Next to the label, Script tap Choose to select the new YouTube script you had added into the Scriptable. Once you've selected it, tap outside of the configurator to be taken back to your Home Screen.
🥳 do a little dance cause now you've got your very own YouTube widget on your Home Screen to go with you wherever you go. The widget is proof that your work is appreciated by viewers from all over!

Get fancy

Now that you're able to see your channel's subscriptions and video views count, I hope it motivates you to keep putting out great videos to share with the world!

If you're feeling adventurous, try enhancing the widget in Scriptable to make it your own. With a little knowledge of JavaScript, some imagination and the incredible, well put together doc, you can improve it to really match your personal brand.

If you're looking for customizations but can't be bothered with more code, you can purchase the enhanced code. The code comes with easy-to-follow instructions to add a custom logo and background to your YouTube widget.

Originally posted on michaelsoolee.com.

Thanks for taking the time to read this article! If you'd like, I can send you similar articles to your email. Click here to sign up.

Avoiding the awkward 2 seconds after a Zoom call looking for that end button

Michael Lee 🍕 — Sun, 25 Oct 2020 04:21:14 +0000

You’ve just wrapped up your meeting, you’re saying bye to your colleagues but then there’s a second or two of awkwardness as you are fumbling to hang up the Zoom call.

Using Keyboard Maestro on macOS you can set up a macro to quickly hang up your Zoom call using a single keyboard shortcut.

If you've found this tip to be helpful, tweet at me and let me know if I can help you with any other ways to speed up your workflow.

Changing domains for a website hosted on Netlify and how to tell Google you've moved

Michael Lee 🍕 — Wed, 30 Sep 2020 15:35:56 +0000

Cover photo by erica steeves on Unsplash

Getting into a new home could be excited!

You've scoped out the location, you've dreamed about all the experience you'll be having there and you're excited to share your new home with your family and friends.

Leading up to moving day, you call to have super fast Internet set up at your new place, you pack up all your boxes---maybe even start moving some stuff over that you can manage and usually the last thing you'll do is submit a change of address form.

The post office where I live makes it super easy to change your address so that mail will be forwarded from your old place to your new place. So easy, you could do it online and be done in less than 5 mins.

But you aren't here to read about how to change your home address, you're here to read about how to change the domain for your website. More specifically if your site is hosted on Netlify.

I wish I could tell you, the process is as easy as going to your post office's website and spending 5 minutes to fill out a form. Changing domains is not as easy, but this article should make the process less painful because I lay out all the steps involved.

Just a heads up, the domain example I used in this article is fictitious. At the time of writing this article, the domains I use aren't owned by anyone. If you go to the domain mentioned in this article I can't vouch for the contents of the domain if someone ended up buying it.

The desired results

So let's say a couple of years back I started an online community of friends that live in North Carolina, hangs out and talks about our favorite pizza joints and pizza toppings.

The pandemic of 2020 hit and with people sheltering in place and ordering their favorite pizzas in, they're finding a lot more time to share their thoughts with the community about their pizza experiences.

Needless to say the site's traffic is blowing up and I'm getting requests for people outside of North Carolina who would like to join the community. But the name of the community---Your Pizza Friends of NC---and its domain---https://yourpizzafriendsofnc.com---is location specific, preventing people from joining.

So I hop on my favorite registrar, do a quick search for yourpizzafriends.com and it is available! I quickly buy the domain, do a slight tweak to the logo but now what?

So let's walk through this backwards.

I know that when people go to any of these domains,

https://www.yourpizzafriendsofnc.com
https://yourpizzafriendsofnc.com
http://www.yourpizzafriendsofnc.com
http://yourpizzafriendsofnc.com

they should be automatically redirected to the new domain https://yourpizzafriends.com.

Likewise, when folks do a Google search for, "Your Pizza Friends", they should get search results for the new domain and not the old.

An overview of the specific infrastructure setup

Before diving into the process of changing website domains, I wanted to list out the specific infrastructure I'll be covering in this article.

Your set up might be slightly different but you should be able to take different sections and apply it to your site's specific set up.

For the registrar, I'm using Hover.

The Domain Name System (DNS) is managed through Amazon Route 53.

For hosting, the site is hosted on Netlify.

Hover points its name servers to Route 53.

Route 53 then has A and CNAME records pointing to Netlify.

Netlify hosts the site, manages SSL certificates and handles redirects.

Add the new domain to Netlify

Since my site is already hosted on Netlify, I'll want to set up the new domain yourpizzafriends.com.

To do this I'll navigate to my site on Netlify, then navigate to the Settings, then the Domain management tab.

Under the heading of Custom domains I'll want to add two new domain aliases; one for the bare URL---yourpizzafriends.com and the other one for the www subdomain of www.yourpizzafriends.com.

Adding these two domain aliases, Netlify will provide details of how to point the DNS to associate the domain with your site in the form of an A record and CNAME record. This information could be found in a link labelled Check DNS configuration after I created the new aliases. I'll want to write these two record details down for later.

Since I want the primary domain to be yourpizzafriends.com I'll want to select Set as primary domain under the Options.

Now we'll hop on over to AWS Route 53 to update the DNS for the new domain.

Set up your DNS to point to your project on Netlify

In AWS Route 53 for the new Hosted zone (domain) I'll want to add a couple of new records.

The first will be for the bare domain yourpizzafriends.com which will be an A record.

To do this, in the modal that says Define simple record I'll leave the Record name alone. For the Record type I'll select A - Routes traffic to an IPv4 address and some AWS resources and finally for the Value/Route traffic to I'll select IP address or another value depending on the record type and give it a value of 104.198.14.52 or whatever the current Netlify load balancer IP is.

Next will be the www subdomain which will be www.yourpizzafriends.com which will be a CNAME record.

To do this, in the same modal, this time I'll add www in the Record name field. For the Record type I'll select CNAME - Routes traffic to another domain name and to some AWS resources and the Value/Route traffic to should be IP address or another value depending on the record type and pass it the value that Netlify had provided which should be in the format of some-unique-subdomain.netlify.app.

With these two records in place, now we'll want to go back to Netlify to renew the SSL so that all the domains are covered.

Renewing certificate so that there's SSL coverage for all domains

Back in Netlify under the Domain management tab under Settings, we'll want to scroll down to the section titled, HTTPS.

In this section, we'll want to renew the certification so that we'll have SSL coverage on all the domains and not just the old one.

To do this, under SSL/TLS certificate there should be a button that says, Renew certificate

This should cause a modal to pop up asking you to confirm, click on the button that also says, Renew certificate on this modal and now in the area which indicates which domains are covered with the SSL certificate, it should indicate both the old and new certificate.

Setting up redirect rules in your project folder for Netlify

Netlify has made setting up redirect rules super easy by setting up a file in your project's root directory.

There are two ways to achieve this, either by using a _redirects file or by using a Netlify configuration file

For the this article, I chose to use the _redirects file option.

In root of my project folder, I'll create a new file called _redirects with no extensions.

Then the contents of the files will be,

http://www.yourpizzafriendsofnc.com/*   https://yourpizzafriends.com/:splat 301!
https://www.yourpizzafriendsofnc.com/*  https://yourpizzafriends.com/:splat 301!
http://yourpizzafriendsofnc.com/*       https://yourpizzafriends.com/:splat 301!
https://yourpizzafriendsofnc.com/*      https://yourpizzafriends.com/:splat 301!

Now we've got rules to do a 301 permenant redirect on each line. Whether the request is for a www or the bare URL for yourpizzafriendsofnc.com or secure https or unsecure http, they all will redirect to https://yourpizzafriends.com.

Each line is made up of three values. The first value is the domain I'm redirecting from. You'll notice that for each of the first values, I trail it with a * symbol. This is referred to as a splat which tells Netlify that anything after the trailing slash should redirect to the same resource on the new domain.

For the second value, it's the final destination I want to redirect to. This has the :splat which is a dynamic path to help match the * from the first value.

For the third value, I explicitly indicate that the kind of redirect is a 301 although a 301 is the default type. As for the exclamation mark after the 301, that's to deal with shadowing which is better explained here.

Once you're done updating your _redirects file, you'll want to commit it to source and push it up so that Netlify can do another build and set up all the redirects.

Now with all my variations of the old domain pointing to the new domain, it's time to let Google know which domain is the correct domain we want traffic to show up at which is yourpizzafriends.com.

Let Google know of domain change in Search Console

This portion assumes that you've got both domains on the Google Search Console dashboard and they have been verified with Google via the DNS.

For a more detailed write up of all the things that you'll need to do before letting Google know a domain has changed and how to change it, check out this article from Google.

With both domains on Google Search Console and verified with Google, you'll want to go to the domain which you want to indicate that it has a Change of address---in my case pizzafriendsofnc.com. Then you'll go to Settings and under the heading Property settings you'll want to click on Change of address.

On the next screen you'll see two steps, one that indicates you'll want to set up 301 redirect rules---which we've already done.

The other is labelled Update Google which is where we'll find a dropdown that has a list of the domains associated with our Google Search Console account. I'll select the new domain yourpizzafriends.com, then select Validate & Update.

Yay, you're done!

At this point, you're done and your domain should now be pointing to the new domain. Google will do its thing and search results should show up over time as using your new domain. Even though it might show up as your old domain for a little while, no worries because you've set up the redirect rules in Netlify.

As an added bonus, I saved one more section till the last. This was because this particular step isn't part of the right process for setting up domain changes with Netlify, but it was something I experimented with and learned from.

I wanted to share what didn't work in hopes others will learn from it.

What I tried and didn't work with AWS S3

Before discovering that Netlify could handle redirects, I thought I could solve the domain change problem by setting up S3 buckets to host static sites and then updating the DNS records on Route 53.

I was unfortunately wrong. The issue is because, while this would fix the routing of the non-secure connections it won't handle secure connections. This is because you can't issue certificates to S3 buckets.

You would however set up CloudFront---AWS' CDN solution---the complexity of setting all this up felt like too much of an overhead. For this reason, after I realized secure connections weren't being handled with this solution, I had Netlify handle everything for me and it worked out perfectly.

If you found this article helpful, let me know on Twitter.

You are a software engineer

Michael Lee 🍕 — Mon, 21 Oct 2019 17:03:23 +0000

A friend of mine is currently on the job hunt. He was sharing with me how hard it's been. I've been on the job hunt before as a software engineer and know how hard it could be. It is scary, can be demoralizing and imposter syndrome feels like it is at its peak.

As a way to encourage him, I've been thinking about truths that I feel could be said to him to help uplift him. The truths about him as a software engineer.

I wanted to share these truths here for him, for those who might also be in the job hunt and also for me, to serve as encouragement for someone who often battles with imposter syndrome.

You are extremely smart.

You create enormous value.

You can solve hard problems.

You understand complex things.

You are patient.

You deserve what you're being compensated and more.

You are not a coding monkey.

You make good contributions to your team.

You ask great questions.

You have the ability to do so much good.

You are creative.

You are resourceful.

You know enough.

You aren't defined by an interview.

You don't need to understand everything.

Your skills are highly desired.

You're doing a great job.

You are not an imposter.

You are a software engineer.

After I was done writing this list of truths, it reminded me of the Holstee manifesto. So I fired up Figma and also put together a poster-like version as well.

How to prevent readline in Node from exiting on line event?

Michael Lee 🍕 — Wed, 09 Oct 2019 03:47:50 +0000

I'm working on a command line tool using Node and I'd like to prevent it from exiting when using the readline module when the user inputs the "Return" key or something that indicates a new line. I saw that readline has an event handler for line but can't figure out how to prevent it from exiting. Meaning I'd like to allow for the user to be able to use the return and it adds a carriage return to the input for readline instead of exiting it.

I'd like to exit readline only when the user uses control-C or control-D.

What has your developer journey looked like?

Michael Lee 🍕 — Thu, 26 Sep 2019 14:18:04 +0000

I'm curious about what has everyone's journey into being a developer and as a developer or even after has looked like. Like a choose our own adventure, I feel like a developer's journey could look very different from one person to another. In sharing I hope we could show others how they can potentially navigate their careers.

You could also share what you aspire to. Perhaps you're a certain type of developer and would like to aspire to a certain role or career path.

Here's a little template that could be fun to help visualize your journey for others.

[Role title]
Description
|
|
[Role title]
Description
|
|
[Role title]
Description
|
-- <-- indicates where you'd like to go but not there yet.
|
[Future or aspirational title]
This could be where you'd like to go in your career. Could be based on a path as a developer or not.

Rails queueing system, should I use delayed_job or sidekiq?

Michael Lee 🍕 — Mon, 23 Sep 2019 20:10:21 +0000

I'm working on a message queueing system in a Rails application and trying to figure out whether to use delayed_job or sidekiq. Reading articles online it seems sidekiq is better performant for the job but wondering if for my use case if delayed_job should be considered.

Basically it's a message system that will have messages that can be immediately delivered or could be scheduled for a future date. Should also be able to edit the queued message as well as delete them from the queue.

This application will run on Heroku if there are any technical considerations around that choice.

Considering AWS' SQS as well but thinking it'll be more overhead to go down this route.

What is the "<>" operator called in Elixir?

Michael Lee 🍕 — Fri, 06 Sep 2019 18:02:41 +0000

I'm reading over the Elixir guides and recently came across the various operators. One of which is the <> operator used to concatenate two stings. It doesn't mention a name for the operator though. And it's my first time seeing that in any language.

"Hello" <> " World"
"Hello World"

Why does Rails component classes start with the prefix "Action" or "Active"?

Michael Lee 🍕 — Fri, 06 Sep 2019 18:00:24 +0000

I've noticed this pattern and was just curious if anyone knows the story behind the "Action" or "Active" prefix to classes such as Action Mailer, Action Text or Active Record?

Is there a way to subscribe to a series on DEV?

Michael Lee 🍕 — Fri, 06 Sep 2019 14:00:14 +0000

There are so many really cool series going on at DEV, I was wondering if it's possible? Would the best way to subscribe be to follow the author or is there a way to subscribe to just the series? So that we can get a notification when they publish a new post in their series?

The best thing about my job is ___

Michael Lee 🍕 — Wed, 28 Aug 2019 03:16:42 +0000

A) Unlimited LaCroix
B) Working remotely
C) Wearing t-shirts to work

Or share your own answer.