DEV Community: Fred B.

Uncaught ReferenceError: process is not defined

Fred B. — Sun, 20 Aug 2023 15:42:10 +0000

How to solve the following error ?

Uncaught ReferenceError: process is not defined

First, this happens when, in your Vite/React project, you add a code equivalent to the following:

const someValue = process.env.SOME_KEY;

In other words, you're simply trying to read a value from your .env file, which includes assignments similar to this:

SOME_KEY=A_VERY_IMPORTANT_VALUE_YOU_NEED

Solving this issue

Open the vite.config.ts file
Add loadEnv in your imports:
import { defineConfig, loadEnv } from 'vite'
Add an env const assigment:
const env = loadEnv(mode, process.cwd(), '');
add a define object at the same level than the plugins array:

return {
    define: {
      'process.env.SOME_KEY': JSON.stringify(env.SOME_KEY)
    },
    plugins: [react()],
  }

Complete code

Now, here's the before & after code.

The `vite.config.ts` file before:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

the `vite.config.ts` file after:

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      'process.env.SOME_KEY': JSON.stringify(env.SOME_KEY)
    },
    plugins: [react()],
  }
})

Some final notes

So, if your like me, you'd be like: "but, wait a minute! Am I gonna have to manually write every single new key/value pair in the .env file, AND repeat myself in the vite.config.ts ?"

Well...this is exactly what this solution implies! I'm not happy about this, but at least it is a solution.

Why is is important to have this solution? Well because the CI/CD process on Netlify would fail because of the Uncaught ReferenceError: process is not defined error.

Alternative solution:

If you wish to avoid having to repeat the name of the keys in the vite.config.ts file, you could have the following:

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      'process.env': env
    },
    plugins: [react()],
  }
})

Disclaimer

You might not wish to expose the entire contents of process.env to the front end, so manually picking the keys/names of the values you wish to get access to in the front, becomes an sort of security device...

Also, notice that in the after code suggested where you do manually pick them, you might or might not have to stringify the selected keys' values.

A better alternative solution perhaps

I guess a solution somewhere in the middle would be to have an array containaing the name of the keys you wish to cherrypick from the process.env, and then loop over it, so as to dynamically generate the object that is assigned to the define key.

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

const cherryPickedKeys = [
  "SOME_KEY_IN_YOUR_ENV_FILE",
  "SOME_OTHER_KEY_IN_YOUR_ENV_FILE",
];

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  const processEnv = {};
  cherryPickedKeys.forEach(key => processEnv[key] = env[key]);

  return {
    define: {
      'process.env': processEnv
    },
    plugins: [react()],
  }
})

Final notes for TypeScript

If your project is in Typescript, an intellisense problem will pop up, which will also have the CI/CD process fail:

Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.ts(2580)

And indeed, the solution to install the @types/node package, as suggested by VS Code, works and the problem goes away !

The Flux architectural pattern using useReducer, the Context API, and Sagas

Fred B. — Sat, 07 Nov 2020 17:40:18 +0000

Just in case, here is a nice diagram about the generic Flux pattern in React.

So, why am I writing about this?

It demonstrates the combination of :

Context API and useContext hook
useReducer hook
useReactSaga custom hook

Demo Link | GitHub Repo

But why, you ask ?

Because I can ;)

No, but seriously, because I needed to make sense of Redux, of the Context API, and more generally, the Flux Pattern, and of async actions.

Also, to me, it is important to understand as many React functions or third-party packages as I include in my apps, and useContext and useReducer being shipped defacto with React is a plus, versus having to include a whole bunch of packages that revolve around the Redux ecosystem.

So this demo allows to demonstrate that the redux and react-redux packages are no longer required dependencies to implement the Flux Pattern in React, in a way that makes both sense and is scalable with combined reducers to handle endless future slices of state.

Word of caution

What this demo does not demonstrate though, is if this combination mimicking redux will be as performant as redux.
And this, I do not know myself, as this is very experimental. I wouldn't recommend using this in production ;).

Notes

This demo depends on a tiny package called use-react-saga.

All it is, is a custom hook for React which depends on the redux-saga package, which is something I wanted to experiment with as the next natural evolution step after redux-thunk, for async actions.

Addendum

After the perusal of the installed packages in the node_modules directory, I have come to realize that there is a redux directory in there!! After perusing the yarn.lock file, redux-saga packages has it as a dependency.

So this demo does NOT unfortunately demonstrate that adding Redux as a dependency can be avoided. Fortunately, it is only 2kB, including dependencies!

So this demo only goes to shows how unavoidable redux is when it comes to making stable apps ;)

In the particular case of this demo, if I wish to remove it as a dependency, I must implement Sagas myself. Is it worth it ? I'll leave it up to you to decide.

Finally, I should mention that I do not hold a grudge against Redux, I just wanted to evaluate the Context API as a potential replacement, since we see so many articles on this topic, but they all show very small unscalable demos or POCs which were never convincing to me.

CSS Cheat Sheet

Fred B. — Wed, 04 Nov 2020 15:19:44 +0000

Misc.

Use transform: translate instead of top, left, right, bottom positioning, especially when animating
box-sizing: border-box;
object-fit: contain; /* maintains aspect ratio */
place-items: center;
user-select: none;
pointer-events: none;
height: 20vw;
box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);

body::-webkit-scrollbar {
  /* NICE TRICK : it hides the scrollbar, but the scrolling behavior is maintained*/
  display: none;
}

Media Queries

Targeting Touch devices

/* For touch devices */
@media (hover: none) {
  .mainLayout__sidebar {
    padding-bottom: var(--main-layout-footer-height);
  }

  .mainLayout__body {
    height: calc(100vh - var(--main-layout-footer-height));
  }
}

Grid & Flex layouts

For those landing here looking for a way to have a sort of dynamic table, with items wrapping to new rows, and still being aligned across rows, a pretty good solution is to use flex with flex-wrap:

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

CSS custom variables

:root {
  --main-font-color: white;
  --main-theme-color: 0, 0, 0;
  --main-background-color: 4, 4, 4;
  --main-interactive-text-color: #b3b3b3;
}

CSS animation

.someClass{
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

@keyframes wheel {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

REM units

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

Examples :

html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}

https://youtu.be/CxC925yUxSI?t=1168

html {
  font-size: 62.5%; /* This makes a better base for REM units AND for accessibilty font adaptation*/
}

The tribulations of React performance optimizations

Fred B. — Tue, 13 Oct 2020 08:51:33 +0000

As I see it occuring so many times in the industry, it so happens that many developers do anticipate performance issues while still in early development stages of an application project.

And this, even prior to running the app on a production-like environment !

This strategy often ends up being the same as shooting oneself in the foot.

Why you say? Because optimizations always come with a cost!

Use case: code-splitting

Is spreading the total loading time of the app always a good idea? Is splitting the code and lazy-loading the different chunks, always a good solution? Every time? No matter what?

Well:

Are those chunks really heavy enough to justify having the spinning wheel of death appear everytime the user clicks on a link?
Or should you rather have an app displaying a longer intial loading time but which, once fully loaded and cached, responds swiftly to all user interactions?
Are your end users from the general public, or are they B2B customers? Sure users in general don't like to wait of course, nobody does, however:
- B2B users might not have a choice than to be using your app, so if there is no budget for optimization, then intial loading time can be "imposed" upon them with minimal business repercussions;
- On the other hand, public users, C2B users, WILL go away and shop somewhere else if your e-commerce app takes too long to load, having a real impact on business revenue in the short or medium term

What to look out for

After a hard reload, meaning you got rid of all cached elements, and after applying a given optimization, is the app starting faster during its initial render?
Is this really the only criteria to consider ?
What are you trying to achieve?
- Do you want users to feel that your app loads fast?
- Do you want the app to respond quickly to user interaction?

Sure! We all want both, but again, at what cost?

But most importantly :

does it depend only on what YOU want or think as a developer ?
what if the target machine is a smartphone, can you afford to have many http requests, knowing how it impacts battery life ?
what if there is no budget for optimization ?
what is the hosting plan in production, and what is the cost related to hitting your server by an increased amount of http requests ?

So what is the solution?

We must be able to evaluate the cost of the optimization by clearly identifying what was lost and what was gained.

It's all about the tradeoffs baby!

Step #1 - Diagnose

So, let's first run the app we are working on, and IF we find that the app starts too slowly, or a certain component takes too much time to mount or render, THEN let's diagnose the problem.

How?

The React devtools Profiler or the React Profiler API are examples of a tools which might help identifying long re-rendering times.
The network devtools might also help identifying heavy JS or CSS resources.
The build report provided by the create-react-app build script also provides a list of chunks along with their gzip file size
And let's not forget the almighty Lighthouse, another one of the Chrome devtools.

Step #2 - Measure

So let's measure the problem.

How much time do components take to mount or render?
How much time is a function taking to run ?
Is there some JS or CSS resource blocking the intial app rendering ?

Check out Progressive React for details on measuring using different tools.

Step #3 - Identify & Apply optimization

After diagnosis and measurement, the right optimization strategy should form. This allows to identify the appropriate optimization technique(s) for the particular situation we're trying to solve. So, here's when we apply an initial solution.

Step #4 - Measure again & Compare

Lastly, let's measure once again to ensure that the optimization cost was worthwhile.

How? By comparing the new measure to the original measure, the one we took while diagnosing the problem.

Conclusions

All in all, these are examples only of considerations to take into account even before we start optimizing just for the sake of it.

The right optimization strategy is far from being a "simple" technical-only subject, and depends at least on:

1) budget,
2) the nature of the app,
3) end users (& stakeholders at large),
4) the end users' target machines
5) technical requirements of the production environment

Final words of caution about optimization in general

So, let's not optimize for the sake of it.

Meaning, let's not memoize or avoid inline objects systematically (React.useMemo & React.useCallback).

Let's not split our code and lazy load it systematically (React.lazy + React.Suspense + Spinner + ErroBoundary).

Let's not memoize components systematically (React.memo, React.PureComponent, shouldComponentUpdate).

In order words: consider the act of optimizing ONLY if there is a performance problem or complaint in production!

Bonus: Recommended Toolchains

The React team primarily recommends these solutions:

If you’re learning React or creating a new single-page app, use Create React App.
If you’re building a server-rendered website with Node.js, try Next.js.
If you’re building a static content-oriented website, try Gatsby.
If you’re building a component library or integrating with an existing codebase, try More Flexible Toolchains.

The useEffect hook tribulations + Cheat Sheet

Fred B. — Tue, 06 Oct 2020 12:54:16 +0000

Yesterday, while working on this project, I came to realise that logic contained in useFetchCollections was flawed in that it was invoked endlessly.

This had for perverse effect that the free daily allowed quota in firestore was reached !

Read access to the cloud database was forbidden for almost 24 hours !!!!

Therefore, to fix this, I pushed a commit that :

1) fixes the endless loop, and
2) now makes use of collections data from a local json file instead of fetching it from the database (using process.env.NODE_ENV the code determines whether the environment is production or development in order to conditionally fetch this data set in one data source or the other)

The `useEffect` hook tribulations

This loop happened because the data fetching was inside a useEffect hook, as seen in this file history:

  const fetchCollections = fetchCollectionsAsync(setCollectionsState);

  useEffect(() => {
    fetchCollections();
  }, [fetchCollections]);
  return collectionsState;
};

The problem was to have included fetchCollections as a dependency inside the array (the second argument that useEffect takes). Without its inclusion there, the React lib issued a warning :

React Hook useEffect has a missing dependency: `fetchCollections`.
Either include it or remove the dependency array. 
If `fetchCollections` changes too often, find the parent component that defines it and wrap that definition in useCallback

In this particular issue, I needed to ensure that useEffect fired only once, so the fix I issued is as follows:

  useEffect(() => {
    fetchCollectionsAsync(setCollectionsState);
  }, []);

The fix allowed to:

A) get rid of the React warning, and
B) get useEffect to behave as needed by providing an empty dependency array, to have it fire only once in the whole component lifecycle.

When NOT to pass array of dependency to `useEffect`

One of the suggestions found in the warning message was to remove the dependency array.

After some research, it turns out that we must omit this array of dependency when we want useEffect to trigger:

everytime the component it is in has finished rendering
whenever useEffect is invoked

Reminder about component rendering

A component will re-render when either:

props change
state change
the parent component re-renders

`useEffect` Cheat Sheet

Even though Dan Abramov, the lead dev in the React team will not like it, here is a cheat sheet which "maps" useEffect use cases in terms of Class-based component lifecycles.

ComponentDidMount

//Class
componentDidMount() {
    console.log('I just mounted!');
}

//Hooks
useEffect(() => {
    console.log('I just mounted!');
}, [])

ComponentWillUnmount

//Class
componentWillUnmount() {
    console.log('I am unmounting');
}

//Hooks
useEffect(() => {
    return () => console.log('I am unmounting');
}, [])

ComponentWillReceiveProps


//Class
componentWillReceiveProps(nextProps) {
    if (nextProps.count !== this.props.count) {
        console.log('count changed', nextProps.count);
    }
}

//Hooks
useEffect(() => {
    console.log('count changed', props.count);
}, [props.count])

Ubuntu/Linux cmd-line Cheat Sheet

Fred B. — Sun, 16 Aug 2020 16:20:06 +0000

Originally posted on Codepen Oct 30, 2015

Convert binary, hex, or any base, into decimal

from hex to decimal: $((16#62)) => 98 (note the 16#)
from binary to decimal: $((2#01110011)) => 115 (note the 2#)
Note: the expression $(()) will execute a command named according to what it returns, so echo it to avoid the prompt complaining that it knows no command named 98 or 115

picoplayer@challenge:~$ $((16#62))
98: command not found
picoplayer@challenge:~$ echo $((16#62))
98

Convert ASCII hex value into the actual characters

note: also works with 0x prefix, ie: 0x62 0x64 0x61 0x36 0x38 0x66 0x37 0x35

$ echo "62 64 61 36 38 66 37 35" | xxd -p -r
bda68f75

Convert to text from [binary|octal|hex]

$ x="01100011 01101111 01101101 01110000 01110101 01110100 01100101 01110010"
$ for a in $x; do printf "%x" $((2#$a)); done | xxd -r -p && echo " "
computer
$ x="160 145 141 162"
$ for a in $x; do printf "%x" $((8#$a)); done | xxd -r -p && echo " "
pear
$ x="66616c636f6e"
$ for a in $x; do printf "%x" $((16#$a)); done | xxd -r -p && echo " "
falcon
$

Convert character into decimal ASCII value

$ printf "%d\n" "'a"
97

Convert decimal ASCII value into a character

$ printf "%x" 97 | xxd -r -p
a

Convert decimal ASCII value into hex value

$ printf "%x" 97
61

List sudo available commands: `sudo -l`

Bypassing permissions

As can be seen in the output below, the challenge directory is not accessible since no permissions have been set (0 d--------- 1 root root 27 Aug 4 21:34 challenge).

picoplayer@challenge:~$ cd /
picoplayer@challenge:/$ ls -ls

total 0
0 lrwxrwxrwx    1 root   root      7 Mar  8  2023 bin -> usr/bin
0 drwxr-xr-x    2 root   root      6 Apr 15  2020 boot
0 d---------    1 root   root     27 Aug  4 21:34 challenge
0 drwxr-xr-x    5 root   root    340 Dec 13 17:55 dev
0 drwxr-xr-x    1 root   root     66 Dec 13 17:55 etc
0 drwxr-xr-x    1 root   root     24 Aug  4 21:32 home
0 lrwxrwxrwx    1 root   root      7 Mar  8  2023 lib -> usr/lib
0 lrwxrwxrwx    1 root   root      9 Mar  8  2023 lib32 -> usr/lib32
0 lrwxrwxrwx    1 root   root      9 Mar  8  2023 lib64 -> usr/lib64
0 lrwxrwxrwx    1 root   root     10 Mar  8  2023 libx32 -> usr/libx32
0 drwxr-xr-x    2 root   root      6 Mar  8  2023 media
0 drwxr-xr-x    2 root   root      6 Mar  8  2023 mnt
0 drwxr-xr-x    2 root   root      6 Mar  8  2023 opt
0 dr-xr-xr-x 2501 nobody nogroup   0 Dec 13 17:55 proc
0 drwx------    1 root   root     23 Aug  4 21:34 root
0 drwxr-xr-x    1 root   root     54 Dec 13 17:56 run
0 lrwxrwxrwx    1 root   root      8 Mar  8  2023 sbin -> usr/sbin
0 drwxr-xr-x    2 root   root      6 Mar  8  2023 srv
0 dr-xr-xr-x   13 nobody nogroup   0 Dec 13 17:55 sys
0 drwxrwxrwt    1 root   root      6 Aug  4 21:34 tmp
0 drwxr-xr-x    1 root   root     18 Mar  8  2023 usr
0 drwxr-xr-x    1 root   root     17 Mar  8  2023 var

So the idea, is to use vi to access the contents of the challenge directory anyway, because as seen in the last line of the following output, vi can be used with sudo

picoplayer@challenge:/$ sudo -l
Matching Defaults entries for picoplayer on challenge:
    env_reset, mail_badpass,
    secure_path=/usr/local/sbin\:/usr/local/bin\:/usr/sbin\:/usr/bin\:/sbin\:/bin\:/snap/bin

User picoplayer may run the following commands on challenge:
    (ALL) /usr/bin/vi

So, finally:

type sudo vi,
type :! ls -ls /challenge/
read the following output

picoplayer@challenge:/$ sudo vi
[sudo] password for picoplayer: 

4 ---------- 1 root root 98 Aug  4 21:34 metadata.json

I now even can print the contents of that file. So, still from vi, type :! cat /challenge/metadata.json

Convert string to MD5 hash

# to avoid the trailing newline added by the shell: '%s'
printf '%s' "money" | md5sum

Determining the contents of non-text files, like a binary file for example.

strings -a -t x [path-to-binary-file-for-example]

Create a binary (executable) file from a bash script (install shc)

# This will create 2 files, and the binary/exec one is 'add.sh.x'
shc -f add.sh

View contents of binary file

# bvi, bview - visual editor for binary files
bvi ./add.sh.x

Is package installed?

dpkg -s gimp

Update all packages at once

Disclaimer: this command should probably never be used in an actual production server ;)

sudo apt-get install -f

Free port

kill $(lsof -t -i:3000)

LAN Access for WSL localhost

These are Powershell (run as admin) commands. (source1 | source2)

netsh advfirewall firewall add rule name="Allowing connections to WSL2 servers" dir=in action=allow protocol=TCP localport=3000

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=[plug here the result of `wsl hostname -I`]

To show added rule & proxy

netsh advfirewall firewall show rule name="Allowing connections to WSL2 servers"

netsh interface portproxy show v4tov4

Install a package (.deb)

sudo dpkg -i /path/to/deb/file

create a tree of directories in one command

mkdir -pv dir1/dir2/dir3/dir4/dir5

The above commands will create directory(s) recursively inside a non-existent directory(s). You can use the 'tree' command to view the directory structure.

tree dir1/

dir1/
└── dir2
 └── dir3
 └── dir4
 └── dir5
4 directories, 0 files

Find files recursively in all subdirectories and list them by DESC file size

ls -lhR | grep -E "\.(jpg|zip)$" | awk '{print $5, $9}' | sort -hr

Or,

find . -type f -exec du -h {} + | grep -E "\./.*\.(jpg|zip)" | sort -hr

Find files by name in a directory tree

This search is case insensitive (-ipath) and recursively traverses the all subdirectories.
The path

find -ipath */ubeR-secret.txt

Output:

./adequate_books/more_books/.secret/deeper_secrets/deepest_secrets/uber-secret.txt

Using command output as the parameter of another command

Just place it between $([command]).
I should call that this works because I'm expecting a single result in the output. Unexpected results might happen if cat (or the encapsulating command) was fed a multiline result as parameters...

cat $(find -ipath */ubeR-secret.txt)

List files that were created between 2 dates

find . -type f -newermt "2012-01-01" \! -newermt "2020-09-01"

Search for file contents in a directory tree recursively

grep -r "pico"

Output:

big-zip-files/folder_pmbymkjcya/folder_cawigcwvgv/folder_ltdayfmktr/folder_fnpfclfyee/whzxrpivpqld.txt:information on the record will last a billion years. Genes and brains and books encode picoCTF{gr3p_15_m4g1c_ef8790dc}

make script file executable

chmod +x [filename]

Get local IP address

hostname -I | awk '{print $1}'

Open current terminal location into file explorer

xdg-open file

Download file to current directory, using the name and extension found in the URL

wget https://raw.githubusercontent.com/ariya/phantomjs/master/examples/printenv.js

Create a symbolic link

ln -s /path/to/original /path/to/symlink

Saving as unix file from VIM

:set fileformat=unix

Find what PID is locking a port

netstat -tulpn | grep <port>

Force kill a PID

kill -9 <PID>

Find out what process is locking a file

fuser <file_path>

Avoid being prompted for private key when using SSH or scp to connect to hosts with your public key.

 eval `ssh-agent`

 ssh-add

Command to kill a UI/Desktop Application

xkill

Terminator preferences profile (~/.config/terminator/config)

[global_config]
[keybindings]
[profiles]
  [[default]]
    use_system_font = False
    background_image = None
    background_darkness = 0.91
    active_encodings = ANSI_X3.4-1968, UTF-8, ISO-8859-1
    foreground_color = "#839496"
    font = Ubuntu Mono 14
    background_color = "#002b36"
    scrollback_infinite = True
[layouts]
  [[default]]
    [[[child1]]]
      type = Terminal
      parent = window0
    [[[window0]]]
      type = Window
      parent = ""
[plugins]

My custom bash prompt

########### current_dir(current_git_branch) ####################
parse_git_branch() {
 git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}

RED="\[\033[0;31m\]"
YELLOW="\[\033[0;33m\]"
GREEN="\[\033[0;32m\]"
NO_COLOR="\[\033[0m\]"

PS1="$GREEN\W$YELLOW\$(parse_git_branch)$NO_COLOR "
####################

Cancel reverse-i-search

Ctrl+G

Activate reverse-i-search

Ctrl+R

Reload bash prompt after .bashrc modification

source .bashrc

Google chrome path

which google-chrome

Check ubuntu version

lsb_release -a

Make umount Work with sshfs

fusermount -u /path/to/mounted-dir

Get a report of the used and available space on all mounted drives

df -h

Get a report of the size of data by folder

sudo du -sk /home/* > tmp3.txt

Sort report

sort -n tmp.txt

Get a list of processes, ssh in this case

ps -ax | grep ssh

Print number of .tpl files (from current directory and in all nested directories..)

find -name '*.tpl' | wc -l

Print a list of .tpl files (from current directory and in all nested directories..)

find -name '*.tpl'

Look for the number of files (.tpl in this case) per directory

 for D in *; do echo $D; find $D -type f -name '*.tpl'| wc -l; done

Git/Github Cheat Sheet

Fred B. — Sun, 16 Aug 2020 16:10:31 +0000

Originally posted on Codepen on January 21, 2015

Show commits oneline, author, commit date, change

git log --pretty=format:"%h%x09%an%x09%ad%x09%s"

%h = abbreviated commit hash
%x09 = tab (character for code 9)
%an = author name
%ad = author date (format respects --date= option)
%s = subject

Git stash

Use git stash to be able to checkout master

git stash // put changes aside temporarily
git checkout master
git stash pop // apply the changes back to the master local branch

Create and view repo from command line

gh repo create boostup/`basename "$PWD"`
gh repo view -w boostup/`basename "$PWD"`

Check for unpushed commits

git log --branches --not --remotes

git log @{u}..

git log origin/master..HEAD

Publish on gh-pages

Follow instructions here

Open repo on Git Hub

gh repo view -w boostup/`basename "$PWD"`

New Repo

gh repo create boostup/`basename "$PWD"`

Stop tracking a file

git rm --cached <file>

Download one file from any github repo

curl -o app.css https://raw.githubusercontent.com/angular-university/complete-typescript-course/section-7-6/client/src/assets/app.css

Showing repo remote URLs

git remote -v

Changing repo remote URLs

git remote set-url origin https://github.com/USERNAME/OTHERREPOSITORY.git

Showing remote tracking

git remote show origin

Setting remote tracking from local branch

git push --set-upstream origin <branch name>

git branch --set-upstream-to origin/master

Unsetting remote tracking by branch name

git config --unset branch.<branch name>.remote
git config --unset branch.<branch name>.merge

Unsetting remote tracking from branch

git branch --unset-upstream

Squasing commits

Follow instructions here

Finding commits where a file has been modified

git log --author=clark --stat <file path from project root>

Finding remote merged branches

git branch -r --merged | grep origin | grep -Ev 'master|deamon'

Note: (grep -v 'master|deamon' => exlcuding branches with names that contain the words 'master' or 'deamon')

To amend the previous commit

git add .
git commit --amend

git log --stat

To change git password when Windows password changes

git config --global credential.helper wincred

To remove untracked files / directories do:

git clean -fdx

-f - force
-d - directories too
-x - remove ignored files too ( don't use this if you don't want to remove ignored files)

Show a file on a particular commit

git show REVISION:path/to/file

See a graph of branch hierarchy

git log --all --graph --decorate --oneline --simplify-by-decoration

Throwing out all of the changes not committed or pushed

git checkout -f 
or 
git reset --HARD

Git Undo Last Commit (not yet pushed)

keeping changes

git reset --soft HEAD^

trashing changes

git reset --hard HEAD^

Now if you already pushed and someone pulled which is usually my case, you can't use git reset. You can however do a git revert,

git revert HEAD

This will create a new commit that reverses everything introduced by the accidental commit.

Create a new branch:

git checkout -b nombranche ( = git branch branchname + git checkout branchname )

Pushing local branch and tracking its remote counterpart:

git push -u origin nombranche

Display all local and remote branches:

git branch -a

Display remote branch commits:

git log origin/nombranche

Merging a branch into the build branch:

git checkout build
git pull origin build
git merge branchname

Deleting a local branch:

git branch -d nombranche

Deleting a remote branch:

git push origin :nombranche
ou 
git push origin --delete nombranche

Removing staged and working :

git reset --hard directory changes

Removing untracked files:

git clean -f -d

Get list of files with conflicts:

git diff --name-only --diff-filter=U

or

git ls-files -u

Display commits by user:

git log --author=authorname

Diffing

git diff f98c5f277e28160ee5076e8ac4fabe7a60e8ca6f  --name-only

Creating a new tag

git tag tagname

Pushing the tag

git push origin branchname --tags

Deleting a pushed tag

distant

git push origin :refs/tags/tagname

local

git tag -d tagname

Troubelshooting

Git asks me to commit or stash changes on checkout master, even though there are no changes

git checkout -- .