Programming

17982 readers

193 users here now

Welcome to the main community in programming.dev! Feel free to post anything relating to programming here!

Cross posting is strongly encouraged in the instance. If you feel your post or another person's post makes sense in another community cross post into it.

Hope you enjoy the instance!

Rules

Follow the programming.dev instance rules
Keep content related to programming in some way
If you're posting long videos try to add in some form of tldr for those who don't want to watch videos

Wormhole

Follow the wormhole through a path of communities [email protected]

founded 2 years ago

MODERATORS

snowe

Ategon

[email protected]

What do you use for writing HTML by hand? (self.programming)

submitted 3 days ago* (last edited 2 days ago) by popcar2 to c/programming

29 comments fedilink hide all child comments

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!

you are viewing a single comment's thread
view the rest of the comments

[–] NostraDavid 11 points 3 days ago (3 children)

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)

[–] [email protected] 5 points 3 days ago

One of the only cheat sheets I've ever printed out.

[–] popcar2 1 points 2 days ago (1 children)

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 3 points 2 days ago (1 children)

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.

[–] [email protected] 3 points 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! :)

[–] [email protected] 2 points 3 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.