{"componentChunkName":"component---src-templates-about-page-js","path":"/about/","result":{"data":{"sitePage":{"id":"SitePage /about/"}},"pageContext":{"url":"/about/","relativePath":"about.md","relativeDir":"","base":"about.md","name":"about","frontmatter":{"title":"About Me","img_alt":"Felipe Image","about-img":"images/headshot.jpg","seo":{"title":"About Me","description":"This is the about me page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"About Me","keyName":"property"},{"name":"og:description","value":"This is the about me page","keyName":"property"},{"name":"og:image","value":"images/about.jpg","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"About Me"},{"name":"twitter:description","value":"This is the about me page"},{"name":"twitter:image","value":"images/about.jpg","relativeUrl":true}]},"template":"about-page"},"html":"

Before becoming a software engineer I worked with nationally recognized organizations including the American Bankers Association and the Congressional Hispanic Caucus Institute. After working over 4 years at Capitol Hill in human development and then 3 years in eLearning for the banking industry, I felt I was ready for the next challenge. As an entrepreneur and creative individual, I was moved by technology and its potential to bring positive change in our world🌎.

\n

How I prepared to break into tech was a process that spanned a period of over a couple of years. First I completed Information Systems studies at George Washington University, Business School. There, I participated (and won 🏆) many entrepreneurship competitions that brought a perspective of the importance of tech in understanding and bringing solutions to the problem domain.

\n

Thereafter, I completed a coding bootcamp with the number one school in the country for 2019-20, namely Flatiron School. We focused on several stacks, ranging from Ruby/Rails to JavaScript and React. I built several high quality projects ranging from Catoro (a professional coffee cupping app), a street artist tracker, an online iChing and even published a Ruby Gem that has been downloaded over three-thousand times to date! 📈. Right after graduation, I doubled my portfolio and added the MERN stack to my skills by completing various Node/Express/MongoDB projects. I also further increased my understanding of other libraries including Gatsby, SCSS and serverless technologies such as Firebase.

\n

Currently I'm working as a full stack developer for a large scale application that uses Angular for the frontend and NestJS powered by GraphQL for the backend. I'm also working on expanding my React Native skills to launch Catoro coffee app FREE on the app store!

\n

I do not forget my commitment to give back and bring positive change🤝🏼. So these days you can also see me volunteering for Bridge of Kindness non-profit, assisting their MERN donation platform or even being featured as a technical writer on CareerKarma, a famous tech website for non-traditional students, to help them break into tech! 👨🏽‍💻

\n

I'm always open to lend a hand, don't hesitate to connect and say hi 👋🏼!

\n

Reference

\n

I use PDF Snake to prepare blog documents for professional printing. Try it now too!

","pages":[{"url":"/style-guide/","relativePath":"style-guide.md","relativeDir":"","base":"style-guide.md","name":"style-guide","frontmatter":{"title":"Style Guide","subtitle":"The style guide provides you with a blueprint of default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.","seo":{"title":"Theme Style Guide","description":"A reference for suggested typographic treatment and styles for your content","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Theme Style Guide","keyName":"property"},{"name":"og:description","value":"A reference for suggested typographic treatment and styles for your content","keyName":"property"},{"name":"og:image","value":"images/1.jpg","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Theme Style Guide"},{"name":"twitter:description","value":"A reference for suggested typographic treatment and styles for your content"},{"name":"twitter:image","value":"images/1.jpg","relativeUrl":true}]},"template":"page"},"html":"

This is a paragraph. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

\n

This is an H1

\n

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, this is marked text ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.

\n

This is an H2

\n

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

\n

This is an H3

\n

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

\n

This is an H4

\n

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.

\n

Quoting

\n
\n

Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep. Scott Adams

\n
\n

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

\n
\n

Unordered Lists

\n\n

Ordered Lists

\n
    \n
  1. Donec non tortor in arcu mollis feugiat
    2. \n
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
    3. \n
  3. Donec id eros eget quam aliquam gravida
    4. \n
  4. Vivamus convallis urna id felis
    5. \n
  5. Nulla porta tempus sapien
    6. \n
\n

Code Blocks

\n

Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces.

\n
<!-- Some example CSS code -->\nbody {\n  color: #333;\n  font-family: Cabin, Helvetica, Arial, sans-serif;\n  line-height: 1.5;\n}\n
\n

Tables

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Simple table with caption and header
Column 1Column 2Column 3
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3
\n
"},{"url":"/404/","relativePath":"404.md","relativeDir":"","base":"404.md","name":"404","frontmatter":{"title":"Not Found (404)","img_alt":"Not Found","template":"page"},"html":"

PAGE NOT FOUND! PLEASE GO BACK :(

"},{"url":"/thank-you/","relativePath":"thank-you.md","relativeDir":"","base":"thank-you.md","name":"thank-you","frontmatter":{"title":"Thank You!","img_path":"images/thank-you.jpg","img_alt":"Thank You Led Signage","template":"page"},"html":"

Thank you for contacting me! I will get back in touch with you soon.

\n

Have a great day!

"},{"url":"/contact/","relativePath":"contact.md","relativeDir":"","base":"contact.md","name":"contact","frontmatter":{"title":"Contact","hide_title":false,"sections":[{"section_id":"contact-form","type":"section_form","content":"To get in touch please fill the form below.","form_id":"contactForm","form_action":"/thank-you","form_fields":[{"input_type":"text","name":"name","label":"Name","default_value":"Your name","is_required":true},{"input_type":"email","name":"email","label":"Email","default_value":"Your email address","is_required":true},{"input_type":"select","name":"subject","label":"Subject","default_value":"Please select","options":["Error on the site","Sponsorship","Other"]},{"input_type":"textarea","name":"message","label":"Message","default_value":"Your message"},{"input_type":"checkbox","name":"consent","label":"I understand that this form is storing my submitted information so I can be contacted."}],"submit_label":"Send Message"}],"seo":{"title":"Contact","description":"This is the contact page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Contact","keyName":"property"},{"name":"og:description","value":"This is the contact page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Contact"},{"name":"twitter:description","value":"This is the contact page"}]},"template":"advanced"},"html":""},{"url":"/posts/2019-05-14-do_we_choose_what_we_do_or_is_it_the_other_way_around/","relativePath":"posts/2019-05-14-do_we_choose_what_we_do_or_is_it_the_other_way_around.markdown","relativeDir":"posts","base":"2019-05-14-do_we_choose_what_we_do_or_is_it_the_other_way_around.markdown","name":"2019-05-14-do_we_choose_what_we_do_or_is_it_the_other_way_around","frontmatter":{"title":"Who chose what?","template":"post","date":"2019-05-14 23:31:03 -0400","permalink":"do_we_choose_what_we_do_or_is_it_the_other_way_around"},"html":"
\n

Do we choose what we do? or is it the other way around?

\n
\n

My interest in computer programming started when I was fresh out of college. Back then, a process improvement opportunity came up and it volunteer myself in a project involving implementing a Moodle Platform as part of a curriculum development for a leadership program. I winged this project by looking at forums for help regarding every single aspect of its implementation, from configuration of site to hosting, and to SMPT configuration. I even got the opportunity to break the site once, while doing an update, and then probably a couple of times more while trying to make changes, upgrades or modifications to it.

\n

What actually happened from that project is that it brought to me my first experience with technology. As I was reading online about eLearning I came across MOOCs and then somehow stumbled onto an edX course on Computer Programming. That was my first experience and this course proved very difficult, so I actually never got to finish it. However, a spark has been born and since then I've been interested in one way or another in information systems, coding and its business applications.

\n

So why did I decide to learn coding? Software development is a little bit like education. You are 'teaching' the computer to do certain things, somehow computers if given the correct instructions can do amazing things and makes things easier. Coding is a powerful tool to have and it is indeed an empowering skill to develop. Being creative, solving problems and makes things better is a passion for me, that is why I decided to learn software development or maybe the other way around.

"},{"url":"/","relativePath":"index.md","relativeDir":"","base":"index.md","name":"index","frontmatter":{"title":"Home","hide_title":true,"is_home":true,"sections":[{"section_id":"hero","type":"section_hero","title":"Hi, I'm Felipe Bohórquez.","content":"I am a passionate software engineer and social entrepreneur with a mission to make our world a better place."},{"section_id":"about","type":"section_content","extraclass":"block-about","section_image":"https://i.imgur.com/Yy3m5Pg.png","title":"About me 🙋‍♂️","content":"I am a passionate **software engineer** and social entrepreneur. I am proud of my beginnings as a youth developer with inner-city kids then through education within the halls of congress and now in software engineering.\n\nAs a full-stack software engineer with a focus on React, Angular, Node.js, Typescript and JavaScript, I've built a robust portfolio including a professional coffee cupping app. I've also built custom library projects in other languages such as Ruby that have been used widely by the developer community.\n\nAs a social entrepreneur I have co-launched different projects in areas such as health (MomBox), sustainability (PowerToThePeople), specialty food through art ([ArtesanoSpirit](https://artesanospirit.com/)) and performing arts. Many of such ventures have been awarded in business competitions.\n\nAs a passionate writer, I've been an author for [CareerKarma](https://careerkarma.com/blog/author/felipe-bohorquez/) and I've done weekly articles on a variety topics on top [Medium Publications](https://fbohorqu.medium.com/).","actions":[{"label":"Connect With Me","url":"https://www.linkedin.com/in/fbohz/","style":"button"}]},{"section_id":"projects","type":"section_projects","title":"Highlighted Projects 💻","posts_number":4,"content":"This is the \"about\" excerpt. It can be used to provide a paragraph about yourself that people can read on the homepage to get a sense of who you are. There also exists a dedicated about page where you can write more about yourself for those who are interested.","actions":[{"label":"See More","url":"about","style":"link"}]},{"section_id":"recent-posts","type":"section_posts","title":"Recent Posts ✍️","posts_number":4,"actions":[{"label":"View Blog","url":"blog","style":"button"}]}],"seo":{"title":"Felipe Bohórquez","description":"Felipe's Professional Portfolio and Writing","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Felipe Bohórquez","keyName":"property"},{"name":"og:description","value":"Coding, Technology and Entrepreneurship","keyName":"property"},{"name":"og:image","value":"images/4.jpg","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Felipe Bohórquez"},{"name":"twitter:description","value":"Coding, Technology and Entrepreneurship"},{"name":"twitter:image","value":"images/4.jpg","relativeUrl":true}]},"template":"advanced"},"html":""},{"url":"/about/","relativePath":"about.md","relativeDir":"","base":"about.md","name":"about","frontmatter":{"title":"About Me","img_alt":"Felipe Image","about-img":"images/headshot.jpg","seo":{"title":"About Me","description":"This is the about me page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"About Me","keyName":"property"},{"name":"og:description","value":"This is the about me page","keyName":"property"},{"name":"og:image","value":"images/about.jpg","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"About Me"},{"name":"twitter:description","value":"This is the about me page"},{"name":"twitter:image","value":"images/about.jpg","relativeUrl":true}]},"template":"about-page"},"html":"

Before becoming a software engineer I worked with nationally recognized organizations including the American Bankers Association and the Congressional Hispanic Caucus Institute. After working over 4 years at Capitol Hill in human development and then 3 years in eLearning for the banking industry, I felt I was ready for the next challenge. As an entrepreneur and creative individual, I was moved by technology and its potential to bring positive change in our world🌎.

\n

How I prepared to break into tech was a process that spanned a period of over a couple of years. First I completed Information Systems studies at George Washington University, Business School. There, I participated (and won 🏆) many entrepreneurship competitions that brought a perspective of the importance of tech in understanding and bringing solutions to the problem domain.

\n

Thereafter, I completed a coding bootcamp with the number one school in the country for 2019-20, namely Flatiron School. We focused on several stacks, ranging from Ruby/Rails to JavaScript and React. I built several high quality projects ranging from Catoro (a professional coffee cupping app), a street artist tracker, an online iChing and even published a Ruby Gem that has been downloaded over three-thousand times to date! 📈. Right after graduation, I doubled my portfolio and added the MERN stack to my skills by completing various Node/Express/MongoDB projects. I also further increased my understanding of other libraries including Gatsby, SCSS and serverless technologies such as Firebase.

\n

Currently I'm working as a full stack developer for a large scale application that uses Angular for the frontend and NestJS powered by GraphQL for the backend. I'm also working on expanding my React Native skills to launch Catoro coffee app FREE on the app store!

\n

I do not forget my commitment to give back and bring positive change🤝🏼. So these days you can also see me volunteering for Bridge of Kindness non-profit, assisting their MERN donation platform or even being featured as a technical writer on CareerKarma, a famous tech website for non-traditional students, to help them break into tech! 👨🏽‍💻

\n

I'm always open to lend a hand, don't hesitate to connect and say hi 👋🏼!

\n

Reference

\n

I use PDF Snake to prepare blog documents for professional printing. Try it now too!

"},{"url":"/posts/2019-06-26-my_goal_with_understanding_metaprogramming_in_ruby/","relativePath":"posts/2019-06-26-my_goal_with_understanding_metaprogramming_in_ruby.markdown","relativeDir":"posts","base":"2019-06-26-my_goal_with_understanding_metaprogramming_in_ruby.markdown","name":"2019-06-26-my_goal_with_understanding_metaprogramming_in_ruby","frontmatter":{"title":"My Goal with Understanding Metaprogramming in Ruby","template":"post","date":"2019-06-26 16:52:11 -0400","permalink":"my_goal_with_understanding_metaprogramming_in_ruby"},"html":"

Article on Medium

\n

My Goal with Understanding Metaprogramming in Ruby - Felipe Bohórquez - Medium

First things first let's dissect and define what .tap is doing here: .tap instantiates a new object and immediately pass it to a block. You see it right after object instantiation. Return value is automatically the object you modified (tapped). So it gets a new object a block level variable and whatever you tapped is the return value.

\n"},{"url":"/posts/2020-01-08-javascript_this_in_regular_arrow_functions_and_methods/","relativePath":"posts/2020-01-08-javascript_this_in_regular_arrow_functions_and_methods.markdown","relativeDir":"posts","base":"2020-01-08-javascript_this_in_regular_arrow_functions_and_methods.markdown","name":"2020-01-08-javascript_this_in_regular_arrow_functions_and_methods","frontmatter":{"title":"JavaScript ‘this’ in Regular, Arrow functions and Methods","template":"post","date":"2020-01-08 18:23:24 -0500","permalink":"javascript_this_in_regular_arrow_functions_and_methods"},"html":"

Article on Medium

\n

For those new to JavaScript the concept of this can take a while to settle in. A great way to understand how it behaves, is through a simple example of this in the context of regular functions, ES6 arrow functions and methods within objects.\n

"},{"url":"/posts/2019-12-23-implementing_facebook_javascript_sdk_login_frontend_rails_api_backend/","relativePath":"posts/2019-12-23-implementing_facebook_javascript_sdk_login_frontend_rails_api_backend.markdown","relativeDir":"posts","base":"2019-12-23-implementing_facebook_javascript_sdk_login_frontend_rails_api_backend.markdown","name":"2019-12-23-implementing_facebook_javascript_sdk_login_frontend_rails_api_backend","frontmatter":{"title":"Implementing Facebook JavaScript SDK Login Frontend + Rails API Backend","template":"post","date":"2019-12-24 00:36:18 +0000","permalink":"implementing_facebook_javascript_sdk_login_frontend_rails_api_backend"},"html":"

Article on Medium

\n

I’m going to talk about my experience building Yijing-Ball Z, a Single Page Application (SPA) with a Vanilla JavaScript Frontend and Rails API backend. More specifically, I’m going to share how I was able to implement a login interface frontend through FB authentication!\n

"},{"url":"/posts/2020-02-21-learning_about_react_hooks_a_coffee_lover_s_perspective copy/","relativePath":"posts/2020-02-21-learning_about_react_hooks_a_coffee_lover_s_perspective copy.markdown","relativeDir":"posts","base":"2020-02-21-learning_about_react_hooks_a_coffee_lover_s_perspective copy.markdown","name":"2020-02-21-learning_about_react_hooks_a_coffee_lover_s_perspective copy","frontmatter":{"title":"Learning About React Hooks — A Coffee Lover’s Perspective","template":"post","date":"2020-02-21 20:27:30 +0000","permalink":"learning_about_react_hooks_a_coffee_lover_s_perspective"},"html":"

Article on Medium

\n

I became interested in hooks after I read Smart and Dumb Components while learning about React and building Catoro, a coffee tasting app.\n

"},{"url":"/posts/2019-10-22-active_storage_integration_with_google_cloud_storage_fast-track/","relativePath":"posts/2019-10-22-active_storage_integration_with_google_cloud_storage_fast-track.markdown","relativeDir":"posts","base":"2019-10-22-active_storage_integration_with_google_cloud_storage_fast-track.markdown","name":"2019-10-22-active_storage_integration_with_google_cloud_storage_fast-track","frontmatter":{"title":"Active Storage integration with Google Cloud Storage — Fast-Track","template":"post","date":"2019-10-22 18:45:04 -0400","permalink":"active_storage_integration_with_google_cloud_storage_fast-track"},"html":"

Article on Medium

\n

Today we’re going to talk about how to setup Google Cloud Storage to host images on your Rails app. This builds from my experience hosting pictures for Uff! a Ruby on Rails web app to discover street artists.\n

"},{"url":"/posts/2020-04-21-sd_basics1/","relativePath":"posts/2020-04-21-sd_basics1.markdown","relativeDir":"posts","base":"2020-04-21-sd_basics1.markdown","name":"2020-04-21-sd_basics1","frontmatter":{"title":"Some Thoughs on Systems Design","template":"post","date":"2020-04-21 19:31:03 -0400","permalink":"sd_basics1"},"html":"
\n

The Big Picture: Systems Design Basics - Part 1

\n
\n

While taking an online course on systems design, I learned some cool ideas worth sharing.

\n

Systems Design is About Thinking in Scale

\n

When developing Catoro, I focused a lot on the actual functionality of the application. However, it actually never came to my head thinking questions such as what if I had 100 million total users and 2 million daily users?. How will the design of my backend and deployment be affected by growth?

\n

Systems design focus on distributed systems meaning a a system whose components are located on different networked computers. Some characteristic of such systems include Scalability, Reliability, Availability, Efficiency, and Serviceability/Manageability. There are also strategies of how to assess and design your system for scale.

\n

Capacity Estimation

\n

Lets take our example of Catoro, a coffee cupping app. Coffee cupping must be read heavy, we can assume a 1:50 ratio between read and write.

\n

Traffic, Storage, Bandwidth Estimates\nIf we assume there are 2M new cuppings per month this actually means about 50M readings same month:

\n

2 * 50 => 50M

\n

What about queries per second (QPS)? Roughly ~0.77. So about one new cupping per second!

\n

2M / (3600(secs in hour)* 24hours * 30days) =~ 1

\n

What about reading? Well with our 1:50 ratio it means 50 readings per second.

\n

How about storage?

\n

Let's assume we'll store everything for five years. Since we have 2M every month we should expect to store roughly 120M!

\n

2M * 12months * 5years = 120M

\n

What about each particular cupping? Each cupping lets assume is 1KB of information since there are a lot of parameters to track per cupping as well as total score.

\n

Since hour total storage is 120M we should expect roughly 120GB of storage just of cuppings.

\n

120M * 1KB =~ 120GB

\n

Tip: Try this resource for a good byte/kb/gb etc. conversion tool.

\n

Regarding bandwidth of incoming data we should expect roughly 1KB per second as our QPS is 1/s. Read requests about 50KB with our 1:50 ratio.

\n

Road Ahead for SD Explorations

\n

In the next blog post we'll talk about the Database / Component Design. Tips for DB schema, REST API, Data Partitioning, Load Balancers, Telemetry and Cache.

\n

Stay tuned!

"},{"url":"/posts/2020-04-05-planning_for_a_pandemic_year/","relativePath":"posts/2020-04-05-planning_for_a_pandemic_year.markdown","relativeDir":"posts","base":"2020-04-05-planning_for_a_pandemic_year.markdown","name":"2020-04-05-planning_for_a_pandemic_year","frontmatter":{"title":"Planning for a Pandemic Year","template":"post","date":"2020-04-05 19:31:03 -0400","permalink":"planning_for_a_pandemic_year"},"html":"
\n

Since it does seem like very different times are coming, let's take a deep breath and do some planning for the pandemic times that lie ahead of us.

\n
\n

I probably would never guessed a year ago how these days I was going to be writing about social distancing and promoting online and virtual networking.

\n

Since it does seem like very different times are coming, let's take a deep breath and do some planning for the pandemic times that lie ahead.

\n

Planning for a pandemic year: What's next?

\n
    \n
  1. \n

    Continue Learning Algorithms and Data Structures

    \n\n
    2. \n
  2. \n

    Advanced JavaScript and Improving on TypeScript

    \n\n
    3. \n
  3. \n

    Advanced React

    \n\n
    4. \n
  4. \n

    Other

    \n\n
    5. \n
\n

What could be next?

\n

I'm curious to see whether (or not) I will follow this path a year from now. If there are unexpected coding experiences in the road ahead, well that could be even better. After all, I'm a big fan of surprises ;)

"},{"url":"/posts/2020-05-04-serverless/","relativePath":"posts/2020-05-04-serverless.markdown","relativeDir":"posts","base":"2020-05-04-serverless.markdown","name":"2020-05-04-serverless","frontmatter":{"title":"What is Serverless?","template":"post","date":"2020-05-04 19:31:03 -0400","permalink":"serverless_intro"},"html":"
\n

Serverless allows you to run and deploy apps without having to worry about managing server infrastructure

\n
\n

Probably most of us have heard about serverless computing, and probably you've asked yourself (like me) if its a good technology to learn. Here I'm sharing some high level points I learned after seeing a presentation about it at Byteconf React.

\n

So, What is Serverless?

\n

Serverless allows you to run and deploy apps without having to worry about managing server infrastructure. Examples include AWS Lambda, MongoDB Stitch and Microsoft Azure. Developers then worry about building the business logic only.

\n

So the name serverless can be misleading because there are actually servers, its just serverless for us, the developers.

\n

Why serverless is popular right now:

\n\n

But what's the catch with serverless?

\n\n

When to use serverless

\n\n

When to avoid serverless

\n\n

Some considerations when using serverless

\n\n

Quick Example Connecting React App to Serverless Provider

\n

Depending on the provider, you might have access to an SDK that you can easily include on your React app.

\n

In the example below with MongoDB Stitch you pass MongoDB Stitch ID on where is in the cloud and kind of works like Redux where you pass as props to get data from server components.

\n

\"demo1\"

\n

Then you can use MongoDB Queries (MQL) to get data and update state from it.

\n

\"demo2\"

\n

\"demo3\"

\n

Future of serverless

\n"},{"url":"/posts/2020-04-27-sd_basics2/","relativePath":"posts/2020-04-27-sd_basics2.markdown","relativeDir":"posts","base":"2020-04-27-sd_basics2.markdown","name":"2020-04-27-sd_basics2","frontmatter":{"title":"Systems Design Part 2: Digging Deeper","template":"post","date":"2020-04-27 19:31:03 -0400","permalink":"sd_basics2"},"html":"
\n

Digging Deeper into SD

\n
\n

Note: This article is somewhat of a continuation of the last blog the basics of Systems Design (SD). The main difference is that on this article I'll use examples of other SDs to explain the concepts better.

\n

Digging Deeper: High Level System Design and REST API

\n

After we got some capacity estimates, now it is worth coming up with a basic high level design of the system and a Entity Relationship Diagram (ERD).

\n

While I won't go into detail, here you can find an ERD and high level SD design examples:

\n

\"ERD\"

\n

\"high

\n

After this is done you can come up with your systems API endpoints. It is recommended using a REST API. Here's an example of a twitter API:

\n

tweet(api_dev_key, tweet_data, tweet_location, user_location)

\n

Sample API Parameters:

\n\n

Sample API Returns: (string)

\n

Here think about any appropriate HTTP error(s) returned when accessing the API. Maybe a NotFound 404 or 403 (forbidden) if api_dev_key is invalid?

\n

Component Design

\n

The component design part can be the most complex part and is the one that talks about the scalability of our system.

\n

There's a concept called CAP Theorem that states that you cannot balance all this these characteristics (Consistency, Availability, and Partition) and you'll have to include tradeoffs in your design.

\n

Example: Shortening URL. Long URL hard to remember and short URL chances of collision.

\n

So in what part would you focus your design? Consistency, availability, portioning, and/or performance? What part(s) are important, why?

\n

Lets now drill down into our component design:

\n\n

Load Balancers (LB), Cache and Telemetry

\n

Load Balancers

\n

With Load balancers you can effectively distribute incoming network traffic across a group of servers. When a new server is added to the group, the load balancer automatically starts to send requests to it.

\n

LB reduces individual server load and prevents single point of failure, thus improves application availability and responsiveness. If failure LB can redirect to next available healthy server.

\n

E.g. messaging app: LB in front of chat servers. The LB can map each userId to a server that holds the connection for each user and then direct such request to that server.

\n

Some LB strategies:

\n\n

Cache

\n

Cache is short term for memory. Takes advantage that recently requested data might be asked again so stored locally. Cache is good for quick access to data. CDNs use cache since as they serve content if locally available.

\n

Some cache strategies:

\n\n

Note: If the data is modified in the database, then it should be invalidated in the cache as this could cause inconsistent app behavior.

\n

Telemetry

\n

How will you monitor for peaks, Daily Active Users (DAU) and average latency. Thinking about this will further prepare your app to scale even further and reduce failure chances.

\n

Conclusion

\n

Designing distributed systems it indeed includes a lot of factors and there are many tradeoffs to consider. However it could also be a fun and creative exercise to do.

\n

Hopefully you found this SD exploration useful!

"},{"url":"/posts/2020-06-01-js_back_to_basics2/","relativePath":"posts/2020-06-01-js_back_to_basics2.markdown","relativeDir":"posts","base":"2020-06-01-js_back_to_basics2.markdown","name":"2020-06-01-js_back_to_basics2","frontmatter":{"title":"JS Back-to-Basics: Part II","template":"post","date":"2020-06-01 19:31:03 -0400","permalink":"js_back_to_basics2"},"html":"
\n

We'll expand on last week's concepts and talk about other exciting JS foundational concepts!

\n
\n

Note: This is a follow up is a continuation to last week's article.

\n

JS Back-to-basics Part II

\n

This week, we'll expand on last week's concepts and talk about other exciting JS foundational concepts!

\n

Quick Reminder\nIn JS we basically

\n\n

That's all we really do, all the time!

\n

As soon as JS engine sees () it creates an Execution Context (EC):

\n\n

Lexical Environment / Scope

\n\n

Execution context tells which lexical environment (\"planet\") is currently running.

\n

Our lexical scope (available data + variables where functions were defined) determines our available variables NOT where the function is called (dynamic scope). It doesn't matter where we call our functions.

\n

The very first lexical environment is the global environment.

\n

Hoisting

\n

In the creation phase (when set globalObject and 'this') before execution of code we have hosting:

\n\n

Function Invocation

\n

Remember JS programs assign in memory variables and then write functions to do something with those variables.

\n

So what are functions?

\n\n

Variable Environment

\n

What about variables created inside of execution contexts of functions? They are called Variable Environment.

\n

Some functions have access to certain variables, while others not. Remember functions have their own execution content in which variables reside and the first execution context is the global() one.

\n

Variables default to their outermost execution context. Execution context have their own variable environment.

\n

Scope Chain

\n

Each EC has a link to the outer world. When the code runs it goes down the scope chain in parent environment if it doesn't find variable.

\n
var x = 'x'\n\nfunction printX() {\n  console.log(x)\n}\n
\n

Lexical or static scope, only by looking at code determines which environment a certain variable lives in. Scope chain starts inner and goes all the way to global context.

\n

Function lexical environment, creates closures on environment. This closures are defined internally so you cannot access outside for a variable that is defined internally.

\n

\"scopeclosure\"

\n

Reminder\nRemember undefined means, yes we have 'x' variable but it doesn't have any value while something like Reference Error is like 'x' is completely undeclared not found anywhere in the scope chain.

\n

Lexical environment === [[scope]]. So each environment has a field, and each field with its own scope and the link to next scope. Also named [[scope]]. Scopes will give you all the scopes you can test in console.

\n

Function vs Block Scope\nScope means what variables we have access to.

\n

Other coding languages have block scope. Any time you do code in curly brackets {} you create block scope. In JS this is done with let and const create block scope!

\n

So let and const create block scope just like in {}

\n

Caution with Global Variables

\n

You can pollute global namespace. Remember we have limited space and our memory heap is limited. You can pollute global scope by keeping adding global variables.

\n

You can also overwrite global variables. So avoid them.

\n

Concluding Thoughts

\n

This seems to be a robust discussion on JS foundational concepts. There are still other concepts worth exploring including IIFE, this keyword and more. Please be sure to read on them. An article I previously wrote about this can be found here.

"},{"url":"/posts/2020-05-18-component_library_storybook/","relativePath":"posts/2020-05-18-component_library_storybook.markdown","relativeDir":"posts","base":"2020-05-18-component_library_storybook.markdown","name":"2020-05-18-component_library_storybook","frontmatter":{"title":"React Component Library","template":"post","date":"2020-05-18 19:31:03 -0400","permalink":"component_library_storybook"},"html":"
\n

React component libraries ensure that your application is well designed, accessible and easy to use.

\n
\n

Note: This short article is a continuation of what I learned while participating at Byteconf React.

\n

React component libraries ensure that your application is well designed, accessible and easy to use.

\n

As applications grow and evolve they could face these challenges:

\n\n

Here's where component libraries can really help! 🙌🏼

\n

Storybook to the Rescue!

\n

First things first. The truth is that it takes time to build component libraries 😑. So often no one wants to build these. However, it is worth investing the upfront time.

\n

React Storybook

\n

Storybook is a React tool for developing UI components. An example of using Storybook tool to build component libraries can be found here.

\n

By using Storybook you can have a centralized a place for quick reference and create faster prototyping. It offers example of common components along with specific styling and documentation.

\n

Some examples:

\n

\"example1a\"

\n

\"example1b\"

\n

\"example2a\"

\n

\"example2b\"

\n

How to Build Your Own Library

\n

Building the components is the easiest part of building the library. Storybook has many add-ons you can use. You can start with vanilla Storybook and expand.

\n

For animated components you can use GreenSock or Animate.CSS. For icons you can use FontAwesome. You can also try Rollup.js as an alternative to Webpack.

\n

Building Your Library

\n

Go through your app screen by screen and create an interface inventory in a document.

\n

\"uiinventory\"

\n

Then choose the most used components (8 max at the beginning). At the beginning you'll copy the code of it into Storybook.

\n

As you have your library small of 5-8 components, you can have users start getting used to the library without having a lot of unused components.

\n

Think about different situations in which each component will be used and build library on it. E.g. buttons:

\n

\"buttons\"

\n

Not only colors here but also state (e.g. disabled, active states).

\n

Consistent Components and Documentation

\n

Documentation is key so your users of the library will know how and when to use each component.

\n

Check out this component checklist you can use as you build your library.

\n

Testing your Library

\n

As you have users testing your library you might have to do edits. You can prevent this by being thorough and trying to go on all use cases of components.

\n

Ask users for specific feedback. E.g. What parts are useful/not useful? Do they hit snags in implementation?

\n

Expanding and Maintaining Your Library

\n

Keep backlog of components that you want to build in the future. This is important as you start to include other team members to contribute in your library.

\n

You might also see that some components are not being used. Try to reduce this clutter in library. Check with other developers and designers why a component is not being used. Tag components to denote status. E.g. retiring, active component etc. This labeling will keep users up-to-date on whats going on with your library.

\n

You can also have an external version of library (such as the link shared above). The internal version can have internal tags as well, IP information, etc.

\n

Maintenance is also key. Think where you can tie component library creation. Sprint planning can be useful to tie it with the component backlog. Make sure you're active in maintaining your library so it doesn't become outdated.

\n

Final tips

\n\n

That's all folks. Happy component library building! 📗

"},{"url":"/posts/2020-06-08-react_basics_refresher/","relativePath":"posts/2020-06-08-react_basics_refresher.markdown","relativeDir":"posts","base":"2020-06-08-react_basics_refresher.markdown","name":"2020-06-08-react_basics_refresher","frontmatter":{"title":"React ⏱ \"5 Minute\" Refresher","template":"post","date":"2020-06-08 19:31:03 -0400","permalink":"react_basics_refresher"},"html":"
\n

This is a React refresher on the basics...If you're new to React this should get you started on a conceptual realm.

\n
\n

React ⏱ \"5 Minute\" Refresher

\n

This is a React refresher on the basics, recommended to those with experience in React. If you're new to React this should get you started on a conceptual realm.

\n

React Brief History

\n\n

React Core Principles

\n\n

Create-React-App

\n\n

Warning: Ejecting Create-React-App

\n\n

Expanding React Key Concepts

\n

React and JSX

\n

JSX has different keywords such as className instead of regular HTML 'class'. Also anything in between {} is JavaScript injected through JSX.

\n

React always intercepts all events and then we use setState to trigger a re-render. React re-renders anytime state is updated.

\n

So JSX creates that virtual DOM with state and then React re-renders the DOM as state changes.

\n

React Components

\n

Our React components act like custom elements that we can mix with common HTML elements but with special powers!

\n

You can have React components as classes or as functions. React class components have a render() method. We use classes to get access to state and setState to change state. We build these with ES6 class syntax.

\n

To be able to do special things we get to use the special attribute props that carry data, functions and anything in between to make our application work effectively.

\n

We can also have components that do not extend from React.Component. We can also get access to state via hooks. We build this with ES6 arrow functions. In the past these functional components only received props and returned HTML from JSX. With hooks, this has changed.

\n

You might notice how Class Components could have methods and arrow function declarations inside.

\n

Good Rule of Thumb:

\n

Use arrow functions on any methods you define that aren't part of React (i.e. render or componentDidMount).

\n

React Lifecycle Methods (Class Components)

\n

They are methods that get called automatically by React in particular instances of its component life.

\n
    \n
  1. constructor(): Called first. Allows the class to have access to lifecycle components. Here is where you declare your state.
    2. \n
  2. render(): Render is called next to display HTML.
    3. \n
  3. componentDidMount(): This lifecycle method is called when component is mounted and good for calling API requests. This will also cause a re-render so render() gets called again. It runs every time you refresh the page.
    4. \n
  4. componentDidUpdate: Any state updates brings your component to this updating phase. React here selectively changes parts of the DOM and it doesn't remount the component. componentDidUpdate is called after update. Here you can do additional fetch calls as you compare previous and new props. Read more.
    5. \n
\n

Other lifecycle methods:

\n\n

Check out this useful diagram on React lifecycle methods.

\n

Dawn of SPAs

\n

Before you used to make requests to the backend and you'll visit one or more pages. Now with SPAs (although the Javascript file is bigger) we don't have to keep coming back to request a new page to the server. Today we just request for data and refresh any part of the page we need.

\n

So with SPAs you'll start talking with APIs to get the data you need. We build pages dynamically depending on user input/interaction.

\n

How do we decide to break a part of our app into a component?

\n

This is key for you to practice and know as a React developer. You should decide this for yourself. The idea is that you can reuse this components on other applications and make things more flexible. So you start building your component library.

\n

Learn more about component libraries here.

\n

State and Props

\n

When we pass down state, this is usually received as prop by children. This is related to one way data flow of React.

\n

Remember you can also put state wherever you want. You'll have to practice how to implement that. Every time state changes there might be implications on re-render and could affect performance. You'll start seeing how there is a tree of state that any changes might have trickle down effects.

\n

When you work on your tree of state you might want to lift state to parent components so that it can be shared by children.

\n

Managing state can become tedious and complicated at best, we recommend using Redux state management add-on as your state gets more complicated.

\n

Synchronous vs Asynchronous

\n

Remember this distinction. Synchronous happens literally immediately. Async takes time that JavaScript nor React knows. JS runs the code after it, and then returns when the promise is resolved. React setState() is async, because React decides for itself when is the best time to run it.

\n

Tip: In order to see changes after using setState you must use its second argument. Read more. There has been state management improvements specially with Hooks. However Redux has been well tested for scale. Do stick to Redux to manage more complex state.

\n

Virtual DOM

\n

Remember we don't directly (imperatively) change the DOM. React takes care of the DOM through the virtual DOM. React has what is called synthetic event, which it means that React will interfere on all events and decide what to do. React only deals with the real DOM when it sees fit and with its own patterns, that is why React feels so fast.

\n

So React takes all the hard work on showing and hiding elements from the DOM for us. But we have to learn its re-render mechanism and how to manage state. This will make us a pro React developer.

\n

How Can I be a Top React Developer? 🚀

\n
    \n
  1. Decide on Components: What is a component and how will you divide the app.
    2. \n
  2. Decide on state and where it lives. Decide how you'll manage state (e.g. Redux, hooks, or props).
    3. \n
  3. Know what changes when state changes.
    4. \n
\n

Resources

\n\n

😅 You know this wasn't literally a \"5 minute\" refresher. But hopefully it was useful. Happy React studying 🙌🏼

"},{"url":"/posts/2020-05-25-js_back_to_basics1/","relativePath":"posts/2020-05-25-js_back_to_basics1.markdown","relativeDir":"posts","base":"2020-05-25-js_back_to_basics1.markdown","name":"2020-05-25-js_back_to_basics1","frontmatter":{"title":"JS Back-to-Basics: Part I","template":"post","date":"2020-05-25 19:31:03 -0400","permalink":"js_back_to_basics1"},"html":"
\n

We'll go back to the basics in JavaScript and discuss about the JS Engine and JS Runtime

\n
\n

On this article, we'll go back to the basics in JavaScript and discuss about the JS Engine and JS Runtime.

\n

JavaScript Engine

\n

JS Engine allows to have the machine to understand code. So it acts as a translator. There are a ton of JS Engines written by programmers. They can be written in other languages such as C++. An example of this is V8. These engine allows JS to run faster and faster.

\n

Engines looks for lexical analysis formed into a tree like structure call AST:

\n

\"1\"

\n

It then goes to the interpreter and moves forward so it can be understood by computer.

\n

ECMAScript was created as governing body of JS. It tells engine creators parameters of creating engines. There are many engines b/c they can be implemented in many ways.

\n

Interpreters and Compilers

\n

Interpreter translates and reads file line-by-line. Compiler doesn't translate on the fly. Compiler does one run and then writes a new program in a program that the computer can understand like machine code. You can still run JS using one or the other.

\n

Babel and Typescript

\n

They are heavily used in the Javascript ecosystem and you should now have a good idea of what they are.

\n

Babel is a Javascript compiler that takes your modern JS code and returns browser compatible JS (older JS code). Typescript is a superset of Javascript that compiles down to Javascript.

\n

Both of these do exactly what compilers do: Take one language and convert into a different one!

\n

V8 Engine

\n

Interpreter is good for JS. Interpreters can get very slow with things like loops and often doesn't do optimization. Compiler can be a bit better in some instances.

\n

JIT Compiler: Just In Time Compilers. V8 engine does this to get best of both worlds. Here the profiler and compiler work as the code is running.

\n

\"2\"

\n

Compared with other languages

\n

.exe is usually a C++ file that is compiled to a executable machine code file. Java uses the JVM to compile code.

\n

Javascript initially was an interpreted language with time evolving JS has compilers as part of V8 engine, so depends. Python can also be run through a compiler or interpreted.

\n

Writing Efficient / Optimized Code

\n

Be mindful with some keywords and JS patterns that can make code not optimized.

\n

\"3\"

\n

Thinks like inline caching and hidden classes. For hidden class you want to assign properties of the object in the constructor or add things in the same order.

\n

Some of these optimizations help the compiler.

\n

Some Resources:

\n\n

So why don't write machine code from the beginning?

\n

WebAssembly - could make things better and avoid some JIT Compiler and make things more standarized.

\n

JS Engine Key Concepts

\n

Call Stack and Memory Heap

\n

JS engine needs to store and keep track of everything. Memory heap uses, allocates memory. Call stack keeps track of where we are in the code in the execution.

\n

Memory heap is like a free store, with no order. Allows to store variables.

\n

Call stack is like a region in memory acts like a FIFO method. You add things like functions to the call stack starting with the global execution context (sometimes as anonymous)

\n

You can check the call stack in google chrome:

\n

\"4\"

\n

So call stack stores functions in memory. And the first one in is the last one getting popped out the call stack.

\n

Where variables are allocated it depends, sometimes they are stored in the stack and more complex are in memory heaps. More on this soon.

\n

Stack Overflow

\n

Happens when we keep calling functions nested over and over. This happens a lot with recursion functions (functions that call themselves). Example:

\n
function inception() {\n    inception()\n}\n
\n

Gargage Collection

\n

When JS allocates memory automatically with JS when we finish calling the function it is going to clean it. So it automatically frees up the memory we no longer use.

\n

In that case it makes sure we don't use all memory. It gives a false sense of security. JS developers sometimes have false impression that they don't need to care about memory.

\n

In JS garbage collection uses a mark and sweep algorithm. So it basically 'marks' what it needs and 'seeps' what it doesn't.

\n

Memory Leaks

\n

Memory can happen on infinite loops when we fill our memory heap and app crashes.

\n

Common memory leaks:

\n\n

An example happened with SoundCloud plug-in the background here

\n

JS is Single Threaded

\n

JS is a single threaded programming language so only one set of instructions at the time. It only has one call stack.

\n

Because of this JS is synchronous, doing one thing at a time.

\n\n

However most of the time we don't use JS Engine but use the JS Runtime to make things asynchronous.

\n

JavaScript Runtime

\n

So how do we make asynchronous calls? with the JS Runtime.

\n

Web API

\n

The Web API communicates with JS engine and comes with browser. These web API can do variety of things. The web API is usually the window and you can check what it has available such as fetch, setTimeout.

\n

Browser provides help so that users don't keep waiting for things to finish. So browser uses low level languages such as C++ to do other stuff.

\n

Event Loop\nItems come to call stack, lets say fetch comes, the call stack identifies it and gives it to the Web API and it doesn't it in the background. Web API returns data received to the appropiate part.

\n
console.log('1')\n\nsetTimeout(() => {console.log('2')}, 0)\n\nconsole.log('3')\n
\n

This runs 1, 3, 2 because it has timeout. No matter the length. Then moved away from call stack gives back to web API for setTimeout.

\n

No matter how fast setTimeout is, it still gets sent to the Web API.

\n

Great tool to visualize Call Stack and Web APIs

\n

This makes it possible to not rely on just one call stack and memory heap and achieve asynchronous code, with multiple threads.

\n

Final Thoughts

\n

There are many Runtimes, so what is Node.js?

\n

Node.js is a runtime. So it runs outside the browser. It is a C++ program, like a Node.exe. With Node you can access the file system and other things. There are differences such as in Node there's not window but it is replaced with global. It creates a runtime outside of the browser. It also uses the asynchronous runtime.

\n

Stay tuned for next week's article, as we'll talk about more basic JavaScript concepts. 'Till then!

"},{"url":"/posts/2020-06-15-firebase_in_react/","relativePath":"posts/2020-06-15-firebase_in_react.markdown","relativeDir":"posts","base":"2020-06-15-firebase_in_react.markdown","name":"2020-06-15-firebase_in_react","frontmatter":{"title":"Implementing Firebase in a React Project","template":"post","date":"2020-06-15 19:31:03 -0400","permalink":"firebase_in_react","filename":"2020-06-15-firebase_in_react"},"html":"
\n

In Building Studio Ghibli's Fan Hub, a project made with React, I decided to implement Firebase for its backend.

\n
\n

Implementing Firebase in a React Project ✨

\n

In Building Studio Ghibli's Fan Hub, a project made with React, I decided to implement Firebase for its backend.

\n

Note: Firebase library is always expanding and evolving. You can read about what we went over here.

\n

What is Firebase?

\n

Firebase as being a backend deals with everything related to:

\n\n

Firebase is pretty efficient and is maintained by Google. It gives a lot of features to developers without having to do a lot of backend development.

\n

Getting Started with Firebase

\n

Once you access the Firebase website make sure you login with your Google account then click on 'Create/Add Project'. Add the project name usually as projectName-db or projectName-backend . Then leave all the defaults and let your project finish up spinning up and completing setting up.

\n

Now make sure you are in the Spark - Free Plan. You'll wanna upgrade as you feel more comfortable with Firebase. At the beginning is very rare you exceed the limits.

\n

As you look at your project focus on the Develop tab and get acquinted with it specially the three first sections:

\n

\"1\"

\n

Here it is worth mentioning that Storage is more for assets like images and videos and database is more your other types of data.

\n

Other sections such as Hosting involve Firebase hosting your website, ML Kit is for machine learning and Functions you'll learn when you're more advanced.

\n

Setting up our Firebase Backend for React App

\n
    \n
  1. Click on 'Project Overview' on top.
    2. \n
  2. Click on Web Icon (the last)
    3. \n
  3. Register firebase by adding a name (internal name) like the convention above. I named mine also as studio-ghibli-fan-hub-db.
    4. \n
  4. You'll get a code snippet. Make sure you copy the var firebaseConfig contents which includes your API configuration.
    5. \n
  5. Go back to terminal and do yarn add firebase or npm i firebase.
    6. \n
\n

Now we're ready for the next step ✨

\n

Adding Firebase to our React App

\n\n
import firebase from 'firebase/app'\nimport 'firebase/firestore'\nimport 'firebase/auth'\n\nconst config = {\n    // your config info here\n}\n\nfirebase.initializeApp(config)\n\nexport const auth = firebase.auth();\nexport const firestore = firebase.firestore();\n\nconst provider = new firebase.auth.GoogleAuthProvider();\nprovider.setCustomParameters({ prompt: 'select_account' });\nexport const signInWithGoogle = () => auth.signInWithPopup(provider);\n\nexport default firebase;\n
\n

Here we are only importing what we need then the second imports are attached to the firebase keyword. After we initialize our app there's some setup code that is in the documentation. We export auth() and firestore().

\n

Then the rest of the code is to setup Google Login. The prompt: 'select_account' is the popup that will show up and then we can Login users.

\n

Note: You might be worried to expose your key publicly. But it is generally save to expose Firebase apiKey. Read more here.

\n

Allow Google Sign in on Firebase

\n
    \n
  1. Click on Authentication then on 'Set up sign in method' and select Google.
    2. \n
  2. Click on edit icon, enable it, add project support email.
    3. \n
  3. Click Save.
    4. \n
\n

Adding Google Sign in to your Login Component

\n\n
<button type=\"submit\" onClick={signInWithGoogle} isGoogleSignIn>Login with Google</button>\n
\n\n

\"Screen

\n\n

Using Firebase Auth Data on Your React App

\n

In order to add Firebase data into our application we do the following.

\n\n
this.state = {\n  currentUser: null,\n}\n\ncomponentDidMount() {\nauth.onAuthStateChanged(user => {\n  this.setState({ currentUser: user })\n})\n}\n
\n\n
unsubscribeFromAuth = null\n\ncomponentDidMount() {\n  this.unsubscribeFromAuth = auth.onAuthStateChanged\n  (user => {\n    this.setState({ currentUser: user })\n  })\n}\n\ncomponentWillMount() {\n  this.unsubscribeFromAuth()\n}\n
\n\n

Logout Users

\n

This depends on your component implementation but usually implemented on a Header or Nav component pass out the user state.

\n

First you import the auth library as you did in App.js. Then pass the 'user' props to your Nav/Header component. Then you might want to render another header item that will conditionally render either Login or Logout and if clicked you'll pass the signOut() function from our auth that we imported to firebase. This is how I did it on Studio Ghibli's app:

\n
// props.currentUser was passed from App.js. Link is a react-router-dom element.\n\n{\n props.currentUser ? \n <div className=\"option\" onClick={() => \n auth.signOut()}>LOGOUT</div> \n : \n <Link className=\"option\" \n  to=\"/signin\">LOGIN</Link>\n}\n
\n

Implementing Firebase Firestore to Save and Get User Data

\n

Firestore is a noSQL database, kind of pretty much a database made up of a big JSON object. With that in mind let's create our database

\n

On Firebase console, click on Database then create database. You'll have two options to start in production (locked) or test mode. Select test-mode, you'll wanna write some access rules as you go. Now you can follow up the prompts and click Done.

\n

Types of Firestore Data

\n

In your new db you can have two types of data. One of them is called 'collection' and you can add a collection if you access your new db, lets name our collection 'users'.

\n

\"Screen

\n

You saw a new path was created named '/users'. Here we can add a new 'document' or new user with its own ID. You can play with it to see how to add items.

\n

You can also nest collections so a collection can have its own collection as objects such as. Here we have an example of a cart-items collection on an user having two documents (or items):

\n

\"Screen

\n

So in firebase we can have either documents or collections types of data. Now in a nutshell you can access such documents in React like this:

\n

\"Screen

\n

Storing to our database - First Steps

\n

The following function will take that user we get from Authentication and then store the information we need in our database. To do so we'll head to the firebase.utils.js and App.js.

\n
// firebase.utils.js\nexport const createUser = async (userAuth, addData) => {\n  if (!userAuth) return;\n\n  const userRef = firestore.doc(`users/${userAuth.uid}`);\n\n  const snapShot = await userRef.get();\n\n  if (!snapShot.exists) {\n    const { displayName, email } = userAuth;\n    const createdAt = new Date();\n    try {\n      await userRef.set({\n        displayName,\n        email,\n        createdAt,\n        ...addData\n      });\n    } catch (error) {\n      console.log('error creating user', \n      error.message);\n    }\n  }\n\n  return userRef;\n};\n
\n
//App.js\n\ncomponentDidMount() {\nthis.unsubscribeFromAuth = auth.onAuthStateChanged(\n  async user => {\n  createUser(user)\n})\n}\n
\n

In this function which is an async request, we query first if it exists. Continue reading to learn more about what this functions does. Do not test the app, just yet.

\n

QueryReference vs QuerySnapshot\nQuery is a request to Firestore to get something from the db. Firestore returns either references or snapshots. Of these objects it can be either a Document or Collection. Firestore will always give us the object. Using the object we can determine or not if there's any data.

\n

QueryReference is that object that represents the current place in the db we are querying. This one doesn't have the actual data. Just properties that tell us details about it and the method to get the QuerySnapshot with the actual data. We could call them as:

\n

frestore.doc('/users/userId')\nfrestore.collections('/users')

\n

Regarding QueryReference, there are DocumentReference vs CollectionReference. There are some differences as follows:

\n

\"Screen

\n

If you console.log the snapShot you get something like this:

\n

\"Screen

\n

Here the 'exists' property tells if there's any data. Here in our code we are checking if the user already exists. If snapShot doesn't exists then we use CRUD on documentRef (not snapShot ). We get the data we need (in this case displayName and email) and make the request to the firebase to create with the Firebase method of .set()

\n

The function above will always return the userRef if we need to use that userRef object. So now head to your Firebase console and login and check on your Database to see if the user is created. Refresh the user persisted and still one user. Great right!

\n

Storing User Data in our App

\n

Did you notice your app Login button is not being changed to Logout. This is because we are not setting state. We need to modify our App.js to use that userRef object. We need use the onSnapshot() method we get from this object to get a DocumentSnapshot.

\n

A documentSnapshot allows us to check if a document exists using the .exists property which returns a boolean and we can actually get the actual data using the data() method which returns a JSON of the document. If you do on the code a console.log of snapShot.data() inside onSnapshot() call you can see the same data you saw on the Firebase console. The id we just get by snapShot.id

\n
  componentDidMount() {\n    this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {\n      if (userAuth) {\n        const userRef = await createUser(userAuth);\n\n        userRef.onSnapshot(snapShot => {\n          this.setState({\n            currentUser: {\n              id: snapShot.id,\n              ...snapShot.data()\n            }\n          });\n        });\n      }\n    // if userAuth is null do this:\n      this.setState({ currentUser: userAuth });\n    });\n  }\n
\n

Now try again and see if all is back to normal!

\n

Moving other data into Firebase Firestore

\n

Studio Ghibli's fan app has shop data related to the films and products it offers. In the beginning this data was stored as a separate js and in an object data type. Now what if this data grows? What if we have 10 million shop items? Here is where an object might not be the right choice.

\n

So how do we move this shop collection data into Firebase? Remember when we make query requests we either get both of these two objects (even if nothing exists in the response):

\n\n

Populating Our Firebase With Additional Data

\n

We need to get back to our Firestore console and add another collection. Before we do that lets take at how our shop.data basic structure looks:

\n
// shop.data.js\n\nexport const SHOP_DATA =  {\nmemorabilia: {\nid: 1,\ntitle: 'Memorabilia',\nrouteName: 'memorabilia',\nitems: [\n  {\n    id: 1,\n    name: 'Calcifer Toy (Handsewn)',\n    imageUrl: 'imageUrlHere',\n    price: 10\n  },\n  ]\n},\n\nfilms: {\n  id: 2,\n  title: 'Selected Films',\n  routeName: 'films',\n  items: [\n    {\n    id: 10,\n    name: 'Nausicaä of the Valley of the Wind',\n    imageUrl: 'imageUrlHere',\n    price: 25,\n    description: \"Warrior and pacifist Princess Nausicaä\",\n    director: \"Hayao Miyazaki\",\n    producer: \"Hayao Miyazaki\",\n    release_date: \"1984\",\n    },  \n  ]\n}\n}\n
\n

As you check your Firebase is almost the same, it has keys that point to names that hold values. This is because Firebase is NoSQL so it can have as many properties as possible (properties can be different among documents of same collections) as it is not stored as tables like SQL.

\n

Firestore supports many types of data. So we need to think about what data we will store as. With that in mind, lets export our shop.data.js by adding this on our Firebase firebase.utils.js file.

\n
// firebase.utils.js\nexport const addCollectionAndDocuments = \n  async (collectionKey, objectsToAdd) => {\n  const collectionRef = firestore.collection(collectionKey)\n\n  const batch = firestore.batch()\n  objectsToAdd.forEach(obj => {\n    const newDocRef = collectionRef.doc()\n    batch.set(newDocRef, obj)\n  })\n\n  return await batch.commit()\n}\n
\n

Here we can see it implements a batch write that if any document fails then everything fails so ensure all collection is saved. Now that this is setup, then we can modify our App.js, please refer to source code to see what we added.

\n

Now that we have dynamically populated our db. We need to remove the code we wrote on the App.js because this only runs once so we did it to avoid the manual write of it! We'll keep the firebase.utils addCollectionAndDocuments code for future reference if we need it.

\n

Now in order to access our Firebase shop data in the frontend, there are a couple roads we could take. We need to access the most up level component and create and subscribe to listen to firebase changes then unsubscribe when component unmount. While I won't go into a lot of detail, feel free to take a look at the repo to see how I implemented on the app.

\n

Now that we moved this data out of the frontend it can be shared along other implementations such as React Native and there's a single source of truth with Firebase.

\n

Final Thoughts

\n

Firebase is a pretty robust platform that can take a while to learn. But the more you practice the better you become. The concepts covered are the core of Firebase so once you have them settled you'll know how to use it. Learning Firebase is important because at the end is easier than spinning up our own backend, database and authentication.

\n

Also you saw there are some Firebase commands, as a React Developer, you do not need to memorize these things and most of the time you can always refer to the documentation.

"},{"url":"/posts/2020-06-22-graph_ql_debrief/","relativePath":"posts/2020-06-22-graph_ql_debrief.markdown","relativeDir":"posts","base":"2020-06-22-graph_ql_debrief.markdown","name":"2020-06-22-graph_ql_debrief","frontmatter":{"title":"GraphQL + Apollo - Flash Debrief","template":"post","date":"2020-06-22 19:31:03 -0400","permalink":"graph_ql_debrief","filename":"2020-06-22-graph_ql_debrief"},"html":"
\n

What is GraphQL? It is a query language that wraps around an existing database to make requests to APIs differently. I implemented GraphQL on the latest iteration of the Yijing-Ball-Z app.

\n
\n

GraphQL + Apollo - Flash Debrief

\n

What is GraphQL? It is a query language that wraps around an existing database to make requests to APIs differently. I implemented GraphQL on the latest iteration of the Yijing-Ball-Z app.

\n

Look at the traditional backend diagram:

\n

\"Screen

\n

We make requests to specific endpoints to get some data. Above you can see the REST paradigm, with either POST, GET, PUT etc requests. With deeply nested endpoints e.g. users/userId/posts we could make at least multiple requests just to get user posts.

\n

Now GraphQL tries to solve this differently from REST APIs. So first we need to make our server into a GraphQL backend server.

\n

\"Screen

\n

So you can see first that there's only one endpoint exposed instead of multiple endpoints. Then from here we make all requests to either a query (ask/read data) or mutation (create/update/delete data). These requests look pretty much like JSON objects. So we don't need multiple endpoints to just access data.

\n

Playing with GraphQL

\n

Take a look at the GraphQL Playground. Here we can start playing with GraphQL queries for a sample project. Please refer to GraphQL documentation for queries help. You can implement this playground when you build your own GraphQL server.

\n

Here's an example of a query you can do on this playground:

\n

\"Screen

\n

Inside our query we can only make certain requests as defined on the db as things we can take. If you look at the schema you can see what is available. We can define our schema in many ways for example a Person schema:

\n
type Person {\n  id: ID!\n  name: String!\n  age: Int!\n}\n
\n

The exclamation mark means mandatory. Items is an array, then inside items there's an item. Then if you click on docs you can see the type of queries you can make.

\n

\"Screen

\n

If we pass then ID of collection we can get a collection, we can also get a collection by a title. So whatever we see we have access it means it was built by the backend server and made available to us. Here's an example of a query we can make:

\n
query {\n  collections {\n    id\n    title\n  }\n}\n
\n

If you click run with this query then you get an object containing all the collections. You can also pass in items to get the items as specified on the schema. As this:

\n
query {\n  collections {\n    id\n    title\n    items {\n      id\n      name\n      price\n    }\n  }\n}\n
\n

Now what if you wanted to query by ID:

\n
query {\n  collection(id: \"cjwuuj5bz000i0719rrtw5gqk\") {\n    title\n  }\n}\n
\n

For mutations we'll start with the mutation keyword. Back to our Person example consider this:

\n
mutation {\n  createPerson(name: \"Bob\", age: 36) {\n    name\n    age\n  }\n}\n
\n

Now in your schema you might define it as such:

\n
type Mutation {\n  createPerson(name: String!, age: Int!): Person!\n}\n
\n

Pretty easy right?

\n

Note: as React developers, we will usually only concern ourselves with the frontend implementation of GraphQL. If you're curious as to how to build a GraphQL server, below are some resources, as well as a list of some popular options out there for building such a server:

\n\n

Introduction to Apollo

\n

Ensure you install it as well as GraphQL:

\n

yarn add apollo-boost react-apollo graphql

\n

Apollo client lets us use the GraphQL API toolkit. Apollo also caches the data so we don't double request it.

\n

Take a look at the index.js on the following GraphQL example repository. We could test making a query using gql function as this:

\n
client.query({\n  query: gql`\n  {\n    getCollectionsByTitle(title: \"hats\") \n    {\n    id\n    title\n    items {\n      id\n      name\n    }\n   }\n  }\n  `\n}).then(res => console.log(res))\n
\n

Note how here the client.query returns a promise.

\n

Apollo Container

\n

On the example repo take a look at the Collections-Ov-GraphQL component. This container does the fetching and includes loading attribute we can use. You might see how Apollo extrapolates a lot of the verbose promise code, resolving etc. So it feels like synchronous even though we're fetching the database.

\n

GraphQL vs Redux

\n

There are benefits in both. Redux has very fleshed out architecture. You can actually use both in the same app, however you might actually be having to handle two pieces of state management. So usually Apollo replaces Redux but this is up to you, but if you keep both then it could affect the single source of truth concept.

\n

Here's how Redux works:

\n

\"Screen

\n

Here's how Apollo works:

\n

\"Screen

\n

Local cache replaces our reducer. We access/modify our data through a query or mutation. These resolver functions can get or modify data and they can get it from local cache as internal state.

\n

Mutations on the Client (Frontend)

\n

Mutations are a bit different and you can check the example Repo and specifically the graphql folder. Basically you create a resolvers.js file that handles the mutations inside a graphql folder in src.

\n

extend keyword in GraphQL behaves a little bit different than JS, read more here. Another key concept are resolvers methods, the GraphQL documentation can explain them in detail. Here the cache object you can read more about it.

\n

Notice also how we import and pass to our client in index.js the resolvers and typeDefs defined on resolver.js. Here for example the toggleCartHidden mutation is used on header-container that is in charge of dealing with the graphql querying using the Query element and then renders the header-component.

\n

You might also notice in resolvers.js the @client this tells Apollo to look on the local cache not the server. Finally on the cart-icon container you might see that it uses compose and graphql functions, that look kind of like Redux, you can access the documentation to see how to implement in detail.

\n

Mutations can be a complex topic, so read on the resources and make your own tests. Complete Apollo documentation in the link here. However do have in mind that if you would like to implement it consider having a container that deals with the graphql logic then the actual presentational component so the latter can be reused as it is not solely related to graphql.

\n

What's Next

\n\n

Conclusion: Should You Use GraphQL?

\n

GraphQL can be very challenging since there's so much to learn at the beginning. I tried to touch on some interesting concepts, with demo projects both in React and Vanilla JS. The rest is for you to keep digging and motivate yourself to start implementing it in your own project.

\n

Do note that the issues with REST that GraphQL tries to solve, are important propositions. The problem with implementations such as Apollo is that it needs both backend and frontend adoption. Setting up backend with can be hard so taking this risk might be difficult. Also this tech is new, not like Redux which there are so many resources out there. Apollo client and GraphQL are relatively new and the paradigm might change. So for now learning GraphQL is great, but do keep your strong skills on Redux, since on scaling it performs really well, and has been industry tested.

"},{"url":"/posts/2020-07-20-stripe_api_implementation/","relativePath":"posts/2020-07-20-stripe_api_implementation.markdown","relativeDir":"posts","base":"2020-07-20-stripe_api_implementation.markdown","name":"2020-07-20-stripe_api_implementation","frontmatter":{"title":"Implementing Stripe API in React","template":"post","date":"2020-07-20 19:31:03 -0400","permalink":"stripe_api_implementation","filename":"2020-07-20-stripe_api_implementation"},"html":"
\n

Handling payments is very complex, not talking the security risks one can take if handling payment information. Stripe API, make things easier, secure and faster to deploy

\n
\n

Implementing Stripe API in React

\n

In my latest React project, Studio Ghibli's Fan Hub I implemented Stripe API to test and handle payments on the Shop component of the app.

\n

Handling payments is very complex, not talking the security risks one can take if handling payment information. Stripe API, make things easier, secure and faster to deploy.

\n

Intro to Stripe

\n

Stripe is well known in the payments sphere. You can read the docs to learn more how easy it can be implemented. But basically Stripe renders itself the handling of payments and you implement some configuration to get the payment information and handle it backend. For this post we will focus on the frontend with React.

\n

Setting Up Stripe

\n

Again we will implement the frontend of Stripe. We might implement the backend handling of the data received in a future blog.

\n

First things first lets sign up for Stripe account.

\n

Integrating Stripe

\n

Lets add it to our package.json

\n

yarn add react-stripe-checkout

\n

With this installed we can now add our Stripe element to render it frontend. Lets begin by creating a boilerplate element such as this one.

\n
import React from \"react\";\nimport StripeCheckout from 'react-stripe-checkout'\n\nconst StripeBtn = ({ price }) => {\n    const priceForStripe = price * 100\n    const publishableKey = \"your_key\"\n    \n    const onToken = token => {\n        console.log(token)\n        alert('Payment Successful')\n    }\n\nreturn (\n<StripeCheckout\n    label=\"Pay Now\"\n    name=\"Studio Ghibli's Fan Hub (Demo Purposes)\"\n    billingAddress\n    shippingAddress\n    image=\"https://svgshare.com/i/Lko.svg\"\n    description={`Your (demo) total is ${price}`}\n    amount={priceForStripe}\n    panelLabel=\"Pay Now\"\n    token={onToken}\n    stripeKey={publishableKey}\n>\n\n</StripeCheckout>\n)\n}\n\nexport default StripeBtn\n
\n

Not here it is worth mentioning that stripe handles values as cents, that is why we create the const. The publishableKey is your own API key. To get the key, just access your new account and click on developer tab then API keys.

\n

\"img\"

\n

Now, the imported stripeCheckout has a bunch of features and you can read more here.

\n

token is where you process your payment on your backend. For now we will just log it to the console and have the fake alert.

\n

With this you can go ahead and test adding this button to your appropriate component and see the button has been added accordingly. Here's how it shows on mine:

\n

\"Screen

\n

You might see some console errors they are usual Stripe's end and had to do with style them, if it doesn't affect functionality ignore them for now.

\n

Go ahead and test by using any of the test credit cards found a Stripe's docs. Everything should test correctly. And done you have implemented Stripe! Here's the token object format.

\n

\"Screen

\n

Now although these are just the first steps. You can continue building and show how as a React developer you can implement Stripe!

"},{"url":"/posts/2020-07-07-going_beyond_usestate_react/","relativePath":"posts/2020-07-07-going_beyond_usestate_react.markdown","relativeDir":"posts","base":"2020-07-07-going_beyond_usestate_react.markdown","name":"2020-07-07-going_beyond_usestate_react","frontmatter":{"title":"React Hooks: Going Beyond useState","template":"post","date":"2020-07-07 19:31:03 -0400","permalink":"going_beyond_usestate_react","filename":"2020-07-07-going_beyond_usestate_react"},"html":"
\n

Hooks are fairly new, and there's still a lot of hype around them. However, a lot of companies have built scalable apps without hooks. So for some companies, it'll take time to migrate to Hooks.

\n
\n

React Hooks: Going Beyond useState

\n

Hooks were implemented in 2019. They have very interesting features and bring some changes to building components. Hooks can only be used in React 16 or higher and on functional components. Read about the motivation to add React Hooks here.

\n

Now probably by know, everyone with some React knowledge should know about the useState Hook. It lets us use state in functional components. You can use as many as use state hooks as needed. This is an alternative to setting state with deeply nested objects. On this article we'll go beyond useState and explore other hooks.

\n

useEffect

\n

useEffect lets us employ lifecycle kind of methods to functional components. This has to do with dealing with side-effects including API calls.

\n
// mimics as a render lifecycle method\n\nuseEffect(() => {\n    console.log('hello')\n})\n\n// ...assume this code on an input\nonChange={e => setQuery(e.target.value)}\n\n// useEffect gets called whenever onChange changes value\n
\n

useEffect does not get a value, but gets a function that gets called whenever the component changes/updates and re-renders. It works as componentDidMount and also as the render method when the component gets updated.

\n

If we want to use useEffect as componentDidMount we add an array as second argument.

\n
useEffect(() => {\n    console.log('hello')\n},[])\n
\n

The array takes an array of properties we want to watch and it will render if those properties change. If the array is empty is like componentDidMount. Now how could we implement an API call using useEffect?

\n
useEffect(() => {\n    if (query.length > 0) {\n        const fetchUser = async () => {\n            const res = await fetch('baseURL')\n            const resJson = await res.json()\n            //useState call\n            setUser(resJson)\n        }\n    \n        fetchUser()\n    }\n},[query])\n
\n

Make sure you add the empty array, or with special properties if you plan it to run it once. In this case it will update if the search query updates on the example above. The conditional then ensures we are calling useEffect if queries are valid. You can read more about Hook rules.

\n

Note: You might get a warning when using useEffect that says something like 'React Hook useEffect has a missing dependency...etc'. To add a safeguard if calling an API pass in the api in the array list as such:

\n
    // behaves like componentDidMount avoids missing dependency warning\n    useEffect(() => {\n      checkUserSession()\n    }, [checkUserSession])\n
\n

useEffect as componentWillUnmount

\n

We can also pass a cleanup function, so return a function from a function. This is useful when implementing subscriptions, so on the cleanup function it will be for unsubscribing.

\n

\"Screen

\n

useEffect Boilerplate Code

\n
//ComponentDidMount\n//Class\ncomponentDidMount() {\n    console.log('I just mounted!');\n}\n \n//Hooks\nuseEffect(() => {\n    console.log('I just mounted!');\n}, [])\n\n\n//ComponentWillUnmount\n//Class\ncomponentWillUnmount() {\n    console.log('I am unmounting');\n}\n \n//Hooks\nuseEffect(() => {\n    return () => console.log('I am unmounting');\n}, [])\n\n\n// ComponentWillReceiveProps\n//Class\ncomponentWillReceiveProps(nextProps) {\n    if (nextProps.count !== this.props.count) {\n        console.log('count changed', nextProps.count);\n    }\n}\n \n//Hooks\nuseEffect(() => {\n    console.log('count changed', props.count);\n}, [props.count])\n
\n

Reusable Custom Hooks

\n

Sometimes you might have similar situations in which you're using the same hooks, with very small differences. Lets say you're fetching with useEffect then setting state depending on the return of the fetch. Here's where reusable Hook components work.

\n

Here's how we can implement custom hooks:

\n
    \n
  1. Create new folder called 'effects' then a file with the name of your custom hook with the 'use' keyword. E.g. 'useFetch'.
    2. \n
  2. Create your custom hook. E.g.
    3. \n
\n

\"Screen

\n
    \n
  1. Import it and use it
    2. \n
\n

\"Screen

\n

It is like writing utility functions. Then you can make those custom hooks to share functionality.

\n

Note also the example there's no second argument with the [] passed so it gets called whenever the useFetch custom hook gets called. We could also pass the 'url' as the second argument. Since our user might change and there are no dependencies here we don't pass the second argument in this use case. So in this case the component that use it, will fire the useFetch whenever it re-renders.

\n

useReducer

\n

The useReducer hook can be similar as to what you use with Redux. useReducer is for cases where you need more complex state management than useState. You can read the documentation here.

\n

Consider the following useReducer example.

\n\n

As you can see is similar to Redux. We also destruct different values. In the useReducer, we pass the reducer and the initial state value.

\n

The initial state we created accordingly and the reducer is just like in Redux. Then you can see the action creators setUser and setQuery with types and payload, again like Redux. Now how we pull the values we destruct them from our state variable and we dispatch them with our dispatch, e.g. dispatch(setUser(resJson[0])). So React seems to be moving in which we might or not want to use Redux in our case or the other.

\n

Implementing Context API with createContext and useContext

\n

Context API was recently updated by the React team. Context API is also used by Redux but now is more powerful. Context API tries to solve props drilling, and is a way to store different states in separate components and add them as Hooks. This is done like Redux.

\n

In order to implement context Hook:

\n\n

In Studio Ghibli Fan App we implemented this in the Collection page. The context created can be found here.

\n

Dynamically Set Values with Context API

\n

Here we take advantage of Context.Provider. We implemented it on App.js wrapping the header to pass the currentUser context. We use the value attribute to pass the state we need on on to the Context Consumer in this case Header. So if currentUser changes then Header, as the consumer re-renders. Take a look at how Header consumes the context created here.

\n

We can even create whole providers with Context API that we pass into our own index.js just like Redux.

\n

Here you might see a caveat that we have to re-leverage component state to use this created context. But it can be easier to pass state into nested components. Remember we are solving prop drilling.

\n

Context API vs Redux

\n

It is rare that you have an app that uses both. But you'll have to decide. Things like Redux-persist, Redux-logger still are pretty robust and difficult to implement fast with Context API. Redux is more opinionated but with Context API we loose sagas, thunk, etc. Context API might make our component less reusable as we tight the components to their specific contexts they live. Also as app grows with Context API you might be having a lot of providers in index.js while redux there's the root provider. So Redux for larger scale apps might be a better go. Context API would be good for a portfolio project or small landing page with not that much reusability.

\n

Should we adopt Hooks?

\n

Hooks are fairly new, and there's still a lot of hype around them. However, a lot of companies have built scalable apps without hooks. So for some companies, it'll take time to migrate to hooks. Below are some resources you can use in your learning of these exciting Hooks.

\n"},{"url":"/posts/2020-06-29-styled_components_intro/","relativePath":"posts/2020-06-29-styled_components_intro.markdown","relativeDir":"posts","base":"2020-06-29-styled_components_intro.markdown","name":"2020-06-29-styled_components_intro","frontmatter":{"title":"CSS In JS? Yes! Styled Components 💅🏽","template":"post","date":"2020-06-29 09:31:03 -0400","permalink":"styled_components_intro","filename":"2020-06-29-styled_components_intro"},"html":"
\n

Styled Components can be an advanced topic, and it comes with tradeoffs with pros and cons. As you move into becoming an advanced React developer know when to use this tool is efficient and when you should not add this overhead. Each project and each situation is different and you should make the right call before you jump into the latest trend.

\n
\n

CSS In JS? Yes! Styled Components 💅🏽

\n

This is a hot topic. The usual way was separating your CSS files and add your styles as needed. Then import them to the appropriate component. With React we scope the CSS to the specific component that we want to style.

\n

Back then styling was very simple, nowadays with large scales app styling can get very complicated and organizing CSS as difficult.

\n

Problem can be with CSS that shares same namespace so if another developer adds their own styling to .name then it could cause conflicts. To overcome this different implementations such as BEM have risen. However with BEM class names can become very nested with lots of mental overhead.

\n

With React we could leverage this even further by creating style constants then apply it to the specific component. E.g.

\n

\"Screen

\n

With this way there are some limitation with limited functionality (not all CSS selectors are available here) but the most popular enhancement to CSS in JS right now is Styled Components (SC).

\n

To purists they believe CSS should be done in CSS but performance might be enhanced along with the readability of your app.

\n

What is Styled Components?

\n

SC will make our code into components, so then we can encapsulate our CSS to avoid the usual problems of styles leaking across components.

\n

Note: If you're on VS Code we recommend installing the vscode-styled-components extension, it will highlight your syntax so you get used to and it will help you get a head start with this great library.

\n

After you read and install SC (yarn add styled-components) you should import it on the specific component you want to implement it. The documentation has a simple example:

\n
import React from 'react'\nimport styled from 'styled-components'\n\nconst Title = styled.h1`\n  font-size: 1.5em;\n  text-align: center;\n  color: palevioletred;\n`;\n\nconst Wrapper = styled.section`\n  padding: 4em;\n  background: papayawhip;\n`;\n\nrender(\n  <Wrapper>\n    <Title>\n      Hello World!\n    </Title>\n  </Wrapper>\n);\n
\n

Here you can see that the attribute after style it is just the element, so it could be an h2, div, img etc. Then we use string interpolation just like we usually do in React. However here we add our own styling. The styles we create are just elements that we can then use but with styles. These elements themselves can have additional styling, class names etc. So we use Title and Wrapper like any other React component – except they're styled!

\n

Now if you do a console.log you will see that SC gives each component their own unique class name. Because of this styles will never bleed. So you can share names with different components, and they will never be collisions.

\n

SC also supports all selectors and it will even support props! Learn more about it in docs.

\n

Implementing SC in our React App

\n

Now for small apps you could definitely implements SC in the components themselves. However you can also separate SC into their own JS files for better access by other developers. Here's the naming structure of folders and files.

\n

So let's say you have a Homepage component with a className of \"homepage\" you'll then create a new JS file that will hold the specific SC code. Then you will just take a look at the CSS file code and convert it as SC code as this:

\n
/* old css file */\n.homepage {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n
\n

homepage.styles.js:

\n
import styled from 'styled-components';\n\nexport const HomePageContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n`;\n
\n

And our Homepage changes:

\n
//old Homepage.js\nconst HomePage = () => (\n  <div className='homepage'>\n  </div>\n);\n\n\n//Homepage.js with SC\nimport { HomePageContainer } from './homepage.styles';\n\nconst HomePage = () => (\n  <HomePageContainer>\n  </HomePageContainer>\n);\n
\n

Quiet easy right? With more complicated components you might need to go through the documentation, but all-in-all usually is pretty straightforward. You add styles as different const and for example if you need to style an imported element such as Link from React Router you'll just do:

\n
import {Link} from 'react-router-dom'\n\nexport const OptionLink = styled(Link)`\n    height: 100%;\n`\n\n<OptionLink to=\"/shop\"> SHOP <OptionLink/>\n
\n

You saw how we use it in our component as pass the props as usual.

\n

If you need to leverage CSS to reuse and share with other styles you can write it with style components such as in this example:

\n
import styled, { css } from 'styled-components';\n\nconst ReusableStyles = css`\n    display: flex;\n    cursor: pointer;\n`\n\nexport const OptionLink = styled(Link)`\n    ${ReusableStyles}\n`\n\nexport const OptionDiv = styled.div`\n    ${ReusableStyles}\n`\n
\n

If you want to make even more easier you can just use the as keyword and it will do the same as the reusable css code above without importing the css module. With the 'as' keyword you can also include {} to import other components etc.

\n
<OptionLink as='div' onClick{() => handleChange()} />\n
\n

With SC css you can also conditionally render CSS blocks.

\n
const buttonStyles = css`\n  background-color: black;\n  color: white;\n  border: none;\n\n  &:hover {\n    background-color: white;\n    color: black;\n    border: 1px solid black;\n  }\n`;\n\nconst invertedButtonStyles = css`\n  background-color: white;\n  color: black;\n  border: 1px solid black;\n\n  &:hover {\n    background-color: black;\n    color: white;\n    border: none;\n  }\n`;\n\nconst googleSignInStyles = css`\n  background-color: #4285f4;\n  color: white;\n\n  &:hover {\n    background-color: #357ae8;\n    border: none;\n  }\n`;\n\nconst getButtonStyles = props => {\n  if (props.isGoogleSignIn) {\n    return googleSignInStyles;\n  }\n\n  return props.inverted ? \n    invertedButtonStyles : \n    buttonStyles;\n};\n
\n

You might notice that you can also implement SCSS patterns with SC.

\n

Styled Components Tradeoffs

\n

Styled Components can be an advanced topic, and it comes with tradeoffs with pros and cons. As you move into becoming an advanced React developer know when to use this tool is efficient and when you should not add this overhead. Each project and each situation is different and you should make the right call before you jump into the latest trend.

"},{"url":"/posts/2020-05-11-react_pattern_apropcalypse/","relativePath":"posts/2020-05-11-react_pattern_apropcalypse.markdown","relativeDir":"posts","base":"2020-05-11-react_pattern_apropcalypse.markdown","name":"2020-05-11-react_pattern_apropcalypse","frontmatter":{"title":"A React Pattern to Avoid Apropcalypse","template":"post","date":"2020-05-11 19:31:03 -0400","permalink":"react_pattern_apropcalypse"},"html":"
\n

React patterns are useful to promote code reuse while maintaining component simplicity and flexibility.

\n
\n

Today we'll go over some React patterns I learned while participating at Byteconf React. React patterns are useful to promote code reuse while maintaining component simplicity and flexibility. This article is a bit on the advanced React side.

\n

Typical Component Development

\n

Lets imagine a custom component that has an accordion UI. So we'll build this Accordion component.

\n

\"accordion1\"

\n

Imagine another developer wants you to allow more flexibility to your accordion so that the order of the accordion items can be customized. Here you might think passing out a props like top so if true then the accordion item becomes the first.

\n

Now, another developer wants you to have the text on the side rather than at the bottom. Then after working on it you change the CSS so it can have it on the side with props as right, then if true it moves to the right.

\n

\"accordion2\"

\n

Then things can start becoming complicated when now another use case tell you to implement text on the left. So use cases start to pop up one after the other. Your accordion component starts having a lot of props, that can become hard to control and deal with.

\n

\"accordion3\"

\n

Easily you can jump into having a component with record level props (apropcalypse)!

\n

Some problems with a component with lots of props and many use cases to deal with:

\n\n

So how can we support these use cases without keep adding new props?

\n

Making it Simpler / Flexible

\n

The following implementation might look a bit confusing at the beginning. Note it uses React Hooks, so you might wanna brush up on it before digging into it (you can read my article on Hooks).

\n

\"patt1\"

\n

This implementation uses the inversion of control pattern. It has a default reducer, although anyone can use their own version of the reducer.

\n

So with this, we can build our own accordion component that might look like this:

\n

\"patt2\"

\n

And then we can pass items to render the accordion in the default way like <Accordion items={accordionItems}>

\n

\"accordion1\"

\n

Because component is built on top of a hook then you can modify to make things your way. E.g. lets say we want the accordion to point up now. Then with just a few lines of code differences, the change now becomes the responsibility of who is implementing the code:

\n

\"patt3\"

\n

What is important is that this pattern doesn't add any complexity to the logic behind the component. You can add features to it and have total control of render and no you're no longer responsible of use cases you don't want to support.

\n

As all the logic is stored in useAccordion custom hook, it gives flexibility and control as to how a particular user of the component wants the UI to be rendered.

\n

Remember we are inverting control, as it can receive its own custom reducer, props so it can adapt to it. This is a benefit of React Hooks.

\n

Here we are using the systems design principle of composability so that users can use this component and assemble as depending on their needs.

\n

Feel free to watch the Byteconf React presentation Video. The presenter has different examples with reducers to take care of other use cases. Also check the code repo here to play with it yourself!

\n

👋🏼👋🏼🚀

"},{"url":"/posts/2019-08-20-begin_building_your_own_cms_in_just_minutes_code-along/","relativePath":"posts/2019-08-20-begin_building_your_own_cms_in_just_minutes_code-along.markdown","relativeDir":"posts","base":"2019-08-20-begin_building_your_own_cms_in_just_minutes_code-along.markdown","name":"2019-08-20-begin_building_your_own_cms_in_just_minutes_code-along","frontmatter":{"title":"Begin building your own CMS in just minutes! (code-along)","template":"post","date":"2019-08-20 17:58:20 -0400","permalink":"begin_building_your_own_cms_in_just_minutes_code-along"},"html":"

Article on Medium

\n

As I was building [LuckyTube](https://lucky-tube.herokuapp.com/), I learned how in general it can be very straight forward to build a simple CMS using Sinatra. So you too can can start creating a Content Management System (CMS) with users managing a single resource in less than an hour!

\n"},{"url":"/posts/2020-07-06-node_express_baby_steps/","relativePath":"posts/2020-07-06-node_express_baby_steps.markdown","relativeDir":"posts","base":"2020-07-06-node_express_baby_steps.markdown","name":"2020-07-06-node_express_baby_steps","frontmatter":{"title":"Node.js + Express - Baby Steps 🍼","template":"post","date":"2020-07-06 09:31:03 -0400","permalink":"node_express_baby_steps","filename":"2020-07-06-node_express_baby_steps"},"html":"
\n

With Express we can easily build an stateless API...and follow patterns such as REST to build routes with GET, POST, PUT, you name it!

\n
\n

Node.js + Express - Baby Steps 🍼

\n

Today we'll be taking some baby steps into the Node.js world 👶🏽. You can check the latest incarnation of the Yijing Ball-Z with Node/Express as you follow along.

\n

Node.js: Pros vs Cons

\n

\"Screen

\n

In Node we have synchronous code, which can be called also blocking code. Async code is non-blocking that can run the background. So by running code in the background it seems faster and the app can do many things at the same time. Node usually has its sync vs async versions of methods e.g. readFile vs readFileSync. Unless it is top level code do not run sync methods. More on this to follow.

\n

Asynchronous Nature of Node.js

\n

Node is single threaded, so all users access the same single thread. If a user access the line with synchronous code it can be a problem (e.g. read very large file), with async code then multiple users can run queries at same time (e.g. login, read file, logout etc). So time-consuming data can run in background and once completed will finish the request.

\n

Example of blocking vs non-blocking code:

\n
// playing with fs module - SYNCHRONOUS / BLOCKING\n\nconst t1 = fs.readFileSync(\"./large-txt\", \"utf-8\");\nconst t2 = `${t1} \\n Done ${Date.now()}`;\n\nfs.writeFileSync(\"./txt/output.txt\", t2);\n\n//  NON BLOCK - ASYNC EXAMPLE\n\nfs.readFile(\n  \"./txt/start.txt\",\n  \"utf-8\",\n  // be wary of callback hell nesting here\n  (err, data) => {\n    console.log(data);\n  }\n);\n
\n

Node.js is built on callbacks. But be wary of callback hell, e.g.

\n

\"Screen

\n

Node is well known for callbacks to start nesting many levels down. We can escape this callback hell with async await or promises (I'll discuss this in a future article).

\n

Creating a Simple Web Server

\n

We can create a simple node server as this:

\n
const http = require(\"http\");\n\nconst server = http.createServer((req, res) => {\n  res.end(\"Hellooo\");\n});\n\n// saved variable then listen port\n// localhost default is '127.0.0.1'\nserver.listen(8000, \"127.0.0.1\", () => {\n  console.log(\"listening on port 8000\");\n});\n
\n

By using createServer() we then pass the callback function executed each time the server is requested. Then we listen on port 8000. So if you go to http://localhost:8000 on your browser you'll see: 'Hellooo'. Can it get more easy?

\n

Now if you console.log the req object you'll see a bunch of stuff, so we get access to a bunch of stuff to handle requests.

\n

Routing with Pure Node.js

\n

Routing can get complicated in a big app so Express is recommended but we'll talk about it next. For now we can modify our server as this:

\n
const server = http.createServer((req, res) => {\nconst pathName = req.url\n\nif (pathName === '/') {\n    res.end('Hellooo Root')\n} else if (pathName === '/product') {\n    res.end('Hellooo Product')\n} else  {\n    res.writeHead(404, {\n        'Content-type': 'text/html',\n        'my-own-header': 'hello-world'\n        });\n    res.end('<h1>Page not found!</h1>');\n}}\n
\n

On the 404 response we send back a header, which is a piece of info about the response sent back. my-own-header is like custom metadata we can see on the console then Network tab on Chrome.

\n

Sneak-peak of Express

\n

Express is a Node.js framework with useful abstractions. It is the most popular framework. It has some characteristics.

\n\n

So we can write apps so much faster, looks simpler as well.

\n

Express Setup and Basic Routing

\n

Note Express is fully written on Node but it abstracts away all the complexities.

\n

To start make sure you npm init and npm i express. Then create your App.js file that will contain your express server. Example

\n
const express = require(\"express\");\nconst app = express();\n\n// routing with GET\n\napp.get(\"/\", (req, res) => {\n  res.status(200).json({\n    message: \"Hi from Express world!\",\n    app: \"Museo API\",\n  });\n});\n\nconst port = 4000;\napp.listen(port, () => {\n  console.log(`Listening on port ${port}`);\n});\n
\n

Here .get() similar to Node, which has access to the request and response objects, but in Express there are even more methods. Now if you navigate to localhost:4000 you get \"Hello from Express World!\" as JSON and thus we have an Express API!.

\n

Another thing you can see is that Express automatically sends app headers for you. With Express we can easily build an stateless API (in which the client will ask for specific info) and follow patterns such as REST to build routes with GET, POST, PUT, you name it!

\n

Wanna checkout a quick demo of simple API implementation? Check this repo.

\n

Express Request / Response Cycle

\n

When Express receives a request, it creates a request and response object. Data will be used to process the data. To do this you can use some middleware, which intercepts and does something with the data on different stages. So here middleware is between request and response. There's the saying that everything is middleware, so router, setting headers, logging, parsing body.

\n

All middleware used in Express is called middleware stack. The req/res objects go into these middlewares and they call the next() function to move to the next middleware. This is called the pipeline until it reaches the final middleware that usually uses the res.send() method or similar (like res.json()). You can define your own middlewares:

\n
app.use((req, res, next) => {\n  // current time of request e.g.\n  req.requestTime = new Date().toISOString;\n  next();\n});\n
\n

Now you can use req.requestTime in any body of any request! There are many middlewares out there you don't have to manually create them yourself. It will make your life and development much easier.

\n

So as you grow your application, you wanna separate concerns. App.js then focuses mostly on middleware declarations using .use(). Also there should be a server.js file that deals with just starting the server and server configurations. Checkout such file in the YBZ repo.

\n

The Importance of Middlewares in Express

\n

So the importance of express middlewares is that you can implement validations as middleware then it will apply every time it applies. For example here's a function that will use the params middleware to check for 'id' and whether it exists. This will only fire if 'id' is on the params of the request.

\n
// tour controller\nexports.checkId = (req, res, next, value) => {\n  console.log(\"id is \", value);\n  if (req.params.id * 1 > tours.length)\n    return res.status(404).json({\n      status: \"fail\",\n      message: \"Invalid ID\",\n    });\n  // remember to call next() on middlewares\n  next();\n};\n\n// tour routes\nconst { checkId } = require(\"./tourController\");\n\nrouter.param(\"id\", checkId);\n
\n

With this simple check we no longer have to include such validations on each route, it will hit anytime the id matches the middleware. This is the magic of Node.js enhanced by Express!

\n

BONUS - Node Environment Variables

\n

Node can run on development and production environments among others. You can run in a particular environment by doing for example on the terminal and starting your server as: NODE_ENV=development node server.js. This could be helpful if you use different db for development/production. You can also check environment variables with process.env.

\n

Now the easiest way to define these variables and environments is to add them to a config.env file. To do this use a dotenv NPM package you can install as npm i dotenv. After you define your variables you can use them on server.js as this:

\n
// top level code server.js\nconst dotenv = require(\"dotenv\");\n// read config.env and save as env variables\ndotenv.config({ path: \"./config.env\" });\n
\n

BONUS 2 - ESLint and Prettier Cheatsheet

\n

Install this to use ESLint and prettier with cool config to make your Node life easier.

\n
npm i eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-plugin-react-hooks eslint-plugin-node eslint-plugin-import  eslint-plugin-react eslint-config-airbnb --save-dev\n
\n

In the repo you can check the .eslintrc.json and .prettierrc file configurations used.

\n

So although we took some baby steps on this exploration, I think they were enough to prepare us to fly with express in no time 🧙🏾‍♂️💫.

\n

Continue Your Journey

\n"},{"url":"/posts/2020-07-13-async_await_node/","relativePath":"posts/2020-07-13-async_await_node.markdown","relativeDir":"posts","base":"2020-07-13-async_await_node.markdown","name":"2020-07-13-async_await_node","frontmatter":{"title":"Solving Callback Hell😈 - JS Promises and Async-Await in Node.js","template":"post","date":"2020-07-13 09:31:03 -0400","permalink":"async_await_node","filename":"2020-07-13-async_await_node"},"html":"
\n

Async/Await was introduced recently. In order to use async/await we need to use mark functions as async functions. Async functions return a promise and we can use one or more await functions.

\n
\n

Solving Callback Hell😈 - JS Promises and Async-Await in Node.js

\n

Last week we went through the baby steps involved in Node.js and setting up a Express server. Now we left a question unanswered, remember callback hell in Node.js?

\n
const fs = require(\"fs\");\nconst superagent = require('superagent');\n\nfs.readFile(`${__dirname}/dog.txt`, (err,data) => {\n   superagent\n  .get(`https://dog.ceo/api/breed/${data}/images/random`)\n  .end((err, res) => {\n      if (err) return console.log(err.message)\n\n      console.log(res.body.message);\n\n      fs.writeFile('dog-img.txt', res.body.message,err => {\n          console.log(\"Dog Image Saved to File\")\n      });\n  })\n}) \n \n
\n

Note superagent is a NPM package we use to use APIs such as the Dog CEO API above.

\n

But note how here we ended up with callbacks inside of callbacks. This makes code messy and difficult to understand!

\n

Saving Callback Hell with Promises

\n

We can implement and consume promises easily. It implements a future value we are expected to receive in the future. Above .get() returns a promise so we can use it. To do that we use the .then() method:

\n
fs.readFile(`${__dirname}/dog.txt`)\n  .then(data => {\n    console.log(`Breed: ${data}`);\n    return superagent\n    .get(`https://dog.ceo/api/breed/${data}/images/random`);\n  })\n  .then(res => {\n    console.log(res.body.message);\n    fs.writeFile('dog-img.txt', res.body.message);\n  })\n  .then(() => {\n    console.log('Dog image saved to file!');\n  })\n  .catch(err => {\n    console.log(err);\n  });\n
\n

.then only handles fulfilled promises, .catch handles when error. Here we can see it looks much better and we're not nesting callbacks! However we still have callbacks function so we can make it event better 😏.

\n
const readFilePromise = file => {\n  return new Promise((resolve, reject) => {\n    fs.readFile(file, (err, data) => {\n      if (err) reject('File not found 😢');\n      resolve(data);\n    });\n  });\n};\n\nconst writeFilePromise = (file, data) => {\n  return new Promise((resolve, reject) => {\n    fs.writeFile(file, data, err => {\n      if (err) reject('File not found 😢');\n      resolve('success');\n    });\n  });\n};\n
\n

The Promise constructor takes an executer function with resolve and reject as arguments. Then here just modify the fs.readFile, fs.writeFile to be readFilePromise(), writeFilePromise() with the file name and looks much better. So with that we solve and have less callbacks inside of callbacks.

\n

Remember in order to use .then() we need to make sure code returns a promise!

\n

Using Promises with Async / Await

\n

Async/Await was introduced recently. In order to use async/await we need to use mark functions as async functions. Async functions return a promise and we can use one or more await functions.

\n
const getDogPic = async () => {\n  try {\n    const data = await readFilePromise(`${__dirname}/dog.txt`);\n    const res = await superagent.get(\n      `https://dog.ceo/api/breed/${data}/images/random`\n    );\n    console.log(res.body.message)\n\n    await writeFilePromise('dog-img.txt', imgs.join('\\n'));\n    console.log('Random dog image saved to file!');\n\n\n  } catch (err) {\n    console.log(err);\n    throw err;\n  }\n};\n\ngetDogPic()\n
\n

The await will make sure it waits for code to finish, once finished it will store it to variable. In in order to catch the error, we just wrap it in an try/catch block. So hope you can see how this looks sync even though is async code!

\n

So this is called synthetic sugar for promises, it is still the same on the back but looks better on the front 😊.

\n

Bonus - Promise.all

\n

We can wait for multiple promises using Promise.all by passing as an array of some saved promises. Example:

\n
  const res1Pro = superagent.get(\n    `https://dog.ceo/api/breed/${data}/images/random`\n  );\n  const res2Pro = superagent.get(\n    `https://dog.ceo/api/breed/${data}/images/random`\n  );\n  const res3Pro = superagent.get(\n    `https://dog.ceo/api/breed/${data}/images/random`\n  );\n  const all = await Promise.all([res1Pro, res2Pro, res3Pro]);\n  const imgs = all.map(el => el.body.message);\n  console.log(imgs);\n
\n

Further Reading

\n"},{"url":"/posts/2020-07-27-html_js_games_canvas/","relativePath":"posts/2020-07-27-html_js_games_canvas.markdown","relativeDir":"posts","base":"2020-07-27-html_js_games_canvas.markdown","name":"2020-07-27-html_js_games_canvas","frontmatter":{"title":"HTML5 + JS Games - An Intro to the Canvas Element 👾","template":"post","date":"2020-07-27 09:31:03 -0400","permalink":"html_js_games_canvas","filename":"2020-07-27-html_js_games_canvas"},"html":"
\n

HTML Games are fun way to practice your HTML canvas tag skills as well as Javascript concepts.

\n
\n

HTML5 + JS Games - An Intro to the Canvas Element 👾

\n

Couple of weeks ago I built a clone of the arcade classic snake, Retro Snake. Today we'll talk about some basic concepts involved in building HTML5 and JS games.

\n

HTML Canvas

\n

HTML Games are fun way to practice your HTML canvas tag skills as well as Javascript concepts.

\n

<canvas> is an element that has height/width and you can draw anything inside.

\n\n
<body>\n    <canvas height=\"500\" width=\"500\" \n    style=\"border: 2px solid #000;\" \n    id=\"ctx\"></canvas>\n</body>\n
\n

Adding Text with JS to Canvas

\n

getContext() is used in JS and '2d' to specify as two-dimension.

\n

With fillText() you can add text, in specific x and y coordinates, and get something like this:

\n
var ctx = document.getElementById(\"ctx\")\n    .getContext('2d');\n\nctx.fillText(\"HOLA BRAVE NEW WORLD!\", 150, 250);\n
\n

\"1\"

\n

To make font larger you can do like ctx.font = \"30px Calibri\".

\n

Draw a Line in Canvas

\n

strokeText(): gives embossed look to font.

\n

moveTo(): takes two params. First cursor will move to specific position. You use it to draw lines with lineTo(). You can then create line with stroke().

\n
ctx.moveTo(100,300)\nctx.lineTo(200,300)\nctx.stroke();\n
\n

So first two methods define line, third draws the line.

\n

fillStyle(). You can add color such as ctx.fillStyle = '#efa556' into a rectangle with fillRect().

\n

fillRect() takes four arguments. The first two position then next two width and height of rectangle as ctx.fillRect(250, 300, 200, 300);.

\n

\"2\"

\n

Canvas State

\n

The canvas object we identified as ctx has many properties like we've been describing. Sometimes if we fillStyle() ctx then everything after could be red as well!

\n

To manage this we have canvas state.

\n\n

So when we do modification on canvas and then save the checkpoint and then restore as we need it.

\n

Drawing JS Objects in the Canvas

\n

Lets try to draw this object:

\n
const square = {\n    width: 300,\n    height: 200,\n    x: 100,\n    y: 200,\n    color: 'red'\n}\n
\n

We can easily draw our square by accessing the square attributes:

\n
ctx.fillStyle = square.color\nctx.fillRect(\n    square.x, square.y, \n    square.width, square.height\n    )\n
\n

Using JS Functions

\n

Games like video are just a series of frames. The main difference is that you can interact with the game and not the video.

\n

We use the setInterval() to accomplish this. This will call the function every specified time. If we have setInterval(myFunction(),1000) then it will be like 1fps, as every 1 second there will be new frame. It will be very slow game so we can decrease when setInterval() can be called to have more frames.

\n

User Inputs & Event Handling

\n

You can control events with keyboard and mouse such as:

\n\n

Here are some examples:

\n
document.getElementById(\"ctx\").onmousedown = function() {\n    ctx.fillStyle = 'blue';\n    ctx.fillRect(100,100,50,50);\n\n}\n\n\ndocument.getElementById(\"ctx\").onmouseup = function() {\n    ctx.fillStyle = 'red';\n    ctx.fillRect(100,100,50,50);\n\n}\n\ndocument.onkeydown = function(e) {\n    //a = 65 code\n    if (e.keyCode == 65) {\n        ctx.fillText('A has been pressed', 100,100);\n    }\n\n}\n
\n

Recap

\n

When building HTML5 + JS games make sure you:

\n
    \n
  1. Declare the canvas element.
    2. \n
  2. Build objects of the game. For example: Snake and Food (for Snake game).
    3. \n
  3. Draw objects in the canvas.
    4. \n
  4. Move objects as required.
    5. \n
  5. Use functions to meet game requirements. Make sure you have the game requirements clear.
    6. \n
  6. Add common features such as scores, game over, initial screen etc.
    7. \n
  7. Add other features. E.g difficulty.
    8. \n
\n

Resources

\n"},{"url":"/posts/2020-08-05-getting_started_react_native/","relativePath":"posts/2020-08-05-getting_started_react_native.markdown","relativeDir":"posts","base":"2020-08-05-getting_started_react_native.markdown","name":"2020-08-05-getting_started_react_native","frontmatter":{"title":"Getting Started with React Native","template":"post","date":"2020-08-05 19:31:03 -0400","permalink":"getting_started_react_native","filename":"2020-08-05-getting_started_react_native"},"html":"
\n

This article on React Native assumes previous knowledge on React so there will be concepts that come from React.

\n
\n

Getting Started with React Native

\n

Before you get started: This article on React Native assumes previous knowledge on React so there will be concepts that come from React. While reading please refer to the Demo repository I made previously. Also, read my previous blog on React basics if you need a refresher.

\n

React Native (RN) is:

\n\n

React Native Approach

\n

There are React native specific components such as <View> and <Text>. RN is a real mobile app. It also uses hot reloading.

\n

It also gives you the options to go native and inject out Swift/Java should you need. Although most of the time you shouldn't do it.

\n

How RN works

\n

\"rn1\"

\n

Android has (V8 JS) and iOS (JS core), RN has the bridge that then implements its framework with JS. RN then spits out native code when we are ready to build with the export SDK.

\n

Getting Started: Using Expo (Preferred)

\n

First read React Native docs.

\n

Then, to get everything running you should install Expo at expo.io. Expo will ensure you can test app on mobile straight.

\n

After installation. To start directly with a new expo app use expo init projectName then do expo start. You can also clone the source code repository. Then just do npm install and expo start.

\n

From here, you'll need to download the mobile app version (either in AppStore or GooglePlay) of Expo and create an account. Once in the Expo app just scan the generated QR code and you're up and running!.

\n

RN Project Structure

\n

Similar convention with React but no index.js. App.js also is your entry point.

\n

Also note the inline based styling different from React. StyleSheet is imported from RN like JS to apply styles that you can reuse. RN uses flexbox CSS.

\n

React Native Components

\n

These are just like React components!

\n\n

There are some primitive RN elements such as the following:

\n

\"Screen

\n

As you follow along don't forget to download and run the following repo here. Again, if you navigate to App.js, you'll notice StyleSheet.create, this is optional and you can also pass styles inline just like in React.

\n

You might also notice how when you need to return more than one element you need to wrap it in a single element in this case we can do it in a <View>.

\n

Implementing React Native Elements

\n

The following example uses FlatList from 'react-native' and ListItem from 'react-native-elements'.

\n

If you check on the repo, you'll see the <ListScreen> component. There you'll identify the React Native's FlatList Element:

\n

\"Screen

\n

So FlatList does optimizations for you for the mobile world when lists become big. Here the FlatList reminds us just like React that key is important. 'Keys' are important when this list is changed, RN will have to rebuild the entire list if we don't specify the key. Keys optimize and RN will re-render only what it needs.

\n

FlatList properties:

\n\n

RN Navigation

\n

Extensible and easy-to-use navigation solution. React Native Navigation supports navigational features. We can have common views of a navigational menu, with stack based pages we commonly see on mobile apps.

\n

\"Screen

\n

To install read documentation here.

\n

Note: You might notice the newer version of RN Navigation has different implementation.

\n

Features:

\n\n

Two Types of Buttons for Navigation

\n

\"Screen

\n

We add the text as string and use the onPress attribute. Remember Button element is self-closed. Out of both for navigation we recommend TouchableOpacity element if you need more customization.

\n

Implementing Navigation

\n

We implement navigation on RN with React Navigator. In App.js we see how it uses the createStackNavigator() method. Depending on the version of React Navigator the way you implement it might change.

\n

With props passed by the stackNavigator() we can tell what to show or not on the screen. To access the navigation object you access it by props.navigation. On the included props.navigation.navigate() method we can pass in the screen we defined on App.js and it will render the component we want! It is easy as:

\n

onPress={() => props.navigation.navigate('ComponentName')}

\n

And voilà! This takes us to the basic navigation and UI display with React Native!

\n

\"May-20-2020

\n

React Native - Further Reading

\n"},{"url":"/posts/2020-07-21-mongo_db/","relativePath":"posts/2020-07-21-mongo_db.markdown","relativeDir":"posts","base":"2020-07-21-mongo_db.markdown","name":"2020-07-21-mongo_db","frontmatter":{"title":"MongoDB - A Sweet Database 🥭","template":"post","date":"2020-07-21 09:31:03 -0400","permalink":"mongo_db","filename":"2020-07-21-mongo_db"},"html":"
\n

MongoDB is a NoSQL database...Each database can have one or more collection. What in RDBS are tables. Each collection can have one or more data structures or single entity called document, like table rows in RDBS.

\n
\n

MongoDB - A Sweet Database 🥭

\n

MongoDB is a NoSQL database, compared to relational databases such as MySQL. In the latest reincarnation of our Yijing Ball-Z (YBZ) and Snake HTML5 Game, we implemented Mongo.DB/Mongoose on top of Express. So feel free to refer to the Mongo.DB YBZ Repository and Snake Node Backend as you read along.

\n

In MongoDB:

\n\n

MongoDB is defined more specifically as:

\n

\"Screen

\n

MongoDB uses as data structure like JSON called BSON. BSON is typed so documents are typed. Meaning all values have a data type, like string, boolean, number. All MongoDB documents are typed as well. With MongoDB you can have multiple values in one field, unlike RDBS. You can also have embedded documents. BSON documents have a limit on size as well.

\n

Embedding/Denormalizing: Including related data into a single document. It allows for quicker access and easier data models (better performance). But it's not always the best solution. Opposite is normalization in RDBS, which involves creating new tables, joining them.

\n

Installing Using MongoDB

\n

You can install locally MongoDB community server or use Atlas version in the cloud. After installing lets say locally you can create a new db, just run the shell by doing mongod, starting mongo shell on a new tab with just mongo and then doing use dbName. You can create a collection by doing this:

\n

db.tours.insertOne({name: \"Test Tour\", price: 297})

\n

Note you refer to your current database as db even though you named your database differently. You can refer to newly created document as such:

\n

db.tours.find()

\n

MongoDB automatically creates unique ids for documents created. You can show databases available and collections by doing either show dbs or show collection.

\n

You can also insert many documents just by doing for example db.tours.insertMany([{},{}]). You can also have different fields in different documents. So no limitation on fields as could be with RDBS.

\n

If for some reasons you have issues with the running mongod process you can force stop it by doing sudo killall mongod.

\n

CRUD with MongoDB

\n

Reading

\n

We already completed the C of CRUD by creating documents. Below are some reading/querying operators.find(): You can also pass a filter object. E.g. db.tours.find({difficulty: \"easy\"})

\n

You can make even more complex searches with query operators. Query operators start with an $, for example less than or equal is $lte. E.g. db.tours.find({price {$lte: 500}}).

\n

You can also have two search criteria. E.g db.tours.find({price {$lt: 500}, rating: {$gte: 4.8}}). Here gte is greater than or equal and lt is simply less than.

\n

Or queries can be performed as with $or. E.g db.tours.find($or: [{price {$lt: 500}, rating: {$gte: 4.8}}]). If you want to show only one field, e.g. name only you can do db.tours.find({difficulty: \"easy\"}, {name: 1}).

\n

You're starting to see how in MongoDB everything works with objects!

\n

Updating

\n

Similar to insertOne, insertMany we can do to update for example db.tours.updateOne({name: \"Test Name\"}, {$set: {price: 499}}). As you can see first you're like querying for the document then you update it. We use the $set operator and because we use insertOne if many matches only the first match is updated.

\n

To update more than one document if we expect multiple matches we can do db.tours.UpdateMany({price {$lt: 500}, rating: {$gte: 4.8}}, {$set {premium: true}}).

\n

Delete

\n

Delete is straightforward and we have deleteOne and deleteMany. For example: db.tours.deleteMany({rating: {$lt: 4.8}}). To delete all documents in a collection you just pass an empty object as this db.tours.deleteMany({}).

\n

Bonus: Using the Mongoose Library

\n

You can install with npm i mongoose. The relationship between MongoDB and Mongoose is similar as to that of Node.js and Express, so it a level up abstraction higher. The Object Data Modeling (ODM) it uses it is just a way to talk to the database. Mongoose allows for for rapid development. It also allows for schemas to model data, relationships, easy validation, query API and other middleware.

\n

In Mongoose we have the schema and the model. The schema is where the data is modeled, data structure is described, with default values and validation. The Mongoose model is a wrapper for the schema, which provides an interface to make CRUD operations on the database.

\n

Creating a Schema and Model in Mongoose

\n

Mongoose is about models. We create these models as blueprints for our db, in order to creates objects. In order to create a model we need a schema. In the most basic sense we can define our schema as such:

\n
const tourSchema = new mongoose.Schema({\n  name: String,\n  rating: Number,\n  price: Number,\n});\n
\n

We can refine it by adding some validations.

\n
const tourSchema = new mongoose.Schema({\n  name: {\n    type: String,\n    required: [true, \"must have name\"],\n    unique: true,\n  },\n  rating: {\n    type: Number,\n    default: 4.5,\n  },\n  price: {\n    type: Number,\n    required: [true, \"must have price\"],\n  },\n});\n
\n

Now we can create our model. Always remember models are capitalized in mongoose.

\n
const Tour = mongoose.model(\"Tour\", tourSchema);\n
\n

Testing Our Model: Creating Documents

\n

We can create new documents based upon the model we created.

\n
const testTour = new Tour({\n  name: \"Magic Monquira\",\n  rating: 4.7,\n  price: 49,\n});\n
\n

We can now save using .save() which produces a promise we can consume as well. The result value of the promise is a document.

\n
testTour\n  .save()\n  .then((doc) => {\n    console.log(doc);\n  })\n  .catch((err) => console.log(\"ERROR: \", err));\n
\n

Now you can check your db using the MongoDB Atlas or Compass interface and there you go you just used Mongoose to save to our MongoDB database, pretty easy right from our code!

\n

Level Up 🍄 Readings

\n"},{"url":"/posts/2020-08-04-mobile_development_roads/","relativePath":"posts/2020-08-04-mobile_development_roads.markdown","relativeDir":"posts","base":"2020-08-04-mobile_development_roads.markdown","name":"2020-08-04-mobile_development_roads","frontmatter":{"title":"Mobile Development - Which Road To Take?📱","template":"post","date":"2020-08-04 19:31:03 -0400","permalink":"mobile_development_roads","filename":"2020-08-04-mobile_development_roads"},"html":"
\n

You will be surprised that many of the mobile applications that you use are actually hybrid mobile applications (using frameworks like React Native)...

\n
\n

Mobile Development - Which Road To Take?📱

\n

There are few options available when it comes to mobile development.

\n

Native Apps (using Swift for iOS or Java for Android):

\n\n

Basically when you hear 'native' it doesn't mean that you are writing in machine code. There's still some level of abstraction, so although called native, it is not to the strictest sense.

\n

You'll also need two separate code bases. So could we do a mobile app and use a single code base?

\n

Option 1: Mobile Web Apps

\n\n

Option 2: Hybrid with WebView

\n\n

Option 3: Compiled/Interpreted/VM Hybrid

\n\n

Digging Deeper

\n

WebView App

\n\n

Compiled/Interpreted/VM hybrid app

\n\n

Different types of frameworks aimed to build hybrid apps

\n\n

Good vs Bad of Hybrid Development

\n

Advantages of Hybrid Approach

\n\n

Drawbacks of Hybrid Approach

\n\n

Where Hybrid Apps Work Best

\n\n

You will be surprised that many of the mobile applications that you use are actually hybrid mobile applications (using frameworks like React Native). Take Facebook app as an example.

\n

So now that you know the options available which road will you take?

\n

References

\n"},{"url":"/posts/2020-08-19-css_cheatsheet.css_cheatsheet/","relativePath":"posts/2020-08-19-css_cheatsheet.css_cheatsheet.markdown","relativeDir":"posts","base":"2020-08-19-css_cheatsheet.css_cheatsheet.markdown","name":"2020-08-19-css_cheatsheet.css_cheatsheet","frontmatter":{"title":"CSS Cool Tricks Cheatsheet 😎","template":"post","date":"2020-08-19 09:31:03 -0400","permalink":"css_cheatsheet","filename":"2020-08-19-css_cheatsheet"},"html":"
\n

If you always feel you have to look up CSS terms, checkout this cheatsheet! It will make your CSS life easier.

\n
\n

CSS Cool Tricks Cheatsheet 😎

\n

If you always feel you have to look up CSS terms, checkout this cheatsheet! It will make your CSS life easier. I applied some if this tricks while I was building Museo, a Vanilla CSS/SCSS Landing Page.

\n

Know About the Three Pillars to Write Good CSS

\n
    \n
  1. Responsive Design: Building a website that works well on all devices. You'll have to know about fluid layouts, media queries, responsive images, correct units (for e.g. font sizes) and desktop-first vs mobile-first.
    2. \n
  2. Writing maintainable/scalable code: Write code that is clean and reusable. Think about CSS folder architecture, and class naming.
    3. \n
  3. Web Performance: Make it faster and smaller in size. Less HTTP requests, compress code, and use a CSS preprocessor. Also less images and if images, compress them.
    4. \n
\n

Reset Styles Globally

\n

Sometimes you want to reset styles from those that might be imposed by the browser by default. Here's an example

\n
* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n
\n

Attribute Selectors

\n

We can select attributes by wrapping them in []

\n
/* ^ means starts with */\n\n[class^=\"col-\"] {\n    float: left;\n    background-color: orange;\n}\n
\n

Converting px units to rem

\n

The rem unit is related to root font size. So by setting the root font size, then use rem so you can easily make changes to root without changing all lines of codes. You can specify root font size. Instead of having root font as as px we could use percentages.

\n
html {\n    font-size: 62.5%;\n}\n
\n

Since usually default font size is 16px here we are saying 62.5% which is roughly 10px. This will mean that 1rem is 10px, 2rem is 20px and so forth.

\n

You can then use rem as this:

\n
.logo-box {\n position: absolute;\n /* 4rem = 40px */\n top: 4rem; \n left: 4rem;\n}\n
\n

!important

\n

!important overrides specificity rules. Can save headaches to make it work before you debug accordingly.

\n

You can add it also on utilities (using SASS), as reusable stylings. Read more.

\n

box-sizing: border-box

\n

With box-sizing: border-box we can change the box model. This is useful when an element’s specified width and height aren’t affected by padding or borders. This has proven so useful in responsive design that has found its way into reset styles. So border-box can help make responsive layouts more manageable.

\n

\"Screen

\n

clip-path: polygon()

\n

You specify the polygon you want to add the clipping. Then you add clippings with x and y coordinates left to right. Use Clippy tool to calculate it for you! You can make some cool polygon effects.

\n

CSS Animations with @keyframes and animation

\n

We use @keyframes and then give animation a name. Then you specify what happens when animation starts, ends and anything in the middle.

\n
@keyframes moveInLeft {\n0% {\n opacity: 0;\n transform: translateX(-100px);\n}\n\n100% {\n opacity: 1;\n transform: translate(0);\n}\n}\n
\n

Then once you define it, you can add it to the specific element you want to apply with the animation keyword.

\n
.btn-animated {\n/* animation name, animation duration\n    animation timing function, \n    animation delay\n*/\nanimation: moveInBottom .5s ease-out .75, \n}\n
\n

backface-visibility: hidden

\n

Whenever you work with animations and with translate(), many times backface-visibility: hidden; fixes many errors. So try to add it if you are having issues!

\n

overflow: hidden

\n

Another trick when an element is too big and is overflowing. You can use overflow: hidden to fix it.

\n

Pseudo Elements and Pseudo Classes

\n

Pseudo classes are a special state of a selector. For example .btn:link selects the elements on a special condition in this case when a button is a link.

\n
.btn:link {\n  display: inline-block;\n  text-decoration: none;\n  text-transform: uppercase;\n}\n
\n

Pseudo elements allow us to select certain part of an element. They are denoted with two colons to differentiate them from pseudo classes. This is the syntax:

\n
selector::pseudo-element {\n  property: value;\n}\n
\n

There are various pseudo elements. Take a sneak peak and learn more about them here.

\n

box-shadow

\n

With box shadow you can add shadow to elements. Take a look at this box shadow generator.

\n

@supports For Older Browser Support

\n

You can do graceful degradation with @supports. Example:

\n
@supports (-webkit-backdrop-filter: blur(7px)) or (backdrop-filter: blur(7px)) {\n    -webkit-backdrop-filter: blur(20px);\n    backdrop-filter: blur(20px);\n    background-color: rgba($color-black, .7);\n}\n
\n

This will make your CSS support older browsers.

\n

BONUS - SASS Preprocessor

\n

If you wanna use SASS in your project just install it with npm i node-sass --save-dev.

\n

Implement SASS Variables

\n

We can use SASS to implement variables, e.g. when specifying colors.

\n
$color-primary: #f9ed69\n\nnav {\n  background-color: $color-primary;\n}\n
\n

Implement Nesting With SASS

\n

In SASS you can do nesting and it will read much better.

\n
.navigation {\n  list-style: none;\n\n  li {\n    display: inline-block;\n\n    &:first-child {\n      margin: 0;\n    }\n  }\n}\n
\n

Note that & replaces selectors up to the point. So in normal CSS this will equate .navigation li:first-child. In CSS we would write everything above as the following (notice how we save a lot of repetition):

\n
.navigation {\n list-style: none;\n}\n\n.navigation li {\n display: inline-block;\n}\n\n.navigation li:first-child {\n  margin: 0;\n}\n
\n

Be careful on how deeper you go on nesting. Usually don't go deeper than two levels!

\n

Mixins

\n

Mixin is a reusable piece of code. Let's say we want to implement a Clearfix in multiple places. We use the @mixin keyword to define it and @include where we want to use it.

\n
@mixin clearfix {\n &:after {\n     content: \"\";\n     clear: both;\n     display: table'\n }   \n}\n\nnav {\n @include clearfix;\n}\n
\n

You can also pass in variables to mixin definitions. Just make sure when you want to use it, also pass in the variable for the mixin to work. Mixins then do become like functions. There are also extends and functions in SCSS so become familiar with them, but mixins are used the majority of times.

\n

Fast Development Environment with SASS

\n

Remember to install SASS. Then you can compile by adding this script in package.json:

\n
\"scripts\": {\n \"compile:sass\": \"node-sass sass/main.scss css/style.css -w\"\n},\n
\n

The -w will keep watching for whatever we do in our code. You can also install npm i live-server -g. Then run it as live-server on root folder. For the changes to be reflected without needing to reload manually.

\n

Build Scripts for SASS

\n

We can implement simple NPM build processes after we finish a feature.

\n

\"Screen

\n

There are a couple of NPM packages we use, we can install as npm i concat --save-dev, npm i autoprefixer --save-dev, npm i postcss-cli --save-dev, npm i npm-run-all --save-dev.

\n

We do this on package.json, check it on Github repository or see below the updated scripts part on package.json:

\n
\"scripts\": {\n  \"watch:sass\": \"node-sass sass/main.scss css/style.css -w\",\n  \"devserver\": \"live-server\",\n  \"start\": \"npm-run-all --parallel devserver watch:sass\",\n  \"compile:sass\": \"node-sass sass/main.scss css/style.comp.css\",\n  \"concat:css\": \"concat -o css/style.concat.css css/linea-icon-fonts.css css/style.comp.css\",\n  \"prefix:css\": \"postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css\",\n  \"compress:css\": \"node-sass css/style.prefix.css css/style.css --output-style compressed\",\n  \"build:css\": \"npm-run-all compile:sass concat:css prefix:css compress:css\"\n},\n
\n

Note the --parallel flag on start script. It means both run at the same time. On compile script be careful of your own .scss and .css file locations and update it accordingly.

\n

It doesn't matter if you don't understand everything. To compile your SASS into CSS all you do:

\n

npm run build:css

\n

With this, your CSS will be compiled, concat, compressed and ready for production! Bam💥

\n

Even More Tricks and Resources

\n"},{"url":"/posts/2020-08-10-three_tier_full_stack/","relativePath":"posts/2020-08-10-three_tier_full_stack.markdown","relativeDir":"posts","base":"2020-08-10-three_tier_full_stack.markdown","name":"2020-08-10-three_tier_full_stack","frontmatter":{"title":"Three-Tier Architecture & Full-Stack Development","template":"post","date":"2020-08-10 09:31:03 -0400","permalink":"three_tier_full_stack","filename":"2020-08-10-three_tier_full_stack"},"html":"
\n

We often hear people talking about the three tier architecture for web development...while these tiers often have different languages, there are systems that implement a single language for all tiers

\n
\n

Three-Tier Architecture & Full-Stack Development

\n

We often hear people talking about the three tier architecture for web development. In this approach, the entire web application is organized into three different layers.

\n
    \n
  1. The presentation layer which is concerned with delivering the information to the user. So, those are usually the UI related concerns that are dealt with at the presentation layer. Here we usually have HTML, CSS, and JavaScript.
    2. \n
  2. The business logic layer on the other hand is concerned more about the data, the data validation, the dynamic content processing, and generating the content to be delivered to the user. Here we usually have, Node, Ruby, Python, Java, C++ or PHP.
    3. \n
  3. This is backed up behind the scenes with the data persistence layer or the data access layer. So, this is concerned with how we store and interact with the data, typically in the form of a database and access this data through an API. So business logic layer interacts with the database like MongoDB or PostgreSQL.
    4. \n
\n

Today, we could have an specialist in one of these layers.

\n

\"1\"

\n

Also, while these tiers often have different languages, there are systems that implement a single language for all tiers.

\n

Frontend vs Backend

\n

Front End

\n

Typically, in a browser where the user can access the information, and this is where we use technologies like HTML, CSS and JavaScript are used to render content for the user.

\n

Backend

\n

This information delivery is managed behind the scenes by a back end support which is typically implemented nowadays using technologies like PHP, Java, ASP.NET, Ruby, Python or Node.

\n

Unifying a Single Language

\n

There's a trend in using one language for all three tiers. This will make one more prone to specialize as full-stack web developer. This is what Javascript tries to do by implementing for example React presentation, Node business logic and MongoDB for data access.

\n

\"2\"

\n

So, you could have the front end implemented as a single page application using frameworks like Angular or React. You have the server side or the business logic layer being implemented using technologies like Node, which is also dependent on JavaScript, and then you have the data storage itself being implemented using technologies like Mongo DB, which stores data in the form of JSON documents. The information exchange between the server-side and the client-side is usually done using JSON as the format, and the server-side supports a REST API endpoint.

\n

Resources

\n"},{"url":"/posts/2020-08-26-learning_about_flexbox_css/","relativePath":"posts/2020-08-26-learning_about_flexbox_css.markdown","relativeDir":"posts","base":"2020-08-26-learning_about_flexbox_css.markdown","name":"2020-08-26-learning_about_flexbox_css","frontmatter":{"title":"Learning About Flexbox","template":"post","date":"2020-08-26 09:31:03 -0400","permalink":"learning_about_flexbox_css","filename":"2020-08-26-learning_about_flexbox_css"},"html":"
\n

It might be common to think that software engineers don't have to deal or worry about UI, since it is delegated to UX designers. However learning about CSS patterns such as Flexbox is crucial to becoming a more thorough developer and problem solve with a design/layout mindset.

\n
\n

Learning About Flexbox

\n

It might be common to think that software engineers don't have to deal or worry about UI, since it is delegated to UX designers. However learning about CSS patterns such as Flexbox is crucial to becoming a more thorough developer and problem solve with a design/layout mindset.

\n

What Is Flexbox

\n

You can apply Flexbox to setup the initial layout of a website, app, and mobile application (with React Native). The first thing we need to do to start using Flexbox is to apply the following to the parent container:

\n

display: flex

\n

Flex Parent (Container) Properties

\n

Now lets imagine you have a container with 3 boxes:

\n
<div class=\"flex-container\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</div>\n
\n

In the container we could apply one of the following and each will have a different effect on the child:

\n\n

Flex Direction

\n

Lets say we'll apply flex-direction: column what do we get?

\n

\"Screen

\n

So pretty much we decide if we want them left-right or right-left, top-bottom etc. These are your options:

\n
.container {\n  flex-direction: row | row-reverse \n  | column | column-reverse;\n}\n
\n

Flex Wrap

\n

By default flex will try to fit all items into a single line if you don't want this you can change it:

\n
.container {\n  flex-wrap: nowrap | wrap | wrap-reverse;\n}\n
\n\n

Flex Flow

\n

With flex flow we combine flex-wrap and flex-direction into one property for example flex-flow: column wrap;.

\n

Justify Content

\n

With justify-content we can align our items along the main axis. You can distribute extra space. Here are our options:

\n
.container {\n  justify-content: flex-start | flex-end \n  | center | space-between | space-around \n  | space-evenly | start | end \n  | left | right ... + safe | unsafe;\n}\n
\n

For example we can display our items in the center with justify-content: center;:

\n

\"Screen

\n

Align Items

\n

We use it with justify-content to align items. This more specifically with align-items on a cross axis of the current line, so perpendicular to main-axis. We could apply this:

\n
.container {\n  align-items: stretch | flex-start | flex-end \n  | center | baseline | first baseline \n  | last baseline | start | end |\n   self-start | self-end + ... safe | unsafe;\n}\n
\n

Align Content

\n

With align-content you can align items along multiple lines:

\n
align-content: flex-start | flex-end | center\n | space-between | space-around | stretch\n
\n

If there's only one line, this property will have no effect.

\n

Flex Children (Items/Elements) Properties

\n

You can apply the following to child elements of the container:

\n
order: <integer>;\nflex-grow: <number>; /* default 0 */\nflex-shrink: <number>; /* default 1 */\nflex-basis: <length> | auto; /* default auto */\nflex: none | [ <'flex-grow'> <'flex-shrink'>?\n || <'flex-basis'> ]\nalign-self: auto | flex-start | flex-end\n | center | baseline | stretch;\n
\n

Order

\n

With order you specify the order of the children elements. The default is 0.

\n

Flex Grow / Flex Shrink

\n

With flex-grow you can specify how many a specify item will grow compared to others. Default is 0. Consider this:

\n
<div class=\"flex-container\">\n  <div style=\"flex-grow: 1\">1</div>\n  <div style=\"flex-grow: 1\">2</div>\n  <div style=\"flex-grow: 8\">3</div>\n</div>\n
\n

What we get:

\n

\"Screen

\n

Flex-shrink is kind of the opposite thus how it will shrink related to its sibling items. Default is 1.

\n

Flex Basis

\n

You can specify the initial length of an item. Default is auto.

\n

Flex

\n

With flex you can apply flex-grow, flex-shrink, and flex-basis at the same time. The second and third parameters are optional. It is recommended to use flex instead of the individual properties.

\n

Align Self

\n

Align self sets how the selected item will be aligned. It also overrides the align-items parent property.

\n
.item {\n  align-self: auto | flex-start \n  | flex-end | center | baseline | stretch;\n}\n
\n

Here we can align the third item in the middle of its parent container:

\n
<div class=\"flex-container\">\n  <div>1</div>\n  <div>2</div>\n  <div style=\"align-self: center\">3</div>\n  <div>4</div>\n</div>\n
\n

We then get:

\n

\"Screen

\n

Flex Tips

\n\n

Resources

\n"},{"url":"/posts/2020-08-31-big-o/","relativePath":"posts/2020-08-31-big-o.markdown","relativeDir":"posts","base":"2020-08-31-big-o.markdown","name":"2020-08-31-big-o","frontmatter":{"title":"Simply BIG-O","template":"post","date":"2020-08-31 09:31:03 -0400","permalink":"big-o","filename":"2020-08-31-big-o"},"html":"
\n

If you apply to 100 companies, it can be that 1% would actually get back to you. This could be the case if you're starting as a software developer. With that 1% you really need to be good at algorithms to take advantage of those precious opportunities.

\n
\n

Simply BIG-O

\n

If you apply to 100 companies, it can be that 1% would actually get back to you. This could be the case if you're starting as a software developer. With that 1% you really need to be good at algorithms to take advantage of those precious opportunities.

\n

What is good code?

\n

It usually means Readable and Scalable. BIG-O means scalable code:

\n\n

Note: Faster code (in terms how long it takes to compile) also depends of what CPU you have, the server etc. So it's hard to measure good code in terms of how 'fast' it performs.

\n

What is Big-O?

\n

Big-O means as inputs grows, how much does your function slow down? As elements, input increases how many operations does your function has to do?

\n\n

Big-O is important for big applications. Scalable code is thinking long term. Since we cannot pin down the exact runtime (in seconds) of an algorithms we measure how quickly the runtime grows in relation to its input and as the input gets immensely large.

\n

Good developers make these decisions efficiently. Big-O can give us reliable data in terms of Time Complexity. At the end of this article we'll discuss about Space Complexity as well.

\n

As we drill down on Big-O notations, please refer to the Big-O Cheatsheet and to the graph below:

\n

\"Screen

\n

Have in mind that we cannot express speed in seconds. The size of the input we usually call it n. And the relationship with the algorithm so we could say for example our runtime grows lineally to the size of the input as O(n) or of the square of the size of the input as O(n^2).

\n

With that in mind, let's go through each of these Big-O examples.

\n

O(n) - Linear - PREFERRED

\n

This is linear. As the number of elements increase so does the number of operations. Example:

\n
function findingNemo(message, array) {\n let t0 = performance.now()\n for (let i = 0; i < array.length; i++) {\n     if (array[i] === 'nemo' || array[i] <= 40) {\n     console.log(message, 'Found NEMO!');\n     break;\n     }\n }\n // Time is just for demo purposes.\n let t1 = performance.now() \n console.log(t1-t0, 'miliseconds')\n }\n\nconst nemo = ['nemo'];\nconst large = Array.from({length: 40000}, () => \n   Math.floor(Math.random() * 40000\n));\n\nfindingNemo('With Nemo: ', nemo); \nfindingNemo('Larger Array: ', large); \n
\n

If you run this you might notice that the time varies a lot. Again there are CPU, processor and other considerations that makes it hard to evaluate performance in terms of time. That is why we use Big-O and with this algorithm we say it is O(n).

\n

O(1) - Constant Time - EXCELLENT

\n

With O(1) it will always be the same calculation no matter how big the input grows.

\n
  function OnFn(box) {\n      console.log(box[1])\n  }\n
\n

Note the 1 is arbitrary. This can be O(2), O(3) but do narrow it down to O(1), to represent constant time. O(1) is used with Objects/Hash Tables data structures.

\n

O(n^2) - Nested Loops - BAD

\n

If you see nested loops you it is O(n^2). Performance decreases n^2 as input grows, so it is not lineally.

\n

You might get interview questions to make O(n^2) into an O(n) or better. Here's an example:

\n
//Log all pairs of an array\n\nconst boxes = ['a', 'b', 'c', 'd', 'e'];\nfunction logAllPairsArray(array) {\nfor (let i = 0; i < array.length; i++) {\n  for (let j = 0; j < array.length; j++) {\n  console.log(array[i], array[j])\n  }\n}\n}\n// nested loops so O(n^2)\nlogAllPairsArray(boxes)\n
\n

O(log n) - EXCELLENT - Used in Tree Data Structures

\n

There is a certain way to calculate number of nodes of perfect binary trees:

\n\n

If this sounds too complicated. Don't worry it sounds for me too 😅.

\n

O(2^n) Exponential time - PRETTY BAD - Worst Than O(n^2)

\n

A classic example is the fibonacci with recursion:

\n
function fibonacci(num){\n  if (num <= 1){\n      return num\n  }\n\n  return fibonacci(num - 2) \n    + fibonacci(num - 1)\n}\n
\n

O(n log n) - OK - Better than O(n^2) but worst than O(n)

\n\n
  // O(2^n)\nfunction fibonacciRecursive(n) {\n  if (n < 2){\n      return n;\n  }\nreturn fibonacciRecursive(n - 1) \n  + fibonacciRecursive (n - 2)\n}\n\nfibonacciRecursive(6)\n
\n

O(n!) - Factorial Time - MOST Expensive One

\n

It means you add a nested loop for every input. You probably would never see it.

\n

BIG-O RULES

\n
    \n
  1. \n

    Worst Case: Big-O looks at the worst case only.

    \n\n
    2. \n
  2. \n

    Remove Constants.

    \n\n
    3. \n
  3. Different terms for inputs
    4. \n
\n
function compressBoxesTwice(box1, box2)\nbox1.forEach(b => {\n       console.log(b)\n\n})\nbox2.forEach(b => {\n       console.log(b)\n\n})\n
\n

This is actually O(a + b) NOT O(n). This because of different terms for inputs.

\n\n
function printNumsThenAllPairSums(numbers) {\n\nconsole.log('these are the numbers:');\nnumbers.forEach(function(number) {\n   console.log(number);\n});\n\nconsole.log('and these are their sums:');\nnumbers.forEach(function(firstNumber) {\n   numbers.forEach(function(secondNumber) {\n   console.log(firstNumber + secondNumber);\n   });\n});\n}\n\nprintNumsThenAllPairSums([1,2,3,4,5])\n
\n\n

Space Complexity (Memory)

\n

When a program executes it will heap (store variables) or stack (keep track of function calls).\nYou also look at total size and see how much memory is being used.

\n

What adds space complexity?

\n\n

Space complexity refers to additional space. Example:

\n
// Space complexity O(n)\nfunction sayHola(n) {\n  var holaArray = [];\n  for (let i = 0; i < n; i++) {\n      holaArray[i] = 'hola👋🏼';\n  }\n  return holaArray;\n}\n\nsayHola(100)\n
\n

Remember that tradeoff of optimizing code it is often that it will increase space complexity.

\n

Final Notes

\n

For Technical Interviews: Sometimes optimizing might not be the right choice at beginning. Get the problem solved first. In interviews most of time you'll wanna do O(n) and O(1)!

\n

You also need to get the right balance between run time, space and readability. Big-O is crucial for bigger apps, still you need to work and understand it. It will make you a better engineer.

\n

How to Start: Focus on O(1), O(n) and O(n^2) then expand into others.

\n

Read More

\n"},{"url":"/posts/2020-09-14-data-structures_pt1/","relativePath":"posts/2020-09-14-data-structures_pt1.markdown","relativeDir":"posts","base":"2020-09-14-data-structures_pt1.markdown","name":"2020-09-14-data-structures_pt1","frontmatter":{"title":"Learning About Data Structures Part 1","template":"post","date":"2020-09-14 07:31:03 -0400","permalink":"data-structures_pt1","filename":"2020-09-14-data-structures_pt1"},"html":"
\n

Learning about data structures is an essential part of becoming a more experienced developers. Such knowledge will also help you to be a better problem solver.

\n
\n

Learning About Data Structures Part 1

\n

Learning about data structures is an essential part of becoming a more experienced developer. Such knowledge will also help you to be a better problem solver.

\n

While reading this article have this in mind:

\n

Programs = Data Structures + Algorithms

\n

OR

\n

Data Structures + Algorithms = Programs

\n

What are Data Structures (DS)

\n

If you know about data structures you can adapt to other coding problems and languages. If you know the fundamentals then you can make decisions in different areas.

\n

Data Structures (DS):

\n\n

Computers and Data

\n\n

Arrays

\n\n

Static vs Dynamic Arrays

\n\n

With this in mind push can also be O(n). JS usually doubles space when creating array and if you push JS could copy the array again and allocate new space.

\n

Hash Tables / (Objects in JS)

\n

Like hashes in Ruby. They are referred as objects in JavaScript.

\n\n

Remember:

\n\n

Hash Collisions

\n\n

Hash Tables vs Arrays

\n\n

Hashes and Arrays Questions Examples

\n

Note: Usually string questions are array questions. Like reversing strings etc. If you cannot see question examples below, click here.

\n\n

Linked Lists

\n\n

What is a linked list?

\n\n
    linkedList: apples --> grapes --> pears\n\n    apples\n    8947 --> grapes\n             8742 --> pears\n                       372 --> null\n
\n

Javascript doesn't have linked lists but we can build them.

\n

Linked Lists vs Array vs Hashes

\n\n

What is a pointer? Is a reference to another in memory. Example:

\n
  const o1 = {a: true}\n  // o2 has a pointer to o1 in memory, NOT copying it.\n  const o2 = o1\n  o1.a = false\n  console.log('1', o1)\n  console.log('2', o2)\n  // => should log false both, since its a pointer.\n
\n

If you delete the pointer then the reference sticks. There's garbage collection in JS.

\n

Building our JS Linked List

\n

Check below or click here for the code.

\n\n\n

Read more: https://www.quora.com/How-is-inserting-into-a-linked-list-O-1-I-dont-understand-how-this-is-the-worst-case

\n

Doubly Linked Lists

\n\n

Converting Single to Doubly Linked list

\n

Check below or click here.

\n\n \n## Singly vs Doubly Linked Lists\n\n

Linked Lists: Interview Questions

\n

Reverse singly list. Create method reverse() that will reverse singly list. See below or click here:

\n\n

Linked Lists Conclusion

\n\n

In our next chapter, things will get more interesting. So stay tuned for more data structures! 💫

"},{"url":"/posts/2020-09-07-unix_cheatsheet/","relativePath":"posts/2020-09-07-unix_cheatsheet.markdown","relativeDir":"posts","base":"2020-09-07-unix_cheatsheet.markdown","name":"2020-09-07-unix_cheatsheet","frontmatter":{"title":"Unix Cheatsheet🤓📗","template":"post","date":"2020-09-07 07:31:03 -0400","permalink":"unix_cheatsheet","filename":"2020-09-07-unix_cheatsheet"},"html":"
\n

Following in our cheatsheet series. We now tackle into Unix. As Web developers we live a lot in the terminal so knowing Unix commands is a key skill, so let's dive in!

\n
\n

Unix Cheatsheet 🤓📗!

\n

Following in our cheatsheet series. Today we tackle into Unix. As Web developers we live a lot in the terminal so knowing Unix commands is a key skill. Let's dive in!

\n

Terminal Basic Commands

\n

Every command line command is actually a little computer program, even with simple commands. These commands tend to have the following structure:

\n
    [command][options][arguments]\n
\n

Starting Tip: Your home directory (~) is the directory where your terminal always starts.

\n

Basics Cheats

\n\n

Migration and Destroy

\n\n

More Cheats

\n\n

Forward Search:

\n\n

Searching

\n\n

Resources

\n

Read this article.

"},{"url":"/posts/2020-10-27-technical_interviewing_tips/","relativePath":"posts/2020-10-27-technical_interviewing_tips.markdown","relativeDir":"posts","base":"2020-10-27-technical_interviewing_tips.markdown","name":"2020-10-27-technical_interviewing_tips","frontmatter":{"title":"Beating The Technical Interview","template":"post","date":"2020-10-27 09:31:03 -0400","permalink":"technical_interviewing_tips","filename":"2020-10-27-technical_interviewing_tips"},"html":"
\n

In the last couple of months I’ve had the opportunity to interview with many companies...Today I’ll talk about some interviewing tips when tackling with such technical questions!

\n
\n

Beating The Technical Interview

\n

In the last couple of months I've had the opportunity to interview with many companies (couple of even had a FANG 🧛🏼‍♂). Today I'll talk about some interviewing tips when tackling with such technical questions!

\n

Knowing How to Solve Coding Problems

\n\n

What To Expect

\n

When called for an interview, you can expect one (or a combination) of the following formats:

\n\n

Be ready for common questions such as:

\n\n

Make sure you are prepared

\n\n

What are companies looking for

\n\n

They want smart people that solve problems themselves without having other people to walk them by the hand all the time.

\n

The Flow: Follow It and You Will Cruise the Interview.

\n

As you follow the flow below, refer to this video for an example coding challenge.

\n

Ask Questions

\n\n

Talk out the Solution

\n\n

Brute force

\n\n

Refine solution with style

\n\n

Repeat after me: A solution (even brute force solution) is better than no solution.

\n

Some Reminders

\n
    \n
  1. Listen, ask questions. Look for clues.
    2. \n
  2. Draw and example. Big and with no special cases.
    3. \n
  3. Create (don't code) a descriptive solution. Walk through example before coding. State Brute force algorithm, if you feel you can do better than brute-force do the latter if not do brute-force. Again, a solution, is better than no solution.
    4. \n
  4. State Run-Time, Big-O
    5. \n
  5. Solidify your understanding of algorithm
    6. \n
  6. Code and optimize as needed.
    7. \n
  7. Modularize as much as possible.
    8. \n
  8. Test your code. Simple test cases, then bigger test cases.
    9. \n
\n

K.O. Reminders

\n\n

One Last Thing...

\n\n

BONUS: SAMPLE QUESTION

\n

I decided to take a chance at the classic Facebook question delineated on this video.

\n

The Question

\n

Given a list of people with their birth and death YEARS, find the (1) year with the highest population.

\n

The Solution

\n

I implemented a class-based approach. If you can't see the code below just access it here.

\n\n

Note: There are many variations of this question, and some of them might ask you a different output. Always ask for the edge cases! In this case there were only two test cases with obvious solutions.

\n

You've got this! 👊🏼

\n

Resources

\n"},{"url":"/posts/2020-09-16-data-structures_pt2/","relativePath":"posts/2020-09-16-data-structures_pt2.markdown","relativeDir":"posts","base":"2020-09-16-data-structures_pt2.markdown","name":"2020-09-16-data-structures_pt2","frontmatter":{"title":"Learning About Data Structures Part 2","template":"post","date":"2020-09-16 09:31:03 -0400","permalink":"data-structures_pt2","filename":"2020-09-16-data-structures_pt2"},"html":"
\n

Learning about data structures is an essential part of becoming a more experienced developer. This is the second part of the series (and will be the longest one), buckle down 🚀.

\n
\n

Learning About Data Structures Part 2

\n

Learning about data structures is an essential part of becoming a more experienced developer. This is the second part of the series (and will be the longest one), buckle down 🚀.

\n

Stacks & Queues

\n\n

Stacks are like plates

\n\n

Other uses

\n\n

Queues

\n

Are like an entrance to a rollercoaster. They have a first in first out (FIFO)

\n

Uses:

\n\n

Reminder: Do not build a queue using arrays since its inefficient.

\n

Stack and Queues Implementations

\n\n

So, how can you build stack and queues using JavaScript?

\n

Stack / Queues Example

\n

See below or click here.

\n\n

Stack / Queues Review

\n\n

For example interview Question check discussion. Solution below and here.

\n\n

Trees

\n\n

Examples: DOM is a tree data structure. HTML is parent then body is parent with many children.

\n

Binary Trees

\n\n

O(log n)- Reminder

\n\n

If this sounds complicated, try to get the idea to begin with 😅.

\n

Binary Search Trees (BST)

\n

Most Common Tree Data Structure. What is BST?

\n\n

Visual example:

\n
      101\n      /  \\\n      33   105\n      / \\    / \\\n      9  37  104 144\n
\n\n

Read more: https://visualgo.net/bn/bst?slide=1

\n

BST Pros and Cons

\n\n

Note: BST is not the fastest, sometimes Arrays outperform them.

\n

Unbalanced vs Balanced BSTs

\n\n

How do you balance your trees?\nBy algorithms. Programming languages do provide libraries and tools to help you build them.

\n

BST Example In Code

\n

See below or click here.

\n

AVL Trees + Red Black Tree (Balancing Binary Search Trees)

\n\n

There are resources for you to visualize them:

\n\n

🤓📗 Always look up how to visualize trees and any data structure in fact.

\n

Heaps and Tries

\n

Heaps

\n

Heaps are mostly Binary Heaps.

\n\n

Priority Queues:

\n\n

Remember

\n\n

Trie

\n\n

How Tries work

\n\n

Recap on Trees

\n\n

Arboreal.js lets you use it and create the tree you want. You won't be creating trees from scratch.

\n

Graphs

\n

Our last data structure! 🙌🏼

\n

What are Graphs?

\n\n

Linked lists, trees are a type of graphs!

\n

Types of Graphs

\n

Directed vs Undirected

\n\n

Unweighted and Weighted

\n\n

Cyclic vs Acyclic

\n\n

Example: https://internet-map.net/

\n

Graph Exercise

\n

Building / representing a graph. Considering this graph how can you build it.

\n
    2 - 0\n    /  \\\n    1   3\n
\n

Some options:

\n

Edge List: Like with an array of arrays. Stating the connections.

\n
  const graph = [[0,2], [2,3], [2,1], [1,3]]\n
\n

Adjacent List: A graph like array, objects, linked lists. Index is the node, and value is the node neighbors.

\n
  const graph = [[2], [2,3], [0,1,3], [1,2]]\n
\n

Adjacent Matrix: will only have 0s and 1s if X have connections to note Y. 0 is no Y is yes.

\n
  const graph = {\n   0: [0,0,1,0],\n   1: [0,0,1,1],\n   2: [1,1,0,1],\n   3: [0,1,1,0]\n  }\n
\n

Graph (Undirected / Unweighted) Implementation:

\n\n

See below or click here for the example code.

\n\n

Last Words on Graphs

\n\n

Learn the fundamentals.

\n\n

Neo4j a tool to build complex structures as this.

\n

Data Structures (DS) Review

\n\n

Remember all this information is important to know it high level but do not worry if you can't grasp it all. The more you study it and see it and with time concepts will settle in and. In no time you'll be making magic with data structures! 🧙🏾‍♂️

"},{"url":"/posts/2020-12-18-algorithms_ch1/","relativePath":"posts/2020-12-18-algorithms_ch1.markdown","relativeDir":"posts","base":"2020-12-18-algorithms_ch1.markdown","name":"2020-12-18-algorithms_ch1","frontmatter":{"title":"On CS Algorithms: Chapter I","template":"post","date":"2020-12-18 19:31:03 -0400","permalink":"algorithms_ch1","filename":"2020-12-18-algorithms_ch1"},"html":"
\n

Today we'll discuss regarding the last piece of the puzzle on good problem solving in software engineering, namely algorithms. On this first chapter we'll talk about Recursion and Sorting Algorithms.

\n
\n

On CS Algorithms: Chapter I

\n

Today we'll discuss regarding the last piece of the puzzle on good problem solving in software engineering, namely algorithms. On this first chapter we'll talk about Recursion and Sorting Algorithms. These are mostly notes from articles and online courses I've taken. Enjoy!

\n

Intro To Algorithms and Recursion Pattern

\n

Remember: DS + ALG = programs:

\n\n

What is Recursion?

\n\n

It can be, recursive function can be easy as this:

\n
// Caution: Stack Overflow\nfunction(inception) {\n    inception()\n}\n
\n

Recursion will be used in searching and sorting algorithms. DOM traversal on a website uses recursion. An object inside of an object you can use recursion.

\n

Two problems of recursion

\n\n

Anatomy of Recursion

\n

Base case will help it stop. An example could be:

\n
let counter = 0\nfunction(inception) {\n    if (counter > 3) {\n        return 'done'\n    }\n    counter++\n// will ensure 'done' returned    \n    return inception()\n}\ninception()\n
\n

Three rules to build recursion:

\n
    \n
  1. Identify the base case
    2. \n
  2. Identify the recursive case
    3. \n
  3. Get closer and closer and return when needed. Usually you have 2 returns.
    4. \n
\n

Recursion Exercise - Factorial

\n

A factorial multiplies itself depending on number for example:\n5! = 5 * 4 * 3 * 2 * 1

\n

You can solve this through looping or recursion. See below or click here. Note both are O(n).

\n\n

Recursion Exercise - Fibonacci

\n

Fibonacci adds first two items equals third item. Again this one can be done either loops or recursive. See below or click here.

\n\n

Recursion vs Iteration

\n\n

Recursion Tips:

\n\n

Interview triggers:

\n
    \n
  1. A problem can be divided into small problems, smaller instances of those problems.
    2. \n
  2. Each of these instances of problems are identical in nature. Calculations are same over and over
    3. \n
  3. If you solve smaller problems (leaf notes of tree) and you combine them, that solves problem at hand.
    4. \n
\n

Conclusion

\n\n

Sorting

\n

Sorting is very important for interviews. But, why you care about sorting if you have sort() in JS?

\n

Sorting is not a big deal with small input data. But as it grows it gets more complicated.

\n

Examples:

\n\n

All these example cannot use built in sort methods. They need to create their own sort method.\nMost scaled companies sort their data.

\n

This topic is very important:

\n\n

Built-in sort()

\n
const basket = [2,65,34,1,6]\nconst sp = ['único', 'árbol', 'cosas']\n\n// to implement sp sort you'll do this:\nbasket.sort((a,b) => {\n    return a - b \n})\nspanish.sort(function(a,b){\n    return a.localCompare(b)\n})\n
\n

Try running line sort(). You might have surprise because JS converts to string. With JS each browser will use their own ECMAScript implementation so differences might come as well.

\n

Read more here.

\n

Sorting Algorithms

\n\n

Bubble Sort - DO NOT USE

\n\n

Example Bubble Sort: Scroll until the end of this article.

\n

Selection Sort - DO NOT USE

\n\n

Example Selection Sort: Scroll until the end of this article.

\n

Insertion Sort

\n\n

Insertion Sort Example: Scroll until the end of this article.

\n

Best case scenario is O(n) very fast. If your set is mostly sorted use insertion sort.

\n

Merge Sort and O(n log n)

\n\n

Merge sort is stable but very hard to implement for yourself. More about stability in sorting algorithms.

\n

Merge Sort example: Scroll until the end of this article.

\n

Quick Sort

\n

Also divide and conquer O(n log n).

\n

Uses pivoting technique. Pretty complex to understand.

\n\n

Quick sort example.

\n

Which Sort is Best?

\n

This can come in an interview, choose sorting sort based upon x case?

\n\n

Others:

\n\n

Other Sorts:

\n

Can we beat O(n log n)? Mathematically, is impossible. Means we have to sort by comparison.

\n

Tell me more about the other sorts:

\n\n

Non Comparison Sorts:

\n\n

Resources:

\n\n

Common Sorting Interview Questions

\n
    \n
  1. \n

    Sort 10 schools around your house by distance:

    \n\n
    2. \n
  2. \n

    eBay sorts listings by the current Bid amount:

    \n\n
    3. \n
  3. \n

    Sort scores on ESPN

    \n\n
    4. \n
  4. \n

    Massive database (can't fit all into memory) needs to sort through past year's user data

    \n\n
    5. \n
  5. \n

    Almost sorted Udemy review data needs to update and add 2 new reviews

    \n\n
    6. \n
  6. \n

    Temperature Records for the past 50 years in Canada

    \n\n
    7. \n
  7. \n

    Large user name database needs to be sorted. Data is very random.

    \n\n
    8. \n
  8. \n

    You want to teach sorting

    \n\n
    9. \n
\n

Sorting Review

\n\n

Sorting Algorithms Examples

\n

Wanna see the code in action? Check them out below or click here.

\n"},{"url":"/posts/2021-01-06-algorithms_ch2/","relativePath":"posts/2021-01-06-algorithms_ch2.markdown","relativeDir":"posts","base":"2021-01-06-algorithms_ch2.markdown","name":"2021-01-06-algorithms_ch2","frontmatter":{"title":"On CS Algorithms: Chapter II","template":"post","date":"2021-01-06 19:31:03 -0400","permalink":"algorithms_ch2","filename":"2021-01-06-algorithms_ch2"},"html":"
\n

We must remember that programs can be defined pretty much as data structures + algorithms. As we conclude this exploration we'll be discussing Searching algorithms and Dynamic Programming.

\n
\n

On CS Algorithms: Chapter II

\n

We must remember that programs can be defined pretty much as data structures + algorithms. As we conclude this exploration we'll be discussing Searching algorithms and Dynamic Programming.

\n

Searching + Traversal, BFS, DFS

\n

We'll talk about:

\n\n

Searching is super useful:

\n\n

Linear / Sequential Search

\n\n
var beasts = ['Centaur', 'Godzilla'];\n\n// ALL are linear\n\nbeasts.indexOf('Godzilla');\n\nbeasts.findIndex(function(item){\nreturn item === 'Godzilla';\n});\n\n// return item instead of index\nbeasts.find(function(item){\nreturn item === 'Godzilla';\n})\n\n// true / false\nbeasts.includes('Godzilla')\n
\n

We can't use this on Google or Facebook, since it will cost time.

\n

Binary Search

\n

Good on sorted lists. E.g. you're looking for 34 and list is sorted: 1, 4, 5, 9, 34, 45

\n

Instead of checking everything you can do binary search:

\n\n

Traversal - Graph + Tree Traversals

\n

Sometimes we want to add color property to all nodes. Traversals is like visiting every node.

\n\n

Breadth-first search (BFS) & Depth-first search (DFS)

\n

BFS & DFS Intro

\n\n
//OUR TREE\n//     9\n//  4     20\n//1  6  15  170\n\n\n// BFS: Visits all levels and outputs a list as it finds what it needs \n// [9,4,20,1,6,15,17]\n\n\n// DFS: List is different\n// [9,4,1,6,20, 15,17]\n
\n

BFS vs DFS

\n

BFS is like water from top to down. DFS is like lines.

\n

When to use BFS or DFS? Time complexity is same for both O(n)

\n\n

Common Interview Questions BFS vs DFS

\n

Study to see how you explain to interviewer

\n
    \n
  1. \n

    If you know a solution is NOT far from the root of the tree:

    \n\n
    2. \n
  2. \n

    If the tree is VERY deep and solutions are rare,

    \n\n
    3. \n
  3. \n

    If the tree is very wide:

    \n\n
    4. \n
  4. \n

    If solutions are frequent but located DEEP in the tree

    \n\n
    5. \n
  5. \n

    determining whether a path exists between two nodes

    \n\n
    6. \n
  6. \n

    Finding the shortest path

    \n\n
    7. \n
\n

Coding BFS & DFS

\n

Breadth-first Search - Exercises

\n\n

Breadth-first search (Recursive) - Exercises

\n\n

Depth-first search - Exercises

\n\n

Validate a BST - Interview Qs

\n\n

Graph Traversals

\n\n

Remember

\n\n

Dijkstra + Bellman-Ford Algorithms

\n\n

In an Interview:

\n\n

Read more.

\n

Searching + Traversal Review

\n\n

Dynamic Programming (DP)

\n\n

Memoization

\n\n

Memoization example

\n
function add80(n) {\n    return n + 80\n}\n\nadd80(5)\n
\n

What if this operation took a long time? Can we optimize it with memoization?

\n
function add80(n) {\n    return n + 80\n}\n\nlet c = {}\n\nfunction memoAdd80(n) {\n    if (n in cache) {\n        //O(1)\n        return cache[n]\n    } else {\n        cache[n] = n + 80\n        return cache[n]\n    }\n}\n
\n

What is then memoization?

\n\n

Closures in Memoization

\n

Patterns in DP:

\n
function memoAdd80() {\n    let cache = {}\n    //closure returns a function\n    return function(n) {\n      if (n in cache) {\n          //O(1)\n          return cache[n]\n      } else {\n          cache[n] = n + 80\n          return cache[n]\n      }\n    }\n}\n\nconst memoized = memoAdd80()\nconsole.log(1, memoized(6))\n// console.log(cache)\n// console.log('-----------')\nconsole.log(2, memoized(6))\n
\n\n

Fibonacci and DP (caching)

\n

Remember recursion example.

\n
let calculations = 0\nfunction fib(n) {\n    calculations++\n    if (n < 1) {\n        return n\n    }\n\n    return fib(n-1) + fib(n-2)\n}\n\nfib(6)\n//will take a long time\n// fib(30)\n
\n\n

Solving fibonacci. See below or here.

\n\n

Note: we increased the space complexity with memoization.

\n

Assess when to use DP (caching / memoization)

\n

Think about your problem like this to implement DP:

\n
    \n
  1. Can it be divided into subproblem. Problem broken down into smaller problems.
    2. \n
  2. Recursive solution
    3. \n
  3. \n

    Are there repetitive sub-problems?

    \n\n
    4. \n
  4. Memoize sub-problems
    5. \n
  5. Implement caching! and save a lot of calculations!
    6. \n
\n

Interview Questions: Dynamic Programming

\n

Here are some popular Dynamic Programming Questions (see if you can notice the pattern):

\n
    \n
  1. House Robber
    2. \n
  2. Best Time to Buy and Sell Stock
    3. \n
  3. Climbing Stairs
    4. \n
\n

Review of DP

\n"},{"url":"/blog/","relativePath":"blog/index.md","relativeDir":"blog","base":"index.md","name":"index","frontmatter":{"title":"Blog","seo":{"title":"All Entries","description":"This is the blog page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Blog","keyName":"property"},{"name":"og:description","value":"This is the blog page","keyName":"property"},{"name":"og:image","value":"images/1.jpg","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Blog"},{"name":"twitter:description","value":"This is the blog page"},{"name":"twitter:image","value":"images/1.jpg","relativeUrl":true}]},"template":"blog"},"html":""},{"url":"/posts/2021-02-11-next_npm_virus_outbreak/","relativePath":"posts/2021-02-11-next_npm_virus_outbreak.markdown","relativeDir":"posts","base":"2021-02-11-next_npm_virus_outbreak.markdown","name":"2021-02-11-next_npm_virus_outbreak","frontmatter":{"title":"Preventing the Next NPM Virus Outbreak☣","template":"post","date":"2021-02-11 09:31:03 -0400","permalink":"next_npm_virus_outbreak","filename":"2021-02-11-next_npm_virus_outbreak","thumb_img_path":"/images/1.jpg","thumb_img_alt":"Preventing the Next NPM Virus Outbreak☣","content_img_path":"/images/2.jpg","content_img_alt":"Preventing the Next NPM Virus Outbreak☣"},"html":"
\n

Doing npm install seems like second nature these days for developers. But did you know that without proper attention and auditing of npm packages, the next time we unknowingly do npm i you could also be installing malicious scripts?

\n
\n

Preventing the Next NPM Virus Outbreak☣

\n

Doing npm install seems like second nature these days for developers. But did you know that without proper attention and auditing of npm packages, the next time we unknowingly do npm i you could also be installing malicious scripts?

\n

Is NPM Virus Free?

\n

We know that most of the npm packages we use are maintained by third party actors. This can be a single developer, a team of developers or a super large corporation.

\n

NPM in itself is very reliable. But does NPM guarantee you that any package that you install will be virus free? Unfortunately not.

\n

So these days, it is not uncommon to hear some developers foreseeing a day in which a successful virus attack will spread through millions of machines through NPM.

\n

Sorry if I'm the first person to tell you: NPM it's not virus free 🤦🏼‍♂️.

\n

I won't go into all technical details of how exploits are possible in NPM. Just know that NPM has disclosed publicly that it is possible for an apparently 'normal' npm package (or its dependencies) to execute malicious code in your machine and wreak havoc.

\n

For any package can be compromised. You probably have ESLint installed right? Well, guess what? One of its dependencies was (not long ago) compromised and installed malicious code on users machines. The ESLint team and NPM acted quickly to solve the issue and their incident report can be seen here. But this is not the last time a virus incident happened. Now the NPM security team is publishing weekly reports of such incidents.

\n

Preventing Exposure To Future NPM Virus Outbreaks

\n

Exploits can be defined as scripts that take advantage of vulnerabilities in code to cause unintended or malicious behaviors to occur. An exploit was possibly the culprit of the ESLint incident. There are some actions we can take to safeguard our code to avoid become infected with any future malicious script incidents.

\n

NPM Security Recommendations:

\n
    \n
  1. Think twice before installing a new NPM package. Are you sure you really need it? Is it well maintained? Can you just code it yourself? Ask yourself this questions before adding a new dependency. The best way to safeguard yourself is simply having less packages. If you are part of a team you could also consult with your team before installing a new package. Even if you are just trying it. You might not wanna be one of those using a seemingly harmless package that is then reported to contain an exploit, as it happened in a recent report.
    2. \n
  2. Use npm audit manually. This command was released by NPM as a response to its vulnerability. Actually each time you do npm i, npm audit will also run automatically. The npm audit command will scan your packages for vulnerabilities. You can even fix vulnerabilities automatically by just doing npm audit fix. The efficacy of this command depends on how it is up to date to latest threats and reports, but it must be part of your coding arsenal. You should manually run this command to inspect and fix as needed. You can learn more about it on the documentation. Here's also a good video that covers common cases when running this command.
    3. \n
  3. Github Alerts: If you use Github then just take advantage of Github through its Dependantbot alerts which comes with any repository for free. If you been ignoring those alerts, don't. Read more about it on the Github documentation.
    4. \n
  4. Use third-party software. This is useful if you are part of larger team. There are plenty of development security of tools that scan your dependencies for vulnerabilities. Some options are Snyk and WhiteSource.
    5. \n
  5. Pay open source maintainers. You heard it right. A lot of NPM packages are open source. Maintainers have to pay their bills at the end, and support them could not only help them financially but also hold them ethically accountable.
    6. \n
  6. Report suspicious packages to NPM. Just like you hear at the airport. For NPM, if you see anything suspicious, report it to support@npmjs.com.
    7. \n
  7. Disable NPM scripts. You can prevent malicious scripts by opting-out of using scripts altogether by doing npm config set ignore-scripts true. This might be a deal breaker for some since it also disables custom scripts on package.json. You can also do this case-by-case when installing a package with npm install --ignore-scripts. There might be unintended consequences of your packages not installing correctly and common commands such as npm run or npm test breaking. Some people have done workarounds by having shell aliases such as nrun = npm run --ignore-scripts=false or ntest = npm test --ignore-scripts=false to allow some particular scripts to work. I cannot assure what other problems will you encounter. Try this last strategy at your own risk.
    8. \n
\n

Conclusion

\n

So when is the next doomsday NPM package virus that will affect millions of computers coming? Who knows. So while we might not be able to prevent the next outbreak, we as developers need to guard ourselves. 

\n

We are always eager to get to coding and wanna get setup as fast as possible. But the next time you are about to npm install, ask yourself: Are there any security checks I should be performing before installing? There are always things we can do to audit our NPM packages.

\n

By applying these NPM security recommendations our code becomes more secure and we can greatly decrease the risk of getting infected when the next outbreak happens ☣

"},{"url":"/posts/2021-06-15-new-site-announcement/","relativePath":"posts/2021-06-15-new-site-announcement.markdown","relativeDir":"posts","base":"2021-06-15-new-site-announcement.markdown","name":"2021-06-15-new-site-announcement","frontmatter":{"title":"🚨 New Site Alert! + Updates 🚨","template":"post","date":"2021-06-15 19:31:03 -0400","permalink":"new-site-announcement","filename":"2021-01-06-algorithms_ch2"},"html":"
\n

✅ Modern JS Framework (Gatsby) ✅ Markup used for generating posts ✅ Fast Deployment Through Github Pages...So I hope you are enjoying the fast rendering, new UI and colors. I'm loving it! 😍

\n
\n

🚨 New Site Alert! 🚨

\n

After using Jekyll for such a long time, I've been wanting to give this site a much needed facelift.

\n

Today I'm happy to announce the official launch of my new JAMSTACK site:

\n

✅ Modern JS Framework (Gatsby)

\n

✅ Markup Files for Post Generation

\n

✅ Fast Deployment Through Github Pages

\n

I hope you are enjoying the fast rendering, new UI and colors. I'm loving it! 😍

\n

P.S. 📨

\n

I know I've been a bit MIA in the past months 😂.

\n

I decided to dedicate some time on personal projects in areas which I'm passionate such as writing, art and food.

\n

So here's what I've been working:

\n\n

So if you don't see me posting tech articles here, check other recent publications at 📃Medium.

\n

And in case you haven't, just connect with me on LinkedIn and let's chat!

"},{"url":"/_templates/TEMPLATE/","relativePath":"_templates/TEMPLATE.md","relativeDir":"_templates","base":"TEMPLATE.md","name":"TEMPLATE","frontmatter":{"title":"Preventing the Next NPM Virus Outbreak☣","template":"post","date":"2021-02-11 09:31:03 -0400","permalink":"copy_from_file_name","filename":"2021-02-11-next_npm_virus_outbreak"},"html":"
\n

Quote Text Here

\n
\n

Title Here?

\n

Text

"}],"site":{"siteMetadata":{"siteUrl":"https://fbohz.com/","layout_style":"overflow","palette":"fbohz","header":{"title":"Felipe Bohórquez","tagline":"","profile_img":"images/avatar.png","profile_img_alt":"Author avatar","background":"","has_nav":true,"nav_links":[{"label":"Home","url":"/","style":"link"},{"label":"Blog","url":"/blog/","style":"link"},{"label":"About","url":"/about/","style":"link"},{"label":"Resume","url":"https://fbohz.com/assets/Resume.pdf","style":"link"}],"has_social":true,"social_links":[{"label":"Medium","url":"https://fbohorqu.medium.com/","style":"icon","icon_class":"medium","new_window":true},{"label":"GitHub","url":"https://github.com/fbohz","style":"icon","icon_class":"github","new_window":true},{"label":"LinkedIn","url":"https://www.linkedin.com/in/fbohz/","style":"icon","icon_class":"linkedin","new_window":true}]},"projects":[{"label":"Catoro","deploy_url":"https://catoro.vercel.app/","image_url":"/images/catoro.png","repo_url":"https://github.com/fbohz","year":"2021","icon_class":"react","excerpt":"Implemented UI employing React and Redux with React-Boostrap for styling. ES6+, React Hook-Form, and Chart.js.","tags":"React, Rails"},{"label":"Yijing Ball Z","deploy_url":"https://yijingballz.herokuapp.com/index.html","image_url":"/images/yijing.png","repo_url":"https://github.com/fbohz","icon_class":"javascript","excerpt":"I-Ching Oracle Inspired by Dragon Ball Z. JavaScript frontend and implemented Node.js/Express API server.","tags":"Vanilla JS, Express, MongoDB"},{"label":"Studio Ghibli's Fan Hub","deploy_url":"https://studio-ghibli-fanhub.herokuapp.com/","image_url":"/images/ghibli.png","repo_url":"https://github.com/fbohz","icon_class":"react","excerpt":"React app with eCommerce built-in using Stripe API for payment gateway.","tags":"React, Redux, Firebase"}],"all_projects":[{"label":"Catoro","deploy_url":"https://catoro.vercel.app/","image_url":"/images/catoro.png","repo_url":"https://github.com/fbohz","year":"2021","icon_class":"react","excerpt":"Implemented UI employing React and Redux with React-Boostrap for styling. ES6+, React Hook-Form, and Chart.js.","tags":"React, Rails"},{"label":"Yijing Ball Z","deploy_url":"https://yijingballz.herokuapp.com/index.html","image_url":"/images/yijing.png","repo_url":"https://github.com/fbohz","icon_class":"javascript","excerpt":"I-Ching Oracle Inspired by Dragon Ball Z. JavaScript frontend and implemented Node.js/Express API server.","tags":"Vanilla JS, Express, MongoDB"},{"label":"Studio Ghibli's Fan Hub","deploy_url":"https://studio-ghibli-fanhub.herokuapp.com/","image_url":"/images/ghibli.png","repo_url":"https://github.com/fbohz","icon_class":"react","excerpt":"React app with eCommerce built-in using Stripe API for payment gateway.","tags":"React, Redux, Firebase"},{"label":"Cook-n-Shop","deploy_url":"https://angular-test-e364e.web.app/","image_url":"/images/projects/groceries.jpg","repo_url":"https://github.com/fbohz","year":"2021","icon_class":"angular","excerpt":"Angular cooking app + Firebase. Angular patterns including dynamic components, directives and module patterns","tags":"Angular, Firebase"},{"label":"Magic Realism Library","deploy_url":"https://gabophiles.netlify.app/","image_url":"/images/projects/gabo.png","repo_url":"https://github.com/fbohz","icon_class":"gatsby","excerpt":"Magic Realism book site built with Gatsby plus Firebase backend for dynamic rendering.","tags":"Gatsby, Firebase"},{"label":"Uff! - Street Art Finder","deploy_url":"https://uff-app.herokuapp.com/","image_url":"/images/projects/uff.png","repo_url":"https://github.com/fbohz","icon_class":"rails","excerpt":"REST Rails app. Devise + Omniauth. Bcrypt for password encryption. Google Cloud Storage and MiniMagick.","tags":"Rails, PostgreSQL, ActiveRecord"},{"label":"Retro Snake","deploy_url":"http://fbohz.com/html5_games/retro_snake.html","image_url":"/images/projects/snake.png","repo_url":"https://github.com/fbohz","year":"2021","icon_class":"javascript","excerpt":"Clone of the classic game with HTML5 and JavaScript. Node/Express API + MongoDB backend. Groove with the retro music.","tags":"JS, Node, MongoDB"},{"label":"Coingecko (Ruby Gem)","deploy_url":"https://rubygems.org/gems/coingecko","image_url":"/images/projects/gem.png","repo_url":"https://github.com/fbohz","year":"2021","icon_class":"ruby","excerpt":"Ruby API Gem for Coingecko Blockchain Market Watch. More than 3K downloads to date.","tags":"Ruby"},{"label":"Museo","deploy_url":"http://fbohz.com/css-learning/museo-demo/index.html","image_url":"/images/projects/museo.png","repo_url":"http://fbohz.com/css-learning/museo-demo/index.html","year":"2021","icon_class":"css","excerpt":"Single page landing demo of tour company site. Used SASS + 7-1 architecture pattern with BEM methodology.","tags":"CSS, SASS"}],"body":{"blog_icon":[{"label":"Medium","url":"https://fbohorqu.medium.com/","style":"icon","icon_class":"medium","new_window":true}]},"footer":{"content":"Copyright © Felipe Bohorquez"},"title":"Felipe Bohórquez Portfolio"},"pathPrefix":"","data":{}},"menus":{}}}}