Hire The Top 1% Freelance Frontend Developers

Flexiple is a network of top Frontend developers, engineers, and architects with hourly rates ranging from $30 to $100. Join 100+ teams who have hired Frontend developers from Flexiple for a few weeks to a few years!
JAROSLAW BOGULAK

JAROSLAW BOGULAK

Senior Frontend Developer

PREVIOUSLY AT

homely
SURBHI AIRAN

SURBHI AIRAN

Senior Frontend Developer

PREVIOUSLY AT

DXC Tech
ANDREI SERBAN

ANDREI SERBAN

Senior Frontend Developer

PREVIOUSLY AT

BMW Group
ERIC GROSSE

ERIC GROSSE

Senior Front-end Developer

PREVIOUSLY AT

Navori Labs
RAVISH ARYA

RAVISH ARYA

Senior Frontend Developer

PREVIOUSLY AT

Mobiquity

Flexiple spent good amount of time understanding our requirements, resulting in accurate recommendations and quick ramp up by quality developers.

Narayan Vyas, Senior PM (YC S12)

Overall Flexiple brought in high-level of transparency with quick turnarounds in the hiring process at a significantly lower cost than any alternate options.

Esther Hersh, Co-founder ('17 NYU Grad)

Flexiple has been instrumental in helping us grow at a fast pace. Their vetting process for engineers is top notch and they connected us with quality talent quickly.

Tanu V, Founder (#1 Salesforce Leads App)

Work With Flexiple's Expert Frontend Developers!

Be a short-term or a long-term project, don't compromise on the quality of talent you work with. Flexiple handpicks only the Top 1% through a 6-stage screening process.
  • JAROSLAW BOGULAK
    JAROSLAW BOGULAK
    HTML Angular Laravel

    Jaroslaw (Jarek) is a developer with over 10+ years of experience. He has a vast array of knowledge ranging in multiple languages & frameworks and ... loves taking complex business challenges and designing optimal solutions. He has worked with startups from different industries including Blockchain, FinTech, E-commerce, etc. Jarek is a seasoned professional dedicated to his craft and developing the best product. Read more

    Previously at homely

    Hire Jaroslaw
  • SURBHI AIRAN
    SURBHI AIRAN
    REACT NODE ANGULAR

    Surbhi has 4+ years of experience in software development and has worked as a front-end developer with experience in building apps across ReactJS and AngularJS ... as well as NodeJs on the backend She has been working as a freelance developer for the past couple of years and possesses good communications skills (verbal and written) and is very responsive. Read more

    Previously at DXC Tech

    Hire Surbhi
  • ARJUN KAPOOR
    ARJUN KAPOOR
    REACT ANGULAR JAVA

    Arjun, has around 10 years of experience in the software development space, with special expertise in front-end development. His areas of expertise revolve around ReactJS, ... NodeJS, Angular, Java, Android, C/C++ and Perl. Arjun gained experience by working in large product companies such as Atrenta and Guavus across stacks. He then ventured into freelancing and has been working as a front-end React freelancer for the past 3 years. Read more

    Previously at Guavus

    Hire Arjun
  • ANDREI SERBAN
    ANDREI SERBAN
    REACT VUE PHP

    Andrei is a senior full-stack developer with knowledge of mobile app development. He has extensive experience of 11 years in the software development sphere. He ... is adept in technologies like ReactJS, Angular, VueJS, Redux, React Native, etc. His work at the German multinational automobile company, BMW stands out in his profile. He has worked with diverse domains like trade, real estate, transport, sports, etc. Read more

    Previously at BMW Group

    Hire Andrei
  • ERIC GROSSE
    ERIC GROSSE
    REACT NODE VUE

    Eric has a prolific record of building frontend for multiple large-scale web applications for 6 years. Having been freelancing for the past 5 years, he ... has worked for various startups in roles that range from junior to lead developer. He is also an accomplished blogger with several published tech articles under his belt. He is an expert in multiple javascript libraries such as ReactJS, NodeJS, Angular, jQuery, Redux, etc. Read more

    Previously at Navori Labs

    Hire Eric
  • HEMALATHA MALLAVARAM
    HEMALATHA MALLAVARAM
    ANGULAR REACT NODE

    Hemalatha is a senior developer with more than a decade of experience and has worked across fields like finance, retail, public sector, etc. She has ... worked on ExpressJS, React-Redux, React Native, Angular,js, NodeJS, Ionic, AWS, Kubernetes, etc. Hemalatha has experience as an architect while designing & developing mobile and web applications for top-notch companies like G&E, J.P Morgan, and Coco-Cola. After having worked as a part of a team and as a lead, she has been venturing as a freelance JavaScript developer. Read more

    Previously at Baker Hughes

    Hire Hemalatha
  • RAVISH ARYA
    RAVISH ARYA
    ANGULAR NODE REACT

    Ravish is a polyglot developer with 15+ years of experience. Over his career, he has worked on modern software development technologies such as JavaScript (ReactJS, ... NodeJS, React Native) building complex applications for the likes of IBM and Amazon. Since June '19, he has been enjoying the freedom that goes along with working on freelance projects and enjoys teaching coding in his free time Read more

    Previously at Mobiquity

    Hire Ravish
  • JEFF LEI
    JEFF LEI
    VueJS Javascript NodeJS

    Jeff is an adept developer with 9 years of proven web development experience. He has a Master's degree in Computer Sciencefrom the The Hong Kong ... University of Science and Technology. Over the last 3 years, he has worked as a remote engineer in several companies based in Europe and America. He is an expert in several Javascript frameworks and has developed applications for a variety of industries. Read more

    Previously at phData

    Hire Jeff

Flexiple Helps You Hire Quality Developers, Handpicked for You

  • Work only with the best

    Our developers are selected through a 6-stage screening process. As a result, our developers have an average of 5-years industry experience and are ready to immediately contribute on projects.
  • Work with Role-specific Developers

    Save time and energy lost in manually sifting through profiles. Our solutions expert along with our Director of Technology will handpick developers who are a perfect match for your requirement.
  • Work Risk-free & Start within 2 Days

    With immense confidence in the quality of our developers and the accuracy of our recommendations, we are happy to offer you a 1-week trial where you pay only if you are satisfied.

Find the perfect developer for your team at the right price

  • Individual Contributor

    $
    /year
    $30-50
    /hour
    • 1-3 years of experience
    • Mostly worked on a single stack
    • Top Individual Contributor
  • Multi-faceted Contributor

    $
    /year
    $50-80
    /hour
    • 3-7 years of experience
    • Expertise in multiple stacks
    • Worked on niche skills
    • Mentors Junior Developers
  • Leader & Diverse Contributor

    $
    /year
    $80+
    /hour
    • 7-10+ years of experience
    • Worked across stacks, products
    • Multiple niche skills
    • Led multiple teams in the past

How We Select the Top 1%

45.4%pass rate

Depth in past work

Flexiple Developers are reviewed on their experience and complexity of products built. Those who display depth and have worked on end-to-end projects are given an introductory call.

14.6%pass rate

Good communication and motivation

Over a call, the developer’s ability to communicate in an articulate manner is tested. A deeper understanding of the candidate’s technical experience and also motivation to freelance is achieved.

3.1%pass rate

Strong technical abilities

Over one or more F2F interviews, the developer’s involvement and performance in building complex software products are assessed. This sets the platform to delve deeper into technology-specific discussions.

1.5%pass rate

Keen problem solving and coding

Developers' mental agility and problem-solving abilities are tested through a coding test involving algorithmic as well as skill-specific problems. A mixture of live evaluation and timed coding tests is used.

1.2%pass rate

Splendid reviews in background check

The live experience of working with developers is verified by reaching out to past clients and/or employers. Inputs on various qualitative factors such as reliability, punctuality, communication and responsiveness are received.

1%pass rate

Consistent exemplary performance

Performance during each engagement is continually assessed. Our developers are expected to maintain Flexiple standards across all engagements with our customers.

Hire Freelance Frontend Developers within 48 Hours!

Our simple process gets you working with the right freelancer quickly and seamlessly

Don't Just Take Our Word For It!

(Y-Combinator S12 and Andreessen Horowitz-backed Company)

Quality product launched on schedule by a team of 8 engineers

"Flexiple helped us hire quality developers across technologies - Node, Rails, PHP, Python. They spent a good amount of time understanding our requirements, resulting in accurate recommendations and quick ramp up by developers. We also found them to be much more affordable than other alternatives for the same level of quality."

Narayan Vyas,

Senior Product manager, Plivo Inc

(Incubated at the European Space Agency)

Helped set up and scale tech team on demand

"Flexiple has exceeded our expectations with their focus on customer satisfaction! The freelancers are brilliant at what they do and have made an immense impact. Highly recommended :)"

Henning Grimm,

Founder, Aquaplot

(Acquired by Unicorn, Hike Messenger)

Saved 30% costs with 2 software products delivered

“Overall Flexiple brought in high-level of transparency with extremely quick turnarounds in the hiring process at a significantly lower cost than any alternate options we had considered.”

Kislay Shashwat,

VP Finance, CREO

('17 NYU Graduates)

Found a perfect new member for its globally distributed team

"Working with Flexiple has provided us with partners who are providing us with the required technical support for our growth and success!"

Esther Hersh,

Co-founder, Peblio Inc

(Y-Combinator S18)

Hired the first remote engineer to work directly with the CTO

"It has been great working with Flexiple for hiring highly talented and hardworking folks on contract. We were looking for a suitable developer on the back-end and we got to know Ankur through Flexiple. We are very happy with the commitment and skills he brings to the job and we will be working with Flexiple going forward as well after this positive experience. I recommend them highly for any freelancing talent you are looking to hire!"

Neil Shah,

Chief of Staff, Prodigal Tech

(#1 Lead Routing App for Salesforce)

Helped scale the product with a team of engineers

"Flexiple has been instrumental in helping us grow at a fast pace. Their vetting process for engineers is top notch and they were able to connect us with quality talent quickly. The team put great emphasis in understanding our requirements and getting to know us which ensured that we were matched with folks who were a great fit not only technically but also culturally."

Tanu V,

Founder, Power Router

(Acquired by Reliance for $100 million)

Delivered 2 high quality products forming a long partnership

"The engagement with Flexiple and their community members has helped us get work done in a timely manner and helped us go above and beyond."

Swapan R,

Co-founder, Haptik

(Acquired by PayU for $70 million)

Built their first remote tech team of a frontend and backend engineer

"Highly responsive team with prompt support and willingness to go the extra mile. Powered by technically brilliant personnel on board, we have happy results – all this at an affordable price!"

Sajith N,

Product Manager, Wibmo Inc
  • How to Hire a Great Freelance Frontend Developer?

  • The concept of front-end development has been around since the beginning of programming. However, during the earlier years, this was limited to the HTML and CSS on a webpage. The present definition of front-end development came into existence around the same time that JavaScript started being taken seriously. This was around the year 2009-10, when web and mobile development became mainstream. Prior to this, programmers weren’t differentiated based on area of expertise.

    Over the years, the distinction between front-end and backend became clearer. JavaScript frameworks such as BackboneJS, AngularJS became quite popular and a lot of developers took to working on them. The front-end developer job role kept gaining momentum and is now among the most desirable job roles.

    If you are wondering how to hire a freelance front-end developer, this blog is just the right place for you. We have compiled all the details you need to know about hiring front-end developers to help you find the perfect fit.

    We have broken the sections into the following parts:
    1. Introduction to front-end development
    2. Why is front-end development widespread?
    3. What are the tools used by frontend developers?
    4. Writing the Job Description to hire a frontend developer
    5. Interview questions for hiring a front-end developer
    - Basic Questions
    - Advanced Questions
    - Data Structures/Algo Questions




    1. Introduction to front-end development

    • Origin story: The term ‘front-end developer’ came into use around 2008-09, when the JavaScript revolution started gaining popularity. Front-end is also known as the client-side of the website. It is what the user actually sees, or interacts with. Initially, front-end languages included HTML, CSS and JavaScript, but now also include frameworks such as AngularJS and other languages.

    • Widely popular: Latest stats suggest that the United States alone has over 80 thousand front-end developers. About 66% of these are men.

    • Frameworks: Some of the most popular front-end frameworks/libraries are React, Angular, jQuery, Vue.js and Backbone.js.

    • 2. Why is frontend development widespread?

      • First impression: The front-end developers create components that users see and interact with on a website. This determines the user experience and often user retention, so companies look to hire good front-end developers.
      • Increasing power: Front-end frameworks and libraries such as React, Angular and Vue have made front-end development more structured, organized and powerful.

      3. What are the tools used by frontend developers?

      Here are some of the most recommended frontend development tools:

      1. Coding Environments

      • Atom - Atom is an easy-to-use code editor that allows users to add a lot of custom features and packages. It also allows for easy integration with other tools.
      • CodePen - CodePen is an online coding environment for on-the-go use. With this tool, frontend developers can write, format and test your HTML, CSS and JavaScript code with ease.

      2. Chrome Dev Tools

      These are a set of tools that are built into the Chrome browser. Using Chrome Dev Tools, users can see how their code would look on a live website and make modifications if needed.

      3. W3C Markup Validation Service

      Different platforms interpret code differently, and hence developers need to make sure that their code is up to the latest standards. A code validator like this one by W3C is a great tool for this purpose.

      4. Version Control Systems

      Version Control tools enable developers to keep track of the changes made to the code files over time, so that earlier versions of the code can be used if needed. Git and Github are recommended for this purpose.

      5. Boilerplates for frontend development

      The use of boilerplate templates makes it easier to start developing by providing the basic code template. HTML5 Boilerplate is one such tool that is open-source and is updated by the community to comply with the latest standards of development.


      4. Writing the Job Description to hire a front-end developer

      Here are some key points to mention in the job description when you wish to hire a front-end developer. We have compiled these here at Flexiple after trial and error - a process of filtering through over 15,000 developers.

      • No. of years of software development experience: Specify the front-end technologies you’re looking for and the number of years of experience the developer should have. The number of production apps worked on can also be used as a proxy to this parameter.

      • Past product types: Observing the types of products that a candidate has worked on in the past will give you a good idea about their fit for your product.

      • Industry-specific exposure: Front-end developers who have built products in certain industries will know beforehand the key aspects of laying the foundation for a great product. This makes prediction of possible problems easier.

      • Remote working experience: A developer with past remote work experience is an added advantage as they would have first-hand experience of everything - right from how contracts work to streamlined communication, as well as timelines and deliverables.

      • Strong Strong communication: A vital thing to look at when hiring a freelancer is excellent communication skills. Since all the interaction happens online, a freelancer needs to be able to understand and be direct in their language.

      • 5. Interview questions for hiring a freelance front-end developer

        Even with a quality JD, it can be tricky to find the best fit and evaluate the skills of your applicants. To assist you, we have created a pool of questions that good front-end developers need to be comfortable with. We have compiled questions across frameworks such as Angular, React and Vue. You can check out some more questions on this page, too.
        Note that the ability to answer these questions doesn't imply that you have a top quality candidate. But it definitely is a big step in that direction.

        We have categorized the questions into three parts to help you navigate easily:

        A. Basic concepts: Includes all basic concepts used across languages. This will give you an understanding of how strong their programming foundation is.

        B. Advanced concepts: Includes all concepts that someone with higher expertise should know.

        C. DS/Algorithm questions: To test the logical capability of the candidate.


        A. Basic concepts


  • What were the major changes brought about in ES6?

    Let us first discuss ECMAScript. ECMAScript is a Javascript standard, designed by ECMA international. It is designed to ensure interoperability across different web browsers. It is commonly used for client side scripting, but has also become popular in server side due to its use in Node.js.

    The sixth edition of ECMA Script was introduced in June 2015 called ES6. It was later renamed to ES2015. ECMA has made multiple releases and still continues to make new ones, with the latest one being ES2020 (11th edition). But the reason ES6 is popular is because it brought quite a few major changes. We shall highlight some of the key ones which are required to be known:

    1) Introduction of Let and Const: Var is a highly infamous variable used in javascript extensively. It suffers from the lack of restriction on scope of the variable. That is, if a var is defined inside a block, its scope might extend beyond it also. For example:

    var variable = 0
    if (true) {
        var variable = 100
    }
    {
        {
            var variable = 1000
        }
    }
    console.log(variable)
    


    The output is 1000, whereas it should be 0 as the console.log lies in the same block as var variable = 0. To put such restrictions on var, let and const were introduced. Let functions similar to var but with much better restrictions on scoping. Here is the same example with let being used in place of var:

    let variable = 0
    if (true) {
        let variable = 100
    }
    {
        {
            let variable = 1000
        }
    }
    console.log(variable)
    


    Here the output is 0, as expected. Const variables are immutable variables. This means that the value of that variable cannot be changed, similar to the “final” keyword in Java. Const also functions similar to let, in terms of the variable scope. However, objects defined as const can alter their object values and keys, but cannot be reassigned.

       This is allowed

    const obj = {
        name: "Flexiple",
        city: "Bengaluru"
    }
    
    obj.name = "Flexiple"
    
    console.log(obj)
    


    giving an output as : { name: 'Flexiple', city: ‘Bengaluru’ }

        Whereas, this is not allowed:

    const obj = {
        name: "Flexiple",
        city: "Bengaluru"
    }
    
    obj = {
        company: "Flexiple"
    }
    
    console.log(obj)
    


    This throws the following error: “TypeError: Assignment to constant variable"

    2) Arrow Functions

    Arrow made the syntax for function definitions and return statements shorter. It can be considered similar to lambda functions in Java.

    Before ES6 function definition looked like this:

    func = function() {
        return "end"
    }


    With arrow functions they can be shortened to:

    func = () => {
        return "end"
    }
    


    And if there is a only a return statement, it can be shortened to:

    func = () => "end"
    


    The way “this” works also differs in arrow functions and regular functions. In arrow functions, “this” always represents the object that defined it. Whereas, in a regular function, “this” represents the function that called it.

    3. Template Strings

    Prior to ES6 you would have had to add variables to strings in this manner:
    var url = "http://localhost:3000/id:"+id
    


    Now, using backticks templating can be done like this:

    var url = `http://localhost:3000/id:${id}`
    


    Basically, use backticks to declare a string and inside it use a dollar sign along with curly brackets to insert a variable.

    4) Default Parameters

    There wasn’t a way to declare parameters in a function as default - it would take the default value as 0. Workarounds popularly used, looked like this:

    func = function(param1, param2) {
        param1 = param1 || 20
        param2 = param2 || true
    }
    


    With ES6, we can set default parameters in the following way:

    func = function(param1 = 20, param2 = true) {
        
    }
    


    5) Destructuring

    This makes assigning variable values a lot faster. Before ES6, it would have looked like this:

    var req = {
        body: {
            username: "flexiple",
            email: "[email protected]"
        }
    }
    var username = req.body.username
    var email = req.body.email
    


    After ES6, it can be shortened to:

    var req = {
        body: {
            username: "flexiple",
            email: "[email protected]"
        }
    }
    var { username, email } = req.body
    


  • What is the popular open standard file format (like XML) used with javascript and node.js? And what are the popular commands to convert string to that and vice versa?

    It is JSON which stands for Javascript Object Notation. It is a lightweight data interchange format. It is easy for humans to read. Even though it has Javascript in its full form, it is language independent.

    It’s built on 2 structures:
    • Collection of key-value pairs. This is called an object, dictionary, hashmap, associative array, in different languages
    • Ordered list of values, This is called an array, list, vector, in different languages
    These are universal data structures which is important for a file format which is language independent.

    Example of JSON:

    {
      "flexiple": {
          "top": "1%",
          "location": "remote"
      },
      "blog": {
        "topic": "engineering",
        "title": "What are stable coins and how do they work?"
      }
    }
    


    This in XML would look like this:

    <?xml version="1.0" encoding="UTF-8"?>
    <root>
       <blog>
          <title>What are stable coins and how do they work?</title>
          <topic>engineering</topic>
       </blog>
       <flexiple>
          <location>"remote"</location>
          <top>1%</top>
       </flexiple>
    </root>
    


    Valid JSON

    Few of the rules to remember while handling JSON are that:

    • Empty objects and arrays are okay
    • Strings can contain any unicode character, this includes object properties
    • null is a valid JSON value on its own
    • All object properties should always be double quoted
    • Object property values must be one of the following: String, Number, Boolean, Object, Array, null
    • Number values must be in decimal format, no octal or hex representations
    • Trailing commas on arrays are not allowed


    • These are all examples of valid JSON: -

      {"name":"John Doe","age":32,"title":"Vice President of JavaScript"}
      
      ["one", "two", "three"]
      
      // nesting valid values is okay
      {"names": ["John Doe", "Jane Doe"] }
      
      [ { "name": "John Doe"}, {"name": "Jane Doe"} ]
      
      {} // empty hash
      
      [] // empty list
      
      null
      
      { "key": "\uFDD0" } // unicode escape codes
      


      These are all examples of bad JSON formatting:-

      { name: "John Doe", 'age': 32 } // name and age should be in double quotes
      
      [32, 64, 128, 0xFFF] // hex numbers are not allowed
      
      { "name": "John Doe", "age": undefined } // undefined is an invalid value
      
      // functions and dates are not allowed
      { "name": "John Doe",
        "birthday": new Date('Fri, 26 Jan 2019 07:13:10 GMT'),
        "getName": function() {
            return this.name;
        }
      }
      


      Javascript provides 2 methods to encode data structures to JSON and to convert JSON to objects or arrays. These methods are JSON.stringify() and JSON.parse().

      JSON.stringify()

      It takes a Javascript object or array as input and returns a serialised string form of it.

      const obj = {
          name: "Flexiple",
          city: "Bengaluru"
      }
      
      const jsonStr = JSON.stringify(obj)
      console.log(jsonStr)
      // output is {"name":"Flexiple","city":"Bengaluru"}
      


      JSON.stringify() can take 3 arguments in total, the first one being the data structure. The second argument, called the replacer parameter, can either be a function or an array. It is used to manipulate the properties (keys and values) in JSON.

      let cost = {
          candy: 5,
          bread: 20,
          cheese: 100,
          milk: 15
      }
      
      let func = (key, value) => {
          if (value < 15) {
              return undefined
          }
          return value
      }
      
      let arr = ['candy', 'bread']
      
      let jsonStrWithFunc = JSON.stringify(cost, func)
      console.log(jsonStrWithFunc)
      // Output is {"bread":20,"cheese":100,"milk":15}
      
      let jsonStrWithArr = JSON.stringify(cost, arr)
      console.log(jsonStrWithArr)
      // Output is {"candy":5,"bread":20}
      


      The third argument, called the space parameter, takes in either a number or a string. It is used to control the spacing of the final string by deciding the size of indentation.

      let cost = {
          candy: 5,
          bread: 20,
          cheese: 100,
          milk: 15
      }
      
      let jsonStrWithNum = JSON.stringify(cost, null, 2)
      console.log(jsonStrWithNum)
      // Output is 
      // {
      //   "candy": 5,
      //   "bread": 20,
      //   "cheese": 100,
      //   "milk": 15
      // }
      
      let jsonStrWithStr = JSON.stringify(cost, null, 'xx')
      console.log(jsonStrWithStr)
      // Output is 
      // {
      //     xx"candy": 5,
      //     xx"bread": 20,
      //     xx"cheese": 100,
      //     xx"milk": 15
      // }
      


      JSON.stringify() is also popularly used for debugging, as trying to see a JSON object using console.log() isn’t always successful

      const obj = {
          "nest1": {
              "ex": "ex",
              "nest2": {
                  "nest3": {
                      "ex": "ex",
                  }
              }
          }
      }
        
      console.log(obj)
      // Output is { nest1: { ex: 'ex', nest2: { nest3: [Object] } } }
      


      As we can see that after a certain level of nesting the log just displays ‘[Object]’. Therefore, JSON.stringify() can be used to make debugging easier.

      const obj = {
          "nest1": {
              "ex": "ex",
              "nest2": {
                  "nest3": {
                      "ex": "ex",
                  }
              }
          }
      }
        
      console.log(JSON.stringify(obj,null,2))
      // Output is 
      // {
      //     "nest1": {
      //       "ex": "ex",
      //       "nest2": {
      //         "nest3": {
      //           "ex": "ex"
      //         }
      //       }
      //     }
      // }
      


      JSON.parse()

      It takes a JSON string and converts it into its respective data structure

       const jsonStr = '{"name":"Flexiple","city":"Bengaluru"}'
      const obj = JSON.parse(jsonStr)
      
      console.log(obj)
      // output is { name: 'Flexiple', city: 'Bengaluru' }
      


      Calling JSON.parse() on invalid JSON string will throw a SyntaxError.

      Cloning Objects in Javascript

      These 2 functions of JSON can be used together to clone javascript objects.

      const obj = {
          "prop1": {
              "ex": "ex",
              "prop2": {
                  "ex": "ex"
              }
          }
      }
      
      const objCopy = JSON.parse(JSON.stringify(obj))
        
      console.log(objCopy)
      // Output is { prop1: { ex: 'ex', prop2: { ex: 'ex' } } }
      


      But this is not recommended, because of multiple reasons:
      • It is slower than alternatives
      • This works properly only for valid JSON, but not all javascript objects fall in that category
      A better alternative for deep cloning objects would be to either use an npm library called ‘lodash’ or write a custom recursive function to do the same. The spread operator can be used for shallow cloning of objects.


      B. Advanced concepts


  • How do you work with security vulnerabilities in npm packages?

    While working with Javascript frameworks like React.js and Node.js, you will be using a lot of packages, and many packages you use come with their own dependencies. This creates a lot of scope for security vulnerabilities in your project. As many of these packages are open source, vulnerabilities are often discovered and reported to npm. Therefore, a security audit needs to be done for your project.

    A security audit is an assessment of package dependencies for known security vulnerabilities. The easiest way to do this would be to run ‘npm audit’. This is automatically run every time ‘npm install package_name’ is run and it shows how many vulnerabilities that package has.

    for example on installing axios, this is the output:-

    + axios@0.21.0
    added 1 package from 1 contributor, removed 1 package and audited 2154 packages in 16.811s
    found 0 vulnerabilities
    


    The ‘npm audit’ submits a description of the dependencies in your project and asks for a list of known vulnerabilities. It checks direct dependencies, devDependencies, bundledDependencies, and optionalDependencies, but does not check peerDependencies. The severity of vulnerabilities are classified into the following types: low, moderate, high and critical.

    Let us take a sample project, on running ‘npm audit’, I get a long report of vulnerabilities in it. The final message of the report was this:

    found 105 vulnerabilities (104 low, 1 high) in 371 scanned packages
      run `npm audit fix` to fix 102 of them.
      3 vulnerabilities require semver-major dependency updates.
    


    The long report has description for each vulnerability, which looks something like this:

    Low             Prototype Pollution                                           
      Package         lodash                                                        
      Dependency of   mongoose                                                     
      Path            mongoose > async > lodash
      More info       https://npmjs.com/advisories/1523
    


    • ‘Low’ is the severity of the vulnerability.
    • ‘Prototype Pollution’ is the description of the vulnerability
    • ‘lodash’ is the name of the package with the vulnerability
    • ‘mongoose’ is the package which you have installed, and ‘lodash’ is a dependency of it which has a vulnerability
    • ‘Path’ shows the dependency chain: ‘mongoose’ uses ‘async’ which uses ‘lodash’
    Many known vulnerabilities are fixed by the package maintainers in the subsequent versions of the package and therefore can be solved by updating the packages. Often times, this is what ‘npm audit fix’ does. I decided to run ‘npm audit fix’:

    + lodash@4.17.20
    updated 4 packages in 24.002s
    fixed 102 of 105 vulnerabilities in 371 scanned packages
      1 package update for 3 vulnerabilities involved breaking changes
      (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
    


    Now, there are 3 vulnerabilities remaining which weren’t addressed by ‘npm audit fix’. This is because the package update involves ‘breaking changes’. In such cases, it is better to not run ‘npm audit fix --force’. What is recommended, is to run ‘npm audit’ again and do a review of the remaining vulnerabilities. Npm often gives suggested steps to fix it, which is what happened in my case:

    # Run  npm install nodemon@2.0.6  to resolve 3 vulnerabilities
    SEMVER WARNING: Recommended action is a potentially breaking change
    
      Low             Prototype Pollution                                           
      Package         minimist                                                      
      Dependency of   nodemon                                                       
      Path            nodemon > chokidar > fsevents > node-pre-gyp > mkdirp >       
                      minimist                                                      
      More info       https://npmjs.com/advisories/1179 
    


    This single package ‘minimist’ was leading to 3 vulnerabilities, which had a ‘SEMVER WARNING’ saying that action is potentially breaking change. Above it the recommended update is given: ‘npm install [email protected]’. After running this update, you will have to check whether your project functions properly or not, and then move on to the next vulnerability. I ran ‘npm install [email protected]’ and this package did not show any more vulnerabilities. I ran ‘npm audit’ and got this:

      === npm audit security report ===                        
    
    found 0 vulnerabilities
     in 206 scanned packages
    


    This was an example of how I cleaned up the known security vulnerabilities in a sample project. Similar steps can be used to fix security vulnerabilities in other npm dependent projects.

  • What are the vulnerabilities of using cookies? What about the usage of local storage?

    Cookies and local storage are primarily used for session management in web application development. What this means is that once the user is authenticated, there needs to be a way for the application to remember the user for a period of time without asking the user to login again.

    In an architecture design it is standard to keep the server stateless, but this would mean that the user information cannot be stored on the server. Therefore, the decision was taken to store it on the client. This was originally done using cookies. Cookies are basically a storage facility with the browser, which the client side javascript or the server (using headers) can interact with.

    Each item stored in cookies is called a cookie, and each cookie has an expiration time which can be manually set too. The cookie persists in the browser for that duration and is not removed by page refreshes or window being shut. When a client interacts with a server using HTTP requests, then the cookies are also sent along in headers.

    The data which is stored in a cookie is generally a token such as a JSON Web Token (JWT). JWT consists of a payload which is used to fetch information about the user. JWT tokens are signed on the server using a secret key. The routes allow only authorized users to check whether the token is present in the cookies. This is the outline of the architecture followed for session management.

    Difference between Cookie and Local Storage 

    Primarily both function in similar ways - i.e. both involve persistent storage in the browser. The differences come in slight nuances of their functioning:
    • Local storage does not have the concept of expiration time. So, the developer dealing with it needs to handle the expiration of tokens stored in it. Whereas, the expiration time for cookies can be set while storing the cookie and the browser handles the rest.
    • Local storage is not sent with every HTTP request, like a cookie is sent. This reduces load on especially those HTTP requests which are public and do not require to use the token stored.
    • The server can directly interact with cookies, whereas only the client side script can interact with local storage.
    • Local storage has a much larger storage capacity of 5mb compared to 4kb of cookie. This is primarily because cookies are meant to be read by the server, whereas local storage is meant for the client side to be able to persistently store data.

    Vulnerabilities

    Local storage

    Local storage is accessible only by client-side javascript code. This makes it particularly vulnerable to XSS attacks. XSS (Cross-Site Scripting) attacks are a type of injections in which malicious scripts are injected into otherwise trusted websites due to a vulnerability.

    This script then executes on the client’s browser and can access the local storage quite easily. XSS attacks are mainly used to steal cookies, session tokens and other information. After obtaining session tokens they can access protected routes using it. Therefore, storing authentication tokens on local storage is very risky.

    Cookies

    Cookies function similarly as they can also be accessed by client-side javascript code. They are also vulnerable to XSS attacks, but there can be a further layer of protection added to prevent this.

    If the ‘httpOnly’ flag is marked as true while setting cookies then client side javascript cannot access that cookie. This allows only the server side code to interact with it. So this protects it from XSS attacks. However, due to its property of sending a cookie on every request, it gets vulnerable to CSRF/XSRF attacks.

    CSRF/XSRF (Cross-Site Request Forgery) attacks are when malicious web apps can influence the interaction between a client browser and a web server that trusts the browser. Therefore, further measures need to be taken like using CSRF tokens and proper use of the Same-Site cookie attribute.


    C. Data Structure/ Algorithm

  • 1. Write a program to find whether a string or number is palindrome or not.


    function palindrome(myString){
        var removeChar = myString.replace(/[^A-Z0-9]/ig, "").toLowerCase();
        var checkPalindrome = removeChar.split('').reverse().join('');
            if(removeChar === checkPalindrome){
              document.write("<div>"+ myString + " is a Palindrome<div>");
            }else{
              document.write("<div>" + myString + " is not a Palindrome <div>");
            }
    }
    palindrome('"Madam"')
    palindrome('"Star Wars"')
    palindrome('"7,10,7,8,9"')
    

    The output of the above code will be: 
    
    "Madam" is a Palindrome
    "Star Wars" is not a Palindrome.
    "7,10,7,8,9" is not a Palindrome.
  • 2. What will the output of the following code be?


    var p = 2;
    var q = 4;
    var r = 6;
    if (p > q > r)
         document.write("true");
    else
        document.write("false");

    The answer is False. It may look like the output can be true because 6 > 4 > 2 is true, but PHP evaluates $z > $y 
    first, which returns a boolean value of 1 or true. This value (true or 1) is compared to the 
    next integer in the chain, bool(1) > $z, which will result in NULL and echo “false.”

    Parting thoughts on hiring a front-end developer


    The above is all you need to know about hiring a freelance front-end developer. The process of hiring a quality front-end developer isn’t easy, but this guide makes it easier on you. To offload the entire hiring process, reach out to us at Flexiple.

    We've designed a high-quality, 6-step screening process to find the top 1%, freelance developers. You can find the best freelance front-end developers here. We've already served over a hundred clients, earning great reviews for the quality of service.

    Lastly, to quickly summarize it for you:
    1. Note your project requirements and hire accordingly. Do not go for the lowest or the highest-paid developer.
    2. Don’t hire without vetting- consider asking questions right from the basics to advanced to logical questions.
    3. Look for companies like Flexiple that help you find the perfect fit.

    That's all on hiring front-end developers. Happy hiring! :)

Try a Top Quality Frontend Developer for 7 Days.
Pay Only If Satisfied.