Do you ever think that handwrote HTML code is expensive, long, redundant and outdated?
I think about it every day, when I create another GUI compon...
For further actions, you may consider blocking this person and/or reporting abuse
Pavel, I have l10n 🤏 some of your article. 🤷♂️ Where cannot understand. Please 👀 review and use if you want. Anyone want to carry on.
PS. What language do you natively speak Pavel?
Do you ever think that handwrote HTML code is expensive, long, redundant and outdated?
I think about it every day, when I create another GUI component or system element. This article is my attempt to overview the current state of the industry, its problems and share the results of my research.
Before we start
Wanna try it right now? Here is the proof of concept.
It shows the concept, it's missing implimentation however I think the concept is proven. Details below.
This is my first English publication, please be lenient. Any fix suggestions are welcome.
Glossary
I use "HTML code" and what I mean by this is:
As a developer's working with HTML, process.
Intro
About 8 years ago, I expressed the idea that manual HTML coding is outdated and automation will replace it. From that moment, I have been intently searching for solutions to resolve this issue. We already have such tools; Workflow, Bootstrap Studio, inVision, Framer, Supernova, React Studio and many other direct or indirect solutions.
And we also have amazing research on this topic using 🤷♂️ (neural networks?), via pix2code or sketch2code.
Unfortunately, I can't find a tool that can be fully integrated into my development process.
So what I do I want? I want to get a layout from the layout designer, break it into components, correct the HTML code, where necessary, add logic, get a library of components and return it all to the designer for future interactions. I understand that it surpasses even the most advanced capabilities of the industry, but this is my dream…
Like Confucius said, the long journey begins with the first step, so I decided to figure out where to start. This is what this article will be about.
Adam, this is exactly what I need. Thank you very much!
I made changes based on your suggestions. My native language is Russian. As you can see, I have some problems translating my thoughts, but I hope this is not an obstacle to communication.
Your welcome. 👍
I have the same problem with my open source library, I'm looking for translators.
Sebastian, thank you for good question. It's very interesting topic.
Maybe this is not clear from the post, but i compare web stack with native, desktop and gamedev where we have some design tools. Or maybe do you remember Adobe Flash? :).
I will definitely look at this question more closely to formulate closer and better example from the web industry.
I think I understand what you mean. Where in most other application development suites, we have some kind of wysiwyg editor, that is used fairly directly, and rarely needs source code "tweaking."
Compare with the wysiwyg editors for html. While I lack experience with current potential solutions, my prior experience is that they are... pedantic, and can be bloatful.
It would at least be nice to have an editor that could understand layout vs component and produce sematic html. Something with the goal of producing html code that the designers don't have to touch, and the coding team doesn't have to cringe over
Agree with you. I sow many interesting solutions like plyoro.com where designer don't have to touch the code. But i did't see a solution where coding team doesn't have to cringe over.
That's why i defined "important quality indicators for developers".I am not saying that the list is complete and absolute right but as start point this is something to work with to produce cringless code.
Sebastian thank you for your attention to the post and the problem!
Definitely, you are right. The main problem is "it happened so historically". I also thought why it happened and came to similar conclusions. Moreover it i'm convinced if tomorrow we will get a finished solution many developers will not use it and that's fine.
But i don't see any barriers to try to change it at least for myself. Maybe that will not cover all possible ways but that isn't my goal for now.
In any case, I hope to see more of your thoughts, this is interesting and suggestive.
Excellent article. this is indeed the elephant in the room in Web development. I come from such a world like Delphi, where you have the nice WYSIWYG designer and built forms and such and integrate with code. Times did change and all that became obsolete; it all became modular and open, and it's great, but also very time consuming. You mention one tool i love, Bootstrap Studio, I bought it and use it, but yeah the problem is when you GET BACK to make changes. For my PHP/JS dynamic sites you create a "template" and then you can't get back. My partner in development is a designer, he'll use Mobirise or similar, and once he sends me the template we can only fix it by hand, since i've embedded the template/dynamic elements into it.
Charly, a very accurate metaphor!
Right, almost no one sees the elephant in the room.
As I recall, Bootstrap Studio is one of the first solutions of the "new wave" of HTML WYSIWYG-editor.
I didn’t like the way they solve the drag&drop problem. Sometimes it’s very annoying :). I think industry can do it better.
I think it can definitely do better! I learned quite a few things from their produced code though (which is surprisingly clean in general). The problem in general is standardization; the editor builds its premise by being tied to Bootstrap (which I love but sometimes you might change libraries). The general open nature of HTML/CSS/JS coding (and even worse when you include PHP) makes it really complicated to build a drag & drop solution to cover all/most cases. But I think it can be done, specially if the big ones pay attention (Microsoft!)
I have to say that having read your article, I think I place a much higher value on the quality of the markup than I think can be achieved by automatically breaking down a design into HTML blocks. HTML is intended to be machine-readable. Prior to applying styles, the content flow should resemble a text document, with all text and images in the appropriate flow. Are we saying that we should automate document creation in the same way to save people from having to determine themselves when there should be a new paragraph or a header?
I appreciate the experience of creating HTML could be streamlined. Autocompletion and WYSIWYG editors might help in this but so much of web page's meaning comes from the markup that for many use cases outright automation would be detrimental to our understanding of the page.
The case for web apps is different, but similar. If you're creating an interface with inputs, buttons etc. This information could be derived from a design. Key intentions might be lost in the act of automatically interpreting the design into HTML however for example tab flow (where the row and column distinction wasn't made clear by the designer). Responsive layouts may become awkward if the content is processed in a way that changed the order at different breakpoints, leading to duplicate or unoptimised markup.
I think you may be on to something for some use cases, but please don't overlook the true reason HTML exists, and that's to give us a machine and human readable language that gives the correct meaning and emphasis to content.
Riley, thank for your point of view. As you can see i have a different one and this is normal. And i'm not the only one :). In my opinion we are now entering in new era of HTML - WYSIWYG 2.0
The small list of teams that work on this issue:
Yeah this post seems to me to completely misunderstand what the point of html is.
Hi pavel, great post,
I agree with the point everyone writes markup differently.
Automation of high-level HTML code does not seem an optimal solution. Why not create a designing tool that renders html.
Also, Development of such kind of technology where designing tool itself creates the code ( not technically ) has been around for a while now, technologies such wordpress, Drupal support many page builder (elementor, wp backery etc) which are layouting tools used to create webpages, why not create something like that?
A designing tool which will automate a standardized HTML code, it has to be created from scratch and will require lot of research on how layouting tools are created ( I would love to be a part) . this way more people from developer and designer community can use one tool for design and development purpose.
Hope this helps.
Hi Wahid,
Any helps are welcome! If you have ideas or thoughts or free time for research, please, contact with me in linkedin.
Definitely, please, can you share me your linkedin profile I tried finding but couldn't.
I find it interesting but I'm also thinking that you find issues where they never were.
HTML is a simple semantic static markup language to define structures and components. After trying the way you define interfaces on different platforms like windows, android iOS and so... I would prefer to keep with HTML+CSS to be honest.
From the productivity pov html has nothing to do but css does a lot. You could fight for getting a result or you could make it at first try, depending on your experience and workaround.
HTML is very expensive if you use it for layout, or if you use a CSS 'methodology' like BEM that requires too much from your HTML. (BEM is a technique, not a methodology, especially because BEM is actually a way to avoid CSS, not use it).
Try not doing things like that, then you might find HTML not very expensive at all.
Good Blog post dude!
At least you're developing on it.
Biggest problem is that people have different way of writing HTML, some use semantics, some don't.
Standardized HTML is necessary before we start developing a good automated solution for it.
Absolutely agree with You. Without any standards it's very hard to automate.
I see two different ways to solve it problem:
The first way is concentrate on one solution and try to promote it as the common case.
The second one is implement a simple tool for that. Where every one can define their standards.
I hope to find time to research this issue.
Nice article bro,
In my company we have developed a (near) zero code platform using angular, we followed the element based approach where each div/ span/ input etc are elements with certain properties
It is very helpful for developing web applications but we didn't try it for websites (landing pages/ product promotion pages)
Animations are also currently not possible for us
Based on my experience in developing this I'm thinking that it is easier build standards for web applications but not for websites
Web applications: Control Panels etc.,
Websites: Landing pages, Promotion pages w/ o animations etc.,
Interesting, can you share a link? Or it's not a public solution?
About websites vs web applications. It's strange, on my opinion website is more easy to automate.
Yeah it's not a public solution
Interesting take on the html/css tech.
I think the future is to continue to use code for programming like javascript and back end, but the html/css part should be created with nocode tools.
Take for example Desech Studio. You do your design in figma, sketch, adobexd, then you import it into Desech Studio, and then you stay in there to do your html/css. And then you integrate with react, angular, vue and while you write your js code with your code editor, the html/css part is always done with Desech Studio, in a visual way.
I was thinking it is complex too. To much time in trying to get elements exactly where you want them. I was working on something. Kind of stopped. But it allows you to use winforms designer. Then it links to a project bridge that converts csharp to JS.
Great! Actually I'm working on this subject, to create web site without coding, or without too much coding. Are you interested in turning your theory into code:)?
Thx sir! Yes, I'm currently working on the concept of 2-way binding and after that I plan to implement the model it in code.
Thank a lot!
very informative article
Another awesome article from Dev.to for nobody's problem in real life.
umutakyol, thank you for your comment. It's great that anyone can share their point of view, but I have my own, and it is different.
It will be nice to see your argue opinion on the problem.
Great article thanks for sharing it.