React Integrating Routing to Material UI’s Left Nav (or Other Components)

Working with the React Material UI and trying to make routing work (or even understand how it works) with clicks on the LeftNav item items ? It’s actually quite simple once you get a hang of it. I’ll show you the code and explain the logic behind how on clicking navigation links in LeftNav you navigate to different pages/URLs in your app/website (in a snap). We’ll be using React Router, Material UI and obviously, ReactJS itself. I’ve also uploaded the code to Github.

Continue reading “React Integrating Routing to Material UI’s Left Nav (or Other Components)”

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”

Quick Walkthrough of RSpec Mocks (Introduction) in Code

Before we go through a lot of code samples, make sure you understand the different testing terms like mocks, stubs and test doubles. That’ll help you understand this article much better as I use a lot of those terminologies while going through different code samples.

A test double is a generic term (for stubs and mocks) that represents a real object (but sort of fake) to which messages can be passed (method calls) and fake return values can be specified. It’s used in unit testing to test a particular system or object in isolation. In this article we’ll go through test doubles (mocks) in RSpec. Let’s see how to create a test double representing the object being faked.

Continue reading “Quick Walkthrough of RSpec Mocks (Introduction) in Code”

Fixing Laravel Basic Auth Failure

Today, as I deployed my Laravel application, I received an email from my client mentioning that the basic authentication wasn’t working on the production server. I tested promptly and indeed it wasn’t. This was really strange for me as locally all was well. I got stuck at the problem for quite sometime. Searching on Google made me realize that a lot of people have been facing the same conundrum. But finally as usual, I found out the solution not too late.

Continue reading “Fixing Laravel Basic Auth Failure”