Coding Journal — Website Redesign 1

Have you ever tried keeping a programmering journal? It’s supposed to help you work through problems easier by giving you a place to dump your brain’s CPU, basically. Also, it’s supposed to be a good way to keep track of things that work and things that don’t while you are working out bugs and things that you have learned and should look into later. Sounds like a good idea, right?

I decided to try this journal keeping system but instead of calling it a “Programming Journal” I am calling it a “Coding Journal”. Why? I don’t know, it just sounds more “me”.

I am also going to be copywriting from this journal onto this blog because, why not?

Alright, here goes. My first Coder’s Journal entry!


Today I am working on my homepage. I am going to scrap the old one & start over because, at this point, it is unfixable. I tried to make my own responsive grid but was never able to get it to work right. This time, I will use Bootstrap. It will be a kind of showcase/portfolio and should include,

  • Social media links (Bootstrap has social media icons in Font Awesome)
  • A link to by blog (I will need to set it up ** I need to learn that anyway)

What else should it include? Back to Google, I go.

A lot of things that people put on their websites, I don’t have. What do I even do? Gosh, I don’t know. I’m going to walk around aimlessly until I think of something.

Wow, I haven’t done much.  I do some canvas experiments. I could add a section with my favorite codepens (not a lot there).

  • favorite canvas experiments

I’ll add other sections as I do more stuff. Ooh! I need a bio

  • bio
    • student status
    • parental status
    • what I do

Alright, I think that’s it. Now,

Step 1: get Bootstrap and make the layout.

Oops! I haven’t set up a local dev environment on my desktop. A quick web search led me to NetBeans, an IDE that supports loads of stuff. Ima go ahead and download the biggest one with the most stuff. Now, I wait. I’ll look at some layout inspo while I wait

Trying to install NetBeans, I don’t have the JDK installed! More waiting!

Alrightyroo, I’m in *cracks knuckles* let’s design this thing!

Bootstrap CND copy pasted — Now, to start designing. ..

Ima start with the main content. a bio, followed by some embedded codepens.

I can never get these grids to work right!

Note: Take a Bootstrap course.

Embedding my experiments, What A mess! I think that I can use JS to resize them and have them be responsive.

Here’s the plan

-Give everything the class “showcaseItem”

-Get the parents’ widths

– set the widths to the parents’ widths minus padding and margins

-set the item’s height to its width

-repeat on window resize

!getElementsByClassName gets all the elements with the class and puts them in an array. I have to loop through the array and do stuff to each element.

It seems that one of my codepens are broken and it’s messing with the rest of the page. :/

I will just make them “click to run” to make it stop gunking up the console, for now.

!DOM cannot write on asynchronously loaded external script (from the console) There is my problem, I think.

Note: find out what is meant by “asynchronously”. It sounds familiar.

Oh well, width:100%; is working for the codepens. Not the JSdos though.  I will just transfer them to codepen later. I’ll do that tonight & stop working on this for today. I have been fighting with it for a good 3 hrs.

JK! not done. Now that they are all codepens, I can use the codepen class & remove the other one. Okay, now I’m done.

Thoughts & Ideas:

That was really hard to read. I should maybe write bigger & use a pen. Maybe, I should not be doing this on graphing paper. I found an old notebook from, like, three semesters ago. I’ll just rip out the used pages.

I think that tomorrow, I will write less of a play-by-play & more of a bullet journal type thing. The way I did it took a lot of time away from actually coding. I can alway elaborate at the end of the day.

It was helpful in some ways. I had to write out what I was going to do and I have little notes for things that I want to look up later. I probably would have forgotten, actually, I did forget the things I wanted to look up.

The ! at the beginning of a line are “discoveries” or, things that I learned.

I think that I will compile the notes and discoveries every so often and create a running log and to-learn list.

I hope you enjoyed reading this! Can you like it? if you can, do that.. if you want to.





Leave a Reply

Your email address will not be published. Required fields are marked *