Web interfaces for source control

I came across two articles about web-based interfaces for source control. The first is a critique of GitHub’s UI. The second is an explanation of some of the design choices for Sourcehut, a new 100% free and open source software forge.

If you’re interested in interfaces, or software engineering tools, I highly recommend reading both. They are short, will only take a few minutes of your time, and maybe make you think about functionality you take for granted, or issues you’ve learned to ignore and live with.

Personally, I like GitHub’s general prettiness, but I agree that there’s a lot of unnecessary UI elements, and not enough of (what I would consider) key features for effectively browsing source. The above-linked article mentions the difficulty of switching between individual files, history and branches, while links to Enterprise pricing, or starring repos are on every page. Part of that can be chalked up to GitHub’s position in between a software forge and a social network (because  we’re still in the phase where we think everything needs to be a social network).

To be fair, Sourcehut is a bit too spartan for my tastes. If nothing else, I like good use of whitespace and nice fonts. (Aside: consider using Fira Code or Triplicate for displaying source code.) And I can’t tell how to easily move between code and history views on Sourcehut either. But at least its motivations are more clear, the appearance issues can probably be solved using user style sheets, and if you’re really peeved about its choices, you can fork it (though it’s almost certainly not worth the effort).

I haven’t really used similar tools (except for a pretty barebones code diff and review tool at a company I worked at briefly), so I wonder if there are other examples that can provide interesting lessons.

Advertisements

Bluebot: a simple HTML template

Taking a page out of Don Stewart’s book I’m planning to release a project to the Internet every week or two. Most, if not all, of them will be open source and hosted on Github. I’ll be posting blurbs about them on this blog filed under a new category – Projects. Feel free to follow along or fork away.

Over the weekend I took a few hours to set up a simple webpage on the Cornell CS department servers. While doing that I realized that I didn’t have a template in store for the occasions where I needed to throw together a page without fiddling for hours. I cobbled together a simple design for my page based on my personal website.

The result is Bluebot: a simple template designed for creating HTML5 webpages. It provides a set of CSS styles and web fonts along with some example HTML for writing clean, decent-looking webpages. It’s designed to be used for standalone pages, i.e. single webpages that are complete in and of themselves. That’s not to say it couldn’t be used or adapted for full websites.

Though the template is mostly black and white, there is a little bit of blue used for the borders and blockquotes, hence the blue. It also makes use of the Droid family of fonts provided via Google Web Fonts, hence the bot.

You can see what Bluebot looks like on the Bluebot project page. You can clone the Git repo or download a tarball from the Github page. I plan on continuing to add styling for the remaining HTML5 elements gradually. Feel free to fork, edit and send me a pull request.

Let’s kill Click Here

Click here to go to my last post.

Let’s stop doing that. As much as I love hyperlinks and the Web, I think it’s a bit unnecessary (and poor form) to have explicit link text saying something like “click here”. If you’re not really interested in the links these phrases just break the flow of your reading.

I’m not sure how this convention started, but I can imagine it being useful in the early days of the web. Before the idea of linking became ubiquitous it was a good idea to explicitly call out a link, especially if it was important. But I think we’re at the point now where most users can tell from the styling if a certain piece of text is a link. Think of how the movie Inception didn’t go to lengths to explain how people to get into others’ dreams – the Matrix movies have made the concept of “jacking in” pretty ubiquitous. The details aren’t very relevant to the story, the basic concept is well-known and movie makers can focus on more important things.

By and large the web conventions of the last two decades have established that underlined text in a different color is a link. This isn’t universally true of course. Thanks to CSS I can make my links look however I want, I can even make them look like plain text. But why would I want to? If I’m trying to attract attention to something, I want to do it clearly without being obnoxious. Using different colors and styles gets the point across perfectly well: this text is different and merits further attention, you might want to click on it.

Let’s look at natural speech. If we want to say something important we don’t preface it with “I’m going to say something important now”. We don’t end with “I’m done saying important things now”. Instead we speaker slower, louder, with greater emphasis in order to show what we’re saying is important. We don’t talk in a monotone all the time. We vary our tone, speed and volume to convey the different meanings of our speech. Web design (including designing links) should be similar: let’s put in the effort to make our links stand out without having to spell them out.

Aside: Along those lines, in daily speech if you’re saying “My point is” or “What I’m trying to say is” a lot, you should slow down and think carefully about what you want to say before you say it. I think public speaking and rhetoric should be a mandatory part of education for similar reasons, but that’s a whole other blog post.

I’ve been putting more links in my posts recently (especially since I ditched the WordPress web editor in favor of the excellent org2blog Emacs mode). My posts are often the result of stuff I’ve read on the Web fermenting in my head along with other ideas I’ve had. I want to link to relevant readings and I try to do that inline as much as possible. In an ideal world, we would have intelligent, automatically generated links as well as manual ones. For example, whenever I mentioned a person there would be a link created either to their personal website or their Wikipedia page. Lacking that, inline links is the next best thing I can think of. In doing so I’ve been trying to avoid making said links explicit. So far I’ve been pretty successful, it’s not that hard once you get used to it.

As with all communication there’s a lot to be said for brevity, precision and flow. I want my posts to be readable as pieces of writing even if someone is not interested in the links. By keeping links inline and using design choices to making them visible I think we can create online articles that are easy to read as well as being well linked to relevant resources – just the way it was meant to be.

Is WordPress professional enough?

My college has recently started rolling out WordPress MU to students in a small scale experiments. From what I hear, it seems like IT expects WordPress to gradually replace the existing static web pages that most college groups now have (most of which are never updated I might add). I think it’s an interesting idea and I’m all for it. I hope this will make it much easier for college groups and students to maintain a stable web presence.

But there is a particular little question that I’m currently trying to answer. The foreign languages center has a program for students to make ePortfolios: basically small websites where students can show off all the language experience they’ve gathered over their years here. It’s a good idea with a decent amount of support from the faculty, but the uptake has been rather slow. Till now we’ve been using a standard Dreamweaver template where students just fill in the blanks with their own text, images and video. However this approach doesn’t seem to have gelled well with the students. There are a number of different reasons. Despite how easy Dreamweaver makes a lot of things, there is still a considerable learning curve. People who aren’t naturally inclined to such things need a reason to learn and use them and I don’t think making an ePortfolio is a strong enough motivation. Also students actually need to have Dreamweaver in order to do something, which means they need to go use a library computer. I’ve made some templates for the portfolio but due to the slow update, we haven’t really been able to get students past the basic one. I’ll eventually put the templates up for download once I clean them up a bit.

At this point in our story enters a brash young outsider: WordPress. In a static scenario like the college ePortfolio, WordPress is a total game-changer. It makes things a lot easier for people who are not used to making their own sites. It’s a great tool for anyone who wants to quickly put their information out on the web. I run this site on WordPress with a custom template and widgets. However, if you want to set up a professional web site which will mostly stand as evidence of you work and not a rapidly changing blog, I’m not sure if WordPress is the way to go.

My college is rolling out the Multi-User version of WordPress to students, which makes perfect sense for a college setup. But for the end user, MU does have some serious constraints. Most importantly you can’t install your own plugins or themes and so if you want something that the native installation doesn’t provide, it may not be very easy to get it. This in turn leads to the problem of sameness. Because you have only a small number of themes and other options to choose from, your site is bound to look very similar to someone else’s. I personally think this is a big problem if you seriously want your site to be a reflection of yourself on the web. This was the main reason I decided to take the plunge and move to paid hosting.

For most students this doesn’t matter. Their blog is mostly something personal and so it doesn’t really matter much if it stands out visually. An ePortfolio is different however. By definition, it’s meant to be be professional and needs to stand out. It’s meant to be something that you can send to potential employers and will reflect favorably on you as a professional. I think is very hard to do with a stock WordPress MU blog. Even if you stick to a clear format with well thought-out pages (which is how we’re trying to proceed), you are still completely at the mercy of the original design which might not be anywhere near what you want. What’s worse is that you might start trying to bend your content to fit the design. This might work out for good designs, but if you do it too much you’ll completely loose your own style. Loosing your personal style when putting together something that you want a lot of people to see is self-defeating.

The current Dreamweaver is very reminiscent of old-school web design with lots of tables and fixed-width elements, both of which are falling out of favor with current generation of web design. WordPress has some very good modern themes, and anyone moving to WordPress needs to utilize this instead of trying to pull their old designs along with them. The definition of what is professionally acceptable changes every so often and at this point in time, fluidity and flexibility are definitely the way to go.

For myself, a considerable amount of effort went into selecting this theme that I’m using. From the start I wanted something clean and sharp which would encourage readers to look at the content and not get distracted. Hence the choice of a mostly monochrome template which places emphasis on the categories and the main post body, while the sidebar makes search and RSS prominent.

I’m still uncertain as to whether or not using WordPress for a professional ePortfolio is a good idea. If it was a standard WordPress install where students could change the look and feel of their Portfolio to suit their style, I’d be all for it. But with MU, I’m not quite so sure. I would really appreciate feedback from my users on this matter and any experiences they could share would be appreciated. I’m going to keep thinking about this matter and I think I’ll have a part to play in whatever direction we go. I think it is very important for everyone to have a strong web presence, students especially. Tools like WordPress make that much easier to accomplish, but sometimes you just have to take a step back to make things the way you want them.

It’s time for web 1.0 to die

Yes, this is going to be a controversial topic to write on and yes, I have a history of terribly messing up controversial topics. But I’m going to make an effort to keep my thoughts clear and justifiable. Without sounding too academic, let me first present my thesis:

The original internet and World Wide Web was one of the greatest technological innovations of human history. It has an interesting history fundamentally linked to many other developments in the past few decades. Any self-respecting computer geek should take a few hours and read about the start and growth of the net. However, in the 21st century, the old web is no longer enough. It is time for us to accept that the old days of plain HTML and static links are just that: old days. I’m going to show that important developments have made it necessary for us to look at the web in a new light and we must actively embrace these changes so that we can have a hope of shaping them into something as monumental as the original web.

Clarification: I’ve received my comments that made me realize that I should clarify what I mean by web 1.0. For the rest of this post I’ll take it to mean the web in terms of mostly human-generated, static pages with mostly static content. By contrast web 2.0 can be defined to be mostly auto-generated, constantly changing content where the main human role is to create the content, not manage its organization or delivery.

Trip down memory lane

In many ways the start of the internet can be traced back to Douglas Engelbart’s famous Mother of All Demos in 1968. This demo showed of the revolutionary NLS (oNLine System) which was years ahead of its time and presented important concepts such as voice and video conferencing, complex document formats and hyperlinks.

Fast forward a few decades and the internet was slightly more mainstream by the early 1990’s. Though the internet had implemented Engelbart’s vision to some extent, it was actually quite primitive by the standards of the demo. Hyperlinks were simple one-way roads instead of the ubiquitous and powerful cross-linking system that was part of the demo. Rich media communication was still years away. However, the key parts were in place. The early web was a rather simple place to live in. Mostly text, followed later by simple graphics. Pages were static and more often than not crafted by hand. For much of the 1990s the web bore the signs of the academic and somewhat austere and information dense culture that had spawned it.

That web is not the web of today. With low bandwidth, information density needs to be maximized, presentation is often an afterthought. While there are a small number of producers and a large number of viewers, it’s fairly simple to do things by hand. The drastic change of the internet in the past few years can be attributed to two main causes:

  1. The growth of scripting languages and applications built on them have allowed a massive explosion in the number of content producers. It’s possible to build a fairly high quality website without writing a single line of code.
  2. Bandwidth, storage and processing prices have fallen, opening the door for rich media applications, which can be distributed across the Internet.

Dynamism’s Day

The game of web development has changed at a fundamental level. You can no longer ship a website to a customer and expect it to stay the same way for months at a time. Dynamic content is the order of the day. Blogs are no longer creations of random individuals with too much time on their hands. Instead, if you want to have a viable web presence, you’d better have a blog and you’d better update it regularly. This goes for individuals as well as corporations (especially those whose business is the web). This in turns means that hand-rolling a website is impractical at best and downright stupid at worst. A recent article proclaimed that Dreamweaver is Dying, and I have to grudgingly agree. Over the past two years, I tried maintaining an old style website by hand with mostly static content, but it’s simply not worth it. I would rather spend 5 minutes working on a new post than fiddling around with HTML and CSS to get things to look right. And don’t even get me started with keeping links and navbars up to date. Dreamweaver and similar tools help. A lot. But they’re not enough.

Web 2.0 is showing us an important fact that we must not ignore: content creators do not need to be programmers as well. What that means for you and me is that if you want to create a content-focused site (and that’s what most of us want really) then an automated content management system like WordPress or Drupal combined with good themes and widgets should be our first pick. Only if the need for customization becomes overbearing (ie. you need to forge a brand image with a custom logo and theme) should you consider diving into the code.

For web developers, this means that you should pick a content platform or two and learn it back to front and inside out. Try porting some previous designs and suggest that customers take a more active role in creating their web presence. The web’s hallmark is that it is by definition a bidirectional medium. If anyone wants to be successful on the web, that bidirectionalim must be respected and utilized.

To generate the best content, you want to have good tools. Unfortunately HTML and CSS simply aren’t good tools for writers, journalists or artists. They want, no, they need WYSIWYG editors where they can see what their content will look like without worrying about the layers beneath. Cheap bandwidth means you can now use heavier technologies like Flash to build better looking tools. Cheap storage and processing power means that you can generate the webpages on the fly while keeping the actual content neatly stored in a backend database. HTML and CSS aren’t the core technologies of the web anymore; they’re a thin veneer that hides the raw power underneath and gives everyone a simpler, focused view of what they need to see.

Let’s face it, HTML is ugly. It’s angle-bracket hell and you know it!! No human should have to write that sort of thing by hand. CSS is better, but not by much. A lot of people complain that autogenerators create really bad, really redundant HTML and CSS. That’s true and I thought that was a bad thing and I hand crafted my code until not too long ago. But the fact is: no one cares!! No one is ever going to really read your generated code except browsers and they’re mostly pretty tolerant of what they’re fed as long as it’s not downright wrong. The massive boost in productiveness far outweighs any aesthetic qualms you may have. Sure you still need to do some amount of tweaking to get things just right, but it’s very easy to get good enough without doing any tweaking at all.

On another note, the database + dynamic code creates far better presentation/data separation than HTML/CSS ever could. You had to be really disciplined to not mix presentation consideration into your supposedly semantically structured HTML and you never got it quite right. Admit it, you know you bent the rules. But with web 2.0, such separation is natural. Theming is at the heart of almost every major CMS out there and the web is a better place thanks to it.

But wait, there’s more…

CMS’s are just the tip of the iceberg. Web 2.0 is becoming an application platform, much closer to Engelbart’s vision than to Web 1.0’s “information highway”. It’s not just content creation and delivery, it’s active interaction that is getting the spotlight. And HTML/CSS utterly fails at this. Text and graphics are ok, sound and video are good, but active interaction is even better. Web apps may not be as feature-rich as their desktop equivalents, but they’re not far behind either. I use Google Docs almost as much as I use Word and web-based IDEs are starting to become a reality. Take a look at the SproutCore and Cappuccino web frameworks for some examples of what’s on the horizon.

The limitations of Web 1.0 have spawned the developments of multiple ways around them. The web is a now a mix of different document formats and PDFs are gradually becoming the document interchange format of choice for many organizations and companies. Streaming media has proved to be a much more popular alternative than simply offering up files for download. The dynamic web is a much faster and more interesting place than 1.0 could ever be.

We’re only starting to explore the web as a core component of personal computing. Cloud computing is still a very nascent technology, but one that looks like will it progress by leaps and bounds in the years to come. Amazon S3 lets you store practically unlimited amounts of data for really cheap making it possible for any technologically savvy individual or group to roll their own webapp without investing in massive computing resources first. Why buy a external hard drive when you can pay a small monthly free for crash-proof, access-anywhere storage? (If you trust them with your data that is, but that’s for another post…

Web 1.0 is simple and for the past two decades it has served the needs of human society admirably. But we need more now. There is a massive amount of computing power in the world today, but we can’t use it properly if we stick to old fashioned HTML. The internet is no longer a web of statically linked pages. It’s a complex network of rapidly changing web applications interfacing with each other on a number of levels. It’s more like a growing, vibrant ecosystem than it is a spider-web. Web 2.0 is alive.

In the near future…

We must learn to start treating the web like a vast collection of interacting programs and not just as a simple file hierarchy. The author of the Dreamweaver is dying article says (quite rightly):

In the relatively near future every website will be a dynamically-generated web application and all of today’s sites built on multiple static pages will be ripped out and replaced.

I think that is pretty close to the truth. Sure there will be still be some holdovers, but any serious website will have no choice but to become a distributed webapp: part of it running on a server (or server farm) and part of it running as a scripted application in your browser. Sure you’ll still need a grasp of HTML/CSS and their descendants (for a while at least), but you’ll use them in much the same you people do baking nowadays: you make special treats now and then, but you’d hardly ever bake your own bread.

Web 1.0 is dying. It’s passing can be painful, but it doesn’t have to be. Start using content management systems. I would recommend open source systems like Drupal, WordPress and Joomla. If you’re a developer, learn PHP and JavaScript while keeping your HTML/CSS knowledge in fair shape. If you’re building a web application or framework, make it easier for non-browser clients like other webapps to access data and functionality. The easier it is to use your servive, the more people will use it. Twitter and Google Maps seem to do this quite well. Don’t worry about supporting every version or every browser ever built. Pick 2 or 3 modern browsers and make sure versions released in the last year or two work well. Above all, don’t do anything to turn away the early adopters.

It’s time for web 1.0 to die an honorable death. It’s time for the rest of us to move on.