Perpetual Education: Week 11

Lessons 99 - 104

Hey, What’s going on?

- 4 Non Blondes

I broke my coffee fast and it screwed up my whole week. One cup was enough to keep me awake for 32 hours. I was just lying in bed with my eyes closed, begging my body to go to sleep. Didn’t work. Now I’m back in full vampire mode. I’m past fighting it. Just have to accept it or plan my next cup of coffee accordingly. Might counteract it with some NyQuil like those SoundCloud rappers. If only Voodoo still made that NyQuil doughnut then I’d have a good balance for the coffee. WWLXD (what would Lil Xan do?).

I’m drinking watermelon berry Powerade with zero sugar and listening to John Zorn being a complete psychopath.

Gist…

---

AlphaNet Redesign Day 1

So we have this thing called the AlphaNet. This is a student directory. It’s pretty basic. Just some cards with their name, maybe an image, and some info.

For the PE version we styled all our cards individually. Everyone who didn’t style their cards has a troll background and reversed text.

For this lesson we had to create our own version of the AlphaNet. We’re supposed implement things we’ve learned so far like generating HTML with PHP, having a cohesive design, and a bunch of other crap.

For mine I decided to stored all the student information as objects in a JSON file. Should be easy to read and understand the key/value pairs.

Imported that data from the JSON and used a shuffle function so that the order in which the objects are read are randomized on reload.

To make life a little easier and php a little less uglier, I save all the values from the objects to their own variables.

foreach is generating all the html for the cards. Just have to place the variables in the right spot and it’ll dynamically create all the cards without having to code every single one. Just add another object to the JSON file and it’ll generate like the others. EZ-PZ.

This sort of shows the flow of how the images are grabbed and placed in the HTML.

In case a student didn’t have a blurb or linkContent, I created an if statement that would generate default text. Notice the variables placement in the string.

Alright, I got that in order. It’s making sense. It’s working. Now it’s time for CSS.

I decided to keep it simple with 2 colors. I wanted something that would get a passing grade on the contrast checker without being super boring and bland.

I think my favorite css property is mix-blend-mode. I used the lighten property on all the images. Just connects the images to the content. When an image is untreated it looks kind of out of place to me. Allows you to use more colors and get a little weirder. Also lots of happy mistakes since I don’t know all the property yet. The images with the lightened blend-mode gave it this 70s yearbook sort of vibe that I liked.

Since I was going for that retro vibe, I decided to use a display font for the headers. I thought shrikhand blended in well with the style that’s already somewhat established. Kept the rest basic. Roboto for the blurb and monospace for the links.

This is the first draft of a student card…

I like the column layout. Reminds me of trading cards. Looks a little weird in a grid layout on larger screens though.

AlphaNet Redesign Day 2

After getting some feedback I decided to make some adjustments.

Say if the $blurb is super long, it can make the other cards look weird when they’re in a row. I needed to set a character limit for the $blurb so I created an if statement with some library functions.

The strlen() function checks the string length. The substr() function takes in a string as an argument and then you can add index numbers to signify where you want the display of characters to start and end.

This is how the computer reads this code:

if the string length is larger than 72 then redefine $blurb to $blurb starting from index 0 to index 72 and add “…” at the end.

Another thing to consider was that no one outside of PE has any clue what the AlphaNet is. We need some information at the top of the page. Threw together some quick copy and problem solved.

I wanted to see if I could generate an id with an if statement inside a foreach loop for Derek.

Computer reads it like:

If key(student) has this value (sheriff derek) then redefine $derek to “id = “derek”.

Ran into some issues with the variables not working. Lots of trial and error. Eventually got it in a working state. Now when you click Derek’s link in the intro paragraph at the top of the page it will scroll down to his card. I’m a freaking wizard.

I wanted to see what else I could pull off with if statements and generating attributes. Derek suggested I make it so that the students could easily edit the background and foreground of their cards.

To do this I created a couple of keys with values that clearly state where users are supposed to edit. I tried setting up the code inside the if statement like the last one that links to Derek’s card but it wasn’t working for some reason. Abandoned the if statement and just added the attribute with the variable as the value in the card tags. It works but now every single card has that attribute. Guess my wizard days have come to an end. At least I’m still a vampire.

As stated before, the card content being in a column created some problems. I decided to make it responsive so that the column layout remains on the small screen sizes, then changes to a row at a larger viewport sizes. Looks a bit nicer.

Here’s the live site and the GitHub in case you wanna see the magic.

Flexbox Refresh Part 1 & 2

Revisited the old flexbox challenges. Don’t really know what to say. Just put on a podcast and went at it.

Just gotta use the right properties and style each block one-by-one. The selectors got a little wacky.

I messed up the 2nd challenge by using pixels instead of percentages. Quick fix though.

Here’s the 1st challenge.

Here’s the 2nd challenge.

The challenges had variations where we had to recreate the same layout but at upside down, to the right, etc. I got bored so I half-assed it by forking the old challenge and using transform: rotate(). It kind of worked? Not really. I dunno? Sometimes I get restless with repetitive exercises. We already went over this stuff like a month ago too. I know that it’s practice for what’s to come but I think I’m just a little more anxious to learn other things.

Responsive Layout Revisit

Remember the super responsive layout challenge? Now that we’ve been using PHP it’s time to break it up into partials and use loops to generate the modules.

The code for SVGs is an eye sore. We can solve this with partials. Now the index file is much easier to read.

Stored all the content data in its own php file. Sort of like what I did the JSON file. I wanted to make it so you could easily store and edit all the text, images, and links in one view without having to search or jump around a page or between pages.

For the modules I created a foreach loop to place the content and generate the html.

Also had to create some extra pages for the links. Using the partials make’s it easy to keep a consistent design while swapping out content.

Here’s the live link and GitHub in case you want to witness the failure.

Roots Website Copy

Thought this site was pretty cool so now I’m trying to recreate it.

I need to structure this better so it does all that cool sticky position at the next media query. Go to their website, make the screen at least 1024px, and scroll. You’ll see what I’m talking about. I think for the next go-around I’ll partial everything so I can easily restructure it in the index file. Then I’ll be able to tackle the next media query.

I did figure out how to invert text color in the nav when other content goes underneath it. mix-blend-mode: difference to the rescue. Pretty cool but is a little distracting.

Cool

Not cool

The animation at the bottom is a little hard to copy. Still super new to it. I also need to redesign the arrow SVGs to a square shape so they don’t overlap on rotation.

---

That’s the gist. NyQuil’s my jam fool.

😴 P E A C E 😴