TLDR; Do you have any suggestions on learning HTML when Elm is one’s primary(only?) browser language?
Hi all, I have a weird question.
I have been using Elm for about 1.5 years now and have never felt more productive. Until I started, I could write frontend code but struggled to deal with complex layouts without using helper tools like React/Vue and make heavy use of component frameworks like MaterialUI.
CSS makes sense from afar but becomes unmanageable when I get too close.
Lately as a fullstack developer, I have started seeing the value of having comfort with HTML for certain tasks. For example, email templates probably shouldn’t (probably can’t) be written in Elm and as a Phoenix developer Liveview is also looking extremely interesting.
It seems that for situations where Elm doesn’t make sense, HTML is king. My question therefore is, are there any resources that could be useful for people like me who fear CSS and raw HTML, but already have web design skills?
I’ve been meaning to check out the MJML language to solve the e-mail problem, myself. I think there are some Elixir/Phoenix integrations for it already.
For layouts with regular HTML, I absolutely cannot live without Flexbox. Getting really comfortable with flexbox is how I deal with the overwhelming majority of my layout challenges in HTML (especially now that the gap property is implemented in Chrome, Firefox, and Safari — it works just like spacing in elm-ui), and there are a lot of good explainers on it. I like this one and this one in particular. The games written for practicing with it also seem pretty neat.
I also really like the advice from every-layout.dev for tackling a lot of more complex layout challenges.
I can’t point you to something specific but I would strongly advise you to go to CSS fundamentals… these days we have flexbox as mentioned above but its really useful to understand the basics of CSS display types, the layout flow (inline/blocks/etc.), positions (static/absolute/fixed/…) and then learn flexbox.
Email templates are a pain… I’m deeply comfortable with html and css and I still very much prefer using some builder app like mailchimp for those than wasting my time learning how to do layout with tables . At least it was something I was lucky enough to get away with until now.
As for HTML - you can read a list of HTML5 semantic tags and their description (not necessarily the full spec obviously). It’s not really that long and it helps you initially. There is a whole world out there about accessibility but using the proper tags its probably a good starting point.
Thanks @neurodynamic for the reply and for the resources.
I will definitely checkout flexbox thanks for the links. It feels like there is too much stuff on the internet, I would not have found these easily by myself.
MJML also looks great! I love the look of those high level tags for sections, columns and carousels. Email looks solved for me too. Man, I love good quality abstractions!!!
Thanks @georgesboris.
Flexbox has come up again so I will focus on this for layouts. It looks reasonably close to the rows and columns of elm-ui. Hooray!
I have a basic grasp of CSS and HTML but I always get overwhelmed after the first few chapters of most guides I read, I will do a quick review of these things again then jump into flexbox. Limiting myself to one layout tool should keep the decision anxiety away.
I haven’t tried myself by I think that maybe you could use elm-pages for email. Though the templating and learning materials already suggested might be easier to apply.
The stack and cluster from every-layout are silly easy to implement with gap. Unfortunately, gap is not really ready for general use but for admin apps or for vertical market apps where one can request the use of a specific browser, it is fair game.
You can if you really want to BUT, you probably shouldn’t. Email authoring is a huge pain in the butt due to a tone of restrictions. I ended up viewing it as time manipulation: something you can do yourself for very simple cases but something that if you require even modestly complex use-case, you should outsource the job to to a library.
Raw HTML is nothing to be feared and very little to learn. Just go through some basic tutorial and learn a little bit about the semantic HTML elements and you are done.
CSS is a different beast all together. I find it full of gotchas that might be obvious to an expert but are really confusing to beginners. Most of the complexity comes from layout, positioning, stacking and the selector precedence. This is why elm-ui is so freaking awesome.
I completrly agree. Whenever I tell my Elm conversion story, I talk about how I took 3 days to complete in Elm something that took more than a week in React. This is not to diss React, I just love how Elm’s types guide you in the right direction.
Once I used Elm-UI that type of work went down to a few hours. Its nice to think of everything as infinitely nested rows and columns. Flexbox seems to support this way of thinking pretty well
Check out semantic css libraries like marx.css to learn html better. These do a good job of showing every HTML tag, and how they can be used Semantically. For a project they’re not ideal, but as a central location to see all html tags in use, they’re very handy.
Check out utility css libraries like tailwind.css to learn css better. It does a wonderful job of isolating css rules into exactly what they do, and it shows how changing the rules affects layout/styling/typography.
MDN, always has reliable info on both topics. Good luck!
marx.css looks interesting. Its been a while since I’ve thought as html as a document format (like markdown) and not as a layout language. I will play around with this for some hobby projects for sure!
Tailwind has been heavily endorsed in Phoenix (my backend web framework of choice) and is likely what I’ll end up using once I’ve gotten my mental block. Flexbox seems to be fit in my head so things are looking up. Tailwind is my ultimate goal, it just has too much stuff for my current skill level.
. At least it was something I was lucky enough to get away with until now.
hope they get back to you I guess