Alex.Party

Fresh Hot CSS: Trig Functions

Thu, 05 Feb 2026 05:30:25 GMT

Today’s topic is Trig Functions. I feel like Trig Functions don’t get a lot of love because nobody seems to know what you would actually use them for. I don’t get to go over it in the talk very much. Let’s actually show a demo of where you might want to use something like this.

Trig Functions

The Trig functions that are now available are as follows:

If you have ever studied Trigonometry, then these do exactly what you think they do. If you didn’t, this is all extremely helpful for calculating angles and lengths of sides of triangles. Math stuff.

Let’s talk about where you’d use them.

Placing things in a circle

This is the classic example that shows off being able to calculate the placement of multiple items based on their angle relative to each other.

See the Pen <a href="https://codepen.io/bramus/pen/YzBEXJy"> CSS Wrapped 2023: Trig Functions</a> by Bramus (<a href="https://codepen.io/bramus">@bramus</a>) on <a href="https://codepen.io">CodePen</a>.

CLOCKS!!

You can now easily make a clock that will have hands that are correct

See the Pen <a href="https://codepen.io/stoumann/pen/wvxOQKo"> CSS sin() and cos() Demo 4</a> by Mads Stoumann (<a href="https://codepen.io/stoumann">@stoumann</a>) on <a href="https://codepen.io">CodePen</a>.

Browser Support

These functions are well supported, and can absolutely be used, today!

More Resources

Web.dev

Junior Dev Tip: "Scroll Up"

Wed, 08 Oct 2025 16:28:48 GMT

My junior developer just came to me asking for help because their linting setup was broken. I’m writing this very quickly because I want to get all the details down.

Junior Dev: “My linting is broken, can you help?”
Me: “Sure”
get on a call with junior dev
junior dev runs linting command which ends with lots of “command failed” errors as well as a line that says “17 warnings, 2 errors”
Junior Dev: “See?”
Me: “Scroll up.”
junior dev scrolls up and sees 2 errors that say they forgot an attribute
Junior Dev: “Oh.”

I’ve had other experiences recently as well where a different junior developer also couldn’t tell me what was wrong with something. The error was right in front of them and they just didn’t scroll to the right place. They would click everywhere except for the thing that would tell them where the error was. I recognize that as a junior developers, you’re not as familiar with the tools, but the tools do provide you with information most of the time. You genuinely just need to take a few extra seconds and read what it is saying.

Note: I did ask my junior developer if it was ok to share this story. they said yes.

The future of web development is AI. Get on or get left behind.

Mon, 05 May 2025 07:58:24 GMT

Editor’s Note: previous titles for this article have been added here for posterity.

The future of web development is blockchain. Get on or get left behind.

The future of web development is CSS-inJS. Get on or get left behind.

The future of web development is Progressive Web Apps. Get on or get left behind.

The future of web development is Silverlight. Get on or get left behind

The future of web development is XHTML. Get on or get left behind.

The future of web development is Flash. Get on or get left behind.

The future of web development is ActiveX. Get on or get left behind.

The future of web development is Java applets. Get on or get left behind.

If you aren’t using this technology, then you are shooting yourself in the foot. There is no future where this technology is not dominant and relevant. If you are not using this, you will be unemployable. This technology solves every development problem we have had. I can teach you how with my $5000 course.

Grid First, Flex Third

Sun, 23 Mar 2025 11:55:29 GMT

I’ve been mulling this topic for months now, and I’m pretty firmly of the opinion if you are attempting to do some layout in CSS, you should reach for display:grid first, followed by display:block, followed by display:flex. Grid allows the layout element to be in control of how things get placed, where as flex really relies on the children to define their widths, which most of the time is not how layout should function at all.

Grid First

I’ve been working in a very flex heavy codebase the last couple of years, and there are multiple instances where I have needed to rework multiple components that have used a combination of nested flexbox, position relative/absolute, and lots of growing, shrinking, and hardcoded sizes. Most of these issues have been resolved by deleting those styles and turning the layout portion into a grid.

An example of this would be a text input component. Within this text input component, we had a flexbox layout for the input, that would optionally add margins to the input if there was an icon prop for the start or end, the icons would then be positioned absolute to make sure they ended up at the correct end. This got weird when you started to use ltr vs rtl languages, and there was a whole lot of javascript logic just to figure out where an icon needed to go, and which margin needed to be applied.

Now I recognize not everyone has this problem, but honestly, it was solved pretty much instantly with a single grid definition.

.input-wrapper{
  display: inline-grid;
  grid-template-areas: "front-icon input back-icon";
  grid-template-columns: auto 1fr auto;
}

This definition will let us assign the starting icon to the “front-icon” grid area, the ending icon to the “back-icon” area, and those will only have width if there is content in there. Done.

I have more examples of patterns like this where flex box just gets in the way more than helps.

Block Second

So this might be a hot take, but i have a lot of places in my work code base that still have the following style:

.descriptive-class-name{
  display: flex;
  flex-flow: column nowrap;
  justify-content: start;
  align-items: start;
}

Congratulations! You’ve made a bunch of blocks! You have successfully created the least useful css statement. This is pretty much the equivalent of this:

.descriptive-class-name>*{
  display:block;
}

Now I can hear some of you saying, “But Alex, what if you want to flip it from being a column to a row?” If this were the case, we wouldn’t be having this conversation. But it isn’t. This is extra code for the sake of “being in control”. Stop it.

A lot of times, you don’t need flex for the thing that you are doing, you need something else. This is one of those cases.

Flex Third

Sometimes, you do actually need/want flexbox. Displaying a grid of cards is a great time to use flexbox (Until you need the contents inside the cards to line up, then you probably want grid and subgrid). Quickly centering something, flexbox is a great option (but so is grid, thus negating this point).

We have better more powerful tools for layout. Reaching for display:flex because you are more comfortable with it does not make it the best choice. If we only reached for what we were comfortable with we would all be doing layout with table elements still, and no one wants that (looking at you, MS Outlook).

I Am Adequate, But Sometimes I Don't Have The Tools

Wed, 18 Sep 2024 16:35:57 GMT

I’ve spent a lot of my life feeling… inadequate. There is an anger that flairs up about it too. A lot of this stems from my ADHD and learning disabilities, and that growing up, I had many teachers give me the classic line:

“You’re so smart, if you only applied yourself a bit more, you’d be a straight A student.”

(Note: don’t ever say this to a kid with ADHD)

Sometimes though, I really am giving all that I have in that moment. I struggle a lot with writing (y’all know how consistent I am with writing) and doing things quickly.

I recently heard someone say something along the lines of “You cannot give 100% all the time.” and metaphorically, it’s a bit like driving a car. If you are driving a car with the accelerator floored at all times, you’re gonna have a bad time. It is both socially acceptable and expected that you can and will go a certain speed. you are not making your car run full throttle all the time. It is okay to be adequate.

Sometimes though, you get in a car and it’s not…. right. It’s not all there. Maybe you have a 2002 Toyota Camry with a bunch of problems. Maybe when you run it at full throttle, you can only get up to 30 miles per hour (48k/h for my metric folk). Sometimes, you don’t have the right tools.

Sometimes giving your all is adequate, and that’s okay because you don’t have the tools.

Recent Container Query Use: Content next to navigation

Mon, 16 Sep 2024 14:33:19 GMT

At work we have a standard layout we are using where there is a nav bar on the left hand side of the screen and content on the right hand side of the screen (this gets flipped for RTL languages). The nav bar can be in an expanded or collapsed state.

Rather than trying to have multiple media queries for the content area to the right based on whether the nav bar is expanded or collapsed, we’re making the right hand side content be a container. Now within that area, pages can style things with container queries based on the inline-size of the content container without having to track the current state of the sidebar.

My Recent Container Query Use: Pagination

Mon, 27 May 2024 06:08:44 GMT

I recently read the post We’ve Got Container Queries Now, But Are We Actually Using Them? over at Frontend Masters Boost, and I realized that it would probably be helpful for me to document real world uses for container queries.

Today’s example: A Pagination Component.

We recently rewrote pagination at work, and I decided this is an excellent use for container queries. The pagination component has 2 modes: “Big” mode and “Little” mode which really only care about how much horizontal space they have. In most applications this can be done with media queries as your pagination is a top level thing, but we have a lot of content that gets paginated inside of modals, which may or may not take up the full screen.

Our “Big” mode is when you have multiple page links (think like 10+) and you want to have the pattern display each page link. We use a list of links and also need a “previous” and “next” button at the end. The “Little” mode is what you might think of as “mobile mode” where rather than a list of links, we use a form that has a drop down with the page options. This isn’t just for mobile but can also be used for small paginated lists.

CSS Example

.pagination-container {
  /* create a pagination container based on the inline size*/
  container: pagination / inline-size;
  /* apply some good styling */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1ch;
  font-size: 1.4rem;
  border: 2px solid hotpink;
}

.page-links {
  /* hide "Big" mode by default */
  display: none;
  list-style: none;
  gap: 1ch;
  margin: 0;
  padding: 0;

  /* when it is wider than 30ch, display it*/
  @container pagination (min-width: 30ch) {
    display: flex;
  }
}

.page-form {
  /* display "Little" mode by default */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  /* Hide it when it reached 30ch wide */
  @container pagination (min-width: 30ch) {
    display: none;
  }
}

Codepen Demo

React 19 Beta: Fine I Guess Web Standards Are Okay

Thu, 25 Apr 2024 21:02:43 GMT

This post is gonna be salty, but after years and years of teaching developers to add click handlers to divs, add inputs with no labels, and generally insisting that they know better than you, react has released their version 19 beta and it includes support for web components and form actions.

React has had the ability to add support for custom elements for LITERALLY YEARS, as there has been a separate experimental branch that was kept up to date and ready to be merged, but never was. So 6 YEARS after custom elements are generally available in every modern browser the react team has decided to BLESS us with the ability to use a native browser feature. After years and years of damage to the ecosystem, and now that pretty much every library that wants to make something, makes things react first, they throw an olive branch to say “Alright peasants, we will support your silly little elements.”

Similarly, after years and years of saying “Bind a value to every input and don’t worry about using forms” SUDDENLY, it’s now going to be best practice to use forms. How many projects will never implement this? How many countless hours have people spent making pointless click handlers and extra event listeners so that they could replicate a form’s functionality, for the react team to say “Ok, yeah, maybe this web standard is a good idea.”

The damage from React has already been done, and no amount of “Oh look at this thing we can do” will fix it.

The DevRel went down to Georgia...

Thu, 29 Feb 2024 22:21:21 GMT

Inspiration came from Stu Robson

The DevRel Went Down to Georgia

(to the tune of The Charlie Daniels Band’s “The Devil Went Down to Georgia”)

The DevRel went down to Georgia, they had some code to shill
They were in a bind, cause they were way behind, and the VP wasn’t thrilled
When they came upon this young dev pushing to main and cursing a lot
The DevRel sat right down and said, “Hey let me tell you what,

“You probably didn’t know it but I’ve pushed main a time or two,
And if you care to have a share, I’ll make a deal with you,
The thing my company makes can solve your primary issue,
I’ll bet a sticker of gold against your role that it’ll make it faster too.”
The dev said “My names Sally and I’ve got stand-up in ten,
But if you wait, I can give an update, and then we can begin”

Sally commit and push your code and submit a new PR,
Cause the tests won’t fail in CI, and the DevRel has a card
and if you wait, you’ll win this shiny sticker made of gold
and if you leave, the DevRel gets your role

The DevRel opened up their mac, and said “I’ll start this show”
And fire flew from their finger tips as they began to git clone
And they pulled a branch, and started to talk about their business
Then a band of recruiters joined in, and it sounded something like this

[insert amazing guitar/banjo/fiddle solo, overlaid with someone discussing some kind of generic developer product with a chorus of recruiter ooh-ing and ahhh-ing, and miscellaneous keyboard sounds]

Now when the DevRel finished, Sally said, “That’s a pretty good dry run,
But come sit down in the chair right there, and let me show you my problem.”

Fire up some docker, npm run
Add a little python, rust for fun
C Sharp in the backend, layer in some go
Tie it all together with a bit of “No Code”

Well, the DevRel bowed their head because they knew they can’t compete
And they laid that golden sticker down as they got up from their seat
Sally said, “DevRel, don’t feel too bad, or lose any morale,
The tool seems cool, I like your pitch, but I need it to support pascal!”

Fire up some docker, npm run
Add a little python, rust for fun
C Sharp in the backend, layer in some go
Tie it all together with a bit of “No Code”

Why I Find LLMs Frustrating

Sun, 28 Jan 2024 21:38:21 GMT

LLMs are a great tool if they are used responsibly. However when you blindly copy and paste the results, it will make your life hell.

Don’t Trust The AI

We’re currently having to rewrite large portions of our code at work because of a pattern introduced by an LLM that was 100% wrong. It’s not some small part of the codebase either. It’s the data layer. In no way is this code close to being good or correct.

Now this being said, the code in question is misusing the useFetch composable in Nuxt 3. I’ll be honest, I find useFetch to be very backwards in how it works. Essentially, you declare all your dependencies up front, and then it can automatically update based on reactive values. I know why they went this way, but it’s confusing as heck. Add on top of this an automatic caching mechanism you can’t turn off, and you’re gonna have headaches.

But when I discovered that the bad code generated is from ChatGPT, I was furious. You cannot blindly accept what an LLM spits out. LLMs spit out something that approximates what a reasonable response would look like. It does not, cannot, and will not attempt to fact check itself, and even when you attempt to correct it, your results will only be technically correct on a good day. So when you copy and paste the first code example you are given, and then copy and paste it all over the code base…. The result isn’t great.

On The Other Hand…

I have dysgraphia. It’s like dyslexia, but for writing words and communicating ideas. It gets in the way at work very often. I’m regularly having to write issues and communicate technical stuff to multiple other people in a way that isn’t just sci-fi technobabble. I fall short of this frequently. My brain goes faster than my fingers can write (on paper, typing, or speaking sometimes) and I will skip 8 steps when I really need to slow down and connect the dots.

I was talking to my sister (who specializes in education and communication) after a particularly rough patch, and was explaining all of these woes, my sister just looked at me and said,

“Alex, you know that’s what ChatGPT is good at…”

She was right.

I needed something that can take my weird jargon and break it out into a more usable format. ChatGPT is great at taking text written and rewriting it into another tone or format.

So, I caved.

I made a little ChatGPT prompt that understands what technology we’re using, I told it to NOT give code examples (I do not have time to correct that nonsense), and I told it to format it in markdown as a github issue with steps to do. I can then edit the output as needed to correct its mistakes. It gives me the needed framework to make communication with my team more successful.

It’s been a mixed success. It’s fixed a lot of the pain points we were having. It’s saved me time. It helps me get around the thing my brain cannot do.

More Help

I’ve also recently started using brainstory.ai to help me think through ideas. I’ve used it to help me write some conference abstracts because (once again) my dygraphia won’t let me format things in a way others will understand. It lets me talk and kinda word vomit out all my ideas and then help summarize what I’ve just said.

Another great tool to have in your pocket.

A Tale of Two AIs

I cannot say that I fully endorse using LLMs for everyone. You cannot tell ChatGPT to write your essay homework and expect it to be correct. But, maybe it can help you reword that sentence you’re messing with to make it be better. Maybe if you struggle communicating your thoughts, it can help you put them out in a useful way.

While I’m not always great at communicating, I don’t always need help. Sometimes I can word vomit an entire page long thing about a topic that I have a mild amount of experience with and hopefully help others without any assitance.

Like this.

WTFM

Fri, 19 Jan 2024 02:46:32 GMT

A philosophy that you should always maintain when developing is to Write The Fricken Manual.

Many times over the years, i’ve heard the advice to “RTFM”. But the documentation wasn’t great. And no one was writing it. This sounds ridiculous, but until recently, the React documentation was spread across blog posts and tweets, and a huge effort was put into making a new documentation site that was up to date. In a way, it has probably been extremely helpful that React has not released a new version in almost 2 years.

When you write software, you must write the documetation. Immediately. Post haste. Pronto. When you move on to the next thing, you will forget how what you just made works. Write documentation like future you is an axe murderer with a time machine. Don’t anger future you.

Am I perfect at this? Heck no. Ask my coworkers. We’re struggling through getting stuff in my brain out in a usable form right now.

You have to try to write the docs though.

WTFM.

Art Direction with :has()

Thu, 18 Jan 2024 21:07:05 GMT

I’m trying out some new art direction here at alex.party. let’s see if it works….

The LightBox Nerd Snipe

Sun, 07 Jan 2024 22:32:34 GMT

I’ve been nerd sniped.

A few weeks ago, Raymond Camden posted about An Image Dialog Web Component and I read that article, added some discussion about how you’d style it, then promptly stopped thinking about it… consciously. I think it’s been floating around in the back of my brain because another colleague recently asked what lightbox scripts people were using with astro and other SSGs. My immediate thought was “Well, that should be a web component…” completely forgetting that Raymond made a post about it nearly a month prior.

Anyway, I made my own version.

See the Pen <a href="https://codepen.io/fimion/pen/GReZMMx"> light-box</a> by Alex Riviere (<a href="https://codepen.io/fimion">@fimion</a>) on <a href="https://codepen.io">CodePen</a>.

This version is a bit more forgiving than Raymond’s. It looks for any link with an image inside of it. Which makes it easier to use it with a list, or whatever nested structure you want. It also allows for multiple images and then will give you previous and next buttons based on what is there, but will limit itself to the contents of the current light-box.

Anyway, You’re welcome. Go use this for good.

Or chaos.

Have fun.

Optionally Shared Context in React Components

Mon, 02 Oct 2023 16:00:11 GMT

Right, here’s a weird one. I know what many of you are thinking:

Alex, why the heck are you writing about React?

The answer is, I just solved an issue for someone and they said to write a blog post. So fine, I’m writing a blog post.

Shared React Context

So my friend had a problem:

I’ve not dealt with this before: I’m helping someone who has a React component that is reused across a codebase. It pulls variables from a Context to be used in a few functions. BUT, if it’s in a different part of the app, those variables should come from a different Context. The component has a prop that tells you which context it should pull from, but you can’t put the useContext hooks in an if statement

When I see an issue like this my gut instinct is to point out that in vue you can have optionally reactive data and/or throw this type of thing into a computed value and move on with your day. (Edit: I have been informed that the react linter will pitch a fit about this, but_useContext_ can actually be accessed conditionally) But I bit my tongue, and made a minimal reproduction with a solution.

Shared Context - Normal Brain Version

import { createContext, useContext } from 'react';
import * as ReactDOM from 'react-dom'

const App1Context = createContext(null);

const App2Context = createContext(null);

const MyComponent = () => {
  const app1 = useContext(App1Context);
  const app2 = useContext(App2Context);

  return <h1>{app1?app1:app2}</h1>;
};

const Apps = [];

Apps.push(() => {
  return (
    <App1Context.Provider value="Hello App 1!">
      <MyComponent />
    </App1Context.Provider>
  );
});

Apps.push(() => {
  return (
    <App2Context.Provider value="Hello App 2!">
      <MyComponent />
    </App2Context.Provider>
  );
});

Apps.forEach((Component) => {
  const mount = document.createElement("div");
  document.body.append(mount);
  ReactDOM.createRoot(mount).render(<Component />);
});

Here’s a working demo

The way this works is by requesting both context values. If the 1st one exists, we use that. if the second one exists, then we use that instead.

Bada-bing, Bada-boom, solved.

Mostly solved

So, someone commented that really only works if you always want it to default to using the first context, but what if you wanted to use the 2nd context first?

Well, you’d need to be able to allow to specify the context order that we pick from, so let’s make a slightly more complex version.

Shared Context - Big Brain Version

import { createContext, useContext } from 'react';
import * as ReactDOM from 'react-dom'

const App1Context = createContext(null);
const App2Context = createContext(null);

const MyComponent = ({ context }) => {
  const chooseContext = {
    app1: useContext(App1Context),
    app2: useContext(App2Context)
  };

  if (!context) {
    context = ["app1", "app2"];
  }

  if (Array.isArray(context)) {
    for (const app of context) {
      if (chooseContext[app]) {
        return <h1>{chooseContext[app]}</h1>;
      }
    }
  }

  if (typeof context === "string") {
    if (chooseContext[context]) {
      return <h1>{chooseContext[context]}</h1>;
    }
  }

  return <h1>YOU PROVIDED NOTHING!!</h1>;
};

const Apps = [];

Apps.push(() => {
  return (
    <App1Context.Provider value="Hello App 1!">
      <MyComponent />
    </App1Context.Provider>
  );
});

Apps.push(() => {
  return (
    <App2Context.Provider value="Hello App 2!">
      <MyComponent />
    </App2Context.Provider>
  );
});

Apps.push(() => {
  return <MyComponent />;
});

Apps.push(() => {
  return (
    <App1Context.Provider value="Hello App 4!">
      <App2Context.Provider value="This will not display.">
        <MyComponent />
      </App2Context.Provider>
    </App1Context.Provider>
  );
});

Apps.push(() => {
  return (
    <App1Context.Provider value="This will not display.">
      <App2Context.Provider value="Hello App 5!">
        <MyComponent context="app2" />
      </App2Context.Provider>
    </App1Context.Provider>
  );
});

Apps.forEach((Component) => {
  const mount = document.createElement("div");
  document.body.append(mount);
  ReactDOM.createRoot(mount).render(<Component />);
});

Working demo here

This version allows you to pass a context prop that can be an array of strings or just a string, and specify which context order you want, or which context specifically you want.

People said this looked good.

Bada-bing, Bada-boom, done.

I was hungry so I started to go make lunch. My brain however started to do loop-de-loops in my head, because my brain LOVES patterns. Like way too much. But it saw one. it saw something that could be refactored into an easier use case.

Fine, brain. Let’s go.

Let’s start with the generic thing we can use to make this better.

SharedContext - Galaxy Brain Mode

// shared-context.js
import { useContext } from 'react';

export class SharedContext {
  /**
   * shhhh, our secret registry
   */
  static #registry = new Map();

  /**
   * register a shared context
   * @param {string} sharedName - the shared name for the context group.
   * @param {ReactContext} Context - the context object from `createContext`;
   * @return {Symbol} - The identifier used to specify the exact context you would like.
   */
  static register(sharedName, Context) {
    if (!SharedContext.#registry.has(sharedName)) {
      SharedContext.#registry.set(sharedName, new Map());
    }

    const ctx = SharedContext.get(sharedName);
    const identifier = Symbol(sharedName + ctx.size);
    ctx.set(identifier, Context);
    return identifier;
  }

  /**
   * Get a shared context map
   * @param {string} sharedName - the shared name for the context group.
   * @returns {Map<Symbol, ReactContext>} returns a map of Idenitier/Context pairs.
   */
  static get(sharedName) {
    return SharedContext.#registry.get(sharedName);
  }

  /**
   * Get the correct context value based on your current component.
   * @param {string} sharedName - the shared name for the context group.
   * @param {*} [fallback] - The fallback value when no context is provided.
   * @param {Symbol|Symbol[]} [context] - The order of lookup for context based on ID symbols.
   * @returns {*} returns either the fallback or the found context.
   */
  static use(sharedName, fallback, context) {
    const ctxMap = SharedContext.get(sharedName);
    if (!ctxMap) {
      throw Error(`no such SharedContext: ${sharedName}`);
    }

    const ctx = new Map();

    ctxMap.forEach((Context, identifier) => {
      ctx.set(identifier, useContext(Context));
    });

    if (!context) {
      context = [...ctx.keys()];
    }

    if (Array.isArray(context)) {
      for (const id of context) {
        if (ctx.get(id)) {
          return ctx.get(id);
        }
      }
    }

    if (typeof context === "symbol") {
      if (ctx.has(context)) {
        return ctx.get(context);
      }
    }
    return fallback;
  }
}

This code gives us a generic way of creating “Shared Context” states that have a default order. You use SharedContext.register to register a context to a shared namespace, and it will return a unique Identifier Symbol that you can use to specify the context again when you want to use it. Otherwise it’ll use the ones that are registered in the order they are registered. To use the Shared context you call the SharedContext.use hook, where you give it the shared namespace, and a fallback value as a default. you can also specify the specific context, or order of the context you would like to use.

The code to use this looks something like this:

import { createContext} from 'react';
import * as ReactDOM from 'react-dom';
import {SharedContext} from './shared-context.js';

const App1Context = createContext(null);
const App2Context = createContext(null);

// The order is based on the order of registry...
const App1ContextId = SharedContext.register("App", App1Context);
const App2ContextId = SharedContext.register("App", App2Context);

// So in theory, with a code split code base, only the ones registered would be used...
const App2ContextIdAlt = SharedContext.register("Alt", App2Context);
const App1ContextIdAlt = SharedContext.register("Alt", App1Context);

const MyComponent = ({ context }) => {
  const ctx = SharedContext.use("App", "YOU PROVIDED NOTHING!!", context);

  return <h1>{ctx}</h1>;
};

const AltComponent = ({ context }) => {
  const ctx = SharedContext.use("Alt", "YOU PROVIDED NOTHING!!", context);

  return <h1>{ctx}</h1>;
};

const Apps = [];

Apps.push(() => {
  return (
    <App1Context.Provider value="Hello App 1!">
      <MyComponent />
    </App1Context.Provider>
  );
});

Apps.push(() => {
  return (
    <App2Context.Provider value="Hello App 2!">
      <MyComponent />
    </App2Context.Provider>
  );
});

Apps.push(() => {
  return <MyComponent />;
});

Apps.push(() => {
  return (
    <App1Context.Provider value="Hello App 4!">
      <App2Context.Provider value="This will not display.">
        <MyComponent />
      </App2Context.Provider>
    </App1Context.Provider>
  );
});

Apps.push(() => {
  return (
    <App1Context.Provider value="This will not display.">
      <App2Context.Provider value="Hello App 5!">
        <MyComponent context={App2ContextId} />
      </App2Context.Provider>
    </App1Context.Provider>
  );
});

Apps.push(() => {
  return <hr />;
});

Apps.push(() => {
  return (
    <App1Context.Provider value="Hello Alt 1!">
      <AltComponent />
    </App1Context.Provider>
  );
});

Apps.push(() => {
  return (
    <App2Context.Provider value="Hello Alt 2!">
      <AltComponent />
    </App2Context.Provider>
  );
});

Apps.push(() => {
  return <MyComponent />;
});

Apps.push(() => {
  return (
    <App1Context.Provider value="This will not display.">
      <App2Context.Provider value="Hello Alt 4!">
        <AltComponent />
      </App2Context.Provider>
    </App1Context.Provider>
  );
});

Apps.push(() => {
  return (
    <App1Context.Provider value="Hello Alt 5!">
      <App2Context.Provider value="This will not display.">
        <AltComponent context={App1ContextIdAlt} />
      </App2Context.Provider>
    </App1Context.Provider>
  );
});

Apps.forEach((Component) => {
  const mount = document.createElement("div");
  document.body.append(mount);
  ReactDOM.createRoot(mount).render(<Component />);
});

Working demo here

This is probably the most flexible version. In theory we could also allow the fallback to be a function so if you wanted a fresh version of something you could do that, but ultimately, I don’t want to be responsible for that, and lunch is ready.

After writing a React helper, I feel a strong need to go take a shower. Y’all take care!

useFetch in Nuxt 3: The Proper Way

Sun, 17 Sep 2023 14:33:29 GMT

I have recently seen at least 2 people make a wrapper around useFetch in Nuxt 3 incorrectly by trying to call useFetch as though it were fetch. While the approach they take will usually work (in general), it will very quickly cause you to have multiple errors and weird side effects.

Generally, the example i have seen is something like this:

export const useDataThing = () => {
  // grabing some globally available data via pinia, useStorage, vuex, useState, etc
  const dataThing = useGlobalDataThing();
  const dataThingId = useGlobalDataThingId();

  const isPending = ref();

  //create our own fetch handler
  async function fetchDataThing() {
    // calling a composable like it's just a function
    const { data, pending } = await useFetch(`api/dataThing/${dataThingId.value}`);
    console.log(pending.value);
    isPending.value = pending.value;
    dataThing.value = data.value;
  }
  if (!dataThing.value) {
    fetchDataThing();
  }
  return {
    dataThing,
    dataThingId,
    fetchDataThing,
    isPending,
  };
};

There is a whole bunch of bad errors you’re gonna get from this, mostly stemming from the fact that you’re not calling useFetch in the root of your composable function. So let’s fix that.

A Better Way

useFetch is a composable and should be called in essentially the context of the setup method. It provides a way to trigger fetch calls.

Let’s rewrite this in a better way.

export const  useDataThing = async () => {
  // grabing some globally available data via pinia, useStorage, vuex, useState, etc
  const dataThing = useGlobalDataThing();
  const dataThingId = useGlobalDataThingId();

  const { 
         // Our Data result
         data,
         // if the call is pending
         pending:isPending,
         // 2 ways to trigger the fetch call, they both work the same
         refesh, execute,
         // Let's make all the other stuff available too: status, errors, etc
         ...theRest
        } = await useFetch(
    // We can pass a function as the url param so that we can get the current
    // value of dataThingId when fetch is called.
    ()=>`api/dataThing/${dataThingId.value}`,
    {
      // Don't call fetch immediately. Wait for us to trigger it.
      immediate:false,
      // Create a key for caching/correct storage
      key: "getDataThingById"
    }
  );

  //create our own fetch handler
  async function fetchDataThing(...args) {
    await refresh(...args);
    dataThing.value = data.value;
  }
  if (!dataThing.value) {
    await fetchDataThing();
  }
  return {
    dataThing,
    dataThingId,
    fetchDataThing,
    isPending,
    ...theRest
  };
};

Doing it this way will Make it way more consistent for you. You can now fetch a different piece of data by doing:

const {dataThing, dataThingId, fetchDataThing} = await useDataThing();

dataThingId.value = 10;
await fetchDataThing();

console.log(datathing.value); // will have the updated values.

Hopefully this will save others with a lot of pain.

Classes, Super, and You

Tue, 18 Jul 2023 13:37:20 GMT

Last week Chris and Dave mentioned that they don’t get why you have to call super when you’re in a class.

Let’s learn you a thing

So first let’s just cover what I’m gonna be talking about here. We’re talking about the super keyword that can be used in JS classes. This keyword is most commonly used in the constructor of a class, and Dave asks:

“Why doesn’t class auto-imply super?”

The answer is: Function Signatures.

I Don’t Autograph My Functions

Function signatures tend to be talked about in other languages more, but the general idea is that a function signature is the name of the function, the arguments and their types, and the return type. this creates a unique identifier for the function you have written also known as its signature.

That definition is probably an over simplification, but in other languages with types, you can overload a function/method definition by redefining it with a different signature, and it can be used multiple ways. Since JavaScript doesn’t have this concept built in (and TypeScript won’t do this either) we tend to not talk about it… Until you need to extend a class.

Extending classes

When you extend a class, the original class will have a constructor definition. We’ll use this example from MDN as our basis:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  get area() {
    return this.height * this.width;
  }
  set area(value) {
    this._area = value;
  }
}

Our Rectangle class has a constructor that takes in a width and a height. This makes sense because a rectangle can have a width that is different from its height.

So what happens when we do this?

class Square extends Rectangle {
  constructor(length) {}
}

The JavaScript engine doesn’t know how to “auto-imply” a super call. There is 1 argument. the extended class constructor needs 2.

Enter `super`

The fix for this is that the developer must be explicit in how the extended class is constructed.

class Square extends Rectangle {
  constructor(length) {
    super(length, length);
  }
}

Rather than trying to add some AI LLM to every JavaScript engine to try and figure out what your auto implied constructor signature is, you as the developer need to say what the call will be.

Conclusion

Dave, Chris, you have to call super because the engine cannot guess what you are trying to do. I hope this helps.

Better JavaScript Currying Examples

Fri, 24 Mar 2023 18:36:53 GMT

I’ll admit I went on a bit of a rant the other day on this topic because I find the way people are taught about Currying functions is typically with the least useful examples ever. This is in part because of the push for the functional programming paradigm in JavaScript (which until we have Records and Tuples will continue to be laughable, in my opinion) but also because a Currying Function is a mathematical concept.

What is a Currying Function?

It’s a function that returns a function. Period. It’s named after a mathematician (Haskell Curry) but he wasn’t even the first to use this way of doing things.

The concept is extremely straightforward to explain, but the nuance as to when to use this is a bit more difficult to explain. This isn’t something you will have to write all the time. Which is why the basic example that gets thrown around a bunch is very… not helpful.

const addThreeNumbers = (a)=>(b)=>(c)=>a+b+c;

addThreeNumbers(1)(2)(3) // 6

If I saw this code show up in a code review, I would not only ask for changes, but I would probably ask to have a call with the developer to make sure they were okay.

This example shows up because it is the same as mathematical proofs. It’s there for historical reasons, but not practical reasons.

When to Make a Currying Function?

So “when” is the bigger thing as to why you want to write a currying function. Currying functions are great when you know want to provide a common value across a function call multiple times, but it may not be a static value.

So let’s make a practical example of a Currying Function. The example that you have likely run into before is the authenticated fetch handler.

export const createAuthFetch = (token) =>{
  return (url) =>(options = {})=>{
    options.headers = {
      ...(options.headers||{}), 
      'Authorization':`Bearer ${token}`
    };
    return fetch(url, options)
  }
}

Now you would never use this function like this (even though you could):

await createAuthFetch(token)(url)()

The more likely scenario is that you would have another file that would do something like this:

import {createAuthFetch} from './create-auth-fetch.js';
import {getToken} from './auth-provider.js';

const authFetchFactory = createAuthFetch(getToken());
// Now we generate a handler for each endpoint.
export const fetchUsers = authFetchFactory('/api/users')
export const fetchReports = authFetchFactory('/api/reports');

Now anywhere in our code base that we want to fetch from our authorized api endpoint, we don’t have to pass a token around.

import fetchUsers from './auth-fetch.js'

await fetchUsers({method:'GET'});

This is a real world example.

Please stop teaching people to add numbers with Currying Functions as your only example. There are so many more useful ways to show this technique!

Update: as pointed out, a Currying Function only has one argument technically. So I’ve updated the examples so it is a proper Currying Function.

Please Be More Physically Active

Wed, 14 Jun 2023 20:10:06 GMT

Alright, I’ll admit I am the least qualified person to talk about this. But as a mediocre white guy in tech on the internet, I’m going to share my experience.

A bit of backstory

I don’t work out. I should. All of my doctors agree on that point. In fact, all of those doctors would be pleased if I just started walking a little each day. But my brain is bad, and it thinks that taking a walk is the equivalent of summiting Everest. Everytime I consider any form of physical activity, my brain goes “Ew, no.”

In a previous career, I spent lots of time pushing boxes, climbing ladders, regularly lifting 20lb lighting fixtures over my head, and this type of activity kept my body in pretty okay shape. Was I the most fit? No. But at least i was moving. A lot.

Moving over into the Web Dev space, I stopped moving. Like, pretty much entirely. This was/is my downfall.

A year+ ago I went to see a physical therapist (PT) for the first time. My wrist was always in pain, and I figured it wouldn’t hurt to talk to a professional (let’s be honest) my wife told me to go see her PT. We worked through some stuff, the wrist got better, cool. Then, other things started to hurt.

Reality sets in

The way my PT at the time explained it to me was this: Most people end up in physical therapy because they have over-extended something. They’ve done too much. And in doing so, they’ve hurt themselves.

However, There is also the other end of the spectrum, where someone does absolutely nothing at all to the point where the body starts falling apart (not literally, I hope). This is where I am, and let me tell you, it sucks.

Whatcha gonna do?

This is where I’m supposed to be inspirational and stuff, right?

“Just lift one thing at a time!”

or maybe:

“No one ever regrets working out!”

Most platitudes don’t work when your brain won’t cooperate. I genuinely have no idea what I’m gonna do, nor do I have any life altering advice I can give. The only thing I can tell you is what I get told by everyone:

“Please, just move more.”

Don’t let your body fall apart.

Delete Your Dev Environment Regularly

Thu, 23 Mar 2023 00:42:04 GMT

I have recently had the opportunity to muse about process and how we maintain a system. One of the things in particular that I have been thinking about the most is onboarding new people into your project.

In my ideal situation, a developer being able to have a local copy of code up and running should only be limited by the speed of their internet connection. The best way to ensure this is the case is to regularly delete your dev environment and clone a fresh copy down. This gives you a great opportunity to ask some questions:

How long does it take for you to get set up?
Is the documentation correct and easily accessible?
Is it clear who can be contacted if there are questions?
What is the process for contributing?
How can someone report an issue?

A lot of these questions are typically answered in a README file, and many projects have multiple files to instruct for how to help out. I highly recommend that you go ahead, delete your dev setup today, and document the steps it takes to get it up and running. Future you, and future contributors will thank you. A lot. Seriously.

Why I like the JSON:API format more than GraphQL

Fri, 17 Feb 2023 21:53:10 GMT

Dave Rupert saw me on stream talk about JSON:API and suggested I write a blog about it. So here we are with a clickbait title, and lots of opinions.

What is JSON:API?

Let’s start with this. JSON:API is a specification for how to format the data for your REST API. It has a standard interface, a standard way of handling filtering, sorting, paging, and relationships. It is a fantastic tool when a backend developer says “How would you like your data formatted?” and you can say “Do it like this.” and then you don’t have to argue about it and can just get to work.

Here’s an example of a response from the JSON:API home page:

{
  "links": {
    "self": "http://example.com/articles",
    "next": "http://example.com/articles?page[offset]=2",
    "last": "http://example.com/articles?page[offset]=10"
  },
  "data": [{
    "type": "articles",
    "id": "1",
    "attributes": {
      "title": "JSON:API paints my bikeshed!"
    },
    "relationships": {
      "author": {
        "links": {
          "self": "http://example.com/articles/1/relationships/author",
          "related": "http://example.com/articles/1/author"
        },
        "data": { "type": "people", "id": "9" }
      },
      "comments": {
        "links": {
          "self": "http://example.com/articles/1/relationships/comments",
          "related": "http://example.com/articles/1/comments"
        },
        "data": [
          { "type": "comments", "id": "5" },
          { "type": "comments", "id": "12" }
        ]
      }
    },
    "links": {
      "self": "http://example.com/articles/1"
    }
  }],
  "included": [{
    "type": "people",
    "id": "9",
    "attributes": {
      "firstName": "Dan",
      "lastName": "Gebhardt",
      "twitter": "dgeb"
    },
    "links": {
      "self": "http://example.com/people/9"
    }
  }, {
    "type": "comments",
    "id": "5",
    "attributes": {
      "body": "First!"
    },
    "relationships": {
      "author": {
        "data": { "type": "people", "id": "2" }
      }
    },
    "links": {
      "self": "http://example.com/comments/5"
    }
  }, {
    "type": "comments",
    "id": "12",
    "attributes": {
      "body": "I like XML better"
    },
    "relationships": {
      "author": {
        "data": { "type": "people", "id": "9" }
      }
    },
    "links": {
      "self": "http://example.com/comments/12"
    }
  }]
}

Whoa, that example seems really verbose!

Yep. and I’m totally okay with that. each thing in there has a specific purpose, and it makes my heart sing each time I see something formatted this way, because I know how to find everything. Every data object has a type (for all you typescript nerds). Every object or relation has links for how to get more of a thing.

But Alex, GraphQL-

Nope. GraphQL requires me to dig through a lot of documentation to figure out what objects are available, how they relate, and then how to write a query to get that data. I have to learn an entire query language to fetch data. With JSON:API, I can hit an endpoint and get well formatted and descriptive data immediately. JSON:API also allows for me to query for related objects in my fetch query. not only that, I don’t have to know some arcane weird syntax to update things. It’s a REST API.

You’re being unkind to GraphQL

Nope. Really not. I’m sure that there are places where GQL can do really well that I can’t think of (maybe if you are using a graph database?) but honestly, Those tend to not be things I work on. If you like using GraphQL, great! I’m not gonna yuck your yum. But I prefer REST APIs. They just make more sense to me.

You’re welcome Dave.

Test Post - Please Ignore

Thu, 02 Feb 2023 17:01:50 GMT

I’m setting up some automations, and I’m hoping that I’ll be able to let folks know more effectively what it is that I’m writing about and doing lately.

I’m doing this automation using IFTTT and hopefully (if this goes right) it’ll post to twitter, mastodon, and linkedin.

Sorry linked in folks if y’all came here and were blinded by the sudden flash of colors and Comic Neue. I promise, I do write about many technology related topics usually.

Website vs. Application vs. Web App

Tue, 03 Jan 2023 17:11:11 GMT

Jen Simmons recently posted an interesting question about website thinking for 2023, and I waded into the conversation and realized I have strong opinions as a mediocre white guy in tech. So I’m gonna go into my headspace about these topics.

Websites, Applications, and Web Apps Are Both All the Same and Separate

When we talk about these 3 concepts, you can have a multitude of combinations of how they work together. There is no clear cut separation of these, only many shades or flavor combinations that come out of it. In general you cannot have one without the other in some way shape or form but many times, It’s based on WHO is interacting at any given time that informs the definition.

That was wordy. Let me explain.

What is a “Website”?

A website is just html, js, and css. That’s it. From my distinct perspective specifically, a website is used to present information, and you will generally care about speed, SEO, and proper social meta data for sharing and what not. Many times, this is a landing page, Maybe a blog, product listings… etc. That is a website.

What is an “Application”?

An application is anytime you want to track state across page loads. or maybe even computer systems. A website can be the “face” of an application. An online store can be an application. Generally speaking, if you can update data in some meaningful way, it’s an application. Applications may or may not care about social sharing. Applications may or maynot need you logged in. Heck, a WordPress site is both a “Website” and an “Application” depending on if you are logged in or not. Or what you are trying to do.

What is a “Web App”?

This is where things get…. real weird. Generally speaking I would say if I open a website and expect the information to stay updated without me refreshing the page, it’s a web app. If you need to figure out how to manage state in the browser without doing a full page reload…. it’s probably a web app.

So How is This Weird?

Well, You can have all 3 things be true about any given site. A static website marketing page has a little chat bubble that pops-up that allows you to ask questions.

The marketing site is 100% a website.

The chat bubble? A web app.

All of this stuff is sent from an application.

Conclusion

My general rule of thumb is: Everything is a website. Treat it like a website, until you know it NEEDS to be a web app.

*Written from a web app

Non-Alcoholic Options for Event Organizers

Mon, 23 Jan 2023 17:42:16 GMT

Todd Libby recently posted about the need for conference organizers to support those of us who don’t want to drink. As someone who has been sober for 13+ years now, I agree whole heartedly with this sentiment. Sometimes it is difficult for people who don’t regularly think about this to know how to have actionable ways of changing things though. So, I’m going to give you some tips. You’re welcome.

1 - Alcohol is not the focus

If your event centers around alcohol, you’ve already failed. I cannot save you if you decide a “KEG STAND AND BEER PONG/FLIP CUP COMPETITION” is an appropriate thing to have at a professional event. In fact, I might suggest you look into getting help. Anytime you make an event that focuses on drinking as the primary activity, you have excluded the following people:

Recovering alcoholics (Hi.)
People who take medication that doesn’t allow them to drink
People who don’t drink for religious reasons
People who are pregnant
Anyone under the age of 21 (This is more of USA thing, but generally, still a thing.)
Anyone who doesn’t feel safe being around people drinking
Anyone who doesn’t feel like drinking that day
Anyone who just doesn’t drink

If you are hell bent on making an event focused on drinking, please go ahead and print up that list and add it to your flyers to declare that you are fine discriminating against those people.

What to do instead: Activities

Instead of drinking being the activity, make drinking be a thing next to the activity. Here are a list of potential ideas:

Team trivia
Karaoke
Bowling (Probably not bowling, it excludes people in a different way)
Board game night
Chess Competition
Food Truck Rally
Dinner

There can be drinking. That’s fine! Just don’t make it the focus.

2 - Provide Non-Alcoholic Options

This is the big one. As someone who doesn’t drink it is a bit of a slap in the face when I go to an event and my options are:

Water
Bottled Water
Unsweetened Ice Tea

Let’s be honest. You’re here probably because you’re wondering why I am complaining. That’s totally enough options! Nope. No it isn’t. This is the equivalent of showing up to a wine tasting to discover you will only be trying out a walmart brand pinot. This is like going to a brewery and only being able to order Natty Light. It’s like going to a whiskey tasting and being offered jack and coke. IT IS OFFENSIVE.

What to do instead: Craft Sodas

There are so many different craft sodas (some of which you can get from breweries) that will show you put mild effort into giving people options. Here are some of my favorites:

Abita Root Beer
Red Hare Root Beer
Red Hare Grapefruit Soda
Boylan Sodas

There are so many potential options here. A little bit of effort to have one or two of these available make me feel about 900% more welcome.

What to do instead: Mocktails

So, you have your very-serious-and-fancy bar for your very-professional-not-alcohol-focused event. People are wearing suits and gowns. they look very nice. So you have a “Signature Cocktail”… why not take another 30 seconds and come up with a “Signature Mocktail” as well. Even if you don’t have a Signature drink for your event, if people have martini glasses, gosh dang, I want a fancy glass too. The difference between a place that says “I can make you a mocktail, what flavors are you interested in?” and then they pour me a gingerale with an orange slice in it vs the places that hand me a menu with good descriptions of interesting mocktails is tremendous. I appreciate a place that can make me what I am in the mood for, but sometimes I want something new. or something I can get another of. Plan out your mocktail menu. I’ll help you here with some products that make this process a lot easier:

Fevertree Mixers are a great starting point for any drink. Bold flavors and readily available.
Seedlip Drinks are complex non alcoholic spirits that add depth to any drink. Also have a large collection of recipes.
Le Sirop a great way to add pizzaz to your drink.

This is everything you need to make a fantastic mocktail. I have been places that I ordered every mocktail they had because they were all so good. Don’t be afraid to try out these drinks yourself! Know what you are offering to people.

What to do instead: Amazing Food

This one is harder. If you can’t make the craft sodas or the mocktails work out, give me food. But it needs to be amazing. Not “I ordered pizza hut” or the Presidential Mcdonalds Meal. It needs to be something local. Something unique to the area. something that will leave me talking about it afterwards. I can’t give you specifics on this, dear reader, but you will know it when you have it right.

Conclusion

Y’all, I know It’s tough being an event organizer. I get it. If you’re already taking into account dietary restrictions, go the extra step, and try making things better for everyone. A little bit of work goes a very long way.

Update

Just so we are clear, this post isn’t all encompassing. I have a very USA centric perspective, and you should adjust accordingly to your region/audience. Also these suggestions are not exhaustive. There are lots of other options out there. Not all of these suggestions may work for everyone and are purely my own preferences. Know your audience, and know who you want to have as part of your community.

Moving to Astro and StaticCMS

Sun, 18 Dec 2022 03:05:23 GMT

Hey Y’all,

So I spent this past thursday feverishly working on moving my blog from Gridsome and Netlify CMS over to Astro and StaticCMS and let me tell you what: It has been extremely rewarding.

Gridsome and Netlify-CMS are Dead, Long Live Astro and StaticCMS

I am not one to try and constantly change out how things work. I try to find a system I like and stick with it (mostly out of laziness). At work lately we’ve been experimenting with some other systems outside of my normal routine, and Astro has been a big hit with both people at work, and many other people I know. I converted my (extremely simple) blog from gridsome over to astro in a couple of hours. It was really impressive.

Now, there has been a small amount of movement over the last 2 years at the gridsome project, and I hope they will eventually get things working in vue 3, but honestly, I’m tired of waiting. I also gave nuxt v3 a shot, and…. well… rss support was non existent, everything fel like it was in a state of “we will do that eventually” and I also feel like the end result SSG was a lot bigger than i wanted it to be (javascript wise).

Astro seemed like a good compromise by allowing me to copy over my styles and vue components and vue pages, and what I found was that it is so much better than a compromise. It’s enjoyable. It’s delightful. I was dubious at first about the .astro components needed to be used as pages and how they have serverside javascript in… frontmatter tags? But when I started using them, it just clicked. It was so easy.

I also had been using netlify-cms as my backend and apparently the 2 people who had been maintaining it at netlify are no longer working there which really kinda kills it. There have been a lot of small bugs here and there for a while, and knowing that no one is going to fix them is frustrating.

However, StaticCMS is a fork that has been made, and HOPEFULLY, it will be maintained for a while. I’m using it currently. It also has some new and different bugs, but I am sure those will get ironed out.

Alex.Party Going Forward

All of that being said I am super looking forward to being able to add some features more easily to this here ding dang site.

Y’all be good.

New Year, New Things?

Sun, 01 Jan 2023 20:00:52 GMT

I don’t really like to make resolutions for the new year because I am terrible at following through on them. I do think that this year, I need to focus on me a bit more. Work on exercising, work on finding a hobby or two, and not make everything about content creation.

Tired

I’m so tired. My yearly seasonal depression has severely impacted my ability to function, and I’m planning on reworking my current medication setup.

Speaking

I like Todd Libby’s idea for doing max 1 conference per month. I already have some speaking engagements planned for 2023, but I will probably be creating less new content for these conferences.

Streaming

I think i’m going to stream once a week. Maybe less. I’ve been very kind of scatter shot about the content I’m making and I don’t know that I will have the energy to curate the things I’m actually going to work on.

Outside

I need to go outside more. 3 out of 4 doctors agree. The one that doesn’t agree is my dermatologist. So, just make sure I have suscreen.

Conclusion

It’s not all doom and gloom. The future holds possibility, and I need to get my own stuff in order so I can get back to doing stuff I enjoy. Hope y’all all have a good new year!

Hellooooo Astro!

Fri, 16 Dec 2022 05:51:14 GMT

Well, I am testing out this new astro setup, and using the Static JS CMS to edit my posts. Let’s see how this goes.

Currently I’m going to test the draft flag? I may need to edit some code to see if that works correctly. LETS FIND OUT!

Update: the draft feature now works…. I might also do something fun with this.

If You Give a Function a Function...

Thu, 27 Oct 2022 16:05:13 GMT

So Cassie Evans tweeted this the other day:

Frameworks obfuscate away & front-end dev spans so many specialities.

When there's a 'discussion' on here it's common to see folks say 'learn the web platform'.

Got me thinking.

What's the most useful thing you've learnt about the web platform for YOUR area of expertise?
— CSS Evils 😈 !important (@cassiecodes) October 26, 2022

This got me thinking about a thing that it literally took me YEARS to understand (and frankly severely hampered my coding skills during that period.) And when I say years, I don’t mean like 1 or 2 years. I started learning BASIC and HTML/CSS around 2000, and have been on and off developing since then. So by years, i mean about 15+ years.

The thing about functions…

So the thing I never learned is that a function isn’t some magic thing. Most languages allow you to pass functions around. As arguments. To other functions. This may seem obvious to others, but seriously, I did not understand this concept. Because I didn’t understand this, GUI programming was impossible. JavaScript event handling was not understandable. Certain parts of WordPress were incomprehensible.

I remember trying to learn to use PyGTK, and never being able to do much with it.

One day though, I think I was reading some JavaScript code at my first professional programming job, and I suddenly realized you could pass a function as an argument. SO MANY THINGS CLICKED FOR ME. All at once, the ability to use a bunch of libraries that I could not understand before became open to me and it completely revolutionized how i think about things.

So, for all you new to development, understand this: You can pass a function as an argument to another function.

Thank you.

Thoughts on testing

Mon, 14 Nov 2022 14:33:12 GMT

Chris Coyier had an interesting post on integration vs end to end testing. I made a reply that I want to kinda dig into a little bit.

The Testing Pyramid is Weird

I have always found the Unit, Integration, and End to End testing pyramid to be a bit… clunky? The names describe how much you are testing, which is great, but it doesn’t give much perspective as to what you are actually trying to test.

I personally think testing should be thought about more as testing that an interface works as intended. An interface, in this case, is anything someone might interact with. I like to break this out into 3 categories: Developer, Consumer, and User interfaces.

Developer Interface Tests

These tests are mostly Unit tests for the internal code of your code base. Only developers helping make your product will really get direct benefit from these tests. You want to focus on making your developer interface tests check that functions/classes/components all work as expected for a developer who is using them. You should not test HOW the interface gets its result, only that it does get the result you are looking for.

Consumer Interface Tests

A Consumer is anyone who will be using your product as potentially a developer, or maybe an application, that is outside of the people developing it. A good example of this would be a public REST or GraphQL API that is used by outside developers. (maybe if you are a back-end developer, the consumer is your front-end team!) It can also be someone who is using your published library. This is still in a way a technical interface test. This is where you get more integration tests as well as unit tests depending on the situation. If you say your REST API will return a JSON object, gosh darn, make sure it does!

User Interface Tests

User tests are often thought of as being only E2E tests, but I disagree. A User test is testing how a user (generally non technical, but sometimes not depending on what you make) will interact with a thing. E2E tests are very helpful here. but also, if you can atomically do unit tests on an interface, do it! same for integration tests. if you click a button and you want to make sure it displays data from an API, maybe you don’t need the full app to check that functionality. that can be an integration test! User tests are a touch more fluid in my mind than most people make them out to be.

That’s enough

Hopefully this might help you think about how you approach your tests and maybe next time you don’t know how to write a test for a thing, you’ll ask yourself “Who am I writing this test for?”

Poop.

Wed, 13 Jul 2022 14:07:48 GMT

I think I now have a few people reading this, so I should update it more regularly, so let’s get some life updates in here.

Upcoming Speaking Engagements

THAT Conference at the end of July.
MagnoliaJS in September.

Plus some other ones might be around the corner too. Stay tuned.

Recent Projects/Pens

General Updates

Streaming is going well. My follower count has stalled slightly, but this also gives me time to get things I need to get the confetti cannon working.

Work is extremely rewarding right now. Having just come from a job that put me on a path to burnout, this one is a breath of fresh air, and is an extremely good place to work for.

I am helping several friends with their wedding websites, and I love seeing how people want content to be set up. A great gift to a newly engaged couple is offering to help them put finishing touches on a WordPress site. They can usually get it 99% of the way there, and I come in and add the last few touches to make it what they want.

Alright, this is getting a bit long winded, So that will be enough for now.

Mechanical Keyboards - I get it now

Wed, 22 Jun 2022 16:03:33 GMT

So a couple of months ago I purchased 2 of “The Key v2” as an impulse purchase. I got a link to it a couple of minutes before the link went out to everyone, and so I pulled a Phillip J. Fry.

They arrived yesterday, and so i plugged one in. The joke about these keyboards is that they have 3 buttons: Control, C, and V. Everything a good programmer needs to copy and paste from stack overflow. However, these boards run QMK, which allows the keyboard to be reflashed with updated key mappings.

While I have multiple mechanical keyboards, none of them are reprogrammable. I had always figured it’d be too much effort to customize a keyboard, and do you really want to keep up with it? Boy howdy was I wrong.

I get it now.

I currently have my little 3 button keyboard set up with multiple layers acting as media keys, as well as space for other future functions. Now I am going to be looking more at keyboards where I can permanently remap my caps lock key to function the way I like it to. (If you tap capslock it functions as f24. If you hold it down it becomes the “hyper key”)

Review - Hot Betty's Breakfast Bar - Tucker, GA

Fri, 17 Jun 2022 13:43:48 GMT

Yesterday we went to Hot Betty’s Breakfast Bar for lunch and I figured I’d write down some thoughts.

Food

The food was alright. I got the Chicken and Waffles and wasn’t blown away, but also it wasn’t terrible. The chicken was well cooked and had a good crispy fried outside, and a tender juicy inside. However, it was… lacking in flavor? Pizzazz? Kick?

I also had coffee which was from The Corner Cup down the street. Delightful and delicious as always.

My wife got the classic breakfast and seemed to like it, and let me have her biscuit. Let’s talk about the biscuit. (For those not in the USA, I do not mean a biscuit like you would have with tea, I mean a biscuit.)

Can one consider it a biscuit if it is cooked more like cornbread? like… in a pan or sheet. this biscuit was square and clearly had been cut from a sheet.
The biscuit was over-salted. I like salt. I like more salt than my wife when cooking things. So when I say the biscuit was salty, it was very salty.
Much like with corn bread, I was not sure how to spread a jam, jelly, or butter on this biscuit. Do I cut it in half and sandwich it? Should I just spread it on top? This was exacerbated by the fact it was a little bit crumbly.

Ambiance

While it might be a touch loud to go to with my parents, it was perfectly fine for 30-somethings to gather for lunch. The art was very colorful and welcoming, and the seats were comfortable.

Conclusion

All in all, it wasn’t terrible. If you drink alcohol, there are libations there that will also entice you. We will probably return at some point… but will likely stay away from the biscuits.

Brain Dump - May 2022

Wed, 04 May 2022 13:44:15 GMT

I don’t have any brilliant insights to share today, or anything like that, I’m mostly just wanting to kinda put out some information because I feel like I should write more regular updates.

I’ve recently started using centered.app to help me focus, and BOY HOWDY has it helped (please ignore that I am writing this while not using it.) It helped so much so, that I took some time to make some modifications to the default Macos Shortcuts for setting Do Not Disturb mode that centered provides to start my own music playlist and close applications that are regularly distracting me.

I’ll be speaking in a couple of days at Stir Trek about geo-elements and how to make custom elements by remaking deprecated HTML elements. I need to rework the conclusion of the talk a bit, but I think it’s good? Hopefully people will get something out of it. I’ll also be presenting this talk at THAT Conference in July. So y’all all have another chance to see it in person.

I know at least three people who are doing personal site redesigns. My current site is built on gridsome and netlify CMS, and while I’ve been doing a lot more stuff with netlify cms, I kinda get worried about gridsome’s future. also frustrated a bit when i try and do things in it. So i may do a rewrite of my site in astro or eleventy/slinkity. We’ll see.

My first impression of making a Wordpress Gutenberg block

Sat, 19 Feb 2022 16:23:44 GMT

This week I had the opportunity to make a Gutenberg block and there are a few things I learned in The process.

`@wordpress/scripts` is your friend

I was impressed by the energy and effort put into the build process for blocks. The automatic webpack 5 config, along with all the tooling also provided was very refreshing and gave a really great developer experience. Also, it was refreshing to see a setup that correctly uses preloaded global variables. Any time you import something from an @wordpress/packagename path, it actually rewrites it as a mapping to the global window.wp variable.

Which leads me to my next point.

You don’t need `@wordpress/scripts`

All the tools to make a Gutenberg block are available in the admin area already. You can add a new block with no build step and using vanilla JavaScript. You don’t get to use jsx at all, but if you are looking for no build step, you can do that!

As I dug more into writing blocks I was surprised by how easy it was to just plop a new block in. I was imagining I would need some complex hook in the backend to format things and maybe validate stuff or what have you, but the block system is really just a front end thing. As I get further into this, I would guess that there is a way to do backend validation, and it’ll be interesting to see what that looks like.

It works with custom elements

I’ve been on a big custom element kick lately, and I was super happy to see that you can use custom elements super easily with Gutenberg. There is some weird things with some of the attributes and stuff, but I think it is something that can be worked around.

You can add extra loaders on top

Since @wordpress/scripts has a webpack config, you can add things on top of it. I wish the experience for this was a bit better, but you can’t win everything. There may be a way to add some webpack chaining to make this happen better, I’ll have to do more digging.

In my case I was able to get vue 3 components to compile into custom elements, and then load in the front end and admin as well.

Things I want to do

Make some helpers for updating values in a block. There is a lot of boilerplate for edit components that could be very easily made into factory functions.
Understand what the heck block.json Is actually doing. It seems to control a few things, but I don’t know what exactly. So I need to find more info about it.
WHY DOES JSX COMPILE TO REACT INSIDE A VUE SFC? I had made a small experiment to try and get everything into a single file, and you can, but it shouldn’t be possible, but it works. I don’t know why. So more research is needed.

Final thoughts

Gutenberg blocks are neat, and you should definitely spend a couple of days looking into them if you work with Wordpress a lot. They can do quite a bit.

The JavaScript `in` Operator

Fri, 31 Dec 2021 13:19:24 GMT

I found out that the JavaScript in operator is more versatile than I thought while on stream a couple of weeks ago, so let’s write a post about it so I can explain it to myself later.

`for` Loops

Let’s start with the place you might have seen the in operator before. There are 3 ways of doing for loops in JavaScript.

Classic `for` Loop

See the Pen <a href="https://codepen.io/fimion/pen/VwMXvEd"> for loop</a> by Alex Riviere (<a href="https://codepen.io/fimion">@fimion</a>) on <a href="https://codepen.io">CodePen</a>.

In this example, we iterate over a list of things, setting the initial value of the index to 0, then incrementing it by one each time we go through the loop, until we reach the length of the array we are on. This gives us a lot of control over how we loop through things, since we control the step size. However, it’s very verbose.

`for ... of` Loop

See the Pen <a href="https://codepen.io/fimion/pen/zYEWvmw"> for ... of</a> by Alex Riviere (<a href="https://codepen.io/fimion">@fimion</a>) on <a href="https://codepen.io">CodePen</a>.

Here, we use the of keyword to get the value of each index available for iterating over. Less flexible, but it gets us straight to the content we probably want.

`for ... in` Loop

See the Pen <a href="https://codepen.io/fimion/pen/rNGdOZj"> for ... in</a> by Alex Riviere (<a href="https://codepen.io/fimion">@fimion</a>) on <a href="https://codepen.io">CodePen</a>.

The for ... in loop is a mixture of the last 2 examples. Rather than getting the value of an index, instead we get the index. This is less flexible than the classic for loop, but it removes some of the boilerplate.

Okay, why?

In the previous examples we used the in operator with a for loop to get the index of an item in a list. But in can do more. With the in keyword, you can also check to see if an array has a value at that position.

what.

Just go with me here, this will get more useful further on.

const things = ["bananas", "apples", "spinach", "eggs", "milk"];

1 in things; // true
10 in things; // false

So we can now see if an index is defined in an array. Technically though, in isn’t just for indexes. It’s for properties.

'toString' in things; // true

This becomes incredibly handy if you want to see if an object has a certain property as the in keyword will also use anything the object inherits as well.

class Animal {
  constructor(){
    this.isAlive = true;
  }
}

class Cat extends Animal{
  constructor(hairLength, color){
    super();
    this.hairLength = hairLength;
    this.color = color;
  }
}

const catCat = new Cat('medium', 'gray tabby');

'isAlive' in catCat; // true

This behavior differs from Object.hasOwnProperty which doesn’t look at inherited properties.

Summary

Use the in keyword to check if an object has a property. If you want more information, take a look at the MDN article.

Cassidy asked if I had written anything, so here it is

Wed, 20 Oct 2021 23:40:35 GMT

Look, let’s be honest. You aren’t really here for some earth shattering information. You saw a very clickbaity title that I made to troll Cassidy Williams and quite honestly, I don’t think she was ACTUALLY expecting this.

As long as you are here though, I should write up some interesting links that I’ve found over the past few days that caught my attention.

Building The SSG I’ve Always Wanted: An 11ty, Vite And JAM Sandwich

Ben Holmes has an amazing write up of his time over the last almost 2 years of his adventures in making his own static site generator setup. It’s a great read, and honestly is so much fun.

Netflix Can do Better

The story of the week in my news feed is surrounding Netflix and the new Dave Chappelle special. I have even had a very long phone call with a friend about this. Rather than attempt to pontificate, I’ll link to the 2 articles I have read from the people who are living this story:

I’m writing about this specifically because the friend who called me was asking for perspective about it and he knew I might have thoughts. He is a Black man who is older than I and he asked me to watch the special so we could have a discussion about it. I have yet to watch it, but I will so that I can speak with him from an informed place.

Alpha Paintlet

Dave Rupert talks about using houdini to make custom CSS properties with more magic. I love new web technology and the unlimited terrible things you can do with it.

And that’s all. There, Cassidy. I wrote something. Your move.

CSS-Trickz: An Experiment with Netlify's On-Demand Builders

Mon, 31 May 2021 03:35:35 GMT

At the behest of Dave Rupert in the Shop Talk Show D-D-D-Discord, I’m going to talk about my adventures in making an efficient and poorly designed typo-squatting knock-off of CSS-Tricks.com called CSS-Trickz.com, which turned into an experiment in how to make a cached and auto building site on Netlify, using their new On-Demand Builders.

Note: I want to make it clear here, Chris Coyier knows I made this, and was okay with it. However, this is essentially an article about how to create a CSS-Tricks clone by scraping the information from their API. Don’t use this information for evil. Do not try to monetize your own clone of another person’s content. This has been a fun experiment, and should be regarded as such. For that reason, I’ve removed some of the information of how to access the API directly as I don’t feel comfortable telling people how to clone CSS-Tricks.

How it Began: The Naïve Approach

I was nerd-sniped by someone suggesting a typo. Someone suggested that there should be CSS-Trickz and I bought the domain. That said, I realized that since CSS-Tricks is built on WordPress, I could actually make a bad clone that just points back to CSS-Tricks. I started off with a naïve implementation that I threw up on Netlify using the WordPress API _jsonp callback method. (If you need to get data from a remote WordPress site, this will remove most CORS issues)

It looked something like this:

<section id="articles"></section>
<script>
  startApp(articles){
    // add articles to our section#articles
  }
</script>
<script src="https://css-tricks.com/{path to api for posts}/?_jsonp=startApp"></script>

This is a quick way to implement adding a feed of most recent articles. It’s great! But, well, Chris did have some feedback:

uhm google says client side rendering is bad mmkay

— Chris Coyier

Second Pass: SSR Function!

Alright, Chris had a point. Every time a person would visit the site, it relied on the browser to be able to fetch the data and would (potentially) take a second to render the excerpts of the articles. It would be better if the html was just served straight to the browser with the article excerpts and links all in there already. Netlify Functions to the rescue!

function getArticles(articles){
    const result = ""
    // add all the articles we get to result
    return result;
}

function createHTMLDoc(response){
    const indexBody = `
      <!DOCTYPE html>
      <html>
        <body>
        <section>{{addArticles}}</section>
        </body>
      </html>
    `;
    const articles = JSON.parse(response.body);

    return indexBody.replace('{{addArticles}}', getArticles(articles));
}


exports.handler = async function (){
    const requestOpts = new URL("https://css-tricks.com/{path to api for posts}");
    try {
        const cssTricksResponse = await request(requestOpts);
        return {
          statusCode:200, 
          headers:{"content-type":'text/html'}, 
          body: createHTMLDoc(cssTricksResponse),
        };
    } catch(e) {
        console.log(e);
        return { statusCode: 500, body: JSON.stringify(e)};
    }
}

This gives us an HTML response, and the articles get embedded into it!

Excellent! Problem fixed. Well, kind of.

This actually gives us a new problem that the function runs on MY dime every time someone comes to the site. while there is a free tier of Netlify Functions, I’d rather not become a victim of internet popularity. Fortunately, Netlify has recently release “On Demand Builders” which allows you to generate server side rendered pages on-demand when first requested and then use a cached value for every subsequent call. This means, I could run this function once and then it would use that version of the output every single time afterwards.

Version 3: Let’s Get Caching!

Netlify On-Demand builders will cache the value a serverless function returns and then bust the value on the next build.

“Alex,” I hear you start to say, “Surely this is extremely complicated and will take a lot of code to make this happen!”

Nope. Make sure you have run in the root of your project npm install @netlify/functions and then you can add this little bit of code:

 const {builder} = require("@netlify/functions");

// ... all the code we had before

 exports.handler = builder(async function (){
    // ... this is the same as the previous example
});

Now our function caches every build. I’ve added a github action to trigger a build every 12 hours, which will bust the cache and fetch new results. But that’s it. It’s pretty easy!

JavaScript Labels and Returning Early

Fri, 02 Apr 2021 13:00:00 GMT

Every once in a while, you find a feature of JavaScript you never knew about that has always been there. Labels are one of those odd vestigial bits of the language that make you go “But why?”

I have previously read about and experimented with labels on for loops in JavaScript and after seeing Brendan Eich tweet about it, I decided to experiment on if statements as well. I threw together a little demo codepen and thought about why we don’t use this style of syntax.

In a way, JavaScript labels are a callback to older languages and the GOTO command. Well, sort of. Traditionally, labels are used with the GOTO command to denote a place in the code to jump to. While you can still do this in C, it has fallen out of favor over the years as it is less readable and generally can be implemented with either a loop or an if statement. JavaScript does not have a GOTO command, but we do have labels. And they are rarely used because typically, there is another way to write your code.

Label Use Case

The ideal use case for a label is typically with a nested loop or conditional.

See the Pen <a href='https://codepen.io/fimion/pen/WNRpaaK'>Using a Label in a nested for loop</a> by Alex Riviere (<a href='https://codepen.io/fimion'>@fimion</a>) on <a href='https://codepen.io'>CodePen</a>.

In the above example, we can break out of the outer loop early by calling break outer; and it will immediately stop the outer loop. Brilliant! Similarly, you can do the same thing with if or switch statements, and leave those blocks early.

You can also label just a plain block of code. This is terribly out of fashion and will only work in non strict mode. More importantly, since ES6 modules are strict mode by default, using a label on a code block will cause your code to break. Generally speaking, I don’t recommend doing this.

// You can do this.
// But you really shouldn't.
label: {
  console.log('this will run');
  break label;
  console.log('this will not');
};

Returning Early

I mentioned earlier that the label pattern typically isn’t seen in use because there are other ways of achieving the same functionality. A good example of this is to use functions to have the same outcome. This also allows the resulting code to be more testable and portable.

See the Pen <a href='https://codepen.io/fimion/pen/gOgmQzQ'>Returning early from a nested for loop</a> by Alex Riviere (<a href='https://codepen.io/fimion'>@fimion</a>) on <a href='https://codepen.io'>CodePen</a>.

In the above code we’ve broken the logic for both loops out into their own functions. The outerLoop function will call whatever callback we give it and the innerLoop function receives the value of x as an argument. We then call outerLoop(innerLoop); to kick off the whole thing. Both loops can escape early by returning before the loop is completed.

Code being broken into smaller pieces like this is why you do not see as much use of JavaScript labels. I love labels and the power they have, but I don’t know that I’d want them in my code.

Vue 2 to Vue 3 - 8 months on

Wed, 05 May 2021 21:31:45 GMT

Vue 3 has been out for almost 8 months now. Adoption is slow. This is feeling a little like another major version bump I’ve lived through. Is Vue the new Python?

When I started developing this go around, I was getting into Python and I was confused about Python 2 vs Python 3 and what I should be using. This was back in 2015, and the support for Python 3 was very low. Similarly, Vue 3 has been released for 8 months now and it is still considered the @next version. Articles and talks all point to using Vue 3, but to a new user, everything still points to Vue 2. This creates confusion and bad messaging.

Recently, Vue.js announced that version 3.1 would be a migration build to help people move from version 2 to version 3. Realistically, the move from version 2 to 3 will take more than just a migration build. The ecosystem has not really caught up, though several major players are close to having or already have Vue 3 compatible versions.

As we move closer and closer to a full year of Vue 3 having been released, I worry that we are starting to veer into the quagmire the Python community experienced when they released Python 3. It took them 14 years to sunset Python 2, and it is still being used by many operating systems all the while having a tool that will help you move from Python 2 to 3 (it still couldn’t fix all the issues). When I was learning Python in 2015, Python 2 was still the main version being used primarily and it took another 3 years before Python 3 was the majority version.

Learning Python, I was constantly confused as to why the example I was trying to use wasn’t working. Either I would be in a Python 2 tutorial and a Python 3 interpreter or visa-versa. The older tutorials wouldn’t mention Python 3 as they were not updated, and the new tutorials were not good about explaining that you needed to make sure you were using the right version.

I love Vue (much as I still love Python) but we as a community need to recognize that the current messaging needs to not be “NEW COOL SHINY VUE 3” but we need to focus on “Here’s how you can move from 2 to 3”. The Python ecosystem spun their wheels for years because there was not a good path to move up a major version. If we as a community do not focus on helping people move from Vue 2 to Vue 3 now, then we will spend years having to support both.

My first thoughts on React

Sun, 11 Oct 2020 01:28:14 GMT

I’m diving into react, coming from vue, and I have some thoughts.

I started Kent C. Dodd’s Epic React course, and first off, i’ve barely scratched the surface. This course is excellent, and will likely be my go to recommendation if someone wants to learn react.

While the course is fantastic, I find React… awkward. Some of this is that JSX looks like a syntax error for me. But I’m working on getting over that, and trying to remember it’s just a compiler directive.

Another thing that I’m struggling with is propTypes. It’s ugly and feels a bit bolted on. My guess is this is a left over from the Class based syntax that has been moved away from and they haven’t found an elegant way of redoing it. This is likely just me being used to Vue and having a strong bias towards its syntax.

Overall, I am not very far into this journey, so I can’t talk much about technical implementation, efficiency, or nuances. I recognize this is mostly surface level observations, and I will try to keep up with my thoughts as I dive deeper.

Vue-Solitaire Migration to Vue 3 - The unexpected challenge

Tue, 27 Oct 2020 21:37:09 GMT

I upgraded an app to Vue 3 and I learned some things about it.

I’ve just finished upgrading vue-solitaire to use Vue 3. There are 3 main things I learned in this process that I wanted to let you (dear reader) know about.

First, the way you add global components has changed a little.
Next, the way apps mount has both syntactically changed, as well as how it ends up in the DOM has changed.
Finally, Vue 3 has a new way of code-splitting and loading components asynchronously but throws a very unhelpful error: Invalid VNode type: undefined.

Vue Solitaire

As some background, Vue Solitaire is my pet project I made to demo a few concepts for others struggling with challenges similar to situations I’ve been in. Most notably it is 5 separate vue apps communicating with each other via a Vuex store. There are 4 areas (Deck, Flop, Play, and Final) that cards can appear. Each of these Areas is an individual Vue app that move cards around in Vuex modules. While this seems silly, it’s a useful example that can be translated into other things. For instance, If we want a “Buy Now!” button that is a vue app and a “Cart Icon” that is also a Vue app, we can make these as separate instances on the page, but use Vuex to maintain the state of the cart that both reference.

Adding Global Components

In Vue 2, the syntax to add a component globally to Vue, we would write code like this:

import Vue from 'vue';
import MyComponent from './MyComponent.vue';
import App from './App.vue';

Vue.component('my-component', MyComponent);

const myApp = new Vue(App).$mount('#app');

Well, In Vue 3, you no longer bind things to the global Vue object. Instead, we need to apply it to our Vue app instance. This will feel very familiar however.

import { createApp } from 'vue';
import MyComponent from './MyComponent.vue';
import App from './App.vue';

const myApp = createApp(App);

myApp.component('my-component', MyComponent);

myApp.mount('#app');

The same thing applies to plugins, directives, and mixins. Anything you want to apply globally to a Vue application now needs to be applied to the application instance and not the global Vue object.

In this codebase, I have multiple applications. Rather than manually applying multiple global components to each application, the better pattern to use is to make a function that applies the component to our app instance.

import { createApp } from 'vue';

// our Global components
import MyComponent from './MyComponent.vue';
// ... imagine 6 or 7 of these

// our applications
import PlayArea from './PlayArea.vue';
import DeckArea from './DeckArea.vue';
import FlopArea from './FlopArea.vue';
import FinalArea from './FinalArea.vue';


function addGlobalComponents(app) {
    app.component('my-component', MyComponent);
    // Imagine 6 or 7 components being added here
}

const apps = {
  '#play': PlayArea,
  '#deck': DeckArea,
  '#flop': FlopArea,
  '#final': FinalArea,
};

for(const el in apps) {
  const app = createApp(apps[el]);
  addGlobalComponents(app);
  app.mount(el);
}

This pattern allows us to apply components to multiple Vue app instances and also allows us to define our global components in a separate file if we would like. If you are applying a global set of components, I highly recommend this pattern.

Mounting an App

As you likely noticed in the previous example, initializing a Vue app has changed a smidge. But there is another change as well. Previously, when you mounted a Vue app, it would replace the DOM element it was binding to. Now with Vue 3, it places the app instance inside that DOM element. This causes some slight weirdness that you can quickly fix.

App.vue

<template>
  <div id="app">
    <h1>Hello World</h1>
    <p>This is our app!</p>
  </div>
</template>
<script>
  export default {
    name: 'App',
  };
</script>

Rendered DOM

<!-- Previously in Vue 2 -->
<div id="app">
  <h1>Hello World</h1>
  <p>This is our app!</p>
</div>

<!-- That same component mounted with Vue 3 -->
<div id="app">
  <div id="app">
    <h1>Hello World</h1>
    <p>This is our app!</p>
  </div>
</div>

We now have an extra div wrapping things! Fortunately with Vue 3, we can have multiple root elements in our components templates. Here’s how we fix this:

App.vue

<template>
  <h1>Hello World</h1>
  <p>This is our app!</p>
</template>
<script>
  export default {
    name: 'App',
  };
</script>

This will now render the way we expect it to. I have not done enough exploring to find out what is needed to be able to modify the element that you have mounted to, and that is outside the scope of this post. Maybe I’ll look into it in another post.

Code Splitting

The last major hurdle I had to overcome was the least helpful error I’ve run into.

[Vue warn]: Invalid VNode type: undefined (undefined)

This error message is excessively unhelpful and If I had not been aware of some changes between Vue 2 and Vue 3, I likely would have given up with this endeavor. Fortunately, I was aware of this this bit of information:

From Async Components:

Now, in Vue 3, since functional components are defined as pure functions, async components definitions need to be explicitly defined by wrapping it in a new defineAsyncComponent helper

What does this mean for us? Let’s look at how I had previously code split my solitaire game:

const DeckArea = ()=>import("@components/DeckArea.vue");
const FlopArea = ()=>import("@components/FlopArea.vue");
const FinalArea = ()=>import("@components/FinalArea.vue");
const PlayArea = ()=>import("@components/PlayArea.vue");

This was the problematic code that was throwing the extremely vague error. Vue will no longer render a function that returns a promise to a component without some help due to how the underlying system works. (I’ve gone ahead and filed an issue here to make the message a bit more helpful.) You now need to pass this function to a helper function from vue first:

import {defineAsyncComponent} from "vue";

const DeckApp = defineAsyncComponent(()=>import("@components/DeckArea.vue"))
const FlopApp = defineAsyncComponent(()=>import("@components/FlopArea.vue"))
const FinalApp = defineAsyncComponent(()=>import("@components/FinalArea.vue"))
const PlayApp = defineAsyncComponent(()=>import("@components/PlayArea.vue"))

defineAsyncComponent wraps our function call in an object that has some extra helpers to handle loading and error states, and once I figured this out, then everything worked exactly as I was expecting it to!

Conclusion

Updating vue-solitaire from Vue 2 to Vue 3 surprisingly only took me a couple of hours. I had been ready to dedicate half a day or more to updating this small application, and was pleasantly surprised at how easy it was to do. There were a few more things I knew I was going to run into and quickly fixed, but these were the 3 that caught me off guard. I hope this helps someone else!

Comments are here!

Wed, 02 Sep 2020 23:15:52 GMT

I have now added comments to my site.

I am trying out using utteranc.es as my commenting system. This integrates with the github issues for my blog’s repo and so we will see how well this works.

I fully expect no one to comment.

But if you do: Hey, you’re awesome.

ES6 Classes, Object Prototypes, and Enumeration

Wed, 19 Aug 2020 00:04:41 GMT

ES6 classes have been around for a little while now, so let’s talk about a key difference between using them and using a more traditional object prototype extending method of creating JavaScript classes.

At work the other day I ran into a bit of code I was trying to test that relied on @google/markerclustererplus and google maps. Google has released @googlemaps/jest-mocks which helps some with the problems I was running into, but they do not appear to be using their own mocks library to test markerclustererplus.

The Issue

The specific lines of code I was getting hung up on were the following lines:

From overlay-view-safe.ts

function extend(type1: any, type2: any): void {
  // eslint-disable-next-line prefer-const
  for (let property in type2.prototype) {
    type1.prototype[property] = type2.prototype[property];
  }
}

The error I was encountering was that it couldn’t find method that I knew was mocked out. This is where I discovered a difference between using ES6 classes and an binding to the Object prototype. ES6 Classes do not allow their public properties on their prototype be enumerated by default.

WAT

So let me back up and explain a couple of things first. Object.defineProperty allows you to define new properties on an object. When doing this, you can define a few things about the new property: writable, configurable, and enumerable.

const o = {};

Object.defineProperty(o, 'a', {
  value: 1,
  writable: true,
  configurable: true,
  enumerable: true
});

console.log(o.a) // prints: 1

writable is whether the value can be reassigned or not. configurable is whether you can redefine things about the property. enumerable is whether or not you can loop over it or not. (This is an oversimplification and you should definitely read more about this.)

When you define an ES6 class using the class keyword, any method you define for the class is defined on its prototype and the enumerable property is set to false. This is different than just simply adding a new method or property to the prototype, where enumerable is set to true

Examples

So what does this mean and how does this relate to my problem? Well, let’s talk about some examples of this.

If I use the older style syntax for creating a new Class called MyType by adding methods to the prototype, then we have this lovely syntax here:

function MyType(){
  // Do constructor stuff...
  return this;
}

MyType.prototype.myMethod = function(){
  // Do some stuff...
};

for( let key in MyType.prototype ){
  console.log(key);
}
// prints 'myMethod'

console.log(MyType.prototype.myMethod) // [Function]

This is expected and absolutely what we want in the case of what MarkerClustererPlus is doing. We want to iterate over the keys of the prototype and rebind them.

Let’s look at making the same thing but with ES6 Class syntax:

class MyType{
    constructor(){
        // Do constructor stuff...
    }

    myMethod(){
        // Do some stuff...
    }
}

for( let key in MyType.prototype ){
  console.log(key);
}
// Nothing happens

console.log(MyType.prototype.myMethod) // [Function: myMethod]

So with this example, even though we have myMethod on the prototype, it isn’t accessible via enumeration.

So looking back at our original code we were trying to debug:

function extend(type1: any, type2: any): void {
  // eslint-disable-next-line prefer-const
  for (let property in type2.prototype) {
    type1.prototype[property] = type2.prototype[property];
  }
}

The problem I was having was that code being used to add the 2 methods that this library needs expects the prototype to be enumerable. However, I had made the mistake in adding a Mock class using ES6 Class syntax. the methods were not found, and it took me a bit to figure out why that was happening.

So I rewrote our mock to use the classic prototype binding style, and the tests passed.

All of this is to say, JavaScript is weird sometimes.

Gif to SVG - A Story

Sun, 02 Jun 2019 12:54:54 GMT

I recently have updated the styling of my site to have a bit more… character?

The other day someone linked me to dory-funk.com and I was immediately mesmerized by the background. It reminded me of my early days of the internet and messing around with HTML at that time.

I opened up the background in a separate tab and watched it. After a bit, I thought to myself, “Couldn’t you achieve this with SVG?” and thus began several hours of painstakingly recreating it by hand as an SVG. Animations and all.

This brings us to now. I have updated the styling of my site to have a bit of the old school retro feel while also using modern forms of styling.

I think my goal is to do something interesting with this background. I intend to keep messing with it, but ultimately, I want it to be able to respect prefers-reduced-motion to remove the animated bits.

Everyone enjoy!

Connect.Tech 2019 Talk - Dependency Injection in Vue.js

Tue, 14 Jan 2020 00:52:02 GMT

I had the pleasure of giving my talk “Dependency Injection in Vue.js” at Connect.Tech 2019. Here’s where you can see more about it.

Video: ConnectTech2019 - Dependency Injection in Vue - Alex Riviere

Slides: https://slides.com/fimion/connect-tech-2019#/

Codepen Examples: https://codepen.io/collection/AaLZBm

New Talk: Why Vue.js?

Thu, 11 Apr 2019 14:15:33 GMT

My first pass at a talk that is an intro to Vue.js and how you can use it without a build step.

Watch Highlight: Why Vue.js? - A First Pass from Fimion on www.twitch.tv

Added RSS Feed

Mon, 01 Apr 2019 14:38:28 GMT

Huzzah for feed readers!

I’ve added an rss feed to the blog, so in theory, you can now subscribe in your favorite feed reader. At the moment, it only has the excerpt, and not the content. If there is interest in the content being in there, I will look into that.

You should leave a comment… ohhhh… hmmm…

Next on my to-do list will be adding a comment system!

Redirecting Alex.party

Sat, 30 Mar 2019 13:02:31 GMT

Thoughts on moving to a new system.

I am currently moving alex.party over to the netlify name servers. Soon this will be the new home of my blog! Maybe I can also get some of my other old domains pointing here too.

Anyway, I wanted to make a system that was more maintainable than the old system. The old system was an early attempt at making a blog in vue and I will likely salvage what I can from it. This is backed by the netlifycms which is ridiculously handy for building static sites.

Another thing i am going to hopefully implement is an actual RSS feed for this blog. I just need to get gridsome set up with that.

Alright, I’m going to finish my coffee and greet the new day.

First post

Sat, 30 Mar 2019 02:29:42 GMT

Hello world!

I’m rebooting my blog as a gridsome site. because it’s like gatsby but for vue… or at least that is my understanding. Let’s see how this goes…

Vuejs Dependency Injection - 2 Way Provide/Inject Data Binding

Sat, 12 May 2018 00:00:00 GMT

(This post was originally published on CodePen, but I’m putting it here. Enjoy!)

This is a follow up post to my previous post about Vuejs and Dependency Injection

In my previous post, I described a couple of ways to use provide and inject in Vue components. In this post I’m going to cover how to use provide/inject reactively. This method is not recommended, and we will go over some pros and cons of this method.

Demo

First, let’s make a property thing in a parent component have 2 way data binding to a nested child using provide and inject

See the Pen <a href="https://codepen.io/fimion/pen/BxxpxZ"> VueJs - Provide and Inject - Dependency Injection - Getter and Setter</a> by Alex Riviere (<a href="https://codepen.io/fimion">@fimion</a>) on <a href="https://codepen.io">CodePen</a>.

Explanation

In the parent component we have a property called thing. Our methods and provide sections look like this:

export default {
// ...
  methods: {
    getThing: function() {
      return this.thing;
    },
    setThing: function(data) {
      this.thing = data;
    },
  },
  provide: function() {
    return {
        getThing:this.getThing,
        setThing:this.setThing
    }
  },
// ...
}

When you type into either of the 2 text boxes in the above example, it updates. This is what we want.

In this example, our parent component is providing 2 functions to it’s children. Because of the way that Javascript scoping works, when these functions are used, they will always refer to the values in the parent component.

To use this in our nested component, we need to make a computed property. Doing this, Vue will update the values on changes. Our nested components computed and inject sections are as follows:

export default {
// ...
  computed:{
    thing:{
      get:function(){
        return this.getThing()
      },
      set:function(d){
        this.setThing(d)
      },
    }
  },
  inject: ["getThing","setThing"],
// ...
}

In our computed section, all we are doing is making calls to our injected functions.

If you attempt to directly bind the injected values to get and set this will only result in thing showing up as an object, and not as a computed value.

Pros and Cons

There are some good and bad trade offs about this code pattern.

Pros

allows you to share state in all children components
will update when you change the value of the parent
doesn’t require a full state management solution like vuex
good for a component library where you need to keep things synced between children

Cons

if you allow children to set the value of the parent, you can cause some unexpected issues if things go out of order
is not good practice to rely on injected values to be there. It is a better pattern to be explicit about what is available to and needed by a component through props.
not recommended for most applications if you need to handle a lot of state based changes.

Conclusion

provide and inject can be used for two way data binding, but it is not recommended for every day projects. However, there may come a time when you realize that you need this, and hopefully you will find this information useful.

Edit: Thanks to The official Vuejs Podcast for the shout out. Watch my adventures as I try to make a blog over at Alex.party or follow me on twitter: @fimion

VueJS and Dependency Injection

Thu, 19 Apr 2018 00:00:00 GMT

(This post was originally published on CodePen, but I’m putting it here. Enjoy!)

I was reading the recently updated Vue docs and saw a bit about Dependency Injection, provide, and inject. I hadn’t ever noticed these features before. The docs give an example of utilizing this for google maps, but don’t really give examples of it otherwise. I felt I should experiment with it some.

First off, what are provide and inject? provide is an API in Vue that lets you specify values that’ll get passed down into components nested within this top level component. inject is the API for getting the values in a nested component. It’s a way to not have to pass props to every component or go looking for attributes on $parent. The downside to provide is that it isn’t reactive. Here’s a simple example:

See the Pen <a href="https://codepen.io/fimion/pen/mLymma"> VueJs - Provide and Inject - Dependency Injection - No Update</a> by Alex Riviere (<a href="https://codepen.io/fimion">@fimion</a>) on <a href="https://codepen.io">CodePen</a>.

In this pen you can see, that while the app instance can change its thing value, the nested component doesn’t receive those updates.

Well, this feature seems less useful, right? Well… Sort of… Let’s see if we can use provide to update a nested value later…

See the Pen <a href="https://codepen.io/fimion/pen/wjBdqw"> VueJs - Provide and Inject - Dependency Injection - Promise</a> by Alex Riviere (<a href="https://codepen.io/fimion">@fimion</a>) on <a href="https://codepen.io">CodePen</a>.

In this example, I’ve made provide pass a Promise that is resolved by a Vue event. That event is triggered when you push the update button at which point it resolves the Promise and passes the value of thing to the nested component. This isn’t very useful in this fashion, but let’s say you have a fetch statement that should resolve and you want your nested components to change from their loading state. This would be a way to do that.

While this is a neat trick, you probably want to end up using a state management library, like vuex, to handle situations like this however, and these keywords are really meant to be used sparingly.

Marquee Tags and Flex

Mon, 30 Oct 2017 00:00:00 GMT

(This post was originally published on CodePen, but I’m putting it here. Enjoy!)

What happens if for some reason, you feel the need to use a marquee tag, but also want to use flex box on it?

Short answers:

Chrome: Nothing. Firefox: Nothing. Edge: Surprisingly, it’s choppy, but it works. Safari: And surprise surprise, it works here too.

See the Pen <a href="https://codepen.io/fimion/pen/WXbmWN"> What Happens when you add flex to a marquee tag?</a> by Alex Riviere (<a href="https://codepen.io/fimion">@fimion</a>) on <a href="https://codepen.io">CodePen</a>.

Come on Google and Mozilla.

Alex.Party

Fresh Hot CSS: Trig Functions

Trig Functions

Placing things in a circle

CLOCKS!!

Browser Support

More Resources

Junior Dev Tip: "Scroll Up"

The future of web development is AI. Get on or get left behind.

The future of web development is blockchain. Get on or get left behind.

The future of web development is CSS-inJS. Get on or get left behind.

The future of web development is Progressive Web Apps. Get on or get left behind.

The future of web development is Silverlight. Get on or get left behind

The future of web development is XHTML. Get on or get left behind.

The future of web development is Flash. Get on or get left behind.

The future of web development is ActiveX. Get on or get left behind.

The future of web development is Java applets. Get on or get left behind.

Grid First, Flex Third

Grid First

Block Second

Flex Third

I Am Adequate, But Sometimes I Don't Have The Tools

Recent Container Query Use: Content next to navigation

My Recent Container Query Use: Pagination

CSS Example

Codepen Demo

React 19 Beta: Fine I Guess Web Standards Are Okay

The DevRel went down to Georgia...

The DevRel Went Down to Georgia

Why I Find LLMs Frustrating

Don’t Trust The AI

On The Other Hand…

More Help

A Tale of Two AIs

WTFM

Art Direction with :has()

The LightBox Nerd Snipe

Optionally Shared Context in React Components

Shared React Context

Shared Context - Normal Brain Version

Mostly solved

Shared Context - Big Brain Version

SharedContext - Galaxy Brain Mode

useFetch in Nuxt 3: The Proper Way

A Better Way

Classes, Super, and You

Let’s learn you a thing

I Don’t Autograph My Functions

Extending classes

Enter super

Conclusion

Better JavaScript Currying Examples

What is a Currying Function?

When to Make a Currying Function?

Please Be More Physically Active

A bit of backstory

Reality sets in

Whatcha gonna do?

Delete Your Dev Environment Regularly

Why I like the JSON:API format more than GraphQL

What is JSON:API?

Whoa, that example seems really verbose!

But Alex, GraphQL-

You’re being unkind to GraphQL

Test Post - Please Ignore

Website vs. Application vs. Web App

Websites, Applications, and Web Apps Are Both All the Same and Separate

What is a “Website”?

What is an “Application”?

What is a “Web App”?

So How is This Weird?

Conclusion

Non-Alcoholic Options for Event Organizers

1 - Alcohol is not the focus

What to do instead: Activities

2 - Provide Non-Alcoholic Options

What to do instead: Craft Sodas

What to do instead: Mocktails

What to do instead: Amazing Food

Conclusion

Enter `super`

The thing about functions…

`@wordpress/scripts` is your friend

You don’t need `@wordpress/scripts`

`for` Loops

Classic `for` Loop

`for ... of` Loop

`for ... in` Loop