DEV Community: user01010011

FS Blog #7: What I Learned From The FS Full Stack Web Dev Program

user01010011 — Wed, 30 Jun 2021 03:11:12 +0000

After a very intense two months, my spring-to-finish for the Flatiron School Full Stack Online Software Engineering Program is finally coming to an end. It feels surreal, as I have been working very intense and very long hours to finish the program before its legacy learning platform retires, in part to make up for the previous months where I did not devote as much time to the program as an online self-paced student. Although these past two months has been challenging, it feels amazing to be able to go through the amount of lessons, labs, projects, materials, study groups, and learning a ton along the way. As the program is ending, here are some of the things I have learned from the program:

Compared with before I started the program, where I only knew HTML, CSS, and some JavaScript, I now know Command Line, Git, Ruby, Sinatra, Rack, Rails, SQL, ActiveRecord, more HTML, more CSS, Rails, more JavaScript, React, Redux, etc. It's pretty incredible how the program helped me learn so much in such a short amount of time, and can actually use what I learn to build functional web applications. If you are new to programming or a beginner, I would highly recommend you join a bootcamp if you want to jumpstart on programming, and start building projects. I also learned the importance of your environment and tools. Setting up the right environment and installing the right tools is essential to programming. To me it is the single biggest barrier to entry to any one who wants to learn programming. I actually feel that your software/tech/app stack and your environment, and using the right ones and the right version of the right tool to use is more important than the coding, because the right tools can help you so much and save you so much time.

In addition to learning technical skills and concepts, I also learned many other things that are not only essential programming but also in general: 1) ask a lot of questions - be curious and ask questions, this is the best way to fully understand and learn something; 2) Google - the internet is an amazing place, you can find almost everything on anything, there are a ton of good resources, materials, articles, videos on every aspect of programming, it's a wealth of knowledge ; 3) use forums like Stackoverflow - chances are, any issues or bugs that you have, someone else had them too, or similar ones. Stackoverflow has a ton of great answers to questions and solutions to bugs and issues ranging from the most simple and common ones to very complex ones; 4) test-driven development - build your projects and products using test-driven development, because it set up targets and parameters for what your project can do, and measure your code according to it. And it might be counter initiative, but fail fast is the quickest way to build a project.

FS Blog #6: - My React/Redux Final Project

user01010011 — Tue, 29 Jun 2021 21:43:37 +0000

For my React/Redux final project, I'm building Job Searcher, a web application and social platform that let users find, like, and save job postings. Users will be able to create accounts, login and log out of their accounts, search, filter, like, and save job postings base on location, company, keywords, etc.

This project uses Rails API for the backend, and React, Redux, JavaScript, HTML and CSS for the frontend. Since this is the final project of the program, I will also be using things I have learned in previous lessons, labs, and projects as well. Hopefully the completed product will feel like an advance version of my previous projects.

As I have learned from building my previous projects, a good practice is before start building a project is to first think through the user story, and design the user experience, then map out the models, classes and relationships, and with entity and function flow charts, then design your app including the logic, function and features, libraries/tools/resources/gems/dependencies you might need, then start building.

The app's user story is someone who is looking for a tech job that is personalized to their skills and with their preferred location, company, and salary range.
The app's models are User, Job, and Skill. User has many skills, user has many jobs through skills, and to simplify: job belongs to skill, job belongs to user through skills, skill has many jobs, and skill belongs to user.
The app uses React, Redux, JavaScript, Rails API, Postgresql, etc. as its tech stack.

FS Blog #5: Social Poster - My JavaScript Project

user01010011 — Fri, 25 Jun 2021 21:48:36 +0000

For my JavaScript project, I'm building Social Poster, a web application and social platform that let users create, edit, and delete posts, as well as like and save posts. Users can create, edit/update, and view their posts, as well as view, and edit other user's posts. They would also be able to see all community posts and view all posts by category.

This project uses Rails API for the backend, and JavaScript for the frontend. This was a natural progression from the last Rails project, where we used Rails views/.erb files only for rendering. This feels even more like a real world application, where JavaScript is often used for building the frontend of a web application.

Before I started building the app, I first wrote out the user story and designed the model/class relationships: my app was simple, I had two models, Post and Category. The category has_many posts, and post belongs_to category. The category has attributes like category name and category description, and the post has attributes like title, content, media url, and category.

The Tech Behind Social Poster

After drawing out a flow chart for the app, I then start setting up the app environment and structure. As a part of the project requirement, I'm using Rails API for the app's backend, and JavaScript (and HTM & CSS) for the frontend.

Part 1: The Environment & Setup:

Rails API - This app uses the Rails API for the backend. To setup the app and generate the structure of the app, I used rails new commands:
- rails new js-social-poster-api —api - this command creates the project with rails API (not the full rails).
- rails g resource - this command generates the project file structure, including the controllers, models, migration files, views, etc.
Some of the Gems & Languages used:
- Ruby
- Rails
- JavaScript
- HTML
- CSS
- Debugger
- Sqlite3
- Puma
- Bootsnap
- Rack-cors
- Faker

Part 2: The Programming & Concepts:

Coming from Ruby, Sinatra, and Rails, diving into JavaScript felt very different. There were a lot of similarities between Ruby and JavaScript (or between programming languages in general), but there were a lot of differences as well. As a part of the project requirement, in addition to cover the project requirements, I tried to use as many concepts as I learned about JavaScript in the app, while still keeping the app as a very simple MVP.

Concepts I used:

AJAX: "asynchronous JavaScript and XML", it's the process used to make requests to the server and update the DOM without loading the web page. AJAX allows use to get data from multiple sources and allows us to pull in dynamic content.
JSON: "JavaScript Object Notation"(JSON) is a String that JavaScript knows how to turn into a object. Using JavaScript, we can access the JSON returned by the server and use it to update the DOM
ES6: "ECMAScript 6"(ES6), or ECMAScript 2015, was the 2nd major revision to JavaScript. Some of the most important new features of ES6: let, const, Arrow Functions, For/of, Classes, Promises, Symbol, Default Parameters, Function Rest Parameter, Array.find(), Array.findIndex(), new math methods, new number properties, new number methods, new global methods, Modules, etc.
CORS: "Cross-Origin Resource Sharing" (CORS) is designed to prevent scripts like fetch() from one origin accessing a resource from a different origin unless that resource specifically states that it expects to share. (By using the --api flag, the Gemfile was altered to include the rack-cors gem. The gem will be commented out intially and we need to uncomment the gem and run bundle install.)
fetch() - fetch() is like a mini browser in your browser, you tell fetch() to go to a URL by passing it an argument, and it makes a network request. You chain calls to fetch() with then(). Each then() call takes a callback function as its argument. Based on actions in the callback function, we can display or update content in the DOM.
Arrow function⇒ Arrow function is a compact alternative to a traditional function expression, but is limited and can't be used in all situations. It is a way to write functions in a very short way (using an arrow =>). It builds on the syntax of the function expression. (ex: let add = (parameter1, parameter2) => parameter1 + parameter2; let twoAdder = x => x+2) It lists the parameter, separated by comma, inside of (). If the arrow function has only one parameter, the () become optional around the parameter.

FS Blog #4: Skiller - My Rails Project

user01010011 — Sun, 20 Jun 2021 14:08:33 +0000

For my Rails project, I'm building Skiller, a web application that helps students to learn technical skills through relevant courses. Students can use Skiller to sign up/create user accounts, log in and log out of their accounts, including 3rd party authentication, add and edit/update skills they want to learn and/or have already learned, add and edit/update courses they are taking or have taken in order to gain those skills. They would also be able to filter courses for specific skills, search for skills and courses, and rank their courses by importance or progress. By using Skiller, students will be able to better track and manage their technical skills and courses.

This is a lot more complex and dynamic web application than my previous very simple Sinatra project Course Tracker, where the students can only manage their courses, in addition to the basic sign in, log in, log out, validations, etc. For the Rails project, there needs to be at least 3 models, with several relationships, including one has_many relationship, one belongs_to relationship, two has_many through relationships, and one many_to_many relationship. There was also requirements for 3rd party signup/login, user authentication, validations for attributes, ActiveRecord scope method using ActiveRecord Query methods, nested resources with RESTful URLs, displaying validate errors, etc.

Building this project took me much longer than the Sinatra project, and there were many more challenges and and bug fixes. But the project and the process of building it was exciting, as I felt it was getting closer and closer to a fully functional real world application, compared with my previous two projects. I also loved figuring things out and debugging the code, because the feedback was immediate: the web app was either working or not working after I made changes to the code, and I could instantly see and interact with it. As the developer and a beta "user", this was pretty amazing. :)

For the building the Rails app, I primarily used Rails, the Ruby on Rails framework, ActiveRecord, Sqlite3, Omniauth, Puma, HTML, CSS, Bycrpt, and Byebug.

FS Blog #3: Course Tracker - My Sinatra Project

user01010011 — Wed, 09 Jun 2021 07:27:51 +0000

For my Sinatra project, I'm building Course Tracker, a web application that helps students to manage and track the online courses they are taking. The idea is that the students can use Course Tracker to sign up/create user accounts, log in and log out of their accounts, and can add, edit, and delete the online courses they are taking to their Course Tracker account, including course name, course status, course url, etc. to better manage their online courses and their learning progress.

When users log in to their accounts, they will be able to view all of the online courses that they are tracking at any given time, they then can check each course's status, add new courses, edit or update existing course's name and status, delete courses they are no longer taking, and go to the course websites from their Course Tracker account or course dashboard.

This is a very simple MVP, built using the knowledge I have learned so far from the curriculum on Sinatra and other topics including ActiveRecord, HTML, CSS, etc. Even though it is a very bare-boned app, I still spend many hours building it, fixing environmental/technical issues, and debugging codes. However, I really enjoyed building it, and it was exciting because it is my first fully-functional web app, and it feels like I was tying together "frontend" and "backend" together for the first time, especially after the first CLI Data Gem project. This is only my second coding project, and there are so many features and improvements I would have liked to have (especially the styling and CSS!), but for now, this is a good start as a basic MVP project. :)

Photo Credit: David Rangel, Unsplash

For the project, I used Sinatra, ActiveRecord, Ruby & HTML, Pry, Corneal, and other Ruby Gems.

FS Blog #2: Tech Skills Bot - My CLI Data Gem Project

user01010011 — Fri, 28 May 2021 02:49:52 +0000

FS Blog #2: Tech Skills Bot - My CLI Data Gem Project

Photo Credit: Unsplash - Alex Knight

Tech Skills Bot

For my CLI Data Gem project, I'm building a Tech Skills Bot, Al (a smaller, newer upgraded version of Hal9000:)) to help students to plan their tech careers by learning more about the most in-demand tech skills.

The idea is that students would interact with Al via CLI (Command Line Interface), and at Al's prompt, could enter input to see a list of in-demand tech skills, and then if they want to learn more, enter input to learn more about the skills including average salary, growth potential, and opportunities at top tech companies.

Tech Skills Bot is a very simple MVP, as this is my very first project: first time using VS Code for an actual/live project, first time programming with Ruby (or any actual programming language for that matter), first time publishing "committing/pushing" to GitHub(!), ...etc. Even though the app is super simple, it was still a lot of work. I learned a lot through the process, and was able to use a lot of the concepts that I learned from lessons and labs I've done so far, which I detailed below. As I learn more through out the program, I would love to add more functionalities and features!

Building Tech Skills Bot:

To build my app using Ruby, I first setup my local environment, including setting up and connecting my local and remote repos, creating project file structure and files, and adding gems, dependencies, and the requirements in my app and files.
I then code a Scraper to get the data from a public website about the top in-demand tech skills and their detailed information, using a Ruby Gem Nokogiri to parse the HTML of the website with specific CSS Selectors, then code a Skill class to store these data, and finally, code a CLI that incorporates the Scraper and the Skill classes to sequence out the potential interactions with the student, including different methods for different input scenarios.
The Ruby gems I used for the app are: Nokogiri, Open-URI, and Pry.

Below is the details behind the tech in my building process:

The Tech Behind The Tech Skills Bot:

Part 1: The Environment (& app's main files):

bundler - handles the app's code dependencies & keeps all requirements in one place (in gemfile), keeps environment consistent by tracking and installing the exact gems & versions needed.
gems - the app's ****Ruby external code libraries, installed by running gem install (gem name).
config
- environment.rb - specifies load information including gems and database dependencies to configure load path/load order so that nothing breaks in the app.
bin
- run.rb - file that will start the app, requires the config/environment.rb file.
lib
- scraper.rb - where the app's Scraper class codes live.
- skill.rb - where the app's Skill class codes live.
- CLI.rb - where the app's CLI codes live.
- version.rb - keeps track of the version of the app.
gemfile - file inside of the app that lists all of the gems the app uses
gemfile.lock - keeps track of all of the app's path, gems, platforms, dependencies and their versions.
README - a brief documentation of the app, with a short description of the app, install instructions, contributor's guide, and a link to the license of the app's code
LICENSE - the app is under The MIT License (with free copyright and "AS IS" statements with warranty and liability waiver).

While setting up my file structure and files, here are some things I've learned:

**Version matters!:* the correct versions and the consistency of your Ruby and Ruby Gems and dependencies matter.*
**Load order matters!:* load gems, dependencies and requirements first before your codes.*
**require -* absolute path for the filename (in the directory from which the app is being run)*
**require_relative* - relative path to the file in which the require statement is called (relative to the file being run)*

Part 2: The Programming & Concepts:

General:
- HTML - "Hyper Text Markup Language", is the standard markup language for documents or contents to be displayed in a web browser. The app uses a scraper to parse the HTML data from the website.
- CSS - "Cascading Style Sheets" is language for the presentation or styling of web pages, with rules that define how browsers present HTML, customizing for the content's look and feel, including margins, colors, layout, etc. The app uses a scraper with the help of the CSS Selectors to select the relevant HTML data of the website.
  - CSS Selectors - used to select (or find) elements from the HTML that matches elements by name, type, attribute, etc., including element, id, class.
- CLI - "Command Line Interface" are programs that users can interact with entirely through a computer/system's terminal and shell. There is no graphics or visual interfaces and can only interact with the user through accepting ASCII entered into a prompt and communicate via ASCII output. The app only uses CLI for its user interface.
Ruby Essentials:
- Basic control flow - "if" statements - "if" statements (and its associated "else", "elsif" and "end" statements) are a type of control flows that tell the app what code to execute conditionally. They are one of the most common ways to enact control flow (along with "while" and "case" statements and "loops") - the codes that follow the "if" statement get evaluated, or read and enacted by the computer, and if the statement results in "true", then the codes through to the associated end statement will run, if the statement results in "false", then the computer goes to the "else" or "elsif" statement, and evaluate the codes follow those statements, and depends on the results of those statement are "true" or "false", the computer either runs the codes that follow those statements or is redirected to the next statements. The app uses "if" statements and "while" statement for the CLI's menu method, where student's inputs were made into "if" statements based on different scenarios, and the Bot's responses.
- Variables & variable scopes
  - Variables - variables stores information, and has a value, type (starts with a lowercase letter, variable with an uppercase letter is known as a constant and has different characteristics). Can be created with "=" (assignment operator)
    - Local variables - can only be accessed in a specific, local environment. A local variable that is defined inside one method can not be accessed by another method. (We can use instance variable to get around this limitation)
    - Instance variables - can be accessible in any instance method in a particular instance of a class. A variable that has an instance scope, or instance variable is responsible for holding information regarding and instance of a class and is accessible only to that instance of the class.
    - Class variables - A variable that has a class scope class variable
- Object instantiation: new and Initialize - All Ruby objects are bundles of data and logic, or attributes and behavior. A Ruby class can create new instances of an object in that class via the .new method, whether or not that class has an initialize method. However if we want each instance of the class to be created with certain attributes, there must be a defined initialized method. (An initialize method is called automatically whenever .new is used.) The initialize method instantiates an object and can be used to assign a new object and assign a new object with certain attributes upon it being called. The app uses the initialize method for the Skill class, where each of the new skill scraped from the website is instantiated with name and info, and saved into the Skill class.
- The meaning of the "self" - In Object-Oriented Programming, there is a concept of "self": when we create a class, each new instance of the class is considered to be an object, and the object is aware of itself and can refer to its methods as self.methods. In another word, the object can operate on itself and is aware of its attributes, behaviors, etc. The app uses the concept of self in its Scraper and Skill classes.
- Method Types - Class vs. Instance Methods:
  - Classe Methods - classes act as a factory for objects, capable of instantiating new instances. Class Methods are methods that live inside of the object class, with behaviors and functions that can be accessed by objects in that class. The app has three classes: Skills, Scraper, CLI, each with its own Class Methods for each to operate.
  - Instance Methods - instances are instances of behaviors or objects. Instance Methods are methods that belong to any instance of a class. The app uses both Class Methods and Instance Methods that creates instances, behaviors, functionalities for each class and class objects.
- Method Return Types - what methods return - the app uses both explicit return and implicit return for the methods uses
  - Explicit return - puts (short for "out"puts"tring") and print commands tell the program to display specific information explicitly;
    - puts adds a new line after executing, and print does not
  - Implicit return - Ruby is an implicit language, if there are no explicit return, the program will return the last code executed.
- Iterating Through Collections - .each with a block - .each with a block is a Ruby method that calls block with two arguments, the item and its index, for each item in enum, and given arguments are passed through to each(). the app's scraper uses ".each_with_index" to iterate through scraped data from the website to create new Skill objects with the skill names and skill info as attributes, and return each Skill object with an index number.
Gems:
- Pry - a Ruby Gem and a type of REPL (Read, Evaluate, Print, Loop) that is used for debugging the app (by calling binding.pry in the app's code, that line gets interpreted at runtime as the program is executed, and when the interpreter hits that line, the program freezes and the terminal of the program turns into a REPL in the middle of the program for checking if the codes are working)
- Nokogiri - a Ruby Gem that the app uses to parse and read the website's HTML in Ruby.
- Open URI - a Ruby module that the app uses to programmatically make HTTP requests of the website.

And that's my Tech Skills Bot app in a nutshell! Hope this helps anyone who is interested in building a CLI app. I really enjoyed building my first app and learning every step along the way. I look forward to learning more so I can add more to the app and/or build more fun and complex apps!

Also, aside from the project, It really amazes me that anyone can open up any webpage and see all of their HTML and CSS data. The internet is a pretty amazing place! :)

FS Blog #1: A Beginner's Guide to Programming, Step 1: Command Lines

user01010011 — Mon, 24 May 2021 06:12:37 +0000

For my blogs for Flatiron School's Full Stack Web Development Program, I want to write about some of the things I have learned in the program. The goal of this blog and the follow blogs as a blog series is to track my learning progress through writing about the technical knowledge I am learning from the program, and projects that I am working on using the technical knowledge I have learned. Hopefully this will also help other beginner programers or people who are interested in learning more about programming and web development.

Learning programming, as with learning any new languages or skills, the best way to do it is to immerse yourself fully in the new world and get familiar with all of its environments and components. However, as a beginner with little previous background, diving into the world of programming can be overwhelming.

"千里之行，始于足下" - 老子。

“A journey of a thousand miles begins with a single step." - Laozi.

Thanks to the Chinese sage philosopher Laozi (a.k.a Lao Tzu), whose words have inspired and continue to inspire people all over the world still thousands years later. “A journey of a thousand miles begins with a single step." The meaning behind these simple words and seemingly obvious statement is extremely powerful. Yet to me, a more accurate and more powerful translation is: "A journey of a thousand Li (Chinese miles) starts beneath one's feet." They both convey the same message, but the emphasis of the latter is not on the step, but on the awareness: the path is already beneath your feet. You are already on your path. You just might not realize it.

People often think that they must "take" the first "step" toward their journey, without realizing that the path has already been and has always been beneath their feet. Don't get me wrong, the "take" and "step" are very important too, but to me, the awareness of the path already beneath your feet is the real game changer, and what generates momentum for you and send you off on your journey.

This is the case for me when I learned about Command Lines.

Command Lines

As author Neal Stephenson famously put it, “In the Beginning… Was the Command Line.”

What are Command Lines? Command Lines are texts-based (keyboard characters) or ASCII instructions you can send to your computer through its built-in Terminal, and get responses back from your computer. If you are using any modern computer, it already has a built-in Terminal and Command Line functions, whether you have a Mac, Windows, etc. (If you are using a Mac, when you open you desktop/iMac or laptop/Macbook, you can find your Terminal in your Applications folder, it is a black rounded square icon with a >_ on the left corner.)

Using Command Lines, you can ask your computer to list all of its folders and files, make new folders and files, delete folders and files, open and close apps, perform certain tasks... etc. How amazing is that?! You can already instruct a computer to do things without learning computer programming or software development - essentially, "program" a computer by writing "codes"!

When I learned about Command Lines, it felt as if though I have always had the ability to program my computer, but just didn't realize it. The path has always been beneath me. I know, I know - knowing how to use Command Lines is still far away from actual computer programming, software development, and making amazing software or apps, and the "path" beneath me was actually paved brick by brick by the hard work of those legends who walked before me, who built the computers, wrote the first algorithms, and programmed the source codes that made it possible to communicate with the modern computer via Command Lines, and sure, Command Lines have its own vocabulary that you still need to learn (it doesn't just take ANY text), but once I am aware that "programming" a computer has always been there and so easily accessible, it made learning programming that much more exciting for me.

An experienced programer (or anyone else) might not think Command Lines are a big deal, but for me, they were a huge deal. When I first used Command Lines with my computer, it gave me WarGame(1983) and Hal9000(2001:Space Odyssey) vibes. And for a moment, I kind of get the guy in Her(2013). (I quickly realized the limitations of Command Lines and computers in general ... but still excited for the possibilities within the limits though! And hopefully one day I can help to expand the limits.)

If you want to learn more about Command Lines, there is no shortage of content written about them - you can find a lot of posts, articles, books, and resources on the internet, but I wish there is a list of clear, concise, short, and sweet one-liners or phrases that explained what all of the most commonly used Command Line commands did without all of the details, examples, and backgrounds. I couldn't find a list that I liked (so many of them have ones that I don't use and don't see myself using in the future), so I put together my own short list below, as a start. This is only a working list. And again, there are many, many more Command Line commands our there, I've only listed the ones used most frequently by beginner programmers:

mkdir - make a new directory
touch (filename) - make a new file/folder inside a directory
cd . or cd ./ - go to current directory/folder ("cd" stands for change directory, and "." indicates current folder/directory)
cd .. or cd ../ - go to previous directory/go back a directory
pwd - path to working folder/directory
tab - autocomplete typing
ls - list the file(s) inside a folder/directory
ls - lah - list of everything in a folder/directory
mv - move file/folder
rm - deletes file/folder
Up Arrow - the last command

Boom. With these Command Lines, you can now have simple communications with your computer, and "program" it with simple "codes". You are welcome. :)

Remember, even if you don't know how to program, if you are reading this post, you are already well on your path to learning programming. :)

Thank you for reading.