After starting MEML, I wanted to think about what are the main parts of web development that suck. I looked far and wide, and I now understand what makes web development painful.
CSS
The thing with CSS is that it is good, and tools like Sass are not fixes, but addons. CSS sucks because it is difficult to develop what you want. While tools like Bulma make the job more manageable, they aren't fixing the core concern. Any functionality is done by CSS, if not JavaScript.
For example, the dropdown menu is not easy to create. Removing blank lines, W3Schools CSS tutorial on making a single dropdown uses 33 lines of HTML/CSS. Removing the stylistic parts of the dropdown, you can get down to 29 lines. 13 lines of CSS, 7 lines to create the page itself, 6 going to the dropdown, 1 being for the header tag. Getting to true barebones is still 27 lines.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
I don't want to write 27 lines of anything to get basic functionality that is expected from even low-level beginners. So I sought to add a dropdown function, where it takes up 4 lines where plain HTML/CSS would take 27.
(head)
(body
(dropdown value="Hover Over Me" type="hover"
(drop-option value="Hello World!")))
Another area of HTML/CSS I dislike is navigation bars, where most of my dropdowns are put. I prefer to utilize a nav class div because I despise writing the word navigation. The issue with the tag is autofill annoys me, and I suck at typing. I have a reason why I use Grammarly to write my articles. Navigation bars are a struggle, I use a special kind of build, not sure if others use it. Here is a simple two-link navigation bar, as I would write it.
<!DOCTYPE html>
<html>
<head>
<style>
.nav-option{
display: inline-block
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="nav-option">
<a href="https://example.com">Some Link</a>
</li>
<li class="nav-option">
<a href="https://example.com">Some Other Link</a>
</li>
</ul>
</div>
</body>
</html>
That is 21 lines of HTML/CSS. While maybe it isn't the best solution, I prefer it as it gives me a sense of control. Making one of them a dropdown with the above method would make the file over 30 lines long. In MEML, with my style of typing, it would take 10 lines. 7 lines if we aren't fancy. This is an MEML navigation bar with a dropdown.
(head)
(body
(nav location="top"
(nav-option value="The Best Writing Site for Developers" links="https://dev.to")
(nav-option value="Random Dropdown"
(dropdown value="nav dropdown" type="hover
(drop-option value="a dropdown")))))
The last thing about CSS is just a pet peeve. I want to set the default font without CSS. While yes, a weird pet peeve, still something I want to fix. Here is how it will be done.
(head
(font "arial"))
(body
(p "Not the fancy weird font, but arial, without CSS."))
Now, not everything with web-development is CSS based, some issues are functional.
Tags
I have a dislike for some tags. Often just I don't see the purpose, or I dislike the functionality. One example is the button, I don't use it. I use anchor tags, as they give me complete control. While many will most likely disagree with the idea of not having buttons, I have my reasons. Maybe I can add them later.
Another tag I hate is the "section" tag. It just seems like a div, but with... nothing. I have no current plans to add them, but if requested, I will.
Another thing that angers me is the meta tag, the main issue is how they are done. Let's do a simple OG title meta, and not build a whole website along the way for now.
<meta name="og:title" content="the title">
There are a couple things I want to do. First, rewrite the meta tag itself.
(meta type="og" title="the title")
It's a small fix, but something I would personally prefer. Now, meta tags can get complicated. The main goal of the change is control, and to make the next idea make more sense. Having the option in the title.
(head
(title "website"
add-types="og, twitter")
(body)
This is just an idea, and some meta tags will also be included as proper tags. For example, charset, viewport, and google verification because why not.
The central tag that aggravates me is the link tag. To get an icon or stylesheet connected, you need to use the link tag. While I do not want to remove the link tag, I am sure it has many purposes, I do want to make an icon tag and a stylesheet tag.
(head
(title "hello world"
add-types="og, twitter")
(icon src="/path/to/icon.png")
(style src="/path/to/stylesheet.css"))
This makes sense in my mind and makes things easier. With that, I will share a simple website built with MEML.
(head
(title "Basic Website"
add-types="og, twitter")
(font "arial")
(icon "./someico.png"
add-types="og, twitter")
(style "./.css/main.css")
(viewport 1)
(charset "UTF-8"))
(body
(nav location="top"
(nav-option
(dropdown value="My Social Media" type="hover"
(drop-option value="twitter" links="https://twitter.com/kailikeslinux")
(drop-option value="dev.to" links="https://dev.to/kailyons"))
(h1 "Hello World!")
I was too lazy to translate the whole MEML site to HTML, but you get the idea.
Top comments (3)
It's awesome that you're investigating this as an improvement over HTML! I love the concept, but I'm an old fuddy-duddy and too stuck in my ways to be able unlearn normal HTML to learn this instead. Keep pushing boundaries! Excellent work.
So, congrats on discovering Lisp?
I mean, discovering LISP changed my life