Add to the FAQ.

master
Zed A. Shaw 2 years ago
parent 7b790e4332
commit cdde1f389a
  1. 6
      public/build/bundle.css
  2. 53
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 7
      src/FAQ.svelte

File diff suppressed because one or more lines are too long

@ -15001,8 +15001,17 @@ var app = (function () {
let t89;
let p10;
let t90;
let a;
let a0;
let t92;
let t93;
let h26;
let t95;
let p11;
let t96;
let a1;
let t98;
let b28;
let t100;
const block = {
c: function create() {
@ -15137,16 +15146,28 @@ var app = (function () {
h24.textContent = "Do these demos work on phones?";
t85 = space();
p9 = element("p");
p9.textContent = "They could but I haven't taken the time to make them adapt. That may come in a later release. Try it anyway\nas you may be surprised how well the layouts still work on smaller screens.";
p9.textContent = "I haven't done the work needed to adapt this to phones yet. That may come in a later release. Try it anyway\nas you may be surprised how well the layouts still work on smaller screens.";
t87 = space();
h25 = element("h2");
h25.textContent = "Can I suggest a challenge?";
t89 = space();
p10 = element("p");
t90 = text("Yes please. If you find an example of a layout that you think is impossible with flexbox and CSS grids then tell me on ");
a = element("a");
a.textContent = "Twitter at @lzsthw";
a0 = element("a");
a0.textContent = "Twitter at @lzsthw";
t92 = text(" and I'll attempt a replica. My only requirement is that you also have to tell me what trick the challenge is using. This is an exercise in replicating layouts, not reverse engineering devious hidden CSS tricks. Also keep in mind that I am not invested in \"winning\" and only curious about the limits of flexbox and CSS grids. If you find something I can't do, that means I found a useful limit to avoid. It doesn't mean that we throw out all of flexbox and CSS grids so you can go back to the float-clear-div-class 1990s.");
t93 = space();
h26 = element("h2");
h26.textContent = "How did you make this site?";
t95 = space();
p11 = element("p");
t96 = text("It's actually all hand coded HTML, CSS, and JavaScript, with the only technology being ");
a1 = element("a");
a1.textContent = "Svelte";
t98 = text(" to make things easier. You could do all of this without Svelte and it wouldn't be much harder. Svelte is why if you do \"view source\" it's a mostly empty HTML page that just loads some JavaScript, and if you inspect the results it's full of ");
b28 = element("b");
b28.textContent = "svelte-";
t100 = text(" classes. If you want to see the real HTML then each demo has the source given.");
attr_dev(h1, "class", "svelte-c8ddwn");
add_location(h1, file$B, 7, 2, 61);
add_location(section, file$B, 6, 0, 49);
@ -15194,9 +15215,14 @@ var app = (function () {
add_location(h24, file$B, 39, 0, 4645);
add_location(p9, file$B, 40, 0, 4685);
add_location(h25, file$B, 43, 0, 4879);
attr_dev(a, "href", "https://twitter.com/lzsthw");
add_location(a, file$B, 44, 123, 5038);
attr_dev(a0, "href", "https://twitter.com/lzsthw");
add_location(a0, file$B, 44, 123, 5038);
add_location(p10, file$B, 44, 0, 4915);
add_location(h26, file$B, 47, 0, 5629);
attr_dev(a1, "href", "https://svelte.dev");
add_location(a1, file$B, 49, 90, 5757);
add_location(b28, file$B, 49, 372, 6039);
add_location(p11, file$B, 49, 0, 5667);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@ -15302,8 +15328,17 @@ var app = (function () {
insert_dev(target, t89, anchor);
insert_dev(target, p10, anchor);
append_dev(p10, t90);
append_dev(p10, a);
append_dev(p10, a0);
append_dev(p10, t92);
insert_dev(target, t93, anchor);
insert_dev(target, h26, anchor);
insert_dev(target, t95, anchor);
insert_dev(target, p11, anchor);
append_dev(p11, t96);
append_dev(p11, a1);
append_dev(p11, t98);
append_dev(p11, b28);
append_dev(p11, t100);
},
p: noop,
i: noop,
@ -15344,6 +15379,10 @@ var app = (function () {
if (detaching) detach_dev(h25);
if (detaching) detach_dev(t89);
if (detaching) detach_dev(p10);
if (detaching) detach_dev(t93);
if (detaching) detach_dev(h26);
if (detaching) detach_dev(t95);
if (detaching) detach_dev(p11);
}
};

File diff suppressed because one or more lines are too long

@ -38,9 +38,14 @@
<p>All this website does is demonstrate that you don't need <b>so much div.class</b>. You can scrap a lot of what you're using now to do layout and go with clean HTML with flatter structure, then judiciously use <b>div.class</b> as needed. Treat <b>div.class</b> like salt. Right now you're pouring a whole box of it on your HTML when a little bit makes it taste better.</p>
<h2>Do these demos work on phones?</h2>
<p>They could but I haven't taken the time to make them adapt. That may come in a later release. Try it anyway
<p>I haven't done the work needed to adapt this to phones yet. That may come in a later release. Try it anyway
as you may be surprised how well the layouts still work on smaller screens.</p>
<h2>Can I suggest a challenge?</h2>
<p>Yes please. If you find an example of a layout that you think is impossible with flexbox and CSS grids then tell me on <a href="https://twitter.com/lzsthw">Twitter at @lzsthw</a> and I'll attempt a replica. My only requirement is that you also have to tell me what trick the challenge is using. This is an exercise in replicating layouts, not reverse engineering devious hidden CSS tricks. Also keep in mind that I am not invested in "winning" and only curious about the limits of flexbox and CSS grids. If you find something I can't do, that means I found a useful limit to avoid. It doesn't mean that we throw out all of flexbox and CSS grids so you can go back to the float-clear-div-class 1990s.
</p>
<h2>How did you make this site?</h2>
<p>It's actually all hand coded HTML, CSS, and JavaScript, with the only technology being <a href="https://svelte.dev">Svelte</a> to make things easier. You could do all of this without Svelte and it wouldn't be much harder. Svelte is why if you do "view source" it's a mostly empty HTML page that just loads some JavaScript, and if you inspect the results it's full of <b>svelte-</b> classes. If you want to see the real HTML then each demo has the source given.
</p>

Loading…
Cancel
Save