web posts page 8

Line Mode Browser, or progressive enhancement all the way back

in

Progressive enhancement is a development strategy meant to provide older and / or less capable browsers with a working website while providing the more capable with a rich, full experience. It is often presented as a set of layers of support, with HTML at its base, then CSS added to that for styles, then JavaScript for advanced behavior. With this, it’s often posited that a well-crafted HTML experience can be used by any browser. However, for really old browsers from the early web, the new web provides many things that can make pages difficult to read, functionality unusable, or even entire sites inaccessible.

Today, I’m going to go back as far as I reasonably can in terms of browser support, to the second web browser ever made, and the first widely supported one, Line Mode Browser. I can’t look at the first, WorldWideWeb, because it was only made for NextStep and, as far as I can tell, isn’t accessible for me to test with. Line Mode is though. It was open-source by the w3c and kept available. I was able to get it with MacPorts with the ‘libwww’ package (run as www on the command line).

Line Mode was based on WorldWideWeb, and in fact was less featured, so it is likely to have any issues WorldWideWeb has and more. I will look at some issues that Line Mode has with modern web pages, and provide some solutions that will improve the abilities of even the oldest browsers to use a page.

Continue reading post "Line Mode Browser, or progressive enhancement all the way back"

Upgrading my Awstats setup

in

I don’t really monitor analytics for my personal sites that often besides for my blogs, for which I use wordpress.com’s analytics. I do have three open-source analytics programs set up for my main sites though: piwik, owa, and awstats. Awstats is the one I’ve tended to look at the least, probably because its interface isn’t as nice as the others and it doesn’t have as much data about visits. However, it is the only one that looks at actual server logs, so it should be the most accurate about basic visit information. The other two use JavaScript, one having an image fallback, so there’s the potential for them to miss visits.

I have my awstats set up as I described in 2010. I keep the configuration and the data separate from the install to make updates easier. However, it had been so long since I upgraded that I forgot how it was set up and fumbled a little before finding that article and figuring out what had to be done. In order to make it easier for next time, I created myself a simple little script to handle the upgrade for me:

Continue reading post "Upgrading my Awstats setup"

ASCII art source code signature for my site

in

Sometimes I see sites with ASCII art hidden in comments in their source code. I’ve long admired the retro computer nerdiness of ASCII art. At times, I’ve wanted to add some to my site, but have been reluctant because of the extra bites it would add to page weight, the difficulty in making it look good, the lack of a subject I felt worth it, and the problems they can have with differing fonts and display widths. However, after adding an easter egg recently, I was more receptive to the idea when reminded about it by the source code of archive.org.

I spent some time this past weekend trying various different ASCII versions of my name. Some examples:

Continue reading post "ASCII art source code signature for my site"

Konami easter egg

in

What web developer’s site is complete without an easter egg? Until today, mine didn’t have one, but I had long wanted something. Since I was struggling to make forward progress on what I had actually wanted to work on this weekend, and had just been reminded of the Konami Code, I decided it was finally time to add one. I had seen a friend do a key sequence easter egg on a site he built a while back, which had put the idea in my head. The Konami Code sequence has been used on several websites already (Digg and Vogue are two examples I could get to work), so why not mine?

A simple Konami Code script:

Continue reading post "Konami easter egg"

Symfony AppCache and ‘X-Reverse-Proxy-TTL’, a hack

in

Symfony’s HttpCache reverse proxy is a simple way to get caching of pages with Symfony. It is simple to set up, easy to work with, and easy to clear. I started using it recently on my own site.

A simple app/console cache:clear will clear the entire cache. Otherwise, following the HTTP-oriented spirit of the framework, invalidation is based entirely on HTTP headers. In this way, it works the same as proxy / gateway caches. It only caches responses with public Cache-Control headers. It is age based, using the Cache-Control s-maxage or maxage values or Expires headers (following that order of precedence). It then considers the cached items fresh until they are stored for longer than those headers specify they can be stored. The cached version is served, bypassing the router / controller, as long as the cache is fresh.

This is all nice, but using long max-ages for those headers means that caches outside of my control can cache pages for long periods of time. cache:clear won’t help when a page changes. One possible option would be to have shorter and safer max-ages as Cache-Control headers and use something else for HTTPCache.

Continue reading post "Symfony AppCache and ‘X-Reverse-Proxy-TTL’, a hack"

404 with autofilling form

in

Inspired by a tweet by @simevidas about a 404 page search form, I decided to finally replace Symfony’s default 404 page on my site. The tweet was about an example site’s 404 pages that take pieces from the URL path to populate a search field. Upon seeing it, I immediately thought how easy it would be to implement a simple version of that.

I had been thinking of customizing my 404 for a while, but stopped trying because Twig doesn’t seem to know about bundle paths in the error pages, preventing me from extending the “base” template in my bundle. I still didn’t find a solution for this, so the 404 page has an unstyled look, but I wanted to capture the search form idea while it was on my mind.

Looking into 404 best practices, I found three things that I wanted on mine: branding, guidance / next steps for the user, and small size / low power.

Continue reading post "404 with autofilling form"

Websites in Multiple File Formats

in

Since I saw Symfony’s _format routing parameter, which is used to effectively set the file type of the response, I’ve thought it would be cool to have every page on a website support more than just ‘html’ response types by adding a .{_format} to the end of the URL and make a template version for each. Users would be able to consume the same information in different formats depending on their needs. ‘txt’, for example, would basically have just the content that would go in the “ element, in pure text format, providing a fallback or simplified view that can be read even by curl users. ‘json’ or ‘xml’ formats might provide the content and meta data about it in a machine consumable format. You could even go all out with an ‘mp3’ format where you read the page content.

Yesterday, I took my first step toward this idea on my site by implementing my homepage in the ‘txt’ format. This was very simple since my content is already being composed in markdown, a visually pleasing structure for text content.

Obviously, adding more pages and formats will add development time. This probably wouldn’t be useful enough to be worth it for a normal site, but for my own site, I get to play with whatever cool ideas I want.

Symfony AppCache: built in reverse HTTP proxy

in

I finally set up my site to work with Symfony’s built in HTTP reverse proxy. Took a little bit of time since I had to fix a couple minor bugs in how things are set up with my symfony-initial and Symfony Standard Edition Bundle and then made a mistake in testing whether or not it was working that made me think it wasn’t when it was.

One useful way to test if it’s working is to set the ‘debug’ option of AppCache to true (turn this back off for production). This will set an X-Symfony-Cache header that will provide info on the cache behaviour. You can see these headers on the shell by running curl -I your.url. If it says ‘fresh’ as part of the header value, that means it was served from the cache. If it shows the header at all, that means AppCache is being used.

For the cache to work, the response must be public and have something set to control how the cache becomes stale. See Symfony’s docs on caching for more details. Since my content rarely changes at the moment, I went with the Cache-Control header with max-age. A cool thing about using Symfony’s reverse proxy is that the entire cache will be cleared when clearing Symfony’s cache like normal. This means that if you make a mistake and must remove it from the cache, there is a quick and easy way.

Givecamp 2014: Lake Erie Ink

in

Lake Erie Ink mobile home page
Slightly over a week ago, I finished my fourth Cleveland GiveCamp. GiveCamp is a weekend of developing websites and other things for area nonprofits. As usual, it was a good time. My project this year was an update to Lake Erie Ink’s site. They had actually had their site built at the GiveCamp two years prior (I was not on that project, but know someone who was). They just wanted a map added to their site that showed where kids were writing or writing about. With six developers and a developing project manager, along with a WordPress plugin, we were able to get the basic functionality working rather quickly. So quickly that we had something working Friday night and started shedding developers to other projects. By Sunday it was basically down to just me and the project manager (plus the Lake Erie Ink people, of course). We added in some extra improvements in addition to the map. We brought in a couple of designers for brief stints to help us with some design issues.

For my part, I did help some with the map, but spent most of my time making their site responsive and tweaking the home page to include a callout for the map page. The site had not been designed with responsiveness in mind at all. It had nested divs with fixed pixel widths that accommodated padding of the parents’ even when width: 100% would’ve done the same thing. In addition, id’s were used a lot, even multiple times per page, there was a lot of unnecessary redundancy and extra CSS in the styles (such as repeated blocks and things like margin: 0px 0px 0px 0px), and extra heading elements were made up to provide extra heading styles (h7, h8, and h9). The templates were confusing at times and some had different versions or nearly identical related templates.

Continue reading post "Givecamp 2014: Lake Erie Ink"

The Happs

in

For a while now I’ve been trying to write posts that draw people, such as solutions to specific problems or things that might be called articles. I think I’ve focused on these types of writings because parts of me want to be bring myself more prominently into the larger web community, help others, get some praise or critique for my work, and perhaps get offered a high paying job from some bigger web firm. I think I got a bit heady when I started getting above 50 visitors a day, peaking at 98. But that flow has dried up and I’m back down to less than 20.

I do like writing those types of posts sometimes, and I’m not going to stop, but I think I’m going to write a lot more smaller and less focused posts that are more generally about anything on my mind. I think I shall call the posts “The Happs” so I don’t have to think of a title and to emphasize their lack of a specific topic. The article type posts really take a long time and some research to compose, and I don’t have a lot of free time for them. It is often so long between when I do whatever is the impetus for them and when I write them that I’ve forgotten a lot of the details. I think “The Happs” will get me writing more often and allow me to put out snippets of what might later go into more thorough articles.

So, what has been happening with me lately?

Continue reading post "The Happs"