L-O-M8,
I lived like a vampire this past week. My sleeping schedule was all out of wack but I kind of enjoyed it. Reminded of when I was in Iceland during the winter solstice. Maybe I was subconsciously trying to recreate that. What’s wrong with being a vampire a few times a year? Guess I just had to get it out of my system. With the day walkers I go…
I’m drinking earl grey tea and listening to Kind of Blue. Onward gist!
PHP Templating
So there’s 3 different ways to concatenate variables inside of strings and guess what? They all look super gross and ugly. Sure they work but damn, what an eyesore. You’d think by the 3rd time the geniuses behind PHP (say with lisp: hypertext processor 🤓 ) would figure out a way to not ruin my HTML but guess I got to live with this.
A good way to ruin your HTML with PHP is by writing mad libs. My Nicolas Cage obsession persists. I came up with all these words on the spot. I wonder what this says about me? Maybe this could be used to evaluate someone on parole. Maybe not cause I’d be screwed. Loincloth? Trauma Center? Forget I suggested that.
Control Flow and More Tiles
Now that I’ve spent some time reflecting on the first draft of my personal site I have decided that the super abstract layout with modulated letters is way overkill. The goal of all of this is to get a job. I could see this design scaring away some potential employers. Maybe I’ll revisit it down the road but for now I’ll have to put it in the vault.
So back to style tiles (I hate saying that, sounds like an accessory for a trapper keeper). For this round I created 4 mellow versions where I showed a lot of restraint. My favorites are the first 2. I stole the square idea from Paul Rand’s design for NExT (before you judge, remember that Steve Jobs was a master thief so fair game — more on this later). I like the green on white, the simple border, and purple blended photos. Something about a raw photo without any tweaking kind of breaks the design for me. In some cases I like it. Check the placeholder photos of my 4th design for where blog post previews would be. For the 2nd one I just really wanted to mess around with wavy texts. Trying to be a little more reckless so I can surprise myself instead of being so calculated. I’ll save that for later once I come across a winner.
To step it up from the last lesson I created a countdown timer that keeps track of the days leading up to Christmas. I stored the date(“m/d”)
function inside the $today
variable, gave the $christmas
variable a similar but hard-coded (is that what you call it?) value, and stored a calculation inside the $days
variable. Threw them all into an if statement that dynamically updates the webpage based on which day it is. Would be fun to add something like this to the web portal.
Arrays and Objects
Have to approach data structures very carefully. This is where most prospective developers get their first flat tire or give up entirely. Learning this stuff can be super dry and boring. Let’s keep it fun.
I remember seeing this chart a while ago and thinking it’d be fun to make a web app for it. To do this I created 4 separate arrays that contained 18 items for each part of the sentence. I googled random number generator PHP and found the rand()
function which worked like a charm. Applying that to the arrays (which you can access through index numbers) made it unpredictable and dynamic (my 2 favorite things). But how do I calculate the array length without hard-coding it? Another quick google search for calculate array length PHP brought me to count()
function. Have to add -1
because indexes start at zero. Feels like I’m doing something wrong by nesting a function inside a function inside an array index inside a string 😵 … but hey, it worked.
In case you need a pick-me-up here’s the pep talk generator. Check out this highlight that’s helping me get through the loneliness of the holiday season as I battle vampirehood.
I tested the color contrast and got a super bad score. In order to get a passing grade you basically need to make your site black and white. Super boring. I know I’ll have to budge sooner or later but for now I’ll take the bad score and keep the fun colors.
So after making this project I realized that I didn’t use any objects so I quickly threw something together that’s basically the same thing. For this one I used The Beatles as my data source (some people have Pokemon, I got The Beatles — watchagonnado?). I created an array consisting of the members names, then an object with each members name as a key and their instrument as the value. Instead of doing all the ugly nesting with the function inside the functions inside the array indexes inside the string 😵 — I just saved it a variable and placed it inside the string. Much better. Used an if/else statement to separate their good and bad albums. Nothing special but here it is.
Loops and Iteration
Another mock client. This time for a monster adoption agency (wtf?).
I feel like I’m starting to get more comfortable with toning it down. Created some quick style tiles. Some simple colors with some low-effort styling is all you need. Worry about the details later. Here’s what I came up with…
I went with the 1st one. The colorful Playskool vibe works well with the images. I also really like the rounded corners and shadows. I did however keep the circular monster logo from the 2nd design and made it slowly spin with some basic @keyframes
animation. Here it is.
I first organized the cards with a flex
display but then made it with grid
to see the difference. Both looked good. Just depends on what you’re going for. With flex
you get a more forgiving design by using the justify-content
and flex-wrap
properties. With grid
everything changes nicely with the viewport size. Didn’t even have to add any media queries. Again, just depends on what you want. Which one do you prefer?
There are many things I have yet to learn about Grid. I’m sure there are a lot of cool tricks I could use that would make it comparably better but based on these 2 examples, I prefer the flex
display.
I was also working with images that were different sizes so I had find a way to crop them to the same ratio. This was a little trickier than expected. Started off doing the same thing as usual:
<picture>
<img src="monster.jpg">
</picture>
…with the CSS setup
picture {
display: block;
}
picture img {
display: block;
width: 100%;
height: auto;
}
To pull this off I had to add background-image
as well as some other related properties to the <picture>
element. Also had to change the display of the <img>
property to none .
picture {
display: block;
background-image: url("images/monster.jpg");
background-size: cover;
background-position: center;
}
picture img {
display: none;
width: 100%;
height: auto;
}
Here’s the secret sauce: You set height
to zero and padding-bottom
to a percentage value for the <picture>
element.
picture {
display: block;
background-image: url("images/monster.jpg");
background-size: cover;
background-position: center;
height: 0;
padding-bottom: 70%;
}
picture img {
display: none;
width: 100%;
height: auto;
}
The padding-bottom
value makes the <picture>
a specified ratio. Weird hack but it works while keeping the images responsive.
I totally invented this myself with no help from Derek. Just FYI.
Functions
Time to go full nerd. Teenage me would kick my ass. Welp here we are… writing functions. Yay?
Using my reliable data source again (The Beatles) I created a function (yay?) that generates an object from the value of the arguments. To take it up a notch I added a $photo
argument to see if I could successfully access the images folder. I wanted a boolean value of some sort so I added an argument ($alive
) that checks whose breathing (Sorry, I was a vampire this past week — give me a break).
To create an object for each Beatle I had to call the function inside a variable. Made one for each member and filled in the arguments with their proper info and syntax.
So far so good but how do I know it’s working? To generate strings in a dynamic way I took took all the function variables I created for each Beatle and threw it into an array, then ran the array through a foreach loop. This is where the if/else statement would check to see who’s living and who’s dead while echoing strings (sounds so emo). Welp it worked! RIP John and George. My money’s on Ringo.
Course Reflection
I’ve tried many different techniques to ease the pain of learning this nonsense. Some work, some are complete BS. Spaced repetition does indeed work.
Friday was another day for self-evaluation. To do this we revisited some questions from the earlier in the course.
Disclaimer: I’m a jokester — if you haven’t figured that out yet.
Here’s my Q & A:
Mental Model
Any new thoughts on that?
Not really. I think this is something I can better analyze after a few years into a career. Too abstract for a beginner. Right now I’m a scatter-brained mess. This is like an employee asking me if he can go on break while there’s a line out the door.
Worth revisiting?
Revisiting? Haven’t we been constantly testing, then redesigning things to better suit our mental models. So far I haven’t created anything that’s original so it’s easy to work off of other tried and trued models (which is basically what 99% of devs seem to be doing). Maybe once I get to a place we’re I’m no longer challenged I can start thinking in a more abstract way.
Can you identify any “mental models” that you used to have / or that other people have – or any things that have shifted for you?
Not when I’m on the spot. Kind of weird to think about. This reminds me of when I stopped halfway through The Paradox of Choice.
Attribute
An HTML element is really just an “element” of the page. It is a part of the whole. They each have a special role to play, but you can further describe them with attributes. Concepts – big and small – are made up of attributes. These are usually described with key: value pairs. Maybe you’ve seen some around?
I have.
Do you want to write a bit about that?
Sure. Key/Value pairs are stored in objects. They are a way of storing unique kinds of data. Booleans, strings, numbers, and maybe arrays and other other objects. I think it could get pretty complex. The key is what you reference to get the value. Say there was a key called “firstName.” You would most likely store a first name in the value.
Do you have any questions?
I guess right now I’m trying to think of things I can build with the PHP we’ve learned so far. I made that pep talk generator but what else can I build that requires functions, loops, arrays, objects, and if statements?
Is it clicking that HTML is used to describe the content? Is that weird?
Not really. HTML is like the structure of a house, CSS is like the paint, and scripting languages like PHP are like the electric, gas, and water.
(Laser Focused) Positioning Statement
In case a non-PE student doesn’t know what that is, here’s a link.
Any new thoughts on that?
I guess you just have to find your own unique way of saying the same thing that thousands of other entry-level devs are saying. Do people really buy this crap though? I feel like the actual work should speak louder than some hokey sentence. I get that you got to reel them in but I would hope that a client or employer would care more about my actual work instead of some beauty pageant-style statement. I’ve seen sentences like these on nearly every dev website. They’re all basically the same. I’ll do it but it seems like if I try to make it too unique or use it to truthfully represent myself it could bite me in the ass. Maybe I’ll use the code from the pep talk generator for this? Crisis averted.
Have things changed?
Changed? They haven’t even progressed to what I wrote in my original statement man! Wait, let me check. Yup, still living with a bunch of degenerates in Portland.
Become more confusing?
Not really. It’s just a sentence man. You fill in the blanks with some hokey BS power words. Bonus points if you can invoke fear into the reader.
Should you write about it?
I’m not really in a position to pick and choose. I need a job ASAP. Tell me what to do and I’ll do it. Dehumanize me recruiters.
An intro to Accessibility
What do you think about this?
I need to rethink how I design things. Need to make a checklist.
HTML document basics
Can you write a basic (valid) HTML document without copying the code from your boilerplate?
Almost. There’s usually a little something here and there I forget.
What are the elements you know about so far?
That’s a long exhaustive list and I don’t feel like writing out every single one because it’s nauseating.
Have you just hung out – and looked through the HTML element reference lately to see if there are any useful ones you can add to your list?
I have yet to use fig and figcaption. I’ll have to reference this at the beginning and end of each project.
Can you remember how to do the file structure project?
Non-PE peeps: Here’s a link to my project and the associated blog.
Remember the one with the folder and the sub folders and the files / and making sure they all work?
Yeah, I’m pretty confident with that nested folders for site navigation. using “../“ and relative and absolute paths. I haven’t created many multi-page sites yet. Would like to make some though.
In conclusion
Is that enough to think about?
Yeah, it’s good to revisit what you’ve learned in the past (a.k.a. forced repetition). Honestly I just want to make a massive checklist for my process.
What was I surprised by?
Nothing. We’ve learned this stuff already.
What am I most proud of?
I dunno? I feel pretty confident with HTML and CSS. Even when I do something wrong I can at least get it in good working order then fix it later. In most cases I can usually wiggle my way out of a problem.
How can you help the other students?
I could chime in more on Slack. Explain my projects better.
What do I need help with?
Right now I’m trying to figure out which projects to build. The goal is to get a job. What projects will get me hired? I really don’t know. What are they looking for? What skills do I need so I can start making money? The job market and hiring process is still a giant mystery to me.
Alpha-Net Student Card
Remember the last blog post when Ian Enders hacked our student directory?
Since the site was in disarray I used this as an opportunity to design my student card. My original plan was to modify the text like I did in the first draft of my personal site. Started messing around in codepen while watching the film Steve Jobs in the background. The film was in 2nd act where he’s about to present the NExT computer. I saw the cool logo and thought it’d be fun and easy to recreate. Hopped into Affinity, exported the SVG, added a simple @keyframes
animation and whaddayaknow — I gots myself an awesome student card. Looks cool when next to Brian’s card which has a slow moving night sky. I’ll change the color so I don’t get sued.
Don’t try to be original, just try to be good.
- Paul Rand
Will do buddy… will do. 😈
Surprise JSON Challenge
Saturday morning, post-cereal, about to go hiking — all of a sudden…
At first I was little intimidated. Eventually I was able to make sense of how the PHP was connected to the JSON file. After that it was just about using the right tools. Basically did the same thing I did with The Beatles PHP project. Created a foreach loop to cycle through every JSON object. foreach one I created a variable to store the value from each key. Then I echoed a string (hate it) to turn that data into HTML elements.
Went pretty good but I was having a hard time figuring out how to count the number of items in an array while concatenating it to a string. Hopped on a slack huddle (new wrestler name?) with Derek and he walked me through the creation of a function in order to pull this off. A little trial and error but we got it up and running.
You know that scene in where Ant-Man goes subatomic? That’s what working with jumbled out-of-hand code can feel like. To clean it up we moved a giant chunk of the code to its own file and then referenced it with an include()
function in the main file.
I know in JavaScript you can do something similar with the split()
and join()
methods (basically what we did with the function). Derek showed me the implode()
method. Throw it in a foreach loop and it does the same trick. Still good to know what’s going on in the guts instead of relying on methods.
For the 8th time in a row now, that’s the gist.
✌️ P E A C E ✌️