UI / UX
July 6, 2018
The very useful PDF.JS library makes it possible to show a preview of the PDF before uploading to server.
July 4, 2018
Showing a preview of the image before being uploaded to server provides a good user experience. You can show a preview image using the URL.createObjectURL method on the selected file.
June 28, 2018
The Useful <time> HTML Element
The time tag defines date and time in a HTML document. This tag is helpful in making the markup more structured, so that it becomes easier for machines to interpret the page.
June 26, 2018
June 19, 2018
June 18, 2018
This tutorial explains how you can change url parameters - edit, add or delete, using the URL and URLSearchParams objects.
June 13, 2018
The feature of copying something to the OS clipboard is quite useful for the end user. In a web page it can be implemented with the Selection API.
June 11, 2018
The URL and URLSearchParams objects makes it very easy to get parameters in a url.
June 7, 2018
June 5, 2018
Typing effect is a good way to grab user attention. To implement typing effect, you can start by showing the first character initially; after a few milliseconds you can show the first 2 characters; and so on till the whole sentence has been shown.
June 3, 2018
February 12, 2018
Width and height of an image can be found using the "naturalWidth" and "naturalHeight" properties of the image DOM element.
February 6, 2018
February 4, 2018
November 6, 2017
Changing Size of Iframe Automatically to Fit Content
You can inform the parent about the changed size of the iframe page by passing messages from the iframe to the parent. This is helpful in preventing scrollbars from coming up.
November 5, 2017
Tracking Downloads with Google Analytics using Custom Events
November 3, 2017
Setting HTTP Headers in a Beacon Request
The Beacon API extracts the type of the transmitted data, and sets this as the Content-Type for the HTTP request.
November 2, 2017
Sending AJAX Data when User Moves Away / Exits from Page
It is sometimes required that your application sends an AJAX to the server before the user moves away from the page (goes to another page, reloads the page, closes the browser etc). The tutorial explains how to do this.
October 9, 2017
How to Handle CSS in Browser Full-Screen Mode
When an element goes to full-screen , you can change the user interface by changing CSS properties. Tutorial handles all the cases that can possibly come.
September 27, 2017
September 23, 2017
September 21, 2017
April 28, 2017
UI Tip : Using Animated Favicon to Attract User Attention for an Inactive Browser Tab
While the user is on a different browser tab, you can get his attention by animating the favicon of the website.
April 26, 2017
It is possible to get the thumbnail of a video at a specified duration using canvas and video html elements.
April 19, 2017
April 16, 2017
April 12, 2017
April 9, 2017
Visual Illustration of Offset Height, Client Height & Scroll Height
Visually understand the difference between offsetHeight, clientHeight & scrollHeight with a live DOM element.
April 9, 2017
Using the scrollHeight property you can make your textarea auto grow vertically based on its content.
April 9, 2017
Understanding clientHeight, offsetHeight & scrollHeight
offsetHeight = VISIBLE content & padding + border + scrollbar ● clientHeight = VISIBLE content & padding ● scrollHeight = ENTIRE content & padding (visible or hidden)
February 19, 2017
January 30, 2017
Revealing Hidden Elements By CSS Animations
Examples of revealing (show & hide) elements through CSS animations.
January 29, 2017
By using an input element of type URL and HTML5 Constraint Validation API, you can eliminate the need of a regular expression for form validation.
January 14, 2017
How to Move an Element in a Circular Path with CSS Offset-Path (Motion Path)
Moving / animating an element along a circular path can be achieved by CSS Offset Path (Motion Path).
January 10, 2017
How to Detect User Timezone in PHP
January 4, 2017
January 2, 2017
A tutorial on how to handle multi-touch with the new Pointer Events.
December 28, 2016
Advantages of Using Pointer Events Over Mouse & Touch Events
The new Pointer Events can handle both mouse, touch and pen events without any special case handling. Start using them now !
December 19, 2016
December 15, 2016
How to Show a Loading Progress Bar in PDF.JS
In this tutorial we will discuss how we can implement a progress bar when PDF.JS loads a PDF.
December 14, 2016
PDF.JS being a complete PDF viewer also supports viewing of password protected PDFs. This means that your application can prompt the user for password of the PDF when trying to be viewed.
December 6, 2016
This tutorial explains how to display a PDF file in your web application using the PDF.JS library.
December 5, 2016
HTML5 Canvas Tutorial - How to Draw a Graphical Co-ordinate System with Grids and Axes
In this tutorial we will draw a graph that has grid lines and X & Y axis. The graph also has tick marks at the grid lines with corresponding values.
December 4, 2016
HTML5 Canvas - Solving the Problem of Inverted Text When Y-Axis is Inverted
There are situations where we have to invert the Y-axis of the canvas element. However then text or images added there become inverted too. The tutorial tells you how to solve this problem.
December 2, 2016
How to Draw 1px Crisp Lines in HTML5 Canvas
To drawing a 1px smooth line on the canvas, you need to adjust 0.5px so that pixel boundaries of the canvas matches with the actual boundaries of the screen.
November 30, 2016
Performance of ES6 Template Literals as compared to String Concatenation (+) Operator
Template literals is the ES6 way of writing multi-line strings. But surprisingly the performance of template literals is almost the same as the string concatenation (+) operator.
November 27, 2016
Previewing Images with jQuery : Data URIs vs Object URLs
At the time of uploading images, web applications usually show a preview of the image. This preview can be shown in 2 ways - by using the Data URI of the image or by using its Object URL.
November 25, 2016
2 Ways of AJAX File Upload - FormData and FileReader
A file can be uploaded with jQuery in 2 ways. The first method is implemented using FormData where a multipart/form-data POST request is sent. The second method is uploading using FileReader where a normal POST request is sent.
November 23, 2016
Using Server-Sent Events for Logged-in Users
A tutorial on how to implement Server-Sent Events for logged-in users. Server will send updated content specific to that logged-in user.
November 21, 2016
© UsefulAngle.com 2018. All code MIT license.
About / Contact