earth tech

Caveat: For these ideas to work, you might [depending on your system] need to download and install either or both of these Elisp modules:

   php-mode
   css-mode

Presumption [for the purposes of this tip]:  IF you are using Emacs to edit PHP and/or CSS, THEN you know about and are using one or the other or both of these modules. If not, then you should probably give up now or seek professional help immediately.

Task:  Editing a PHP source file using Emacs can involve working in several source code language formatting modes, since it is common to mix PHP, CSS, (X)HTML, Javascript, and even MySQL query syntax in one PHP source file.

Rationale:  Although mixing languages in a single source file may on the face of it seem to violate the kind of *nixish organizational precepts that give us e.g. header (.h) and source (.c) files in C, sometimes painful experience has shown that the object oriented (OOD) precepts of "Encapsulation", "Isolation of Commonality", "Maintainability", and even (in some cases) "Human Readability" are all served by facilitating the mixing of languages within a single source file.

All that to say this: When editing a block of CSS code within a PHP file (using Emacs, of course), I have found it helpful to use the Emacs 'css-mode' Meta-Q key binding to format CSS rule blocks. However, when entering a multi-line CSS comment in the traditional 'C' style, it is useful to ask Emacs to use 'php-mode' Meta-Q to format the comments.

<?php 
$str = "example";
>
<style<
body {
  /* 
   * To format this comment block:
   * 1. Move the cursor to this line 
   * 2. Meta-X php-mode
   * 3. Meta-Q 
   *
   */
  margin:0;
  padding:0;
}

Summary:

• The Meta-Q keystroke in Emacs formats the text under the cursor in the current buffer into a 'paragraph' [block] conforming to some arbitrary standard established for whatever mode Emacs is running in (assuming, of course, that Meta-Q is mapped for that mode).
• When editing CSS, use the CSS mode to get nicely indented rule blocks.
• Switch to PHP mode to format C-style comments within the CSS block [STYLE element code].
• Probably should format the CSS first, then break the comments out such that they are surrounded by empty lines, since the php-mode formatting works most readably that way.…

Labels: code, css, emacs, html, tip, xhtml

posted by pd wilson   #   15:07

In constructing a web application with more than 2 PHP source modules, I found that it is useful to have a quick and easy way of finding a syntax error that may exist in one (or more) of a list of included modules.

Getting a List of PHP Includes

There is a function in PHP for this, which we will get back to in a moment. For right now I wanted to address some things we can do at a Bash prompt to troubleshoot why a script may not be sending any output to the browser on STDOUT.

That's a very common situation when you're working on a large application with many modules. It becomes important in those situations to be meticulous about syntax checking each change in any code before making additional changes.

I've been using the 'Lint' mechanism provided by PHP to syntax check PHP source code. It works like this: 

  $php -l <fileName>

Now, some of you might already be seeing the implications of this. Hows about: 

$for fn in \
      `grep require frmPlayerInformation_body.09.inc\
      | perl -ne '/\"([a-zA-Z0-9.]+)\"\;/ && print "$1\n";'` ;;
 do 
      echo $fn ;;
      php -l $fn ;;
      echo "########" ;;
 done

The implications for scripting this operation from the command line are clear.

get_included_files()

PHP provides a function to get a list of module dependencies for a running script. It's called

get_included_files()

… and here's the URL for the docs: http://us2.php.net/manual/en/function.get-included-files.php

Problems with this Approach

There is at least one serious deficiency inherent in using the require, require_once, include, and include_once directives as the sole indicators of module dependency;  that is that, simply, the modules which are required or "included" due to HTML element attribute values.

Examples include the ACTION attrubute value(s) of HTML FORM element(s), the SRC attribute values for SCRIPT elements. and so on. IFRAME and LINK elements are also among those that can cause a module dependency within the HTML, CSS, or Javascript layer(s) generated by PHP code of a site.

Labels: 0x0000, bash, code, css, html, javascript, linux, perl, php, script, source, webappdev

posted by pd wilson   #   22:13

The World Wide Web Consortium (W3C) defines the HTML Document Object Module (DOM) as a standard. The DOM is used as a standardized way to programmatically access the content of HTML [and XML – we're only concerned with the HTML, here] documents.

Languages commonly used to access and modify the content of a DOM document instance [an instance of a DOM-conformant document] are Java and Javascript.

In this case, we are interested in accessing and modifying the content (data and meta-data) of an HTML document using Javascript to manipulate HTML elements using DOM-defined methods.

Reference Material

• Document Object Model (Core) Level 1 – REC-DOM-Level-1-19981001 from W3C
• HTML DOM Tutorial &ndash from w3schools.com
• HTML DOM Reference – provided by w3schools.com

Labels: html, javascript, w3c, web, webappdev, xml

posted by pd wilson   #   17:43

How cool is that?

Wanting to make some notes here about some things that I'm just now realizing are possible with the combined technologies mentioned in the title line. This is to remind myself to

1. look up whether or not some of these ideas have been implemented, like: I know for sure there are Javascript solutions out there for things like Color Selection Dialogs, calendar widgets for date/time entry, and so on. Not so sure about things like GUI interfaces to controlling CSS attribute properties. And didn't I see a Javascript (back in the day) that would set stylesheet properties in real time, on a page already loaded into the browser?
2. Write some code to implement things like positioning a control box on a form at design time - this is basically the VB concept: realtime control of the CSS properties [attributes?] of e.g. an HTML element (or a logical grouping of HTML elements - a "control") by up/down counter/spinners or drag/drop operations - Should be fairly simple to code up, so much so that I'm having trouble believing such doesn't already exist for the HTML/PHP/CSS universe.

These ideas deserve a more detailed study - just put them here to be sure they're written down and accessible.

The link at W3C that set all this thought process in motion – at least, this phase of it – is the one given above with the title:  http://www.w3.org/TR/CSS21/visuren.html#comparison

Labels: css, html, javascript, php, webappdev

posted by pd wilson   #   09:49

The blog "A List Apart" has a cool article on using dashes and hyphens in HTML — those nasty –, —, and ­ characters, y’kno?

From the article:

1. ‘ for an opening single quote (Ctrl + ` ` in Word—that’s two grave accents—that character on the tilde key).
2. ’ for a closing single quote (or an apostrophe) (Ctrl + '' in Word).
3. “ for an opening double quote (Ctrl + ` " in Word).
4. ” for a closing double quote (Ctrl + ' " in Word).

… and …

I’ll bet you didn’t know this about HTML—the <q> and <blockquote> elements are designed to have quote marks automatically inserted in the appropriate locations. No current browser does this by default, however, and even those that do when faced with the appropriate style sheet markup (as detailed in CSS) get it wrong, especially with curly quotes.

See the article for the full story.

Labels: html, typography, web

posted by pd wilson   #   17:49

Checking out the JavaScript drawing program example called Doodle at the webreference.com section on JavaScript Programming, I found this bit of CSS that does syntax highlighting: SyntaxHighlighter.css [http://www.webreference.com/css/SyntaxHighlighter.css]

See also the Doodle Javascript programming example provided by WebReference for use of these style classes. Nice bit of work.

Here is a trivial example of the HTML to use of some of SyntaxHighlighter.css classes [from the example article, page 3]:

<div style="width: 700px;">
<textarea name="code" class="javascript" cols="60" rows="10"> 

<P class=code>&lt;script src="core.js" 
type=text/javascript&gt;&lt;/script&gt;<BR>&lt;script src="graphics.js" 
type=text/javascript&gt;&lt;/script&gt;<BR>&lt;script src="canvas.js" 
type=text/javascript&gt;&lt;/script&gt;<BR>&lt;script 
type=text/javascript&gt;<BR>var canvas = null;<BR>function initCanvas() 
{<BR>&nbsp;&nbsp;&nbsp;canvas = new 
Canvas($('theCanvas'));<BR>}<BR>window.setTimeout(initCanvas, 
10);<BR>&lt;/script&gt;<BR>&nbsp;&nbsp;&nbsp;&lt;div id="theFrame" 
class="CanvasFrame"&gt;&lt;/div&gt;<BR>&nbsp;&nbsp;&nbsp;&lt;div id="theCanvas" 
class="Canvas"&gt;&lt;/div&gt;<BR>&lt;/div&gt;</P>

</textarea>
</div>

Other examples occur in the article.

This CSS seems to make a nice complement to the PHP syntax highlighter blogged about elsewhere.

Labels: blog, blogger, code, css, html, javascript, php, source, syntax highlighter, web

posted by pd wilson   #   05:10