Advanced Regular Expression Features

If you want to employ all regular expressions constructs and features you can't make it with a simple shell command or a tool, but you need to use a programming language. I use Perl, because it has the best and longest established support for regular expression.

Parenthesized Subexpressions

Earlier, we saw that regex engines support metacharacters \1, \2, \3, etc. to refer to the text matched by parenthesized subexpressions. Perl and most other modern regex-endowed languages also provide a way to refer to the text matched by parenthesized subexpressions from code outside of the regular expression, after a match has been successfully completed.

Introduction to Perl

This guide introduces the Perl language through a number of sample programs. The aim of this guide is to understand how to use regular expressions with Perl.

1 - What is Perl Language

Perl is a scripting language suitable for web-processing. Perl was developed deriving its concepts of text handling and regular expression from two specialized languages called awk and sed.

Regular expressions Introduction

1. What is a regular expression?

"A regular expression is a pattern which specifies a set of strings of characters; it is said to match certain strings."[Ken Thompson]

From the English dictionary:

pattern = (noun) a regularly repeated arrangement of something.
to match = (verb) to be equal.

A regex can or cannot match a string and, if it does, can match the string once or multiple times.

The <script> element

The unobtrusive javaScript programming paradigm

Unobtrusive JavaScript is an approach to web programming that supports separation of behaviour (JavaScript code), structure (HTML code) and presentation (CSS code).
According to this programming paradigm, to accomplish separation is best to write all your JavaScript in an external file and embed it in HTML document using a <script> element with src attribute.

The <script> element is synchronous by default

Let's examin how the <script> element allow you to insert javascript in a HTML document.

<script src="scripts/javascript_app.js"> </script> <!--synchronous script-->

When JavaScript engines encounters a <script> element, they stop parsing HTML to download and interpreter the JS file, then they resume parsing and rendering HTML.

The <script> element has two important attribute: HTML 4.1 defines the async attribute and HTML5 introduces the defer attribute. These two attributes cause scripts to be executed differently, in browsers supporting them.

JavaScript Execution Contexts

1 - Execution Context or Context

The execution context or context is the environment where JavaScript code is evaluated.

→ Global (execution) context

The global execution context is the most outer execution context.

In browsers the global context is also known as window context. In a browser global variables are window properties and global functions are window methods. 

→ Function or Local (execution) context

When a function is called a function execution context is created.

Type Scales

The Twelve Pixel Scale

	body	p	h3	h2	h1
pixel	12px	-	14px	18px	24px
percentage	75%	-	117%	150%	200%
em	100%	0.75em	1.17em	1.3em	1.5em

The Sixteen Pixel Scale

	body	p	h3	h2	h1
pixel	16px	-	18px	24px	32px
percentage	100%	-	133%	150%	200%
em	100%	1em	1.125em	1.5em	2em

Read about why using em to size types:
http://adamdscott.com/better-web-typography-sizing-type-with-ems/

vertical-align CSS property

What is vertical-align CSS property for ?
Is the purpose of the vertical-align property similar to the HTML align attribute ?

align HTML 3.2 attribute

The attribute align (deprecated in HTML4) belongs to img, applet, object tags, and defines the position of those elements with respect to its context.
This attribute can assume values: bottom, middle, top, left and right, the default value is bottom.
The bottom, middle, top values concern the object's position with respect to surrounding text.
The left and right values cause the element float to the left or right margin.
The align attribute also appears in td elements of tables.

vertical-align CSS property

The vertical-align CSS property specifies the vertical alignment of inline elements.
This attribute can assume values: baseline, middle, top, bottom, text-top, text-bottom, etc. The default value is baseline.

In typography the baseline is an imaginary line where letters sit upon.
With the baseline value inline elements will be lined up with text at baseline of text. The value middle aligns all elements with the mean line of text. The text-bottom and text-top values align elements with the lowest point text's descenders goes down to and with the highest point the text reach. The values top and bottom work with the highest and lowest points of inline non-textual elements on the line.

Example

In the form on the linked page, textarea and input texts are lined up using the CSS property vertical-align set to middle:
http://libreriamusicale.altervista.org/contacts.html

 
The vertical-align property can also be applied to table cells elements.

Viewport Vs Canvas

If you are a web developer, you have probably wondered what is the viewport or what is the canvas. Maybe you have asked yourself whether there is any relationship between viewport and canvas.

A common definition of canvas is: "the canvas is the space where the formatting structure of a document is rendered ".
A common definitions of viewport is: "the browser viewport is the visible portion of the canvas".
Actually, the viewport definition is a little complicated because it refers to the canvas.

So, let's try to find some better ways to define canvas and viewport.

The Canvas or Document's Canvas

The browser renders HTML documents on a canvas. You can think of canvas as infinite in the two dimension of the space, but the rendering takes place in a finite region of the canvas.

How to style table borders with CSS

Let's imagine you have a HTML table containing some data, and want to style this table using CSS stylesheet.

Interesting Data

header 1	header 2
footer 1	footer 2
cell 1	cell 2
cell 3	cell 4
cell 5	cell 6

JavaScript Object's Property Printer

A JavaScript object is a collection of properties. You can think of a property as a pair (key : value).
To inspect an object in JavaScript you use the for in operator.

The following function inspects an object by looping on the properties and calling itself recursively.

var objectInspector = function recursiveObjectInspector(obj) {
    var string = '';
    for (var propName in obj) {
        if(typeof(obj[propName]) !== 'object')
            string += propName+" : "+obj[propName]+",\n";
        else
            string += '\n'+propName+' {\n'+ recursiveObjectInspector(obj[propName])+"}\n";
    }
    return string;
};

See the Pen object property inspector by Massimiliano De Simone (@maxdesimone) on CodePen.

How to JNDI datasource in jetty 6

This tutorial deals with the configuration of the mortbay jetty, that can be downloaded from the codehouse foundation: http://jetty.codehaus.org/jetty/

There are two ways to create a JNDI datasource in the jetty application server, you can set up a datasource configuring the Jetty ContextDeployer to deploy a specific WebAppContext or you can do it by configuring the Jetty WebAppDeployer.
If you configure the WebAppContext the datasource will be available for a single web application, if you configure the WebAppDeployer the datasource will be available for all the web applications.

The easiest way to create a datasource is configuring the WebAppDeployer and I'm going to show you how to do it.

You have to edit the file jetty-6.x.xx/etc/jetty.xml and add the following elements to the
server configuration:

1. an augmented list of plus configuration which is read by the server at start-up time.
2. a datasource definition as a JNDI resource
3. set a reference into the WebAppDeployer configuration

1 - The plus configuration element you need to add to the jetty.xml file:

<Array id="plusConfig" type="java.lang.String">
  <Item>org.mortbay.jetty.webapp.WebInfConfiguration</Item>
  <Item>org.mortbay.jetty.plus.webapp.EnvConfiguration</Item>
  <Item>org.mortbay.jetty.plus.webapp.Configuration</Item>
  <Item>org.mortbay.jetty.webapp.JettyWebXmlConfiguration</Item>
  <Item>org.mortbay.jetty.webapp.TagLibConfiguration</Item>
</Array>

2 - Next, the JNDI datasource definition you need to add to the jetty.xml file:

<New id="cf" class="org.mortbay.jetty.plus.naming.Resource">
  <Arg>jdbc/jndi_name</Arg>
   <Arg>
    <New class="org.apache.commons.dbcp.BasicDataSource">
     <Set name="driverClassName">com.mysql.jdbc.Driver</Set>
     <Set name="url">jdbc:mysql://localhost:3306/db_name</Set>
     <Set name="username">db_username</Set>
     <Set name="password">db_password</Set>
    </New>
  </Arg>
</New>

3 - Finally, add a set element referencing the plus configuration list within the element configuring the WebAppDeployer

<Call name="addLifeCycle">
  <Arg>
    <New class="org.mortbay.jetty.deployer.WebAppDeployer">
      <Set name="contexts"><Ref id="Contexts"/></Set>
      <Set name="webAppDir"><SystemProperty name="jetty.home" default="."/>/webapps</Set>
      <Set name="parentLoaderPriority">false</Set>
      <Set name="extract">true</Set>
      <Set name="allowDuplicates">false</Set>
      <Set name="defaultsDescriptor">
        <SystemProperty name="jetty.home" default="."/>/etc/webdefault.xml
      </Set>
      <Set name="configurationClasses"><Ref id="plusConfig"/></Set>
    </New>
  </Arg>
</Call>

This is how it looks like the jetty.xml file, finally:

<?xml version="1.0"?>
<!DOCTYPE Configure PUBLIC "-//Mort Bay Consulting//DTD Configure//EN" "http://jetty.mortbay.org/configure.dtd">

<!-- =============================================================== -->
<!-- Configure the Jetty Server                                      -->
<!--                                                                 -->
<!-- Documentation of this file format can be found at:              -->
<!-- http://docs.codehaus.org/display/JETTY/jetty.xml                -->
<!--                                                                 -->
<!-- =============================================================== -->


<Configure id="Server" class="org.mortbay.jetty.Server">

 <!-- PLUS Configuration -->
 <Array id="plusConfig" type="java.lang.String">
  <Item>org.mortbay.jetty.webapp.WebInfConfiguration</Item>
  <Item>org.mortbay.jetty.plus.webapp.EnvConfiguration</Item>
  <Item>org.mortbay.jetty.plus.webapp.Configuration</Item>
  <Item>org.mortbay.jetty.webapp.JettyWebXmlConfiguration</Item>
  <Item>org.mortbay.jetty.webapp.TagLibConfiguration</Item>
 </Array>
 <!-- END PLUS Configuration --> 

 <!-- JNDI DataSource Definition -->
 <New id="cf" class="org.mortbay.jetty.plus.naming.Resource">
   <Arg>jdbc/jndi_name</Arg>
   <Arg>
  <New class="org.apache.commons.dbcp.BasicDataSource">
   <Set name="driverClassName">com.mysql.jdbc.Driver</Set>
   <Set name="url">jdbc:mysql://localhost:3306/db_name</Set>
   <Set name="username">db_username</Set>
   <Set name="password">db_password</Set>
  </New>
   </Arg>
 </New>
 <!-- END DataSource Definition -->
 
    <!-- =========================================================== -->
    <!-- Server Thread Pool                                          -->
    <!-- =========================================================== -->
    <Set name="ThreadPool">

      <New class="org.mortbay.thread.QueuedThreadPool">
        <Set name="minThreads">10</Set>
        <Set name="maxThreads">200</Set>
        <Set name="lowThreads">20</Set>
        <Set name="SpawnOrShrinkAt">2</Set>
      </New>

      <!-- Optional Java 5 bounded threadpool with job queue 
      <New class="org.mortbay.thread.concurrent.ThreadPool">
        <Set name="corePoolSize">50</Set>
        <Set name="maximumPoolSize">50</Set>
      </New>
      -->
    </Set>



    <!-- =========================================================== -->
    <!-- Set connectors                                              -->
    <!-- =========================================================== -->
    <!-- One of each type!                                           -->
    <!-- =========================================================== -->

    <!-- Use this connector for many frequently idle connections
         and for threadless continuations.
    -->    
    <Call name="addConnector">
      <Arg>
          <New class="org.mortbay.jetty.nio.SelectChannelConnector">
            <Set name="host"><SystemProperty name="jetty.host" /></Set>
            <Set name="port"><SystemProperty name="jetty.port" default="8080"/></Set>
            <Set name="maxIdleTime">30000</Set>
            <Set name="Acceptors">2</Set>
            <Set name="statsOn">false</Set>
            <Set name="confidentialPort">8443</Set>
         <Set name="lowResourcesConnections">5000</Set>
         <Set name="lowResourcesMaxIdleTime">5000</Set>
          </New>
      </Arg>
    </Call>

    <!-- Use this connector if NIO is not available. 
    <Call name="addConnector">
      <Arg>
          <New class="org.mortbay.jetty.bio.SocketConnector">
            <Set name="port">8081</Set>
            <Set name="maxIdleTime">50000</Set>
            <Set name="lowResourceMaxIdleTime">1500</Set>
          </New>
      </Arg>
    </Call>
    -->

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    <!-- To add a HTTPS SSL listener                                     -->
    <!-- see jetty-ssl.xml to add an ssl connector. use                  -->
    <!-- java -jar start.jar etc/jetty.xml etc/jetty-ssl.xml             -->
    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    <!-- To allow Jetty to be started from xinetd                        -->
    <!-- mixin jetty-xinetd.xml:                                         -->
    <!--   java -jar start.jar etc/jetty.xml etc/jetty-xinetd.xml        -->
    <!--                                                                 -->
    <!-- See jetty-xinetd.xml for further instructions.                  -->
    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    
    <!-- =========================================================== -->
    <!-- Set up global session ID manager                            -->
    <!-- =========================================================== -->
    <!--
    <Set name="sessionIdManager">
      <New class="org.mortbay.jetty.servlet.HashSessionIdManager">
        <Set name="workerName">node1</Set>
      </New>
    </Set>
    -->

    <!-- =========================================================== -->
    <!-- Set handler Collection Structure                            --> 
    <!-- =========================================================== -->
    <Set name="handler">
      <New id="Handlers" class="org.mortbay.jetty.handler.HandlerCollection">
        <Set name="handlers">
         <Array type="org.mortbay.jetty.Handler">
           <Item>
             <New id="Contexts" class="org.mortbay.jetty.handler.ContextHandlerCollection"/>
           </Item>
           <Item>
             <New id="DefaultHandler" class="org.mortbay.jetty.handler.DefaultHandler"/>
           </Item>
           <Item>
             <New id="RequestLog" class="org.mortbay.jetty.handler.RequestLogHandler"/>
           </Item>
         </Array>
        </Set>
      </New>
    </Set>
    
    <!-- =========================================================== -->
    <!-- Configure the context deployer                              -->
    <!-- A context deployer will deploy contexts described in        -->
    <!-- configuration files discovered in a directory.              -->
    <!-- The configuration directory can be scanned for hot          -->
    <!-- deployments at the configured scanInterval.                 -->
    <!--                                                             -->
    <!-- This deployer is configured to deploy contexts configured   -->
    <!-- in the $JETTY_HOME/contexts directory                       -->
    <!--                                                             -->
    <!-- =========================================================== -->
    <Call name="addLifeCycle">
      <Arg>
        <New class="org.mortbay.jetty.deployer.ContextDeployer">
          <Set name="contexts"><Ref id="Contexts"/></Set>
          <Set name="configurationDir"><SystemProperty name="jetty.home" default="."/>/contexts</Set>
          <Set name="scanInterval">5</Set>
        </New>
      </Arg>
    </Call>

    <!-- =========================================================== -->
    <!-- Configure the webapp deployer.                              -->
    <!-- A webapp  deployer will deploy standard webapps discovered  -->
    <!-- in a directory at startup, without the need for additional  -->
    <!-- configuration files.    It does not support hot deploy or   -->
    <!-- non standard contexts (see ContextDeployer above).          -->
    <!--                                                             -->
    <!-- This deployer is configured to deploy webapps from the      -->
    <!-- $JETTY_HOME/webapps directory                               -->
    <!--                                                             -->
    <!-- Normally only one type of deployer need be used.            -->
    <!--                                                             -->
    <!-- =========================================================== --> 
    <Call name="addLifeCycle">
      <Arg>
        <New class="org.mortbay.jetty.deployer.WebAppDeployer">
          <Set name="contexts"><Ref id="Contexts"/></Set>
          <Set name="webAppDir"><SystemProperty name="jetty.home" default="."/>/webapps</Set>
          <Set name="parentLoaderPriority">false</Set>
          <Set name="extract">true</Set>
          <Set name="allowDuplicates">false</Set>
          <Set name="defaultsDescriptor"><SystemProperty name="jetty.home" default="."/>/etc/webdefault.xml</Set>
          <Set name="configurationClasses"><Ref id="plusConfig"/></Set>
        </New>
      </Arg>
    </Call> 

    <!-- =========================================================== -->
    <!-- Configure Authentication Realms                             -->
    <!-- Realms may be configured for the entire server here, or     -->
    <!-- they can be configured for a specific web app in a context  -->
    <!-- configuration (see $(jetty.home)/contexts/test.xml for an   -->
    <!-- example).                                                   -->
    <!-- =========================================================== -->
    <Set name="UserRealms">
      <Array type="org.mortbay.jetty.security.UserRealm">
        <Item>
          <New class="org.mortbay.jetty.security.HashUserRealm">
            <Set name="name">Test Realm</Set>
            <Set name="config"><SystemProperty name="jetty.home" default="."/>/etc/realm.properties</Set>
            <Set name="refreshInterval">0</Set>
          </New>
        </Item>
      </Array>
    </Set>

    <!-- =========================================================== -->
    <!-- Configure Request Log                                       -->
    <!-- Request logs  may be configured for the entire server here, -->
    <!-- or they can be configured for a specific web app in a       -->
    <!-- contexts configuration (see $(jetty.home)/contexts/test.xml -->
    <!-- for an example).                                            -->
    <!-- =========================================================== -->
    <Ref id="RequestLog">
      <Set name="requestLog">
        <New id="RequestLogImpl" class="org.mortbay.jetty.NCSARequestLog">
          <Set name="filename"><SystemProperty name="jetty.logs" default="./logs"/>/yyyy_mm_dd.request.log</Set>
          <Set name="filenameDateFormat">yyyy_MM_dd</Set>
          <Set name="retainDays">90</Set>
          <Set name="append">true</Set>
          <Set name="extended">false</Set>
          <Set name="logCookies">false</Set>
          <Set name="LogTimeZone">GMT</Set>
        </New>
      </Set>
    </Ref>

    <!-- =========================================================== -->
    <!-- extra options                                               -->
    <!-- =========================================================== -->
    <Set name="stopAtShutdown">true</Set>
    <Set name="sendServerVersion">true</Set>
    <Set name="sendDateHeader">true</Set>
    <Set name="gracefulShutdown">1000</Set>

</Configure>