DEV Community: Chad Steele

React vs Solid - Seriously?

Chad Steele — Sun, 11 Sep 2022 19:16:25 +0000

There is no contest.

SolidJS is faster, better, and easier to learn and maintain. If you're already a React developer, you're already a Solid developer. You'll just type a lot less in Solid and spend less time debugging. If your company is still investing in React in any way at all, you're wasting lots of time and money. Enjoy.

Start here https://www.solidjs.com/tutorial/introduction_basics

It's fun!

Redux in one line...

Chad Steele — Sat, 27 Feb 2021 03:06:26 +0000

What if I told you that you could replace Redux with one line of code? What if I told you it was as easy as using useState and works just like it, except it's shared and does not depend on Redux, Context, or any other library?

What if I told you it was high performant and less than 3k?

    import {useSync} from 'ez-sync-js'

    const [myVar, setVar] = useSync('myVar','optional initial value')

See the demo

Click [more] when you get there and add as many React components as you like, they instantly share state.

But seriously, why are you still reading this post... git'r done

npm

It's called ez-sync-js
https://www.npmjs.com/package/ez-sync-js

git

https://github.com/chadsteele/sync

How to add HotKeys in React

Chad Steele — Mon, 23 Nov 2020 16:43:40 +0000

So, I was looking for this for longer than it took to write and so, I thought I'd better share it.

Usage...

        <HotKey keys={["ArrowUp"]}>
           <SomeClickableComponent />
        </HotKey>

Optional parameters [scope, callback]...

The default scope is the whole document and the default callback is to click the first child. Keep in mind, you can map more than one key, since keys attribute accepts a string or an array of strings. see keycode.info

        <HotKey keys={["Enter","Space"]} scope={window.document} callback={myfunc}>
           <SomeClickableComponent />
        </HotKey>

Here's the code...

import React from 'react'
import { useEffect } from 'react'

export function HotKey(props){

    const scope = props.scope || window.parent
    useEffect(()=>{
        scope.addEventListener("keydown",onKeydown)
        return ()=>{
            scope.removeEventListener('keydown',onKeydown)
        }
    })

    let keys = props.keys; // see https://keycode.info/
    if (!keys || !keys.length) return;
    if (typeof keys == 'string' || keys instanceof String) keys = [keys]

    const parent = React.createRef()
    const onKeydown = props.callback || ((e) => {
        if (keys.indexOf(e.code)>=0){
            parent?.current?.children?.[0]?.click()
            }      
    })

    return <div data-hotkey={props.keys} ref={parent}>
        {props.children}
    </div>

}

export default HotKey

git https://github.com/chadsteele/hotkeys

doc https://dev.to/chadsteele/how-to-add-hotkeys-in-react-4610

useTranslator - a React translation hook

Chad Steele — Sat, 16 May 2020 22:14:35 +0000

I just wanted to share a little javascript library I developed to use Google translate API for free. First is the javascript class TranslateApi that you can use independent of react. Next is the useTranslator hook that makes it super convenient in a React component. I'm using spanish here, but you can use any language that google supports. Also, if you have a better API, you can easily substitute it inside the TranslationApi class.

TranslationApi.js

In raw javascript, it's a simple asynchronous function..

   TranslationApi.translate("dog","spanish").then(palabras=>{
      elDog = palabras;
   });

get source TranslationApi.js

useTranslator.js

In your react component, you use it much like useState...

  const [spanish, toSpanish] = useTranslator('spanish');
     ...
  let elDog = toSpanish('dog');

get source useTranslator.js

¡Hasta luego bebe!

-ChadSteele.com

p.s.
If you like this, you might like this other library
Vocabulary.js

Relevance - fuzzy linguistic heuristics

Chad Steele — Thu, 31 Oct 2019 18:44:23 +0000

Context

I develop apps and websites for ski areas and other destinations. Destination apps are different. A user is a totally different user before, during and after their trip. When they're planning their ski trip, they're interested in making plans and reservations for the future - think hotels, flights, cars, skis, lift tickets, ski lessons, etc. When they're onsite and on vacation, they're looking for immediate needs and opportunities like where is happy hour? Or what band is playing nearby? They've already booked lodging and plane tickets, so why do we still try to sell them that?

A modern website/app must "know" the customer and tailor the presentation/conversation and sometimes even the vernacular to their persona. This is not about identity or remotely an invasion of privacy. This is caring enough about your customer to ensure your language, content, and promotions are relevant.

A web experience is a conversation with your customers. Don’t talk to all of them all at once the exact same way. No matter how interesting you are to one, it makes you boring to the others. When a user interacts with your app/site, we should listen, learn, and adapt. For example, depending on the content they visit and interact with, we will know whether they prefer the word “luxury” over “discount” or “extreme” over “family”, “wine” over “beer”, “spa” over “party”, etc. and we can adapt the conversation, the content and promotions to their preferences. In short, we can speak their language.

The best way to understand your user is not by their name, age, gender, race, address or personal identification. The best way to be relevant is to know their "Vocabulary" and their proximity. Proximity is the distance between your destination and their current location. Basically, are they onsite, minutes away, or days away? Modern devices with gps, etc. make this easy and it is not the point of this article. Be sure and use it though.

So, given a user's vocabulary, wouldn't it be great to know if they prefer "luxury", "discount", or "family"? Or if one background image is more appealing than another? Or perhaps you could describe an offer or an event differently based on whether they're a skier or a snowboarder or maybe they just like beer?

Introducing Vocabulary.js

Everybody and everything has a vocabulary. Users, actions, websites, ads, memes, etc. This tool can help you track and assess relevance between vocabularies and ensure your content will be interesting for your users. It’s super fast, tiny, agnostic and runs on the client.

Most humans and therefore most documents and websites have limited vocabularies, usually around 20,000 words and rarely more than 50,000 words. Vocabularies are typically much smaller than the documents they represent. A Vocabulary() is simply a hash table of all the words you’ve given it and how many times it’s seen the same word. In this way, every word is ranked by the frequency and size of the word. Like any json object, you can store a vocabulary anyway you like. Given their small size, I cache them locally in window.localStorage and can store them permanently in a NoSql db if desired. Blockchain too? (need help) You really only need to store a user’s vocabulary as they click around your site, return, etc. A page’s vocabulary should be created dynamically by the client and independently of the CMS, etc. I suppose you could calculate and cache on the server too, but that would only make sense if your page has an enormous number of words on the page.

Vocabulary() can run on the server (Node) or the client (Javascript). It does not depend on jQuery or any other libraries, but is compatible of course.

Visit https://chadsteele.github.io/Vocabulary/

User Stories

As a user, I want to be “heard” and “known” as I click around your site(s) over time and while I plan my trip, so that when your sight suggests other products, stories or opportunities they will be relevant to me and my demonstrated interests.

let userVocabulary = new Vocabulary();
userVocabulary.add("all the words on a page I'm interested in");
userVocabulary.add("all the words on another page I visited");
button.click(() => userVocabulary.add("some keywords associated with this button"));

The userVocabulary can be stored in localStorage, the cloud, or wherever. It won't likely be very big because our vocabularies are surprisingly small, especially on a focused website.

As a programmer, I want to maintain a user’s vocabulary and then present the user with relevant options in the dynamic components on the site.

let preference = userVocabulary.order("luxury discount family beer");

switch(preference[0]) {
  case "luxury":
    displayLuxuryOffers();
    break;
  case "discount":
    displayDiscountOffers();
    break;
  case "family":
    displayFamilyPromo();
    break;
  case "beer":
    displayPartyPromo();
    break;
}

As you can see, the possibilities are infinite, but the code is tiny. Please enjoy. You can git it here https://chadsteele.github.io/Vocabulary/

--Chad Steele

EventManager - an agnostic alternative to Redux

Chad Steele — Wed, 30 Oct 2019 17:48:22 +0000

Redux is a VERY powerful tool, if you need it. I have yet to need it. Javascript comes with powerful event management out of the box. Why not use it? I don't like unnecessary complexity or code and hate centralized bloat, dogma, boilerplate or scaffolding in general and so, I wrote the following library... I hope you like it and can use it.

In short, this code enables you to quickly share state or any info between arbitrary components anywhere in the React hierarchy without having to worry about context, props, etc. It also has some fun features like get(event) and echo(event) that enables a newly rendered component to get an old event that fired before it was rendered.

EventManager - a simple javascript class

You can use EventManager with or without React and I recommend making it a singleton global instance (optional, but optimal)

/**
 * EventManager - simplifies events 
 */
export class EventManager {
  constructor(node) {
    this.node = node || this.node || window;
    this.cache = {};  // old events
  }

  //returns the last time this event was dispatched - even prior to your "listener"
  get(event) {
    return this.cache[event];
  }

  //dispatches the last instance of this event
  echo(event) {
    this.dispatch(this.get(event));
  }

  //listen for and respond to events
  addListener(event, handler, useCapture) {
    if (!event) return;

    handler =
      handler ||
      function (e) {
        if (!e) return null;
        return e.details || null;
      };

    this.node.addEventListener(event, handler, useCapture);
  }

  // stop listening
  removeListener(event, handler) {
    if (!event) return;
    this.node.removeEventListener(event, handler);
  }

  //dispatch an event with forgiving syntax
  dispatch(event, params, quiet) {
    if (!event) return;
    if (!event.type) {
      let e = event;
      let n = e.event || e.name || e;
      let p = e.params || e.data || params;
      if (typeof p === 'object') {
        p = Object.assign({}, e.params, e.data, params);
      }
      event = new CustomEvent(n, { detail: p });
    }

    this.node.dispatchEvent(event);
    this.cache[event.type] = event;
    try {
      if (!quiet) log(`dispatch ${event.type}(${event.detail ? JSON.stringify(event.detail) : ''})`);
    } catch (ex) { }
  }
}

React Components

EventHandler

e.g. <EventHandler event="myEventName" handler={onMyEvent}/>

export function EventHandler(props) {

  let complete = (props.event && props.handler);
  if (!complete) {
    throw (new SyntaxError('<EventHandler> is missing required properties.  <EventHandler event="event-name"  handler={func}  />'));
  }

  //manage events
  useEffect(() => {
    //componentDidMount, componentDidChange
    if (complete) events.addListener(props.event, props.handler, props.useCapture);
    return () => {
      //componentWillUnmount
      events.removeListener(props.event, props.handler);
    };
  });

  return props.children || null;
}

For example, a simple event handler might look like...

    const onMyEvent = e => {
        setDetails(e.detail);
    }

Dispatch

e.g. <Dispatch event="myEventName" expr={a < b} wait={1000} />
If (expr) dispatch an event when something is (re)rendered and/or after a wait period.

export function Dispatch(props) {
  var expr = props.if || props.expr;
  expr = expr == null ? true : expr;
  var wait = props.wait || props.delay || 0;
  useEffect(() => {
    if (expr && props.event) {
      setTimeout(function () {
        events.dispatch(props.event, props.params);
      }, wait);
    }
  });
  return props.children || null;
}

In closing, I do plan to add these to git, npm, etc. someday, but for now I'd appreciate your feedback and especially if you find this useful. Please don't bother defending or evangelizing Redux or strict typing. They're both great and that's not the point of this post. I'm a weird C++'r who actually likes javascript "duck typing" and hope to use it powerfully.

Sincerely,
Chad Steele