Posts

Showing posts from 2018

What's the preferred unit in CSS for responsive design?

Obviously, it's %. What a stupid question? Well, you can sometimes use em maybe. Or, maybe vh/vw.  Well, anything except for px for sure.

Sadly, the answer isn't as simple as that. In fact, there is no proper answer to that question and depends a lot on the design decisions taken rather than a fixed rule of making websites responsive. Funny thing is, many times you might actually want to use px instead of % because the later is going to mess things up. In this blog, I will try to describe some scenario's when each of the units work better in a responsive environment.

PS: All of this is mostly my personal opinion and working experience. Not to be mistaken as a rule book.

FOSSASIA 2018: Conference Report

Image
FOSSASIA 2018 was my 2nd FOSSASIA conference and this year it was at a new venue (Lifelong Learning Institute), and for a longer time. As always, there were a lot of speakers and a lot of really exciting sessions. Last year I was a little confused, so this year I planned earlier which all talks to attend and what all to do.

It works in Firefox, but not in Tor Browser

In today's world, where websites play a major role in providing various technical services to users, web developers have an important role. Though the war between back-end v/s front-end is never ending, nonetheless we all can probably agree on the fact that front-end does provide the non-tech users with an interface so that it becomes easier for them to use the back-end functionalities. Thus, the great problem of making front-end easy to use while also looking good comes into play. With the advent of the web, web technologies have also advanced a great deal. One of them is definitely CSS. CSS now has enough power to create a really interactive decent looking website only using it. With attributes like filter, masking and so on, you no more even need photoshop to change your images every time; with the help of grid-layout and flex you don't need to bang your head about laying out items properly on your webpage properly. Now you must be wondering why am I telling all this and n…

CSS Masking: Mask of Batman

Recently, I have been watching videos on CSS to know more about the various interesting features in CSS such as grid layout, flex, filter and so on. After all, it is one of the Turing Complete languages. One way I like to learn more about languages is by watching conference talks. So, I was going through the different talks in CSSConf 2015 when I came across this talk by Tim Holman titled Fun.css. It is a really fun talk but one thing that really caught my eyes was the transition between slides using a star wipe. I searched to see if I could find the code for how to do it with purely CSS but didn't get much help. This is when I decided to give it a try myself. But why Star? I would make a Bat Swipe.

So this is the final prototype I made using just CSS without any Javascript.


See the Pen Bat Swipe by Saptak Sengupta (@SaptakS) on CodePen.
The main CSS property that is used in the above example is mask-image and associated CSS Masking properties. What masking does is hiding parts o…