Howdy doody,
Jose is finally settled in San Francisco. The new digs are awesome. Gots myself one of them murphy beds like in them old comedy films (sorry, I’ll stop talking like that). The landlord is super cool and laidback. I’m using all-natural bathroom products because the house has this really cool intricate grey water system. There’s one other roommate who has his own in-law unit in the basement. He’s a mellow fellow who works at a plant store and has a sweet dog named penny who seems ambivalent about my presence. So far I absolutely love being back in SF… but talk to me in a month from now cause I’m in the honeymoon phase. I guess that’s what I’m doing with all this constant moving? Staying within that honeymoon phase.
Lately I’ve been doing most of my work at the library. Although I’m pretty good about getting work done at home, there are a few advantages to having designated place to study. Main reasons: Being in the presence of other people studying (Online learning doesn’t have to be so lonesome) and losing access to easy scapegoats (e.g. eating food when I’m not hungry, laying in bed with my laptop and falling asleep, and watching dumb videos on YouTube).
Just FYI: This was the week I was crazy sick. I think there was maybe 3-4 days where I barely did anything because I was bedridden. As a result, my overall performance suffered. Now you know.
I’m listening to Tool and drinking coffee.
Gist, right ahead!
Programming Exercises
Exercises for Programmers. Good book. Useful book. Are you completely new to programming? Start here. Are you familiar with one language but want to learn another? Start here. What’s cool is that this book isn’t language-specific so you can apply the exercises to anything.
When it comes to coding challenges, I can either thrive or slog. It all depends on where my self-esteem is at that day and how focused I am. Luckily there are steps you can take to solve nearly any coding challenge. Every programming teacher I’ve ever talked to has some version of this but here is a breakdown of the one in Exercises for Programmers…
Understand the problem
Break it down by asking the right questions.
Once you find the answers, write a problem statement that explains exactly what you’re building.
Discovering inputs, processes, and outputs
Determine what the inputs, processes, and outputs are based on the nouns and verbs of the problem statement.
Nouns usually convert to the inputs and outputs.
Verbs usually convert to the processes.
Driving design with tests
Know what result you want.
Implement TDD (test-driven development).
Write code that test the output of your program as you make your way through designing it.
Create a test plan
Inputs:
Expected result:
Actual result:
Writing the algorithm in pseudocode
Pseudocode lets you think about the logic without worrying about the syntax of a coding language.
Write out in plain english each step of the algorithm.
Writing the code
Now try converting the pseudocode into actual code.
Enforce constraints
Try some additional challenges after you’ve written a working version of the program.
Onward!
Use this strategy to tackle the rest of the problems in the book.
The more we delve deeper into PHP, the more I want to revisit old projects and convert them so that all the HTML is PHP-generated. I also need to think of ways to make my projects more interactive and dynamic. Hopefully this book will get the gears going. Another thing to consider is what will look good on my resume. Sure, I can make stuff that I think is cool but the main goal of this course is to get a job, so for now I need to play to the audience by looking at companies I’m interested in working for and seeing what speaks to them.
Pseudocode
This was day 1 of my bedridden sickness. I couldn’t do anything. My insides felt like sand. Every time I moved my body it would duplicate the fever. I remember opening my eyes like 4 times throughout the day and seeing my laptop on the nearby desk, thinking it was impossible to get there. Eventually I was able to grab the laptop and work in my bed.
Writing pseudocode feels a little a silly at first but you quickly find out how valuable this is for problem solving. If you can write solid pseudocode, then coding should be the easy part. Don’t know if I did this right but is there a way to doing pseudocode? I don’t think so. Here are some of my first attempts…
sayingHello
Prompt user with question “What is your name?”
Save user input to variable
Alert with “Hello, variable, nice to meet you!”
countChars
Prompt user with question “What is the input string?”
Save user input to variable
Calculate the number of characters in the variable
printQuotes
Prompt user with 1st question “What is the quote?”
Prompt user with 2nd question “Who said it?”
Alert with “(Answer to 2nd question) says, (Answer to 1st question)”
madLib
1st prompt user to “Enter a noun:”
2nd prompt user to “Enter a verb:”
3rd prompt user to “Enter an adjective:”
4th prompt user to “Enter an adverb:”
Alert with “Do you (2nd prompt answer) your (3rd prompt answer) (1st prompt answer) (4th prompt answer)? That’s hilarious!”
simpleMath
Get user data
1st prompt with “What is the first number?”
2nd prompt with “What is the second number?”
Store user data
Store 1st prompt answer in variable
Store 2nd prompt answer in variable
Convert data type from string to number
Alert with each these calculations using the variables:
(1st prompt answer) + (2nd prompt answer) = …
(1st prompt answer) - (2nd prompt answer) = …
(1st prompt answer) * (2nd prompt answer) = …
(1st prompt answer) / (2nd prompt answer) = …
retirementCalc
1st prompt with “What is your current age?”
Store user input in variable
Convert data type from string to number
2nd prompt with “At what age would you like to retire?”
Store user input in variable
Convert data type from string to number
Create a variable to store the calculation…
1st prompt answer - 2nd prompt answer
Create variable for storing the current year
Look up language method to access the date and year
Final output:
If the prompt calculation is a negative number then…
alert with “You can retire already”
If the prompt calculation variable is a positive number then…
alert with “You have (prompt calculation variable) years left until you can retire. It’s (current year variable), so you can retire in (current year variable + prompt calculation variable).”
Kudos to anyone who actually read all that.
Server-Side Forms
DFTW is like a 4 year college crammed into 6 months. Because of this some concepts you may have learned and fully understood in the past might fall by the wayside. Fortunately we have a great resource like study hall so we can brush up on the old stuff without having to sift through the 100+ lessons.
For this round I thought it would fun to emulate an in-person classroom setting by using the huddle feature on Slack. Tara, Derek, and Shayne were able to make it. The exhaustive list of questions seemed a little daunting at first but I was surprised to find out how much I actually remembered. All the information just comes flooding back. I think part of the reason why I wanted to do the huddle was so that people could hear how awesome my voice sounded from being sick.
Alright, so these exercises require a lot of user input/output. How do we get that? Forms. How do we store the data from the form? With a bunch of attributes and variables. Check it…
<form method='POST'>
<label></label>
<input type='' name=''>
<button type='submit' name=''></button>
</form>
Attribute breakdown:
method=’POST’
Tells the computer to save the input data from the
<form>
to an associative array of superglobal variable.Superglobal variables are generated when a user hits submit. They can be accessed in the same way you’d access any key/value pair. (e.g.
$_POST[‘key‘]
returns the value).
type=’’
If this attribute is being used with an
<input>
tag…Specifies what kind of data should/is being taken in by the computer from the user. There are many different values for different use cases. The
<input>
tag changes appearance and function based on the value of thetype
attribute.
If the attribute is being used with a
<button>
tag there are 3 options…type=’submit’
takes all the user submitted data and saves it to the superglobal variables in the associative array created by the_POST
method.type=’reset’
just resets the<form>
.type=’button’
does nothing. I think this is meant to be a blank slate so that it can be customized with event listeners. Prove me wrong nerds!
name=’’
This designates what the key name will be in the associative array created with the
_POST
method. The user submitted data will be saved as the value.
Once you have that you should be able to retrieve all the user submitted data and run it through functions, loops, if statements, whatever you fancy. Godspeed.
Alright cool! Now that I know how to do that let’s put it to use by doing one of these exercises. I already got the pseudocode written for the retirement calculator exercises so let’s give that one a try.
Here’s how I built the form…
<form method="POST">
<p>Retirement Calculator</p>
<div class="field">
<label>What is your current age?</label>
<input
type="number"
name="currentAge"
min="0"
value="<?=$currentAge?>">
</div>
<div class="field">
<label>At what age should you retire?</label>
<input
type="number"
name="retiredAge"
min="0"
value="<?=$retiredAge?>">
</div>
<button type="submit" name="submitted">Submit</button>
</form>
<p>
<?=$message?>
</p>
The min=’0’
attribute makes it so the user can’t enter an age less than zero. The value=’<?=$variableName?>’
attributes displays the data from the variable in the input field. The values are variables inside of PHP delimiters. This will make sense once you all the code. The <p>
at the bottom will display the results once the user submits the <form>
.
Now that we have our markup, it’s time for the programming:
Step 1: Assigning the variables
$formSubmitted = isset($_POST["submitted"]);
$currentYear = date("Y");
$currentAge = 0;
$retiredAge = 0;
isset()
checks if the variable has been set and returns a boolean (true or false). In this case it checks the associative array created with the _POST
method to see if the key [‘submitted’]
has a value and saves it to a variable, $formSubmitted
.
The date()
function grabs the current date. You can grab a lot of info with this function but I only want the year so you can specify by adding "Y"
to the argument. That’ll be saved to the $currentYear
variable.
$currentAge
and $retiredAge
. Remember these in the value=’’
attributes? They’ll be set to zero but will be modified by user submitted data later.
Step 2: Modify the variables with user submitted data
if ($formSubmitted) {
$currentAge = floatval( $_POST["currentAge"] );
$retiredAge = floatval( $_POST["retiredAge"] );
}
This checks if the form has been submitted. If so, then redefine the variables with the superglobal values from the associated array created by the _POST
method while also changing their data type from strings to numbers with the floatval()
function. Capeesh?
Step 3: Calculations
$yearsLeft = $retiredAge - $currentAge;
$retirementYear = $currentYear + $yearsLeft;
I think this should be pretty clear. Calculate the variables and save to their own variables.
Step 4: Choose which message to display based on the result
if ($yearsLeft <= 0) {
$message = "Retire already fool!";
} else {
$message = "You have $yearsLeft years left until retirement. It's $currentYear, so you can retire in retirementYear.";
}
Computer reads it like this: If the amount of years left is less than or equal to zero, save "Retire already fool!" to the message variable. Otherwise save "You have (insert value of $yearsLeft
) years left until retirement. It's (insert value of $currentYear
), so you can retire in (insert value for $retirementYear
)."
Now we’ll have a value to display in the <p>
tag at the bottom of the web page.
More PHP
Turtle power! For this exercise I made a pizza calculator. Before diving into the code, here’s what I did…
Breaking the problem down into steps…
Evenly divide pizzas.
Prompt for the number of people.
Prompt for the number of pizzas.
Prompt for the number of slices per pizza.
Make sure the number of pieces comes out even.
Display the number of pieces each person should get.
If there are leftovers, show the number of leftover pieces.
Pseudocode…
pizzas * slices / people = slices per person
Round “slices per person” down to the nearest integer
Total number of slices - number of slices each person evenly gets
Makes sense! Now let’s code it out for reals.
The form is basically the same as the last one so no need to post that.
Step 1: Assign the variables
$formSubmitted = isset($_POST["submitted"]);
$numPeople = floatval($_POST["people"]);
$numPizzas = floatval($_POST["pizzas"]);
$numSlices = floatval($_POST["slices"]);
Same as last time. 1st one checks if the form has been submitted and returns a boolean. Bottom 3 assigns variables and converts from strings to numbers for the user submitted data. $numPeople
sounds like some sort of goth techno club or band.
Step 2: Calculations
$slicesTotal = $numSlices * $numPizzas;
$slicesEach = $slicesTotal / $numPeople;
$slicesEach = floor($slicesEach);
$slicesLeft = $slicesTotal - $numPeople * $slicesEach;
I calculated the existing variables to create new variables based on the calculations I wrote out in my pseudocode.
Step 3: Constructing the sentence
$first = "There are $numPeople people.";
$second = "There are $numPizzas pizzas.";
$third = "There are $numSlices slices per pie.";
$fourth = "Each person gets $slicesEach slices.";
$fifth = "There are $slicesLeft slices left.";
This is for constructing the sentences that'll be displayed on the page. Strings concatenated with variables. Don't know if I'd use the word "concatenate" for the way this is written out though...
Step 4: The search for more money Singular use cases
if ($numPeople == 1) {
$first = "There is 1 person.";
$fourth = "This person gets $slicesEach slices.";
}
if ($numPizzas == 1) {
$second = "There is 1 pizza.";
}
if ($slicesEach == 1){
$fourth = "Each person gets 1 slice.";
}
if ($slicesLeft == 1) {
$fifth = "There is 1 slice left";
}
What if the user enters 1? I’ll have to change the grammar of the sentence from plural to singular. To do this I created multiple if statements that check if the value of the variables is 1.
Step 5: Displaying the result
if ($formSubmitted) {
if ($numPeople == "" || $numPizzas == "" || $numSlices == "") {
$message = "What's wrong? Cat got your keyboard... 😾 <br>Fill out the form properly! 🖕";
} else {
$message = "$first<br>" . "$second<br>" . "$third<br>" . "$fourth<br>" . $fifth;
}
}
Almost the same code as last time. Checks if the form has been submitted. If so, then check to see if the ALL the variables have any user submitted content. I'm using the or operator (||
) so if one of those fields is empty then it'll return the middle finger. If not then it'll display the message where it concatenates the structure of the sentence.
Check it out: Turtle power!
I also made a calculator that determines the area of a rectangular room. The process was not too far off from the other exercises so I’m going to link to that.
I want each exercise to have the same basic layout so that there’s some cohesiveness between but then style them slightly differently.
My masterplan is to integrate all of exercises into a webpage that looks like this…
The finished exercises will be displayed in the result module. You can navigate through each exercise with the dropdown menu in the right hand corner (this will range from 1 - 57). All of the other modules will show my step-by-step thought process. Just an idea. Think it could be cool. Sort of like a gym for working through the problems.
The gist persists!
I would say something stupid here but I got work to do.
👃 Smell ya later👃
You are doing fabulous Jose. It is obvious you love what you are learning. You have a very creative mind, a great sense of humor and will be an undeniable asset to whomever you work for designing for the web. Your dedication to DFTW curriculum is proof it can be done (in 6 months).
Hey, Jose. Did you ever get a job after completing the course? I've been thinking of taking it. Would love to have a quick chat with you to see if it stood the test of time! How can I contact you?