Forem: Geoff Davis

🎉Announcing Floodgate: a "load more" component for React 🌊

Geoff Davis — Tue, 20 Aug 2019 20:49:08 +0000

I am happy to announce that after over 2 years of development, React Floodgate has been released under version 1.0.0!

Floodgate is a "load more" component for React.js that takes the complexity of managing and updating queued data and turns it into an intuitive experience. It takes a minimalist approach to configuration: with only 1 required prop and using the render prop pattern, developers have precise control about how much of the available data is rendered, and the manner in which it is rendered.

For a quick peek into a barebones implementation of Floodgate, check out the example below:

import React from "react";
import Floodgate from "react-floodgate";

export default function LoadMore() {
  const albums = ["For Emma, Forever Ago", "Bon Iver, Bon Iver", "22 a million", "i,i"];
  return (
    <Floodgate data={albums} initial={1} increment={1}>
      {({ items, loadNext, loadComplete }) => (
        <React.Fragment>
          <h1>Bon Iver Albums</h1>
          <ol>
            {items.map(album => <li>{album}</li>)}
          </ol>
          <button onClick={loadNext} disabled={loadComplete}>Add Album</button>
        </React.Fragment>
      )}
    </Floodgate>
  );
}

That is all it takes to create a working "load more" component!

To get started using Floodgate today, install it into your React project:

# using npm
npm i react-floodgate

# using yarn
yarn add react-floodgate

Features

While Floodgate is minimalistic, it can be incredibly powerful, depending on how its features are leveraged in concert with other components and patterns. Get a brief introduction to what Floodgate can do below; check out the README file to get a deeper understanding and technical details.

📊 Consume any type of data

Floodgate's data prop only requires that an array is passed to it; that array can be anything, including empty! Strings, parsed JSON objects, React components, even JavaScript functions can be passed in; remember that Floodgate leaves the rendering and implementation of these items up to the developer.

Values like data={["hello", "world"]}, data={[<li>Eggs</li>, <li>cereal</li>, <li>paper towels</li>]}, data={[]} are all valid to be passed to Floodgate. As a note, while Floodgate doesn't care what type(s) of item makes up the array, it is recommended to make sure the type is uniform amongst all the array elements.

🔢 Determine the quantity of items to render

Tell Floodgate how many items from the data array should be loaded on the initial render with the initial prop. The increment prop handles how many items are loaded on subsequent calls to loadNext() in the render prop function.

🎛 Manage props from a parent component

By utilizing React's lifecycle methods and custom callback props, Floodgate's props can be entirely managed by a parent component's state, allowing the instance's data to be asynchronously updated or end-users to have more control over how many items are loaded. I call this the Controlled Floodgate pattern.

☎️ Handle events with event-driven callback props

The render prop function exposes a number of Floodgate methods to be called by its children components; namely, those are loadNext, loadAll, reset, and exportState. When these methods are called, Floodgate calls the function provided to the on[MethodName] prop, if one is provided.

🔮 Leverage the Context API

Floodgate utilizes the React's Context API as of v0.6.0, preventing the need for developers to pass down methods exposed in the render prop to wherever they are needed using the FloodgateContext export.

🛠 Built with TypeScript

Floodgate is built with Typescript, and is distributed with a types definition file for an enhanced developer experience.

Examples

For a better understanding of how Floodgate works, check out these Codesandbox.io examples. You can see the way the code is setup, as well as the resulting app that an end-user would interact with.

One real-life example of Floodgate in use is on my personal site's writing page.

Roadmap

This project is pretty green, but there are some features that I will be planning to implement in the near future, in addition to solving issues and addressing immediate needs of Floodgate users:

Error Boundaries
Hooks support (useFloodgate)
Documentation website
Improve README, especially "Contributors" section

Explore on GitHub

Floodgate is available on GitHub at geoffdavis92/react-floodgate. There, you can view the component's README, examine source files, file an issue, take a look at open projects, and do all the usual GitHub repo things.

What do you think?

Do you like Floodgate? Is your app in desperate need of this component? Let me know by tweeting me about it, or leave a comment below!

🎉 Happy developing! 🎉

What are your go-to libraries for input masking?

Geoff Davis — Tue, 19 Feb 2019 23:13:29 +0000

My definition of input masking:

Formatting of user-input in an <input> element as it is provided, into a preset shape/structure

For example, here is a set of phone inputs that have masks setup:

This CSS-Tricks link showcases some examples as well as some libraries, but I'm interested in what the DEV community uses nowadays (that post is ~2 years old).

Bonus points if the library is framework agnostic, i.e. does not use jQuery, Angular, React, Vue, etc.

How to Import Modules Out of Webpack's Scope

Geoff Davis — Fri, 08 Feb 2019 00:38:29 +0000

TL;DR: check out the solution

Consider this scenario: you work on a host of projects that all require a set of JavaScript modules, and you want to track and import the common modules from a centralized location. So, you begin to move over these common modules to their own repository; the idea is no more copy-pasting on every change, just import from this new repo!

In this scenario, assume the individual projects use the common workflow of Webpack and Babel to transpile and build .js bundles. Webpack has a great feature that allows aliasing of modules in a given path under a particular identifier, rather than '../path/to/commons/module.js', for example. This also works with modules outside the scope of the Webpack config file; aliasing can be configured under the resolve.alias object:

// webpack.config.js
const path = require("path");

module.exports = {
  // ...
  resolve: {
    alias: {
      commons: path.resolve(__dirname, "../path/to/commons")
    }
  }
  // ...
};

To import these commons modules, the import statement in one of the projects will have to be updated to use this alias:

// index.js
import { getAvgLength } from "commons/stringUtils";

For this scenario, let's say the commons directory has just one file now, the stringUtils.js file imported above; that file looks like this:

// commons/stringUtils.js
export function getAvgLength(...strings) {
  const stringCount = strings.length;
  const combinedStringLengths = strings.reduce((total, str) => {
    return total + str.length;
  }, 0);
  return combinedStringLengths / stringCount;
}

Great utility, right? So the commons directory is intialized with one module, Webpack is aliasing the commons directory in a project directory, and the proper import statement is set up in that project's main JavaScript file. Now, Webpack should be restarted, and a bundle would be successfully built; restarting the browser to get this latest build would show that everything is setup, running smoothly, and no more considerations need to happen.

Except, that's not necessarily the case.

The Problem

What's actually happening is the module being imported from commons isn't actually being loaded by Webpack and transpiled by Babel; it is being imported and placed in the bundle, able to be utilized normally, but that's it. Any modules located outside the scope of the webpack.config.js are being imported and bundled without any additional transformation; this is what a section of the bundle.js would look like:

/***/ "../path/to/commons/stringUtils.js":
/*!*******************************!*\
  !*** ../path/to/commons/stringUtils.js ***!
  \*******************************/
/*! exports provided: getAvgLength */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getAvgLength", function() { return getAvgLength; });
function getAvgLength(...strings) {
  const stringCount = strings.length;
  const combinedStringLengths = strings.reduce((total, str) => {
    return total + str.length;
  }, 0);
  return combinedStringLengths / stringCount;
}

/***/ }),

Unless the commons code is using features that are not supported by browsers yet (or for example, a type annotation system like TypeScript or Flow), no problems will be apparent until a build process is initiated or the code is tested in a browser where some of the commons features are not supported. If the code being imported complies with the target environment's supported ECMAScript version (most likely ES5), then this will likely not be a problem, so this only affects ES2015+ code not in the same directory as webpack.config.js.

The Fix

No amount of tweaks or updates to the project's Webpack or Babel config files will help resolve this issue; the solution is to go to the source. In the commons directory, setup a script that runs all JS files through Babel, which should be run when making changes to the common modules; this can be done by adding a package.json, some form of Babel configuration (seen below as a property in the package.json file), and installing @babel/cli, @babel/core, and @babel/preset-env:

// commons/package.json
{
  "scripts": {
    "babel": "babel entry.js -d dist/"
  },
  "babel": {
    "presets": [
      [
        "@babel/env",
        {
          "targets": {
            "browsers": ["last 2 versions"]
          }
        }
      ]
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1"
  }
}

When yarn babel/npm run babel is initiated, Babel will transpile all the files matching a glob pattern (in the above example, it only transpiles entry.js) and places the result in dist/. In order for the projects to import the correct, transpiled code, update the Webpack's commons alias to point to that dist directory:

// webpack.config.js
// ...
resolve: {
  alias: {
    commons: path.resolve(__dirname, "../path/to/commons/dist");
  }
}
// ...

When Webpack is restarted or a build is initiated, the bundle should now only output code transpiled down to whatever the Babel settings are setup to output. Problem solved!

I am by no means an expert on the Webpack/Babel workflow, and so I do not know for a fact where in the pipeline the issue lies, but I suspect the breaking point is somewhere in babel-loader, since Webpack is doing its job of importing the modules. Regardless, I did not write this article to point fingers, but to bring awareness and present a solution.

I came across this exact issue while trying to create a common directory for my JavaScript modules at work, and upon running a build, finding that none of the ES2015+ code was being transpiled. Hopefully this helps someone out there thinking of using a similar pattern of development and organization!

Weekly UI Challenge Week 3 Day 7: Tweak, refactor, and/or fix your code

Geoff Davis — Sat, 28 Apr 2018 16:32:26 +0000

Welcome to Week 3, Day 7 of my Weekly UI challenge! Week 3 will focus on a results page UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day seven, our goal is to…

Tweak, refactor, and/or fix your code

Today is all about you and your design/code perfectionism. Did you want to change your component API to be more flexible? Did you mean to tweak spacing on Day 5 but didn't have time? Perhaps you needed more time to research how to fix a few more a11y issues before you get that perfect score on Day 6. We all have to get sleep, spend time with friends and family, and have other things pop up that may affect your workflow; today is your day to finish strong and get everything up to spec as you see fit.

Please add your repos and/or images of your designs in the comments for inspiration! I would love to see what you all created throughout the week.

Happy fixing! 🎉

Week 3 Calendar

(Sunday 4/22) Design component ✅
Result entry, sponsored/best seller indicators ✅
Grid/list view toggles ✅
Sorting ✅
Pagination/load more ✅
100% a11y score ✅
Tweaks, refactors, fixes 🎯

Weekly UI Challenge Week 3 Day 6: Score 100% in an a11y audit

Geoff Davis — Fri, 27 Apr 2018 23:28:34 +0000

Welcome to Week 3, Day 6 of my Weekly UI challenge! Week 3 will focus on a results page UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day six, our goal is to…

Score 100% in an a11y audit

Accessibility– or a11y, pronounced "ally"– is a very important concept in modern web development. No matter whether you are building web applications or simple static landing pages, making a web page accessible should be on the forefront of every developer and designer's mind. For many, this is an afterthought, but a11y is quickly becoming a metric in SEO ranking and vital to the legal integrity of your web page/app; it is also a good idea and strategy to make it easier for users to actually use your site/app/widget.

A11y techniques span quite a few domains and disciplines, from HTML attributes and CSS states, to colors used in the design (you may notice that most colors I used in my design have WCAG contrast ratings of at least AA for their relevant domains) and text that no one will interact with unless they use a screen reader. In order to test for a web page's accessibility, there are several tools floating around the web. One such tool is a11y.css.

a11y.css is an awesome tool that uses CSS targeting to find a11y errors, warnings, and advisable tips in your code, and show you the messages inline. You can even configure the tool to target only certain levels of warnings too. When I start working on improving accessibility, this tool is the first one I use.

Another tool I use is the Google Lighthouse accessibility audit This tool will check all the types of things a11y.css does, and then some. It allows a little more control over debugging, as it will list offending elements, and scolling over that list will highlight those elements in the DOM, much like normal devtools do. I also find Lighthouse a lot easier to figure out what to fix, since it will also link to explainer pages for each error.

I've linked several tools and resources for a11y techniques and testing in the footnotes of this post, and I hope you use them and explore ways to help make the web usable for everyone!

Now it's your turn

I used React.js and Storybook to develop my implementation, but you can use whatever technology stack you would like! (hint: if you use Vue.js or Angular.js, you can still use Storybook for those libraries)

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy coding! 🎉

Week 3 Calendar

(Sunday 4/22) Design component ✅
Result entry, sponsored/best seller indicators ✅
Grid/list view toggles ✅
Sorting ✅
Pagination/load more ✅
100% a11y score 🎯
Tweaks, refactors, fixes

Resources

Weekly UI Challenge Week 3 Day 5: Add a pagination/load more feature

Geoff Davis — Fri, 27 Apr 2018 06:27:31 +0000

Welcome to Week 3, Day 5 of my Weekly UI challenge! Week 3 will focus on a results page UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day five, our goal is to…

Add a pagination/load more feature

Have you ever submitted a search query and found yourself with over a million results from Google or Amazon? And in that situation, how many times have you had to scroll for a few hours to get to the end? None? Of course, because most robust search engines like those offer pagination or lazy loadin of search results!

Pagination (the dynamic creation of pages to display content) and lazy loading content like search results or article listings are more features that really aid in providing a robust user experience on your site/app. This not only prevents users from being overwhelmed with results, but improves overall performance and accessibility by not loading dozens/hundreds/maybe thousands of results in one render and decreases the data load on a device, respectively.

Following the original design I created, this is what I've got for Day 5:

I chose to use a "load more" for today's feature implementation; luckily for me, I wrote a small React component to do just this called Floodgate.

Floodgate is a component that utilizes render props and generators to incrementally render a subset of items passed to the component. Such items can be anything array-bound, and in this case the items are an array of objects that hold the <ResultEntry/> component and its dates, for sorting. Floodgate also passes in functions as arguments to load the next batch of items, load in all items, and to reset the component state. (I use the reset function after all items have rendered for easy demoing of the feature, as a normal results page may not utilize this necessarily)

In order to give a good UX to the perusers of my search results, I also need to disable the load more button and perhaps display a label to inform them that all results have been displayed. Floodgate has you covered! A loadComplete boolean is passed in as a render function argument as well, which yields a value of true if all the items have been rendered.

If you're using React to build your search results UI, give Floodgate a look and see if it can help you!

Here's an animation of my load more feature in action:

You can check out my coded implementation on my Github pages site for this project.

Now it's your turn

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy coding! 🎉

Week 3 Calendar

(Sunday 4/22) Design component ✅
Result entry, sponsored/best seller indicators ✅
Grid/list view toggles ✅
Sorting ✅
Pagination/load more 🎯
100% a11y score
Tweaks, refactors, fixes

Resources

react-floodgate - a React "load more" React component for incrementally displaying data
Pagination – Examples And Good Practices
Infinite Scrolling Best Practices
Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce

Weekly UI Challenge Week 3 Day 4: Add sorting

Geoff Davis — Thu, 26 Apr 2018 06:13:52 +0000

Welcome to Week 3, Day 4 of my Weekly UI challenge! Week 3 will focus on a results page UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day four, our goal is to…

Add sorting

The sorting of search results are an important part of a useful results page. Whether it is for an ecommerce platform– sorting by price or customer review, or a search engine– sorting by date or relevance, or some other type of app/site, proper sorting methods help users get the best of your search implementation.

Following the original design I created, this is what I've got for Day 4:

The design is a little different due to the fact that I am using the native HTML select element, but the functionality is all there. The design continues to emulate the results of a mock soccer blog, so the sorting methods reflect that of a blog, i.e. sorting by date. If you were using a more robust search platform and flexible API, you could also sort by relevance (like Google and Amazon do, for example) or by price or customer rating, as previously mentioned.

Here's an animation of the feature in action:

You can check out my coded implementation on my Github pages site for this project.

Now it's your turn

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy coding! 🎉

Week 3 Calendar

(Sunday 4/22) Design component ✅
Result entry, sponsored/best seller indicators ✅
Grid/list view toggles ✅
Sorting 🎯
Pagination/load more
100% a11y score
Tweaks, refactors, fixes

Weekly UI Challenge Week 3 Day 3: Add grid/list view toggles

Geoff Davis — Wed, 25 Apr 2018 05:52:42 +0000

Welcome to Week 3, Day 3 of my Weekly UI challenge! Week 3 will focus on a results page UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day three, our goal is to…

Add grid/list view toggles

The ability to control the display of UI is not a very oft-included feature, but one that can enhance the experience and/or utility of an app/web site. Such a feature is included in such user interfaces as Instagram (user profile views) and Google Drive; they can certainly aid in the scannability of a design, by removing excess– yet perhaps at times useful– information.

While design is an all-important decision in implementing the vision of one's app or site, handing over some control of the display can show your users that you care for their needs.

Following the original design I created, this is what I've got for Day 3:

Like some of the features we've created on this challenge, this view toggle may work best when preferences are saved using cookies or some other mechanism to save user state. But, I've skipped this step so far. This feature is a simple toggle that utilizes React's internal component state and dynamic styling via Styled Components.

One thing I would suggest is trying out the new(ish) grid CSS API to style the grid view; it's not as scary as you may imagine, and it's incredibly powerful.

Here's an animation of the feature in action:

You can check out my coded implementation on my Github pages site for this project.

Now it's your turn

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy coding! 🎉

Week 3 Calendar

(Sunday 4/22) Design component ✅
Result entry, sponsored/best seller indicators ✅
Grid/list view toggles 🎯
Sorting
Pagination/load more
100% a11y score
Tweaks, refactors, fixes

Weekly UI Challenge Week 3 Day 2: Add result entry, sponsored/best seller indicators

Geoff Davis — Tue, 24 Apr 2018 02:11:50 +0000

Welcome to Week 3, Day 2 of my Weekly UI challenge! Week 3 will focus on a results page UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day two, our goal is to…

Add result entry, sponsored/best seller indicators

Back to basics again! The first thing any results page needs is an entry/entries to populate the page, because without them this would just be a bunch of whitespace. Like the rest of the UI projects we have worked on, these results should be easily traversable, have good color contrast, and have relevant content displaying, in order to be of most use to the searcher.

Additionally, the original search query is display atop the page, so users are able to see what they searched; this could easily be replaced by a secondary search bar, similar to how Google's main search functions.

Also like Google's search, our results should have some sort of indicator if there is paid content and/or a well-regarded result displaying. In my case, I am basing my design off of a would-be sports blog, so I have a special background color indicating the link goes to content that is sponsored by someone to appear first.

Following the original design I created, this is what I've got for Day 2:

My implementation is fairly simple, and uses a list view (for now); if you wanted to, and for EXTRA points, you could use the ecommerce listing you made from Week 1, if that fits your design.

I chose a faded green color to act as the sponsored content indicator, alongside a complementing, darker shade for the label. Lastly, a simple custom focus state gives a bit of character to the otherwise straightforward page.

Now it's your turn

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy coding! 🎉

Week 3 Calendar

(Sunday 4/22) Design component ✅
Result entry, sponsored/best seller indicators 🎯
Grid/list view toggles
Sorting
Pagination/load more
100% a11y score
Tweaks, refactors, fixes

Weekly UI Challenge Week 3 Day 1: Design a Results Page

Geoff Davis — Mon, 23 Apr 2018 03:12:51 +0000

Welcome to Week 3, Day 1 of my Weekly UI challenge! Week 3 will focus on a results page UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day one, our goal is to…

Design the component

I personally used Sketch to design this week's component, but you can use Sketch, a similar UX/UI design program like Adobe XD, or really any other program (or just paper and pen/pencil!) to design your component.

If you decide you would rather not design your own component, you are more than welcome to follow along using my designs, but I think you'd really get the most of it if you designed your own. (plus I'd love to see what you all come up with!)

Here is what my results component will look like, including a number of the component's states:

This is what the grid view of the component looks like:

Now it's your turn

Hop on those design programs (or get out that pen and paper pad) and design your own results page! Below is a calendar of what features I will be implementing on which day, as well as a few resources that may help you.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy designing! 🎉

Week 3 Calendar

(Sunday 4/22) Design component 🎯
Result entry, sponsored/best seller indicators
Grid/list view toggles
Sorting
Pagination/load more
100% a11y score
Tweaks, refactors, fixes

Resources

Best Practices for Search Results
The basic principles for designing search & results
7 Rules for Creating Gorgeous UI
a11y Project (great resources for creating accessible web sites/apps)

Weekly UI Challenge Week 2 Day 7: Tweaks, refactors, fixes

Geoff Davis — Sat, 21 Apr 2018 22:19:06 +0000

A short announcement

One note on future Weekly UI posts: often times outside life gets in the way of scheduled series, especially when they have daily elements, like this one. As the summer kicks off, there will be some weeks where I will be busy and/or out of town, and unable to dedicate my full attention to Weekly UI posts as I want to; I will try to recognize those weeks ahead of time and plan on not posting a challenge for such a week.

Do not fret! That doesn't mean that this series is going anywhere, but just that I want weekly challenges to be consistent with what you all have come to expect. If you want to stay as informed as possible, follow the WeeklyUI tag on its tag page and give me a follow; this way, you will get notifications when I post challenges.

Welcome to Week 2, Day 7 of my Weekly UI challenge! Week 2 will focus on a search bar UI component; each day throughout this following week, I will pick one subelement of the design to implement. For day seven, our goal is to…

Tweak, refactor, and/or fix your code

I will be updating my dropdown list items to be focusable via the arrow keys and improving form submission behavior. As always, you can check out my coded implementation on my Github pages site for this project.

Please add your repos and/or images of your designs in the comments for inspiration! I would love to see what you all created throughout the week.

Happy fixing! 🎉

Week 2 Calendar

(Sunday 4/15) Design component ✅
Input field ✅
Submit button ✅
Integrate autocomplete functionality ✅
Past search term indicators ✅
100% a11y score ✅
Tweaks, refactors, fixes 🎯

Weekly UI Challenge Week 2 Day 6: Score 100% in an a11y audit

Geoff Davis — Sat, 21 Apr 2018 01:21:30 +0000

Welcome to Week 2, Day 6 of my Weekly UI challenge! Week 2 will focus on a search bar UI component; each day throughout this following week, I will pick one subelement of the design to implement. For day six, our goal is to…

Score 100% in an a11y audit

I've linked several tools and resources for a11y techniques and testing in the footnotes of this post, and I hope you use them and explore ways to help make the web usable for everyone!

Now it's your turn

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy coding! 🎉

Week 2 Calendar

(Sunday 4/15) Design component ✅
Input field ✅
Submit button ✅
Integrate autocomplete functionality ✅
Past search term indicators ✅
100% a11y score 🎯
Tweaks, refactors, fixes