DEV Community: Yani A.

Implement a Payment Solution Provider

Yani A. — Sat, 26 Mar 2022 03:55:28 +0000

When do you need to implement a payment system? Which payment solution provider is the best to use? In this blog, I attempt to figure out which payment solution provider to implement onto your app or website, and why.

When Do We Use a Payment System

I was inspired to write about this topic after meeting with a founder of a start-up I'm really interested in freelancing for. He wanted to convert his websites written in PHP on WordPress natively and he wanted to implement Stripe as a payment system. As a practice, I decided I'd try my hand at building an app that gave me an opportunity to practice how to implement the usage of Stripe. I chose to refer to JavaScript Mastery's "ECommerce Web Shop - Build & Deploy an Amazing App | React.js, Commerce.js, Stripe" video, which was extremely helpful. It also gave me the chance to try out Commerce.js. In addition, it was developed responsively.

As mentioned above, when do we need to use a payment system in our apps or websites? Usually, we would need to incorporate this essential function of being able to make a payment for an item or service when it's an e-commerce app or website. This functionality allows users to conveniently make a payment for any items or services that they choose to purchase. In some cases, a transaction needs to be made when it involves investing funds or online banking; not necessarily to purchase anything.

Types of Payment Solution Providers

The most common payment solution provider that has been a catalyst in the scene is PayPal. PayPal used to be so advanced back in the day, but from exprience, they've now fell short with their cyber security and customer service; they seem to side with the seller in most cases, making it difficult to claim for items that were not received or when receiving damaged goods.

Today, more and more payment solution providers have sprouted making it hard to select which one to use. You could also opt to use multiple payment solutions, so the user can have the liberty to select which one is the most convenient. According to Kilpatrick, S. of BigCommerce, the 7 examples of e-commerce payment solutions (besides PayPal) are:

Stripe
Square
BlueSnap
Amazon Pay
Klarna
Sezzle

Conclusion

To summarize, whichever payment solution you end up using on your app or website really depends on what you and your users' needs are. Therefore, there really isn't a wrong choice.

Things I Wish I Knew Before I Enrolled in a Coding Bootcamp

Yani A. — Fri, 18 Mar 2022 05:34:15 +0000

For the longest time, I’ve always wanted to learn how to code. I never had the time nor the funds. When I got furloughed at the peak of the pandemic, I thought it was the perfect time to enroll in a part-time Software Engineering bootcamp.

This blog is going to speak to those who are thinking of doing the same thing. I hope this better prepares you for the bootcamp, that would in turn, better prepare you for the job hunt that follows. This is only the tip of the iceberg my friends.

Top 11 Things I Wish I Knew

1. Do ALL of the pre-work
The bootcamp that I went to requires you to complete a pre-work course before starting the real course. Doing the pre-work in advance gives you the much needed familiarization, and practice to make you better prepared to take on the intense learning that's to come.

2. Concentrate
Fully focus on the course and don’t try to take another course at the same time. During the peak of the pandemic there were so many free courses available, so I jumped at taking a pre-course on Digital Literacy, too. Although, it wasn’t as difficult as coding, the assignments required a lot of time which took from the time I could’ve been more immersed in the bootcamp.

3. No Cheating
Do not look at any solutions until you’ve tried solving a problem on your own for at least 20 minutes (as advised by instructors). Exhaust all resources before succumbing to looking at the solution (ie documentation, Stack Overflow, pair programming). Your mind will better grasp the concepts and the process of getting to where you need to be.

4. Don't Be Afraid or Shy to Ask Questions
Ask as many questions as you want to to your instructor and tech support team. No question is a stupid question. It is difficult to build the courage to ask, but soon you'll be a natural at it. Always remember your goal is to learn as much as possible in a short duration of time.

5. Take Advantage of All the Resources Provided
Schedule as many 1:1s as you can with your instructor. That's what they're there for. Utilize all the resources that are given to you. My fellow cohort mate also reminded me, "to make your money's worth!" Even though we had only 10-20 minutes at the most, you can that extra attention to ask something specific or help to unblock you from an error.

6. Be a Few Steps Ahead
Try to cover two labs in advance of that particular week's curriculum. Our curriculum actually gave a lot of hints as to how to better understand the previous labs. Additionally, start with your project conceptualizing from the beginning of the module and implement them as you go along, so you really understand what each lesson in the lab is used for. In turn, it will be faster to complete. Plus, you’ll be able to talk about your project during your assessments with ease. This will give you ample time to meet not only all the minimum requirements, but fix any bugs and make your project more polished.

7. No Screen Time
Sacrifice your screen time, be it social media or watching any shows or movies. It can wait. I'm still trying to kick the habit and be better with my screen time management.

8. Read
Take at least 15 minutes of your day to read any programming books like You Don’t Know JavaScript or The Ruby Programming Language. Supplementing your knowledge outside of the bootcamp will give you that extra boost to stay on track with the fast paced course.

9. Data Structures & Algorithms
Start studying data structures and algorithms for fun, way before your job hunt. Join all the study groups that work with your schedule and be consistent with attending them. Even exposing yourself to the thought process of others, will give you a head start on how to engrain the patterns in your brain for tech interviews.

10. Network, Network, Network
Start networking and join as many communities out there either on Slack, Discord, LinkedIn or whatever else you feel comfortable with. I know a few alumnus who weren't the networking type and opened a LinkedIn just for the sole purpose of finding a job. As for me, I love meeting new people and making connections so it came naturally to me, but that can also be borderline distracting because I feel obligated to check every channel on Slack, and check every message.

11. Prioritize
Be as helpful as you can, but don't forget to prioritize on your needs first. Perhaps what you can do is you can help others only after you've completed your labs and projects.

Reality Check

Of course, this is all easier said than done. Some of us are parents, caregivers, veterans with PTSD, have learning disabilities and other personal issues. I had cohort mates that caught Covid-19 so that took a huge chunk out of their productivity. Life happens and anything can happen at the most unexpected of times.

As for me, I had to resit my JavaScript module due to a sudden change of instructors and that threw me off. I also gave birth to my second child just as I was passing my JavaScript assessment, so I of course had to take a leave of absence for a month before continuing on with my last module.

Conclusion

We all have different reasons why we want to sign up for a coding bootcamp. Be it to learn Software Engineering, Data Analytics, Data Science, or UI/UX. Maybe to be able to create apps, a career change, provide a better life for your family or to pivot from an existing tech job. We equally come from different circumstances and have our own struggles that will effect our productivity and it can be beyond our control. I learned that you can’t expect people to understand, but always be kind regardless because you can never compare what you’re going through with what other people are going through. Try to empathize, listen and sincerely help whenever you can because that is you paying it forward for all the times someone was there for you. Enrolling in a coding bootcamp is not an easy path to take, but it sure is a rewarding one! I wish you all the best!

*I hope to be starting my first job soon and would be open to help. Please feel free to get in touch with me on LinkedIn if you need help with anything or have any questions that can make this transition easier.

What in the CRUD?

Yani A. — Sat, 12 Mar 2022 03:18:45 +0000

The title is also what I would be swearing under my breath when I couldn’t get a CRUD function to work.

What are CRUD functions? When do we utilize them? How do we make them work?

In this blog, I go back to the basics and try to answer all these questions about what CRUD is.

So, what is CRUD?

CRUD stands for:

Create
Read
Update
Delete

According to Sumologic's glossary, CRUD refers to an acronym that refers to the four functions mentioned above, that are necessary to implement a persistent storage application.

Referring to the example in Altvater, A.'s article in Stackify by Netreo, Create performs the INSERT statement to create a new record. While Read, SELECTs the table's records based on the primary keynoted within the input parameter. Update executes an UPDATE statement on the table based on the specified primary key for a record within the WHERE clause of the statement. DELETE, DELETEs a specified row in the WHERE clause.

In addition, each letter in CRUD can also be mapped to an HTTP protocol method, where:
CREATE = POST
READ = GET
UPDATE = PUT
DELETE = DELETE

Why is CRUD important?

Can you recall any of these functions you used in your projects? Did you need all of them, or just one? What's the significance of each depending on what you want to do in your app? Just in case you need a refresher, here's a quick tutorial by Johnson, J. of BudiBase on "How to Build a CRUD Application".

CRUD operations are essential for both developers and end-users as it provides security control, for one. With this in mind, it is more performant versus SQL statements. Unquestionably, it's tried and tested, as it's a recognized pattern and recognizable by most developers.

Conclusion

I hope this was a comprehensive resource to better understand what CRUD is, and you can better implement it in your future projects!

String Manipulation Methods to Memorize

Yani A. — Sat, 05 Mar 2022 04:38:32 +0000

A common tech interview question I’ve received a lot is on string manipulation. This involves a request to return a desired value out of a given string.

In this blog, I list down the most common string manipulation methods to memorize so you can easily answer such questions when asked in tech interviews.

Stringing Along

I was recently asked this coding challenge in an interview which was fairly easy if I wasn't so nervous and had only studied data structures and algorithms the week before.

// Write a function called "abbreviate" that outputs a string.  
// Given a string, keep the first and last letter and replace the letters in between by the length. 
// e.g. internationalization => i18n, localization => l10n

It took me longer than usual to remember what methods to use to achieve the output desired. Of course, using the handy console.log, I was able to test out some possible methods, but I still had to search for specific ones online before getting the solution. Below was what I came up with:

const abbreviate = (input) => {
    return input.length < 3 ? input : [input[0], input.length - 2, input[input.length-1]].join(''); 
};

const result = abbreviate("internationalization");

console.log(result);

This in turn made me reevaluate ways to etch these common string manipulation methods in my head. As a result, I'm compiling the cheat list below to assist with that.

Common String Manipulation Methods

str.length

returns the length of the string

let str = "zen"; 
console.log(str.length); // outputs 3

charAt(index)

treats the string as an array of characters
retrieves the character at the index provided
used to check string for consistency
the last index is string.length - 1

let str = 'Strings';
console.log(str.chatAt(3)); // outputs i 
console.log(str.charAt(6)); // outputs s

concat(string)

concatenate two string together into one
used to append to a string or combine them

const str1 = 'purple';
const str2 = 'balloon'; 
console.log(str1.concat(str2)); // outputs 'purple balloon' 

// or by inserting string variables into another string to achieve cleaner code 

const str1 = 'purple';
const str2 = 'balloon';
const sampleStr = `${purple} ${balloon}`; 
console.log(sampleStr); // outputs purple balloon

includes(string)

check whether or not a string contains a substring

const str = 'what up';
console.log(str.includes('what')); // true
console.log(str.includes('down')); // false

match(regex string)

checks if a string matches a regular expression

const firstName = "Matt";
const badFirstName = "Matthew4";
const nameRegex = /^[a-zA-Z]+$/ 

console.log(firstName.match(nameRegex)); // true
console.log(badFirstName.match(nameRegex)); // false

replace(stringToBeReplaced, stringToAdd)

takes an occurence of a character in a string and replaces it with another character

const userInput = '917 716 4543'; 
console.log(userInput.replace(' ', '-')); // 917-716-4543

split(string)

return an array of substrings when needing to split a string

const seeyou = "See You"; 

const seeYouSplit = see.split(' '); 
console.log(seeYouSplit); // ["See", "You"]; 
console.log(seeYouSplit[0]); // "See"

substring(index, index)

when needing to split a string at a certain index or range of indices, you pass this function in the index of the element you want to start at, as well as the index in the string you want the substring to end at

const goodbye = 'Goodbye Friend'; 
console.log(goodbye.substring(1, 4); // ood

toLowercase()/toUppercase()

used to make sure the string isn't case-sensitive

const firstName = "Yani"; 
console.log(firstName.toUpperCase()); // YANI

trim()

removes whitespace from any string

const strWithSpace = 'Yani '; 
console.log(strWithSpace.trim()); // outputs 'Yani'

Conclusion

The main take away from this blog is that it's always smart to strengthen your foundational knowledge first before embarking on more complex topics like data structures and algorithms. I hope this blog was helpful!

Top 10 Handy JavaScript Tips To Know

Yani A. — Wed, 23 Feb 2022 00:19:06 +0000

This blog was inspired by David Arias Fuentes' tweet: "15 Magical JavaScript Tips for Every Web Developer". I loved it so much, I had to share it with my network. I had DM'ed him beforehand before publishing this post. Please follow him for more helpful posts!

1. Flatten the array of the array

This tip will help you to flatten a deeply nested array of arrays by using Infinity in flat.

2. Easy Exchange Variables

You probably swap the two variables using a third variable temp. But this tip will show you a new way to exchange variables using destructuring.

3. Sort Alphabetically

Sorting is a common problem in programming, and this tip will save your valuable time by writing a long code to sort a string alphabetically.

4. Generate Range of Numbers

Suppose you want to generate a number between a specific range. The first approach you will use is the loop. But this tip will save you valuable time by doing it the easy way.

5. Shorten the Console log

Tired of writing console.log() again and again? This tip will show how to shorter your console log and speed up your coding.

6. Shortening an Array in an easy way

This is an awesome tip for web developers to shorten an array in an easy way. You just need to use the length method by passing a number that denotes the new size of your array.

7. Use isNumber

This tip will show how to check whether a value or variable holding a number ( integer, float and etc ) or not.

8. Use isString

This useful tip will show you how to check whether a value or data is in string format or not. This comes in handy when you request data from the server and want to check the data type.

9. Check Null

In Programming, sometimes we need to check whether a result or data is null.

10. Merge Array into One

This tip will be useful when you need to combine the two arrays of any size into one. You need to use the JavaScript concate method for this.

Cover photo: Caspar Camille Rubin @casparrubin

Single Responsibility vs Separation of Concerns

Yani A. — Sat, 19 Feb 2022 00:33:28 +0000

I was thinking out loud the other day and was wondering what the difference between single responsibility and separation of concerns is. Are they similar at all?

Let's go back to the basics and try to review both of what these two major principles stand for.

Single Responsibility

Single responsibility principle (S.R.P.) is one of the five principles of object oriented programming (O.O.P.). Does S.O.L.I.D. ring a bell? Well, it stands for the "S" in S.O.L.I.D. It's an extremely useful thing to remember for early stage developers like myself. The end goal is always striving for maintainable code.

How does S.R.P. do this, you ask? It gives a function in a class only ONE reason to change, which is the sole responsibility that that function has. This in turn makes your code more modular.

Separation of Concerns

Separation of Concerns (SoC) also known as Aspect-Oriented Programming is a design principle for separating programming into distinctive sections so each section addresses a specific concern.

Visualize a Model View Controller (MVC) pattern, if you will. Each section is divided by modules, and each module should be in charge of a task. With each module focusing on just one task, this makes the flow of data more efficient and again easy to maintain. This quick video gives you a better idea of what this actually means.

Conclusion

In a nutshell, the main difference between Single Responsibility Principle and Separation of Concerns is that SRP is isolated in a class in the form of one function, where as SoC is more spread out to how an MVC is structured.

Can You Git It?

Yani A. — Sat, 12 Feb 2022 04:29:59 +0000

What is Git? Why do you always face issues when trying your hand at Git commands? This blog tries to make it, make sense.

Not to be mistaken with GitHub, a host for software development and version control using Git.Git is the most popular modern version control system used by developers today.

Developed in 2005 by Linus Torvalds, Git is actually an actively maintained open source project. Why does that name ring a bell? Well, Torvalds is the creator of the well-known operating system kernel, Linux.

Hard to Git

Now, what would you say are the most common issues you face when using Git are?

Clean local commits
Undo local commits
Remove a file from Git without removing from the file system
Reverting pushed commits
Avoid repeated merge conflicts
Find a commit that broke something after a merge

I came across this helpful cheat sheet from a Slack channel which I've been meaning to print out and stick on the side of laptop until I memorize it. Also, if anybody knows the source of where it came from, please let me know:

A few commands not mentioned on the list are (not the greatest list in retrospect). Let's remake a personalized cheat sheet of what commands you would use often:

git status: Displays the state of the working directory and the staging area
git log: Displays a record of the commits in a Git repository (add log # to list out specific log, press the "D" button to scroll down)
git diff: A multi-use Git command that when executed runs a diff function on Git data sources (add log # to access that specific log)
You can add relative path just public to the command for example, to locate a file or folder on a file system starting from the current directory
[git stash](https://www.atlassian.com/git/tutorials/saving-changes/git-stash#:~:text=git%20stash%20temporarily%20shelves%20(or,re%2Dapply%20them%20later%20on.): Temporarily shelves (or stashes) changes you've made to your working copy so you can work on something else

Check out other handy Git commands that we might not know of here.

Clearly, we all need a Git refresher course, and thanks to FreeCodeCamp this is comprehensive one.

Conclusion

As they say, the best way to get better at something is by practicing. Until then, I hope this can be a form of reference whenever you forget what Git command to use.

MeXiCaN WaVe

Yani A. — Sat, 29 Jan 2022 09:21:18 +0000

After a week of declaring my job search, I was fortunate enough to be getting a couple of phone screenings and even a back-to-back double tech interview just last week. It was my first EVER tech interview(s) and I could have been better prepared. Plus, the nerves did not help whatsoever. It was two 1-hour long interviews with a half-hour to recollect myself. I will try to attempt to do similar code challenges to the ones I failed horribly in my tech interview in future posts (which I will eventually link here) to redeem myself from the turmoil of that day. I guess it's a right of passage!

One was converting USD to a denomination or something to that effect, and the second one was returning the frequency of sequential characters. The closest challenges that I could find to them are this (the original one was much more complex) and this.

Let's do the challenge!

Anyway, today I'm giving myself a little bit of a mental break by trying my hand at doing a fun, simpler code challenge taken from Codewars. There's nothing like a code challenge that I can do to build up my self-esteem again.

Task

In this simple Kata your task is to create a function that turns a string into a Mexican Wave. You will be passed a string and you must return that string in an array where an uppercase letter is a person standing up.

Rules

The input string will always be the lower case but may be empty.
If the character in the string is whitespace then pass over it as if it was an empty seat

Example

wave("hello") => ["Hello", "hEllo", "heLlo", "helLo", "hellO"]

I'm trying to be better at jotting down what my thought process is before trying to code.

# input = str
# use input size to determine how many iterations needed
# capitalize letter in first position, append that to new arr
# output is an arr of strs with each character capitalized by position
# algo: create a range from 0 to string.size
# call 'map' on that range with 'index' as a parameter
# use str element reference and concatenations to convert character at index position into uppercase
# next if str[index] == ''
# str[0...index] + str[index].upcase + str[index + 1..-1]

I wrote this code in Ruby because it felt like forever since I was so caught up with JavaScript, React, and TailwindCSS. First off, test out any possible methods that can be used in irb:

Set string = "hello" in the console:

Now let's write it out. Don't forget to test it to make sure it's doing what it's supposed to:

I ended up using .each instead of .map, since I'm not transforming anymore and used a next if, so it skips that particular number.

And ta-dah! It returned true. How did you do? What could have be done better?

def wave(str)
result = []

(0...str.size).each do |index|
next if str[index] == ' '
result << str[0...index] + str[index].upcase + str[index + 1..-1]
end
result
end

p wave("hello") => ["Hello", "hEllo", "heLlo", "helLo", "hellO"]

Redux Paradox

Yani A. — Sun, 31 Oct 2021 03:45:02 +0000

Coming to the end of my part-time software engineering course with Flatiron School I was met with a challenge of incorporating Redux in my final project using React and JavaScript on the frontend and Ruby on Rails for the backend.

Redux is a state management tool that is compatible with JavaScript applications. It is supposed to make it easier for when you need the same state to be shared between multiple components and reflected in different parts of the application. It also comes in handy when the application states change frequently and different components can initiate changes simultaneously.

Seeing that my application is far from having a medium-to-large codebase with several developers working on it, it was an added step that I needed to make, that kind of defeated the whole purpose of Redux being a tool that improves the developer's experience. It was good to know how it works with React though.

In my final project, I am aiming to build an ecommerce application that is promoting Malaysian made handicrafts and products to help support micro businesses in rural areas in the country. I want it to help build the overall nation's economy and help increase job opportunities for locals. I had used Redux specifically for five cases:

FETCH_CATEGORIES
ADD_CATEGORY
ADD_ITEM
DELETE_ITEM
EDIT_CATEGORY

First install Redux:

Redux + Plain JS template

npx create-react-app my-app --template redux

Redux + TypeScript template

npx create-react-app my-app --template redux-typescript

OR install it as a package on NPM or in a Node application:

NPM

npm install redux react-redux

Yarn

yarn add redux

In your index.js file is where all the "action" happens. This is where you import {createStore} from 'redux'. Then, set up your Redux store by declaring store assigned to createStore(). To enable React to associate with the Redux store is by using the React-Redux package by importing {Provider}. It will wrap the <App/> and pass in the store as a property.

Next create a reducers and actions folder, where you will create say a rootReducer file and an action creator file. In the rootReducer you would need to declare it passing in a state and an action
as arguments, returning the state. Then you would need to define an initial state. Lastly, at the bottom of the file, write export default rootReducer. Not forgetting to import the rootReducer in the index.js. You can then pass in the rootReducer in the createStore function. Following this, you're able to {connect} to components.

Other things I grew to like while building this project was client side routing and presentational components. The longer I learn how to code the more I’m veering towards front-end development. Perhaps I owe it to all those years in the media as an editorial assistant and writer, where I was fixated on the perfect magazine cover, photo shoots spread and layouts for our articles. Over a decade and some change, I’ve gone full circle and back to obsessing over presentation. Queue, the “presentation component”. Being mostly stateless, they’re simple and beautiful in doing what they do best - receiving props from their parent components and rendering! There’s just that satisfaction of having it all “work” for a change. With that said, let's hope we're able to leverage on using React and Redux in our near futures.

Resources and citation on REDUX:

item 1 Setting Up The Middleware
item 2 Complete React Tutorial (& Redux) #39 - Setting up Redux in React by The Net Ninja
item 3 Learning the basics - ReactJS and Redux
item 4 Using Redux in React apps: When and why you need Redux
item 5 Why Use React Redux?