Download the installer from CNET:
http://download.cnet.com/Cygwin/3000-2212_4-10026629.html
Follow these instructions, they're very good:
http://www.mcclean-cooper.com/valentino/cygwin_install/
The X-windows part at the end is optional.
Then learn some fun stuff that's now possible, like grep and wget:
http://www.weekeat.com/post/24651647092/grep-basics-in-25-seconds
http://www.thegeekstuff.com/2009/09/the-ultimate-wget-download-guide-with-15-awesome-examples/
Monday, March 25, 2013
Thursday, February 28, 2013
Preloading web fonts for use with html CANVAS
The problem:
Your application makes use of html <canvas> to draw some text to a canvas element when the page loads. You've picked out a cool web font to use but find that it isn't loading in time to be drawn onto the canvas. Unlike DOM elements that automatically update to the correct font when it becomes available ( FOUT ), the canvas is simply drawn with the incorrect font. Refreshing the canvas or page will probably display the correct font because it has finished loading or has been cached.
There are several creative ways around this. The following one has not been extensively tested but is something I want to experiment with in the future.
I found that while using @font-face to declare fonts in CSS, there was no way to know when the resources requested ( font files ) were loaded. The 'onload' will fire because all of the scripts and stylesheets have loaded, but the files the stylesheets requested could still be in transit.
By embedding the font files in the CSS by base64-encoding them, I was able to verify that the stylesheet ( including the font ) was loaded when the onload event happens. Run this within the <head> tags.
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "PATH_TO_CSS_FILE");
document.getElementsByTagName("head")[0].appendChild(fileref);
Here are some considerations:
This approach will increase the size of your font by 30-40%, but will spare a round trip to the server to fetch additional font files.
This will prevent the page from loading until your whole CSS/font file is loaded. This could be unacceptably long if using a large font, multiple fonts, or browsing on a mobile device.
Now here is something I'm working on that is very untested and crazy:
var filename = "cssGen.php?font="+fontFile;
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
document.getElementsByTagName("head")[0].appendChild(fileref);
In this case the CSS file being added is actually a PHP script posing as CSS. The name of the font file is passed into the css/php using the 'font' query parameter. Then inside the css/php script:
***
<?php
header("Content-type: text/css; charset: UTF-8");
$font = explode(".",$_GET['font']);
$fontData = file_get_contents("fonts/".$_GET['font']);
$encoded = base64_encode($fontData);
?>
@font-face {
font-family: '<?php print $font[0]; ?>';
src: url(data:application/x-font-woff;charset=utf-8;base64,<?php print $encoded; ?>) format('woff');
font-weight: normal;
font-style: normal;
}
#myCanvas {
border: 1px dashed #999;
}
body {
font-family: '<?php print $font[0]; ?>';
}
***
The headers are set so the file is interpreted as text/css. The name of the font family is derived from the filename and the font file is base64 encoded on the fly.
Again, not tested much, but fun to play around with. I thought the whole idea of executing php inside CSS was worth trying anyway.
Your application makes use of html <canvas> to draw some text to a canvas element when the page loads. You've picked out a cool web font to use but find that it isn't loading in time to be drawn onto the canvas. Unlike DOM elements that automatically update to the correct font when it becomes available ( FOUT ), the canvas is simply drawn with the incorrect font. Refreshing the canvas or page will probably display the correct font because it has finished loading or has been cached.
There are several creative ways around this. The following one has not been extensively tested but is something I want to experiment with in the future.
I found that while using @font-face to declare fonts in CSS, there was no way to know when the resources requested ( font files ) were loaded. The 'onload' will fire because all of the scripts and stylesheets have loaded, but the files the stylesheets requested could still be in transit.
By embedding the font files in the CSS by base64-encoding them, I was able to verify that the stylesheet ( including the font ) was loaded when the onload event happens. Run this within the <head> tags.
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "PATH_TO_CSS_FILE");
document.getElementsByTagName("head")[0].appendChild(fileref);
Here are some considerations:
This approach will increase the size of your font by 30-40%, but will spare a round trip to the server to fetch additional font files.
This will prevent the page from loading until your whole CSS/font file is loaded. This could be unacceptably long if using a large font, multiple fonts, or browsing on a mobile device.
Now here is something I'm working on that is very untested and crazy:
var filename = "cssGen.php?font="+fontFile;
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
document.getElementsByTagName("head")[0].appendChild(fileref);
In this case the CSS file being added is actually a PHP script posing as CSS. The name of the font file is passed into the css/php using the 'font' query parameter. Then inside the css/php script:
***
<?php
header("Content-type: text/css; charset: UTF-8");
$font = explode(".",$_GET['font']);
$fontData = file_get_contents("fonts/".$_GET['font']);
$encoded = base64_encode($fontData);
?>
@font-face {
font-family: '<?php print $font[0]; ?>';
src: url(data:application/x-font-woff;charset=utf-8;base64,<?php print $encoded; ?>) format('woff');
font-weight: normal;
font-style: normal;
}
#myCanvas {
border: 1px dashed #999;
}
body {
font-family: '<?php print $font[0]; ?>';
}
***
The headers are set so the file is interpreted as text/css. The name of the font family is derived from the filename and the font file is base64 encoded on the fly.
Again, not tested much, but fun to play around with. I thought the whole idea of executing php inside CSS was worth trying anyway.
Thursday, February 21, 2013
Font size comparison chart
Wednesday, February 20, 2013
Check a hex color code using a regular expression
This handy function uses a regular expression to check for a valid 6 or 3-digit hex code beginning with #.
function hexCheck (hex) {
var re = /^\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
return re.test(hex); // returns true if this is a valid hex code
}
This can and should be elaborated into another method for regularizing hex codes. ( Adding #, etc )
function hexCheck (hex) {
var re = /^\#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
return re.test(hex); // returns true if this is a valid hex code
}
This can and should be elaborated into another method for regularizing hex codes. ( Adding #, etc )
Wednesday, February 13, 2013
PHP Control Structure Syntax
This syntax is particularly useful when writing template files. In a template, you may or may not be receiving a piece of data from your CMS, and have to adjust accordingly. If the content isn't there, you'll want to make sure that an ugly error message won't appear and that the template handles the omission gracefully.
The basic concept:
In the example above the HTML markup will only be output to the browser if the conditional statement resolves to true. Below we'll check that the $data has a valid value ( not equal to "" ), before printing it to the screen.
If all goes well, the result will be: Welcome, User!
If not, nothing is output.
The basic concept:
<?php (conditional php statement) : ?>
<p>some html content</p>
<?php endConditional; ?>
<p>some html content</p>
<?php endConditional; ?>
In the example above the HTML markup will only be output to the browser if the conditional statement resolves to true. Below we'll check that the $data has a valid value ( not equal to "" ), before printing it to the screen.
<?php if($data->user != "") : ?>
<p>Welcome, <?php print $data->user; ?>!</p>
<?php endif; ?>
<p>Welcome, <?php print $data->user; ?>!</p>
<?php endif; ?>
If all goes well, the result will be: Welcome, User!
If not, nothing is output.
Wednesday, January 30, 2013
Writing a custom Drupal 6 Views 2 filter - resources
This is not intended to be a full tutorial but resources and tips that I found helpful.
Drupal 6
Views 2
Helpful Tutorials:
http://www.hashbangcode.com/blog/creating-custom-views-filters-exposed-form-element-drupal-6-561.html
In summary the major steps are:
1. Within a custom module, define hook_views_api() to alert Drupal that the module is views enabled, api version 2, optional path index pointing to a directory that has additional files for the view.
2. Use hook_views_handlers() to again point to the directory of files to include for the view, as well as the name of a custom handler to be used and the parent handler it will extend. The custom name handler should be the same as the name of the .inc file which will contain a class, which again will have the same name.
3. Use hook_views_data() to define the name and group the filter will appear under in the Views UI. Again the name of the custom handler is included.
4. In the .inc file named after the handler, create a class (custom handler name) that extends the parent handler class. This class will contain about two methods. The first value_form() will build and return the form to be used within the views UI. The second, query(), uses drupal methods to insert additional 'WHERE' or 'AND' clauses to the SQL query statement being built by the view. (add_where())
One major roadblock I hit was attempting to reference a table other than the main one being used by the view. SQL was giving me errors about an 'unknown column'. The method add_table() allowed me to register other tables to be used within the query.
Drupal 6
Views 2
Helpful Tutorials:
http://www.hashbangcode.com/blog/creating-custom-views-filters-exposed-form-element-drupal-6-561.html
In summary the major steps are:
1. Within a custom module, define hook_views_api() to alert Drupal that the module is views enabled, api version 2, optional path index pointing to a directory that has additional files for the view.
2. Use hook_views_handlers() to again point to the directory of files to include for the view, as well as the name of a custom handler to be used and the parent handler it will extend. The custom name handler should be the same as the name of the .inc file which will contain a class, which again will have the same name.
3. Use hook_views_data() to define the name and group the filter will appear under in the Views UI. Again the name of the custom handler is included.
4. In the .inc file named after the handler, create a class (custom handler name) that extends the parent handler class. This class will contain about two methods. The first value_form() will build and return the form to be used within the views UI. The second, query(), uses drupal methods to insert additional 'WHERE' or 'AND' clauses to the SQL query statement being built by the view. (add_where())
One major roadblock I hit was attempting to reference a table other than the main one being used by the view. SQL was giving me errors about an 'unknown column'. The method add_table() allowed me to register other tables to be used within the query.
Drupal permissions and the node_access table - a hard learned lesson
While building a custom filter for Views 2 on a Drupal 6 site I leaned an important lesson about the way Drupal handles permissions.
I was trying to write a filter that would display a selected list of nodes to users with a certain role. Sounds easy right? It would be fairly logical to assume that Drupal would support filtering access to nodes based on role. If you want to restrict access to an entire content type by role, this is easy. The 'views' explanation would be something like: "Show me nodes of this type, only to users who have this role".
My situation was different because the content type is accessible to all authenticated users, I only want to show a small subset of those nodes to users with a specific role. That subset of nodes has no distinguishing property to filter, leading me to believe that I would have to write my own.
Here is where the trouble starts.
I wanted the filter to do a join between the 'node' table and the 'node_access' table to see if a particular node id was listed in the node_access table with the role id ( 'gid' in the table ) of the role to which I wanted to display the nodes. I was surprised when my queries were coming back empty.
I noticed that nodes of this content type would be returned with my custom filter when I used a role id that had access to nodes not available to 'authenticated users'. To test this discovery I removed node access for authenticated users to the nodes I wanted available to the new role, and suddenly they were being listed in 'node_access' with the new role's id.
In summary: If a node is accessible by the role 'authenticated user', the node_access table will only contain records associated with that role id. Other roles given the same access will not have a record in the node_access table. This is most likely intended to reduce redundancy in the table because any user with any custom role will already be authenticated.
This is probably why this filter is not included in Views by default.
Unfortunately this means my query is impossible ( at least the way I attempted it ), and there goes several hours of facemashing my keyboard.
I was trying to write a filter that would display a selected list of nodes to users with a certain role. Sounds easy right? It would be fairly logical to assume that Drupal would support filtering access to nodes based on role. If you want to restrict access to an entire content type by role, this is easy. The 'views' explanation would be something like: "Show me nodes of this type, only to users who have this role".
My situation was different because the content type is accessible to all authenticated users, I only want to show a small subset of those nodes to users with a specific role. That subset of nodes has no distinguishing property to filter, leading me to believe that I would have to write my own.
Here is where the trouble starts.
I wanted the filter to do a join between the 'node' table and the 'node_access' table to see if a particular node id was listed in the node_access table with the role id ( 'gid' in the table ) of the role to which I wanted to display the nodes. I was surprised when my queries were coming back empty.
I noticed that nodes of this content type would be returned with my custom filter when I used a role id that had access to nodes not available to 'authenticated users'. To test this discovery I removed node access for authenticated users to the nodes I wanted available to the new role, and suddenly they were being listed in 'node_access' with the new role's id.
In summary: If a node is accessible by the role 'authenticated user', the node_access table will only contain records associated with that role id. Other roles given the same access will not have a record in the node_access table. This is most likely intended to reduce redundancy in the table because any user with any custom role will already be authenticated.
This is probably why this filter is not included in Views by default.
Unfortunately this means my query is impossible ( at least the way I attempted it ), and there goes several hours of facemashing my keyboard.
Subscribe to:
Posts (Atom)