<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Ricardo Martins</title>
    <description>The latest articles on Forem by Ricardo Martins (@fmmricardo).</description>
    <link>https://forem.com/fmmricardo</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F69824%2Fa16dfff6-2b25-4954-a0ee-b9f9ec449780.jpg</url>
      <title>Forem: Ricardo Martins</title>
      <link>https://forem.com/fmmricardo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/fmmricardo"/>
    <language>en</language>
    <item>
      <title>Pull requests reivews</title>
      <dc:creator>Ricardo Martins</dc:creator>
      <pubDate>Wed, 16 Sep 2020 09:29:54 +0000</pubDate>
      <link>https://forem.com/fmmricardo/pull-requests-reivews-a8f</link>
      <guid>https://forem.com/fmmricardo/pull-requests-reivews-a8f</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xol8FBlJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3zliph8cattsp1sx3vzc.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xol8FBlJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3zliph8cattsp1sx3vzc.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Photo by Alev Takil on Unsplash&lt;/p&gt;

&lt;p&gt;Hello,&lt;/p&gt;

&lt;p&gt;I'm struggling a lot with this theme. I'm kind feeling that I'm the snotty sheep that blocks every PR because the code is not well formatted, there are some css files that need some improvements among other complex things. &lt;/p&gt;

&lt;p&gt;I would like to know how critical are you when doing pull request reviews. &lt;/p&gt;

&lt;p&gt;When do you consider that a PR should have the tag of 'needs work'? &lt;/p&gt;

&lt;p&gt;Do you block a PR if it contains CSS files improvements to be done?&lt;/p&gt;

&lt;p&gt;How do you feel when you see extra lines that are not needed on the code. &lt;/p&gt;

&lt;p&gt;When should we stop to  being too much picky?&lt;/p&gt;

&lt;p&gt;This are some questions than I'm confronted with, and seems that this is not so important for others. &lt;/p&gt;

&lt;p&gt;Thanks in advance for spending time to read my blog and answer of the following questions.&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>frontend</category>
      <category>codequality</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Doing better in just 9 weeks. The importance of being challenged.</title>
      <dc:creator>Ricardo Martins</dc:creator>
      <pubDate>Sat, 21 Dec 2019 22:02:10 +0000</pubDate>
      <link>https://forem.com/fmmricardo/doing-better-in-just-9-weeks-the-importance-of-being-challenged-bnp</link>
      <guid>https://forem.com/fmmricardo/doing-better-in-just-9-weeks-the-importance-of-being-challenged-bnp</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F1srzroecyh18x9pjicgv.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F1srzroecyh18x9pjicgv.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Photo by Daniel Jensen on Unsplash&lt;/p&gt;

&lt;p&gt;The challenge came after a 1-on-1 conversation and was the type of guidance that I had been seeking for a while.&lt;/p&gt;

&lt;p&gt;To put it briefly, the 9-week plan consists of establishing personal or professional goals during this period.&lt;/p&gt;

&lt;p&gt;It’s an effective way to challenge yourself to learn things or define goals in a structured way, without losing focus. The key aspect is to see things happening and have the perception that sometimes we do more than we think, avoiding that feeling of “I did nothing productive this week …”.&lt;/p&gt;

&lt;p&gt;The period of 9 weeks is the right amount of time to set some goals, track them and see the evolution through time. It is not too short, so we can’t do anything, and not too long, so we lose interest.&lt;/p&gt;

&lt;p&gt;Those goals should be a plan by week and then daily. Without a plan, it’s impossible to track the progress.&lt;/p&gt;

&lt;p&gt;After choosing the goals, this follows the five whys methodology — a questioning process designed to drill down into the details of a problem or a solution and peel away the layers of symptoms. It’s also essential to set rewards for each task and a final one after the nine weeks.&lt;/p&gt;

&lt;h2&gt;
  
  
  The plan
&lt;/h2&gt;

&lt;p&gt;Coming up with the program was not easy, but I had the help of a PM and a team lead to better define my goals and tasks.&lt;/p&gt;

&lt;p&gt;Here is an example of how it looks:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7jx9tkxucykhj2wgc1ja.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7jx9tkxucykhj2wgc1ja.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fs2gpgya3bfxpl58zh87d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fs2gpgya3bfxpl58zh87d.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The process
&lt;/h2&gt;

&lt;p&gt;The main goal of this plan, as I already mentioned, is to create incremental habits which allow our personal and/or professional growth. Being a dad of two kids, this also allows me to create my learning time and personally develop, while trying not to interfere with family time.&lt;/p&gt;

&lt;p&gt;By the time I accepted this challenge, I felt utterly lost and without goals. Being a methodic person, I like to plan things and have guidelines in everything I’m involved.&lt;/p&gt;

&lt;p&gt;After one week of planing, things almost went in automate mode after a while, which is part of the plan, and, without overthinking, I was already waking up earlier to start my learning time before starting work and dropping the kids off at school.&lt;/p&gt;

&lt;p&gt;Week after week, I was feeling the evolution of such dedication, my life quality considerably increased, and everything was a habit already. I was feeling more confident, gained new habits like reading, I started meditating, and this was being reflected in all aspects around me.&lt;/p&gt;

&lt;p&gt;This plan has incredible flexibility, and that is one of the things that allow us to immediately change the way we planned things according to the way we are feeling the results.&lt;/p&gt;

&lt;p&gt;One of my first goals was to be more proficient at JavaScript without depending on any framework. Still, after getting some feedback from my team lead, I changed it to start reading the react documentation from beginning to end. Inside me, I’m wasn’t doing the right thing, because I was very strict regarding the objective that I had set. As soon I began to deep dive into the documentation, I started to dive deeper and deeper into JavaScript concepts because they were showing up. Since I didn’t know what and how they worked, I had to research them.&lt;/p&gt;

&lt;p&gt;Things were becoming more and more exciting and meaningful to me, and who doesn’t like the feeling when things are starting to make sense.&lt;/p&gt;

&lt;h2&gt;
  
  
  Main struggles
&lt;/h2&gt;

&lt;p&gt;Lack of motivation could be an enemy for the ones who decide to try this plan, but that wasn’t the case here. Time was.&lt;/p&gt;

&lt;p&gt;As time went on and I was increasingly involved, the only thing I had in my mind was, “I wish to have more time to go deeper into this goal/project”. In the meantime, I realised I was solving another issue.&lt;/p&gt;

&lt;p&gt;I always wanted to be involved in side projects and try to have cool ideas to materialise them. It was tough for me to find something that required using new technologies and new stuff to try, but, at the same time, was appealing or useful. The fact that the time I set for each objective was, in my point of view, too short makes me fill my backlog with projects I want to do and technologies I want to learn. Now the problem is getting the time to do everything I want.&lt;/p&gt;

&lt;h2&gt;
  
  
  Rewards
&lt;/h2&gt;

&lt;p&gt;Rewards play a vital role. They are the equivalent of cross out a checklist task, but they go beyond that! The feeling of doing mixed with the sense of a kid receiving a present for good behaviour is what I felt. Week after week exploring the progress happening and, on top of that, a “present” for doing things that makes you feel good.&lt;/p&gt;

&lt;p&gt;The same way it’s essential to be faithful to the plan, it’s vital to enjoy every small victory!&lt;/p&gt;

&lt;h2&gt;
  
  
  Takeaways
&lt;/h2&gt;

&lt;p&gt;I had the opportunity to have help from a PM along with this plan. Every week we sat down intending to talk about difficulties I was feeling, to check my motivation. It was also useful to make some changes if needed and to check the progress done so far.&lt;/p&gt;

&lt;p&gt;More so than getting things done, and I specifically mean finishing projects, of which none are 100% finished, I learned a lot about expectations.&lt;/p&gt;

&lt;p&gt;It’s OK when things don’t go as expected, if we need to change plans, if we can’t reach perfection. What matters is the way we go around difficulties. How flexible and open are we to change, what have we learnt during the way, what could we do differently if we start again, which were the mistakes which lead us to failure.&lt;/p&gt;

&lt;p&gt;Setting higher expectations can be good and bad at the same time. We always want to give the best of us, but are we ready to handle it in case of failure?&lt;/p&gt;

&lt;p&gt;When I started this plan, I was 200% focused on it. When I reached the project week, I picked up a project I started with a group of friends which , by the way, is not finished.&lt;/p&gt;

&lt;p&gt;Before the plan, if you asked me if I considered the project done I would say NO. But… now my answer is different. If I analyse what we did and what we achieved, I would say yes, it’s done. And by done I mean the MVP is working.&lt;/p&gt;

&lt;p&gt;The goal of the project was to build a device capable of recording sound and, according to defined thresholds, it will turn a lamp ON/OFF if the detected noise is above or below the set values&lt;/p&gt;

&lt;p&gt;I think what changed here was the definition of done, and the expectation about what we want to achieve with the project. Questions will always remain:&lt;/p&gt;

&lt;p&gt;Can we do a nice interface to analyse the data?&lt;/p&gt;

&lt;p&gt;Can we find a nice LED lamp to make it more visible?&lt;/p&gt;

&lt;p&gt;Can we create an endpoint to see a graphic with in real time data?&lt;/p&gt;

&lt;p&gt;Of course we can do all these cool things to improve the project. But the things I learned by reaching the stage the project is in right now, the concepts I had to research and know how they work… These were already big steps.&lt;/p&gt;

&lt;p&gt;This plan also helped me overcome part of the imposter syndrome I felt and gave me the confidence to not be “afraid” of doing things I don’t know at all. It was also useful to overcome frustration, to give it the time when I need to “get out to come back fresh and stronger”.&lt;/p&gt;

&lt;p&gt;I also found myself preferring to read documentations to know how certain thing works instead of looking for some tutorial explaining it.&lt;/p&gt;

&lt;p&gt;I increased my production levels, I tried to do more in less time. As you know, time is one of the most precious things we don’t have to waste. By increasing my production levels, I also increase my quality of life. For me, that means doing more in less time to be able to spend quality time with myself, family and friends.&lt;/p&gt;

&lt;p&gt;Despite it not being be advisable to set more than four objectives, next time, I will prefer to set fewer goals so as to be able to go deeper and to build a project with more structure.&lt;/p&gt;

&lt;p&gt;Overall, this was more than successful, with the number of small steps I achieved despite the things I didn’t finish.&lt;/p&gt;

&lt;p&gt;Family support was essential to do all of this, but not less important all my friends at work and fat props to Nikita.&lt;/p&gt;

&lt;p&gt;I found a way to push myself in every area and that means I will continue follow this methodology.&lt;/p&gt;

&lt;p&gt;Thanks for reading this post.&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>career</category>
      <category>beginners</category>
    </item>
    <item>
      <title>From Chemical Engineer to Front-End Developer</title>
      <dc:creator>Ricardo Martins</dc:creator>
      <pubDate>Tue, 26 Nov 2019 13:31:23 +0000</pubDate>
      <link>https://forem.com/fmmricardo/from-chemical-engineer-to-front-end-developer-2lb</link>
      <guid>https://forem.com/fmmricardo/from-chemical-engineer-to-front-end-developer-2lb</guid>
      <description>

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fry9pafulytmecyxe9tit.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fry9pafulytmecyxe9tit.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Photo by Ross Findon on Unsplash&lt;/p&gt;

&lt;p&gt;Three years ago, I started learning to code as a hobby, far from knowing that I would end up becoming a front-end developer.&lt;br&gt;
Last year, I went more in depth, and I dedicated 100% of my time doing a course about front-end and UX design.&lt;/p&gt;




&lt;h2&gt;
  
  
  Where It Began
&lt;/h2&gt;

&lt;p&gt;After nine years and two jobs, one as a chemistry analysis technician, the other as a chemical engineer, I decided to change my career.&lt;br&gt;
Along the way, I worked in and out of Portugal, specifically in Germany, where I had the opportunity to work with top technologies and evolve not only professionally but as a person.&lt;br&gt;
When I decided to change my career, I faced many challenges - quitting a stable job, going for the unknown, learning a new language and culture, starting a family - and all of this happened at the same time.&lt;br&gt;
While working in Germany, even with a challenging job, I felt my duty fulfilled with all this experience. Meanwhile, I was getting into the programming world, first as a hobby, but it awoke an insatiable interest.&lt;br&gt;
I always wanted more, and now I knew that programming was the perfect match.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Transition From Chemistry to the Front End
&lt;/h2&gt;

&lt;p&gt;In my last year as a chemical engineer, I enrolled in some courses related to front-end development and built some small projects for friends. After some time, I joined the Treehouse learning platform and started to take it more seriously. I invested some money and spent much of my free time learning.&lt;br&gt;
I followed what I used to call the normal path for people from other areas of expertise. I started learning HTML, CSS, Basic JavaScript, and jQuery.&lt;br&gt;
Along the way, I found someone called Chris Sean who was giving the same steps that I was doing. Seeing someone from another background who succeeded was inspiring.&lt;br&gt;
I also had the luck to find a mentor to guide me. It was crucial to have guidance from someone inside the industry and, coincidentally, another person without an IT background.&lt;/p&gt;




&lt;h2&gt;
  
  
  My Difficulties While Learning
&lt;/h2&gt;

&lt;p&gt;Hindrances are inevitable, but my biggest obstacles were&lt;br&gt;
focusing on one subject at the time, dealing with frustration, and&lt;br&gt;
finding an exciting project to contribute.&lt;br&gt;
Even working as a front-end developer, I'm still learning, and I will keep learning during my entire career, and that was one of the reasons I decided to change.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Learned From This Journey
&lt;/h2&gt;

&lt;p&gt;Be in the right places!&lt;br&gt;
Networking is the best way to enter this world and meet the right people at the right time at the right place. It didn't take me three months to learn something valuable and get a job; it took almost three years, and I still feel like I'm at the starting point. Learning code can be very frustrating, but even so, never give up. The tech industry has a massive community, so you will always find someone who will help you get over some barriers.&lt;br&gt;
Working surrounded by people who are always available to teach something new makes me learn a lot, be more humble. Willingness to give back to the community is contagious.&lt;br&gt;
Knowledge is the best gift you can receive and offer.&lt;br&gt;
Besides that, I had lucky to find a mentor who guided me throughout the last year. It was essential to have guidance from inside the industry.&lt;/p&gt;

&lt;p&gt;Thank you for reading this.&lt;/p&gt;

</description>
      <category>career</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Vim is not a monster.  </title>
      <dc:creator>Ricardo Martins</dc:creator>
      <pubDate>Mon, 11 Mar 2019 22:17:33 +0000</pubDate>
      <link>https://forem.com/fmmricardo/vim-is-not-a-monster---3p1p</link>
      <guid>https://forem.com/fmmricardo/vim-is-not-a-monster---3p1p</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--khy2hnjb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/3h91eced5w5np0xufz1t.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--khy2hnjb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/3h91eced5w5np0xufz1t.jpeg" alt=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The first time I heard about Vim I didn’t even know what it was. I started to search for that and asking around … and in general people avoid to use that. Some say it is time consuming learning vim, others don’t want to suffer, others say that you can really make your workflow more efficient, but in general, people don’t want to go into it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I Choose Vim
&lt;/h2&gt;

&lt;p&gt;The rumours about the “end” of the Atom made me start thinking that I should start using VS code, but I wanted to try something different. In the company where I work, there's a lot of people using Vim and that made me more curious about learning it.&lt;/p&gt;

&lt;p&gt;Two weeks ago, I had the opportunity to have a vim session with a Vim enthusiast, but before starting he asked me if I really, really wanted to do it. He warned me that I will face a reasonable level of frustration … but that didn’t keep me from doing it.&lt;/p&gt;

&lt;p&gt;Vim was not a completely strange for me. Before this session, I already knew some basics that I learned by using Vimtutor. To practice what I learned on vim tutor and while using Atom, I installed a vim plugin to start using some commands. The experience was surprisingly nice. Without a dramatic change in my workflow I could try it, but soon I saw a problem with that. &lt;/p&gt;

&lt;p&gt;By using a vim plugin, I never got out of my comfort zone, I could always still use the code editor as I used it before. Sometimes I found it confusing to have two ways to use the editor (the atom way or the vim way), and as a matter of laziness, I opted to keep using my normal shortcuts. &lt;/p&gt;

&lt;p&gt;But, if I really wanted to jump into vim the better way to do it is use it and configure it.&lt;/p&gt;

&lt;p&gt;That was the turning point, and since then I’m forcing myself to use vim exclusively. I know that it will slow down my workflow for a while, but I believe that soon I will know enough to use vim to my advantage. &lt;/p&gt;

&lt;h2&gt;
  
  
  Pain points and findings
&lt;/h2&gt;

&lt;p&gt;After I made this decision, and because I’m a frontend developer, I started looking for a vim setup that fulfilled my frontend needs, and I found one. ( &lt;a href="https://github.com/VictorVoid/vim-frontend/"&gt;https://github.com/VictorVoid/vim-frontend/&lt;/a&gt;) &lt;br&gt;
At that time,  I thought this was awesome and I started using it.  &lt;/p&gt;

&lt;p&gt;After that vim session, my friend advised me to uninstall that ready setup, and start with the basic plugins. In fact, I had so many plugins installed that I didn’t really know what their functions were. &lt;br&gt;
I only knew that everything was working.  I also realize that the fewer plugins I have the better, and some commands are personal. Along with time, I will create my own commands if I feel like it.  &lt;/p&gt;

&lt;p&gt;It has been almost a month since I started using vim. I’m still struggling and I probably will for awhile, but I see some improvements already. Besides that, I’m improving my skills on the terminal and I started collecting information to create “my”  .dotfiles and git-scripts. &lt;/p&gt;

&lt;h2&gt;
  
  
  Some tips to learn vim
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QJmFFqBM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://d2mxuefqeaa7sj.cloudfront.net/s_43A6369192A87193A7E31BBA6F55FDF21DCE2E72FEC53DC53FA07B194B3B1157_1552221974059_Group%2B2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QJmFFqBM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://d2mxuefqeaa7sj.cloudfront.net/s_43A6369192A87193A7E31BBA6F55FDF21DCE2E72FEC53DC53FA07B194B3B1157_1552221974059_Group%2B2.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Use post-its to learn the commands, and put them on the bottom of your screen. Remove them once you have these commands in your memory and you don’t need to look at the post-its anymore, Simple!! &lt;br&gt;
In fact, this is useful for other things too, like memorizing git scripts.&lt;/p&gt;

&lt;p&gt;I am just starting to learn vim, and this is just my “first few weeks” of learnings. &lt;br&gt;
Although I am always being dissuaded from using vim, I will continue this saga, soon I know it will be worth it.&lt;br&gt;
Thank you for reading.&lt;/p&gt;

&lt;p&gt;Check vim tutorials and screencasts &lt;br&gt;
→ I  found a cool tutorial from Thoughtbot ( &lt;a href="https://www.thoughtbot.com/upcase"&gt;https://www.thoughtbot.com/upcase&lt;/a&gt; ) &lt;br&gt;
→ Youtube channel with nice screencasts ( &lt;a href="https://www.youtube.com/channel/UCXPHFM88IlFn68OmLwtPmZA"&gt;https://www.youtube.com/channel/UCXPHFM88IlFn68OmLwtPmZA&lt;/a&gt;)&lt;/p&gt;

</description>
      <category>frontend</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>discuss</category>
    </item>
    <item>
      <title>From UX to Development</title>
      <dc:creator>Ricardo Martins</dc:creator>
      <pubDate>Fri, 10 Aug 2018 21:03:31 +0000</pubDate>
      <link>https://forem.com/fmmricardo/challenge-week-case-study-4k1p</link>
      <guid>https://forem.com/fmmricardo/challenge-week-case-study-4k1p</guid>
      <description>&lt;h1&gt;
  
  
  Challenge Week Case study
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7yv9oajpti4ylexpcgje.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7yv9oajpti4ylexpcgje.jpg" alt="Working"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In today’s tech space, having a healthy, well-maintained pattern library is considered a central piece of the design and development process, guiding designers and developers to better and more consistent results.&lt;br&gt;
This is why, on a recent project, we started working on a pattern library.&lt;/p&gt;

&lt;p&gt;This project started during the masterclass with Javier ‘Simón’ Cuello at The New Digital School. Javier is a UX designer specializing in mobile, currently living in Barcelona, who has worked on app design projects for companies like Zara, Telefónica, and Yahoo and is also the co-author of Designing Mobile Apps.&lt;/p&gt;

&lt;h1&gt;
  
  
  The challenge
&lt;/h1&gt;

&lt;p&gt;As students at a school as alternative as The New Digital School (TNDS), it’s important for us to track our progress and set goals to define each one’s right path. For that purpose, we have Polygon, a platform for planning and assessing of our learning process at the school.&lt;br&gt;
Me and Imran Rahim decided to work on Polygon because it didn’t have a mobile version at the time. We also wanted to make some improvements on the way it worked.&lt;br&gt;
We also felt it was important to work on a real problem while developing our design and development skills. Working on this project could have an immediate impact for all students.&lt;/p&gt;

&lt;h1&gt;
  
  
  Process
&lt;/h1&gt;

&lt;p&gt;Between the masterclass and the challenge week, we came across more dilemmas. Already considering starting a design system, we needed to decide how we would split tasks so that it would be easy to work remotely. Globally we identified three distinct stages:&lt;/p&gt;

&lt;p&gt;Design the mobile app version (Android) for the Polygon (part of the initial masterclass challenge);&lt;br&gt;
Flow changes to have a better user experience;&lt;br&gt;
Readapt the mobile app design that emerged from the masterclass to the current web version and all its constraints;&lt;br&gt;
Start a Pattern Library;&lt;/p&gt;

&lt;p&gt;We sketched our app in paper wireframes and with the help of Marvel app we were able to test the prototype in order to find potential challenges.&lt;/p&gt;

&lt;p&gt;That allowed us to start increasing fidelity of wireframes based on Material design. Material design was what we use a starting point. With the goal of keeping consistency, we also learned that is very important for sticking with pattern interactions that users are used to. This avoids confusion and keeps the same user experience between operating systems.&lt;/p&gt;

&lt;p&gt;We went through some versions until reach a better user experience.&lt;/p&gt;

&lt;p&gt;With Polygon actually being a web platform, we had to start looking at it as a web app and adjust the design accordingly. The good thing about Material design is the fact that it’s universal when it comes to the environment of the app and can also be used for the web.&lt;/p&gt;

&lt;p&gt;As TNDS grows and creates more web projects, it needs a place where it’s visual patterns are documented and accessible by designers and developers (including students). With this in mind, we decided it was worth it to explore the idea of creating a Pattern Library.&lt;/p&gt;

&lt;h1&gt;
  
  
  The Pattern Library
&lt;/h1&gt;

&lt;p&gt;A pattern library consists of a collection of reusable Interface elements organized in a way that allows developers to see their visual look, behavior, and code.&lt;/p&gt;

&lt;p&gt;For TNDS, this collection of elements has the purpose of keep consistency allowing the creation of elements that appear multiple times making it easier to reuse them in future projects.&lt;/p&gt;

&lt;p&gt;We started by identifying some patterns such as Typography, buttons, cards, navbar, forms, and labels.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F55wfk7fgf6x24vfpptp5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F55wfk7fgf6x24vfpptp5.png" alt="Buttons"&gt;&lt;/a&gt;&lt;br&gt;
Fig 1. Buttons from interface inventory&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fnw0gplfkdocsd9p2ec0x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fnw0gplfkdocsd9p2ec0x.png" alt="Cards"&gt;&lt;/a&gt;&lt;br&gt;
Fig 2. UI card components collected from the website and mobile app prototype&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F9g8lcp6julnihplmago9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F9g8lcp6julnihplmago9.png" alt="UI Components"&gt;&lt;/a&gt;&lt;br&gt;
Fig 3.UI card components collected from the website and mobile app prototype&lt;/p&gt;

&lt;p&gt;I knew there were tools to help you avoid building a pattern library from scratch and I found a few like Atomic and Astrum and proceeded to test both. Astrum was the chosen one because it’s lightweight, easy to include in projects and because it offers a command-line to manage components and groups. Astrum is also responsive and I loved how easy it was to customize the theme.&lt;br&gt;
Fig 4. Pattern library overview&lt;/p&gt;

&lt;p&gt;With style sheets getting larger and harder to maintain, CSS preprocessors like Sass help by keeping style sheets concise and allowing to modularize the code while offering a set of features not yet available in regular CSS.&lt;/p&gt;

&lt;p&gt;Learning a new tool takes time and finding the time to do so is sometimes very hard. This project was an opportunity for me to practice my Sass skills.&lt;br&gt;
While working with Astrum I realized the number of concepts I would be able to learn and try. By doing that I covered methodologies like Atomic Design, Block Element Modifier (BEM) and, implemented preprocessors like Sass and technologies like CSS grid.&lt;/p&gt;

&lt;h1&gt;
  
  
  Takeaways
&lt;/h1&gt;

&lt;h3&gt;
  
  
  Plan before doing
&lt;/h3&gt;

&lt;p&gt;We spent a considerable amount of time planning ahead. This helped to avoid frustration at the end of the project.&lt;/p&gt;

&lt;p&gt;Another good thing about having planned enough before starting was that I had the chance to develop other skills like decision making, collaboration, communication.&lt;/p&gt;

&lt;h3&gt;
  
  
  Communication and Collaboration are essential
&lt;/h3&gt;

&lt;p&gt;The best way to collaborate as a team is to always involve each other in the tasks and testing/adjusting things as we go.&lt;/p&gt;

&lt;p&gt;We knew upfront that we set a lot of expectations for ONE week and finding the right tools and methodologies was key for efficiency, collaboration, and motivation. So to make everything work smoothly, communication between us was essential, particularly considering we were working remotely.&lt;/p&gt;

&lt;h3&gt;
  
  
  Atomic Design, complex but powerful
&lt;/h3&gt;

&lt;p&gt;I understood the value and the potential of having a design system and a pattern library. Above all, I learned a lot not only by being involved with these two concepts but especially with technologies and methodologies we used during this process.&lt;/p&gt;

&lt;h3&gt;
  
  
  Full experience -&amp;gt; UX, UI, Development
&lt;/h3&gt;

&lt;p&gt;We started this project in the context of a UI Masterclass but we ended up doing much more.&lt;/p&gt;

&lt;p&gt;I developed my UX Design skills by researching and trying to empathize with users.&lt;br&gt;
User testing was very important to refine the app, validate our assumptions and improve the user flow. Marvel App was a valuable tool that allowed us to test our low fidelity prototypes.&lt;br&gt;
With Javier I learned about the importance of designing with interface components in mind, and how Figma and Sketch can be powerful allies in different scenarios.&lt;br&gt;
Finally, the Pattern Library allowed me to evolve as a Frontend developer while allowing me to review and apply important methodologies and technologies, such as BEM, Sass, CSS Grid.&lt;/p&gt;

&lt;h3&gt;
  
  
  Final message
&lt;/h3&gt;

&lt;p&gt;This is an ongoing project so you are more than welcome to share your experience. Drop me a comment with some suggestions and improvements I should consider.👋&lt;br&gt;
Resources&lt;/p&gt;

&lt;p&gt;&lt;a href="http://getbem.com/" rel="noopener noreferrer"&gt;BEM&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="http://bradfrost.com/blog/post/atomic-web-design/" rel="noopener noreferrer"&gt;Atomic Design&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.smashingmagazine.com/taking-pattern-libraries-next-level/" rel="noopener noreferrer"&gt;Smashing Magazine “Taking The Pattern Library To The Next Level“ by Vitaly Friedman&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://twitter.com/imran_rahim_pt" rel="noopener noreferrer"&gt;Imran Rahim Profile&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>career</category>
      <category>ux</category>
      <category>design</category>
    </item>
    <item>
      <title>Career changing </title>
      <dc:creator>Ricardo Martins</dc:creator>
      <pubDate>Sun, 05 Aug 2018 09:21:24 +0000</pubDate>
      <link>https://forem.com/fmmricardo/career-changing--4go3</link>
      <guid>https://forem.com/fmmricardo/career-changing--4go3</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fyytak8lce0sfuh7xp6nx.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fyytak8lce0sfuh7xp6nx.jpg" alt="Where am I"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hi Folks, I'm 33 years old and almost 2 years have passed since I started getting into this game. I Started this for curiosity but suddenly this became more serious, so serious than I'm changing my career right now. &lt;br&gt;
I had almost 10 years on chemical engineer field and worked in Germany before. Now that I came to my home country things are different and I felt the necessity to change my professional life.&lt;br&gt;
Frontend world is getting crazy with so many things to learn. It's constantly changing and for folks like me, this is just madness. &lt;br&gt;
In January I joined in a new concept of Digital school in Porto ( The New Digital School) where we learn a lot of Ux/Ui than development but its still good for the growth as a frontend development in my perspective. &lt;br&gt;
Right now, we are starting approaching the industry in order to get out the first job in the tech world, and I'm super anxious, question everything, thinking if I'm capable but at the same time I feel that I need to get in and validate all I have learned. &lt;br&gt;
I would like to know how was your experience and how you dealt with this, especially folks that have passed through all this career change process. &lt;/p&gt;

</description>
      <category>discuss</category>
      <category>career</category>
    </item>
    <item>
      <title>My First Post </title>
      <dc:creator>Ricardo Martins</dc:creator>
      <pubDate>Tue, 01 May 2018 00:52:49 +0000</pubDate>
      <link>https://forem.com/fmmricardo/my-first-post--4njp</link>
      <guid>https://forem.com/fmmricardo/my-first-post--4njp</guid>
      <description>&lt;p&gt;Hi folks, my name is Ricardo, I'm kinda new to this world. In the last year and a half i'm trying a career change, from Chemical engineer to Frontend developer. First was like a curiosity but then but then became more serious and here am I. &lt;/p&gt;

&lt;p&gt;Thanks for maintaining this website and for sharing your knowdlege.&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
