Tech notes for javascript


Use javascript's default parameters to create an init function

ES6 has default parameters.

var country = ( name = "Zimbabwe" ) => {
  return `You are in ${name}`
}

console.log(country("Ghana"))
console.log(country())

That will return You are in Ghana and You are in Zimbabwe respectively.


You can use this to ensure one function is called before another.

Use a final function parameter that is never passed anything. We give this final parameter a default value. And that default value is a function call.

var init_function = _ => {
  console.log("Ooh, a function use...")
}
var country = ( name, _run_me = init_function() ) =>
  `You are in ${name}`

console.log(country("Botswana"))

This returns

Oooh, a function use...
You are in Botswana

Why, oh why do we want to do that? We could just use the first line of our function. But, for syntactic reasons, we may not want to use curly brackets and a return statement--we may want a one-liner--and this gives us the ability to have that while specifying a function to run beforehand.

javascript

Postgresql, nodejs and parameterized queries

Once we've install pg (npm i pg) we can import the Pool object and pass it a connectionString.

const {Pool} = require('pg')
const connectionString = `postgresql://postgres:YOUR_PASSWORD@localhost:4000/YOUR_DB"
const pool = new Pool({ connectionString, ssl: false })

Then we pass pool an sql string and a list of parameters, thereby avoid sql injection attacks. Finally we wait for a promise to resolve with a list of our sql rows as javascript objects.

pool.query("select * from cats where id = $1;", [100])
.then(result => {
  console.log(result.rows)
})
.catch(err => {
  console.log(err)
})

pg allows us to escape SQL literal. If you want to escape SQL identifiers then pg-format (npm i pg-format) with its %I and %L format strings will help:

const pgFormat = require('pg-format')
var sql = pgFormat("select * from %I where id = %L", "cat", 100)
javascript postgresql sql nodejs

Javascript: Do two elements overlap?

Pass the following two HTML elements.

It returns a boolean if the rectangles overlap or not.

getBoundingClientRect is great. It gives you the fixed position of elements.

var rect_in_rect = (element1, element2) => {
    var rect1 = element1.getBoundingClientRect(); 
    var rect2 = element2.getBoundingClientRect()
    return rect1.right >= rect2.left && rect1.left <= rect2.right &&
        rect1.bottom >= rect2.top && rect1.top <= rect2.bottom
}
javascript

Javascript: Bounding box collision detection

If you want to detect when two boxes are touching, here's the classic algorithm:

function hasHit(box1, box2) {
  var box1Right = box1.x + box1.width
  var box1Bottom = box1.y + box1.height  
  var box2Right = box2.x + box2.width
  var box2Bottom = box2.y + box2.height  
  
  if(box1Right > box2.x && box2Right > box1.x && 
    box1Bottom > box2.y && box2Bottom > box1.y) return true;
  else return false
}

// the follow are overlapping
var box1 = { 
  x: 0, 
  y: 0, 
  width: 10, 
  height: 10 
}
var box2 = { 
  x: 5, 
  y: 5, 
  width: 10, 
  height: 10 
}
console.log("do they overlap?", hasHit(box1, box2))

// the follow are overlapping
var box3 = { 
  x: 0, 
  y: 0, 
  width: 10, 
  height: 10 
}
var box4 = { 
  x: 15, 
  y: 15, 
  width: 10, 
  height: 10 
}
console.log("do they overlap?", hasHit(box3, box4))
javascript

Javascript/HTML5: Showing a notification popup message with the Notification API

You can show a small notification popup with the Notification API.

You first do Notification.requestPermission() to ask for permission.

Once you've got it, you can make a new Notification object. These have various options but we're just showing some text.

You can see the source below and a live example here: https://repl.it/@newfivefour/notification-api?language=html&folderId=

<body>
  
  <button onclick="notify()">Notify me</button>

  <script>

    function notify() {

      if (!("Notification" in window)) {
        alert("This browser does not support system notifications");
      } else {
        Notification.requestPermission()
        .then(function(result) {
          if (result === "granted") {
            new Notification("Hi there!");
          } else {
            console.log("permission was not granted.")
          }
        });
      }
        
    }

  </script>

</body>
javascript html html-notification

Page 2 of 9
prev next
Click me