Skip to content

Commit

Permalink
+++
Browse files Browse the repository at this point in the history
  • Loading branch information
Offirmo committed Jun 1, 2024
1 parent 5a81ddf commit cf452cc
Show file tree
Hide file tree
Showing 15 changed files with 527 additions and 412 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
strong {
color: var(--o⋄color⁚fg--strong);
font-family: var(--o⋄font-family--important);
/* TODO also emphasize with font? https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
* weight 600-700
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@

:is(h1, h2, h3, h4, h5, h6) {
color: var(--o⋄color⁚fg--strong);
font-family: var(--o⋄font-family--important);

/* smaller margins than the default stylesheet */
margin-block-start: 0.5em;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,5 @@
/* semantic aliases */
--o⋄font-family--fast_and_good_enough: var(--o⋄font-family--system--sans);
--o⋄font-family--main: var(--o⋄font-family--fast_and_good_enough);
--o⋄font-family--important: var(--o⋄font-family--main);
--o⋄font-family--code: var(--o⋄font-family--system--mono);
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,17 @@ const DEFAULT_REFERENCE_FONT_FAMILY: FontFamilyGenericName = 'sans-serif'

// https://web.dev/articles/css-size-adjust#calibrating_fonts
// https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/
// https://codepen.io/Offirmo/pen/rNgjdEb
export function Normalization(reference: FontFamilyGenericName | null = DEFAULT_REFERENCE_FONT_FAMILY) {

const ALIGN = `<span><span class="size-reference2"></span><span class="size-reference"></span>àBçfg67<span class="size-reference"></span><span class="size-reference2"></span>
const FONT_SIZING_DEMO = `<span><span class="size-reference2"></span><span class="size-reference"></span>${CALIBRATION_SUBSET}<span class="size-reference"></span><span class="size-reference2"></span>
</span>`

const TEST_CASES = [
`<div style="background-color: #e8cccccc; font-size: 24px;">${ALPHABET}</div>`,
`<div style="background-color: rgba(204,206,232,0.8); font-size: 64px; text-decoration: underline overline line-through; text-decoration-thickness: 1px; text-decoration-color: red;"> ${CALIBRATION_SUBSET}</div>`,
`<div style="background-color: #e8cccccc; font-size: 64px; text-decoration: underline overline line-through; text-decoration-thickness: 1px; text-decoration-color: red;">${REF_SIZE(64)}${CALIBRATION_SUBSET}${REF_SIZE(64)}</div>`,
`<div style="background-color: #e8cccccc; font-size: 16px; text-decoration: underline overline line-through; text-decoration-thickness: 1px; text-decoration-color: red;">${REF_SIZE(16)}${CALIBRATION_SUBSET}${REF_SIZE(16)}</div>`,
FONT_SIZING_DEMO,
FONT_SIZING_DEMO,
`<button><span>${CALIBRATION_SUBSET}</span></button>`,
ALPHABET,
]

return `
Expand Down Expand Up @@ -69,9 +70,11 @@ table {
}
td:nth-child(1) {
text-align: right;
--ffamily: ${reference};
}
td:nth-child(2) {
text-align: left;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ async function _registerꓽstoriesⵧfrom_glob_or_module(state: State, stories_g
DEBUGⵧglob_parsing && console.log('glob=', stories_glob)

// note: we intentionally don't sort to keep the intended order (fs order should happen naturally anyway)
await Object.keys(stories_glob).reduce(async (acc, key) => {
await Object.keys(stories_glob).sort().reduce(async (acc, key) => {
await acc

assert(!key.includes(SEPⵧSEGMENTS), `Key contains a forbidden character! (SEP)`)
Expand All @@ -42,13 +42,17 @@ async function _registerꓽstoriesⵧfrom_glob_or_module(state: State, stories_g
// if dynamic import, can be a promise in the process of being resolved
const blob = await Promise.resolve(stories_glob[key])

const subpath = [...parent_path, key ]

switch (true) {
case isꓽImportModule(blob):
state = await _registerꓽstoriesⵧfrom_module(state, blob, [ ...parent_path, key ])
if (key === 'index')
subpath.pop() // useless
state = await _registerꓽstoriesⵧfrom_module(state, blob, subpath)
break

case isꓽImportGlob(blob):
state = await _registerꓽstoriesⵧfrom_glob_or_module(state, blob, [ ...parent_path, key ])
state = await _registerꓽstoriesⵧfrom_glob_or_module(state, blob, subpath)
break

default:
Expand Down Expand Up @@ -76,12 +80,11 @@ async function _registerꓽstoriesⵧfrom_module(state: State, story_module: Imm
return await exports_sync_or_async()
}
catch (err) {
console.error(`Error while loading the story "${parent_path.join(SEPⵧSEGMENTS)}"!`, err)
return {
'!ERROR!': {
render() {
console.error(`Error while loading the story "${parent_path.join(SEPⵧSEGMENTS)}"!`, err)
return `Error while loading story! (see console)`
}
'!ERROR!': () => {
console.error(`Error while loading the story "${parent_path.join(SEPⵧSEGMENTS)}"!`, err)
return `Error while loading stories from "${parent_path.join(SEPⵧSEGMENTS)}"! (see console)`
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,17 @@ async function renderCSFV3(entry: Immutable<StoryEntry>) {
console.log('render_params=', render_params)

switch (true) {
/*case story.render !== undefined: {
case story.render !== undefined: {
document.body.innerText = '[CSF v3: TODO re-implement "render()"]'
/*
const rendered = story.render({
...meta.args,
...story.args,
})
document.body.innerText = rendered
*/
break
}*/
}

case story.component !== undefined: {
_renderⵧcomponent(story.component, story, meta)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
12 factors https://12factor.net/
97 Things Every Programmer Should Know
[ ] +++ https://en.wikipedia.org/wiki/List_of_software_development_philosophies
[ ] +++ https://explorer.globe.engineer/
[ ] +++ https://martinfowler.com/
[ ] +++ https://www.hackterms.com/about/all
[ ] +++ https://www.linfo.org/main_index.html
12 factors https://12factor.net/
97 Things Every Programmer Should Know
[ ] https://zknill.io/posts/every-programmer-should-know/
abstraction https://www.merrickchristensen.com/articles/abstraction/
allocation
Expand All @@ -23,6 +23,7 @@ authentication
Backends For Frontends (BFF) https://samnewman.io/patterns/architectural/bff/
BDD - Behavior-Driven Development https://cucumber.io/school/ Discovery -> Formulation -> Automation
blocking
bug -- mail in 500 miles radius https://www.ibiblio.org/harris/500milemail.html
cache
cache -- stampede https://en.wikipedia.org/wiki/Cache_stampede
caching -- S3 FIFO https://s3fifo.com/
Expand All @@ -37,20 +38,18 @@ cohesion = degree to which the elements inside a module belong together https://
command query responsibility segregation (CQRS)
command query separation (CQS)
comments
language -- Bend = massively parallel, high-level programming language https://github.com/HigherOrderCO/Bend
comments -- conventional
commits
commits -- conventional https://www.conventionalcommits.org/ https://gist.github.com/qoomon/5dfcdf8eec66a051ecd85625518cfd13
compile to js
compiler
connascence https://en.wikipedia.org/wiki/Connascence
constructor
continuous integration
continuous delivery
continuous deployment
context switch
context switching
mail in 500 miles radius https://www.ibiblio.org/harris/500milemail.html
continuous delivery
continuous deployment
continuous integration
Conway's law https://en.wikipedia.org/wiki/Conway%27s_law
corporate politic https://www.breakingpoint.tech/p/where-do-corporate-politics-come
correlation
Expand All @@ -75,9 +74,6 @@ demos
dependencies
dependency hell https://en.wikipedia.org/wiki/Dependency_hell
design patterns
design patterns --
design patterns --
design patterns --
design patterns -- behavioral -- command = command, receiver, invoker and client https://en.wikipedia.org/wiki/Command_pattern
design patterns -- facade https://en.wikipedia.org/wiki/Facade_pattern
design patterns -- strangler https://paulhammant.com/2013/07/14/legacy-application-strangulation-case-studies/
Expand All @@ -90,6 +86,7 @@ Domain-driven design https://en.wikipedia.org/wiki/Domain-driven_design
double authent
DRY don't repeat yourself
dry run
durable execution = development paradigm that preserves complete application state so that upon host or software failure it can seamlessly migrate execution to another machine https://stackoverflow.blog/2024/05/28/an-open-source-development-paradigm/
Effect<Success, Error, Requirements> https://effect.website/docs/guides/essentials/the-effect-type
egress
emscripten
Expand Down Expand Up @@ -186,6 +183,7 @@ jump/goto
kebab-case vs snake etc
KISS
KTLO
language -- Bend = massively parallel, high-level programming language https://github.com/HigherOrderCO/Bend
language -- go
language interprété types simples / types par référence
language trends
Expand Down
4 changes: 3 additions & 1 deletion stack--2022/9-rpg/font--comics/doc/storypad/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@

const DEBUG = false

// important to load async so that the stories don't pollute the global scope too early (ex. before SXC)
// important to load async so that
// - the stories don't pollute the global scope too early (ex. before SXC)
// - we can catch individual modules not loading
const stories = import('../../src/**/*.stories.@(js|jsx|ts|tsx|mdx)')

startꓽstorypad(
Expand Down
66 changes: 66 additions & 0 deletions stack--2022/9-rpg/font--comics/src/__shared/use-cases.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@

const STYLE = `max-width: 200px; border: solid 2px black; padding: .3em; xtext-align: center; margin: .5em 0; border-radius: 1em;`

export function Speech1() {
return `
<div style="border-radius: 50%; ${STYLE}">
I haven't been inside the secret room, but I intend to find out what's in there!
</div>
`
}

export function Speech2() {
return `
<div style="${STYLE}">
Oh! It's <strong>encyclopedias</strong>! I was expecting something more <em>exciting</em>.
</div>
`
}

export function Speech3() {
return `
<style>
.tight {
letter-spacing: -0.06em;
}
</style>
<div style="${STYLE}">
That's an <span class="tight">inconsequentially</span> tiny matter of physics, doctor Smith!
</div>
`
}

export function Speech4() {
return `
<div style="${STYLE}">
⚞Guh!⚟ Stop hitting me--⚞OOF!⚟
</div>
`
}

export function Speech5() {
return `
<div style="${STYLE}">
♫Happy birthday to yooo…♪
</div>
`
}

export function Panel() {
return `
<div style="${STYLE}">
"<em>Si, Jefe,</em> there are bad men in this town."
</div>
`
}

export function All() {
return `
${Speech1()}
${Speech2()}
${Speech3()}
${Speech4()}
${Speech5()}
${Panel()}
`
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import './index.css'

import { DemoꓽAll } from '@offirmo-private/storypad/src/__shared/stories/css/typography/index.stories.ts'

export function Demo() {
export function FontDemo() {
return `
<div class="omr⋄font⁚_REFERENCE">
${DemoꓽAll(null)}
Expand Down
3 changes: 3 additions & 0 deletions stack--2022/9-rpg/font--comics/src/deevad-hand/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@

.omr⋄font⁚DeevadHand {
font-family: 'DeevadHand', sans-serif;
--o⋄font-family--main: 'DeevadHand', sans-serif;
line-height: 1; /* comic fonts are to be used in small ballons + don't have ascend/descend, hence look better lh1, cf. Blambot tip #7 */
font-stretch: 150%;
/*font-synthesis: style small-caps weight position;*/
/* font-variant-numeric */
}
Expand Down
18 changes: 10 additions & 8 deletions stack--2022/9-rpg/font--comics/src/deevad-hand/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,38 @@
import { Normalization as _Norm, DemoꓽAll } from '@offirmo-private/storypad/src/__shared/stories/css/typography/index.stories.ts'
import { All } from '../__shared/use-cases.stories'

import './index.css'

import { Normalization as _Norm, DemoꓽAll } from '@offirmo-private/storypad/src/__shared/stories/css/typography/index.stories.ts'

export function Demoⵧraw() {
export function FontDemoⵧraw() {
return `
<div class="omr⋄font⁚DeevadHand--raw">
${DemoꓽAll()}
</div>
`
}
export function DemoⵧCalibrated() {

export function Calibration() {
return `
<div class="omr⋄font⁚DeevadHand">
${DemoꓽAll()}
${_Norm()}
</div>
`
}

export function Normalization() {
export function FontDemoⵧCalibrated() {
return `
<div class="omr⋄font⁚DeevadHand">
${_Norm()}
${DemoꓽAll()}
</div>
`
}


export function Calibration() {
export function UseCases() {
return `
<div class="omr⋄font⁚DeevadHand">
TODO
${All()}
</div>
`
}
5 changes: 5 additions & 0 deletions stack--2022/9-rpg/font--comics/src/test/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
@font-face {
font-family: 'TEST';
src: url('Ames-Regular.otf');
size-adjust: 75%;
xxascent-override: 105%;
xxdescent-override: 25%;
xxline-gap-override: 0%;
}

/*
Expand All @@ -27,6 +31,7 @@

.omr⋄font⁚TEST {
font-family: 'TEST', sans-serif;
line-height: 1;
}

/*********************/
30 changes: 28 additions & 2 deletions stack--2022/9-rpg/font--comics/src/test/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,38 @@
import { Normalization as _Norm, DemoꓽAll } from '@offirmo-private/storypad/src/__shared/stories/css/typography/index.stories.ts'
import { All } from '../__shared/use-cases.stories'

import './index.css'

import { DemoꓽAll } from '@offirmo-private/storypad/src/__shared/stories/css/typography/index.stories.ts'

export function Demo() {
export function FontDemoⵧraw() {
return `
<div class="omr⋄font⁚TEST">
${DemoꓽAll()}
</div>
`
}

export function Calibration() {
return `
<div class="omr⋄font⁚TEST">
${_Norm()}
</div>
`
}

export function FontDemoⵧCalibrated() {
return `
<div class="omr⋄font⁚TEST">
${DemoꓽAll()}
</div>
`
}


export function UseCases() {
return `
<div class="omr⋄font⁚TEST">
${All()}
</div>
`
}
Loading

0 comments on commit cf452cc

Please sign in to comment.