
```css
.flex {
  display: flex;
  align-items: center;
}
```

To push an element to the right – for example in a navigation – use:

```css
.pushed {
  margin-left: 0;
}
```


Align items vertically


```css
.sticky {
  position: sticky;
  top: 0;
}
```


Sticky element


```bash
$ git commit --amend
$ git commit --amend -m "correct" # fix a typo
```


Amend a commit


```bash
$ git diff # changed but not staged
$ git diff --staged # staged but not committed
```


Inspect differences


```bash
$ git log -n 10 # last 10 commits
$ git log --oneline --graph --decorate # pretty print log
```


Check the log


```bash
$ git checkout feature/name
$ git cherry-pick [hash]
$ git checkout master
$ git reset --hard HEAD~1
```


Move a commit to a different branch


```bash
$ git mv [old-path] [new-path]
```


Move files in a repo


```bash
$ git pull # git fetch; git merge
$ git pull --rebase # git fetch; git rebase (useful when branches have diverged)
```


Fetch from remote


```bash
$ git rebase -i
$ git rebase -i HEAD~3 # last 3 commits
```


Interactive rebase


```bash
$ git branch -m [new-name] # creates a new bnrach
$ git push origin -u [new-name] # pushes new branch to remote
$ git push origin --delete [old-name] # deletes old branch on remote
```


Rename a branch


```bash
$ git reset --mixed [hash] # move changes to unstaged area
$ git reset --hard [hash] # gets rid of changes
```


Reset HEAD to a specific commit


```bash
$ git restore [path]
$ git restore -p [path] # discard specific chunks
$ git restore . # discard all local changes
```


Restore a file from the index or another branch


```bash
$ git revert [hash] # will create a new commit
```


Revert changes from a specific commit

Remove files from a repo


```bash
$ git stash
$ git stash list
$ git stash apply # applies first stash in the stack
$ git stash apply stash@{1}
$ git stash drop stash@{1} # delete stash
```


Stash changes for later


Useful directives and what they mean:

* `max-age=[seconds]`: specifies the maximum amount of time that a resource will be considered fresh.
* `s-maxage=[seconds]`: similar to `max-age`, but only applies to shared caches.
* `public`: marks authenticated responses as cacheable. Often redundant as other directives (e.g., `max-age`) imply that caches may store a copy.
* `private`: allows only the end recipient of the response (e.g., the browser) to store a copy of it.
* `no-store`: instructs caches not to keep a copy of the resource under any conditions.
* `no-cache`: does not mean ‘no cache’. Will always revalidate with the server, and if there is no new content (`304`), the cached resource can be retrieved; otherwise, a fresh copy will be downloaded.
* `must-revalidate`: like `no-cache`, but with a grace period. Needs an associated `max-age` directive; e.g., `Cache-Control: must-revalidate, max-age=600`.
* `proxy-revalidate`: similiar to `must-revalidate`, but only applies to shared caches.
* `stale-while-revalidate`: provides a grace period for which the recipient can use an out-of-date resource while checking for a new version. E.g., `Cache-Control: max-age=31536000, stale-while-revalidate=86400`.
* `immutable`: a way of telling the recipient that a file will never change and to never bother revalidating it. It completely cuts out the overhead of a roundtrip of latency. **To be used with care.**


Cache-Control HTTP header


```javascript
const arr = [1, 1, 2, 3, 5, 8];

[...new Set(arr)] // [1, 2, 3, 5, 8]
```


Remove array duplicates


```javascript
const data = { a: 1, b: 2, c: 3 };

const { a, ...rest } = data;

console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }
```


Remove object property using the rest operator


```javascript
let a = 10;
let b = 20;

[a, b] = [b, a];
```


Swap two variables


```javascript
document.designMode = 'on'; // edit, then set to 'off'
```


Toggle design mode to edit the current page


```bash
$ upower -i /org/freedesktop/UPower/devices/battery_BAT0
```


Check battery status (capacity, charging rate)


```javascript
// pages/api/doc.js

import db from '@/lib/firestore';

export default async (req, res) => {
  const doc = await db.collection('collection').limit(1).get();

  if (doc.empty) {
    return res.status(200).json({});
  }

  return res.status(200).json(doc.docs[0].data());
};
```

```javascript
// lib/firestore.js

import admin from 'firebase-admin';

try {
  admin.initializeApp({
    credential: admin.credential.cert({
      client_email: process.env.FIREBASE_CLIENT_EMAIL,
      private_key: (process.env.FIREBASE_PRIVATE_KEY ?? '').replace(
        /\\n/gu,
        '\n',
      ),
      project_id: process.env.FIREBASE_PROJECT_ID,
    }),
  });
} catch (error) {
  // Skip the "already exists" message as it is not an actual error
  // when we are hot-reloading.
  if (!/already exists/u.test(error.message)) {
    console.error('Firebase admin initialization error', error.stack);
  }
}

export default admin.firestore();
```


Read Firestore data in Next.js


```bash
$ npm list # draw tree for entire project
$ npm list [dependency] # for a specific dependency
$ npm list --depth=[depth] # specify depth
```


Draw a dependency tree in npm


```bash
$ npm install [dependency] --save-prod
$ npm install [dependency] --save-dev
```


Move dependencies

Find and remove unneeded node_modules directories


Fix the conflicts inside package.json, then:

```bash
$ npm install --package-lock-only
```


Resolve conflicts in package-lock.json


1. Open Task Scheduler (`Win + R, taskschd.msc`)
1. Go to Actions > Create Basic Task...
1. Enter a name and description
1. Select trigger, e.g. Daily, One time, When I log on...
1. Configure action:
    * Type: Start a program
    * Program/script: `npm`
    * Arguments: `run <script-name>`, e.g. `run scrape`
    * Start in: directory where package.json is located, e.g. `C:\projects\hello`
1. Click Finish and test your action

Additionally, if you want the task to run in the background, make sure to select "Run whether user is logged on or not" under General properties for the task.


Automate npm tasks using Windows Task Scheduler


Using [AutoHotkey](https://www.autohotkey.com/) and the following script:

```autohotkey
; expand @@ to email address, for quick entry
::@@::example@mail.com

; en dash
!-::
Send, {ASC 0150}
return

; em dash
!+-::
Send, {ASC 0151}
return

; smart quotes
![::
Send, “
return

!]::
Send, ”
return

!+[::
Send, ‘
return

!+]::
Send, ’
return
```


Snippets