Pangara's Blog

20 web developer interview questions for 2020

If you’re interviewing for a role as a web developer (or looking to hire one), you’ve got to cover a lot of ground. Have a look at these 20 questions to help you cover the basics of web development. With these, you should be able to tackle an interview with flying colors.

Server

1. Nginx VS Apache, which one is faster, and why?
Nginx is definitely faster. The main reason is that it’s made to handle just HTML and static content, as well as the fact that it’s event-based.
So less threads => less memory => higher efficiency.
Noticeably, Apache 2.4+ versions also have event-based request handling. Since then the speed seems to match up with Nginx. Hence, the differences are not very noticeable.
2. Should we put code on a server and DB located on a different continent?
Definitely not. The latency between the code base and the DB itself already costs too much load time. This will result in a very slow load-speed. Hence the abandon-rate will also skyrocket.
It’s best to put them on the same Data Center.
3. Should we implement memory cache on a server that has 512MB RAM?
No, we should not. 512MB is not enough to cache anything efficiently. The cache would end up eating all the RAM and leave no room for the actual web server and its modules to run.

Or it would actually never get enough RAM to handle caching.
In that case, we should just implement disk-caching.
4. How can we point a real domain to localhost for development?
This is a developer-trick. Most CMS’s have fixed domains per code-base. Hence they would get redirected if another domain is pointed there. However, we can use the hosts file to overcome this and point the active domain to localhost for development.
5. Do you ever use version control? Which? Why? How often?
Yes, Git or SVN or Mercurial
Why: Because when developing, code changes rapidly. Amateurs may use Undo & Redo to recover lost work of short time, but that process is dangerous. A working version of the code may be lost.
That’s why you should always use version control to keep track of changes. Anything that requires over 15 minutes of coding would require a commit.
That way, we can roll back, reuse old code, and fix bugs with ease.
6. Which do you think is the more efficient web host between Windows and Linux?
Linux is more efficient.
Scenario: Handling 1,000 CCU
With Linux, we can use 512MB RAM and run a Nginx server and disk cache. The Linux kernel only takes up about 100MB, leaving 400MB for the web serving.
Meanwhile, Windows will need at least 2GB. In that case, most of the RAM is used to run Windows itself, leaving only little for the web server.

That means we need to pay four times the money for Windows to do the same thing that Linux does.

Languages

1. What is the most popular language on the web? Why?
PHP is most popular because:

  1. It’s free.
  2. It’s used by the most popular CMS (WordPress).
  3. It’s run directly from a PHP file, which means much faster development and a shorter development cycle.

2. What do you think about PHP 7 as compared to PHP 5 regarding speed and stability?
Speed: PHP 7 is much faster than PHP 5.
Stability: PHP 7 is less stable, because many coders are using the old PHP 5 syntax, which can be deprecated or removed from V7. Fortunately, major CMS’s today have already adapted to V7. Hence it’s still safe using it.
3. Would you rather use

a) jQuery or

b) pure JS or

c) pure CSS for animation effects?

Performance-wise, it’s best to use CSS3’s animation effects. Such as fade, easing, roll, and so on.
In case of custom animations, such as parallax, we can use the jQuery library.
It’s strongly advised that you not use pure JS because of the amount of code required, and the high risk for bugs.
4. How do you identify hover effect on a mockup?
Normally, on a mockup we can see the mouse pointer which is either a hand or an arrow. This indicates that the element has a hover effect.
In case there is no pointer, there might be a side annotation on the mockup defining what background or font color changes on mouse-over. If not, we should ask the designer for clarification.
5. Are you able to make responsive web without a mobile mockup?
Certainly. For a professional developer, a mockup often is not required for mobile versions, unless in very tricky situations.
For example:

  • Menus often get hidden and open via the “burger bar”
  • Most images will span 100%, but for product/post grid it may be wise to use two columns to avoid lengthy scrolling.
  • Most text will go full screen width.
  • Overall, a responsive layout must be easy to use for the mobile user.

6. Do you use PM tools for small projects?
Many programmers get lazy and avoid using PM tools to handle small projects of less than a week. This is an unfortunate habit which can result in lengthy or abandoned projects. The reason is that things may look small at first, but grow bigger as it proceeds.
So, a good developer will put every tasks into the PM so that it has room for communication, meeting deadlines, and flexible in scoping.

Data

1. What are common causes of slow load time?
Often, slow load time is due to “slow SQL query”. Sometimes it’s due to inefficient memory usage, looping or disk accessing. It can also be caused by outdated an HDD, a slow CPU or insufficient RAM.
2. No-SQL vs SQL, which one is faster? And which one is more popular?
No-SQL is faster. A No-SQL query of a collection of one million records can be processed in a few seconds. Meanwhile, a similar query of SQL would take minutes.
Unfortunately, No-SQL is a quite recent development. Hence the adaptation rate is still low. Most major CMS’s and frameworks still use MySQL as its database.
3. Slow queries are a nightmare, right? What is a common cause and solution?
Yes they are. Slow queries can cause few seconds of delay. Bad ones can cause minutes of wait time.

Slow queries are often caused by incorrectly nested queries. These queries often end up as hundreds of thousands of results, causing MySQL’s process time to increase exponentially.  
Most common is the SELECT query with a JOIN statement of incorrectly defined conditions.
4. What does this code do? How often do you use this REPLACE statement? When?
UPDATE `table_1` SET `name` = REPLACE(`name`, ‘Johns’, ‘John’);
It’s too simple: Replace all strings “Johns” with “John” (removes an “s”) from the name field of all records in table name “table_1”.
This is rarely used, mostly in case you want to change a value inside the whole database. Often it’s the domain name when migrating site from dev to stage to production. Sometimes converting a post type or fixing a spelling mistake.

Web Services (Senior level)

1. SOAP vs REST, which one do you prefer? Why?
PHP and JavaScript developers often prefer REST because it can be called, and parsed easily with flexible input and output structure.
Meanwhile .NET and Java developers may prefer SOAP because it is more secure and strictly structured. SOAP often causes fatal errors if incorrect arguments are passed.
2. XML vs. JSON, which one do you prefer? Why?
PHP and JS developers may prefer JSON because it’s more flexible. Easily parsed using one function call.
Meanwhile, .NET and Java developers may prefer XML because they would fit into the predefined OO data type.
3. What does this code do?
$.getJSON( “test.js”, function( json ) {
 console.log( “JSON Data: “ + json);
});
An experienced developer would clearly identify that:
This is a JS code that sends out a REST call to the “test.js” file and receives an object named “json”. Upon successfully receiving this object, the JS displays this json data into the console log.
4. What does API stand for? How important is it?
API stands for Application Program Interface. It is VERY important nowadays because most applications are multi-tiered.
Example:

A web page may attach to a DB on a centralized server. While an iOS or Android app would hook to the same DB as well. Now, these three apps may be written using different languages and they can’t talk directly to each other. That’s why they need to communicate using API.

20-Frontend-Interview-Questions

20 Front end interview questions

When it comes to interviewing for a role in front end development, there’s a lot of bases to cover. That’s why we’ve done a bit of the work for you. Below is a list of front end interview questions across HTML, CSS, Javascript as well as general questions to get you prepped and ready for that upcoming interview.
Good luck!

HTML

1. Is any of the <html>, <body> tag required for an html document to be shown correctly?

Expected answer: no, but the .html file extension is required.

2. In XHTML, how do you close a single (non-paired) tag?

Expected answer: with the / at the end. Example: <img src=…. />

3. What is lazy loading?

Expected answer: It’s a method to delay loading the off-screen images until they are revealed. Which greatly increase the page load speed.

4. What happen if a paired-element is missing its end tag?

Expected answer: The element will wrap up all elements below it until a matching end tag or the </body> tag is found. This is a critical mistake and often happens with bold and italic tags.

CSS

1. Should we keep several small CSS files, or one big CSS file instead?

Expected answer: Several small CSS files can cause number of requests to increase. This in turn can cause the loading time to increase. General practice is to merge them into a bigger file.

2. How do you overwrite a ‘style’ attribute using external CSS?

Answer: use the keyword !important

3. How do you solve this problem: a lightbox (popup) is shown under the fixed header?

Expected answer: Check the z-index property. Normally fixed header have very high z-index. And so, the z-index of the lightbox must be higher than this value.

4. What is the purpose of the + operator and can you give an example?

Expected answer:

Purpose: The style is an element that falls immediately after another element.
Example:
H2 + p: style the paragraph that’s right below heading 2.
p + button: style the button element that is shown below a paragraph

5. What is the main purpose of using @media query?

Expected answer: It is mainly used for responsive design. To layout the site depending on screen width or some other attributes such as, printing or displaying on screen.

Javascript

1. Why is it good practice to assign ‘this’ to a variable when using jQuery?

Expected answer:
In jQuery, the ‘this’ will change accordingly to the inner block call. Hence the ‘this’ for parent block is inaccessible unless it’s assigned to a variable.

2. Should we host the jQuery file on our own server or over a CDN?

Expected answer:
CDN is good for lessening the server load. However, the CDN speed is unpredictable. It can be very slow when it is overloaded. Therefore, it’s a good practice to host our own jQuery file to ensure.

3. Please explain the difference between the ‘lodash’ and ‘underscore’ libraries?

Expected answer:
Underscore is a JS framework that provides a lot of helpful functions for faster frontend development. Lodash is an improved version of an underscore. There are many functions that lodash has but underscore does not.

4. Does JavaScript have an associative array?

Expected answer:

No, it doesn’t. However, it has an equivalent method: using object to store “named indexes.”

5. What happens if we use a = in an if statement? Is it the same as ==?

Example: if ( a = 10 == 20 )
Expected answer: If we use  = , the value on the right hand side of the = sign will be assigned to the name in left before any comparison is made.
Hence, it’s not the same with the == sign (which actually compares 2 values).
In the example above, 10 is assigned to a, then a is compared if equal (==) to 20, then the result is false.

General Questions

1. Do you know anything about jsfiddle? What is it? Does it only check JS?

Expected answer: Yes. It’s a website used to test Javascript code.
It doesn’t only check JS. It also helps to check HTML and CSS.

2. What should you do if you have to solve a problem that’s beyond your coding experience?

Expected answer:
We normally use Google (or stackoverflow, gist, etc.) to search for the same problem and solution. If you can’t find the solution online, it’s recommended to ask a for help. It’s recommended to always try to find solution to the problem.

4. Do you code responsive web? Can you explain what responsive is?

Expected answer:
Yes. Responsive code is to layout the web page fitting different screen sizes (devices). With standard outdated layout, webpage often appear nicely on desktop computer. But on other devices such as iPad and smartphone, it will be very difficult to view.
Several years ago people developed smartphone apps to show there website while used on mobile. But that ended up being very costly. Nowadays, we can use CSS3 with the @media query to define layout for many devices.

5. How fast should you learn how to use a new tool?

Expected answer:
Ideally, it’s great if a skilled developer can learn to use a new tool within one week. It’s every better if it only takes two to three days. A skilled developer should be able to keep up with technology.
If you’re on the hunt for more practice, guides or insight on the latest tech trends, head to our blog to learn more!

Think you have what it takes to take your front end skills to the next level? Great. You’re in the right place. Apply today to join our exclusive network of freelance developers.

3 keys to employee loyalty

The world of business seems to move faster than ever nowadays—and is more fiercely competitive than it has ever been. Nowhere is that more true than in the domain of staff development and retention. Great employees have options, and even the biggest companies struggle to keep top performers. This is why smart leaders know that it’s absolutely crucial to have a focused, intentional strategy for fostering employee loyalty.
In this article we’ll show you the three essential actions that leaders can take to make sure their best people never want to leave.

Challenge them

Anyone who’s worked in an office for long enough will come to expect the same dreary refrain—like clockwork—every Monday morning when they greet coworkers. You ask how they are. The answer?
Ugh, it’s a Monday.
And then at the end of the week?
Great! It’s Friday! TGIF!
Take a second to think about what this means: so many workers today are just waiting for the weekend—wishing most of their lives away.
Work is seen as drudgery, as something to be gotten out of the way as quickly and painlessly as possible so that the stuff that really matters can begin.
It’s no way to live. And it’s a pretty poor way to work. So guess what? Employees who feel this way about their jobs don’t have a lot of motivation to stick around. If you want to create loyalty in the workplace, you have to win some hearts and minds first.
But why is it that so many people are so disengaged? Why do they treat their work as if it’s a boring chore?
Hard truth? Because for many of them, it is. And one of the main reasons why this is the case is a lack of challenge.
When people are given the same tasks, day in and day out, and never asked to really use their creativity and their skills, then of course their jobs start to feel repetitive and mindless. And they’ll jump ship at the first opportunity to do something a little bit more interesting.
But take those same people and give them stretch goals, ask them to constantly up their game, present them with problems that demand every ounce of their ingenuity and talent to solve—and watch what happens.
Suddenly, they’re engaged, energized, and—maybe for the first time in years—feeling alive. And when they rise to a new challenge, achieve tough goals, and are rewarded and praised for it, then their sense of accomplishment and their pride in their work blossoms.
They don’t dread Monday morning anymore. They look forward to it.
And employees who feel engaged and accomplished are much more likely to stay around for the next challenge.

Help them grow

In survey after survey, when employees are asked what they really want from their company, one surprising answer comes up time and again: the tools to improve at their job and build their skills.
In fact, today’s new generation of workers rate the opportunity to develop their abilities as the most important element of job satisfaction (yes, even more than financial reward).
So why is this the case?
Well, times have changed. A generation or two ago, a person could take their first job out of college and expect to retire (with that nifty gold watch) a few decades later.
Now? Not so much.
The global economy is notoriously volatile. Even in good times, industries seem to change in the blink of an eye, making last year’s skills obsolete overnight. And when times get rough, as they inevitably do over an economic cycle, you have downsizing, rightsizing, and outsourcing to worry about. All of this adds up to a climate in which no one ever feels completely secure in their current job.
And now there’s something new to worry about as well, something very much on the minds of today’s workforce: the rise of AI and automation. Estimates vary, but some experts think that up to 30% of the world’s jobs could disappear in the next decade or two, lost forever to the robots. And it’s not just unskilled labor or manufacturing work we’re talking about—the sophistication of the new AI is predicted to replace jobs in fields that were once thought untouchable: medicine, law, and even (somewhat ironically) computer programming.
All of this has contributed to a tremendous amount of anxiety (and stress) in the workforce. No wonder! But there’s a silver lining to this as well, for smart employers—there’s a way to use this uncertainty and angst for good.
Because if you show your team that you’re deeply committed to helping them build the skills they’ll need to survive in the months, years, and decades to come, you provide a powerful incentive for them to stay with your company.
Of course this can take many forms. From things like support for continued education through tuition reimbursement to on-site training in the latest disruptive technologies that are reshaping your industry. But if you can make your employees feel that they’re in the best possible place to keep growing and learning, then you’ve made your company very, very hard to walk away from.

Reward Performance

You choose your team carefully. You train them, develop them, give them all the tools they need to succeed. Then you challenge them, even push them, in the hopes of bringing out their best.
And if it all works out?
They perform beautifully.
So now what? We’re so used to talking about how to deal with performance problems in the workplace, or figuring out how to set challenging goals for our employees, that sometimes we forget to think about what to do when everything goes right.
Yet it’s crucial to consider this. Because it’s one thing to build a great team that exceeds every expectation. But it’s another thing to keep them.
To create real loyalty in your employees, you absolutely must reward excellence. So what does that entail?
First things first—when people deliver real (monetary) value, they should share in that. Bringing your team a box of pastries is a nice gesture, but let’s just say it won’t pay the rent.
If your staff is at the top of their game, building value for your company and your stakeholders, then you should make every effort to see that they’re rewarded accordingly.  Partly because it’s the right thing to do. But also because if you don’t, someone else will.
If you’re the CEO or the head of a small business, then that’s relatively easy to do: after all, you make those calls. But for most middle-managers, this can be a little harder—because it often requires some “selling” to the upper management in order to get them to approve that raise for your employee.
One way that you can prepare for this is to keep a file on each person you supervise, showing, in specific and quantifiable terms, how their biggest achievements over the last quarter or year contributed to customer satisfaction, team productivity, or the bottom line.
And of course money isn’t everything (otherwise investment banks and hedge funds would have zero turnover). If you want to build a loyal staff, you should also take the time to reward performance in less tangible ways. This starts with simple things like always remembering to offer a word or two of praise for a job well done.
But you should also make sure that excellence is seen—as in “recognized publicly”.  And, in large organizations, great performance should be called to the attention of the folks a bit higher up as well. Employees who feel that their contributions are valued—and who know that their good work is noticed—have a strong reason to stay.
And finally, from time to time, rewarding performance may mean letting a top performer go—making sure that the best members of your team are promoted to positions where they can further develop their skills, take on new challenges, and advance their careers.
Of course it’s hard for any manager to say goodbye to a valued member of the team, but it’s essential for the well-being of the organization as a whole: companies whose employees feel that they can’t move up are always losing excellent people. And remember, just because it’s time for someone to move on, doesn’t mean it’s the end, because former employees in their new roles often become the valuable partners and collaborators as you build your own career.
So to sum up, while there are many ways to reduce turnover, three stand out above the rest.

  • Challenge your staff so that they’re engaged and so that their work feels meaningful.
  • Help them grow and develop their skills so that they know they’re in a great place to prepare for an uncertain future.
  • Reward great performance so that employees can see that they’re valued and have a path to the careers and lives they want.

Do these three things, and you’ll create loyal and passionate employees who will help your business thrive for years to come.

Hire motivated, loyal freelancers today! Start here

Front-End vs. Back-End Development

What’s the difference between front-end and back-end development?
Well, first of all, let’s define terms.
The front-end of a website is everything that users can see and interact with: the images on the page, the dropdown menus, the forms and submit buttons, the visual layout that (hopefully) automatically changes on mobile, tablet and desktop.
The back-end of a website is largely invisible to a user: the server, the web app containing all the code that makes the site “go”, and the database that stores user information and key files.
A front-end developer is someone who works on the front-end aspects of a site. And a back-end developer—you guessed it—works on the back-end.
That’s a good start, but what does a front-end dev have to know that a back-end dev doesn’t, and vice versa? What are the core skills and competencies that each role demands?
That’s what we’ll explore in this article. But instead of presenting front-end and back-end development as two totally disparate jobs, we’ll be looking at how they both require the same fundamental programming skills, applied in different ways, to achieve a single goal: a brilliantly designed site that users will love.

Language Mastery

Both front-end and back-end devs need to be, first and foremost, extremely proficient in their respective programming languages. This means going beyond simple knowledge of the basic syntax and conventions of a language and really knowing how to use it—and how to use the tools that make development faster and more efficient.
Front-end developers will need to know HTML and CSS, which control the appearance and layout of the elements on a webpage. But they’ll also need to understand how to use them wisely.
For example, a good front-end dev will be able to create mobile responsive designs so that their page looks great on any device, which will probably mean knowing how to use CSS media queries as well as CSS frameworks like Bulma or Bootstrap. And they’ll also have to know which parts of CSS and HTML work in which browser, or on which OS, so that their designs are truly cross-platform and backward compatible (in other words, work well on anyone’s device, no matter how out-of-date it might be!).
They’ll also need to know JavaScript, which allows for in-browser interactivity and makes a webpage “come alive” for the user. But here again, it’s not just about knowing the language—a serious front-end dev will be proficient in a library like jQuery in order to speed up and standardize their use of JavaScript during the development process.
They’ll also need to know how to leverage the power of JavaScript to take responsive design to the next level—going beyond what can be accomplished with CSS alone.
Back-End developers will typically specialize in one of the major scripting languages of server-side web development: PHP, Python, Ruby, and so forth. As with front-end work, though, learning the basic elements of a language is only the beginning.
Serious back-end work means learning a framework for fast and secure development—something like CakePHP, Django, or Ruby on Rails.  
And just as with front-end development, knowing the language is only half of the equation: you also have to know what to say and how to say it.
This means becoming proficient in architectural patterns like MVC (Model-View-Controller), which governs how different elements of the web app interact and separates their functions for efficient development.
And it also will mean learning a “style” or “paradigm” common to modern web development—which in most cases will be Object Oriented Programming (OOP).
And because back-end development requires database work, in addition to all of the above, the back-end dev has to become proficient in the use of SQL (Structured Query Language) and one or more of the common databases, such as MySQL, MongoDB, or PostgreSQL.

Debugging skills

If coding web apps was easy and straightforward, everybody would do it (and web devs wouldn’t be paid nearly as much as they are!).
Alas, like most things worth doing, web development is challenging, and, at times, maddening. You code up an app or a page. You’re sure everything is in order and should work perfectly. And then…
Error.
Now the real fun begins. Debugging your code. Figuring out what went wrong—and how to make it work.
It’s an art, a science, and almost a spiritual discipline. But love it or hate it, debugging is a part of a developer’s life.
And this is truth whether you’re doing front-end or back-end work.
Front-end developers wrestle with the vagaries of HTML and CSS: Why won’t my image align? Why doesn’t this CSS property do what it should in Firefox? How come the menu looks so huge on mobile?
Chasing down these issues—and figuring out how to resolve them—is part of the pain and joy of front-end web development. But it’s also part of the learning process: each inexplicable error really does have an explanation (you just don’t know what it is yet). And once you figure it out, sometimes after an hour of banging your head on the desk, you’ll never make the same mistake again.
Back-end developers have the same problems, though they play out differently. Why didn’t my code recognize that variable I just defined a few lines above? Why isn’t Python loading my module like I told it too?
Just as with front-end development, this is where the detective work begins (and some would say, where a developer’s true education comes from).

A mind for (elegant) design

Front-end web developers are often conflated with web designers, the layout and UX specialists who create a visual mock-up of a website to hand off to the programmers. But truth be told, nowadays, a modern front-end dev really has earned the title of “developer”, because she or he is invariably going to be working with HTML, CSS, and of course, JavaScript.
But the elements of visual design and layout that make for a good user experience are still central to doing the job (or doing it well, anyway). A good front-end dev will give real thought to the layout and appearance of elements on a page, both in terms of aesthetics but also functionality.
Knowing the basics of color theory and how to pick designs that are pleasing to the eye, having a sense for which fonts work best in which scenarios, and even some basic Photoshop skills go a long way to creating a web site that users will actually want to look at.
And in terms of functional design, having a knack for deciding where to put the “order now” button or how best to arrange the header menu makes all the difference between a great user experience and a frustrating one.
Back-end developers, too, have to consider elegant design, but they aren’t as concerned with the end users as much as they are with their colleagues. Their focus will be on writing lean, efficient code that gets the job done in as few lines as possible; organizing classes and functions intelligently, such that major chunks of code can be easily reused in the future if the app needs to be expanded; and writing clean, idiomatic, well-annotated code that other developers can work with easily and quickly if they are brought in to contribute to the site.
And although the website user may never directly see a back-end developer’s work, they’ll certainly feel the effects if that developer is writing clunky, buggy, or inefficient code—and likely won’t be back to visit that site again.

A passion for safety

Sure, safety doesn’t sound sexy, but suffer through a website crash or, worse yet, security breach, and you’ll quickly find yourself more conservative than a parent with a new baby.
So last but not least, we’ll take a look at how front-end and back end devs keep their sites secure and their users safe.
Front-end devs have a crucial role to play in website security, because they’re the first line of defense against bots and malicious programs. That means protecting forms with CAPTCHAs or “honeypots” so that the bad bugs can’t exploit the inherent vulnerability of websites that allow the public to send data to the server.
And with regard to the site users (and owners), front-end developers take special care to minimize or cloak publicly available email addresses to guard against data scrapers trawling the web for people to spam.
They’ll also work with the site owners to protect sensitive areas of a website with unlisted URLs or protected pages that require a login.
Back-end developers will focus on eliminating risks from hacks and malicious attacks on the website by making sure all potential weaknesses in the website are shored up. This may mean strictly enforcing HTTPS protocols when needed; encrypted storage of sensitive information; defending against potentially dangerous code strings sent through web forms; and restricting URL access to certain users.
So in the end, whether you’re talking about front-end or back-end development, the basic skills of truly professional development always apply: master your language, debug like a champ, design beautifully, and stay safe.
Even though the way these skills are applied may differ, they’re always essential—no matter which side of the site you’re working on.
pangara_logo

Think you have what it takes to join Pangara’s exclusive network of freelance developers? Learn more here.

python_developer

Python Developer Interview Questions

Python is kind of trending language these days with its wide range of applications from science to web development and so on. If you’re looking for a job as a Python developer or if you’re interviewing candidates for a role on your team, this tutorial will come in handy.
Firstly, Python Developer means Software Developer specifically in Python language and its related Frameworks of working with a team.
We’ll divide this section of interviewing a Python developer into four parts:

  • Common software engineering skills
  • Python language specific questions
  • Python related framework, library (related to the product/project we are working on)
  • Non-technical questions

First, in order to get to know more about the candidate you’re interviewing, we will start with some non-technical questions. These can range from asking him or her to introduce themselves, to describe some of his/her projects in the past, what he/she likes to do in their daily life or free time, what they hope to get out of this experience for the future and so on.
Once your interviewee has had the chance to introduce themselves, it’s time for you to tell them more about the project or more permanent role on the team. Tell them what types of project or projects you’ll be working on, their teammates and what they can expect during their time working with you.
After that, it’s time to jump into some important concepts to gain a better understanding of their knowledge and experience in software development.

Common Software Engineering Skills

Common and important concepts

We’d recommend asking your candidates some important concepts in the realm of software engineering such as:

  • Big-O:

Big-O is a common concept used in computer science. It is often used to classify algorithms according to how their running time or space requirements grow as the input size increases.
It tells users about the performance or complexity of an algorithm. The candidate should know about Big-O and know how to analyze at least simple cases of algorithm complexity. Understanding Big-O and Big-O analysis affects how a candidate writes his code.
We recommend showing your candidate a line of code and ask them about that code’s complexity.
For example:

def contains_duplicates(elements):
   for i, outer in enumerate(elements):
       for j, inner in enumerate(elements):
           # Don't compare with self
           if (i == j): continue
           if (outer == inner): return True
   return False
  • Common algorithms and data structures:

Data structures and algorithms are like the brain of any program. In general, a developer must have knowledge of some common algorithms and especially data structures. We recommend asking candidates to describe some important some of these important data structures such as: Set, Hashset, Dictionary, Array, Tree, List, Stack, Queue, etc.
Algorithms like: DFS, BFS, Linked List Insertion, Binary Search, etc.

  • Debugging with an interactive debugger:

A developer typically works with a debugger even more so than writing code. Working well with a debugger helps the developer to identify problems/bugs much quicker. He or she should know about breakpoint, step over, step into, conditions, actions.

Relational and non-relational databases:

Database is an integral part of software. Here, we will ask the candidate to talk about the characteristics and  benefits of relational and non-relational databases and when we should use them.

  • Relational:

According to techopedia, relational databases:
Organize data in different ways. Each table is known as a relation, which contains one or more data category columns. Each table record (or row) contains a unique data instance defined for a corresponding column category. One or more data or record characteristics relate to one or many records to form functional dependencies.
What defines Relational Database is revealed by these 5 keywords:

  1. Table
  2. record
  3. column
  4. relation
  5. index.

Go for RDBMS when the data is well structured and lends itself to a tabular arrangement (rows and columns) in a relational database. Consider whether the data is transactional in nature. The concept of ACID transactions is very important and any RDBMS.

  • Non-relational databases:

Techopedia defines non-relational databases as:

A database that does not incorporate the table/key model that relational database management systems (RDBMS) promote. These kinds of databases require data manipulation techniques and processes designed to provide solutions to big data problems that big companies face. The most popular emerging non-relational database is called NoSQL (Not Only SQL).

Go for NoSQL databases when there is no fixed (and predetermined) schema of data fits in. In NoSQL, Scalability, Performance (high throughput and low operation latency), Continuous Availability are very important requirements to be met by the underlying architecture of the database. NoSQL can store enormous amounts of data in the range of petabytes.

  • Database index

The indexing technique is an important concept in Relational Databases. By using index in the correct way, it will boost the performance of retrieval data from a database dramatically. But in contrast, if index is used incorrectly, the performance is not improved at all, but the storage required to store indexes is increased without any benefit. The candidate should know what database index is and how Indexing works in RDBs.

  • Automated Unit Testing

Unit testing is the process of checking that the program works and continues to work as the developer intended. Automated unit testing allows any developer to verify that their current changes do not break the existing code, so it makes the code base more robust. A developer should be familiar to write automated unit tests and do it in their daily coding.

  • Version control

Being a developer in a team, it’s important to synchronize the code base between developers and to keep track of changes over time. One developer on the team may be working on a new feature while another developer fixes an unrelated bug. Each developer may make changes in several parts of the file tree.
Version control helps teams solve these kinds of problems by tracking every individual change by each contributor and helping to prevent concurrent work from conflicting with each other. A developer should be able to work well in version control systems such as SVN or Git.

  • SOLID DRY KISS

These principles are basic engineering principles that each software developer, more specifically Python developer should know.
DRY:
In software engineering, Don’t Repeat Yourself (DRY) or Duplication is Evil (DIE) is a principle of software development
KISS:
KISS is an acronym for the design principle “Keep it short & simple!”
SOLID:
When applied together, these principals intend to make it more likely that a programmer will create a system that is easy to maintain and to extend over time.

  • Regular expression

The regular expression is a powerful tool when working with text.
It makes the check and returns if it finds any text that matches your expression pattern.
Since most of these programming features deal with a lot of text, regex helps in performing validations against your strings/text of your interest in programs.

  • Software Architecture and Design Patterns

A developer should know about some common patterns including Architectural Patterns like: Client-server, MVC, MVVC, Event-bus etc.

Design Patterns like: Singleton, Factory, CHAIN OF RESPONSIBILITY etc.

Knowing these common Architecture and design patterns are not only for creating a code base, but also for quickly understanding the code base of a project that the developer is involved in.

Problem Solving Ability

During the interview process it’s important to evaluate your candidate’s ability to solve complex problems. Not simply if they can solve a problem but also to understand how they came to the solution. Ask the candidate to solve some quick problems so you can evaluate how the candidate approaches and solves each issue. As the interviewer, you should assessing how quickly they arrived to a good solution and how good that solution actually was.
Below is a sample question:
Given a string, find the length of the longest substring without repeating characters.
Additional examples:

  • Given “abcabcbb”, the answer is “abc”, which the length is 3.
  • With “bbbbb”, the answer is “b”, with the length of 1.
  • Given “pwwkew”, the answer is “wke”, with the length of 3. Note that the answer must be a substring,
  • “pwke” is a sub-sequence and not a substring.

Answer:

def longest_substring(s):
   char_dict = {}
   longest_count = 0
   for i, c in enumerate(s):
       if c in char_dict:
           longest_count = max(longest_count, len(char_dict))
           dup_i = char_dict[c]
           char_dict = {k: v for k, v in char_dict.items() if v > dup_i}
       char_dict[c] = i
   return max(longest_count, len(char_dict))

Additional questions similar to above can be found here.

Python Language Specific Questions

Question 1: What is Python and what are the key features of Python?

Some key points:

  • Python is a programming language with objects, modules, threads, exceptions and automatic memory management. The benefits of using Python are that it is simple and easy, portable, extensible, built-in data structure and it is an open source.
  • Python is an interpreted language. That means that, unlike languages like C and its variants, Python does not need to be compiled before it is run. Other interpreted languages include PHP and Ruby.
  • Python is dynamic but strong typing, meaning that you don’t need to state the types of variables when you declare them or anything along those lines.
  • You can do things like x=1 and then x=”A string” without error. But when you manipulate variables with different types, it will generate errors, unlike C# or Java: print(“A” + 1) # TypeError: must be str, not int
  • In Python, functions are first-class objects. This means that they can be assigned to variables, returned from other functions and passed into functions. Classes are also first-class objects. This is similar to Javascript.
  • Python is used widely from web applications, automation, scientific modeling, big data applications and many more. But it is famous for machine learning and data science. Python is one of the most popular programming languages used by data analysts and scientists.

Question 2: What is dictionary in Python?

A dictionary is a collection which is unordered, changeable and indexed. In Python, dictionaries are written with curly brackets, and they have keys and values.
It defines one-to-one relationships between keys and values. Dictionaries contain a pair of keys and their corresponding values. Dictionaries are indexed by keys.
An important feature of a dictionary is the complexity of getting and setting an element is O(1).
For example:

new_computer={'Chipset':'8th-generation Intel Core i7 processor','Card':'Radeon Pro 560X','Ram':'16GB 2400MHz DDR4', 'Storage': '512GB SSD'}
print(new_computer['Chipset'])
'8th-generation Intel Core i7 processor'

Question 3: Looking at the below code, write down the final values of A0, A1, …An.

A0 = dict(zip(('a','b','c','d','e'),(1,2,3,4,5)))
A1 = range(10)
A2 = sorted([i for i in A1 if i in A0])
A3 = sorted([A0[s] for s in A0])
A4 = [i for i in A1 if i in A3]
A5 = {i:i*i for i in A1}
A6 = [[i,i*i] for i in A1]

Answer:

A0 = {'a': 1, 'c': 3, 'b': 2, 'e': 5, 'd': 4}  # the order may vary
A1 = range(0, 10) # or [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] in python 2
A2 = []
A3 = [1, 2, 3, 4, 5]
A4 = [1, 2, 3, 4, 5]
A5 = {0: 0, 1: 1, 2: 4, 3: 9, 4: 16, 5: 25, 6: 36, 7: 49, 8: 64, 9: 81}
A6 = [[0, 0], [1, 1], [2, 4], [3, 9], [4, 16], [5, 25], [6, 36], [7, 49], [8, 64], [9, 81]]

List comprehension is an important task developers with work with every day. Not only Python but also in many other languages. So, this is a must-ask question to see if the  candidate is truly familiar with Python.

Question 4: How is memory managed in Python?

Memory management in Python is managed by Python private heap space. All Python objects and data structures are located in a private heap. The programmer does not have access to this private heap. The Python interpreter takes care of this instead.
The allocation of heap space for Python objects is done by Python’s memory manager. The core API gives access to some tools for the programmer to code.
Python also has an inbuilt garbage collector, which recycles all the unused memory so that it can be made available to the heap space.

Question 5: What is monkey patching in Python?

In Python, the term ‘monkey patch’ only refers to dynamic modifications of a class or module at run-time.
Consider the following example:

# m.py
class MyClass:
def f(self):
print "I am f()"

We can then run the monkey-patch testing like this:

import m
def monkey_f(self):
print "I am monkey_f()"
   
m.MyClass.f = monkey_f
obj = m.MyClass()
obj.f()

The output will be I am monkey_f(). As we can see, we did make some changes in the behavior of f() in MyClass using the function we defined, monkey_f(), outside of the module m.

Question 6: What are negative indexes and why are they used?

The sequences in Python are indexed and it consists of the positive as well as negative numbers. If you know Ruby, it’s kind of similar. It can be compared to the way of counting forward and backward in a circle.
The index for the negative number starts from ‘-1’ that represents the last index in the sequence and ‘-2’ as the penultimate index and the sequence carries forward like the positive number.
The negative index is used to remove any new-line spaces from the string and allow the string to except the last character that is given as S[:-1]. The negative index is also used to show the index to represent the string in the correct order.

Question 7: What is the difference between range and xrange?

In Python 2, range creates a list, so if you do range(1, 10000000) it creates a list in memory with 9999999 elements otherwises xrange is a sequence object that lazily evaluates.
But in python3, range does the equivalent of Python’s xrange.

Question 8: Consider the following code, what will be its output?

class A(object):
   def go(self):
       print("go A go!")
   def stop(self):
       print("stop A stop!")
   def pause(self):
       raise Exception("Not Implemented")
class B(A):
   def go(self):
       super(B, self).go()
       print("go B go!")
class C(A):
   def go(self):
       super(C, self).go()
       print("go C go!")
   def stop(self):
       super(C, self).stop()
       print("stop C stop!")
class D(B,C):
   def go(self):
       super(D, self).go()
       print("go D go!")
   def stop(self):
       super(D, self).stop()
       print("stop D stop!")
   def pause(self):
       print("wait D wait!")
class E(B,C): pass
a = A()
b = B()
c = C()
d = D()
e = E()
# specify output from here onwards
a.go()
b.go()
c.go()
d.go()
e.go()
a.stop()
b.stop()
c.stop()
d.stop()
e.stop()
a.pause()
b.pause()
c.pause()
d.pause()
e.pause()

Answer:

a.go()
# go A go!
b.go()
# go A go!
# go B go!
c.go()
# go A go!
# go C go!
d.go()
# go A go!
# go C go!
# go B go!
# go D go!
e.go()
# go A go!
# go C go!
# go B go!
a.stop()
# stop A stop!
b.stop()
# stop A stop!
c.stop()
# stop A stop!
# stop C stop!
d.stop()
# stop A stop!
# stop C stop!
# stop D stop!
e.stop()
# stop A stop!
a.pause()
# ... Exception: Not Implemented
b.pause()
# ... Exception: Not Implemented
c.pause()
# ... Exception: Not Implemented
d.pause()
# wait D wait!
e.pause()
# ...Exception: Not Implemented

Because OO programming is extremely important in today’s industry. Correctly answering this type of question shows that your candidate understands the inheritance and the use of Python’s super function.
python_developer

Conclusion

And there you have it. The topics covered in this tutorial will help you to separate the experienced from the not so experienced while interviewing candidates to join your team as well as provide strong preparation material for those interviewing for a Python developer role.

Think you have what it takes to become a skilled Python developer? Join our exclusive network of top developers today.

python

Intro to Image Processing in OpenCV with Python

Welcome to this tutorial covering OpenCV. This type of program is most commonly used for video and image analysis such as license plate reading, facial recognition, robotics, photo editing and more within C++, Python, C and Java. In this tutorial we’ll cover OpenCV for image analysis.
Firstly, the “CV” part in OpenCV as mentioned in the title stands for “Computer Vision” and Image Processing is just a small part of Computer Vision. Let’s take a few steps back. What is Computer Vision?
opencv
As the definition on techopedia:

Computer vision is a field of computer science that works on enabling computers to see, identify and process images in the same way that human vision does, and then provide appropriate output. It is like imparting human intelligence and instincts to a computer. In reality though, it is a difficult task to enable computers to recognize images of different objects.

Computer vision is closely linked with artificial intelligence, as the computer must interpret what it sees, and then perform appropriate analysis or act accordingly.
Nowadays, a huge amount of computer data is generated day in and day out and with the growth and expansion of technology, computers today have the ability to depict vision and process images far more better than the human eye.
In Computer Vision, there are 3 levels of processing images which are divided into 3 levels:
opencv
According to OpenCV homepage, OpenCV is:

OpenCV (Open Source Computer Vision Library) is released under a BSD license and hence it’s free for both academic and commercial use. It has C++, Python and Java interfaces and supports Windows, Linux, Mac OS, iOS and Android. OpenCV was designed for computational efficiency and with a strong focus on real-time applications. Written in optimized C/C++, the library can take advantage of multi-core processing. Enabled with OpenCL, it can take advantage of the hardware acceleration of the underlying heterogeneous compute platform.

So, in order to start with Computer Vision or Image Processing in particular, it is recommended to first start with OpenCV. Are you ready to begin?
For installation and settings, you can refer to this article on MacOS. Basically, you’ll need Python, OpenCV library for Python, numpy and matplotlib.

1. Basic definitions and theories

Image representation

Image representation is an image of dimensions. M×N is defined by the function b with:
                                                    b: DM x DN → In
Where DM = {1, 2, …, M}, DN = {1, 2, …, N} and n = 1, 2, 3,…

Pixel

The smallest part of an image is the pixel so we can call it a picture element. It is characterized by its position (i, j) and the intensity vector b(i, j).

Image histogram

If we represent an image in black-and-white color, each pixel in the image has a value that represents the amount of light. It only stands for intensity information.
So, if we have a digital image with a gray level in the range of [0, L-1]. A histogram is a plot that shows the “probability” p(rk) of the occurrence of gray- level rk with:
                                                    p(rk) = nk/N

  • rk is the kth gray level
  • nk is number of pixels with kth gray level
  • N is total number of pixels
  • k = 0, 1, 2, 3, 4, 5, …, L-1

So we can call it the “gray level distribution.”
gray_level_distribution

Example of a histogram

Histograms reveal a lot about an image. We will dive deeper into that later.

1. Applications

First steps

We will verify if you are ready to work with OpenCV. First, create a .py file and import the necessary libraries like below:

import cv2
import matplotlib
import numpy

If you don’t have any problems running this file then you are ready to continue.
Now, to have a very first application of OpenCV, we will first start with the histogram of an image below.
histogram
This image is named “gentleman.jpg”, use the below code to extract the histogram.

import cv2
import numpy as np
from matplotlib import pyplot as plt
img = cv2.imread('gentleman.jpg',0)
plt.hist(img.ravel(),256,[0,256])
plt.show()

The image has a lot of dark-color parts. This is reflected in the chart as you can see the number of pixels with low level of light is very high. The result:

Gamma correction

Correction (Enhancement) is to make an image more suitable than the original one for a specific application.
Gamma correction method is useful when you want to change the contrast and brightness of an image.
To understand about gamma correction, first we need to understand about Power Law Transformation. With input images f(x, y), and after transformation T, we have the enhanced output image g(x, y):
                                                    g(x, y) = T[ f(x, y) ]
If we denote r, s as the gray level of f(x, y) and g(x, y) for any point (x, y), the formula can be written as:

                                                    s = T(r)

An example of T

In the above example, for any gray level value, in the x-axis, we have the corresponding value in the y-axis as the result of the transformation.
So, to enhance the brightness of the image, we will change the value r to reach the value s. The Power Law Transformation is defined to do the work, and its form is:
                                                    s = c*ry
The above transformation uses r power γ (gamma), so it is called Power Law Transformation. By changing the value of γ, we have different results. So the gamma correction is the process of choosing the best value for gamma to have the best output image.

Plot for different values of gamma

When γ < 1, the original dark regions will be brighter and the histogram will be shifted to the right whereas it will be the opposite with γ > 1.
For this demonstration, we will use a really dark photo like the one below:

We will use gamma correction method to make it have a better brightness:

import cv2
import numpy as np
from matplotlib import pyplot as plt
darkImage = cv2.imread('dark.png')
plt.imshow(darkImage)
plt.show()
def adjust_gamma(image, gamma=1.0):
   table = np.array([((i / 255.0) ** gamma) * 255
                     for i in np.arange(0, 256)]).astype("uint8")
   # apply gamma correction using the lookup table
   return cv2.LUT(image, table)
plt.imshow(adjusted)
plt.show()



Take note of the difference. It’s like magic, right? The result:

Thresholding

The idea behind thresholding is really simple. At the most basic level, thresholding is used  to convert everything to white or black, based on a threshold value. By making use of the gray level, if the threshold is 125 (out of 255), then any value that was 125 and under would be converted to 0 (it means black), and everything above 125 would be converted to 255 (it means white). Normally, we will convert the input image to gray-scale before applying threshold.
In order to demonstrate this method, let’s look at a really dark book page like the one below:
dark_book
As you can see, the background really has no white in it at all. Everything is dim, but also everything is varying. On the left side, we have enough light to read the text, while the rest of the image is quite dark and requires a bit of focus to even try to read the text.
So, in order to apply the threshold, we use THRESH_BINARY threshold type. The function transforms a grayscale image to a binary image according to the formula below:

For the method ADAPTIVE_THRESH_GAUSSIAN_C , the threshold value T(x, y) is a weighted sum (cross-correlation with a Gaussian window) of the blockSize x blockSize neighborhood of (x, y) minus C . The default sigma (standard deviation) is used for the specified blockSize. So we have the code:

import cv2
import numpy as np
from matplotlib import pyplot as plt
img = cv2.imread('bookpage.jpg')
plt.imshow(img)
plt.show()
grayscaled = cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)
th = cv2.adaptiveThreshold(grayscaled, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY, 115, 1)
plt.imshow(th)
plt.show()
cv2.waitKey(0)
cv2.destroyAllWindows()

Now, we have the output version of the book page in black and white which makes the page much easier to read.
light_book
We have just briefly covered the topic of Computer Vision and how to use the OpenCV Library for Python to demonstrate several very basic levels of image processing. We hope that you will have a point of view of computer vision in general and image processing in particular. Yes, it is very  basic but as you can see, it is very powerful.
All source code and the result as demonstrated above were documented in a Jupyter notebook which you can download here.

Are you ready to put you OpenCV skills to the test? Learn more here about how you can join Pangara’s exclusive network of top developers.

angularjs developer

What an AngularJS Developer Should Know

If you search for jobs in web development for long enough, you’ll soon notice that one of the names that keeps coming up again and again is AngularJS—both as a standalone specialization and also as a required skill for other jobs. Whether you want to build a career as a dedicated AngularJS pro or simply add it to your web developer’s toolkit, this article will tell you what you need to know to work with Angular.

AngularJS: What is it?

First things first: what is AngularJS? To begin with, as the name implies, it’s based on the JavaScript programming language. Angular is a front-end framework for web development: it provides a standardized way to build web apps quickly, efficiently, and safely. AngularJS runs “on the client side”, meaning that once a user has loaded your web page on her or his end, interactivity and changes to the page are possible without requiring another call to the server: the loaded page is simply rewritten in the browser.

Why learn it?

So why is AngularJS so popular? And why might you want to learn it?

First, it’s amazingly powerful and yet (reasonably) beginner-friendly. It lets you create beautiful, efficient front-end experiences for your users without requiring much in the way of back-end knowledge.
Second, it’s open source and largely maintained by Google, which means you get the best of both worlds. The biggest name in tech has a vested interest in supporting it, but it’s also free to all and responsive to the needs of its community of developers.
Finally, if you’re looking to get into full-stack web development, it’s the front-end part of one of the most popular software stacks around: MEAN (no points for guessing which letter stands for “Angular”).
So what are some of the core skills and competencies for an AngularJS developer to learn?

The Basics

JavaScript

Well, it’s got “JS” in the name for a reason. And yes, if you want to be really proficient in AngularJS, you’ll want to have a solid grounding in JavaScript (otherwise you’ll just wind up copying lines of code from Stack Overflow without really having any idea what you’re doing).
That said, it isn’t necessary to be an absolute master of JavaScript in order to work—and work well—with AngularJS. And there are a lot of extremely well-designed video courses and readable tutorials online that make getting up to speed in JavaScript as painless as possible.
Once you’ve got the basics of the language’s syntax down, and understand some of its common features and quirks, jumping into full-on Angular development will be a lot easier.

HTML and CSS

As we mentioned above, AngularJS is a front-end web development framework that works on the client side. That means that it does what it does by working with the HTML and CSS files that your server sends to your end user’s browser.
Obviously, then, it’s going to be crucial that you understand the basics of how HTML and CSS work…and then get good at them.
For a brief video intro to HTML and a companion series for CSS, check out the Dev Tips YouTube channel. These are fun, useful, and informative introductions to the basic technologies of front-end design.
For a more thorough grounding in HTML and CSS, you’ve literally got hundreds (if not thousands) of options to choose from online. But the tutorials at W3Schools, both for HTML and CSS, are thorough, come with examples and exercises that can be done in your browser, and, maybe best of all, are completely free.

AngularJS

This one’s kind of a “no-brainer”. If you’re going to work with this framework, you’ll need to learn it inside and out. Fortunately, there are some excellent free resources and even full courses online.
And if you’re willing and able to spend a little bit more money, online code school Udemy has a full AngularJS course available that comes with lots of projects to help you learn and practice your newfound skills. Added bonus? These sorts of projects are great for showing to potential employers as part of your developer’s portfolio.

Going Deeper

Once you’ve got the fundamentals of front-end development down and have started to tackle JavaScript and the AngularJS framework, there are a couple of things you’ll want to pay attention to—and maybe spend a bit of extra time studying.

MVC

MVC is a common pattern in software development. It stands for “Model-View-Controller”, which refers to how the code for a given application is organized. An MVC architecture allows for efficient, secure development.
MVC is used in AngularJS development, and while you’ll probably wind up actually doing it in your tutorials and projects, it’s a good idea to read up on best practices for MVC implementation in AngularJS as part of your course of study.

Testing

Most programmers agree that test-driven development is best. And whatever your overall philosophy, testing your code for robustness and integrity is both a crucial step in rolling out a web app and also a core skill if you want to work as a professional developer.
To learn more about the role of testing in AngularJS development, you can check out this short video on the topic.
And you may want to explore Karma and Jasmine, two of the most popular testing tools in the world of Angular development.
For a full introduction to how to use these technologies, check out this tutorial, which will take you all the way from setup to unit tests.

Next Steps

Once you’ve grasped the basics of front-end development in AngularJS, you may want to think about how to move your skills (and your career) to the next level.
Below are two possible avenues of study to help you on your way.

Other Front-End JS Frameworks

OK, you’ve learned AngularJS. So why would you learn yet another front-end JavaScript framework?
Well, first of all, as an AngularJS developer, you may be called upon to justify your company’s way of doing things to a client (“But my friend says his company uses React. Why don’t you guys use React?”). Or you might find yourself asked to take over a half-finished project that was first planned in another framework: which means that knowing how those frameworks actually work will make your life a lot easier.
But aside from practicalities, it’s also an excellent learning experience to see how another framework does the same thing as yours…but in a different way. It will give your knowledge of programming more depth and more perspective—and it may help you to better understand and articulate the advantages to doing things the way you do them in Angular.
Some of the more popular front-end JS frameworks are React (which can be explored via 5-minute intro or full video tutorial) and Ember (this short video tutorial is a good way to see if it’s of interest to you).

Back-End JS Frameworks and More

If you’re looking to become a full-stack web developer, and already know AngularJS, you’re already well on your way! As we mentioned already, Angular is one part of the popular MEAN stack (OK, spoilers: It’s the “A”). The other components are MongoDB, a NoSQL database, as well as Express.js, a full web app framework which runs on the Node.js environment. These last two are—you guessed it—based on JavaScript.
PANGARA_LOGO_
Although some people simply prefer front-end development to the full-stack world, there are obvious financial and career advantages to building out your knowledge of the stack so that you can write code from the server all the way to the client’s browser. And so although that takes us to the end of this article, if you’d like to learn more about what full-stack developers do, check out this post on our blog.

iOS_developer

What an iOS Developer Should Know

Apple has an enormous and growing fan-base all over the world. And with good reason: their computers—and especially their mobile devices—are the last word in tech when it comes to style and sophistication. But beneath the sleek exterior of the latest model iPhone is something even more impressive: a plethora of slick, high-performance apps to satisfy every need and desire. Sold (or given away) out of Apple App Store, these standalone programs are engineered for performance, security, and above all, a great user experience.
So who programs these apps? Why, an iOS developer, of course. And these in-demand programmers are some of the highest paid in the industry, with an average salary in the US of over 100K per year.
What does it take to join the elite of the programming world? That’s what we’ll cover in this article, whether you’re looking to land your very first programming job as an iOS dev or planning a career that will take you all the way to senior developer.

The Basics

An iOS developer typically works with one of two main programming languages: Objective-C or Swift. If you want to write iOS apps, you’ll need to become a master of one or both of them.
Objective-C was the language of choice for Apple developers for years. It’s built on C and shares many of the features of that language, though it’s considerably easier to work with.
Swift, on the other hand, is Apple’s own invention. It’s lightweight, secure and powerful. And perhaps most importantly for the novice programmer: It’s not based on C. That means Swift is generally easier for new programmers to read and understand, since it was intended for rapid program and app development on Apple operating systems and doesn’t have any of that “C baggage” that some programmers complain about in Objective-C. Swift is also supported and strongly encouraged by Apple, as you might expect. All of this means that many people think it’s the way of the future for macOS and iOS developers.
So if you’re just starting out, Swift may be your best bet. It’s probably easier to learn, and it has the full backing of the people who make the OS that you’ll be developing for!
But if you’re coming from C and think you could pick up Objective-C quickly, or if you already know the language, there’s no reason you can’t start as an iOS developer today—the language isn’t going away any time soon!
ios_developer

What do you need to work?

The iOS dev wears many hats. And if you want to be a truly strong developer, you’re going to have to master a wide range of skills—from hard technical coding skills to the fundamentals of good UX design. But there are a few basics that every iOS developer needs to know:
MVC stands for “Model-View-Controller”. It’s a design pattern used to organize code in software and web development. And it’s essential for an iOS developer to understand. When designing in MVC, every piece of your app will either play the part of model, view, or controller. This is a pretty simplistic breakdown, but basically, the model is the data storage and the logic of your app, the view is what the user sees and interacts with, and the controller is the bridge between the two, the way that your user can change what’s in the model and the way that the model can show itself to the user. For a more in-depth discussion, have a look at this short video or go right to Apple’s developer documentation.
Xcode is Apple’s own IDE (Integrated Development Environment). Free, massive, and well-supported, it’s the IDE most often used to code iOS apps. If you’re brand new to programming, you might be asking yourself, at this point, “But what’s an IDE?” Good question! It’s basically a program that’s used to write code, but it’s not just a text editor—it has “smart” features like debugging, auto-completion of common code functions, and other goodies designed to make software development fast and painless. In fact, IDEs are so powerful that some programming instructors tell their beginning students not to use them when learning their first programming language, because the program basically “does all the work” for the student! But once you’ve acquired a deep knowledge of programming and are a working developer, an IDE is an indispensable productivity tool. If you’re going to be doing iOS, Xcode is probably the IDE to learn.
Cocoa Touch is the framework (more precisely, group of frameworks) that is used to build iOS apps. If you’re already familiar with the world of programming, the idea of a framework will be very familiar to you. But if you’re new to the game, for now it’s enough to know that a framework is basically just a collection of ready-to-use code. Why do programmers use them? Because frameworks help them accomplish their goals and deploy functioning apps quickly and reliably, without having to start writing code “from scratch” every single time. Cocoa Touch contains a framework for building elegant and beautiful user interfaces, UIKit, as well as Foundation, which helps developers to create the basic functionality of their app and manage data. Learning the ins and outs of Cocoa Touch is an integral part of working as an iOS developer.
Git, which probably sounds familiar if you’ve heard of the programming site GitHub, is a version control tool. When you’re just building apps in your bedroom, or creating portfolio pieces as you finish an online course, you don’t really have to worry about how you’ll deploy multiple versions of your software, or allow other people to download and modify your apps, or work as part of a large team on the same program. But once you’re working as a professional developer, all of these things become crucial, which is why you’ll need to learn a version control tool like Git. It’s not that hard to get the hang of, though it takes some effort at the outset—but the reward is that you’ll feel confident and competent once you learn how “real programmers” do things.

Senior Developers

Google the words “Senior iOS developer” and you’ll get hundreds of job ads from all around the world. And each one will be looking for different high-level skills and specialized knowledge. If you’re thinking of making a career of iOS development, it can be difficult to know what you’ll eventually have to learn (after you’ve mastered the basics). But despite the huge amount of subjects out there to study, all senior app developers basically just have to be able to answer two questions. And if you understand that, you can map out your own curriculum of study, depending on your career goals or the company you want to work with. So what are those two questions?

Can you make the apps better?

Any competent junior iOS programmer can write strong code and work as part of a team to get an app finished and deployed to the App Store. But that’s not the end of the story. In fact, it’s just when the real work begins! And the senior developers are the ones who lead the way in taking responsibility for the continued development and improvement of the apps their teams create. Why? Because consumers—and reviewers—are ruthless. And competition is fierce. Give the market a less-than-stellar user experience, and you might find your app deleted from iPhones all over the world. So continuous app development and improvement is a core skill for any senior developer to master. This means exploring topics like how (and why) to use continuous integration tools such as Jenkins. It also might mean really learning how to use the full power of the Xcode IDE by mastering its UI tests and debugging tools.
And the second question for a senior developer to answer? Similar to the first, but this time the focus is on the people, not the technology:

Can you make your team better?

Senior developers need to be good leaders and coaches, since app development is increasingly a team activity, and since app support and improvement—especially if your app becomes really popular—is something that really can only be done by a team. So this might mean developing project management skills in a popular methodology such as Agile. But it can also mean learning how to coach or even teach new recruits the basics of iOS development—or helping more experienced but still junior programmers improve their craft with constructive feedback and targeted development plans.
PANGARA_LOGO_
If you’ve decided to pursue iOS development, any of the resources given in this article is a great place to start—and as they say, there’s no time like the present! And if you’re moving along in your learning and are starting to wonder how to actually get a job as an iOS developer, you might be interested in learning more about what we do here at Pangara.

full stack developer

Key Resources to Learn Full Stack

Take a glance at any of your coding peers’ LinkedIn pages and you’re sure to see “Full Stack Developer” on their list of skills, with perhaps little or zero explanation about what is full about this person’s stack.
Job boards also are seemingly abundant with requests for Full Stack Developers. Maybe underneath the broader listing are needs and terms that you might know. They might write “needs to know Java” or “must have experience managing a database” but you, an experienced programmer, know that these are wildly different programming skill sets.
So, what gives?
More and more, tech companies are asking for programmers who can work across a range of disciplines. A Full Stack Developer is a special type of programmer in that they can do it all.
This is one of the most active areas professionally for developers. Of the nearly 50,000 developers surveyed by coding education site Stack Overflow, 28 percent of them reported “Full Stack Web Developer” as their occupation.
These are men and women who are working in a range of skill areas (or “stacks” as we’ll later learn). They are comfortable with the “full” breadth of the software or web development process.
So, when we talk about what it takes to become a Full Stack Developer, we’re asking what the primary elements of this jack of all trades is.

Do I need to know everything?

Will you be a Full Stack Developer after reading everything on this page? No. But nor is it feasible or necessary to become one.
The Full Stack Developer is the person who can do it all (and if they can’t do it all immediately, they know how to get up to speed and find the right resources so they can), but better serves their team by not doing it all. They identify intersections of company expertise, web assets, programming resources and existing code work that can be merged to create a software solution.

Think of it like a conductor of a symphony. While the conductor may know how to play a trumpet, it’s not critical to their job, which is to hear the trumpet relative to the orchestra and change the performance as needed to properly play the song.

Increasingly, programmers are being asked to work across disciplines and find ways to connect previously discrete skills, like building a relationship between databases and building one with your colleagues. But this is the next step of software development, an ability to see beyond the individual pieces and identify big things that are possible through previously unconnected elements. It may not have been obvious that you could put a trumpet and snare drum together before an orchestra. Similarly, it probably wasn’t clear what the connection was between high quality video and cloud delivery before the marriage of Netflix and Amazon Web Services. That’s something that you’d need the whole range, the full stacks to be able to see first.

What is a stack?

The “stack” in the name is a cluster of related skill sets—from programming languages to frameworks and familiarity in common resources—that constitute one part of the web product’s abilities.

Let’s take these clusters one by one to breakdown showing you:

  1. What specific skill sets, programming languages, frameworks, etc. each stack contains
  2. Where you can learn them

Let’s go stack by stack so you can start mapping out your journey to become a Full Stack Developer.
What are the major “stacks” and how do I learn them?

Front end development

This the client-facing side of programmers that will be used to create the public side of an app or website. It is, as the name, states the project’s front. These are the fonts, colors, sliders, videos and games the Internet user sees. When recruiters talk about this specific stack, they’re talking about client interfaces, things that can be made with HTML and CSS.
To cultivate these skills, you’ll need to:

  • Get to know Git as well, a kind of Google Docs for collaborative programming. This is the preferred way for software developers to work collaboratively.
  • Get familiar with and be able to explain HTML semantics, HTML language used to “talk” to web resources to get them to display a page properly.
  • Learn how to draft functional resources within CSS, the language used to create client interfaces with dynamic display that differs depending on what device is interacting with the program or app (CSS Media Inquiries).
  • Get up to speed with Bootstrap, which is a library of premade functions that use HTML, CSS and JavaScript to help you work faster and more effectively using tested work. Bootstrap is buffet of elegant web objects—sliders, carousels, dynamic menus—that are going to make you seem like a web wizard.

Aside from reading and developing comprehension of the above, your key resources here are:

Back end development

The app or website doesn’t exist in a vacuum. It’s likely creating user data and lives on a server. The programming architecture that unifies each of these critical administrative functions is known as the back end development stack, the back as it’s out of public view unlike the front as explained above.
As a Full Stack Developer with a back end development background, you should start getting familiar with:

  • Python. We suggest a foundational python course, like this one.
  • Ruby. There are plenty of tutorials to get you started with this programming language, but we recommend an interactive tutorial like this one so you can see your results in real time.
  • Java. This tutorial will take you through simple and practical approaches while developing a deep understanding of the programming language.
  • The different frameworks that one might use to create backend programming like Ruby on Rails or Symfony.

Database management

This is where your skills managing stored data and a web application that requires it to function come in. This is a stack where your Microsoft Access and SQL mediated database management are relevant.
As a Full Stack Developer with a database management background, you may be asked about:

  • Relational databases, storing data as related tables rather than as independent JSON documents.
  • The virtues of SQL over another programming language (it’s fast at getting large chunks of data and it hews to an industry standard unlike other database languages).
  • The basics of web storage: where cookies are stored, what kind of data a visitor session creates, etc.

To get started with the fundamentals, your key resources here are:

Think you have what it takes to join Pangara’s exclusive network of freelance developers? Learn more here.

javascript_promises

Understanding Javascript Promises

Javascript Promises and Promises in general are not a new concept in the world Javascript but they were not very popular until they were officially supported in ES6. Javascript Promises are not difficult themselves, however many people find them a hard to approach and dive into at the beginning. So, shall we begin?

What is a Promise?

As mentioned in Mozilla docs:

A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action’s eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

Do we still have your attention? As always, the official description can be hard to decipher upon first glance especially for beginners. We hope  that after reading this article, you can come back to this definition and understand what it was originally intended to mean.
One aspect to note in the definition is that the word “asynchronous” is repeated three times. It suggesting that a Promise is something related to an asynchronous execution manipulation.
Before we get too far ahead of ourselves. Let’s take a step back to understand the difference between synchronously and asynchronously in programming:
When a program is first executed, it is combined with a series of tasks.

  • When a task is executed synchronously, it means that the task will have to wait for it to be finished before moving on to the next task.
  • When it’s done asynchronously, it means that the program can move on to another task before it gets finished and the execution of the asynchronous task will not affect the execution of the program.

javascript_promises
Many people may agree that synchronous programming is a quite complicated topic because it needs to perform careful and sophisticated techniques in order to control how things tie together when they’re occurring at the same time.
Because of this, if you’d like to make the process of working with asynchronous much easier, that’s where Promises were born and became natively supported in Javascript. This tool helps us to deal with controlling asynchronous tasks in Javascript.
But before diving into further details on Javascript Promises work, let’s consider the following scenario:

Imagine you’re at a restaurant having lunch and you order a set lunch with fried chicken, rice, and a salad.

Have you ever thought about the process of how they make the food and serve you your order? We like to think of it like this: There are three parties cooperating with each other to prepare your place of food. And let’s assume they operate in different parts of the kitchen.
The cook prepares the chicken, the sous chef prepares the salad, and the third person cooks the rice.
The flow or work can be abstracted like so:

  • Job I: The cook frying the chicken:
      1. Step 1. Take the raw chicken out from the refrigerator to thaw
      2. Step 2. Marinate the chicken with various spices for an hour
      3. Step 3. Fry the chicken in the pan until its juices run clear, its skin is pierced with a knife and it looks ready to eat
  • Job II: The sous chef prepares the salad:
      1. Step 1. Sort out which vegetables will be in the salad
      2. Step 2. Mix the vegetables with mayonnaise or another type of seasoning or dressing
  • Job III: The third chef who cooks rice:
    1. Step 1. Wash rice
    2. Step 2. Cook the rice

In order to perform each step and to reach the final step of the whole project (i.e. bringing the plate to the customer), one must wait for the previous step to be completed. But the process of each job should not block the whole kitchen’s flow of work. The result of the current step may impact the next step to reach completion. In this case, the frying of the chicken must not block the whole kitchen’s execution.
For instance, in order to marinate the chicken, you have to thaw it first. And you have to have your chicken marinated with spices before frying or sauteing it with oil.
While the chicken is being made, the salad and the rice are also in the process of being prepared.
Javascript Promises manage tasks almost the same way the kitchen executes a job (frying the chicken, making the salad and cooking the rice). This is like asynchronous tasks in a program.
Enough about food. Let’s take these concepts to a real program.

What is a Promise in Javascript?

When a program gets executed, an asynchronous task takes time to complete its execution (or fail) and then it returns some result. We know that it will come at a specific time in the future but the program cannot ensure when exactly the event will occur.
Javascript Promises act like proxies between the program and the asynchronous task. It makes a promise to the program that it will inform the program when the execution of the asynchronous task is completed or if is has failed. All in all, it will not affect the execution or result of the asynchronous tasks. Instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.
The program must pre-define the scenarios of what to do when the asynchronous task is completed and when it fails.
javascript_promises

How do Promises work?

A Promise in its life will be in one of these states:

  • pending: initial state, neither fulfilled nor rejected. This state is when it got created using new Promise constructor.
  • fulfilled: meaning that the operation completed successfully.
  • rejected: meaning that the operation failed.

Creating Promises syntax:

var promise = new Promise( /* executor */ function(resolve, reject) {   
    // Do something, possibly an async task.  
      
    if (/* Everything turned out fine */) {  
        resolve(/* Maybe the result of the async tasks etc */);  
        // After this the state of this Promise becomes fulfilled.  
        // When resolve function is called, it means that this Promise notified   
        // the completion of the asynchronous task being moderated.  
    }  
    else {  
        reject(Error("Some error message"));  
        // After this, the state of this Promise becomes rejected.  
        // When resolve function is called, it means that this Promise notified   
        // the end of the asynchronous task with an error.  
    }  
} );

The created Promise object wraps around the asynchronous execution in order to moderate what is happening inside the executor.
Once it (the Promise) is declared, the executor is called immediately. The executor is called before the Promise constructor even returns the completed object.
The executor normally initiates some asynchronous tasks, and once they’re completed, if everything turned out ok, it then calls the resolve function in order to resolve the promise or else it rejects it if an error has occurred.

.then() method

The object promise of this type of Promise has the method then(). This method takes two types of functions into its parameters.
One is a function that will be passed the resolved value of the Promise once it is fulfilled.
The other is a function to be called on if the Promise is rejected.
Consider the following example. Note that in this program, we assume that 1 second means 1 minute. And we use the setTimeout() function (kind of asynchronous) for easy illustration:

var thawChicken = tineToThaw_minutes => {  
    console.log("Chicken is being thawed...");  
  
    return new Promise((resolve, reject) => {  
    let isSomethingWrong = false;  
  
    setTimeout(() => {  
        if(!isSomethingWrong){  
        resolve("Thawed chicken"); // <= This will be the argument of the first function parameter of then method.  
        }else{  
        reject(Error("Something wrong happended!")); // <= This error object will be passed as the argument to the second function parameter of then method.  
        }  
  
    }, tineToThaw_minutes * 1000);  
    });  
}  
  
thawChicken(3 /* minutes */).then(  
    chicken => console.log("What we have after waiting? - " + chicken),  
    error   => console.log("Error message: " + error.message)  
)

You can review a live example here.
If you change isSomethingWrong to true in the above example, you will see the error notified.

.catch() method

As you can see in the above example, the Promise has both a success and an error handler.
But what happens if the success handler throws an error? There’s nothing there to catch it then an error gets swallowed.
So that’s where the .catch() method comes into play. Simply, use it like this:

thawChicken(3 /* minutes */).then(  
    chicken => console.log("What we have after waiting? - " + chicken),  
    error   => console.log("Error message: " + error.message)  
).catch(errorHander);

We recommend ending all promise chains with a .catch()!

Promise Rules

  • When a Promise is initiated, its state is pending. This Promise can only be changed into a resolved or into a rejected state.
  • A resolved or a rejected promise is settled, and it must not transition into any other state even if you try to reset it.
new Promise((resolve, reject) => {  
  resolve('resolved!');  
  resolve('re-set resolved!');  
  reject('rejected!');  
}).then(  
  mes => console.log(mes),  
  err => console.log(err)  
);

This will output: “resolved!”

  • Once a promise is settled, it must have a value (which may be undefined). In other words, that value must not change.

Chaining

Because the .then() method always returns a Promise, we can chain ‘thens’ together in order to transform values or to run additional async actions one after another. These will be run in a queue which also control the flow of asynchronous tasks all together in an easy and natural way.

Transform values

new Promise((resolve, reject) => {  
  resolve('message');  
}).then(  
  mes => mes + ' to transform'  
).then(  
  transformedMessage => console.log(transformedMessage)  
);

Output will be: “message to transform.
In this example, when we have the message from the above Promise, we transform the new message to the next then as then transformedMessage by returning it in the previous then.

Control asynchronous tasks flow

By returning an async task, we can also chain thens to run async actions in a sequence flow. This is an advantage of a Promise over the classical callback to avoid what many like to note as “callback hell.”

var thawChicken = tineToThaw_minutes => {  
  console.log("Chicken is being thawed...");  
  
  return new Promise((resolve, reject) => {  
    let isSomethingWrong = false;  
  
    setTimeout(() => {  
      if (!isSomethingWrong) {  
        resolve("Thawed chicken"); // <= This will be the argument of the first function parameter of then method.      
      } else {  
        reject(Error("Something wrong happended!")); // <= This error object will be passed as the argument to the second function parameter of then method.      
      }  
  
    }, tineToThaw_minutes * 1000);  
  });  
}
  
var marinateChicken = (chicken, spices) => {  
  console.log("Marinating chicken with spices...");  
  
  return new Promise((resolve, reject) => {  
    setTimeout(() => {  
      resolve("Marinated Chicken");  
    }, 5000);  
  });  
}  
  
thawChicken(3 /* minutes */ ).then(  
  chicken => {  
    console.log("What we have after waiting? - " + chicken);  
    let spices = ["Salt", "Sugar", "Pepper", "Garlic"];  
    return marinateChicken(chicken, spices);  
  },  
  error => console.log("Error message: " + error.message)  
).then(  
  marinatedChicken => console.log("After marinating we have: " + marinatedChicken);
);

You can view a live example here.

By using chaining, the code looks so natural in lexical.

Promise.all

A Google search will explain that::

The Promise.all(iterable) method returns a single Promise that resolves when all of the promises in the iterable argument have resolved or when the iterable argument contains no promises. It rejects with the reason of the first promise that rejects.

Because Promise.all returns a Promise, it is then-able. The returned promise is fulfilled when all promises passed to the all method have been resolved. This helps us to define an action to be performed when all promises are done.
Promise.all get rejected when any of the passed-in promises are rejected despite whether or not the other promises have been resolved.
And there you have it. Hopefully after reading this blog post Javascript Promises and Promises in general won’t be as intimidating as they appear upon first glance. We promise. 🙂
Pangara

Think you have what it takes to join our exclusive network of freelance developers and programmers? Learn more about becoming a Pangara Talent today.