web-dev.md

lang	title	author	description	keywords
en-GB	Web dev	Jerry Sky	My notes on various web-dev related matters.	web, development, Angular, NodeJS, ExpressJS, JS, JavaScript, TypeScript, SQL, CSS, SCSS, Sass, links, resources, tcp, port

Resources

Security

• Your NodeJS authentication tutorial is (probably) wrong
• secure-password
• How to stop me harvesting credit card numbers and passwords from your site
• PHP Cookies security
• Remember me Safely

Interesting

• You don't hate JavaScript
• The Post JavaScript Apocalypse

Building

• How to build your own team chat in five days
• A tale of webpage speed, or throwing away React
  — an efficient web app that is not bloated, imagine that

Abstract

• A Programmer's Guide to Managing Stress
• It's all about time

Useful

• Leaflet — map plugin
• NPM — overriding nested NPM dependency versions
• Makefile over NPM scripts

Fun

• IE-11 end of support countdown
• Creating Electronic Dance Music with NodeJS
• Music Player with physics-based seekbar

---

NodeJS + Apache server (.htaccess)

To use a NodeJS app on an Apache server you can setup the .htaccess file to redirect any request to the NodeJS server:

DirectoryIndex disabled
RewriteEngine On
RewriteCond %{HTTPS} on
RewriteRule ^$ http://127.0.0.1:**PORT**/ [P,L]
RewriteCond %{HTTPS} on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:**PORT**/$1 [P,L]

RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Obviously, you would replace the **PORT** fields with actual port on which the desired NodeJS app runs.

For WebSocket support use:

RewriteCond %{REQUEST_URI} ^/socket.io [NC]
RewriteCond %{QUERY_STRING} transport=websocket [NC]
RewriteRule /(.*) ws://localhost:**PORT**/$1 [P,L]

Again, replace **PORT** with an actual port.

Source: original article in polish

---

Freeing a TCP port

Execute bash command

sudo fuser 80/tcp

to see all the processes listening to HTTP requests on port 80. Add the -k option to kill them.

Source

---

CORB & CORS

CORB might be a potential hiccup when attempting to load resources from different origin (CORS). The problem can occur when a website (SPA) requests additional data, but the user accessed the website using two different links one with www. and one without the prefix. Browser then remembers that the resource had the Access-Control-Allow-Origin set to the website link with www. prefix for example. That’s why when accessing the website without the prefix, browser blocks the CORS connection, because it remembers the resource had the header set to a different domain. The domains www.example.com and example.com are two different domains.

Further reading

The code snippet attached below is an example .htaccess file implementing necessary redirections from http and/or www addresses to https non-www version of the domain including SPA redirect to the main index file.

RewriteEngine on
# redirect all non https links to https non-www domain
RewriteCond %{HTTPS} off
RewriteRule ^(.*) https://example.com/index.html [NC,L,R=301]

# redirect www https links to https non-www domain
RewriteCond %{HTTP_HOST} ^www\.example\.com [NC]
RewriteRule ^(.*) https://example.com/index.html [NC,L,R=301]

# if the link contains a file that doesn't exist redirect to index.html (SPA)
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC]

---

Samsung Internet browser webpage scroll position

Samsung Internet doesn't output scroll position through document.documentElement.scrollTop, instead use document.body.scrollTop. However, unfortunately the second option isn't supported in other major browsers. Therefore, the best implementation of scrollTop would be to check the value from both sources to ensure thorough browser support.

---