DEV Community: sam-a-code

CSS Tips!

sam-a-code — Fri, 18 Nov 2022 22:32:08 +0000

I've found the blogs I like the most to be the ones who get right into it – so below are my go-to strategies for adding some pizzazz to your website/project/app.

One key element of an aesthetically pleasing project or app is consistency in design. To have all of your h1 headers show the text in all caps, regardless of how you've written them in your code:

h1 {
text-transform: uppercase; 
}

Another key to nice design is the positioning on your page. There may be some instances where you'll want an element to always be visible on page, regardless of how far down you've scrolled. To anchor a button on a page, use the following code! In this instance, the button will be anchored 30px from the top of the page regardless of how far down you've scrolled.

button {
position: sticky;
top: 30px;
}

Finally – my favorite way to add more personality to a page is by adding images. I've found that they make a really lovely text backdrop (as long as you have your text in another div with a background so your text is accessible and easy to read!).

To set an image as a background for the header div:

.header-background-image {
  background-image: url("https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y29uY2VydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60");
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 150px;
}

To break down the code above:

background-repeat allows you to control how many times the image repeats over the page.
background-position allows you to control where the image is positioned.
margin allows you to control the margin around the image.

ps - Unsplash is one of my favorite places for stock images - enjoy!

My Favorite Methods (max_by, find_by, and sum)

sam-a-code — Thu, 27 Oct 2022 19:39:36 +0000

We're just about done with Phase 3 of our program, so I'm back with another blog post! Today I'm going to highlight some of my favorite methods in Ruby.

For the examples below, let's say that we have a plant_store with plants and customers that we'll want to look through, sort, and find.

max_by

Say we wanted to find the customer who had purchased the most number of plants from the plant_store.

def self.most_plant_purchases 
    self.all.max_by {|customer| customer.plants.count }
 end

In the above class method, the self is referring to PlantStore.
When we call this method on the PlantStore class, we iterate through every instance of customer. We do plants.count on each customer to get the total number of plants they've purchased. Once this method has gone through each customer, it will return the customer with the highest number of plants (lucky customer!).

find_by

What if our customer is looking for a specific plant? We can search for what they're looking for using find_by!

def find_plant(plant_name)
    self.plants.find_by(plant_name: plant_name)
end

This instance method is called on the PlantStore class. We pass in one argument of a plant name and the method searches for any plant_name that matches our argument in the plant_name: attribute. It will return the first instance of a plant that has a name that matches plant_name.

sum

Finally, what if we wanted to find out how much a customer had spent on plants at that plant_store?

  def total_plant_cost
    self.plants.sum {|plant| plant.price}
  end

This instance method is called on the Customer class. It calculates the sum of all of a customer's plants by adding up the values of the price attribute for each plant that is associated with that customer.

Thanks for reading!

Hopefully these methods are helpful references for your own projects! I tried to keep it simple so this would be an easy reference :)

Mapping in React

sam-a-code — Thu, 06 Oct 2022 14:13:05 +0000

Something I've learned recently is how to map in React. Below I'll walk through one example of how to set up mapping in a React app.

1. Set up your parent component

Identify the component that should contain the data you fetch. This will likely be a parent component – make sure to think about which child components need access to the data! You'll be passing the data to those components as props.

In this example, we'll pull a list of resources (the data), map the data, create cards for each resource, and then pass the data to a separate component as props to format the cards. The parent component is called ResourceList and the child is ResourceCard.

import React, {useState, useEffect} from "react";
import ResourceCard from "./ResourceCard";

function ResourceList() {
  const [resources, setResources] = useState([])

  useEffect(() => {
    fetch('http://localhost:3000/resources')
    .then((r) => r.json())
    .then((resources) => setResources(resources))
    }, [])

  const resourceList = resources.map((resource) => {
    return (
      <ResourceCard
      key={resource.id}
      name={resource.name}
      url={resource.url}
      summary={resource.summary}
      image={resource.image}
        />
    ) })

  return (
    <div>
      <h2>Resources</h2>
      <ul>
        {resourceList}
      </ul>
    </div>
  )
}

export default ResourceList;

Let's break down that code.

First, we import React, useState, and useEffect from "react". We also import our ResourceCard since we need to include it in our ResourceList return.

Then, we set up our ResourceList function. Within that, we start with creating state for our data – using an empty array so the data we fetch has somewhere to go!

Next is our useEffect function. We pull our data from /resources, convert it to json, and then set our resources. We include an empty array at the end of the function so that this fetch only happens once, when the page loads.

Now we get to map our data! We put it in a new variable (resourceList) and set it equal to our mapping method. Note that this resourceList is different than our ResourceList. While they have almost the exact same name, components in React start with capital letters and variables use camelcase (at least as a best practice!). What we're saying with this method is: create a ResourceCard for every resource in the resources list.

We've also made sure to include the parameters we'll need to pass down to ResourceCard (key, name, url, summary, image). This can also be accomplished by using a spread operator, but I like writing it all out because it's easier for my brain to see all of the parameters listed individually.

Below our mapping function we set up our return for ResourceList. We wrap everything in one <div>, then within that <div> we set up <h2> and <ul> elements. The <h2> will hold our title and the <ul> will contain our {resourceList} (the bit we just mapped above!).

Finally, we write export default ResourceList so our App.js can import it!

2. Set up your child component

In this instance, our child component is pretty simple! We just have to set up the JSX for our ResourceCard.

import React from 'react';

function ResourceCard({summary, name, url, image}) {
    return (
        <div>
            <img src={image}/>
            <h2>{name}</h2>
            <p>{summary}</p>
            <a href={url} target="_blank">Read more!</a>
        </div>
    )
}

export default ResourceCard;

We'll break the code of this component down as well:

We start off by importing React from 'react', of course.

Then, we set up our ResourceCard function. This function won't work if we don't accept the parameters being passed down from ResourceList. By including {summary, name, url, image} in this function, we are facilitating the data flow between the parent and child components.

The ResourceCard return sets up how we want our mapped data displayed. Again, we set up a <div> to contain everything. Within that <div>, we create elements for our {image}, {name}, {summary}, and {url} data points.

Finally, we write export default ResourceCard so that ResourceList can import it. Our data is now mapped and rendering on individual cards for each resource.

Hopefully this was a helpful overview of mapping data and passing it between components! One note – I removed all className references so that this example was easier to read, but of course I'd recommend styling your cards once they're mapped. It's half the fun – at least for me!

My first blog: Community + CSS

sam-a-code — Thu, 15 Sep 2022 20:44:07 +0000

Hi, I'm Sam!

I recently started Flatiron's Software Engineering bootcamp, and I love it. When thinking about what to include in a blog post (my first ever!), I know that it's important to include new concepts I've learned. I also know that no matter what I'm doing, the output is infinitely better if I approach it with authenticity. So, I'm going to start with how welcoming this community has been, and then I'll get into a handful of delightful CSS lessons I've learned.

Starting my SE Adventure

When I first mentioned an interest in software engineering to a real engineer, it was an off-hand comment. We were just chatting (one of those get-to-know-you coffees, which can be either fun or grueling, depending on everyone's energy) and she was so supportive of my learning more about this entire field. She recommended Codecademy, and I loved it, but knew I needed more structure if I really wanted to dive in. Over the next few months, I talked to more developers. Without fail, they were all incredibly enthusiastic about talking to (and sharing knowledge with) a coding newbie.

One of them sent a TON of resources – from YouTube videos to conferences to a list of bootcamps. He's checked in consistently, and has been a huge champion of my becoming a developer. Another set up a handful of meetings with me to start teaching me some key concepts (it was very helpful to have some background on arrays before I started bootcamp). Another, just as he found out I was leaving my job to start this bootcamp, set up time to talk through our company's codebase as a real-world example of some of the concepts I'd be learning. There have been so many people who are enthusiastic, helpful, and eager to share their experience as I make this transition.

I thoroughly underestimated the kindness of the software engineering community and just how excited they would be to have a new member. One of the best lessons I've learned is that community is a key element of this field – from sharing helpful resources to helping others troubleshoot to welcoming new developers with open arms (and open source).

CSS

Two other students from my cohort and I have been working on our first project together. We've created a page that returns recipes based on seasonal items from the farmers market. It's a good idea (if I do say so myself), but without CSS it's a bit... meh.

The CSS portion of this project was one of the parts I was a bit nervous about. I had less experience with CSS and it felt overwhelming to try to transform a simple page of lists and divs and headers into something pretty, user-friendly, and readable.

Another key lesson in this experience has been to take a breath and break down whatever I'm working on into smaller, manageable sections. So, I started by tackling the part by which I was most intimidated – how to get four lists (one for each season) to display side-by-side. After some googling and experimenting, I got the grid layout set up correctly.

Once I realized that CSS was actually fun – like an art project but my hands won't get covered in glue and I won't step on a runaway rhinestone – I started to enjoy myself. Below are some of my favorite bits of CSS that I learned throughout this project.

Grid layouts: grid layouts not only allow you to divide your page and its content into sections using HTML primitives, but they also enable you to have overlapping/layered elements. See the Mozilla link above for more information!
Underlines: I didn't realize there were so many creative ways to underline your text. I really get a kick out of the wavy underline (text-decoration-line:underline; text-decoration-style: wavy;). In looking up different types of underlines, I found some real gems. Underlines that look like they were drawn by marker, or ones that are animated, or ones that consist of a row of little hearts.
Boxes: the same way I underestimated the amount of pizzazz in underlines, I was unprepared for all of the different box-shadow options. This was where the full power and nuance of CSS really clicked for me. I have a lot to learn, but it's really helpful to have a visual representation of how many options there are – that's why I loved the page of box-shadow examples I linked above. Who knew there were so many different ways to style a box?! You can click on any of those box-shadow examples to copy the code and then easily add those boxes to your own CSS files. This goes back to community – how cool that there are so many resources that allow you to share and implement other people's code!

I love the immediacy of this work – you change the background color in your file and you can see it change in your browser after a quick refresh. You set up a grid layout and you know almost instantly if it's working as it should. You edit your JS file to clean it up for readability and – wait – you ordered your functions and variables incorrectly (you can't use your form event listener before you've declared all the variables it involves!). A quick fix to the order of those functions and variables in your index.js, and now your code is both organized and working.

I'm looking forward to challenging myself and finding my voice as a software engineer – identifying which areas I'm passionate about and which languages speak to me the most. I am really grateful to be part of this community and can't wait to see where this adventure takes me.

References:

Mozilla: CSS Grid Layout

Shark Coder: Underlines

Get CSS Scan: Box Shadow Examples