LibreCodehttps://fediverse.blog/~/LibreCode/atom.xml2022-07-24T13:04:17.943135+00:00<![CDATA[Collaboration is the key]]>https://fediverse.blog/~/LibreCode/Collaboration%20is%20the%20key/2022-07-24T13:04:17.943135+00:00ahangarhahttps://fediverse.blog/@/ahangarha/2022-07-24T13:04:17.943135+00:00<![CDATA[<h2 dir="auto">The worry</h2>
<p dir="auto">Nearly from the beginning of the course in January I witnessed the lack of interest in collaboration among many students….</p>
<p dir="auto">My worry was that what if I get paired with those who don’t want to collaborate in the final capstone project. Thankfully I got paired with top collaborators in my cohort. So the module started with positive energy.</p>
<h2 dir="auto">Working</h2>
<p dir="auto">We knew each other from our previous modules. We knew we were responsible, passionate, and good team players. Maybe not the best, but we were also good in our programming skills. Soon we started to work. We came with different ideas (based on the core requirements of Microverse). Among all (almost all were good), we chose to make a website for mentorship. Not only we could relate to it, we could imagine it to be a real project (rather a useless car renting app which would remain the same after project submission) in the near future. We spent time to choose name and make logo for it. We chose “<a href="https://github.com/UpliftLab/al-mentoria-frontend/" rel="noopener noreferrer">Al mentoria</a>” which has a mixed vibe for Spanish and Arabic in it.</p>
<p dir="auto">We had discussion on how to divide our work. While we could divide tasks into two groups of front and back-end, we decided that all of us work on all parts. Each had its own benefits. I was supporting front/back division, but at the end I think the group decision was better (despite its problems).</p>
<p dir="auto"><img src="https://fediverse.blog/static/media/503C8465-189A-ADB9-8D91-0BB7EAD08517.jpeg" alt="Al-Mentoria Screenshot"> </p>
<p dir="auto">One interesting issue was that we had much more ideas than the project requirements. We wanted to make any ordinary user be able to apply for having mentorship profile. We wanted to use TypeScript. Unlike other group projects in which my worry was that the other teammates were not working, this time the issue was how to manage this motivation in a way we could keep the integrity of the app and still deliver the final project in best quality as per the minimum requirements.</p>
<p dir="auto">Apart from the above example, there were many other cases of disagreement. For instance I believed that it would be much better if we would implement the HTML/CSS design first and then convert it into React app. Others found it unnecessary, and of course we followed the group decision. In another case, we had disagreement on how to implement authentication on front end. The task we used to think shouldn’t take more than two hours, took two days to come to a relatively robust implementation. In all cases, whenever we had an issue that could impact everyone, we all were getting involved actively to make the best decision.</p>
<p dir="auto">As mentioned before, the unfortunate norm among many students in Microverse (despite the Microverse attempt for change) is that many students do not appreciate team work. In the morning sessions many students prefer to keep their mic and camera off; hardly some would attend mob programming. Standup is worse. People only attend for attendance while it could be a fun session to wrap up the day. But our group was totally the opposite. Right from morning till evening we had fun sessions while helping each other. Even there were days in which we continued our sessions after standup, not just for work but to have chat about other topics.</p>
<h2 dir="auto">Challenges</h2>
<p dir="auto">I mentioned before that our issue was how to limit ourselves. I was the leader in the group, and I tried my best making sure all ideas are heard. We made a list of desired features and refactoring candidates. I assured everyone that we will implement all these good ideas but let’s focus on delivering the first version according to the project requirements as best as we can. Thankfully the team accepted this proposal.</p>
<p dir="auto">We had another challenge: we all must have roughly equal contribution to the project. The rationale behind this condition is legitimate. Where many students do not do their tasks effectively in a group, Microverse tries to push people to work equally. This limitation pushes the fast teammates to work with others and help them to work better. But in our case, this rule was a big barrier. It prevented us utilizing our extra time and energy to add more features while others were working on their own features.</p>
<p dir="auto">It was interesting that after finishing our own tasks, instead of going and resting, we all would come to see if we could offer any help to the other teammates. We never said (or even thought) something like “I have done my task, you should do yours”. We all considered the whole project as ours. We respected others autonomy while tried to offer help.</p>
<h2 dir="auto">Outcome</h2>
<p dir="auto"><img src="https://fediverse.blog/static/media/342AFD2D-26B6-D92F-F8CD-7222DA6704E0.jpg" alt="Al-mentoria team virtual selfie before final assessment"> </p>
<p dir="auto">We presented our project on time. Not only we implemented all the core requirements, but also we implemented a relatively robust authentication and error handling in front-end. We wrote 100+ test cases for back-end and 50+ for front end while it was not a requirement. And for the design, we tried to be as loyal to <a href="https://www.behance.net/gallery/26425031/Vespa-Responsive-Redesign" rel="noopener noreferrer">the proposed design</a> as possible despite having disagreement with some part of it. I think we achieved this fully. So from technical point of view, we were successful. </p>
<p dir="auto">To me (and I guess other teammates), the main success was in our collaboration. We had three fun and joyful weeks. We worked together and much more than that. We were working, laughing, joking, and totally enjoying each others’ company. We strengthen our bond and friendship. And this is the most valuable achievement of this project.</p>
<p dir="auto">We made our project not in our personal profile but in an organization called “<a href="https://github.com/UpliftLab/" rel="noopener noreferrer">UpliftLab</a>”. We made our own workspace on slack to keep remaining connected and work collectively on projects that can help ourselves and other junior programmers to develop skills.</p>
<p dir="auto">At the end, I want to thank all my teammates: <a href="https://github.com/mirouhml" rel="noopener noreferrer">Ammar Hamlaoui</a>, <a href="https://github.com/awais-amjed" rel="noopener noreferrer">Awais Amjed</a>, and <a href="https://github.com/sboursen" rel="noopener noreferrer">Soufiane Boursen</a>, for their contributions in this wonderful experience. I want to thank <a href="https://microverse.org" rel="noopener noreferrer">Microverse</a> (despite all limitations) for its attempts to improve the students skills as developers and as effective team players especially in a remote environment.</p>
<p dir="auto">And the final word: value collective growth.</p>
]]><![CDATA[Enjoying web design using Tailwindcss]]>https://fediverse.blog/~/LibreCode/Enjoying%20web%20design%20using%20Tailwindcss/2022-04-01T11:15:35.393051+00:00ahangarhahttps://fediverse.blog/@/ahangarha/2022-04-01T11:15:35.393051+00:00<![CDATA[<p dir="auto">Do you enjoy the pain of moving between HTML and CSS files for designing a web page? I don’t and I don’t think anybody would. Then what is the solution? Are there any CSS frameworks good enough to overcome this pain? If yes, which of them to use? My ultimate answer is <a href="https://tailwindcss.com" rel="noopener noreferrer">Tailwindcss</a> and here I am going to share some of my thoughts about it.</p>
<p dir="auto">An ordinary day for a frontend developer consists of opening an HTML file, a CSS file, and a web browser. We frequently go from HTML to CSS files, make new classes, combine them, make complex selectors, and deal with issues such as specificity. We wrestle with all these to get something we want. For years, many ideas came up to make this procedure more smooth and less painful. Many people use less, sass, scss, or frameworks like foundation and bootstrap. But still, the field on which we wrestle is the same, maybe just fancier.</p>
<p dir="auto">How nice would it be if we could remove one of HTML, CSS, and a web browser for design? Wrestle with two is much easier than with three. We cannot remove HTML since our content is there. Removing the web browser also is not practical since we need to examine our design step by step. What remains is CSS! But if we remove CSS, how can we design? One may say frameworks like Bootstrap have many premade styles so without touching any CSS files, we can use relevant classes to design the page. Yes! That is a good start but don’t you think this approach makes all websites look the same (and look ugly :D). This is why I say this is just a fancier wrestling field and not a different one.</p>
<p dir="auto">Let’s change the field and play differently. Tailwindcss is at your service. Tailwindcss provides us with a bunch of utility classes we can add to HTML elements. Do you want padding of 1rem? Add p-4 class. Do you want a red color text on the hover? Add hover:text-red-500 class. But wait! Isn’t this the same as Bootstrap classes? At once yes but deeply no.</p>
<p dir="auto">Bootstrap has two kinds of classes: utilities and components. Components are sets of classes that are related to each other and without one, the other won’t have any meaningful impact. Classes for making navbar or cards,… are among component classes. But also there are utility classes which are kind of independent of others and can be used anywhere. Classes related to typography, spacing,… are among this group.</p>
<p dir="auto">Tailwindcss is a utility-first framework. Unlike working with Bootstrap which provides a limited (really limited) number of utility classes, Tailwindcss provides many. And since version 3 practically we have an unlimited number of classes. You just make a new class right inside the HTML file and Tailwindcss generates the CSS style for that class on the fly. Isn’t it cool? This way one can implement nearly any possible design without leaving the HTML file. It is easy, fast, and fun!</p>
<p dir="auto">In short, Tailwindcss provides these advantages:</p>
<ul dir="auto">
<li>You only focus on design right in the HTML file.</li>
<li>You get a small CSS file since Tailwindcss only generates classes you have used in your HTML file</li>
<li>The HTML component becomes portable. Just copy it from one project to another and it fits the design system of that project.</li>
<li>No specificity issue anymore.</li>
<li>No garbage classes and style in CSS files</li>
<li>Perfect for React, Vue, Angular project</li>
</ul>
<p dir="auto">There is much more to talk about Tailwindcss. It has good <a href="https://tailwindcss.com/docs/" rel="noopener noreferrer">documentation</a> and also it has a <a href="https://play.tailwindcss.com/" rel="noopener noreferrer">playground</a>. At first, it may look weird and pointless but I promise if you start working with it, it shows up its power very soon. I am not sure how one can resist it then.</p>
]]>