Unit 6 – Reflection

This unit has by far been my favorite in this course so far. Although I have to admit I spent a little too much time on unit 6 (a little over 30 hours) in order to really learn how to create, modify, and expand jquery / javascript applications.

I also learened how to add various plugins to my website, as well as modify and call from my own custom written jquery scripts. I also learned how to better manipulate the DOM with ‘data’ elements.

I ran into a few problems, which is to be expected considering the magnitude of the testing and research done for Unit 6. I used a couple jQuery libraries that did not live up to my expectations, which taught me that more research usually goes a long way in terms of maintaining efficiency. 

A text effect library didn’t quite live up to par, and since it was the first ‘api’ that I have ever installed and it was a bit of a struggle to adapt to my website. I decided to scrap it due to its basic and unsatisfactory animation effects, after spending a long time implementing the plugin. Instead, I chose another library, ‘textilate.js’ which I could manipulate easier to create very satisfying animations for all the titles on my website.

I also chose a mobile menu to sleekly display my website’s navigation on mobile devices. This menu ‘pushes’ the content left, which displays a menu that is only displayed in screens of devices with screens smaller than 1000px. I think I am adding this menu to the entire website during the wrap up unit to create a more unique look for my website.

In addition to these libraries, I also wrote a unique api for the home page ‘specializing in’ section. This application expands / contracts the ‘specializing in’ containers when the button on any of the container tabs are clicked. Currently, it is not 100% finished, as the click events need to be cleaned up further to add ‘transition-delays’ to each specialization container depending on which was clicked. I plan to clean this up during the finalization phase of this course.

By modifying the ‘jquery-ui’ api library, I was able to create accordion containers for both the home page and the blog page, both for different, individual uses. I enjoyed styling these animations immensely; I have found a new passion for css & jquery animations which I find quite enjoyable to develop.

I also created another unique api to control the ‘sidebar’ expansion / contraction of both the portfolio and the blog page. These need to be further cleaned up during the clean up phase, I also enjoyed animating these immensely.

If I have more time I would have liked to compile each of these APIs under their own individual ‘libraries’ to use at a later date. I would have also liked to add ‘scroll’ triggered animations for each piece of content on the website, but this will also have to wait until a later date.

I will do this in the future either way as most of these applications can be re-used in several different places. I find that having a structure where one can practice and apply programming in various locations and applications is the best way to learn. I have immensely enjoyed the opportunity to polish my fundamental coding skills, and this course has certainly achieved this.

I plan to polish this ‘portfolio’ template during the last unit of this course, to make sure it works well responsibly.

Unit 6 .zip file

Click here to see Unit 6 live.

Citations:

Louis Lazari (2011/09/01). Triggering Css3 Transitions With JavaScript [jQuery / css tutorial]. Impressivewebs.com

[Triggering Css3 Transitions With JavaScript] (2016/04/02). Retrieved from http://www.impressivewebs.com/css3-transitions-javascript/

“I used the Triggering Css3 Transitions With JavaScript tutorial to create my own CSS3 / jQuery applications to complete Unit 6 of the Computer Science 266 : Introduction to Web Programming course offered through the Athabasca University."

Jordan Shroter (2015/07/28). TExtillate.js [jQuery Plugin]. http://textillate.js.org/

[Text animation] (2016/04/05). Retrieved from https://www.kirupa.com/html5/creating_a_sweet_content_slider.htm

“I used this plugin in order to animate the title texts on all my webpages to complete Unit 6 of the Computer Science 266 : Introduction to Web Programming course offered through the Athabasca University."

mmenu (2016/01/16). jQuery menu plugin[jQuery Plugin]. Mmenu.frebsite.nl

[Mobile Menu jQuery Plugin] (2016/04/05). Retrieved from http://mmenu.frebsite.nl/

“I applied the Plugin to create a menu for my website to complete Unit 6 of the Computer Science 266 : Introduction to Web Programming course offered through the Athabasca University."

paulund(no date provided). jQuery Scroll to Top tutorial[jQuery Plugin]. paulund.co.uk/

[Scroll to Top button jQuery tutorial] (2016/04/15). Retrieved from https://paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery

“I followed the tutorial here to create my own scroll to top button for my website to complete Unit 6 of the Computer Science 266 : Introduction to Web Programming course offered through the Athabasca University."

Gijs Roge(2016/01/01).TabTabs[jQuery Plugin]. tabtab.be/

[jQuery animated Tabs plugin] (2016/04/07). Retrieved from http://tabtab.be/

“I modified the jQuery animated tabs plugin to create animated tabs in order to complete Unit 6 of the Computer Science 266 : Introduction to Web Programming course offered through the Athabasca University."

Gijs Roge(2016/01/01).TabTabs[jQuery Plugin]. tabtab.be/

[jQuery animated Tabs plugin] (2016/04/07). Retrieved from http://tabtab.be/

“I modified the jQuery animated tabs plugin to create animated tabs in order to complete Unit 6 of the Computer Science 266 : Introduction to Web Programming course offered through the Athabasca University."

[jQuery accordion tabs] (2016/04/20). Retrieved from http://jqueryui.com/accordion/

“I modified the jQuery UI plugin to create accordions and accordion animations which I used to complete Unit 6 of the Computer Science 266 : Introduction to Web Programming course offered through the Athabasca University."

http://jqueryui.com/about/