Web Tips and Tricks – Page 2 – Webartinfo

Posted on August 14, 2019 by Harnaaz — Leave a comment

Gatsby Easily Start with bootstrap

Hello Everyone.

Today We are going to discuss about one of the best framework gatsby’s starter include react-bootstrap. Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps.

First of all Install Node.js and npm in your system

Gatsby is built with Node.js. To get up and running with Gatsby, you’ll need to have a recent version installed on your computer. you can get it from here: https://nodejs.org/en/download/

To confirm Node.js installation Open up the terminal and Run node --version it will show the currently installed version in your system after that check Run npm --version as the same way.

After successfully installation now time to Install the Gatsby CLI.

Run npm install -g gatsby-cli

Now your system environment ready to develop gatsby website and we are going to get all the source code of gatsby bootstrap stater project. we can directly download from https://github.com/billyjacoby/gatsby-react-bootstrap-starter this link and also if you using git clone this repo by using git clone https://github.com/billyjacoby/gatsby-react-bootstrap-starter.git.

Whenever all the source we get now Run yarn install or yarn. yarn install is used to install all dependencies for a project.

After all done. now Start development server.

Run gatsby develop

Gatsby will start a hot-reloading development environment accessible by default at localhost:8000

Thank you !!

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 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