HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)

Fullscreen background videos that autoplay right when the webpage loads (above the fold) has become quite a popular trend these days. Personally I think a fullscreen good quality video that autoplays does increases engagement for the users/customers. It should be kept in mind that the story of the video must be relevant to the brand. These days we’re surrounded by loads of videos on social networks like FB and Twitter as well which autoplay (but is muted of course). Analytical studies have also reported higher engagement due to this.

Continue reading “HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)”

Guide (Introduction, Implementation and How it Works) to A/B Testing and Split URL Testing (VWO, Optimizely, Google Analytics)

Recently I’ve been investing a lot of time into A/B (split) testing/experiments and analysing their results. Slowly I’ve started to love this way of rolling out changes on the web (can be surely used for mobile apps as well), as it is a complete data-driven approach and can produce quite surprising (or shocking, how you see it) results at times. With this approach you’ll always know what works (instead of speculating) with firm evidence and eventually drive more sales or signups or whatever that matters to you. That said, I would recommend not A/B testing just anything and everything but always find the right situations or cases that would make sense to experiment. If you’ve enough bandwidth (extra time) then use this approach to keep on analysing your visitor behaviour and draw learnings that help you make more prospects achieve the objectives that you’ve set for them, eventually turning them into customers.

Continue reading “Guide (Introduction, Implementation and How it Works) to A/B Testing and Split URL Testing (VWO, Optimizely, Google Analytics)”

Getting Started with React – Setting up the Development Environment

React (also React.js or ReactJS) is a JavaScript library for building user interfaces developed by Facebook & Instagram. It is not a full blown framework like Angular or Ember or even Backbone.js. It is a very simple View library which can replace the V in any other client-side MVC framework, i.e., you can use Backbone and React together for instance. In fact a lot of people are already doing that. Although when combined with a design pattern like Flux, you can totally give up on an MVC framework for your client-side architecture and happily develop apps with just React in conjunction with the Flux application architecture. React encompasses some interesting concepts too like Virtual DOM, uni-directional reactive data flow, etc. but don’t worry we’ll discuss all those much later when you’re already comfortable with the library and hacking your way through it.

Continue reading “Getting Started with React – Setting up the Development Environment”

Compiling Next Generation JavaScript (ES6, ES7, React) in Browser with Babel 6 and Above

Babel is an amazing tool for writing ES6 (ES2015), ES7 (ES2016), JSX, etc. code that finally gets compiled (or transpiled) into JavaScript (mostly ES5 as of now) that can be executed by most browsers. So basically you can use JS features like classes, promises, etc. without worrying about the browser support as Babel will eventually convert all your code into browser-understandable program.

Continue reading “Compiling Next Generation JavaScript (ES6, ES7, React) in Browser with Babel 6 and Above”

CSS Apply Filter Effects (blur, grayscale, hue) to the Area Behind an Element with backdrop-filter Property

We’re well acquainted with the CSS3 filter property that lets us apply various effects like blur, grayscale, sepia, saturation, etc. to a particular element. Now using this property we actually end up adjusting the rendering of the entire element including its borders, background and content (text or/and image). Did you ever want to apply the same effects to just the area behind the element, i.e., the background of the parent element or the one right behind/below the target element ? This is now very easily possible with the backdrop-filter property. I’m sure you’d have noticed this effect being widely used in iOS 7 and OS X Yosemite.

Continue reading “CSS Apply Filter Effects (blur, grayscale, hue) to the Area Behind an Element with backdrop-filter Property”

Custom Validation Messages for HTML5 Form Constraints

Well, we already know that with HTML5 from constraints, client side form validation has become super easy. All we have to do is use attributes like required, maxlength, pattern, step, etc. and/or the correct form type like email, phone, number, etc. and then once the user submits the form, the browser prompts invalid messages if the form is not entirely valid. Although it might not really be a requirement but from a coolness perspective I thought I’ll share the fact that the error messages can be customized.

Continue reading “Custom Validation Messages for HTML5 Form Constraints”

Trigger HTML5 Form Validation on JavaScript Submission (form.submit())

Most of the time when dealing with web forms, we either have a basic version where the user clicks on the submit button and the form submits to the relevant action with the relevant GET/POST method specified (or defaults are used) or on submission of the form we use AJAX/XHR to send the form date to a specific URL with the required request type (GET, POST, PUT, UPDATE, DELETE, etc.). For a long time we had been implementing client side form validations in our JavaScript code (we still do) but then with the advent of the HTML5 constraint validation we have been doing a lot of the form validations right there in the form controls definitions by specifying the right type like email, phone, etc. with/without attributes like pattern, maxlength, required, steps, etc.

Continue reading “Trigger HTML5 Form Validation on JavaScript Submission (form.submit())”