
![Dirty hands](possessed-photography-jIBMSMs4_kA-unsplash.webp)

*Photo by [Possessed Photography](https://unsplash.com/@possessedphotography) on [Unsplash](https://unsplash.com/photos/jIBMSMs4_kA)*

The other day, `Eleftheria Batsou`, community manager at `hashnode`, ***asked*** `“What’s your opinion on the ethics of artifical intelligence?"` on `Twitter`. A ***very good*** question, ***btw***.

***When*** I ***saw*** it, I ***had*** to ***respond***, and it ***was*** the ***following***:

>[Replying](https://twitter.com/letsbsocial1/status/1643311972513898496) to [@BatsouElef](https://twitter.com/BatsouElef)
>
>Inherently there are no ethics. AI has no ethics. There in lies one of the many dangers. Everyone right now is viewing it and using it like the "cool new toy". Anyone remember War Games? Matthew Broderick thought he was playing a game with a harmless computer. the problem is many don't know their "real" history. I could go on and on. I'm not saying it should be "stopped" completely. And neither is it possible. The Pandora's box was opened a long time ago and there is no way to trap it in again. Just be wise and think things through. Not by the "seat of one's pants" so to speak. We have to think through the development process of software. Or the "development" of anything else for that matter. We don't just throw something together without thinking. So why should this be any different? Peopel's "thinking" right now is non-existent and chaotic.  What an irony.
>
>**1:58 PM · Apr 4, 2023 · 36 Views**

To ***view*** the ***complete thread*** on `Twitter`, please ***visit*** [What's your opinion on the ethics of artificial intelligence?](https://twitter.com/BatsouElef/status/1643114924359442432).

***What*** is `YOUR` ***opinion*** on the `ethics` of `AI`? And ***do*** you ***think*** that we ***should approach*** `AI` in a more `“orchestrated”` and `“organized”` ***fashion***, ***thinking*** things ***through***, ***instead*** of in a `“by the seat of one’s pants”` ***manner***? And ***what*** do you ***think*** about `AI` in the ***first place***? And ***finally***, do you ***feel comfortable*** `using` a ***tool*** you ***don’t understand***, and ***especially*** the ***consequences*** of ***such*** a ***tool***?

Does AI Have Ethics?


![Twitter 3D icon](alexander-shatov-SXfwXS0jWNg-unsplash.webp)

*Image by [Alexander Shatov](https://unsplash.com/@alexbemore) on [Unsplash](https://unsplash.com/photos/SXfwXS0jWNg)*

I just found out if you edit a `Twitter` **_tweet_** a **_while after_** you
have **_already_** `published` it, you **_lose_** all your `metadata`. You
**_lose_** your `likes` and `views`, **_for example_**. I **_don’t know_** about
`replies`, `retweets`, and `shares`, but **_imagine_** it have the **_same
result_**. I `edited` a `tweet` **_not_** `long after` I had **_published_** it,
but **_long enough_**. If you **_don’t want_** to **_lose_** all that
`metadata`, **_make sure_** that your `tweet` **_contains_** the `content` you
**_want_** to **_share_** from the **_get go_**. I had **_forgotten_** to
**_add_** `tags`, and **_wanted_** to **_include_** them in the `Tweet`. Was it
**_worth_** the **_loss_**? If I had **_done_** it **_much later_**, **_probably
not_**. I **_didn’t_** `lose much` **_now_**, but **_time_** will **_only
tell_** in **_this case_**.

There are **_definitely_** a **_lot_** of **_little hiccups_** and **_bugs_** in
the `Twitter UI/UX` that **_need_** to be **_addressed_** and **_fixed_**.
`Elon Musk`, **_this_** is **_one_** of **_them_**!

_Happy tweet editing!_


What Happens When you Edit a Twitter Tweet


![Artificial Intelligence image of retro gas station on Mars](YTfG3vyVc2cPp7xh72qZ--1--hz0of.webp)

*Created By [Night Cafe Creator](https://creator.nightcafe.studio/)*

Yesterday, I shared my first link post, AND I shared my first image post on Tumblr. I had just generated an Artifical Intelligence (AI) image using a service called [Night Cafe Creator](https://creator.nightcafe.studio/), and they generate images in webp format by default. Twitter accepts images in webp format, but Tumblr does not. Neither does Linkedin, *BTW*. But I remembered that I could simply ***transform*** my `webp` ***image*** into a `jpeg` (`jpg`) ***image*** using my `macOS Finder`. To ***learn*** how to ***do this***, please ***visit*** my `article` ***entitled*** [Converting image formats on macOS using the Finder app](https://www.interglobalmedianetwork.com/blog/converting-image-formats-on-macos-using-the-finder-app) on my business site [interglobalmedianetwork.com](https://www.interglobalmedianetwork.com).

So when you ***share*** an `image` on `Tumblr`, ***make sure*** that you have a `copy` of it in `jpeg` (`jpg`) ***format***, and ***keep*** it ***handy*** for those `Linkedin` ***posts*** that you may ***want*** to ***create*** with it. `Twitter`, on the other hand, ***accepts*** the `webp` ***format***.

*Happy tumblring!*

## Related Resources

- [Converting image formats on macOS using the Finder app](https://www.interglobalmedianetwork.com/blog/converting-image-formats-on-macos-using-the-finder-app): Maria D. Campbell, interglobalmedianetwork.com

- [NightCafe Creator](https://creator.nightcafe.studio)

Sharing Images on Tumblr


![Cyber security image](fly-d-WNHl-WwdwCs-unsplash.jpg)

_Photo by [Fly:D](https://unsplash.com/@flyd2069) on
[Unsplash](https://unsplash.com/photos/WNHl-WwdwCs)_

***Yesterda***y, at around `10am`, I ***tried*** to ***push*** some ***local changes*** to ***one*** of my ***repos*** on `Github`, and I was ***not able***. I ***got*** the ***following error***:

```shell
WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!Someone could be eavesdropping on you right now (man-in-the-middle attack)!It is also possible that a host key has just been changed.
The fingerprint for the RSA key sent by the remote host isXXXXXXXXXXXXXXXXXXXX
Please contact your system administrator.Add correct host key in /Users/xxxxxxxx/.ssh/known_hosts to get rid of this message.Offending RSA key in /Users/xxxxxxxx/.ssh/known_hosts:3Host key for github.com has changed and you have requested strict checking.Host key verification failed.fatal: Could not read from remote repository.
Please make sure you have the correct access rightsand the repository exists.
```

***Then***, I ***conducted*** some `Google` ***searches*** based on the `text` ***returned*** to the `Terminal` ***console***, and ***ended up*** landing on a Github Community Thread` with ***older discussions*** regarding ***non-working*** SSH keys` ***entitled*** [SSH Key is not working #23215](htt`ps://github.com/orgs/community/discussions/23215#discussioncomment-5422704). I ***shared*** my `issue`. ***Meanwhile***, I ***found*** an `article` ***entitled*** [GitHub publishes RSA SSH host keys by mistake, issues update](https://www.theregister.com/2023/03/24/github_changes_its_ssh_host/?utm_medium=share&utm_content=article&utm_source=twitter) on a `site` ***called*** `The Register`. They ***explained*** what ***happened*** on `Github` and ***why*** we would*** want*** to `read` the `post` that `Github` ***published*** on their `blog` to ***fix*** our ***connection issues***.

The ***fact*** that the `mistake` was ***made***, that there had been `security breaches` ***within*** the ***last year*** on `Github`, and a ***whole list*** of ***other things*** I ***won’t*** even ***bother mentioning*** (but are ***included*** in the ***above post*** and ***others***), I ***saw*** a `red flag` and did ***not trust*** anything that `Github` was ***telling me*** to ***do***. I had ***set up*** my `SSH keys` some ***years ago***, but had ***changed*** the `keys` ***over*** the ***years***. However, I ***now*** was ***not*** quite ***sure*** what they were ***asking*** me ***to do***. I ***initially*** did ***not follow*** all the `steps`, ***only some***, ***because*** I ***wanted*** to ***know*** what ***all*** those ***steps*** `meant`.

I ***learned*** the ***hard way***, and ***through omission***. I ***generated*** `new keys` without*** removing*** `Github's` ***old*** `public key` from the ***Git*** `known_hosts` file. I ***never*** really ***paid attention*** to it, ***because*** I did ***not*** have to. I had ***never encountered*** such a `problem` ***anywhere else***. When I ***tried*** to ***add*** a ***new*** `public SSH key` to `Github`, it was ***rejected***! I ***could not*** understand ***why***. And ***neither*** did I ***get*** any `answers` from `Github`.

When I ***finally*** had done ***enough research*** and ***understood*** what was ***being asked*** of ***me***, I ***removed*** the ***Github*** `public SSH key` from my `known_hosts` file ***with*** the ***following*** `comnand`:

```shell
ssh-keygen -R github.com
```

***Then***, I ***had*** to ***add*** the ***new*** `Github public SSH key` to ***my*** `known_hosts` file, and I ***did this*** by ***adding*** (***exactly***) the ***following*** to my `known_hosts` file ***at*** the ***top***:

```shell
github.com ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQCj7ndNxQowgcQnjshcLrqPEiiphnt+VTTvDP6mHBL9j1aNUkY4Ue1gvwnGLVlOhGeYrnZaMgRK6+PKCUXaDbC7qtbW8gIkhL7aGCsOr/C56SJMy/BCZfxd1nWzAOxSDPgVsmerOBYfNqltV9/hWCqBywINIR+5dIg6JTJ72pcEpEjcYgXkE2YEFXV1JHnsKgbLWNlhScqb2UmyRkQyytRLtL+38TGxkxCflmO+5Z8CSSNY7GidjMIZ7Q4zMjA2n1nGrlTDkzwDCsw+wqFPGQA179cnfGWOWRVruj16z6XyvxvjJwbz0wQZ75XK5tKSb7FNyeIEs4TT4jk+S4dhPeAUC5y+bDYirYgM4GC7uEnztnZyaVWQ7B381AK4Qdrwt51ZqExKbQpTUNn+EjqoTwvqNj4kqx5QUCI0ThS/YkOxJCXmPUWZbhjpCg56i+2aB6CmK2JGhn57K5mj0MNdBXA4/WnwH6XoPWJzK5Nyu2zB3nAZp+S5hpQs+p1vN1/wsjk=
```

I ***tried*** to ***automatically*** update ***GitHub.com’s*** `RSA SSH key` in my `~/.ssh/known_hosts`, but it ***did not*** work for ***me***. I ***went*** for the ***manual approach***.

***However***, ***before*** I ***actually*** did this, and I had ***not yet*** `received` any ***answers*** to my ***questions*** from ***anyone*** at `Github Support`, I ***tested*** out ***working*** with `Bitbucket` ***over*** `SSH`. I ***replaced*** `Github’s` ***identity*** file ***with*** `Bitbucket’s`, and ***then*** forgot ***about it***. ***When*** I ***tried*** to ***connect*** to `Github` ***after*** I ***had added*** the ***new*** `public key`, it did ***not work***. I ***subsequently*** thought to ***check*** the `~/.ssh/known_hosts` file, ***because*** I ***wanted*** to ***include*** both `Bitbucket` and `Github`. ***That*** is ***when*** I ***discovered*** my `error` and ***changed*** it. ***Once*** I ***did that***, I was ***able*** to ***connect*** to `Github` ***again***.

***Following*** the ***suggested steps*** in `Github’s` post ***entitled*** [We updated our RSA SSH host key](https://github.blog/2023-03-23-we-updated-our-rsa-ssh-host-key/) , the `fix` ***did work***. There is ***no need*** to ***change*** anything ***else***. ***No need*** to ***change*** your `SSH key pair`. Just ***follow*** the ***steps*** in the `post`.

But ***what*** does that ***all*** mean? ***What*** is the ***role*** of the `~/.ssh/known_hosts` file?

The ***purpose*** of the `known_hosts` file is to ***manage*** one’s ***saved*** `SSH server key fingerprints`. In ***other words***, the `fingerprints` of ***all servers*** that we ***connect*** with ***remotely*** using `SSH`. And I ***use*** it in ***many*** different ***places***.

> It is ***used*** to ***store*** the `SSH server key fingerprints` of the `servers` that you have ***connected*** to in the ***past***. ***This*** is ***how*** a `server` ***identifies*** itself `cryptographically`, and are ***used*** by `SSH clients` to ***verify*** that ***future connections*** to the ***same server***, are ***actually*** to the ***same server***, and ***not*** to a ***different server*** because of a `man-in-the-middle` ***attack***, `DNS hijack`, ***etc***. - ***jamieweb.net***, ***Managing Your SSH known_hosts Using Git***

Then `jamieweb.com` ***continues*** with

> `Fingerprints` can be ***added*** to the `known_hosts` file in ***multiple ways***, but there are ***two*** `main ones`:

```shell
ssh ldn01.jamieweb.net
The authenticity of host 'ldn01.jamieweb.net (139.162.222.67)' can't be established.
ECDSA key fingerprint is SHA256:cNtT9V+VonaofCCCYjtul100tp1/g/wqdUJZ76GYoP4.
Are you sure you want to continue connecting (yes/no)?
```

This is ***similar*** to ***when*** I ***connected*** with ***one*** of my `Namecheap` ***servers*** for my ***then*** `letsbsocial.nyc` site I ***created*** for my `COMD2451 Web Design 1` ***course*** I ***taught*** at `CityTech`. ***Because*** it ***uses*** anonymous` SSH` that ***changes*** each time you ***use*** it, ***thereby*** making ***each fingerprint*** `new` and `unknown`, it ***returns*** the ***same kind*** of `message` as ***shown above***. And ***each time*** I ***select*** `“yes”`. And ***after*** `“yes”` is ***selected***, the ***full*** key `fingerprint` is ***added*** to my `~/.ssh/known_hosts` file.

***However***, in the ***case*** of the `Github` ***incident***, `Github` ***provided*** a `curl command` which was to ***add*** their `fingerprint` to my `known_hosts` file. I was ***not successful*** with it, so I ***manually added*** it to `known_hosts`.

***What*** did ***this do*** for ***me***? It ***saved me*** a `step` when I ***tested*** my ***new*** `SSH connection` to `Github`. ***First***, I ***typed*** the ***following command*** in `Terminal` and ***hit*** `return`:

```shell
ssh -T git@github.com
```

***Then***, ***because*** I ***had added*** `Github’s` ***new*** `fingerprint` of their `public key` to the ***top*** of my `known_hosts` file, the ***following*** was ***returned*** in `Terminal`:

```shell
Hi interglobalmedia! You've successfully authenticated, but GitHub does not provide shell access.
```

***According*** to `Github`, this is ***what*** I ***should have*** expected. If I ***hadn’t added*** the `public key fingerprint` to `known_hosts`, the ***following*** would have ***first appeared***:

> The authenticity of host 'github.com (IP ADDRESS)' can't be established.
> ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
> Are you sure you want to continue connecting (yes/no)?

***And***, as I ***mention earlier***, I ***select*** `“yes”`. ***Then*** the `fingerprint` is ***added*** to the `known_hosts` file. I ***wouldn’t*** get the ***one above***, I would ***get another*** which I could ***check*** to ***make sure*** that my `local install` of my `SSH public key fingerprint` ***matched*** the ***remote*** `SSH public key fingerprint`.

To ***make sure*** that ***both*** MY `local` and `remote` ***public key fingerprints*** `match` (this is ***where*** the `Github` ***post*** with their `fix` ***got confusing*** for me ***until*** I ***realized*** what ***adding*** their `public SSH key fingerprint` ***was for***), I would ***run*** the ***following*** in `Terminal`:

```shell
curl -sL https://github.com/interglobalmedia.keys
```

***This*** `command` ***returns*** my `public SSH key fingerprint` (which ***means*** that it is a ***partial string*** of my `SSH public key`), and if my `remote fingerprint` ***matches*** my `local one`, I ***get back*** something like the ***following***:

```shell
ssh-ed25519 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

Then I can ***go into*** my ***local*** `SSH public key`, ***open it***, and ***check*** it ***against*** what is ***returned*** from `Github`.I ***already*** had ***checked*** for the `validity` of my `authentication` with `Github`, but I ***also*** ran this `command` ***because*** of ***what*** `Github` ***states*** in their `post`:

```shell
ssh-keygen -R github.com
$ curl -L https://api.github.com/meta | jq -r '.ssh_keys | .[]' | sed -e 's/^/github.com /' >> ~/.ssh/known_hosts
```

> You can ***verify*** that your `hosts` are ***connecting*** via our new `RSA SSH key` by ***confirming*** that you ***see*** the ***following fingerprint***:

```shell
SHA256:uNiVztksCsDhcc0u9e8BujQXVUpKZIDTMczCvj3tD2s
```

The `curl command` did ***not work*** for ***me***. I ***manually added*** this (***new***) `fingerprint` to my `known_hosts` file. The ***first line*** refers to ***removing*** `Github’s` ***old*** `public SSH key` ***from*** the `known_hosts` file. It is then ***placed*** in a file in your `~/.ssh` folder ***called*** `known_hosts.old`.

The ***point*** is to ***make sure*** that the `fingerprint` you ***have remotely*** on `Github` ***matches*** the ***one*** you ***have stored*** on your `local machine`, and that ***when*** you ***run*** the `ssh -T git@github.com` command, you ***always*** get back ***something like***:

```shell
Hi interglobalmedia! You've successfully authenticated, but GitHub does not provide shell access.
```

`“interglobalmedia”` should be replaced with your Github username.

It had ***been*** a ***while*** since I had ***set up*** anything ***intentionally*** (and ***thought*** about it) in `known_hosts`. ***With*** `Cyberduck`, I ***knew*** what was ***going on***, but I ***didn’t bother*** to ***look into*** `where` the `result` of the `“yes”` prompt ***ended up***. And ***when*** the `Github` ***incident*** took place, I did ***not want*** to ***rush*** into ***anything*** until I ***understood*** what I was ***doing***. It ***did disrupt*** my ***work*** for a ***couple*** of ***days***. But ***being*** a ***bit*** of a `conspiracy theorist` (***can*** you ***blame*** me?), I ***wanted*** to ***further investigate*** the `process` ***before*** moving forward. I ***also wanted*** to ***think through*** what `fallback strategy` I could ***put*** in ***place*** in the ***future*** if a `security breach` were to ***take place*** again on `Github`. ***Consider this*** (***similar scenario*** for ***many*** on `Github`):

***Not*** `being able` to ***connect*** to `Github` ***put*** my `development work` to a ***standstill*** until I ***could find*** a ***similar alternative***, because I ***couldn't rely*** on their ***responding*** to and ***helping*** me ***fix*** my `issues`. I ***am sure*** there are ***myriad*** `support tickets` being ***generated*** every minute.

I ***ended up*** posting an `article` on `Linkedin`, ***because*** I was ***not able*** to ***do so*** on my ***own sites***.

I was ***considering*** the ***possibility*** of ***using*** `Bitbucket` ***exclusively***, but that ***opens up*** a whole ***other can*** of ***worms***. ***Where*** would ***all*** those `static sites` I am ***currently hosting*** on `GitHub GH Pages` ***go to***? And all the `code refactoring` I would ***have*** to ***do*** to ***make them*** fit ***other*** `hosting scenarios`? `Bitbucket` is ***not*** set up ***like*** `GitHub`, and is ***very difficult*** to ***configure***. Which ***means*** a ***huge*** `learning curve` and a ***long time*** to `set up`. Which ***means*** not doing other ***income generating*** things.

I ***still*** have to ***consider*** a `fallback` ***in order*** to ***avoid*** a `standstill` to ***my business*** in the ***future***, and in the ***most economical*** way ***possible***. I am a (***very***) ***small business***!

*Happy SSHing!*

## Related Resources

- [We updated our RSA SSH host key (github.blog)](https://github.blog/2023-03-23-we-updated-our-rsa-ssh-host-key/): ***YCombinator***

- [Managing Your SSH known_hosts Using Git](https://www.jamieweb.net/blog/managing-your-ssh-known_hosts-using-git/): ***jamieweb.net***

- [SSH Key is not working #23215](https://github.com/orgs/community/discussions/23215#discussioncomment-5422704): ***Github Community Discussions***

- [GitHub SSH Public Key Fingerprint Checking](https://protodave.com/tips/github-ssh-public-key-fingerprint-checking/): ***protodave***

- [GitHub publishes RSA SSH host keys by mistake, issues update](https://www.theregister.com/2023/03/24/github_changes_its_ssh_host/?utm_medium=share&utm_content=article&utm_source=twitter): ***The Register***

- [Has GitHub changed his remote host key?](https://github.com/orgs/community/discussions/50878): ***#50878: Github Community Discussions***

- [Testing your SSH connection](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/testing-your-ssh-connection): ***Github Docs***

- [GitHub.com rotates its exposed private SSH key](https://www.bleepingcomputer.com/news/security/githubcom-rotates-its-exposed-private-ssh-key/): ***Bleeping Computer***

- [GitHub Swiftly Replaces Exposed RSA SSH Key to Protect Git Operations](https://thehackernews.com/2023/03/github-swiftly-replaces-exposed-rsa-ssh.html): ***The Hacker News***











Understanding the Github SSH Mistake "Fix" and How it Would Have Affected me if I Hadn't Been Able to Fix it


![A digital illustration of digital biology](deepmind-ggeXPf_ykAU-unsplash.jpg)

_Photo by [DeepMind](https://unsplash.com/@deepmind) on
[Usplash](https://unsplash.com/photos/ggeXPf_ykAU)_

I recently ***left*** `teaching` so I could `focus` on “me” ***more***, and ***address*** my `needs`, `desires`, `reconnect to self`, and my `business`. ***Much*** of my `business` is `“teaching”` ***others***, but on my ***own terms***.

***Recently*** I ***asked myself*** the `question`, “How did I get here? Why am I doing what I am doing?”

When `talking` about this ***with others***, I ***always*** go back to the ***same*** `“memory/story”`. When I used to be in the beauty industry and was doing graphic design, I ***worked closely*** with an ***outsourced*** `tech support` team. I ***used*** to watch them ***working*** in the `macOS` (***then*** `OSX`) `Command Line`, and ***doing*** other really cool ***tech related*** `tasks` on the `computer`, and I ***used*** to ***say***, “I wish I could learn how to do stuff like that. I don’t think I could ever do that!’ And ***deep down*** inside, I ***hoped*** for ***such*** an ***opportunity***.

I got my ***first*** "neighboring opportunity" when I ***found*** the ***need*** to ***build*** my own `website` ***because*** I ***couldn’t*** find anyone to `build` the ***kind*** of `site` I ***wanted***. ***Back then***, everyone was `building` ***one page*** `Adobe Flash` ***sites***. I ***wanted*** to ***build*** an ***online*** `daily publication`. This was ***many*** years ago.

Then I ***wanted*** to ***get into*** `web development`, and I ***had*** to ***cknow*** `Command Line`, `Git`, `npm`, `Node.js`, ***etc***. `Command Line` (`Terminal`) ***was*** an ***integral part*** of `web development`.

Then I ***went into*** `teaching` at `college level`. ***There***, I started ***losing touch*** with a ***great part*** of my `vision`. The `mission` I had `developed` ***over time***, which was to ***teach others*** who ***wanted*** to `increase` their what I call `”technological intelligence”`, started to ***fade away***.

***So often*** I ***would hear*** “So and so should not have to learn this.”. Or ”This is too difficult or overwhelming for so and so”. This ***happens often*** `across disciplines` as well as `education` ***in general***. But in this ***day*** and ***age*** of ***rapid*** `technological advancement` and `security breaches`, ***everyone*** should ***work on*** their `technological intelligence`. I am ***not saying*** that ***everyone*** `should become` a `developer` or an `IT professional`, for example. I’m ***saying*** that ***everyone*** should become ***acquainted with*** and ***better understand*** the `technologies` which ***make up*** an ***integral part*** of their ***daily lives***. 

Let’s ***take it*** a ***step further***. ***Just*** as it ***was*** for ***me*** and ***others*** after me with `math` and `science` ***being part*** of our `core` (and ***required***) `education`, I would ***like*** to ***see*** ***some form*** of `computer science`, `web/mobile development`, and `information technology` also ***become*** a ***part*** of the ***core*** `educational curriculum`. This ***presents*** an ***opportunity*** for people to be ***exposed*** to ***such knowledge***, thereby making ***better*** `educated decisions` on what `career path` to take ***earlier*** in ***life***.

I also ***would like*** to see ***more women*** take an ***interest*** in the `tech industry`, and ***receive*** `more support` and `guidance` ***as well***.

`“Technological intelligence”` is to take ***more control*** of `your life` by taking ***more control*** over the `technologies` you ***depend*** on ***before*** they (or the `people` who ***represent*** those `technologies`)  ***take control*** of ***you***. ***Agree*** or ***disagree***?

Why Increasing your Technological Intelligence is Important


![image of iPad and plant against white background](rahul-chakraborty-2qKrvxgPsQ8-unsplash.jpg)

*Photo by [Rahul Chakraborty](https://unsplash.com/@hckmstrrahul) on [Unsplash](https://unsplash.com/photos/2qKrvxgPsQ8)*

***So many*** great `radio apps` for `iPad` (and the ***sound*** is ***fantastic*** on the `iPad`). ***Unless*** you are ***into playing*** `CDs`, `hardware radio`, or `records` ***exclusively***, there is ***no need*** for the `"old fashioned"` ***clunky stereo***. ***Of course*** if you ***do happen*** to ***have*** one ***already***, ***don't*** get rid ***of it***!

***Some free*** `radio apps` which I ***have found*** in the `Apple App store` for `iPad` are the ***following***:

- `radio.net` (`radio and podcast`): the ***developer*** is `radio.de GmbH`. comes ***free***, but there is a ***premium tier*** if you ***don't want*** `ads` of any kind. I personally ***don't care***. I ***chose*** the ***free tier***. It ***contains*** an ***infinte number*** of `stations` in the ***mix***! ***Anything from*** `WNYC`, `WQXR`, to `BBC Radio`, `Voice of America`, `MSNBC News`, `franceinfo` (which I already have as its own separate app), etc. ***This one*** is a ***must***!

- `Amazon Music (Songs and Podcasts)`: the ***developer*** is `AMZN Mobile LLC`. Available ***free*** to those who ***subscribe*** to `Amazon Prime`. It is ***also available*** on `iPhone`. I ***have*** to ***install*** it ***there too***!

- `rne (Radio Nacional de Espana)`: The ***developer*** is `Corporacion RTVE`. It is ***free***, and has a ***wonderful collection*** of `substations` and `programs`. ***Live*** from ***Spain***!

*Happy internet radio listening!*


iPad vs Traditional Radio or Stereo


![Tree supported by large wooden hand](neil-thomas-SIU1Glk6v5k-unsplash.jpg)

*Photo by [Neil Thomas](https://unsplash.com/@finleydesign) on [Unsplash](https://unsplash.com/photos/SIU1Glk6v5k)*

***Previously***, I had ***written*** a `post` about ***using*** `dotenv` with `Next.js`, and ***also adding*** the `NEXT_PUBLIC` ***prefix*** in ***front*** of `environment variable` ***names***. ***Adding*** `NEXT_PUBLIC` and then ***placing*** `process.env` ***in front*** of the `environment variable` ***name*** and ***using*** it ***directly*** like that in your code will ***expose*** it to the `browser`. And you ***have*** to ***add*** `NEXT_PUBLIC` in ***order*** for ***that*** to ***happen***.  So ***something*** like the ***following***:

```js
const data = { email, api_key: process.env.NEXT_PUBLIC_CONVERTKIT_API_KEY }
```

would be ***exposed*** to the `browser`. ***However***, the ***following***:

```js
const API_KEY = process.env.NEXT_PUBLIC_CONVERTKIT_API_KEY
const data = { email, api_key: API_KEY }
```

***would not***, ***because*** it is ***saved*** as the `value` of a `variable`. And ***that*** is the ***way*** I have ***always*** ***approached*** my `environment variables`, ***especially*** when using `dotenv`. ***Which*** is ***what*** I ***do*** in the ***case*** of my `business site`. 

***However***, I ***found out*** later, that ***this*** is `redundant` with `Next.js`. It is ***not necessary*** to ***use*** `dotenv` in ***order*** to ***be able*** to ***extract*** one’s `environment variable` ***values*** from the `.env.local` ***file***. 

It is ***important*** to ***note*** that you ***have*** to ***save*** your `environment variables` in your `.env.local` ***file***. ***That*** is ***where*** `Next.js` ***expects*** you to ***keep*** your `secrets`. 

It is ***also*** (***most***) ***important*** to ***note*** that you ***have*** to ***add*** your `.env.local` ***file*** to your `.gitignore` ***file*** ***immediately*** `upon creation` of your ***project*** ***before*** having `committed` and `pushed` any ***changes*** to ***remote***. This is ***both*** so you ***don't forget*** to do so ***later***, and to ***ensure*** that your `sensitive information` ***stored*** as the `values` of your `variables` are ***never exposed*** on `Github` or ***wherever else***. `Next.js'` `create-next-app` ***does create*** a `.gitignore` ***file*** for you, and ***does include*** the `.env*.local` file ***there*** for you ***already***, ***but*** if you are ***new*** to ***all this***, it is ***good practice*** to ***double check*** the ***file***. The `.env` ***file*** is NOT ***added there***. That is ***meant*** for ***non-sensitive***, ***default*** `env var` ***values***, and ***therefore*** does ***not need*** to be ***included*** in `.gitignore`.

***Below*** is ***what*** I ***have*** in my `next.config.js` ***file*** for my `Next Blog` which I am ***in*** the ***process*** of ***building***, and ***in which*** I ***have*** set up ***both*** `environment variables` for `development` and `production`:

```js
const webpack = require('webpack')

const withBundleAnalyzer = require('@next/bundle-analyzer')({
	enabled: process.env.ANALYZE === 'true',

	webpack: (config, { dev, isServer }) => {
		config.module.rules.push({
			test: /\.svg$/,
			use: ['@svgr/webpack'],
		})

		if (!dev && !isServer) {
			// Replace React with Preact only in client production build
			Object.assign(config.resolve.alias, {
				'react/jsx-runtime.js': 'preact/compat/jsx-runtime',
				react: 'preact/compat',
				'react-dom/test-utils': 'preact/test-utils',
				'react-dom': 'preact/compat',
			})
		}

		if (isServer) {
			require("./scripts/generate-sitemap");
		}
		if (!isServer) {
			require("./scripts/compose")
		}

		return config
	},
})

/** @type {import('next').NextConfig} */
const nextConfig = {
	/* Configure pageExtensions to include md and mdx */
	pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
	/* Optionally, add any other Next.js config below */
	reactStrictMode: true,
}

module.exports = withBundleAnalyzer(nextConfig)
```

***No evidence*** of `env vars`. ***No evidence*** of `dotenv`.

By ***default***, `Next.js` ***provides*** us with ***3 different*** `environments`. The `environments` ***available*** through `Next.js` by ***default*** are `development`, `production`, and `test`. 

The ***way*** that I can ***differentiate between*** and even ***use*** both `development` and `production` `environments` ***locally*** , is I ***create*** an `.env.development.local` ***file*** for my `development` ***env vars*** (***short*** for `environment variables`), ***and*** an `.env.production.local` ***file*** for my `production` ***env vars***. I ***do this*** to ***test*** my `production` environment/build ***before*** I `push` to `remote` to ***avoid*** `unexpected surprises`.

***However***, and this is `very important`, I ***keep*** the `env var` ***names*** the ***same across*** `environments` ***and*** in the `code`. ***Otherwise***, ***only one*** `environment`, the one ***defined*** in the `code` ***using*** ONE SET of `env vars`, ***will work***. 

AND, ***also*** `very important`, the `env var` ***names*** have to `match` on `vercel.com` ***as well***. So if I ***name*** my `env var` for my `MongoDB database` `MONGODB_DATABASE` in the `code`, then it ***has*** to be ***defined*** as `MONGODB_DATABASE` in ***both*** the `.env.development.local` ***file*** AND the `.env.production.local` ***file***. ***Just*** the `values` are ***different***. And ***these*** `two files` are what I ***use*** on my `local machine` to ***switch between*** `development` and `production`. 

When I ***run*** `npm run dev`, the `env vars` in `.env.development.local` are ***extracted***. And when I ***run*** `npm start` AFTER running `npm run build` to `build` my `application`'s `production code`, then tbe `env vars` in `.env.production.local` are ***extracted***. 

***Lastly***, I have to ***add*** my `env vars` to my `project` on `vercel.com`. ***There***, I ***also have*** to `name` the `env var` `MONGODB_DATABASE`, and ***add*** the `value` I ***want*** for `production` there. THEN ***everything works*** as ***expected*** both on my `local machine` AND on my `remote server`.

***No need*** to `require` and `call` `dotenv` as I ***had done*** in the ***past***. This was ***not wrong***, but it means ***one less dependency*** to ***include***, which is good for `application optimization`.

The `Next.js` ***documentation*** regarding `support` for `environment variables` is ***pretty good***, and if you ***already*** have been ***using*** `environment variables` with `dotenv` in your `Node.js` ***projects*** in the ***past***, it will be ***fairly easy*** to ***follow***. I will be ***including*** `reference` to the `Next.js` ***documentation*** at the ***end*** of the `post` ***under*** `Related Resources`.

*Happy Next.js developing with env vars!*

## Related Resources

- [How to use different .env files with nextjs?](https://stackoverflow.com/questions/59462614/how-to-use-different-env-files-with-nextjs/61750672#61750672): ***stackoverflow***

- [Environment Variables](https://nextjs.org/docs/basic-features/environment-variables): ***Next.js docs***


Next.js Environment Variable Support and the .env.local File


![Drop of water on a line](richard-rivas-oF2Q8vnW0nI-unsplash.jpg)

*Photo by [Richard Rivas](https://unsplash.com/@richardrivas) on [Unsplash](https://unsplash.com/photos/oF2Q8vnW0nI)*

***Recently*** I ***upgraded*** to `Mojave` on my `Macbook Pro` (late 2015). I then
***decided*** it was ***also time*** to ***upgrade*** `Homebrew`. I ***needed*** to ***update*** `postgres`, so ***thought*** I ***would update*** `everything else`. `postgres` ***was*** a ***success***. ***Read more*** in `my posts` ***entitled*** [Upgrading postgreSQL from version 10.4 to 11.1 via Homebrew (OSX)](/posts/upgrading-postgresql-from-version-104-to-111-via-homebrew-osx/) and [Changing your (Homebrew) postgreSQL configuration from trust to md5](/posts/changing-your-homebrew-postgresql-configuration-from-trust-to-md5/).

***Unbeknownst*** to ***me*** until ***today***, my `Ruby` ***system install*** `broke` in ***the process***. I ***hadn’t done*** `anything related` to `Ruby` ***installations*** in a ***couple*** of ***years***, ***and had*** to ***refresh*** my ***memory*** on it. ***Had*** I ***installed*** with `RVM`? I ***checked*** to ***see*** if I ***had*** it ***installed*** on ***my computer***. ***No***. ***What else*** could I ***have used*** to
**_manage_** my `Ruby` ***installs***? I ***googled*** for ***information regarding*** the `error`
I ***got*** when ***trying*** to ***watch*** a `s` on a `Node project` I am ***working on*** in which I ***decided*** to ***switch*** from `CSS` to `SCSS` (today). I just ***find it*** to
be a much ***more efficient*** and ***powerful way*** to ***work*** with `global styles`.

HOWEVER, when I ***wanted*** to ***go back*** and ***write about*** this `experience` ***after*** I had ***already closed*** my `Terminal` **_instance_**, I ***couldn’t retrieve*** the `output`
or `stderr(s)` of ***my commands***! So I ***decided*** to ***look into*** a ***way*** of ***making sure*** that it would ***not happen*** `again`. My ***search*** was ***successful***. I ***found*** a `command`(s) that would `print out` ***either*** the `output` of a `command` or the `stderr` in
`Terminal` to a `text file` of ***my choosing***. I ***made sure*** to ***test*** it ***before writing*** this ***post***, and ***it worked***!

I ***took*** a ***simple command***, `ruby -v`, ***which outputs*** the (`system`) `version` of `ruby` that is ***running*** on ***my machine*** and ***printed it*** to a ***file*** on ***my desktop*** called `ruby-output.txt`. The ***following*** is the `command` I **8** in `Terminal`:

```shell
ruby -v 2>&1 | tee ~/desktop/ruby_output.txt
```

This **_resulted_** in ***both*** `output` to the `console` AND `output` to a **_new file_** on my ***desktop*** called `ruby_output.txt`. If I had ***already known*** about
***this*** `command`, I ***could have*** `re-run` the `ruby -v` ***command*** along with ***the rest*** of this ***new command*** in `Terminal` ***after receiving*** the `Ruby` ***related errors*** so as to ***reference*** that ***information*** when ***writing*** my `post`! ***This time*** around I ***went back*** to my `Google searches` to ***see*** what I had ***googled***. But ***in future***, I ***will have*** a much ***more reliable*** and (time) ***efficient solution***!

**Important note:** If you ***want*** to ***add*** another `command output` to the
**_same file_** that **_doesn’t overwrite_** the ***previous output***, do NOT ***use***
this ***exact command***. It **_will_** `overwrite` the ***previous output***. ***What
happens*** is, a ***new file*** of the ***same name*** `overwrites` the ***existing file*** and also
`replaces` the ***previous output*** with the ***current output***! In ***order*** to `append`
**_new output_** without **_overwriting_** the ***previous output***, ***use*** the
***following command***:

```shell
sass --watch public/styles/styles.scss >> ~/desktop/ruby_output.txt
```

**_However_**, ***nothing*** gets `output` to `Terminal`. ***Only*** to ***the file***! If you
***want*** to ***see*** the `output` in `Terminal` as ***well*** as ***outputting*** to ***the file***, ***run*** the ***following command***:

```shell
ruby -v 2>>&1 | tee -a ~/desktop/ruby_output.tx
```

Let’s ***break*** this ***down***. `ruby -v` is the `command` I ***wanted*** to ***run*** in `Terminal` to ***get back*** the `system version` I am ***using*** on my `computer`. The ***following*** is `output` in `Terminal`:

```shell
ruby 2.7.0dev (2019-01-17) [x86_64-darwin18]
```

`2` and `1` are `file descriptors`. `2` ***stands*** for `standard error` (`stderr`),
and `1` ***stands*** for `standard output` (`stdout`). ***pipe***, `|`, in ***this case,*** is
***used*** to **_pass_** the `stdout` or the `stderr` to the
`tee -a ~/desktop/ruby_output.txt` ***command***. `>>` ***means*** to ***append***. I am ***telling*** `Terminal` to **_append_** the `stdin` and `stdout`. If I ***only used*** `>`, then
there ***would be*** an `overwrite`, as ***shown previously***. `tee` ***allows you*** to
**_send_** `stdout` to a ***file*** while `piping` the **_same_** `stdout` to
**_another_** `command`. ***Here***, the **_other command_** is `-a`. `tee` is
***always used*** with a `pipe` (`|`) **_preceding_** it.

AND it was ***also output*** to the `ruby_output.txt` ***file*** living on `my desktop`. In
***addition***, **_nothing_** was **_overwritten_**. The `stdout` was simply **_appended_**
to the ***rest*** of the `stdout` I ***had added*** `previously`. The ***key*** to this is in the `-a` **_flag_**, which is `short` for `append`. ***For example***, this is ***what*** is
***currently residing*** in ***that file***:

```shell
ruby 2.7.0dev (2019-01-17) [x86_64-darwin18]
>>> Sass is watching for changes. Press Ctrl-C to stop.
ruby 2.7.0dev (2019-01-17) [x86_64-darwin18]
```

If I really wanted to get fancy, I could have done the following:

```shell
script -a ~/desktop/log-all.txt
```

I ***would start*** this `script` at the **_beginning_** of a `Terminal` ***session***.
`script` ***means*** that I am ***starting*** a `script` **_native_** to `Unix`, which
will `print out` **_both_** `Terminal` `stdin` AND `stdout` to a ***file*** on my
***desktop*** called `log-all.txt`. The `default command` ***for this*** on `Linux` is
`script session.log`. ***However***, I have ***seen*** the `log file` can be ***called anything***
that will NOT `overwrite` some ***important*** `system file` of the ***same name*** in the ***same location***!!! So ***be careful*** when ***creating*** a `script` with `script`. The ***above
command*** `output` the ***following*** in `Terminal`:

```shell
Script started, output file is /Users/mariacam/desktop/log-all.txt
```

**_Then_**, ***when*** I ***wanted*** to ***stop*** the `script`, I ***typed*** the ***following*** in `Terminal`:

```shell
exit
```

You can ***also end*** a ***session*** with `Control + D`. ***Then all*** `stdin` and `stdout`
***from*** `Terminal` is ***printed out*** to the `destination file`.

But ***let’s say*** I just ***wanted*** to ***print out*** a `history` of my ***commands*** to a ***file***. ***This is*** actually ***what*** I ***did*** just ***now***:

```shell
history >> ~/desktop/history_log.txt
```

And I ***get*** my `Command Line` `history` ***printed out*** in `history_log.txt` on
`my desktop`. I am ***not sharing*** it ***here*** as ***some*** `sensitive information` is ***logged there***! ***Anything*** you **_type out_** in `Command Line`, **_including_**
`passwords` and such, **_will appear_** in your `history`. So ***be careful***
about ***what kind*** of `Command Line` **_information_** you ***share***.

***Some*** of the `commands` ***listed there*** I ***hadn’t*** even ***used*** in ***AGES***! And it ***goes up*** to the ***latest one***, ***not including*** those in the ***current session***. I ***have*** to `log out` of it ***before*** it is ***included*** in ***that*** `history`.

This is ***all well*** and ***good***. From ***too little*** `information` to ***too much***! I ***like*** the `script session` ***approach*** for my ***current purposes*** of ***committing information*** to `“printed history”`. It ***gives me*** the ***information*** I ***need*** and ***from*** the ***time*** I ***need*** to ***include both*** `Terminal` `stdin` and `stdout`! Of ***course*** if I ***forget*** to ***run*** `script` at the ***beginning*** of my `session` (and ***even later***), and I just ***want*** to ***save*** the `anomalies` I ***come across***, I ***can*** just ***use*** the `command`:

```shell
ruby -v 2>>&1 | tee -a ~/desktop/ruby_output.txt
```

***for example***.

***There is*** so ***much more*** on ***this topic***. I ***highly encourage*** `everyone` to ***delve deeper*** into `Command Line`. ***Believe me***, it will ***help you*** to ***become*** a much `better developer` in ***so many*** different ***ways***. ***Not just*** through `npm i` or `git init`, but will ***permit you*** to ***easily retrieve*** why something ***worked*** or ***didn’t work*** (and ***write*** an `accurate post` ***about it*** `even after` ***logging out*** of your `Terminal` **_instance_**). And ***so much more***! Last ***but not*** least, it ***permits you*** to ***gain*** a ***better understanding*** and ***control*** of ***your machine***!

## Related Resources

- [In the shell, what does “2>&1” mean?](https://stackoverflow.com/questions/818255/in-the-shell-what-does-21-mean)

- [script (Unix)](<https://en.wikipedia.org/wiki/Script_(Unix)>)

- [The Unix “SCRIPT” command : a command recorder](https://www.ibm.com/developerworks/community/blogs/nix/entry/the_unix_script_command_a_command_recorder2?lang=en)

- [script: Save Your Session Log](https://www.unixtutorial.org/script-save-your-session-log)

- [How do I save Terminal output to a file?](https://askubuntu.com/questions/420981/how-do-i-save-terminal-output-to-a-file)


How to Save Terminal Output to a File for Future Reference


![Yards and yards of elastic](jj-ying-WmnsGyaFnCQ-unsplash.jpg)

*Photo by [JJ Ying](https://unsplash.com/@jjying) on [Unsplash](https://unsplash.com/photos/WmnsGyaFnCQ)*

***Recently***, I ***have found*** the ***need*** to **_compress_** `directories` for **_upload_** to `Canvas`, an `open-source` `learning management system` (`LMS`) ***used*** for `managing content`. It ***became*** a ***real pain*** to ***have*** to ***leave*** `Terminal` to **8** the `gzipping` ***done***. So I ***decided*** to ***learn how*** to ***do*** it `directly` from the `Command Line`. The ***problem*** with ***some*** of my `projects` is that I ***have*** `directories` I do ***not want*** to `include`, such as
the `node_modules` ***directory***. So ***this*** is ***what*** I ***did*** to `exclude` the `node_modules` ***directory***:

```shell
zip -r stripe-dropdown.zip stripe-dropdown/* -x "stripe-dropdown/node_modules/*"
```

The `command` **_means_** that we are `zipping` ***recursively***
`everything` in the `stripe-dropdown` ***directory***, **_including_**
`subdirectories` and `files`, but **_excluding_** the `node_modules`
***directory*** and **_everything_** `inside` of it. We ***have*** to ***add*** the
**_full path_** to the `node_modules` ***directory*** in ***order*** to
**_successfully_** `ignore` it. `-r` stands for `recursively`, and the `*`
***stands for*** `wildcard`, ***meaning*** `everything`. The `-x` ***flag*** means
`exclude`, ***followed by*** the `path` to the `directory` to `exclude`. I was
in the `parent directory` of `stripe-dropdown` when I ***executed*** this `command`, so the `path` to `node_modules` in `stripe-dropdown` ***relative*** to its `parent directory`, `development`, was `"stripe-dropddown/node_modules/*"`. On `OSX`, you have to ***encapsulate*** the `path` to the `directory` to **_ignore_** with
`quotes`.

***This*** is ***what*** was `printed` to the `Terminal` ***console*** as `directories` and `files` were being ***compressed***:

```shell
zip -r stripe-dropdown.zip stripe-dropdown/* -x "stripe-dropdown/node_modules/*"
adding: stripe-dropdown/README.md (deflated 55%)
  adding: stripe-dropdown/brand-favicons/ (stored 0%)
  adding: stripe-dropdown/brand-favicons/favicon-16x16.png (deflated 14%)
  adding: stripe-dropdown/brand-favicons/apple-icon.png (deflated 2%)
  adding: stripe-dropdown/brand-favicons/apple-icon-144x144.png (deflated 2%)
  adding: stripe-dropdown/brand-favicons/android-icon-192x192.png (stored 0%)
  adding: stripe-dropdown/brand-favicons/apple-icon-precomposed.png (deflated 2%)
  adding: stripe-dropdown/brand-favicons/apple-icon-114x114.png (deflated 3%)
  adding: stripe-dropdown/brand-favicons/ms-icon-310x310.png (deflated 6%)
  adding: stripe-dropdown/brand-favicons/ms-icon-144x144.png (deflated 2%)
  adding: stripe-dropdown/brand-favicons/apple-icon-57x57.png (deflated 5%)
  adding: stripe-dropdown/brand-favicons/apple-icon-152x152.png (deflated 4%)
  adding: stripe-dropdown/brand-favicons/ms-icon-150x150.png (deflated 4%)
  adding: stripe-dropdown/brand-favicons/android-icon-72x72.png (deflated 5%)
  adding: stripe-dropdown/brand-favicons/android-icon-96x96.png (deflated 4%)
  adding: stripe-dropdown/brand-favicons/android-icon-36x36.png (deflated 8%)
  adding: stripe-dropdown/brand-favicons/apple-icon-180x180.png (deflated 4%)
  adding: stripe-dropdown/brand-favicons/favicon-96x96.png (deflated 4%)
  adding: stripe-dropdown/brand-favicons/manifest.json (deflated 75%)
  adding: stripe-dropdown/brand-favicons/android-icon-48x48.png (deflated 6%)
  adding: stripe-dropdown/brand-favicons/apple-icon-76x76.png (deflated 4%)
  adding: stripe-dropdown/brand-favicons/apple-icon-60x60.png (deflated 5%)
  adding: stripe-dropdown/brand-favicons/browserconfig.xml (deflated 43%)
  adding: stripe-dropdown/brand-favicons/android-icon-144x144.png (deflated 2%)
  adding: stripe-dropdown/brand-favicons/apple-icon-72x72.png (deflated 5%)
  adding: stripe-dropdown/brand-favicons/apple-icon-120x120.png (deflated 3%)
  adding: stripe-dropdown/brand-favicons/favicon-32x32.png (deflated 8%)
  adding: stripe-dropdown/brand-favicons/ms-icon-70x70.png (deflated 4%)
  adding: stripe-dropdown/favicon.ico (deflated 62%)
  adding: stripe-dropdown/images/ (stored 0%)
  adding: stripe-dropdown/images/profile-small.png (deflated 0%)
  adding: stripe-dropdown/index.html (deflated 82%)
  adding: stripe-dropdown/package.json (deflated 35%)
  adding: stripe-dropdown/scripts/ (stored 0%)
  adding: stripe-dropdown/scripts/scripts.js (deflated 60%)
  adding: stripe-dropdown/styles/ (stored 0%)
  adding: stripe-dropdown/styles/styles.css (deflated 72%)
```

***Then***, to `unzip` this ***same directory*** from `Command Line`, ***do*** the
***following***:

```shell
unzip stripe-dropdown
```

And ***below*** is ***what*** was `printed` to the `Terminal` ***console*** as
`directories` and `files` were ***extracted*** from the `.zip` and
***inflated/uncompressed***:

```shell
unzip stripe-dropdown
Archive:  stripe-dropdown.zip
  inflating: stripe-dropdown/README.md
   creating: stripe-dropdown/brand-favicons/
  inflating: stripe-dropdown/brand-favicons/favicon-16x16.png
  inflating: stripe-dropdown/brand-favicons/apple-icon.png
  inflating: stripe-dropdown/brand-favicons/apple-icon-144x144.png
 extracting: stripe-dropdown/brand-favicons/android-icon-192x192.png
  inflating: stripe-dropdown/brand-favicons/apple-icon-precomposed.png
  inflating: stripe-dropdown/brand-favicons/apple-icon-114x114.png
  inflating: stripe-dropdown/brand-favicons/ms-icon-310x310.png
  inflating: stripe-dropdown/brand-favicons/ms-icon-144x144.png
  inflating: stripe-dropdown/brand-favicons/apple-icon-57x57.png
  inflating: stripe-dropdown/brand-favicons/apple-icon-152x152.png
  inflating: stripe-dropdown/brand-favicons/ms-icon-150x150.png
  inflating: stripe-dropdown/brand-favicons/android-icon-72x72.png
  inflating: stripe-dropdown/brand-favicons/android-icon-96x96.png
  inflating: stripe-dropdown/brand-favicons/android-icon-36x36.png
  inflating: stripe-dropdown/brand-favicons/apple-icon-180x180.png
  inflating: stripe-dropdown/brand-favicons/favicon-96x96.png
  inflating: stripe-dropdown/brand-favicons/manifest.json
  inflating: stripe-dropdown/brand-favicons/android-icon-48x48.png
  inflating: stripe-dropdown/brand-favicons/apple-icon-76x76.png
  inflating: stripe-dropdown/brand-favicons/apple-icon-60x60.png
  inflating: stripe-dropdown/brand-favicons/browserconfig.xml
  inflating: stripe-dropdown/brand-favicons/android-icon-144x144.png
  inflating: stripe-dropdown/brand-favicons/apple-icon-72x72.png
  inflating: stripe-dropdown/brand-favicons/apple-icon-120x120.png
  inflating: stripe-dropdown/brand-favicons/favicon-32x32.png
  inflating: stripe-dropdown/brand-favicons/ms-icon-70x70.png
  inflating: stripe-dropdown/favicon.ico
   creating: stripe-dropdown/images/
  inflating: stripe-dropdown/images/profile-small.png
  inflating: stripe-dropdown/index.html
  inflating: stripe-dropdown/package.json
   creating: stripe-dropdown/scripts/
  inflating: stripe-dropdown/scripts/scripts.js
   creating: stripe-dropdown/styles/
  inflating: stripe-dropdown/styles/styles.css
```

***Be sure*** to ***be*** in the ***same*** `parent directory` ***as*** the `.zip`. ***For example***, I ***moved mine*** onto the `desktop` so as ***not*** to ***confuse*** it ***with*** my `original` and `complete directory` in `~/development`, then ***made sure*** that I ***changed into*** the `desktop directory`, `cd ~/desktop`, and then ***executed*** the `unzip` command ***followed by*** the `name` of the `directory` (`stripe-dropdown`) that had been `zipped`. ***No need*** for ***adding*** the `.zip` ***extension***. And ***that’s it***! ***No more need*** to ***leave*** the `Command Line` and ***go to*** your `Mac`’s `menu bar`, **_searching_** for
`compress stripe-dropdown` (or ***whatever*** the `name` of the `directory` you ***want*** to
`compress` is) **_under_** the `file` ***tab***, and **_no more need_** to ***leave***
`Command Line` to ***double click*** on a `.zip` to **_expand it_** into a
`directory`. It is a ***great*** `time saver`!

![Screenshot of Terminal window](terminal.png)

*Screenshot by [Maria D. Campbell](https://www.interglobalmedianetwork.com/about) on [Maria's Blog](/images/posts/compressing-and-uncompressing-directories-from-the-command-line/terminal.png)*

*Happy `zipping` and `unzipping`*!

### Related Resources:

-   [Unix/Linux Command Reference](https://files.fosswire.com/2007/08/fwunixref.pdf)


Compressing and Uncompressing Directories from the Command Line


![Buffalos dusting up in the Dakotas](richard-lee-788052-unsplash.jpg)

*Photo By [Richard Lee](https://unsplash.com/@brock222) on [Unsplash](https://unsplash.com/photos/9ME5tBjVyMQ)*

***Today*** I ***learned about*** how one can `scope` the `css` ***files*** of `React` ***components*** to the `styling` of only the `components` ***themselves*** using `css modules`. For example, `App.css` would ***contain*** `styles` ***only*** for `App.js`, `Person.css`, i.e., would ***only contain*** `styles` for `Person.js`, etc.

I am ***using*** `CRA` for ***this*** `project` (for a change), and ***had*** to `eject` ***out of*** itm ***in order*** to ***make*** the ***necessary changes*** in my `CRA` `webpack.config.dev.js` and `webpack.config.prod.js` ***files***.

The **_only_** other thing that **_needed to be done_** was to ***add*** the
**_following_** to ***both*** the `webpack.config.dev.js` and
`webpack.config.prod.js` in the `css module` ***within*** the `module object`:

```js
{
    test: /\.css$/,
    use: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
                importLoaders: 1,
                modules: true,
                localIdentName: '[name]__[local]__[hash:base64:5]',
            },
        },
    ]
}
```

**_Specifically_**, I ***added*** `modules: true`, and
`localIdentName: ‘[name]__[local]__[hash:base64:5]’`.

`css-loader` **_parses_** and **_converts_** our `css`, **_extracts it_**,
**_stores it_**, AND ***supports*** `css-modules`.

The **_addition_** of `modules:true` **and**
`localIndentName: [name]__[local]__[hash:base64:5]` is **_critical_** for your
`styles`, ***and*** your `css classes` ***getting*** `unique names` **_per component_**
so that they ***don’t override*** each other `globally` **_across_** the
`application`.

`[name]`: **_refers to_** your `css className`.

`[local]`: allows **_css-loaders_** to **assign it** (the `className`) to a
`local component`. In other words, **_scope_** it.

`[hash:base64:5]`: gives your **_className_** a `unique hash` to make sure you
**_don’t_** **overwrite** your `styles` **_globally_** **across** your
**application**.

And ***that’s all*** that ***had*** to be ***done*** to **_enable_** `css modules`. But
**_remember_**, once you **_eject_**, you ***can’t*** go back!

***Then*** I ***went into*** my `App` ***component***, `App.js`, and `imported` my
`classes` ***from*** `App.css` ***with*** the `variable` ***name*** `classes.`

```jsx
// App.js
import classes from './App.css'
```

***After that***, I ***needed*** to ***update*** my `className` **_properties_** so that my `classes` would **_work again_**. By `scoping` my `css classes` in `App.css`
to `App.js`, they **_no longer worked_** as **strings** in the `JSX`.

So ***this*** is ***what*** my `code` **_initially_** **looked like**:

```jsx
// App.js in return statement for the render() method

return (
    <div className={classes.App}>
        <h1 className={classes.title}>Hi, I'm a React App</h1>
        <p className={classes.join(' ')}>This is really working.</p>
        <button style={buttonStyle} onClick={this.togglePersonsHandler}>
            Toggle Persons
        </button>
        {persons}
    </div>
)
```

Looks pretty **_straightforward_**, right? But **_guess what_**. It ***didn’t work***. I ***scratched*** my head ***wondering***, `“why not?”`, for a few minutes. Then I
***checked on*** the [CRA Github repo](https://github.com/facebook/create-react-app)
for any **CRA** `css modules` ***related issues*** that ***might*** be ***out there***, because `CRA` **_still_** does NOT ***support*** `css modules` **_out of_** the **_box_**. There ***has been*** a ***lot*** of buzz around ***adding support*** for it for the ***longest time***, and purportedly there will be **_full support_** with the release of `CRA 2`. ***When*** that is ***taking place***, however, is ***not known***.

***Next***, I ***tackled*** my **_other component_**, `Person.js`, to ***see*** what ***would happen*** there. I ***did*** the ***following*** at the ***top*** of the ***file***:

```jsx
// Person.js
import personClasses from './Person.css'
```

And then **_within_** the **_body_** of the `Person` ***component***:

```jsx
const Person = props => {
    return (
        <div className={personClasses.Person}>
            <p onClick={props.click}>
                I am {props.name} and I am {props.age} years old!
            </p>
            <input type="text" onChange={props.changed} value={props.name} />
        </div>
    )
}
export default Person
```

I encountered **_no problems_**???

***Then*** I went **_searching_** for an `article` that ***might have*** `discussed` this **_particular_** `workaround`. I ***found*** it ***immediately***, and ***gave*** it a ***read***. It ***seemed*** to ***work*** pretty much ***for everyone***, so ***no issue*** there. So then ***what*** could be the `issue` which ***prevented*** my `classes` from **_being added_** to my `JSX`? Then it ***dawned*** on ***me*** all ***of*** a ***sudden***. Of course! I was **_experiencing_** `CLASS (NAMING) CONFLICTS`. I had **_named_** the `import` ***variable*** for my
`App.css`, `classes`. I had **_named_** `another variable`, ***unrelated*** to
`css modules`, `classes` ***as well***. Therein ***arose*** the `class conflict`. I ***had given*** two `different variables` the **_same_** `name`. For `importing` my
`classes` from `App.css`, I ***ended*** up **_switching_** from `classes` to
`appClasses`:

```js
import appClasses from './App.css'
```

For the `array` ***variable***, I **_kept_** the ***name*** `classes`.

```js
// App.js
const classes = []
```

But ***then*** I ***had*** to **_push_** some ***conditional*** `classes`into the
`classes array`, AND I had to ***append*** the `import` ***variable*** to
**_those_** `classes`.

```js
const classes = []
if (this.state.persons.length <= 2) {
    classes.push(appClasses.rebeccapurple)
}
if (this.state.persons.length <= 1) {
    classes.push(appClasses.bold)
}
```

And ***then*** in my **_main_** `App.js` `div`:

```jsx
return (
    <div className={appClasses.App}>
        <h1 className={appClasses.title}>Hi, I'm a React App</h1>
        <p className={classes.join(' ')}>This is really working.</p>
        <button style={buttonStyle} onClick={this.togglePersonsHandler}>
            Toggle Persons
        </button>
        {persons}
    </div>
)
```

***Now*** `everything` ***worked***. You see ***why things*** could get ***pretty confusing***! So ***be sure*** to ***remember*** what you ***named*** what as you add  ***more*** and ***more*** `layers` to your `React` **_application_**.

## Related Resources

- [I gave my first presentation tonight (on React workflows)](/posts/i-gave-my-first-presentation-tonight/)

- [How to Use CSS Modules with Create React App](https://medium.com/nulogy/how-to-use-css-modules-with-create-react-app-9e44bec2b5c2)

- [Add support for CSS Modules with explicit filename — [name].module.css #2285](https://github.com/facebook/create-react-app/pull/2285)


Class Conflicts


![Recyclable trash](jasmin-sessler-DR2jtLy8Fe4-unsplash.jpg)

*Photo by [Jasmin Sessler](https://unsplash.com/@wizwow) on [Unsplash](https://unsplash.com/photos/DR2jtLy8Fe4)*

**Note:** This `article` ***doesn’t*** go ***into depth*** about ***commands***, i.e. `rm`, `rm -r`, etc., It’s about **_options_**. To ***read more*** about those ***commands***, ***please visit*** [Master the command line: Deleting files and folders](https://www.macworld.com/article/2082021/master-the-command-line-deleting-files-and-folders.html),
***also included*** at the ***end*** of the `article`.

I ***just finished*** `watching` Wes Bos’ **_Command Line For Power Users_** `series`, and it was ***great***. It ***focused*** on `Z Shell`, ***which*** is ***what*** I ***use***, and I ***learned*** a ***lot***. It `opened` ***new*** `doors` for me ***regarding*** `Command Line for Mac`, and I ***got*** to ***know*** my `computer` ***even better***. But ***then*** I ***got*** to the ***last video*** about ***using*** the `rm` `command` in `CLI` or ***installing*** the `npm trash package`. This package ***allows*** you to ***move files*** to the `trash` ***instead*** of ***deleting them*** `forever`, as the `rm/ rm -r` `command` ***does***. `rm` ***removes files***, `rm -r` ***removes folders***.

I ***noticed*** that the ***most effective*** `way` to ***install*** it is `globally`. ***However***, I have `permission issues` when I ***try*** and ***install*** `globally` ***with*** `El Capitan`, and there is ***always*** a ***potential*** `issue` or `conflict` when ***updating anything*** that has been ***installed*** `globally`. ***That*** is ***why*** I ***only*** do `local installs` ***within*** `projects`
themselves. ***In order*** to ***use*** the `trash package` the ***way*** I ***would want*** to, I ***would have*** to ***do*** an `npm init` ***everywhere***. ***In order*** for it to ***work*** for ***me***, I ***would have*** to ***install*** `trash` as a `devDependency` in ***every folder*** I ***have created*** on my `computer` that ***contains files*** that I ***use***. ***Well***, `that` ***does not*** `work` for ***me***. Some folders ***don’t*** even ***have*** `workflows` that ***use*** `npm`.

***At first*** I ***was going*** to ***totally*** `“trash”` the ***idea*** of ***using*** the `plugin`, but ***then*** I ***decided*** that ***maybe*** it would ***be nice*** to ***use*** it in ***some projects*** that ***already use*** `npm`, and ***for those*** that ***don’t***, I ***could*** just ***continue deleting*** `files`
and `folders` ***via*** my `Atom` `text editor`. It’s ***just*** as ***easy*** to ***do***, and it ***never*** `deletes` ***anything*** `permanently`. It just ***provides*** the `move to trash` ***option***. ***Works well*** for my `code related` ***projects***!

***There*** is ***also*** `another solution`. If you ***still want*** to `delete` ***via*** the `Command Line` but you ***want*** to `“play it safe”`, there are `“safety net”` ***commands*** you can ***use*** that will ***ask*** you if you ***really want*** to `delete something` ***before*** it ***gets*** `deleted` ***forever***. There is an `article` I ***came across*** on `macworld` ***entitled*** [Master the command line: Deleting files and folders](https://www.macworld.com/article/2082021/master-the-command-line-deleting-files-and-folders.html) that ***could prove*** `useful`. ***For instance***, if you ***wanted*** to `delete` a `file`, and
***wanted*** to ***be asked*** if you ***wanted*** to `delete` the `file` ***before*** it was `deleted` ***forever***, you would ***type***

```shell
rm -i dummy-file.txt
```

***for example***, and when you ***hit*** `return` you ***receive***

```shell
remove dummy-file.txt?
```

and you ***could*** either ***type*** `yes` or `y` and ***hit*** `return`. ***This way***, you ***have*** a `chance` to ***think twice*** about it and thus ***change*** your ***mind***. If you ***do change*** your ***mind*** when ***asked***, you simply ***would type*** `no` or `n`. Then ***if*** you ***typed***

```shell
ls
```

to ***see*** if it was ***still there***, it ***would be***, ***because*** you ***didn’t type*** `yes` or `y`. And **_btw_**, the `-i` `flag` is ***short*** for `-interactive`.

There are a ***slew*** of `“safety net` `commands` ***out there***, and ***this*** `article` is a ***great place*** to ***start***. There is ***a lot*** of ***useful information*** that will ***make you*** an ***even better*** `CLI` ***power user***!

## Related Resources

- [Command Line For Power Users](https://commandlinepoweruser.com/): Wes Bos
    Video Series on Command Line/Z Shell/Oh my zsh

- [Master the command line: Deleting files and folders](https://www.macworld.com/article/2082021/master-the-command-line-deleting-files-and-folders.html):
    Januaray 2, 2014,
    [Kirk McElhearn](https://www.macworld.com/author/Kirk-McElhearn/), Senior
    Contributor, _macworld_

- [sindresorhus/trash on github](https://github.com/sindresorhus/trash): **_npm package_** that ***permits you*** to ***move files*** and ***folders*** to the `trash` ***from*** `Command Line` into the `trash` ***instead*** of ***deleting*** them ***forever***.

