Adding the right amount of animations to you web app is like adding lime to your guacamole 🥑, both are delightful. Ask a UX designer, how imperative is animation to apps. And, considering we all have been using Android and ios devices for so long now, it’s natural to bring that rich user experience to your web apps too.

Agenda

In this article, we’ll be learning about

  • CSS animations & transitions

CSS 3 Animations Refresher

There are two ways to implement animation in CSS.

1. Transitions

I sure, we all are familiar…


In the first installment of this series, we discussed the foundations of functional programming as well as some of the essential patterns of functional programming such as compose, pipe, and curry. This article is about applying these patterns to the real world.

While there are plenty of articles that discuss functional programming (FP) functions through the use of primitive and contrived number array examples, I find that these often leave me confused. I understand the functions but am unsure as to how to start using them in my projects. Furthermore, I am often left wondering how to shift my mindset…


One of the great benefits of FP (Functional Programming) is how it encourages a declarative style of code rather than imperative. It has these three very common functions that are widely known as map, filter, and reduce.

This article will discuss one advance — or I should say “very clever” technique and pattern — used in Functional Programming called Transduction.
Before reading this article, it’s crucial that you are familiar with FP general principles as jumping straight onto this without prior FP knowledge might feel a little pointless. …


The mystic term of Functional Programming (FP) must be familiar to any JS developer. The first impression when we say “JS supports functional programming paradigm” or “JS is a Functional programming language”, could be, well I use functions in JS, so I’m already doing Functional programming. This is the myth that we’re going to bust together.

You might be using the FP unknowingly but there’s a lot more to the world of Functional programming which takes years of experience to master. It involves re-wiring your thinking process to observe and implement the FP patterns in your style of writing programs.

Preface


Crossrail Canary Wharf

Most of the time frontend devs just despise two things. First one is making email templates, second one being layouting or as we generally call it “CSS”. Lets face it, its quite laborious and might get painful when you have to build layouts or your HTML in a CSS-in-JS paradigm prevalent these days.

Motivation

I’ve personally enjoyed working with the vintage Bootstrap Grid system. Even though, it was effort intensive to create a row and put columns inside it but it was a foolproof and easy way to build responsive layouts at its time. The problem with layouting has always been…


Photo by Tobias Jussen on Unsplash

Ever wondered that when the project size grows with time, why my React app seems sluggish and my mac pro is heating up due to it for no apparent reason? Let me break your bubble.

There’s always a reason

The simple reason of your UI/UX being sluggish is when the browser rendering thread doesn’t get enough time to do its job such a re-calculate styles. developer.google.com has already done a commendable job in explaining this.
I’m talking about this these nasty sand-dunes.


UX Animation by Anton Tkachev

Animation is an important aspect of any app we use these days. It’s gives us validation or reaction to our actions. That’s the rule of nature. We expect to see something react to our action. Hence, bringing this real world behaviour to our web applications means bringing a more natural and instinctive usage flow to the app users.

Animation on web has been there from quite old times. There have been many libraries you must have heard of like GSAP(GreenSock Animation Platform) and VelocityJS. They’re immensely popular and mature. GSAP has a lot to offer, but some of its plugins…


Get your app started on the best foot possible, a secure one

Photo by Jon Moore on Unsplash

Did you know that around 80% of the data breaches happen through poor password choices like “password”? Did you know that more than 23 million people use the password “123456”?

In this digital age, where personal data holds so much importance that strenuous laws are in place in most of the countries, it’s very important that we, as developers, hold the responsibility of protecting our gateways.

Or, in other words, the apps we build that act as channels to access or manipulate the sensitive data. …


Photo by Michael Dziedzic on Unsplash

Motivation

As a front-end developer, you must have found yourself in a situation on how and where to store my API keys like Google client id, client secret, firebase keys etc. The very naive approach would be to commit such sensitive information on github. And it’s not a surprise to come across such news wherein a developer was billed 14k USD for AWS usage. There are crazy crawlers out there which look for such api keys committed by tons of developers on these source control websites publicly. You could be the next! …


Photo by Modestas Urbonas on Unsplash

It takes two to tango.

Same is true for creating web applications, i.e you need both frontend and backend to create up and running application in a Client-Server architecture. Being a frontend developer is hard sometimes specially when you need data in a certain way than provided by the backend api calls. Maybe, you need to aggregate data from several different data endpoints or backend services. And as your web app project size grows, you realise there should a cleaner and manageable way of handling this data exchange between the two parties.

Param Singh

UI Engineer at Swiggy, Ex-Flipkart. JS enthusiast. Cynophilist. GrammerNazi. Environmentalist

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store