Just keep coding.. just keep coding..

Marizoo — Tue, 08 Mar 2022 18:00:54 +0000

I am motivated to share my learning journey, to support this initiative.
Here goes something... (hope this helps).

Right before Covid started (around 9th November 2019) I joined this start-up weekend workshop for Women in Bali - Indonesia.

It was a great workshop where they'd teach you how to start a "start-up".

Some of the topics and activities includes pitching start-up ideas, then we'd work as a group to figure out the business aspect of our start up using the "Business Model Canvas" chart.

We had to do market & user research, then made samples of the UI/UX for the app. And finally, we had to pitch this start-up business to the "investors" : a panel of judges, who were successful women involved in business / start-up mainly in Bali. These amazing women had also kindly mentored us through out the process. What an uplifting experience.

For me, it was a great introduction into the start-up world, I have learned so much from it. Shout out to the organizers for such a great workshop, and for focusing on supporting women as well.
To my surprise, my group won the 1st prize. I was quite excited for the souvenirs we'd won.. (That usb charger.. i liked it!)

Anyways, my curiosity steered more towards the development of the UI/UX. So that was the rabbit hole that I chose.

During covid lockdown in mid 2021, I then officially started my web development "self-learning journey". (Though I much prefer the term "community-taught")

Fast forward to today, I have tracked my learning hours (which is highly satisfying, I highly recommend you do this) to a total of 1,133 hours.

Due to my "ridiculous" chase of perfection, I haven't finished my portfolio. Instead, I just kept on doing projects. Part of the reason is also my fear of rejection and imposter syndrome. Which I found out is totally normal for a noob.

One of my biggest mistake was to let myself get stuck on "tutorial hell" and to not start uploading my projects on github much earlier. But HEY... I learned from it. Moving on...

At this stage, I have learned enough to know that I will never know enough of anything. So I'll keep on coding, I'll keep on learning.

And now I'll answer some of the questions for this post.

My biggest technical goals are…

To grasp more of React framework + Vanilla Java script.

My biggest technical achievements are…

This far, is that I can make a simple React App.

I pledge to break the bias in tech by…

Motivating more women, friends of all nations & the LGBTQ's community to feel included and loved, where ever I will be in the future.

Throughout my learning, I have overcome…

Self-doubt.

I pledge to support women, non-binary folks, and other minorities in tech by…

Being kind and supportive.

I’m excited about…

A more diverse future, where everyone is supporting each other, kind to one another and to Mother Earth. Peace and love to all being <3 Cheers!

A simple global styling method with styled component.

Marizoo — Tue, 15 Feb 2022 09:46:38 +0000

Using Styled-components, I have tried several ways to apply global styling & media queries to my React App. I'm here to share my preferred method this far (until I find another better way, of course!).

(For this article, I am using React version 17.0.2, and styled component version 5.3.3) Here it is, in step by step format:

Step 01.

Install styled components

yarn add styled-components

//or

npm install styled-components

Step 02.

Inside the src folder: create a file, and call it globalStyle.js
Here is a screenshot of my folder structure

Inside globalStyle.js, add these codes:

import { css } from "styled-components";

// Create global color
export const ctaColor = () => {
  return css`
        palevioletred
    `;
};

// Create media queries
export const mobile = (props) => {
  return css`
    @media (min-width: 576px) {
      ${props}
    }
  `;
};

- as you can see, we are simply creating functions that return CSS for us

Step 03.

To use these "CSS-functions" in our components: just import it, then apply it to our styling.
It works just like the usual JavaScript functions.
Refer to the codes below for some examples:

import styled from "styled-components";
import { mobile, ctaColor } from "../../globalStyle";


const Navbar = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  background: ${ctaColor};
  ${mobile({ flexDirection: "row" })}`

Voila!

That is it, short and simple. I hope it is useful for your projects.

Cheers,

Your friend,
Marizoo

Forem: Marizoo