learn-javascript-the-hard-way
/
fsckcss
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Writing out some notes on each demo.

Browse Source
master
Zed A. Shaw 3 years ago
parent 24a6563ac9
commit 30459d7977
19 changed files with 528 additions and 249 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      public/build/bundle.css
  2. 536
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 17
      public/code/Google.css
  5. 6
      public/code/Google.notes.html
  6. 4
      public/code/Instagram.css
  7. 2
      public/code/Instagram.notes.html
  8. 3
      public/code/Pinterest.css
  9. 91
      public/code/Pinterest.notes.html
  10. 36
      public/code/Tabs.notes.html
  11. 8
      public/code/Twitter.notes.html
  12. 18
      public/code/Youtube.notes.html
  13. 16
      src/components/CodeView.svelte
  14. 19
      src/demos/Google.svelte
  15. 6
      src/demos/Instagram.svelte
  16. 5
      src/demos/Pinterest.svelte
  17. 2
      src/demos/Tabs.svelte
  18. 2
      src/demos/Twitter.svelte
  19. 2
      src/demos/Youtube.svelte

2
public/build/bundle.css
View File

File diff suppressed because one or more lines are too long

536
public/build/bundle.js
Unescape View File

@ -107,6 +107,37 @@ var app = (function () {
e.initCustomEvent(type, false, false, detail); e.initCustomEvent(type, false, false, detail);
return e; return e;
} }
class HtmlTag {
constructor(anchor = null) {
this.a = anchor;
this.e = this.n = null;
}
m(html, target, anchor = null) {
if (!this.e) {
this.e = element(target.nodeName);
this.t = target;
this.h(html);
}
this.i(anchor);
}
h(html) {
this.e.innerHTML = html;
this.n = Array.from(this.e.childNodes);
}
i(anchor) {
for (let i = 0; i < this.n.length; i += 1) {
insert(this.t, this.n[i], anchor);
}
}
p(html) {
this.d();
this.h(html);
this.i(this.a);
}
d() {
this.n.forEach(detach);
}
}
let current_component; let current_component;
function set_current_component(component) { function set_current_component(component) {
@ -6338,6 +6369,59 @@ var app = (function () {
/* src/components/CodeView.svelte generated by Svelte v3.30.0 */ /* src/components/CodeView.svelte generated by Svelte v3.30.0 */
const file$9 = "src/components/CodeView.svelte"; const file$9 = "src/components/CodeView.svelte";
// (68:0) {#if notes}
function create_if_block$1(ctx) {
let hr;
let t0;
let h2;
let t2;
let html_tag;
let html_anchor;
const block = {
c: function create() {
hr = element("hr");
t0 = space();
h2 = element("h2");
h2.textContent = "Notes";
t2 = space();
html_anchor = empty();
add_location(hr, file$9, 68, 0, 1221);
add_location(h2, file$9, 69, 0, 1226);
html_tag = new HtmlTag(html_anchor);
},
m: function mount(target, anchor) {
insert_dev(target, hr, anchor);
insert_dev(target, t0, anchor);
insert_dev(target, h2, anchor);
insert_dev(target, t2, anchor);
html_tag.m(/*notes_html*/ ctx[3], target, anchor);
insert_dev(target, html_anchor, anchor);
},
p: function update(ctx, dirty) {
if (dirty & /*notes_html*/ 8) html_tag.p(/*notes_html*/ ctx[3]);
},
d: function destroy(detaching) {
if (detaching) detach_dev(hr);
if (detaching) detach_dev(t0);
if (detaching) detach_dev(h2);
if (detaching) detach_dev(t2);
if (detaching) detach_dev(html_anchor);
if (detaching) html_tag.d();
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_if_block$1.name,
type: "if",
source: "(68:0) {#if notes}",
ctx
});
return block;
}
function create_fragment$a(ctx) { function create_fragment$a(ctx) {
let code_view; let code_view;
let css_view; let css_view;
@ -6353,6 +6437,9 @@ var app = (function () {
let pre1; let pre1;
let code1; let code1;
let t6; let t6;
let t7;
let if_block_anchor;
let if_block = /*notes*/ ctx[0] && create_if_block$1(ctx);
const block = { const block = {
c: function create() { c: function create() {
@ -6363,7 +6450,7 @@ var app = (function () {
t1 = space(); t1 = space();
pre0 = element("pre"); pre0 = element("pre");
code0 = element("code"); code0 = element("code");
t2 = text(/*css_code*/ ctx[0]); t2 = text(/*css_code*/ ctx[1]);
t3 = space(); t3 = space();
html_view = element("html-view"); html_view = element("html-view");
h11 = element("h1"); h11 = element("h1");
@ -6371,21 +6458,24 @@ var app = (function () {
t5 = space(); t5 = space();
pre1 = element("pre"); pre1 = element("pre");
code1 = element("code"); code1 = element("code");
t6 = text(/*html_code*/ ctx[1]); t6 = text(/*html_code*/ ctx[2]);
add_location(h10, file$9, 39, 4, 709); t7 = space();
if (if_block) if_block.c();
if_block_anchor = empty();
add_location(h10, file$9, 49, 4, 945);
attr_dev(code0, "class", "language-svelte"); attr_dev(code0, "class", "language-svelte");
add_location(code0, file$9, 41, 6, 738); add_location(code0, file$9, 51, 6, 974);
add_location(pre0, file$9, 40, 4, 726); add_location(pre0, file$9, 50, 4, 962);
set_custom_element_data(css_view, "class", "svelte-1qac1jo"); set_custom_element_data(css_view, "class", "svelte-1qac1jo");
add_location(css_view, file$9, 38, 2, 694); add_location(css_view, file$9, 48, 2, 930);
add_location(h11, file$9, 48, 4, 842); add_location(h11, file$9, 58, 4, 1078);
attr_dev(code1, "class", "language-svelte"); attr_dev(code1, "class", "language-svelte");
add_location(code1, file$9, 50, 6, 872); add_location(code1, file$9, 60, 6, 1108);
add_location(pre1, file$9, 49, 4, 860); add_location(pre1, file$9, 59, 4, 1096);
set_custom_element_data(html_view, "class", "svelte-1qac1jo"); set_custom_element_data(html_view, "class", "svelte-1qac1jo");
add_location(html_view, file$9, 47, 2, 826); add_location(html_view, file$9, 57, 2, 1062);
set_custom_element_data(code_view, "class", "svelte-1qac1jo"); set_custom_element_data(code_view, "class", "svelte-1qac1jo");
add_location(code_view, file$9, 37, 0, 680); add_location(code_view, file$9, 47, 0, 916);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@ -6405,15 +6495,34 @@ var app = (function () {
append_dev(html_view, pre1); append_dev(html_view, pre1);
append_dev(pre1, code1); append_dev(pre1, code1);
append_dev(code1, t6); append_dev(code1, t6);
insert_dev(target, t7, anchor);
if (if_block) if_block.m(target, anchor);
insert_dev(target, if_block_anchor, anchor);
}, },
p: function update(ctx, [dirty]) { p: function update(ctx, [dirty]) {
if (dirty & /*css_code*/ 1) set_data_dev(t2, /*css_code*/ ctx[0]); if (dirty & /*css_code*/ 2) set_data_dev(t2, /*css_code*/ ctx[1]);
if (dirty & /*html_code*/ 2) set_data_dev(t6, /*html_code*/ ctx[1]); if (dirty & /*html_code*/ 4) set_data_dev(t6, /*html_code*/ ctx[2]);
if (/*notes*/ ctx[0]) {
if (if_block) {
if_block.p(ctx, dirty);
} else {
if_block = create_if_block$1(ctx);
if_block.c();
if_block.m(if_block_anchor.parentNode, if_block_anchor);
}
} else if (if_block) {
if_block.d(1);
if_block = null;
}
}, },
i: noop, i: noop,
o: noop, o: noop,
d: function destroy(detaching) { d: function destroy(detaching) {
if (detaching) detach_dev(code_view); if (detaching) detach_dev(code_view);
if (detaching) detach_dev(t7);
if (if_block) if_block.d(detaching);
if (detaching) detach_dev(if_block_anchor);
} }
}; };
@ -6434,20 +6543,27 @@ var app = (function () {
let { source = "" } = $$props; let { source = "" } = $$props;
let css_code = ""; let css_code = "";
let html_code = ""; let html_code = "";
let notes_html = "";
let { notes = "" } = $$props;
onMount(() => { onMount(() => {
fetch(`${source}.css`).then(resource => resource.text()).then(data => $$invalidate(0, css_code = data)); fetch(`${source}.css`).then(resource => resource.text()).then(data => $$invalidate(1, css_code = data));
fetch(`${source}.html`).then(resource => resource.text()).then(data => $$invalidate(1, html_code = data)).then(() => prism.highlightAll()); fetch(`${source}.html`).then(resource => resource.text()).then(data => $$invalidate(2, html_code = data)).then(() => prism.highlightAll());
if (notes) {
fetch(`${source}.notes.html`).then(resource => resource.text()).then(data => $$invalidate(3, notes_html = data)).then(() => prism.highlightAll());
}
}); });
const writable_props = ["source"]; const writable_props = ["source", "notes"];
Object.keys($$props).forEach(key => { Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<CodeView> was created with unknown prop '${key}'`); if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<CodeView> was created with unknown prop '${key}'`);
}); });
$$self.$$set = $$props => { $$self.$$set = $$props => {
if ("source" in $$props) $$invalidate(2, source = $$props.source); if ("source" in $$props) $$invalidate(4, source = $$props.source);
if ("notes" in $$props) $$invalidate(0, notes = $$props.notes);
}; };
$$self.$capture_state = () => ({ $$self.$capture_state = () => ({
@ -6455,26 +6571,30 @@ var app = (function () {
Prism: prism, Prism: prism,
source, source,
css_code, css_code,
html_code html_code,
notes_html,
notes
}); });
$$self.$inject_state = $$props => { $$self.$inject_state = $$props => {
if ("source" in $$props) $$invalidate(2, source = $$props.source); if ("source" in $$props) $$invalidate(4, source = $$props.source);
if ("css_code" in $$props) $$invalidate(0, css_code = $$props.css_code); if ("css_code" in $$props) $$invalidate(1, css_code = $$props.css_code);
if ("html_code" in $$props) $$invalidate(1, html_code = $$props.html_code); if ("html_code" in $$props) $$invalidate(2, html_code = $$props.html_code);
if ("notes_html" in $$props) $$invalidate(3, notes_html = $$props.notes_html);
if ("notes" in $$props) $$invalidate(0, notes = $$props.notes);
}; };
if ($$props && "$$inject" in $$props) { if ($$props && "$$inject" in $$props) {
$$self.$inject_state($$props.$$inject); $$self.$inject_state($$props.$$inject);
} }
return [css_code, html_code, source]; return [notes, css_code, html_code, notes_html, source];
} }
class CodeView extends SvelteComponentDev { class CodeView extends SvelteComponentDev {
constructor(options) { constructor(options) {
super(options); super(options);
init(this, options, instance$a, create_fragment$a, safe_not_equal, { source: 2 }); init(this, options, instance$a, create_fragment$a, safe_not_equal, { source: 4, notes: 0 });
dispatch_dev("SvelteRegisterComponent", { dispatch_dev("SvelteRegisterComponent", {
component: this, component: this,
@ -6491,6 +6611,14 @@ var app = (function () {
set source(value) { set source(value) {
throw new Error("<CodeView>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'"); throw new Error("<CodeView>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
} }
get notes() {
throw new Error("<CodeView>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
set notes(value) {
throw new Error("<CodeView>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
} }
/* src/thumbs/Cards.svelte generated by Svelte v3.30.0 */ /* src/thumbs/Cards.svelte generated by Svelte v3.30.0 */
@ -8377,7 +8505,10 @@ var app = (function () {
}); });
codeview = new CodeView({ codeview = new CodeView({
props: { source: "/code/Google" }, props: {
source: "/code/Google",
notes: "/code/Google.notes.html"
},
$$inline: true $$inline: true
}); });
@ -8422,42 +8553,39 @@ var app = (function () {
button2.textContent = "I'm Feeling Lucky"; button2.textContent = "I'm Feeling Lucky";
t16 = space(); t16 = space();
create_component(codeview.$$.fragment); create_component(codeview.$$.fragment);
attr_dev(a0, "class", "svelte-1xw0xeo"); add_location(a0, file$j, 64, 8, 988);
add_location(a0, file$j, 77, 8, 1172); add_location(a1, file$j, 65, 8, 1009);
attr_dev(a1, "class", "svelte-1xw0xeo"); add_location(nav_left, file$j, 63, 6, 969);
add_location(a1, file$j, 78, 8, 1193); add_location(li0, file$j, 68, 6, 1057);
add_location(nav_left, file$j, 76, 6, 1153); add_location(li1, file$j, 69, 6, 1078);
add_location(li0, file$j, 81, 6, 1241); add_location(li2, file$j, 70, 6, 1099);
add_location(li1, file$j, 82, 6, 1262); attr_dev(button0, "class", "svelte-yyzz8b");
add_location(li2, file$j, 83, 6, 1283); add_location(button0, file$j, 71, 10, 1152);
attr_dev(button0, "class", "svelte-1xw0xeo"); add_location(li3, file$j, 71, 6, 1148);
add_location(button0, file$j, 84, 10, 1336); add_location(ul, file$j, 67, 6, 1046);
add_location(li3, file$j, 84, 6, 1332); attr_dev(nav, "class", "svelte-yyzz8b");
add_location(ul, file$j, 80, 6, 1230); add_location(nav, file$j, 62, 4, 957);
attr_dev(nav, "class", "svelte-1xw0xeo"); attr_dev(header, "class", "svelte-yyzz8b");
add_location(nav, file$j, 75, 4, 1141); add_location(header, file$j, 61, 2, 944);
attr_dev(header, "class", "svelte-1xw0xeo");
add_location(header, file$j, 74, 2, 1128);
if (img.src !== (img_src_value = holder(500, 200))) attr_dev(img, "src", img_src_value); if (img.src !== (img_src_value = holder(500, 200))) attr_dev(img, "src", img_src_value);
add_location(img, file$j, 91, 6, 1457); add_location(img, file$j, 78, 6, 1273);
attr_dev(a2, "href", "/demos/google"); attr_dev(a2, "href", "/demos/google");
attr_dev(a2, "class", "svelte-1xw0xeo"); add_location(a2, file$j, 77, 4, 1233);
add_location(a2, file$j, 90, 4, 1417); attr_dev(figure, "class", "svelte-yyzz8b");
attr_dev(figure, "class", "svelte-1xw0xeo"); add_location(figure, file$j, 76, 2, 1220);
add_location(figure, file$j, 89, 2, 1404);
attr_dev(input, "type", "text"); attr_dev(input, "type", "text");
attr_dev(input, "class", "svelte-1xw0xeo"); attr_dev(input, "class", "svelte-yyzz8b");
add_location(input, file$j, 96, 2, 1524); add_location(input, file$j, 83, 2, 1340);
attr_dev(button1, "class", "svelte-1xw0xeo"); attr_dev(button1, "class", "svelte-yyzz8b");
add_location(button1, file$j, 98, 6, 1564); add_location(button1, file$j, 85, 6, 1380);
attr_dev(button2, "class", "svelte-1xw0xeo"); attr_dev(button2, "class", "svelte-yyzz8b");
add_location(button2, file$j, 99, 6, 1601); add_location(button2, file$j, 86, 6, 1417);
attr_dev(buttons, "class", "svelte-1xw0xeo"); attr_dev(buttons, "class", "svelte-yyzz8b");
add_location(buttons, file$j, 97, 4, 1548); add_location(buttons, file$j, 84, 4, 1364);
attr_dev(search, "class", "svelte-1xw0xeo"); attr_dev(search, "class", "svelte-yyzz8b");
add_location(search, file$j, 95, 2, 1513); add_location(search, file$j, 82, 2, 1329);
attr_dev(content, "class", "svelte-1xw0xeo"); attr_dev(content, "class", "svelte-yyzz8b");
add_location(content, file$j, 72, 0, 1115); add_location(content, file$j, 59, 0, 931);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@ -8938,7 +9066,10 @@ var app = (function () {
} }
codeview = new CodeView({ codeview = new CodeView({
props: { source: "/code/Twitter" }, props: {
source: "/code/Twitter",
notes: "/code/Twitter.notes.html"
},
$$inline: true $$inline: true
}); });
@ -9934,7 +10065,10 @@ var app = (function () {
} }
codeview = new CodeView({ codeview = new CodeView({
props: { source: "/code/Youtube" }, props: {
source: "/code/Youtube",
notes: "/code/Youtube.notes.html"
},
$$inline: true $$inline: true
}); });
@ -10485,7 +10619,7 @@ var app = (function () {
return child_ctx; return child_ctx;
} }
// (120:2) {#each pins as pin} // (116:2) {#each pins as pin}
function create_each_block_1$2(ctx) { function create_each_block_1$2(ctx) {
let figure; let figure;
let img; let img;
@ -10499,8 +10633,8 @@ var app = (function () {
t = space(); t = space();
attr_dev(img, "alt", "Stock photo"); attr_dev(img, "alt", "Stock photo");
if (img.src !== (img_src_value = holder(82, 82))) attr_dev(img, "src", img_src_value); if (img.src !== (img_src_value = holder(82, 82))) attr_dev(img, "src", img_src_value);
add_location(img, file$m, 121, 6, 2099); add_location(img, file$m, 117, 6, 2055);
add_location(figure, file$m, 120, 4, 2084); add_location(figure, file$m, 116, 4, 2040);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, figure, anchor); insert_dev(target, figure, anchor);
@ -10517,14 +10651,14 @@ var app = (function () {
block, block,
id: create_each_block_1$2.name, id: create_each_block_1$2.name,
type: "each", type: "each",
source: "(120:2) {#each pins as pin}", source: "(116:2) {#each pins as pin}",
ctx ctx
}); });
return block; return block;
} }
// (139:2) {#each posts as post} // (135:2) {#each posts as post}
function create_each_block$5(ctx) { function create_each_block$5(ctx) {
let figure; let figure;
let img; let img;
@ -10538,9 +10672,8 @@ var app = (function () {
t = space(); t = space();
attr_dev(img, "alt", "Stock photo"); attr_dev(img, "alt", "Stock photo");
if (img.src !== (img_src_value = holder(300, 300))) attr_dev(img, "src", img_src_value); if (img.src !== (img_src_value = holder(300, 300))) attr_dev(img, "src", img_src_value);
add_location(img, file$m, 140, 6, 2577); add_location(img, file$m, 136, 6, 2533);
attr_dev(figure, "class", "svelte-1ri9kvn"); add_location(figure, file$m, 135, 4, 2518);
add_location(figure, file$m, 139, 4, 2562);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, figure, anchor); insert_dev(target, figure, anchor);
@ -10557,7 +10690,7 @@ var app = (function () {
block, block,
id: create_each_block$5.name, id: create_each_block$5.name,
type: "each", type: "each",
source: "(139:2) {#each posts as post}", source: "(135:2) {#each posts as post}",
ctx ctx
}); });
@ -10682,7 +10815,10 @@ var app = (function () {
} }
codeview = new CodeView({ codeview = new CodeView({
props: { source: "/code/Instagram" }, props: {
source: "/code/Instagram",
notes: "/code/Instagram.notes.html"
},
$$inline: true $$inline: true
}); });
@ -10773,63 +10909,63 @@ var app = (function () {
t33 = space(); t33 = space();
create_component(codeview.$$.fragment); create_component(codeview.$$.fragment);
add_location(b0, file$m, 88, 6, 1313); add_location(b0, file$m, 84, 6, 1269);
attr_dev(input, "placeholder", "Search"); attr_dev(input, "placeholder", "Search");
add_location(input, file$m, 89, 6, 1388); add_location(input, file$m, 85, 6, 1344);
attr_dev(button0, "class", "svelte-1ri9kvn"); attr_dev(button0, "class", "svelte-cr3eg9");
add_location(button0, file$m, 91, 12, 1440); add_location(button0, file$m, 87, 12, 1396);
add_location(li0, file$m, 91, 8, 1436); add_location(li0, file$m, 87, 8, 1392);
attr_dev(a0, "class", "svelte-1ri9kvn"); attr_dev(a0, "class", "svelte-cr3eg9");
add_location(a0, file$m, 92, 12, 1481); add_location(a0, file$m, 88, 12, 1437);
add_location(li1, file$m, 92, 8, 1477); add_location(li1, file$m, 88, 8, 1433);
add_location(ul0, file$m, 90, 6, 1423); add_location(ul0, file$m, 86, 6, 1379);
attr_dev(nav0, "class", "svelte-1ri9kvn"); attr_dev(nav0, "class", "svelte-cr3eg9");
add_location(nav0, file$m, 87, 4, 1301); add_location(nav0, file$m, 83, 4, 1257);
attr_dev(header, "class", "svelte-1ri9kvn"); attr_dev(header, "class", "svelte-cr3eg9");
add_location(header, file$m, 86, 2, 1288); add_location(header, file$m, 82, 2, 1244);
attr_dev(img, "alt", "Zed's Face"); attr_dev(img, "alt", "Zed's Face");
if (img.src !== (img_src_value = holder(256, 256))) attr_dev(img, "src", img_src_value); if (img.src !== (img_src_value = holder(256, 256))) attr_dev(img, "src", img_src_value);
add_location(img, file$m, 99, 6, 1568); add_location(img, file$m, 95, 6, 1524);
attr_dev(figure, "class", "svelte-1ri9kvn"); attr_dev(figure, "class", "svelte-cr3eg9");
add_location(figure, file$m, 98, 4, 1553); add_location(figure, file$m, 94, 4, 1509);
add_location(b1, file$m, 104, 8, 1661); add_location(b1, file$m, 100, 8, 1617);
attr_dev(button1, "class", "svelte-1ri9kvn"); attr_dev(button1, "class", "svelte-cr3eg9");
add_location(button1, file$m, 104, 23, 1676); add_location(button1, file$m, 100, 23, 1632);
attr_dev(p0, "class", "svelte-1ri9kvn"); attr_dev(p0, "class", "svelte-cr3eg9");
add_location(p0, file$m, 103, 6, 1649); add_location(p0, file$m, 99, 6, 1605);
add_location(b2, file$m, 108, 8, 1730); add_location(b2, file$m, 104, 8, 1686);
add_location(b3, file$m, 108, 25, 1747); add_location(b3, file$m, 104, 25, 1703);
add_location(b4, file$m, 108, 48, 1770); add_location(b4, file$m, 104, 48, 1726);
attr_dev(p1, "class", "svelte-1ri9kvn"); attr_dev(p1, "class", "svelte-cr3eg9");
add_location(p1, file$m, 107, 6, 1718); add_location(p1, file$m, 103, 6, 1674);
add_location(b5, file$m, 111, 9, 1814); add_location(b5, file$m, 107, 9, 1770);
attr_dev(p2, "class", "svelte-1ri9kvn"); attr_dev(p2, "class", "svelte-cr3eg9");
add_location(p2, file$m, 111, 6, 1811); add_location(p2, file$m, 107, 6, 1767);
add_location(br, file$m, 112, 102, 1939); add_location(br, file$m, 108, 102, 1895);
attr_dev(a1, "href", "www.twitch.tv/zedashaw"); attr_dev(a1, "href", "www.twitch.tv/zedashaw");
attr_dev(a1, "class", "svelte-1ri9kvn"); attr_dev(a1, "class", "svelte-cr3eg9");
add_location(a1, file$m, 113, 8, 1952); add_location(a1, file$m, 109, 8, 1908);
attr_dev(p3, "class", "svelte-1ri9kvn"); attr_dev(p3, "class", "svelte-cr3eg9");
add_location(p3, file$m, 112, 6, 1843); add_location(p3, file$m, 108, 6, 1799);
attr_dev(info, "class", "svelte-1ri9kvn"); attr_dev(info, "class", "svelte-cr3eg9");
add_location(info, file$m, 102, 4, 1636); add_location(info, file$m, 98, 4, 1592);
attr_dev(profile, "class", "svelte-1ri9kvn"); attr_dev(profile, "class", "svelte-cr3eg9");
add_location(profile, file$m, 97, 2, 1539); add_location(profile, file$m, 93, 2, 1495);
attr_dev(pins_1, "class", "svelte-1ri9kvn"); attr_dev(pins_1, "class", "svelte-cr3eg9");
add_location(pins_1, file$m, 118, 2, 2051); add_location(pins_1, file$m, 114, 2, 2007);
add_location(li2, file$m, 129, 8, 2221); add_location(li2, file$m, 125, 8, 2177);
add_location(li3, file$m, 130, 8, 2291); add_location(li3, file$m, 126, 8, 2247);
add_location(li4, file$m, 131, 8, 2362); add_location(li4, file$m, 127, 8, 2318);
add_location(li5, file$m, 132, 8, 2427); add_location(li5, file$m, 128, 8, 2383);
add_location(ul1, file$m, 128, 6, 2208); add_location(ul1, file$m, 124, 6, 2164);
attr_dev(nav1, "class", "svelte-1ri9kvn"); attr_dev(nav1, "class", "svelte-cr3eg9");
add_location(nav1, file$m, 127, 4, 2196); add_location(nav1, file$m, 123, 4, 2152);
attr_dev(tabs, "class", "svelte-1ri9kvn"); attr_dev(tabs, "class", "svelte-cr3eg9");
add_location(tabs, file$m, 126, 2, 2185); add_location(tabs, file$m, 122, 2, 2141);
attr_dev(posts_1, "class", "svelte-1ri9kvn"); attr_dev(posts_1, "class", "svelte-cr3eg9");
add_location(posts_1, file$m, 137, 2, 2526); add_location(posts_1, file$m, 133, 2, 2482);
attr_dev(content, "class", "svelte-1ri9kvn"); attr_dev(content, "class", "svelte-cr3eg9");
add_location(content, file$m, 85, 0, 1276); add_location(content, file$m, 81, 0, 1232);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@ -11067,8 +11203,8 @@ var app = (function () {
return child_ctx; return child_ctx;
} }
// (156:2) {#if !thumbnail} // (153:2) {#if !thumbnail}
function create_if_block$1(ctx) { function create_if_block$2(ctx) {
let profile; let profile;
let info; let info;
let h1; let h1;
@ -11126,30 +11262,30 @@ var app = (function () {
each_blocks[i].c(); each_blocks[i].c();
} }
attr_dev(h1, "class", "svelte-79nfuj"); attr_dev(h1, "class", "svelte-8rhjm4");
add_location(h1, file$n, 158, 8, 2526); add_location(h1, file$n, 155, 8, 2472);
attr_dev(p0, "class", "svelte-79nfuj"); attr_dev(p0, "class", "svelte-8rhjm4");
add_location(p0, file$n, 159, 8, 2560); add_location(p0, file$n, 156, 8, 2506);
attr_dev(b0, "class", "svelte-79nfuj"); attr_dev(b0, "class", "svelte-8rhjm4");
add_location(b0, file$n, 160, 11, 2601); add_location(b0, file$n, 157, 11, 2547);
attr_dev(b1, "class", "svelte-79nfuj"); attr_dev(b1, "class", "svelte-8rhjm4");
add_location(b1, file$n, 160, 29, 2619); add_location(b1, file$n, 157, 29, 2565);
attr_dev(p1, "class", "svelte-79nfuj"); attr_dev(p1, "class", "svelte-8rhjm4");
add_location(p1, file$n, 160, 8, 2598); add_location(p1, file$n, 157, 8, 2544);
attr_dev(p2, "class", "svelte-79nfuj"); attr_dev(p2, "class", "svelte-8rhjm4");
add_location(p2, file$n, 161, 8, 2654); add_location(p2, file$n, 158, 8, 2600);
attr_dev(info, "class", "svelte-79nfuj"); attr_dev(info, "class", "svelte-8rhjm4");
add_location(info, file$n, 157, 6, 2511); add_location(info, file$n, 154, 6, 2457);
attr_dev(img, "alt", "Zed's Face"); attr_dev(img, "alt", "Zed's Face");
if (img.src !== (img_src_value = holder(128, 128))) attr_dev(img, "src", img_src_value); if (img.src !== (img_src_value = holder(128, 128))) attr_dev(img, "src", img_src_value);
attr_dev(img, "class", "svelte-79nfuj"); attr_dev(img, "class", "svelte-8rhjm4");
add_location(img, file$n, 165, 8, 2758); add_location(img, file$n, 162, 8, 2704);
attr_dev(figure, "class", "svelte-79nfuj"); attr_dev(figure, "class", "svelte-8rhjm4");
add_location(figure, file$n, 164, 6, 2741); add_location(figure, file$n, 161, 6, 2687);
attr_dev(profile, "class", "svelte-79nfuj"); attr_dev(profile, "class", "svelte-8rhjm4");
add_location(profile, file$n, 156, 4, 2495); add_location(profile, file$n, 153, 4, 2441);
attr_dev(pins, "class", "svelte-79nfuj"); attr_dev(pins, "class", "svelte-8rhjm4");
add_location(pins, file$n, 169, 4, 2843); add_location(pins, file$n, 166, 4, 2789);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, profile, anchor); insert_dev(target, profile, anchor);
@ -11210,16 +11346,16 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", { dispatch_dev("SvelteRegisterBlock", {
block, block,
id: create_if_block$1.name, id: create_if_block$2.name,
type: "if", type: "if",
source: "(156:2) {#if !thumbnail}", source: "(153:2) {#if !thumbnail}",
ctx ctx
}); });
return block; return block;
} }
// (173:8) {#each random_sample(pin_sizes, 10) as height} // (170:8) {#each random_sample(pin_sizes, 10) as height}
function create_each_block_1$3(ctx) { function create_each_block_1$3(ctx) {
let figure; let figure;
let img; let img;
@ -11242,12 +11378,12 @@ var app = (function () {
t3 = text(" high."); t3 = text(" high.");
attr_dev(img, "alt", "Van Gogh Art"); attr_dev(img, "alt", "Van Gogh Art");
if (img.src !== (img_src_value = holder(240, /*height*/ ctx[9]))) attr_dev(img, "src", img_src_value); if (img.src !== (img_src_value = holder(240, /*height*/ ctx[9]))) attr_dev(img, "src", img_src_value);
attr_dev(img, "class", "svelte-79nfuj"); attr_dev(img, "class", "svelte-8rhjm4");
add_location(img, file$n, 174, 12, 2975); add_location(img, file$n, 171, 12, 2921);
attr_dev(figcaption, "class", "svelte-79nfuj"); attr_dev(figcaption, "class", "svelte-8rhjm4");
add_location(figcaption, file$n, 175, 12, 3040); add_location(figcaption, file$n, 172, 12, 2986);
attr_dev(figure, "class", "svelte-79nfuj"); attr_dev(figure, "class", "svelte-8rhjm4");
add_location(figure, file$n, 173, 10, 2954); add_location(figure, file$n, 170, 10, 2900);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, figure, anchor); insert_dev(target, figure, anchor);
@ -11268,14 +11404,14 @@ var app = (function () {
block, block,
id: create_each_block_1$3.name, id: create_each_block_1$3.name,
type: "each", type: "each",
source: "(173:8) {#each random_sample(pin_sizes, 10) as height}", source: "(170:8) {#each random_sample(pin_sizes, 10) as height}",
ctx ctx
}); });
return block; return block;
} }
// (171:4) {#each lanes as lane} // (168:4) {#each lanes as lane}
function create_each_block$6(ctx) { function create_each_block$6(ctx) {
let lane; let lane;
let t; let t;
@ -11296,8 +11432,8 @@ var app = (function () {
} }
t = space(); t = space();
attr_dev(lane, "class", "svelte-79nfuj"); attr_dev(lane, "class", "svelte-8rhjm4");
add_location(lane, file$n, 171, 6, 2882); add_location(lane, file$n, 168, 6, 2828);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, lane, anchor); insert_dev(target, lane, anchor);
@ -11343,7 +11479,7 @@ var app = (function () {
block, block,
id: create_each_block$6.name, id: create_each_block$6.name,
type: "each", type: "each",
source: "(171:4) {#each lanes as lane}", source: "(168:4) {#each lanes as lane}",
ctx ctx
}); });
@ -11381,10 +11517,13 @@ var app = (function () {
$$inline: true $$inline: true
}); });
let if_block = !/*thumbnail*/ ctx[0] && create_if_block$1(ctx); let if_block = !/*thumbnail*/ ctx[0] && create_if_block$2(ctx);
codeview = new CodeView({ codeview = new CodeView({
props: { source: "/code/Pinterest" }, props: {
source: "/code/Pinterest",
notes: "/code/Pinterest.notes.html"
},
$$inline: true $$inline: true
}); });
@ -11418,34 +11557,34 @@ var app = (function () {
if (if_block) if_block.c(); if (if_block) if_block.c();
t11 = space(); t11 = space();
create_component(codeview.$$.fragment); create_component(codeview.$$.fragment);
attr_dev(logo, "class", "svelte-79nfuj"); attr_dev(logo, "class", "svelte-8rhjm4");
add_location(logo, file$n, 141, 8, 2165); add_location(logo, file$n, 138, 8, 2111);
attr_dev(a0, "class", "svelte-79nfuj"); attr_dev(a0, "class", "svelte-8rhjm4");
add_location(a0, file$n, 142, 8, 2243); add_location(a0, file$n, 139, 8, 2189);
attr_dev(a1, "class", "svelte-79nfuj"); attr_dev(a1, "class", "svelte-8rhjm4");
add_location(a1, file$n, 143, 8, 2264); add_location(a1, file$n, 140, 8, 2210);
attr_dev(left, "class", "svelte-79nfuj"); attr_dev(left, "class", "svelte-8rhjm4");
add_location(left, file$n, 140, 6, 2150); add_location(left, file$n, 137, 6, 2096);
attr_dev(input, "placeholder", "Search"); attr_dev(input, "placeholder", "Search");
attr_dev(input, "class", "svelte-79nfuj"); attr_dev(input, "class", "svelte-8rhjm4");
add_location(input, file$n, 146, 6, 2300); add_location(input, file$n, 143, 6, 2246);
attr_dev(button0, "class", "svelte-79nfuj"); attr_dev(button0, "class", "svelte-8rhjm4");
add_location(button0, file$n, 149, 12, 2353); add_location(button0, file$n, 146, 12, 2299);
attr_dev(li0, "class", "svelte-79nfuj"); attr_dev(li0, "class", "svelte-8rhjm4");
add_location(li0, file$n, 149, 8, 2349); add_location(li0, file$n, 146, 8, 2295);
attr_dev(button1, "id", "signup"); attr_dev(button1, "id", "signup");
attr_dev(button1, "class", "svelte-79nfuj"); attr_dev(button1, "class", "svelte-8rhjm4");
add_location(button1, file$n, 150, 12, 2394); add_location(button1, file$n, 147, 12, 2340);
attr_dev(li1, "class", "svelte-79nfuj"); attr_dev(li1, "class", "svelte-8rhjm4");
add_location(li1, file$n, 150, 8, 2390); add_location(li1, file$n, 147, 8, 2336);
attr_dev(ul, "class", "svelte-79nfuj"); attr_dev(ul, "class", "svelte-8rhjm4");
add_location(ul, file$n, 148, 6, 2336); add_location(ul, file$n, 145, 6, 2282);
attr_dev(nav, "class", "svelte-79nfuj"); attr_dev(nav, "class", "svelte-8rhjm4");
add_location(nav, file$n, 139, 4, 2138); add_location(nav, file$n, 136, 4, 2084);
attr_dev(header, "class", "svelte-79nfuj"); attr_dev(header, "class", "svelte-8rhjm4");
add_location(header, file$n, 138, 2, 2125); add_location(header, file$n, 135, 2, 2071);
attr_dev(content, "class", "svelte-79nfuj"); attr_dev(content, "class", "svelte-8rhjm4");
add_location(content, file$n, 137, 0, 2113); add_location(content, file$n, 134, 0, 2059);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@ -11482,7 +11621,7 @@ var app = (function () {
if (if_block) { if (if_block) {
if_block.p(ctx, dirty); if_block.p(ctx, dirty);
} else { } else {
if_block = create_if_block$1(ctx); if_block = create_if_block$2(ctx);
if_block.c(); if_block.c();
if_block.m(content, null); if_block.m(content, null);
} }
@ -13447,7 +13586,7 @@ var app = (function () {
const file$u = "src/demos/Modal.svelte"; const file$u = "src/demos/Modal.svelte";
// (50:0) {#if visible} // (50:0) {#if visible}
function create_if_block$2(ctx) { function create_if_block$3(ctx) {
let modal; let modal;
let modal_content; let modal_content;
let h1; let h1;
@ -13494,7 +13633,7 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", { dispatch_dev("SvelteRegisterBlock", {
block, block,
id: create_if_block$2.name, id: create_if_block$3.name,
type: "if", type: "if",
source: "(50:0) {#if visible}", source: "(50:0) {#if visible}",
ctx ctx
@ -13512,7 +13651,7 @@ var app = (function () {
let current; let current;
let mounted; let mounted;
let dispose; let dispose;
let if_block = /*visible*/ ctx[0] && create_if_block$2(ctx); let if_block = /*visible*/ ctx[0] && create_if_block$3(ctx);
codeview = new CodeView({ codeview = new CodeView({
props: { source: "/code/Modal" }, props: { source: "/code/Modal" },
@ -13555,7 +13694,7 @@ var app = (function () {
if (if_block) { if (if_block) {
if_block.p(ctx, dirty); if_block.p(ctx, dirty);
} else { } else {
if_block = create_if_block$2(ctx); if_block = create_if_block$3(ctx);
if_block.c(); if_block.c();
if_block.m(t2.parentNode, t2); if_block.m(t2.parentNode, t2);
} }
@ -14023,7 +14162,10 @@ var app = (function () {
} }
codeview = new CodeView({ codeview = new CodeView({
props: { source: "/code/Tabs" }, props: {
source: "/code/Tabs",
notes: "code/Tabs.notes.html"
},
$$inline: true $$inline: true
}); });
@ -14739,7 +14881,7 @@ var app = (function () {
} }
// (22:0) {#if theme == 'dark'} // (22:0) {#if theme == 'dark'}
function create_if_block$3(ctx) { function create_if_block$4(ctx) {
let span; let span;
let icon; let icon;
let current; let current;
@ -14787,7 +14929,7 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", { dispatch_dev("SvelteRegisterBlock", {
block, block,
id: create_if_block$3.name, id: create_if_block$4.name,
type: "if", type: "if",
source: "(22:0) {#if theme == 'dark'}", source: "(22:0) {#if theme == 'dark'}",
ctx ctx
@ -14801,7 +14943,7 @@ var app = (function () {
let if_block; let if_block;
let if_block_anchor; let if_block_anchor;
let current; let current;
const if_block_creators = [create_if_block$3, create_else_block$1]; const if_block_creators = [create_if_block$4, create_else_block$1];
const if_blocks = []; const if_blocks = [];
function select_block_type(ctx, dirty) { function select_block_type(ctx, dirty) {

2
public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

17
public/code/Google.css
Unescape View File

@ -2,18 +2,14 @@ content {
border: 1px solid #ddd; border: 1px solid #ddd;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: flex-grow;
flex-basis: 100%;
grid-column: 1/3;
padding: 1rem; padding: 1rem;
} }
header { header {
display: flex; display: flex;
flex: flex-grow;
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
padding: unset; padding: 0;
} }
nav { nav {
@ -46,16 +42,7 @@ search buttons {
button { button {
padding: 0.5rem; padding: 0.5rem;
background-color: #ddd; background-color: #ddd;
border: unset; border: 0px;
color: #000; color: #000;
font-weight: unset; font-weight: unset;
} }
nav {
font-weight: normal;
}
a {
color: unset;
font-weight: normal;
}

6
public/code/Google.notes.html
Unescape View File

@ -0,0 +1,6 @@
<p>The first demo I created and easily the simplest. In fact it may be more complicated than it needs to be because I was just figuring this out at that time. There are a few things that I feel need to be fixed. For speed I just threw in a <b>width: 50ch</b> on the search to get it done. You'll notice that as you shrink the UI this search bar doesn't shrink too, so fixing that would be the first improvement.</p>
<p>You may also notice a couple uses of <b>unset</b> which is simply to disable the MVP.css defaults so that it's closer to Google's.
</p>

4
public/code/Instagram.css
Unescape View File

@ -8,7 +8,6 @@ content {
flex-direction: column; flex-direction: column;
flex: flex-grow; flex: flex-grow;
flex-basis: 100%; flex-basis: 100%;
grid-column: 1/3;
padding: 1rem; padding: 1rem;
} }
@ -58,9 +57,6 @@ posts {
} }
posts figure {
}
pins { pins {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
public/code/Instagram.notes.html
Unescape View File

@ -0,0 +1,2 @@
<p>Instagram's design ends up being the easiest of the big sites. It's just a big simple header with a big simple grid. The end. This is my actual instagram account.
</p>

3
public/code/Pinterest.css
Unescape View File

@ -8,18 +8,15 @@ content {
flex-direction: column; flex-direction: column;
flex: flex-grow; flex: flex-grow;
flex-basis: 100%; flex-basis: 100%;
grid-column: 1/3;
padding: 1rem; padding: 1rem;
} }
header { header {
display: flex;
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
} }
header nav { header nav {
display: flex;
flex: 1; flex: 1;
} }

91
public/code/Pinterest.notes.html
Unescape View File

@ -0,0 +1,91 @@
<p>I feel like flexbox was possibly created to solve the "Pinterest challenge." Pinterest has always had this slick ragged elements display for their image listings, and copying it in pure CSS is considered borderline impossible without some amount of JavaScript. In this demo I'm only using flexbox and some JavaScript to generate image thumbs of different lengths. No JavaScript is used to figure out the packing on these columns.
</p>
<p>You'll notice that this mostly works, but if you scroll the bottom the randomized image sizes is not smoothly distributed. To make that work you'd want to use JavaScript to still arrange the contents of the lanes to be relatively the same size.
</p>
<p>You'll also notice I'm using a variable to set the "pinterest red" on some elements as a demonstration:</p>
<pre>
<code class="language-css">
:root {
--pin-red: #e60023;
}
header logo {
color: var(--pin-red);
display: flex;
font-size: 1.2em;
}
header nav button#signup {
background-color: var(--pin-red);
color: var(--color-bg);
}
</code>
</pre>
<p>That's simply a demonstration of variables and their use in removing "magic numbers" from your CSS. You can also use this to create alternate views of your CSS and play with different colorschemes easier. Here's the snippet from this site's use of variable to create the darkmode button:</p>
<pre>
<code class="language-css">
:root {
--color: #000;
--color-accent: #111;
--color-inactive: #999;
--color-inactive-secondary: #fff;
--color-bg: #fff;
--color-bg-secondary: #eee;
--color-secondary: #666;
--color-secondary-accent: #888;
--color-shadow: #ddd;
--color-shadow-secondary: #fff;
--color-shadow-dark: #888;
--color-bg-inverted: #555;
--color-text: #000;
}
[data-theme="dark"] {
--color: #bbb;
--color-accent: #fff;
--color-bg: #333;
--color-bg-secondary: #555;
--color-shadow-secondary: #333;
--color-secondary: #ddd;
--color-secondary-accent: #ddd;
--color-shadow: #bbb;
--color-text: #fff;
--color-text-secondary: #aaa;
--color-inactive: #666;
--color-bg-inverted: #fff;
}
</code>
</pre>
<p>Then the darkmode JavaScript (with Svelte flavor) is this:</p>
<pre>
<code class="language-javascript">
import {onMount} from 'svelte';
export let theme = localStorage.getItem('theme') ? localStorage.getItem('theme') : 'light';
const set_theme = () =&gt; {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
const toggle = () =&gt; {
theme = theme == 'light' ? 'dark' : 'light';
set_theme();
}
onMount(() =&gt; {
set_theme()
});
</code>
</pre>
<p>The magic is in the line <b>document.documentElement.setAttribute('data-theme', theme);</b> which switches the data element in the above CSS to "dark" triggering the variable changes.
</p>

36
public/code/Tabs.notes.html
Unescape View File

@ -0,0 +1,36 @@
<p>This demo has two versions. One just shows how to do a basic layout with 3 tabs and no
interaction. Using flexbox I'm able to simplify the HTML with only <b>a</b> tags rather than the usual pattern of using a <b>ul/li</b> combination. I don't have to use <b>a</b> tags at all and can use anything I can attach an <b>onClick</b> event handler to.
</p>
<p>The second demo does a complete set of 3 tabs with associated panels and the JavaScript necessary to make them work. The code you see here is <a href="https://svelte.dev">Svelte</a> template code to make the example more succinct, and to provide the handlers and interaction. You could also do this with Vanilla JavaScript with not much more hassle.
</p>
<p>The interactive demo isn't terribly difficult. You need to use a class to toggle the visuals for "active" vs. inactive tabs and panels, and you have to mark the inactive panels <b>display: none</b> so they aren't visible.
</p>
<pre>
<code class="language-css">
tabs a.active {
background-color: var(--color-bg-secondary);
}
panel {
display: none;
}
panel.active {
border: 1px solid var(--color-accent);
display: flex;
flex-direction: column;
padding: 1em;
}
</code>
</pre>
<p>It's the only place you need a class for this simple demo. Using classes to design state changes and different
appearances works well since the alternative would be to somehow change the tags, and that won't work.
</p>
<p>Finally, I continue to use my more explicit style of <b>tabs a</b> rather than using classes to avoid specifying the structure I want to select. I would say you don't have to do this, but it does make it a lot easier to find the HTML that a piece of CSS applies to, and also makes sure you aren't accidentally applying a style from somewhere else via the cascade.
</p>

8
public/code/Twitter.notes.html
Unescape View File

@ -0,0 +1,8 @@
<p>Twitter's UI is easily the weirdest and most gross one to implement. They're fond of the card. Cards everywhere, in all different shapes, for all manner of things. You have cards for the login and cards for the related news and cards for each tweet. They also utilize some kind of CSS/HTML generator that <b>loves</b> divs. Figuring out how they do most of this was an exercise in spelunking the div.
</p>
<p>The most difficult part of this is definitely overlaying the profile image on the header image in a reliable way. My version most likely doesn't really match the pixels of Twitter's but mine definitely is simpler. Looking at the code it seems this one header graphic makes up most of the CSS layout.
</p>
<p>This is the first one where I started to realize we have some weird aversion to directional and positional names on tags. I first tried to avoid words like "left", "middle", and "right" because...that's just what we were always told. You'd hear people rant about how naming visual elements with their position is bad form because you may move them, and then those same people never moved them. I'm now thinking using names that match positions is far easier because I can easily mentally map "right" with the things on the actual right of the screen. If I later need to rename it for some arbitrary stylistic irrationality then I can after I get it working.
</p>

18
public/code/Youtube.notes.html
Unescape View File

@ -0,0 +1,18 @@
<p>Youtube's design isn't too difficult once you figure out they're a giant video with a ton of tiles for everything. Related video tiles weirdly come in two sizes, so I just shrink them with this:</p>
<pre>
<code class="language-css">
card.small {
--img-width: 100px;
--img-height: 70px;
--font-size: 0.6em;
}
</code>
</pre>
<p>What's interesting about this is I'm using a class <b>small</b> to tag those small cards (aka tiles) but I'm changing their dimensions through the use of CSS variables. The alternative is to alter the CSS settings, but with this I don't have to remember to find everywhere I did that if I ever change the <b>card</b>. As long as those variables are maintained I can change the design of <b>card</b> and everything should keep working across the site.
</p>
<p>I think of this as being closer to how you can subclass in an Object Oriented Programming language. I'm "subclassing" the base <b>card</b> to create <b>card.small</b> and then changing the variables to define what this new variant means.</p>

16
src/components/CodeView.svelte
Unescape View File

@ -5,6 +5,8 @@
export let source = ""; export let source = "";
let css_code = ""; let css_code = "";
let html_code = ""; let html_code = "";
let notes_html = "";
export let notes = "";
onMount(() => { onMount(() => {
fetch(`${source}.css`) fetch(`${source}.css`)
@ -15,6 +17,14 @@
.then(resource => resource.text()) .then(resource => resource.text())
.then(data => html_code = data) .then(data => html_code = data)
.then(() => Prism.highlightAll()); .then(() => Prism.highlightAll());
if(notes) {
fetch(`${source}.notes.html`)
.then(resource => resource.text())
.then(data => notes_html = data)
.then(() => Prism.highlightAll());
}
}); });
</script> </script>
@ -54,3 +64,9 @@
</pre> </pre>
</html-view> </html-view>
</code-view> </code-view>
{#if notes}
<hr>
<h2>Notes</h2>
{@html notes_html}
{/if}

19
src/demos/Google.svelte
Unescape View File

@ -10,18 +10,14 @@
border: 1px solid #ddd; border: 1px solid #ddd;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: flex-grow;
flex-basis: 100%;
grid-column: 1/3;
padding: 1rem; padding: 1rem;
} }
header { header {
display: flex; display: flex;
flex: flex-grow;
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
padding: unset; padding: 0;
} }
nav { nav {
@ -54,19 +50,10 @@
button { button {
padding: 0.5rem; padding: 0.5rem;
background-color: #ddd; background-color: #ddd;
border: unset; border: 0px;
color: #000; color: #000;
font-weight: unset; font-weight: unset;
} }
nav {
font-weight: normal;
}
a {
color: unset;
font-weight: normal;
}
</style> </style>
@ -103,4 +90,4 @@
</content> </content>
<CodeView source="/code/Google" /> <CodeView source="/code/Google" notes="/code/Google.notes.html" />

6
src/demos/Instagram.svelte
Unescape View File

@ -20,7 +20,6 @@
flex-direction: column; flex-direction: column;
flex: flex-grow; flex: flex-grow;
flex-basis: 100%; flex-basis: 100%;
grid-column: 1/3;
padding: 1rem; padding: 1rem;
} }
@ -70,9 +69,6 @@
} }
posts figure {
}
pins { pins {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -144,4 +140,4 @@
</posts> </posts>
</content> </content>
<CodeView source="/code/Instagram" /> <CodeView source="/code/Instagram" notes="/code/Instagram.notes.html" />

5
src/demos/Pinterest.svelte
Unescape View File

@ -38,18 +38,15 @@ content {
flex-direction: column; flex-direction: column;
flex: flex-grow; flex: flex-grow;
flex-basis: 100%; flex-basis: 100%;
grid-column: 1/3;
padding: 1rem; padding: 1rem;
} }
header { header {
display: flex;
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
} }
header nav { header nav {
display: flex;
flex: 1; flex: 1;
} }
@ -182,4 +179,4 @@ pins lane {
{/if} {/if}
</content> </content>
<CodeView source="/code/Pinterest" /> <CodeView source="/code/Pinterest" notes="/code/Pinterest.notes.html" />

2
src/demos/Tabs.svelte
Unescape View File

@ -92,4 +92,4 @@
</panels> </panels>
</content> </content>
<CodeView source="/code/Tabs" /> <CodeView source="/code/Tabs" notes="code/Tabs.notes.html" />

2
src/demos/Twitter.svelte
Unescape View File

@ -318,4 +318,4 @@
</right> </right>
</content> </content>
<CodeView source="/code/Twitter" /> <CodeView source="/code/Twitter" notes="/code/Twitter.notes.html" />

2
src/demos/Youtube.svelte
Unescape View File

@ -280,4 +280,4 @@
</main> </main>
</content> </content>
<CodeView source="/code/Youtube" /> <CodeView source="/code/Youtube" notes="/code/Youtube.notes.html" />

Write Preview
Loading…
Cancel
Save