Home
Hello, I am Joey. I believe firmly in the fundamentals of GoBMH design which is:
Green on Black Means Hacker!!
This means coming in with Strong Opinions™ about semantically correct HTML.
Come, fellow keyboard artisan, and join me in my craft...
GoBMH Design
Impressive!
Already you have grown. What I am displaying here is more than a mere parlor trick. It is the key to interactive design.
A webpage that needs only load once. One single http request to load all the bytes of data in index.html, and only fetching images and video as required.
The only question left is... how far are we willing to take this concept?
Which... will you take?
Take the blue pill, and you can go back to your "websites" with their revenue funded multi-page, google analytics driven corporate structures.
Or you can take the red pill, and see how deep this rabbit hole goes
Welcome to the Matrix
Now that I know you are serious... the JQuery for this is really quite easy. It's relevance is that it's the same single-page design I used to implement the semester project code-name Jigglypuff.
Let's have a look at this website's raw JQuery file as it was when I wrote this sentence:
$(document).ready(main);
function main() {
$("#page0").click(page1Nav);
$("#bluepill").click(function() {alert("You chose... poorly");
window.location.href = "http://www.hellokittyonline.com/"});
$("#redpill").click(page2Nav);
}
function page1Nav() {
$("#page0").fadeOut();
setTimeout(function() { $("#page1").fadeIn(); }, 500);
}
function page2Nav() {
$("#page1").fadeOut();
setTimeout(function() { $("#page2").fadeIn(); }, 500);
}
Of course, if you look at my JQuery now it's probably more complicated because I wanted to do something fancy. But above you can see the core principle of the interactivity. Simply hide and show.
Click Morpheus to see the truth, and when you're done... come join me.
AJAX calls
Here are some images from Trove
AJAX calls
But why did the images load so seemlessly?
If we look again at my code's entrypoint, I have now changed it
$(document).ready(main);
function main() {
troveFetch(); // here is where I make the ajax call
$("#page0").click(page1Nav);
$("#bluepill").click(function() {alert("You chose... poorly");
window.location.href = "http://www.hellokittyonline.com/"});
$("#redpill").click(page2Nav);
$("#bunny").click(page3Nav);
$("#output").click(page4Nav);
}
By making the ajax call on page load, I was able to load the images in the background while you were having fun with the first couple pages of my site.
The code used to actually fetch the images is no different from Nick's original design.
I leveraged this in project JigglyPuff by opening our site with an animation. By the time that animation had played, I loaded everything from Trove in the background
This one is a riddle
Forms
Forms are convenient ways of making HTTP requests, but by and large for this design they are cumbersome because they navigate away from our page.
The way I did that last page was with the following:
$("#spoon").submit(stopThatForm);
var hints = 0;
function stopThatForm(event) {
var usrIn;
event.preventDefault();
usrIn = $("#grabThis").val();
if (usrIn.toLowerCase() == "there is no spoon") {
page6Nav();
} else if (hints == 2) {
//youtube video
} else if (hints == 1) {
//text hint
hints++;
} else {
//image hint
hints++;
}
}
I did something similar when it came to submitting scores to our leaderboard. Instead of navigating to the php script, I simply made an AJAX call to it using XmlHTTPRequest and setting headers to "post" our form to a php script, which then handled the back-end
once the HTTPResponse came back successfully, I simply made a callback to switch the pages.
The end..?
The front-end functionality of project JigglyPuff was my principle role this semester. In this site I have demonstrated the techniques I used to create a seamless user experience within Auslider and everything I have learned about JQuery/Ajax/Php in the process.
As a reward for coming this far I am giving you a gift below... a navigation menu in this document's footer. (I did this with a cookie for style points, if you refresh your window you'll have the nav bar clear cookie)
About Me
My name is Joey Ray, I am a developer working in the south side of Brisbane. I am twenty-eight
years old and a big fan of science fiction movies and web development. I study software engineering
at UQ, I have a bachelors in Mathematics also from UQ. I've studied (though not completed) a research
PhD in mathematics at ANU. My email address is
About the Project
We decided to build a sliding puzzle on top of Trove's core search API. I was in charge of all the coding side of things, and the other guys took care of design and puzzle functionality. My main concerns were making the user experience seamless, fun and enjoyable. I did not contribute to any talk, presentation or event because I was focused solely on the product and the product's progress. I handled any questions relating to technology/coding that the tutors may have had. I had a functioning, live prototype ready when most other groups were only at paper prototyping stage.
Project timeline:
- By week 3 we had decided as a group what project we wanted to tackle.
- By week 6 I had implemented the page management scheme (similar to this site).
- By week 9 I had interfaced (with bugs) with trove's search api and managed to dump images into the slider ui.
- By week 12 I had debugged, streamlined and perfected the user experience of the site.
The project was a total success, everyone who used it enjoyed using the software and I was happy with their response.
If I were to improve the project I would write my own sliding engine, as jqPuzzle turned out to be fairly clunky with its application interface. I would have also liked to add more games to the site to make it a sort of learning playground, but that's life.
I never received any negative feedback relating to aspects of the project I was in control of. The whole point of good software architecture is that it's invisible when it's done correctly. This is simply how computers should always work and always be.
Course Reflection
Looking back on my week 1 journal, I am happy to say that this course did not affect my other studies negatively. Because I was able to produce the code so quickly (this portfolio was done in 7 hours for example) I completed all of my parts on Fridays with good scheduling and time to spare.
I never really revised my expectations of the course as I went through the weeks. I was pleased to be able to dodge most of the assessment that I didn't want to do so that I could focus on the assessment I DID want to do (i.e. learn Jquery and php). I owe that to my fantastic group who did a wonderful job. I wasn't a "social loafer" however, as I believe I wrote well over 400 lines of code for AuSlider and got it functioning perfectly.
My learning was mostly self directed. One criticism I might make of this course is that the way front-end development is treated by (more broadly the university) the course is like a baby language that's 'not REAL engineering'. I contest this heartily! Front end developers are responsible for financial security and life saving applications. They earn over $100k annually in the workforce, and the "rare white unicorn" that most employers look for these days is a front-end developer with a solid basis in sound logic and software engineering who can output well reasoned, extensible and maintainable code.
A major way I believe that the university can produce higher quality front-end developers is to decouple the development side of front-end work with the design side. Have assignments that test the code itself. Make sure the code is up to a high industry standard. This happens already in CSSE2002 but it has its place in first year as well (before people learn bad habits).
This being said. Having courses which force software engineers to go from an initial concept to a finished product is a fantastic idea and I support it fully. I learned a lot in this process.
Relevant links:
AuSlider (Removed by UQ)