Forem: fentybit

CS50 & Note to Self

fentybit — Sun, 08 May 2022 21:36:21 +0000

At the beginning of this year, I was pondering what new programming languages and frameworks I should learn. Harvard and MIT both provide great courses on Introduction to Computer Science. I decided to take on the Harvard’s CS50: Introduction to Computer Science.

Why CS50?
Note to Self

Why CS50?

I always wanted to learn a low-level programming language such as C. CS50 first few weeks materials were introduction to the C programming language, and sorting algorithms (bubble, merge and selection). I have to say, trying to solve sorting algorithms in modern languages (for example, JavaScript and Python) is much easier compared to C! On top of that, C’s utils function feels a bit cumbersome. malloc, realloc and/or free should be explicitly defined for memory allocation (heap vs. stack). Nonetheless, C (as well as any subsequent low-level programming language) usually gives better time and space complexity when solving algorithms.

Second part of the CS50 curriculum includes Python, SQL, HTML, CSS, JavaScript and Flask. The goal is to introduce rudimentary back-end and front-end framework. Python characteristic attributes remind me of Ruby’s terseness, Ruby was my first programming language. Both Python and SQL (SQLite3) eventually become the curriculum’s back-end stack while HTML, CSS and JavaScript performing as the front-end stack. Flask is the web framework, and I had the chance to learn and implement Jinja template engine.

This course was a bit more strenuous than I anticipated! First half of the curriculum was not easy to follow. However, I am glad that I successfully completed the course — so I can enjoy my Summer time. But first, I have to do some Spring cleaning. 😎

Here is my repo on CS50’s weekly assignments. I had so much fun on their first week’s assignment with Scratch. 😆

fentybit

@fentybit

Spent the whole day making this game with #mitscratch 😆 first assignment with #cs50x #cs50 🦖🌮

01:54 AM - 30 Jan 2022

fentybit / cs50

This is my personal repository on Harvard's CS50. I have decided to enroll this course in my interest learning low level programming language (C), Python and getting familiar with Jinja web template engine.

C

Week 00
Scratch: Taco Time

Week 01

Hello
Mario (Less)
Mario (More)
Cash
Credit

Week 02

Scrabble
Readibility
Caesar
Substitution

Week 03

Sort
Plurality
Runoff
Tideman

Week 04

Volume
Filter (Less)
Recover

Week 05

Inheritance
Speller

Python

Week 06

World Cup Tournament
Sentimental / Hello
Sentimental / Mario (Less)
Sentimental / Cash
Sentimental / Readability
DNA

SQL

Week 07

Songs
Movies
Fiftyville (my favorite!)

HTML, CSS, JavaScript

Week 08

Trivia
Homepage

Flask

Week 09

Birthdays
Finance

Week 10 (Final Project)

Note to Self

View on GitHub

Note to Self

Note to Self is my CS50’s final project. It is a simple to-do application that allows users to log their tasks. First time user would be required to register, and returning user needs to log in. The Minimum Viable Product (MVP) of Note to Self is for the user to be able to log chores along with corresponding level of priorities. User will be prompted to record their first task.

I created two tables on users and todos with basic schema. Each user has many tasks, and each task belongs to a user. The user_id foreign key indicates the two tables’ relationship.

CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
  username TEXT NOT NULL,
  hash TEXT NOT NULL
);

CREATE TABLE todos (
  id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
  user_id INTEGER NOT NULL,
  priority INTEGER NOT NULL,
  title TEXT NOT NULL,
  description TEXT
);

It took me sometime to get used to Jinja templates on my local IDE, my VSCode linters automatically re-format. I learned from Stackoverflow that I had to add "emmet.includeLanguages": {"jinja-html": "html"}, to my settings.json.

Basic validations on /register, /login and creating a /new task are provided. On /register, user would have to include username, password and username should be unique (no duplication). /login requires both username and password. A /new task requires priority and title. Otherwise, the user will not be able to proceed further.

I included a logic where as the user logs a new task, the one with higher priority will always comes first (descending order). ☆☆☆ tasks will come before ☆☆ tasks.

Note to Self was completed in 3-day timeframe from implementing JavaScript, Python, SQL and Bootstrap library. Future cycle of product development as follows:

Edit. User can only create and read. Ideally, we would like edit and delete functionality.
Quick Find tab. Over the time, user will have many tasks, and it gets troublesome when the user needs to immediately access a specific task entry. A search bar to quickly type event title and access the journal entry would be useful.
Current task entry allows priority, title and description attributes. Each entry should have more functionality for the user, such as weather, scheduling, sharing capability, image upload and so on.
Create a toggle track for dark mode. 😎

fentybit / NoteToSelf

To-Do application.

Note to Self

Domain Modeling :: To-Do Lists
To-Do Tasks app with Python, Flask and SQL frameworks.

YouTube Demo

DEV Blog

About

This is my final project of CS50 (CS50x through edX), Harvard University's introduction to the intellectual enterprises of computer science and the art of programming.

Note to Self app is a To-Do Tasks application. First time user is required to register, and returning user needs to log in. The Minimum Viable Product (MVP) of Note to Self is for users to be able to log chores along with correspoding level of priorities.

Project Files


├── static
│   ├── apology.gif
│   ├── favicon.ico
│   ├── giphy.gif
│   └── styles.css
├── templates
│   ├── apology.html
│   ├── index.html
│   ├── layout.html
│   ├── login.html
│   ├── new.html
│   ├── register.html
│   └── todos.html
├── app.py
│       user flow, business logic
├── helpers.py
│       apology, login_required
├── notetoself.db

…

View on GitHub

External Sources:
Bootstrap
Giphy
Jinja

fentybit | GitHub | Twitter | LinkedIn

365 Days of Code Journal

fentybit — Sun, 20 Feb 2022 20:30:04 +0000

2021 has been a tumultuous year. I worked full time while attending Flatiron School’s Software Engineering part time program, and officially pivoted my career in tech to become a Full Stack Engineer at RE/MAX (First Engineering Team). It was truly an epic year. 🥳

However, I have to admit that I also overworked myself. That’s right, I finished the 365 Days of Code challenge. 🥲

100 Days of Code
The Sequel
Educational Materials
End of Story

100 Days of Code

It all began with the #100DaysOfCode challenge. Most junior engineers (including me 🙋🏻‍♀️ ) take on this challenge for fun. Why not? They are all over the Twitter tech universe. When I set the challenge in motion, I was already halfway through my bootcamp. Ruby on Rails was my first exposure to object-oriented programming language and framework. 💎

fentybit

@fentybit

Day 1 of #100DaysOfCode 👩🏻‍⚕️

I wrapped up my Ruby on Rails project assessment!
Plan to deploy on Heroku tomorrow. ✌🏼

#DEVCommunity
#Rails

02:59 AM - 26 Jan 2021

As soon as our cohort concluded the Rails module, we switched our learning curriculum to JavaScript language and ReactJS framework. JavaScript is... wild. I remember having to take supplemental courses; JavaScript: Understanding the Weird Parts by Anthony Alicea, The Modern JavaScript Bootcamp Course by Colt Steele and Eloquent JavaScript. They provided a great introduction to understanding JavaScript fundamentals, not to mention the amount of YouTube instructors I had randomly subscribed to. 😅

fentybit

@fentybit

Day 62 of #100DaysOfCode

Officially deployed my Know It All 🌟

lets-know-it-all.netlify.app

Back-End :: Heroku
Front-End :: Netlify

ps: I was told my app does not work on iOS platform, please let me know if other devs have issues.

#JavaScript
#RubyonRails
#WomenWhoCode

19:46 PM - 27 Mar 2021

Two months later, I was able to build an app with Vanilla JavaScript and Rails back-end. I had no idea you could do so much with Vanilla JavaScript! Soon after, I decided to implement my rudimentary JS knowledge on building a personal website. To be fair, I used Pixelarity’s ready-made template. My point is that anyone can do a lot with JavaScript alone. 🙂

One thing that I realized, I was never alone during my #100DaysOfCode journey. It ended up triggering many interesting conversations, new Twitter friends and discovering tech stacks from fellow engineers. I felt like the Twitter tech universe was 100% with me. This motivated me to further extend my #100DaysOfCode challenge to #365DaysOfCode. Yikes, I know. 😬

The Sequel

I dedicated my best efforts to my final ReactJS project creating a journaling app. I graduated from Flatiron School in May 2021, though my moment of triumph was to finally land my first Engineer role at RE/MAX First soon after. 😭 I started looking for opportunities 4 months prior to graduation. I feel like I need to write a separate blog when it comes to career pivoting. I would say behind a single success, there lie many failures.

fentybit

@fentybit

Day 124 of #365DaysOfCode

I PASSED my final assessment with @FlatironSchool! 🥳

#100DaysOfCode #Rails #ReactJS #MaterialUI #DEVCommunity #WomenWhoCode #FlatironSchoo

20:18 PM - 28 May 2021

I had my moments when I felt like maybe.. I should stop, and simply focus on getting myself acclimated with the new role. Then, I was advised that the first year of being a junior engineer is highly critical. It is an opportunity to learn many stacks, and absorb knowledge from fellow mid and senior engineers. So there I was, spending extra hours after work daily trying to enhance my personal development. RE/MAX offered me a Full Stack Engineer position. I was super stoked. The role aligns with my interests in both realms, front-end and back-end. Flatiron School’s ReactJS was a great introduction to React Native mobile development. I spent the first few months learning React Native, a11y (accessibility), GraphQL, TypeScript, Jest and RSpec.

I believe diversity and inclusion should be universal to all product platforms including mobile apps. I had the opportunity to spend sometime learning Web Accessibility by Google. The course educates developers to approach code design solutions with empathy. When I was introduced to TypeScript, I quickly fell in love with its strict syntactics. I learned TypeScript from basic to intermediate with Execute Program alongside a supplemental reading, Programming TypeScript by Boris Cherny. In my downtime, I like to practice my Vanilla JavaScript with Wes Bos’ Vanilla JS Coding Challenge.

fentybit

@fentybit

Day 219 of #365DaysOfCode

Can’t believe I made it!
#JavaScript30 30/30 Whack a Mole

#100DaysOfCode #DEVCommunity #WomenWhoCode #JavaScript

18:58 PM - 31 Aug 2021

Moving on to back-end stacks and system architecture, I was lucky enough to have the chance to deepen my Ruby knowledge. Rails is the current main back-end stack. Flatiron School introduced us to Ruby on Rails, and its rudimentary knowledge building school projects. While at work, I am super thrilled that I have been exposed to real complex object-oriented domain modeling. Ruby Koans helped me with intermittent retrieval practice on Ruby language, syntax and structure. Practical Object-Oriented Design by Sandy Metz is an amazing read for all Ruby lovers. My struggle has always been writing RSpec since that was not a part of Flatiron School’s curriculum. To this day, I am still learning new things. Feel free to share if any devs out there have any suggestions on RSpec learning materials.

This is miscellany. Git commands have always been a common struggle for junior engineers (including me again 🙋🏻‍♀️ ). I ended up taking a side course on Git and GitHub. 😆 The world of Git is vast indeed. The Pragmatic Programmer by David Thomas, Andrew Hunt and Clean Code by Robert C. Martin were both instrumental in guiding my daily contribution to my peers.

While it was all fun deepening my knowledge on front-end and back-end frameworks, I enjoy learning data structures and algorithms. I settled on Colt Steele’s JS Algorithms and Data Structures Udemy course. It took me about 3+ months to grasp basic algorithm concepts. I vaguely remember some of the concepts during my undergraduate years. Data structures and algorithms can be frustrating at times, and the key is to not spend more than an hour a day. Be kind to yourself.

fentybit

@fentybit

Day 267 of #365DaysOfCode

Intro to Data Structures and Algorithms. They are collections of values, the relationships among them, and the functions or operations that can be applied to the data.

#100DaysOfCode #DEVCommunity #WomenWhoCode #GirlsWhoCode

14:23 PM - 18 Oct 2021

Fast forward... 💨 on my last day of 365 days of coding challenge, I decided that this day should not be the last day of my learning ventures. I want to take on the challenge on the theoretical aspects of Computer Science. I want to learn C, first programming language created in 1972, and maybe another object-oriented language, Phyton.

fentybit

@fentybit

Day 365 of #365DaysOfCode

This is it, my last day of 365 days of coding. 😭🎉

I have decided to sign up for Harvard's #CS50 Introduction to Computer Science as I plan to continue my learning on 2 new languages this year on #C and #Phyton. 🤓

pll.harvard.edu/course/cs50-in…

18:07 PM - 24 Jan 2022

Educational Materials

Summary of courses and readings I went trough.

Courses:

Readings:

End of Story

Why did I end up writing this blog? I would have preferred technical writing, as I find more joy in writing documentation. Developers live in such a fast-paced setting, especially when it comes to tech ecosystems. We don’t get much time for reflection. This journal is to remind myself that I am grateful for the opportunity to learn and grow. I have learned so much the past 365 days.

Miscellany

Of course looking back, I’d be curious which of my tweets is most popular and/or re-tweeted often. Surprisingly, this one tweet when I was having fun with Grasshopper App (great intro to JS’ DOM manipulation). I still don’t understand how Twitter analytics work. 😆

fentybit

@fentybit

Day 14 of #100DaysOfCode

Sunday Funday with @GrasshopperApp 📲

#JavaScript
#DEVCommunity
#WomenWhoCode

04:17 AM - 08 Feb 2021

fentybit | GitHub | Twitter | LinkedIn

⚡️ 30 Day Vanilla JS ⚡️

fentybit — Wed, 01 Sep 2021 15:49:19 +0000

I have been meaning to take on Wes Bos' JavaScript30 challenge, but had no time to spare during my bootcamp regime at Flatiron School. At this moment as I am writing this blog, I already had exposure to Vanilla JS and worked on a simple trivia app, Know It All. There are more to JavaScript that I decided to embark on this #JavaScript30. This blog concludes my journey of 30 Day Vanilla JS Challenge. I had much fun! Thank you Wes Bos. 🙌🏼

🥁 Day 1 JavaScript Drum Kit

The goal is to press any of the displayed keys, and it will give you its assigned sound. .wav sound files are already provided in the starter files. By utilizing querySelector on event.keyCode, I was able to adjust the selected element's classList and attached an addEventListener on keydown to trigger the sound.

⏰ Day 2 CSS + JS Clock

I learned a few new JS prototype methods on getHours(), getMinutes() and getSeconds(). A bit of mathematical calculations required when trying to update the style in order to transform the rotate degree attributes. The setInterval function will trigger updates every second (or 1000 millisecond).

🎨 Day 3 Playing with CSS Variables and JS

Updating CSS variables with JavaScript is pretty cool! Now I know how to declare --base, --spacing and --blur CSS variables and default values under :root in <style> element. change and mousemove event listeners are being utilized to handle changes and update event display.

🫀 Day 4 Array Cardio Day 1

This is a good overview on JS filter(), map(), sort() and reduce() functions. De-structuring assignment was also introduced, and a bit of refactoring exercise on if else statement to ternary operator syntax.

🌁 Day 5 Flex Panel Gallery

FlexBox CSS has personally been a total nightmare for me, but Wes Bos made it so much fun. 😆
I learned a few new CSS attributes such as display: flex, transform: translateY(-100%) and DOMTokenList toggle() method.

⚡️ Day 6 AJAX Type Ahead

I had previously done extensive fetch() requests on my ReactJS/Redux app, Storybook.

What's new for me in this lesson would be to implement RegExp when typing matching words, and adding both change and keyup add event listeners on the search input.

🏃🏻‍♀️ Day 7 Array Cardio Day 2

Good brush up on JavaScript methods some(), every(), findIndex(). I have used new Date(), but getFullYear() was new to me. I have been programming with JavaScript for 4 months, and have to admit their prototype methods are endless. 😱

👩🏻‍🎨 Day 8 Fun with HTML5 Canvas

I really love this canvas mouse play with varying line width and HSL (Hue, Saturation and Lightness). The add event listeners include mousemove, mouseup, mouseout and mousedown with mouse event attributes defining offsetX and offsetY. As a start, I had to define the canvas with its getContext in 2d and assign its strokeStyle, lineJoin, lineCap and lineWidth. A draw function with event argument triggers hue changes, moveTo, lineTo, stroke() and [lastX, lastY]. 🖌

🛠 Day 9 Dev Tools Domination

I am very used to console.log, maybe console.dir and sometimes console.table. It's good to know that there are others including console.count, console.warn, console.error, console.info and console.assert. console.groupCollapsed and console.groupEnd are useful when iterating and grouping each instance independently.

✔️ Day 10 Hold Shift and Check Checkboxes

I had once done a basic To-Do List app. This one includes a shift key feature on which it will allow to check all tasks in-between lists. Pretty neat. There are two main variables; one for boolean value and one for lastItemChecked.

🎥 Day 11 Custom Video Player

I would say that I am very new to HTMLMediaElement interface, to be specific the HTMLVideoElement elements. The task is to create a basic video player where you can trigger play / pause button, adjust volume, slow / fast motion and rewind / forward progress bar.

⌨️ Day 12 Key Sequence Detection (KONAMI CODE)

If you grew up in the 80s and 90s, you are probably familiar with pressing up up down down left right left right B A and the start button on the controller is a cheat code in the video gaming industry. I am creating something similar! The secretCode could be anything, and I utilized window.addEventListener on keyup to get a matching keypress sequence. Every time a keypress array combination matches the secretCode, it will display a unicorn image.

⏬ Day 13 Slide In on Scroll

The goal is as you are scrolling down the page, an image to slide in. A debounce function is defined to delay milliseconds upon invocation when I have an add event listener, scroll. Original state of the images are currently hidden, and as I am scrolling down, I can add the active class style. The solution can be as simple as selecting all of the images in a variable, and loop over each one in order to check its truthy or falsey. The condition is truthy as I am reaching half image height in pixel for the image to scroll in.

💬 Day 14 Object and Arrays - Reference vs. Copy

Another good JS reminder on reference versus copy, Object.assign and spread operator implementation. I guess that's all I have to say. 😆

🌮 Day 15 LocalStorage and Event Delegation

Our web browser has a built-in localStorage, and is capable to retain lightweight data inputs including page refresh. I can send each input with localStorage.setItem. In order to avoid losing items as page refreshes, I can set items to localStorage.getItem. The toggle actions can be triggered with an add event listener, click, and boolean true or false value.

🔥 Day 16 CSS Text Shadow Mouse Move Effect

You can play a lot with CSS on offsetWidth and offsetHeight. I can set the text.style.textShadow of various x and y setbacks with various rgba values. Fairly simple, yet fun!

🎸 Day 17 Sorting Band Names without Articles

An array of bands are provided in the bands array, and the goal is to sort alphabetically while ignoring a, the and an. That means Counterparts will come before A Skylit Drive since S comes after C. With simple Regex trick, I can utilize matching groups of (a |the |an )/i. The global -i denotes insensitive case, and I can iterate each band with a sort function.

⌛️ Day 18 Tally String Times with Reduce

Given a collection of data-time with minutes and seconds attributes, I want to add all of the given time duration with a reduce function. For a start, create an array of data-time collection, iterate each to extract its .dataset.time and convert it from string type to integer with parseFloat function. With reduce function and modulo % operator, I should be able to retrieve total seconds, and convert it back to hours, minutes and seconds.

📸 Day 19 Unreal Webcam Fun

This whole exercise is new to me. I learned there is an add event listener, canplay. A variable pixels is retrieved from .getContext('2d') and .getImageData(0, 0, width, height). Later on I can play with the RGB value by adjusting the pixels data.

🎤 Day 20 Native Speech Recognition

While it is not perfect, I am in awe that we can do a speech recognition in the browser without any libraries or external API. I triggered a new SpeechRecognition(), and set the .interimResults to true in order to accept more inputs. This allows moving on to the next paragraph when a speaker pauses their speech.

🧭 Day 21 Geolocation based Speedometer and Compass

This application would need an iOS Simulator, and it has a built-in speed and compass automation. For example use case, the speed displayed mimics the behavior of a city bicycle ride. navigator.geolocation.watchPosition is invoked to update the arrow and speed.

const arrow = document.querySelector(".arrow");
const speed = document.querySelector(".speed-value");

navigator.geolocation.watchPosition(
  (data) => {
    speed.textContent = data.coords.speed;
    arrow.style.transform = `rotate(${data.coords.heading}deg)`;
  }
);

🔗 Day 22 Follow Along Links

The goal would be to highlight all of the links as I hover over the page. First thing I used querySelectorAll on "a" link attributes. I can add an event listener mouseenter and invoke a function to highlight a link. Inside this function, I can utilize getBoundingClientRect() and it provides bottom, height, left, right, top and width properties. With all of these coordinate elements, I can assign each style.width, style.height and style.transform pixels accordingly.

🗣 Day 23 Speech Synthesis

This is akin to building a simple screen reader. SpeechSynthesisUtterance carries language, text, voice, volume, pitch and other attributes. I can add an event listener voiceschanged on speechSynthesis and add a function in order to select a voice. For this lesson, I will limit our voices selections strictly to english language. A boolean truthy and falsey value can be utilized on a toggle function on the stop and speak button.

🗒 Day 24 Sticky Nav

It would be nice to have the top nav bar to stay as a user scrolling down the page. The effort is less on setting the script aside from checking a condition when window.scrollY is more than top of the nav bar.

🥍 Day 25 Event Capture, Propagation, Bubbling and Once

addEventListener has edge cases. The event bubbling can occur when I capture a selected element. If it happens to be a child element, it should also invoke its parent elements. I can apply similar behavior from parent element to its children elements by adding a key value, capture: true. When I select a parent element, it will run the function all the way down calling all of its children elements. e.stopPropagation() can stop this event bubbling. Once implemented, when I select the child element, it will not trigger its parent elements. The once: true only allows a one-time add event listener.

🪢 Day 26 Stripe Follow Along Dropdown

This is a creative way to set up a div element where each dropdown follows its respective links sizes. A function can be invoked along with mouseenter and mouseleave add event listeners. It is as simple as adding css class as I click (or hover above) the link, and remove the class as I move away (or hover away from) the link.

🥍 Day 27 Click and Drag to Scroll

There will be four add event listeners, mousedown, mouseleave, mouseup and mousemove. I can set the isDown variable as boolean, and set it as false on both mouseleave and mouseup when it is no longer on the clicked state. For the mousemove add event listener, if the isDown is false, I can stop the function from running. I had to extract the event.pageX value in order to do a bit of math calculations as sliding horizontally with the .offsetLeft and .scrollLeft attributes.

🏎 Day 28 Video Speed Controller UI

This challenge is an extension of day 11 task on custom video player. When I am watching a youtube video, it's normal to adjust the video speed. This is exactly that! There is a lot more on playing around with math calculations in order to set the playback rate, and I can encapsulate this behavior through a function which would be invoked through an add event listener, mousemove.

⌚️ Day 29 Countdown Clock

Similar approach to day 2 challenge. Convert the seconds available to minutes and hours, and set a .reset() function whenever the add event listener click or submit a new selection.

🐰 Day 30 Whack A Mole Game

This is probably my most favorable one, and of course it's a game with plain JS. 😆

There are a few functions providing random time, random holes where the mole showing up, and adding score when user successfully whack the mole.

[**fentybit**](https://fentybit.me/) | [GitHub](https://github.com/fentybit) | [Twitter](https://twitter.com/fentybit) | [LinkedIn](https://www.linkedin.com/in/fentybit/)

First-fiddle on TypeScript

fentybit — Sun, 01 Aug 2021 23:52:17 +0000

I have spent the past few weeks diving in to TypeScript. It has been fun! 😆 TypeScript is a superset of JavaScript, that means it carries all of the JS syntax, including some new syntax as well. Variables in TypeScript have static types. Types come after a :.

TypeScript knows the types of built-in JavaScript functions and methods. While any code with valid syntax typically runs in JavaScript, code must have valid syntax and valid type check in order to run in TypeScript.

JavaScript syntax check → execution
TypeScript syntax check → type check → execution

For example in TypeScript, a + b is a valid syntax. However, if a is a number and b is a boolean, then a + b will not fulfill a valid type check. This results in a type error.

Basic types

To declare our own names for types, we can use the type keyword. It is similar to declaring a variable let. By convention, user-defined type names are UpperCamelCased.

type CarrotCake = string;
let c: CarrotCake = 'It is delicious';
c;
// 'It is delicious'

Types are only used during type checking prior to execution. The declaration of type CarrotCake = string is a TypeScript syntax. The technical jargon is 'type erasure'. It is solely used for type checking, and later on discarded from the compiled output. Types are not exclusive to only variables, but also to function types.

type HowManyEggsForACake = (egg: number) => string;

function redVelvetCake(egg: number): string {
  return egg.toString() + ' eggs to start';
}

const f: HowManyEggsForACake = redVelvetCake;
f(2);
// '2 eggs to start'

I can implement similar de-structuring assignment on JavaScript to TypeScript.

function makeCake({cake}: {cake: string}): string {
  return cake;
}

makeCake({cake: 'Sponge Cake'});
// 'Sponge Cake'

Arrays

I like the fact that TypeScript allows the use of an 'array of data' type for function arguments and function return values. In the example below, function arguments contain an array of strings.

function arrayOfCakes(cakes: string[]) {
  return cakes;
}

string[] is syntactically identical to Array<string>. This syntax, let otherCakes: Array<string> = ['Banana bread', 'Bebinca'], is also perfectly valid. Furthermore, I can make an 'array of arrays of data'. Example use of case as follows.

const arrayOfCakes: string[][] = [['Birthday Cake'], ['White Cake']];
// optionally, you can write (string[])[]


function cakes(namesAndCakes: [string, number][]): string[] {
  return namesAndCakes.map(cake => cake[0]);
}

cakes([['Angel Cake', 3], ['Apple Cake', 1]]);
// ['Angel Cake', 'Apple Cake'];

Inference

We can certainly avoid writing types. This is called type inference, and TypeScript infers types. Inference means that the compiler determines the types for us. Types does not necessarily differ from place to place. Every type can be used anywhere that types are allowed. Such as, string can be a type of a variable, a function argument, or a function's return value.

function cake() {
  return 'cup' + 'cake';
}

cake();
// 'cupcake'

TypeScript has generic function inference, and this allows us to call function many times without specifying the type parameters. We can name our generic type parameter T, and you can use any name you like. Type safety will still be maintained throughout code execution.

function cakeSample<T>(cakes: T[]): T {
  return cakes[1];
}

let results: [boolean, string] = [
  cakeSample<boolean>([true, true, false]),
  cakeSample<string>(['Walnut Cake', 'Orange Cake', 'Fruit Cake']),
];
results;
// [true, 'Orange Cake']

Type error

In JavaScript, there is a common symptom of undefined error from a function. TypeScript's object types inform back of any type errors during compilation. This helps to identify early rather than failing in production.

type Cake = {
  ingredient: string;
  delicious: boolean
}

let lemoncake: Cake = {
  ingredient: 'lemon',
  delicious: true,
}

lemoncake.delicious;
// true

let bundt: Cake = {
  ingredient: 'chocolate'
}
// type error: missing { delicious: boolean } in type but required in type 'Cake'

Literal types

While we have seen basic types such as boolean and string, every concrete number is also a type. A variable of type 1 can only hold the number 1. It can not hold number 2, this is a compile-time type error. Type 1 here is a literal number type. We can combine literal types with unions to allow only certain values.

let uno: 1 = 1;
one;
// 1

let unoDos: 1 | 2 = 2;
unoDos;
// 2

type deliciousCake = 'Biscuit Cake' | 'Angel Food Cake' | 'Carrot Cake';
let aCake: deliciousCake = 'Hazelnut Mousse Cake';
aCake;
// type error: type "Hazelnut Mousse Cake" is not assignable to type 'deliciousCake'

Tuples

This is a new syntax to my TypeScript learning, tuples. They are arrays of fixed length, in which each type is defined.

let trays: [string, number] = ['Pound Cake', 2];
trays[0];
// 'Pound Cake'

let platter: [string, number] = ['Vanilla Cake'];
// type error: target requires 2

Type unions

As an extension of JavaScript, TypeScript is able to add static types to existing JavaScript code. The a | b syntax means either type a or type b.

type Cake = {name: string};

function isCake(c: Cake[] | Cake): string[] {
  return Array.isArray(c) ? c.map(cake => cake.name) : [cake.name]; 
}

isCake([{name: 'Butter Cake'}, {name: 'Chiffon Cake'}]);
// ['Butter Cake', 'Chiffon Cake']

There is a type unsoundness that I found on TypeScript. We understand that we can assign our array to a new variable of type (string | number)[]. If an array contains only strings, this particular array of string | number just happens to have no numbers in it right now. Our array variables have different types, but the underlying array is the same. If I were to push a number onto the strings array, weirdly TypeScript allows this. This clearly violates the deliciousCakes variable's string[] type!

let deliciousCakes: string[] = ['Cheesecake', 'Strawberry Cake'];
let cakeLovers: (string | number)[] = deliciousCakes;

cakeLovers.push(8);
cakeLovers;
// ['Cheesecake', 'Strawberry Cake', 8]

any type would be another example of type unsoundness in TypeScript.

const cake: any = 'Coffee Cake';
const myCake: string = cake;
myCake;
// 'Coffee Cake'

const cake: any = 'Coffee Cake';
const yourCake: number = cake;
yourCake;
// 'Coffee Cake'

We defined cake a string type, 'Coffee Cake'. We can put a string in an any, then assign it to a variable of type number. This is wrong, but it will not cause a type error. Another way to approach this would be to utilize the unknown type. We use unknown to represent values of which type is not known yet.

const cake: unknown = 'Coffee Cake';
const myCake: string = cake;
myCake;
// type error:  Type 'cake' is not assignable to type 'string'

const cake: unknown = 'Coffee Cake';
const myCake: string = typeof cake === 'string' ? cake : 'No Cake';
myCake;
// 'Coffee Cake'

We can not use unknown where TypeScript expects a string or any other type. This will give you a type error. One way to make unknown useful is to use conditional narrowing the unknown back to a string type.

Nullish coalescing

In TypeScript, following values are equivalent of false — false, 0, 0n, '', undefined, null, and NaN. It gets tricky when..

function numberOfCake(n: number | undefined): number {
  return n || 1;
}

numberOfCake(0);
// 1

This is not fully accurate as 0 is a number too, and numberOfCake(0) should be returning 0. There is a new features called nullish coalescing in 2019 ECMAScript. The nullish coalescing operator is ??, and it is similar to JavaScript logical OR operator, ||.

1 ?? 'default' === 1
0 ?? 'default' === 0
'cake' ?? 'bananaBread' === 'cake'
'' ?? 'marbleCake' === ''
null ?? 'appleCrumble' === 'appleCrumble'
undefined ?? 'financier' === 'financier'
false ?? 'caramel' === false

function numberOfCake(n: number | undefined): number {
  return n ?? 1;
}

numberOfCake(0);
// 0

Nullish coalescing does not consider 0 and '' as falsey. It is only used for checking null and undefined, which means if we are getting false, that is because false is not null or undefined.

Optional chaining

Let's start with a Cake type, and each cake has ingredients, but only sometimes. The Ingredients type have nuts, but only sometimes. If we want to compile a list of cakes' nuts, Lamingtons will not cause a problem since the cake's nuts is undefined. However, Lemon Yoghurt Cake's nuts will pose a problem. Since its ingredients is undefined, asking for ingredients.nuts will cause a type error.

type Cake = {
  name: string
  ingredients: Ingredients | undefined
};

type Ingredients = {
  egg: number
  nuts: string | undefined
};

const cakes: Cake[] = [
  {
    name: 'Walnut Cake',
    ingredients: {
      egg: 4,
      nuts: 'walnuts',
    }
  },
  {
    name: 'Lamingtons',
    ingredients: {
      egg: 2,
      nuts: undefined,
    }
  },
  {
    name: 'Lemon Yoghurt Cake',
    ingredients: undefined,
  },
];

cakes.map(cake => cake?.ingredients?.nuts);
// ['walnuts', undefined, undefined]

Optional chaining comes to the rescue, ?.. It checks whether the object is null or undefined. If it is, the expression will return undefined. If it is not, it will return the value of the object's property. With ?., we can securely access properties and sub-properties of an object that may be null or undefined. Important to note, even if it's null, it will still return undefined.

As

TypeScript does not allow an object type.

const cake = {};
cake.name = 'Battenberg Cake';
cake.diameter = 10;
cake;
// type error: property 'cake' does not exist on type '{}'

We can use as to build a cake object, starting with the empty object {}. We are able to surpass the normal type checking, and have the compiler to treat our cake as an object type {name: string, diameter: number}.

const cake = {} as {name: string, diameter: number};
cake.name = 'Battenberg Cake';
cake.diameter = 10;
cake;
// {name: 'Battenberg Cake', diameter: 10}

as is dangerous as it overrides the type system, and we lose this type check safety. For example, we can tell TypeScript that a number is a string. as overrides that, and now the types are just wrong.

const cake: unknown = 1;
const aCakeString = cake as string;
aCakeString;
// 1

While my knowledge exposure to TypeScript is minimal, I am super excited to implement this new skill to a real application. I feel TypeScript gives a bit more rigidity to the liberal JavaScript. Thanks TypeScript and many cake types discovery, it's nice getting to know ya! 🍰

fentybit | GitHub | Twitter | LinkedIn

Storybook

fentybit — Wed, 26 May 2021 15:32:02 +0000

This is it. 🥺

This is module 5. 🤓

This is my last module at Flatiron School. 😱

What a journey it has been, 10 months of coding from building a Command Line Interface (CLI), Sinatra, Ruby on Rails, Vanilla JavaScript and now, ReactJS/Redux. I have grown so much, and am truly excited to learn more languages, frameworks and libraries upon graduation. While my previous mod projects encompass personal interests of mine (from space exploration, Street Fighter, tele-health platform to trivia game app), I have kept this particular idea until the very end.

I have been a long-advocate for having a meaningful connection through self-reflection. Having a digital journaling app to log events, places, moods, and self-reflections from different points of view would fulfill my personal pursuits of journaling experience. While some journal apps I have seen simply record special memories and events, some focus more on mental health, mindfulness and self-care. I have decided to approach this app build with basic features of recorded events and necessary attributes. Future improvements can possibly include mood tracker with A.I. collecting info on how the user is doing. After dedicating sometime to research on a few journal apps such as Reflectly, Diaro, Daylio, and others, I emulate most of my app build features following Day One and Notion. I love the overall user flow from Day One, and the postulation of all-in-one workspace from Notion. There are a couple of technical challenges I would like to pursue personally such as working with Google Maps API.

User Story and Model Associations
Rails API Back-End
Routes, Controllers and Serializers
React — Getting Started
Action → Reducer → New State
Nested Routes in React Router
Google Maps Platform APIs
Material-UI and Lessons Learned
Build Status and Future Improvement

1. User Story and Model Associations

I brainstormed my app through building wireframes at first. The exercise helped me to collect some understanding of model relationships, necessary attributes, components and overall user interface. I realized that my wireframing exercise eventually became an overarching goal. 🥺

As the user begins their journaling experience, the user will be prompted to fill out a form of an entry event. Each entry event carries event title, date, time, location, vibe, description and photo. The user can personalize each entry by assigning a category. After several entries and categories propagated over some time, when the user selects a category, it should list its respective event entries. For example, under category 'restaurants', the user will see all of their food ventures entries. As the user selects a specific entry, it will prompt a show page specific to the selected event id. The user can reflect all of their journal entries through various points of view: calendar, map and photos. For example, if the user selects a map view, it will show all pinpoints of recorded places. The user can select each pinpoint, and it should also display event details in correspond to the selected entry id.

There are 4 main models User, Category, Event and Image with their associations as follows.

user has_many :events

category has_many :events

event belongs_to :user
event belongs_to :category
event has_one :image

image belongs_to :event

2. Rails API Back-End

I have built Rails API previously, and surprisingly... I have only a small memory recollection. 😅

I initiated the prompt command rails new Storybook_backend --database=postgresql --api --no-test-framework. The --api will remove unnecessary features and middleware with controllers inheriting from ActionController::API, and --no-test-framework will remove any testing framework. PostgreSQL database is helpful when I need to deploy on Heroku. Make sure to include gem rack-cors and bcrypt when bundle install. The next step is to generate Active Record Models for User, Category, Event and Image, and execute rails db:create && rails db:migrate.

ActiveRecord::Schema.define(version: 2021_05_24_194555) do
  create_table "categories", force: :cascade do |t|
    t.string "name"
  end

  create_table "events", force: :cascade do |t|
    t.bigint "category_id", null: false
    t.bigint "user_id", null: false
    t.string "title"
    t.date "date"
    t.time "time"
    t.string "location"
    t.string "latitude"
    t.string "longitude"
    t.string "vibe"
    t.string "description"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.index ["category_id"], name: "index_events_on_category_id"
    t.index ["user_id"], name: "index_events_on_user_id"
  end

  create_table "images", force: :cascade do |t|
    t.bigint "event_id", null: false
    t.string "url"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.index ["event_id"], name: "index_images_on_event_id"
  end

  create_table "users", force: :cascade do |t|
    t.string "username"
    t.string "password_digest"
    t.string "firstname"
    t.string "lastname"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  add_foreign_key "events", "categories"
  add_foreign_key "events", "users"
  add_foreign_key "images", "events"
end

I am content with my schema.rb build, and it is always a good practice to test my models and associations with rails console.

3. Routes, Controllers and Serializers

I provided only the required back-end routes for my front-end's asynchronous fetch() actions.

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :users, only: [:index, :create]
      post '/login', to: 'auth#create'
      get '/profile', to: 'users#profile'

      resources :events, only: [:index, :create, :show, :update]
      resources :categories, only: [:index, :create]
      resources :images, only: [:index]
    end 
  end 
end

Moving on to my controllers, I spent most of my time applying JWT (JSON Web Tokens) in my ApplicationController, Api::V1::UsersController and Api::V1::AuthController. The ApplicationController defines JWT.encode, JWT.decode and most importantly authorized instance method to barricade access to the other controllers. Only an authorized user can access other controllers. The AuthController create action will provide authentication for users logging in, and the UsersController create action allows a new user signing up.

class Api::V1::EventsController < ApplicationController
  skip_before_action :authorized, only: [:create]
  ...

  def create 
    if params[:category] != ''
      @category = Category.find_or_create_by(name: params[:category])

      @event = Event.create(title: params[:title], vibe: params[:vibe], date: params[:date], time: params[:time], location: params[:location], latitude: params[:latitude], longitude: params[:longitude], description: params[:description], category_id: @category.id, user_id: current_user.id)

      if params[:image] != ''
        uploaded_image = Cloudinary::Uploader.upload(params[:image])

        @image = Image.create(url: uploaded_image['url'], event_id: @event.id)
      end 

      render json: { event: EventSerializer.new(@event), category: CategorySerializer.new(@category) }, status: :created  
    else 
      render json: { error: 'Failed to create Event.' }, status: :not_acceptable
    end 
  end

  ...
end

I had many byebug exercises on create and update actions in Api::V1::EventsController. Not only a new event will be created, but also its respective category and image. I have an event entry form on my front-end to accommodate user inputs. I utilize Cloudinary in order to manipulate images with a URL-based API. The rest of my controllers' actions are mostly index and show. This is where Active Model Serializers helps with displaying any intended attributes to pass information necessary over to front-end's Redux state management. Including model relationships helps to display arrays of event's category and image in one single Object.

class EventSerializer < ActiveModel::Serializer
  attributes :id, :title, :date, :date_strftime, :time, :time_strftime, :location, :latitude, :longitude, :vibe, :description

  belongs_to :category
  belongs_to :user
  has_one :image
end

I believe that's all I have for my back-end! I have attached my GitHub repo below.

fentybit / Storybook_backend

The Minimum Viable Product (MVP) of Storybook app is to allow the user to log events, places, moods and self-reflect from various points of views (calendar, map, photos).

Storybook

Domain Modeling :: Digital Journaling
Welcome to my simplistic version of digital journaling app.

Front-End GitHub Repo

YouTube Demo

DEV Blog

About

I have been a long-advocate for having meaningful connection through self-reflection. While some journal apps I have seen simply record special memories and events, some focus more on mental health, mindfulness and self-care. I have decided to approach this app build with basic features of recorded events and necessary attributes.

The Minimum Viable Product (MVP) of Storybook app is to allow the user to log events, places, moods and self-reflect from various points of views (calendar, map, photos).

Features

Models
User, Event, Category, Image

user has_many :events

event belongs_to :user
event belongs_to :category
event has_many :images

category has_many :events

image belongs_to :event

Controller
ApplicationController
Api::V1::AuthController
Api::V1::CategoriesController
Api::V1::EventsController
Api::V1::ImagesController
Api::V1::UsersController

User Account and Validation
JWT Authentication: Sign Up, Log In and Log Out.

API Database

Google Developer API
…

View on GitHub

4. React — Getting Started

I started with npx create-react-app storybook and npm install redux && npm install react-redux as for Redux state management. I learned that NPM packages do not allow upper case characters because unix filesystems are case-sensitive (as I previously tried Storybook, and 🤨 it failed). For whatever reason, I froze for quite sometime, not knowing where to get a start with my React app. I have decided to step back and brainstorm a file structuring diagram, which helped tremendously as I progressed through my code.

I started with my index.js file, and set up my Provider and store. Following best practice, I kept actions, reducers and store.js inside of the Redux folder. The App.js carries the first parent container for my ProfileContainer. This component becomes a portal once a user successfully signs in, and it will navigate the user to 3 container components, NavBar, EventViewList and DisplayContainer. The rests are presentational components and most of them are built as functional components which rely mainly on props. With all that said, I definitely spent a good chunk of time with file-naming, aligning file structures and folder hierarchy. On another note, Redux DevTools is a great tool that I set up in order to view Redux state.

5. `Action` → `Reducer` → `New State`

connect() and Provider play a big role as part of React Redux middleware. Provider ensures that my React app can access data from the store, and connect() allows whichever component to specify which state and actions the app needs access to. I implemented combineReducers to consolidate all reducers and set the Redux state management.

export const fetchEvent = (eventId) => {
  return (dispatch) => {
    if (localStorage.getItem('token')) {
      let token = localStorage.getItem('token')

      fetch(`https://your-storybook.herokuapp.com/api/v1/events/${eventId}`, {
        headers: {
          'Authorization': `bearer ${token}`
        }
      })
        .then(resp => resp.json())
        .then(data => dispatch({ type: 'GET_EVENT', payload: data }))
    }
  }
}

One example of my actions would be the fetchEvent(eventId) that asynchronously fetches my back-end route, and dispatch a reducer to return a value.

function eventReducer(state = [], action) {
  switch (action.type) {
    case 'GET_EVENT':
      return action.payload.event

    default:
      return state
  }
}

export default eventReducer;

I should be able to access the object value of event with mapStateToProps in any desirable component to display the current state of event entry. I have a total of 8 reducers from category, error, user, token and others under one rootReducer.

6. Nested Routes in React Router

ReactJS relies upon Client-Side routing to handle routing, fetching and displaying data in the browser. It is after all a Single-Page Application (SPA). While it benefits in speed, it also presents more design challenges. I tried my best to achieve proper RESTful routing.

import React from 'react';
import { Switch, Route } from 'react-router-dom';
...

export default function EventViewList({ categories, events, props, token, url, user }) {
  ...

  return (
    <div align='center'>
      <Switch>
        <Route path={`${url}/calendar/:eventId`} render={() => <InfiniteCalendar Component={withMultipleDates(Calendar)} interpolateSelection={defaultMultipleDateInterpolation} onSelect={date => renderSelectedEventDate(date)} selected={selectedDatesArray} />} />
        <Route path={`${url}/calendar`} render={() => <InfiniteCalendar Component={withMultipleDates(Calendar)} interpolateSelection={defaultMultipleDateInterpolation} onSelect={date => renderSelectedEventDate(date)} selected={selectedDatesArray} />} />
        <Route path={`${url}/map/:eventId`} render={(routerProps) => <MapView {...routerProps} events={events} />} />
        <Route path={`${url}/map`} render={(routerProps) => <MapView {...routerProps} events={events} />} />
        <Route path={`${url}/newentry`} render={() => <InfiniteCalendar selected={today} />} />
        <Route path={`${url}/photos/:eventId`} render={() => <PhotosView />} />
        <Route path={`${url}/photos`} render={() => <PhotosView />} />
        <Route path={`${url}/:categoryId/:eventId/edit`} render={(routerProps) => <CalendarView {...routerProps} categories={categories} events={events} token={token} user={user} />} />
        <Route path={`${url}/:categoryId/:eventId`} render={(routerProps) => <CalendarView {...routerProps} categories={categories} events={events} token={token} user={user} />} />
        <Route path={`${url}/:categoryId`} render={(routerProps) => <CalendarView {...routerProps} categories={categories} events={events} token={token} user={user} />} />
        <Route path={url} render={() => <InfiniteCalendar selected={today} />} />
      </Switch>
    </div>
  )
}

The EventViewList component is my middle presentational component that displays various UI components in correspond to the left navigation bar. I would refer my EventViewList as an intermediary. As the user navigates through, my right presentational component, EventDisplay, will exhibit detailed information. Snippet below represents Route path ${url}/calendar/:eventId where calendar view displays propagated entry dates the user had previously recorded, and eventId will fetch the associated event entry from provided events state from Redux store.

7. Google Maps Platform APIs

I have decided to utilize google-maps-react and react-google-autocomplete NPM packages. Their documentation is pretty solid and provides a straightforward code implementation to my Storybook MVP needs. API can be retrieved from Google Developers Console, and I include Geocoding API, Maps JavaScript API and Places API. Once GoogleApiWrapper from 'google-maps-react' and PlacesAutocomplete from 'react-places-autocomplete' are imported to my Form component, the user can automatically submit an address and/or location from the autocomplete textfield. It should automatically send an API request to retrieve the location's latitude and longitude. Each location and its respective coordinates will be saved in the PostgreSQL database, and that's how I was able to collect an array of various coordinates and propagate them to a map view. I also learned how to save an API_KEY by adding REACT_APP_ to my API key in the .env file.

8. Material-UI and Lessons Learned

I had much fun perusing through Material-UI library. If given more time, I would love to develop Storybook mobile UI. Current project build is focused on browser desktop UI. There are a lot of customization theming that piques my design interest.

Anyhow... I am glad I had the chance to learn ReactJS/Redux, and it definitely speaks on its own popularity and demand. React provides a modular way to separate code and functionality in declarative writing structure, producing highly reusable and independent entities. I now feel comfortable with JSX syntax, container vs. presentational components, Redux state management, Client Routing and finally, implementing Google Maps API. Check out my GitHub repo!

fentybit / Storybook_frontend

The Minimum Viable Product (MVP) of Storybook app is to allow user to log events, places, moods and self-reflect from various points of views (calendar, map, photos).

Storybook

Domain Modeling :: Digital Journaling
Welcome to my simplistic version of digital journaling app.

Back-End GitHub Repo

YouTube Demo

DEV Blog

About

The Minimum Viable Product (MVP) of Storybook app is to allow the user to log events, places, moods and self-reflect from various points of views (calendar, map, photos).

Features

Models
User, Event, Category, Image

user has_many :events

event belongs_to :user
event belongs_to :category
event has_many :images

category has_many :events

image belongs_to :event

Controller
ApplicationController
Api::V1::AuthController
Api::V1::CategoriesController
Api::V1::EventsController
Api::V1::ImagesController
Api::V1::UsersController

User Account and Validation
JWT Authentication: Sign Up, Log In and Log Out.

API Database

Google Developer API
…

View on GitHub

9. Build Status and Future Improvement

Storybook was completed in a 2-week timeframe from implementing Rails back-end, ReactJS front-end, Cloudinary API, Google Maps API and Material-UI library. I have several ideas as I progressed through building my MVP (Minimum Viable Product). Future cycle of product development as follows:

Search Bar. Over the time, the user will have many events, and it gets troublesome when the user needs to immediately access a specific event entry. A search bar to quickly type event title and access the journal entry would be useful.
Add Friend to model associations. I envision my app to emulate similar concept such as Instagram. Instead of creating a simple journaling app, what about a social journaling platform. Each user can personalize their privacy whether or not they'd like to share with their friends.
Adding mood tracker. Current attribute vibe to capture my preliminary attempt of gathering user mood data on each event entry. I found a mood tracker API that I would love to integrate in future project build. User can view their journal entries based on Mood under View NavBar.
Current event entry only allows one image upload. User should be able to upload multiple images, insert GIF and video upload.
Create a toggle track for dark mode. 😎

Post Scriptum:
This is my Module 5 capstone project with Flatiron School. I believe one of the catalyst to becoming a good programmer is to welcome constructive criticism. Feel free to drop a message. 🙂

Keep Calm, and Code On.

External Sources:
ReactJS Documentation
Cloudinary
Google Maps React
React Google Autocomplete
React Infinite Calendar
Material-UI
Unsplash

[**fentybit**](https://fentybit.me/) | [GitHub](https://github.com/fentybit) | [Twitter](https://twitter.com/fentybit) | [LinkedIn](https://www.linkedin.com/in/fentybit/)

My First Personal Site! 📣

fentybit — Wed, 14 Apr 2021 20:23:29 +0000

I can not believe that I have 2 months left with Flatiron School, and hopefully by then I can officially call myself a Full-Stack Software Engineer. 👩🏻‍💻

Aside from revamping my resume, I have been working on building my personal site. After weeks of debating if I should be building from scratch or not, I decided to deploy my first portfolio site from a ready-made HTML5 template. I can always refine my portfolio site later as I develop more skills, and eventually design my own UI components.

Starting Point
Not sure where to start, I looked for advice from freeCodeCamp. I found this tutorial of How to Put a Website Online, and it was extremely useful in providing guidance for someone (like me) who has no knowledge on buying a custom domain, hosting and outsourcing a template. I had fun perusing through Pixelarity where you can browse HTML responsive template designs. Basic skills required include HTML, CSS and JavaScript. The next step was trying to figure out my custom domain. Funny thing, this effort frustrates me the most, and I could not make up my mind. Long story short, I ended up re-branding myself to @fentybit, and settled on fentybit.me. I love numbers, and hence, bit or binary digit. Then, I mulled over .dev and .me for quite some time. I learned from other developers and their thoughts on .dev domain, and I settled on .me. I want my site to personally share who I am and what I am, in the most minimalistic way. I am glad the custom domain was still available. Thank you Namecheap.

Personalize your Site
Personalizing HTML/CSS attributes and content delivery took most of my time, but Pixelarity made it so effortless! If there is anything new, it would be trying to link my contact page so other devs can communicate back to me. Formspree provides this service. I only need to submit their API to my front-end code, and they take care of the rest. 📝

Namecheap && Netlify
While there are a lot of hosting providers such as Bluehost, GoDaddy, Hostinger, DreamHost and so on, you can always get free ones from either Netlify or GitHub pages. I had success initially deploying with GitHub pages, though my site resulted being "Not Secure" on Chrome. I made another attempt on setting up my domain with Namecheap and Netlify. Starting with Namecheap to configure the DNS settings > Manage. Under Nameservers category, I had to update from Namecheap Basic DNS to Custom DNS.

Reroute to my Netlify Domain Settings real quick to add my custom domain.

The next step would be to select Set Up Netlify DNS. I would need to acquire a list of Nameservers from Netlify and propagate on Namecheap.

Copy all of Netlify's DNS servers to Namecheap Nameservers, and click the green check button to save this setting.

While I was not able to figure out the SSL/TLS certificate with GitHub pages, I learned Netlify will provision Let's Encrypt certificate automatically once the DNS configuration on the custom domain pointing to Netlify's servers. Namecheap suggests revisiting your site in 24 - 48 hours once Netlify's DNS fully propagated.

It's official. Now I have a personal site! 💥
Check out https://fentybit.me/!

[**fentybit**](https://fentybit.me/) | [GitHub](https://github.com/fentybit) | [Twitter](https://twitter.com/fentybit) | [LinkedIn](https://www.linkedin.com/in/fentybit/)

Deploy Rails API on Heroku and Vanilla JavaScript on Netlify

fentybit — Sat, 03 Apr 2021 19:54:35 +0000

This blog is part II of my Project Deployment series. This is my second attempt to deploy my recent project, Know It All. 🚀 The project was created with Rails API back-end and JavaScript/HTML/CSS front-end. I chose to deploy my back-end on Heroku, and my front-end on Netlify.

Deploy Rails API on Heroku

Since I already signed up previously on Heroku, I had to log in and create this new project.

I had to set lets-know-it-all as know-it-all app domain name was already taken. 🥲

My deployment would be performed with Heroku CLI.

$ heroku login
  › Warning: Our terms of service have changed: https://dashboard.heroku.com/terms-of-service
  heroku: Press any key to open up the browser to login or q to exit: 
  Opening browser to https://cli-auth.heroku.com/auth/cli/browser/....
  Logging in... done
  Logged in as _______@gmail.com

I built the project already with PostgreSQL, unlike my previous Ruby on Rails project which I had to migrate my SQLite to PostgreSQL database. Make sure you are utilizing gem pg. Since I used Ruby version 2.6.1, I had to use Heroku-18 stack. You may review this Heroku stacks documentation.

$ Bundler Output: Your bundle only supports platforms ["x86_64-darwin-19"] but your local platform
  is x86_64-linux. Add the current platform to the lockfile with `bundle lock
  --add-platform x86_64-linux` and try again.

Heroku CLI is very friendly, and it will provide you guidance if any. Following Heroku's instruction on command prompt bundle lock --add-platform x86_64-linux, it immediately took care of my bundling issue. The following two commands heroku create --stack heroku-18, and $ git push heroku master kicked off my project deployment.

Let's not forget that once Heroku app is successfully created, the database should be migrated to Heroku's PostgreSQL. If you have seeding content in your seeds.rb file, then it is also prudent to run heroku run rails db:seed. Note — I had to reset my deployment a few times as I was trying to debug a few error codes in my seeds.rb. heroku pg:reset DATABASE comes in handy whenever you need to reset your Heroku PostgreSQL.

$ heroku run rails db:migrate
$ heroku run rails db:seed

Now I have my Rails API set up with Heroku, sweet!

Deploy Vanilla JavaScript on Netlify

This would be my first time deploying anything with Netlify! and it was super easy. 🥳

I have a tendency to use GitHub as my third-party authentication when signing up either on Heroku or Netlify. Select New site from Git to link your GitHub repo. I separated my front-end and back-end repo for this purpose, so I could simply link my KnowItAll_frontend repo to Netlify. It should only take less than a minute to deploy.

Check out my simple Trivia app, Know It All!

fentybit | GitHub | Twitter | LinkedIn

Know It All

fentybit — Sun, 14 Mar 2021 16:09:56 +0000

Happy Spring, fellow developers!

Since my recent Ruby on Rails project on Plan My MD Visit, I have immersed myself in JavaScript Fundamentals from recognizing JavaScript events, DOM manipulation, ES6 Syntax Sugar and introduction of Object-Orientation. I plan to supplement my JavaScript learning materials after this project submission.

I went through a few iterations in my head on Single-Page Application (SPA) prior to settling on an idea. Overthinking as usual, but in my defense it is one HTML file, and lends itself too much freedom. 😅 Moving on, my husband loves trivia, and nothing is better than to surprise him by creating my own version of a trivia app, Know It All. The challenge becomes finding a completely free JSON API for use. This capstone project focuses on creating Ruby on Rails back-end and JavaScript/HTML/CSS front-end.

Back-End Development

Planning and Building Rails API
Open Trivia DB API
Generating Active Record Models
Routes, Controllers and Serializers
Communicating with the Server

Front-End Web Programming

DOM Manipulation with JavaScript Event Listeners
Re-factoring Early
End Page Sequence
Lessons Learned

Build Status and Future Improvement

Back-End Development

1. Planning and Building Rails API

With --api, Rails removes a lot of default features and middleware, and our controllers by default inherit from ActionController::API. This differs slightly from traditional Ruby on Rails application. In my previous RoR project, I had my controllers inheriting from ActionController::Base with responsibilities in creating routes and rendering many _.html.erb files.

rails new know_it_all_backend --database=postgresql --api

The above command will generate a Rails API using PostgreSQL database. The intent is to deploy my backend application eventually on Heroku, which does not support SQLite database. One more important thing to add is to bundle install gem rack-cors. This is useful for handling Cross-Origin Resource Sharing (CORS) configuration, allowing my front-end application to perform asynchronous requests.

I approached this project in a vertical manner, building out one model and/or feature at a time. This strategy streamlines any effort when dealing with complex relationships from back-end to front-end, and vice versa.

2. Open Trivia DB API

After traversing through the API universe, I got excited when finding an Open Trivia Database without the need for an API Key. Awesome sauce. 🙅🏻‍♀️

The challenge is less on acquiring the JSON API, but setting up the Api adapter class on Rails back-end. I utilized the .shuffle Ruby method to randomize the provided multiple choice. In the JavaScript front-end, I should be able to set up if/else conditionals when comparing the user's selected answer to the correct_answer. I managed to JSON.parse in irb, and confirmed responses back from the open/free API.

> data["results"][0]
   => {"category"=>"Animals",
       "type"=>"multiple",
       "difficulty"=>"hard",
       "question"=>"What was the name of the Ethiopian Wolf before they knew it was related to wolves?",
       "correct_answer"=>"Simien Jackel",
       "incorrect_answers"=>["Ethiopian Coyote", 
       "Amharic Fox", "Canis Simiensis"]}
> [data["results"][0]["correct_answer"], data["results"][0]["incorrect_answers"][0], data["results"][0]["incorrect_answers"][1], data["results"][0]["incorrect_answers"][2]].shuffle
  => ["Amharic Fox", "Canis Simiensis", "Simien Jackel", "Ethiopian Coyote"]
> multiple_choice = _
  => ["Amharic Fox", "Canis Simiensis", "Simien Jackel", "Ethiopian Coyote"]
> multiple_choice[0]
  => "Amharic Fox"
> multiple_choice[1]
  => "Canis Simiensis"
> multiple_choice[2]
  => "Simien Jackel"
> multiple_choice[3]
  => "Ethiopian Coyote"

There will be a total of eight (8) Trivia categories: Animals, Celebrities, Computer Science, Geography, History, Mathematics, Music and Sports. Once the Api adapter class was fully set up, I initiated the creation of both Category and Question models in the seeds.rb.

3. Generating Active Record Models

$ rails g model User name avatar animals_score:integer celebrities_score:integer computer_science_score:integer geography_score:integer history_score:integer mathematics_score:integer music_score:integer sports_score:integer 
    invoke  active_record
    create    db/migrate/20210224154513_create_users.rb
    create    app/models/user.rb

$ rails g model Category name 
    invoke  active_record
    create    db/migrate/20210224045712_create_categories.rb
    create    app/models/category.rb

$ rails g model Question category_id:integer question:text choice1 choice2 choice3 choice4 answer
    invoke  active_record
    create    db/migrate/20210227220035_create_questions.rb
    create    app/models/question.rb

In the terminal, I can now run rails db:create && rails db:migrate. The rails db:create is necessary for PostgreSQL database. At first, I had an erroneous terminal return, and had to update my PostgreSQL 13. Once re-installed and 🐘 running, the command should create the database and run migration swiftly.

$ rails db:create && rails db:migrate
  Created database 'know_it_all_backend_development'
  Created database 'know_it_all_backend_test'
  == 20210224045712 CreateCategories: migrating =================================
  -- create_table(:categories)
     -> 0.0545s
  == 20210224045712 CreateCategories: migrated (0.0547s) ========================

  == 20210224154513 CreateUsers: migrating ======================================
  -- create_table(:users)
     -> 0.0575s
  == 20210224154513 CreateUsers: migrated (0.0575s) =============================

  == 20210227220035 CreateQuestions: migrating ==================================
  -- create_table(:questions)
     -> 0.0571s
  == 20210227220035 CreateQuestions: migrated (0.0572s) =========================

The next step would be to test my models and associations. My association between Category and Question would be as simple as category has_many questions, and a question belongs_to a category.

class User < ApplicationRecord
end

class Category < ApplicationRecord
    has_many :questions, dependent: :destroy
end

class Question < ApplicationRecord
    belongs_to :category
end

The dependent: :destroy would be helpful for .destroy_all method in seeds.rb file. This is useful when triggering the rails db:seed command.

As an Active Record veteran, it is still a good practice to validate every single instance of association relationships. Note — presented model attributes resulted from extensive trial and error. I approached this project with one feature working simultaneously on the back-end and front-end, adding one model attribute at a time.

001 > animals = Category.create(name: "Animals")
  (0.2ms) BEGIN
  Category Create (4.8ms)  INSERT INTO "categories" ("name", "created_at", "updated_at") VALUES ($1, $2, $3) RETURNING "id"  [["name", "Animals"], ["created_at", "2021-02-28 18:30:29.016555"], ["updated_at", "2021-02-28 18:30:29.016555"]]
  (40.4ms)  COMMIT
  => #<Category id: 1, name: "Animals", created_at: "2021-02-28 18:30:29", updated_at: "2021-02-28 18:30:29">
002 > animals_trivia = animals.questions.create(JSON.parse(File.read("animals.json")))
  (0.2ms) BEGIN
  Category Create (4.8ms)  INSERT INTO "categories" ("name", "created_at", "updated_at") VALUES ($1, $2, $3) RETURNING "id"  [["name", "Animals"], ["created_at", "2021-02-28 18:30:29.016555"], ["updated_at", "2021-02-28 18:30:29.016555"]]
  (40.4ms)  COMMIT
  => #<Category id: 1, name: "Animals", created_at: "2021-02-28 18:30:29", updated_at: "2021-02-28 18:30:29"> 
  (0.3ms) BEGIN
  Question Create (4.8ms)  INSERT INTO "questions" ("question", "choice1", "choice2", "choice3", "choice4", "answer", "category_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9) RETURNING "id"  [["question", "What was the name of the Ethiopian Wolf before they knew it was related to wolves?"], ["choice1", "Canis Simiensis"], ["choice2", "Simien Jackel"], ["choice3", "Ethiopian Coyote"], ["choice4", "Amharic Fox"], ["answer", "Simien Jackel"], ["category_id", 1], ["created_at", "2021-02-28 18:30:42.398662"], ["updated_at", "2021-02-28 18:30:42.398662"]]
  (55.1ms)  COMMIT
  (0.2ms) BEGIN
  ...
003 > animals_trivia.all.count
  => 50

4. Routes, Controllers and Serializers

Routes

With the front-end application hosted on a specific domain, I would think it is prudent to namespace my back-end routes. It provides an indication that these back-end routes are associated with the API. For example, https://knowitall.com/api/v1/categories. The api/v1 suggests my Rails API version 1. I might return and continue my effort on future build status (version 2, etc). In the config/routes.rb, I provided the intended namespaced routes and confirmed with rails routes command.

Rails.application.routes.draw do
  namespace :api do 
    resources :users, only: [:index, :create, :show, :update]
  end 

  namespace :api do 
    namespace :v1 do
      resources :categories, only: [:index] do 
        resources :questions, only: [:index]
      end 
    end 
  end
end

Controllers

rails g controller api/Users, rails g controller api/v1/Questions and rails g controller api/v1/Categories create UsersController, QuestionsController and CategoriesController. These namespaced routes and their respective controllers nomenclature help tremendously in setting up filenames hierarchy.

Note — make sure the PostgreSQL 🐘 is running while configuring routes and controllers.

class Api::UsersController < ApplicationController
    def index
        users = User.all 
        render json: UserSerializer.new(users)
    end 

    def create 
        user = User.create(user_params)

        if user.save
            render json: UserSerializer.new(user), status: :accepted
        else
            render json: {errors: user.errors.full_messages}, status: :unprocessable_entity
        end 
    end 

    def show 
        user = User.find_by(id: params[:id])

        if user 
            render json: user
        else 
            render json: { message: 'User not found.' }
        end 
    end 

    def update 
        user = User.find_by(id: params[:id])
        user.update(user_params)

        if user.save
            render json: user
        else 
            render json: { message: 'User not saved.' }
        end 
    end 

    private 

        def user_params
            params.require(:user).permit(:name, :avatar, :animals_score, :celebrities_score, :computer_science_score, :geography_score, :history_score, :mathematics_score, :music_score, :sports_score)
        end 
end

I will only have the UsersController displayed here, and briefly convey the render json. My rails routes only strictly render JSON strings. This is useful when building JavaScript front-end on DOM manipulation and performing asynchronous requests. The user_params on name, avatar and all category scores will be included in the body of POST and PATCH requests when executing fetch. status: :accepted helps to inform the user of the success 202 HTML status when submitting user input forms on the front-end application. If it fails to save, status: :unprocessable_entity notifies the client error 422 HTML status.

Serializers

gem 'fast_jsonapi' is a JSON serializer for Rails APIs. It allows us to generate serializer classes. The goal of a serializer class is to keep controllers clear of excess logic, including arranging my JSON data to display certain object attributes. It does not hurt to practice serializer early on, even though the current state of my Minimum Viable Product (MVP) does not necessarily require one.

5. Communicating with the Server

In order to make sure the Rails server back-end API worked, I tested a few Asynchronous JavaScript and XML (AJAX) calls on my browser console. While I have been using a lot of fetch() for this project, I have yet to challenge myself with async / await function. I am glad my initial attempt of fetch() in browser console made successful requests. Moving on to front-end!

fentybit / KnowItAll_backend

The MVP of Know It All app is to create a basic Trivia game on Single-Page Application (SPA). This project is built with Ruby on Rails back-end and JavaScript front-end.

Know It All :: Back-End

Domain Modeling :: Trivia Games
Welcome to my simplistic version of Online Trivia Games.

Front-End GitHub Repo

YouTube Demo

DEV Blog

About

The Minimum Viable Product (MVP) of Know It All is to provide the User with few trivia Categories to select from.

Features

Models
User, Category

user has_many :categories

category belongs_to :user

Controller
ApplicationController
UsersController
CategoriesController
QuestionsController

API Database

Open Trivia Database

Free to use, user-contributed trivia question database.

Installation

Back-End

$ git clone 👾
$ bundle install
$ rails db:create && rails db:migrate
$ rails db:seed
$ rails s

Open Chrome browser, and redirect to 'http://localhost:3000' to start the Rails API.

Front-End

Open Chrome browser, and redirect to 'http://127.0.0.1:5500/index.html' to start the app.

Alternatively, it is fully deployed on Netlify!

Know It All

Feel free to use David Strong to sign in!

Build Status

…

View on GitHub

Front-End Web Programming

I have to say this part is my most challenging part! I was struggling to gather all of my new knowledge of The Three Pillars of Web Programming: recognizing JavaScript events, Document Object Model (DOM) manipulation, and communicating with the server on a Single-Page Application (SPA). Separation of concerns, as a fundamental programming concept, is still applicable. HTML defines the structure of the website, JavaScript provides functionality and CSS defines the visual presentation.

1. DOM Manipulation with JavaScript Event Listeners

It took me a few days practicing on a set of hard-coded trivia questions and having my trivia cards update as the user progresses to the next question. Know It All includes a score tracker, questions quantity, progress bar, along with passing and/or failing User Interface (UI) alerts. Having Single-Page Application (SPA) required me to create an element with document.createElement('...') multiple times, and using either .append() or .appendChild() often. Also, trying to incorporate Bootstrap CSS early resulted in a slow and unproductive debugging process. A part of me loves spending gazillion hours on CSS elements. Note to self — do not waste your time on CSS! 😅

One particular challenge I found was to gather user input fields and update their back-end values with asynchronous JavaScript PATCH. Later I found that I got stuck on an erroneous fetch url, and corrected my string template literals to ${this.url}/${currentUser.id}. While I used a lot of standard and static methods in my OO JavaScript, I plan to explore both get and set methods.

2. Re-factoring Early

After spending sometime working on basic event handlings, my index.js file piled up easily with 200+ lines of code. While I have spent the past month on JavaScript Functional Programming, Object-Oriented (OO) JavaScript offers better data control, easy to replicate (with constructor method and new syntax), and grants us the ability to write code that convey these relationships. I decided to build classes and their execution contexts in separate files, api.js, category.js, user.js and question.js. Each class has its own lexical scope of variables and functions, leaving index.js with global variables and callback functions necessary to support index.html.

During this re-factoring exercise, I also removed all of my vars, and replaced them with either const or let. Variables declared with const and let are block-scoped.

3. End Page Sequence

Drum roll... 🥁 We are now coming close to an end. After each set of trivia questions, users should be able to see their final score, and whether or not they beat their previous score. If they do, the new (or higher) score will be saved in the Rails API user database. There will be two options for the user to either Play Again or return back to Home page.

4. Lessons Learned

After months of GitHubing, I am getting really comfortable with working on a separate branch, and merge to master. The git command git co -b <branch_name> becomes my go-to git command.

Understanding JavaScript's syntax and semantics after months dwelling on Ruby has been fun. For example, in JavaScript, functions are treated as first-class data, and understanding some of the concepts of hoisting and scope chain. JavaScript engine works in compilation phase and execution phase. Since I used a lot of JavaScript event click and submit for this project build, I would love to explore other browser events. This YouTube tutorial helped me tremendously to better understand the weird parts of JavaScript.

fentybit / KnowItAll_frontend

The MVP of Know It All app is to create a basic Trivia game on Single-Page Application (SPA). This project is built with Ruby on Rails back-end and JavaScript front-end.

Know It All :: Front-End

Domain Modeling :: Trivia Games
Welcome to my simplistic version of Online Trivia Games.

Back-End GitHub Repo

YouTube Demo

DEV Blog

About

The Minimum Viable Product (MVP) of Know It All is to provide the User with few trivia Categories to select from.

Features

Models
User, Category

user has_many :categories

category belongs_to :user

Controller
ApplicationController
UsersController
CategoriesController
QuestionsController

API Database

Open Trivia Database

Free to use, user-contributed trivia question database.

Installation

Back-End

$ git clone 👾
$ bundle install
$ rails db:create && rails db:migrate
$ rails db:seed
$ rails s

Open Chrome browser, and redirect to 'http://localhost:3000' to start the Rails API.

Front-End

Open Chrome browser, and redirect to 'http://127.0.0.1:5500/index.html' to start the app.

Alternatively, it is fully deployed on Netlify!

Know It All

Feel free to use David Strong to sign in!

Build Status

…

View on GitHub

Build Status and Future Improvement

Know It All was completed in a 2-week timeframe from API data search, Ruby on Rails back-end, and JavaScript front-end User Interface. Future cycle of product development as follows:

Add Sub Category to model associations. User should be able to select Category and its Sub Category. For example, science category has many sub categories including physics, mathematics, biology and so on.
Outsource APIs for the aforementioned Sub Category trivia questions.
Gather user inputs on their favorite Category on future app improvement.
Utilize setInterval and/or time limit of 15-20 seconds on each Trivia question.
User authentication.
Create a toggle track for dark mode 😎

Post Scriptum:
This is my Module 3 capstone project with Flatiron School. I believe one of the catalyst to becoming a good programmer is to welcome constructive criticism. Feel free to drop a message. 🙂

Keep Calm, and Code On.

External Sources:
Open Trivia Database
CSS Bootstrap
Unsplash

[**fentybit**](https://fentybit.me/) | [GitHub](https://github.com/fentybit) | [Twitter](https://twitter.com/fentybit) | [LinkedIn](https://www.linkedin.com/in/fentybit/)

Plan My MD Visit Part 2

fentybit — Fri, 19 Feb 2021 18:19:14 +0000

I have decided to fine-tune Plan My MD Visit after receiving feedback from fellow developers on responsive web design and future build status.

Responsive Web Design

Previous front-end built was centered around the users navigating through web browser. I went back, adjusted CSS/style classes, and added the <meta> tag for mobile phone users.

<!DOCTYPE html>
<html>
  <head>
    <title>PlanMyMdVisit</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=0.9">

    ...

  </body>
</html>

Plan My MD Visit is now responsive on mobile, tablet and desktop browser! 🌟

Build Status and Future Improvement

Current project-built was completed in a 2-week timeframe from API data search, model association development, and MVP for both patient and admin user interface.
Future cycle of product development as follows:

Add Healthcare Provider to model associations. Patients can find their healthcare providers, and sort through in-network doctors by their specialties.
Outsource from different APIs for doctors, currently restricted to Medicare Care Compare eligible professionals.
Develop user interface for users as doctors.
Set up customized validations for scheduling appointments where each individual doctor can personalize their preferred schedule.
Communication features (i.e., private messaging) in between doctors and patients.
Design separate CSS layouts for different user groups: patients, admins and doctors.

fentybit / PlanMyMDVisit

The MVP of Plan My MD Visit app is to create a virtual patient system where the automation benefits patient 24/7 seeking virtual medical assistance, improving overall patient well-being.

Plan My MD Visit

Domain Modeling :: Virtual Healthcare
Welcome to my simplistic version of Virtual Healthcare system.
The automation benefits patients 24/7 seeking medical assistance, improving overall patient well-being!

YouTube Demo

DEV Blog

About

The pandemic that has been lingering all around us since early 2020 has caused an apparent challenge to the current healthcare system. It is a testament to the new modern demand of digital healthcare. The conventional healthcare system is currently overflown with predominantly Covid-19 patients, exceeding their abilities to facilitate care of other medical patient needs.

The Minimum Viable Product (MVP) of Plan My MD Visit app is to create a virtual patient system where the automation benefits patient 24/7 seeking virtual medical assistance, improving overall patient well-being. My application carries essential features and minimal attributes of tele-health platforms. Patients make their visits to the clinic, laboratory or hospital only when necessary and/or advised by…

View on GitHub

Keep Calm, and Code On.

fentybit | GitHub | Twitter | LinkedIn

Deploy Ruby on Rails on Heroku

fentybit — Sun, 31 Jan 2021 20:55:02 +0000

My first deployment with Heroku did not go as smoothly as I anticipated. I decided to document and share my Heroku journey. I can only share some of the hurdles from my Plan My MD Visit app. Previously, the project was built and completed by running 'http://localhost:3000/'. My recommendation to fellow developers would be to deploy early and debug as you progress through the project. It is more time efficient than discovering a large number of glitches near the end of the project.

First things first

It provides free cloud services for developers to run their applications. Make sure you read their provisions for their free platform services.

SQLite > PostgreSQL

If your application is currently running on SQLite database, there are two action items:

Gemfile and SQL query in PostgreSQL.

Gem sqlite3 will be decommissioned, and replaced by gem pg.

# gem 'sqlite3', '~> 1.4'
gem 'pg'

Run bundle install.

We will circle back to SQL query in PostgreSQL.

Update `config/database.yml`

This file was created by default when we initiated the Rails app with $ rails new app-name. Rails provides a database with sqlite3 adapter, and its pre-built code as follows:

# SQLite. Versions 3.8.0 and up are supported.
#   gem install sqlite3
#
#   Ensure the SQLite 3 gem is defined in your Gemfile
#   gem 'sqlite3'
#
default: &default
  adapter: sqlite3
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

development:
  <<: *default
  database: db/development.sqlite3

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: db/test.sqlite3

production:
  <<: *default
  database: db/production.sqlite3

We need to adjust it for postgresql. While perusing Heroku documentation and GitHub gist, I was able to revise my code in config/database.yml.

# PostgreSQL. Versions 8.2 and up are supported.
#
# Install the pg driver:
#   gem install pg
# On Mac OS X with macports:
#   gem install pg -- --with-pg-config=/opt/local/lib/postgresql84/bin/pg_config
# On Windows:
#   gem install pg
#       Choose the win32 build.
#       Install PostgreSQL and put its /bin directory on your path.
#
# Configure Using Gemfile
# gem 'pg'
#
development:
  adapter: postgresql
  encoding: unicode
  database: app-name_development
  pool: 5
  username: your_username
  password:

  # Connect on a TCP socket. Omitted by default since the client uses a
  # domain socket that doesn't need configuration. Windows does not have
  # domain sockets, so uncomment these lines.
  #host: localhost
  #port: 5432

  # Schema search path. The server defaults to $user,public
  #schema_search_path: myapp,sharedapp,public

  # Minimum log levels, in increasing order:
  #   debug5, debug4, debug3, debug2, debug1,
  #   log, notice, warning, error, fatal, and panic
  # The server defaults to notice.
  #min_messages: warning

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  adapter: postgresql
  encoding: unicode
  database: app-name_test
  pool: 5
  username: your_username
  password:

This is important. git push, and always try to maintain latest repo files in your GitHub account.

Heroku CLI

Follow the initial Heroku CLI setup. Once installed, you can type $ heroku login on the terminal. You will receive a return feedback as displayed below.

$ heroku login
$ heroku: Press any key to open up the browser to login or q to exit:
$ Opening browser to https://cli-auth.heroku.com/auth/cli/browser/...?requestor=...
$ Logging in... done
$ Logged in as your_email@email.com
$ ...

It will then navigate you to Heroku web browser to log in. You may close the web page after you successfully log in, and return to VSCode terminal. With heroku command prompt, you will see Heroku Command Line Interface.

$ heroku 
    CLI to interact with Heroku

    VERSION
      heroku/7.47.11 darwin-x64 node-v12.16.2

    USAGE
      $ heroku [COMMAND]

    COMMANDS
      access          manage user access to apps
      addons          tools and services for developing, extending, and operating your app
      apps            manage apps on Heroku
      auth            check 2fa status
      authorizations  OAuth authorizations
      autocomplete    display autocomplete installation instructions
      buildpacks      scripts used to compile apps
      certs           a topic for the ssl plugin
      ci              run an application test suite on Heroku
      clients         OAuth clients on the platform
      config          environment variables of apps
      container       Use containers to build and deploy Heroku apps
      domains         custom domains for apps
      drains          forward logs to syslog or HTTPS
      features        add/remove app features
      git             manage local git repository for app
      help            display help for heroku
      keys            add/remove account ssh keys
      labs            add/remove experimental features
      local           run Heroku app locally
      logs            display recent log output
      maintenance     enable/disable access to app
      members         manage organization members
      notifications   display notifications
      orgs            manage organizations
      pg              manage postgresql databases
      pipelines       manage pipelines
      plugins         list installed plugins
      ps              Client tools for Heroku Exec
      psql            open a psql shell to the database
      redis           manage heroku redis instances
      regions         list available regions for deployment
      releases        display the releases for an app
      reviewapps      manage reviewapps in pipelines
      run             run a one-off process inside a Heroku dyno
      sessions        OAuth sessions
      spaces          manage heroku private spaces
      status          status of the Heroku platform
      teams           manage teams
      update          update the Heroku CLI
      webhooks        list webhooks on an app

There are a few ways to create a Heroku app, either from Heroku CLI or web browser. With the CLI, you can create a new Heroku app with $ heroku create. This prompt gives you the default Heroku-20 stack. It depends on your Ruby buildpack, and Heroku-20 did not align with my project build. I reviewed Heroku stacks documentation, and found Heroku-18 stack worked with my Ruby version 2.6.1.

Heroku Database

Once Heroku app is successfully created, we can push the code to the Heroku server with command line $ git push heroku master. At this point, if you still hit a snag, I highly recommend Google search — lots of Stack Overflow and tutorials from other devs. For my project, it successfully deployed.

$ heroku run rails db:migrate
$ heroku run rails db:seed

As we are migrating our database to Heroku's PostgreSQL, we need to initiate the command lines above. heroku run rails db:seed is necessary when you have seeding data, either fetching API data or manual seeds.rb.

PostgreSQL - JOIN clause

Circling back to SQL query in PostgreSQL, this part frustrates me the most. At one point, I hit an impasse, and thought my deployment process was fully corrupted. My application was up and running. However, as I was navigating all links and forms, I was not able to proceed with a few form selections. Heroku's error notification did not provide with enough detailed information to understand what was wrong.

We're sorry, but something went wrong.
If you are the application owner check the logs for more information.

I gave up that night, slept and continued debugging the next day. 😥

After spending a few hours on Stack Overflow, I learned that my SQL query on helper methods needed refactoring following PostgreSQL. I suggest reviewing all query statements to PostgreSQL query documentation. One debugging example for the JOIN query.

# SQLite query on JOIN
def self.doctors 
  joins(:doctor).where("user_id")
end

# PostgreSQL query on JOIN
def self.doctors 
  joins(:doctor)
end

Authentication

Last hurdle was on migrating PROVIDER_CLIENT_ID and PROVIDER_SECRET from .env to Heroku. In Heroku browser, you can navigate to your app > Settings > Config Vars > Reveal Config Vars.

This concludes the journey of my first RoR deployment with Heroku.

I intend to exploring future project builds with Heroku, and share my experience with other devs. Thank you, Heroku. 👾

Drum roll.... 🥁

Below is my first Ruby on Rails deployment on Heroku!

[**fentybit**](https://fentybit.me/) | [GitHub](https://github.com/fentybit) | [Twitter](https://twitter.com/fentybit) | [LinkedIn](https://www.linkedin.com/in/fentybit/)

Plan My MD Visit Part 1

fentybit — Tue, 19 Jan 2021 04:24:21 +0000

Happy New Year 2021, fellow devs!

Moving along from my previous Intro to Rails study, Rails Intro::Mandalorian, my cohort is approaching the Ruby on Rails deadline week. Since Rails provides more powerful web application frameworks compared to my previous Sinatra Project Build, it allows swift implementation of a more complex model associations and corresponding attributes.
The pandemic that has been lingering all around us since early 2020 has caused an apparent challenge to the current healthcare system. It is a testament to the new modern demand of digital healthcare. The conventional healthcare system is currently overflown with predominantly Covid-19 patients, exceeding their abilities to facilitate care of other medical patient needs. The Minimum Viable Product (MVP) of Plan My MD Visit app is to create a virtual patient system where the automation benefits patient 24/7 seeking virtual medical assistance, improving overall patient well-being. My application carries essential features and minimal attributes of tele-health platforms. Patients make their visits to the clinic, laboratory or hospital only when necessary and/or advised by medical professionals.

1. User Story
2. API Searching Saga
3. Creating Active Record Model
4. Action Controllers
5. Authentication and Authorization Terms
6. Action Views
7. Lastly, as always - Lessons Learned

1. User Story

I spent most of my time at the inception of this project, thinking who the users are and what their experiences would be. At first, I came up with 5 different models that encapsulate the majority party in the healthcare platform; users as either patients, doctors, nurses, administrators, healthcare teams and healthcare providers. The brainstorming exercise goes hand in hand with my attempt in data searching — which presents its own sets of challenges.

I focused on user experience on the patient side, creating an ease of scheduling and having the capability to access medical assistance. Patients should be able to sort doctors' specialties based on their medical needs, and assemble their own healthcare teams. For example, one patient has atrocious eczema symptoms. She should be able to schedule a virtual appointment with available in-network doctors, and create a dermatology care team which comprises of herself as the patient, doctor, appointment time and other necessary care team's attributes. The patient has a certain ownership of her care team, resulting from the automated system in streamlining health provider workflow.

2. API Searching Saga

Once I envisioned the final outputs, the very next thing would be to acquire a list of doctors and their specialties. Being able to feed my application with this data allows new users (as patients) to sign up and have immediate capability to schedule appointments. API search can be fun and gnarly at the same time. I found success from other developers utilizing BetterDoctor API, and got really excited with their doctors and subsequent information. After spending a day on debugging sessions, I learned BetterDoctor API is officially deprecated. 😢
Fret not! I moved on, spent another day searching for an Open API, and landed on Centers for Medicare and Medicaid Services. Their datasets are officially used on Medicare.gov, and limited to eligible professionals (EPs) listed on Medicare Care Compare. As a result, I had to scratch out the Healthcare Provider model from my original domain modeling. The rest of my models still meet the purpose of fulfilling MVP and lay the groundwork for my Content Management System (CMS). The datasets seed about 450+ healthcare professionals with varying specialties. I had to refresh my memory on how to parse JSON data from REST API from my first capstone project. Thanks to Ruby gems OpenURI and Nokogiri, I successfully created my doctors collection in JSON format. I had to fudge a few doctors' attributes in order to execute model validations properly.

3. Creating Active Record Model

Rails pre-dominantly identifies core components in MVC (Model-View-Controller) paradigm. Most of the logic of object relationships, such as patient has_many doctors, reside in the Active Record models. Controllers allow exposure of our database from these AR model associations and rendered views. This modular approach creates distinction of each MVC responsibility, which outlines the Rails architectural framework patterns.

$ rails new plan-my-md-visit

Upon instantiation of the command prompt, Rails executes its conventional file system from app, config, db to Gemfile, and many more. There are 4 main models: User, Patient, Doctor and Healthcare Team with their model associations as follows:

user has_one :patient
user has_one :doctor

patient belongs_to :user
patient has_many :healthcare_teams
patient has_many :doctors, through: :healthcare_teams

healthcare_team belongs_to :patient
healthcare_team belongs_to :doctor

doctor belongs_to :user
doctor has_many :healthcare_teams
doctor has_many :patients, through: healthcare_teams

Rails Generators streamline the effort of setting up models and their table migrations.

$ rails g model Doctor user:references gender:string specialty:string hospital:string address:string city:string state:string zipcode:integer --no-test-framework

Similar implementations occurred in the other models. Following building the Active Record associations, testing Rails models in rails console is a necessity for quality control. I am pleased with my basic schema composition.

ActiveRecord::Schema.define(version: 2021_01_04_042023) do
    create_table "users", force: :cascade do |t|
    t.string "firstname"
    t.string "lastname"
    t.string "username"
    t.string "email"
    t.string "password_digest"
    t.boolean "admin", default: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "patients", force: :cascade do |t|
    t.integer "user_id"
    t.text "medical_record"
    t.text "test_results"
    t.text "medications"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

    create_table "doctors", force: :cascade do |t|
    t.integer "user_id"
    t.string "gender"
    t.string "specialty"
    t.string "hospital"
    t.string "address"
    t.string "city"
    t.string "state"
    t.integer "zipcode"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "healthcare_teams", force: :cascade do |t|
    t.integer "patient_id"
    t.integer "doctor_id"
    t.datetime "appointment"
    t.text "test_result"
    t.text "treatment_plans"
    t.text "prescriptions"
    t.decimal "billing"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end
end

Validations protect our database, and I always think that it is wise to set validations early (prior to controllers and views). Other developers might think otherwise. I identified a few rudimentary Active Record Validations, mainly to avoid seeding any bad data. Each user should be unique, and in most web applications, there should only be one particular username or email associated with the account. I have no angst towards Elon Musk's son named X Æ A-12, but my application currently only allows alphabetic letters.

class User < ActiveRecord::Base

    validates :username, presence: true, uniqueness: true 
    validates :email, presence: true, uniqueness: true
    validates :firstname, presence: true, format: { without: /[0-9]/, message: "Numbers are not allowed." }
    validates :lastname, presence: true, format: { without: /[0-9]/, message: "Numbers are not allowed." }

    ...

end

Aside from model associations and validations, I implemented the Law of Demeter design principle by adopting the "one dot" rule. For example, in order to retrieve doctor's fullname, the proper code would be doctor.user.fullname following our model associations and their attributes. I encapsulated the logic in the Doctor model, in reference to the object's user reference, and shortened the code to doctor.fullname.

class Doctor < ActiveRecord::Base

    ...

    def fullname 
        self.user ? self.user.fullname : nil 
    end
end

Active Record provides more! I found it extremely useful when implementing AREL (A Relational Algebra) in building optimized queries. It helped me in sorting out the intended outcomes of doctors.json datasets with minimal time complexity. I was able to sort doctors' specialties with this query interface, Doctor.select(:specialty).distinct.order(specialty: :asc).

4. Action Controllers

I took the liberty of developing overall user experience (as patients) with Figma. My previous Designlab's UX & UI courses proved to be useful when creating this basic mid-fidelity wireframing. The exercise helped me to map the different route helpers, HTTP verbs, paths and controller actions following RESTful design principles.

Users as Patients

Upon signing up or logging in, the patient users have access to view their care teams. Overall mappings of the patient users as follows:

Sessions Controller

HTTP Verb	Method	Path	Description
`GET`	new	/signin	user logging in
`POST`	create	/signin	user authentication
`POST`	destroy	/logout	user logging out

Users Controller

HTTP Verb	Method	Path	Description
`GET`	new	/users/new	render form for new user creation
`POST`	create	/users/:id	create a new user
`GET`	show	/users/:id	show a single user
`GET`	edit	/users/:id/edit	render the form for editing
`PATCH`	update	/users/:id	update a user
`DELETE`	destroy	/users/:id	delete a user

Patients Controller

HTTP Verb	Method	Path	Description
`GET`	new	/patients/new	render form for new patient creation
`POST`	create	/patients/:id	create a new user patient
`GET`	show	/patients/:id	user patient main page

Doctors Controller

HTTP Verb	Method	Path	Description
`GET`	index	/doctors	view doctors with specialty filter
`GET`	show	/doctors/:id	show a single doctor information

Healthcare Teams Controller

HTTP Verb	Method	Path	Description
`GET`	new	/select_specialty	user patient select doctor specialty

Healthcare Teams Controller (nested resources)

HTTP Verb	Method	Path
`GET`	index	/patients/:patient_id/healthcare_teams
`GET`	new	/patients/:patient_id/healthcare_teams/new
`POST`	new	/patients/:patient_id/healthcare_teams/new
`POST`	create	/patients/:patient_id/healthcare_teams/:id
`GET`	show	/patients/:patient_id/healthcare_teams/:id

There are restrictions for patient users, for instance updating doctor's profile information or viewing other patient users information. My app has to account for such intrusion. In the Application Controller, private methods current_user and current_patient were created to police this access policy. The two methods can be propagated on other controllers when granting certain privileges based on current_user's identity. The following is a current_patient examples of a user.

class PatientsController < ApplicationController

    helper_method :current_user, :current_patient

    def show  
        @patient = Patient.find_by(id: params[:id])

        if @patient != current_patient
            flash[:alert] = "Error URL path."
            redirect_to patient_path(current_patient)
        end 
    end 

    ...

end

Users as Admins

The admin group should have the greatest privileges when performing Create, Read, Update and Delete (CRUD) functions on User, Patient, Doctor and Healthcare Team models. Doctors might have the capability to update Care Team's attributes such as treatment plans, test results and medications. However, they are not allowed to update patient profiles as they are restricted to administrative access.

Rails.application.routes.draw do

  ...

  # Only Admin can see Users Lists
  resources :users, except: [:index]  

  resources :doctors, only: [:index, :show] 

  # Admin privileges
  namespace :admin do 
    resources :users, only: [:index, :show, :edit, :update, :destroy]
    resources :patients, only: [:edit, :update]
    resources :doctors, only: [:edit, :update]
    resources :healthcare_teams, only: [:edit, :update, :destroy]
  end 
end

The application of namespace routes shortened my overall scoping routes, wrapping /users, /patients, /doctors and /healthcare_teams resources under /admin. One finicky note on destroy action. A user is either a patient or a doctor. When deleting a user, their subsequent patient or doctor information should also be deleted from our database.

class Admin::UsersController < ApplicationController

    ...

    def destroy
        @patient = @user.patient 
        @doctor = @user.doctor 

        if !@patient.nil?
            @user.destroy
            @patient.destroy
        else
            @user.destroy
            @doctor.destroy
        end 

        flash[:notice] = "User deleted."
        redirect_to admin_users_path
    end 

end

5. Authentication and Authorization Terms

For standard user authentication (including signup, login and logout), I utilized Ruby gem bcrypt and Active Record's Secure Password class methods. has_secure_password needs to be included in the User model. This implementation provides methods to set and authenticate user's password, following users' table and password_digest attribute.

I challenged myself to set two authentication providers alongside the traditional username and password set up. Ruby gem omniauth provides a gateway to utilizing multi-provider authentication strategies. While GitHub relies on gem omniauth-github, Google depends on gem omniauth-google-oauth2. Gem dotenv-rails is required to securely save PROVIDER_CLIENT_ID and PROVIDER_SECRET. I defined the Rack Middleware in Rails initializer at config/initializers/omniauth.rb.

Rails.application.config.middleware.use OmniAuth::Builder do
    provider :developer unless Rails.env.production?
    provider :github, ENV['GITHUB_KEY'], ENV['GITHUB_SECRET']
    provider :google_oauth2, ENV["GOOGLE_KEY"],ENV["GOOGLE_SECRET"], skip_jwt: true
end

In the config/routes.rb file, the callback routes get '/auth/:provider/callback', to: 'sessions#omniauth' consolidates both providers (GitHub and Google). The results of authentication hash available in the callback vary from each provider. Two class methods, find_or_create_by_google(auth) and find_or_create_by_github(auth), are provided in the User model and invoked in the Sessions Controller.

class SessionsController < ApplicationController

    ...

    def omniauth
        if auth_hash != nil && auth_hash.provider == "google_oauth2"
            @user = User.find_or_create_by_google(auth)
        elsif auth_hash != nil && auth_hash.provider == "github"
            @user = User.find_or_create_by_github(auth)
        end 

        session[:user_id] = @user.id
        @current_patient = Patient.find_or_create_by(user_id: session[:user_id])

    ...

    end 

    private 

        def auth
            request.env['omniauth.auth']
        end 

end

6. Action Views

The part that requires the least amount of code, and User Interface as its focal point.

Forms forms forms!

Through Flatiron School curriculums, I became well-versed with form_for FormBuilder features for models associated with Active Record models, and form_tag for manual route passing where form params will be submitted. For this project, I decided to put form_with into service. It was introduced in Rails 5.1, and the idea is to merge both implementations of form_tag and form_for. I might as well get comfortable with form_with view helpers and its lexical environment. At first, I was not able to display error messages, and discovered I had to add local: true syntax. Below is a snippet of my /admin/healthcare_teams/:id/edit route. Note on the syntax format on the nested resource, [:admin, @healthcare_team].

<%= render partial: '/errors', locals: { record: @healthcare_team } %>

<%= form_with model: [:admin, @healthcare_team], local: true do |f| %>
   <%= f.label :appointment, "Appointment" %>
   <%= f.datetime_field :appointment %>

   <%= f.label :test_result, "Test Result" %>
   <%= f.text_area :test_result %>

   <%= f.label :treatment_plans, "Treatment Plans" %>
   <%= f.text_area :treatment_plans %>

   <%= f.label :prescriptions, "Prescriptions" %>
   <%= f.text_area :prescriptions %>

   <%= f.label :billing, "Billing" %>
   <%= f.number_field :billing, min: 0, step: 0.01 %>

   <%= f.submit "Update Care Team" %>

<% end %>

While Rails' doctrine is pursuant to convention over configuration, I had to customize one route get '/select_specialty', to: 'healthcare_teams#select_specialty'. I want the patient users to have the ability to sort doctors by specialty when scheduling appointments.

CSS - Oh My!

While it was all fun in rendering many views in order to make my app more interactive, I found myself spending a tremendous amount of time on CSS clean-ups. I am thankful for MaterializeCSS, and its built-in scss and jquery. Though, it gave me a lot of headache with debugging and reading Stack Overflow especially when implementing their CSS classes onto forms, select and button elements. I have no CSS experience, and maybe it's about time to educate myself further via Udemy courses.

7. Lastly, as always — Lessons Learned

My struggle on this project started off when designing the overall user flow, either as patients or doctors. It was an ambitious idea at first, trying to figure out both users simultaneously. My interim cohort leader, Eriberto Guzman, suggested to focus on developing my project from the patient users point of view, and refine for other user groups as my project progresses.

My preliminary Entity Relationship Diagram (ERD) had a flaw in the User model associations. User has_many patients, and user has_many doctors. I realized this during debugging sessions when setting up Admin controllers that I had to refactor the user either as a patient or a doctor. I was relieved to find the only difference on the associations methods was minimal. For example, self.patients.build is one of the methods for has_many association, and it was revised to self.build_patient when has_one was declared.

Refactoring codes will always be a perpetual exercise as a developer. I plan on going back, and restructuring any vulnerabilities residing in my code - but first, need to deploy on Heroku and submit this project for my upcoming project assessment. So long Rails.

fentybit / PlanMyMDVisit

The MVP of Plan My MD Visit app is to create a virtual patient system where the automation benefits patient 24/7 seeking virtual medical assistance, improving overall patient well-being.

Plan My MD Visit

YouTube Demo

DEV Blog

About

View on GitHub

Keep Calm, and Code On.

External Sources:
Centers for Medicare and Medicaid Services
Simple Calendar
MaterializeCSS
Unsplash
Google Authentication Strategy for Rails 5 Application

fentybit | GitHub | Twitter | LinkedIn

Rails Intro::Mandalorian

fentybit — Sat, 12 Dec 2020 21:42:29 +0000

Happy belated Thanksgiving 🦃 and Merry almost Christmas 🎄, fellow devs!

I still can not believe that I am officially on Module 3! So glad that I passed my Sinatra x Street Fighter project assessment, and enjoyed some downtime over Thanksgiving weekend.

The past few weeks of my first exposure to Rails just blew my mind... David H. Hansson created this magic of Rails, eliminating a bunch of repetitive Sinatra configuration. Ruby on Rails is a web framework with tremendous open source contributions, and provides developers building applications with strong base frame functionality. Rails' architecture still relies upon the MVC (Model-View-Controller) paradigm. The separation of concerns governs the overall Rails file directory structure. Once the command rails new <application_name> is prompted, new directories emerge including app, config, db, lib, Gemfile and so on. You may review each directory and its functionality here. rails s is a basic command line in order to start the Rails server, while rails c provides Rails console session (similar to rake console). One main characteristic from Rails I have learned thus far would be its convention over configuration. This pattern is inherent in the Rails routing system, file naming conventions and/or data flow structure.

My case study focuses mainly on CRUD (Create, Read, Update and Delete) Rails implementation, and it will be in reference to one of my favorite shows, The Mandalorian. "This is The Way." Season 2 is extraordinary! Kudos to Jon Favreau and our beloved Grogu.

Rails Generators

In Sinatra, we manually build many standard features. Rails, on the other hand, provides a more efficient way when building core application functionality. This exercise alone prevents spelling and syntax errors following RESTful (Representational State Transfer) naming patterns. I adore the rails generate (or rails g) command line. It automatically populates our basic Rails app framework. There are a few Rails generators including migration, model, controller, resource and scaffold. Each generator is capable of creating a large number of files and codes. This case study will utilize my favorite one, resource generator. It creates some of the basic core functionality without code overflow. Let's create our first resource, Mandalorian, on the terminal.

> rails g resource Mandalorian name:string spaceship:string companion:string --no-test-framework

The --no-test-framework flag is being utilized as my case study will not dive in to any testing frameworks. The above command line gives us the following list:

> invoke  active_record
> create    db/migrate/20201201211632_create_mandalorians.rb
> create    app/models/mandalorian.rb
> invoke  controller
> create    app/controllers/mandalorians_controller.rb
> invoke    erb
> create      app/views/mandalorians
> invoke    helper
> create      app/helpers/mandalorians_helper.rb
> invoke    assets
> invoke      scss
> create        app/assets/stylesheets/mandalorians.scss
> invoke  resource_route
> route    resources :mandalorians

Isn't Rails magic?!
Let's take a peek at some of these files.

# db/migrate/20201201211632_create_mandalorians.rb

class CreateMandalorians < ActiveRecord::Migration[6.0]
  def change
    create_table :mandalorians do |t|
      t.string :name
      t.string :spaceship
      t.string :companion

      t.timestamps
    end
  end
end

We have a new database table mandalorians created under folder db/migrate along with the assigned string attributes, spaceship and companion.

# app/models/application_record.rb

class ApplicationRecord < ActiveRecord::Base
  self.abstract_class = true
end


# app/models/mandalorian.rb

class Mandalorian < ApplicationRecord
end


# app/controllers/mandalorians_controller.rb

class MandaloriansController < ApplicationController
end

Mandalorian model directly inherits the Active Record values from ApplicationRecord. The MandaloriansController currently does not have any single actions. Resource generator allows flexibility when adding necessary features.

# config/routes.rb

Rails.application.routes.draw do
  resources :mandalorians
end

A full resources call currently resides in the config/routes.rb file. resources :mandalorians embodies the conventional RESTful routes in order to perform CRUD functions: index, new, create, show, edit, update and destroy. These routes will be adjusted as we progress on this case study.

I will create our second resource, Armor in order to establish basic object relationships, has_many and belongs_to. Similar Rails file structure will be created upon instantiation.

> rails g resource Armor name:string description:string --no-test-framework

Models

The models are still inheriting from the ActiveRecord::Base class. Active Record is a strong tool when implementing logic. It provides ORM (Object Relational Mapping) meta-programming methods built into the models entity and associations. Model files may contain object relationships, validations, callbacks, custom scopes and/or others.

Active Record associations come into play especially when creating more complex data relationships. I would have to adjust both models, Mandalorian and Armor, along with the database migration. In the universe of my case study, let's assume that a mandalorian has_many armors, and each armor belongs_to a mandalorian. We understand the armors table should include a foreign key column, a reference to a primary key of the associated mandalorian.

# app/models/mandalorian.rb

class Mandalorian < ApplicationRecord
    has_many :armors
    validates :name, presence: true, uniqueness: true 
end


# app/models/armor.rb

class Armor < ApplicationRecord
    belongs_to :mandalorian
    validates :description, length: { maximum: 50 }
end


# db/schema.rb

ActiveRecord::Schema.define(version: 2020_12_01_221427) do
  create_table "mandalorians", force: :cascade do |t|
    t.string "name"
    t.string "spaceship"
    t.string "companion"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end
    create_table "armors", force: :cascade do |t|
    t.string "name"
    t.string "description"
    t.integer "mandalorian_id"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end
end

Active Record validations are useful in protecting the database from invalid data inputs. validates method takes two arguments, :name of the attribute requiring validation, and a hash of options to detail out how the validation works. { presence: true } prevents the :name attribute from being empty. { uniqueness: true } does not allow identical :name data input.

It is always a good practice to test our models post migration (or, rails db:migrate). Let's use my second favorite Rails console command line, rails c.

001 > mando = Mandalorian.create(name: "Din Djarin", spaceship: "Razor Crest", companion: "Grogu") 
=> #<Mandalorian id: 1, name: "Din Djarin", spaceship: "Razor Crest", companion: "Grogu", created_at: "2020-12-02 01:11:33.083593", updated_at: "2020-12-02 01:11:33.083593">

002 > flamethrowers = mando.armors.build(name: "Flamethrowers", description: "Fire streams or bursts of fire")
=> #<Armor id: nil, name: "Flamethrowers", description: "Fire streams or bursts of fire", mandalorian_id: 1, created_at: nil, updated_at: nil>

003 > flamethrowers.save 
=> [["name", "Flamethrowers"], ["description", "Fire streams or bursts of fire"], ["mandalorian_id", 1], ["created_at", "2020-12-02 01:20:57.923623"], ["updated_at", "2020-12-02 01:20:57.923623"]]

I am able to create mando from Mandalorian class, with its spaceship and companion attributes. build method is similar to new method. mando obviously has many armors, and build method is one of the association macros. Once flamethrowers saved, Active Record automatically assigns it to mando, or equivalently, mandalorian_id = 1. Terrific! Our object relationships work.

There are a lot of more class methods in Rails application aside from my rudimentary case study such as has_many :through, has_one and many more.

Controllers

Controllers essentially connect the models, views and routes. They inherit a number of methods built into the Rails controller system through ApplicationController.

Assuming following conventional mappings of full resources, the MandaloriansController has HTTP verbs, methods, paths and descriptions as follows:

HTTP verb	Method	Path	Description
`GET`	index	/mandalorians	show all mandalorians
`POST`	create	/mandalorians	create a new mandalorian
`GET`	new	/mandalorians/new	render the form for new creation
`GET`	edit	/mandalorians/:id/edit	render the form for editing
`GET`	show	/mandalorians/:id	show a single mandalorian
`PATCH`	update	/mandalorians/:id	update a new mandalorian
`DELETE`	destroy	/mandalorians/:id	delete a mandalorian

The ArmorsController has similar mappings as above.

These controller actions (or methods) will perform CRUD functions and render views to the end user. The /:id on the url paths accepts params[:id] passed to the route. This dynamic routing system allows our controller methods to receive params input.

# config/routes.rb

Rails.application.routes.draw do
  resources :mandalorians, only: [:new, :show, :edit]
  # get '/mandalorians', to: 'mandalorians#new'
  # post '/mandalorians', to: 'mandalorians#create'
  # get '/mandalorians/:id', to: 'mandalorians#show'
  # get '/mandalorians/:id/edit', to: 'mandalorians#edit'
  # patch '/mandalorians/:id', to: 'mandalorians#update'
  resources :armors
end

In Sinatra application, the actions' routes reside in the controller. Rails assigns routes in the config/routes.rb by default, and elaborate the actions as methods in the controllers' files. resources :mandalorians, only: [:new, :show, :edit] strictly only allows new, show and edit routing system. Note: I revised previously full path resources down to three methods. On the other hand, resources :armors provides a full set of routing systems; index, new, create, show, edit, update and destroy.

Since validations were implemented in the models, the controllers require slight modifications to the create and update actions. Ideally if validations were to fail, the form needs to be re-rendered. For example, the :new form params input fails the Active Record validation. :new template would have to be re-rendered. Similar to the :edit form.

# app/controllers/mandalorians_controller.rb

class MandaloriansController < ApplicationController
    before_action :set_mandalorian, only: [:show, :edit, :update]

    def new 
        @mandalorian = Mandalorian.new 
    end 

    def create 
        @mandalorian = Mandalorian.new(mandalorian_params)
        if @mandalorian.save 
            redirect_to @mandalorian
        else 
            render :new 
        end 
    end

        def show
        end 

    def edit 
    end 

    def update 
        if @mandalorian.update(mandalorian_params)
            redirect_to @mandalorian 
        else  
            render :edit 
        end 
    end 

    private 

    def set_mandalorian 
        @mandalorian = Mandalorian.find(params[:id])
    end 

    def mandalorian_params
        params.require(:mandalorian).permit(:name, :spaceship, :companion)
    end 
end

before_action :set_mandalorian helps in keeping our code DRY (Don't Repeat Yourself). It triggers the set_mandalorian function at the instantiation of show, edit and update actions. Each action requires an object instance of Mandalorian class through .find(params[:id]).

URL or Route Helpers are another level of abstraction in Rails in order to avoid hard-coded paths. You can implement these route helpers on Controllers and Views files, but not in Models. It also provides more assistance to readability. For example, "mandalorian_path(@mandalorian)" would be the route helper version of "/mandalorians/#{@mandalorian.id}". ActionView, a sub-gem of Rails, helps us in providing these numerous helper methods. In fact, let's implement another level of abstraction. @mandalorian is applicable and a more succinct version of "mandalorian_path(@mandalorian)".

The goal of strong params is to whitelist the parameters received. In the mandalorian_params function, the require method must require a key called :mandalorian. The permit method allows more flexibility in key attributes, and is especially useful when assigning mass attributes.

On a side note, I found raise params.inspect as a great way to print params when working in between both controllers and views.

Views

View files should have the least amount of logic, and their solid purpose is to render views for the end user. In this exercise, we will only focus on implicit rendering following Rails convention. My application instinctively seeks out view files carrying the same name as the controller actions. Each action from the controller corresponds only to its respective view. For example, new action only communicates with new.html.erb. Any instance variables from new action only transcribes to new.html.erb.

Rails forms allow the end user to submit data into form fields. I will directly implement the forms using Rails Route Helpers in lieu of plain HTML format, and form_for in lieu of form_tag. form_for yields FormBuilder object, and is full of convenient features. It is best implemented when forms are directly connected with the models, in performing CRUD functions. However, it is also crucial to understand the rudimentary application of form_tag and its helper methods.

form_authenticity_token helper is a part of Rails to combat CSRF (Cross-Site Request Forgery). CSRF general flow is one site implementing a request to another site without end user's consent. Fun fact, this hidden_field_tag is a redundancy as Rails forms by default generates a required authenticity token. It reminds me of Sinatra manual implementation of assigning session[:user_id] = @user.id.

# app/views/mandalorians/_form.html.erb 

<%= form_for @armor do |f| %>
    <% if @armor.errors.any? %>
        <div id="error_explanation">
            <h2>
                <%= pluralize(@armor.errors.count, 'error') %> 
                prohibited this armor from being saved:
            </h2>
            <ul>
                <% @armor.errors.full_messages.each do |message| %>
                    <li><%= message %></li>
                <% end %>
            </ul>
        </div>
    <% end %>

    <%= f.label "Name:"%>
    <%= f.text_field :name %><br>

    <%= f.label "Description:" %>
    <%= f.text_field :description %><br>

    <%= hidden_field_tag :authenticity_token, form_authenticity_token %>

    <%= f.submit %>
<% end %>

# app/views/mandalorians/new.html.erb

<h3>New Form</h3>
<%= render 'form' %>
<%= link_to 'Back', armors_path %> 

# app/views/mandalorians/edit.html.erb

<h3>Edit Form</h3>
<%= render 'form' %>
<%= link_to 'Show', @armor %>
<%= link_to 'Back', armors_path %>

Since both :new and :edit are almost identical, I created _form.html.erb where form_for codes reside. new.html.erb and edit.html.erb render files to retrieve codes from _form.html.erb. form_for automatically sets up the path where the form will be sent.

errors.full_messages is optional, but displaying validation errors in views has proved to enhance user experience. Being able to notify users of input errors creates stability in the database. It is most prudent for views to display errors to the user. When the form (either :new or :edit) is re-rendered, pre-filling forms with existing user inputs promotes better user experience. None of us wants the hassle of re-typing or re-filling pre-populated forms. form_for automatically pre-populates form reload with pre-existing values of @mandalorian data.

In the above example, the view renders an edit form and once reloaded, the model executes an error message that Name has already been taken from the Active Record validation, validates :name, uniqueness: true. form_for realizes that the current @mandalorian is not a new instance of the Mandalorian class.

I would hate to delete any of our bounty hunters, let's try to implement the delete request on our Armor model. HTML5 forms officially do not support delete and patch methods. We place the delete request in the armors_controller, and render the delete button on show.html.erb. Once deleted, the end user will be routed to armors index view.

# app/controllers/armors_controller.rb

def destroy 
    @armor = Armor.find(params[:id])
    @armor.destroy 
    redirect_to armors_path
end

# app/views/armors/show.html.erb 

<p>Name: <%= @armor.name %></p>
<p>Description: <%= @armor.description %></p>
<p>Mandalorian: <%= @armor.mandalorian.name %></p>

<%= button_to 'Delete', @armor, method: :delete %>

button_to is a better version of link_to when sending a delete request.

In the previous Rails console, we assured our object relationships work. Similar model associations can be implemented in the view files. Since each armor belongs_to a mandalorian, we should be able to call out @armor.mandalorian.name method. I repeat. Isn't Rails magic?!

This is The Way.
The Mandalorian

fentybit | GitHub | Twitter | LinkedIn

Forem: fentybit

CS50 & Note to Self

Table of Contents

Why CS50?

fentybit / cs50

C

Python

SQL

HTML, CSS, JavaScript

Flask

Note to Self

fentybit / NoteToSelf

To-Do application.

Note to Self

About

Project Files

365 Days of Code Journal

Table of Contents

100 Days of Code

The Sequel

Educational Materials

End of Story

⚡️ 30 Day Vanilla JS ⚡️

🥁 Day 1 JavaScript Drum Kit

⏰ Day 2 CSS + JS Clock

🎨 Day 3 Playing with CSS Variables and JS

🫀 Day 4 Array Cardio Day 1

🌁 Day 5 Flex Panel Gallery

⚡️ Day 6 AJAX Type Ahead

🏃🏻‍♀️ Day 7 Array Cardio Day 2

👩🏻‍🎨 Day 8 Fun with HTML5 Canvas

🛠 Day 9 Dev Tools Domination

✔️ Day 10 Hold Shift and Check Checkboxes

🎥 Day 11 Custom Video Player

⌨️ Day 12 Key Sequence Detection (KONAMI CODE)

⏬ Day 13 Slide In on Scroll

💬 Day 14 Object and Arrays - Reference vs. Copy

🌮 Day 15 LocalStorage and Event Delegation

🔥 Day 16 CSS Text Shadow Mouse Move Effect

🎸 Day 17 Sorting Band Names without Articles

⌛️ Day 18 Tally String Times with Reduce

📸 Day 19 Unreal Webcam Fun

🎤 Day 20 Native Speech Recognition

🧭 Day 21 Geolocation based Speedometer and Compass

🔗 Day 22 Follow Along Links

🗣 Day 23 Speech Synthesis

🗒 Day 24 Sticky Nav

🥍 Day 25 Event Capture, Propagation, Bubbling and Once

🪢 Day 26 Stripe Follow Along Dropdown

🥍 Day 27 Click and Drag to Scroll

🏎 Day 28 Video Speed Controller UI

⌚️ Day 29 Countdown Clock

🐰 Day 30 Whack A Mole Game

First-fiddle on TypeScript

Basic types

Arrays

Inference

Type error

Literal types

Tuples

Type unions

Nullish coalescing

Optional chaining

As

Storybook

Table of Contents

1. User Story and Model Associations

2. Rails API Back-End

3. Routes, Controllers and Serializers

fentybit / Storybook_backend

The Minimum Viable Product (MVP) of Storybook app is to allow the user to log events, places, moods and self-reflect from various points of views (calendar, map, photos).

Storybook

About

Features

API Database

4. React — Getting Started

5. Action → Reducer → New State

6. Nested Routes in React Router

7. Google Maps Platform APIs

8. Material-UI and Lessons Learned

5. `Action` → `Reducer` → `New State`

Update `config/database.yml`