nullvoxpopuli / website

my empress-blog powered by ember

website

This README outlines the details of collaborating on this Ember application. A short introduction of this app could easily go here.

Installation

• git clone <repository-url> this repository
• cd website
• pnpm install
• cd node_modules/sharp && pnpm run install

Running / Development

• ember serve
• Visit your app at http://localhost:4200.
• Visit your tests at http://localhost:4200/tests.

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

• ember test
• ember test --server

Linting

• pnpm lint:hbs
• pnpm lint:js
• pnpm lint:js --fix

Building

• ember build (development)
• ember build --environment production (production)

Deploying

Specify what it takes to deploy your app.

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox

Image Hacks

Rotate image the correct way (some programs just add metadat instead of actually modifying the image)

file=emberconf-stage.jpg
exiftool -Orientation= $file
convert $file -rotate 180 $file

website's Issues

Derived Data ideas

• intro:
  • problems of not deriving data
    • extra renders (less performant apps)
    • This screenshot from Apple:
      • 
      • our rectangles should not be less performant than video
        • (tho, the stats here could have been caused by the stupid amount of Analytics and Adware folks put on the web)
  • what is "root state"
• use getters to derive data
• use functions to delay data "entanglement"
  • getters are functions
  • what is "entanglement"?
• technique: extract class
  • idea?: compare to custom react hook
• reminders
  • effects / useEffect / etc are bad (usually, not always (tho rarely good))
  • did-update/did-insert bad

Overall goals:

• talk about this generally, applies to all frameworks and reactive systems (except rx.js and other observable focused things which rely on extra renders / wild-west non-performant rendering)
• have examples in React, Signals, Svelte Runes, and Ember (it's all the same)
• have specific sections for each framework calling out specific things to avoid
  • react: useEffect, useLayoutEffect
  • Signals: createEffect
  • Svelte: onMount
  • Ember: did-update, did-insert

Missing RSS feed?

I was trying to add your blog to my Feedly account but I noticed it doesn’t seem to have an RSS feed… I see here that this step seems to have been followed, so there might be something funky here.

Tailwind content + libraries

Example:

// tailwind.config.cjs
'use strict';

const path = require('path');
const merge = require('lodash.merge');
const appRoot = __dirname;

const appEntry = path.join(appRoot, 'app');
const relevantFilesGlob = '**/*.{html,js,ts,hbs,gjs,gts}';

const packageJson = require(path.join(appRoot, 'package.json'));
const appPath = path.join(appEntry, relevantFilesGlob);

 const contentPaths = [
  appPath,

  /**
   * Also check if addons/libraries contain any tailwind classes
   * that we need to include
   */
  ...Object.keys(packageJson.dependencies).map((depName) => {
    const packagePath = path.dirname(require.resolve(depName, { paths: [appRoot] }));

    return `${packagePath}/${relevantFilesGlob}`;
  }),
];

module.exports =  {
  content: contentPaths,
};

as a shared config "somewhere":

'use strict';

const path = require('path');
const merge = require('lodash.merge');

module.exports = {
  tailwindConfig(appRoot, overrides = {}) {
    const appEntry = path.join(appRoot, 'app');
    const relevantFilesGlob = '**/*.{html,js,ts,hbs,gjs,gts}';

    const packageJson = require(path.join(appRoot, 'package.json'));
    const appPath = path.join(appEntry, relevantFilesGlob);

    const contentPaths = [
      appPath,

      /**
       * Also check if addons/libraries contain any tailwind classes
       * that we need to include
       */
      ...Object.keys(packageJson.dependencies).map((depName) => {
        const packagePath = path.dirname(require.resolve(depName, { paths: [appRoot] }));

        return `${packagePath}/${relevantFilesGlob}`;
      }),
    ];

    const base = {
      // base config here, if any
    };

    return merge(base, overrides, {
      /**
       * Array merging is goofy, so we manage this ourselves
       */
      content: [...contentPaths, ...(overrides?.content ?? [])],
    });
  },
};

Usage:

// tailwind.config.cjs
module.exports = require('the-above).tailwindConfig(__dirname);

Refs (my own):
https://github.com/CrowdStrike/ember-toucan-core/blob/main/docs-app/tailwind.config.js#L4
https://github.com/CrowdStrike/ember-oss-docs/blob/main/ember-oss-docs/tailwind.cjs#L21

See also: https://github.com/NullVoxPopuli/ember-apply/blob/main/packages/ember/tailwind/files/tailwind.config.js

Blog Idea: what does it mean to be popular?

Explore:
Npm stats, State of js survey, Etc.

Mention:
Normalization, comparing apples to oranges, flaws with all approaches of measurement, etc

Blog Idea: Ethics of JS Framework Decisions

https://twitter.com/nullvoxpopuli/status/1277350300790280193

Blog Idea: how I deal with flaky tests

all the tricks and hax

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Update pnpm to v8.12.1
• Update dependency node to v20
• Update devDependencies to v5 (major) (ember-data, ember-source)
• Update mcr.microsoft.com/vscode/devcontainers/javascript-node Docker tag to v20
• Update mcr.microsoft.com/vscode/devcontainers/typescript-node Docker tag to v20

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Replace devDependencies (babel-eslint, ember-data, ember-source)
• Update Yarn to v1.22.21
• Update Node.js to v18.19.0
• Update cloudflare/pages-action action to v1.5.0
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

dockerfile

.devcontainer/Dockerfile

• mcr.microsoft.com/vscode/devcontainers/typescript-node 14

.devcontainer/base.Dockerfile

• mcr.microsoft.com/vscode/devcontainers/javascript-node 14-buster

github-actions

.github/workflows/deploy.yml

• wyvox/action v1
• cloudflare/pages-action v1.4.1

npm

package.json

• @ember/render-modifiers ^2.1.0
• @glimmer/component 1.1.2
• @glimmer/tracking 1.1.2
• ember-prism ^0.13.0
• prismjs-glimmer ^1.1.1
• @babel/core ^7.23.6
• @ember/optional-features ^2.0.0
• @ember/test-helpers ^3.2.1
• babel-eslint 10.1.0
• broccoli-asset-rev ^3.0.0
• ember-auto-import ^2.7.1
• ember-cli 5.5.0
• ember-cli-app-version ^6.0.1
• ember-cli-babel ^8.2.0
• ember-cli-dependency-checker ^3.3.2
• ember-cli-fastboot ^4.1.2
• ember-cli-htmlbars ^6.3.0
• ember-cli-inject-live-reload ^2.1.0
• ember-cli-sri ^2.1.1
• ember-cli-terser ^4.0.0
• ember-data ~4.4.0
• ember-fetch ^8.1.2
• ember-load-initializers ^2.1.2
• ember-page-title ^8.1.0
• ember-qunit ^8.0.2
• ember-resolver ^11.0.1
• ember-shadow-dom ^2.0.1
• ember-showdown-prism ^4.4.0
• ember-source ^4.6.0
• ember-template-lint ^5.13.0
• empress-blog ^4.1.0
• empress-blog-casper-template 4.3.0
• eslint ^8.56.0
• eslint-config-prettier ^9.1.0
• eslint-plugin-ember ^11.12.0
• eslint-plugin-node ^11.1.0
• eslint-plugin-prettier ^5.0.1
• eslint-plugin-qunit ^8.0.1
• loader.js ^4.7.0
• npm-run-all ^4.1.5
• prember ^2.0.0
• prettier ^3.1.1
• prismjs ^1.29.0
• qunit ^2.20.0
• qunit-dom ^3.0.0
• sharp 0.33.1
• webpack ^5.89.0
• node >= 18.0.0
• node 18.16.0
• yarn 1.22.11
• pnpm 8.6.0

nvm

.nvmrc

• node v14

---

• Check this box to trigger a request for Renovate to run again on this repository

Blog Idea: ways of doing async in components

Blog idea: the cost of not paying an open source maintainer to work on the open source stuff full time

Ref: https://www.explainxkcd.com/wiki/index.php/2347:_Dependency

Blog Idea: How does Ember's routing work?

• explaining all the use cases
• why it's been hard to move to something better
• need to document what works today, and how it works, so that we can tear it down and reshape it

Blog Idea: how to approach testing in client-side JavaScript

Explain where things live, responsibilities, etc
Eventually talk about how much of what type of test

For IntelliJ, add

• hbs highlighting in markdown
• ember-language-server, cc @lifeart
• ember-template-lint

Blog Idea: the importance of corporate employees communicating in the open

explain the await Promise.resolve() hack

I was trying to avoid this for so long, but.... it's probably worth explaining when folks come across it, or have to integrate with some library that sloppily manages reactivity

Add more gjs demos

countdown

countdown with expiration message

React Response: Auth with JWT

https://www.reddit.com/r/reactjs/comments/j28ajl/react_jwt_authentication_the_right_way/

Blog Idea: Write your own LinkTo Component

Blog Idea: minimum DX requirements for any editor, and how to acheive them

explore what are the responsibilities of which plugins, extensions, etc. It doesn't always come down to the editor.
Also, talk about why different ecosystems seem to have better support out of the box (or what sorts of things lead to hoops that need to be jumped through to get that same DX)