Bye bye Blogger
Two posts back I said it was the 100th post at The Developer’s Cry. That was
not really true, but this time, for real, this post marks the 100th published
post! To celebrate, I thought the site deserved something special.
And therefore, the website has gotten a facelift. Moreover, we’ve moved away
from Blogger. Although on the outside not much has changed, under the hood
things are a lot leaner and meaner now. Since I’m first and foremost
a C and Python programmer, building websites is not really my thing.
So I really had to put some effort into learning more about HTML, CSS,
and even Javascript. devcry doesn’t get that many regular visitors,
but a few posts stand out and have been read by tens of thousands.
That’s amazing!! And a huge drive to keep going.
Editor
This site used to be hosted by Blogger. Blogger is nice if you just want to write about mundane things. For posting code snippets however, it just isn’t a very good choice. From the very beginning of devcry (now over seven years ago), I’ve been unhappy with Blogger’s online editor because it has no proper support for posting code snippets;
- having to convert ‘
<’ and ‘>’ symbols to ‘<’ and ‘>’ because of HTML - fighting automatic reformatting done by Blogger
- lack of syntax highlighting
Surely, we can do better. The new devcry uses markdown as the source
for all articles. markdown is easy to write as well as to read in its
plain ASCII form, and is easily transformed into a good-looking web page.
You can think of markdown as an improved wiki syntax. I fell in love with it
the day I saw it. If you don’t know it, check out the documentation at
Daring Fireball.
The code syntax highlighting at devcry is currently done with the prism Javascript library. I like it, it’s very easy to setup.
Archive nav bar
Blogger had this great archive browser that I wanted to keep. I see many handcoded blogs today lacking such an archive browser, typically they list only a few recent posts instead. Strangely, a full archive browser is not trivially implemented. The nav bar is global to the entire site, so you’d think it could be a static element that is generated only once, and then be loaded with each article. It’s more like the opposite is true.
I experimented with an iframe, but it wouldn’t play nice. Then I actually
implemented an AJAX nav bar that would dynamically be loaded into the page,
but threw it out again. Web crawlers like the Googlebot don’t like Javascript,
they only index static pages. So that is one important reason to include a
full nav bar into each and every page. Whenever a new post is made, the
content management system (CMS) will rewrite all pages to include the updated
nav bar.
It is kind of crazy that anno domini 2015 the web has no good solution to this. You could also try server-side includes (SSI), but this requires server support. Although I currently run my own webserver, I can’t have devcry rely on that.
The CMS that I use is a home-made Python script, tailored specifically to
the needs of this site. It generates the pages from a template and the
markdown source texts. It handles some special tags like ‘@IMG@’ to
provide proper support for images, an area where markdown is a bit lacking.
Light-boxing
Images in blogs are often scaled down, and you can click on them to enlarge them. The whole page dims, and the image is displayed front and center. This is called a lightbox. You can download many a Javascript library with elaborate APIs that do this. Or you can just write a very small lightbox code yourself, which is what I did for devcry.
There isn’t much magical going on here, once you realize that a lightbox is
nothing but HTML + CSS by itself. When you click on the image, the onclick
handler runs a Javascript function that inserts a new div tag into the HTML.
That div holds the whole lightbox. It is styled with CSS to pop up front:
div.overlay {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.7);
cursor: pointer;
z-index: 10;
}
There is a bit of Javascript to create and remove the div, and
that’s all there is, really—no need for any Javascript libs at all.
So long
Eight years is a long time, and a hundred posts ain’t half bad. Some old
posts contain small errors, and sometimes I hated on C++, while
I truly appreciate it nowadays. The history of the blog reflects changes
through time.
I found some old rants that I wrote even before The Developer’s Cry.
I think it was the precursor to this site, laying down the basis. I wasn’t
any good at HTML and CSS back then, so Blogger was a logical choice.
Beginning this year, I felt like moving away from Blogger. It seemed like
the time was right.
Bye bye Blogger, and be good. You have served us well.