jaredcunha

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.11.0/js/uswds-init.min.js" integrity="sha512-bXbQXDDedg6Yq2zDO+94e2vhkI3yDQd3Qj3VyGMa958ZudBTkluWOBuB+QXTGxzuaGY3Yd88zZ7IbG5iccGNeA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.11.0/js/uswds.min.js" integrity="sha512-iB+Jnsmqy/4btjAOX424dJkDi7zN9ImOVvfOeAavbGqn4cCnzhuClPp25n7seSQKDjICJfalBScdUbg9zcs9tQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.11.0/css/uswds.min.css" integrity="sha512-Hc40xGRxbM2Ihz8tDtmRmhHtAzGzlpaHIwOniSb8ClzBIe5mTrW5EEG552LBrp1gELfd+iXJzAtGEUGEvs77NA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

jaredcunha

Front-end Engineer

Responsibilities

• Collaborate with the product team, government/client stakeholders, and other contractors to build new systems and make improvements to existing systems
• Write verifiably accessible code, always
• Design and spec out major functionality
• Participate in planning, including breaking down requirements into tasks
• Test software development methodology in an agile environment
• Work alongside other engineers on the team to elevate technology and consistently apply best practices
• Work with designers to review solutions for technical feasibility and accessibility

jaredcunha

Collaborating for Accessibility

Here are some links and resources that I discussed during the presentation.

Find Me on Social Media

• Twitter
• Instagram
• LinkedIn
• Glass Photo

jaredcunha

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  const anchorTargetId = anchor.getAttribute("href").replace("#", "");
  const anchorTarget = document.getElementById(anchorTargetId);
  if (anchorTargetId.length) { // if statement gets around errors with href="#"
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        anchorTarget.setAttribute("tabindex", "-1");
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });

jaredcunha

rm -rf _site
bundle exec jekyll build
cd _site
git init
git remote add origin https://github.com/[username]/[repo_name].git
git checkout -b gh-pages
git add -A
git commit -m "update site"
git push -f origin gh-pages
cd ../

jaredcunha

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

jaredcunha

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

$gutterWidthPx: 20;
$columnWidthPx: 60;
$gridWidthPx: 940;

@function calc-cols($target) {

jaredcunha

/* Caculate the end grid details */
$gutterWidthPx: 20;
$columnWidthPx: 60;
$gridWidthPx: 940;

@function calc-cols($target) {
  @return 100% * (($target * $columnWidthPx) + (($target - 1) * $gutterWidthPx)) / $gridWidthPx;
}

/* Caculate the gutter */

jaredcunha

module.exports = function(grunt) {

    "use strict";

    // -------------------------------------------------------------------------
    // #### Load plugins as needed ####
    // Using a 'just in time' approach -- meaning: only load plugins when they
    // are needed -- this will automatically find, then load, any and all
    // plugins that are needed by the task currently being executed. It will
    // scan the devDependencies object, in package.json, and match any of the

jaredcunha

/* 
 *  Scroll Logic
 */

var active = false;
var lastElement, nextElement;
window.addEventListener( 'scroll', onScroll, false)

function onScroll( event ) {