web design

Calling javascript function “asynchronously”

asynchronous function calling in javascript

Javascript is not a multi-threaded programming language, because it is not multi-threaded we can’t call a function asynchronously, but there is workaround (or hack) to call functions asynchronously in javascript.

The advantages of calling functions asynchronously is that the script runs without waiting for the return value from the function which is called.

To make a function asynchronous we need to encapsulate the function in a method that by-pass the function without waiting for its return value.

To do so, we will use setTimeout() function in javascript.

Let’s learn how to call a function asynchronously in javascript:

For example we want to call fetch() function asynchronously, we need to call this function using setTimeout() method.

1
2
3
4
5
6
7
8
9
10
11
function async() {
setTimeout(function(){
fetch();
},0);
}
async(); // It will call the fetch() function asynchronously

Now when we want to call the fetch() function asynchronously we just need to call the async() function.

Still javascript is not asynchronous

Javascript is a single-threaded programming language, and it can not call functions asynchronously (at-least for now). The code above will emulate asynchronous call method, but the processing will be done in the form of single block process. So we can say that setTimeout() create an illusion of asynchronous call.

web design

Coming out of Black in Typography

Do you notice the color of the typography on the websites you visit regularly? Almost all of them use the Black and White combination for the typography and the content area. So you might ask whats the problem with that.

2011 was the year of big changes in the web designs. After that year the modern web we see today was born. The sophisticated, crappy looking site are designed modern, simple and elegant. Lots of widget in the sidebar are replaced with the few required once. All that changes took decades to come into existence.

I like these changes in the design, but there is one thing that I don’t like. That is now we all are stuck with the black font color and white backgrounds.

The classic designs are diminishing and soon will come to the end.

Black font on the top of white background doesn’t means to increase the effectiveness of the content. The same effectiveness can also be achieved by using other colors.

Why we are struck with black? Why we are all using the same design concepts of typography? Is their any fear of failure which is stopping us to use our own creativity in designing process.

Lets use our creativity at the designs we make. I know all designs are not successful, but we can’t stop trying new things.

Lets break some rules and make our own rules. What do you think?

In future posts I’m going to post new articles about how we can create good designs.

web design

How To Sell Virtual And Real Things Using WordPress

You are an aspiring entrepreneur who want to change the world and make others life easy. You spent countless hours building an awesome product and it’s the time to release your product to public and make some sales. You are familiar with WordPress and want to use it to sell your digital items or ship real items to the buyers. How would you do that?

Table of Contents:

  1. Selling Virtual Goods Using WordPress
  2. Selling Real Items Using WordPress

How to Sell Virtual Products Using WordPress

It’s easy to sell things using your WordPress site. If you want to sell digital items like softwares, music or pictures etc. You can use the EasyDigitalDownloads plugin. It is the best solution to sell virtual goods, because you have everything you need to sell any digital item.

Also EasyDigitalDownloads has a big useful collection of extension which are the tools which provides additional features that you might need for your specific need. Some of them are free and some are paid. But you get a great support for everything you pay for.

octet-stream

How To Use EasyDigitalDownloads

Setting up and running the EasyDigitalDownloads is very easy. In this post I’m going to give you a walk-through to Install and Setup EasyDigitalDownloads on your site.

First step is to download the EasyDigitalDownloads, you can download and upload the plugin manually from Here, or search for “EasyDigitalDownloads” from the WordPress Dashboard plugins page and install and activate the plugin.

  1. Go to Downloads > Settings and configure the options
  2. Create Downloadable products from the Downloads page
  3. Insert purchase buttons for any download via the “Insert Download” button next the Upload Media buttons

How to Sell Real Products Using WordPress

If you are selling a Real product which you need to ship to the buyer, I recommend you to use WooCommerce Plugin.

WooCommerce allows you to have the buyers address and many shipping and order processing related features which are great for selling goods.

woocommerce-logo

How To Use WooCommerce

Setting WooCommerce is relatively harder than the EasyDigitalDownloads.

First step is to download the WooCommerce, you can download and upload the plugin manually from Here, or search for “WooCommerce” from the WordPress Dashboard plugins page and install and activate the plugin.

Now you know how to sell anything using WordPress and some plugins. Isn’t that’s easy.

web design

Git Beginners Guide : The Complete Guide to Git

Git is the world’s best version control System available. It is developed by Linus Torvalds who is the creator of Linux kernel to manage the source code of the Linux. In this git beginners guide you will learn how to use git in your projects.

Why You Need Git

Although there are many other version control systems available but Git makes developers life easier by providing the most powerful and easy-to-use version control tools. With a version control system (VCS) you can have track of every changes you or others made to the project. With Git you can roll back the previous changes and work with other developers at the same time by dividing the tasks and then merging all the new features which are developed by other developers in the project.

Git is a distributed version control system it means it allows many developers to work on a given project without requiring them to share a common network. Each developer has its own copy of the project and he/she can make changes without requiring an internet connection or other network connection . When a feature or a change in a project is complete by one developer then he/she can push the changes to the central repository. And other developers can easily update their current working repository with all the new changes and commits made to the central repository using a pull command. It’s the magic of using a Version Control System (VCS).

Getting Started With Git – git beginners guide

In this guide I’m assuming that you have git installed on your computer. So lets begin.

Repository

Repository is the place or a folder where you store the project source code. All the changes you make to the project will be saved in the same repository in a folder named .git, the .git folder is hidden by default in OSX.

Since all the changes in a project be stored in the repository, so creating a repository is our first step. Let get started.

Creating A Repository in Git

To create a repository we use the git init command.

There are two ways to create a repository. One is to create the repository in a new folder and the other is to create the repository in an existing folder.

The first method – Creating an empty repository

In this method we are going to create a repository which does not contain anything. The following command will create a repository in which you can copy and paste your project code. For example lets create a new repository called “my_project”.

git init my_project

Git Command to create a new empty repository
Git command to create a new empty repository

The second method – Creating a repository in an existing project folder

In this method we will create a repository in an existing folder which contains the project. We will again use the git init command to create the repository but this time we will first navigate to the folder where we want to create the repository.

For example we want to create a repository in a given folder which contains the project. We will do the following steps.

creating repository in an exsiting folder
Creating repository in an existing folder

1. First we will navigate to the project’s folder.

2. Use the git init command to set up a repository.

Now you know how to create a repository. Let move to the next step i.e. committing the changes you made to the code.

Committing changes

Before you commit changes in your project you need to tell the git which file(s) needs to be committed or tracked , this process is called staging a file. To make a commit in git when first need add file(s) to staging area.

But before you add the file(s) to staging area you have to find which file(s) are untracked. To do this you can use git status command.

git status

Checking for untracked files in git
git status

You can see from screenshot above that the “functions.php” file is untracked. So lets add it to the staging area.

To add files to staging area we use the git add command.

git add

Adding files to Staging area in git
git add

Now you can make your first commit to the project. To make a commit in git, git commit command is used.

Committing the changes in Git
git commit -m “My first commit”

git commit -m "My first commit"

-m tag specifies the description of this commit in this case it is “My first commit” .

Branches

Branches are the most useful feature of git version control system. Branches gives you the ability to work on different features of the project on the same time and when the features are complete you can merge them into one, so you don’t have to wait for one feature to complete before you work on other features.

Branches in Git
Branching in a project

Creating a feature branch in Git

In git creating a new branch is very easy. To create a new branch in a repository we use git branch command.

Creating new branch in git
git branch

git branch new_feature1

Where new_feature1 is the name of the new branch. You can use git checkout command to switch between branches.

If you check the commit log in new_feature1 branch using command git log , you will see all the commits you made to the master branch. Now if you make new commits in the new_feature1 branch you won’t see them in the master branch until you merge the changes to the master branch.

After the work on the new branch is complete you can merge it to the master or other branches you have using git merge.

Merging with Git

Merging with Git is easy. To merge a feature branch into another branch we use the git merge command.

For example lets merge the new_feature1 branch to the master  branch. To do so first we have to goto the branch in which we want to do the merge, In this case it is master branch.

Merging a branch to master in Git
git merge

After we are in the master branch we can merge any branch into the master branch.

git merge new_feature1

Now you know how to merge two branches in Git. You have covered the basics of Git and now you can use git in your projects.

Some more basic commands

  • git status ⇒ Show the current branch, files which are changed etc.
  • git log ⇒ Show all the commits with the description.

It’s time to learn some quick commands to make the operations fast

  • git -a -m “Description”   ⇒ The -a tag select all the files in the repository into the staging area at once. So that you don’t need to add each file manually in the staging area and -m tag commit the changes, all at once.
  • git branch -D branch_name  ⇒ Use this command to delete a branch.
  • git checkout -b new_branch_name ⇒ Use this command to create a new branch and move to that branch at once.
web design

23 Web Design Tips to Become a Better Designer

Good web design is not only about the looks, a good design is functional, innovative, aesthetic, honest and user-oriented. And in this post we will learn the fundamental rules of designing.

You need years of experience to create a good design.

D-E-S-I-G-N is not how it looks, its how it works. Design is what makes people smile.

Good design is not only about the looks, a good design is functional, innovative, aesthetic, honest and user-oriented. And in this post we will learn the fundamental rules of designing.

Lets start with the fundamental rules of the designing.

1. Simplicity is the ultimate sophistication

Nothing ever matched with what simple things could do. Good design is as little design as possible. Before the iPhone many phones came out with the same features but they all missed one feature of iPhone which is ease of use and simplicity of the iPhone.

2. Shadows are not always black

This means you should not use 100% black (i.e. #000 , rgb(0,0,0) ) as a primary color in your design. The chances are that you end up with breaking the user experience.

3. White Space is necessary

It is the default space left out around the content to make it more readable. White space insures a good structure and layout in design and it gives focus to the content.

4. Design for Branding

It helps to keep up the coherence in the design. And at the end improves design.

5. Proximity

The elements that are close to each other are perceived more related than the elements which are far from each other. (a, below)

6. Similarity

Users treat elements as a group that has similar visual characteristics. (b, below)

7. Follow Trends (or create one)

Keep up to date with the latest design trends. “Trends” doesn’t mean “copy”. It will help to create new designs.

8. Ask People

Always take feedback from people before finalising the design.

9. Use colors responsibly

Choose colors that are good to eyes and limit color palate to maximum 4 colors.

10. Remove unnecessary elements

20% elements get 80% attention. So remove the unnecessary elements. So that important elements get more attention.

11. Create Prototypes First

Many times new design look better in mind, but it’s not that good in reality. So it is a good idea to create a prototype first.

12. Make headlines pop

Headline are the most important elements of a page because they convey action.

13. Make the text easy to read

Use fonts that are easy on eyes. And choose the font color wisely.

14. Use hierarchy in design

Place the most important elements at the top and the second most important after it. Place elements in the order of their importance.

15. Create Depth in Design

Use images and layers to create depth in a design. The elements of depth add a touch of reality in the design.

16. Sense of action on hover/click

Create an effect that give a sense of action, when hover on a link, button or click-able elements.

17. Appropriate Line height

Spend time with fine tuning the typo. Find the proper line height with this tool: http://www.pearsonified.com/typography/

18. Ask “why” 

Think do you really need this element. If not then remove it. It makes design look better.

19. Motion

Motion provides meaning, and serving focus to attention. Motion adds life to a design.

20. Good artists copy, Great artists steal

Good artists copy; great artists steal.

21. Think like an end-user to check

Think like an end-user when evaluating any design. It helps to find weak points in the design.

22. Define typography first

Typography is the laying foundation of any great design. So start the designing process by defining the typography first.

23. Create a style guide

It makes the workflow fast and consistent.

Conclusion

Above are some great tips to become a better designer. These are the fundamental rules of designing and if you follow them you will end-up with something great.