JONATHAN EARP

Blog

New Portfolio Entry - mojosquirrel.com:

A personal project that is an ongoing process. My new website, mojosquirrel.com is a portal to a gaming webserver I run off a linux server a build. The purpose is to host an online real-time map of the game world that I am running, have a point of contact for server issues, as well as disseminate the server address to the public.

mojosquirrel image

mojosquirrel.com homepage


A hurdle that I came across when making this website is that a :hover class that works on a computer will not work the same way for a mobile device. So my dropdown menu would not work on a phone. To get around this I used the code below:

onclick="void(0)"

When adding the "onclick" attribute to an interactive div, the div becomes clickable on mobile devices while still retaining the :hover functionality in a normal web browser.

02/15/2019

New Portfolio Entry - reformsiding.com:

I have completed version 1.0 of a website for a local business and put it online via Amazon Web Services. It was an interesting challenge working with a client. There was a lot of coordination needed in figuring out what the client wanted and what I could actually do in the timeframe provided. The outcome of this process:

Reformsiding image

reformsiding.com homepage


One thing that I learned from creating this website was the fact that a website viewed on a mobile device will not automatically format to the smaller size created by the @media tag in the CSS file. What I had to do instead was use a meta tag which changed the dimensions of the website based on the device that is viewing it.

meta name="viewport" content="width=device-width, initial-scale=1"

Adding the above code to the header of the webpages solved the scaling issue I was having with mobile devices.

02/14/2019

Cool Code - Show More JQuery:

I added a "show more" button in my blog. It uses JQuery to remove a class I add to posts that I do not want to show initially when the page loads. I decided to do this early so the website looks more streamlined and doesn't eventually become an endless scrolling main-page where the user gets lost.


//javascript
$(function(){
   $("#showMore").on("click", function() {
   var hiddenDivs = $('div.hidden');
   if (hiddenDivs.length > 0)
   {
      hiddenDivs.slice(0,3).removeClass('hidden');
   }
   })
});


This is a cool feature of javascript and JQuery because I am able to actively change the CSS of a webpage while navigating the webpage.

08/27/2018

Tool - Adobe XD:

Adobe XD is a cool free tool for making templates for web design. It is very easy to use and is a great prototyping tool for figuring out what a certain website design will look like in different formats. You can even link boxes on one template to act as a button to move to another template in order to simulate how a website would actually work in the real world. This only think I don't like about it is you still have to write out the HTML and CSS in order to actually make the website a reality (life can't be too easy). However, it is a great free-tool to make images and logos to put into the website later.

example template

Example template made in Adobe XD.

08/20/2018