Wednesday, March 30, 2016

The top five sites for hiring software engineers - Kapil Sharma

The top five sites for hiring software engineers

Hiring a software engineer can be a tricky and daunting task. You need to find someone with a specific set of skills that complement whatever project you’re working on, and chances are, you may not know the first thing about coding How do you even begin to search out a perfect match?

Thankfully, there are number of great resources available on the Internet if you know where to look. Here is a list of the top five hiring websites for software engineers. These companies speed up the process of finding the ideal developer for your project. The websites all offer slightly different benefits though; some are more focused on finding you the best candidate, while others prioritize finding you the most inexpensive. Some will help you find a developer really fast and others will take the time to vet candidates for you. Browse through the options listed below to find the one best suited for your needs.


We believe Toptal is the most reliable and efficient platform for finding excellent software engineers. They hand-match you to a developer who perfectly fits your needs and can start work immediately, which completely eliminates the résumé sifting process on your end and lets you hit the ground running. Toptal also offers a complimentary two-week risk free trial period, so if you’re not satisfied with your match for any reason, you don’t pay.

In addition to excellent customer service, Toptal only takes the top 3% of its applicants, assuring that all of its candidates are the highest quality. The screening process for software developers is incredibly rigorous: with English language and personality tests, as well as, timed tests, sample projects, and live interviews. The applicants accepted into Toptal’s developer’s network are the brightest, most personable, and easiest to work with.


10x Management, started by two music and entertainment managers, works like a talent agency, but for tech. 10x Management also offers hands-on customer service, working with you one on one to find the right match for your project. The website is sleek and snazzy, adding to its image of professionalism that is of paramount importance for the company. Their blog is also a useful resource, with easy to read and pertinent articles on topics from how to streamline your productivity, to q and a’s with top entrepreneurs.


Workmarket is a good website to look into if you need to hire a solid number of engineers to help develop a project. Their website is set up in such a way to allow for easy browsing  of thousands of freelancers on one dashboard. Workmarket does not match you to developers, but it does offer a suite of verification tools to help you screen potential candidates. you’re looking for a large pool of freelance developers located in the USA, Workmarket is a good option.


Rather than searching out a developer for a project, you post your project and developers on Guru’s database apply to work for you. This ultimately means that you’re only shown the developers interested in working on your specific project, which has its obvious benefits and drawbacks. A neat component of Guru is the interactive work space, Workroom, which enables easy communication and file sharing between you and your freelance developers. The biggest disadvantage about Guru is their lack of an internal verification process, meaning that the engineers applying to work for your project may not always be the cream of the crop.


Freelancer is the most inexpensive option offered on this list, so if you’re working on a really tight budget, this may be the best choice for you. Their calling card is a reverse auction system: wherein potential employees give you their price, and compete with one another to offer the most inexpensive bid. Therefore, it’s much easier to find a freelancer willing to work within whatever budget you may have. Freelancer also gives access to nearly 140,000 developers from over 200 different countries, meaning that there is an incredibly large and diverse pool to choose from. Similar to Guru though, Freelancer does not provide an inner verification process, meaning that among those thousands of developers, there may be many offering subpar services. We recommend the site if you have a relatively simple project and don’t need top-notch talent to get it done.

Monday, March 28, 2016

The Vital Guide to Interviewing Mobile Application Designers - Kapil Sharma

This guide deals with mobile application design and its goal is to provide clients with information on mobile design, and help them recognize a top notch mobile designer. It touches on multiple aspects of mobile application development, some or all of which will be relevant to the specific context in which you are looking to hire.
Before we proceed to define what makes a top-notch designer, we need to be aware of the definition.
Mobile application designers focus on native mobile apps and work closely with UX and UI designers to apply their design to mobile interfaces.
Mobile application designers focus on native mobile apps and work closely with UX and UI designers to apply their design to mobile interfaces.
Mobile designers have many names and some of them are app designers, iOS designers, Android designers, and so on. They usually work closely with user-experience (UX) designers and user-interface (UI) designers to apply their design to mobile interfaces. Their main focus is on native mobile applications, but they should also be able to create designs for mobile and hybrid apps.
Every mobile application designer should be aware of the difference between these three platforms.

The Challenge

Native apps live on the device and they are accessed through icons on the device home screen. Native apps are usually installed through an application store (such as Google Play or Apple’s App Store). They are specifically developed for one platform, and can take full advantage of all the device features; they can use the camera, the GPS, various sensors like the accelerometer, compass, and so on. They can also incorporate gestures (either standard operating system gestures or new, app-defined gestures). Also, it’s worth noting that native apps can use the device’s notification system, access local information like the contacts list, and they can work offline.
Responsive web applications are not real applications; they are really websites that, in many ways, look and feel like native applications, but are not implemented as such. They are run by a browser and typically written in HTML5. Users first access them as they would access any web page: They navigate to a special URL and then have the option of “installing” them on their home screen by creating a bookmark to that page. Web apps became popular when HTML5 went mainstream and people realized that they could obtain native-like functionality in the browser.
Today, as more and more sites use HTML5, the distinction between web apps and regular web pages is blurring. For instance, there are no visible browser buttons or bars, although the site runs in Safari (when accessed from an iPhone). Users swipe horizontally to move on to new sections of the app. And, thanks to browser caching, it’s even possible to read the newspaper offline.

HTML5 vs. Native Apps vs. Hybrid Apps

A lot of features are available in HTML5. It possible to access some sensors, implement the tap-to-call feature, and even other functions, such as the device’s camera API. However, few web apps and websites take advantage of these possibilities.
Mobile app developers must be aware of the difference between these native and hybrid apps, as well as HTML5 apps.
Mobile app developers must be aware of the difference between these native and hybrid apps, as well as HTML5 apps.
There are, however, native features that remain inaccessible (at least for now) in the browser:
  • The notification system, running in the background
  • Sensor input such as accelerometer information (other than detecting landscape or portrait orientations)
  • Complex gestures
Of course, one can argue that many apps (native or otherwise) do not take advantage of those extra features, anyhow. But if you really need those native features, you’ll have to create a native app, or at least a hybrid app.
Native mobile apps provide fast performance and a high degree of reliability. It’s important to note that most mobile video games are native applications. We all know that video games are among the most popular mobile applications, and many of them need to utilise the hardware in the most efficient way in order to ensure smooth gameplay and a good user experience.
Hybrid apps are part native apps, part web apps. Because of that, many people incorrectly call them “web apps.” Like native apps, they live in an app store and can take advantage of the many device features available. Like web apps, they rely on HTML being rendered in a browser, with the understanding that the browser is embedded within the app. Often, companies build hybrid apps as wrappers for an existing web page; in that way, they hope to get a presence in the app store without spending resources on app development. Hybrid apps are also popular because they allow cross-platform development and thus significantly reduce development costs: The same HTML code components can be reused on different mobile operating systems.
Tools such as PhoneGap and Sencha Touch allow people to design and code across platforms, using the power of HTML. Doing justice to many of these topics would warrant posts of their own. Nonetheless, this guide is intended to provide, at least, a meaningful overview of key issues and topics relating to mobile application design. Furthermore, every good mobile application designer should be aware of all the terms used in this article.
It’s not unusual for a client to demand native apps rather than responsive web applications. In order to provide a different and unique user-experience on each device, many clients will require a native application.
Q: Native, Web App, or Hybrid: Which Should You Choose?
To summarize, native apps, hybrid apps, or web apps cater to the needs of the mobile user. There is no best solution; each has its strengths and weaknesses. The choice depends on each client’s unique needs.
Q: When designing a new application, what are the most important questions you need to know?
  • What is your app’s main goal?
  • What are the most important sections in your app? How many are there?
  • What kind of actions should be available to the user throughout the app?
  • Who is your direct and indirect competition, if it exists?
  • Which features and functions do you want to include in your app?
With the answers, the designer should be able to start searching for the best design pattern for the new application. Maybe the best question to ask when starting a new design would be: “If you came home angry and stressed out, looking to buy a cinema ticket, how you would like to application to work?”
The same question can be adjusted to any real-life situation and mobile app. If the application design works when the user is frustrated, then the application is probably well designed.
Q: What do you need to consider when designing for iOS, Android or any mobile platform?
When people are about to use something, they have already expectations (we call them mental models). For example, most users will buy a certain smartphone because they like the design principles behind its operating system, the appearance, or how the device works. So, the most important thing to consider when designing for iOS, or other mobile platform, is to consider vendor guidelines. While developers need to stick to vendor guidelines, the basic logic behind each application should be identical, regardless of vendor.
Designers should not try to reinvent the wheel by implementing some unexpected elements within the application. In order to provide an extraordinary experience, designers should experiment with improved user flow and interaction design. In the application industry, this is a standard; Apple does it, Google does it, and Microsoft is no exception.
Q: When designing for a diverse set of users who will engage with your products, what do you need to consider?
Along with device platform guidelines, the designer should consider accessibility guidelines for a range of users. Design for people who are young, old, power users, casual users, and those who just enjoy a quality experience. Embrace these accessibility guidelines as you would any set of design constraints. They are part of the challenge of creating amazing products.
Q: Why are application icons so important for an application and what should be considered when designing the icon?
Beautiful, compelling icons are a fundamental part of a good user experience. Far from being merely decorative, icons play an essential role in communicating with users. Focus on a unique shape; some icons have many colors or they feature gradients, but they all start with a simple shape. That allows them to be recognizable at a distance and at a glance. Icons are seen in a range of different sizes. They are large in the App store, get small on the home screen and even smaller in the notification centre and in groups. Make sure your design scales well and is clear at any size.
The designer should also test the icon on different wallpapers; while it might look great against a traditional backdrop, iOS raindrops for example, there’s no guarantee it looks great on all wallpapers. And try grouping your designs into folders to evaluate how they look.
Q: How to design an intuitive user-interface and still achieve the “Wow!” effect.
Intuitive means easy to understand or operate without explicit instruction. The designer should always use different visual treatment for icons that are “tappable” and icons that are used as indicators and are “non-tappable.” Once a coherent system for distinguishing tappable from non-tappable icons is in place, the designer needs to follow it throughout the mobile app. In order to achieve the “WOW effect,” the designer should play around with unique shapes (for example custom made icons), animations, and then present them in a whole new way.
For example, the paper plane is now widely recognized as the “Send” icon. When it was first introduced, it was probably a little bit confusing for a user. “What is this paper plane? What does it have to do with email?” In many applications, the “Save” icon is an image of the extinct floppy disk. A life buoy icon could be used, instead. Once users understand or discover the meaning of a new UI element, it becomes “intuitive” the next time.

Three Components of the “Wow!” Factor

If the designer is limited by brand guidelines, the “Wow!” effect can be achieved in other areas.
Let’s imagine that we have a beautiful and expensive pen. But if it doesn’t write well, we will probably abandon it and go for an ordinary pen that suits our purpose. Fancy, eye-catching design cannot always help an ineffective product, so we must always think about designing an experience that pleasantly surprises the user by helping him to achieve the intended task faster and efficiently.
It is important to note that “Wow!” factors depend on the concept from the UX/visual designer being well executed by the programmer.
Q: Should we use gestures in our mobile application and how will they affect User Experience?
With the integration of gyroscopes and motion sensors, smart devices are able to detect movement. With this, the interaction between the user and the device extends beyond the click and tap, bringing real-life gestures to the screen.
Users are intuitive about gestures. When asked how to delete an item, users tried to move the item out of the screen regardless of age, sex and gender. Enhancing the user experience with fewer taps or scrolling allows applications to become more interactive.
Q: How will 3D Touch technology from Apple change the interface?
Force Touch technology does not enable truly new gestures, it is simply an extension of gestures we are already familiar with. It will help designers and developers to add a Z-axis in order to provide more depth of information on a top layer without touching or overcomplicating the Information Architecture underneath.
Q: How many fonts are recommended and what is the best practice with typography while designing mobile applications?
Reducing the number of fonts on a screen can reveal the power of typography. Instead of using different typefaces and leveraging different characteristics (e.g. italics, bold, semi-bold), different font sizes can better differentiate discrete areas of content. Embracing a singular typeface across an entire app drives consistency not only for branding but also across channels — e.g. app, mobile site, website — thus optimizing the mobile elements across the omnichannel experience. Also, users prefer the simplicity of having one typeface while scrolling for relevant content.
Q: What are micro-interactions and why should we use them?
Micro-interactions are small, visual enhancements (for example, an animation or a sound) occurring around a use case. These scenarios may include completing a transaction, flagging an item, or prompting a pop-up message. Such interactions are subtle, but they differentiate the product by pointing the user’s attention to the right element.
Micro-interactions may be leveraged as a signal to prompt the user while accomplishing a task (adjusting a setting, for instance), thus creating a small piece of content such as a pop-up message. Apps with well designed micro-interactions are considered easier to use, more fun, and more engaging by their users.

Final words

Before designers choose to create something, they must conduct market research in order to learn what’s out there and what they have to do to create a unique and successful design.
The biggest difference between developing a mobile application and a desktop application, or even a website, is context. This is what makes mobile apps so powerful. Each app is used for its own purpose, at a specific time and place. There are several ways to accomplish the same action for mobile, and it’s up to you, the designer, to design and choose the most effective way.

This hiring guide originally appeared in Toptal Engineering blog

Tuesday, March 22, 2016

A Tutorial on Drill-down FusionCharts in jQuery - Kapil Sharma

Visualizing Data Makes It Easier To Read

When dealing with data analysis, most companies rely on MS Excel or Google Sheets. While those are powerful tools, it’s difficult to notice trends, much less make any sense out of large rows of spreadsheet data. Dealing with data presented this way isn’t very interesting, but once you add visualization to that data, things become easier to manage, and that’s the topic of today’s tutorial - making interactive charts using jQuery.
Dealing with spreadsheet data is boring.
It’s difficult to notice trends from rows of spreadsheet data, but once you add visualization...
I will use FusionCharts’ JavaScript chart library for this project as it offers a large library of 90+ charts, is compatible with every browser, and is pretty easy to work with. It also offers a dedicated plugin for jQuery that will make our job easier.
I will start by making a basic chart using FusionCharts’ core JavaScript library and its jQuery charts plugin, then I will add the drill-down capability to it. Drill-down allows you to go from one chart to another by clicking on a data plot.
The term ‘data plot’ is contextual; it refers to a column in a column chart, lines in a line chart, pie slices in a pie chart. By clicking on a data plot from the parent chart, you are presented with a child chart, showing the relative data one level deeper.
Clicking a data plot on the parent chart will bring up a child chart.
Clicking a data plot on the parent chart will bring up a child chart.

Understanding FusionCharts

Before we start the tutorial, let’s cover the basic anatomy of FusionCharts. Every chart is composed of these key elements:
  • Caption: The title on the chart. It explains what is being charted.
  • Sub-caption: The text beneath the caption specifying additional chart information, oftentimes it states a timeframe from which the data was collected.
  • Legend: This displays a symbol for each data plot on the chart. A particular plot can be enabled or disabled by clicking on its respective legend icon.
  • Data plot: These are data representations on the chart. A data plot can be a column in a column chart, lines in a line chart, or pie slices in a pie chart.
  • Tooltip: Text that appears when you hover over a data plot, used to convey additional information about that particular data plot.
The pieces of a FusionChart.

Making a Drill-down Chart

Before we start, here’s a screenshot of the chart we will be making in this tutorial. You can see the JSFiddle here or access the full source code of the project on my GitHub repo.
A preview of this tutorial's final jquery project.
I have divided the process of making a drill-down chart into five steps, so let’s get started.

Step 1: Including JavaScript Files and Creating the Chart Container

First, we need to include all the JS files that our project is dependent on by using the <script> tag. If the page does not already exist, please create a blank HTML doc and include below files in the <head> section. Now we need the following four files:
  • Minified jQuery
  • FusionCharts’ main JS library (include both fusioncharts.js and fusioncharts.charts.js)
  • FusionCharts’ jQuery plugin
Our <head> section will now look like this:
<!-- jQuery -->
<script type="text/javascript" src="jquery.min.js"></script>

<!-- FusionCharts JS file -->
<script type="text/javascript" src="js/fusioncharts.js"></script>
<script type="text/javascript" src="js/fusioncharts.charts.js"></script>

<!-- jQuery charts plugin -->
<script type="text/javascript" src="js/jquery-plugin.js"></script>

<!-- custom theme file (optional) -->
<script type="text/javascript" src="js/toptal.js"></script>
Now that we have all the dependencies included, it’s time to create the container <div> for the chart and embed it in our page with the following HTML code:
<div id="drill-down-chart">drill-down chart will load here</div>
Now, we can select it using jQuery’s $ selector inside the code:
$("#drill-down-chart")
Note: If you have more than one chart on your page, you will need a separate container for each chart with a unique id.
Visualizing data makes it easier to read.

Step 2: Getting and Structuring Data

FusionCharts accepts data in both JSON and XML formats, but I’ve chosen to use JSON as it’s become the standard format for data exchange across web apps. The JSON data array for a basic chart contains an object for each data plot, and inside each data plot object we define its respective label and value. That structure looks like:
"data": [{
  "label": "Q1",
  "value": "850000",
}, {
  "label": "Q2",
  "value": "2070000",
},...
// more data objects ]
As we plot our drill-down chart, its JSON gets more complex. The link between parent and child charts requires one more key-value pair inside each object of data array. The new key (unsurprisingly, called link) will contain the id of the child chart that you will get when its parent data plot is clicked. The format for defining the child chart id is newchart-dataFormat-childId. Since we’re using JSON, we know that whatever we link will look like newchart-json-childId. Here is how we define it for our chart:
"data": [{
  "label": "Q1",
  "value": "850000",
  "link": "newchart-json-q1"
}, {
  "label": "Q2",
  "value": "2070000",
  "link": "newchart-json-q2"
}, ...
// more data objects]

Step 3: Inserting Chart Data

Once you have the data ready, it’s time to insert the chart on your page using the insertFusionChartsmethod provided by the jQuery plugin:
$("#drill-down-chart").insertFusionCharts({
  type: 'column2d',
  id: "mychart",
  width: '100%',
  height: '450',
  dataFormat: 'json',
  dataSource: {
    "chart": {
      "caption": "Quarterly Revenue for 2015",
      "paletteColors": "#9EA5FC",
      "xAxisName": "Quarter (Click to drill down)",
      "yAxisName": "Revenue (In USD)",
      // more chart configuration options
    },

    "data": [
      // see step-2 for explanation
    ],

    "linkedData": [
      // explained in step-4
    ]
  }
})
Let’s break down the above code snippet:
  • type defines the type of parent chart we are plotting. In this case, column2d. Every chart in the FusionCharts library has a unique alias. You can find the alias for the chart you want to plot on FusionCharts’ list of charts page.
  • id sets the unique id for the chart, not to be confused with the id of the <div> element containing our chart. A chart’s id is used to select a chart for applying event handlers and calling methods. We will make use of this in Step 5.
  • width and height set the dimension of the chart in pixels or percentage. 100% width tells the chart to occupy the full container width.
  • We define the data format using the dataFormat attribute. We are using JSON for our example but there are other acceptable data formats as well, such as an XML URL. To learn more about data formats, refer to FusionCharts’ official documentation page.
  • dataSource contains the actual content of the chart, and the chart object inside it contains the chart’s configuration options, such as caption and subcaption. The data array should look familiar since we made it in Step 2 (it contains the data to be plotted), and linkedData contains the content for the child-chart (the chart you get after you click a data plot on the parent chart).

Step 4: Creating the Linked Data Array for Child Charts

Now that we have the parent chart defined, it’s time to create a child chart for each data plot, a process very similar to creating the parent chart. The linkedData array, created in the ‘insertFusionCharts’ method, will define a separate object for each child chart. Here’s what the data for the first child chart looks like:
"linkeddata": [{
          "id": "q1",
          "linkedchart": { // linkedChart object to define chart options and data for child-chart
            "chart": {
              "caption": "Monthly Revenue",
              "subcaption": "First Quarter",
              "paletteColors": "#EEDA54, #A2A5FC, #41CBE3",
              "labelFontSize": "16", // more chart configuration options 
            },
            "data": [{
              "label": "Jan",
              "value": "255000"
            }, {
              "label": "Feb",
              "value": "467500"
            },// more data
   ]
          }
        }, // content for more child charts
]
id is the id of the individual child chart that we defined in Step 2. linkedChart is similar to dataSource from Step 3 in that it contains the actual content of that chart. There are numerous other attributes that go inside the chart object, which I cover in detail in the later section, “Improving Design with Chart Attributes”.

Step 5: Custom Drill-down Configuration

Diverse Chart Types

So far, our sample code has both the parent and the child charts sharing the same chart type. If you want to drill-down to a different chart type (from column to pie, for example), you do so by binding the fusionchartsrendered event.
$('#drill-down-chart').bind('fusionchartsrendered', function(event, args) {
  FusionCharts.items['mychart'].configureLink({
    type: "doughnut2d",
    overlayButton: {
      message: 'BACK', // Set the button to show diff message 
      bgColor: '#FCFDFD',
      borderColor: '#cccccc'
    }
  });
});
In the code above, the fusionchartsrendered event will call the configureLink method, which defines the type of all child charts plus any overlay button options. You can also specify separate chart types for each child chart. There are a lot of options available in the configureLink method, so you might find it useful to review its API reference documentation from FusionCharts.

Rendering Charts in Different Divs

Another cool thing you can do is to render the child chart in a different container rather than the same one as its parent. For this, define a separate HTML <div> container after the parent chart container and pass its id to renderAt attribute as shown below:
$('#chart-container').bind('fusionchartsrendered', function(event, args) {
  FusionCharts.items['mychart'].configureLink({
    type: "doughnut2d",
    renderAt:"chart-container2",
    overlayButton: {
      message: 'BACK', // Set the button to show diff messafe
      bgColor: '#FCFDFD',
      borderColor: '#cccccc'
    }
  });
});
The value given to the renderAt attribute specifies the id of the <div> in which the child chart will render (chart-container2).

Improving Design with Chart Attributes

Following this tutorial you’ll get a functional chart, but it’ll be somewhat ugly if you leave it at that. For a more appealing presentation, you’ll need to make use of cosmetic “chart attributes.” Chart attributes are defined inside the chart object and used to customize rendering options. You might find it useful to refer to the FusionCharts explanatory graphic when reviewing these key configurable attributes:
  • paletteColors defines the color of the data plots. If you give a single color here, all the columns will be that color. If you give multiple colors, the first column will take the first value, second column will take second value, and so on.
  • plotSpacePercent controls the space between the columns. The default value for this is 20 (the value is an int, but the unit is a percentage) and the allowable range is 0-80. A value of zero will make the columns bunch up and stick to each other.
  • baseFont defines the font family of the chart. You can use any font you like; I used Google’s Open Sans in my chart. Simply include the external font file in your HTML page in order to use it in your chart.
  • plotToolText lets you customize the tooltips. By using macros such as $label and * $dataValue, you can show specific information on a particular data plot from inside a <div>, then style that <div> using inline CSS. Here is what I have done in our example:
"plotToolText": "<div style='font-size: 16px; text-align: center;'>$label: $dataValue</div>"
  • theme allows you to define your chart attributes in a different file and apply them once here instead of cluttering your chart object with numerous chart attributes. You can find the theme file for this tutorial - toptal.js- inside the JS folder of project’s GitHub repo.
That’s all I’m going to cover, but there are more than a hundred attributes for a chart, so if you want to explore further, please visit the FusionCharts’ chart attributes page and search for your particular chart type.

More FusionCharts and jQuery Resources

Although I have covered the most important elements in making a drill-down chart using jQuery, there is a good chance that you will need some help when you try to do it on your own. For that moment, here are some additional resources:
  • jQuery charts plugin: For inspiration, visit the official jQuery charts plugin page to see some live examples.
  • Documentation: If you’re unable to figure something out, documentation is the first place you should look. Here are handy links for the jQuery plugin and the drill-down chart (also known as linked charts).
  • Demos: Every charting library offers live samples to showcase its capabilities, and FusionCharts is no different. Head over to its demo gallery of more than 800 live samples, with full source code if you need some ideas. There is a good chance that whatever you are trying to make is already available. No need to start from scratch; just fork the fiddle and proceed from there!
  • More extensions: If you don’t use vanilla JavaScript or jQuery, then you can explore more plugins and wrappers offered by FusionCharts on this page. They have dedicated plugins for a variety of libraries and frameworks such as Angular, React, Java, ASP.NET etc.
PS: I will be hanging out in the comments section below, so feel free to post any questions you might have about my article. I’m happy to help!
This originally appeared in Toptal Engineering blog