Dynamically delete and insert rows and cells to a table using JavaScript
Tables are one of the most useful and complex structures in HTML. In this tutorial you’ll learn how to insert rows to a table or delete a row from a table using JavaScript.
Resizable table using pure JavaScript
In this tutorial we’ll learn how to make html table columns resizable using pure JavaScript.
Node Tutorials
Node Generating package.json file
Every Node application contains a file with the name package.json. This tutorial explains what this file is and why every app / project must have this file. You'll also learn how to generate package.json file, install necessary modules (dependencies and devDependencies) and list them to package.json.
Node fs - synchronous read, write, or append files
In this tutorial, we’ll learn how to read, write, and append to files in a synchronous manner. We’re going to write a simple program that grab text from a file, and saves it in a new file. We’ll also learn how to read a dir in a synchronous manner recursively.
Node fs - asynchronous read, write, append files
In this tutorial, we’ll learn how to read, write, and append to files in an asynchronous manner. We’re going to write a simple program that grab text from a file, and saves it in a new file. We’ll also learn how to read a dir in an asynchronous manner recursively.
Node fs - open, read and write files bytes by bytes
Another way to access a file is fs.open() function. Once a file is accessed, you can read data from it using fs.read() function or write data to it using fs.write() function.
Node fs - Using Stat object to get file or path information
Lean how to query the status of files using Node.js, returning information such as the file type, file owner, access permission file size, number of links, inode number and file birth, access, change and modify times.
Node crypto - create hash from string or file
Hash is a way to encrypt data into a fixed-length digest. This digest serves as a signature representing the original data that hashed. The various types of hashing algorithms are available in Node.js through the crypto module.
Node - Synchronous vs. Asynchronous vs. Callbacks
A synchronous function blocks until it completes its operations. An asynchronous function returns immediately and the result is passed to a callback function.
Node events - event loop (queue) and EventEmitter
So, if you have functionality that needs to wait on something, such as opening a file, retrieving data from the database, a web response, or other activity of this nature, then blocking the application until the operation is finished would be a major point of failure in a server-based application. The solution to prevent blocking is the event loop.
Node - understanding child processes
A child process is a process created by a parent process. Node allows us to run a system command within a child process and listen in on its input/output. This includes being able to pass arguments to the command, and even pipe the results of one command to another.
Node - Create a Node class to store duplicate files
A data structure is a particular way of storing and organizing data in a computer so that it can be used efficiently. In JavaScript, data structure is a value that refers to zero or more other values that represent data. The Arrays and Objects are built-in data structures and can be use to build other complex data structures.
Make Node's file or dir walker
FileWalker - Make file or dir walker class by extending EventEmitter
In this tutorial, we'll make an event driven file walker which will scan a directory tree asynchronously.
FileWalker - How to make Node modules
You can split off reusable JavaScript into its own libraries called modules. A Node module is simply a JavaScript file. The export or module.exports statement is used when creating a Node module. You can convert functions, objects, or primitive values into module.
FileWalker - Add pause, resume and filter feature
Now its time to extend our FileWalker module by adding the pause and resume functionality to make our Duplicate File Finder pausable and resumable. We’ll also add two methods filterDir and filterFile to filter out directories and files for inclusion or exclusion.
FileWalker - Add "generate Hash" method
In this tutorial we’ll add another method, generateHash, to FileWalker class. This method will open a file, read 4Kb chunk, generate hash and emit an event containing file hash. We’ll use this hash to compare files with each other to find their duplicate/copies.
FileWalker - Data structure to store files in Array object for comparison
The FileWalker class is now able to generate file Hash, now its time to use these hashes to compare files with each other. In this tutorial we'll create two Objects to store files and a method to find duplicate files.
Electron Tutorials
Electron - Getting started
Learn how to make desktop applications out of the very same technologies used in web development.
Electron - Make a basic cross platform desktop application
Before creating the main.js and index.html files, we need to discuss the two process types available in Electron. They are fundamentally different and important to understand. Each of these two processes has a specific responsibility within the application.
Electron - index.html to make GUI simply with HTML
We already learned that the renderer processes would display the UI of your application. It will load content and execute it within its own thread. Now we'll create our renderer index.html file inside the same directory where the package.json resides.
Electron - Using remote module in renderer process
The remote module provides access to modules normally available only to the main process. By importing this module in our renderer process file, we can in turn access the main process’s modules within the Render process.
Electron - IPC (inter-process communication) between main and renderer
To communicate between main and renderer process we need a system and that system is in the IPC modules (ipcMain and ipcRenderer). These module allows us to send and receive messages between the processes.
Electron dialog - Display native dialog box to select files or directories
In this tutorial we'll discuss the showOpenDialog method to open files and directories. This method displays a dialog box that enable us to select files or directories and returns their absolute paths.
Electron dialog - Display save file dialog box
Saving files with Electron is similar to opening files. The showSaveDialog, displays save dialog box, asks where the user wants to save the file and what name they want to give it.
Electron dialog - Display customizable confirmation message box
Electron’s showMessageBox() is a customizable dialog box. You can use it for displaying an info, error, a warning or a question by providing a list of button and a checkbox to receive the user input.
Making Duplicate File Finder Application in Electron
Electron - Getting Started with Duplicate File Finder Application
We’ll create index.html file for our "Duplicate File Finder" app and style it witch css. It is a very simple interface, just a logo on top with Application name, version number and two button Add folder and Start.
JavaScript - Create app options module with Object.freeze() method
JavaScript doesn't support ENUM data type. We can use the freeze() method to create ENUM like object. In this tutorial we’ll make a module to define some app settings for our Duplicate File Finder app to help child and parent processes when they communicate with each other.
Electron - User Interface for Duplicate File Finder app
In this tutorial we'll create renderer.js file (require by index.html). When a user clicks on Add folder button, it shows a directory picker to select a directory path for scanning and stores the received path as an object by adding some extra information, such as type included or excluded, to an array. The renderer.js file also interact with its child (walkerHelper.js) using Node IPC.
Electron - Spawn a child process to run FileWalker
In this tutorial we’ll spawn a new child process walkerHelper.js using fork method to establish communication between UI (renderer.js) and FileWalker (walker.js) to start, stop, pause and resume the walker and to send results back to UI.
Electron - WebView to display results
Electron’s webview tag is based on Chromium’s webview, which is simply a custom element using shadow DOM to wrap an iframe element inside it. Unlike an iframe, the webview runs in a separate process than your app.
Electron - Re-create the Duplicate File Finder GUI
In this tutorial we’ll re-create renderer.js file. The renderer.js file controls the whole application, it receives the inputs from the users, send commands to walkerHelper.js to start, pause or reset the walker.js, display the results on webview (grid.html) and update the app’s status bar (index.html).