Harnaaz – Page 3 – Webartinfo | Creativity With Perfection

Posted on November 26, 2018 by Harnaaz — 4 Comments

Scaling Images With Jquery (Resize Image on Hover)

Using only JQuery you can use the hover() listener for mouseenter and mouseleave events and manage the CSS properties also with JQuery using css() method. For scaling an element you can use the CSS transition in conjunction with transform: scale(<some_number>) properties. Check next example for better understanding:

HTML :

<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="col-lg-6 order-lg-2">
   <div class="img-wrapper p-5 text-center bg-info">
     <img class="img-fluid rounded-circle" src="https://picsum.photos/200/300/?random" alt="Askbootstrap.com">
   </div>
</div>

Javascript/Jquery:

$(document).ready(function()
{
    $(".img-wrapper").find("img").css("transition", "transform 500ms ease-in-out");

    $(".img-wrapper").hover(    
        // Handler for mouseenter
        function()
        {
            $(this).find("img").css("transform", "scale(1.2)");
        },
        // Handler for mouseleave
        function()
        {
            $(this).find("img").css("transform", "scale(1)");
        }
    );
});

Output:

Posted on November 14, 2018 by Harnaaz — Leave a comment

How to create an image gallery using jQuery Lightbox plugin?

Image gallery on a website is a popular trend because it adds up extra beauty. In case of photography and travel related websites, image gallery has no alternative. If your website has some photos to be displayed for your visitors, image gallery is the way to go. You can design such an image gallery anyway you want but designing image gallery using Lightbox jQuery plugin makes it easier for you. It has a default design that you can use or you can style it in the code. Lightbox saves your time and effort providing a great looking image gallery at the same time.

In a previous article, we introduced some of the free image gallery plugins. Today we will show how you can create an image gallery using Lightbox jQuery plugin in just three simple steps. Follow each step carefully.

Creating an Image Gallery using Lightbox

Shaping an image gallery using Lightbox is very simple. You will not have any trouble if you go through our instructions. First of all, let me describe what we need for that

Custom HTML and CSS file
Images in two different sizes
jQuery Lightbox image gallery plugin

Step 1:

Every photo you will use in your design has two different sizes. Design your gallery with smaller size photos. Style them any way you want. When you have designed the gallery, wrap each photo with an anchor tag and place bigger high-resolution photos in their src. Bigger photos are the photos which will appear in modal upon clicking on them individually. Just like the codes below.

<a href="/images/im0101.png" > <img src="/images/im01.png" alt=""></a>

<a href="/images/im0202.png" > <img src="/images/im02.png" alt=""></a>

<a href="/images/im0303.png" > <img src="/images/im03.png" alt=""></a>

<a href="/images/im0404.png" > <img src="/images/im04.png" alt=""></a>

Step 2:

All of your images are wrapped in links redirecting to their high-resolution ones. Now you need to use Lightbox for modal window behavior. Go to this link to download Lightbox. Unzip the file and find lightbox.css and lightbox.js file.

Include the CSS file at the top of your page in your <head> tag

<link href="/css/lightbox.css" rel="stylesheet">

and Include the Javascript at the bottom of your page just before the closing </body> tag.

<script src="/js/lightbox.js"></script>

Be sure that the four images loaded by lightbox.css are in the correct locations. Check the path in the lightbox.css file. Make changes if they are not in the right paths.

Step 3:

Now you need to add data-lightbox attributes to the images you want to have modal behavior upon clicking on them. You can either use a unique name for each of the images or group some of them with a name.

Unique

<a href="/images/im0101.png" data-lightbox="image01" data-title="Jack"> <img src="/images/im01.png" alt=""></a>

Group

<a href="/images/im0101.png" data-lightbox="vacation" data-title="Jack"> <img src="/images/im01.png" alt=""></a>

<a href="/images/im0202.png" data-lightbox="vacation" data-title="Dave"> <img src="/images/im02.png" alt=""></a>

<a href="/images/im0303.png" data-lightbox="vacation" data-title="robbert"> <img src="/images/im03.png" alt=""></a>

<a href="/images/im0404.png" data-lightbox="vacation" data-title="Mgreen"> <img src="/images/im04.png" alt=""></a>

You also can add a caption at the bottom of the image just by adding data-title attribute in that particular image.

<a href="/images/im0404.png" data-lightbox="image01" data-title="Mgreen"> <img src="/images/im04.png" alt=""></a>

Check the demo of the similar Lightbox image gallery you are going to create.

You are done with your Lightbox image gallery. Make any changes you want but make sure you follow all the processes. If you have gone through our instructions, you are quite capable of making any such Lightbox image gallery. It’s very simple and you did it. Bingo!

Source: Themehunt

Posted on November 14, 2018 by Harnaaz — Leave a comment

5 keys to be a successful freelancer

Freelancing is a buzzword, both in developed and developing countries. People are increasingly choosing freelancing to make a living. Competition is going up in the freelance marketplaces like Upwork, Freelancer, Fiverr, LinkedIn ProFinder, Hubstaff Talent, Outsourcely, and so on. At this stage, one must mark himself different than others in order to win a bid and achieve the ultimate success. But how?

Here I’m discussing 5 key points behind being a successful freelancer.

1. Know Yourself

There are three types of people in the world of freelancing. First, the full-time ones, who are totally professional in freelancing and don’t involved with traditional office-desk based jobs. The second group comprises those who are part-time freelancers. They continue fixed jobs and freelance projects simultaneously. The third type is confused guys. This group is in danger. If you cannot establish yourself in freelancing, you won’t be able to make a reasonable outcome from it. That’s a really really bad thing for an individual, a family and broadly, for an economy. So at first know yourself, evaluate your skills, discover your interest in learning new things frequently and adaptability. If you have confidence and determination, you can be successful in any field. So find your strengths and weaknesses and continue reading this article.

2. Keep Options

You may find some people saying like they would have only a single target and they must achieve that. Now listen to me. Forget the “single target” theory. Career is not a mission. It’s much more than a vision. I assume you know the difference between mission and vision. The earlier one is relatively short term and the later one is long term phenomenon. However, don’t try to be over smart. Always keep a backup option. If you do full-time freelancing, that’s great, but don’t rely on single marketplace or a single client. Your current client can be awesome, but I’ve heard several stories where clients ended contracts just because the freelancers asked to raise the rate. The virtual world is full of risk factors. Your marketplace profile may face limits, your project may be called off and many more can happen. So maintain more than one marketplace profiles (of course on different marketplaces, because one may not be allowed to have double account on a freelancing site at once). Create own portfolio site to get clients from outside marketplaces. Build network.

3. Better Manage Your Time

Time is the a prime resource to a freelancer. Plan and organize your time to utilize in the greatest extent. Time trackers (for client or personal) can play a good role in measuring freelancer productivity. Use note taking apps like Evernote, Google Keep etc. to schedule and complete your assignments timely. Punctuality and responsibility are weighted heavily in freelance jobs.

4. Go for the Right Project

There are bad guys in freelance marketplace too. Do some analysis before bidding for a project. Is the client reliable? What do the ratings and reviews tell about the buyer? Is the client’s payment method verified? There are many questions. There are some clients who post projects with high budget estimates but they get vanished after receiving works. Use advanced payment options of your freelance marketplace or only work for trusted clients. Failing to identify the right client is a miserable shortcoming of a freelancer, so beware of this.

5. Learn New Things

Skill, skill, skill… Everything has a room for development till death. Stay updated with the latest trends of your industry, learn new skills and connect with the community. Freelancing sites offer a number of skill tests. Take tests and add some brilliance to your profile. No skill can do alone. Learning relevant stuffs can provide huge advantage. Suppose you are a content developer. If you know how to manage contents in WordPress, Joomla and such other CMSs, that will help you perform your tasks with more ease. Improve communication skill to avoid misunderstandings. Keep studying and repeat.

Do you want to add some more words? Please comment here!

Source: Themehunt

Posted on November 14, 2018 by Harnaaz — Leave a comment

Apps every freelancer must use to boost productivity

Serious freelancers value every minute in a day. It doesn’t matter whether you are a professional or part-time freelancer, you must value your time and resources. Besides using the best suitable communication apps such as Skype, Slack, email clients and so on, the better you can manage your workflow, the greater incoming transaction will be possible. Today I’ll tell you about some apps you must use to boost your productivity.

Note Taking Apps

As a freelancer, you should use at least one note taking app to jot down quick notes, ideas and thoughts. Note takers can also store to-do lists, save web pages, annotate documents and do more. A note taking app could act as a reminder as well. Some of the popular note takers are:

Productivity Trackers

How much productive worker you are? It has a crucial impact on your freelancing career. The more productivity means the more ability to work, which eventually translates into money. If you don’t want to share your time logs with your clients, at least track time for your own revision. Some time tracker apps you may use:

Time Doctor
Screenshot Monitor
RescueTime
Trackers built by freelancing sites like Upwork and Freelancer
Timesheets, you can use these templates or create yourself

Cloud File Sharing Apps

While working on a project, you may often share files and documents with clients and co-workers. Email attachments are a bit old fashioned and time-consuming. Cloud-based file sharing apps can save your time a lot. Some of the popular cloud services are:

Bookkeeping and Budgeting Apps

Bookkeeping apps will help you keep records of your income and expenditure. One can live a more disciplined and easy life by keeping an eye on his/her cash inflows and outflows. Budgeting is also important to better manage money in your life. Some apps can make your budgeting and bookkeeping easier:

Invoicing Apps

If you work via freelancing marketplaces like Upwork and Freelancer, you may not need an invoicing system, because these marketplaces generate invoices for you automatically. But if you are an independent individual who has clients outside those marketplaces, can use invoicing apps to generate billing documents. Some of these apps are:

I haven’t mentioned communication apps in a separate point because these are the beginning point of freelancing contracts. Since I’ve mentioned about them in the first paragraph, so I believe you will have no confusion with their necessity.

Which app else you think a freelancer must use? Please share via comments.

Source: Themehunt

Posted on November 13, 2018 by Harnaaz — Leave a comment

Essential Photoshop CC 2017 shortcut keys for designers

The most vibrant platform you can apply your creativity on is Photoshop if you happened to be a designer. Your opportunities of displaying your imagination through your design is at it’s highest when you are on Photoshop. Design is the first thing people notice about a website or anything you make. Sometimes having a great sense of design embedded in mind is not enough. Mastering the tools and manipulating the easiest way are the two key methods to boost your performance.

Underscoring the facts that you need to be handy with the tools, we come up with some very important Photoshop shortcuts that would boost your performance and ease your work. On the top of everything they will save your valuable time.

The best part is you can set your own shortcut in the settings which we will cover in some other articles in future. Here we present the most essential Photoshop shortcuts for you.

Image Command Shortcuts

	Mac	Windows
Adjustments
Levels	Cmd+L	Ctrl+L
Curves	Cmd+M	Ctrl+M
Hue/Saturation	Cmd+U	Ctrl+U
Color Balance	Cmd+B	Ctrl+B
Black & White	Opt+Shift+Cmd+B	Alt+Shift+Ctrl+B
Invert	Cmd+I	Ctrl+I
Desaturate	Shift+Cmd+U	Shift+Ctrl+U
Auto tone	Shift+Cmd+L	Shift+Ctrl+L
Auto Contrast	Opt+Shift+Cmd+L	Alt+Shift+Ctrl+L
Auto Color	Shift+Cmd+B	Shift+Ctrl+B
Image Size	Opt+Cmd+I	Alt+Ctrl+I
Canvas Size	Opt+Cmd+C	Alt+Ctrl+C
Record Measurement	Shift+Cmd+M	Shift+Ctrl+M

Layer Command Shortcuts

	Mac	Windows
New
Layer	Shift+Cmd+N	Shift+Ctrl+N
Layer via Copy	Cmd+J	Ctrl+J
Layer via Cut	Shift+Cmd+J	Shift+Ctrl+J
Create/Release Clipping Mask	Opt+Cmd+G	Alt+Ctrl+G
Group Layer	Cmd+G	Ctrl+G
Ungroup Layers	Shift+Cmd+G	Shift+Ctrl+G
Arrange
Bring to Front	Shift+Cmd+]	Shift+Ctrl+]
Bring Forward	Cmd+]	Ctrl+]
Send Backward	Cmd+[	Ctrl+[
Send to Back	Shift+Cmd+[	Shift+Ctrl+[
Merge Layers	Cmd+E	Ctrl+E
Merge Visible	Shift+Cmd+E	Shift+Ctrl+E

View Commands Shortcuts

	Mac	Windows
Proof Colors	Cmd+Y	Ctrl+Y
Gamut Warning	Shift+Cmd+Y	Shift+Ctrl+Y
Zoom In	Cmd++Cmd+=	Ctrl++Ctrl+=
Zoom Out	Cmd+-	Ctrl+-
Fit on Screen	Cmd+0	Ctrl+0
100%	Cmd+1 or Opt+Cmd+0	Ctrl+1 or Alt+Ctrl+0
Extras	Cmd+H	Ctrl+H
Rulers	Cmd+R	Ctrl+r
Snap	Shift+Cmd+:	Shift+Ctrl+:
Look Guides	Opt+Cmd+;	Alt+Ctrl+;
Show
Target Path	Shift+Cmd+H	Shift+Ctrl+H
Grid	Cmd+’	Ctrl+’
Guides	Cmd+;	Ctrl+;

Select Command Shortcuts

	Mac	Windows
Select All	Cmd+A	Ctrl+A
Deselect	Cmd+D	Ctrl+D
Reselect	Shift+Cmd+D	Shift+Ctrl+D
Inverse	Shift+Cmd+I or Shift+F7	Shift+Ctrl+I or Shift+F7
All Layers	Opt+Cmd+A	Alt+Ctrl+A
Find Layers	Opt+Shift+Cmd+F	Alt+shift+Ctrl+F
Refine Edge	Opt+Cmd+R	Alt+Ctrl+R
Modify
Feather	Shift+F6	Shift+F6

Our selection of the shortcuts is meant to accelerate your workflow and ease your effort in design. If you want to exert your creativity in design with a commendable speed then you must apply these keyboard shortcuts whenever you design something on Photoshop. If you are satisfied with your speed and method, we still recommend you to follow this and see the changes afterwards.

Source: Themehunt

Posted on November 13, 2018 by Harnaaz — Leave a comment

How to build a great dashboard that everyone loves?

The importance of having dashboards for different websites is unequivocal. Whatever the services or products are the websites about, the need of having a dashboard for them is immense. Day by day it is growing with the increase of business websites. So it opens a Broadway for smart people to start a business of providing a perfect dashboard for the people who need them. If you are one of those smart ones thinking about launching a great dashboard that people take by storm, here’s a guideline on how to build a great dashboard that everyone loves.

Explore the market

Take a deep breath and admit when you are thinking about building a dashboard, there are plenty of them already in the market. So, if it is not great and different from the traditional ones, it is not going to be one of the best selling items in its category. Don’t worry. After going through a quality research, you will discover what makes a great dashboard. This is why it is important to see the trending products and find the reasons behind their success. The best part is, you can get inspiration and conceive your dream dashboard idea that you think will reign the market in days to come.

“Exploration is the engine that drives innovation. Innovation drives economic growth.” – Edith Widder

If you check more items in the market you will be able to bring innovation to your one. Check as many dashboard items as possible. Make sure you go through the most popular and successful ones.

Decide the key performance indicators (KPIs)

Understanding your key performance indicators (KPIs) is the key to creating a great dashboard that your users love to interact with. Your KPIs must be the first thing users see as they start using your Dashboard. Every application, from mobile fitness apps to powerful online analytics software, is built around a few key performance indicators. Google Analytics tracks conversions and traffic, while MyFitnessPal tracks calories in, calories out, and weight loss. We recommend you to study a variety of applications, from Twitter to Google Analytics and inspect how they make KPIs. Make sure your dashboard does not miss any of the essential ones.

Craft the structure

When you have researched and got inspiration from many similar items, you better start working on your project. So, crafting the structure is the right thing to do at this stage. The look of your dashboard is definitely the first thing the users will consider while purchasing your dashboard. Despite having all necessary functionalities, your dashboard is not going to be one of the people’s favorite if that does not look good. Here are some things to do for a better presentation.

Organize wisely: Keeping the right metrics at the right place is something so important. Make your dashboard navigable for the users so that it becomes easier for them to manage things.

Choose the right color: Picking the right color is a big part of your creativity. Your previous research will help you choose the right color for different parts of the dashboard.

Keep things simple: Building something innovative doesn’t mean you have to have everything in there to draw attentions. Most importantly, make sure you have all the essential features without making it a mess. Don’t miss the basics. In a word, keep it short and simple.

Must have features

A dashboard may have plenty of features. Make sure your dashboard template have all the core features mentioned below.

Tables
Notifications
Tasks lists
Cards (for different types of forms and easier visualization of information)
Charts (donut chart, line chart, bar chart)
Google Maps

Add as many as you want but don’t miss any of the above.

Sorting and filtering

A dashboard is not something that the website visitors will have anything to do with rather it is something that helps the website owner to keep tracks of the website performance and present metrics for different user actions on the websites. So what a website owner will mostly do on his /her dashboard is knowing the data and sometimes sort them and filter them whenever necessary. Make sure your dashboard has that in the system.

Technologies

It does not matter what technologies you build the dashboard with. But the advanced technologies will always give you the updated functionalities. Sometimes the customers check what you’ve used to build the product. Here comes the list of the technologies you may use to build a great dashboard.

Bootstrap: The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Font: Google Fonts.
Font Icons: Font Awesome gives you scalable vector icons that can be customized using CSS.
Stroke 7 Icons: A complete set of 202 thin stroke icons inspired by iOS 7.
Chartist.js : Responsive, scalable and good looking charts.
Bootstrap Notify : This plugin helps you turn standard Bootstrap alerts into “growl” like notifications.
Google Maps : Plugin for viewing maps.
Unsplash : Free high-resolution photos.

Support and update

Building a great product is not enough to top the list. You have to offer support for your product. Your users may run into some problems along the way. If you don’t fix those issues, they will not consider to use your dashboard anymore. In fact, support builds a rapport between you and your users and keeps your business alive. You have to update your product on a regular basis. There could be some other dashboards in the market launched after yours. If they provide some attractive features which your one does not have, you will no longer be among the best. Keep updating your dashboard template with advanced technologies and features.

If you follow this whole post, hopefully, your dashboard will lead the competition. Please don’t forget to share this post with your friends and team members. Happy developing!

Source: Themehunt

Posted on November 13, 2018 by Harnaaz — Leave a comment

Add a CSS preloader animation to your website

Your website may take a little more time to load all the contents regardless of how lightweight or fast your pages are. There are other contributors to this factor like your site visitors’ poor internet connection. Having a complete blank webpage on screen while waiting for the website to load is a boring experience for the visitors. This is where the CSS preloader comes into play.

With many pages on your site, you might be thinking what to do to add a preloader. Hakuna matata. Today, we will tell you how you can do this in the quickest possible way.

How to add CSS preloader to your site

Adding a CSS preloader to your website is pretty simple. It is just about a few lines of code. Even a non coder can do this just by copying and pasting these codes. Let’s see how it is done.

(Your desired preloader animation may be different but the process to do this is almost alike. We are giving you an example on how you can make changes to bring your desired preloader animation on your site.)

1. Add the following code snippet to your index.html file right below the body tag.

2. Open your CSS file and add these CSS codes there.

.pre-loader { background-color: #2c3e50; position: fixed; height: 100%; width: 100%; left: 0; top: 0; } .sk-fading-circle { margin: 100px auto; width: 40px; height: 40px; position: relative; } .sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #fff; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } .sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .sk-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .sk-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .sk-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .sk-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .sk-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .sk-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .sk-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .sk-fading-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .sk-fading-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .sk-fading-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } }

3. Add the following piece of jQuery code to your JS file.

(function($){ 'use strict'; $(window).on('load', function () { if ($(".pre-loader").length > 0) { $(".pre-loader").fadeOut("slow"); } }); })(jQuery)

If you have followed each step accurately your preloader will start working immediately. Visit your website to check.

Possible online sources to get such CSS codes from:

We thank SpinKit for some of the codes

Source: Themehunt

Posted on November 13, 2018 by Harnaaz — Leave a comment

Top 10 JavaScript optimisation tips to sharpen your professional skill

Since you are reading this article, you’re already familiar with the miracles that JavaScript can do. And most importantly, you are the one making them happen. These 10 JavaScript performance optimization tips will help you do your job even more professionally. Let’s dive in:

#1 Reduce library dependencies

Loading time depends a lot on library dependencies, so it’s advised to use them as less as possible and avoiding them is even better. A brilliant way to reduce external library dependency is to take advantage of in-browser technology. In case you need to use complex a CSS selector, then go with Sizzle.js.

#2 Minify JavaScript

Removing redundant and unnecessary data from your code without affecting the way a browser processes the resource is minification. For instance, removing unused code, shortening function and variable names, code comments and formatting. A popular code minification tool is Google Closure Compiler.

#3 Minimize scope chain

The immediate scope chain, the arguments of a function and any locally-declared variables are instantiated when any function is executed in JavaScript. So, to access a globally-declared variable, it takes time for climbing up the scope chain. Using ‘this’ keyword and reducing the call stack’s dept will speed up execution.

#4 Using ‘this’ keyword

this keyword works as a local chain and the way it helps is, it reduces the dependency on global variables as well as closures that are in higher scope chains. On the contrary, it’s advised to avoid with keyword. Because it can modify the scope chain. To rewire the scope variable follow this example:

var Car = Object.create({
    init: function(brand) {
        this.brand = brand;
    },
    do: function(callback) {
        callback.apply(this);
    }
});

var audi = new Car('audi');
audi.do(function() {
    alert(this.brand); // 'audi' is alerted because 'this' was rewired
});

#5 Use Async and Defer

Synchronous loading needs to wait until the previous asset finishes loading but asynchronous loading can be loaded simultaneously. So to take advantage of asynchronous loading use async attributes. For example:

<script src="/example.js" async></script>
//load example.js without interrupting webpage rendering

#6 Cache as much as possible

Caching is the best way to reduce the loading time. Leveraging browser caching along with caching mechanisms like a content delivery network is a brilliant move. This helps a previous visitor as well as a first-time visitor load assets quickly.

#7 Taking advantage of native functions

Using native functions and constructs will optimize the JavaScript performance more than writing own algorithms or relying on host objects. ECMAScript is a very large directory of native constructs.

#8 Make a batch of DOM changes

It’s advised to prevent repeated screen rendering so whenever any DOM change is made, batch them up. In case of style changing, make all modifications at once instead of changing styles separately.

#9 Trim HTML

The loading time of a query and modified DOM objects largely depend on the webpage’s HTML. Cutting half HTML of an application can double the DOM speed. It’s tough but removing unnecessary <div> and <span> tags would be a great start.

#10 Using throttle debounce when necessary

The last tip is about fine-tuning the performance of your application. Setting a maximum limit of how much JavaScript will execute at once is a great way to do so. Throttling sets the max number of times a function can be called and debouncing makes sure that a function can’t be recalled within a certain period of time.

So there you have it: the top 10 performance optimization tips on JavaScript. Start following them right away to boost up your career. Thanks for being with Askbootstrap. Happy coding 🙂

Source: Themehunt

Posted on November 5, 2018 by Harnaaz — Leave a comment

ThemeForest Rejections: Types And Reasons

The product should meet certain requirements in order to be sold in Envato marketplace. Otherwise, it will get soft rejected or hard rejected status.

What does Soft Rejected status mean? The Product is almost ready to go up for sale on Envato Market, but it still needs some minor improvements to be accepted. It can be submitted once again after all remarks/comments are considered.

What is a Hard Rejection? Hard Rejected means that the Product is not suitable for sale on Envato Market. Hard Rejected submissions cannot be re-submitted.

Reasons for Soft Rejects:

If the logo “WordPress” in written incorrectly, for instance: WordPress or wordpress;
If the Theme includes bugs while testing the “theme check” plugin.
If the Theme does not meet Markup Validation requirements (https://validator.w3.org/)
If Premium plugins are not the latest versions;
If Premium plugins are not included in the package;
Unit test is not displayed in an appropriate way;
Posts, widgets, search page, 404 page, menu, images are displayed incorrectly;
Navigation on the main page does not work at all or works with some mistakes;
Sticky Posts are displayed inappropriately;
Comments are displayed incorrectly;
Typography mistakes or paddings issues;
Design is not responsive;
If browser displays Javascript errors in Console;
If the product does not follow WordPress PHP Coding Standart https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/ ; ;
If PHP, JS, CSS libraries are not the latest versions;
If JS library is included in WordPress by default (You can find the list of JS libraries included in WordPress by default here: https://developer.worHYPERLINK “https://developer.wordpress.org/themes/basics/including-css-javascript/”org/themes/basics/including-css-javascript/;
If .POT file is missed;
If the esc function for dynamic data display as well as data used for other purposes is missed;
If the text appears by default, although it was not added by user;
The Theme includes unused code or hardcode;
The name of the comment add button or the field name to write the comment text is incorrect;
If button which submits comment or field for comments are named incorrectly
Bed quality theme screenshot or it does not match the size of 1200 x 900;
If the Theme includes not clickable links
Due to mistakes in documentation
If shortcodes, custom post types, widgets, SVG support are created with the help of options in the Theme. This feature functionality should be generated in one plugin
If Debugger returns PHP, warning, notice message. And the following rules had not been adhered by developer while writing the code:
if the prefix is not added to functions, classes, constants, custom images sizes, hooks, global variables, handles styles and scripts which refer to the theme: http://themereview.co/prefix-all-the-things/ ;
If a tip how to add menu does not display ( in case it is not installed)
If the force_deactivation for plugins has status ” True”
If the verification is_active_for sidebar is missed;
If google fonts are added incorrectly. How to add google fonts in WordPress: https://gist.github.com/kailoon/e2dc2a04a8bd5034682c
When empty tags are displaying or the following errors occur:
The word “Categories” or “Tags” appears in posts, while there are no categories or tags itself.
The word “Comments” displays when the comments are absent;
Another fault of this type;
If the content is missed at the beginning of the file for CSS and JS files.

Reasons for Hard Rejection

Template does not meet basic requirements or is not unique
Design issues with the following template categories: PSD, HTML, WordPress);
Different padding/margins;
Typography issues;
Problems in code
Other;

Posted on November 5, 2018 by Harnaaz — Leave a comment

Important things you need to know about Bootstrap 4

The Bootstrap team released the first alpha version of the popular front-end framework back in August 2015. In December of the same year, Bootstrap 4 alpha 2 arrived. More experiments are definitely on the way. While we expect the final package release as soon as possible, here are some important information you should know about Bootstrap 4.

1. Less to Sass

Bootstrap 4 has been moved from Less to Sass which means the future is faster than ever with speedier compilation. It also indicates that you will be joining a huge Sass developer community.

2. New Grid System

Bootstrap 4 has overhauled grid system. Ems and rems are used where appropriate instead of pixel to ensure better responsiveness on different sizes of screens, especially mobile devices.

3. Five Major Colors

The upcoming version of Bootstrap has 5 major colors. Each of these colors has its own class and prefix. You can use them in buttons, links, alerts etc.

4. Improved Navigation Bar

The navbar in Bootstrap 3 had so many classes which was a bit tricker to utilize. Bootstrap 4 will have fewer classes than the predecessor. Additionally, the new version will come with more color schemes and menu options.

5. Opt-in Flexbox

You can optionally use CSS3’s Flexbox mode for more responsive layout. Flexbox provides a flexible container that shrinks or expands the element size according to different viewpoints. However, the feature will work on browsers higher than Internet Explorer 9.

6. Easier Customization Options

Unlike v3, gradients, shadows, transitions and so on would not required to be included in a separate stylesheet in v4- rather you can use these options with Saas variables.

7. Compatibility and Support

Bootstrap 4 drops Internet Explorer 8 support to utilize the latest web technologies. Bootstrap 4 will have an improved documentation collection. More realistic examples, better code snippets and advanced search ability are also coming. Support (for example, critical bug fixes) and documentation updates for Bootstrap 3 will be continued. jQuery 2 support has been added to the new version of the framework. All of the JavaScript plugins have been rewritten in ES6 to enjoy benefits of modern web facilities.

What else do you expect or want to share about Bootstrap 4? Please tell us via comments!

Source : Themehunt