Chris Warner in wide brim hat, no background.

Christopher Warner

(407) 773-6423

warder dev logo
Programming Blog

I have decided to share some of my programming journey in the form of a blog. Each time I take on a new task, or learn a new skill, I document it here. Please feel free to look through my blog and see what I have been up to. Click the details button to get a greater explanation of each process.


Problem:

Create a page for some posts but not all posts in WordPress.

Solution:

I organized my posts into categories. Then I was able to add one of those categories to my main menu as if it was a page. I made the intro post sticky so it was always at the top.

Tools:

WordPress

I learned the importance of organizing your content in this one. I wanted a page that displayed only the posts about litters born on a page. Problem was if I set a page as my default post page all posts would appear there. The solution was to create categories and put each of my posts in them. I made a litter Log category and put every post that was a litter of puppies in it. Then I added that category to the main menu as if it were any other page. The result was a category page that listed only those posts in that category. I wanted an intro at the top of that page so I created an intro post for that category and made it sticky so it would always be at the top of the page. The end result was a page that could be accessed from the main menu that had intro text at the top of the page and listed all the litters of puppies in chronological order.

Problem:

Create a WordPress site

Solution:

Log in at Go Daddy, one click install WordPress, Install Plugins, learn Dashboard.

Tools:

WordPress, Go Daddy

Installing WordPress was a piece of cake with go daddy. You just log into your account and add WordPress to the domain. Go Daddy does the rest for you. You can even set it up to automatically update. Getting plugins are a bit tricky though. You can’t get plugins from your dashboard in WordPress. You have to log into Go Daddy and get them from the tab manage plugins. I also learned you need to uncheck the auto activate or it will fail to install. You can activate after. Once installed, learning the dashboard was a piece of cake. It took some exploring to figure out how to properly use categories and tags to organize my content. I downloaded a couple of plugins to help my galleries look nice and add a contact form. While that could have been done in HTML and CSS by accessing the text editor, it is nice that you can just add it in with a plugin.

Problem:

Have a series of numbers appear and disappear in the center of the screen then explode.

Solution:

The numbers are a fill font command. They are centered by dividing the width of the screen in half then dividing the width of the text in half and subtracting it from screen width. The delay is just a time delay before the next function is fired. The explosion is a bunch of circles in red, yellow, and orange growing from the center of the screen and accelerating outward.

Tools:

HTML, JavaScript, NotePad++, Filezilla

Centering the text on the screen proved harder then I realized. The font is 50% of the vertical height of the screen. To get half the width of the text I had to get 1/8 the height of the screen. Then subtract that from half the width of the screen and that was my starting point. It still feels a little off and I think that has to do with whether or not your browser has extra rows of tools at the top or not. I’ll be investigating that later. To make the explosion I just used the same code I used on the bubble background and had them all span in the same place instead of randomly around the screen. The text is set on a time delay at the end of each function before it fires off the next function to change the text. The color and time delay is set by variables at the top of the code so it is easy to find and edit. Once the animation is complete the code will delete the canvas element and the whole thing ends.

Problem:

Create an all in 1 animation that can be used anywhere.

Solution:

Create an on load listener built into the JavaScript. Avoid using jQuery so you don’t have to download or link to any libraries. Have a function that creates a canvas element then sets its properties to be the top element and fill the screen. After the animation completes, delete the canvas and end the JavaScript.

Tools:

JavaScript, Notepad++, FileZilla

I learned a valuable lesson in this project. If you don’t want a function to fire off right away, leave off the brackets. I started this project by creating a listener for window load. When the window loads the function that contains the entire animation will fire. When that happens, the body element is grabbed from the HTML document and turned into a variable. Then, a canvas element is created and placed as a child element to the body element. All the sizing and colors are set and the Z index is increased to make sure it is always on top. A listener and function was then added to resize the canvas whenever the window changed size. A function was then added to delete the canvas element after the animation was finished. By avoiding using jQuery and by having the JS file add and delete the canvas element, the entire project can be added to a web page just by linking to the JS file.

Problem:

Fire off a function after the page loads.

Solution:

do not add the () to the function you are calling. add an event listener for the name of the function but leave off the brackets.

Tools:

JavaScript (quick life lesson)

When you add the brackets to the called function it fires off the function right away so it can store the value in the function to return when the page is loaded. If you leave off the brackets and just list the name of the function like a variable, it will hold off running the function until after the page loads.

Problem:

Mouse blows colorful bubbles in the background

Solution:

Create a function to make circles. Add a draw property to make the circle. Add an update property to clear and redraw the circle after changing its location. Set the location, velocity, color, outline, and max opacity to random. Track mouse movement. When circles are in range of mouse increase opacity from 0 to max opacity and increase size to max size. When out of range slowly lose opacity and size.

Tools:

HTML5, CSS3, JavaScript, NotePad++, Microsoft Office, FileZilla

I started by making a function that would draw a circle. To make the circle random I set the stroke and fill to RGBA. I did this so I could randomize the red, green, blue, and opacity values independently. By having a math random times 250 for the colors and a math random times 0.5 for the opacity, I could create an infinite range of colors that would have a max opacity of ½. Once I was able to make a circle I needed to move it. To do this I make an update function. The function would take the position of the circle, add a value equal to its velocity, and then redraw the circle in the new location. I created another function to clear the screen and loop through this process forever. I then went back into the update function and added an if statement to check if the circle has reached the width of height of the screen. If it has then it reverses the value of the velocity causing the circle to go in the opposite direction. This gives the effect of bouncing off the edges of the screen. I then created an object to track the mouse position and movement. An if statement was added to the update function to compare the position of the bubble to the mouse position. If the difference was 70 or less it would trigger the bubble to grow in size and opacity. To make this work I set the initial size and opacity to 0, to hide the bubble. When it came close to the mouse it would fade in quickly and fade out slowly. In order to have multiple bubbles, I wrapped the entire process in a circle object and gave all functions and variables a this tag to make it a property of the circle object. The animation function that calls itself was left out. I then created an array to store multiple circles and an if statement to create a number of circle objects and store them in the array. I then added an if statement to the animation loop that cycled through the array and drew each circle one by one and called their update property. The effect is 150 invisible circles floating around until they come within 70 pixels of the mouse. Then they grow in size and opacity until they move out of range and they slowly fade away.

Problem:

Create a canvas element that can sit in the background of a web page and be used as an animated backdrop.

Solution:

Create a Canvas element at the top of the body element and use styling to position it to fixed and setting its top and left to 0. Then setting the width to match the screen and the height to match the scroll height.

Tools:

HTML5, CSS3, JavaScript, NotePad++, Microsoft Office, FileZilla

I started by creating a canvas tag at the top of the body tag. I then used CSS to set it’s position to fixed. Top and Left were set to 0. This locked the element into the top left corner of the browser window. Inside the JavaScript file I created a Variable named Canvas and another named body. I used querySelector to grab the first canvas element on the page for var canvas and the first body element for var body. I then set the canvas width to the window innerWidth. Depending on the content of the page the height of the document may be taller than the window. To allow the canvas to fill the entire document I used a height of document scrollHeight. To allow for resizing the page, such as rotating your phone, I added a resize function that resets the height and width of the canvas element whenever the window dimensions change.

Problem:

Showcase my art design in a creative manner that fits into the theme of the page.

Solution:

I created thumbnails for each image and put them in a flex box to space them properly. I then made them pop up when hovered over to indicate they can be clicked on. I built a pop up window to show a larger image and add text about the image. I added a way to close the box with a letter “X” in the top corner.

Tools:

HTML5, CSS3, NotePad++, Microsoft Office, FileZilla, Adobe Photoshop CC.

I used Adobe Photoshop CC to create thumbnails for each of my images to be used on the page. I then created div and set it to flex. The flex was set to wrap and to space around. This gave the images a nice even layout. The images were contained inside of divs because I needed to add a check box and another div container. All this would have lined up side by side without being in a container. The check box was set to invisible and the thumbnail was used as the label for the check box. The second div container was positioned between the check box and the thumbnail label and set to invisible. This was done this way so that when the check box was checked the next element down would be set to visible. The div contains the larger image and text to describe the process to make the image. A second label for the check box was created and placed inside the div so that the check box could be unchecked from inside the div and the div once again set to invisible. To float the div in the center of the page, I set the position to fixed. It was centered 50% to the left then translated another -50% of its own width to center the div. The Z index was set to 1000 to make sure it was on top of everything else. I set the over flow to auto because the window is set to a percentage of the view size and can shrink. As the content becomes too large for the window a slide bar will appear so you can scroll to the rest of the content. I set an @ media to replace the CSS for the pop up window. I made the window full screen for cell phones. This made the content easier to read on the smaller screen. I had planned on making the entire window clickable to close. However, to do that I would have to wrap the entire div in a label for the check box. Accessibility standards forbids anything but text and images to be used as labels. To hold up to accessibility standards in this regard, I created a text label inside the div and made it change colored when hovered over. This allows the user to close the window and the page can remain accessible. JavaScript could have made the entire window clickable but I decided to try and create as much of the page as I can without JavaScript. I chose to do this because it forces me to find creative ways to add functionality into my page.

Problem:

Re-write home page to be more appealing to a potential employer.

Solution:

Use Microsoft office to write a new introduction highlighting more of my skills. Copy the new paragraphs over the old paragraph tags in notepad++. Add icons to illustrate programs I have experience with and programming techniques I have used in my designs. Move the icons to the bottom of the page.

Tools:

HTML5, CSS3, NotePad++, Microsoft Office, FileZilla

I used Microsoft Word to write out a new introduction that was more professional and focused on my skills and experience. I used Microsoft Word to take advantage of the spell check and grammar assist. Once I had the introduction the way I wanted it I copied it over to notepad++ and placed them in paragraph tags. I searched for royalty free images used as icons for programs I have experience with and added them to my icon folder. I did the same for techniques such as Ajax and SEO. I use the icons to add a quick visual reference of my experience. I moved the div that contains the images to the bottom of the page. I think this makes for a nice footer. It keeps the graphics on the top and bottom and the content in the center of the page. Some of the icons had clear backgrounds so I added a white background color to all img tags on the page. The unified background color makes the images look like they all belong on the same page. Once I was happy with the look, I copied the updates to my server using FileZilla.

Problem:

Create a page where I can delete, edit and add new blog posts.

Solution:

I created a database to hold log in information. Then I created a login page so that only the Admin can edit or add posts. The login page started a session and opened a link to the edit page. The edit page used the session to grant access to the edit page. Multiple forms are dynamically generated from the blog posts saved in the database. Each form allows the user to edit, or delete each post. The top of the page has a form to add new posts.

Tools:

HTML5, CSS3, PHP, MySQLi, NotePad++

I created a table to hold the login information for the admin. I then built a login page and styled it to look like the rest of the website. That page contained a form that asked for the user name and password of the user. When the submit button was pressed the form would check to see if submit had a value, if yes, the PHP page would take the form information and compare it to the database. If only a single row was returned a session was started and the user name and password was saved in the session. A link then appeared letting the user navigate to the edit page. The edit page is also PHP. The edit page opens the session and gets the user name and password from it. It then compares that info to the database. If only one row is returned the page will load. If no rows are returned you are redirected to the login page. Once the page loads, a loop will cycle threw every row in the table containing the blogs and build a form for each blog post. Each form is named using the primary key of the blog post and a static name. This gives every form a unique name. I couldn’t ask the page to check for every submit button to see if it had a value because that number changes every time a post is added or taken away. Instead, I created a new PHP file that does not check for a submit button value. Instead, it jumps right into processing the data as soon as it is called on. The form data is submitted to the table and if successful you receive a message on the edit page that it worked and the forms are updated to show the new content. To add new posts, there is a form at the top of the page that activates PHP on the same page when the submit button has a value, it just inserts a new row into the table. I can do this on the same page because there will only ever be one add post form so I can just check to see if that submit has a value.

Problem:

Make a dynamic blog that does not require me to edit code to add a post.

Solution:

Create a database and store the blog content in the database. Add PHP to the HTML and use a loop to summon each blog post in reverse order so the newest blog is always on top.

Tools:

HTML5, CSS3, PHP, MySQLi, Notepad++

I started by converting the HTML page to a PHP. Next I created a database and set up a user and password to gain access to the database. I set up the fields in the database to store the blog posts in. This included a primary key with auto incrementing numbers and sections for the problems, the solutions, the tools used, and the extra details. I then created a PHP document for the purpose of logging into the database. That PHP document was placed in a separate folder. Next, I added code to the top of my blog page to require the PHP document created to log into the database. The next few lines of code was the request to get the contents of the database in descending order. This is so the blogs will stack with the newest blog on top. Farther into the HTML document in the section tags I open another PHP section and add a loop that echoes a full blog post for each entry in the database.

Problem:

Create a look for my code blog page.

Solution:

Before creating the PHP document , I created an HTML file that I could fine tune to give me the look I wanted.

Tools:

HTML5, CSS3, Notepad++

I started by grabbing my awards page and replaced the contents of the section tags with the new content for the page. To get the content to center in the page i wrapped the content in an element that i told to align content to the left. I then took that container and placed it in another container that I told to center content. The effect is a container that would center on the page but the content inside the centered box is still left aligned. As a design choice, I decided to use a box shadow instead of a border. This gave me very soft edges and still gave distinction to each post.