This month I wanted to learn how to use Material UI with React Js. I looked at the documentation it was clear and the examples are well illustrated. Plus using Material UI is easier to use when you don't have time to code up the styles from scratch. But the only thing I need to improve is learning how to fully customize the default theme.
- If you are making a website with svg or png images, ensure all can be exported.
- It's important for developers to learn how to use and move Figma file or Adobe XD files. When a designer sends you a svg file instead of a .fig file you can still drag and drop the svg file in Figma to get the images you want. As long as the svg file has bounding box checked and the website isn't complex you will use it well.
- Learn how to use design collaboration tools like Anima or Zeplin. That way you will code faster since you can see the exact padding or margin if a design system wasn't handed to you. Especially when the website you are working has less content with no complex styling.
- Be patient with others who are beginners when it comes to coding the front end. At times, you see some who use multiple flexbox instead of a grid system that will also make the section responsive. (
grid-template-column: repeat(auto-fit, minmax(x,y))my best friend 😎). When anyone asks you a question as a maintainer or a fellow contributor no matter how basic you think it is, try to help them out. We were all beginners one time, share some articles on the topic they can follow or stackoverflow solutions.
- Create well explained issues on your project. If you want a specific task to be accomplished quickly, use Issue templates that will make it easier. Use pictures if possible to illustrated what is the expected result. In the front end, visual results are important to others to see the end result. Instead of explaining in long paragraphs what you what a feature section to look like, how about you design the website and post the files and direct others on how to find them.
- Learn code reviewing. Still new to this, but so far not so bad. Using Vercel helped in terms of reviewing the Pull request changes. You can see how the front end looks before you merge it.
Plus you can use the live link to give reviews to the contributors on where to make some changes. Maybe add some
margin-left: 2remto the hero image etc.
By participating as a maintainer and a contributor, I learned a lot and I know I will continue learning. As a newbie remember making mistakes is good, that's how you learn and grow.