Forem: Remi Kristelijn

Conventional Messaging

Remi Kristelijn — Wed, 26 Feb 2025 12:46:59 +0000

With remote work and on-the-go messaging, frustration can arise quickly. Sometimes, even small conventions—ones you might not even be aware of—can trigger irritation. For example, ending a short message with a dot (.) is now often interpreted as “end of discussion.”

To create clarity and a shared understanding, I’ve compiled a list of messaging do’s and don’ts. This project is open for discussion and contributions via pull requests.

I'm certain there is a lot missing still, please get involved and create an issue or even a PR. I'm also happy with a translation.

Conventional Messaging

Easy switching git projects

Remi Kristelijn — Wed, 06 Nov 2024 07:11:17 +0000

If you are working a lot of git projects, like maintaining things, having to bump versions, doing npm outdated or npm upgrade, maybe you want to quickly see what node version it runs in, as this needs to change two times a year.

Probably you have one folder on your machine containing all your projects, maybe even nested in groups. But do you remember each path and do you like typing and cd'ing into them? I'm sure it gets annoying at some time, at least that's what happened to me.

I started using aliasses in .zshrc to quickly cd into them however the amount of projects kept growing. There must be some way to list them, because they all have a .git folder in them. So I created Lcode.

Lcode lists your repos in a specific folder (the root folder of your projects). After choosing, it changes directory for that folder and you can configure to run your favorite command, or just start bash or zsh, or even fire up Visual Studio Code.

In my example below the 'command' in the config file checks for the existence of a .nvmrc file and it it exists, runs nvm to switch to the proper node version for that project.

You can either use the defaults, add command arguments or generate a config file to persist them.

https://www.npmjs.com/package/@rkristelijn/lcode

How I can get away with never installing npm packages globally

Remi Kristelijn — Wed, 29 May 2024 06:54:57 +0000

My belief is that when you clone a git repository all code, settings and tools should be contained in that cloned repo; the directory. It should not contaminate the system, not by tools, not by environment variables, maybe a bit for the platform.

Scope

This article will not discuss the use of .env file for maintaining environment variables or the .nvmrc to enable automatically switching to the proper node version. Also it will not include info about .npmrc file to e.g. lock the node version.

Trigger to write this article

So many README.md files or manuals say things like:

// https://angular.io/guide/setup-local

npm install -g @angular/cli

More candidates like these are, but not limited to:

eslint
prettier
create-react-app
webpack
@vue/cli
nx

Why would you want to do this? You have now local packages to maintain, and you can't use it across different projects that may have different versions of that software package.

Enter `npx`

npx is a package runner tool that comes with npm 5.2.0 and higher. The current version when writing this article is npm 10.8.0 It is designed to execute binaries from Node packages without globally installing them. However, NPM documentation suggests globally installing certain packages, especially when they are CLI tools that will be used frequently across different projects.

So instead of installing globally you can execute:

npx @angular/cli

Or even if you want to use a specific version of @angular/cli

npx @angular/cli@17

You have to type less, you can specify exact versions and you don't contaminate the developer's machine.

But what about `package.json`?

The package.json file serves as the cornerstone of any Node.js project, acting as the project's manifest. It provides critical metadata such as the project’s name, version, and author, and it specifies the dependencies and devDependencies required for the project to run and be developed. Additionally, package.json defines custom scripts that automate common tasks like building, testing, and starting the application. This file ensures consistent environment setup, simplifies dependency management, and facilitates project configuration, making it an essential tool for maintaining and sharing Node.js projects.

So if it is a dependency of the project, why not add it to the dependencies, devDependencies or even peerDependencies?

You can specify the exact versions, using carot-minor (^) or tilde-patch (~) imports. It even automatically updates when fixes arrives.

But I can't run the tools' commands directly from the shell?

Well, fair point. If you want to run e.g. eslint, you don't want to enter:

node_modules/eslint/bin/eslint.js .

enter npm scripts.

You can simply write:

{
  "scripts": {
    "lint": "eslint ."
  }
}

So why does this work?

NPM scripts can locate executables in the project's node_modules/.bin directory without needing to specify the full path. I does also look at the project itself and the global installed packages and eventually just performs the command hoping the OS will pick it up.

So that does mean that you can also install e.g. nx and use a script to alias the nx command:

{
  "scripts": {
    "nx": "nx"
  }
}

But what about passing arguments?

You can't simply pass arguments to nx as nx --help, you need to pass them as positional arguments using an extra pair of dashes -- like so as described in the npm documentation:

nx -- --help

So that is why I don't need to install any global dependency. Ever. Because we have npx and npm scripts.

WIP: Node development on iPhone or iPad

Remi Kristelijn — Fri, 19 Apr 2024 09:26:42 +0000

Objective

work on Node/React projects on the go with an external keyboard with native iPad or iPhone. Not a web solution but from the shell.

Update

this is just a dump of my commands and findings. It is not stable yet, still finding out things... keep you posted

Update 20240726 - i Switched to iPad pro because iPhone 11 pro can’t use side-by side and when the console is not in focus, the website that I serve doesn’t respond and I have to alt-tab and alt-tab back.

Why even want this?

Just for fun, because I can. Practise with shell, if you have shell, you can do everything (except browsing the web for pages that use javascript).

Limitations

only vi seems to be stable, nvim
without side-by-side the server process halts when out of focus

How (basics)

install ish from app store

~ uname -a Linux iPad 4.20.69-ish SUPER AWESOME May 20 2023 23:41:32 i686 Linux

Resources

To find out still

where are the logs
how to debug? nvim keeps on crashing, nothing in /var/log
how to scroll up with keyboard?
can I use it for web development?
how to restore fast after reset?

Q&A

how to reset to clean ish? Yes: remove the app, reinstall
is it persistant? Yes: after restart, it keeps the installed packages and your code

Alpine Package Keeper (apk)

apk add git
apk search nodejs-current

Editor: neovim

Don't use, not stable (at least not edge), will try

echo https://dl-cdn.alpinelinux.org/alpine/edge/main > /etc/apk/repositories
echo https://dl-cdn.alpinelinux.org/alpine/edge/community >> /etc/apk/repositories
apk update
apk upgrade
apk add neovim

source

Usage

not all commands work: vsplit etc, keeps on crashing

nvim
escape key: ctrl-c
basic noevim commands

Shell

https://www.youtube.com/watch?v=CF1tMjvHDRA&ab_channel=JoseanMartinez

apk add curl
apk add zsh
apk add git
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Node

If you install npm and nodejs-current then you get v16.11.1 and npm 7.

➜  ~ apk search node npm
npm-7.17.0-r0
nodejs-less-4.1.1-r0
nodejs-14.21.3-r0
npm-doc-7.17.0-r0
nodejs-clean-css-5.1.2-r0
nodejs-current-doc-16.11.1-r0
nodejs-current-16.11.1-r0
nodejs-dev-14.21.3-r0
nodejs-current-dev-16.11.1-r0
npm-bash-completion-7.17.0-r0
nodejs-doc-14.21.3-r0
➜  ~

To install node:

apk add nodejs-current npm

latest is v14, v16 is there as 'current'
See https://dl-cdn.alpinelinux.org/alpine/ for latest or specific version

vi /etc/apk/repositories

Tried, but doesn’t work:a``
add:
https://dl-cdn.alpinelinux.org/alpine/latests-stable/main
https://dl-cdn.alpinelinux.org/alpine/latest-stable/community

apk upgrade

// need specific version because npm has newer versions

apk add node npm

SSH

// todo

Update the shell

// todo

Sample web project

mkdir -p ~/git/hub/express-test && cd "$_"
git init -q - generate a .git folder
npm init -y - init a default package.json file
npm i - init the node_modules folder
npm i express -
mkdir -p src && touch $_/index.js

`js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
res.send('Hello World!')
})

app.listen(port, () => {
console.log(Example app listening on port ${port})
})
`

Sources

Install neovim on ish basic neovim commands

Most elemental code formatting for Typescript/Javascript: .editorconfig vs prettier

Remi Kristelijn — Thu, 18 Apr 2024 06:10:43 +0000

Context

When working on Javascript/Typescript projects probably most of us know the following;

eslint is used to avoid code errors
prettier is used to format you text

Enter editorconfig

These are tools that you need to add. But the most elemental code formatting is not here, it is in the widely supported .editorconfig file.

You can generate such a file with this command:

npx editorconfig-cli init -y

It is basically an ini file

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100
quote_type = single

The best thing is that your code editor or IDE will recognise this file automatically and formats your code per this .editorconfig file by default, or there is a plugin.

IDE support for prettier and editorconfig

Visual Studio Code (VSC) uses a plugin
Vim uses a plugin
Nvim supports this by default
IntelliJ IDEA uses a plugin
Sublime uses a plugin
Atom uses a plugin

In table format:

Editor/IDE	Prettier Support	.editorconfig Support
Visual Studio Code	✅ Plugin	☑️ Plugin
Vim	☑️ Plugin	☑️ Plugin
Nvim	✅ Default	✅ Native
IntelliJ IDEA	☑️ Plugin	☑️ Plugin
Sublime Text	☑️ Plugin	☑️ Plugin
Atom	☑️ Plugin	☑️ Plugin
Emacs	☑️ Plugin	✅ Plugin
PyCharm	☑️ Plugin	☑️ Plugin
Eclipse	☑️ Plugin	☑️ Plugin
Notepad++	☑️ Plugin	☑️ Plugin
Brackets	☑️ Plugin	☑️ Plugin
WebStorm	☑️ Plugin	☑️ Plugin
PyCharm	☑️ Plugin	☑️ Plugin
Eclipse	☑️ Plugin	☑️ Plugin
Notepad++	☑️ Plugin	☑️ Plugin

And if you want to include these rules in linting locally or in the pipeline, even prettier supports it!

I give you one better; usually I keep prettier settings like this .prettierrc (or even better, stick it in package.json's prettier value):

{
  "singleQuote": true,
  "printWidth": 140,
  "tabWidth": 2,
  "useTabs": false
}

But you can go all-out if you want. The important thing is that there is a huge overlap with .editorconfig:

Prettier and editorconfig feature comparison

Feature	Prettier Setting	.editorconfig Setting	Description
Indent Style	`useTabs: true`	`indent_style = tab`	Use tabs for indentation.
	`useTabs: false`	`indent_style = space`	Use spaces for indentation.
Indent Size	`tabWidth: N`	`indent_size = N`	Number of spaces or tabs for indentation.
Line Length	`printWidth: N`	`max_line_length = N`	Maximum line length.
Newline Style	`endOfLine: lf`	`end_of_line = lf`	Use LF for line endings.
	`endOfLine: crlf`	`end_of_line = crlf`	Use CRLF for line endings.
	`endOfLine: cr`	`end_of_line = cr`	Use CR for line endings (rarely used).
Trailing Spaces	`trailingComma: none`	`trim_trailing_whitespace = true`	Remove trailing whitespaces.
	`trailingComma: es5`		Add trailing commas where valid in ES5 syntax.
	`trailingComma: all`		Add trailing commas in all places (arrays, objects, etc.).
Tabs or Spaces		`insert_final_newline = true`	Insert a final newline at the end of files.
Quote Style	`singleQuote: true`		Use single quotes.
	`singleQuote: false`		Use double quotes.
Experimental	`singleAttributePerLine`		Experimental feature: format single attributes per line.
Arrow Function	`arrowParens: avoid`		Avoid parentheses around a sole arrow function parameter.
	`arrowParens: always`		Always include parentheses around arrow function parameters.
Tab Width	`tabWidth: N`		Number of spaces per tab.
Semicolons	`semi: true`		Use semicolons.
	`semi: false`		Omit semicolons.
JSX Quotes	`jsxSingleQuote: true`		Use single quotes in JSX.
	`jsxSingleQuote: false`		Use double quotes in JSX.
Bracket Spacing	`bracketSpacing: true`		Include spaces between brackets in object literals.
	`bracketSpacing: false`		Exclude spaces between brackets in object literals.
Prose Wrap	`proseWrap: always`		Wrap prose text in Markdown or HTML as necessary.
	`proseWrap: never`		Do not wrap prose text.
	`proseWrap: preserve`		Preserve existing line breaks.
Tab Preferences		`tab_width = N`	Number of spaces per tab when using spaces.
File Encoding		`charset = utf-8`	File character encoding.
Root Indicator		`root = true`	Marks the directory as the root for `.editorconfig` settings.

Lab - funny discovery

I have a repo with no .prettierrc
I run npx prettier . --write; I see some changes in the files; e.g. strings are now double quoted, breaks up lines > 80 chars etc. Very nice.
I generate a clean default .editorconfig using npx editorconfig-cli init -y
Without any configuration of prettier, when I run npx prettier . --write again.... it respects the quote_type = single and max_line_length from the .editorconfig ＼ ٩( ᐛ )و /／ ʕ•̫͡•ʕ̫͡ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ̫͡ʔ-̫͡-ʔ

My point is, why have a .prettierrc file at all when all settings can be in .editorconfig and still use prettier? At least you won't have conflicting settings. .editorconfig file needs to be there anyway because you can't stick it in package.json like you can do with prettier:

{
  "scripts": {},
  "prettier": {
    "semi": false,
    "singleQuote": false,
    "trailingComma": "all"
  } 
}

Which is a huge win IMHO, however prettier is considered scoped within Node/Typescript/Javascript ecosystem, where editorconfig is more widely supported:

Language support prettier vs editorconfig

Consider the current top 25 languages supported by Prettier and .editorconfig:

Language	Prettier Support	.editorconfig Support
JavaScript	✅	✅
TypeScript	✅	✅
HTML	✅	✅
CSS	✅	✅
SCSS	✅	✅
JSON	✅	✅
Markdown	✅	✅
YAML	✅	✅
XML	✅	✅
Python	❌	✅
Java	❌	✅
C	❌	✅
C++	❌	✅
C#	❌	✅
Ruby	❌	✅
PHP	❌	✅
Go	❌	✅
Kotlin	❌	✅
Swift	❌	✅
Rust	❌	✅
Dart	✅	✅
Lua	❌	✅
Groovy	❌	✅
SQL	❌	✅
Shell scripts	✅	✅

Advice

So my advice:

If you use multiple programming languages in one repo:

use .editorconfig everywhere
let prettier use .editorconfig, only use .prettierrc to append settings .editorconfig doesn't support, avoid conflicting settings. Use following script: npx editorconfig-cli init -y, remove any prettier settings.
include prettier in eslint settings

If you only use TS/JS/HTML/CSS

totally ignore .editorconfig
use .prettierrc instead with prettier configuration
include prettier in eslint settings

Happy coding!

git command-line tricks

Remi Kristelijn — Fri, 13 Dec 2019 09:26:47 +0000

Personally I prefer command-line over tools. This has a few reasons;

The command-line is always available;
If you can do it by commandline, you can do it everywhere
Using the command-line makes me look geeky

The reason for this post is that I grew tired of typing git log --one-line -10 that shows the last 10 commits and also having to type q afterwards, where the information that I needed goes away, because I want to create a commit message that is in line with the rest of the commits.

So I decided to look into making it more pleasant for me to quickly get some history information from git.

The first thing I learned was that most git commands end up in a so called 'pager';

git log --oneline -10

e3aa791 (HEAD -> master) notes
81affbd docs: translated installation guide and moved errors to bottom
9a592cd docs: nearly there
aaa98fe docs: add stuff from the thing
c522b66 docs: generic docs
e09ee2b chore(Doc) sort
8740d11 chore(doc): add new stuff
bd8e74c notes after meeting
0de07df chore(Base): initial checkin
(END)

I discovered that I can bypass the pager so that git uses cat by adding --no-pager as first argument. It only works as a first argument.

`--no-pager`

git --no-pager log --oneline -10

➜  notes git:(master) git --no-pager log --oneline -10
e3aa791 (HEAD -> master) notes
81affbd docs: translated installation guide and moved errors to bottom
9a592cd docs: nearly there
aaa98fe docs: add kostenscherm
c522b66 docs: generic docs
e09ee2b chore(Doc) sort
8740d11 chore(doc): add new stuff
bd8e74c notes after meeting
0de07df chore(Base): initial checkin
➜  notes git:(master)

notice how I get my shell back and the information is still on my screen. Now I could write a git commit message in line with the rest.

So this solves part of my problem. I don't want to type the whole command as above over and over again. It is nice to remember it when you are working on someone else's machine, but in this case I want to 'save' it.

The good news is; you can. per command, you can toggle whether it should use pager.

In this case you can type:

git config --global pager.log false

➜  notes git:(master) git config --global pager.log false
➜  notes git:(master) git log -1
commit e3aa791e0e970023734988c8aeb736ecda6099f4 (HEAD -> master)
Author: Remi Kristelijn <remi.kristelijn@myawesomecompany.com>
Date:   Fri Nov 29 15:51:02 2019 +0100

    notes
➜  notes git:(master)

These settings are stored in ~/.gitconfig

Also I know with combination of --pretty and --graph you can decorate you log message and save this as an alias.

Adding an alias

The command I use is log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' -10

➜  git:(master) git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' -10
*   d2a1b98 - (HEAD -> master, origin/master) Merge branch 'feat/wizard-steps' into 'master' (3 weeks ago) <Remi Kristelijn>
|\  
| * 20b7b2e - (origin/feat/wizard-steps, feat/wizard-steps) feat:step 2 of wizard (3 weeks ago) <Remi Kristelijn>
| * 077f5e1 - feat: wizard placeholder (3 weeks ago) <Remi Kristelijn>
| * e2f4c29 - feat: add readme.md as an example (3 weeks ago) <Remi Kristelijn>
| * debbfcd - fix: hyperlink goes outside of context (3 weeks ago) <Remi Kristelijn>
| * af11d21 - feat:allow *.md imports for Typescript (3 weeks ago) <Remi Kristelijn>
|/  
*   cb562e3 - Merge branch 'feat/style' into 'master' (3 weeks ago) <Remi Kristelijn>
|\  
| *   51df26c - (origin/feat/style, feat/style) fix:merge (3 weeks ago) <Remi Kristelijn>
| |\  
| |/  
|/|   
* |   3583c92 - Merge branch 'feat/docs' into 'master' (3 weeks ago) <Remi Kristelijn>
|\ \  
| * | ba0f827 - (origin/feat/docs) docs:add loglevel (3 weeks ago) <Remi Kristelijn>%

To save this command as an alias, let's say lg

git config --global alias.lg log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' -10

Then you can flag this command to also not use 'pager'

git config --global pager.lg false

But because log is already flagged false for pager, it will cary that through when using lg.

Simplest login app using express-session

Remi Kristelijn — Fri, 05 Jul 2019 17:46:54 +0000

Express login with express-session

Clone this repo or follow the steps below to learn about setting up a Node/express app that enables login, logout and secure routes.

step	instruction
0. boilerplating	These steps will set up an initial project.
0.1	Install express-generator globally `npm install -g express-generator`
0.2	Create a new project named login in a new folder login and add pug support (instead of Jade). `express -css=less --view=pug --git login`
0.3	Install dependencies by executing `npm i` after moving into the directory using `cd login`
0.4	You will see warnings, depending on how many vulnerabilities are found. `npm notice created a lockfile as package-lock.json. You should commit this file.` `added 118 packages from 174 contributors and audited 247 packages in 10.793s` `found 1 low severity vulnerability run npm audit fix to fix them, or npm audit for details` after running `npm audit` you will see recommendations to fix, you might want to run `npm ls` to see the dependency tree. In this case you can fix it by running `npm i pug@latest` After running this no vulnerabilities are reported and we can go ahead and start the app
0.5	start the app by one of the following commands: 1. `npm start` - to start app on default port 3000 2. `PORT=8080 npm start` - to start on port 8080 3. `DEBUG=login:* npm start` - start with debug information
0.6	Point your browser to `localhost:3000` In our console we see: `~/login$ DEBUG=login:* npm start` `> login@0.0.0 start /home/gius/login` `> node ./bin/www` `login:server Listening on port 3000 +0ms` `GET / 304 719.979 ms - -` `GET /stylesheets/style.css 304 7.148 ms - -`
1. create login form	After completing these steps we have a new page and route.
1.1	run `npm i --save express-session bootstrap` to add the dependency Note that bootstrap has 2 peer dependencies: jquery and popper.js. We don't need these, because we are just going to use the css. This is a list of ways to handle the `npm WARN`: 1. Ignore the warnings; not desired because the team will ignore all npm output 2. Install peer deps: `npm i --save jquery popper.js`; not desired; packers will include jquery and popper.js and let the codebase grow significantly 3. Install as dev deps: `npm i -D jquery popper.js`; Unsure yet if it solves 2, but it shuts up the WARN 4. Use ignore-warings: Unclear how to use yet, but it seems like a legit way of avoiding 2 and still keep npm output clean 5. use bootstrap cdn; Preferred to install locally to allow offline dev 6. manual install bootstrap; deps should be in package.json for keeping all updatable and visable for npm audit
1.2	create `/views/login.pug` see change
1.3	add the route to `app.js` for reroute to login, bootstrap and include session see change
1.4	update styles `public/style.css` see change
1.5	update layout.pug to include bootstrap `views/layout.pug` see change
1.6	current result routes default route to login `~/login $ DEBUG=login:* npm start -s` `login:server Listening on port 3000 +0ms` `GET / 304 737.652 ms - -` `GET /css/bootstrap.min.css 304` `.766 ms - -` `GET /stylesheets/style.css 304 1.070 ms - -`
2. add about-page and header	Follow below steps to add about page and header
2.1	Before we continue, I like to clean up some logging. `morgan` is creating too much noise. Remove the following lines from `app.js`: `var logger = require("morgan");` `app.use(logger("dev"));` You can remove morgan from `package.json` by: `npm rm --save morgan`. While we are at it; `debug` is a direct dependency for `express` and `express-session` so we can remove it from our `package.json` by: `npm rm --save debug`. To see if `debug` still works, we can use: `DEBUG=app.js,login:server,express-session npm start -s`. Note that we can use `DEBUG=*` for all output. Now we can add debug info like so (in app.js): `var debug = require('debug')('app.js');` `debug('hello world');` Our output: `login:server Listening on port 3001 +0ms` `express-session no SID sent, generating session +26s` `app.js checkLoggedIn(), req.session.loggedIn: undefined rendering login +5ms` `express-session saving PybLKV4TpsaSMx_PzZx_Mj5Is4X_0U9g +748ms` `express-session set-cookie app=s%3APybLKV4TpsaSMx_PzZx_Mj5Is4X_0U9g.Bd1dSB8w4kfcL9DPonfLBXFRLtZBdqHThCNMTsv0Ixo; Path=/; HttpOnly +4ms` `express-session fetching PybLKV4TpsaSMx_PzZx_Mj5Is4X_0U9g +736ms` `express-session session found +1ms` `app.js checkLoggedIn(), req.session.loggedIn: undefined rendering login +1ms` `express-session saving PybLKV4TpsaSMx_PzZx_Mj5Is4X_0U9g +93ms` `express-session split response +1ms`
2.2	add `routes/about.js` and `views/about.pug` with this content and update `app.js`; add: `app.use("/about", aboutRouter);` `var aboutRouter = require("./routes/about");`
2.3	add `views/header.pug` with this content and include it in `index.pug` and `users.pug` and conditionally in `views/about.pug`: `if loggedIn` `include header`
2.4	then there are some bits and pieces to fix in `views/login.pug`: - add error placeholder - add link to about page - change button to input, so the enter key works
2.5	add `views/users.pug` with contents from here and pass a list of users like so
3. finalize login	There still stuff left to do. The examples just support login and logout, and the session is killed after 6000 ms (6sec)
3.1	We can remove the line `cookie: {maxAge: 6000}` so the session isn't just 6sec from `app.js`
3.2	In `app.js` we create a `login()`- and a `logout()` function that only care about logging in and logging out. Logout removes the session.loggedIn flag, Login sets it and calls checking the credentials. A separate function is created to check the credentials called `checkUser()`

Final design

Final Demo

clean start /
get /about
get /users
login
homepage
get /users
get /about
logout
wrong login

Questions / evaluation

These are answers that I seek answer to before starting this document, raised during creation and reviewing the code.

Question	Answer
Do I need passport and passport local for logging in?	no. Minimum is `express`, `express-session` and maybe `cookie-parse`
What is the simplest way of creating login/logout? Cookies? Server-side session?	This solution creates a cookie even when the user isn't logged in. This is a session cookie. The value is `s%3Ayz92aWlUKzWDXhzlkqiz8wddo-SH2G0I.N6dzg2O0liagsejyMKLehW1aRGL6fEY1mkMrTFKOG1E` that seems to be the same value as the session on the server in the console of `DEBUG=express-session npm start -s`. More on cookie security
Can I identify the user, so I can create access groups and allow different routes per user?	No. In this case only a boolean is stored: `Session {` `cookie: { path: '/', _expires: null, originalMaxAge: null, httpOnly: true },` `loggedIn: true` `}`
Is this the simplest example?	For testing the session, you need at least 1 or 2 'secure' routes, login- and logout route and some kind of views. With a SPA the backend can be smaller.
is creating `req.session.loggedIn` a legit way to manage the session?	For now it seems ok.
What are generic security recommendations?	On the express-session page it says: Warning The default server-side session storage, MemoryStore, is purposely not designed for a production environment. It will leak memory under most conditions, does not scale past a single process, and is meant for debugging and developing. It seems MongoDB can store the session.

Sources

my jsend implementation in node

Remi Kristelijn — Fri, 05 Jul 2019 17:35:19 +0000

JSend

This is my implementation of jsend. You can fork/clone the repo and give me your feedback. I tried to stick with:

All responses return json (including errors)
Limit HTTP.status to
- 200 OK
- 400 BAD REQUEST (client fault)
- 500 INTERNAL SERVER ERROR (server fault)
On top of 1 and 2, use jsend standard, but all 4 fields are always returned:
- status - [OK,FAIL,ERROR],
- data - the data or the stack
- message - shortest message possible
- code - [200,400,500]

The drivers for these 3 points is, that this REST API should serve a frontend with limited exotic situations where the server all of a sudden responds with HTML or different structure.

The code can be found here: https://github.com/rkristelijn/jsend.

I did not implement POST, PUT and DELETE (yet), so it is not a full REST service.

Install

With SSH:

git clone git@github.com:rkristelijn/jsend.git
cd jsend && npm i

With HTTP:

git clone https://github.com/rkristelijn/jsend.git
cd jsend && npm i

Usage

purpose	command
start	`npm start -s`
test	`npm test -s` (after server is running)

Demo

Responses

`GET /`

{
  "status": "SUCCESS",
  "data": {
    "hello": "world",
    "api": "http://localhost:3000/api"
  },
  "message": "200: OK",
  "code": 200
}

`GET /api`

{
  "status": "FAIL",
  "message": "Route '/api' not found",
  "data": [
    "400: BAD REQUEST",
    "Route '/api' not found",
    {
      "available": [
        ["http://localhost:3000/api/users", "http://localhost:3000/api/fail"]
      ]
    }
  ],
  "code": 400
}

`GET /api/users`

{
  "status": "SUCCESS",
  "data": {
    "users": [
      {
        "name": "admin",
        "pass": "admin"
      },
      {
        "name": "system",
        "pass": "system"
      },
      {
        "name": "henk",
        "pass": "annie"
      }
    ]
  },
  "message": "200: OK",
  "code": 200
}

`GET /api/users/henk`

{
  "status": "SUCCESS",
  "data": {
    "user": {
      "name": "henk",
      "pass": "annie"
    }
  },
  "message": "200: OK",
  "code": 200
}

`GET /api/fail`

I purposely created an error, calling i_will_crash_on_purpose() that doesn't exist to see if a proper JSON is returned.

{
  "status": "ERROR",
  "message": "i_will_crash_on_purpose is not defined",
  "data": [
    "500: INTERNAL SERVER ERROR",
    "ReferenceError: i_will_crash_on_purpose is not defined",
    "at /home/gius/jsend/api/fail/fail-router.js:10:5"
  ],
  "code": 500
}

Key take-aways

npm WARN

Ignore the WARN per heavily discussed fsevent optional dependency for chokidar (via nodemon) in npm here on non-mac systems. There seems no way around it, like I did with the jQuery dependency here

console.log() vs debug()

Debug comes as a dependency of express. Debug can be tailored at the beginning of every file and filtered while starting the app.

you can use a .env file and dotenv or simply add the following to the start script in package.json:

"scripts": {
    "start": "PORT=3000 DEBUG=jsend* nodemon ./bin/www"

Custom validators in test

To keep the test clean, I've written 3 simple validators for jsend that can be reused and keep the test themselves short, manageable and reusable.

e2e test without bootstrapping the app

The test might as well skip setting up the app in before(). This removes redundant code, makes the test simpler and test the actual app.

Arrow-functions / lambdas in test

This is not best practice because of this scope is gone. Mocha strongly advices to avoid lambda's in test:

Passing arrow functions (aka "lambdas") to Mocha is discouraged. Lambdas lexically bind this and cannot access the Mocha context.

Sources

JavaScript developer's visualization and design

Remi Kristelijn — Wed, 19 Jun 2019 12:56:20 +0000

A few weeks ago I made a small contribution to a github repo. This is actually something I do often when I want to try out stuff from another developer; I clone the repo, usually there's some outdated dependencies or error in the installation instruction, how hard is it to fork it and make a PR? Usually this is highly appreciated.

In this case it was a project that I use very often, which is a plugin in Visual Studio Code called yUML. I use this to visualize my code, or idea before I key it in. It is very simple;

you create a new *.yuml file, and type one of the following words: [class|activity|usecase|state|deployment|package|sequence] and an example is pre-generated for you, visualizing the diagram desired so you can start tinkering around to your desire. When done, you add // {generate:true} to the top and you can import your design in your .md file using `.

I found that the examples were a bit hard to find. So I contributed to the wiki, so whenever you press 'wiki' in the preview, you see my contribution.

Next to that I found two other projects that are similar:

Chart.js Markdown Preview however this doesn't work on github
Mermaid Editor that you can manually generate svg files from, which is not as strict as yUML

I'd love to hear about your (free) visualization techniques that work cross-os without having to install complex programs!

Forem: Remi Kristelijn

Conventional Messaging

Easy switching git projects

How I can get away with never installing npm packages globally

Scope

Trigger to write this article

Enter npx

But what about package.json?

But I can't run the tools' commands directly from the shell?

But what about passing arguments?

WIP: Node development on iPhone or iPad

Objective

Update

Why even want this?

Limitations

How (basics)

Resources

To find out still

Q&A

Alpine Package Keeper (apk)

Editor: neovim

Usage

Shell

Node

SSH

Update the shell

Sample web project

Sources

Most elemental code formatting for Typescript/Javascript: .editorconfig vs prettier

Context

Enter editorconfig

IDE support for prettier and editorconfig

Prettier and editorconfig feature comparison

Lab - funny discovery

Language support prettier vs editorconfig

Advice

If you use multiple programming languages in one repo:

If you only use TS/JS/HTML/CSS

git command-line tricks

--no-pager

Adding an alias

Simplest login app using express-session

Express login with express-session

Final design

Final Demo

Questions / evaluation

Sources

my jsend implementation in node

JSend

Install

Usage

Demo

Responses

GET /

GET /api

GET /api/users

GET /api/users/henk

GET /api/fail

Key take-aways

npm WARN

console.log() vs debug()

Custom validators in test

e2e test without bootstrapping the app

Arrow-functions / lambdas in test

Sources

JavaScript developer's visualization and design

Enter `npx`

But what about `package.json`?

`--no-pager`

`GET /`

`GET /api`

`GET /api/users`

`GET /api/users/henk`

`GET /api/fail`