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.

Advertisements

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