Solutions for Real World Frontend Problems.

Frontend Development

How to Identify and Prevent XSS Attacks through SVG File Uploads?

While reviewing A Image Upload Code with a Peer we identified that we can upload a lot of file types through the Code including text and SVG files and we were generally discussing what file types should be allowed for Profile Pic and their size limit etc. We knew that as Feedback we should stop […]

How to Setup LightHouse CI for Better Frontend Performance?

LightHouse as we mostly know is a Wonderful Tool for Testing Frontend Performance in Chrome Browser. Not only does it give an insight into Performance Improvement that we can make in our front-end application but it also gives an idea around SEO and Web accessibility. Here is a sample view on LightHouse run in […]

How to Improve the Performance of Angular Applications?

Angular is a popular SPA Framework and I just love it. But if you are a beginner at this you will often hear about other frameworks available in the market (React, Vue), etc, and compare these frameworks. One of the parameters that often is used for comparison is the Performance of these frameworks. After having […]

Frontend Performance Optimization – Part 5 (Resource Delivery)

When we Type a URL on our Browser a lot of Content and Assets are requested from the Server. The size, location, network bandwidth, etc determine how soon the content will be delivered to the browser so that proper rendering and interaction can start. The image below shows the Network Requests of We can […]

Frontend Performance Optimization Part 4 – Fonts

Good Typography is a fundamental requirement of any web design. Choosing the right Web font for your website improves Readability, Accessibility, and Trust in your brand.  In Order to Provide a Great Visual Experience Website uses something called “Web Fonts” these fonts are the fonts that will not be available on User’s Computer and would […]

Frontend Performance Optimization – Part 3 ( CSS )

we need to Work on Something Called Critical CSS, This is the CSS that is needed for showing the “Above The Fold” Content or CSS which is minimally required to display the viewable content. 

if you have a menu that is not visible, A Footer that would require scrolling of the page, etc. would all be considered non-critical.  With this understanding, let’s discuss points for CSS optimization.

Frontend Performance Optimization – Part 1 (Images)

“A picture is worth a thousand words” – We all agree with this statement and when it comes to Web Apps whether we have to show a product to sell online or promote our brand we use images. Images are the life of any Web Application. But they also sometimes become a reason for your […]

Essential Tools for Website Accessibility

There are a number of Web Accessibility tools that can be used here is a checklist of these tools Accessibility validation tools: These tools automatically check web pages against various accessibility guidelines and standards, such as the Web Content Accessibility Guidelines (WCAG) and the Section 508 guidelines. Some examples include the WAVE tool, the aXe […]

Debugging Javascript using Console Object

Some of you might have already used  Console Object in javascript to log values of a variable for debugging purposes. var arr = [‘1′,’2′,’3′,’4′,’5’]; console.log(arr); There are some interesting methods in Console API other than log. The details of Console API can be found  here Note: The link above is for Console API supported by […]

Bootstrap the Frontend Framework for Non Designers.

So you are a Web Developer having an exciting idea flourishing in your mind. And you rush to your machine and start writing that awesome code that was never written before. And now you are ready to show it to your friends with all excitement. Your friends think the idea is fine but it doesn’t looks good and then you get a […]

Scroll to top