I don’t like front-end development but I enjoy writing things by hand rather than rely on one-off classes. Even in my blog, I tend to write a lot of HTML manually throughout the post, like creating a quick container to put two images side-by-side and center them, making blockquotes, the occasional nested list, in-line CSS, etc…

I’ve written some of it in VSCode and Joplin but I didn’t find it comfortable to write in either of them. What editor/extensions do you use to make dealing with HTML easier? I’m currently looking at Emmet, but it looks a bit intimidating to learn.

Edit: I ended up using Emmet for writing HTML in general along with Espanso for quickly inserting some templates I use. It’s working out pretty well!

  • NostraDavid@programming.dev
    11·
    2 days ago

    vscode with the built-in Emmet support.

    Emmet isn’t intimidating, unless you don’t know CSS, in which case it is extremely intimidating.

    a+b:
<a href=""></a><b></b>

a>b:
<a href=""><b></b></a>

a*2:
<a href=""></a><a href=""></a>

div.yeet:
<div class="yeet"></div>

A combination:
a>b+i*2.dollah:
<a href=""><b></b><i class="dollah"></i><i class="dollah"></i></a>

    That’s 99% of what you need to know to get started with Emmet.

    Anyway, I used to write 100% hand-written HTML, but switched to using Hugo because: Go’s built-in Templating language I knew from working with K8S, build-times are sub-second, and I can write a page in either Markdown or HTML, whichever I need (or even mix in some HTML in the Markdown!)

    Because of hugo I don’t need to mess around with repeating parts (like the nav menu).

    Only downsides:

    • it strips the comments, which I would’ve loved to leave in for people to read
    • the formatting is my favorite, so I format with prettier before committing

    I use git submodules to have the public/ folder be my Github Pages host repo, so I can just muck about locally, while I do a rebuild (which changes the files in the submodule). Only after a commit, I’ll effectively publish the website.

    Check out the website (mostly for the HTML - the articles are… meh): https://thaumatorium.com/ (no trackers, so no Cookiewall nonsense either :D)

    • popcar2@programming.devOPEnglish
      1·
      2 days ago

      I appreciate the rundown! I started getting used to Emmet now, it’s certainly more friendly than it looks. I think this is what I was looking for.

      The short-hand for CSS in Emmet is also pretty neat, but It’ll take some time to get used to it. w75p m10 turns into width: 75%; margin:10px

      • spartanatreyu@programming.dev
        2·
        1 day ago

        I would advise against using pixels for margin/padding since it’ll have issues for users who have different zoom/text sizes than you do.

        Stick to rem for margin and padding.

        If you’re still early days with css, it’s worth pointing out that you should use a “css reset” file. It will solve problems for you that you don’t even know exist yet.

        • Zoop@beehaw.org
          2·
          1 day ago

          I’m not the person you were saying this to, but thank you for this! I’m a super-noob, sort of learning as I go by trying different things as I make my cat a webpage for shits and giggles, and you gave me some helpful stuff to try and look into. I appreciate it! :)

    • Eager Eagle@lemmy.worldEnglish
      2·
      2 days ago

      This is the way. It reminds me of writing pug back when it was still called Jade. Probably the only time I enjoyed writing HTML or templating.