DEV Community: Florence O.

Nevertheless, Florence Continued to Thrive in 2022

Florence O. — Mon, 07 Mar 2022 17:25:28 +0000

Here we go again, happy IWD ladies ✨

It’s another #Shecoded International Women’s day celebration, whewww! I remember I wrote my first article Nevertheless, Florence Coded Because Nothing Can Stop Her! for this cause a year ago today and looking back at where I was this time last year and now, I can only say go girllllll!

A Lil Backstory

Last year was really amazing, asides being a web dev, I enjoyed mastering how to use low-code/no-code tools, I explored product design and even created mock-ups and prototype that were well received! Whoop… Towards the end of last year, I decided to break into product management, got into a bootcamp and learning has been so fun.

My biggest technical goals are…

Build my portfolio
Definitely be more active in women tech communities I am a part of
Do more public speaking
Attend more tech conferences and connect with like-minded people
Contribute to open source
Land a technical PM role

My biggest technical achievements are…

So far, I look back and smile. I like to think every projects I am/was a part of are really amazing achievements because I get to bring ‘my talent’ into the process and watch it blossom. Here are a few:

I led a team in my PM bootcamp and we got a perfect score on our project!! Yessss, 100%
I spoke at a ‘Live Website Audit’ event a week ago. It was so surreal, seeing people learn from me and vice versa. I had attendees reach out to me after the event to connect with me. Feedbacks were amazing too
Oh yes, my first article How To Make Wine Glasses With Pure HTML & CSS on here got me a top author badge. It will always be on my list
My PM certifications
I really hacked low-code tools and have gone on to create amazing things with them.

I pledge to break the bias in tech by…

Being myself!! I know what I bring to teams.
Shutting down biases. Oh yes, I’m a woman in tech, we exist and we are awesome.
Let other women know they’re strong as well and can achieve whatever they want.

Throughout my career (as a software developer, in tech, etc), I have overcome…

Well, discrimination and biases. The biases really. I had an issue one time on a project and had to ask for help in this community I was a part of. I got the help I needed and was able to resolve the bug, so I thanked the person who had helped me and their reply was ‘You’re welcome bro’. I dm’d them privately to clear that and their response again was ‘omg you’re a girl??? that’s really nice’

This is so tiring, especially having to work twice as hard trying to prove your worth and yourself. Please allies, stop the biases and then we won’t have to break anything.

Advocating for myself looks like…

Selling myself. I am not shy to let people know what I do
I can’t be shut down, I speak up on things I believe in.
Self-affirmations
Me-time

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

Letting them know they got this!

I’m excited about…

This year looks really exciting, with a new found love in product management, I can’t wait to work in an innovative team and bring amazing and impacting products to life.

Finally

Dear women, you’re amazing, you’re awesome, you guys are the best!! Keep thriving, never let anyone dim your light and keep maintaining beauty while at it 🥂

Happy International Women’s Day 💜

Ps: cover image illustration from undraw.co. Gif from giphy.com

Florence’s Year in Review

Florence O. — Fri, 31 Dec 2021 18:07:05 +0000

It’s the last day of the year and I look back at the multiple ups and downs, opportunities gained and opportunities lost, the lessons learned and everyone I met that helped shaped my journey, a whole lot happened this year that shaped me as a person and as a woman in tech. Everything just makes me thrilled and excited for next year!

Okayyy, let’s take it back to the beginning of 2021 and just kind of run through the wins, lessons, opportunities and fav highlights! 🤩

First Quarter

This year began with so many uncertainties, I thought I knew what I wanted to get out of the year, I had planned to take on new programming languages, finish my program in school with an amazing grade, land an amazing job and connect with people far and wide. The school year started in Jan and with the lockdown, I had to take classes along with a training program in accordance with my course of study. Juggling school, the training program and freelancing as a web developer was really a lot to juggle but I was able to make it work until I ended the training program in March.

By February, my contract with a firm had ended as a web developer and I went back fully into freelancing and got most of my clients from recommendations! I explored technical writing, wrote my first article - https://dev.to/theflorz/how-to-make-wine-glasses-with-pure-html-css-328g, published it on dev.to and it was a hit!! The article got me the top 7 badge 🥳. That's not all, my second article - https://dev.to/theflorz/nevertheless-florence-coded-because-nothing-can-stop-her-4m81 was a hit also and yes I got a shecoded badge for participating in this year's shecoded #IWD 🥳. I also got to write product documentations for clients.

I discovered badminton and loved every bit of it 🏸

Second Quarter

Ah yes, more school, more learning and more freelancing. At this point, getting a job became scary because I felt like I wasn't good enough. What kind of brought me some sense of fulfilment was a project I got to work on with data analysts, we worked with PowerBI, MS excel to display interactive graphs, charts etc. I was able to work on more projects with the firm as a freelancer.

I worked on projects that strengthened my frontend skills and WordPress skills, I was starting to implement dynamic websites and UI/UX designs using WP from scratch, who could have thought ? 😅

More badminton.

Third Quarter

Going into August, I started exploring and reading about Product/Project Management and oh did I fall in love with it. I had started talking to a few people about transitioning to Product Management and asking what that would look like, a friend and mentor Geektutor gave me a few pointers and it just made me love every aspect of PM more.

I started taking a course on project management on Alison, I wasn't even done with the course before I went around telling people to recommend me for any project management roles. I don't know where that confidence came from myself but learning and doing the tasks just made me feel like yes, this is my thing, yes this is me, I love leading teams, I love overseeing project, yes! I can do this, this is all me! And oh did I land my first gig as a Project Manager(I am forever grateful to Caleb for trusting me)!

This came with a few doubts and confusions, it was either product or project management, thankfully I had amazing people in my corner and I eventually decided to focus on product management. Oh the project manager role up there ? It got bumped up to product manager.

Got a project management certification and finished my program with a first class!! Whoop Whoop! 🥳

Fourth Quarter - The big wins!

I stepped into the last quarter of the year as a product manager working with an amazing team. Thankfully, I was able to put what I had learned to the test, I had to learn more on my own and I also learnt a lot working on the project. And I paid more attention to my body, started working out and eating healthy 🤩💪🏾.

I also got a role as a web developer with Dira Labs and yes, I still freelanced lol. I landed my second PM role working as the PM on an in-house project.

My biggest win of the year really came at the end when I applied and got into the Women Techsters bootcamp organized by Tech4Dev an initiative aimed at empowering and introducing women to tech, I applied for the Product Management track and got in! The bootcamp was for 2 weeks, it was really fast paced with hands-on tasks and assignments that helps you master skills. For my track, I was appointed the class captain and as the captain, I created a documentation accessible to my other bootsters that explained how to submit assignments, how to access resources and materials, how to access class recordings, and the documentation also featured useful links.

The bootcamp introduced me to aspects of product management such as product roadmap, software development lifecycle, SDLC models, Agile model, Scrum framework, User research, MVP specification, user flow and persona, product/feature PRD, etc.

At the end of the bootcamp, we were divided into teams to come up with a product based on any of the United Nations SDGS. For my team, our product FeedAll a food donation app addressed the SDGS goal 2 - Zero hunger and yes, I was team lead haha. As team lead, I created a product brief, assigned tasks to my team members and also lead stand-ups to check in on tasks progress. As a team member, I was tasked with creating user flow, user persona, product mock-up/protype, MVP specs and compiling my team's PPTX.

I will my say PM roles gave me a head start facing these tasks, I was able to seamlessly work with some PM tools such as Miro to create user flow. Having worked with product designers, I was able to find my way around figma to create a high fidelity mock-up and a prototype for the product.

A picture of the Mock-up I made

I was paired with amazing ladies, Funmi, Bolu, Deborah, Audrey, Fredah, Grace, Bukunmi, Abisola and boy did they deliver on their respective tasks. My team's presentation was met with amazing feedbacks because of our collective efforts and awesome work rate. This article wouldn't be complete without not giving a shoutout to our amazing facilitator Theodora. I have made life long friends and mentor coming out of this bootcamp 🥺❤️.

To wrap up the year, I got a certification in product management, I am still thriving as a web developer and also I got into a product management study group that starts Jan 6th, 2022. 🤩

Wrap Up - What next ?

Writing this article, I chose to focus more on my wins rather than my losses. Trust me when I say I had my fair share of imposter syndrome, depression, brokeness and self hate, I know what they took away from me and how I had to pick myself back up which is my takeaway of the year - Never give up! Keep going. You'll definitely find your niche and it'll find you too and you'll love each other genuinely. So thank you 2021 for the lessons, the opportunities, the win, the losses and the amazing people in my corner - Elizabeth, Hassan, Daniel, Oluwasayo, Sodiq and my Dira Labs family, Caleb, Yemisi, Aishah, Oyindamola, Rashidat, Janet, Deborah and Ebun, I love you guys so much ❤️❤️❤️. To an amazing 2022! 🥂

Hey Student Techies! How do you cope with school and work ?

Florence O. — Sat, 10 Apr 2021 22:53:00 +0000

When I decided to explore technical writing, I remember saying to a friend that I would love to be consistent with it and try to publish an article once a week, well that consistency ended in week two lool. So I usually drop an article every Sunday and for the third week, I had written out my topic since Saturday(a day before), I knew what I wanted to write about, I did my research and was still on it when I got overwhelmed with school work.

At that time, I was running a 6 weeks compulsory training program, it was 3 units course so you know I had to give it my all. Fast forward to Sunday(March 14th), I totally forgot about my article and didn’t remember until few days later lmao, funny story ? I picked it up on Wednesday and forgot to finish it again 😂. To be honest, at some point I got scared of writing an article that wouldn’t bang like the first two(My wine glass article and My SheCoded IWD article) but that isn’t even the case here anymore, I still very much want to keep writing technical articles.

Right now, I really wonder how other students like me cope with school, work, side projects, and personal lives. It can seem like a lot to handle and overwhelming sometimes(actually all the time to be fair) because you worry about a lot of things haha. I mean, I try to deliver the best on projects while also keeping school in mind so that’s a lot to worry about.

I decided to pick it up this night(it’s 11:52 in my time zone) but with a different topic, I just want to know how students in tech juggle school and work. A new week is starting tomorrow, I have series of tests coming up and about 3 pending projects to complete before the end of the month. What are your coping mechanisms? How do you set up a structure ? How do you stick to the structure ? How do you ensure neither suffers? Is it supposed to be this hard ?! Send help please ❤️

Conclusion

Ps: I don’t joke with taking breaks, I know the body can only take a lot so I rest when I’m tired from doing both. The issue now is how do I stop feeling guilty from take a break to watch Netflix ? 😂

Ah yes, that article I haven’t finished in weeks is still in the drafts. I’ll definitely finish it up and share with you guys soon!

illustration from

Nevertheless, Florence Coded Because Nothing Can Stop Her!

Florence O. — Sun, 07 Mar 2021 15:10:06 +0000

Journey

The funny thing about me being in tech today was the fact that I actually wanted it for a friend and ended up going into it myself 😂. It was literally a ‘um I don’t have anything doing right now, let me just try this. How hard can it be uh?’ moment.

I applied and got into a state coding program (CodeLagos) at the time in 2018 and my journey into tech started. Funny thing, first day of class, I got there very early and had to wait for my tutor and other classmates to arrive. I sat in a library around there and picked up a book to read to pass time, I became engrossed in the novel and when I checked the time, I was 20mins late for my class so I had to rush down to the class 🤦🏾‍♀️😂

Stay with me guys, still on the first day of my journey. They had an intro session which I missed and the tutor was already taking them on headings in HTML - you can imagine the confusion I was in Lmaoo. I was lost!!! I pleaded with someone beside me to put me through as the class was moving fast because the program was only 6 weeks for a web development course and we had a lot to cover.

Fast forward to week 3, I was getting the hang of it and decided to embed my tweets in an assignment - a basic fast food website (ps: we weren’t asked to embed 🌚, I just wanted to do something that fascinated me) so after a series of googling, it worked and it felt sooo good that I had to share with my tutor that very night, he was pleased and shared it with the rest of the class.

By the end of the program, I had already gained a lot, made new friends and even a life long mentor(my tutor). I thoroughly enjoyed the experience, I enjoyed writing lines of code and seeing it become something so beautiful. After the program, I got an internship and started learning how to use WordPress to make websites and got on few projects during that.

I then took a year long break from Tech in 2019 to focus on other things while also battling imposter syndrome so I would like to think I started coding fully in 2020. I have gone on to be on multiple projects and even have projects of my own 🤩😊

My most recent achievement was…

So a week ago today, I wrote my first technical article - How To Make Wine Glasses With HTML & CSS and the turnout has been nothing but amazingggg!!!

I almost screamed a day after when I checked my dashboard and saw over 6k views, I had to share the news with my friends and asked them if it was normal to have that much view lool. The crazy thing was the views kept increasing day by day and today it has over 13.3k views in a week 🥳!!!

Biggest one - the Google developer student club(DSC) at Masinde Muliro Univeristy in Kakamega, Kenya replicated the wine glass at a web session. The moderator gave me a shout out me on twitter, it was so surreal that I almost cried!!

I am really grateful for the reactions, engagements and feedbacks from everyone. Big shout out to my Peths Digital family and my best friend for encouraging and supporting me, love you guysss ❤️!

Advocating for myself looks like…

Self-affirmations
Taking breaks
Not selling myself short - I love letting people know what I do
Knowing I have a lot to learn and taking it one step at a time

My biggest goal is…

To reach a point in my career where I can positively impact people's lives and use my platform to help women, children and the less privileged. I know how it is to be torn apart by men in the industry, I wouldn't want anyone to go through that and I am making it part of my mission to help women going into tech by providing support and letting them know that yes! They can make it as a woman in Tech.

My advice for allies to support underrepresented folks who code is...

Give us the chance to do something great, we are also a working member of the society.
Listen to us
Lastly, you can't be sexist or openly support sexism by not calling out sexists and call yourself an ally!!

Sidebar

As a woman, you're powerful, you're beautiful, you're strong and you're amazing. Keep your head high, pace yourself, keep being yourself, and let the world feel your impact. You rock ❤️!!!

Illustration from undraw.co

How To Make Wine Glasses With Pure HTML & CSS

Florence O. — Sun, 28 Feb 2021 17:27:49 +0000

We see a lot of developers these days replicating real life objects using coding languages such and HTML, CSS and even JavaScript to bring more life and functionalities into the object. It's fascinating how much coding can do outside the normal web dev, app dev, AI etc. I mean how awesome is that?!

In this article, I'll be showing you how to make wine glasses - not one but three different types using pure HTML & CSS. Before we get into it, you'll be needing this amazing tool - Fancy Border Radius Generator. Now who's ready for some CSS art?!

Research

I started with reading on the different types of wine glasses we have. After a minor research, I decided to do a mockup of sparkling wine glass, burgundy wine glass, & sweet wine glass.

Setting up base

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="wg.css">
    <title>Wine glass</title>
</head>
<body>
    <div class="container">
        <!--First wine glass -->
        <div class="body">
            <div class="wine"></div>
        </div>
        <div class="middle"></div>
        <div class="base"></div>
    </div>
</body>
</html>

Writing the HTML - I decided to divide parts of my wine glass into:

Body - upper part that contains the wine
Middle - the handle of the wine glass
Base - the bottom part of the wine glasses
And the wine itself

Replicate the same for Wine glass 2 & 3

        <!--Second wine glass -->
        <div class="container2">
        <div class="body2">
            <div class="wine2"></div>
        </div>
        <div class="middle2"></div>
        <div class="base2"></div>
        </div>
        <!--Third wine glass -->
        <div class="container3">
        <div class="body3">
            <div class="wine3"></div>
        </div>
        <div class="middle3"></div>
        <div class="base3"></div>
        </div>

Diving into CSS

Body

body{
    display: flex;
  justify-content: center;
  padding-top: 50px;
}
.container{
    float: left
}

.body{
    background: rgba(180, 180, 180, 0.3);
    width: 200px;
    height: 300px;
    border-radius: 53% 47% 49% 51% / 0% 0% 100% 100%;
    border: 1px solid transparent;
    filter: blur(0px);
    box-shadow: inset 0 1px 0px #444444, inset 0 2px 0 white,
        inset 0 -6px 3px #444444;
}

I used flex and justify-content to center the glasses and gave the body tag a padding-top of 50px. Next, for the container and body of the first wine glass, I added background to give it a glass-like color, width & height to specify the size of the wine glass, border-radius to specify the shape/type of wine glass, border to add thickness to the glass and finally filter & box-shadow to give it a blur effect and that glass-like look.

Ps: I used Fancy Border Radius Generator to get the border-radius.

Wine

.wine{
    background: linear-gradient(to bottom, transparent,
        transparent, transparent, #b86b77, #b86b77, #b86b77);
    width: 200px;
    height: 300px;
    border-radius: 53% 47% 49% 51% / 0% 0% 100% 100%;
}

Give it an effect of a wine inside the glass by adding a background color to .wine, I decided to add transparent colors to give it a half-full effect (I mean who pours their wine to the brink of the glass? haha)
. Maintain the same values of width, height & border-radius used in .body so they fit properly into each other.

Middle

.middle{
    background: rgba(180, 180, 180, 0.3);
    width: 20px;
    height: 250px;
    border-radius: 0 0 5px 5px;
    border: 1px solid transparent;
    filter: blur(0px);
    box-shadow: inset 0 1px 0px #444444, inset 0 2px 0 white, 
        inset 0 -6px 3px #444444;
    position: relative;
    left: 90px;
    bottom: 5px;
}

Next, specify the width & height of the handle of the wine glass. Use the same values of background, border, filter: blur() & box-shadow given to .body in order to maintain uniformity. Finally, add position and use left & bottom to place the handle underneath the body of the wine glass where it should be.

Base

.base{
    background: rgba(180, 180, 180, 0.3);
    width: 130px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #777;
    filter: blur(0px);
    filter: drop-shadow(8px 8px 8px black);
    position: relative;
    left: 30px;
    bottom: 10px;
}

For the final part of the wine glass, specify the width & height of the base of the wine glass, add a border. Use the same values of background, filter: blur() given to .body in order to maintain uniformity. You then add another filter: drop-shadow() to give it a shadow effect. Finally, add position and use left & top to place the base underneath the handle of the wine glass just at the center.

Tips

You can make more different types of wine glasses by using these line of codes, the only thing you have to do to make them different is to specify the size and shape of each glasses by changing the width, height and border-radius of the body of the glass, the width & height of the handle of the glass and the width & height of the base of the glass.

Tadaaa! There you have it. Can you identify the types of wine glass ? Drop a comment in the comment section.

CodePen link to live code - https://codepen.io/TheFlorz/pen/WNrLmME

Conclusion

CSS art is really a fun and challenging task, it helps us to master our skills as devs and opens us to more amazing things. Will you give it a try ? I think you should, you'll love it!