Forem: Emmanuel Chucks

Modern accessible carousel (HTML, CSS, JS)

Emmanuel Chucks — Tue, 01 Feb 2022 17:15:06 +0000

Back in the day, if you wanted to include an image carousel or content slider on your website, there was much pressure to reach for third-party libraries.

They were notoriously hard to build, especially considering accessibility and keyboard navigation. Even using third-party libraries came with mixed results.

Thanks to new CSS features like scroll-snap, aspect-ratio and object-fit, you can now whip up a perfectly usable carousel in no time with minimal effort. Sprinkle in some modern ES6+ JavaScript to manage keyboard navigation and you are all set 🎉.

Basic HTML structure

Let's define a wrapper for our whole carousel and a scroll area that will hold our images.

<div class="carousel__wrapper">
  <div class="carousel__scroll-area">

    <!-- Placeholder images to work with -->
    <figure>
      <img src="https://picsum.photos/853/480?random=1" alt="" width="853" height="480">
      <figcaption>
        Place image caption here
      </figcaption>
    </figure>

    <figure>
      <img src="https://picsum.photos/853/480?random=2" alt="" width="853" height="480">
      <figcaption>
        Place image caption here
      </figcaption>
    </figure>

    <figure>
      <img src="https://picsum.photos/853/480?random=3" alt="" width="853" height="480" objectFit="cover" />
      <figcaption>
        Place image caption here
      </figcaption>
    </figure>

    <figure>
      <img src="https://picsum.photos/853/480?random=4" alt="" width="853" height="480" objectFit="cover" />
      <figcaption>
        Place image caption here
      </figcaption>
    </figure>

    <figure>
      <img src="https://picsum.photos/853/480?random=5" alt="" width="853" height="480">
      <figcaption>
        Place image caption here
      </figcaption>
    </figure>
    <!-- End of placeholder images -->

  </div>
</div>

Consider using <picture> for delivering optimized and responsive images.

Some initial CSS

Let's add in a basic CSS reset and place our carousel in the center of the page for presentation sake.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
}

html {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  min-height: 90%;
}

Let's also make our carousel wrapper as wide as our images and make the scroll-area scrollable.

.carousel__wrapper {
  max-width: 853px;
}

.carousel__scroll-area {
  display: flex;
  overflow-x: scroll;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

Believe it or not, we now have a technically working carousel! But I know you didn't come here to see some images in a horizontal scrolling div.

Oh `scroll-snap`!

With the help of scroll-snap we can make our images snap into position and cover the scroll window when the user scrolls, all with native functionality, no CSS hackery or JavaScript wizardry required.

.carousel__scroll-area {
  /* ... */

  /* enforces children snapping on the x axis */
  scroll-snap-type: x mandatory;
}

figure {
  /* makes sure images always snap in turn */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Mobile users can already scroll through our carousel by swiping. We've achieved so much with so little effort.

Carousel controls

Let's quickly add some buttons to make it easier to control the carousel, especially on larger displays.

<div class="carousel__wrapper">

  <!--  Left button  -->
  <button class="carousel__button carousel__button--left">
    <svg aria-hidden="true" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
      <path d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z"></path>
    </svg>
  </button>

  <!--  Right button  -->
  <button class="carousel__button carousel__button--right">
    <svg aria-hidden="true" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
      <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm113.9 231L234.4 103.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L285.1 256 183.5 357.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L369.9 273c9.4-9.4 9.4-24.6 0-34z"></path>
    </svg>
  </button>

  <div class="carousel__scroll-area">

    <!-- Placeholder images to work with -->
    <!-- ... -->
    <!-- End of placeholder images -->

  </div>
</div>

A little JS to make them control the scroll position of our scroll area.

// We first grab our scroll area and carousel buttons
const carouselScrollArea = document.querySelector(".carousel__scroll-area");

const leftCarouselButton = document.querySelector(".carousel__button--left");

const rightCarouselButton = document.querySelector(".carousel__button--right");

// We then listen in for clicks and scroll the carousel accordingly
leftCarouselButton.addEventListener("click", () => scrollCarousel("left"));

rightCarouselButton.addEventListener("click", () => scrollCarousel("right"));

function scrollCarousel(direction) {
  if (direction === "left") {
    carouselScrollArea.scrollLeft -= carouselScrollArea.clientWidth;
  } else if (direction === "right") {
    carouselScrollArea.scrollLeft += carouselScrollArea.clientWidth;
  } else {
    console.error("Invalid direction");
  }
}

Let's also add keyboard navigation so users can control the carousel with the left and right arrow keys on their keyboard.

// ...

// We grab the whole carousel wrapper
const carouselWrapper = document.querySelector(".carousel__wrapper");

// We listen for keypresses and react based on which key was pressed
carouselWrapper.addEventListener("keydown", handleKeyDown);

function handleKeyDown(e) {
  if (event.key === "ArrowLeft") {
    scrollCarousel("left");
  } else if (event.key === "ArrowRight") {
    scrollCarousel("right");
  }
}

Final touches

Our carousel is now feature-complete and fully functional but it's not pretty. We should add some styling to make it a little nicer.

First, our carousel buttons:

.carousel__wrapper {
  /* ... */

  /* So we can absolutely position our buttons on top of the carousel */
  position: relative;
}

.carousel__button {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: none;
  border: none;
  padding: 2rem 1rem;
  color: white;
}

.carousel__button--left {
  left: 0;
}

.carousel__button--right {
  right: 0;
}

Next, our images, figures, and figcaptions:

figure {
  /* ... */

  /* So will can absolutely position our figcaption */
  position: relative;

  /* Makes sure each image covers the scroll window */
  max-width: 100%;
  flex-shrink: 0;
}

img {
  /* Make sure the images never get too large */
  max-width: 100%;
  max-height: 100%;
}

figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5rem;
  font-style: italic;
  text-align: center;
  color: white;

  /* To make our white caption a little more legible on the image */
  background-image: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent);
}

One more line to make our scrolling buttery smooth.

.carousel__scroll-area {
  /* ... */
  scroll-behavior: smooth;
}

Conclusion

The best part of our carousel is us embracing the platform and relying on native features to make it work. We get so much functionality baked in for free and only have to enhance the experience where necessary.

Share this on Twitter if you enjoyed it. Thanks.

Dipping my feet in SwiftUI

Emmanuel Chucks — Fri, 19 Nov 2021 01:33:15 +0000

I have always looked at native iOS development as tech wizardry, reserved only for the mighty gods who have climbed the ranks of software engineering to Mount Olympus.

Objective-C looked to me like the foreign language of an alien civilization. Reading about UIKit, Core Data and the steep learning curve associated with both turned me away from native iOS development.

Stumbling on some Objective-C code

Naturally, I flirted with React Native, NativeScript, Ionic and similar technologies for a while. The ease of JavaScript and the vibrant community around it was a dream come true, enough to keep me from ever having to open XCode.

Fast forward to a few days ago, I decided to give SwiftUI a try. I have been hearing about it for a while as the future of iOS development but was somewhat skeptical.

I launched XCode, opened the official SwiftUI Landmarks tutorial and boy oh boy was I shocked! I was immediately in love. There was so much that reminded me of working with React.

If you are a React developer and always wanted to try native development, I would encourage you to check out SwiftUI. It's not perfect but you will be pleasantly surprised.

There is also a similar framework for Android called Jetpack Compose which I will look into next. I have high hopes that these will be the future of native development.

Long live declarative UI 🎉

emmanuelchucks / landmarks

Find exciting landmarks to visit. Demo app built with Swift for iOS, watchOS and macOS

Creating an Uber clone app with React Native

Emmanuel Chucks — Fri, 15 Oct 2021 15:23:48 +0000

I have been immersing myself in some React coding for a while and always wanted to give React Native a try. Went on YouTube and found this awesome video about building an Uber clone with Expo.

Expo is a tool that seeks to ease the pain of working with React Native like setting up a native development environment and managing native dependencies. You can get up and running quickly without having to worry about setting up XCode and Android Studio.

The Uber clone app was also made with a few third-party libraries and some incredibly useful Google APIs, thanks Google! I was pleased to find out I could use Tailwind to style my React Native components.

Here are some screenshots of the app:

Check out the code/demo on GitHub and critique me.

emmanuelchucks / react-native-uber-clone

Uber clone built with React Native, Expo

React Native Uber Clone

A cross-platform Uber clone app built with React Native, Expo

Demo

Features

Cross platform (Web, iOS, Android)
Pick origin and destination
Pick ride type (UberX, Uber XL, Uber LUX)
Show fare and travel distance
Show travel time

Run Locally

Clone the project

  git clone https://github.com/emmanuelchucks/react-native-uber-clone.git

Go to the project directory

  cd react-native-uber-clone

Install dependencies

  npm install

Start the server

  npm start

Screenshots

View on GitHub

I used to hate Redux until I found this...

Emmanuel Chucks — Sat, 18 Sep 2021 12:29:14 +0000

I started using React in its early days when class components where the norm. There was setState() for local state and nothing for global state — no functional components, no useState() or useContext.

Redux soon came forth as the industry standard for global state. Almost every React tutorial or course included Redux as part of its program where you had to learn both to build anything beyond a counter app.

There was much to love about Redux with its flux pattern, immutable state, time-travelling debugging, etc. I tried using it but ended up drowning in boilerplate code. There was so much code to write to get anything working — reducers, action creators, thunks, sagas, where does it stop...

I hopped from one state management solution to another to avoid using Redux. Until now...

Fast forward to a few days ago when I came across a Learn from Jason video where the awesome Mark Erikson walked through building a dog breed fetching app with the new Redux (Redux Toolkit).

Turns out that Redux has a new opinionated state management library to make handling global state in React a breeze. Basically all the great parts of Redux without the boilerplate and it is amazing!

I coded along with Jason and fell in love immediately. It is so intuitive and takes the pain out of wiring up predictable state for your app.

If you used to hate Redux like me and tried to avoid it at all cost, I encourage you to take a second look at this new modern Redux. You will be pleasantly surprised.

Check out the app I built and its code on GitHub