WWW posts page 28

Web app manifest, first go

in

I’ve added a basic web app manifest to my site. I have not experimented with the results, but I did run it through a web manifest validator mostly to success. I used the MDN guide and the HTML5 doctor article for help. I also read some of the in-progress spec, though it seemed more implementer-friendly. The content of my manifest is currently (prettified):

{
    "background_color": "#4e784e"
    ,"display": "browser"
    ,"icons": [
        {
            "sizes": "64x64"
            ,"src": "favicon.gif"
            ,"type": "image\/gif"
        }
    ]
    ,"lang": "en-US"
    ,"name": "Toby Mackenzie\u0027s site"
    ,"scope": "\/"
    ,"short_name": "\u003Ctoby\u003E"
    ,"start_url": "\/"
    ,"theme_color": "#4e784e"
}

I’m just using Symfony’s JsonResponse object to render a PHP array.

This is one more thing that I really shouldn’t’ve put time into until my site is more fleshed out, but it seemed cool and simple to add.

Working with SVG Icons

in

At Cogneato, we’ve been using icon fonts for at least a couple years now. We recently started using SVG icons for a new part of our CMS that allows clients to pick icons from large collections for use in their content. Working with SVG’s is a bit different than with icon fonts, so I created some helper code to make it easy to get them in place, have proper accessibility, and

I like icon fonts fairly well, but there are some advantages to using SVG icons. For us, we were wanting to allow clients to pick from a large selection of icons from within our CMS. Requiring downloads of giant icon sets so they could have a large selection but only show a few on a page would be very bandwidth inefficient, and managing loading the set(s) a particular client wanted to use would be complicated. Unless they use a lot on a single site, cherry-picking each icon should use less bandwidth. This is easy to do with SVG’s.

There are many ways to use SVG’s, but when you need to be able to change colors based on context as we do, inlining SVG elements is the only (practical1) way. With them, you can use fill: currentColor; to use the text color of the container, which we need. Many SVG tutorials use SVG sprite-sheets and then inline spartan SVG elements that contain little other than the <use> element to reference icons from the sheet, saving size for repeated icons and potentially allowing the sprite-sheet to be cached. However, sheets have the same bandwidth management issues as the icon fonts. So I went with direct DOM insertion.

Continue reading post "Working with SVG Icons"

Finding short TLD’s

in

I’ve been looking for a short domain to potentially use for permashortlinks. For a domain to be usefully short, it must have both a short TLD and short SLD. Having three characters each would make for seven total characters (including the period) for the domain. Much more than that and it starts to lose its usefulness. There are no one character TLD‘s (though they’d be great for permashortlinks). Two character TLD‘s are reserved for country codes. I’m a bit reluctant to use a code for a country I don’t live in, and the one I do disallows whois privacy. I’m a bit reluctant to decide that my address, phone number and email address will be “perma”nently available for all to see (assuming I keep the permanent promise of of permashortlinks). So three characters have been where I’ve been doing most of my looking.

There are a number of good lists of available TLD‘s. Indiewebcamp has a list of options with a brief blurb on their fitness and possible problems. It only has country code domains though. United Domains has a list with current TLD‘s and their prices plus soon to be available TLD‘s. It has a page for each with some information about the TLD and marketing-speak thoughts on uses. Name.com has a list with per-TLD pages as well that are often more brief. It’s hard to parse these lists to find just the short ones though.

I found two plain-text lists of TLD‘s (IANA’s and publicsuffix’s), which got me to thinking that I could parse these to find just the ones with three characters. I wrote a script in PHP and modified it to handle any number of characters. It looks like:

Continue reading post "Finding short TLD’s"

Check request compression savings

in

Gzip compression is almost universally recommended as a basic step to improving site performance. It basically uses a little bit of extra processing on the server and client to significantly reduce the transfer size of most text responses. In Apache, this is done with mod_deflate (see the H5BP config for an example of how to set this up).

A while back, I was setting gzip up on my server, and wanted a simple way to verify that it was working and check how much transfer was saved. One simple way to verify it is working is with curl on the command line. If you run curl -I -H 'Accept-Encoding: gzip,deflate' example.com and see the header Content-Encoding: gzip, compression is working. To test the transfer savings, I wrote a simple script using PHP’s curl library. It makes a request with and without the Accept-Encoding: gzip,deflate header, and compares the transfer data info provided by curl_getinfo().

Continue reading post "Check request compression savings"