CSS font-smoothing

You might be tempted to use the full capabilities of your browser to do things such as font-smoothing, but it’s not a good idea as it is often overused and the Browser/OS will generally do it’s best.

Both Firefox and Safari have support of this CSS attribute as follows:

font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;

NOTE: If you’re using something like Glyphicons (included with Bootstrap) you might have some use for this because of the way that fonts are used for icons.

REFERENCES:

Brotli Compression

If you look at HTTP Headers as often as I do, you’ve likely noticed something different in Firefox 44 and Chrome 49. In addition to the usual ‘gzip’, ‘deflate’ and ‘sdhc’ , a new value ‘br’ has started to appear for HTTPS connections.

Request:

Accept-Encoding:br

Response:

Content-Encoding:br

Compared to gzip, Brotli claims to have significantly better (26% smaller) compression density woth comparable decompression speed.

The smaller compressed size allows for better space utilization and faster page loads. We hope that this format will be supported by major browsers in the near future, as the smaller compressed size would give additional benefits to mobile users, such as lower data transfer fees and reduced battery use.

Advantages:

  • Brotli outperforms gzip for typical web assets (e.g. css, html, js) by 17–25 %.
  • Brotli -11 density compared to gzip -9:
  • html (multi-language corpus): 25 % savings
  • js (alexa top 10k): 17 % savings
  • minified js (alexa top 10k): 17 % savings
  • css (alexa top 10k): 20 % savings


NOTE: Brotli is not currently supported Apache HTTPd server (as of 2016feb10), but will likely be added in an upcoming release.

http://mail-archives.apache.org/mod_mbox/httpd-users/201601.mbox/%3C54[email protected]%3E

Until there is native support, you can pre-compress files by following instructions here…
https://lyncd.com/2015/11/brotli-support-apache/

REFERENCES:

Deque FireEyes accessibility testing plugin

I’ve done a lot of accessibility testing and development work over my career. One of the many free tools that I use in that role is FireEyes. Deque also has some commercial packages for developer use.

FireEyes adds a new tab on the Firebug tab bar and adds the ability to analyze a web site for WCAG 2.0 Level A and AA and Section 508 accessibility violations. The Stand-Alone version of FireEyes is a browser plugin to the FireFox browser. It requires that the FireBug plugin already be installed

Requirements:

  • Firefox 31-41

    As of 2015aug21, the current version of the extension is NOT signed and will not execute on later versions. [See my later post on this topic]

  • FireBug 2.x – Do NOT install Firebug v3 alpha as the tab will not show.

NOTE: should be on Firebug tab labeled “Worldspace Fireyes”, but does not seem to be available in Firebug3.

NOTE: if you try to download in MSIE, you must rename the .zip to .xpi, and then open with Firefox.

REFERENCES:

Install Google mod_pagespeed for Apache HTTP

Website network performance is usually a very complicated process. Over the years, I’ve outlined many development techniques that can be used toward this goal. I’d heard about mod_pagespeed for some time, but never had the opportunity to experiment with it until recently. My first impression is that it is a VERY EASY means to gain performance improvements without reworking your existing website to implement techniques for establishing far-future expires, cache-busting, minification and static file merging.

Out of the box, most common techniques are automatically applied to your assets and a local server cache is created to utilize them.

Default installation is trivial:

  1. Download the latest version for your server architecture:

    wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb

    OR

    wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i386.deb

  2. sudo dpkg -i mod-pagespeed-*.deb

  3. sudo apt-get -f install
    (if required)

  4. sudo service apache2 restart

NOTE: Using tools like Firebug will enable you to see an HTTP Header indicating the version being used for your requests.

If you need to modify configuration from the default:

sudo vi /etc/apache2/mods-available/pagespeed.conf

For VirtualDomains, you can selectively enable and disable PageSpeed and many of it’s settings in your appropriate configuration files with:

<IfModule pagespeed_module>
ModPagespeed on
</IfModule>

NOTE: Appending ?ModPagespeed=off to your URL will disable functions for that request.

REFERENCES:

Eclipse FileSync plugin

I’ve done a lot of front-end java coding over my career,  one particularly annoying aspect is the wait for a build (compile-deploy) cycle in my local developement servers to view or test a small change.  One particularly useful tool that I’ve been using for some time is a FileSync plugin for Eclipse.  It is useful as you can “map” folders from your Eclipse project to a path on your local filesystem, as such the individual files are automatically copied to your server installation.  I’ve personally used this approache with JBoss, Tomcat and WebSphere, but there is no reason that it should not work for other servers.

HTC/.htc files

What is it? Internet Explorer 5-9 introduced behaviors. Behaviors are a way to add behaviors to XML (or HTML) elements with the use of CSS styles.

Why avoid it? The behavior attribute is only supported by Internet Explorer.

What to use instead? Use JavaScript and XML DOM (or HTML DOM) instead

MSIE 5-9 support a scripting (VBScript/JScript) technology called HTML Components (HTCs) to aid in DHTML behaviors. Support was dropped in MSIE 10, you will have to force the browser into MSIE 9 compatibility to use these.

Mozilla? it has a similar proprietary implementation.
http://dean.edwards.name/moz-behaviors/

Included CSS style:

<style type="text/css">
h1 { behavior: url(example.htc) }
</style>

Inline CSS style:

<p style="behavior:url(hilite.htc)">Hello World</p>

Apache MIME Type:

AddType text/x-component .htc

REFERENCES:

Hiding Firebug Lite controls in browser

I started getting extremely tired of the FireBug Lite overlaying content in some of my legacy websites. By taking a look at the markup it was adding, I found a quick and easy way to hide it for most users.

Adding the following to one of your CSS files should do the trick…


/* Begin hide FireBug Lite */
#jsConsole,
#jsConsoleShowSourceButton,
#jsConsoleHideSourceButton,
#jsConsoleShowConsoleButton,
#jsConsoleHideConsoleButton { display:none; }
/* End hide FireBug Lite */

NOTE: I have not yet confirmed, but this approach should work in other browsers such as MSIE, Chromium and Safari that also may use FireBug Lite.

Prevent Robots from indexing portions of content

Yahoo! initially introduced a CSS class that can be used to notify robots/spiders that a specific section or fragment of content should not be included for search purposes.

class=”robots-noindex”

REFERENCES:

CSS Cursors

The use of CSS cursors within your browser based application or website is a great way to add feedback to the user to increase usability. This is increasingly important for AJAX applications that may be “busy” even when the user is not directly taking action within their browser.

These are all easily appended to classes in your CSS files:

  • default
  • auto
  • inherit
  • pointer
  • crosshair
  • text
  • help
  • move
  • progress
  • wait
  • e-resize
  • ne-resize
  • n-resize
  • nw-resize
  • w-resize
  • sw-resize
  • s-resize
  • se-resize

Partial (CSS3) support in current browsers:

  • none
  • all-scroll
  • context-menu
  • cell
  • vertical-text
  • alias
  • copy
  • no-drop
  • not-allowed
  • col-resize
  • row-resize
  • ew-resize
  • ns-resize
  • nesw-resize
  • nwse-resize

NOTE: for very old browser, you can also set several attributes to allow for the supported one to be used.

.example {
cursor:hand;/* IE5-IE5.5 only support (dropped in IE9) */
cursor:pointer; /* IE6 and later */
}

REFERENCES:

Google Web Fonts

The use of non-traditional web fonts was once a very challenging task due to various browser specific implementations. Thankfully Google WebFonts have made this easy enough for most developers to add in a cross-browser manner in a matter of minutes.

WARNING, there are a few considerations to make here…

  1. Some browsers displays a blank space in place of the text that uses the font.
  2. … and then re-render text in the web font once it has loaded

Method 1: (most compatible, but cross-browser loading behavior varies)

<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css' />
<style type="text/css">
h1,p { font-family: 'Ubuntu', sans-serif; }
</style>

Method 2: (requires javascript, but is consistent cross-browser)

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Ubuntu Mono','Ubuntu' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<style type="text/css">
h1 { font-family: 'Ubuntu Mono','Courier New',monospace; }
p { font-family: 'Ubuntu','sans-serif'; }
</style>