DEV Community: Jessica Triana

SQL Basics - Manage Your Data

Jessica Triana — Thu, 11 Jun 2020 21:39:44 +0000

It's good to brush up on different languages and technologies as you start your coding journey. There are SO many overlapping aspects to programming that can help you build better projects, maybe even a bit faster than your last.

When I built my first Rails app I knew that I was writing SQL statements to create my tables and check my schema, but I never gave SQL it's own space in my brain.

Here's a quick overview of some basic SQL commands to manipulate your database.

In this example, we're creating a small table called "Dogs".

1) Create the table called dogs with column titles: id, first_name, breed. We are making the id an integer and setting it as the Primary Key for each row in this table. We are saying that the first_name of each dog must be unique text and the breed cannot be empty.

CREATE TABLE dogs (id INTEGER PRIMARY KEY, first_name TEXT UNIQUE, breed TEXT NOT NULL);

2) Insert 3 rows into the dogs table to give us some data to work with.

INSERT INTO dogs (id, first_name, breed) VALUES (1, 'Shylah', 'Cockapoo'), (2, 'Mitsi', 'Chow'), (3, 'Shadow', 'Husky');

3) Any time you want to see the current data in the dogs table, use the "Select All" command.

SELECT * FROM dogs;

4) Add a column called age to the end of the dogs table that takes an integer for the value.

ALTER TABLE dogs ADD age INTEGER;
SELECT * FROM dogs;

5) Add a column called last_name to the end of the dogs table that takes a text value. If no text is entered, 'NOT APPLICABLE' is the default value.

ALTER TABLE dogs ADD last_name TEXT DEFAULT 'NOT APPLICABLE';
SELECT * FROM dogs;

6) Let's add an age value to the second dog, Mitsi.

UPDATE dogs SET age = 5 WHERE id = 2;
SELECT * FROM dogs;

7) Add another column called trained that will take a boolean value. SQL accepts 1 for TRUE, 0 for FALSE, and NULL for an empty value.

ALTER TABLE dogs ADD trained BIT;
SELECT * FROM dogs;

8) Let's say that the first dog, Shylah, was trained.

UPDATE dogs SET trained = 1 WHERE id = 1;
SELECT * FROM dogs;

9) Let's delete the record of the dog that doesn't have any value in the age column, which would be the dog Shadow.

DELETE FROM dogs WHERE age IS NULL;
SELECT * FROM dogs;

This was a quick overview of some of the most-used SQL statements. Understanding these statements helps you to understand your data, update the values and debug your programs.

To learn more, take the free 7-hour "Learn SQL" course on www.codecademy.com

CSS in React - A simple Homepage

Jessica Triana — Wed, 06 May 2020 21:00:20 +0000

Of all the things we do to build an app and utilize our creativity, I think styling the CSS is my personal favorite. I love the instant gratification of changing the visual aspect of the page with only a few keystrokes.

Here is a BASIC style guide to create the page above:

1) Add a background image

Be sure to choose a high definition image that is large enough to fill the screen without blurring. You want to maintain the sharpness of the image on your page. I typically look for images that are at least 1600 x 900.

Save the image to your "public" folder within your React app with a simple name that describes it, like "glacierbackground.jpg"

In the component where you want the background image to render, create a div with a class name that you can refer to for CSS styling.

In your App.css file, refer to that class name for all of the styling details related to that background.

I used the following code in my app to set and style the background image. I made sure that it was the only image on the page and would be centered and fixed so that the page would not scroll.

2) Add a Nav Bar

Create a component for your Nav Bar so that you can utilize it throughout your app. A Nav Bar can be as simple as a list of links.

Now you can style the Nav Bar in App.css:

3) Add a "Welcome Sign"

This is a simple design for a home page, but feel free to get creative here! You may have noticed this line in the ExampleComponent above. This is how I simply render the words "Hello World" onto the page:

Lastly, style the words in App.css to make them big, bold and centered:

This was a simple tutorial for a basic home page and nav bar. For more information and detailed CSS tutorials, visit w3schools.com/css

Build beautiful React Components from NPM Packages in minutes

Jessica Triana — Mon, 04 May 2020 20:46:46 +0000

Learning JavaScript and React within a few weeks of each other was challenging, but I was able to accelerate the speed of my project builds when I discovered free npm packages. The company behind Node package manager has an entire website dedicated to open source components that are easily integrated with React.

When you find a package to use, simply "npm install" it then include the import at the top of your component file to begin.

Here are 5 packages that helped me build my project with ease:

1) Moment - "react-moment"

Moment made gave me a simple way to parse dates from an API into the format that I wanted to display to the user. There are multiple options for props and filters depending on your needs.

API JSON date: "2020–08–10"
User view: Aug 10, 2020

2) Loader - "react-loader-spinner"

Loader gave my user something simple but interesting to look at for a few seconds while they waited for the API fetch to complete. You can customize the look and duration of the loader component to fit your style.

3) ReactCalendar - "react-calendar"

The calendar was a nice addition as a clean and styled way to present dates to my user with the capability of incorporating date selection. There are many available props to create an interactive calendar.

4) Map, GoogleApiWrapper, Marker - "google-maps-react"

This one requires an extra step because you'll need to create an account for a Google API key, but it only took a few minutes. Once you're in you can begin customizing the the the size and zoom of the map along with any markers for specific places.

5) YouTube - "@u-wave/react-youtube"

Pretty straight forward. If you're looking for a simple way to embed YouTube videos this is a great way to start. It offers lots of display options and player controls.

For more npm packages, visit npmjs.com.

Keyboard Shortcuts: React in VS Code

Jessica Triana — Sun, 19 Apr 2020 16:59:05 +0000

Honestly, much of what I've learned about programming in general seems like magic. I mean, how many times have you watched a code along video and seen the speaker make something happen instantly without ever explaining how they did it?

Often, it's simply a keyboard shortcut they've become so accustomed to using it doesn't even cross their mind to take a moment to explain it. While in reality, this is some of the most useful information to share during a working example!

Here are a few useful shortcuts:

1) option + up or down arrow
(windows: shift + up or down arrow)
Allows you to move a line of code up or down the page

2) command + /
(windows: control + / )
Comments out highlighted code

3) command + option + j
(windows: control + shift + j)
Opens the Chrome DevTools console

4) option + shift + F
(windows: alt + shift + F)
Instantly formats your code

This is the fastest way to perfectly indent your code and break out long lines into multiple short phrases.

5) rcc + tab
(Provided by the JS JSX Snippets Extension in VS Code)
Creates a React Class Component based on the file name

A quick and easy way to to build a component from scratch without logging your train of thought.

6) (hold down) option + multiple clicks
(windows: alt + multiple clicks)
Creates multiple cursors

Useful when you need to edit the same word in many places on a page.

Yes, it is important to learn syntax and naming conventions, but once you've got it down you'll start to prioritize speed over practicing your typing skills.

For more keyboard shortcuts, visit the VS Code Docs: https://code.visualstudio.com/docs/getstarted/tips-and-tricks

Passing Private Params to an Update Method in a Controller (Rails)

Jessica Triana — Fri, 06 Mar 2020 16:03:57 +0000

In this post, I want to take a moment to dissect a block of code that I found challenging while working on my first Ruby on Rails project.

In our Bachelor/Bachelorette web app, a user can update an existing event by adding activities and other users to it.

For example, a Bachelorette named Amy can select “Amy’s Bachelorette Party” and edit it to include activities like Brunch, a day on Lake Travis, Barhopping, etc. Amy can also select each of her friends from a dropdown menu and add them to “Amy’s Bachelorette Party”.

Let’s pretend that Amy wants to update her Bachelorette Party (event) to include Brunch (activity) and a friend Kelly (user)

Our Models have these relationships:

Our Events Controller (simplified) has this Update method with this private method:

Here is a line-by-line explanation of the logic in the Update method:

Find the event (Amy’s Bachelorette Party) in the database by the event’s assigned ID #
Find the activity to add (Brunch) from a dropdown menu within the “Update Event” form
Find the user to add (Kelly) from a dropdown menu within the “Update Event” form
If the event is assigned a valid activity and user, save these updates to the database UNLESS they are already saved (to prevent duplicates)
If the event is successfully updated, redirect the user to a page that shows them their newly updated event with all of the event details
If the event is not successfully updated(perhaps the user forgot to complete a field), then show them the original “Update Event” form (so they can try again)

The private method “event_params” dictates that, if a user is creating or updating an event, they will have access to activities and users in the database. This allows them to assign activities and users to events.

Takeaway:
After completing this project, I learned that this code could be refactored further to include checkboxes instead of dropdown menus. This would allow a user to add multiple activities and users to an event, instead of just one at a time through the dropdown menu.

Learn more about Strong Params here

Spokesmodel turned Web Developer : A journey that starts with Flatiron School

Jessica Triana — Fri, 06 Mar 2020 15:39:31 +0000

…wait what?

I’m right there with you… still trying to wrap my head around my massive lifestyle change.

October 2019 — I just landed home in Austin after working a Ride & Drive Event at Tyler Perry Studios in Atlanta. I was a Spokesmodel for a Luxury Automotive Brand. I traveled multiple times each month to cities across the US; New York, San Francisco, Chicago, Las Vegas, Fort Lauderdale… you name it, we probably had events there.

Despite loving that job and the career that I’d built over the last 7 years, I wanted to take on a new challenge.

This was a familiar pattern in my life. I got my MBA at 23 because I wanted to see if I could. I worked for a Fortune 500 financial firm for a while, eventually taking a risk and switching careers to work for myself doing something I enjoyed. After about 4 years of independent contracts with various Experiential Marketing agencies, I landed a recurring contract as a Spokesmodel in the Automotive Industry. That was the role I left to take on my latest risk: learning Full Stack Web Development.

When I was researching the skills I needed to make a career change into the Tech world, I had my eye on UX/UI because I thought my Experiential Marketing skills would easily translate. It made sense! But it goes against my, ahem “fluctuating” pattern of decision-making…

Enter: Flatiron School
It felt like I’d heard at least 50 radio ads for Flatiron School while I was home in Austin. Eventually, I did a quick Google search and learned that Flatiron is one of the highest rated bootcamps on Course Report for both UX/UI AND Software Development. This seemed like a big deal because Course Report is to bootcamps what the Princeton Review is to universities.

I clicked every.single.link on www.flatironschool.com to learn as much as I could. Somehow, in a matter of days, I’d gone from exploring the UX/UI curriculum to signing up for the free Coding Bootcamp Prep work. Not the track I was expecting, but I went with it.

The Learn.co curriculum was challenging, filled with current pop-culture, and remarkably rewarding. I also felt connected to the community immediately thanks to the sidebar that shows you the names of other students and the lessons they complete in real-time. It was great knowing that hundreds of people were working on the same labs and I wasn’t alone.

Slowly, I became obsessed with working on labs in my free time. We’d be in a fun city and my coworkers would invite me out, but I would decline and say I really needed to work on my labs. This was when I realized I need to jump in head first and see how far I can go with this coding thing…

January 2020 — My last Auto Show in Houston was bittersweet.

It never feels right to leave a good thing and jump into the abyss. But now, 5 weeks into the Software Engineering Immersive program at Flatiron, I feel solid about my decision.

If you told me, this time last year, that I will:

Understand the fundamentals of OOP, learn to code in Ruby, and work with Github…
Work with a classmate to build a CLI app that pulls data from an API and allows a user to manipulate it…
Build a Rails app from scratch that stores data in a DB, then present it to my class…

Honestly, I would have laughed. But now, I feel grateful for my progress in just 5 short weeks and excited to see what the next 10 weeks will teach me.

Take a look at the current Flatiron School courses: www.flatironschool.com

Using Case Statements

Jessica Triana — Fri, 14 Feb 2020 17:58:24 +0000

As a true beginner, every line of code is a learning opportunity.

This week, I paired with another student and successfully completed our first-ever CLI program as part of our curriculum at Flatiron School. We implemented many of the skills that we learned in just 2 weeks of the program including: OOP, Ruby, SQL and ActiveRecord.

Just when I thought I had leveled up and written the perfect block of code in our “Main Menu”, my teammate slacked me with a question. He asked if I considered using a case statement in place of my many “If…else…” lines of code. Honestly, this never crossed my mind. I was familiar with the terminology but didn’t realize it would be much easier and “cleaner” to refractor this block of code.

In short: A case statement starts out with an optional condition accompanied with a number of “when” clauses. The first “when” clause to evaluate to true is executed.

A simple case statement example:

In the Main Menu of our CLI program, each "when" clause executes a method that helps the user navigate the program:

The user only sees the following text:

Typically, case statements are a better choice over "If...else..." conditional statements when you have 3 or more conditions to evaluate.

You can also write a case statement with multiple "when" clauses, separated by commas:

Personally, this was a short but valuable lesson in refactoring code that I was able to implement in multiple parts of our program! There are many creative uses of case statements beyond these examples.

Visit www.ruby-doc.org to learn more.