v2 pug example:

[cekvenich2]

https://gitlab.com/cekvenich2/11pug

Happy to get any comments to make my starter kit better :-)

[Snapstromegon]

Hi @cekvenich2,
first of all I'd like to mention that his probably isn't the right repo for your issue. I think you'd want to make a PR to this repo and folder: https://github.com/11ty/11ty-website/tree/main/src/_data/starters because there are all starters that are also shown on the 11ty website.

Nonetheless I'd like to give some immediate feetback after just taking a first look and without really testing your starter:

• 11ty is not a CMS, but a SSG (readme.md: "11ty is one of the most popular CMS"), Those are two seperate things
• fonts should be used as woff2 instead of ttf for compression reasons
• your starter needs a license. Otherwise noone can use it
• it's helpful if you have your starter deployed somewhere (just as it is in the repo) to link to it, so people can see how it looks before they need to clone
• maybe clean up the repo
  • r.sh - either say what it does or remove it
  • other.md - it's empty, maybe remove it
  • public and CONF - those don't seem needed either
• package-lock-json should not be gitignored, since it's useful for production deployments
• I think you don't need to add "_site" / your output folder to the cfg.ignores
• "html" is not in your setTemplateFormats, so there's no reason to set htmlTemplateEngine
• I think "pug" should already associated with the pug rendering engine as it is included, so you don't need to set it with setLibrary (also I think this overrides your previous settings)
• you don't need to ignore files outside your input dir, especially when they don't match your template formats
• your package.json is incomplete, missing basic info like repo, author, license, ... maybe run npm init -y once on an empty dir and take a look at what keys are set there
• use the eleventy dev server instead of reload (@11ty/eleventy --serve)
• I think not everyone will agree that indent_style = tab is the right way to go. Maybe remove the .editorconfig completely from the repo
• IMO starters are common because you don't need to make decision about css frameworks and co.. Because of that I personally think having two example CSS frameworks in your repo is not a benefit - but I could be wrong, since I don't use starters
• while your naming is generally fine for own projects, for a starter I'd personally use a more verbose naming convention (e.g. putting all page layouts in a folder called "layouts" instead of ending the name with "Lay" or not having a file called "desEx.pug"
• If your CSS frameworks are open frameworks (like tailwind, bulma, bootstrap and co.), link to their documentation. If they are "just" some CSS that isn't meant as a real framework, don't call them that

Just to be clear again: This is not to stomp on you, but just what I found to improve while giving it a short look.

[vic-cekvenich]

@Snapstromegon Thank you so much for the input! I will adjust all and after PR at the right place.

[cekvenich2]

@Snapstromegon Again thank you the time to review :-). I implemented most, but not all as I have reasons. I don't think it is good use of time to go over all that I passed on.
But one is using 11ty's reload server: It only works in local host. It does not work when you develop in the cloud, as it does not like ip addresses. So I have to use another reload server.
I plan to do a PR to get this kit listed next.

[Snapstromegon]

@cekvenich2 I'd recommend taking a look at the dev server docs. You can use the following line to make it listen on all interfaces in your config:

eleventyConfig.setServerOptions({showAllHosts: true});

In my opinion a good cloud development solution should either involve some port forwarding, so you can access remote "local" ports and/or allow you to directly debug/use the remote service.

Nonetheless I think that the default for a starter should be fast, local development, as that's one of the core strength of 11ty (IMO). If you think that a different dev server is core to your starter, that's valid, but should be stated clearly in the readme, as that's a fairly unexpected deviation from the default.

[cekvenich2]

Perfect. Will do. Thank you for all the input, I appreciate it. (ftw, I do think developing in the cloud w/ VS code in browser is 'the future'. I am doing it and I feel it increased my productivity. Most of the things are the same except VS code is in browser. So when I right click to open terminal, it is some IP. Oh and I did try to use https proxy for the '11ty server's local port' - no joy. Most of the time that works. One day when we can specify IP in 11ty like: https://github.com/tapio/live-server and I'll remove live server. I only use it for dev anyway, for production I use Caddy w/ CDN)).

…

On Fri, Jan 27, 2023 at 3:54 PM Raphael Höser ***@***.***> wrote: @cekvenich2 <https://github.com/cekvenich2> I'd recommend taking a look at the dev server docs <https://www.11ty.dev/docs/dev-server/>. You can use the following line to make it listen on all interfaces in your config: eleventyConfig.setServerOptions({showAllHosts: true}); In my opinion a good cloud development solution should either involve some port forwarding, so you can access remote "local" ports and/or allow you to directly debug/use the remote service. Nonetheless I think that the default for a starter should be fast, local development, as that's one of the core strength of 11ty (IMO). If you think that a different dev server is core to your starter, that's valid, but should be stated clearly in the readme, as that's a fairly unexpected deviation from the default. — Reply to this email directly, view it on GitHub <#2>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASK4M5HT5W4333CQ7JY6MODWUQ7XXANCNFSM6AAAAAAUCWMSNY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[cekvenich2]

@Snapstromegon I just made the PR. 11ty/11ty-website#1536

It has link to a publicly running site, responsive nav, etc. I added a simple 'npm run dev' that works without 3rd party.

Some smaller items remain, I'll get to them soon, but I think it is a nice starter. If there is something 'big', let me know please and I'll get to it.

[Snapstromegon]

@cekvenich2 @zachleat I think we can close this issue, since the discussion is not related to 11ty itself.

@cekvenich2 If you want to have an issue for the improvements, I'd recommend moving it to your repo.

Sidenote after looking at your demo:

• either preload fonts via a link rel=preload or don't preload them at all (IMO especially not via JS). @zachleat has a bunch of really great content regarding font optimization! Just search for "font" here: https://www.zachleat.com/web/
• take a look at chrome's lighthouse report https://pagespeed.web.dev/report?url=https%3A%2F%2F11.intuition.dev%2F - your performance is not great for a starter and you have some big a11y problems. A starter should IMO strive for all 100s
• on the topic of performance: The coverage report in chrome tells me that for some files >70% of the content is not used (also, do you have another dependency that still requires jQuery? Otherwise I'd remove it because of its size)
• on mobile your nav has a z-index issue with the body content
• the image you're loading on page b is 6.2MB - that's way too big. Running it through 75% Quality MozJPEG (on https://squoosh.app/) reduces it down to <500kb, if I use a modern image format like AVIF, it gets down to <100kb without any significant loss of detail. Overall I'd recommend making it a responsive image instead of a background and using the awesome 11ty image plugin
• also HTML and especially SSG is really great, because it allows for progressive rendering, so the first content can already be shown before everything loaded and JS is executed. You take this benefit away by making it display: hidden until JS executed. I would highly recommend against this pattern and instead check wether or not the JS deps you're waiting for are actually needed for the initial load and/or could be replaced or removed.

[vic-cekvenich]

@Snapstromegon Yes please! Can you continue to comment, I made a thread on my project, but it's gitlab(github played some games, not w/ me, but others). Just post a comment in a 'issue' I made pretty please: I'll tag you when I do a 'bigger' release for you to glance if you would please.

• https://gitlab.com/cekvenich2/11pug/-/issues/4
  (If you just leave your gitlab tag name above, I'll tag you for when you have time to glance).

Briefly touch on some:

• large files are there on purpose to induce FOUT and have to deal with it. (People will use their own assets and can easily turn of things, much harder to add them)
• I use datatables.net all the time, so no avoiding jQuery. I use this for major apps as well. (I have a team of 6 doing a CAD app: using 11ty and SVG-GSAP). Also: I'm not in my 20s :-), I'm old school.
• I hope you liked search blogs :-) page - search as you type.
• yes, z-index is a major bug, I'll fix it in 48 hours.
  Cheers for the help so far.
  ps- I checked your site, the PWA is very cool!

[Zearin]

(Psst! This Issue should be tagged with template-language:pug)