Elements article, aside, nav,
- section make up the sectioning content category.
-
-
-
-
-
This paragraph is nested inside an article element. It contains many different, sometimes useful, HTML5 elements. Of course there are classics like emphasis, strong,
- and small but there are many others as well. Hover the following text for abbreviation element: abbr. You can define deleted text which often gets replaced with inserted text.
-
You can also use keyboard text, which sometimes is styled similarly to the <code> or samp elements. Even more specifically, there is an element just for variables. Not to be mistaken with block
- quotes below, the quote element lets you denote something as quoted text. Lastly don't forget the sub (H2O) and sup (E = MC2) elements.
-
-
This paragraph is contained in a section element of its parent article element.
-
↓ The following paragraph has the hidden attribute and should not be displayed. ↓
-
→ You should not see this paragraph. ←
-
↑ The previous paragraph should not be displayed. ↑
Elements abbr, b, bdi,
- bdo, br, cite, code,
- data, del, dfn, em,
- i, ins, kbd, mark,
- meter, progress, q, s,
- samp, small, span, strong,
- sub, sup, time, u,
- var, wbr, and others make up the phrasing content category.
-
-
-
abbr: Some vehicles meet the
- SULEV standard.
- br was used to make this sentence start on a new line.
-
bdi: Some languages read right to left, مرحبا.
- bdo: The normal direction has been
-overridden.
-
em is used for emphasis and usually renders as italics, contrast that with i which is used for alternate voice or to offset from the normal (such as a phrase from a different language or taxonomic designation): E. coli can be bad. strong is used for importance or urgency and usually renders as bold, contrast that with b which is used to draw attention without the semantic meaning of importance.
-
cite: In the words of Charles Bukowski — An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.
-
data can be used to specify 5 A.M. that is machine-readable, but time is a better choice for specifying in a machine-readable format.
-
-
del can be varily used to mark deletions. ins marks insertions. s: similar to del, but used to mark content that is no longer relevant. Windows XP version available.u: a holdover with no real meaning that should be removed. mark: the HTML equivalent of the yellow highlighter. span: a
- generic element with no meaning by itself.
-
dfn: Foreign phrases add a certain je ne sais quoi to one's prose.
-
-
q: The W3C page About W3C says the W3C’s mission is To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.
-
kbd and samp: I did this:
-
c:\>format c: /yes
-
Is that bad? Press Ctrl+F5 for a hard reload.
-
var: To log in, type ssh user@example.com, where user is your user ID.
-
meter and progress: Storage space usage:
- 6 blocks used (out of 8 total) Progress:
-
-
sub is used for subscripts: H2O. sup is used for superscripts: E = MC2. small is used for side comments: I wrote this whole document. [Editor's note: no he did not]wbr: used to specify where a word may break and it is supercalifragilisticexpialidocious.
- 1 Infinite Loop
-Cupertino, CA 95014
-United States
-
-
blockquote:
-
-
I quickly explained that many big jobs involve few hazards
-
-
-
This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to
- pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.
-
-
-
details and summary:
-
- Copying... 25%
-
-
-
Transfer rate:
-
452KB/s
-
Duration:
-
01:16:27
-
Color profile:
-
SD (6-1-6)
-
Dimensions:
-
320×240
-
-
-
dl:
-
-
Definition List Title
-
Definition list division.
-
Kitchen Sink
-
Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.
-
aside
-
Defines content aside from the page content
-
blockquote
-
Defines a section that is quoted from another source
-
-
figure:
-
-
- Figure 1: A picture of Bill Murray from fillmurray.com
-
-
-
You are in an open field west of a big white house with a boarded
-front door.
-There is a small mailbox here.
-
->open mailbox
-
-Opening the mailbox reveals:
-A leaflet.
-
->
Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
-
-
-
Another Person
-
1500
-
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
-
-
-
Last One
-
2800
-
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
-
-
-
-
In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.
-
-
Characteristics with positive and negative sides
-
-
-
Negative
-
Characteristic
-
Positive
-
-
-
-
-
Sad
-
Mood
-
Happy
-
-
-
Failing
-
Grade
-
Passing
-
-
-
-
-
Complex table with a thead, multiple tbody elements, and a tfoot.
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/stack--2022/3-advanced--browser/css--reset/doc/demo/perfect-motherfucking-website--raw.html b/stack--2022/3-advanced--browser/css--reset/doc/demo/perfect-motherfucking-website--raw.html
deleted file mode 100644
index 41d3f02b..00000000
--- a/stack--2022/3-advanced--browser/css--reset/doc/demo/perfect-motherfucking-website--raw.html
+++ /dev/null
@@ -1,85 +0,0 @@
-
-
-
-
- Perfect Motherfucking Website
-
-
-
-
-
-
This is the final motherfucking website.
-
-
And it’s really more fucking perfect than the last guy’s.
-
-
Seriously, some minimal fucking
- things are needed to make this shit perfect.
-
-
Ten fucking declarations, an @media block, and one
- attribute.
-
-
That’s how much CSS and HTML it took to turn that grotesque pile of
- shit into this finally perfect masterpiece. It’s so fucking simple and it still has all the glory of the original
- perfect-ass website:
-
-
-
Shit’s finally lightweight and loads fast;
-
Finally fits on all your shitty screens;
-
Finally looks the same in all your shitty browsers;
-
Won’t bleach your fucking eyeballs at night if your browser thinks you like dark things;
-
The motherfucker’s still accessible to every asshole that visits your site;
-
Shit’s still legible and gets your fucking point across.
-
-
-
And guess what, motherfucker:
-
-
You never knew it, but it’s easy to improve reliability on your site. Here’s how.
-
-
A little more accessibility
-
-
I know you love marginalization, but you should take care of people.
- The HTML tag doesn’t include the lang attribute in your shitty webpage.
- You ever listen to a wrong language screen reader lecture?
- What a shitty experience.
-
-
Typography matters
-
-
Don’t be dumb with typography. Don’t let improper marks and
- quotes make their way onto websites because of dumb defaults in applications and CMSs.
- And did you let the browser choose the font? Don’t make me read such text with Times New Roman.
I’m impressed about what the creator of this site’s inspiration
- did. What I’m saying is that it’s so, so simple to make sites easier to read. Websites are broken by default—they
- are functional, high-performing, and accessible, but they’re also fucking ugly. You and all the other web designers
- out there need to make them not total shit.
-
-
-
“Don’t ignore stupid things or you will stay at the motherfucker level.”
- — Brad Hollande
And it’s really more fucking perfect than the last guy’s.
-
-
Seriously, some minimal fucking
- things are needed to make this shit perfect.
-
-
Ten fucking declarations, an @media block, and one
- attribute.
-
-
That’s how much CSS and HTML it took to turn that grotesque pile of
- shit into this finally perfect masterpiece. It’s so fucking simple and it still has all the glory of the original
- perfect-ass website:
-
-
-
Shit’s finally lightweight and loads fast;
-
Finally fits on all your shitty screens;
-
Finally looks the same in all your shitty browsers;
-
Won’t bleach your fucking eyeballs at night if your browser thinks you like dark things;
-
The motherfucker’s still accessible to every asshole that visits your site;
-
Shit’s still legible and gets your fucking point across.
-
-
-
And guess what, motherfucker:
-
-
You never knew it, but it’s easy to improve reliability on your site. Here’s how.
-
-
A little more accessibility
-
-
I know you love marginalization, but you should take care of people.
- The HTML tag doesn’t include the lang attribute in your shitty webpage.
- You ever listen to a wrong language screen reader lecture?
- What a shitty experience.
-
-
Typography matters
-
-
Don’t be dumb with typography. Don’t let improper marks and
- quotes make their way onto websites because of dumb defaults in applications and CMSs.
- And did you let the browser choose the font? Don’t make me read such text with Times New Roman.
I’m impressed about what the creator of this site’s inspiration
- did. What I’m saying is that it’s so, so simple to make sites easier to read. Websites are broken by default—they
- are functional, high-performing, and accessible, but they’re also fucking ugly. You and all the other web designers
- out there need to make them not total shit.
-
-
-
“Don’t ignore stupid things or you will stay at the motherfucker level.”
- — Brad Hollande
This page—that isn’t a total fucking content—was licensed under CC0.
-
-
-
diff --git a/stack--2022/3-advanced--browser/css--reset/doc/demo/storypad.html b/stack--2022/3-advanced--browser/css--reset/doc/demo/storypad.html
deleted file mode 100644
index ee7249a0..00000000
--- a/stack--2022/3-advanced--browser/css--reset/doc/demo/storypad.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
diff --git a/stack--2022/4-tools/storypad/src/consts.ts b/stack--2022/4-tools/storypad/src/consts.ts
index 23090bf5..30bd5981 100644
--- a/stack--2022/4-tools/storypad/src/consts.ts
+++ b/stack--2022/4-tools/storypad/src/consts.ts
@@ -1,2 +1,5 @@
export const LIB = '@offirmo-private/storypad'
+
+export const SEPⵧSEGMENTS = '/'
+export const SEPⵧSTORY = '--'
diff --git a/stack--2022/4-tools/storypad/src/flux/dispatcher.ts b/stack--2022/4-tools/storypad/src/flux/dispatcher.ts
index 68bb7411..0164602d 100644
--- a/stack--2022/4-tools/storypad/src/flux/dispatcher.ts
+++ b/stack--2022/4-tools/storypad/src/flux/dispatcher.ts
@@ -9,34 +9,62 @@ import { Config } from '../types/config'
import { StoryUId} from './types'
import * as InMemState from './state--in-mem'
import * as UrlState from './state--url'
+import { _getꓽstateⵧin_mem, _setꓽstateⵧin_mem } from './in-mem-state-ref.ts'
+import {
+ getꓽrender_mode,
+ getꓽstoryⵧcurrent,
+ getꓽRenderParamsⵧglobal,
+} from './selectors.ts'
+
/////////////////////////////////////////////////
-let stateⵧin_mem: InMemState.State = InMemState.create()
async function init(stories_glob: Immutable, config?: Immutable): Promise {
console.group('Flux init...')
+ let stateⵧin_mem = _getꓽstateⵧin_mem()
stateⵧin_mem = InMemState.setꓽconfig(stateⵧin_mem, config)
stateⵧin_mem = await InMemState.registerꓽstoriesⵧfrom_glob(stateⵧin_mem, stories_glob)
-
- UrlState.init()
+ _setꓽstateⵧin_mem(stateⵧin_mem)
// other states don't need an init
- console.log('final stateⵧin_mem =', stateⵧin_mem)
+ const current_story = getꓽstoryⵧcurrent()
+ if (!current_story) {
+ console.warn('No stories found!')
+ }
+
+ const url_story = UrlState.getꓽexplicit_story_uid()
+ if (url_story && current_story?.uid !== url_story) {
+ console.warn('URL and in-mem story mismatch!', { current_story, url_story })
+ }
+
+ console.log('final state =', {
+ 'InMemState': stateⵧin_mem,
+ '~UrlState': {
+ 'URL': window.location.href,
+ 'getꓽmain_frame_url': UrlState.getꓽmain_frame_url(),
+ 'getꓽstory_frame_url': UrlState.getꓽstory_frame_url(),
+ 'getꓽexplicit_render_mode': UrlState.getꓽexplicit_render_mode(),
+ 'getꓽexplicit_story_uid': UrlState.getꓽexplicit_story_uid(),
+ '_sp': Object.fromEntries([...UrlState._getꓽcurrent_url__search_params()]),
+ },
+ flux: {
+ 'getꓽrender_mode': getꓽrender_mode(),
+ 'getꓽstoryⵧcurrent': getꓽstoryⵧcurrent(),
+ 'getꓽRenderParamsⵧglobal': getꓽRenderParamsⵧglobal(),
+ }
+ })
console.groupEnd()
}
// explicit request on user's click
function requestꓽstory(uid: StoryUId) {
+ let stateⵧin_mem = _getꓽstateⵧin_mem()
stateⵧin_mem = InMemState.requestꓽstory(stateⵧin_mem, uid)
- UrlState.requestꓽstory(uid)
-}
+ _setꓽstateⵧin_mem(stateⵧin_mem)
-// DO NOT USE, only for the flux selectors
-function _getꓽstateⵧin_mem(): Immutable {
- assert(stateⵧin_mem, `init() must be called first!`)
- return stateⵧin_mem
+ UrlState.requestꓽstory(uid)
}
/////////////////////////////////////////////////
@@ -45,7 +73,4 @@ export {
init,
requestꓽstory,
-
- // only for selectors
- _getꓽstateⵧin_mem,
}
diff --git a/stack--2022/4-tools/storypad/src/flux/in-mem-state-ref.ts b/stack--2022/4-tools/storypad/src/flux/in-mem-state-ref.ts
new file mode 100644
index 00000000..00655619
--- /dev/null
+++ b/stack--2022/4-tools/storypad/src/flux/in-mem-state-ref.ts
@@ -0,0 +1,21 @@
+
+import * as InMemState from './state--in-mem'
+
+/////////////////////////////////////////////////
+
+let stateⵧin_mem: InMemState.State = InMemState.create()
+
+// DO NOT USE, only for the flux
+function _getꓽstateⵧin_mem(): InMemState.State {
+ return stateⵧin_mem
+}
+function _setꓽstateⵧin_mem(s: InMemState.State) {
+ stateⵧin_mem = s
+}
+
+/////////////////////////////////////////////////
+
+export {
+ _getꓽstateⵧin_mem,
+ _setꓽstateⵧin_mem,
+}
diff --git a/stack--2022/4-tools/storypad/src/flux/selectors.ts b/stack--2022/4-tools/storypad/src/flux/selectors.ts
index dabfdec4..bc8b2586 100644
--- a/stack--2022/4-tools/storypad/src/flux/selectors.ts
+++ b/stack--2022/4-tools/storypad/src/flux/selectors.ts
@@ -5,7 +5,7 @@ import assert from 'tiny-invariant'
import { Immutable } from '@offirmo-private/ts-types'
import { Config } from '../types/config'
-import { _getꓽstateⵧin_mem } from './dispatcher'
+import { _getꓽstateⵧin_mem } from './in-mem-state-ref.ts'
import { FolderUId, StoryEntry, RenderMode, StoryTree } from './types'
diff --git a/stack--2022/4-tools/storypad/src/flux/state--in-mem/reducers--init--globs.ts b/stack--2022/4-tools/storypad/src/flux/state--in-mem/reducers--init--globs.ts
index cc999945..0cefde3d 100644
--- a/stack--2022/4-tools/storypad/src/flux/state--in-mem/reducers--init--globs.ts
+++ b/stack--2022/4-tools/storypad/src/flux/state--in-mem/reducers--init--globs.ts
@@ -6,13 +6,13 @@ import {
ImportModule, isꓽImportModule,
} from '../../types/glob'
+import { SEPⵧSEGMENTS, SEPⵧSTORY } from '../../consts'
import { StoryEntry, isꓽStoryEntry } from '../types'
import { State } from './types'
import { registerꓽstory } from './reducers'
/////////////////////////////////////////////////
-const SEP = '/'
/////////////////////////////////////////////////
@@ -29,12 +29,16 @@ async function registerꓽstoriesⵧfrom_glob(state: State, stories_glob: Immuta
}
async function _registerꓽstoriesⵧfrom_glob_or_module(state: State, stories_glob: Immutable, parent_path: string[] = []): Promise {
- DEBUGⵧglob_parsing && console.group(`_registerꓽstoriesⵧfrom_glob_or_module(${parent_path.join(SEP)})`)
+ DEBUGⵧglob_parsing && console.group(`_registerꓽstoriesⵧfrom_glob_or_module(${parent_path.join(SEPⵧSEGMENTS)})`)
DEBUGⵧglob_parsing && console.log('glob=', stories_glob)
- await Object.keys(stories_glob).sort().reduce(async (acc, key) => {
+ // 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 acc
+ assert(!key.includes(SEPⵧSEGMENTS), `Key contains a forbidden character! (SEP)`)
+ assert(!key.includes(' '), `Key contains a forbidden character! (space)`)
+
// if dynamic import, can be a promise in the process of being resolved
const blob = await Promise.resolve(stories_glob[key])
@@ -59,7 +63,7 @@ async function _registerꓽstoriesⵧfrom_glob_or_module(state: State, stories_g
}
async function _registerꓽstoriesⵧfrom_module(state: State, story_module: Immutable, parent_path: string[] = []): Promise {
- DEBUGⵧglob_parsing && console.group(`_registerꓽstories_from_module(${parent_path.join(SEP)}.[js/ts/...])`)
+ DEBUGⵧglob_parsing && console.group(`_registerꓽstories_from_module(${parent_path.join(SEPⵧSEGMENTS)}.[js/ts/...])`)
console.log('module=', story_module)
const exports_sync_or_async = story_module.js || story_module.jsx || story_module.ts || story_module.tsx
@@ -75,7 +79,7 @@ async function _registerꓽstoriesⵧfrom_module(state: State, story_module: Imm
return {
'!ERROR!': {
render() {
- console.error(`Error while loading the story "${parent_path.join(SEP)}"!`, err)
+ console.error(`Error while loading the story "${parent_path.join(SEPⵧSEGMENTS)}"!`, err)
return `Error while loading story! (see console)`
}
}
@@ -91,9 +95,10 @@ async function _registerꓽstoriesⵧfrom_module(state: State, story_module: Imm
Object.keys(stories).forEach(story_key => {
DEBUGⵧglob_parsing && console.log(`Found story: key "${story_key}"`)
- assert(![...parent_path, story_key].some(p => p.includes(SEP)), `Story path contains a forbidden character!`) // TODO one day improve
+ assert(!story_key.includes(SEPⵧSTORY), `Story key contains a forbidden character! (story sep)`)
+ assert(![...parent_path, story_key].some(p => p.includes(SEPⵧSEGMENTS)), `Story path contains a forbidden character!`) // TODO one day improve
- const uid = [...parent_path, story_key].join(SEP)
+ const uid = [...parent_path, story_key].join(SEPⵧSEGMENTS)
const story_entry: StoryEntry = {
uid,
@@ -102,7 +107,7 @@ async function _registerꓽstoriesⵧfrom_module(state: State, story_module: Imm
}
DEBUGⵧglob_parsing && console.log(`new story entry: ${uid}`, story_entry)
assert(isꓽStoryEntry(story_entry), `freshly created ${uid} is not a story entry??`)
- state = registerꓽstory(state, story_entry, [...parent_path, story_key].join(SEP))
+ state = registerꓽstory(state, story_entry, [...parent_path, story_key].join(SEPⵧSEGMENTS))
})
DEBUGⵧglob_parsing && console.groupEnd()
diff --git a/stack--2022/4-tools/storypad/src/flux/state--in-mem/reducers.ts b/stack--2022/4-tools/storypad/src/flux/state--in-mem/reducers.ts
index cbfb9afb..1fa582ef 100644
--- a/stack--2022/4-tools/storypad/src/flux/state--in-mem/reducers.ts
+++ b/stack--2022/4-tools/storypad/src/flux/state--in-mem/reducers.ts
@@ -41,7 +41,6 @@ function registerꓽstory(state: State, story: StoryEntry, path: RelativePath):
...state,
first_encountered_story‿uid: state.first_encountered_story‿uid || uid,
}
- state = folderⵧexpand(state, uid)
}
return state
diff --git a/stack--2022/4-tools/storypad/src/flux/state--url/reducers.ts b/stack--2022/4-tools/storypad/src/flux/state--url/reducers.ts
index c5a68c21..d76fb383 100644
--- a/stack--2022/4-tools/storypad/src/flux/state--url/reducers.ts
+++ b/stack--2022/4-tools/storypad/src/flux/state--url/reducers.ts
@@ -6,21 +6,9 @@ import { Immutable } from '@offirmo-private/ts-types'
import { StoryUId } from '../types'
import { getꓽmain_frame_url } from './selectors'
-import { QUERYPARAMS } from './consts.ts'
/////////////////////////////////////////////////
-function init(): void {
- console.log('URL=', window.location.href)
-
- const url‿obj = (new URL(window.location.href))
- ;[...url‿obj.searchParams.keys()]
- .filter(k => Object.values(QUERYPARAMS).includes(k))
- .forEach(k => {
- console.log(`URL param "${k}" = "${url‿obj.searchParams.get(k)}" found!`)
- })
-}
-
function requestꓽstory(uid: StoryUId): void {
const new_url = getꓽmain_frame_url(uid)
@@ -30,7 +18,5 @@ function requestꓽstory(uid: StoryUId): void {
/////////////////////////////////////////////////
export {
- init,
-
requestꓽstory,
}
diff --git a/stack--2022/4-tools/storypad/src/flux/state--url/selectors.ts b/stack--2022/4-tools/storypad/src/flux/state--url/selectors.ts
index 456ef636..8ad26f5b 100644
--- a/stack--2022/4-tools/storypad/src/flux/state--url/selectors.ts
+++ b/stack--2022/4-tools/storypad/src/flux/state--url/selectors.ts
@@ -16,6 +16,11 @@ function _getꓽcurrent_urlⵧup_to_pathname(): string {
return location.origin + location.pathname
}
+function _getꓽcurrent_url__search_params(): URLSearchParams {
+ const url‿obj = new URL(window.location.href)
+ return url‿obj.searchParams
+}
+
/** return the normalized, state-enriched URL loading this storypad with the given activated story + misc
*/
function getꓽmain_frame_url(uid?: StoryUId): Url‿str {
@@ -24,10 +29,11 @@ function getꓽmain_frame_url(uid?: StoryUId): Url‿str {
sp.set(QUERYPARAMS.story_path, serializeꓽstory_uid(uid))
}
+ sp.sort()
+
return _getꓽcurrent_urlⵧup_to_pathname() + '?' + sp.toString()
}
-
function getꓽstory_frame_url(uid?: StoryUId): Url‿str {
return getꓽmain_frame_url(uid) // no difference for now
}
@@ -43,15 +49,15 @@ function getꓽexplicit_render_mode(): RenderMode | undefined {
}
function getꓽexplicit_story_uid(): StoryUId | undefined {
- const url‿obj = new URL(window.location.href)
+ const search_params = _getꓽcurrent_url__search_params()
- let candidate_raw = url‿obj.searchParams.get(QUERYPARAMS.story_path)
+ let candidate_raw = search_params.get(QUERYPARAMS.story_path)
//console.log('candidate_raw', candidate_raw)
let candidate = unserializeꓽstory_uid(candidate_raw)
if (candidate)
return candidate
- candidate_raw = url‿obj.searchParams.get(QUERYPARAMS.story_uid)
+ candidate_raw = search_params.get(QUERYPARAMS.story_uid)
//console.log('candidate_raw', candidate_raw)
candidate = unserializeꓽstory_uid(candidate_raw)
if (candidate)
@@ -67,4 +73,7 @@ export {
getꓽstory_frame_url,
getꓽexplicit_render_mode,
getꓽexplicit_story_uid,
+
+ // for debug
+ _getꓽcurrent_url__search_params,
}
diff --git a/stack--2022/4-tools/storypad/src/flux/state--url/serialization.ts b/stack--2022/4-tools/storypad/src/flux/state--url/serialization.ts
index 023bb40d..02ab979f 100644
--- a/stack--2022/4-tools/storypad/src/flux/state--url/serialization.ts
+++ b/stack--2022/4-tools/storypad/src/flux/state--url/serialization.ts
@@ -3,20 +3,21 @@
import assert from 'tiny-invariant'
import { StoryUId } from '../types'
+import { SEPⵧSEGMENTS, SEPⵧSTORY } from '../../consts'
/////////////////////////////////////////////////
function serializeꓽstory_uid(uid: StoryUId): string {
- const segments = uid.split('/')
+ const segments = uid.split(SEPⵧSEGMENTS)
const story_name = segments.pop()
assert(story_name, `serializeꓽstory_uid() expecting a final story basename! "${uid}"`)
assert(segments.length > 0, `serializeꓽstory_uid() expecting path segments! "${uid}"`)
// follow Storybook
// ex. seen =/story/section-header--default
return [
- segments.join('/'),
+ segments.join(SEPⵧSEGMENTS),
story_name,
- ].join('--')
+ ].join(SEPⵧSTORY)
}
function unserializeꓽstory_uid(serialized_uid: string | undefined | null): StoryUId | undefined {
@@ -24,7 +25,9 @@ function unserializeꓽstory_uid(serialized_uid: string | undefined | null): Sto
return undefined
try {
- const [ joined_segments, story_name ] = serialized_uid.split('--')
+ const split = serialized_uid.split(SEPⵧSTORY)
+ const story_name = split.pop()
+ const joined_segments = split.join(SEPⵧSTORY)
assert(story_name, `unserializeꓽstory_uid() expecting a final story basename! "${serialized_uid}"`)
assert(joined_segments, `unserializeꓽstory_uid() expecting segments! "${serialized_uid}"`)
@@ -32,9 +35,9 @@ function unserializeꓽstory_uid(serialized_uid: string | undefined | null): Sto
assert(segments.length > 0, `unserializeꓽstory_uid() expecting path segments! "${serialized_uid}"`)
return [
- segments.join('/'),
+ segments.join(SEPⵧSEGMENTS),
story_name,
- ].join('/')
+ ].join(SEPⵧSEGMENTS)
}
catch (err: unknown) {
// QParams = user input, notoriously unsafe
diff --git a/stack--2022/3-advanced--browser/css--reset/doc/demo/ut-elements.html b/stack--2022/4-tools/storypad/src/shared/stories/html/elements/ut-elements.html
similarity index 98%
rename from stack--2022/3-advanced--browser/css--reset/doc/demo/ut-elements.html
rename to stack--2022/4-tools/storypad/src/shared/stories/html/elements/ut-elements.html
index 23920731..c4f7731c 100644
--- a/stack--2022/3-advanced--browser/css--reset/doc/demo/ut-elements.html
+++ b/stack--2022/4-tools/storypad/src/shared/stories/html/elements/ut-elements.html
@@ -67,8 +67,6 @@
h6
Text content
-
-
This is a div
diff --git a/stack--2022/4-tools/storypad/src/shared/stories/html/html5-kitchen-sink_by_dbox.stories.ts b/stack--2022/4-tools/storypad/src/shared/stories/html/html5-kitchen-sink_by_dbox.stories.ts
index f3e4a27b..7581c1ce 100644
--- a/stack--2022/4-tools/storypad/src/shared/stories/html/html5-kitchen-sink_by_dbox.stories.ts
+++ b/stack--2022/4-tools/storypad/src/shared/stories/html/html5-kitchen-sink_by_dbox.stories.ts
@@ -165,7 +165,7 @@ United States
I quickly explained that many big jobs involve few hazards
-
This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to
+
This is a multi-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to
pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.
diff --git a/stack--2022/4-tools/storypad/src/shared/stories/html/motherfuckingwebsites.stories.ts b/stack--2022/4-tools/storypad/src/shared/stories/html/motherfuckingwebsites.stories.ts
index 44c7b7c7..5326eca5 100644
--- a/stack--2022/4-tools/storypad/src/shared/stories/html/motherfuckingwebsites.stories.ts
+++ b/stack--2022/4-tools/storypad/src/shared/stories/html/motherfuckingwebsites.stories.ts
@@ -47,7 +47,7 @@ export function Original() {
I'm not actually saying your shitty site should look like this. What I'm saying is that all the problems we have with websites are ones we create ourselves. Websites aren't broken by default, they are functional, high-performing, and accessible. You break them. You son-of-a-bitch.
-
"Good design is as little design as possible."
+
Good design is as little design as possible.
- some German motherfucker
@@ -64,7 +64,7 @@ export function Better() {
Seriously, it takes minimal fucking effort to improve this shit.
7 fucking declarations.
That's how much CSS it took to turn that grotesque pile of shit into this easy-to-read masterpiece. It's so fucking simple and it still has all the glory of the original perfect-ass website:
Shit's still lightweight and loads fast
Still fits on all your shitty screens
Still looks the same in all your shitty browsers
The motherfucker's still accessible to every asshole that visits your site
Shit's still legible and gets your fucking point across
And guess what, motherfucker:
You never knew it, but it's easy to improve readability on your site. Here's how.
Let it breathe
Look at lines 1 and 2 of some shitty website you're building. Assuming they're not married they probably shouldn't be humping. The defaults are trash -- pick a minimum line-height: 1.4 for body copy. Headings should be tighter. If you can't see that...piss off.
If your text hits the side of the browser, fuck off forever. You ever see a book like that? Yes? What a shitty book.
A little less contrast
Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole. I would've even made this site's background a nice #EEEEEE if I wasn't so focused on keeping declarations to a lean 7 fucking lines.
Size Matters
I know your partner says otherwise, but it's true. Bump that body copy to render close to 16px or more. Smaller type works well for print, not the screen.
Line-width, motherfucker
Looking at an LCD screen is strainful enough. Don't make me read a line of text that's 200 fucking characters long. Keep it to a nice 60-80 and users might actually read more than one sentence of your worthless dribble.
Yes, this is also fucking satire, you fuck
I love what the creator of this site's inspiration did. What I'm saying is that it's so, so simple to make sites easier to read. Websites are broken by default, they are functional, high-performing, and accessible, but they're also fucking ugly. You and all the other web designers out there need to make them not total shit.
"You're a fucking moron if you use default browser styles."
+href="http://motherfuckingwebsite.com/">this site's inspiration did. What I'm saying is that it's so, so simple to make sites easier to read. Websites are broken by default, they are functional, high-performing, and accessible, but they're also fucking ugly. You and all the other web designers out there need to make them not total shit.
You're a fucking moron if you use default browser styles.
- Eleanor Roosevelt