DEV Community: Joe Sembler

Authentication Spec (Fundamentals of TDD)

Joe Sembler — Thu, 17 Feb 2022 20:16:07 +0000

Test Driven Development

Test Driven Development, or TDD, is a process of development where the developer first creates test cases for the software, meaning what the developer wants the software to do, and then developing this software by repeatedly testing the software against the predetermined test cases. In most cases, developers do not use TDD; most developers create the software first and then test their software.

Inspiration
TDD can be a very beneficial way of developing because the developer must first write very explicitly what he or she wants the computer to do and then simply follow the error messages to develop the software. In a way, it is like the developer first tells the computer what he or she wants it to do, then the computer tells the developer exactly the steps to developing that software. It can definitely be a nice guide if you do not know exactly the steps you must complete in order to develop something.

Authentication Spec

For my Phase 4 project at Flatiron I have to build a webpage with a React frontend and a Rails backend; the page must feature user authentication using cookies and sessions. Below I created an authentication spec in order to develop the basic login of the webpage.

Capybara
First I installed the capybara gem and added it to my Gemfile. Next you want to add require 'capybara/rails' below require 'rspec/rails' in your rails_helper.sb file. Next, you have to add capybara/rspec in your spec_helper.sb file.

authentication_spec.rb
The next step is to create a file in your-app/spec/features called authentication_spec.rb. Let's take a look inside this file:

require 'rails_helper'

describe "the signin process", type: :feature do
   let!(:user) do
      User.create(username: 'username', password: 'password')
    end

    it "signs me in" do
      visit '/'
      within("#log_in_form") do
        fill_in 'username', with: user.username
        fill_in 'Password', with: user.password
      end
      click_button 'Sign in'
      expect(page).to have_content 'Welcome'
    end
  end

Woah! This is a lot to take in so let's break it down:

describe "the signin process", type: :feature do

In the line of code above we are describing what we want to test. In this case we are trying to make authentication work, so we are going to test the sign-in process of our application.

let!(:user) do User.create(username: 'username', password: 'password') end

Here we use the bang operator (!) on let in order to create a user instance.

it "signs me in" do visit '/' within("#log_in_form") do fill_in 'username', with: user.username fill_in 'Password', with: user.password end

In the code block above we are telling the computer explicitly what we want the test to do. The test is going to visit our root directory and within that root directory it is going to look for an HTML element with an ID of 'log_in_form'. Within this form it is going to fill in the part of the form called 'username' with our username of our user instance we created above, along with the password. Finally it is going to:
click_button 'Sign In'

The last part of our code is very important: it is what the computer should expect to see in order to know that the test has passed! In our case we should see some kind of greeting when we are logged in. We can express this to the computer by saying:
expect(page).to have_content 'Welcome'

Putting it all together
Ok so now we have our test in place - let's run it! Go to the console and type bundle exec run your-app/spec/features/authentication_spec.rb. Your test should be failing! Not only should it be failing but you should also get an error message saying what specifically failed. Now you want to repeatedly run this test, debugging each and every error message until the test passes. Then you will know that your software is doing exactly as you want it to and you never even had to leave VSCode!

The Fundamentals of Database Structure

Joe Sembler — Tue, 25 Jan 2022 06:09:28 +0000

Where to begin?

If you're wondering where to begin when creating a database just ask yourself: what is the purpose of this database? What data do you want to store in your database? How many tables will you need to store your data? What type of data will each table include? How will each table interact with one another?

Purpose.
First determine what you want to accomplish with your database, i.e. track the classes of students

Data.
In order to track the classes of students you will need to not only store the classes of each student, but also the name of each student. The student itself may be a table that includes information such as the student's name, date of birth, GPA, etc. You may also want to include information about the class such as: the name of the class, the instructor, time and dates the class meet, etc.

Data Types.
Just like when programming in JavaScript, or any other programming language, there are different data types to consider. Some common data types are numbers, strings and boolean.
Pictured below is how our tables may look with their different data and data types. You will notice each table has its own id. This is known as the primary key and is what allows our program to distinguish between each item in each table.

Table Organization.
Table organization is key. How the tables interact with one another must follow the logic of how you want your database to be organized. This sounds trivial but can be tricky.
For example, a student has many classes but a class also has many students.

This means that we must have a join table, or a table that contains common fields from two or more tables. In our case it will be two fields: classes and students. These fields are known as foreign keys. Our join table will be called grades and will store all of the grades for each student and each class.

A student has many grades but each grade belongs to a student.

A class has many grades whiles grades belong to a class.

It is important to note that students has many classes through grades and vice versa - classes has many students through grades.

Conclusion

This is just the beginning of database structure, however, these very building blocks are what are used to create the most complicated databases on the internet.

Positioning Elements in CSS

Joe Sembler — Wed, 05 Jan 2022 07:18:00 +0000

As a beginner to web development one of the things I found that I struggled to learn how to do was styling my web pages, namely positioning elements on the page. I found this to be particularly difficult due to the number of variables that determine the position of an element.

Position
For starters there is the position attribute. This attribute determines how an element will be rendered relative to the entire page. By default position is static, which means the element is positioned according to the normal flow of the document. We can change position to be relative,absolute,fixed or sticky.

relative: the element is positioned according to the normal flow of the document and offset according to top, left,bottom and right.
absolute: the element is taken out of the normal document flow and no space is created for the element. The element is still positioned relative to its parent.
fixed: not only is the element taken out of the document flow and no space is created for the element, the element is positioned relative to the page, not the parent. The element also does not move on scroll.
sticky: similar to fixed, though it differs in that the element will move on a scroll, but it will get stuck at the top of the screen.

Web Dev Simplified made a really nice YouTube video that explains the position attribute very well and it is just under 10 minutes long!

Display
Ok so now that we understand position we should probably take a look at display. This attribute is very complicated and could use multiple articles to explain it fully! For beginner's sake the most three important keywords to look at are:

block: the element generates a block element box and creates line breaks before and after the element in the normal flow. This means that your element(s) will be on their own line.
inline: the element does not generate a line break before or after itself, therefore the element(s) will be on the same line together.
inline-block: a mix of inline and block (exactly as one would expect), the element generates a block element box much like the block keyword, though unlike block, inline-block does not create line breaks before or after the element so that the element(s) are displayed neatly in boxes, all on the same line.

Margin vs. Padding
Additionally relevant to positioning elements in CSS is understanding the differences between margin and padding. margin is the spacing between the element and the edge of the page. While, padding refers to the spacing between the border your element and the content your element contains.

Conclusion
After learning these fundamentals of CSS I felt comfortable positioning any element in my document anywhere on the page. To be clear these will fundamentals alone will not make you an expert, but they will definitely help you achieve a nice looking web page!