JZLP Week one project

Link to our website

##Intro - Zooey show README why, what, how How did you split up the work? How did you choose to pair?

##Show your use of Github - Joey commit history PR history

##Walk through the UX - Lucy i.e. demo your website

##Walk through the code ###HTML structure - Lucy ###Flexbox - Joey ###Responsiveness - Joey ###Acccessibility - Zooey ###Images and form - Piotr ###Scroll feature - Piotr ###Javascript problem - Lucy

Why

To showcase JZLP, a team of developers who understand, communicate and deliver.

What

A one-page portfolio site that provides an overview of JZLP, including an about us section, team member profiles and a contact page.

How

Process

Discussion Day 1

set up github repo and gitter channel
group wireframe of web app
decided to go mobile first in terms of design
ran through user stories to check that our plan fitted these
- decided to use formspree.io for form
- looking at colorsafe to make sure we fulfil partially sighted readers needs
- straight up semantic html to aid accessability. no divs.
  - use aria landmarks as well as html5 elements to ensure accessability
  - set autocomplete tags to complete forms
  - make sure all is tabbable
- do we need any javascript?
  - hopefully not
Day one target: have a basic web app with placeholders by the end of today

Tasks

html structure assigned to Piotr and Lucy
work out host on github pages
inital design (enhanced wireframe) assigned to Joey and Zooey
Ensure site works with Chrome Vox --> accessible, tabbable and chrome vox accessibility, tabbable and nav with arrow keys

Stretch goals

convert profile photos to painting BeFunky Online Photo Editor
optimise rendering of images
1. Reduced file size of profile images (11MB -> 70K) by resizing and optimising.
2. Saved JPEGs as progressive images rather than baseline images. Baseline images are the "normal" JPEGs, the type of JPEG that all image programs write by default. The browsers load them top-to-bottom as more of the image information is being downloaded. Progressive JPEGs are another type of JPEGs, they are rendered progressively. First you see a low quality version of the whole image. Then, as more of the image information arrives over the network, the quality gradually improves.
Resources:
~~expand "team" member sections on hover~~
Scroll to section (can it be done with css? go with js if needed)

// Find elements in DOM
var linksDOM = document.querySelectorAll('.js-nav-link');


// Scroll to target function
var totalScrollDuration = 600;
var numberOfScrolls = 60;
var singleScrollDuration = totalScrollDuration / numberOfScrolls;

function scrollTo(targetElementPosition, scrollDuration) {
  if (scrollDuration <= 0) { return; }
  var distanceToTarget = targetElementPosition - getScrollPosition();
  var singleScrollDistance = distanceToTarget / scrollDuration * singleScrollDuration;

  setTimeout(function() {
    var scrolledElement = document.body; // chrome safari
    var positionBeforeScroll = getScrollPosition();
    scrolledElement.scrollTop = positionBeforeScroll + singleScrollDistance;

    if (document.documentElement.scrollTop === positionBeforeScroll) {
      scrolledElement = document.documentElement; // firefox
      scrolledElement.scrollTop = getScrollPosition() + singleScrollDistance;
    }

    if (scrolledElement.scrollTop === targetElementPosition) { return; }
    scrollTo(targetElementPosition, scrollDuration - singleScrollDuration);
  }, singleScrollDuration);
}


function getScrollPosition() {
  return document.body.scrollTop ||
         document.documentElement.scrollTop ||
         window.pageYOffset ||
         0;
}


// Add event listeners
linksDOM.forEach(function(link) {
  link.addEventListener('click', function(event) {
    event.preventDefault();
    var targetId = event.target.innerText; // assumes that inner text will be the same as target id
    var targetPosition = document.getElementById(targetId).offsetTop;
    scrollTo(targetPosition, totalScrollDuration);
  });
});

improve security of form submission
make each section fill screen

User stories

Build a one-page portfolio website for you and your team

We want you to work together over the next few days to build a small site from scratch that provides a short portfolio for you and your team.

To describe what features should be implemented, these are the user stories that should be satisfied;