DEV Community: Jennifer Tieu

Self-Taught Developer Journal, Day 63: I Quit My First Developer Job

Jennifer Tieu — Wed, 15 Mar 2023 01:30:06 +0000

I quit my first junior software developer job.

About a year ago, I started documenting my journey learning web development.

Although it was difficult at the time to write almost every day, I found it incredibly rewarding. The experience made me want to continue writing and has compelled me to want to write about how I quit my first developer job, even though I find it nerve-wracking to share.

Background

To start, I want to clarify that I love the people I worked with and hold no ill will towards anyone. I joined the company knowing and working with some people from my previous jobs. So I felt comfortable joining the company and was excited and thankful for the opportunity. It honestly felt like a dream come true. I got to work in my dream career with people I liked. I learned so much about development. I remember in the beginning how lost and overwhelmed I was. It probably didn't help I wasn't that far into my studies before starting the job. But sometimes, you need to be thrown into the deep end to learn.

In my short time there, I learned about Node, Express, Bootstrap, SASS, JavaScript template engines, SQL stored procedures, etc. I developed and deployed a web application on a Linux server. I recreated a WordPress website. I created a login page against a client's API for their internal training site. I would have never had these experiences if I didn't take the opportunity.

So, if my co-workers or boss ever end up reading this, I hope you know how thankful I am. Thank you for helping me and guiding me. Also, thank you for the fun memories and laughs.

Why did I choose to leave?

Ultimately, it wasn't the right fit for me anymore. In a small company with many clients, it was hard to receive time with the other developers for mentorship and collaboration. The initial excitement wore off, and I was unsure if this was where I wanted to be. I also eventually felt stagnation in my own growth. While I mentally wrestled with the decision to leave, I contacted close friends for advice. I also began to look for other jobs.

As time passed, it became harder mentally to stay. After much thought and discussion, I decided to leave, take a career break, and dedicate my time to pursuing new opportunities.

I didn't take the decision lightly to leave, especially without another opportunity. But I'm hopeful to figure out what's next and explore what I want to do. To improve my developer skills and build. To take the risk, so I can be better and find something that fits me. I love being a developer, and I want to excel at it.

I hope any other junior developers who find themselves in the same situation doesn't feel like they're alone. It's hard. You think the journey ends after the first job, but sometimes it doesn't, and that's okay. To be clear, I don't recommend quitting without weighing the risks and deciding if its the right decision for you if you find yourself in a similar situation.

What do I hope for in my next role?

I'm not quite sure yet. I have an idea of things I enjoy and things I dislike. I hope to find somewhere to excel and grow professionally. I'll continue documenting my journey and building in public more. I'll be exploring what's out there and researching. I'll also be prepping and getting myself ready for the job hunt. Lastly, I'm hopeful for the future and what new adventure awaits.

Introduction to Proof of Work and Mining

Jennifer Tieu — Tue, 20 Dec 2022 05:04:11 +0000

In this article, we will be learning about Proof of Work and Mining in the Alchemy University Ethereum Developer Bootcamp Week One course.

Disclaimer: Most of the content below is a general summary and retelling of the information from the course.

Consensus Mechanisms

Before we talk about mining and proof of work, we need to understand what purpose they serve.

Blockchain networks, like Ethereum, are made up of distributed and decentralized databases consisting of many nodes (computers). In a decentralized environment, it's difficult to validate and coordinate blockchain transactions.

How do all nodes agree on the current and future state of user account balances and contract interactions?

Who gets to add new blocks/transactions to a chain? How do we know any blocks added are "valid"?

How the heck are all of these things coordinated without any central actor in place?

The solution is consensus mechanisms (consensus means a general agreement) which act as rules that the decentralized blockchain follows to stay in agreement over what is valid.

A blockchain consensus is when at least 51% of nodes are in agreement over the current global state of the network.

Proof-of-work is the consensus mechanism used by Bitcoin and previously Ethereum before they switched to using proof-of-stake.

An example of the main consensus rules for proof-of-work is:

The "longest" chain will be the one the rest of the nodes accept as the one "true" chain, determined by a chain's cumulative work. Also known as Nakamoto Consensus.
You cannot double-spend.

What is Mining?

Mining is the process of creating a block of transactions to be added to the blockchain.

The nodes in the network with the mining software, or miners, are continuously trying to extend the chain with new blocks that contain valid transactions. The network will ask the miners for their "proof-of-work" before they can add a block.

This "proof-of-work" is an output that must be lower than the network target difficulty.

A valid proof-of-work output currently looks like this in the Bitcoin network: 000000000000000000043f43161dc56a08ffd0727df1516c987f7b187f5194c6. It is a hash of the previous block header and new transactions to add to the chain.

Here's what the proof-of-work mining algorithm looks like:

Take current block’s block header, add mempool transactions
Append a nonce, starting at nonce = 0
Hash data from #1 and #2
Check hash versus target difficulty (provided by protocol)
If hash < target, puzzle is solved! Get rewarded.
Else, restart process from step #2, but increment nonce

Performing these difficult calculations requires large amounts of energy and hardware upkeep required to run mining software. The incentive for miners to perform these algorithms regularly is currency as a reward. If the consensus rules are followed, making a secure network, miners get paid.

Conclusion

In proof-of-work, miners must present a proof (in the form of a hash output on valid input data) that they expended energy in order to successfully "mine" a block and have it extend a blockchain.

Resources

Alchemy University: Ethereum Developer Bootcamp

Public Key Cryptography: Hash Message, Sign Message, Recover Public Key, and Public Key Address

Jennifer Tieu — Sun, 04 Dec 2022 20:38:44 +0000

This article will be a walkthrough of Alchemy University Ethereum Developer Bootcamp Week One course Public Key Cryptography exercises. The exercises are practice for the concepts reviewed in the Public Key Cryptography lecture.

Disclaimer: Most of the content below is a general summary and retelling of the information from the course. The exercise instructions are provided in the Alchemy course and the coding challenges are completed in the Alchemy IDE.

Hashing Messages

To use Elliptic Curve Digital Signature Algorithm (ECDSA), the first step is to hash the message before applying the signature algorithm.

The signature algorithm would be using either your private key or public key to sign a hashed message.

For example, if you wanted to vote on a proposal, you would hash the message then sign it with your private key. This would prove that the individual or group of a specific address voted on the proposal.

// turn this into an array of bytes, the expected format for the hash algorithm
const bytes = utf8ToBytes("Vote Yes on Proposal 123");
// hash the message using keccak256
const hash = keccak256(bytes); 

console.log(toHex(hash)); // 928c3f25193b338b89d5646bebbfa2436c5daa1d189f9c565079dcae379a43be

In web3, when you send a transaction to a blockchain you also sign a hashed representation of that transaction before sending it to a blockchain node.

Exercise #1. Hash The Message

The goal of the exercise is to return a hashed message using the keccak256 hash and utf8ToBytes function provided by the ethereum-cryptography library.

Steps:

Your first step is to take the string message passed in and turn it into an array of UTF-8 bytes. You can do so with the utf8ToBytes function.
Then take the keccak256 hash of those bytes and return this value.

My solution:

const { keccak256 } = require("ethereum-cryptography/keccak");
const { utf8ToBytes } = require("ethereum-cryptography/utils");

function hashMessage(message) {
    // convert message to bytes for hash algorithm
    const bytes = utf8ToBytes(message);

    // return hashed message
    return keccak256(bytes);
}

module.exports = hashMessage;

Signing the Hash

Now that we've converted the message to a hash message, we can sign it with our key.

We will be using secp256k1 from the ethereum-cryptography library to sign the message. The signature will be returned with the recovery bit that will allow us to recover the public key from the signature. The recovery bit will enable the blockchain node to take a signature of a transaction and determine which address authenticated this particular transaction.

A blockchain transaction indicates the intent of the person who signed it and also authenticates them through public key cryptography.

Exercise #2. Sign The Message

To sign the message, we will first get the hash message using the hashMessage function from the previous exercise.
Then we will use the sign method for secp256k1.

My solution:

const secp = require("ethereum-cryptography/secp256k1");
const hashMessage = require('./hashMessage');

const PRIVATE_KEY = "6b911fd37cdf5c81d4c0adb1ab7fa822ed253ab0ad9aa18d77257c88b29b718e";

async function signMessage(msg) {
    // hash the message
    const hashMsg = hashMessage(msg);
    // sign the hash message with the private key and set recovered to true to get the recovered bit
    return secp.sign(hashMsg, PRIVATE_KEY, {recovered: true});
}

module.exports = signMessage;

Important Notes:

The sign method will take the hash message along with the constant PRIVATE_KEY declared at the top of the file. However, this is not good practice. This private key is a valid key that could be used to authorize blockchain transactions. If it is published on the internet then anyone could use the key to authenticate with the private key.
The ethereum-cryptography library uses noble-secp256k1. The detailed documentation is in the readme of noble-secp256k1.
The sign method takes an optional third parameter called options. Use this parameter to return the recovered bit so that the public key can be recovered from this signature.

Recover the Public Key

After the signature is provided with all of its components (recovery bit included), the public key can be recovered. Using the public key, the blockchain nodes will be able to determine who signed the transaction that was sent to them.

For example, a transaction could indicate the user would like to send 1 ether to another address and provide a certain transaction fee. Since the signature signs the hash containing this request, it is enough to authenticate this action.

Exercise #3. Recover The Key

Given a message, signature, and recoveryBit find the public key and return it! Be sure to hash the message when passing it to the recovery method. Note: Use the noble-secp256k1 documentation to find the correct method and parameters for this one.

My solution:

const secp = require("ethereum-cryptography/secp256k1");
const hashMessage = require("./hashMessage");

async function recoverKey(message, signature, recoveryBit) {
    // hash message
    const hashMsg = hashMessage(message);
    // recover the public key by passing in the hash message, signature, and recovery bit
    return secp.recoverPublicKey(hashMsg, signature, recoveryBit);
}

module.exports = recoverKey;

Public Key to Address

Both Bitcoin and Ethereum have a process to transform a public key and turn it into an address. For Bitcoin, it uses a checksum and Base58 encoding. For Ethereum, its address is the last 20 bytes of the public key hash.

The address is different from the public key, but you can always derive the address if you have the public key.

Exercise #4: Get Ethereum Address

Let's get the Ethereum address from the public key.

First step, you'll need to take the first byte off the public key. The first byte indicates the format of the key, whether it is in the compressed format or not. The publicKey will be a Uint8Array so you can use the slice method to slice off the first byte.
Next, take the keccak hash of the rest of the public key.
Finally, take the last 20 bytes of the keccak hash and return this. Once again, you can make use of the slice method.

My solution:

const secp = require("ethereum-cryptography/secp256k1");
const { keccak256 } = require("ethereum-cryptography/keccak");

function getAddress(publicKey) {
    // slice of the first byte of the Uint8Array publicKey
    const sliceKey = publicKey.slice(1);

    // hash the rest of the public key => returns a Uint8Array keccak256 hash
    const hashKey = keccak256(sliceKey);

    // return last 20 bytes of the Uint8Array keccak256 hash
    return hashKey.slice(-20);

}

module.exports = getAddress;

Resource:

Alchemy University: Ethereum Developer Bootcamp
ethereum-cryptography noble-secp256

Public Key Cryptography

Jennifer Tieu — Thu, 01 Dec 2022 05:05:42 +0000

Continuing Alchemy University Ethereum Developer Bootcamp Week One course with public key cryptography.

Disclaimer: Most of the content below is a general summary and retelling of the information from the course.

Cryptography Historically

Until the 1970s, cryptography was used to encrypt important messages, especially within the military. These messages could not be decrypted even if they were intercepted. An example would be moving each character in a string down one position in the alphabet: "abc" outputs "bcd".

The sender would take the message and pass it through a function to create an encrypted output. But once you know secret to the function, the message was easy to crack.

As cryptography advanced over the years, more complex functions were introduced. An important improvement was the idea of a secret key.

If two parties meet prior to exchanging messages they can both agree upon a particular key. This key plus a function (like the alphabet shift example) could be used together to create a more secure encryption.

Possessing the same keys on both side of the message is considered symmetric-key cryptography. There are downsides to this method, both sides must have the same key beforehand and it was difficult to do this exchange over an unsecured channel unless they met in person.

Asymmetric Key (Public Key Cryptography)

With the rise of personal computing, people wanted to be able to communicate securely and meeting in person to exchange seemed outdated.

"How could two parties communicate securely without having met beforehand to exchange keys?"

In 1976, Whitefield Diffe proposed the idea of a public key. Initially, many cryptographers dismissed the idea since the whole purpose of an encrypted key was that it was private.

Whitefield had the idea to split the key into two, a private and public key pair, that could:

Authenticate: One key signs, the other verifies
Encrypt: One key encrypts, the other decrypts

Asymmetric Key Example

Public Key Authentication
Bob shares his public key to the world. He keeps his private key safe and secure. When he uses his private key to encrypt a message, he can share it publicly to be decrypted using his public key. This verifies that only Bob could have written this message because the only key that could have encrypted the message is the corresponding private key that Bob has. An unforgeable digital signature.
Public Key Encryption
A message is encrypted using Bob's public key that only Bob can decrypt. This means anyone with Bob's public key that is available to anyone, can securely send him a message.

"Public key cryptography is considered asymmetric encryption in that only one party has access to the private key."

RSA and ECDSA

Today, RSA and EDSCA are the two popularly used algorithms for public key cryptography.

-The RSA algorithm is based on the idea that it's very easy to find the product of two prime numbers, yet extremely difficult to factor out those two prime numbers if you have the product.
-The ECDSA algorithm uses elliptic curves. It can provide the same level security as other public key algorithms with smaller key sizes, which is the reason it's become quite popular. It is the Digital Signing Algorithm used by Bitcoin, specifically the secp256k1 curve.

Resource:

Alchemy University: Ethereum Developer Bootcamp

Cryptographic Hashes: Find A Favorite Color

Jennifer Tieu — Mon, 28 Nov 2022 03:50:32 +0000

Alchemy University Ethereum Developer Bootcamp Week one course continued with a cryptographic hashes exercise to find a favorite color.

Disclaimer: Most of the content below is a general summary and retelling of the information from the course.

Brute Force Hashing

"Cryptographic Hash Functions like SHA256 are one-way functions." This means it's easy to generate (or "find") the output from the input, but almost impossible to find the input from the output.

However, you can brute-force guess the output if you know the hashes of common inputs or create a "Rainbow Table" to determine what that input is.

Note: For security purposes, it's important to remember to use a random salt which you can add to your input to make it unguessable via the methods mentioned above!

Exercise Goal: Find the Color

Given a SHA256 hash, find the color input that would generate that hash. You can assume that all the hashes be generated only from colors provided in the COLORS array.

To take the hash of a color, first use utf8ToBytes to translate the string to bytes. Then, use sha256 to hash it.
When you want to compare two hashes, first use toHex to turn each hash from a Uint8Array to a string of hexadecimal characters.

My Solution:

const { sha256 } = require("ethereum-cryptography/sha256");
const { toHex, utf8ToBytes } = require("ethereum-cryptography/utils");

// the possible colors that the hash could represent
const COLORS = ['red', 'green', 'blue', 'yellow', 'pink', 'orange'];

// given a hash, return the color that created the hash
function findColor(hash) {
    for (let i=0; i < COLORS.length;i++){
        let color = COLORS[i];
        // translate string to bytes
        let colorBytes = utf8ToBytes(color);
        // hash string
        let colorHash = sha256(colorBytes);
        // compare hashes
        if (toHex(hash) === toHex(colorHash)){
            return color;
        }
    }
}

module.exports = findColor;

Resource:

Alchemy University: Ethereum Developer Bootcamp

Blockchain and Crypto

Jennifer Tieu — Mon, 28 Nov 2022 03:47:12 +0000

Alchemy University Ethereum Developer Bootcamp Week one course begins with an overview of blockchain and crypto.

Disclaimer: Most of the content below is a general summary and retelling of the information from the course.

Blockchain Network

The blockchain is the protocol connecting a network of machines. Each network machine or "node" will run the written code.

The blockchain enforces these rules or codes, a "smart contract".

Purpose of the Blockchain

"The purpose of the blockchain is to have a network of computers agree upon a common state of data". A person or organization may participate in this process, but they can't control it.

A generally used term, consensus, describes a network agreeing on the state of the data.

The most common use case for blockchains is cryptocurrency.

Bitcoin: The First

Bitcoin was the first successful blockchain and cryptocurrency.

Bitcoin works by using all these components together:

Proof of Work (Security)
Mining Rewards (Financial Incentives)
Public Key Cryptography (Authentication)
Linked Data Structure (Chronology)
Peer-to-Peer Network (Permissionless)

Why is blockchain needed for cryptocurrency?

When exchanging money between individuals, trust is usually needed to ensure the money is given/received. The blockchain was invented as a solution for trust between individuals or groups.

In 2008, an unknown person or persons under the pseudonym Satoshi Nakamoto released a whitepaper on Bitcoin. It described "a system that would create a peer-to-peer network for exchanging value".

The paper describes a chain of blocks tied together cryptographically, or blockchain.

Smart Contract Blockchains

Smart contract blockchains allows developers to decentralize where the code runs.

Decentralization isn't about the code, but how the code is executed. When the code is compiled and deployed to a decentralized blockchain, it is a smart contract. The code becomes publicly available on the blockchain, and the network nodes will enforce the code logic through the financial incentives of the blockchain protocol.

Crypto

Before cryptocurrency, there was crypto.

Two key primitives to keep in mind for blockchain development are Cryptographic Hashes and Public Key Cryptography.

Cryptographic Hash Functions

"A hash function is a function which takes an input of any size and turns it into a fixed size output."

The input can be any data type: number, image, video, string, etc.

Cryptographic hash functions need five specific properties:

Deterministic - One specific input always maps to the same specific output
Pseudorandom - It is not possible to guess the output based on the output of similar inputs
One-way - If someone gives you a new output, you could not determine an input without guessing
Fast to Compute - It must be a quick calculation for a computer
Collision-resistant - The chance of a collision should be infinitesimally small

Two important use cases for Hash functions for blockchain developers are Commitments (Protocol & Smart Contracts) and Proof of Work.

For blockchains, having a unique, fixed-sized representation of output regardless of input size is critical for saving space.

Resource:

Alchemy University: Ethereum Developer Bootcamp

My Implementation of The Odin Project Etch-A-Sketch

Jennifer Tieu — Sun, 27 Feb 2022 04:27:59 +0000

Requirements

The assignment states to create a webpage with a 16x16 grid of square divs. Instead of manually adding the divs, the requirements ask to add the divs using JavaScript so it is more dynamic and we can adjust the number of divs later.

A hover effect will need to be added to mimic the behavior for an Etch-A-Sketch where the squares that the mouse hovers over will change appearance. The Odin Project also provides some tips for completing this assignment.

Lastly, a button will need to be added to the top of the screen to clear the screen and prompt the user for the number of squares for the new grid. For example, entering 64 will generate a 64x64 grid. The requirement states to limit the input to 100 since the greater number of squares generated will affect the web page performance.

Planning

So the first thing that came to mind after setting my HTML, CSS, and JS files was figuring out how to add the divs with JavaScript.

The few times I've had to do DOM manipulation, I've added the elements using the appendChild method. Using the appendChild method, I would create a loop that would append divs to a parent element to create the grid based on the input number. I want to see if there's another way to do it, but I'll start with this idea first.

Layout

HTML and CSS Styling

For my layout, I decided to use Flexbox to arrange the elements and then use a CSS grid for my Etch-A-Sketch body. My main elements were composed of a header which contains the clear button and then a grid container.

To center my elements, I needed to have the body and html element height to take up the full page. I found this article that helped explain how to set the html and body elements. I set the body min-height to 100vh which means it will be at least 100vh and it can also grow beyond that.

After centering my elements with flex, I had trouble setting the grid container size. The grid container should have a defined size and then generates a new grid when the user enters a number in the container. The grid container is static and the grid dimensions are dynamic. So the user may put whatever number below 100 and the grid should still take up the same amount of space in the grid container.

I put the grid container height and width both at 50% and it wasn't behaving like intended. The width was set to 50%, but the height wasn't changing at all.

After some searching, this StackOverflow post helped clear up why setting the percentage for height wasn't working for the grid container. The min-height: 100vh does not set the height for the body. So, as a percentage, there's no parent height for the grid container to calculate off of. To fix this issue, I also set the height of the body to 100vh and then the grid container height and width percentage worked. Although, I'm a bit unsure of why width didn't need to be explicitly set. It seems to already take the full width of the screen or viewport.

JavaScript

The JavaScript portion was fairly straightforward once I figured out the grid.

For the grid, I made a function that would take a number as an input and create the grid based on the input number. This function created the div elements to be appended to the grid container and set a class for each. It also set the grid container grid-template-columns and grid-template-rows values based on the input number.

Next, I added created functions and event listeners to update the grid when a mouse hovers over the grid box. The event would cause the grid box color to change to black.

Finally, I made functions for the clear button and resets button. I added the event listener on the button instead of in the JavaScript file. The clear button function iterates through each grid box and reset the background color value to null. The reset button function prompts the user to enter a number. If the number is valid and below 100, it will remove the old grid boxes and add new ones based on the new number using the createGrid function. Otherwise, it will re-prompt the user to enter a number if it's over 100 or do nothing.

Conclusion

Once I completed the JavaScript, I went back and added some additional styling.

Overall, the project was a bit challenging for me in regard to CSS. I'm still trying to learn and understand how CSS properties affect each other, but it was a fun challenge. Now to the next assignment.

Self-Taught Developer Journal, Day 62: New Beginnings

Jennifer Tieu — Wed, 16 Feb 2022 05:36:31 +0000

I finally reached 100 days of #100DaysOfCode. It is crazy how much can change in about 100 days.

I initially started this series as a motivator for myself as I documented my self-developer journey. For a long time, I always wanted to make this career pivot into tech and it wasn't until recently that I was at a place in my life where I felt like I could take the leap. A big factor that helped me realize this was joining Tech Twitter and doing #100DaysOfCode. I got to witness a community of individuals trying to start a career in tech, who loved learning, and supported one another. It didn't take long into #100DaysOfCode for me to realize this was something I wanted to pursue. That creeping what-if that always lurked in the back of my mind finally sprung to life. I'm going to do it, I'm going to become a developer.

Once I made the decision, I discussed it with my close friends and family who were all very supportive. I won't lie, there was an element of fear of worst-case scenarios, but I didn't want fear to stop me from pursuing my dream so I tried my best to be prepared. It was a really stressful time, I reached out to as many people as I could for advice with almost a sort of desperation like I was hoping someone could tell me the right path to success. I poured over podcasts, articles, readings, boot camp reviews, etc. with everyone giving different advice. It didn't take long for me to see that there is no perfect answer. Everyone experiences and walks their own path in life. There's no perfect answer on how to accomplish your dreams or become a developer.

I came up with the best plan on what made sense for me at the time. That plan is the first article I posted in this series. Looking back at it now, a few things changed and a few things didn't and that's okay. I learned a lot and I'm proud of how much I've grown in a short span of time.

So that leads me to my next bit of news, I wasn't sure if I wanted to share this, but I felt like it wouldn't be right to not mention it. I accepted a job as a Junior Software Developer and will be starting in March. I won't go into exact details, but basically, I was offered an opportunity to work for the software development company that my current company currently employs after I brought up my desire to change careers. I feel extremely blessed and very lucky for the opportunity. I know how hard it can be to break into tech from the many stories I've read.

However, I don't want anyone to take away from this story that this is what it takes to break into tech or anything. As I said, everyone's life and story are different. But, what I do want people to take out of this is what I've learned from this experience.

Don't be afraid to talk to your boss or manager, opportunities might be there and you might not realize it. I am thankful to have a boss that understood where I was coming from and was willing to support and help me with my career change.
Don't be afraid to reach out and ask questions, you never know who's willing to lend you a hand. I initially approached the Copresident of my new company asking for advice for becoming a developer. I didn't ask for a job or anything and was not expecting to be offered one.

I accepted the offer in January. While I was elated to land a job being able to do something I liked, I didn't feel the need to stop coding every day. I didn't want to stop blogging. I didn't feel the need to stop at all. So what does this mean? It mean that getting a job wasn't the end goal for me. I actually really enjoy learning about web development. I found out I like blogging a lot. I like sharing and helping others learn. So for people following, this isn't really a path on how to land a developer job. It's about someone who enjoys learning web development and building stuff.

With that, I am ending this series, but I will continue blogging. To be honest, I wasn't sure what would be a good time to end this because the learning never stops, but I wanted to start writing with more time dedicated and not for consistency. It's been an amazing journey for this Self-Taught Developer Journal, but now it's time for New Beginnings.

Thank you for reading.

Self-Taught Developer Journal, Day 61: TOP Building Rock Paper Scissors UI cont.

Jennifer Tieu — Tue, 15 Feb 2022 04:50:43 +0000

Today I finished my Rock Paper Scissors UI.

I added a rounded border to imitate buttons for the game choices.

Then I worked on add the image selection for the player and computer. I played around with creating an element, setting attributes, add the source image, appending and removing the child elements or node.

Resources

The Odin Project
Revisiting Rock Paper Scissors

Self-Taught Developer Journal, Day 60: TOP Building Rock Paper Scissors UI cont.

Jennifer Tieu — Mon, 14 Feb 2022 03:19:46 +0000

Today...

I finished redoing my layout. First, I commented out my original HTML code up to the grid-container class so I could experiment with using CSS grid. I created some temporary divs to make a 3x3 again to test the grid layout

Once I got the grid set up how I wanted it, I uncommented and removed the parent elements I used to group my original classes. Now I have 9 block level classes which equated to my 3x3 grid container instead of redundant groupings.

When I was messing with the mobile view, I got frustrated because grid container not responding to its parent flex container sizing. I wasn't able to figure it out and plan to revisit it at a later time.

Next, I used images for my rock, paper, and scissors buttons I got for free from Pixabay. I added the Orbitron font from Google Fonts to my file and used it to style my text.

I am almost done with the UI. I just need to do a few more style edits and also have the game use the images when a selection is made.

Resources

The Odin Project
Revisiting Rock Paper Scissors
https://pixabay.com/images/search/rock-paper-scissors/

Self-Taught Developer Journal, Day 58-59: TOP Building Rock Paper Scissors UI cont.

Jennifer Tieu — Sun, 13 Feb 2022 04:19:24 +0000

Today I continued working on the styling of my Rock Paper Scissors UI.

While I trying to add some finishing touched to my CSS layout, I realized I didn't really like how to set it up the first time. I think I might've been too focused on grouping the elements and not really understanding grid well. Now, I want to rearrange my layout.

CSS Games: Flexbox Froggy and Grid Garden.

I decided to do practice some CSS through games I found posted by Sajal Sharma on Twtter. Specifically, Flexbox Froggy and Grid Garden. It was fun practicing in a game format and I feel a lot more comfortably using flex and grid now. I'm hoping to apply flex and grid better when I rearrange my HTML and CSS layout.

Mike Chen and Allyse Arucan Twitch Stream

I really enjoy watching developer streams. It's so helpful to me to watch an experience developer talk through their thought process, tips, and visually seeing what their doing. I'm still looking for more streamers to follow, specifically frontend developers.

I've been watching streams by Mike Chen and recently he did a live code review with Allyse Arucan which I thought was very helpful. I'm still going through it, but I took a few notes on things that jumped out to me.

When creating CSS classes, think about where else you can use it in your code base (reusability)
- For example, reusing text styling and creating a class for it so it can be used for other elements
In the Developer Tools, you drag HTML elements to move them in a block of code
- use the "H" key to hide elements and determine hierarchy

There are a few more tips I forgot to note, but planning to watch it through again.

Resources

The Odin Project
Revisiting Rock Paper Scissors

Self-Taught Developer Journal, Day 57: TOP Building Rock Paper Scissors UI cont.

Jennifer Tieu — Thu, 10 Feb 2022 04:59:35 +0000

A short post today. I started updating the arrangement of my HTML elements. I mainly added more classes, nesting them, and then using flexbox to place the elements in the desired spots.

I'm still working on centering the player and computer choices. After, I will try and find some images for the buttons to use.

Resources

The Odin Project
Revisiting Rock Paper Scissors