DEV Community: lizrhodesss

Material UI vs Semantic UI vs Styled Components

lizrhodesss — Mon, 31 Oct 2022 17:47:39 +0000

This is my final blog post as a Flatiron school student, it won't be my last blog though. I hear all over how blogging is a good thing, so I plan on sticking with it, plus its kinda fun and super helpful for me to organize my thoughts on the topic I just binged.This post is fitting to be my last as a bootcamp student, probably a bit rushed and crammed in during a crazy project week. And to stay on that sort of theme I'm going to be talking about some of the options around to style your projects. In my cohort it seemed to be a common thing that we would all have big dreams and high hopes about having time to make my our apps look exactly how we invision, then we get into it and we generally had to put styling and UI on the back burner in order to ensure all the functionality we could dream up.

From the start of bootcamp I had been thinking about what I would possibly make for my capstone project, I decided to make something to try to help my grandmother with the animal rescue she runs. The project takes place during the final 3 weeks of the program, and I thought I would be able to have all of week 3 for styling...lol; I really wanted to make this LOOK great for her as well as function well. I ended up with about 24 hours. After panicking I decided to dive right into using Material UI, I used it for a simple table, and everything broke. So, I switched gears to Semantic ui React, one of my cohort mates was having good luck with it. I ended up getting the table to work. I wish I could tell you what was breaking things, but it was something infuriating like a curly brace in the wrong spot. Anyway here's a little information on a few of the things I used, considered using or want to dig into a bit more.

Semantic UI React- A frontend framework used for designing and theming. I see a lot of people comparing this to bootstrap, I opted to not look into bootstrap, simply because other options were more strongly recommended. I found that Semantic was really easy to begin to implement. The installation to use their theming options is different from the basic start up and was giving me issues, so this is something I want to get sorted out so I can really dive in. I loved how easy this framework was to pick up and made some impactful changes very quickly which is exactly what I needed. I had a card style layout and forms looking more intentional and legible for the user within an hour or so of picking it up. This framework uses a grid layout that was much easier to implement and work with than classic CSS, I only had to fight with centering a div for a min before I had a better grasp on it. Semantic ui React is a great place to start to get forms, tables, layout and buttons into your project quickly, you import components right where you need them and you've got the ball rolling, and your page is looking less like it was made in the early 90's and more intuitive to use. Something to consider that was a brief gotcha for me was with Grid, you want to use that in the closest parent component so you can render the child component on the grid that's passed down. Another note for Semantic UI React grids is that it is based on a 16 column layout versus the 12 column for many other styling and UI options.
Here is some Semantic UI React used to make a form.

Material UI- is another option for styling frameworks. Oh boy, I was so stoked to get into this but I was a little worried about having the time to get a handle on it. From what I can see Material Ui is a little more widely used and better maintained than Semantic. I found that both options had pretty solid documentation. Material UI also allows you to import the components you need to use right where you need them. As I was just beginning to use Material UI then switched to another option, my experience with it is limited. But I was getting rolling with a custom theme and had a semi styled simple table working. I am going to drop a youtube series that made me want to get lost in styling the hell out of everything, as well as a resource for planning out a custom theme. This is something I plan on getting familiar with when I start my next project. An example of the table i used with Material UI-

Styled Components is another popular choice but rather than being a framework its defined as Automatic Critical CSS: keeping track of which components are rendered on a page and automatically injects the styles there, this means the user has to load far less code since it's only going to go with what's actually being rendered. Styled Components was about to make its way into this same project, but I thought using three different options would be a little wild, and I wasn't trying to break something else late the night before I was due to present. I think this is another way I will continue to work on the styling and user experience for my grandmother's rescue app and my next project. This seems like a nice way to compliment the more UI focused aspects of Semantic and Material, with a more up to date way to use CSS.

What I loved is that I was able to pick up the basics for these frameworks and quickly implement some things. I also loved that there were no issues in using multiple options together which I think is great seeing as there are subtle differences in the options available for certain things like buttons and forms. I encourage you to try all three out in your next project and see what works, I would love to hear what other beginners used and the thoughts around it. I had a hard time finding a sort of review of these to compare what they could actually do. (the docs for Material UI and Semantic UI React were an easy place to start)

Material UI, this guys covers so much stuff, found it super helpful.

Material Ui theme generator

the not so scary auth- cookies and tokens

lizrhodesss — Tue, 11 Oct 2022 21:30:12 +0000

What the hell is “Auth” and why does everyone make it sound so scary and complex? There is definitely a lot to it but it doesn't have to make you shake in your boots. In our world, it applies to at least two terms; which are often used interchangeably but they are different things that serve specific purposes. There are also several ways to use them both; and pros and cons to each. Seeing as I'm pretty new to learning about this topic, I'm going to focus on it being an overview. Mostly, because this seems to be a topic that you can really go down the rabbit-hole with.

First and foremost, let's discuss what the word “auth” covers. Authentication happens first; this is the login part of things, verifying that you are who you say you are. It is done several ways, the standard username and password, captcha tests and two factor authentication, or even biometric authentication.

After a user has been authenticated they can move on to authorization. When a user is authorized it allows them access to certain pieces of protected data or features of your app. An IRL example would be a subscription service, one I use all the time is the NewYorkTimes cooking app, or a subscription to a blog host like medium; you get to see a certain amount of things before you’re logged in, maybe you can even see a certain number of posts per month, or a specific promoted recipe. But at a certain point you have to show some credentials before you can go deeper into the castle, some users may only be able to see and read parts of your app, while others may have access to edit, create or delete their own content and then you have an even more select group of users that has access to all that and more. Authorization is where I start to feel a bit like Alice, about to drop into a deep rabbit hole.

So from what I can tell so far, authorization falls into one of two varieties, cookie based, or token based; I say as far as I can tell, because like I said there seems to be a lot of change and specific ideology around this.

Let’s talk a little about cookies authorization to start. Cookies work with a web browser, so it’s not the best option for authorizing users on mobile devices. It is also stateful, so the authentication records should be stored in both the front and back end; the browser and server can essentially exchange validations as new protected data is exchanged. It starts with the browser sending the server the user's credentials, username and password for example. The server checks to see if you are legit. If you check out, the server then sends a cookie, or small piece of data proving that you are who you say you are, this piece of data is sent back to the browser with a users session id. A session is basically just the time the user is logged in. The browser then can make requests that only an authorized user has access to, like unlimited recipe views. The browser sends that request to the server with the cookie as a part of the HTTP request. The server will then take the cookie that the browser sent with the request and make sure it matches up to the session id, if it does the browser receives the requested data.

Now lets explore token based authorization, it can be used in mobile apps, or web browsers and there are still some similarities and overlap in how authorization is done. The process starts in a similar way, a user provides credentials and if they are valid then a signed token is sent back to the browser. The server creates and validates tokens but does not store anything about them, a widely used standard for token based authorization is JWT, or JSON WebToken. Once a token is provided it needs to be stored somewhere on the client-side,(as opposed to cookies, which are stored on both the client-side and server-side) some common places in the client-side would be in local storage, or in session storage, or it can even be stored in a cookie. Once it is stored client-side, it is sent with every request to the server. The token based approach is stateless, so it doesn’t save any info about the user or a user session in the server or database.

This is how I started to understand a broad overview of what ‘auth’ is. I figured out it's not that scary, and why it's important, as well as some of the options for how to use it. And most importantly, I have learned that there is so much more that I can learn about, like OAuth, OpenId Connect, and Firebase Authentication.

I found a lot of really great blogs that helped me piece this understanding together, heres some links. and the podcast Code Newbie S13:E3 was what really got my interest piqued.
Intro to Authentication & Authorization
Beginners Guide to Authentication Basics
Web Authentication: Cookies vs. Tokens

Getting started with ActiveRecord

lizrhodesss — Fri, 16 Sep 2022 16:44:22 +0000

I have been spending the last 3 weeks learning about backend development using Ruby, this has been a strange journey because I honestly thought backend development would be the most boring thing ever, databases all day? I was wrong.

We started off learning the basics about Ruby, which really is a delight to code in. However, I didn't realize how cool backend development could be until we started learning about ORM's and more specifically, ActiveRecord. I didn't really understand what an ORM was or why it would make my life easier, so, an ORM- is an Object_relational mapper. Really, It just provides different ways to convert data from one type system to another by using the language you are currently working with; then you can create queries to the database. This dramatically cuts down on the code that is required to be written.
Basically, this just means we were given a Ruby gem that can make our lives easier and the code that we write more DRY and concise. Not to mention all the great built in methods we get with ActiveRecord, which I'll touch on later. But, for now, here are some steps to get you started using ActiveRecord.

I start by drawing out what I want my tables to look like, what are the attributes? How are the tables related? What kind of foreign keys do I need to associate my tables? ActiveRecord associations could be an entire blog post of its own, so I strongly encourage that you dig into that as well. Once I have an idea of what I want those tables to look like I can create a migration, by using ActiveRecord; I am giving it everything I want to be included in that table. A migration is like a blueprint for what you want your data to look like. The command you would need to use to start this process is
rake db:create_migration NAME=create_tables

*As a very important side note, naming conventions are extremely important when using ActiveRecord. Above, "tables" would be the name of your table, its important that things are CAPITALIZED and made plural in this syntax *

After running this command, you will notice a couple new files that are created for you, these are your migrations files. It is super important that you don't change or rename these files, all the numbers at the beginning are a timestamp, and they are a kind of version control so you can keep your blue prints up to date and organized.

Next, I write what I want my blue prints to look like in those new migration files, remember, each migration file is a blue print to make your database table.

class CreateFriends < ActiveRecord::Migration[6.1]
   def change
     create_table :friends do |t|
      t.string :name
      t.string :e_mail
      t.integer :age
       end
     end
  end

name	email	age
Victor	victor@fake.com	36
Jayce	jayce@fake.com	28
Mareena	mareena@fake.com	22

Once you have your migrations set up run the command rake db:migrate to make those blue prints and store them in your schema file (this is another one you dont want to directly edit or modify, this is part of what ActiveRecord helps with, keeping your data tidy so you can get what you, or someone else, needs from it, your schema is like the keeper of your up to date blue prints.)

Next step is to set up some dummy data to populate your shiny new tables, there are additional Ruby gems like Faker, as well as loops to automate this task but as a beginner I preferred to really control and check my data, and associations.
After getting something in your seeds file to work with you want to run the command rake db:seed

The last step to get you start with ActiveRecord is creating your models for each table, this is where you will make the associations so your data(tables) can interact, while remaining easier to organize, maintain and flexible to work with.

These relationships also have specific syntax with the capitalization of the class name, what is plural and what is singular, as well as where commas and colons are placed. You can see an example in the blog photo, notice that

 Song belongs_to :artist
//(a single artist) 
Genre has_many :songs
//songs-plural, and it 
has_many :artists, through: :songs
//artists and songs are plural here.

(this is set up as a many to many relationship, in case you were wondering.)

If you have gotten this far, you can now create and manage a database structure, and make a whole lot of really useful and cool queries to your database using ActiveRecord as well as Ruby methods (I found myself at APIdock often looking up syntax and all the possibilities of how to use these built in methods)

So, go use a cool debugging tool to play with the data a bit, check out how to access different parts of the data together, and even try out some different methods to make some queries.

On a personal note- I was totally sleeping on how awesome the Ruby REPL debugging binding.pry is, so you might want to start with that, and maybe I should go write a blog about that little bit of magic.

React- modularity and information flow

lizrhodesss — Fri, 26 Aug 2022 02:49:40 +0000

As a programming newbie there have been a few times I wish I could find the super simple overview of topic to get my feet wet. This post is a puddle to try out as an intro to the modularity and information flow of React.

I have learned a lot about what I don't know, I think part of the challenge in learning something new is that you have to figure out how to learn in a way that make sense to you. Any new topic is daunting but learning to be a software engineer can be downright scary. Lucky for us, some humans that came before us realized that things are a lot more manageable when we break them into smaller bits. So thats probably why we apply modularity to everything from cars and computers to furniture and grocery shopping; but why is it important for us to write code in a modular fashion?

The idea of modularity really started making sense to me when I started to learn React. React's components were therapeutic to my brain after trying to figure out scope or how and why a callback function works the way they do in vanilla JavaScript.

React Components are defined as independent, reusable bits of code, generally separated into different files. Nice little boxes with instructions and expectations (in other words modular, declarative programming)
heres an example of some of the components I worked on from a recent project; theres a folder to keep all of the different components in, and each file in that folder contains the code necessary to work on that specific feature.

ok, great- we have boxes, its tidy, but how do we get the contents of those boxes to work together and make the thing? We pass information between them with "props" and callback functions. Think of a tree, but also a waterfall- you know what- heres a visual-

We use props to pass information from a parent component to a child component or grandchild, for example- I had to take data received from a fetch request I made from the App component, and get it to both the Home component then the SongCard component as well as the Search component. All components needed the same information to either render the details about a specific song or to search, sift, and filter through those details to provide search results received from details about user actions.
In this example I'm using {songs} as a destructured prop to get my fetched data to the following components
<Home />
<Form />
<Search />

ok, fine- we can get information and let it move down the waterfall, by using props; but how do we let the parent know about something thats happening with the child (things like onClick events). Thats a job for a callback function! The argument to a callback function can be used like a...I totally don't have a good analogy here, so let's pretend a kayak is an efficient way to get back up a waterfall, the kayak carries the argument to a callback function back up the parent component. (don't worry, the kayaker has super human strength and can conquer any waterfall.)
This is how easy it is to get information about events like onClick and onMouseEnter to the parent that is doing the rendering via callback functions, onMouseEnter happens and then the {handleLyrics} function is called.

So, how do your feet feel after this overview of why Reacts modularity and information flow is easier to wrap your head around than you might think?

sources:
W3schools
react docs
sonia dumitru's blog

What I wish I knew about submit and click events.

lizrhodesss — Fri, 05 Aug 2022 00:07:40 +0000

Event listeners are part of what makes JavaScript capable of being so dynamic, they "listen" for and recognize events. In the bootcamp I'm currently in we are taught that event listeners are basically "doing work" in response to "something happening"; now that is a pretty basic description of what happens when an event is fired off (when the "something happens") but I'm going to dive into it a bit. The syntax of a basic vanilla JavaScript event listener is broken into a couple of components: the element you want to attach your addEventListener() method to, one parameter that is the type of event to listen for, the second parameter is the function that you want to invoke when the event happens. There is a third optional parameter, a boolean value to specify weather event bubbling or event capturing should be used; I'm going to leave it at that because I really want this blog to be as beginner friendly as possible, and so far I haven't needed to use that optional parameter at all.

Anyway- the basic syntax for the addEventListener method with an anonymous function looks like this

element.addEventListener('submit', (_e_) => {
what do you want to happen when this event is heard 
)}

The second parameter, the function you want to invoke when the event happens; this can be anonymous or not (for submit events you'll need to pass the function a parameter, usually its 'event' or 'e' this is because you will likely need to use preventDefault(). Personally my brain got a better handle on this when I use an anonymous function, I could wrap my head around this higher order function being a description of what needs to happen when the event occurs.

There are a whole lot of different events to listen for, you can see an extensive list on MDN, but there are two events that I think are important that a beginner should have a decent grip on, and naturally they get confused all the time. I'm going to focus on those two here. The first is a 'click' event and the second is a 'submit' event. Like I said, they get jumbled all the time, and no wonder! Most of the time with submit events there is a submit button or something similar, but don't let it distract you! It's really just there to make sure the user performs the action that fires off the event; in the case of submit events, it's usually attached to a form or input box of some kind. As far as click events, you can attach an event listener to an element that isn't a button, think of a URL that redirects you to another page, that's a click event- with no button.

I also want to touch on something that came up when I was running into challenges with submit event listeners, and it took me an embarrassingly long time to realize that no matter what, the value of the input field or form will be returned as a string, yes, this means even if the user inputs the amount of burritos they want to order as a numerical value, the data returned to you will be a string. This isn't a huge issue unless your user is trying to see the total number of burritos and tacos in their cart. The best way I have used to solve this is by implementing parseInt(), which isn't as complicated as I tried to make it, so from one over-thinker to any others out there, save yourself the headache. It will be an uncomplicated solution to this issue, it will take the string value type (what comes out of a form or input) and turn it into an integer value type. easy peasy.

I hope that something here can help another newbie like myself, because I'm finding that sometimes you really just have to speak in plain english as much as you can, not just in code. And since I'm dropping the knowledge one of my coaches has given me already; here are some questions they always have me start with when I'm in a pickle; weather thats an issue with event listeners or getting a forEach() to iterate the way you need it to:
What am I trying to do overall?
What am I trying to do on each line of code?
Am I working with the right elements to do this?

Oh, and

console.log('literally everything')

because if by chance they read this and I don't include that golden rule, I'll be toast. But you know that already; being the bomb developer that you are. ;)

sources
click vs submit
HTML forms and submit events
the ever helpful w3schools

parseInt()
higher order functions
preventDefault()
forEach()

Backticks and why they matter.

lizrhodesss — Mon, 11 Jul 2022 18:41:31 +0000

String Interpolation

When you're learning JavaScript you will likely come across a lot of sources and people telling you that it doesn't matter if you choose to use

'single quotes'

"double quotes"

`back ticks`

as long as you keep it consistent throughout your code. As a brand new baby developer; I personally found this to be vague and misleading. Because, like everything in JavaScript- it absolutely matters; and you can achieve different results when you know how these choices affect the readability and functionality of our code. So, without further ado; here is my beginners dive into string interpolation.

Generally speaking, when you're working with JavaScript there's not a lot of specific guidelines or best practices to follow that I have found when it comes to using single or double quotes except that you want to make sure you stay consistent with whatever you choose to use in your code. But as a beginner no one explained to me the magic of the backtick (which can be found just to the left of the number one key). I say magic, but in the first few weeks into my coding journey I realized they can also be a menace. Thats mostly because I don't totally know what I'm doing YET, and these little frenemies are small and hard to spot when you're not used to looking at code.
The backtick is magic though, because it's what you must use to get all the amazing benefits of using STRING INTERPOLATION! Which from what I gather is the preferred method to modify and combine strings. The big reason for this is because string concatenation can get impossibly messy and difficult to read very quickly.
here is an example of how wild string concatenation can get;
const person = { name: Elizabeth nickName: Liz}

console.log('Hi, I/'m ' + person.name +'! Call me "' + person.nickname + '".')

Ummm..wut?
With all those crazy single and double quotes, slashes, and plus signs- how is someone supposed to be able to easily read that? Not to mention it just looks like a mess, and one of our goals is to write beautiful code right? Well that is exactly where we can use string interpolation and template literals.
Using string interpolation would look something like this:

console.log(`Hi, I'm ${person.name}! Call me ${person.nickName}`)

I'm not sure about you, but that is a lot easier to make sense of. Let me tell you about whats happening here. By the simple use of backticks you can turn anything contained within them into a literal string, it also means we can avoid having to use line breaks or breaks within the string concatenation to use a single or double quote in your string (for example: trying to use I\'m' to actually just see I'm)
Whats going on with

${this stuff}

though? When using backticks we also have the ability to use place holders in our strings, it can be a place holder for anything that evaluates to an expression; this would include arithmetic equations.

So really string interpolation uses backticks to take a string or strings and expressions and combines them so they read in a literal way and provides the ability to make our code more dynamic and clean.

Side note:

While writing this blog I discovered another backtick quirk that gave me a bit of trouble. When using backticks for markdown we can create a code block for examples in things like blogs. The problem with that is sometimes you actually want to see the backticks, rather than using them for markdown. I found and tried several things that didn't work, but I finally figured it out.


``` `you have to use 3 backticks followed by a space and then backtick you want to see.` ```