ebinion

React "controlled components" can be detremental to the overall user experience when used improperly. For design systems work, we've elected to ensure our components are uncontrolled to reduce unnecessary rerenders and avoid the potential for UI jank. But what are controlled components?

React's documentation (https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) provides a definition of controlled components...

... a component is “controlled” when the important information in it is driven by props rather than its own local state.

While I appreciate the shortness and accuracy of the definition, I find it unhelpful in practical everyday work.

In practice, controlled components are components that use a combination of props and state to manage updates to the component. React does a really good job of managing rerendering of components by monitoring state and prop updates. That's particularily true when state flows unidirectionally. However controlled components ca

ebinion

To start a quick server, with BrowserSync installed globally, run the following command from the command line

$ browser-sync start --server --files "**/*.html, **/*.css, **/*.js"

ebinion

/**
 * Calls provided functions based on an elements visiblity on screen
 * @type   {Class}
 * @param  {HTMLElement} element  Element you'd like to observe
 * @param  {Object} [options={}]  Optional settings
 */
class ScrollCallback {
  constructor(element, options={}) {
    // Setup default options
    const defaultOptions = {

ebinion

// Vanilla version of FitVids
// Still licencened under WTFPL
//
// Not as robust and fault tolerant as the jQuery version.
// And also, I don't support this at all whatsoever.

const vanillaFitVids = () => {
  // List of Video Vendors embeds you want to support
  const players = [
    'iframe[src*="youtube.com"]',

ebinion

/**
 * Toggles a className on an element based on it's visiblity on screen
 * @type   {Class}
 * @param  {HTMLElement} element  Element you'd like to toggle
 * @param  {Object} [options={}]  Optional settings
 */
class ScrollToggle {
  constructor(element, options={}) {
    // Setup default options
    const defaultOptions = {

ebinion

Subject: Table XI Research Study Participation

Hi [insert first name],

Thank you for agreeing to participate in our study. 

During our 45 min - 1 hour session, you'll be asked to use a prototype of a rough concept. We’ll connect remotely through a service called GoToMeeting. So that we can observe your interactions with the prototype, we ask for you to share your screen and web camera (if available).

Before our session, please download and install GoToMeeting on your computer: https://www.gotomeeting.com/island/host.flow

ebinion

.settings-menu.dropit {
  position: relative;
}

.settings-menu.dropit .dropit-submenu {
  top: auto;
  bottom: 0;
}

ebinion

Not quite parallax

A Pen by Ezekiel Binion on CodePen.

License.

ebinion

{
  "deniedTags": ["style"],
  "buttons": ["html","formatting","bold","italic","unorderedlist","orderedlist","link","image","video"],
  "plugins": ["fullscreen"],
  "toolbarFixedBox": true,
  "script": true
}

ebinion

# A class-based template for jQuery plugins in Coffeescript
#
#     $('.target').myPlugin({ paramA: 'not-foo' });
#     $('.target').myPlugin('myMethod', 'Hello, world');
#
# Check out Alan Hogan's original jQuery plugin template:
# https://github.com/alanhogan/Coffeescript-jQuery-Plugin-Template
#
(($, window) ->