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

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

Stretch goals

[x] convert profile photos to painting BeFunky Online Photo Editor
[x] 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~~
[x] 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
[x] 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;