Translate

Sunday, January 12, 2020

Top 3 for the day

Top 3 for the day


How to Create an Animated Favicon Loader with JavaScript

Posted: 11 Jan 2020 07:25 AM PST

Favicons are a crucial part of online branding, they give a visual cue to users, and help them distinguish your site from others. Although most favicons are static, it is possible to create animated favicons as well.

A constantly moving favicon is certainly annoying for most users, and also harms accessibility, however when it’s only animated for a short time in response to a user action or a background event, such as a page load, it can provide extra visual information—therefore improving user experience.

Let’s Talk About the Importance of Favicons

Let’s Talk About the Importance of Favicons

Online business veterans know it's the little things that set a company apart from the competition. Newbies will... Read more

In this post, I’ll show you how to create an animated circular loader in a HTML canvas, and how you can use it as a favicon. An animated favicon loader is a great tool to visualize the progress of any action performed on a page, such as file uploading or image processing. You can have a look at the demo belonging to this tutorial on Github as well.

Canvas Loader Gif Demo

1. Create the <canvas> element

First, we need to create a canvas animation that draws a full circle, 100 percent in total (this will be important when we need to increment the arc).

  <button id=lbtn>Load</button>  <canvas id=cvl width=16 height=16></canvas>  

I’m using the standard favicon size, 16*16 pixels, for the canvas. You can use a size bigger than that if you want, but note that the canvas image will be scaled down to the 162 pixel area when it’s applied as a favicon.

2. Check if <canvas> is supported

Inside the onload() event handler, we get a reference for the canvas element [cv] using the querySelector() method, and refer its 2D drawing context object [ctx] with the help of the getContext() method.

  onload = function() {      cv = document.querySelector('#cvl'),      ctx = cv.getContext('2d');        if (!!ctx) {          /* ... */      }  };  

We also need to check if the canvas is supported by the UA by making sure that the drawing context object [ctx] exists and isn’t undefined. We’ll place all the code belonging to the load event into this if condition.

15 JavaScript Methods For DOM Manipulation for Web Developers

15 JavaScript Methods For DOM Manipulation for Web Developers

As a web developer, you frequently need to manipulate the DOM, the object model that is used by... Read more

3. Create the initial variables

Let’s create three more global variables, s for the starting angle of the arc, tc for the id for the setInterval() timer, and pct for the percentage value of the same timer. The code tc = pct = 0 assigns 0 as the initial value for the tc and pct variables.

  onload = function() {      cv = document.querySelector('#cvl'),      ctx = cv.getContext('2d');        if (!!ctx) {          s = 1.5 * Math.PI,          tc = pct = 0;      }  };  

To show how the value of s was calculated, let me quickly explain how arc angles work.

Arc angles

The subtended angle (the angle composed of the two rays that define an arc) of the circumference of a circle is 2π rad, where rad is the radian unit symbol. This makes the angle for a quarter arc equal to 0.5π rad.

subtended angle of circumference

When visualizing the loading progress, we want the circle on the canvas to be drawn from the top position rather than the default right.

Going clockwise (default direction arc is drawn on the canvas) from the right position, the top point is reached after three quarters, i.e. at an angle of 1.5π rad. Hence, I’ve created the variable s = 1.5 * Math.PI to later denote the starting angle for the arcs to be drawn from on the canvas.

4. Style the circle

For the drawing context object, we define the lineWidth and strokeStyle properties of the circle we are going to draw in the next step. The strokeStyle property stands for its color.

  onload = function() {      cv = document.querySelector('#cvl'),      ctx = cv.getContext('2d');        if (!!ctx) {          s = 1.5 * Math.PI,          tc = pct = 0;            ctx.lineWidth = 2;          ctx.strokeStyle = 'fuchsia';      }  };  

5. Draw the circle

We add a click event handler to the Load button [#lbtn] which triggers a setInterval timer of 60 milliseconds, that executes the function responsible for drawing the circle [updateLoader()] every 60ms till the circle is fully drawn.

The setInterval() method returns a timer id to identify its timer which is assigned to the tc variable.

  onload = function() {      cv = document.querySelector('#cvl'),      ctx = cv.getContext('2d');        if (!!ctx) {          s = 1.5 * Math.PI,          tc = pct = 0,          btn = document.querySelector('#lbtn');            ctx.lineWidth = 2;          ctx.strokeStyle = 'fuchsia';            btn.addEventListener('click', function() {              tc = setInterval(updateLoader, 60);          });      }  };  

6. Create the updateLoader() custom function

It’s time to create the custom updateLoader() function that is to be called by the setInterval() method when the button is clicked (the event is triggered). Let me show you the code first, then we can go along with the explanation.

  function updateLoader() {      ctx.clearRect(0, 0, 16, 16);      ctx.beginPath();      ctx.arc(8, 8, 6, s, (pct * 2 * Math.PI / 100 + s));      ctx.stroke();        if (pct === 100) {          clearInterval(tc);          return;      }        pct++;  }  

The clearRect() method clears the rectangular area of the canvas defined by its parameters: the (x, y) coordinates of the top-left corner. The clearRect(0, 0, 16, 16) line erases everything in the 16*16 pixels canvas we have created.

The beginPath() method creates a new path for the drawing, and the stroke() method paints on that newly created path.

At the end of the updateLoader() function, the percentage count [pct] is incremented by 1, and prior to the increment we check if it equals to 100. When it’s 100 percent, the setInterval() timer (identified by the timer id, tc) is cleared with the help of the clearInterval() method.

The first three parameters of the arc() method are the (x, y) coordinates of center of the arc and its radius. The fourth and fifth parameters represent the start and end angles at which the drawing of the arc begins and ends.

We already decided the starting point of the loader circle, which is at the angle s, and it’ll be the same in all the iterations.

The end angle however will increment with the percent count, we can calculate the size of the increment in the following way. Say 1% (the value 1 out of 100) is equivalent to angle α out of 2π in a circle (2π = angle of the whole circumference), then the same can be written as the following equation:

1/100 = α/2π

On rearranging the equation:

  α = 1 * 2π /100  α = 2π/100  

So, 1% is equivalent to the angle 2π/100 in a circle. Thus, the end angle during each percent increment is computed by multiplying 2π/100 by the percentage value. Then the result is added to s (start angle), so the arcs are drawn from the same starting position every time. This is why we used the pct * 2 * Math.PI / 100 + s formula to calculate the end angle in the code snippet above.

7. Add the favicon

Let’s place a favicon link element into the HTML <head> section, either directly or via JavaScript.

  <link rel="icon" type="image/ico" >  

In the updateLoader() function, first we fetch the favicon using the querySelector() method, and assign it to the lnk variable. Then we need to export the canvas image every time an arc is drawn into an encoded image by using the toDataURL() method, and assign that data URI content as the favicon image. This creates an animated favicon which is the same as the canvas loader.

  onload = function() {      cv = document.querySelector('#cvl'),      ctx = cv.getContext('2d');        if (!!ctx) {          s = 1.5 * Math.PI,          tc = pct = 0,          btn = document.querySelector('#lbtn'),          lnk = document.querySelector('link[rel="icon"]');            ctx.lineWidth = 2;          ctx.strokeStyle = 'fuchsia';            btn.addEventListener('click', function() {              tc = setInterval(updateLoader, 60);          });      }  };    function updateLoader() {      ctx.clearRect(0, 0, 16, 16);      ctx.beginPath();      ctx.arc(8, 8, 6, s, (pct * 2 * Math.PI / 100 + s));      ctx.stroke();        lnk.href= cv.toDataURL('image/png');        if (pct === 100) {          clearTimeout(tc);          return;      }        pct++;  }  

You can have a look at the full code on Github.

Bonus: Use the loader for async events

When you need to use this canvas animation in conjunction with a loading action in a web page, assign the updateLoader() function as the event handler for the progress() event of the action.

For instance, our JavaScript will change like this in AJAX:

  onload = function() {      cv = document.querySelector('#cvl'),      ctx = cv.getContext('2d');        if (!!ctx) {          s = 1.5 * Math.PI,          lnk = document.querySelector('link[rel="icon"]');            ctx.lineWidth = 2;          ctx.strokeStyle = 'fuchsia';      }        var xhr = new XMLHttpRequest();      xhr.addEventListener('progress', updateLoader);      xhr.open('GET', 'https://xyz.com/abc');      xhr.send();  };    function updateLoader(evt) {      ctx.clearRect(0, 0, 16, 16);      ctx.beginPath();      ctx.arc(8, 8, 6, s, (evt.loaded*2*Math.PI/evt.total+s));      ctx.stroke();        lnk.href = cv.toDataURL('image/png');  }  

In the arc() method, replace the percentage value [pct] with the loaded property of the event—it denotes how much of the file has been loaded, and in place of 100 use the total property of the ProgressEvent, which denotes the total amount to be loaded.

There’s no need for setInterval() in such cases, as the progress() event is automatically fired as the loading progresses.

The post How to Create an Animated Favicon Loader with JavaScript appeared first on Hongkiat.

How to Customize Windows Context Menu

Posted: 11 Jan 2020 05:33 AM PST

Windows context menu refers to the menu that appears with right-click in a Windows PC, and a regular Windows user gets in touch with it on daily basis. A cluttered context menu, however, is a real productivity killer.

Unfortunately, it is very easy to clutter up the context menu as many third-party programs automatically add their option in the context menu. On top of that, some of them don’t even delete the context menu entry even if you delete the original app.

The good news is that the way you can customize shortcuts in Mac’s context menu, Windows context menu can also be managed, and in this post we will show you just how to do it.

Add Contextual Menu on Your Website With HTML5

Add Contextual Menu on Your Website With HTML5

The contextual menu is the menu that is listed when you right-click on your computer screen. The menu... Read more

Remove items from the context menu

With time, many entries become a part of the context menu making it long and sluggish, and so the solution is simple – remove the unwanted entries. Unfortunately, Windows doesn’t offer any user interface to easily get rid of items in the context menu. However, all these entries are made in the Windows registry and we can manage them from there.

You can either manually delete the entry from the registry or use a third-party program to do it for you. We are going to show you how to do it using both methods:

Manually delete entries from Windows registry

If you are not comfortable using a third-party program or don’t have rights to install one (limited user account), you can manually delete the entries from the registry.

Warning! Make sure you create a backup of your registry before making any changes in it. Any wrong tweak could negatively affect your experience or even corrupt the Windows.

To access Windows registry, press Ctrl + R keys and type “regedit” in the Run dialog. Once the registry is open, you need to search for the context menu entries in the below mentioned locations.

  HKEY_CLASSES_ROOT\*\shellex\ContextMenuHandlers\    HKEY_CLASSES_ROOT\AllFileSystemObjects\ShellEx\ContextMenuHandlers    HKEY_CLASSES_ROOT\*\shell    HKEY_CLASSES_ROOT\Directory\Background\shell    HKEY_CLASSES_ROOT\Directory\Background\shellex\ContextMenuHandlers    HKEY_CLASSES_ROOT\Folder\shellex\ContextMenuHandlers\    HKEY_CLASSES_ROOT\Directory\shell  

These locations will list context menu entries for folders, desktop and drives. You might even see same entry in multiple locations, so you will have to get rid of it from all the locations. To remove the entries from the context menu, simply delete it from the said locations.

If you are interested in re-enabling the items later in time, then you should disable it instead. To disable an item:

  1. Double-click on its entry and add “” (minus sign) at the end of the string to corrupt it.
  2. When you want to enable it again, simply remove the minus sign.
delete entry
Third-party program to remove context menu items

There are dozens of third-party tools that can help you manage Windows context menu. All these tools fetch entries from the registry and show them to you in a simple interface.

From there you can remove, add, edit, disable or enable items. For this purpose, I trust Ultimate Windows Context Menu Customizer. It is a light, easy to use and free context menu customizer tool that works on all versions of Windows (Microsoft .Net Framework 3.5 may be required).

We will be using this tool to both remove and add items to Windows context menu, so you should download it now.

  1. Launch the program and you will see all six types of Windows context menu at the top left corner, including Computer, Desktop, Drivers, Files, Folder and Desktop and Folders.
  2. You can click on each of the context menus to see all the entries inside them.
  3. To disable an entry, click on the entry and then check the checkbox next to “Disabled” below in the settings. This will disable the item and it can be enabled again when needed.
disable entry

You can also remove the entry if you don’t plan on using it in the future. To do so, select the entry from the list and then click on “Remove Item” at the bottom to remove it immediately.

disable item

Keep programs from adding items in the context menu

Your Windows context menu should look a lot tidier now that the unwanted items have been removed. However, the context menu can again get cluttered as you add more programs.

Unfortunately, there is no one-shot method to prevent programs from adding options in the context menu. You will have to be careful while installing the program to prevent it from adding items in the context menu.

Most of the programs will ask you whether a context menu entry should be created or not. If you will blindly click on “Next” and then “Install“, then your context menu will be cluttered very soon. You just need to be careful while installing programs and decline the offer to add context menu entry if you don’t need it.

Some rogue programs may not give this option while installing, and in that case you will have to remove the entry yourself using the explanation above.

Add items in Windows context menu

Windows context menu is one of the fastest ways to access features and programs on your PC. You just need to right-click and select your prefered item and it will instantly open up, and so adding items in the context menu can be very productive.

Luckily, it is very easy to add any type of item in the context menu using Ultimate Windows Context Menu Customizer tool that we shared above.

Launch the tool and you will see dozens of pre-defined Windows apps in the right column. You can either add these apps if you like or create a custom entry yourself.

remove item

To add a custom item, select your required context menu from the options and you will see its settings below (which should be empty).

Here, you can tweak the settings as we have explained below:

  • Text: You need to add name of the item here. This will be used to identify what program the entry opens.
  • Command: Click on the button at the end of this option (it has 3 horizontal dots) and Windows explorer will open up. Now navigate and look for executable file of the item that you would like to launch. A shortcut to the program will work as well.
  • Icon: This is an optional feature, but a handy one to easily find items. Here search and select the executable file of the item again (that has the icon) and its icon will be used to show in the context menu.
  • Position: Select where the item should show up in the context menu, top, middle or bottom.

Once all the information is provided, click on the “Add Item” button below and it will be added in the context menu.

menu customizer

Now just open the context menu where you have added the entry and it will be accessible.

add item to context menu

Add folders in the context menu

The Ultimate Windows Context Menu Customizer will not help you add specific folders in the context menu, and you will have to depend on a different app for this purpose. MyFolders is a good tool for this purpose that will add a single entry in the context menu from which you can access all your favorite folders.

  1. Once MyFolders is installed, right-click anywhere and hover your mouse cursor over “MyFolders” entry.
  2. From the side menu, click on “Settings” to customize the tool.
  3. items added
  4. In the settings, you can use the “Add” button to start adding important folders in MyFolders. You can also remove or adjust position of the folders. Once everything is added, click on “Done” to save the changes.
  5. myfolders settings
  6. Now you can simply right-click anywhere and access all the added folders from the “MyFolders” context menu entry.
myfolders

Summary

I believe using a third-party tool to manage Windows context menu, as it is a much faster and intuitive way that gives full control. However, you can also remove context menu items yourself using the Windows registry if you don’t trust a third-party app.

If you know any other cool tweaks to manage Windows context menu, share with us in the comments.

12 Free Windows Productivity Apps You Should Download

12 Free Windows Productivity Apps You Should Download

Most professional fields require you to spend a major part of your day on your PC, and so... Read more

The post How to Customize Windows Context Menu appeared first on Hongkiat.

Create Dynamic Profile Photos for Interface Mockups With This Tool

Posted: 11 Jan 2020 02:32 AM PST

When you’re designing a mockup, you want to focus on the interface first and less on the aesthetics. The same holds true for wireframing and coding a web layout from scratch.

Many different mockups require profile photos, such as social networks, blog comments, and profile pages. With Diverse UI, you can easily embed these photos into your mockup with a few clicks.

Ten Wireframe Kits You Can Download For Free

Ten Wireframe Kits You Can Download For Free

As a designer, you will pass through several steps while you work on your project, from designing your... Read more

The site lets you either download the selected photos or embed them directly through their Sketch plugin.

Diverse UI homepage

All of these images were submitted by real users with full approval for use. This means you have the rights to reuse these photos for personal or commercial works without permission.

Diverse UI is actually part of the Craft suite of plugins, made by InVision. This means it’s the best engine for finding a wide range of faces regardless of what you need.

The reason I like this collection is that it comes with a pretty loose licensing agreement that should apply to all works except “evil” purposes(defamatory or hateful content).

Image sizes range from 32px up to 180px and you can dynamically alter the images right in the browser. From the homepage, you can either download a .zip of all images or just grab the ones you want by clicking individual photos.

Granted I haven’t personally used the native Sketch plugin but it looks easy enough to set up.

Diverse UI example animation

To learn more about the plugin, check out the official GitHub repo.

And, if you’re comfortable with coding you can even pull images directly from the API which lets you grab profile pics by gender or by a fixed amount of images, all through JavaScript.

20 Freebies for Aspiring UX Motion Designers

20 Freebies for Aspiring UX Motion Designers

Interface designers are taking a greater interest in UX design with animated mockups that emulate user actions. These... Read more

The post Create Dynamic Profile Photos for Interface Mockups With This Tool appeared first on Hongkiat.