Other Freelance Jobs

Something about Website Design

Every satisfied customer on every website starts in the hands of a experienced web designer. This professional has the ability to capture the client’s vision, bring the design elements to life, and ultimately create a website that appeals to consumers. This is not easy task since it involves both creative and technical abilities, so a top web designer is experienced in many different disciplines. 

Likewise, an in-demand website designer will also have insights into the business and marketing worlds to understand how a website can meet a client’s needs, convey their brand, and help embrace new customers online. This knowledge is used to maximize things like lead generation and overall engagement levels.

Web Design vs. Web Development In A Nutshell

In essence, web design refers to both the aesthetic portion of the website and it’s usability. Web designers use various design programs such as Adobe Photoshop to create the layout and other visual elements of the website. Web Developers on the other hand, take a website design and actually make a functioning website from it. Web developers use HTML, CSS, Javascript, PHP and other programming languages to bring to life the design files. 

Web Design – A Closer Look

Web designers must always begin by considering a client’s website objectives and then move on to an Information Architecture (IA) to set a website’s information hierarchy and help guide the design process. Next, web designers can start creating wireframes and finally move to the design stage. Web designers may use several basic design principles to achieve an aesthetically pleasing layout which also offers excellent user experience.

Design Principles

Balance – It’s important for web designers to create a balanced layout. In web design we refer to heavy (large and dark colors) and light (small and lighter colors) elements. Using the correct proportion of each is critical to achieving a balanced website design.

Contrast– In color theory, contrasting colors are ones placed opposite one another on the color wheel (see also complementary colors). Web design offers a few other areas where contrast is applicable. Designers look at contrasting sizes, textures and shapes to define and draw attention to certain sections of the website.

Emphasis– We touched on this a bit when discussing contrast. Emphasis is a design principles founded in the intentional “highlighting” of certain important elements of the website layout. It’s important to note that if you emphasize everything on the page you end up emphasizing nothing. Imagine a page in a book where 80% of the content is highlighted in yellow…does anything really stand out? This is the time to take a look at that Information Architecture for direction.

Consistency – Also called repetition or rhythm, consistency is a critical web design principle. For example, clean and consistent navigation provides the best user experience for your website visitors.

Unity – Unity is the relationship between the various parts of the website layout and the composition as a whole. Based in the Gestalt theory, unity deals with how the human brain visually organizes information by grouping elements into categories.

Web Development – A Closer Look

Web developers, sometimes called programmers, take the design created and build a fully functioning website. To put it (very) simply, think of the design as a non-interactive “picture” of a website. Developers take that design and break it up into it’s components. They then either use just HTML or a more dynamic approach incorporating programming languages such as PHP to develop the various website pages. More advanced web developers may choose to utilize a Content Management System (CMS) like WordPress or Joomla in order to streamline development and allow clients an easy way to maintain and update their website.

Web developers may convert a static layout into a dynamic website by using image and content sliders, active states for links and buttons, and other interactive elements.

Defining your project and writing a perfect job description

It pays to do a little bit of homework before hiring a web designer since it can have a drastic effect on the overall price and the quality received. For example, a simple website without any large customizations can be launched with a pre-made theme at a minimal cost. This may not be suitable for websites anticipating lots of custom layouts and/or extensive traffic, so it’s good to know up front what type of designer will be required or if you’ll also need a developer.

Web Design Job Post Template

Take a look at an example web design project description. Keep in mind that many people use the term “job description,” but a full job description is only needed for employees. When attracting a freelancer as an independent contractor, you typically just need a requirement of work, job post, or any other document that describes the work to be done.

<Project Title>

Project Overview

ABC Company is looking for a web designer to create a custom theme for our e-commerce store. This project will be to create a responsive, mobile-friendly design.

Deliverables include:

Mock-ups for each page of e-commerce site (approximately 20 pages)

Custom navigation and HTML elements

Graphics integrated into two homepage carousels (12 images total)

Setup of online shopping basket

Deadline for deliverables:

All tasks must be completed by <date>.

This project requires the following skills:

Expertise working with <design software>, <mobile/responsive framework>, <Adobe Photoshop>, or <CMS template builder>

E-commerce experience is a plus

Understands responsive design

The work will also require a great view for detail and preliminary retail experience, preferably in the electronics/automation industry. We would like to begin this project no later than <date>, so we plan on hiring a candidate by the end of the week.

Analyzing Web Designer Profiles & Portfolios and Hiring Freelancer

After posting a detailed, well-thought-out project description that defines what you’ll need from your web designer, it’s time to start analyzing proposals. How do you select the top talented designer for your project?

Experience, Smartness & Work

When it comes to finding the top talented web designer, start by reviewing for portfolio samples that match your requirement. Be sure to ask freelancers about their experience with other facets of design as well, and consider the overall goal for the website being built. 

Finally, it’s important to verify that a web designer understands the brand in question and its overall goals online. A qualified professional will be able to give a list of any expected obstacles, plus estimate the amount of time the project will take and the total cost. Since complex website projects could require months to complete, a good working relationship is essential.

With the right freelance web designer, you can end up with a finished product that brings your vision to life. Just take the time to create a detailed project description, review each freelancer’s proposal and portfolio, and ask them a few web design interview questions to determine if they’re the right fit for the project.

PHP (recursive acronym for PHP: Hypertext Pre-processor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.

PHP is one of the main languages used in dynamic web development. It’s one of the oldest language and a common component in the LAMP stack (Linux, Apache, MySQL, PHP). If you want to create a website or any back-end web service, PHP is one of the main languages you can choose from. If you need revisions to an existing application that runs on a Linux server, it’s common for the back-end coding to be done with PHP.

About PHP Developers

PHP developers are often simply called “back-end engineers.” A PHP developer is responsible for writing server-side web application logic. PHP developers usually develop back-end components, connect the application with the other (often third-party) web services, and support the front-end developers by integrating their work with the application.

They’re turn client’s specifications into a workable, tangible product that runs on a web server. Although PHP can run in a Windows environment, it’s more commonly used on Linux servers with Apache running as the web client. Many PHP developers package their applications this way with Linux and Apache to make it easier for the client to host it.

PHP developers code the functionality and brings an app to life. Collaborating with designers, they ensure that the front-end application is appealing to users. You may find that some PHP developers have front-end design skills, but often times, they work with UI and UX designers to create a user interface that’s engaging and supported by solid back-end functionality.

What Can You Expect from a PHP Developer?

It is a PHP Developer's job to write, test and maintain the code for web pages and computer graphics programs. They use PHP, a widely used scripting language, to build websites, programs and applications that computers follow to perform functions. They are also responsible for writing, troubleshooting, testing and maintaining the source code for computer programs. If needed, PHP Developers also assist team members in problem solving.

A PHP developer should be able to visualize your application and what you need based on your conversations and documentation (if you have any). They should be able to understand your business so that they can provide you with an application that supports your goals and business logic.

PHP developers mainly create two types of applications: web apps with a database background, and APIs that provide your existing software and data to mobile apps and other developers. PHP code powers the back end of a web app, so a PHP developer will design and architect your code and the way it works to support the front end. APIs are often used when developers or apps need to query your internal data, and they allow you to provide this data to the outside world. For instance, your app might pull a list of tweets from Twitter’s API. A PHP developer will read the API documentation and implement it into your website. APIs are also used with some mobile apps to power the app’s data services.

Deliverables could be full source code files, or some developers help you upload the code to your web server of your choice choice. If you’re building a website from scratch, it’s vital that you choose a developer with the skills necessary to tackle a project from the ground up. A senior-level developer will know how to manage a project (they might assign a project manager), set expectations, estimate costs, and give you organized, scalable code that you can work with for years.

Just like other development areas, PHP developers have a variety of skill sets and levels. Senior-level PHP experts often have several other languages in their arsenal. They should be able to design a full application from the ground up. Junior-level developers have a few years of experience, but they often need to work with, or have their work reviewed by, a senior-level developer to ensure that code is efficient and properly written.

Defining Your Project

A developer can only do as good of a job as the specifications or information they get from the client. Communication is key so that your PHP developer fully understands your concepts and goals. When you post a project, you must be able to communicate key elements so that you can get the best estimates from the best developers.

Before you post a project request or talk to developers, you should sit down and map out your idea. This can be done using images, presentations, or other types of documentation. For instance, you can draw your own wireframes and then explain each concept in writing. Developers bidding on your project can get a better idea of what needs to be done and estimate far more accurately.

It can be difficult for a client to understand the duration of a project and its cost, but a developer can sit down and discuss project scope, a reasonable timeline, and any deliverables that you can expect during the project’s development process.

Writing a Project Description

Once you know what you want from your end product, it’s time to write your project description. You need to be concise but provide enough detail to attract top developers. You can attach documents and provide video links to your project description to help developers better understand your goals.

Below is one sample of how a PHP project description may look. Keep in mind that many people use the term “job description,” but a full job description is only needed for employees. When engaging a freelancer as an independent contractor, you typically just need a statement of work, job post, or any other document that describes the work to be done.

Title: PHP Developer Needed to Build E-Commerce Website

Description: We need a PHP developer to build an e-commerce platform for our website. We have a rough wireframe document that explains the front end and the back end. We need help determining back-end architecture, so we want a developer to determine the way it will be built. We currently have hosting and need help uploading the code after it’s finished. The e-commerce store will host our product catalogue, take orders, allow customers to sign up, and then send email reminders to customers that left products in their shopping cart.

You can modify this description to better fit what you’re looking for, but it gives the basic requirements that a PHP development project might have.

PHP projects can take a long time, so expect a big project to take several months. PHP projects may require sit-downs to understand your requirements, design, coding, prototyping, and testing. All of these extend the deadline and can require several months for larger projects. A developer might even add a small percentage of time to the duration to ensure that deadlines are met. As with any project, the more descriptive your post is and the more you communicate with your programmer, the smoother the process will be.

As you know, JavaScript is the top programming language in the world, the language of the web, of mobile hybrid apps (like PhoneGap or Appcelerator), of the server side (like NodeJS or Wakanda) and has many other implementations. It’s also the starting point for many new developers to the world of programming, as it can be used to display a simple alert in the web browser but also to control a robot (using nodebot, or nodruino). The developers who master JavaScript and write organized and performant code have become the most sought after in the job market.

In this article, I’ll share a set of JavaScript tips, tricks and best practices that should be known by all JavaScript developers regardless of their browser/engine or the SSJS (Server Side JavaScript) interpreter.

Don’t forget “var” keyword when assigning a variable’s value for the first time.

Assignment to an undeclared variable automatically results in a global variable being created. Avoid global variables.

Use “===” instead of “==”

The == (or !=) operator performs an automatic type conversion if needed. The === (or !==) operator will not perform any conversion. It compares the value and the type, which could be considered faster than ==

[10] === 10    // is false

[10]  == 10    // is true

'10' == 10     // is true

'10' === 10    // is false

 []   == 0     // is true

 [] ===  0     // is false

 '' == false   // is true but true == "a" is false

 '' ===   false // is false 

undefined, null, 0, false, NaN, '' (empty string) are all falsy.

Use Semicolons for line termination

The use of semi-colons for line termination is a good practice. You won’t be warned if you forget it, because in most cases it will be inserted by the JavaScript parser. For more details about why you should use semi-colons.

Create an object constructor

function Person(firstName, lastName){

    this.firstName =  firstName;

    this.lastName = lastName;        

}  

var Khalid = new Person("Khalid", "Ansari");

Be careful when using typeof, instanceof and constructor.

typeof: a JavaScript unary operator used to return a string that represents the primitive type of a variable, don’t forget that typeof null will return “object”, and for the majority of object types (Array, Date, and others) will return also “object”.

constructor: is a property of the internal prototype property, which could be overridden by code.

instanceof: is another JavaScript operator that check in all the prototypes chain the constructor it returns true if it’s found and false if not.

var arr = ["a", "b", "c"];

typeof arr;   // return "object" 

arr  instanceof Array // true

arr.constructor();  //[]

Define a Self-calling Function

This is often called a Self-Invoked Anonymous Function or Immediately Invoked Function Expression (IIFE). It is a function that executes automatically when you create it, If you want to use this function you can write in the following way: 

(function(){

    // some private code that will be executed automatically

})();  

(function(p,q){

    var r = p+q;

    return r;

})(40,50);

Get a random item from an array

var items_array = [12, 548 , 'a' , 2 , 5478 , 'toogit' , 8852, , 'freelance' , 2145 , 119];

var  randomItem = items[Math.floor(Math.random() * items.length)];

Get a random number in a specific range

This code snippet can be useful when trying to generate fake data for testing purposes, such as a salary between min and max.

var x = Math.floor(Math.random() * (max - min + 1)) + min;

Generate an array of numbers with numbers from 0 to max

var numbersArray = [] , max = 100;

for( var i=1; numbersArray.push(i++) < max;);  // numbers = [1,2,3 ... 100] 

Generate a random set of alphanumeric characters

function generateRandomAlphaNum(len) {

    var rdmString = "";

    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));

    return  rdmString.substr(0, len);

}

Shuffle an array of numbers

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];

numbers = numbers.sort(function(){ return Math.random() - 0.5});

A better option could be to implement a random sort order by code (e.g. : Fisher-Yates shuffle), than using the native sort JavaScript function

A string trim function

The classic trim function of Java, C#, PHP and many other language that remove whitespace from a string doesn’t exist in JavaScript, so we could add it to the String object.

String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};  

A native implementation of the trim() function is available in the recent JavaScript engines.

Append an array to another array

var array1 = [12 , "foo" , {name "Joe"} , -2458];

var array2 = ["Doe" , 555 , 100];

Array.prototype.push.apply(array1, array2);

Transform the arguments object into an array

var argArray = Array.prototype.slice.call(arguments);

Verify that a given argument is a number

function isNumber(n){

    return !isNaN(parseFloat(n)) && isFinite(n);

}

Verify that a given argument is an array

function isArray(obj){

    return Object.prototype.toString.call(obj) === '[object Array]' ;

}

Note that if the toString() method is overridden, you will not get the expected result using this trick.

Or Use..

Array.isArray(obj); // its a new Array method

You could also use instanceofif you are not working with multiple frames. However, if you have many contexts, you will get a wrong result.

var myFrame = document.createElement('iframe');

document.body.appendChild(myFrame);

var myArray = window.frames[window.frames.length-1].Array;

var arr = new myArray(a,b,10); // [a,b,10]  

// instanceof will not work correctly, myArray loses his constructor 

// constructor is not shared between frames

arr instanceof Array; // false

Get the max or the min in an array of numbers

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 

var maxInNumbers = Math.max.apply(Math, numbers); 

var minInNumbers = Math.min.apply(Math, numbers);

Empty an array

var myArray = [12 , 222 , 1000 ];  

myArray.length = 0; // myArray will be equal to [].

Don’t use delete to remove an item from array

Use splice instead of using delete to delete an item from an array. Using delete replaces the item with undefined instead of the removing it from the array.

Instead of…

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 

items.length; // return 11 

delete items[3]; // return true 

items.length; // return 11 

Use

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 

items.length; // return 11 

items.splice(3,1) ; 

items.length; // return 10 

Clearing or truncating an array

An easy way of clearing or truncating an array without reassigning it is by changing its length property value:

const arr = [11,22,33,44,55,66];

// truncanting

arr.length = 3;

console.log(arr); //=> [11, 22, 33]

// clearing

arr.length = 0;

console.log(arr); //=> []

console.log(arr[2]); //=> undefined

Simulating named parameters with object destructuring

Chances are high that you’re already using configuration objects when you need to pass a variable set of options to some function, like this:

doSomething({ foo: 'Hello', bar: 'Toogit!', baz: 42 });

function doSomething(config) {  

const foo = config.foo !== undefined ? config.foo : 'Hi';  const bar = config.bar !== undefined ? config.bar : 'Me!';  const baz = config.baz !== undefined ? config.baz : 13;  // ...

}

This is an old but effective pattern, which tries to simulate named parameters in JavaScript. The function calling looks fine. On the other hand, the config object handling logic is unnecessarily verbose. With ES2015 object destructuring, you can circumvent this downside:

function doSomething({ foo = 'Hello', bar = 'Toogit!', baz = 13 }) {  // ...}

And if you need to make the config object optional, it’s very simple, too:

function doSomething({ foo = 'Hello', bar = 'Toogit!', baz = 13 } = {}) {  // ...}

Object destructuring for array items

Assign array items to individual variables with object destructuring:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';const { 2: country, 4: state } = csvFileLine.split(',');

What is the difference between Java and JavaScript?

These are two different programming languages.

Javascript is a language that has gained tremendous popularity as a language on the web browsers to create dynamic and interactive web pages.

Java is a language that has got a similar popularity when you build a “backend” system, which is a fancy word for “almost anything”.

Despite the common prefix, they are not related; there creators are different and so are their origin stories (as highlighted by other answers). 

- JavaScript is a genius marketing scam that polluted the world of browsers exceptionally well. The browser reads JavaScript’s code line by line and executes it.

- Java is a general purpose language that is used almost everywhere, from Android mobile apps and cryptography to OS and cloud computing. Java’s code is stored in bytecoded format and then gets JIT compiled before the actual execution. In other words, it translates the bytecode to machine code.

- Java is class based. JS is prototype based. All objects, like Array or Function inherit from the Object.prototype which remains on top of the chain.

- JavaScript uses dynamic type checking (checks the variables while the code executes), unlike Java’s static checking system (variables are verified at compile time), which is more bug free.

- The word “Script.” It’s a joke, in case you didn’t get it.