The Best Way to Overcome Boredom at Work

Curiosity and interest have become learning motivations as well as the desire to feel nourished by those who know more than we do and are generous to share it with those who know less. This win-win relationship motivates us to follow that way. As part of the continuous improvement process, Bitlogic focuses on generating Training Paths. To make your working life more attractive, less dreary and more transformative, at Bitlogic we can suggest those courses, workshops or qualifications that we consider enriching at every level.

A few months ago, I asked Bitlogic to attend the Workshop called Level-up with Modern CSS by Stephanie Eckles . After completing it, I was invited to share my experience with my workmates, to infect and motivate them in this way to combat the boredom and monotony of daily work. I found it amusing to share all the tools and practices that I find useful and which have taken my work to a higher level.

In this article, I will tell you what tools or resources I use on my daily basis to keep myself up-to-date, entertained and free of boredom, and also what led me to choose this workshop and what is my "honest review" of it.

The avant-garde and Smashing Magazine

Web development is not an easy task: day to day, we developers face a countless number of libraries, frameworks and npm modules that theoretically solve all our problems. The solutions we implement need to be secure, responsive, accessible, and at the same time have optimal performance. This scene, doubtlessly, implies that we need to be updated and forced to learn something new every day. This practice becomes a must so that the products and solutions we design do not become obsolete in a matter of months. Besides, it helps us remain active and proactive without having that feeling that every day is alike. One of the resources I lean on to be up-to-date and from which I take full advantage of to stay active is: Smashing Magazine . I strongly recommend you to read its articles, since they are deep enough to assist you when solving those problems that any developer encounters while working on diverse kinds of projects.

Going beyond with CSS

Lately, CSS has been modernized by incorporating many new properties . Therefore, I decided to continue getting trained on it and that is why I chose the "Level-up with modern CSS '' Workshop. Below, I tell you the reasons that prompted me to go further and broaden my knowledge:

• A solid basis constructs and contributes foundations for developers: thanks to my base knowledge in CSS, I am able to implement the prototypes in my project in a reasonable time and with confidence. Design systems are an aid, not a way to dodge CSS.
• You can't see the forest for the trees: with the enthusiasm of learning about the new properties that CSS brings us, we should remember that there are browsers that still do not support them. For instance, LCH, is a new format for colors that is currently only supported in Safari.
• A tidy and maintainable code: when working in teams, it is necessary that the code is as neat and maintainable as possible so that in the future any team member can understand it and extend it without any real pain. Probably, no changes are planned for the front end of our project, but we can do our best today in case these changes appear all of a sudden to avoid them becoming a nightmare for developers.

The workshop experience itself

The workshop was divided into 5 remote sessions that lasted 2.5 hours each. In the first session, we began with a blank project. Stephanie builds a project step by step where she illustrates all the concepts she wants to share. The last half hour of each day is used to perform Q&A tasks, where code created that day and the previous day is reviewed. Also, some general questions are asked and diverse experiences with libraries or tools the participants used are exchanged.

Technical highlights

Next, I am going to list 4 of the facts I learned and were totally revealing and crucial to me:

1- During every single moment of the workshop, Stephanie Eckles bear in mind both the accessibility and the reduced motion. I especially liked how she acted based on a preference for reduced motion in the CSS reset, which overwrites the default style behavior implemented by browsers. With very few lines of code, she overwrites all the movement in the complete web page so that it occurs so fast that not even our eyes can perceive it.

2- On several occasions, I felt that the code that Stephanie was writing was very similar to the code that I usually write. The difference is that she manages to notch the instructions up, giving a much more elegant solution. This grid instruction is an example where a minmax function is nested to simple grid-template-columns and it is managed to avoid overflow at horizontal level for small screens, without a complete query.

3- Generally, most of the people who are front end developers learn CSS with a few tutorials and later improve their skills while facing challenges at work. This type of learning may leave some knowledge aside. The CSS selector usage is the case. During the workshop I realized that I had settled for using solely two or three selectors and did not know that there are many more that, applied correctly, can reduce my code significantly! In the following screenshot there is an example where Stephanie Eckles combines selectors >, * and :not to apply padding only to elements that are not images in one card.

4- One of the most interesting classes was one when I saw new ways to apply styles to inputs, checkboxes and HTML-native radio buttons, elements that had always resulted very difficult to me when working. Stephanie managed to apply the required styles so that the elements would look well, not only considering the accessibility, but also the Windows high contrast mode and the printing mode so users would not lose information when printing a form. In the following example, it is shown how to make the most from properties like paper clip-path and outline for a checkbox with totally customized styles.

Conclusion

Now, you can easily definitely understand which is my technique to combat boredom: to be constantly learning and to apply any new method that can improve your code. To summarize this review in one sentence, I can assure you that I loved the Workshop! I enjoyed it a lot because now I have a full project which I can easily refer to when I don't remember how something was built in accordance with the training. At the same time, it was a very nice experience to see a highly-qualified and experienced person to program live. I learned many things and I could make several changes in my project so that the CSS becomes more modern and also neater. I subscribed to Stephanie's blog and the blogs of other people she mentioned during the workshop, which keeps me motivated to be permanently reading, learning and delivering better and better lines of code. In the workshop, Stephanie Eckles shows how to take advantage of new properties, and simultaneously makes the code compatible with previous browsers versions. This was one of the concerns that led me to request for this training. In addition, Stephanie does not use design systems and writes all the styles with pure CSS and some SaaS. Finally, it impressed me not only her ability to write live code, but also that she knew exactly how to search for an error when something was wrong. It's worth mentioning that I was not the only attendee impressed by her outstanding ability: during the classes and through the chat other participants were constantly pampering her knowledge and the elegance of her code. This fact created a very pleasant atmosphere with all the participants. I hope you find this article useful and motivating to find new ideas and resources that make your working days more challenging and captivating. If you want to know more about me, I invite you to visit my blog in which you will find useful pieces of advice based on my experience and knowledge of the front end.