Attending Front-End Mauritius Meetup July 2016

“A reasonable coding approach to CSS and Sass”

Umar presented some of the “best practices” in the CSS universe; some of which stirred some religious debate e.g. the usage of 2 spaces vs Tabs for indentation. Yusuf, a backend PHP developer, pointed out that in the PHP community, the latter have coding standards known as PSR (PHP Standards Recommendations) which is widely accepted. CSS does not have such widely accepted standards. However attempts are being made have to formalize the standards as David mentioned. I forgot the github name of the project.

Anyways, I am of the opinion that if you are following a coding standard, try to stick to it after deciding on which standards you and your team are going to use.

Another point which I remember is to NOT use CSS #Id Selectors and it makes total sense. The reason is pretty simple to me. Good programmers write code in order to cater for most scenarios. Ids can be used only once on a page. Let’s take for example a “single post page” in a blog. You know very well that only 1 post is going to be displayed on a page

#post {
  background-color: red;
}

<body>
 <article id="post">
 </article> 
</body>

vs

.post {
  background-color: red;
}

<body>
 <article class="post" id="post-15">
 </article> 
</body>

Why you should opt for the second option is that when you have to write the front-end for search page etc, you can just use the class .post without problems as many articles can appear. But during the meetup, maybe I should be replacing the post id using -data* stuffs. Gotta read more on this.

What to remember here is, never ever use # in CSS unless working with form input as per what Sundeep said.

“Vue.js Jumpstart”

Humeira introduced us about Vue.js. I used it previously. Simply love the simplicity and the level of laziness it allows developers to have. However Vue.js is a relatively new technology and I guess it’s pretty normal for big corporations to not use it in production at the moment. As time goes by, I hope Vue.js really takes off in terms of popularity thus gaining stability.

Vue.js, to me, is awesome because it allows me to concentrate on the logic of data objects  in JavaScript and I don’t have to care about the UI views. I know it would simply update itself to reflect the state of my JavaScript object. I just love declarative type UIs.

“Le futur, c’est maintenant avec CSS4”

David explained the differences between a CSS preprocessor and CSS postprocessor. Maybe I might not have yet fully grasped the differences right now but from what I can understood, preprocessors convert .sass or .less to .css. Postprocessors take plain .css augmented with new unsupported attributes by browsers and compiles it into plain .css which are supported by most browsers. Anyways, I think this topic is too advanced for me right now.

Conclusion

13662344_1075355492543126_5851506201456332392_o
Photo stolen from David

Much more happened at the meetup but this writeup is all about what struck me personally. I’d recommend you to attend future meetups so as to be able take part in the interesting debates and be up-to-date with latest front-end techs 😉