
![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***.

