IDE for creating web pages in Trisquel from updatable templates
- Inicie sesión o regístrese para enviar comentarios
Hi everybody. Some months ago I researched the IDEs available for Trisquel. The result was a list of ten IDEs, five from Trisquel's repository, five from other sources. This is the documentation page started by me with the results:
Integrated Development Environments (IDEs) for Trisquel 11 (Aramo) | Trisquel GNU/Linux - Run free!
https://trisquel.info/en/wiki/integrated-development-environments-ides-trisquel-11-aramo
Currently I am researching which IDEs from these ten are specifically useful for creating webpages (I am thinking about HTML, CSS and Javascript), so I discarded five IDEs and was left with another five: Bluefish, Eclipse, Geany, NetBeans and VSCodium. All five share many features, for instance:
- Tag autoclose. Writing <body> causes </body> to appear automatically.
- Code blocks. Pairs of elements that define a block, such as <td> and </td>, are automatically recognized, and a symbol appears at the beginning of the line of the first element (typically a minus sign), so by clicking on it the block lines get ‘folded’ into a single line, leaving free space for the code you are really interested in and improving code readability.
- Toggle line wrap. Long lines can be displayed as a single long line (you would need the horizontal slider should you want to read it) or as multiple lines, and changing between the two views is quick.
- Encoding choice. The character encoding used by your IDE and applied to your projects and files can be changed.
Besides these shared features, I researched another seven features that are interesting to me:
- Autocomplete tags. When you write <tab autocomplete offers you the choice to type <table>. Only Bluefish, Eclipse and VSCodium offer this feature,
- Auto-indent. Pasting code automatically indents it correctly. Only VSCodium offers this feature.
- Encoding choice for each file. The character encoding can be defined separately for each file. All except NetBeans offer this feature.
- Highlighted matching tags. Clicking on any tag part of a pair causes both to be automatically highlighted so you can find quickly the other one. All except Geany offer this feature.
- Highlighted mistyped tags. All except VSCodium offer this feature.
- Rectangular selection. Only Geany and NetBeans offer this feature.
- Comment/Uncomment code with a item of the menu or a keyboard shortcut. All except Geany offer this feature.
So, from these 7 features, Bluefish, Eclipse and VSCodium offer 5; NetBeans, 4; and Geany, 3.
But one crucial feature is missing, the feature which is the most important for me: Updatable templates.
Say that you have to create a website with 100 pages, all with a header and footer, and 50 of them with an aside containing an index of links. If your website is closed, in the sense that it will not get updates, there is no problem. But if your website is open, meaning changes are coming up, new pages are to be added, and maybe some changes in the header and footer too, you are in for a lot of work.
Good practices call for writing elements in one single place, so whenever you need to modify them you have to make a single change. Now, you have some choices to achieve this target:
- Use HTML iframes. Put that header, footer and index in separate HTML files and call them from the main html file as HTML iframes.
- Use JavaScript. Put that header, footer and index in separate HTML files and fetch them from the main html file using JavaScript. In the HTML of the web page you have one <header>, one <footer> and one <aside>, all of them empty, then have JavaScript insert the content of the three files in the innerHTML of the three tags.
- Use an IDE that uses templates, and that automatically updates the ‘children’ HTML files from each template every time that the template changes.
The point is that I am working in a static website, which means no scripts and no cookies, the kind of website that would show up in Abrowser without needing to tell NoScript to allow anything. I distrust iframes and scripts, so I am trying to create the kind of website I could trust. I am all for choice c. I know that this choice exists, for I learnt to use Adobe Dreamweaver twenty years ago, and it already had this feature by then. You created templates with editable regions, and then you could create individual children pages where you could only edit the editable regions – then, whenever you changed the template for whatever the reason, you could request for all of the children pages to be automatically updated. But… I have spent many hours searching for this feature in Libre Software, and found no IDE with it. This makes me exclaim: Oh come on! Twenty years later, still no Libre Software IDE features this? It’s got to exist one somewhere.
Now this is the point where I ask for your kind help and ask you, Do you know of an IDE for web pages that has updatable templates?
Kind regards,
Ignacio Agulló.
I'd reframe this: it doesn't need to be an "IDE." A decent text editor, say Emacs, plus a static site generator.
I am a translator!
> a static site generator
Which one would be easiest to use with emacs?
There are static site generator that accept the syntax of Emacs' Org mode. Hugo for instance: https://gohugo.io/content-management/front-matter/#emacs-org-mode
However, you may prefer another syntax, typically Markdown that most static site generators use. http://jblevins.org/projects/markdown-mode/ provides a mode to more pleasingly use Emacs to write Markdown.
Thank you for your research and your questions, Ignacio.Agullo, your post feels like a gift!
I have the exact same problem as you described, almost to the letter. I also prefer static sites and, like you, have used DW in the past. I agree with you, it was great to be able to update all pages in one go - navs, footers, etc, all sorted in one simple step. I miss that.
I have been looking for a similar solution, but it doesn't seem to exist. I hope that I am wrong and that someone in the forum can through a bit of light on the subject, specially if there are solutions for users whose coding skills are 'modest' (basic html, css + js-read-only), just like me.