Demo to see how compiler optimization can introduce security vulnerabilities

Took a module under Dr Roland Yap, CS4239 Software Security, at my alma mater NUS (National University of Singapore) School of Computing, back in 2017 Semester 1. It was part of its Lifelong Education programme, under SCALE (School of Continuing and Lifelong Education), where modules were opened up to the general public. One interesting lesson …

JavaScript code that can be used client-side in the browser and server-side in Node.js

Sample code as follows, read comments for more details 🙂 /** * Example of JavaScript code that can be used client-side in the browser and server-side in Node.js * * Usage in browser: * <script src=”shared.js”></script> * <script> * console.log(shared.STATUS_SUCCESS, shared.test()); // note that shared.getTimestamp() won’t work * </script> * * Usage in Node.js: * …

Different alignment and order of columns on mobile/desktop using Bootstrap 5

Scenario: Build a pagination partial consisting of 3 parts – the item range (e.g. “Showing 1 – 10 of 30 results”), a dropdown to select the page and a dropdown to select the number of items per page. The 3 parts will be displayed in a different order and have different text alignment on mobile …

Split text into left and right columns using CSS

Result (drawn using ASCIIFlow Legacy): +————————————————–+ | | | 1) This text is left. This text is right. | | 2) This text is left. This text is right. | | | +————————————————–+ Sample HTML and CSS: <style> .split { display: block; } .split span { display: block; float: right; } div { left: 200px; …

Render array of objects together with index in Mustache.js and as Bootstrap rows or dropdown options with selected value

Came across a GitHub issue Collection processing like @index for Mustache.js. It referenced the each() function in another library, GRMustache. Came up with the following and posted my solution back in the Mustache.js GitHub issue 🙂 Sample output: <h4>Test 1: Loop over array with count & access to existing template vars/fns</h4> <div data-date=”2021-12-03″>item 1/4: ant …

Using Konva.js to annotate image with bounding boxes

References: Konva Tutorials Konva API Docs Drawing Labels on Image with canvas HTML5 Canvas Export to High Quality Image Tutorial Resolving “Tainted canvases may not be exported” with Konva First up, a working demo below. Click on “Set image” button first. Click “Add box” button to create a new bounding box. Each time the box …

Uploading a folder via HTML form or cURL

References: Upload directory doesn’t send folder name with file Upload files with CURL Multipart formposts How to upload folder using HTML and PHP VGG Image Annotator: Issue 270 – Using Webkitdirectory to import multiple directories and maintain directory hierarchy Contents of folder to be uploaded (drawn using tree –charset unicode –dirsfirst -a -n in bash): …

Bash command to check directory recursively and count average line count and average chars per line in files

Bash command: find . -type f | xargs wc -lc | sort -n | awk ‘{prev=curr; curr=$1″ “$3} NR==1{print “Min lines:”, $1, $3} END{print “Max lines:”, prev; print “Total of”, $1, “lines in”, (NR – 1), “files”; print “Avg line count:”, ($1 / (NR – 1)); print “Avg chars per line:”, ($2 / $1)}’; Breakdown …