Regular Expressions

/ [^ ] * / g Door County is beautiful year-round

Match a sequence of zero or more characters that are not a space. The /g in the first one
above makes the match global.

/ [^ ] * / Door County is beautiful year-round

Without /g only the first occurrence in the string is matched.

/ .*[ ] / U Door County is beautiful year-round

Match a sequence of zero or more characters that ends with a space. The dot (.) will match any character, including spaces. The * says zero or more. Then there is a space, so the string we are matching must end with a space character. The /U option makes it "ungreedy", so that it matches the first, smallest substring it encounters, rather than the longest substring.

/ ^https?:\ / \ / / http://www.https.com

Match "http://" or "https://" at the beginning of a sequence. s? says match a single s if there's one otherwise skip. The two forward slashes which are special characters have to be escaped with two backward slashes.

Some regex rules:

• Dot (.) matches any character, except newlines. If you provide a /s modifier then it will match newlines too. Example: /^The.*/s would match any sequence of text where the first line starts with the word "The", until it reaches the end of the text being searched.
  
• If you need to explicitly match a dot (aka period), then you need to escape it. Let's change the example above as follows: /^The.*\./s Now it will only match until it encounters a period, which could be on a different line of the text.
  
• The ^ character in the above examples means match from the beginning of the text being searched.
• You can also match at the end of the text being searched with $. So /\.$/ would match any string that ends with a period.
  
• Instead of matching zero or more, you can also match one or more using +
• You can also match zero or one, using ?
• Curly braces let you define a length range you want to match, so you write {minlength,maxlength}. Example: Suppose you want to match a series of the character "a" that has a length between 3 and 6. You can do it like this: a{3,6}
• Square brackets defines a set of characters to match. So [ab] will match either a or b. This could also be written as [a-b]. If you wanted to match any lower case alphabet character, you'd write [a-z].
• You can also use an "or", so that you match one string or another. Suppose you want to match "abc" or "xyz". You write it like this: /(abc)|(xyz)/ Actually the parenthesis are not needed, but are good for making it clear.
• Note that the starting and end slashes / are the delimiters of the regular expression (the start and end). You can place modifiers, like the g after the ending slash to change the way the regular expression is interpreted.

Chocolate Pudding

This NY Times picture of a chocolate mousse reminded me of all the chocolate puddings I ate growing up, hence my title. I'm going to substitute milk for water to approximate a pudding. By the way, clicking on the image will directly take you to Melissa Clark's single ingredient chocolate mousse video.
Image Credit: NY Times

Secure Shell

If you SSH into the command line in your server, or SFTP into your server, or use github, you'll need a SSH key. On your Mac, type cd~/.ssh and you'll be taken to the hidden ssh directory. Hidden files receive a period in the front. A directory listing (ls) will give you the private and public keys, id_rsa and id_rsa.pub. If you already have these keys, you can write over them for the sake of this exercise. First copy both keys in backup files.

Then let's run the keygen command from the terminal: ssh-keygen -t rsa -C "myblog@gmail.com"

which will generate a new set of keys. One of the parameters "rsa" is a type of encryption scheme. ls -l will show the new and the old backup keys.

To add the new key to the ssh-agent: ssh-add id_rsa

Do a "cat id_rsa.pub" and copy the contents of your public key. Then go to your github account, and under Profile, find "Settings" and choose "SSH keys" from the left pane. Add "New Key" then test your new key by doing a pull to make sure everything still works with github. You'll also be copying the new public key over to your server.

To connect to github.com over SSH and test your new key:

$ssh -T git@github.com

If you receive a message telling you that you have successfully authenticated, then all is well.

Chrome Debugging from JSFiddle

I didn't know you could do this. I just learned about it. Bring up the Developer Tools either by pressing Command, Option and J together or choosing View > Developer > Developer Tools. Stay at "Sources", and expand fiddle.jshell.net in the left pane. Choose index which will show you your code.

httpd.exe

is short for HTTP Daemon processes. If you are having port issues with Apache, terminate all the httpd.exe processes. Apache starts up multiple processes because it is expecting to handle multiple incoming requests and hand off the requests to different child processes for faster performance. If you kill off one of the child processes, the httpd parent process will automatically restart the child once it detects that the child is dead. None of this sounds good but that's the terminology and there's even a "daemon" in there. So to kill httpd successfully you have to kill the parent first.

git

To see if Git is installed on your computer: $git

If you don't have git, to install it: http://git-scm.com/downloads

To find out which version of Git that you have: $git --version

"which" tells you where the command is located on the disk so it gives you the path to it. It will only work on executables. To find out where Git is installed: $which git

There's one file called .gitconfig in the home directory with global git settings. To setup username and email key to associate with your commits:
$git config --global user.name "Josephine March"

To make your Git color coded: $git config --global color.ui true

If you change your permissions, git will ignore it if you run this command:
$git config --global core.filemode

Telling git to use nano as your CL text editor. This is very helpful with merges.
$git config --global core.editor nano

To see all the configurations:
$git config --list

To add a single untracked file into the repository:
$git add {filename}

To add all untracked files into the repository:
$git add .
$git add --all

To show what changes have been made:
$git diff

To show what changes have been made in a single file:
$git diff {filename}

Adding a file is staging. If you want to undo a stage:
$git reset HEAD {filename}

If you make changes in a file that's in a git repository and you have not yet staged them, you can reverse the changes with this command:
$git checkout {filename}

Github.com, place to store git repositories

d r w x r - x r - x Miné Jan 31 22:00

First slot: Is it a file or directory? Next set of triple slots is for the User, then the next three is for the Group and finally the last 3 spots is for Everyone. File permissions can also be represented using octal notation. r is 4(2^2), w is 2(2^1), and x is 1(2^0). So if it's readable, writeable and executable, it means it's a 7. If a file or directory is readable and executable but not writeable then that's a 5. You can convert between symbolic and octal representation using this tool.

Haas Neue Grotesk

Do you know what Crate & Barrel, Lufthansa, Energizer, SAAB, North Face, American Airlines, Urban Outfitters, NASA, Fendi, Staples and IRS Tax Forms have in common?

Read more »

BNF Notation For Syntax

BNF or Backus Normal Form is a computer science notation technique that's useful in describing the syntax of a language. This Wikipedia article is an easy example that shows how it works:

Read more »

How To Disable Text Area Resize

Resizable text areas are good as long as when you extend them, they don't "break" your page
visually.

Read more »

Data Security

There's a new report by leading computer scientists on encrypted communication.

Testing Mobile with Google Chrome

You can view sites as they would appear on a mobile device from your desktop browser. There is a hamburger menu on the right that lets you customize and control Chrome. From that menu, choose More Tools > Developer Tools.

Read more »

Firebug to the Rescue

So I'm looking at a weather report online and next to the temperature I get this wiggly sign that's supposed to tell me something more about the day.

Read more »

How to Hang a Picture

Never one good with a level, two by fours, and hanging, I consider myself successful if a picture is not noticeably crooked. But if you wanted to do it perfectly, the experts have figured out the science behind hanging pictures:

© cssbakery.com

The rule of thumb is to hang your picture at anywhere between 56” and 60” on center. For 57 inches, "on center” means that the middle of the picture is always 57” from the floor.

Measuring from the floor, mark 57” on the wall. Measure the height of your picture and divide by two. This is your center. Measure the top of your picture to its tightened wire, tw.

Subtract tw from ½ the picture’s height. This number will tell you how far above your initial 57” mark you should place your hook.

Example: A 20” tall photo with a tight wire located 2” below
the top should have a hook placed at 8” above the mark. 10” – 2” = 8”; the hook should be placed 65” off the floor.

Kelly Phillips Badal

* This post was made using a blockquote class from a previous CSS post.

Half Billion Dollar Art Heist Still a Mystery

Isabella Stewart Gardner Museum in Boston was the setting for the crime committed 25 years ago.

Into Winter

Image by Susulyka CC BY-SA via Wikimedia Commons
Beech Forest in Mátra

Image Captioning Tool Enhancements

There's a new version of the Image Captioning Tool, my jQuery plug-in. I've added capabilities to truncate a larger image and also play an MP3 audio when the user hovers over an image. Move your mouse over the example image above to see how it works. To try it out on one of your images, see the Captioning Tool. Music by Coldplay.

Read more »

Basic CSS Drop Cap

Alorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare velit sed libero tristique, ut pellentesque quam porta. Proin iaculis posuere aliquam. Aenean semper vulputate nisl et ornare. In adipiscing pretium ante vestibulum faucibus. Cras molestie, urna vel dignissim sollicitudin, mauris nisl condimentum leo, sit amet hendrerit nisi magna ut lorem. Sed ac porta augue. Sed feugiat odio at auctor venenatis. Donec eu scelerisque neque. Nulla facilisi.

Read more »

Javascript Apply

In Javascript, everything is an object. So, unlike Java and C++, Javascript functions are also objects which come with some built-in methods that you can call. One of the methods is apply which lets you call the function and explicitly pass the value of the "this" parameter as well as the arguments to the function as an array.

Read more »

CSS3 Keyframes & Animation Property

Start/Stop

Read more »

A New Search Engine: DuckDuckGo

Did you know that Google takes you on a quick detour every time you click on a search result? So Google knows not only what you searched on, but where you went with that search which is all stored indefinitely in a database on their servers.

Read more »

Rotating Text & Making Columns with CSS3

Read more »

Encrypting Email

Here's a few options to help you encrypt your email.

Read more »

Flat Design

Is less more in web design? Decide for yourself after seeing this flat design aesthetic discussion.

Believing in an Open Internet

A New York Times video by Brian Knappenberger.

Setting up SSL on an Apache Server

I administer my own Apache2 server running on Ubuntu, and I had previously setup SSL using a self-signed certificate. Recently I needed to start using a certificate signed by a Certificate Authority to avoid the "untrusted site" browser warnings. In this post I outline the steps I went through to set it up.

Read more »

CSS Vendor Prefixes

When a new CSS property is being developed, and does not yet have a final, consistent implementation across browsers, you want to write it using vendor prefixes for each browser. That's a total of four statements with vendor prefixes followed by the official, unprefixed property for future use when the new property's implementation is completed.

To review the prefixes, we have: -webkit- for Google Chrome and Safari, -moz- for Firefox, -ms- for Internet Explorer and -o- for Opera. If you are unsure whether a CSS property needs a vendor prefix, there's a website which will answer that question for you.

CSS Drop Caps

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare velit sed libero tristique, ut pellentesque quam porta. Proin iaculis posuere aliquam. Aenean semper vulputate nisl et ornare. In adipiscing pretium ante vestibulum faucibus. Cras molestie, urna vel dignissim sollicitudin, mauris nisl condimentum leo, sit amet hendrerit nisi magna ut lorem. Sed ac porta augue. Sed feugiat odio at auctor venenatis. Donec eu scelerisque neque. Nulla facilisi.

Sed tempus adipiscing eleifend. Aenean aliquam nibh quis enim varius cursus. Cras ut neque eget eros mattis volutpat. Nulla et pretium massa. Suspendisse potenti. Nam id quam mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, leo dictum tempor auctor, nulla urna commodo lacus, eget vehicula nulla neque mollis velit. Quisque lobortis feugiat pharetra. Vivamus id nibh facilisis, dictum dolor quis, mattis tellus.

Read more »

Data Security in Cloud Computing

Christian Science Monitor article discusses the impact of the government surveillance programs on the American cloud computing industry. A recent report estimates an average $30 Billion Dollar loss in the next three years for US based companies.

Related 2014 news: Internet Giants Erect Barriers to Spy Agencies | Germany Cancels Deal with Verizon | NSA and Your Phone | 2014 House Proposals

Image Captioning Tool Enhancements

There's a new version of the Image Captioning Tool, my jQuery plug-in. I've added capabilities to truncate a larger image and also play an MP3 audio when the user hovers over an image.

Read more »

Elusive Beauty

Chasing Aphrodite documents the story of looted ancient artifacts that found their way to the Getty and the tenure of curator Marion True at the museum. Among other pieces, a million dollar, vine-like, delicate golden funerary wreath, and a $20 Million, 1,300 Ib statue of a woman in a flowing gown carved in limestone were returned to their source countries voluntarily by the Getty. Sharing the sepia image of the Getty Center by Michael Gäbler through Creative Commons.

Popular Programming Languages

A visualization for the most popular programming languages of 2012 on CodeEval.

Replacing CSS List Bullets with Images Using Sprites

• To create a CSS list like this one, include the styles for numberedlist class and write your markup as shown in the blue box. You can switch to an ol from a ul if you think it'll help your code semantically
• You can build your own sprite image in an image editor such as Adobe Photoshop or use this image which goes up to number 9
• If you create your own image, compute the new offsets for the background-position property which is where the spriting is done
• Good luck!   

Read more »

CSS Image Grid by Floating Different Sized Elements

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Ansel Adams Wilderness

© Copyright by Steve Dunleavy | Creative Commons Share-Alike License 2.0

The picture shows a mountain range on the Pacific Crest Trail. This is a follow up to a question in a previous image grid post. In this post, I have the first image displaying larger than the rest. The only significant difference in the code between this and that earlier post is the CSS rule that allows the first image in the list to be larger (CSS selector: #grid li:first-child img). The same thing could have been accomplished by giving the first li an id and targeting that id with the CSS rule. e.g. id="big-image" and #big-image. The other modification was to change the widths and heights in the CSS to reflect the different image sizes I am using here. Your grid images will likely be self-descriptive and distinct. The reason I used cutups from a single image was for simplicity.

Read more »

Converting Microsoft Word Docs to XML and Processing with PHP's SimpleXML

In this post, I'll describe how to do automated processing on a set of Microsoft Word documents. The task is to compare an old version of a document to a new version section by section, and generate an output table listing sections that were modified, added, deleted, or stayed the same.

You can do this sort of thing manually in Word by opening up the document and telling Word to compare it with the older version of the document.  Word will show you the diff marks and you could then scroll through the document and record all the section numbers and whether there are changes or not.  Very labor intensive and tedious.  In this case there are dozens of pairs of documents to be compared, and the whole process will need to be repeated every month as new versions of each document are created.  Clearly the manual approach would not work - this has to be automated.

Read more »

Javascript Explained: Transparent Image Captioning with jQuery and CSS

In this post I'll step through and explain the Javascript code I recently wrote for easily adding transparent captions to images. (Later I may turn this into a jQuery plugin, but for the moment it's structured as a short script you can cut and paste for use on your page.) Follow the directions from the previous post to use it. In this post I'm just going to talk about how the Javascript works. First, here's the entire script for reference:

/*
* CssBakery.com Captions v0.1
*
* Copyright (c) 2009 Cssbakery.com
* http://www.cssbakery.com
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*/
$(document).ready(function(){
var cssbakery_colors = { medblue: '#4084e1', tealblue: '#3fbff4', marineblue: '#3f3ff4',
twig: '#855434',  eggplant: '#5d2f4d', violet: '#c261e2', darkpink: '#e261a4' };

$("img.cssbakery_caption").each(function() {
var theid = $(this).attr('id');
var saveclass = $(this).attr('class').replace('cssbakery_caption','');
var theclass = ' '+saveclass+' ';
theclass = theclass.replace(' cc ','');
theclass = theclass.replace(/ /g,''); // note use of global replace
if (theclass === '') theclass='black';
if (!(typeof cssbakery_colors[theclass]=="undefined")) {
theclass = cssbakery_colors[theclass];
}
var src = $(this).attr('src');
var caption = $(this).attr('alt');
var idx = caption.indexOf(':');
if (idx >= 0) {
caption = "<strong>"+caption.substr(0,idx+1)+"</strong>"+
caption.substr(idx+1);
}
var w = $(this).width();
var pb = $(this).css('padding-bottom');
var pl = $(this).css('padding-left');
if (theid !== '') {
theid = "id='"+theid+"' ";
}
var markup = "<div "+theid+" class='cssbakery_image_wrapper "+saveclass+"'
style='width:"+w+"px'>\n<img src='"+src+"' />\n<div class='cssbakery_transbox'
style='background-color: "+theclass+"; left:"+pl+"; bottom:"+pb+";'></div><p
style='left:"+pl+"; bottom:"+pb+";'>"+caption+"</p></div>";
$(this).before(markup).remove();
$('.cssbakery_image_wrapper').children('p').each( function() {
var h = $(this).height();
$(this).siblings('div').height(h+20);
});

});
});

Now we'll break it down line by line:

$(document).ready(function(){

The first line of the script is the typical jQuery pattern for executing some code only after the Browser has completely loaded the document object model (DOM) for the page. If you aren't familiar with this, the idea is that you don't want your Javascript to run too early, before all the HTML and CSS has been loaded by the browser. If it does run too early, the HTML elements you are trying to operate on may not yet be available. jQuery solves this by providing the ready() method which registers a callback function to be executed when the DOM is fully loaded.

var cssbakery_colors = { medblue: '#4084e1', tealblue: '#3fbff4', marineblue: '#3f3ff4', twig: '#855434',
eggplant: '#5d2f4d', violet: '#c261e2', darkpink: '#e261a4' };

The second and third lines of the script initialize an array of objects that represent different color codes. You can use the names of these objects to select a color for the transparent background underneath the caption text. To make this easy to use, you can specify the color name as a class of the img tag. For example, you might write <img class="cssbakery_caption violet" src="images/whatever.jpg">, and you'll end up with hex code #c261e2 as the color of the background div. You can also use any standard CSS color name such as "blue", or even directly specify a hex code, like this: class="cssbakery_caption #afafaf".

$("img.cssbakery_caption").each(function() {
var theid = $(this).attr('id');
var saveclass = $(this).attr('class').replace('cssbakery_caption','');

Now we use jQuery to apply a function to each img tag with class of cssbakery_caption. The first part of the function is all about pulling out information from the id and class attributes of the img tag. First, the tag's id attribute is saved in variable theid, then the class string is copied into variable saveclass, but with any occurrence of cssbakery_caption removed. The idea is that we want a string that contains any other class names (other than cssbakery_caption) stored into saveclass. For example if the img tag's class attribute is "cssbakery_caption cc blue", then we end up with "cc blue" in the saveclass variable.

var theclass = ' '+saveclass+' ';
theclass = theclass.replace(' cc ','');
theclass = theclass.replace(/ /g,''); // note use of global replace
if (theclass === '') theclass='black';
if (!(typeof cssbakery_colors[theclass]=="undefined")) {
theclass = cssbakery_colors[theclass];
}

The next several lines are aimed at getting the color code stored into the theclass variable. First we remove the cc part of the class string (if present), then remove all spaces from the string. At this point if the theclass variable is empty, we default the color to black. Next we check to see if the value in theclass matches any of the objects we have stored in the cssbakery_colors array that we setup before. If it does match, then we overwrite theclass with the hex code value from the array.

var src = $(this).attr('src');
var caption = $(this).attr('alt');
var idx = caption.indexOf(':');
if (idx >= 0) {
caption = "<strong>"+caption.substr(0,idx+1)+"</strong>"+caption.substr(idx+1);
}
var w = $(this).width();
var pb = $(this).css('padding-bottom');
var pl = $(this).css('padding-left');
if (theid !== '') {
theid = "id='"+theid+"' ";
}

Now we pull some more attributes from the image: the src attribute is stored in variable src, the alt attribute is stored in variable caption. We then look for the colon character in the caption string, and if present we add a <strong> markup around the portion before the colon.

Next we pull out the width of the image into variable w, and grab padding-bottom and padding-left CSS attributes, storing them into variable pb and pl respectively. We then check to see if theid variable is not empty. If it's not we reformat it slightly to form an id attribute string such as: id='myId'.

At this point we have all the variables that we need to construct the new markup for the captioned image. So the next step is to build that markup and and put it into the document:

var markup = "<div "+theid+" class='cssbakery_image_wrapper "+saveclass+"' style='width:"+w+"px'>
<img src='"+src+"' />
<div class='cssbakery_transbox' style='background-color: "+theclass+";
left:"+pl+"; bottom:"+pb+";'></div><p style='left:"+pl+";
bottom:"+pb+";'>"+caption+"</p></div>";
$(this).before(markup).remove();

Using all the variables we've previously set, we construct a string of markup and assign it to the variable markup. We then need to replace the original image tag with the new markup. This is achieved by the line $(this).before(markup).remove().

$('.cssbakery_image_wrapper').children('p').each( function() {
var h = $(this).height();
$(this).siblings('div').height(h+20);
});

Finally, we want to set the height of the semi-transparent background div based on the height of the caption text paragraph. This code finds the paragraph, gets its height and then sets it's sibling div to that same height+20 (the extra 20 allows for some padding above and below the text). jQuery make it easy to find things like the caption paragraph. In this case, we first select all elements of class cssbackery_image_wrapper using $('.cssbakery_image_wrapper). We then find any children p elements by tacking on .children('p'). The each() method then loops over everything we found and calls the supplied function on those elements. Inside the function we grab the height of the element (so that would be the height of the paragraph). We then use that value in setting the height of the sibling div, but making use of the jQuery statement $(this).siblings() function which finds any sibling elements to the current element.

And that's the end of the script. Remember that you also need the CSS file that goes along with this for it to work (see the previous post on this subject for further instructions).

A Simple CSS Blockquote Class

Painted in 1865 for an exhibition where it was rejected by the jury, Bread and Eggs is a still life by Paul Cezanne.

Cezanne ignores the laws of classical perspective, allowing each object to be independent within the space of a picture while the relationship of one object to another takes precedence over traditional single-point perspective.

Metropolitan Museum of Art

Read more »

9-Slice Scaling

The CSS3 Backgrounds and Borders spec defines a new property called border-image. This is a powerful new way to draw borders of an element, using an image instead of a fixed color. But the usefulness of this property goes beyond just replacing border colors with parts of an image. It can be used to perform 9-slice scaling. This is a scaling technique where you divide an image into a grid of 9 images, like a tic-tac-toe grid. Then when you perform scaling, some of the 9 sub-images are scaled and others are not. Specifically, the corners are not scaled at all, whereas the non-corner images (the center and four sides) are scaled. This is shown in the diagram above.

Read more »

Visual Depth: CSS Box Shadow Property

I added a thin line of shadow to two divs in my footer using the CSS box-shadow property which takes 6 parameters, h-shadow, v-shadow, blur, spread, color of shadow and inset. First two parameters are required, the rest are optional. Since I want the shadow to appear as a horizontal line, I'm going to be moving the v-shadow 2 pixels and doing nothing in the x-axis which is the h-shadow. So far, box-shadow: 0 2px. My blur is 2 pixels for the first div, color is self-explanatory, I chose inset to have the shadow fall inside the div. [box-shadow: 0 2px 2px #397896 inset;] To see the effect, scroll down to the footer below or click here.

Poor Man's Whiteboard

Or, poor woman's board in my case. I think I actually prefer it to a dry erase board because of the way I can move the Post-it notes around.

Kraft Paper + Post-it Notes + Sharpie Pen + Hardware Store Masking Tape is the recipe :)