Forem: Stephen Chiang

The escape key; just a vim need?

Stephen Chiang — Wed, 13 Nov 2019 19:33:21 +0000

Lately I've been thinking about how I rarely use the esc key and now the new Mac has brought back physical escape keys due to previous criticisms...And I'm wondering...who besides vim users needs that escape key so frequently?

So please tell me, what are you using that escape key for?

VS Code snippet leads to funny, unintentional results. \_(ツ)_/

Stephen Chiang — Thu, 31 Oct 2019 14:31:34 +0000

A long time ago I decided to create a snippet where if in VS Code I type: :shrug I get ¯\_(ツ)_/¯.

It isn't the most useful snippet, but fun nonetheless.

Lately my autocomplete for CSS has been giving me this snippet every time I hit enter after I start a CSS property.

So my CSS file is littered with these guys because I hit enter or tab for the autocomplete without checking which snippet it's referring to leading to some self-chuckling results.

What are some of your funny accidents or unintentional results from creating your own snippets and shortcuts in code?

Customizing / Contributing to a VS Code Theme - Syntax Highlighting

Stephen Chiang — Tue, 08 Oct 2019 20:21:38 +0000

Ever wanted to make your own theme?

Or maybe you found one but is just slightly off from what you prefer.

It's also a great, easy way to contribute for Hacktoberfest. In this post, I'm going to show you how to modify syntax highlighting.

Backstory

Like many other devs, I use Sarah Drasner's Night Owl Theme. It looks great with Dank Mono. My one complaint; CSS Custom Properties syntax highlighting wasn't as awesome as the rest of the theming. So I opened an issue.

Then I decided I want to take a stab at it, but I had no idea where to start. After forking the repo and opening it up, the JSON for each theme was pretty straightforward, but finding the right scope was like a blind squirrel trying to find a nut...on a long enough timeline I find one, but it's probably not what I was looking for. It was pretty frustrating.

Docs

So I went to the following places for documentation:

Naming Conventions

Useful, but still pretty vague.

Then I found the golden link:

Visual Studio Scope Inspector

Scope Inspector

VS Code's built-in scope inspector tool helps debug grammars. It displays the scopes for the token at the current position in a file, along with metadata about which theme rules apply to that token.

Lovely VS Code has an inspector you can activate from the command palette. 🤯

Trigger the scope inspector from the Command Palette by selecting the Developer: Inspect TM Scopes.

You can look at the docs, but I'll go through the steps here with some visuals:

Playing around

One quick and easy way to check my work is to open up my own settings.json and stub the following:

"editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "name": "CSS Custom Property declarations",
                "scope": [],
                "settings": {
                    "foreground": "#82aaff"
                }
            }
}

Next I opened up a CSS file where I'm declaring and using CSS variables and highlighted the prop, and I get this lovely view:

You'll see all the scopes which apply to that item with the top being most specific.

I don't want to mess with anything else in Sarah's theme so I only chose the most specific one. I set a color and saved and it automatically updated to show me that it worked.

"scope": ["variable.css"],

I also needed to highlight the variable when it's being used so I did the same thing with the following:

"scope": ["variable.argument.css"],

Here's what my settings.json looks like to override the styling for the theme. Just two blocks:

And the results look like this:

All that's left is to update the relevant portions of the theme json and open a PR, just in time for Hacktoberfest 🍻!

Microsoft's new FREE font

Stephen Chiang — Thu, 19 Sep 2019 20:52:47 +0000

Microsoft has released a new free monospaced font called Cascadia Code. Bonus: it supports ligatures!

It will be released with the new iteration of the Windows Terminal, but they've also released it via a GitHub repo.

Has anyone tried it yet? What do you think?

Post up a screenshot of it with your editor's theme!

Here's mine with NightOwl on VS Code: note: For me, Polacode did not format it correctly, so I did the screenshot the old fashioned way.

And Dank Mono for comparison.

Hex, rgba, or hsla?

Stephen Chiang — Wed, 28 Aug 2019 14:27:56 +0000

I was reading an older edition of Design for Hackers last night and there was a statement that hsl was the latest and greatest due to its easier use compared to hex and it got me thinking...I almost always use rgba, and never really gave it a second thought.

So do you prefer to use hex, rgba, hsla, or mix them? Why?

🌮 Git 'r done when you're done.

Stephen Chiang — Tue, 27 Aug 2019 13:03:39 +0000

Once again I'm waiting for my app to run its tests and build so I thought I'd write another quickie.

Previously I showed how I wrote a git function for emergencies and I need to GTFO.

Today, I want to show you a more common process we all might do if we are working by ourselves or on small-teams.

When I'm done with a feature branch this is usually the steps I go through:

(Assuming I'm at the top level of my directory and I've done git push origin head -u in the past)

> {feature-branch} git add .
> {feature-branch} git commit -m "Awesome commit msg"
> {feature-branch} git push
> {feature-branch} git checkout develop
> {develop} git merge -
> {develop} git push

If I want to clean up the merged branch locally and remotely, I would also have to do this:

> {develop} git branch -d feature-branch
> {develop} git push origin :feature-branch

That's a lot of steps.

Here's how I make it easier with git done and git donep, I actually have an alias setup for git as g so I'll be using that from now on:

I'm going to go into my .gitconfig and create two new aliases like so:

[alias]
  done = ""
  donep = ""

Using the same syntax as my g tfo function I'll create done first which does the following:

Merge the branch
Deletes the local branch
Deletes the remote branch

That function looks like this:

done = "!f() { git merge $1 && git branch -d $1 && git push origin :$1; }; f"

You will notice the $1. That is a reference to a variable that will be passed in when calling the function which happens to be the branch name. Now, I have tried using - and @{-1} but deleting the remote branch part of the function won't accept those as references to the last branch used. So unless a reader here has an idea, I am relegated to passing in the feature branch name specifically, which in a way makes it more reusable too, but a bit of a pain if the branch name is complex or hard to remember. But at least, you still only have to type it once!

🤷‍♂️So how do we use it?

> {develop} g done feature-branch

🤯 Boom. That's it.

But with this one, we haven't pushed the changes to develop remote. That's where donep comes in.

donep = "!f() { git merge $1 && git branch -d $1 && git push origin :$1 && git push; }; f"

> {develop} g donep feature-branch

note: this function also assumes you have done git push origin head -u and set the upstream. if you haven't and don't want to, you can modify the function to:

donep = "!f() { git merge $1 && git branch -d $1 && git push origin :$1 && git push origin $2; }; f"

and run it like:

> {develop} g donep feature-branch develop

🐱‍👤 Git r' done!

If you find this valuable, please leave a comment and follow me on Dev.to @chiangs and Twitter @chiangse, 🍻 cheers!

🌐 How I host my projects on subdomains

Stephen Chiang — Sat, 10 Aug 2019 18:16:46 +0000

I like hosting my projects on subdomains and keep my main site focused on being the portal to my portfolio. Here's how I do it using Netlify and Porkbun.

What is a subdomain?

A subdomain is a domain that is part of a larger domain; the only domain that is not also a subdomain is the root domain.

📐Example:

root domain: www.mainSite.com

subdomain: someUrl.mainSite.com

Why host projects on subdomains?

Doesn't bloat the main site's repo.
It's more flexible so that my projects can be different technology stacks.

The steps

Main site

Setup

Create a personal site.
Create a repo on GitHub for it.
Push it to the repo.

Deployment

On Netlify, I select the repo and master branch for my main site.
After it is successfully built and deployed, I have a someWeirdString.netlify.com that points to my deployed project.
I'll rename it to something more easy such as myPortfolio.netlify.com
I setup the custom URL if I don't already have one at Porkbun.
Specify my custom URL such as www.myPortfolio.com.

DNS Settings

Login to Porkbun and select my custom URL details.
In the records, I update the ALIAS record that answers to my Netlify subdomain, which is myPortfolio.netlify.com.

It should look something like this:

TYPE	HOST	ANSWER
ALIAS	myPortfolio.com	www CNAME myPorfolio.netlify.com

After it propagates I move on to the next step and provision a SSL certificate.

Add a subdomain

Once my main site is up and running with www.myPortfolio.com working, I'll setup another project from another repo to be found at project.myPortfolio.com.

Just like in the first previous steps, I add the project to Netlify and have it build and deploy.
I'll update the Netlify subdomain to project.netlify.com.
Then I go back to Porkbun and add another CNAME record to www.myPortfolio.com, it will look like this:

TYPE	HOST	ANSWER
ALIAS	myPortfolio.com	www CNAME myPorfolio.netlify.com
CNAME	project.myPortfolio.com	project.netlify.com

That's it! Now whenever I navigate to project.myPortfolio.com I'll go to my project which is auto deployed every time that project master branch is updated.

❗ Don't forget to add an escape hatch like a navigation icon that takes the user back to the main site and/or go another project...that's just good UX.

If you find this valuable, please leave a comment and follow me on Dev.to @chiangs and Twitter @chiangse, 🍻 cheers!

Quick VS Code refactor/productivity trick

Stephen Chiang — Thu, 08 Aug 2019 13:23:44 +0000

So I was browsing Dev.to , like I normally do while waiting for my build process to finish (🐱‍👤) and I saw this post:

5 Visual Studio Code Tricks to Boost Your Productivity

hexrcs ・ Aug 8 '19

#productivity #vscode #tutorial #tools

And I thought I would share my one of my favorites.

Often when I need to create an object and as a test or have common values except for a single character I use this flow. It also works in refactoring just pieces of code really fast.

Here's an example, let's say i have an array of objects where I want the values to be 'test1', 'test2', 'test3' respectively to each object in the array:

const test = 'test';

const objectArray = [
      {
        prop1: 'test`,
        prop1: 'test`,
        prop1: 'test`,
        prop1: 'test`,
      },
      {
        prop1: 'test`,
        prop1: 'test`,
        prop1: 'test`,
        prop1: 'test`,
      },
      {
        prop1: 'test`,
        prop1: 'test`,
        prop1: 'test`,
        prop1: 'test`,
      },
      ];

In this case you could just use a multi-cursor and type in the numerical value at the end, but here's another way that that helps out when it's not so easy.

You could use the ctr + h to replace test with test1, but that could replace more than what you had intended, like the string variable called test above objArray.

So here's what I do:

Select the block of code using some combination of shift, ctrl and arrow keys that is most appropriate.
alt + l (this notifies vs code that you intend to only do this operation on the selected block.
ctrl + h (opens the find/replace dialog box)
type in the value to be replaced
tab over to type in the value to be replaced
ctrl + enter. *update: new version of VS Code defaults to ctrl + alt + enter but can be changed back in they keyboard shortcuts
repeat for the next block

🔥For me, this is quite fast once the pattern becomes natural.

Voila❗ now it should look like the following:

const test = 'test';

const objectArray = [
      {
        prop1: 'test1`,
        prop1: 'test1`,
        prop1: 'test1`,
        prop1: 'test1`,
      },
      {
        prop1: 'test2`,
        prop1: 'test2`,
        prop1: 'test2,
        prop1: 'test2,
      },
      {
        prop1: 'test3`,
        prop1: 'test3`,
        prop1: 'test3`,
        prop1: 'test3`,
      },
      ]

And your fingers never had to leave the keyboard, cheers! 🍻

If you find this valuable, please leave a comment and follow me on Dev.to @chiangs and Twitter @chiangse, 🍻 cheers!

If you could rename JavaScript to be more self descriptive...

Stephen Chiang — Tue, 16 Jul 2019 05:57:41 +0000

What would you call it?

Custom react hooks vs services

Stephen Chiang — Wed, 10 Jul 2019 19:47:06 +0000

I'm having a tough time explaining the difference between a custom react hook and a service.

It's easy to see the utility of the built in ones, but what about custom hooks?

with a regular service, I can :

import it to any component, provide it's functions and or state.
call or make use of react hooks.

When would you write a custom hook and when would you opt for a service?

What can you do with a custom hook that you can't do with a service?

Do you consider yourself a polyglot?

Stephen Chiang — Mon, 03 Jun 2019 06:10:38 +0000

As developer who only speaks your homeland's language, would you still consider yourself a polyglot?

🔥 In case of fire: GTFO

Stephen Chiang — Sat, 20 Apr 2019 20:58:45 +0000

Intro

Hopefully this will never happen to you, but even if it's not a fire or earthquake, an emergency may arise and you are pressed to get out of the office/building and you have uncommitted code.

What do you need to do❓

GTFO❗ Urban Dictionary Definition

Typically something along the lines of:

> git checkout -b emergency-exit
> git add -A
> git commit -m "Emergency exit"
> git push origin head -u

That's a lot of commands to write with a lot of potential for misspellings and having to retype them. I wrote this for fun and thought I would share it. There's two ways I did this: a git alias, Powershell alias on top of the git alias.

Aliases

So I first create the git alias by editing the .gitconfig. I want to create an alias called tfo and create a function that calls all the git commands I listed above in succession.

So here's what that looks like (normally 1 line, but wrapped for formatting):

[alias]
    tfo = "!f() { git checkout -b emergency-exit && git add -A && git commit -m
       'Emergency exit'  && git push origin head -u; }; f"

To call this in the terminal command line I would just type:

> git tfo

✨ That's it! My repo now has a branch called emergency-exit and I can merge or whatever I need to do later when it's safe.

If I don't want to write git: This step is written for Powershell

Edit the .profile to alias g as git.

> New-Item alias:g -value git

// or directly in the profile.ps1 file

New-Alias g git

To call the whole thing then, I would enter:

> g tfo

💥 Now, I could write a global function called gtfo that does everything, or even a script, but this was fast and easy and a nice little 10 minute break.

**Important*": If you are unlucky to have to do this more than once or you did this to test it out, make sure you delete the new branch after you're done with it or you'll get an error because the branch already exists. You could probably get it to generate the branch with an incrementing number or the current date to differentiate as well.

Also if you have to do this often... Stay the F away from me...jk... But seriously... Don't come near me.

Update
Another way to make sure you don't run into a problem if the branch already exists locally is to use -B instead of -b. This creates the branch if doesn't exist and if it does, then resets it with the new changes.

If you find this valuable, please leave a comment and follow me on Dev.to @chiangs and Twitter @chiangse, 🍻 cheers!