IDE for creating web pages in Trisquel from updatable templates
- Inicie sesión ou rexí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 generators 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.
Well, when you have all of the World Wide Web at your disposal, you still happen to need one thing: the name of the feature that you are searching for. Apparently, it is "Templates Update Sync", or so they call it at Wikipedia. Fortunately, there is a nice Wikipedia entry comparing HTML editors and showing which editors have it. I am going to check them out.
Comparison of HTML editors - Wikipedia
https://en.wikipedia.org/wiki/Comparison_of_HTML_editors
So, Bluefish has "Templates Update Sync" in a way. Found this page...:
Bluefish-The Feature Rich Editor - open source for you - OSFY
https://www.opensourceforu.com/2013/12/bluefish-feature-rich-editor/
...where it says: "One interesting feature in word processing is the Synchronise Text Block feature. When multiple files are open, one can ensure a block of code is the same across the files."
I have tried this feature before, and it was an unsuccessful try for lack of information. Bluefish has no manual, and searching for 'Synchronise Text Block' provides no results at all at the Bluefish website and very few results elsewhere. But now, knowing what to expect, I tried again. This is what I found:
- You need to have all of your files open. How many can you open? Well, Bluefish is said to "easily opens 500+ documents (tested >10000 documents simultaneously)".
- You need to have Blocks marked in all of your files with a begin and end mark, for instance:
- <!-- Block 1 start -->
- <!-- Block 1 end -->
- You insert, modify or delete the content between the start and end marks (HTML, CSS, JavaScript, whatever).
- You select the code from the start to the end of the block.
- You selecte Tools -> Synchronise Text Block. A dialog box shows you the selected code, pre-selects the first and last tag, asks you to pick the delimiters for the start and end (if you selected the text correctly, the pre-selected tags are right and you only need to click on 'Next'), and then, hop!, all files have their block updated.
It is the closest thing I found to the 'Update child pages created from template' feature from Dreamweaver. It provides the same result, with only a bit more of work: you need to have all of the files open in the BlueFish editor, and then just a couple more clicks.