this post was submitted on 27 Jan 2025
26 points (90.6% liked)

Programming

18082 readers
128 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

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 !webdev@programming.dev



founded 2 years ago
MODERATORS
 

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!

all 30 comments
sorted by: hot top controversial new old
[–] DirigibleProtein@aussie.zone 24 points 1 week ago
[–] specter@board.minimally.online 15 points 1 week ago
[–] NostraDavid@programming.dev 12 points 1 week 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)

[–] shnizmuffin@lemmy.inbutts.lol 5 points 1 week ago

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

[–] eager_eagle@lemmy.world 2 points 1 week 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.

[–] popcar2@programming.dev 1 points 1 week 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@programming.dev 3 points 1 week 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.

[–] Zoop@beehaw.org 3 points 1 week 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! :)

[–] antithetical@lemmy.deedium.nl 12 points 1 week ago

I bit the bullet and bought the Jetbrains Ultimate bundle because I develop in lots of different languages. It includes WebStorm and it is a joy to use. It helps where necessary and doesn't get in my way..

[–] ulterno@programming.dev 10 points 1 week ago (1 children)
[–] 3h5Hne7t1K@lemmy.world 4 points 1 week ago (2 children)

Man kate is such a banger.

[–] towerful@programming.dev 3 points 1 week ago

KDE do a lot of good software

[–] ulterno@programming.dev 1 points 1 week ago

man kate is such a banger.

[–] MajorHavoc@programming.dev 8 points 1 week ago* (last edited 1 week ago) (1 children)

I use Vim, but I don't really write pure HTML. I write Markdown and convert it into HTML as needed.

Markdown covers 95% of my HTML use cases, and I embed pure HTML into the Markdown for the last 5%.

My Markdown tools (mostly command line utilities such as Pandoc) handle HTML inside Markdown quite nicely. A few need a special "hey, there's HTML in here, pass it through unchanged" command line flag, if I recall correctly.

In a few advanced cases I'll use a variant of Jinja2 template syntax, and convert that into HTML - often with some converted Markdown mixed into it at build time.

[–] z3rOR0ne@lemmy.ml 2 points 1 week ago (2 children)

Out of curiosity, what do you use to convert markdown to HTML?

[–] MajorHavoc@programming.dev 4 points 1 week ago

There's lots of good options. I currently prefer https://github.com/gomarkdown/mdtohtml

[–] furrowsofar@beehaw.org 4 points 1 week ago (1 children)

I think they said Pandoc. I have used that too some.

[–] MajorHavoc@programming.dev 2 points 1 week ago* (last edited 1 week ago)

Yeah. Pandoc can get the job done as well, if I recall.

Edit: I lately like to use a go utility for the Markdown to HTML, and then I use pandoc to convert HTML to any other document format I need, such as PDF.

[–] communism@lemmy.ml 6 points 1 week ago

I just write everything in vim, including raw html.

Not sure what your use case is, but if it's a static website you'd probably want a static site generator so you can write in markdown and then also include raw html for things that markdown can't represent.

[–] BehindTheBarrier@programming.dev 5 points 1 week ago (1 children)

The following isn't any professional advice or anything, I am writing HTML manually for my hobby blog code. I don't have much experience with HTML outside occasionally reading it.

I write a bit by hand, to layout my blog page, which is using HTMX. Generally I use RustRover since that actually gives details for attributes and such along with autocomplete. And apparently yesterday it asked if I wanted to enable HTMX support, which was even more intriguing. The main articles are however converted from markdown to HTML.

I do want a better way to design with preview of my page but I think it's a long shot to find something that does HTMX at the same time. Especially since that often means having segregated pieces of HTML mixed into one document at page loading.

[–] greywolf0x1@lemmy.ml 1 points 1 week ago (1 children)

+1 for htmx

RustRover feels quite heavy/bulky, why not Fleet/Zed assuming you've checked those out?

[–] BehindTheBarrier@programming.dev 1 points 1 week ago (1 children)

I'm still a windows pleb, so no Zed for me. Fleet I haven't heard of before.

I'm also very much one that likes a lot of convenience. RustRover is know from experience with both pycharm and Rider. But my main points are convenient functionality, autocomplete, debugger, code navigation, formatting and cleanup and git diff readily available. RustRover might be big and heavy, but it let's me focus on writing and running my code without much issues.

[–] greywolf0x1@lemmy.ml 2 points 1 week ago* (last edited 1 week ago)

still a windows pleb, so no Zed for me

oh, ok

Fleet I haven't heard of before

It is Jetbrains newest thing, an all language ide, an answer to VsCodium and Zed I guess, it's still stuck in beta though

I understand your points about convenience and experience

[–] juliebean@lemm.ee 5 points 1 week ago

usually, calibre's ebook editor, but that's cause most of my html writing and editing is to make epubs.

[–] Kissaki@programming.dev 4 points 1 week ago

Depends on context, but

  • Notepad++
  • Visual Studio
  • Visual Studio Code
  • Double Commander "quick"-editor
  • vim
  • micro
  • Firefox dev tools (console, dom edit)

When I write HTML, I don't use IDE features but accept them in Visual Studio.

[–] Evotech@lemmy.world 4 points 1 week ago
[–] Kolanaki@yiffit.net 3 points 1 week ago
[–] IllNess@infosec.pub 2 points 1 week ago

Thr nice thing about Emmet is you can use what you know and slowly add on to it. I don't really use the CSS shortcuts. It's really useful for writing HTML that requires a lot of elements.

[–] furrowsofar@beehaw.org 2 points 1 week ago