DEV Community: Njeri Cooper

What Are The Best A11y Resources/Tips?

Njeri Cooper — Fri, 27 Dec 2019 17:25:24 +0000

What are some of the best tips for making sites accessible and A11y compliant? Do you only use semantics? Aria roles; do you toggle them on/off in Javascript, visible/ hidden in CSS? Is there an end-all-be all resource for web accessibility?

Personally, I use these tools when checking the accessibility compliance of the web apps I build:

Accessible color palette builder

This elm based prototype helps designers build color palettes that conform to accessibility standards. Check out the project's website here.

Accessibility Archives From My Favorite Dev Sources:

- CSS Tricks

- MDN

- (Some people won't agree, but) W3

- Talking to Other Devs

Specifically ones that work on web accessibility at work everyday. Shout out to VWC and all the troops that help me be a better developer everyday.

Drop links and personal experiences below.

Landing Page Demo

Njeri Cooper — Tue, 24 Dec 2019 21:06:46 +0000

Building out a landing page for a side project. Please drop comments, constrictive criticism, concerns below.

Preview the live version here

Njeri Cooper

@njericooper

"Landing Page Demo" by @njericooper #DEVcommunity dev.to/njericooper/la…

21:07 PM - 24 Dec 2019

0 0

Also, happy holidays 🎄 🎄

Can Callback URLS Be Any URL?

Njeri Cooper — Tue, 26 Nov 2019 23:16:33 +0000

I’m building 2 bots. One with Twilio and the other with Twitter. A lot of docs say to use a service like Heroku or ngrok for callback URLs, but one problem - they go to sleep and must be restated or on a paid tier for continuous use.

Can I just make a page using one of my own domains or a firebase server as a callback?

A First-Timers Guide to Navigating Tech Conferences

Njeri Cooper — Mon, 11 Nov 2019 21:36:47 +0000

Last week, I attended CascadiaJs in Seattle, WA. It was my first major tech conference, meaning that I had to catch a plane and stay in a different city for more than 48 hours. Here are my key takeaways from the event and how I plan to navigate the next tech conference I attend.

Travel Day

I traveled over 1,000 miles to get to the conference location. I thought I knew how to pack light - I was wrong. Here's what I would do differently next time:

- Under pack

My bag was packed to precision, bursting at its seams with ranger-rolled t-shirts and socks. On the way back home, it was a hassle to take my laptop out for TSA security screening.

I had the exact amount of outfits I thought I needed and left no room for new swag. I will not bring any additional shirts or jackets when I go to the next conference. One pair of pants and a few pairs of undergarments is enough. Seriously.

- Buy a neck pillow

Sleeping on the plane was impossible for me because I sat in front of an emergency exit. As a result, I could not adjust my seat for comfort. Lower back and neck pillows would have been lifesavers.

Here are a few things I got right:

Double checking flight info

I went to the airport's websites and entered the flight number to make sure I saved a file in my note app with all the details I needed. A screenshot of my ticket confirmation, a typed out flight number so Siri could have access to my flight info, and events saved in my calendar app with the correct timezones.

Wearing a light jacket

I have an old military jacket that I always wear when I travel so I can put any additional toiletries there and keep my phone and wallet secure when going through screening lines. It's a lot easier put on and take off than a hoodie.

Wearing comfy walking shoes

I never know what weather to expect when I land, so I always wear easy slide-on footwear that will keep my feet dry in the rain.

Using a charging backpack

This is a new one for me. Not only did I keep my phone above 80% the whole trip, but I also got a lot of questions and compliments about how cool and weird it looks.

Check out the life-changing bag here.

First Encounters

My first encounter with people that were attending the conference was at the "Speakers Dinner". I had not done research on everyone that would be there and had no clue who I was sitting directly next to. Good thing I was tired from the flights and didn't have much energy to say anything silly. Next time, I'll be sure to:

Have some energy

I don't like how processed energy drinks are, but B12 vitamins, some pure honey or ginseng would have definitely helped me not be such a drag at 6 pm.

Exchange info

I usually wait a while before asking someone for their Twitter handle, but because I'm growing a network, I realized that I should have connected with people I talked to asap. At the end of a conversation/ interaction with someone new, I tried to always add a "Would you mind if I connect with you on Twitter?" at the end.

The Conference Days

There were events planned the whole week, but I was only in town to catch the two-day conference. If I were local, the extracurricular days would have been fun to check out.

I'm the type that feels content with arriving at a location safely and figuring the rest out as I go, but in the future, I will:

- Know how to get to the venue

I was not sure of the name of the venue or its address. I would not have worn so many layers if I'd known it was a mile hike uphill from where I was staying.

- Research the venders, sponsors, and speakers

CascadiaJs had a beautiful website with the full event schedule, sponsors, organizers, and attendees on the home page. I used it as a resource multiple times an hour to check what talk was coming up, where engineer meetings were being held, what the vegetarian option was for lunch, etc.

The tools on the website made it easy to connect with speakers, view job opportunities, and build more rapport with attendees.

One cool platform I learn about via the conference is FizBuz, an inclusive and recruiter-free networking platform for developers.

- Take more notes

A pen and paper would have been a bit much to keep up with, but I could have definitely used my favorite writing app, Drafts. It has Markdown support, publishes directly to your preferred CMS, and allows cross device-syncing.

- Prepare to speak with managers

I loved how there were built-in times to meet with hiring managers and recruiters. On the website, there was a TypeForm that let me pick which companies I wanted to speak with the most. I had a few questions in mind before I sat down for my chats that revolved around their codebases, work-life balance initiatives, inclusion in the workplace, and expectations for new hires.

- Talk to more people

Sometimes walking up to someone and saying, "Hello" is not as easy as it sounds. I get it. However, in the comfort of a tech conference around nerdy nerds, hopefully, some introverted social anxiety melts away while sipping the unlimited coffee.

I tried to remind myself that I was there to make new connections that could lead to a new software engineering position. This kept me chatting it up with the nearest person I could spot that wasn't wrapped up in their phone or in another conversation.

- Prepare to ditch dev talk

One aspect I didn't know to expect was the after conference social settings. Both days closed with a sort of after-party. Just what was needed after a long day of networking.

Thank you to the organizers of CascadiaJs, the awesome new friends and mentors I met, the boatload of opportunities that lay before me, and you, the reader. You're awesome. Please connect with me via Twitter.

I'd like to give a very special thank you to Jerome Hardaway and all of VetsWhoCode for making it possible for me to attend and teaching me cool nerd things. Help veterans learn how to program Javascript by supporting #HashFlag Swag

What was attending a tech conference like for you the first time? Do you have any pre-conf rituals?

Njeri Cooper

Njeri uses the web to educate, innovate, and create. Feel free to send Njeri a message here.

Twitter | | CodePen | | Github

Njeri Cooper

@njericooper

Wrote a post about my key takeaways from #cjs2019 and some "note-to-selfs" for next time.

Happy Veterans Day to the troops @VetsWhoCode 🇺🇸

dev.to/njericooper/a-…

#DEVcommunity

21:41 PM - 11 Nov 2019

0 0

3 Powerful Tips for a Developer's Portfolio

Njeri Cooper — Fri, 02 Aug 2019 11:18:23 +0000

Over the last 4 months, I've built and scrapped 3 versions of my personal website. It was missing a lot of stuff and I wasn't able to figure out exactly what without guidance. After reading several books and taking courses, it was clear that my website was basic. It had no special web technologies. It would not help me become the developer that's behind the title. The process was meticulous, but I learned the significance of having a personal portfolio. Here are the key takeaways from my journey:

Select All + Delete and Start From Scratch

Sometimes we become attached and get married to our visions and ideas. Over these 4 months, I've learned that most ideas suck and the vision may not serve the projected end user. My site wasn't live. It had no monthly traffic. There were no backlinks directed to it, so instead of trying to put Fabreze on the poop pile of my site, I nuked it. When I started over, each time I had more knowledge, skill, and technique than the last time.

Use Your Best Tools

I got comfortable with showcasing relevant tools and technologies, but not overdoing it. It didn't make sense to have a dropdown menu with aria states or an animated CSS email form. 😔 Instead, I made a beautiful button that linked to my CodePen projects. That made more sense because that's where I've put these types of projects on display. The nav bar I wanted to use had transitions and lots of Javascript to show off my arrow function skills. Woefully, I had to be okay with using Javascript sparingly.

Create your site with the languages and tools you want to be hired to use.

Be The Product

I love creating... for other people. I had a hard time becoming and making my website the product. It took an old school product design session of outlining the user personas and their tasks to drive it home for me. I am what the user wants to see. My image, title, and skills needed to be above the fold, not below like when I'm creating other things.

Bonus: aSk FoR hElp

As a junior dev, I'd have to be psychic to know what exactly hiring managers are looking for. Either that or I'd have sat in on interviews or had senior dev workload. I haven't done that, but I do know a few devs I could have critique my projects.

You may not want to bother your super smart and busy network with something as simple as a portfolio. If it means leveling up into the next tax bracket, eh. Remember, there's no such thing as a stupid question. You know what they say, "better safe than under valued."

Check out my portfolio on Codepen

Or on Github

njericooper / My-Website

Code for my personal Website. I'm back, f*ckers

Tools used

CSS Grid
CSS Flexbox
SMACCS
JS Date() Object
Aria roles
Accessible color palette builder (visit the Github project here)
Serverless (Hosted on Firebase using Cloud functions)

Design Inspiration

Cartoon TV show:

Steven Universe
- Character: Garnet
  - Gems: Sapphire and Ruby

Njeri Cooper

I use the web to educate, innovate, and create. Feel free to send me a message here.

Website | | CodePen | | DevTo

View on GitHub

What are some must-haves on your website? What do you look for on candidates portfolios? Please, share below.

Njeri Cooper

I use the web to educate, innovate, and create. Feel free to send me a message here.

Website | | Twitter | | CodePen

The Emotional State of a Developer, a Question

Njeri Cooper — Mon, 08 Jul 2019 03:57:15 +0000

What’s the first thing you think and feel when you’re debugging or building something new and realize that the solution is not searchable. It may take an hour to even figure out what the underlying issue is, let alone fix it. Me? I typically get overwhelmed by the 40 tabs of Stack Overflow I have open.

Valerie Phoenix 🌻🍯 🐝

@digitalblkhippy

Tech update: TDD actually means Tear Driven Development. Methodology used by devs who need an emotial release

Alt: Alice from Alice in wonderland crying large tears

16:31 PM - 07 Jul 2019

0 6

7 Must Haves for Web Accessible HTML in Your Site ❤️️ [Template]

Njeri Cooper — Sun, 30 Jun 2019 23:25:34 +0000

Lots of developers are building their own personal blogs, brands, and working on side projects. What better way to strengthen development skills than incorporating the best web accessibility practices into each web app? At the time of writing, these are some of the best ways to make a site accessible to the visually and physically impaired:

1. Aria Roles, States, and Properties

ARIA stands for accessible rich internet applications. These applications are a list of attributes that communicate with a subset of the DOM called the accessibility tree. The accessibility tree is a more simplified rendering of a website. Some may call this the "shadow DOM". This version is readable by screen readers and focusable for keyboard users.

Assigning the correct role property to an HTML tag lets ARIA file its intended function. It's important to not use abstract terms when defining roles. There are a few types of roles that serve the purpose of structuring a site for the DOM and the accessibility tree. The types of roles and a few examples of them are:

Landmarks
- Navigation
- Search
- Banner
- Main
Widgets
- menuitem
- tab
- textbox
Document Structure
- article
- img
- row
- toolbar

An alphabetical list of all ARIA roles and their definitions can be found in section 5.4 of The Roles Model by w3. Below is an example of what appropriate roles would look like for a nav bar.

<nav role="navigation">

    <ul role="menu">

        <li>

        <a href="" role="menuitem">Home</a>

        </li>

        <li>

        <a href="" role="menuitem">About</a>

        </li>

        <li>

        <a href="" role="menuitem">Contact</a>

        </li>

    </ul>

</nav>

In addition to ARIA roles, there are states and properties which have values that give HTML tags characteristics. These values can be a boolean, number, token, etc., and globally define elements on the DOM. For example, a menuitem widget can have the state of "hidden" that is changed on hover. A use case for this may be a dropdown menu that becomes visible when focused on with a mouse or keyboard selection. Here's what would be placed inside of the html tag

aria-hidden="true"

Another ARIA attribute that may be used in a nav bar is aria-owns. To let the DOM now that the menu item has a parent child relationship with the menu items nested under it.

<nav role="navigation">

    <ul role="menu">

        <li>

            <a href="" role="menuitem">Home</a>

        </li>

        <li aria-owns="child-item">

            <a href="" role="menuitem">About</a>

        </li>

            <ul id="child-item">

                <li>

                    <a href="" role="menuitem">My Mission</a>

                </li>

                <li>

                    <a href="" role="menuitem">Portfolio</a>

                </li>

            </ul>

        <li>

            <a href="" role="menuitem">Contact</a>

        </li>

    </ul>

</nav>

Assigning ownership would help to set the DOM and accessibility tree structure. This is useful in the event that some of the HTML becomes unordered.

Here's a list of all official aria states and properties.

2. Semantics

One of the dangers of ARIA is that developers can make the whole accessibility thing a catch 22.

Sometimes, we create elements on a website just to get it up and working. The thought of completing a project with urgency is appealing. Doing this results in poorly written code that just "works". It will boost user experience if the HTML tags correspond with its intended function. The most common example of what I mean is using a span, div, or text element as a button instead of using the button tag. This is a misuse that overrides the accessibility definitions already in place. To quote Steve Faulkner "No ARIA is better than Bad ARIA".

// Detect dark theme var iframe = document.getElementById('tweet-946370347389128704-354'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=946370347389128704&theme=dark" }

3. Alt Text

Alt text is short for alternative text. The alternative text is not visible to the user, but holds information about its link or image. It can be a description or an attribute. It is available to screen readers and search engines to index images and links.

On my website, I add alt text with my name, what I do, and image descriptions.

4. Media with Lazy Loading

Lazy loading is a native feature in the Google Chrome browser. It allows for images to be loaded only when you look at them. This is awesome because images and videos don't pre-load and down the page’s speed. To use the lazy loading feature use this code in image HTML tags:

loading="lazy"

There is Javascript that adds cross-browser support. To learn more about lazy loading for other browsers, check out this article by Addy Osmani.

5. Sections

Implementing sections into a website helps to separate the different types of content. Sections could be landmark tags like search, side bars, main content. Section tags let assistive technologies know that the developer is making a "region" on a page. On my website, I use it to make "about me" separate from "what I do". The structure looks like this:

<div role="main">
<section class="section section-1" id="who" >
  <div class="who" >
    <h2 class="title">Who TF is Coop?</h2>
    <p>Demo Text</p>
  </div>
</section>
<section class="section section-2" >
  <div class="what" >
    <h2 class="title">What</h2>
  </div>
</section>

To learn more about the region role and how it's used and classified by ARIA, check out this MDN page.

6. Tab Index

Some web users navigate a website by only using a keyboard. Up and down arrows scroll, the tab key focuses on links, buttons, and selectable page elements and the enter key selects. Modern browsers have keyboard focus built in. If a web browser cannot detect the portions on a website that should be clicked on or hovered over, use tabindex. Tabindex sets an order or hierarchy to selectable items on a page. The default value is 0. This means that everything is equally important and will be ordered from left to right for rows, then up and down for side menus or columns. Change the value of tab index to match the page's layout and ensure for the easiest navigation

7. Inclusive Design

I've learned that the best way to make sure a website is accessible is to use all the features. Try turning on voice over, screen readers, or using your keyboard to get around your website. Being aware is the only way that we as humans can make sure our web apps are accessible to everyone.

Full Homepage Code Template

<!--begin nav bar-->
  <nav id="nav" class="nav" role="navigation" >
    <ul class="navbar" role="menu">
      <li>
        <a href="#home" role="menuitem" alt="home" tabindex="0">Home</a>
      </li>
      <li>
        <a href="#who" role="menuitem" alt="Who is Njeri Cooper?" tabindex="1">Who</a>
      </li>
      <li>
        <a href="#what" role="menuitem" alt="What does Njeri Cooper Do?" tabindex="2">What</a>
    </li>
    <li>
      <a href="#contact" role="menuitem" alt="Contact Njeri Cooper" tabindex="3">Contact</a>
    </li>
  </ul>
</nav>
<!--begin main content section-->
<div role="main">
<section class="section section-1" id="who" >
  <div class="who" >
    <h2 class="title">Who TF is Coop?</h2>
    <p>Njeri Cooper is a front end web and iOS developer. Lorem Khaled Ipsum is a major key to success.</p>
    <p>They don’t want us to win. I’m giving you cloth talk, cloth. Special cloth alert, cut from a special cloth.</p>
  </div>
</section>
<section class="section section-2" id="what" background="https://vignette.wikia.nocookie.net/steven-universe/images/e/ed/Steven_the_Swordfighter_Cloud_Temple_Background.jpg/" loading="lazy" alt="Cloud Temple Image From Steven Universe">
  <div class="what">
    <h2 class="title">What</h2>
    <div class="links" id="contact">
      <a href="http://github.com/njericooper" alt="Njeri's Github" tabindex="4">git</a>
      <a href="https://dev.to/njericooper" alt="Njeri's tech blog" tabindex="5">dev to</a>
      <a href="https://twitter.com/njericooper" class="last" alt="Njeri's Twitter" tabindex="6">twitter</a>
    </div>
  </div>
</section>
</div> <!--end main content section-->
<div class="email-container">
  <div class="email_container">
      <form id="singular-form" role="form">
          <button class="shown" type="button" id="trigger" role="button" tabindex="7">Notify me</button>
          <div id="input-container">
              <input type="text" placeholder="E-mail">
              <button type="button" role="button" tabindex="8">Send</button>
          </div>
          <div id="success">Thank you!</div>
      </form>
  </div>            
<!--Footer-->
<footer class="footer" role="contentinfo">
    <p>©2019 OG Codes</p>
</footer>

Njeri Cooper

Njeri uses the web to educate, innovate, and create. Read her authentic student to freelance dev story. Feel free to send Njeri a message here.

Twitter | | Pinterest | | Instagram

Storing Local Data with Javascript

Njeri Cooper — Tue, 25 Jun 2019 00:22:56 +0000

I'm trying to store a table's data locally. I'm a bit confused about where I should store the cells; in an array? Will the array return each cell in the correct row index? How should I set the local data variable if I'm passing rows and a table as the arguments?

In my code, the table creates a new row from user input. When I refresh, the table goes away. I'd like to keep the table from the previous session.

Here's what I have so far:
(press the play button to run the code)

I Was So Wrong About Web Accessibility That it's Laughable!

Njeri Cooper — Fri, 14 Jun 2019 01:00:31 +0000

Yesterday, I got my first ever product based coding challenge. The challenge was to develop a web app that allows for accessible nav bar usage. I used to think that making something web accessible meant that I used a good color scheme. And that’s all. I believed it was that simple. Here's my crappy, old accessibility thought process:

Use high contrast between the text and background color. The nav, main content area, and footer counted as one background.
Use Alt-Text for things I wanted to be indexed.

That's incorrect and not what web accessibility is about at all.

Here's the challenge ToDo's from VetsWhoCode's "code-challenge" slack channel:

Add correct ARIA rules
Ensure text is a readable size
make the tabs on the navigation bar focusable
Foreground/Background color ratio is at least 4:1
Make sure that there is action to let users know which parts of the navigation bar is interactive
Ensure that drop-down is focusable, also dismissable while on hover/focus.

I was an hour late seeing the challenge and noticed no one had posted solutions. I wanted to be the first student to get something up that worked. I dove into the deep science of web accessibility protocols, rules, and tools. Here's what I've learned so far:

ARIA stands for Accessible Rich Internet Applications. These applications assign roles, controls, and state definitions. ARIA is a set of attributes that work with a subset of the DOM known as the accessibility tree. The accessibility tree is not seen. It is keyboard controllable and screen reader friendly. It can also have nonvisible features that provide an even more unique experience.

ARIA supplements HTML by telling the accessibility tree where items are. The ability to interact with a web page element is also indexed. Here's an example of a nav bar with ARIA roles, tabindex, and the expanded attribute.

Tabindex gives the user the ability to tab over to and select menu items with their keyboards. The values that tabindex can be set to determine which order the items are listed in.

Aria-roles lets the accessibility tree know what functionality an element has. What if I used an icon as a button? I would set the role="button".

For the challenge, I had to create a dropdown nested inside of the nav bar. I used aria-expanded="false" as a default state for the items I did not want visible until the user interacts with it. Expanded true false is a unique attribute that calls for toggling using JavaScript. Here's a sample of a function that accesses two HTML elements and sets their attributes:

This function passes two arguments; "dropDown" and "dropDownParent". The arguments go through an if/else loop that changes the CSS visibility state of the drop down. The truth or falseness of aria-expanded is also changed at the same time.

The corresponding CSS for the focused, active, and hovered states set the drop down to visible.

There are better working examples of ARIA and web accessibility. Although its a work in progress, check out my navbar on CodePen.

I still haven't completed the challenge. I would like to discuss and learn more about how to provide the best user experiences to all users. Please tell me stories about and share examples of how you've used ARIA.

Where I learned about ARIA roles:
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-controls
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
https://www.youtube.com/watch?v=qdB8SRhqvFc

Coding Challenge from #VetsWhoCode's slack channel. They're a veteran-owned non-profit that teaches veterans JavaScript. Learn more about them, apply for their program, or donate here: www.vetswhocode.io

Reach out to me on Twitter

Njeri Cooper

@njericooper

My latest cry for help includes a 5-day obsessive-compulsive water fast over a book and an unfinished code challenge. Read or watch about it in my latest post dev.to/njericooper/a-…

01:00 AM - 14 Jun 2019

0 0

Responsive Contact Page with Animated Email Input

Njeri Cooper — Fri, 07 Jun 2019 20:20:07 +0000

I used to wonder how important it was to have individual pages versus a single scroll site. After learning how the DOM worked, I realized that pages are better for search engine indexing.

A functional contact page usually has:

A form where visitors can message you
An email address
Your social media handles
Your business location (or at least your country)
Necessary information including hours of operation
Any other form of contact

This contact page is simple and responsive for mobile. Check out the code below.

HTML:

CSS:

Check it out on CodePen:

I love learning and connecting. If you have any tips to share, please comment below or reach out on Twitter

If you haven't checked out the previous parts of "Building a Blog", check out parts 1, 2, and 3:

CSS Flexbox Nav Bar - Building a Blog, Part 1

Njeri Cooper ・ May 16 '19

#css #webdev #flexbox

CSS Flexbox Hero Image with Parallax Scroll - Building a Blog, Part 2

Njeri Cooper ・ May 23 '19

#css #flexbox #webdev #showdev

CSS Flexbox Javascript Image Slider - Building a Blog, Part 3

Njeri Cooper ・ May 30 '19

#javascript #flexbox #webdev #showdev

// Detect dark theme var iframe = document.getElementById('tweet-1137095145889914886-804'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1137095145889914886&theme=dark" }

CSS Flexbox Javascript Image Slider - Building a Blog, Part 3

Njeri Cooper — Thu, 30 May 2019 20:45:46 +0000

In opposed to building a smooth scroll, single-page site, this week I added separate pages for my blog. This javascript carousel uses simple indexing logic. The images include CSS for overlay text and the HTML is easy to expand on and adapt to your own project. Here's the code I used:

HTML

Before, I used the CSS "background-image" property for all my images until I learned that was poor for SEO. This time, I embedded the images into the HTML instead of adding their URLs in the CSS.

In the "plant-carousel" container, I added another div with utility classes. Utility classes hold properties that may appear in more that one place on a website. (For example, if I wanted all headers to be 20px above paragraph text, I would make a "space" class. In my CSS, I would use the "." selector to style the class like this: .space{ padding-bottom: 20px;})

The utility classes I made add sliding and fading animations. We'll take a look at what those classes do in the CSS and JS files. For added ease in styling the text, I gave the captions their own class. Once I closed the carousel div, I added tags for the next and previous arrows. Below the images, I created a container for indexing. This container holds the individual dots that represent each image's place.

CSS

Since the captions will overlay the images, I added a flex display to the "plant-caption" class. I centered everything and made sure the width was 100% so that it will span the full width of any screen. The "plant-carousel" class is styled in a flex row to keep the arrows and captions horizontally aligned in the container.

The styling for the images and the arrows is pretty standard. I want to highlight the "fade" and "slide" classes before I move onto the moving pieces of Javascript. "slide" has one property with the sole purpose of keeping all the images hidden until they get called to show. I struggled with a cluttered screen until I figured out how this one line could fit into an image slider. I set the display to "none" and BOOM. When the page loads and is re-loaded, the display resets. The images fade onto the screen. It takes 1.5 seconds to bring them from 0.4 opacity to a completely visible 1 opacity property setting.

Javascript

There has to at least be one image in the slider for it to work, so I set a variable to hold the place. Next, I defined what the next slide would be. It sets value of the previous slide to the current slide's indexed value plus the next slide's value. It looks like this when extended:
slideIndex = slideIndex + n (n represents the showing images in the slide's index which is also 1).

"currentSlide" sets whichever slide showing to 1 so that the slider will loop without coming to an end.

The "showSlides" function increases the showing slide along with its corresponding. The slides are set to "active" when the next or previous button is pressed.

TL:DR Check out the CodePen of an image carousel I made using Javascript and flexbox.

Connect with me on Twitter to talk more dev stuff. If you haven't checked out the previous parts of "Creating a Blog", check out part 1 and part 2:

CSS Flexbox Nav Bar - Building a Blog, Part 1

Njeri Cooper ・ May 16 '19

#css #webdev #flexbox

CSS Flexbox Hero Image with Parallax Scroll - Building a Blog, Part 2

Njeri Cooper ・ May 23 '19

#css #flexbox #webdev #showdev

// Detect dark theme var iframe = document.getElementById('tweet-1133802471871176706-720'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1133802471871176706&theme=dark" }

CSS Flexbox Hero Image with Parallax Scroll - Building a Blog, Part 2

Njeri Cooper — Thu, 23 May 2019 16:40:14 +0000

Flexbox is a CSS tool used to layout parts of pages on the web in either a row or column. In my previous post, I highlighted some key aspects of flexbox and how to use it to make a nav bar for a blog. Check out the post here. I added a media query that turns the bar layout into a hamburger menu for screens smaller than 768px. Check out the code for the responsive flexbox nav + hamburger menu here.

Below the menu, a site usually has some imagery or headlining text elements to intro the content on the page. For my blog, I created a flexbox hero image with a parallax scroll. Parallax is an effect that fixes a part of a webpage to the background while other elements scroll over it.

Here's the code I used for my Hero Image:

HTML:

CSS:

I created a div tag with a class "hero-image" to be the container for the image, text, and scroll effect. This container's CSS displays flexbox in a column. The result affects the text and any other elements put inside of the div with the "hero-image" class.

The background image

For design purposes, I created a 0.5 linear-gradient to put over the image to help the text stand out. The image is set to not repeat, to cover the full width, height and fixed to the center of its container. The image will take up 50% of the screen, but for smaller devices, I've set the minimum height to 15em (or 240px).

The text

I set both the header and sub-text to align center by editing the "hero-text" class.

If you have other cool implications of flexbox,reach out to me on Twitter
// Detect dark theme var iframe = document.getElementById('tweet-1131599514538786816-273'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1131599514538786816&theme=dark" }

DEV Community: Njeri Cooper

What Are The Best A11y Resources/Tips?

Accessible color palette builder

Accessibility Archives From My Favorite Dev Sources:

- CSS Tricks

- MDN

- (Some people won't agree, but) W3

- Talking to Other Devs

Landing Page Demo

Can Callback URLS Be Any URL?

A First-Timers Guide to Navigating Tech Conferences

Travel Day

- Under pack

- Buy a neck pillow

Here are a few things I got right:

Double checking flight info

Wearing a light jacket

Wearing comfy walking shoes

Using a charging backpack

First Encounters

Have some energy

Exchange info

The Conference Days

- Know how to get to the venue

- Research the venders, sponsors, and speakers

- Take more notes

- Prepare to speak with managers

- Talk to more people

- Prepare to ditch dev talk

Njeri Cooper

3 Powerful Tips for a Developer's Portfolio

Select All + Delete and Start From Scratch

Use Your Best Tools

Be The Product

Bonus: aSk FoR hElp

Check out my portfolio on Codepen

Or on Github

njericooper / My-Website

Code for my personal Website. I'm back, f*ckers

Tools used

Design Inspiration

Njeri Cooper

Njeri Cooper

The Emotional State of a Developer, a Question

7 Must Haves for Web Accessible HTML in Your Site ❤️️ [Template]

1. Aria Roles, States, and Properties

Landmarks

Widgets

Document Structure

2. Semantics

3. Alt Text

4. Media with Lazy Loading

5. Sections

6. Tab Index

7. Inclusive Design

Full Homepage Code Template

Njeri Cooper

Storing Local Data with Javascript

I Was So Wrong About Web Accessibility That it's Laughable!

Responsive Contact Page with Animated Email Input

HTML:

CSS:

Check it out on CodePen:

CSS Flexbox Nav Bar - Building a Blog, Part 1

Njeri Cooper ・ May 16 '19

CSS Flexbox Hero Image with Parallax Scroll - Building a Blog, Part 2

Njeri Cooper ・ May 23 '19

CSS Flexbox Javascript Image Slider - Building a Blog, Part 3

Njeri Cooper ・ May 30 '19

CSS Flexbox Javascript Image Slider - Building a Blog, Part 3

HTML

CSS

Javascript

CSS Flexbox Nav Bar - Building a Blog, Part 1

Njeri Cooper ・ May 16 '19

CSS Flexbox Hero Image with Parallax Scroll - Building a Blog, Part 2

Njeri Cooper ・ May 23 '19

CSS Flexbox Hero Image with Parallax Scroll - Building a Blog, Part 2

HTML:

CSS: