HTML5 download attribute

Example

The download attribute allows for the downloaded filename to be specified to be something different than the name in the url.

This is available only on the A tag when an href attribute is already specified and works similarly to setting the header as:
Content-Disposition: attachment; filename="filename.pdf"

NOTE: this is not currently available in IE, Edge(prior to 13) or IOS Safari.

References:

Ashley Madison data dump

This topic has been in the media ALOT lately, for the less technical individuals here’s a simple way to get at the information.

For (mostly) anonymous access to the ‘dark internet’…. it’s not as ominous and illegal as you might think, you can download a browser here:

https://www.torproject.org/download/download

If you don’t mind being (possibly) tracked by your IP Address, you can just download a Torrent client such as Transmission or ĀµTorrent.

The torrent file can then be accessed here:
https://thepiratebay.mn/torrent/12237184/The_Complete_Ashley_Madison_Dump_from_the_Impact_Team

REFERENCES:

Using Ant to parse and download Maven pom.xml dependencies

I’ve migrated most of my projects to Maven, but occasionally have some developers that prefer to use Ant in their development environments. One problem that I used to have with Ant was that it required all dependencies to be checked into the SCM repository for each project. I recently found an Ant plugin that allows for it to read the Maven pom.xml and download the required dependencies, thus making projects MUCH easier to maintain! the steps are very simple.

Maven – pom.xml

  • Make sure that you have your dependencies (nexus?) setup and tested here.

Maven – global settings.xml

  • Make sure that your repositories are correctly configured.

Ant – build.xml (very minimal, I usually add as a step in existing scripts vs. using as standalone)

  • (example):

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!DOCTYPE project>
    <project name="example" basedir="." default="dependencies" xmlns:artifact="antlib:org.apache.maven.artifact.ant">
    <taskdef uri="antlib:org.apache.maven.artifact.ant" classpath="ant/maven-ant-tasks-2.1.3.jar" />
    <target name="dependencies">
    <echo message="--- getting dependencies from maven pom.xml ---" />
    <artifact:pom id="pom" file="pom.xml" /><!-- settingsFile="settings.xml" -->
    <artifact:dependencies filesetId="test.dependencies" pomRefId="pom" useScope="test" />
    <copy todir="${antlib.dir}">
    <fileset refid="test.dependencies" />
    <mapper type="flatten" />
    </copy>
    </target>
    </project>
     
  • Make sure that you put the JAR (maven-ant-tasks-2.1.3.jar) in the proper place…

Executing:


  • ant dependencies

If everything is working well, you can now purge most of the JAR’s that reside inside your web projects as the Ant build process can retrieve them based on values in the Maven pom.xml file.

REFERENCES:
http://maven.apache.org/ant-tasks/examples/dependencies.html
http://maven.apache.org/ant-tasks/
http://search.maven.org/#artifactdetails%7Corg.apache.maven%7Cmaven-ant-tasks%7C2.1.3%7Cjar

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>

Conditional Comments cause CSS to block

Here’s an odd one…. I’ve found that if you use the common method of using Conditional Comments to separate MSIE specific CSS, you’ve likely added a performance problem without knowing it… that is, in addition to the network connection and time required for the different CSS files.

It turns out that the standard use of this approach blocks the other downloads until the main CSS is loaded.

The solution is both simple and painless to implement…. a quick solution to this is to add an empty conditional comment early on, that is, before the main content (CSS) is loaded.. This works for all approaches, such as those where comments surround the <body> or various <link>, <style> or <script> tags.

UPDATE:
Personally, I like to do this immediately after the DOCTYPE and before the <html> tag. Additionally, since IE10 dropped support for this technique, I’ll just target IE 9 and below for any developer that comes after me.


<!DOCTYPE html>
<!--[if lte IE 9]><![endif]-->
<html lang="en">
...

REFERENCES:

X-Download-Options:noopen to download files

There are a couple of steps required to force a browser to save/download content instead of displaying it in the browser window.


X-Download-Options: noopen
X-Content-Type-Options:nosniff
Content-Disposition: attachment; filename=example.txt
Content-Type: text/plain

NOTE: MSIE also supports a poorly documented proprietary META tag…

<meta name="DownloadOptions" content="noopen|nosave" />

REFERENCES:

Downloadable WebFonts

To maintain accessibility and SEO (Search Engine Optimization), there’s often a need to be creative with fonts. This is sometimes due to aesthetics, but often to meet technical needs like foreign non-Latin languages that have unique characters/glyphs not normally installed on workstations. Producing images for each character would be very time consuming, bandwidth intensive and destroy search engine rankings.

Create embedded fonts using one of 2 available formats:

1. Portable Font Resources (.pfr): TrueDoc technology was developed by Bitstream and licensed by Netscape. It can be viewed by Navigator 4.0+ and Explorer 4.0+ on Windows, Mac, and Unix platforms.

<link rel = “fontdef” src=”myfont.pfr” />

2. Embeddable Open Type (.eot): Compatible only with Explorer 4.0+ on the Windows platform. Create .eot files using Microsoft’s free Web Embedding Font Tool (WEFT).

<style type=”text/css”>
<–!
@font-face {
src:url(/fonts/myfont.eot);
}
–>
</style>

References:

Tooling:

Tutorials:

Cheers!