React Material UI – Open Left Menu (Navigation Drawer) on AppBar’s Hamburger Icon Click

This is more of a quick tip on a Material UI integration than a detailed article. We’ll see how to open the LeftNav component on clicking the AppBar’s left icon (hamburger menu icon). Unfortunately the documentation as of now doesn’t show the ReactJS code for this. Obviously it’s not too hard to figure it out either if you go through the website’s source itself on Github.

Continue reading “React Material UI – Open Left Menu (Navigation Drawer) on AppBar’s Hamburger Icon Click”

JavaScript Copy to ClipBoard (without Flash) using Cut and Copy Commands with document.execCommand()

Using the cut and copy commands via document.execCommand(), a text selection can be cut or copied to the user’s clipboard in Chrome 43+, Opera 29+ and IE 10+. This means we can now cater to a part of our web userbase with the copy to clipboard feature without using Flash. Let’s write some code to see these commands in action.

Continue reading “JavaScript Copy to ClipBoard (without Flash) using Cut and Copy Commands with document.execCommand()”

JavaScript document.execCommand() Web Method

The JS document.execCommand() method is quite interesting. It can be used to execute certain commands to play with an editable region that is achieved either via the contenteditable attribute or when the HTML document (of the main window or some iframe window) has been switched to designMode using this code:

document.designMode = 'on'; // or 'off'
// or for an iframe
iframeNode.contentDocument.designMode = 'on'; // or 'off')

Infact try the first snippet right in dev tools and see what happens 🙂

Continue reading “JavaScript document.execCommand() Web Method”

QuickTip: Store Undefined and Null in Class/Table Rows on Parse.com

Update: Parse is shutting down. So you should start migrating.

Parse store undefined and null

I’ve been working on an Android app backed by Parse.com to make my development process faster and easier. So while coding the app I made a decision to have 2 classes (tables) called Conversations and User (exists by default). Conversations has a field called userId that should essentially store the objectId from User class. But some conversations are created by guest so for those records I decided to store NULL or “nothing” (undefined) under the userId column rather than Pointers which is what the column type is.

Continue reading “QuickTip: Store Undefined and Null in Class/Table Rows on Parse.com”

Mini HTML/CSS/JS Code Playground (with Editors and Sandbox) in Less than 200 Bytes

Sometime back this thread on HackerNews gained quite some traction. Basically, it’s a small project called MiniCodeEditor which is a tiny and minimal version of an online code playground like CSSDeck.

Continue reading “Mini HTML/CSS/JS Code Playground (with Editors and Sandbox) in Less than 200 Bytes”

Simple and Lightweight JavaScript Table/Grid/List Sorter

This is more of a snippet extracted from one of my recent projects where I had to sort a list/grid of div’s. Yeah, I didn’t use tables for tabular data this time, but plain divs, although this snippet will work just fine with html table rows too.

Continue reading “Simple and Lightweight JavaScript Table/Grid/List Sorter”

Binary and Red Black Search Tree Implementation in JavaScript

Binary Tree

I’m not going to dive deep into what Binary Search Tree is because this tutorial and Wikipedia does an excellent job at that. Instead I’ll mostly dicuss about a neat JS implementation that I came across recently, usable on the server side with Node.js and client-side as well.

Continue reading “Binary and Red Black Search Tree Implementation in JavaScript”