Tag: html5

20+ Best Canvas Tutorials and Examples That Will Make You A Canvas Master

Every now and then a new technology releases giving better features and advantages over the previous ones but learning them all without spending a lot of time can be a pain. HTML5 <canvas> element is one of those technologies which is used to draw graphics, on the fly, on a web page via scripting (normally JavaScript). Learning <canvas> is not hard at all but due to a lack of good tutorials around the web makes it difficult to understand, specifically for newcomers.

Continue reading “20+ Best Canvas Tutorials and Examples That Will Make You A Canvas Master”

Using HTML5 postMessage For a Secured Cross Domain Communication and Rendering

In the previous post, we covered how easy it is to build an environment where anyone can write in HTML, CSS, JS code that gets rendered and displayed in a sandbox (iframe) in realtime. It’s all good as long as the platform is restricted to yourself, but when it becomes open, i.e., when others can create testcases or use it for some other purpose as on CSSDeck, you need to start thinking about security.

Continue reading “Using HTML5 postMessage For a Secured Cross Domain Communication and Rendering”

How I Created My Version of Doodle Jump in HTML5

I’ll try to take you through my process of re-creating the famous Doodle Jump (which was originally released for mobile platforms) in HTML5 from scratch. The entire write up might help you with creating your own games from scratch!

Continue reading “How I Created My Version of Doodle Jump in HTML5”

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)”

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())”