Category Archives: Frontend

Tip-toe through Naukri, India’s No.1 job site #OneDayTale

Glipmse of Hackathon 2016. We love open source and hence we are very open to transparency. The inception to this blog post was an idea to share the walk through of how a user is served in a typical day by your beloved Naukri.com. Naukri is a black box which gives you results but under the hood it is way more than what anyone can think. Under the hood [caption id="" align="alignnone" width="800"] Under the hood working of a car, GIF image.[/caption] Source Something like below is what we are continuously doing to serve you better. [caption id="" align="alignnone" width="549"] Car engine... Read More

Web and Mobile Implicit Requirements

Requirement analysis is the first and foremost step for planning phase itself. Let us see what wiki says about requirement analysis Requirement analysis in systems engineering and software engineering, encompasses those tasks that go into determining the needs or conditions to meet for a new or altered product or project, taking account of the possibly conflicting requirements of the various stakeholders, analysing, documenting, validating and managing software or system requirements. What?? Hold on, it is very complicated and cumbersome!!  Let’s make it simple, Requirements are the... Read More

Naukri Gulf optimizations – using base64 encoded images

Optimization and Performance budgeting is the most focused area @ Naukri Engineering, for better User Experience and more user retention. Earlier we already have implemented some of the techniques to improve page optimization. You can refer the link to check them out. Performance Optimization of Web Pages: NaukriGulf  & Optimizing CSS & background images using WebP Now this time we have implemented and automated base64 encoded technique through grunt for page optimization. Why did we do that? We have reduced multiple image request and free our browser resource for... Read More

WEB WORKER – MULTI THREADING WITH JAVASCRIPT

A few iterations back, we got a task to develop a page with few graphs and data listing, but processing data received from server to the data format required by charting library for 5 charts was taking time as it was a heavy computation. You all know, JavaScript is single threaded in nature, so any heavy computation or long running JavaScript code blocks UI thread and freeze the window. You must have seen sometime browsers shows a warning pop up like below:- This is the protection mechanism browsers implement when a long running JavaScript occurs and blocks the UI thread. But by this, we... Read More

RESTful API calling With Angular $resource

Recently we started using AngularJS for our project and we are using $http for calling Restful API. But, we noticed that every time we have to define a separate function for each $http method, which resulted in larger code base and repetitive task of defining functions. To avoid this situation we explored around possible solutions and found out about $resource service. It helps a lot in managing our code base and also in making our AJAX calls cleaner. Below you can see how to use $resource to make smarter and cleaner RESTful api calls. WHAT IS $resource ? Angular provides a very useful... Read More

Automating Front-End Processes – The Jenkins way

Being an IT techie, we are highly concerned with the way our websites are being developed and the way they perform. We are constantly pushing our limits to build and deliver high performance products and hence take up the end-users’ experience to another level and we do this by following countless techniques and technologies. In order to achieve the above said, we have a long list of tasks and processes we need to do or follow and the pain point is that most of them are taken care of and done manually. Before diving deep into the ways of doing all the stuff, lets first have a look at... Read More

Naukri Mailers: Best Practices & Guidelines

Mailers are one of the oldest ways of promoting a brand and connecting to customers. As a layman, mailers might be similar to any other webpage but sometimes creating mailers are way difficult than creating a normal webpage. The big question is what makes mailers difficult to create. So below are some points: Mailers are not standardized Mail clients use very different techniques to render mailers hence a developer need to code accordingly Mail clients do not understand normal HTML. Tables in HTML are the best they can understand CSS files cannot be used as mail clients render... Read More

Optimizing an AngularJs app

AngularJS may have a lot of advantages over other frameworks for building front end applications but it can have performance problems when an app starts to get large. There can be several reasons an AngularJS application may be slowing down. Recently during our internal project which was built in angular, we faced a lot of performance issues as the application grew in size and complexity. We took many steps to optimize our application and make it execute without any performance lag. Some of the approaches are discussed below. Reduce Watchers We had lot of 2 way bindings in our project... Read More

Page Load Time Reduction: not a rocket science!

In web development, page load time is the key to make your users happy. According to an analysis on page load time by Kissmetrics, it has been found that page load time directly affects the abandonment of your page. This well explains how critical it is to maintain a low page load time.                   Referred from infographic of Kissmetrics analysis on How Loading Time Affects Your Bottom Line Recently, we observed that one of the pages in the Recruiter’s site was taking a lot of time to load, which indeed was a matter of concern, considering that the page had a large... Read More

Optimizing CSS background images using WebP

webp In continuation to our first article on WebP “Optimizing web pages using WebP”, we have extended our approach to display WebP images with the help of CSS background. As we earlier stated that Naukrigulf.com is one of the first few sites on the web to use WebP images format to serve banners. Now we are serving our background images in WebP format as well. In this approach we have two solutions to call background WebP images. - Using CSS Parent-Child Relationship - Using @ queries. CSS Parent-Child Relationship - In this approach we have to check user's browser and assign a class... Read More