Solution to: zsh: command not found: flutter on macOS Catalina

Since the recent update to Mac OS Catalina and forced update to zsh, I was having problem with a lot of my CLI tools, including flutter. The reason being, zsh uses ~/.zshrc and not ~/.bash_profile

So to solve the problem, simply add your flutter path to ~/.zshrc like this

export PATH="$HOME/your_path/flutter/bin:$PATH"

Change your_path to where you had flutter downloaded and extracted on the earlier version of Mac OS.

Solution to zsh: command not found: expo on macOS Catalina

So I recently upgraded to macOS Catalina and all hell broke loose. Many of my command line utilities kept working but I have definitely wasted close to 30 hours trying to fix everything to make it work just like it did in the previous macOS version.

Recently, I am started working on a demo for my talk at the Wordcamp Islamabad and wanted to try the latest tools for building a react native app. So naturally, I wanted to try expo CLI as it gives all the tools needed to work with react native on number of platforms i.e web, iOS and Android.

I installed the expo CLI using the following command:

npm install -g expo-cli

But when I tried to run expo, it gave me this error

zsh: command not found:

Have rarely worked with zsh and not having any command over it, I tried many ways to fix it, including the path of the npm root which I got via:

npm root

Apparently, it’s not a reliable way to do it. So I ended up adding

export PATH="$HOME/.npm-packages/bin:$PATH

to my ~/.zshrc file. Which solved the problem for good.

Now I can run expo cli with no problem.

Hope this helps others who are stuck like me!

Git: Delete all branches except for the master branch

It can be as simple as this alias in your terminal

alias gbr="git branch | grep -v "master" | xargs git branch -D"

In my case, I had multiple branches and when I ran the gbr command, it showed the following result, deleting all three branches I had.

$ gbr
Deleted branch 19EKofcx (was b849981).
Deleted branch chA5sUqj (was 2198d89).
Deleted branch rewrite (was 17a9dba).

Python: How to merge two dictionaries

In Python 3.5+

>>> x = {'a': 1, 'b': 2}
>>> y = {'b': 3, 'c': 4}

>>> z = {**x, **y}

>>> z
{'c': 4, 'a': 1, 'b': 3}

In Python 2.x:

>>> z = dict(x, **y)
>>> z
{'a': 1, 'c': 4, 'b': 3}

In these examples, Python merges dictionary keys in the order listed in the expression, overwriting duplicates from left to right.

Find code comments using regex in an IDE

So if you are a developer,  you might need to clean up comments from a code that you might have copied from somewhere else and updating the documentation needs you to start from scracth, or you just want to get rid of comments. Afterall, it can’t be called code if can be understood. Just kidding!

For Javascript and C/C++ or PHP comments or basically any language that uses this syntax for comments

/* Your comment goes here*/

or

/**
* Your comments here
* Your comments here again
*/

the search query would be like:

/\*(.|[\r\n])*?\*/

just make sure to select regex like I did in my case in the screenshot below, so search with the following and replace with

Regex checkbox in PhpStorm IDE

Regex checkbox in PhpStorm IDE

For HTML comments, you’d use something along these lines for the regex pattern for your search and replace query


\<![ \r\n\t]*(--([^\-]|[\r\n]|-[^\-])*--[ \r\n\t]*)\>

Javascript/ Angular: `ng new` command stuck at ‘Installing packages for tooling via npm’

So I am learning Angular 2 and decided to use Angular CLI this time instead of those seed projects.

BTW, I am following this course to study basics of Angular.

sudo ng new angular-app

And this is what happened

Password:
As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

To disable this warning use “ng set –global warnings.packageDeprecation=false”.

installing ng2
 create .editorconfig
 create README.md
 create src/app/app.component.css
 create src/app/app.component.html
 ...
 ...
 ...
 create karma.conf.js
 create package.json
 create protractor.conf.js
 create tslint.json
 Directory is already under version control. Skipping initialization of git.
 Installing packages for tooling via npm.
 

It was stuck at the

Installing packages for tooling via npm

for ages and since I didn’t want to give up using the CLI, here is how I solved it.

$ ng new angular-app --skip-npm

As it was stuck on npm packages install process and using –verbose with the command didn’t help, I used above command to skip installing npm packages and did it manually.

So after above, I used

$ cd angular-app

to get into the directory and then installed npm via

$ npm install

that install script takes care if everything else that CLI does if it all works normally.

Now, since we are using the CLI, here is how to compile and run it

$ ng serve

and it should show something like following when it all works nicely.

** NG Live Development Server is running on http://localhost:4200. **
 Hash: a1114768f326f4da3abe
 Time: 9472ms
 chunk {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 147 kB {4} [initial] [rendered]
 chunk {1} main.bundle.js, main.bundle.map (main) 3.98 kB {3} [initial] [rendered]
 chunk {2} styles.bundle.js, styles.bundle.map (styles) 10 kB {4} [initial] [rendered]
 chunk {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.62 MB [initial] [rendered]
 chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
 webpack: Compiled successfully.
 

Heading into the browser, it looked like this

Problem solved!

Hello world!

OK, so here is hoping I blog for the next 365 days. Amen to that!

Right now, it feels like in the process of making a real catapult, I’d end up with something like that

catapult

 

Image stolen from: http://www.instructables.com/id/Mini-Siege-Engines/