Forem: Louise Fitzpatrick Hayes

A11y

Louise Fitzpatrick Hayes — Fri, 15 Mar 2019 18:52:46 +0000

Web Accessibility: also known as A11y (a numeronum A(11 chars)Y pronounced ally.

I went to an A11y talk by Alex Brenon who is a member of the accessibility github team.
Her slides are available here

She talked about the less obvious use cases for making your site more accessible as well as the hearing and site impaired.

Is it important to consider the cases where a site may be difficult to use.

The standards for accessibility are set out by

. W3CAG: pronounced wocag.
. WAI
. W3C

Some non obvious cases to affect a sites use is:
. Low internet speed
. Temporary injuries people get, can’t type for a while

Everyone benefits from it.

Tota11y is common tag, as well as #a11y

Highlights from the overview:
Alt-text: description should be good, but not too wordy just important parts
Also helps with SEO (search engines)
Screen readers read the alt tags.

If Slow network the alt shows us first so everyone gains.

Never use words such as 'pic of' or 'image' in alt text

W3c site helps create a ratio for colour ratio: higher the better
AA - levels of how much you are conforming to standards
AAA - full set

Think about how Perceivable you site is:
Colours / alt text

Is your site Operable?

i.e. Keyboard friendly without mouse and Tab index accessibile and it makes sense sequentially and the Ordering: make sure there are Skiplinks at the top of page, brings you to the main content, without the navigation.

The 3rd step of wcag is making your site understandable.

Lang attribute in header, and when language changes within content
With span.

Final thing is Robustness
Good Html practices , Tag id once only, classnames clear.

Check your site with an auto and manual Audit:
Wave - by webaim

Axe - a chrome extension you can add

Always check:
Can you mute the sound?
No mouse - Can you tab through
No sight - alt tags for images.

For further reading on ReactJS sites

Screen readers to check : Jaws and Nba
Other usefull tools: Chrome lense

Resources:
https://a11yproject.com/about

https://theblog.adobe.com/different-breaking-accessibility-universality-inclusion-design/

https://www.w3schools.com/html/html_accessibility.asp

Alex is available at;
@staralexb

Thanks for reading!

Git add an upstream to a forked repo

Louise Fitzpatrick Hayes — Thu, 07 Mar 2019 17:29:49 +0000

Thanks for taking the time to check this out! Please feel free to add helpful comments or feedback!

This is a mini cheat sheet that assumes you are familiar with git, and have all tools installed, and a project terminal session open in your editor.

This assumes you have forked a repo using the GIT gui.

git clone -v <git url>

To rebase your branch with the upstream branch (remote branch from which you forked your branch),

you need add the branch to your list of 'remote branches' as an upstream, adding it to the list of remote branches visable via the git branch -av command.

git checkout <your-origin-branchname> (e.g. git checkout master)

Switched to branch 'your-origin-branch'
Your branch is up-to-date with 'origin/your-origin-branch'.

git remote add upstream <remote branch url> 

e.g. git remote add upstream https://github.com/cypress-io/cypress.git

Adds the remote branch to your repo as upstream. To check this:

git remote -v

You should see:

git remote -v
origin  https://github.com/louise-hayes/Project-3-Speech.git (fetch)
origin  https://github.com/louise-hayes/Project-3-Speech.git (push)
upstream        https://github.com/peraltot/Project-3-Speech.git (fetch)
upstream        https://github.com/peraltot/Project-3-Speech.git (push)

Next, from within the your correct branch...

git pull upstream <your-origin-branch>

This Updates your branch from upstream

check all branch #'s to ensure all on same git#!

git branch -av

You will see:

your master (6266a2b) matches remote/upstream/master(6266a2b).
your /remote/origin/master (6266a2b) matches remote/upstream/master(6266a2b). These 3 repos (local master, upstream master and origin master) need to match.

git branch -av
* master                          6266a2b Update README.md
  remotes/origin/HEAD             -> origin/master
  remotes/origin/master           6266a2b Update README.md
  remotes/origin/textfile-working ead5671 added body-parser, jquery for  calls to fix /saved POST
  remotes/upstream/master         6266a2b Update README.md

Hope this helps!

Git Cheat Sheet

Louise Fitzpatrick Hayes — Wed, 20 Feb 2019 17:18:24 +0000

Best commands and steps for Error Free Git in a team.

I use this regularly in work.

I have seen projects fail when we do not have this in place and loose momentum, some of the team never get the hang of GIT because of the merge errors and issues that are easily avoidable.

I have seen teams at my UNH bootcamp a few years ago loose confidence over git.

At a recent MomsCanCode hackathon, where I shared this on day 1 of the week long project, we had seamless code sharing , and most of the team had never used git before. Our team leader @kudacoder used this and then made a Git Video to fill in the gaps for the newbie coders. Together these were invaluable. We won the hackathon with our Imposter Syndrome App called RealUp and I believe being able to share code easily was a key factor.

This assumes you have git installed locally, and have created a git repo or have a repo to clone from.

This is to hit the ground running for your first Team project, coming from coding and git commiting by yourself.

FYI - Forking is only necessary if you are not a collaborator.
After you have forked the repo (https://help.github.com/articles/fork-a-repo/) from the github Desktop GUI

git clone -v <GitForkedRepo> or <AnyRepoName>

From your project directory,

create a .gitignore file, with at least one line such as

/node_modules 
/cypress

Add in any other large npm libraries, and any credential env files you do not wish on the team shared git repo.

git status

will show you are on correct branch, which should be your branch.

Always pull down the most recent version of master before you start any changes with

git checkout master

git pull

Now you are on latest version but you can’t code in master so create or if already there switch to your branch

To switch from master to your branch (and create it, if it does not exist)

git checkout -b your-branch

or if does exist and you just need to switch to your branch….

git checkout your-branch

After making your code changes.

git add .

This adds all your changes
You can also

git add file.ext file2.ext

to add specific files only (I recommend this almost 90% of the time to avoid accidentally adding massive libraries or to check you have only changed the files you meant to).

git commit -m “desc of changes to be specific as possible”

Git push origin <your branch>

Never push to Master!!

Go to the GitHub repo in the browser now, to create a pull request.
Here you will auto have notification/check for conflicts. If no conflict merge to master and your done.
(The steps to create a pull request is…another document!).

After merging to master on the browser…

Go back to terminal of project folder.

git Status

git checkout master

This is really important - you must pull down latest master, to see your new changes that are newly merged in master and make sure you have a working app or you could have introduced bugs. Also if you don’t do this, you will be working on an older version than everyone else!
This will switch to masterbranch

BUT YOUR CODE in visual code HAS NOT SWITCHED YET!!!! This can be confusing and causes people to loose changes as they think they have latest master but they don’t.

git pull

to get what is in the master to show in visual code so you don’t end up commit older version of code

When you checkout master, you also have to pull (also FYI a pull is same as a git Fetch followed by git Merge).

This sounds complicated but believe me this works!! There are many more commands we may need to use, but this is the every day, team coding bible for me!

Following on from a git checkout master and git pull.
either create a new branch (as in step 4) or

git checkout <previously used branch>

git rebase master

Now for the final check: You need to re-test your app to make sure all looks good before starting any new dev work. So many times people don't, and the merge and the app fails for someone else on team.

Other useful commands

To remove a file you have just added via git add .

git rm -f auth.json

(This only takes the file out of the staged for committing list!)

To checkout a team members remote branch:

git fetch origin

git branch -v -a

git checkout -b branchname origin/branchname

if you need to rollback a merge i.e. after a git rebase master in your local independent branch

git checkout master

git reset --merge

To check all versions

git branch -va

To delete the local GIT branch we can try one of the following commands:

git branch -d branch_name
git branch -D branch_name

To delete a remote branch you can use the following command:

git push <remote_name> --delete <branch_name>

To rebase your branch with the upstream/forked branch

first add the remote forked branch to your remote branches as an upstream.

git checkout <your-origin-branchname> (e.g. git checkout master)

Switched to branch 'your-origin-branch'
Your branch is up-to-date with 'origin/your-origin-branch'.

git remote add upstream <remote branch url> e.g. https://github.com/cypress-io/cypress.git

Adds the remote branch to your repo as upstream , check this:

git remote -v

You should see:

git remote -v
origin  https://github.com/louise-hayes/Project-3-Speech.git (fetch)
origin  https://github.com/louise-hayes/Project-3-Speech.git (push)
upstream        https://github.com/peraltot/Project-3-Speech.git (fetch)
upstream        https://github.com/peraltot/Project-3-Speech.git (push)

git pull upstream <your-origin-branch>

Updates your branch from upstream

check all branch #'s to ensure all on same git#!

git branch -av

You will see: that your master (6266a2b) == remote/origin/master(6266a2b).

git branch -av
* master                          6266a2b Update README.md
  remotes/origin/HEAD             -> origin/master
  remotes/origin/master           6266a2b Update README.md
  remotes/origin/textfile-working ead5671 added body-parser, jquery for  calls to fix /saved POST
  remotes/upstream/master         6266a2b Update README.md

To change a commit after the fact:

git commit --amend

To unstage a file from git add (reverse the git add)
run

git status

should tell you what to do if you want to unstage files

option 1:

git rm /path/to/file

option 2:

git reset HEAD /path/to/file