Tips & Tutorials

Welcome to a tutorial on how to add a watermark to images in Javascript. Want to lessen the server load? Add a watermark to an image before uploading? Yes, it is possible using a canvas. To add a watermark to images in Javascript: Create a canvas element and image object. var ctx = document.createElement(“canvas”).getContext(“2d”); var

Welcome to a quick tutorial on how to create HTML lists from JSON data in Javascript. Want to dynamically generate a list from JSON data? To create an HTML list from JSON data: Parse the JSON data into an array first (assuming it is a flat array) – var data = JSON.parse(DATA); Loop through the

Welcome to a quick tutorial on how to add and remove list items in Javascript. Need to dynamically update an HTML list in Javascript? To add a list item in Javascript: <ul id=”myList”></ul> var li = document.createElement(“li”); li.innerHTML = “Item”; document.getElementById(“myList”).appendChild(li); To remove a list item in Javascript: var myList = document.getElementById(“myList”); var items =

Welcome to a tutorial on how to create an HTML list from a Javascript array or object. Need to display an array of data nicely? To create an HTML list from an array in Javascript: Create the HTML list var ol = document.createElement(“ol”); Loop through the array and append list items for (let i of

Welcome to a tutorial on how to create a very simple Progressive Web Application. Just heard of this “PWA” thing and wondering how to get started? Well, let us walk through a barebones PWA example in this guide – Feel free to use it as a template in your own project. Read on!