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.
Category: Web Development
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.
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())”
JavaScript Fire onSubmit Event Handler Programmatically by Calling form.submit()
Unless you code your web pages in vanilla javascript, you’ll probably not notice this but when you do it’ll quite baffle you that the event listener you attach to a form’s submit event using addEventListener or onSubmit will not be invoked when you submit the form directly like this – form.submit().
Continue reading “JavaScript Fire onSubmit Event Handler Programmatically by Calling form.submit()”
Prevent Touch Panning and Zooming on Mobile Web Pages with CSS touch-action Property
The new touch-action property from the CSS Pointer Events spec can help us (as developers) specify what sort of manipulation (panning, zooming, etc.) should be allowed by a user in a particular region (one or more DOM elements) in a specific web page on a mobile device. It helps specify the sort of interactions or gestures allowed by the user in one or both axis.
Quick Tip: Rails Escaping Database Values and Storing/Inserting with Multi-Insert SQL Query
In this quick tip we’ll see how to escape values in Rails before passing them on to an SQL query (preventing injection attacks) and then also look into how to do multi-inserts (at the DB level). Let’s first see how to escape values to prevent SQL injections in Rails: