DEV Community: Victoria Lo

My New Year Hackathon Project: Image Classification Pokédex

Victoria Lo — Mon, 04 Jan 2021 09:55:19 +0000

Hello everyone! Today, I want to share what I built over the weekend for the New Year New Hack hackathon! It was an amazing experience and a fun way to start the new year.

My Project

It is a web app that is able to identify the original 151 species of Pokémon using a custom image classification model. The user will first supply an image, it can be a 2D image or from a camera. Then, click on 'Run Pokédex Analysis'. The model will return its prediction and then the app will fetch the data of that predicted Pokémon. The data is displayed onto the Pokédex Analysis Report page and the app will read aloud the Pokémon's name, type and description.

Here's a demo clip of the process (no audio because it is a GIF):

Motivation

On the web, a 'Pokédex' is just a website where users can search and view any Pokémon's data. But in my childhood, a Pokédex refers to the cool electronic device that can recognize the Pokémon it is pointing to and returns that Pokémon information in a robotic voice. And so, the motivation behind this project was to make my childhood dream into reality.

Here's how a "real" Pokédex works (no audio, it's a GIF):

How I Built It

1. Gathering Images

First, I had to build a custom image classification model, one that knows every 151 species. So I got down to business and start collecting Pokémon images.

I gathered various types of pictures, not just simple 2D images like this:

The model should recognize this is Pikachu.

But also ones that are from movies, games, cards, goods, etc.

The model should also recognize this is Pikachu.

In total, I had over 10,000 images of Pokémon for the 151 species that the model will learn. 10,216 to be exact.

2. AutoML Vision

Then, I used Google Cloud AutoML VIsion API to label each image to their appropriate Pokémon name.

After that, I started training the model. Due to the time limitations for this 48-hour hackathon, I could only train twice but both times achieve identical precision results, probably because I still use the same training data.

3. Export model

Once I'm satisfied with the model, I exported it as a Tensorflow.js package to use in the browser as a web app.

4. The App

Building the app is the simplest part of this project. My team and I use TailwindCSS for styling, Chart.js to display interactive charts and axios to fetch data from PokéAPI.

For our app to talk, we use Cloud Text-to-Speech API and ta-da! The first image classifying Pokédex is born!

Results

Due to lack of time, some Pokémon species had more training data than others. While the app generally return correct results, it also had funny ones.

Test Highlights - Difficulty: Easy

First, I tested with 2D images of Pokémon, the app returns and displays the correct Pokémon at almost 99% accuracy. So I decided to use camera images to test how truly accurate the model is.

Test Highlights - Difficulty: Medium

Lucky for me, I had a few Pokémon objects lying around my house to serve as my testing data. The first tests was front-facing Pokémon plushes. Even with complex background behind, it classifies all of them accurately.

Images from left to right: the model correctly identifies Slowpoke, Vaporeon and Snorlax.

Test Highlights - Difficulty: Hard

At off-angles and many items in the background, the model shows that it can still recognize some Pokémon, but not all.

Images from left to right: the model incorrectly identifies the Abra's side view as an Alakazam, but correctly identifies Flareon's side view as a Flareon.

Even for Pokémon with different colours, the model still proved pretty good accuracy.

In the picture taken above, the model correctly identifies Vulpix, even though its original colour is orange, not white.

Next Steps

1. Save all audio files

Because the Text-to-Speech API requires authentication and an access token, our app will not have Text-to-Speech working if someone other than my team and I uses it.

A potential solution to this problem is to download all 151 Pokémon species' audio files beforehand and just play the audio when that Pokémon's data is displayed.

2. A 'Not Pokémon' result

Currently, the model can only return a Pokémon, which means that even if the test image is not a Pokémon, it will return its best guess.

From left to right, Mario is classified as a Krabby and Koya is classified as a Squirtle even though they are non-Pokemon.

A next step for this app is to fix this issue by allowing the model to return 'Not Pokémon' if the confidence level for its best guess is below a certain threshold. That way, it won't classify random things as Pokémon.

3. Identifying Multiple Pokémon in 1 image

So what happens if a picture like the one below is supplied by the user?

The model will return the most apparent Pokémon in the image. In this case, Bulbasaur because he is in the middle.

This can be an issue if the user supplied a picture with many Pokémon in it. Hence, as a next step, it is essential to make the model recognize multiple Pokémon and maybe a return a message to re-take the photo, supply a new image or something.

4. Live Camera Mobile Version

The final step for this app is not an issue fix, but an expansion. A true Pokédex has to be a portable device you can carry around. So my team and I are not only planning to include more Pokémon in the model (there's actually over 900 species of them), we are also planning to build a mobile app version with live camera detection.

That would really make any phone feel like a real Pokédex!

Conclusion

Ultimately, it's all about having fun while learning something new. We are humbled that this project, that only started because of our childhood dream, has gotten us an astonishing 3rd place in the hackathon.

But this is just the beginning, to a developer's journey to build something awesome every day. Thanks for reading, happy new year and cheers!

How I Built My First Trading Bot For Hashnode's Hackathon

Victoria Lo — Mon, 28 Dec 2020 14:07:07 +0000

Hello everyone! I'm excited to showcase a mini project that I've built for Hashnode's Christmas Hackathon. I will be explaining the inspiration behind this project, how I built it, some challenges I faced along the way and what I've learnt from partaking in this spontaneous hackathon. Let's begin!

Inspiration

Financial Technology aka FinTech is a broad term for financial services or products that integrates technology to automate and optimize its uses. As a developer, I've always been interested in stocks and investments; in particular, the use of robo-advisors and trading bots today have piqued my curiosity for quite a while.

Hence, by participating in Hashnode's Hackathon, I thought it will be a good opportunity for me to try something new as a fun challenge.

How I Built It

The algorithm is created and build on QuantConnect (QC) - a browser-based algorithmic trading platform. It is a simple yet powerful platform that empowers anyone to build, backtest and execute their own trading algorithms.

QC supports both Python and C#. I signed up for a free account. Then I spend the next few hours learning on how to navigate and use the platform via its bootcamp courses.

At first glance, it seems overwhelming to use. Just understanding all the tools, different modules and strategies available for use is difficult, maybe even more so for someone without financial knowledge. I recommend reading up on some finance 101 books to know what is a close, open, high, low, RSI, MACD, Bollinger Bands, etc. or else it will be too confusing to learn both the technical and financial aspects at the same time.

After familiarizing myself with the platform, I got down to business (kind of).

Challenges

The biggest challenge I faced when doing this hackathon is definitely time management. Time was a precious resource in my case. I have a full-time job, as well as other commitments, and so I had to allocate my time wisely and progress patiently on this project. When I have decided to build a trading bot as the project for this hackathon, I researched whenever I am free for 2 days before finally discovering and deciding to go with QC.

Another unforgettable challenge was researching and deep-diving into a not-so-familiar territory for me: the QC platform and trading strategies. The QC platform was incredibly overwhelming, I had to spend hours just reading the documentation to understand their modules and know how to apply them. I have zero clue on how to design profitable algorithms and testing them.

I looked up various trading strategies like pairs trading, momentum-based, short-term reversals, mean-reverting and so on. Risk and return are trade-offs to be carefully managed in every strategy. That is something that I have to bear in mind when implementing my trading bot, and is quite a huge challenge for a beginner like me.

Note: some articles/papers I found helpful are listed below in the Resources section.

Results & Next Steps

After testing my algorithm for several rounds of backtesting, it is clear that the algorithm is unstable. The results show that it is unreliable for live trading and definitely needs more improvement to work on (see Exhibits below).

Exhibit A: Worst profits

Exhibit B: Best profits

The next steps in this project would be to get more financial expertise (from a friend perhaps) to be able to build a better bot. I noticed that on test runs where the returns are high, it is most likely due to overfitting and not because the bot was doing well. Therefore, learning the various modules (i.e. machine learning) and trading strategies on QC will be a good idea to progress and test the algorithm more smoothly.

Overall, this hackathon sure teaches me that there is no limit to learning as a developer. Technology can be found integrated in various sectors, such as Finance. Building a product that synergizes in both the tech and finance industry was thrilling yet challenging. I sure hope to continue learning as much as I can now that this hackathon has given me a head-start. Plus, I like this hackathon allows me to spend some time with my old friend: Python, after coding in JavaScript for a long time.

Thanks for reading! I hope everyone has built something awesome and cool for Hashnode's Hackathon. I shall be reading up on the tag #christmashackathon and I look forward to more interesting reads soon! Happy holidays, stay safe and cheers!

Resources

Bland, G. (2020, November 12). QuantConnect - A Complete Guide - AlgoTrading101 Blog. Retrieved December 23, 2020, from https://algotrading101.com/learn/quantconnect-guide/
Faber, M. (2010, April 20). Relative Strength Strategies for Investing. Retrieved December 23, 2020, from https://papers.ssrn.com/sol3/papers.cfm?abstract_id=1585517
Faber, Meb, A Quantitative Approach to Tactical Asset Allocation (February 1, 2013). The Journal of Wealth Management, Spring 2007, Available at SSRN: https://ssrn.com/abstract=962461
Volta, V. (n.d.). Profitable Algorithmic Trading Strategies in Mean-Reverting Markets. Retrieved December 23, 2020, from https://www.academia.edu/42655318/Profitable_Algorithmic_Trading_Strategies_in_Mean_Reverting_Markets
Cover image background from freepik.com

5 Ways How Blogging Changed My Life

Victoria Lo — Thu, 24 Dec 2020 02:40:25 +0000

Hello everyone! Welcome back to another Blogging Tips Series article.

Instead of tips, in this article, I'd like to share some of my personal experiences and things that I've gained ever since I've started blogging consistently. I hope by sharing this, you can be more inspired and motivated to start your own blog too in 2021.

Without further ado, here are 5 ways how blogging has impacted my life.

1. Meeting New People

If I have to choose the biggest change that I've experienced from blogging, it would be meeting new people. As an introvert, I tend to stay in my bubble of close friends and rarely try to meet new people.

But meeting new people through blogging feels unforced and natural. I met really amazing people whom I can discuss plenty of interests and passion topics with.

Also, if it weren't for blogging, I would have missed out being part of an amazing community like Hashnode. I would not have met people who are constantly inspiring and motivating me to do better.

2. Re-Connect with Old Friends

Surprisingly, blogging has helped me reunite with old friends. After living in so many different countries, it is difficult for me to maintain friendships and over time, we end up drifting apart.

Some of my old friends thankfully discovered my blog and it's so heartwarming to be able to rekindle that friendship, all thanks to blogging. We are now always sharing ideas and fun passion projects to collaborate with.

3. Secure more job interviews

Before I started this blog, I was a small freelancer applying to numerous jobs every day. My resume was anything but interesting, there's nothing in particular that stand out. And so, out of 100 jobs I applied to, I'd say I only landed 15-20 interviews.

If I had known that blogging could increase that 15% interview rate to 90%, I would have started sooner. This month, I applied to 20 jobs and 18 of them gave me an interview opportunity.

The reason: they were impressed by my blog. It tells them that I have good productivity habits and an excellent learning attitude. Actions speak louder than words on a resume.

4. Self-Discovery

Before I started blogging, I had a lot of fears about writing. Fear that I was not good enough. Fear that I would be highly criticized. Fear that I could never publish an article because it had to be "perfect". Ultimately, I was afraid of letting myself down.

I read "Shoe Dog" by Phil Knight recently. He talked about his struggles, how he overcome them and become Nike's founder. He said,

Start before you're ready.

If you are always contemplating whether to take the first step, then that's already time wasted. Start before you're ready and make mistakes along the way. And now with blogging, I have discovered what I like about writing, the gains/lessons I've received from it and what it really means to me as a dev blogger.

5. Self-Improvement

As I embark on this blogging journey, I learned how to celebrate small progress and focus on personal growth.

I explored my creativity by learning new skills like Photoshop to design my cover arts and developing a writing style that suits my identity.

My time management and discipline also improves naturally as I tried to blog consistently. Becoming more open-minded and accepting to give and receive well-intended feedback is also another self-improvement aspect.

Last but not least, by searching within myself for my motivation to write, I learned how to overcome my perfectionist mindset and improve that imposter's syndrome we all often get now and then.

Finally...

It's about patience. Patience to grow and progress. Patience to overcome and better yourself. Patience to meet the people you can truly connect with.

"Patience is not passive, on the contrary, it is concentrated strength." - Bruce Lee

Above all, blogging has become a true joy, a small getaway where I can indulge in my own thoughts. Without a doubt, it has changed my life.

Thank you for reading this rather long article. The purpose of this article is to reflect and be grateful of all the things blogging has given me. If you'd like to reflect too, and share anything that changed for you since you've started blogging, please feel free to share in the comments below! Cheers!

5 Common Beginner Blogging Mistakes

Victoria Lo — Thu, 17 Dec 2020 03:09:01 +0000

Hello everyone! Welcome to another article on Victoria's Blogging Tips. First of all, I'd just like to say thank you to those who supported and enjoyed this series. I'm glad that writing articles on blogging can help some of you get better or even inspired to get started on writing a blog.

In this article, let's take a look at some common blogging mistakes that I observed beginners often make.

1. Thinking you are a bad writer

This is probably the most common reasons why some developers don't want to start a blog. They doubt their writing skills.

If you have read my article on Why You Don't Have to be Good at English to Start a Tech Blog, you will know that not all dev-bloggers are that great at English too.

As one of my favourite quote by Zig Zaglar goes,

"You don't have to be great to start, but you have to start to be great."

We are still learning as we write on our blogs. And learning how to explain things in writing is always a lifelong lesson. There's always room for improvement. So don't make the mistake of giving up too early or not even starting just because you think you are a bad writer.

2. Focusing too much on numbers

A few of you have personally reached out to me and asked me how many articles should you publish a week. My answer to that is always...

"It depends."

Because every blog is not the same. Most beginners are concerned with numbers: how many articles to write per week, how many views to get per article, how many hours to spend on each article, etc.

Focusing too much on numbers in the beginning of your writing journey can quickly drain your motivation, especially if the number doesn't meet your expectations. Instead, focus on building good writing habits first and then naturally, you can figure out the numbers.

3. Not really understanding your big WHY

It takes a lot of time and commitment to start a blog. Starting one without really understanding why you want to write can keep you from maintaining your blog in the long run.

After all, having a successful blog may be a rewarding experience but it is definitely not easy and may not be for everyone. So as a beginner, knowing your WHY can achieve 2 things:

Figure out whether blogging is really for you
Figure out what you want to achieve through blogging

I absolutely love the way Anita Ihuman summarizes what successful blogging means to her in this article. I agree with her definition and her article really resonates with me. Please check it out!

4. Not being open to constructive feedback

Whether one is a beginner or not, it is always helpful to listen to feedback. Not only will you improve, but you will also be able to find an audience/niche based on the feedback you receive.

If you have not received feedback, it's a good idea to reach out to some amazing bloggers on Hashnode who will be more than happy to share some advice with you.

5. Not Identifying Bottlenecks

This was personally my biggest mistake when I started my blogging journey. Spending too much time brainstorming ideas or editing your drafts or cover images - basically "bottlenecking" the writing process, is a huge mistake.

A typical technical article should take about 2-4 hours on average. If you spent a lot more time, ask yourself:

At which aspect of the article is time most spent? Research? Writing?

For example, when I was starting out, I remembered my bottleneck was editing my drafts. I wrote a lot of drafts, but they never got published because I spent too much time continuously editing them to be "perfect". Once I've identified that this was an issue, I looked for grammar tools to help me speed up this step.

If you can identify which step in the writing process that you spent unnecessarily so much time on, you can make some effort to improve on that. Therefore, becoming more efficient to write and publish articles.

Thanks for reading!

And that's all for now! Thank you for taking the time to read this article. If it is helpful, please like and share it around. Also, feel free to share any blogging mistakes you've made when starting a blog in the comments below. That way, we can learn from each other. Thanks and cheers!

The Super Mario Effect for Developers

Victoria Lo — Mon, 14 Dec 2020 07:47:34 +0000

Over the weekend, I was watching some TED talk videos when I come across this talk by Mark Rober on the Super Mario Effect.

It was such a fascinating concept to me - one that I have never actually thought about but is ever-present in my daily life. And so, in this article, I would like to share some things I've learned from researching about this topic and how it can be applied to developers for self-improvement.

What is it?

The Super Mario Effect is a learning concept that takes inspiration from the game Super Mario. If you've played the game, you probably remembered that the goal of the game is to get through all the levels to save Princess Peach from Bowser.

The challenging part is that every level is teeming with pitfalls and obstacles but do you give up every time Mario falls down or fails to reach the end of the level? The answer is probably no. You will keep trying and as you fail each time, you will gradually learn how to conquer the level.

This attitude towards learning and mastery is called the Super Mario Effect - where the focus is on the process to reach goals (i.e. saving Princess Peach), not the failures (i.e. falling down pitfalls).

Capitalizing on Mario: Growth Mindset

The Super Mario Effect can be applied to generally anyone, especially developers to improve your learning and motivation. The first is about having a growth mindset.

If you never heard of the growth mindset, these are 2 characteristics of people with this mindset:

1. Does not fear failures

When you were 3 years old and learning to walk, you probably fall down more than a dozen times. But that won't stop you from getting back up to try again.

As we grow older, however, some people began to shift into the fixed mindset. These people see failure as a sign to give up. They think obstacles cannot be overcome. They look for ways to avoid failures.

The Super Mario effect emphasizes the "learn like a toddler" aka growth mindset. You collect experiences and learn from your mistakes without punishing yourself for it. Failure is not an obstacle, but an opportunity to learn.

2. Driven by Curiosity

Another characteristic of the growth mindset is that you are driven by curiosity. Just like a toddler, you observe your surroundings a lot, you are inspired by others, you try to learn from others and you are curious about everything.

Nothing is impossible to learn for those with a growth mindset. As a developer, being curious is an important asset. It keeps you motivated and less likely to feel burnt out. You don't just learn because you have to, but because you love to. Excellent developers are often self-driven and self-motivated because they adopt this attitude towards learning.

Capitalizing on Mario: Consistent Habits

Just like how you will repeatedly challenge Super Mario to get to the next level, the Super Mario effect can inspire one to persevere and build good habits. How do we build such habits?

1. Process First then Goals

Author of Atomic Habits, James Clear, once mentioned that we often set goals first before thinking about the process. For example, let's say you want to be a writer, you would aim to be the best-selling author. But before that, you should fall in love with the process of writing. Another example: if you aim to be a great developer, you should first fall in love with the joy of building and learning.

Fall in love with the process, the practice, the repetitive tasks and that becomes a habit to achieve any goals.

"We are what we repeatedly do. Excellence is therefore, not an act but a habit." - Aristotle

2. Start with a Routine

Having a routine can help make habits stick, and stick for long. The best way to start a routine to begin with something so easy that you can't say no.

For example, if you want to start exercising every day, begin your routine by drinking water. It's so easy that you can do it and you will not make excuses to not do it.

This way, you will start developing consistent habits and stay persistent when facing pitfalls just like Mario.

That's all for today!

Thanks for reading this short article! I hope it's quite insightful. Be sure to like and share your thoughts in the comments below on how you can stay focused and motivated as a developer. If you are interested, please check out Atomic Habits by James Clear and the TED talk video by Mark Rober. Cheers!

Images from

Beginner's Guide to Write and Publish React NPM Package

Victoria Lo — Thu, 10 Dec 2020 02:57:15 +0000

Hello everyone! In this article, we will learn step-by-step how to publish a React component as a npm package then set up a pipeline to automate testing and future publishes.

Before we start...

Make sure you have an npm account. If not, create one here.
Make sure you have Node and npm installed on your machine. If not, get it here.
Basic understanding of React will be needed.

Our simple package

For this tutorial, we are making a simple React component that can immediately draw a specified polygon in any specified color.

We will then publish this component as a npm package for anyone to install and use. Let's get started!

Step 1: Create React App

First, let's create a new React app with the command:

npx create-react-app polygon-maker

Step 2: Polygon.js

Next, create a Polygon.js file which will be the component we will publish as a package.

The component will accept props with properties such as color and shape to determine the type of polygon and its color.

In this example, I have created a simple square, which will be the returned <div> style attribute if props.shape is square.

function Polygon(props) {
    const square = {
      background: props.color,
      width: "100px",
      height: "100px"
    };

   return (
      <div style={eval(props.shape)}>
      </div>
    );
}

Step 3: App.js

In App.js, we can import Polygon at the top like so:

import Polygon from "./Polygon";

And in the return function, simply add the Polygon component. Pass in shape and color as props.

<div style={{display:"flex", backgroundColor:"black"}}>
      <Polygon shape="square" color="red"/>
<div>

And the square is rendered on the browser!

Step 4: Add more shapes

You can add more shapes in Polygon.js so you can easily draw these shapes using this component. I made more such as rectangle, triangles, trapezoids, etc. Now I can pass them as shape in the Polygon component in App.js.

In App.js:

<div style={{display:"flex", backgroundColor:"black"}}>
      <Polygon shape="square" color = "red"/>
      <Polygon shape="rectangle" color = "coral"/>
      <Polygon shape="oval" color = "yellow"/>
      <Polygon shape="triangleUp" color = "green"/>
      <Polygon shape="triangleDown" color = "blue"/>
      <Polygon shape="trapezoid" color = "purple"/>
      <Polygon shape="parallelogram" color = "pink"/>
 </div>

In the browser:

Step 5: Preparing to Publish

We've finished making this simple component. Let's now publish it to npm!

Install babel to help transpile ES6 JavaScript.

npm install --save-dev @babel/cli @babel/preset-react

Delete the public folder.
Go to package.json file. Under scripts, add the line:

"publish": "rm -rf dist && mkdir dist &&  babel src/Polygon.js -d dist --copy-files"

This script will make a directory called dist and copy the compiled Polygon file inside it.

Still in package.json, set the private property to false and add the following:

"babel": {
    "presets": [
      "@babel/preset-react"
    ]
 }

Great! Now we are ready to publish this as a npm package.

Step 6: Publish to npm

In your command prompt/terminal, login to your npm account with:

npm login

Then, run our publish script with:

npm run publish

You should see a dist directory appear in your root folder with Polygon.js inside it. Rename that file to index.js.

Finally, run:

npm publish

And our Polygon maker package should be live on npm!

Next Steps: Automating Tests and Updates

After publishing your npm package, it is a good idea to set up a pipeline to automate future tests and version updates. Buddy CI/CD is an intuitive tool that we can use to achieve this easily.

Step 1: Add a Pipeline

To get started, simply create an account at buddy.works, and add your project by choosing the git provider you use.

After adding your project to Buddy, you can click 'Add a new pipeline' to set up a pipeline. Set Trigger mode to On Push and the branch as master to ensure that the pipeline will automatically run when we made changes to our project.

Step 2: Build and run tests

Next, add a Node action into the pipeline. In the terminal, the following commands will build and run tests to make sure your npm package is error-free.

Step 3: Authenticate and publish

After we test our package, we can publish it to npm. To do that, we will need to login to our npm account.

Add a Node action with the following commands in the terminal:

This command will allow us to authenticate ourselves using the npm-cli-login package and environment variables such as NPM_USER, NPM_PASSWORD and NPM_EMAIL.

To install npm-cli-login and then run npm publish, click on the Environment tab and add this line in the terminal as shown in the image below:

Now we need to specify our environment variables by heading over to the Variables tab and add the 3 variables as appropriate.

Step 4: Add Email Notification

Last but not least, we add an Email action into our pipeline to notify us when the package is successfully tested and published to npm.

Run Pipeline!

Let's try a test run. As seen in the image below, the execution was successful and we have created an automated pipeline to test and publish any updates to our npm package.

Conclusion

And that is how you can build and publish a simple React component to npm. After that, you can simply automate testing and future updates using a CI/CD tool like Buddy (you can even configure a pipeline to deploy React with zero-downtime!).

Thanks for reading. I hope this article has been helpful. Please like and share it around if it is. Feel free to share any thoughts in the comments below. Till next time, cheers!

Tips to Negotiating Pay as a Freelance Developer

Victoria Lo — Mon, 07 Dec 2020 10:03:50 +0000

In the world of freelancing, pricing your services is probably one of the most debatable areas you will have to face. Ensuring that your proposed price is equivalent to your client's perceived value of you is necessary in order to reach an agreement.

Hello everyone! As seen from the title, this article will cover a topic that I've never written on my blog before - freelancing. I decided to write on this topic due to requests by some of my readers.

My Experience with Freelancing

I have been full-time freelancing as a web developer and technical writer since May 2020. With that said, all the tips I am about to give in this article merely comes from personal experience since I am no expert.

In a span of 6 months, I have negotiated countless rates and have succeeded thanks to these tips I am about to share with you. So, let's get on with those tips!

1. Talk about the value not the price

When negotiating your price, it seems obvious to start getting into numbers and debating whether your services deserve $100/hour or $200/hour or etc.

This, however, is the least effective way to negotiate. After all, when you are freelancing, numbers are all subjective. It doesn't mean anything unless you put some value into it.

What I found most efficient in negotiation is to start with pitching your value. Try to answer the following questions:

Why should client_name hire you?
How are you different from other developers offering the same services?
What can you bring to the table that will help client_name grow their business?

If you understand your worth and value you can bring to your client, it will be easier for you to negotiate a higher rate, because you believe that you deserve it. Your perceived value will naturally be reflected in your confidence and the way you communicate to your client. The client will sense this and will be more willing to offer a higher price.

2. Numbers as previous evidences

After determining your value and communicating that to the client, the next step is to use numbers to further persuade the client that your value is worth $x/hour or $x/word.

These numbers include:

The rate on your previous clients
Number of projects you have done in the past

Having a solid number allows the client to properly gauge your value. For example, the rate you charged previously was $150/hour and you have completed 3 projects so far. This will tell the client your level of experience, and then they will likely be more willing to match your previous price or offer your proposed higher price based on their perceived value of you.

3. Leverage benchmarks/other offers

Including the market rate of similar freelancers also helps because it lets the client have a benchmark reference and get a rough idea of the pricing in the industry. It is especially useful if the client has not engaged in freelancing services before.

If you are swamped with other offers, I think it is fair to be transparent and let them know that you are charging $x/hour for another client. That way, the client will more likely accept your price since another client has accepted it too.

4. Use the "We" language

It is important to communicate to your client that you both are on the same side. Instead of saying,

"I need $x/hour because for me..."

I often say,

"If it's okay, we can agree on $x/hour. If not, we can work something out."

That way, the client will not feel that he/she has to sacrifice or compromise to get your services. It is more about working together to reach an agreement that both parties will be happy with. A win-win and not a win-lose situation.

5. Be polite but assertive

Freelancers are often underpaid because they are afraid they may lose a precious client if they price too high. But my rule is, if you think the price is reasonable and reflects your value appropriately, then don't be afraid to be assertive.

Of course, remember to always be polite because no client wants a freelancer that seems too stubborn and insisting. Simply state the aforementioned points 1 to 4 of this article. Emphasizing on your value and experience, utilizing benchmarks and the "We" language to increase the client's perceived value of you.

This won't usually happen but if the client still insist on their lower price, then it will be up to you. Compromise and accept the offer, or reject and find another client. Ultimately, negotiation is all about your perceived value of each other.

Thanks for reading!

From my experience, most clients I have negotiated with gave positive responses and were highly satisfied with the value I bring. Although negotiating seemed scary to me at first, I realized that at the end of the day, it's about understanding each other and communication.

I hope this has been a helpful read. If you have other negotiation tips, please share in the comments below. Don't forget to give a like or share if this is helpful. Thanks and cheers!

P.S. : I'm no longer freelancing but it has been a wonderful experience and I have definitely grown a lot as a developer and communicator since I started :) All the best to freelancers out there!

Build Beautiful Documentation Websites with Docusaurus

Victoria Lo — Fri, 04 Dec 2020 00:06:43 +0000

A great documentation website says a lot about your software. It tells users how they can use the software. It tells developers what the software can do and how it is developed. In short, it is a must-have for developers.

But making detailed and excellent documentation websites takes too much time and effort, especially because we want to focus our attention on development instead of writing documentation.

In this article, I'd like to introduce Docusaurus by Facebook, an easy-to-use documentation site generator powered by React and uses Markdown to write docs.

Docusaurus: A Simple yet Elegant Solution

Docusaurus is an open-source project that allows you to write documentation as Markdown and gives you tons of flexibility to customize and create visually appealing documentation websites in no time!

1. Get Started

Create a new documentation site by running this command:

npx @docusaurus/init@latest latest [name] classic

Head to the root folder and run npm start. Your beautiful brand new site has been generated successfully.

The classic template will generate the following files in the root directory:

my-website
├── blog
│   ├── 2019-05-28-hola.md
│   ├── 2019-05-29-hello-world.md
│   └── 2020-05-30-welcome.md
├── docs
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   └── mdx.md
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock

It might look quite intimidating for beginners so let's discuss how you can customize and create your own documentation website easily with this template.

2. Sidebar customization

You can easily customize the documentation sidebar for your own documentation.

The example sidebar looks like:

You can customize this sidebar by simply updating the values in sidebar.js, where the default sidebar is someSidebar.

module.exports = {
  someSidebar: {
    Docusaurus: ['doc1', 'doc2', 'doc3'],
    Features: ['mdx'],
  },
};

Docusaurus and Features refer to the dropdown categories in the sidebar while the array of strings (i.e. doc1, doc2, doc3, mdx) are the markdown documentations found in the docs folder of the site.

For example, if I change the category names and move "doc3" to the category below instead.

module.exports = {
  someSidebar: {
    Introduction: ["doc1", "doc2"],
    About: [ "doc3", "mdx"],
  },
};

Now the sidebar would look like:

3. Configuration

Changing the name and tagline of the template is probably the first thing to do when building your documentation website with Docusaurus.

You can configure anything for your needs under docusaurus.config.js

Here's a snippet on things you can customize:

  title: 'My Site',
  tagline: 'The tagline of my site',
  url: 'https://your-docusaurus-test-site.com',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  favicon: 'img/favicon.ico',
  organizationName: 'facebook', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.

You can also customize the navigation bar and footer links in this file. Let's see how we can customize the navigation bar next.

4. NavBar Customization

By default, the navbar displays the site name, link to Docs and link to Blog.

Let's say you want to create an About page and add the link to the page in the navbar. You can create an about.md file in the /pages directory.

All Markdown documents must have an id so in about.md, we can write specify its id and write a sample line :

---
id: about
---

## This is my About page.

Then, in docusaurus.config.js, simply add this page id in the navbar object, items array.

navbar: {
   items: [
     //...
     {to: 'about', label: 'About', position: 'left'}, //add this line
     //...
   ],
}

Now, the rendered site will have your About page in the navbar.

Endless Possibilities to Build Beautiful Documentation

Using Docusaurus, you can write your documentations and customize the template to your needs easily. Visit the documentation website for more information.

Some well-known documentation sites made with Docusaurus are Prettier, React Native and mailgo. Feel free to look at more to get inspiration on creating and designing your next documentation website.

Here is my documentation website for a project I made: https://victoria-lo.github.io/Gameo/

Thanks for reading! I hope it has been a helpful read! If it is, don't forget to like and share the article. Till next time, cheers!

Let's Build a Simple Bulletin Board React App

Victoria Lo — Sat, 28 Nov 2020 05:18:04 +0000

In an article I wrote on Making Draggable Components in React, a reader requested to share how I built the Bulletin Board App, a simple demo app to showcase draggable components in React.

In this article, I'll be showing step-by-step how I made this simple app, perfect for React beginners to learn how to implement draggable components in their projects. Let's get started!

The App

This app can do the following:

Allows user to type something in an input and press ENTER to generate a note of a random colour.
Allows user to drag the note anywhere. Its position, colour and content will be saved even after the user exits the app.
Allows the user to delete the note by clicking on the top-right 'X' button.

So let's build the app according to its 3 use cases.

Step 1: Install & import packages

Initialize a new Create React App by running the command:

npx create-react-app my-bulletin-board-app

Then, in the project's root folder, install the following packages that we need:

react-draggable: to implement draggable features for the notes
randomcolor: allow notes to be generated in random colours
uuid: generates a unique identifier for each note

Install with the command:

npm install react-draggable randomcolor uuid

In App.js, import the packages and React useEffect and useState hooks.

import React, { useState, useEffect } from "react";
import "./App.css";
import Draggable from "react-draggable";
import { v4 as uuidv4 } from "uuid";
var randomColor = require("randomcolor");

Step 2: Initialize states

We need to create and initialize 2 states using useState hook.

item: this is the value of the input field. Initialize as empty string.
items: this is an array that contains all the notes generated, saved to localStorage. Initialize as empty array if localStorage has no saved items.

const [item, setItem] = useState("");
const [items, setItems] = useState(
    JSON.parse(localStorage.getItem("items")) || []
  );

Step 3: Create input element

We can create the HTML input and button elements in the return function of App.js as follows:

<input
    value={item}
    onChange={(e) => setItem(e.target.value)}
    placeholder="Enter something..."
    onKeyPress={(e) => keyPress(e)}
/>
<button onClick={newitem}>ENTER</button>

It looks something like:

<input> has the following attributes:

value: set to the value of the item state
onChange: update item state every time there is a change in the input's value
placeholder: description when there's nothing in the input field
onKeyPress: calls the keyPress function that checks if the key pressed is ENTER, call the newitem function.

The keyPress function is written like so:

const keyPress = (event) => {
    var code = event.keyCode || event.which;
    if (code === 13) {
      newitem();
    }
  };

This way, the user can type something in the input field then press ENTER key or click on the ENTER button to generate a new note on screen.

As for the ENTER button, when the user clicks on it, the newitem function will be called. Let's write this function next.

Step 4: newitem

This function generates a new note on the screen with the string the user typed in input (i.e. item). A note is an object with the following properties:

id: unique identifier generated using uuidv4()
item: the string content of the note, which is the state item's value
color: the background colour of the note, generated with randomColor({luminosity: "light",})
defaultPos: the x and y coordinates of the note. Initialized to {x:100, y:0}.

const newitem = () => {
    if (item.trim() !== "") {
     //if input is not blank, create a new item object
      const newitem = {
        id: uuidv4(),
        item: item,
        color: randomColor({luminosity: "light",}),
        defaultPos: { x: 100, y: 0 },
      };
      //add this new item object to the items array
      setItems((items) => [...items, newitem]);
      //reset item value to empty string
      setItem("");
    } else {
      alert("Enter a item");
      setItem("");
    }
};

Now, let's update our localStorage every time our items array is updated. We can use the useEffect hook to achieve this:

useEffect(() => {
    localStorage.setItem("items", JSON.stringify(items));
  }, [items]);

Now we should display our note objects from our items array on screen.

Step 5: Display items

In our return function, below our input and button element, we can display our notes using the map array method:

{items.map((item, index) => {
        return (
          <Draggable
            key={item.id}
            defaultPosition={item.defaultPos}
            onStop={(e, data) => {
              updatePos(data, index);
            }}
          >
            <div style={{ backgroundColor: item.color }} className="box">
              {`${item.item}`}
              <button id="delete" onClick={(e) => deleteNote(item.id)}>
                X
              </button>
            </div>
          </Draggable>
        );
      })}

For every note object in the items array, we will create a <Draggable> component in which:

key attribute =id of the object.
defaultPosition of the component = defaultPos of the object.
onStop, which is when the user stops dragging the note on screen, will call the updatePos function.

Inside the <Draggable> component, we have the <div> that will render the note's item property on a background with the note's colour property. And finally, we have an 'X' button which calls the deleteNote function upon clicked.

Now, we should be able to generate a new randomly-coloured note on screen every time we type something in the input and press ENTER.

However, if we dragged the note and reload the page, the note's position will not be saved because we haven't written our updatePos function. Let's write that function next.

Step 6: updatePos

This function is called every time we stop dragging the note. That way, we can save the final position of the note to our items array in localStorage.

The next time we visit the page, the app will remember the last position of the note. It won't reset to {x:100, y:0}` all the time.

Here's how the function works:

We pass data as the first parameter of the function. It contains the x and y coordinates of our note.
Clone our items array into a new array called newArr.
Get the index of the note in the array we want to update from the 2nd parameter index.
Set the new coordinate values of the note in its defaultPos property.
Set items to the value of the newArr.

const updatePos = (data, index) => { let newArr = [...items]; newArr[index].defaultPos = { x: data.x, y: data.y }; setItems(newArr); };
Great! Now the position of any note will be updated and saved to localStorage whenever it changes. Let's move on to the final function: deleteNote.

Step 7: deleteNote

In this function, the note will be deleted from both on screen and from the items array in localStorage.

This function is pretty straightforward. We can simply use the filter array method to remove the note whose id property matches the id parameter of the function.

javascript const deleteNote = (id) => { setItems(items.filter((item) => item.id !== id)); };

And that's it!

We should now have a simple working bulletin board app like the one below:

Thanks for reading. I hope this is a helpful to implement React Draggable into your projects. For more details on React Draggable, feel free to check out my article Making Draggable Components in React.

Please like and share this article if it is helpful, and leave any questions in the comments below. Check out the demo or the repo of this app. For more information on the packages we used to build this app, feel free to read the section below.

Special thanks to Manas Garg for requesting this article. Sorry it took so long to finally publish. Thanks and cheers!

Introduction to Firebase Storage #2: Retrieve & Delete Files

Victoria Lo — Tue, 24 Nov 2020 04:55:42 +0000

Hello everyone, in this article, we shall continue from where we left off in the previous article on How to Upload Files to Firebase Cloud Storage. We will now learn how to retrieve and delete files from Firebase Cloud Storage.

Retrieve files from Firebase

Refer to the previous article to learn how to set up Firebase Cloud Storage and create our project that we will continue building in this article.

Step 1: Create allImages state

Initialize an array called allImages. This array will hold all the image URLs retrieved from Firebase.

 const [allImages, setImages] = useState([]);

Step 2: getFromFirebase

Let's create a function called getFromFirebase that will handle retrieving all files from Firebase.

In this function, we want to:

1: Get reference to our storage bucket
2: Use listAll() to get all the reference object inside it

listAll() returns the reference to the images, not the images themselves. It has 2 properties: items and prefixes. Items are the image reference whereas prefixes are folders, in case you have nested folders in storage.

Below is an example of what listAll() returns when I have 8 images in storage.

3: Then loop through each items reference with forEach() to obtain the image URL with getDownloadURL()
4: Finally, add this URL into the allImages array with setImages()

  const getFromFirebase = () => {
    //1.
    let storageRef = storage.ref();
    //2.
    storageRef.listAll().then(function (res) {
        //3.
        res.items.forEach((imageRef) => {
          imageRef.getDownloadURL().then((url) => {
              //4.
              setImages((allImages) => [...allImages, url]);
          });
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  };

Step 3: Display Images

We can then create a component where we can display our images from the URLs in theallImages array.

 <div id="photos">
     {allImages.map((image) => {
        return (
           <div key={image} className="image">
              <img src={image} alt="" />
              <button onClick={() => deleteFromFirebase(image)}>
               Delete
              </button>
           </div>
         );
     })}
</div>

On each image, we can have a Delete button to allow users to delete the picture they clicked on. Let's look at how we can implement the deletedFromFirebase() for the button.

Delete Files From Firebase

Step 4: deleteFromFirebase

Our deleteFromFirebase function takes in our image URL as an argument and deletes that URL from Firebase.

Here's how we can implement the function:

Using refFromURL(), we can get the image reference from Firebase Storage of the image we want to delete.
Then use .delete() to delete the image from Firebase.
Finally, we remove that URL from our allImages array.

const deleteFromFirebase = (url) => {
    //1.
    let pictureRef = storage.refFromURL(url);
   //2.
    pictureRef.delete()
      .then(() => {
        //3.
        setImages(allImages.filter((image) => image !== url));
        alert("Picture is deleted successfully!");
      })
      .catch((err) => {
        console.log(err);
      });
  };

And the result!

And that's how we can upload images, retrieve and display them and delete them!

To view the project I made for this tutorial, please visit the repo here. And please read the Firebase Documentation for more information.

Thank you for reading. I hope it's been a helpful 2-part read to help you get started with using Firebase Cloud Storage. As always, please do not hesitate to share any thoughts in the comments below. Till next time, cheers!

Introduction to Firebase Storage #1: Uploading Files

Victoria Lo — Sat, 21 Nov 2020 04:21:19 +0000

Some apps allow users to upload images and files, read them, delete them and even download them whenever users want. Such functionality can be useful for social media platforms, blogging platforms or storage services. Firebase Cloud Storage offers a solution to store user-generated content easily.

Hello fellow devs, in this article, we'll be discussing Firebase Cloud Storage and how we can implement it to upload, retrieve and store user files securely.

What is Firebase Cloud Storage?

Firebase Cloud Storage is a service that developers can use to store and download files generated directly by clients. No server-side code is needed.

It uses Google Cloud Storage buckets to store the files, allowing accessibility from both Google Cloud and Firebase. These buckets are formed within a hierarchical structure. For example:

What I really like about Firebase Cloud Storage is how seamless it integrates with Firebase Authentication so you can organize uploaded files based on each user and apply access controls if needed.

Also, it scales automatically so there's no worry about moving to another provider when stored data gets too large.

Now that we know what Firebase Storage can do, let's try using it in our project. For this tutorial, I'm making a simple photo album app that allows users to upload, view and delete images.

Step 1: Create a new Firebase Project

Head over to firebase.google.com and create a new project.

On the dashboard, click on the Web icon to initialize Firebase for Web Apps.

Follow the steps by Firebase and you'll reach a page that shows your config variables (see image below). This is important so copy and save it somewhere. We will use it soon.

Next, head over to the Storage tab and click on the 'Get Started' button.

You'll see a pop-up window that asks if you are okay with some settings. Replace the request.auth !=null to true. This ensures we are allowed to upload files to Firebase without needing authentication for the simplicity of this tutorial.

Click 'Next' to proceed.

And there you go! Firebase Cloud Storage is now enabled. Let's integrate it into our app.

Step 2: Create a React App

For this example, I'm using a react project template. You can use whatever front-end framework you like.

To create a React project, simply run:

npx create-react-app <app-name>

Once your project is created, run:

npm install firebase

This is a package that contains the necessary tools and infrastructure we need to set up Firebase in our app.

Step 3: config.js

Create a file called config.js to store our Firebase config variables that we copied earlier.

Our config.js will look like:

import firebase from "firebase/app";
import "firebase/storage";

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
});

// Get a reference to the storage service, export it for use
export const storage = firebase.storage(); 

export default app;

Note that I'm storing the actual config values in my .env file and accessing them as process.env.VARIABLE_NAME.

If you are new with environment variables, I found this nice article explaining how to use it.

Step 4: Uploading Files to Storage

In App.js, we can import our storage reference that we exported from our config.js file.

import {storage} from "./config";

In order to upload files, we need to have an input field for the user. We can create an input element like so:

<input type="file" accept="image/x-png,image/jpeg" />

By specifying the type to file, the input field will be a file picker.

For this example, we only accept files that are .png or .jpeg. We can specify this requirement in the accept attribute.

Now let's add a button that will upload our image to Firebase when clicked.

 <button>Upload to Firebase</button>

At this point, the UI should look something simple like:

1. Create Image state

To track whether our user has supplied a file in the input, we should have an image state. First, import the useState hook.

import React, { useState } from "react";

And initialize the state to null:

const [image, setImage] = useState(null);

2. onImageChange

Next, let's create an onImageChange function which will update the image state every time the user supplied a new file to the input field.

const onImageChange = (e) => {
    const reader = new FileReader();
    let file = e.target.files[0]; // get the supplied file
    // if there is a file, set image to that file
    if (file) {
      reader.onload = () => {
        if (reader.readyState === 2) {
          console.log(file);
          setImage(file);
        }
      };
      reader.readAsDataURL(e.target.files[0]);
    // if there is no file, set image back to null
    } else {
      setImage(null);
    }
  };

Then, we will pass this function into the onChange handler of our input element.

<input type="file" accept="image/x-png,image/jpeg" onChange={(e) => {onImageChange(e); }}/>

3. uploadToFirebase

Now let's create an uploadToFirebase function for our button so that the image will be uploaded to Firebase when the user clicks the button.

This is how we can implement the function:

Check if the image state is null. If it is, ask the user to supply a file first.
If image is a file, we'll create a root reference to our storage.
Then we create a child reference to store our file. We can name that reference by the image's name property.
Finally, use put(image) to store our file in the reference.
Then have a callback function to let the user know that the file has been uploaded to Firebase successfully.

Here's the implementation in code:

  const uploadToFirebase = () => {
    //1.
    if (image) {
      //2.
      const storageRef = storage.ref();
      //3.
      const imageRef = storageRef.child(image.name);
      //4.
      imageRef.put(image)
     //5.
     .then(() => {
        alert("Image uploaded successfully to Firebase.");
    });
    } else {
      alert("Please upload an image first.");
    }
  };

That should do it!

Let's check if it works.

Yay it does! The uploaded image is in Firebase Storage.

Conclusion

With Firebase Cloud Storage, there are many things you can do to handle, organize and store user's data and files. Stay tuned for the next article on how to retrieve, display and delete files from Firebase Storage.

Thanks for reading and I hope it was helpful in any way. Feel free to ask any questions in the comments below and refer to the Firebase documentation to read more about it yourself. Take care and cheers!

Testing React Components and Apps with Enzyme

Victoria Lo — Tue, 10 Nov 2020 05:14:48 +0000

Testing front-end applications can be a pain and time-consuming to write. In this article, let's discuss Enzyme and how we can use it to make testing UI much easier.

First, What's Enzyme?

Enzyme is a JavaScript testing utility for React. It makes testing React components easy by asserting, manipulating, and traversing every components' output. Currently, it is open sourced and maintained by AirBnB.

Why Enzyme?

In terms of testing, you've probably heard of Mocha and Chai. This JavaScript test framework and assertion library are often used cohesively to write unit and functional tests.

But what about testing React components? Enzyme is the solution for the following reasons:

Intuitive and flexible API
Compatible with major and common test runners
Supports shallow rendering, DOM rendering and static rendered markup

Enzyme Implementation

Now let's learn how we can use Enzyme with Jest, a test runner in React, to write tests.

Step 1: Install Enzyme

First we install the package:

npm install enzyme enzyme-adapter-react-16

Step 2: setupTests.js

When you create a new React app, there should be a setupTests.js file initialized by default.

Add the following code in that file to import Enzyme:

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });

Step 3: App.test.js

In this example, let's test our App.js file. Jest, our test runner, will run test files automatically if the file is:

Any .js file in a folder named tests
Any .js file with a name like [name].spec.js
Any .js file with a name like [name].test.js

So let's have an App.test.js file to test our App.js. In that file, we'll write some simple test like so:

import React from "react";
import App from "./App";
import renderer from "react-test-renderer";
import { shallow } from "enzyme";

it("renders without crashing", () => {
  shallow(<App />);
});

it("renders correctly", () => {
  const rendered = renderer.create(<App />);
  expect(rendered.toJSON()).toMatchSnapshot();
});

In our first test, we use shallow rendering to isolate an individual component such as <App/> and make sure that it renders.

Our next test is a snapshot test to test if the UI renders correctly. According to Jest documentation,

A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test.

Run Tests

With these 2 simple example tests, let's run them with:

npm test

If all tests passed, the terminal should show:

Automating your tests

So now we know how to write simple UI tests with Enzyme. For more details, visit their documentation.

It's always good to keep your test automated instead of manually running npm test every time. Buddy CI/CD is a tool I use to automate tests easily, and it works well for React apps.

Step 1: Add a Pipeline

To get started, simply create an account at buddy.works, and add your project by choosing the git provider you use.

Then, add a pipeline in which we can automate our tests in our React app. Ensure that 'Trigger Mode' is set to On Push and the branch as master so that our test will automatically run every time we made changes to our project.

Step 2: Add a Node action

Since we're using the command npm test to run our test, we can add a Node action to our pipeline.

In our action, we run the commands to install our package and run our test:

npm install
npm test

Step 3: Add Notifications

Finally, we can send an Email notification so that we know when the test has finished running.

Run Pipeline!

If we run our pipeline, our tests will be automated and run every time we pushed to our master branch.

Conclusion

Enzyme makes testing components and UI easy for React Apps. With writing tests, automating them can help detect errors early and save development time. Buddy CI/CD is a great tool for achieving that automation.

For more resources on how to create delivery pipelines for React apps with Buddy, please check out the following:

Thanks for reading! Cheers!