IDE for creating web pages in Trisquel from updatable templates
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.
'Synchronise Text Block' sounds very promising, I'll experiment. You explained it so well, thank you for that too!
Another idea is
https://en.wikipedia.org/wiki/Server_Side_Includes
It helps avoid the need to keep different things in sync across multiple files but instead: Edit it one place and be done with it. It's used on gnu.org.
That was a good idea, jxself. Thank you for the link and for pointing us to the learning!
Reading the info made me realise why the tools we are looking for are not out there any more. Server Side Includes (SSI) seems to take care of things like updating common sections of HTML pages and a lot more, but it does require the use of a server, which is no problem at all if that is what we want, but what if we don't? What resources are there for us oddities?
I've been using this as part of making my own website for jxself.org:
http://pehjota.net/projects/ssic/
You still make the website using those "include" commands and, using a bash script, I have ssic stitch them all together and it becomes a static HTML site. The script also runs the HTML files through tidy which is available in the Trisquel repos to find if I've made any mistakes in the HTML but to also to make the formatted HTML look nice. I suppose one could view the use of this stuff as a minimal static site generator.
More great stuff, jxself, thank you for that too and also for mentioning formating and checking mystakes in the HTML - I've been wondering about that! I would like to use those tools to process HTML, but am not sure I could do it, not yet anyway, specially when the word compiling comes with it. I've never done anything like that and wouldn't know where to start.
So far, I've been using a mix of simple tools. My current favourite setup is Pluma open in one screen and Abrowser on the other, so I write in one and see the results on the other, adjusting things in real time. It also helps that Abrowser makes it easier to read the HTML and CSS, plus inspects and shows some errors ... then there is Bluefish, which is OK, but seems to mess things up sometimes (or maybe it's me). I've also installed Geany and will be trying that soon.
As you see, it is all very basic here. Where things get gentler is on the aesthetic side of the challenges of creating a website. I think HTML and CSS make a great combo of canvas and brushes, and that is exciting!
You're not really "compiling" a website. After installing ssic and tidy, make a directory for your website; I traditionally name the directory after the website. Inside this directory create another directory named src. This contains your HTML (only) with all of the SSI commands. Create another directory called static which contains non-HTML things like CSS, images, or whatever else. Make a BASH script along the lines of this to run ssic and tidy.
I'll place this script under CC0:
https://creativecommons.org/publicdomain/zero/1.0/deed.en
EDIT: Unfortunately, the Trisquel forums don't preserve the indentation to make it look nice. But the idea's still here.
#!/bin/bash
set -euo pipefail
# Ensure html directory is fresh
if [ -d html ]; then
rm -fr html
fi
mkdir html
# Add things from the static directory
cp -r static/ html/
# Loop through each .html file in the src directory
for file in src/*.html; do
# Extract the filename without the directory path
filename=$(basename "$file")
# Run the ssic program with the -o option to save to the html directory
ssic -o "html/$filename" "$file"
done
# Loop through each .html file in the html directory and tidy them
for file in html/*.html; do
tidy -modify -indent "$file"
done
