Author Archives: Sudip

Font Awesome 5 In-Depth Analysis

Advertisment

Font Awesome is arguably the best source for using icons. It is very popular comparing to other free font providing services. Why is that? Because it is free and very easy to use and customize. Font awesome was first released in 2012 (source: Wikipedia) and has became very popular in the recent years, especially in version 4. Font awesome 5 has been upgraded from version 4 in last December of 2017. There have been some major changes. Before Font Awesome 5, font awesome 4 syntax was like this:


 <i class="fab fa-facebook"></i>
 <i class="fab fa-twitter"></i>
 <i class="fas fa-cogs"></i>
 <i class="fas fa-wrench"></i>

Upgrading from Font Awesome 4

In this syntax, all the icon names start with an ‘fa’, which is obviously the shortcut for font awesome and the next thing is ‘facebook’ for the actual icon name. But in font awesome 5, the icons have been categorized. How? They introduced some new prefixes for using the icons. Basically, there are 4 to be exact. They are:

Font Awesome Brands. [fab] (brands like facebook, twitter, youtube and so on)
Font Awesome Solid of Font Awesome. [fas or fa] (solid icons like settings, star and etc)
Font Awesome Regular.
Font Awesome Light.

The last two categories, Font awesome regular and font awesome light are available for paid version only.

Using font awesome 5

Using font awesome 5 is as easy as it gets. You can use it by calling in from CDN or using it by downloading into your system first and then using it. I find the second one handy because even if your internet is slow or down, you can use without any problem at all. So, if you download font awesome 5, you will see folder containing so many files. Here’s a reminder, you can use just the brands icons or just the solid icons or you can also use the master css file to use them all. This is just a css file so you can use all versions at once or you can call the ones you require. So, it’s your choice.

The separate versions will come in handy if you use font awesome just for social icons in your website. As of now, font awesome version is …….. and you will need to go to ‘web-fonts-with-css’ folder and in the ‘css’ sub folder, you will see a file named ‘fontawesome-all.min.css’. Copy the file to your website directory. Also copy the ‘webfonts’ folder. Whatever folder you copy the css file, the webfonts folder must be one step back of that directory. If you copy the font awesome css file to your /css directory, make sure you have webfonts folder on the root directory.

Then call the css file from the head section of your website.

Font Awesome 5 Output

Try out these following codes and see if the execute.

	<i class="fab fa-facebook"></i>
	<i class="fab fa-twitter"></i>
	<i class="fas fa-cogs"></i>
	<i class="fas fa-wrench"></i>

If you have done everything right, you will see font awesome working like this:

So, that was the detailed usage of font awesome 5. I hope it was easy. If you want to use font awesome 5 as background pseudo element, you can do that. This post is already long enough so I think I will write another post maybe with another video in the near future. Stay tuned with my facebook page for further updates. If you haven’t been able to do this right, watch this whole process in the following 06.25 minute video you’ll certainly be able to do it.

I hope the process was easy and you understood. If you have, make sure to share the post and also subscribe to the youtube channel while watching.

Asphalt 9 Legends Review

Advertisment

For those who don’t know what is Asphalt 9 Legends can skip the post straight away. Asphalt 9 Legends is probably the most popular racing games on mobile phones. I am here to give you the in depth Asphalt 9 Legends review. Along with play store, this game is also available on the windows store, that means it can be played from windows phones and PC, Laptops as well but it is widely known as the most popular mobile racing games. By the name, you can guess that this is the 9^th edition of the game after the last one called Asphalt 8: Airborne. As of now, Asphalt 8 has over 300 million installs and Asphalt 9 has 5 million+. Asphalt 8 has been in the market for over 5 years and Asphalt 9 was released on July 25, 2018.

Upgrade from Asphalt 8: Airborne

Asphalt 8: Airborne was both multiplayer and single player offline version but Asphalt 9 Legends is fully online. Though Asphalt 9 has single player career mode but still requires an active internet connection to operate. The hardware requirement is also a fact. Whereas, Asphalt 8 could run on a device half a decade ago, so you can imagine the requirements were not that high but Asphalt 9 requires 3GB of ram and graphics output for best results. That is a major change in these two games.

What’s new on Asphalt 9 Legends

Game modes:

Asphalt 9 has so many game modes. Always running events, daily, weekly and more. It also has a huge career mode of 1440 flags. The flags are the additional requirements along with winning the race. Let’s say, you are given a target of winning a race and putting down 2 opponents. By being successful, you win two flags, one for winning and another for putting down 2 opponents. There are currently 6 seasons and more will be added soon.

Blueprints:

In Asphalt 8 Airborne, you could buy car using the coins you earn but that’s not how it’s gonna work on Asphalt 9 Legends. You have to collect blueprints for cars and then when you collect all of them, you can start up a car and use it in multiplayer and career mode. You also get blueprints and upgrade parts every 4 hours. Each 4 hours, you will be given a free pack.

Club:

Asphalt 9 has a brand new feature, CLUB. A club can contain up to 20 players and anyone and everyone racing in any mode, helps the club to gain points. The club has ranking based on that.

Multiplayer:

The main attraction is of course the Multiplayer mode. You gain points by winning a race. You also win flags for entering and winning races. 1 flag for participating, 1 flag for being second and 2 flags for being first. You can gain maximum of 3 flags in a single race. Within playing time of one hour, you have to gain 10 flags, 20 flags and then 30 flags to win multiplayer packs that can give you new cars or modification. There are 4 leagues, bronze leagues, gold leagues, platinum leagues and legendary leagues. The leagues work in this way:

Bronze League < 1200 ranking
Gold League = (1200 – 1499) ranking
Platinum League = (1500-1799) ranking
Legend League >1800 ranking

The bigger league you are in; the more prizes you win after end of a season. A season is 4, 7, 10 or 14 days longer. Your goal is to stay on the top to get best prizes.

Drawback:

The major drawback of this game is the fueling system. You can play only for a limited time with a car. Some cars have 6 fuels, some has 5, some has 4. That means after playing 6 races with a car, you will have to give it a rest to refuel. The refueling time also differs from 15 minutes to 5 hours. You can refuel quickly by watching ads or applying tokens. You can earn tokens by winning several conditions by racing in any mode or you can buy them with real money. The other drawback is the configuration required to play this game. The average phones won’t be able to play this game at full graphics settings, so that could be a problem.

My opinion:

I am playing this game regularly and enjoying it very very much and will certainly keep playing. As of now, the first update of the game is announced so the game will certainly be better. Keep your eyes on this blog to get regular updates on android games. Till then, good bye and happy gaming.

WordPress Upload File Size Limit Increase

Advertisment

File size limitation in WordPress

The file upload limit of a WordPress site is often limited. No matter where the site is uploaded, whether localhost or a live server, wordpress upload file size limit mostly depends on the hosting server. The limit basically starts with 2048 KB or 2 MB and is some cases 3 MB.

Problems

This size might look okay if you are uploading text or office files such as .txt, .docx, .pptx and even some low-res images. But it surely won’t be enough for heavy media type files (such as mp3, mp4 etc), high-res images and even some pdf files. When you want to upload them, you see your WordPress upload file size limit is max 2MB.

What are you going to do now? Compress the file size? Use another server? 😛 . Just kidding, you can set the WordPress upload file size limit from your WordPress folder in a few lines of code. So without wasting anymore time, let’s do this.

WordPress upload file size limit

You can limit the file size of your wordpress site up to 64 MB. You can also keep anything below this, no problem with that. 64 MB is the max size. Based on your requirement you can keep WordPress upload file size limit to whatever you want. This is a very small task. All you need to do is to go to the root folder of your theme and find .htaccess file. Open it up in your editor and insert the following code:

php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

Save the file now and go back to media page. You should see the limit has increased. If you want to change the size, you can do this right away. Just change the size limit again in the .htaccess file. Since you saved the file, you will now see the new limitation appears on your add media page.

So, I hope the process was easy to follow. If you are still confused somehow, I captured the whole process in a 02.22 min YouTube video which you can check out right now. If it helps you, give a like, leave a comment and subscribe for future uploads.

CSS Dropdown Menu with HTML5 in 5 mins

Advertisment

What is CSS dropdown Menu?

I am guessing, as you are reading this post, you might come here from some social link or from google, but you surely know what a css dropdown menu is. If somehow you don’t then, it is a little extension to the regular menu we see in every website. It’s the same menu where you can create level 2, level 3 and more level menus.

Mostly the menus are level 2 deep, it might get to level 3 sometimes. It is very unlikely to have a menu which is 4 level deep. Nobody wants a puzzle inside a menu, right? If you are a visitor and you have to go through 4 level deep for a menu item, you won’t like it. But the good news is, when you create a pure css dropdown menu, you only need to work with level 3 and the rest is automatically done. So, after this, it doesn’t matter how deep the menu is, it will work just fine no matter how many levels it has.

Creating CSS dropdown Menu

Creating a css dropdown menu is pretty easy thing to do but sometimes it might be tricky for new folks around. When I started developing and was looking to create a dropdown menu I often stuck at a point. But later I studied a little more about how things work in a dropdown menu and saw some examples, it was a piece of cake.

No jQuery for a menu, please

So, when you roam around for a dropdown menu, you might see some related searches like jQuery dropdown menu. You don’t need to do that. It would be like bringing a canon to fight a mosquito. Why jquery when you can simply create a css dropdown menu?

Marking up

Markup is very important. And it’s also not very fancy so everyone should end up with the same markup. First, let’s take some list items with links inside an unordered list then create lists inside those list items and so on and so forth.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Dropdown Menu</title>
 <link rel="stylesheet" href="style.css" />
</head>
<body>

 <header>
 <nav class="main-menu">
 <ul>
 <li><a href="">Home</a></li>
 <li><a href="">About</a>
 <ul>
 <li><a href="">Sub Menu</a></li>
 <li><a href="">Sub Menu</a></li>
 <li><a href="">Sub Menu</a></li>
 </ul>
 </li>
 <li><a href="">Services</a></li>
 <li><a href="">Customers</a>
 <ul>
 <li><a href="">Sub Menu</a></li>
 <li><a href="">Sub Menu</a>
 <ul>
 <li><a href="">Sub Menu</a></li>
 <li><a href="">Sub Menu</a></li>
 <li><a href="">Sub Menu</a></li>
 </ul>
 </li>
 <li><a href="">Sub Menu</a></li>
 </ul>
 </li>
 <li><a href="">Contact</a></li>
 </ul>
 </nav>
 </header>
 
</body>
</html>

CSS for the dropdown menu

First, let’s fix the first menu. Then we will go for the rest. In this portion just edit the first level.


.main-menu ul {
list-style: none;
position: relative;
float: left;
background-color: #202020;
margin: 0;
padding: 0;
}
.main-menu ul li {
position: relative;
float: left;
}
.main-menu ul li a{
display: block;
color: #fff;
text-decoration: none;
font-family: Segoe UI;
font-size: 18px;
padding: 10px 15px;
}

Now, target the second level.


.main-menu ul ul{
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #202020;
}

.main-menu ul li:hover>ul{
display: block;
}

.main-menu ul ul li{
float: none;
width: 200px;
}

And at last, the third level


.main-menu ul ul ul{
top: 0;
left: 100%;
}

.main-menu ul li:hover{
background-color: #101010;
}

Additional support

This menu is just simple css dropdown menu but if you want to give it WordPress support, just add some additional classes like ‘current-menu-item’ and so on, so that when you take it to the WordPress, you don’t need to do same thing twice. And you can always use the same menu over and over again for all your websites.

I am sorry for adding those codes individually, might have been easier for you if it were all at once. But, not to worry, you can just copy and paste them, if you want to do it yourself, you are welcome too. As you can see the process was really easy. If you need more assistance, I have recorded a video of 11.57 YouTube video which will be the whole process literally. Please watch it, if it helps you in any way, like, share and subscribe to my YouTube Channel.

Sticky Menu in HTML

Advertisment

What is Sticky Menu

Of all newly introduced technologies, sticky menu in html is very popular now. In case if you are wondering what is it, well, it is the same menu of your website but it never goes off the screen even when you scroll down. Sometimes the menu stays the same as it is and sometimes it shrinks down a bit, maybe the fonts are a bit smaller with smaller logos etc. In my opinion the menu looks awesome when it shrinks down a bit by size and with some transition with it.

Why Sticky Menu

Navigation menu is the heard of a website. Visitors use the menu to go to different pages or services with it. If your webpage is too long and let’s say a reader comes down a bit and now wants to go to the top of the website, he will need to scroll up all the way to the top. Why do such when you have a very simple solution, sticky menu. A sticky menu will not only make your website look good, it will also make it user friendly.

Process

The process of making a sticky menu is easy. We will need to add some css with html and a little bit of JavaScript code. So, the main thing is that I will work on the header tag. When the user scroll down the page the header will get an additional class. So all we need to do is to style those two different class the right way so that our header becomes sticky.

Coding for the sticky menu

HTML

Here I am using the header element and in my header, I don’t have much of anything. I just have an h1 tag that I am gonna work with. Basically, in a sticky menu there is navigation menu, site logo, some social links etc. As I am just demonstrating the topic, I hope this little example will be better to understand.

<header>
<h1>Sticky Header Example</h1>
</header>

JavaScript

Wondering why the JavaScript before css? Well, before working on the css, we will need to generate a class with JavaScript. This block of code is really simple.

<script>
	$(window).scroll(function(){
		if($(this).scrollTop() > 1){
			$('header').addClass("sticky");
		}

		else{
			$('header').removeClass("sticky");
		}
	});
</script>

From this block of code, you can tell whenever a user scroll down a bit the header will get an additional class called sticky. It’s simple, right? Of course it is.

CSS

Here we have a very small piece of css styles. This will be enough to demonstrate sticky menu.

*{
	margin: 0;
	padding: 0;
}

body{
	font-family: Segoe UI;
}

header{
	height: 100px;
	background-color: #3B5998;
	text-align: center;
	transition: all 0.5s ease;
}

header h1 {
    color: #fff;
    padding-top: 23px;
    transition: all 0.5s ease;
}

header.sticky{
	position: fixed;
	height: 60px;
	width: 100%
}

header.sticky h1{
	padding-top: 5px;
	transition: all 0.5s ease;
}

Okay, one more thing before running the index file, we need to call jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

So, that’s it, sticky menu done. It was easy, isn’t it? Go ahead and try yourself and let me know your thoughts on it.

I hope the process was easy. As always, I have recorded the full demonstration in a 11.46 min YouTube video to make it even better. Go ahead and watch it. Subscribe to the channel for more contents.

Screen Recorder for Android

Advertisment

Why screen recorder for android

Sometimes you may want to record your gameplay or any activity on your android device to watch it later. Sometimes you may want to share it with everyone. If you want to make some tutorials, it might be handy too. In my experience, screen recorder for android is not very common when you go to the app store. Well, you can find hundreds of apps will say they record screen but in the end you will end up disappointed if you don’t get the best screen recorder for android.

Main reason for this problem is the apps want root access to record screen, there might be some apps available that doesn’t require root access but maybe paid. So, problem everywhere. Before installing any screen recorder for android, if you just go through their ratings and reviews, that won’t be much promising. I have used many android phones before but I have never rooted any of them and I don’t like the idea of it. So, how can I get a good app to record screen on my android?

Best screen recorder I found so far

Well, the best option is if your device has already got a built in screen recorder app. I am using Sony xPeria M4 AQUA and my phone has built in screen recorder so I am not facing that problem anymore. But, what if you don’t? Well for that reason I will review an app today which is the best screen recorder for android. Name of the app is AZ screen recorder. Developer name Hecorat. This is a very light and powerful app and most importantly, it doesn’t require root access.

As of today, the app size is only 4.6 mb and current user rating in 4.5 with more than 5 m downloads. You can read some of it’s reviews and it should work just fine. Just one thing, your Android version must be 5 or more. So, let’s go and download it on your device:

Play store link for AZ screen recorder

Running AZ screen recorder for android is very easy. After opening the app for the first time you will see a ui like this:

You can also customize all the settings by clicking on the settings button. There are a bunch of options to go through, you can either keep it or change it as you need it.

I searched a lot for an appropriate screen recorder for android and at last found it. If it is same with you, I can assure your bad days are over. So, starting from the downloading to recording a video, I have captured in a YouTube video for you guys in 02.00 min. If you want, click the video below and see it.

For further videos, subscribe to my YouTube channel.

Sony xPeria Update to Android 6 Marshmallow

Advertisment

Sony xPeria Update Just Arrived

New Sony xPeria update is in the house. Just at the end of Android 5 Lollipop version and before the release of Android 6 Marshmallow, Sony released a bunch of phones and tablets and when they came out, the operating system was Android 5 with support to Sony xPeria Update to Android 6.0 or more.Now, as stated on their website, Sony said the update depends on different location, time frame and devices. But recently on Sony Mobile’s website, they published about Sony xPeria update to some of their devices.

If you use any of the following phones, then there’s a new update for you.

xPeria Z5 (Dual, Compact, Premium, Premium Dual)
xPeria Z4 Tablet
xPeria Z3 (Dual, Compact, Tablet Compact, +, +Dual)
xPeria Z2, Z2 Tablet
xPeria M5, M5 Dual
xPeria C5, C5 Ultra
xPeria M4 Aqua, M4 Aqua Dual
xPeria C4, C4 Dual

I bought a Sony xPeria M4 Aqua Dual more than 6 months ago and I was really getting angry to them for not releasing the android 6 update. However, it might be a bit late, but you can take a look at the android 6 features if you want. Anyways, yesterday I was browsing around and saw the new sony xperia update and couldn’t wait a bit. Just went on and updated my device to the latest android 6.0.1.

Updating your device

Now, updating the device is very easy. Basically, there are two ways to update device to a newer android version. One, by using your device or by using your computer. I prefer using the computer as it will be less pressure to the phone. First, the sony xperia update will be downloaded to the computer and then it will be installed on the phone. So, first of all you need to download xPeria companion first. You can either go to google and search for it or you can save your time and click the following link:

Sony xPeria Companion Download

Go ahead, download and install it on your computer. Now open it. Keep your data cable with you and connect to the device. The software is smart enough to let you know that there is a new sony xPeria update available for your device and it will directly prompt for the update.

However, if for some reason it doesn’t ask for the update automatically, you can click on the Software Update menu manually, will do the same thing actually. Anyway, just click ok and you can see the download progress on the top right corner of the companion software.

It might take some time depending on your computer configuration and internet connection. You can disconnect your phone and continue using it until the download is complete.

While downloading the update, you can disconnect and use your phone if you want.

After the companion software downloads the update, connect your phone to your computer. It will ask for it.

After you connect your phone to the computer back in, the Sony xPeria update will be installed and you will see new version number, all your data will be kept.

Then, it will prepare your device

After preparation done, a window will come and say not to disconnect device. While updating the device will be switched off and you can’t use it.

Sony xperia update installation process

Finally, Sony xPeria Update is finished, you will see a message like this

Remember, for the first time after you install an update, it will take some time for the phone to open. After your phone opens, you can see the new version.

So yeah, that’s how to do the sony xperia update, I hope the process was easy. I inserted as many screenshots as I could so that you can get it easily. If the screenshots are not enough and you want to see the whole process in a video, don’t worry. As always, I have recorded the whole process in a 5.43min YouTube video, I hope you will like it. If you do, don’t forget to like, comment and subscribe.