Articles from 1 to 4
I started writing wwwgen: a website generator that uses redo for its dependency tracking. Unfortunately, I might not have taken the correct approach to the problem. I reuse the webgen concepts, and that might be a bad idea.
Specifically, webgen (and my first version of wwwgen) are bottom-up systems (you take the sources and build everything they can generate). The problem is that redo itself is top-down (you take the target and build it, building sources as they are needed), and I tried to make the two match. It's very difficult, and impossible to do with a clean design.
What I'd like to have is a simple
wwwgen binary that generates a HTML
file from a source file. Let's imagine how it could work:
If the source file is a simple page with no templates, just generate the HTML and this is it
If the source file is a simple page with a template, redo-ifchange the template source and build the HTML combining the two
If the source file is an index, we have a problem because multiple outputs are generated. Redo doesn't support this case and we must find a way to make it work.
So, we have a problem here ...
Now, we have another problem. Specifically, my source file is called
title.page and I want my output file to be
webgen, this is implemented by a configuration in
it to build in
There is a solution to solve both problems at once. the wwwgen command creates an archive (the formats needs to be defined, it could be tar, or different yaml documents in the same file for example). Then, the build process would be:
find src -name "*.src" \ | sed 's/src$/gen/' \ | xargs -d '\n' redo-ifchange find src -name "*.gen" \ | xargs -d '\n' wwwgen unpack
redo-ifchange "$2.src" wwwgen --redo-dependencies -o "$3" generate "$2.src"
wwwgen generate would parse the source file and generate an archive,
that will be unpacked later by
wwwgen unpack. Let's see how it can work:
The source file can choose where it unpacks, relatively to the directory where the source file is
If the source file is an index, it will redo-ifchange the other source files for the index and redo-ifchange the template, generate multiple pages packed together.
If the source file is a tag tree (a special source that doesn't output anything on its own but create index files dynamically), then it parses every child to find a canonical list of tags and the paths they refer to. Then, it creates the index files. Unfortunately, those index files will never be compiled until next build.
How an we improve the design to be able to create source files dynamically.
There are different views to the problem:
pages, index and tags should all generate all the output files they are related to. It means that index files should be able to generate pages, and tags should be able to generate indexes and pages.
pages should generate the output file, index should generate pages and feeds and tags should generate index.
mixed solution (the one described): pages generate output file, index should generate the output files as well and tags generates index.
How can we generate source files on the fly:
have a predefined compilation order: first tags, then index and lastly feeds and pages.
rebuild everything until no more source files are generated. We might build unnecessary things.
I prefer the second solution which is more flexible, but we need a way to avoid building things twice. For example, it's not necessary to build a page if on the next phase the page source is going to be regenerated.
Very simply, the generated page can contain a link to the index source
file that generated it, and when generating the page,
run on the index file.
Next question: what if a tag is deleted. The corresponding index page is
going to stay around until the next clean. The tag page should keep
around a list of index files it generated and delete them when a tag is
no longer detected. And deleting the index should not be done using
because the index will need to delete the pages it generated. The best
solution would be to integrate to redo to detect these files.
The build scripts now are:
oldsrclist= srclist="$(find src -name "*.src")" while [ "$oldsrclist" != "$srclist" ]; do echo "$srclist" \ | sed 's/src$/gen/' \ | xargs -d '\n' redo-ifchange oldsrclist="$srclist" srclist="$(find src -name "*.src")" done find src -name "*.gen" \ | xargs -d '\n' wwwgen unpack
redo-ifchange "$2.src" wwwgen --redo-dependencies -o "$3" generate "$2.src"
I want a new architecture for the web. But what web ?
The Traditional Web
A Web Site is a collection of Web Pages. A Web Page is a document, a static document I might add. The document contains text, images, sound and videos to present some information to the public. This is the traditional version of the web that I respect very much.
There is no need to change this as it works very well. The web was designed to allow a collection of documents to be accessed and does the job very well
The one this that is sensible to do however is not to use any scripting language to render the content of the pages. By definitions, these pages are static, using a scripting language like PHP is not only going to be inefficient, but is going to be a security risk.
This is an entire different thing, and the way we do this is completely wrong. We think that a web application is a collection of dynamic web pages. This should be erased from your mind.
A Web Application is an application of its own right.
Most unfortunately, applications are written in HTML which is not suited for this purpose. The widgets are very few and the framework is not suited to create complex User Interfaces.
The very bad thing to do
You should not do this. Unfortunately, this is how it works for most.
The sensible thing to do
Please do this!!!
An application is an application. It's a bundle and can't be separated into pages. It can be separated into sub-sections if you want, but those will necessarily trigger a page refresh.
The application should be the equal of a desktop application using a native toolkit, except that web technologies are used instead. Contacting the server should be limited to what is necessary only (fetching resources, exchange data, ...). In particular, the templates should be on the client side.
On the server side, you'd have just a classic Web API, and static resources. The Web API should be designed with care and security in mind. It should be easily shared with third parties that want to integrate within your application.
It is as simple as that:
- Server = Web API + Resources
- Client = UI (incl templates)
I heard that SproutCore is a solution to work this way, but it was horrible to use it as well.
Perhaps, we need to get away from frameworks, there are many solutions that can integrate well together and that don't need a framework. Read this article for example: Grab UI by the Handlebar
I have a very simple example to show you what I mean, the comment
look at the sources) that will add the comment features. The page
delivered by the server contain no information about the comments,
they miss the comments.
The script does an AJAX query on a third party server (with PHP and a database). The arguments are the URL of the page and the answer is the JSON formatted list of comments for the page. These comments are then presented on the page. (The refresh link does this again)
The script also creates a form to add a comment. When the form is submitted, an AJAX query is made with the URL of the page and the content of the comment as arguments.
This is how all web applications should work.
Going further: static databases on the server
I already wrote an article on this, but I'll summarize the idea here.
With this new idea for web applications, the application logic is moved from the server to the client. Perhaps not all the way, but for simple applications like the comments above, the server API is nothing much than a fancy database API.
Why not model a database on this model? But it already exists: CouchDB. This is a database which API is a web API. I want to take the principles of this database and mix them with the ideas of a static page generator.
The idea is that read only access when the resource URL is known, a static page should correspond to the URL and a classic web server should answer the query.
Only update and search queries would be filtered by the web server to a FastCGI application that is going to update the static files, or look at them to answer the search.
I find it difficult to find advantages of this compared to CouchDB. There is one thing, your data will always be accessible read only. No obscure database format that require a database server that might not work on new hardware, might not be maintained any more...
With this approach, most web applications could be composed of static assets that are accessing a database with a Web API. The static assets and the database could be on the same server or on a different one. No limit is posed here, except the same origin restriction of web browsers.
Fortunately, a new standard (that I'm using for the comments of this website) let you specify if the same origin policy should apply or not: Cross-Origin Resource Sharing
What about Cookies Then?
They should not exist in their current form.
This was a late addition to the HTTP standard, because it was already implemented. It was never really thought of, and is a breach of the original HTTP model.
What are XSS?
Cross-site scripting (XSS) is a type of computer security vulnerability typically found in Web applications, such as web browsers through breaches of browser security, that enables attackers to inject client-side script into Web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same origin policy. Cross-site scripting carried out on websites accounted for roughly 84% of all security vulnerabilities documented by Symantec as of 2007. Their effect may range from a petty nuisance to a significant security risk, depending on the sensitivity of the data handled by the vulnerable site and the nature of any security mitigation implemented by the site's owner.
This is a wrong way to look at the problem. Inclusion of other items in web pages dates from the very beginning. It is the foundation of the web. What allows to have rich documents, with links between them. The same origin policy is just one of these walls that I talked about, that assumes that all pages on the current domain can be trusted. Is that true?
The real story is that if the design of the web was correct, the script injected by attackers in web pages would be completely harmless. The same origin policy shouldn't exist and bypassing it should be by no mean be a security risk.
We have come to a situation where WebGL can be a security risk because it can determine the colours of an image included in the web page. Just because an image can, from the very beginning of the web, bypass the same origin policy. Some people say that images should respect the same origin policy, but what they don't imagine is that we could just forget all of this mess.
The Real Problem.
The real problem is that when loading foreign content, though AJAX, the use of images or whatever, a page can load a foreign page where you are logged in using cookies. And access your foreign account. For example your bank account.
The problem is that the page containing the XSS script was granted the access to the cookie protecting your bank account.
Why the hell your bank account is just protected by a cookie than any page can have access to???
Unless you have in your address bar the address of your bank, the cookie protecting your bank account should be locked away. In fact, instead of having everything in a page respect the same origin policy, cookies should be the single thing respecting the same origin policy;
This is just a change in the handling of the cookie by the browser. Not a very big change at that. Only cookies for the domain in the address bar should be exploitable. But it would break a number of assumption:
Third party cookies would no longer exist, this would be a big shock for advertisers and tracking programs. A loss for these companies, but a win for personal privacy.
Allow third party cookies nonetheless
We could nonetheless allow third party cookies, but only in the context of a specific page:
- each tab/window of the browser share the same cookie jar for the requests
- for each tab/window, a separate cookie jar would be assigned that will be emptied when a link is followed to a different origin
- the sub-elements of a page that are not of the same origin of the page itself, should have their cookies in the sub cookie jar only
- if there are sub-sub elements, they should be assigned to a sub-sub cookie jar recursively.
Allow third party cookies to access the main cookie jar on demand
This would nonetheless break a number of things. Third party scripts expect to see the same cookies they set a while ago, even if it was not on the same page.
A solution to this problem would be to add an option in the browser UI to specifically allow a third party script in a page to access the global cookie jar. There would be a button saying for example "Some cookies have been blocked". When clicked it would open a menu with:
- Allow access to ad.doubleclick.com
- Allow access to facebook.com
- Allow access to my-bank.com
A sensible person would not allow a blog with an XSS script access his bank website, but would allow facebook if he wants to use a facebook button.
Browser plugins, anyone ?
I'd love a browser plugin for that !
Unfortunately, on Firefox, creating sub cookie jar would be difficult due to the architecture of it. Webkit is better on that.
Cookies aren't necessarily bad, they should just respect the same origin policy they introduced instead of imposing it to all of the other elements of a page. This can already be done now in web browsers, it just needs a consensus. Or at least, an extension with the right UI to bypass the same origin on demand when the scripts needs to.
I want to create a new static webpage generator. There are tons of them, you'll tell me, why do I want to create a new one?
Static Website Generator
Let's see what we have:
- webby: my first love
- nanoc: the second one I used
- webgen: the one I'm using currently (with tons of local modifications)
- jekyll: powering GitHub pages
- and many more most probably
Most of these systems take the assumption that you are a developer and you are comfortable to write code to have your website running. In all of these systems, I was forced to code some Ruby here and there to get it working how I wanted to.
The case of nanoc3 is very special because the main configuration uses a special Ruby DSL to manage the path locations. If you have non technical users, they won't be willing to write code in this file anyway. And for technical users, it might not be powerful enough.
Jekyll is probably the simplest system and can probably be used by non technical users, but it is far too simple and not powerful enough. That's why I didn't used it.
In the end, I modified Webgen a lot to include the following features:
- ability to write ruby code in haml instead on having to rely on the template engine included in webgen
- special .index nodes that will generate a paginated index of articles found dynamically. The index would contain the last articles in reverse order while the pages will contain each N articles in the natural order. This way, an article that end up on page 3 is always going to be on page 3.
- special .tags nodes that will generate .index pages dynamically to create an index or articles for each tag.
If you look around, there are not many static web page generators that permit that. First, I decided I would maintain my own version of webgen with these modifications, but now, I have the idea that the code base is so horrible that I prefer rewrite the same functions from scratch.
Rewriting From Scratch
As I said, I'm not satisfied with the current status of the webgen code. There is a complex system of cache, and a blackboard object that is used to dispatch method call to the correct objects around the system. The problem is that this extra indirection level makes it difficult to know the code path. It would be useful if the hooks in the blackboard would be highly dynamic, but it's mostly static. it serves no purpose whatsoever.
Moreover, I don't like big programs that do everything. And all of these static website generators have a component that is used to determine which pages are out of date, and only update them. This is traditionally what make(1) should do. And recently, I found that redo does the job very well. So, I want it to be an integral part of my new system.
Recently, I wrote a piece of code: WWWSupport. It's a very simple git repository that is supposed to be included as a submodule of the git repository of a website. it contains a daemontools daemon that receives e-mail from a special mailbox and convert them into blog posts on the fly (that's how I'm currently writing this block post).
I want my WWWGen project to integrate the same way into my website.
WWWGen is the name of my website generator. The architecture is very simple:
srcdirectory containing the pages, in the same format as webgen
nodesdirectory containing the files WWWGen is working on to generate output
- An output directory where the result files in
nodesis copied to, and where some static assets are copied as well (using rsync)
- A redo script
all.dothat contains the configuration and invokes the wwwgen script.
The wwwgen script will create the
nodes directory and the redo scripts
necessary to its working in it. Then, it will do three things:
For each source file, the script will create:
- A .node file that contain a relative path to the source file, and represents it.
- As many .outdep files as the source file will generate output files. The .outdep file is not managed by redo (because redo doesn't support multiple targets yet). It references the .node file using a relative path.
Note that during this process, new sources can be generated to allow to create new nodes. This step will be executed until no new sources are generated.
Once this is done, the main script will look for all of the .outdep files and will build the corresponding .out file. The .out file will contain the final processed result of the page
Copy all .out files in the output directory (after removing the .out extension) and all the static files in the static directory.
Note that step 1 and 2 recursively call redo to generate the .node and .out files. This two step design is necessary to account for multiple pages generated from a single source.
In all my projects, I always want to focus on the usability of what I create. I always think that non programmers should be able to do the same that I did, to a certain limit. For example, my personal e-mail server at home is scripted all the way. Reinstalling it should be a matter of:
- installing a debian system with a basic configuration
- clone my git repositories
- Set some basic configuration (hostname, ...)
I agree that even then, not anybody can install at home a mail server, but with a process that simple, it's possible to create user interfaces for it. So even if it's not there, it's a possibility.
I want the same for WWWGen. It leaves a possibility for creating a user interface. Nothing prevents from creating a web application or even a native application, that will create markdown pages with a WYSIWYG editor (à la WordPress). The page files thus created could be checked out in a git repository and pushed to a server. There, a hook will run WWWGen to update the website with the modifications.
This could be seriously a very good alternative to WordPress, and I'd preefer working with such a system than WordPress.
What already exists
I am not very good at creating desktop applications. So I thought I would reuse the existing ones : my mailer. I's like a Content Management System where everything must be configured by hand, and only articles can be submitted using an e-mail.
This post is being sent by e-mail to my personal web server. Currently,
I'm still using plain text with a markdown syntax, but we could reuse
the HTML markup in a mail. This e-mail is then processed by a special
This line was automatically generated by an install.do script. The push.sh script will read the mail using a ruby script and will create a file in my website git repository with the content of the mail. Then webgen is run and the content of the repository is pushed to origin.
As a consequence, the new article appears on the website. This is a very simple form of user interface, but it permits anybody to write blog posts.
What features I would like to see
- Better parsing of HTML e-mail
- Using wwwgen instead of webgen
- Support for image galleries using git-annex in wwwgen
- Support for taking the attached images in an e-mail to create a gallery on my website?
What features a customer would want
A web application that can :
- modify the website configuration in the
- modify any source files, using a WYSIWYG editor when applicable
- add static assets (possibly using git-annex)
- run the website compilation and preview it
- push to a server to update the production website
This is entirely possible.
Websites should be static. Any dynamic thingy (scripting using php, ruby, python and the like) should be limited to a set of features that absolutely cannot be implemented otherwise. Most GET requests should lead to a static resolution (there can be exceptions such as GET queries of search engines for instance).
Respecting this principle is quite simple, just generate the static pages when they are updated, and no not worry about them afterwards. This is what I try to use for my website, and it works quite well.
Advantages of this technique :
- your data will always be readable in the future, even if you may not write it any more
- improved security: normal operations only involve static files. You get to spend more time with update actions (POST and PUT) and design them better.
Now, I had the idea to extend this to databases. Do you know about CouchDB ? It's a database which has a web interface only. I very like its design but again, I'd like it to use the same principle as above.
PHP application in another server (a free hosting service). This simple
application is able to store and get JSON data using REST requests. The
XmlHttpRequest to contact the server and give
it the canonical URL (
<link rel=canonical>). The server will answer a
JSON object with the comments.
Storing a comments is done the same way, using a
POST request instead
To a Database Server
This is very simple yet powerful. Why not extend this design to:
- allow any kind of data, not just comments
- allow simple
GETrequests to bypass any script and just fetch the raw data
We can imagine the data store to be publicly accessible using URL that
end up with the
.json suffix. There would be a similar URL with
.json.meta to access the metadata about an object (its current
version, right access, ...). We can imagine the web applications of the
future being completely implemented on the client side. The server side
would be just a shared database.
We would obviously need a security layer to prevent anyone to read anything if they should not be allowed. We can imagine three levels of permissions:
- read and write by everyone
- read by everyone, write only by authorized user
- read and write only by authorized user
We could imagine many different authentication mechanisms. For most data, the mechanism could be of a shared secret. The metadata of a json file would contain :
"auth": "shared-secret", "secret": "path/to/another/file"
To get access to the file, the client would have to provide the exact
content of the file
"path/to/another/file", which would obviously be a
protected file, readable only by authorized access. It could be a
login/password or anything else.
Update operations would be :
PUT: to update the entire content of the file
POST: append to the existing data (the data should be a JSON array)
The data file will have an associated version which will be in the form of "sha1:<sha1 of the file>". To successfully update a data file, the existing version of the file must be given. If it is not the same, the client should retry. This is the same concept as in CouchDB.