Writing out some notes on each demo.

master
Zed A. Shaw 2 years ago
parent 24a6563ac9
commit 30459d7977
  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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -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>

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

@ -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>

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

@ -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>

@ -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>

@ -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>

@ -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>

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

@ -10,18 +10,14 @@
border: 1px solid #ddd;
display: flex;
flex-direction: column;
flex: flex-grow;
flex-basis: 100%;
grid-column: 1/3;
padding: 1rem;
}
header {
display: flex;
flex: flex-grow;