Showing posts with label ways. Show all posts
Effortless Ways To Add Mobile Navigation Icons
More people are surfing the Internet via mobile devices these days, thus a few things on websites need to be adjusted to fit in those smaller screen sizes. This also includes Web Navigation.
The icon below, if you may, is the most popular icon to represent “mobile menu/navigation”.
In this post, we’ll take a look at several ways to add the icon and which way is easiest.
Using Bitmap Image
Everyone knows how to do it by way of the Bitmap image. We can simply create this icon in Photoshop, save it to image (probably in PNG or JPG format) and then assign it throughbackground-image in CSS.
However, bitmap images lack scalability. In particular, when we have to enlarge the image, it may turn blurry or pixelated. With the availabiity of high-resolution devices in the market these days, image scalability is one essential factor you can’t afford to overlook.
Bootstrap Way
This is how Bootstrap, a front-end development framework, displays the “navigation icon” in smaller screen sizes. It uses three <span> elements:
Although the desired icon may be achieved through styling, having extra markup for only displaying this tiny icon is considered redundant (especially if we comply to “best practices”).
So, let’s find a better way that require less markup
.
Using Font Icon
Another way to take is by using font icons. Several fonts provide this icon in their set, such as Font Awesome and EnTypo. To display the icon, we simply add the respective character, as demonstrated in this post.
Some advantages of displaying icon with fonts are that the icon is easy to alter through CSS and is resolution-independent. On the other hand, it also has some disadvantages: the file could be very large depending on how many characters are saved, and we need at least four different file formats to cover browser compatibility which is a lot of work to display just one icon.
“Trigram For Heaven”
Surprisingly, there is an HTML character called Trigram for Heaven. This is (probably) the best way I can find. Simply put this HTML character (☰) and you should get this icon on your webpage.
We can then alter it with CSS, such as changing the color or resizing it without losing the sharpness and also linking to external sources. Furthermore, you can dive into this library to find more HTML special characters.
Two Simple Ways To Download Instagram Videos
Recently Instagram has a new feature which allow user to share a 15-second video instead of only pictures. It’s like a mini-version of Youtube (and is an apparent stab at Vine). Rivalry aside, if you have the habit of downloading videos online, know that you can also download videos from Instagram. Here’s how.
 |
There are essentially 2 ways to download Instagram videos. First is to download it using a web browser and save the video on your computer. Another way is to just Like an Instagram videoand it will be saved into your favourite cloud storage service, with some minor setup required.
Method #1: Via Torch Browser
To download Instagram videos, first download and install Torch browser on your computer.
After installing, paste the URL of the Instagram video you want to keep and load the page. On the Instagram video page play the video, so that Torch browser can grab the download link.
 |
On the top bar, there is a Video button. Before you play the video the button is greyed out but after playing the video the button becomes clickable.
Click on the Video button to download the Instagram video.
 |
The downloaded Instagram video will be saved in .MP4 format which can be played on almost any player and device.
Method #2: Via IFTTT
If you are an existing user of IFTTT you can click here and start to use the recipe. If you are not sure what IFTTT can do for you, then check out 35 Awesome IFTTT Recipes To Archive Your Social Media Data to get an idea.
IFTTT: Creating A Trigger
To download Instagram videos straight to your Cloud storage, first browse over to IFTTT and create an account.
Then, click on Create on the top bar and click on this. It will ask you to choose a trigger channel. Since we want to save a video from Instagram, we will choose Instagram as the trigger.
 |
You will need to activate your Instagram once. IFTTT will remember this for subsequent triggers.
 |
Now, you need to choose what action that perform to your Instagram account, basically what what will trigger the IFTTT service. Since we want to save Instagram videos to cloud storages, choose You like a video as the trigger.
 |
Then, click on Create Trigger.
.jpg)
IFTTT: Creating An Action Channel
The next step is to choose your action channel. For this guide, we are going to use Dropbox as an example of a Cloud storage service to backup our videos.
Activate Dropbox like how we did Instagram, earlier. Then, choose what Dropbox should perform upon the trigger from Instagram.
Since we want to save Instagram videos that we ‘liked’, choose ‘Add file from URL‘ action.
Then click on ‘Create Action‘ and ‘Create Recipe‘. With that you are done.
Now any video that you liked on Instagram will be saved in your Dropbox. However, the service will only check for triggers from Instagram every 15 minutes, so videos aren’t instantly saved.
The saved videos are in .MP4 format in Dropbox so you can retrieve them from there and watch them whenever you like.
5 Ways To Optimise Your Social (Count) Buttons
Today, it is common practice to add social buttons on webpages for better user engagement and to make it easier for your posts to be shared. However, these buttons could slow down your websiteload performance severely.
For instance, with the Facebook Like button, the script to fetch the “like” numbers for your page and also to append the button HTML markup are the culprits. The impact could be very significant if you add the like button to every post.
In this post, we are going to discuss several solutions to optimize social buttons, which also improves your page load performance. We have been trying some available tools and scripts out there and here are our top 5 of the list., with their pros and cons attached. Let’s check them out.
1. Socialite
Socialite is a JavaScript library, developed by David Bushell. It allows us to load the actual social buttons upon a particular event like hovering or scrolling, making your page load more efficiently.
Pros
- Available as WordPress plugin.
- No need jQuery or other libraries.
- Load the actual social buttons upon any event: hover, scroll, click, etc.
- Customizable through CSS.
- Support for many social networks, including Facebook, Twitter, Google+, Linkedin, Pinterest, Spotify, and Github. Extensible for other social networks.
Cons
- No supports for querying share or like numbers.
2. Sharrre
Sharrre is a jQuery plugin for adding social buttons on webpage. It comes with a set of API to make the button highly customizable.
Pros
- Support lots of social network buttons, Google+, Facebook, LinkedIn, Digg, etc.
- Fully customizable button with CSS and the plugin options.
- Ablity to fetching share numbers and also sum them up.
- Tracking with Google Analytics.
- Available as WordPress plugin.
Cons
- Dependent on jQuery to work.
- Also rely on additional PHP script (for querying Google+ share number).
3. TNW Social Count
TNW Social Count is a WordPress plugin originally developed for The Next Web to fetch share numbers of articles, and display the result as shown in the following screenshot. Thankfully, the developer is generous enough to release the plugin for free, although not all features were included.
Pros
- WordPress Plugin, very easy to use with the provided GUI and template tag.
- Support for four major social networks: Facebook, Twitter, Google+ and LinkedIn (may not suffice).
- Fully customizable with CSS.
- Option to fetch count number automatically, or by demand.
Cons
- Works only for WordPress; need a workaround to have it work on Joomla or Drupal.
- It creates extra fields in the database. So, if your hosting plan has limited resource for the database, this could cause a trouble.
- At the time of the writing, support is limited to only four social networks mentioned above.
4. Filament Social Count
Social Count is a jQuery plugin developed by Filament Group for displaying the sharing button from Facebook, Twitter and Google+. This plugin shows the buttons efficiently by loading the button individually and only upon user deman; in return, webpages load faster.
Pros
- Load the button individually on hover.
- Very small file size, only 2.98KB.
- Support for touch device.
Cons
- Only support for Facebook, Twitter and Google+ sharing button.
- Rely on jQuery. So, despite of the very small size, you need to load an extra 93kb from jQuery.
5. Social Likes
Social Likes is a jQuery plugin to show social buttons with the share numbers. It comes with styles that are similar to the actual ones, as shown in the screenshot below.
Pros
- Default button styles which look close to the originals.
- Customizable look through CSS and through GUI.
- Support for Pinterest and LiveJournal.
- Easily extensible to add additional social networks.
Cons
- Similar to Sharrre, It relies on jQuery and also PHP for querying Goolge+ counter.
- It queries the counter number on page load.
