Traversing a DOM tree

ali — Sun, 13 Mar 2022 17:51:43 +0000

There was a need at work to apply inline styles to each DOM element in a page.This was a rare occasion to actually traverse a tree, an exercise many of us have done, I am sure, to practice for interviews or as part of homework.

My solution was as follows

const app = document.querySelector("#app");

const inlineStyles = (node) => {
  const clone = node.cloneNode();
  const computedStyles = window.getComputedStyle(node);
  Object.keys(computedStyles).forEach((key) => {
    clone.style.setProperty(key, computedStyles.getPropertyValue(key));
  });

  return clone;
}

function traverseDOM(node) {
  if (!node) {
    return;
  }

  const updatedNode = inlineStyles(node);
  for (let child of updatedNode.children) {
    const updatedChild = traverseDOM(child);
    updatedNode.appendChild(updatedChild);
  }

  return updatedNode;
}

The operation performed on each node is inlineStyle. It gets the computed styles of a node and applies them as inline styles.

This is a DOM tree so it is not built in a specific order and each node has many children, so it is not a binary seach tree.Were it a binary search tree, then our traversal order would be pre-order; We perform the operation on the root node first and then traverse on the children from increasing index position, i.e. from left most to right most.

Upload file to Express server

ali — Sat, 31 Jul 2021 02:41:48 +0000

I was working on creating a proof of concept RabbitMQ data pipeline in Node where a web app would upload a large csv file to an Express server and the server would stream its content into the pipeline in JSON.

There are two possibilities of uploading a file
1) Send entire file
2) Stream file

Send Entire File

Send entire csv file from browser

fetch('http://localhost:3000/upload', { // Your POST endpoint
  method: 'POST',
  headers: {
    'Content-Type': 'text/csv' // Not necessary if extension is csv
  },
  body: file // This is your file object
})
.then(success => console.log(success)) // Handle the success response object
.catch(error => console.log(error)) // Handle the error response object

The two important points int the server are

How to handle request
How to stream csv file content as json into pipeline

To get a stream of JSON objects from the csv file, create a stream and pipe that stream into fast-csv.

The resulting code

const app = require('express')()
const textBodyParser = require('body-parser').text
const csv = require('fast-csv')
const { Readable } = require('stream')

// Handle very large file
app.use(text({ type: 'text/csv', limit: '500mb' }))

app.post('/upload', (req, res) => {
  const content = Readable.from(req.body)
  content
    .pipe(csv.parse({ headers: true }))
    .on('data', (data) => {
      console.log(data) // Handle JSON object
    })
  res.sendStatus(200)
})

A lot of the tutorials suggest that one use express-fileupload.It doesn't work if the csv file is not streamed.

Stream File

Stream csv file from browser

// Important that file is sent as FormData
const data = new FormData()
data.append('file', file)
fetch('http://localhost:3000/upload', {
  method: 'POST',
  body: data,
})
.then((success) => console.log(success)) // Handle the success response object
.catch((error) => console.log(error)) // Handle the error response object => console.log(error)) // Handle the error response object

For the server to handle the stream, the HTTP request must have the header Content-Type: multipart/form-data; boundary=aBoundaryString, more info found here.
By sending the file as form data we can avoid having to specify this header.The browser will take care of it.

Use busboy to get the file stream and pipe that to fast-csv to get a stream of JSON objects.

The resulting code

app.post('/upload', (req, res) => {
  const busboy = new Busboy({ headers: req.headers })
  // Busboy gives us a lot information regarding the file
  busboy.on('file', (__, file) => {
    file.pipe(csv.parse({ headers: true })).on('data', (row) => {
      // Handle data here. Row is a csv row in JSON
      console.log('Row in JSON', row) 
    })
    file.on('end', function () {
      // Handle end case here
      console.log('file ended')
    })
  })
  busboy.on('finish', function () {
    res.writeHead(303, { Connection: 'close', Location: '/' })
    res.end()
  })
  req.pipe(busboy)
})

DEV Community: ali

Traversing a DOM tree

Upload file to Express server

Send Entire File

Stream File