----BEGIN CLASS---- [14:01] #startclass [14:01] Good. [14:01] Roll call? [14:01] Darshna Das [14:01] Kushal Das [14:01] Rahul Jha [14:01] Rayan Das [14:01] Saptak Sengupta [14:01] .sayanchowdhry [14:01] Kuntal Majumder [14:01] Siddhant N Trivedi [14:01] Aniruddha Basak [14:01] Bhavin Gandhi [14:01] Sayan Chowdhury [14:01] Asma Shora [14:01] Bhavesh Gupta [14:02] Sandeep Choudhary [14:02] Jagannathan Tiruvallur Eachambadi [14:02] Benedict Ramasamy [14:03] Okay. I am going to go ahead and start with my introduction. [14:03] If you have a question, remember to type ! [14:03] ! [14:03] saptaks, try next command [14:03] next [14:03] all good. [14:03] Great [14:03] saptaks, stage is yours. [14:03] Thanks [14:04] Hello everyone. So I am gonna start with a brief introduction. [14:05] My name is Saptak Sengupta. I am currently working as a web development contractor with Freedom of the Press Foundation and Weblate. I also contribute and/or maintain various open source projects like jQuery, OONI, Onionshare, etc. and build websites for many upcoming projects. [14:06] And since this is a session on a web development topic, here is my website: https://saptaks.website/ [14:07] So today I am gonna talk about CSS - a thing which seems like magic to many and unnecessary to others but is super important in web development. [14:08] I am not gonna talk about the different properties and features of CSS, or give code snippets to write better flexbox. What I want to do with this session is give an understanding of how things work and point you to different resources that will hopefully help you to write better CSS [14:09] I will stop in between the session to take some questions. And rest I will answer after the session. [14:09] So, with all those out of the way (and I know I type a lot so take your time to read and catch up), let's start with the most important question [14:09] What is CSS? [14:10] CSS stands for Cascading Style Sheet. [14:10] It is used to design a markup language like HTML [14:10] Many of you who already know and have done some form of web development might already know this. [14:11] But something more interesting is: HTML when first made was supposed to be standalone and define how different elements look, like h1, p, etc. [14:11] From HTML 3.2, many more styled tags like font, etc came. And it was difficult and hectic to keep adding attributes to style. Hence w3c came up with CSS [14:12] CSS and HTML (and web development in general) keeps evolving over time and hence there are always new things and new discussions. You can see ongoing changes and discussions here: https://www.w3.org/Style/CSS/Overview.en.html [14:12] I will share a lot of links, so would really appreciate everyone to atleast take not of those links. [14:13] CSS not only can decide not only colors, font, etc for simple elements, but also pseudo elements and different media devices. Will come to more about it [14:13] Anyone has any questions till now? [14:13] ! [14:13] next [14:13] given that you said HTML had style with p1 etc, did the browsers have a default style back then? [14:14] j605, the browsers still have a default style for every HTML element that you write and how each element is rendered and it varies from browser to browser following certain guidelines by W3C [14:15] Which is why you can write a HTML code without any CSS whatsoever and you browser will still render something. [14:15] And this is actually a good question to come to the next part of my session [14:15] So if no one else has any other question, i will move on to the next part [14:16] Great. [14:16] So next I want to talk about another important question [14:16] How is a web page rendered? [14:16] Now this is actually very important in understanding and writing better CSS [14:17] So the steps for a website (with only HTML and CSS) to be rendered at a very basic level are these: [14:17] 1. HTML is Parsed [14:17] 2. A DOM is created from the Parsed HTML [14:18] 3. Technically, a CSSOM is created after parsing from CSS, but let's not think too much about it [14:18] 4. Technically a CSSOM and DOM is then combined to make a Render Tree which is a representation of what will finally get displayed [14:19] You can learn more about the render process in detail in this talk: https://www.youtube.com/watch?v=SmE4OwHztCc So really appreciate everyone to watch this talk at dinner tonight instead of the planned netflix movie. [14:19] There are obviously many more intricacies in there, especially when JS comes in, but that's a talk for another day [14:19] Any questions from this part? [14:20] Okay. So moving on. [14:20] Let's talk a little bit more about this Render Tree thingy [14:20] So, in render tree is where we decide what is shown, how is shown, and how the visualisation will be. So for example if an element has display:none, then it will technically not be in the render tree. Decides width, height, whether inline, how to line boxes, etc. It's awesomely described in details in the above video with visualisation. [14:21] Now my biggest reason to talk about this render tree and how browser renders is because there is a moral in this story [14:21] You can't write good CSS without writing good HTML [14:22] If your HTML is messy, your CSS is going to be way messier. [14:22] And it's difficult to write good HTML, not because there isn't enough tutorials/documentations, but because HTML (and CSS) is forgiving in nature. [14:23] One tip from me that you might have heard million times while writing code using programming language is: Indent your HTML code. [14:24] Indentation helps you clearly see the mess. And if you can't still realise the mess, go to your browser, open the webpage, inspect element, and see how the browser is rendering it. [14:24] Start with the HTML, refactor the HTML [14:24] And only then move to changing CSS [14:24] This is very very very very important. [14:25] Any questions till now? [14:25] ! [14:25] ! [14:25] next [14:25] is there something like a linter for html so you can check the problem? [14:26] (maybe the browser inspector will tell you) [14:26] j605, yes. It's very difficult to lint HTML given that there are not very strict rules, and browser will interpret wrong code as well in right way. [14:27] There are many different ones. One of them is by mozilla: https://github.com/mozilla/html5-lint [14:27] But I would just say check your indentation for the most part and see you are closing tags, where tags need to be closed [14:27] next [14:27] Is messiness just badly indented HTML/CSS? [14:27] hellozee, no. [14:28] But that's one of the reasons that cause messiness in my opinion [14:28] bad indentation makes it very difficult to understand if you closed the tag in the right place or wrong place [14:28] And an HTML is rendered completely differently if you close a tag in a slightly different section of the code sometimes. [14:29] The browser just has faith in coders. It assumes that you know the best. (which in hindsight seems like a bad idea) [14:29] Anyone else have any questions? [14:30] hellozee, another thing is also understanding the entire tree like structure. and which element should be under which to achieve the final output. [14:30] So, contrary to most believes, writing HTML does need some planning. [14:30] right, thanks [14:30] Okay. [14:31] I would have talked more about DOM in general but it would deviate too much from the CSS aspects. So feel free to ping me about questions related to DOM and what is DOM in detail. [14:32] To give a brief overview, the browser parses the HTML, and creates a tree like structure called Document Object Model, or DOM. CSSOM is similar to DOM but for CSS. Together they decide how the webpage looks. [14:32] You can manipulate them using other languages like javascript, to decide how it looks dynamically. [14:33] Now, when it comes to CSS, one important aspect is doing layouts [14:33] Almost everyone can change color of text from green to blue. [14:33] But layout is difficult. [14:34] So, for making good layouts, the most important thing is first learning few basic CSS properties [14:35] like position (what does different values of position actually mean), z-index, difference between margin and padding. [14:35] And the next, more important part is: Using Flexbox and Grid instead of float and table for layout. [14:35] use table, only when you need a table [14:35] not for making a layout. [14:36] I can't emphasize enough on how important it is and how most web developers still don't find it important enough to learn Flexbox and Grid [14:37] For learning any CSS properties, I still use w3schools (https://www.w3schools.com/css/default.asp). They keep pretty updated. Mozilla also has some nice resources. [14:37] It will make mini web series if I go teaching about layout and griding, and there is always something new coming up. Thankfully Jen Simmons from Mozilla has talked about it extensively in her channel, so go have a look: https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag [14:38] After understanding these, people might want to learn more about the wizardry and fancy stuff. To know fancy stuff, see videos like https://www.youtube.com/watch?v=LY65F2e4B5w and https://www.youtube.com/watch?v=WmVH85G59Lk by Una Kravets [14:39] And yes, it is possible to make games with only CSS, so if someone tells you that you can make a landing page only using some fancy JS framework, ask them to think twice [14:40] Any questions? [14:40] ! [14:40] ! [14:40] next [14:42] Of what I have seen people tend to move towards becoming react/x JS framework developers and totally relying on that. What could be the drawback they might have in the long and short run ingnoring the basic compent as CSS for building their products ? [14:43] ! [14:43] Just to clarify react devs instead of becoming front end devs in general. [14:44] pradhvan, honestly speaking, even if you write using react/x or any other JS frameworks, you will probably still need to write CSS (or CSS in JS) for designing the different components in your single page application. So an understanding of CSS and HTML helps. [14:44] And one also needs to remember, that what the browser finally renders and understands is HTML and CSS [14:44] So everything anyways gets converted to that finally [14:45] Now I understand that there are multiple frameworks to speed up the process and that is sometimes a good way to get going and start making something (which is a process I really love). But in long run, if you just become an expert in framework, then it becomes difficult to switch from project to project [14:46] In the last week, I have written pyqt, jekyll, hugo, sass, scss, html, bootstrap3, bootstrap4. [14:46] And I didn't know anything about most of them before this last week. But since I know the basics, I can read the documentations and understand and quickly adapt to it. [14:47] So I feel knowing the basics help you to adapt to any framework whenever you need to. So it's a good to have. But definitely not a necessity. [14:47] So it depends on your own goals [14:47] next [14:47] Does modern CSS cause any JS to run in the background? Or how is everything interpreted by the browser directly? [14:48] Got it thank you saptaks :) [14:48] schubisu, no. The modern CSS doesn't cause any JS to run in background [14:48] okay thanks ;) [14:49] Whenever new CSS specifications come out, the browser vendors like mozilla, chrome, internet explorer need to actually update their browser to understand these CSS. And only then can it be rendered directly. [14:49] Which is why internet explorer is an awesome browser (sarcasm intended) [14:50] This is actually a nice question to move to my next point, but let me answer the questions first. [14:50] next [14:50] for making a layout, do you first draw it in digitally or on paper first? Since I was modifying the theme in my blog, I wanted to ask how would you tackle understanding the current style. [14:51] It always helps to have a design digitally first. Which is why I emphasize enough on how important a designer in for frontend development. But given you don't have that resource, it's still good to have a rough design either in figma, or pen and paper. [14:51] And once you have the design, what I do is try to think of each element as a box [14:52] and decide in my mind (you can do it in paper) which box lies within which box. or maybe some box overlaps other box [14:52] Once I have that clearly in my head, I start by writing the HTML with 0 CSS to get that box idea down in HTML [14:52] and then write the CSS for layouting and alignment [14:53] I hope that answers the question [14:53] yes, thanks! [14:53] Okay. So moving on to the next part. [14:54] As rightfully asked by schubisu how do we know or understand that if a CSS feature is properly rendered by a browser [14:54] I always lookup a feature before using it in https://caniuse.com/ [14:55] it's a very very very important website, to understand cross platform supports. So do note it down [14:56] One very important browser that it doesn't list is Tor browser (stares at kushal). So I wrote a blog about how you would find that: https://saptaks.blog/posts/it-works-in-firefox-but-not-in-tor.html [14:56] :) [14:56] So now moving to the highly talked topic right now (and certainly very important) is how to make websites responsive. [14:57] Because now, you don't only open websites in laptop. People have devices from iMac to the tiniest phone with a browser. [14:57] And also some devices have special features for supporting accessibility. [14:58] And websites I believe should be made (at least tried to be made) for everyone. Unless you have a very specific usecase. [14:58] So the first super important point is [14:59] After you get a design from the designer (or you have decided some layout yourself) don't jump right in with writing everything using 'px' [14:59] px stands for pixels usually. And most web design you will get is in 'px' [15:00] Always try to write sizes in %, rem, em, vw, vh, etc. Again I don't want this session to be a web series [15:00] So I wrote a blog about this too: https://saptaks.blog/posts/preferred-unit-in-css.html [15:01] Now a good question many people ask is how do we understand the rem/em value from the px value [15:01] Usually, 1rem/em = 16px by default in a browser unless changed in a root level. You can learn more about that in that blog. [15:01] Next important thing to make responsive website is media queries. [15:02] Now media queries, surprisingly isn't only about max-width and min-width [15:02] There are many more like, you can define based on orientation: landscape, as how you want to show in a landscape orientation compared to portrait. [15:02] Or if the device has hovering enabled (which most phone don't) by using hover:hover in media query [15:02] I think this is a good list to learn about all different media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/@media [15:02] Any questions? [15:02] There's one more thing I want to cover and then I will be done. [15:03] So maybe I will take all questions after that. [15:03] ! [15:03] So something very important (though this deviates from a CSS session) is accessibility while making a website. [15:04] Though it's not CSS but more HTML attribute and how again to write better HTML to make your website accessible. There's some CSS as to deciding what colors and fonts you should pick for making the website accessible [15:05] Two really good resources to learn about different ways your can improve accessibility via HTML are: https://www.w3.org/TR/WCAG20-TECHS/intro.html and https://www.w3.org/TR/wai-aria-practices-1.1/ [15:05] So do note these links down. [15:05] And with that I will open up for questions. [15:06] next [15:06] in the media queries wiki, I see things like prefer-less-motion. how are these conveyed from the user to the site. I know dark mode is a OS level setting now but do these also set at a higher level or at the browser? [15:07] j605, I don't know about all the media queries mentioned there. Some is computable by the browser like orientation and touch and min width and all. But not sure about all. I think you can click on those to learn more? I would need to dig deep as well to know more. [15:08] Any other question? [15:08] ! [15:08] next [15:09] the css specification is too big, is there a prescribed subset of it which could be used without having any issues while making a good looking webpage? [15:09] saptaks: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion mentions how it is figured out, thank you [15:10] hellozee, I think w3schools is still a good resource to get the basics. [15:10] hellozee, I personally feel that you can learn CSS on a "as-needed" basis. [15:10] So you can explore more if you are like I wonder if I can do this in CSS [15:11] hellozee I don't think you need to read through all w3c specifications unless you are really interested [15:12] But w3schools mostly covers all. [15:12] I hope that answers your question [15:12] thanks [15:12] hellozee, And I watch CSS conference talks [15:13] hellozee, Also you can learn CSS the definitive guide by Eric Meyers if you want to dive deep [15:13] sure [15:13] Any other question? [15:13] ! [15:13] next [15:14] What's the reason for Sass and Less? [15:14] ! [15:14] peanutduck, That's a really good question. [15:15] It's very similar to why you need object oriented programming paradigms. Or why one would write functions in python or javascript or any other language, than to write everything in a huge single file [15:15] It helps in making your code reusable [15:16] And breaks it down into smaller modules [15:16] Which you can then compile into a giant CSS [15:17] CSS is a declarative language for the most parts, but tools like Sass and Less helps you to make a little more computations, allow more reusability and better readability. [15:17] But CSS is also coming up with a lot of new features. Like you can already declare a variable in CSS [15:17] you don't technically need Sass for that [15:17] or you can do calculations in CSS without Sass or Less [15:18] peanutduck, I hope that answers your question [15:18] next [15:18] Thank you saptaks [15:18] Same question as that of peanutduck . Just adding to that, what are your views about TailWindCSS ? Have lately heard a lot of praise about it. [15:19] sidntrivedi, good question [15:19] sidntrivedi, https://twitter.com/Saptak013/status/1254492132179447808 :P [15:19] So basically what I said in the tweet is tailwind CSS is really nice [15:20] it makes making websites responsive and smooth really easy [15:20] But it is better with web applications which have webpack or some kind of package management [15:20] because their CDN version doesn't support a lot of features [15:20] So it depends again on your use case [15:21] saptaks: Understood. Thanks :) [15:21] Any other question? [15:21] kushal, I think we can close the session and then open it up for normal discussions? [15:21] saptaks, thank you :0 ----END CLASS----