Final Analysis

Standard

“We should not only use the brains we have but all that we can borrow” – Woodrow Wilson. Reflecting on this semester’s CIT 261 assignments and work, this would have to be the motto I’d walk away with. This class has taught me honestly a lot about myself, working in a group, and expectations and goals.

Personally, I have found that sometimes I am lazy. When I say that, I mean that at times I am mentally lazy at learning new things. I feel daunted or try to find ways out of it, and just do not feel like putting in the effort. However, this field is not one where you can be mentally lazy. And actually as I have tackled learning the different topics I have found a lot of personal satisfaction (and even excitement!) as things click and work together. I’ve realized that most of the sources of inspiration came from other people just taking the time to share what they know, in their own words, hoping to help someone on their path to mastery. It’s actually very reassuring to know that I am never alone in this challenge, and that I am part of a beautiful community of other web designers and programmers.

Speaking of learning from others, I would appraise the quality of my group experience to be quite high. This group has challenged some preconceived beliefs that I had about group work. Firstly, I do not have to run the show for things to get done. That may sound prideful, but it has just been the reality I’ve experienced up until this point in my education and many other venues. It was a refreshing and freeing experience to work under a competent leader, and have group mates that for the most part were fantastic and consistent. I learned that I can assume other positions than the leader in a group, such as paying attention to small details or trying to communicate schedules with others.

I also have come to acknowledge the importance of consistency. There were members in the group who weren’t the most knowledgable about the topics. Yet, they came to every meeting prepared, asked questions, and were seeking to learn.A big part of that reliability came from preparation and not making excuses. They didn’t let poor equipment, lack or planning, or other things get in the way – they were there and ready to go. Reliability has become huge to me, much more so than someone who was experienced but a lose canon.

How do you succeed even with untrained workers, requirements in flux, and tight deadlines? Stay focused on the big goal. As requirements flux, you’ll have to keep reminding yourself what that is. Consider starting and ending each meeting with a goal for the upcoming time. I have seen the significant progress that can be made by just doing a chunk at a time, being very focused. In our small group, I noticed that when we went on programming for longer times than our work definitely wasn’t as clean or productive. Working with more frequency yet shorter duration is the key.

Overall, I feel like I have been able to borrow a lot of information from others in my study, my group work, and as I implement what I’ve learned into my career.

Week 12 – Time’s up, ready or not

Standard

One page, interactive, mobile app – check!

For this project, we were in two groups. Our goal was to make a study card / quiz app. We wanted it to be beautiful, simple, and something people would really like to use.  I worked on the backend team. I was intimidated at first, because a lot of the topics were newer to me and I’ve done a lot more design work. However, I found out quickly that my two team mates were very knowledgable and kind to work with.
While I couldn’t contribute as much, as fast, I worked hard to diligently attend all meetings and contribute what I could. I tried to help with troubleshooting, looking up resources, offering ideas, paying careful attention to syntax, and being a good team member. I helped with typing and compiling the code and added to the JSON quiz we wanted to have in our database.
This was much more of a positive experience than I ever expected, and I’m proud of the product we came up with. You can check it out here: http://quizme.danieljourney.com/. Our group made a presentation going through the app and our roles, you can see it here: https://youtu.be/0XUJu4uSi_4.

Week 11 – Getting it done

Standard

Team work

We have really been plowing through the programming of our app, and I am just so impressed with the skills of my team members. I am working in a small group with Kyle and Zane, and they bring a lot to the table. They both have super solid grips on the material and work very quickly. I have been trying to contribute as much as possible. I work especially hard to make sure that the syntax is correct, because I notice that more often than not simple syntax errors are the culprit of things not working.

The portion we covered this week was adding code that loaded the quiz questions that were created. We also added some buttons that the front-end team could work with and style.

Later in the week we met up with the whole team, and it was actually really exciting! I loved seeing the progress that the other part of the team had made with the styling and layout. There were a few questions that each team had for the other. It was also really positive to be able to offer each other suggestions and some troubleshooting ideas. The site is really coming together!

Our goal is to clean things up and polish next week and then at the end of the week we’ll put together our presentation. And then if there are any unexpected issues, we will have time to sort them all out without there being a rush.

Portfolio

I worked this week to add depth to a few of my portfolio topics, CSS animations and transformations with javascript that are triggered and manipulated by the DOM. Next week I will have a few others to add to, but overall I am pretty close to being all the way done.

Week 10 – The bulk

Standard

Meeting 1

The backend group met early again this week to continue with our ajax and json, and we got really far along! We added json to local storage and a drop down of quiz names created and to alphabetize them. We don’t have a ton left, a few things and some polishing!

It was wonderful to see how we could bring our experience together to make it help each other. For example, Kyle had used code to alphabetize and Zane had code to help write out json, so they were able to contribute those to the group! I tried really hard to be right there to help answer questions, look up answers to things we didn’t know, or help review syntax to make sure things were able to work correctly. Having us all work together was super helpful, we could catch each other and solve answers quickly.

Our team meeting is here: https://www.youtube.com/watch?v=S2KIeP7n-5Q

Meeting 2

Later in the week we all met together and it was so fun to see what the front end team had been working on come fruition. They had made a beautiful interface! They also came prepared with some specific feedback they wanted, and also for clarification of how our parts were going to connect together. We then had a chance to discuss how things should continue to progress the next week, and how we can meet our goals together. It has been such a relaxing and satisfying experience to work with this group of people in the way that we have – everyone contributing and keeping to schedule!

Week 9 – App Time!

Standard

We started this week! We started making our app! Just a reminder, we are making a flash card study app, where you can make sets and then individual cards. It’s going well!

This week was awesome in terms of working together as a team!

What we decided to do with our project was to break into two separate teams and kind of split up front end and back end. People chose what they felt more comfortable with or wanted to try out, and it was a great split.

We met first in the week with our mini-team and I have to tell you, we got so much done! It was synergistic, motivating, and did way more than we could have as individuals.

It was also wonderful to meet back together as an entire group later in the week to review with one another. It was fun to see the progress of the other half, to learn from each other, and be able to see different parts through new eyes.

I think it has been positive that each person is working to contribute and is putting in the effort to be present and prepared. Woot woot team success!

See the code here:

Week 8 – DOM Manipulation

Standard

I met with my group and we had a chance to discuss our team plan for the upcoming project. We decided to break into two groups, one doing front end and the other working on backend. I’ll be with Kyle and Zane doing the backend portion. We are going to have an extra meeting each week while we work on our tasks.

I worked a lot on understanding and using DOM manipulation. I ended up making a small quiz with a dynamic button that created a picture and showed a label for it – it was way exciting!!

DOM Manipulation

…The HTML DOM is a standard for how to get, change, add, or delete HTML elements.”

Browsers make a map, or tree of all the HTML on the web page and define them as objects

Then Javascript can:

  • Change the elements, attributes, CSS styles
  • Add new elements or attributes
  • Remove existing elements and attributes
  • Create new HTML events
  • React to all existing HTML events in the page

 

What are the pieces of DOM?

  • property: is a value that you can get or set (think, “What do I want to change?”)
  • method: an action you can do (think, “What change do I want to make?”)

Ex:

<p id=“demo”></p>

<script>

document.getElementById(“demo”).innerHTML = “Hello World!”;

</script>

 

property: innerHTML — this can be used to get or change any HTML element *it’s super useful

  • method: getElementById — good way is  to target a specific HTML element is to use an id that is assigned to it

 

How to Find What You Want to Change

  • Id
  • tag name
  • class
  • CSS selectors
  • HTML object collections

http://www.w3schools.com/js/js_htmldom_elements.asp

Test

createElement, appendChild, insertBefore, removeChild

   <p>What is the strongest bone in the human body?</p>

   <button onclick=”quizCard()”>Quiz Me</button>

   

   function quizCard() {

       var quiz1 = document.createElement(“IMG”);

       quiz1.setAttribute(“src”, “/image/femur_quiz.jpg”);

 

       quiz1.setAttribute(“alt”, “Femur Card”);

       document.body.appendChild(quiz1);

     

       var quiz_answer = document.createElement(‘p’);

     quiz_answer.className = ‘quiz-card’; // can style

     quiz_answer.innerHTML = ‘Femur’;

      

     document.body.insertBefore(quiz_answer, quiz1);

   }

   

Resources

http://www.w3schools.com/js/js_htmldom.asp

http://www.w3schools.com/js/js_htmldom_document.asp – How to access and manipulate HTML

http://coursesweb.net/javascript/createelement-insertbefore

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_create

 

Week 7 – JSON and Local Storage

Standard

I worked more on JSON this week, working on examples of parse and stringify. Here are some more of my notes and resources that I used to help me understand better:

What are JSON Stringify and Parse?? What do they do?

JSON.stringify turns a Javascript object into JSON text and stores that JSON text in a string. JSON.parse turns a string of JSON text into a Javascript object. JSON.parse() is for “parsing” something that was received as JSON. JSON.stringify() is to create a JSON string out of an object/array.”

ex: An array of names printed as a string, and then put back into an array
JSON Stringify

JSON.stringify() returns a JSON string for a specified value, optionally is can include only certain properties based on what the user defines.

JSON Parse

JSON.parse() is a method that parses a string as JSON, or you can change the output and return it’s value.

Resources


I also learned a lot about local storage and got a chance to see how it works well with JSON actually.

Local Storage

  • It is a JavaScript API in HTML5, where you can save key/value pairs. You can use the JavaScript library.
  • Cookies were previously used, but local storage is safer and can store a lot more (5MB+). It works per one domain and protocol.
  • !! Don’t use this for sensitive information!

 

Two Different Types of Storage

  1. Per session – expires after tab is closed
    1. window.sessionStorage
  2. No expiration
    1. window.localStorage

***Check first to see if your browser can even support it

if(typeof(Storage) !== “undefined”) {

// Code for localStorage/sessionStorage.

} else {

// Sorry! No Web Storage support..

}

Examples of Useful Local Storage

I wasn’t sure why you would want to use this or how it could be useful. After doing some research, here are some examples:

  • Store searches for a site that you might repeat
  • Store text or other information that you’ll use multiple times (ex: trying a font website with example text)
  • Filling out a form or table (without sensitive info), ex: sweet 16 bracket with friends
  • Search options or check boxes that you don’t want to have to click each time

 

How to Create and Retrieve a Name/Pair

***Values are always stored as strings, so you will need to convert to the correct format when necessary

ex: Number(localStorage.clickcount)

//make

localStorage.setItem(“name”, “value”);

//retrieve

document.getElementById(“div-id/class”).innerHTML = localStorage.name;

//can remove

localStorage.removeItem(“name”);

 

Resources

 

 

Week 6 – HTML5 Media tags and JavaScript object creation

Standard

In my group meeting this week I focused on teaching my team about HTML5 media tags, and I focused on video and auto tags to start off. I touched briefly on camera as well, but needed to do more research about how to integrate it more fully.

Below are my notes with a few interesting tidbits:

Video

Example code:

<video width=”400″ controls>

 <source src=”/test-run.mp4″ type=”video/mp4″>

 Your browser does not support HTML5 video.

</video>

<p><a href=”https://youtu.be/gv2w5A5rno8&#8243; target=”_blank”>Test Run on Youtube</a></p>

  • You can and probably should add height/width
  • Controls gives you the bar, but can be other things (ex: autoplay)
  • There can be multiple sources listed, and it will play the first valid option
  • If the browser doesn’t support video tags, then it will just show the text

Audio

File Format Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

Resources

http://www.w3schools.com/html/html5_video.asp

http://www.w3schools.com/html/html5_audio.asp


I also decided to do a review on JavaScript objects and to start to wrap my head around JSON. It ended up being much more straight forward than I initially expected.

Java Script Object Creation, Properties, Methods, Instantiation

How to make objects, assign properties and methods

JavaScript objects are containers for named values (called properties) and methods!

Making a JavaScript Variable

An example would be: var book = “Atlas”; The example below is also using javascript to define the variable and then access it, printing it here:

Atlas

Making a JavaScript Object

Javascript objects can have multiple properties, for example: var book = {type:”Atlas”, genre:”resource”, section:”D8″}

The example below is using these definitions and accessing book.genre and printing it out here:

resource

Make an Object literal

An object literal is a comma-separated list of name-value pairs wrapped in curly braces. They are used to make things tidy and avoid using globals.

An example would be var book = {type:”Atlas”, genre:”resource”, section:”D8″};

Accesscing JavaScript Objects

Note that there are 2 different ways, using property.propertyvalue or property[“propertyvalue”].

Ex: book.genre or book[“genre”]

Actions, or Methods, can be done on objects

These are stored inside of properties as function definitions.

Take for example, D8-C is actually a function that is combining two properties together. The function is then going to return them as one.

var book = {type:”Atlas”, genre:”resource”, section:”D8″, row:”C”, location:function() {return this.section + “-” + this.row;}};

The JavaScript is working below:

An Atlas is a part of the resource collection, found in D8-C.

It is important to note that the function needs to include () otherwise it won’t work. Ex: location.function()

JavaScript Instantiation

There are 4 types of instantiation:

  1. Functional Instantiation
  2. Functional-shared instantiation
  3. Prototypal instantiation
  4. Pseudoclassical instantiation

More about these coming soon…

Week 5 – CSS Styling with JavaScript and more CSS

Standard

This week I taught my group about using JavaScript to use CSS styles, and how you can add or remove them as well. I found it super fascinating, and below you can see my notes:

Setting CSS Styles using JavaScript

You can use JavaScript to directly set a style on an element, and you can also use JavaScript to add or remove class values on elements which will alter which style rules get applied.

Why would you want to use JavaScript?

  • You want items to change in style as people do things, not just when they load.
  • While CSS does offer pseudo selectors (ex: hover), they are not numerous and limited.

Two ways to style with JS

  1. Set a CSS property directly on the element
  2. Remove or add class values, which can add or take away style rules

Style Directly

  • You can select only one by using a class or id and targeting it
  • You can select all assigned to a class and write a for loop to change it

*Pay attention to how things are written in CSS and JavaScript. Ex. font-weight in CSS is fontWeight in JavaScript. They also may need px or em to make it work.

Add or Remove Classes

  • Can use classList API (see resources for more info)
  • Use add or remove
  • Useful with CSS that is already set

Example Code

http://codepen.io/jnetlar4/pen/JGeGOX

Resources

https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm

https://developer.mozilla.org/en-US/docs/Web/API/Document

https://www.kirupa.com/html5/using_the_classlist_api.htm


I also learned more about animation, transitions and transforming with CSS3. I feel like I have a solid grasp on it now and am working on a card flip action that can be used on our group app (a study card app).

Week 4 – AJAX and deciding functionality

Standard

AJAX

Jumping into AJAX this week as my teaching topic was definitely not easy. I have a very basic understanding of JavaScript, so it became extra difficult to pull apart the different parts of code. However, I did a lot of readings and tried many examples to get started. Here are some notes:

What is AJAX?

It is basically a way to enrich what the viewer sees, but adding new information to a page without refreshing it entirely.

In short, Ajax gives you the benefit of server-side dynamic content while still looking like client-side dynamic content.”

Why is it valuable paired with remote services?

“A rich client experience coupled with services accessible anywhere on the Internet.”

How is it done?

Uses XMLHttpRequest DOM API, and is done through a GET or POST.

GET grabs information, and POST is useful when getting information from the user and working with it.

Resources

http://www.w3schools.com/ajax/

http://www.ibm.com/developerworks/library/wa-aj-webservices/

http://www.w3schools.com/xml/dom_http.asp

https://web-design-weekly.com/2014/08/18/ajax-without-jquery/

http://www.tutorialspoint.com/ajax/index.htm

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started


 

App Functionality

My team decided to meet up an extra time this week to get a head start on our app, and walk through what we actually wanted it to do. This was very helpful because each of us has had various experience with study card type applications and had slightly different visions. It was also great to learn from each other what we thought was possible or how something could be accomplished. I feel like our project is much more obtainable at this point and I am excited to practice things that will be applicable.