Forem: Manavi

CSS: Its complicated!

Manavi — Wed, 04 Mar 2020 10:54:51 +0000

When someone asks me to rate myself on HTML, CSS and JavaScript from 1 to 10 (10 being the highest), CSS always has the lowest rating. However, this was not the case always.. When I was new to web development, CSS was all about applying font styles and colours to HTML. With that thought in mind, I went for an interview and was asked to rate myself on the 3 pillars of Web Development. Confidently, I said 8 (highest among the 3) for CSS, much to the interviewers' surprise. What followed was a fat bunch of questions about position, display, grid, box-model, alignment and many more (obviously not a single one on colours and font styles :( ). I was muddled to a point where I started questioning myself on what era of CSS was I referring to when I said 8/10. So, I guess it won't be wrong to say that I've learned CSS the hard way. Though the learning hasn't stopped (no way!) but I am definitely more informed about its power and usage than I was before.
I have been using CSS in all my projects (not like I have a choice). Sometimes I love it, and sometimes I don't. I like things to be orderly, and CSS (IMO) is very chaotic. But again, it's not a programming language. It is a bunch of rules (some say its more of a constraint language), which helps in giving your page a layout. Needless to say the look and feel of a web page are very important. A major part of why I find CSS tough is because I have never really given much time to understand it. May be because everyday there is a new JavaScript framework that pops up. And I have to join the race of how quickly I can add it to my resume.
However, with time and sometimes the need of the hour, I have tried to understand how CSS actually works. How we can position elements to make them behave in a certain way, be it on a desktop or a mobile. We have a lot of expectations from our CSS and yet we don't know it well enough.
There are some CSS properties that still make me very nervous but are extremely important. Some of them might work only when combined with others - then why are they two different properties? Like "background" and "colour" should always be set together but still need to be declared separately.

Here are some of the CSS properties that have always hated me (and vice versa):

position: absolute;
display: block/inline/inline-block;
margin-left: 20px vs left: 20px;
#sidebar h2 vs #sidebar.h2 vs #sidebar + h2 vs #sidebar > h2;
p + h2 vs div.post p + h2 vs .post h1 + p:first-line;

Intense right? Beyond these fundamental concepts (which now I have wrapped my head around), there are multiple others that we need to know to master CSS.

To name a few:

Building a layout with a responsive design
Mastering CSS 'position'
Using pseudo selectors and classes to be very specific about the elements you want to style (although specificity can be your worst nightmare when it starts skyrocketing, so we need to be very careful)
Style overriding rules when multiple CSS files are used
CSS Grids and Tables
Media Queries and breakpoints

You may check out this article to see others..

There is another functionality you need to factor in to make sure your work looks consistent on all browsers: Cross browser compatibility! Honestly, I can't remember the last time I built an application that worked seamlessly on all browsers in the first attempt. There were always some tweaks/additions that needed to be done. For example to apply animation to an element like so: "transform: rotate(60deg)", this alone is not good enough. You need to check out the pretty looking CSS below:

  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);

Add these prefixes and you are good to go.
Just so you know -

-webkit- Chrome, Safari, newer versions of Opera, almost all iOS browsers,
-moz- Firefox,
-o- Old versions of Opera,
-ms- Microsoft Edge and Internet Explorer.

Some of the browsers simply gave up on CSS and refused to interpret it no matter what (I hope IE is not listening). But recent browsers and their updated versions are much smarter and have a better understanding of how to render CSS. This whole browser incompatibility is the reason video tags (for example) must look like -

<video id="video" controls preload="metadata" poster="img/poster.jpg">
  <source src="video/sample_clip.mp4" type="video/mp4">
  <source src="video/sample_clip.webm" type="video/webm">
  <!-- Offer download -->
  <p>Your browser does not support HTML5 video; here is a link to
  <a href="video/sample_clip.mp4">view the video</a> directly.</p>
</video>

We simply add a download option in case the browser cannot read video tags. Similarly, we need to make sure we either cover all edge cases or at least have a fallback when something does not work.

Last but not the least: Keep you CSS clean... because if you don't, it will affect browser performance. Yes, CSS is render blocking. Just how the browser has to create a DOM to make the document, it also has to create the CSSOM to apply styles to it. Both of them put together, is what you are seeing right now. If we put it in order, it looks something like this:

CSSOM -> render tree -> layout -> painting

Painting is the last part and it is done pixel by pixel. So, if we have carelessly put 'expensive' styles in our CSS, the browser will have a lot of work to do and it will take revenge by hiking up the loading time of the page. In case you are wondering what I mean by 'expensive' CSS styles, do have a look at this.

The idea here though is not to prove how difficult CSS is, but in a nut shell:

To remind ourselves how powerful it is.
It can be mastered if we really give it time.
It makes your page look beautiful so why not write it the same way - clean CSS.
In order to learn some CSS concepts, they need to be implemented in actuality, otherwise its a life-long struggle.
Our document tree, CSS and the browser go hand in hand so we have to be careful while writing our CSS.
Lastly, a big shout out to people who are struggling with CSS: You are not alone!

Happy styling :)

References:

https://www.tentononline.com/is-css-difficult/
https://news.ycombinator.com/item?id=19021719
https://css-tricks.com/browser-painting-and-considerations-for-web-performance/
https://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/

Why Data Structures?

Manavi — Mon, 17 Feb 2020 08:40:43 +0000

So, do you often wonder why one needs to know data structures in order to achieve ANYTHING in the software world? Well, I do. I always have.. especially because I am not from a CS background and I still aspire to work as a software developer in top product based companies. Is this like chasing a moving target? Like wasting my time may be? Umm, I don't think so. Lets See why -

In 2014, when I just started working as an SE, people asked me - you don't know what is the complexity of running a BST? and I was like umm no, never had to use it to build a website. Although that was true, no one was convinced that Data Structures and Algorithm is a subject you can skip at any level if you are a developer. Most of them were obviously people who had studied formal Computer Science courses for 4 long years!
Now, 3.5 (relevant) years into web development, I am no longer just creating static websites (thankfully! :p). I now know what goes into building what we often call a "dynamic website/portal" that handles real time data, where the data comes from, how does it get displayed/updated on the page, how does one make sure the website performance is optimal and so on. Finally, I have come to terms with the fact that there are certain concepts like Data Structures and Algorithm, time/space complexity, browser performance basics and many more that are a MUST HAVE for a programmer who aspires to grow or be on par with his/her peers. Before I started doing web development, I used to work extensively on Linux. Never knew that a lot of its commands are nothing but data structures at a very basic level! And as you grow in this field, you realise that software development is not just about what you do, its more about WHY and HOW. Why did I use this logic and not the other one, why did I choose to parse my JSON in a certain way as opposed to another, why did I search for an element using this logic and not that one etc. All this comes from a place of experience and CS basics (again, mostly Data Structures and algorithms). Knowing how to do something VS how to do something more efficiently is what makes a difference at the end of the day in the programming world (and in life too!). Again, you will ace the latter only if you know why solution A is better than solution B, if you can also prove it with technical terms, and here it is: TIME COMPLEXITY! Its like there are so many ways of searching for a book in a library. But which one saves more time and how? Because time and memory (or space) are 2 very precious gems in the software industry and you MUST know how to save them at any point in time.

Another fact of the matter is that the amount of time and logic that goes into designing a software is much more than what goes in its development. I say this with utmost confidence because I was recently a part of the design discussions for a product my team has built from scratch. It is almost up and running and I know WHY we did something the way we did. While working on the UI development of the product, I dealt with a lot of JavaScript Objects like Array and Strings (though everything in JS is an object, I just want to be specific here). Any function which involved creating/reading/modifying these object was essentially using Data Structures and their algorithms. So knowingly or unknowingly, we all as programmers use Data Structures and their methods everywhere in our code. So, dedicating time in learning about them, will only help us understand our code better and in turn optimise it in the best way possible. Because that is what everyone is looking for in a developer (may be apart from an understanding of HTTP requests).

I have been working on understanding Data Structures using some of the courses available online but its true that unless we actually implement it in our code, we wont be able to ace it because (sadly) mugging stuff up doesn't work here at all (in 2014, I thought it did!).
I would also like to list down some of the courses/links I have found useful in learning Data Structures and Algorithms:

https://www.udemy.com/course/learning-data-structures-in-javascript-from-scratch/
https://www.youtube.com/watch?v=t2CEgPsws3U
https://github.com/trekhleb/javascript-algorithms/tree/master/src/data-structures
https://adrianmejia.com/data-structures-for-beginners-trees-binary-search-tree-tutorial/

Here's a link to my own repository (it is still in development stage) where I have tried to apply some of what I learned on small problems:

https://github.com/manavisingh/YouDontKnowJS/tree/master/src/js-algo

Any more links/courses that will be of help are welcome :)