Improve website usability, with Javascript

// You need a certain control to be clicked when you press a certain button? Such codez!

window.addEventListener('keyup', function(event) {

  if (event.keyCode === 27) { // escape

        $('.component---BWa8p').focus().click();

  }

});

(source, source)

Node CRUD basics

Javascript philosophy and execution flow is quite different to Perl:

• With Perl it's strongly discouraged to wrap an operation in a `try { ... }` block without a `catch { ... }` block following it, because any errors would be hidden and the operation might silently fail.
• With Javascript and Promises, many operations are automatically wrapped in a `try { ... }` block, and are not even executed if they don't have a `.then()` or a `.catch()` added, so they silently fail!

Knex basics

	knex.select()
	.from('some_table')
	.where({
	name: 'Mr Foo'
	})
	.then((result) => {
	// This block is *REQUIRED* or the query is not sent to the database!
	if (! result[0]) {
	console.log(`Error: "Mr Foo" was not found.`);
	process.exit(1); // It is alright to exit here *IF* it's a fatal condition
	}
	// Mr Foo was found
	doSomethingWithMrFoo({ nameId: result[0].id });
	})
	.then(() => {
	// Query completed, Mr Foo may or may not have been found.
	console.log('Query done.');
	doNextThing();
	//process.exit(0); // Warning: Do not call exit here or the knex promises don't get fulfilled.
	});
	function doNextThing {
	knex('track').insert({
	name: track.name,
	artist: track.artist,
	})
	.then(function(resp) {
	console.log('loaded track', resp);
	}).catch(function(err) {
	console.log('ERROR:', err);
	process.exit(1); // It is alright to exit here because there is a fatal error (the database failed to run the query)
	});
	}
	console.log('Everything done.');
	//process.exit(0); // Do not exit here either, or knex operations will not finish.

view raw knex.js hosted with ❤ by GitHub

Basic Node package recommendations

Recommendations for your javascript application:

• Web framework: express
• DB abstraction: knex, sequelize, db-migrate
• DB Migration: knex, db-migrate
• HTTP client (for external API requests): axios (older apps use superagent, axios has better features)
• Templating: handlebars
• Testing: mocha, sinon (mocking), chai (assertions), karma, jasmine, qunit, jest, cypress, storybook, ava
• Integration testing: puppeteer, playwright, webdriverIO
• Code Coverage: Istanbul
• Process management (in production): pm2
• Linting and code standards: eslint prettier
• Inline documentation: JSDoc
• Typescript: https://www.typescriptlang.org/docs/handbook/interfaces.html