Learning Flexbox

Flexbox Froggy is a game that helps you gain practice with flexbox properties. It's a fun game that you should try!

justify-content is a CSS property that aligns items along the main axis. The default main axis is row but you can set it to column with flex-direction: column. So if your main axis is row, then justify-content will align items horizontally. But if you reset it to column, then the alignment will be done vertically. This is an important distinction and one that is not clear in Flexbox Froggy because on their Level 2 page they state that the property aligns items horizontally.

Possible values for this property are flex-start, flex-end, center, space-between, space-around and space-evenly.

When the main axis is the row, flex-start aligns items to the left side of the flex container, with flex-end items align to the right side of the flex container. If main axis is column, then flex-start will align flex items to the top of the flex container and flex-end will align them to the bottom of the container.

With space-between, there is no space to the left of the first item or to the right of the last item. The space between all the items is equal. So items display with equal spacing between them as Flexbox Froggy states.

space-around puts equal spacing between the items but adds space to the left and to the right of the first and last items that is equal to half the space in between items. Flexbox Froggy says that space-around is equal spacing around items.

Then, space-evenly similar to space-around except that the left and the right spacing is equal to the space that is between the items instead of being half.

align-items is a CSS property that aligns items on the cross axis. So there's the main axis that you can set to row or column and your cross axis is the perpendicular to your main axis. If you main is row, then align-items will do the alignment vertically since the cross axis is the perpendicular y-axis.

The values for this property are flex-start, flex-end, center, baseline and stretch. Assuming the default value of row for the main axis, flex-start will align items to the top of their container, flex-end will align items to the bottom of the container, and center will align items to the vertical center of their flex container. Just keep in mind that if the main axis was the column, then flex-start will align items to the left of their container, flex-end will align them to the right.

flex-direction property can be set to row which causes the flex items to be displayed horizontally as a row. If set to column, then flex items are displayed vertically as a column. row-reverse and column-reverse are the same things but in reverse order. The default value for flex-direction is row.

flex-wrap property accepts nowrap, wrap, wrap-reverse. In nowrap, every item fits into a single line, in wrap, items wrap around to additional lines, wrap-reverse does the same in reverse. The default value is nowrap.

flex-basis property sets the size of the flex item along the main axis. If the main axis is row, then it controls the width, if main is column, then it controls the height. It can be set to px, percentages, or any other available units. flex-basis is a property for the flex items.

I wrote a Javascript program to produce the CSS rules for a Flexbox grid system, given a number of columns.

flex-flow property is a shorthand for flex-direction and flex-wrap. To set the main axis to row and set the flex-wrap to wrap, you can write, flex-flow: row wrap.

This file shows the difference flexbox can make for centering both horizontally and vertically (sometimes called the "holy grail" of CSS styling). You can achieve this by setting justify-content and align-items to center. Given flex-direction of row which is the default, first property aligns items horizontally, second property vertically.

For CSS Grid, there is Grid Garden.

Winter

Door County by Matthew Juzenas, CC-BY-SA 2.0

Browser Market Shares in 2018

• 14%
• 6.6%
• 64%
• 7.3%

• Safari
• Firefox
• Chrome
• IE & Edge

• 100
• 75
• 50
• 25
• 0

Browser Market Share
©2018 CSS bar graphs by cssbakery.com

The market shares looked like this in 2012.

Adding a New Property to an Object

In Javascript, you can add new properties to an object using dot notation or square bracket notation.

var myObject = {
      key1: "val1",
      key2: "val2",
      key3: "val3"
};

DOT NOTATION:

myObject.key4 = "val4";

Object { key1: "val1", key2: "val2", key3: "val3", key4: "val4" }

SQUARE BRACKET NOTATION:

With square brackets, it'll want the key name as a string.

myObject["key5"] = "val5";

Object { key1: "val1", key2: "val2", key3: "val3", key4: "val4", key5: "val5" }

Image Credit: Spot the Skylab by NASA at nasa.gov

Happy Holidays & A Joyful New Year

Winterscape Painting by Peter Mønsted, © Public Domain

Evolution of CSS Layouts

CSS provides a number of properties that affect the layout of elements on the page, including those associated with floats, positioning, inline-block, columns, flexbox and grid. Some of these CSS features are not generally useful for laying out entire pages. Positioning, while it looks promising at first, is problematic when elements have a variable heights based on content from a database for example, making it impossible to know ahead of time where to place each element.

Inline-block is good at flowing blocks next to each other and wrapping to the next line when necessary, but it can’t easily create layouts that span columns/rows. CSS columns are good for one purpose: laying out text in multiple columns, while flowing text from one column to the next, but it is not for page layout. That leaves: floats, flexbox, and grid, which are are the main focus here.

Floats have been the tool of choice for page layout for many years. They have the advantages of universal browser support, and the ability to flow other page elements around them, or below them with clears. Many page layouts can be achieved with floats, but they do not provide for vertical centering, and can’t produce the “holy grail” layout where elements are centered both horizontally and vertically. They are also complex to use, and were not intended for page layout.

Flexbox is a major advance for page layout. It’s not as universally supported in browsers as floats, but support is good and getting better. Flex items in a flex container will adjust their sizes based on the width of the container and available space. The “holy grail” layout is achievable with both horizontal and vertical centering. One disadvantage of flexbox is that it is only one dimensional. It can layout a row for each flex container, and column spanning is possible by using multiple flex containers, but two dimensional layouts with both row and column spanning are harder to achieve and generally require multiple levels of nested flex containers.

Grid is designed to solve the problem of global page layout. Unlike flexbox, it works in two dimensions, allowing you to control both the row and column positioning and spanning of elements. Like flexbox it intelligently resizes boxes based on the size of the container and available space. Browser support is not yet as good as flexbox, but it will be widely supported in the next year or two.

Grid is best for laying out large areas of the page, but for UI elements, or things like image galleries, flexbox is still the tool of choice as it can handle a variable number of elements (e.g. a variable number of images for an image gallery), and is still the best way to perform vertical centering. Thus, the ultimate “best” choice for page layout is a combination of grid and flexbox, with grid controlling the big picture, and flexbox for individual UI elements. At last, floats can now return to their original intended purpose of flowing paragraph text around images!

Image Credit: Chicago by NASA at nasa.gov

CSS Grid

I just learned this technique from Jen Kramer. You can use CSS Grid to create a layout that looks like an existing Mondrian painting.

Start with the painting you want to re-create, and identify all the grid lines, both vertical and horizontal. To determine the vertical grid lines, start with number 1 at the far left, then scan across the painting. Anywhere you see the right edge of a box, create the next vertical grid line. Number them in sequence from left to right.

Do the same for the horizontal grid lines. Grid line 1 is at the top of the painting. Then anywhere you see the bottom edge of a box, create the next horizontal grid line.


Now that you have the grid lines defined, you can easily determine the grid-row and grid-column values for each box. For example in the drawing above, box "e" has grid-row: 3/6; and grid-column: 2/3.

Next you need to determine how wide each column is and how tall each row is. Put these dimensions into the properties "grid-template-columns" and "grid-template-rows" of the grid container. When measuring these dimensions be sure to not include the black gaps between the boxes. For example, for row 2/3 in the diagram, measure from the top of box "g" to the bottom of box "b".

You'll also need measurements for the horizontal and vertical gaps between the boxes. Put these measurements into the "grid-gap" property of the grid container.

Next set the background colors of your boxes. The container should have a black background, and various boxes within the container should have their own background colors to match the original painting.

Image Credit: Kristine, Mondrian Dress, 1965, CC BY NC 2.0

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.

Door County © by Leif and Evonne, CC License

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 »

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.

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 »

Green Salsa

Four ingredients: Tomatillos, Serrano Peppers, Onions, and Garlic. The only rule: Every single vegetable must be roasted or grilled. Combine the cooked ingredients in the food processor. Season with salt and pepper to your liking. No oil of any kind needed. Enjoy!

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 »

Ocean Crossing

In a 21', single handed, all the way to Hawaii.

• July 7 - You can see the drift when the wind died down. They are further along today. One boat turned back (small triangle on map). My favorite for the race is Daisy Cutter.
• July 7 Evening - Race favorite Sammarcelli is coming back to the Marina. Daisy Cutter is currently the only boat out in the ocean.
• July 18 - Daisy Cutter is getting very close to Hawaii.
• July 21 - Almost there..
• Sean McGinn sailed Daisy Cutter, his TransAt 6.50 from California to Hawaii in 17 days. Similar trip, larger boat, broken self-steering, 24 days.

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.

Yogurt Biscuit

This is a different take on a recipe I posted a while back.

Read more »

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 »

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 :)

CSS Image Grids

CSS Image Grids

• Grid Using Sprites
• Grid Using CSS Floats
• Building Grids: Size and Crop an Image Using CSS
• Grid by Floating Different Sized Images
  

CSS Frameworks

CSS FRAMEWORKS

• 960 Grid System
• Blueprint
• YUI Grids

The individual 960 Grid and Blueprint bitmaps that appear in the icon compositions (above and also on the main page) belong to the respective websites.

960 Grid System: A CSS Framework

After working with Blueprint last week, I want to generate the same layouts using the 960 Grid System, which is a CSS framework based on a width of 960 pixels with either 12, 16, or 24 columns. The column widths for these difference schemes are 80, 60 and 40 pixels respectively. In this post I am only going to focus on the 24 column layout of 960 grid.

Read more »

Using Blueprint CSS Framework

You can use the Bluprint CSS framework to easily create complex multi-column layouts. Some people are against using CSS frameworks because the class names are not semantic, and are instead used to specify the layout. In that sense the frameworks are mixing presentation into the markup. But even if you don't want to use it on a production site, you might still find it useful for rapidly prototyping a layout.

Read more »

Embedding JWPlayer in Your Web Page

jwplayer - Alternate content

Using a popular media player called JW Player, I'm going to show you how to change your markup to embed a video player.

Read more »

Configuring Filezilla to Access SFTP Servers

ileZilla is an open source FTP/SFTP client that lets you drag and drop files between your local machine and your server. I'm going to write the instructions for setting it up. (There is also a Filezilla FTP/SFTP server, but I'm just talking about the client). A quick note for CSS people: I made the dropcap that started this paragraph by floating the red FileZilla bitmap to the left, and then giving it a right margin of 10 and top margin of 4 pixels.

If you are not familiar with FTP/SFTP, these are just protocols for transferring files. The protocols are described in RFC 959 and this Internet draft. A protocol is just a set of rules for how to exchange messages and data between computers.

On a typical Linux server there will be a SSH deamon process that handles incoming SSH and SFTP requests. A deamon process is a Unix/Linux program that's always running. So, Filezilla running on your local machine talks to the deamon process/program running on your server to accomplish the file transfer.

Read more »

Setting Name Servers for Your Domains

After you get a new domain name, you need to tell DNS how to resolve that name into an IP address for your Web server. DNS requests are initiated by the browser. Anytime you go to a website, the domain name must be mapped into an IP address.

The first step in setting up your domain is to map your domain name to your hosting provider's name servers. If you are using GoDaddy, here's the domain details page, where you'll find the "Nameservers" pulldown. Select "Set Nameservers".

Read more »

Fonts for the Web: Typekit by Adobe

Typekit Adobe provides online fonts for websites.  You can sign up for different plans here.  Here are the steps for using the service:

1. Go to www.typekit.com and Sign In (upper right).
2. In the pulldown at the upper right, select the site to work with.
3. Click "Launch Kit Editor"
4. Find a font and click "Add to Kit"
5. Now in the typekitEditor, add a selector for the new font and click Add.
6. There may be multiple weights and styles available, if so choose the ones you want. Note that the more you add, the more your kit download will grow in size.
7. In your markup, use the selectors that you added for the font.

Also: If you haven't already embedded the kit code in the section of your page that will be using the fonts, then in the typekitEditor, click "Embed Code" (at upper right). Cut and paste the two script sections into your document head.

To delete a project that you no longer need, go to "Launch Kit Editor". "Kit Settings" link in the upper right corner of the Kit Editor takes you to a page where you are given the option to delete the entire project.

I am using a Typekit font for my blog post headings. Adobe added a grey colored, fixed positioned Typekit colophon badge in the bottom right corner of my blog when I initially set it up. Since I pay for their services, I don't feel the obligation to advertise for them in the blog. To remove their logo, go to "Launch Kit Editor">"Kit Settings">"Colophon Settings" and uncheck "Enable Colophon Badge".

Using Notepad++ to Edit Files on the Server over SFTP

For quick tasks and transfers, FileZilla, an SFTP client, is great but manually uploading local files to the server via standalone FTP/SFTP clients can waste time if there's a lot of back and forth. By configuring the built-in SFTP client within Notepad++, you can edit files directly from the server, validate from the browser - Tools option in Firefox Web Developer Add-on gives you direct access to W3C HTML and CSS Validators - and be finished in a flash.

Notepad++, written in C++, is a source code editor, not a word processor.

SETTING IT UP

• In Notepad++ go to the Plugins menu and select NppFTP->Show NppFTP Window.
• Click on the "gear" icon (6th icon from the left).
• Choose "Profile Settings"
• Click the "Add new" button.
• Enter the name of the new profile and click OK.
• Enter the hostname which is the full URL.
• For connection type choose SFTP.
• Leave port number at 22.
• Enter username and password.
• For Initial remote directory, enter: public_html
• Click "Close"

CONNECTING

Click the connection list icon is NppFTP. and choose the server you want to connect to. The first time you connect to a given server you will be asked if you trust the host key. Say yes. You shouldn't be asked again after the first time. Now you should see the directory structure on the server. Choose a file to edit and double click it. Make your edits, and Save the file. Notepad++ will send the changed file up to the server.

Changing File Associations in Windows

Microsoft Word's been after me, popping up every time I click on a text file. Thinking I’ll be on WordPad, I am taken to the trial version of Microsoft Word instead, which asks me for a key, and registration that I do not have. You are forced to click through a series of buttons before Microsoft lets you go.

Here are the instructions for changing file associations in Windows 7. For Windows 8, see my notes after the list.

From the Start menu:

• Choose “Default Programs”
• Choose “Associate a file type or protocol with a program”
• Wait while it loads...
• Double Click on the extension (e.g. .doc, .rtf).
• Double Click on program to use: e.g. Wordpad.
• If you don’t see the program you want, click the little pulldown icon on the “Other Programs” line, then choose.

The instructions for Windows 8 is the same but finding the Default Programs has changed. Click on the far edge of the task bar which brings up a group of functions that include the magnifying glass. Choose search and type in Default programs. Follow the instructions starting from step 2.

jQuery and jQuery UI

jQuery is a Javascript library that allows you to easily manipulate - compared to writing your own raw Javascript - your HTML document, handle events such as mouse clicks and perform AJAX calls to a server. It hides many cross-browser inconsistencies from you. It's also easy to extend by writing plug-ins.

jQuery UI provides reusable user interface components including things like datepicker, tabbed interface, accordion and dialog boxes. It also makes it easy to create drag and drop functionality. You can customize the appearance of the components - called widgets - using a number of predefined themes or you can roll your own.

When you download these libraries, you have the option of using a minified, smaller version or the more readable version that includes all the whitespace formatting and commentary.

• jQuery Library, currently at 1.7.2
• jQuery UI, currently at 1.8.18
• 3 Reasons for letting Google host your jQuery

A Simple Plan

"An attempt to rob a jewelry store failed dramatically when the shop owner shot one of the intruders. The men fled the store and jumped into a Ford minivan, where a waiting driver took them around the corner and they all switched to a Chevy Tahoe. The nervous robbers crashed their SUV into a parked car less than half a mile from the store, sending the four occupants running in different directions. All were quickly apprehended by police. The four uninjured suspects ages ranging from 18 to 22 who did not realize that the police station was only four blocks away from the jewelry store, were booked into the local jail." -Yahoo News

Read more »

Testing in IE7/IE8 using IE Compatibility Mode

Microsoft has never supported installing multiple versions of IE on a single PC. (They do provide some virtual machine images for running older version of IE, but that's not the same as having multiple IE versions on the same Windows OS instance.) To run virtual machines, you have to own Windows 7 Pro or Ultimate, it will not work with Windows 7 Home Premium.

But there is still something that everyone can do: You can tell IE to go into "compatibility mode" where it behaves like an older version of IE. For example, if you are running IE8 or IE9, hit the F12 key to bring up Developer Tools. Now go to the "Browser Mode" pull down menu, and select IE 7. Your page will be re-rendered in IE7 mode.

A Computer Holga? $35 Raspberry Pi

Tiny but powerful $35 Raspberry Pi computer causes big stir on launch day. Image Credit: Schematic by Raspberry Pi

Writing a Generic CSS Blockquote Class

People do odd things in an emergency and we all have stories of ludicrous situations in an emergency which we laugh afterwards, if we are still alive.

My favorite one is of the third mate of a merchant ship who, after a tremendous explosion and thinking his ship had been torpedoed, leapt naked from his bunk and jammed both his legs down one leg of his shorts, so immobilizing himself that he had to crawl out on deck on his hands and knees. Fortunately the explosion hadn't come from a torpedo but from a closely dropped depth charge.

D. Robertson, Survive the Savage Sea

sailboat by http://cemagraphics.deviantart.com

I wanted to post a funny paragraph from a paperback I've been reading. Since we had covered CSS blockquotes before, I went back to find out how to use that class with my quote.

Read more »

Blogger Adjustments Using CSS

Another post working on Blogger software. I host my own images and have my own domain but my blog is on Blogger so any time I update the look and feel of the site, I have to work with their software. The placement of my post date could use some improvement. Here's how it looks now.

Read more »

Blogger Avatar Sitting on Top of Sidebar

I was reading comments on the blog recently when I noticed the avatar images sitting on top of my left sidebar.

Read more »

CSS3 3D Transform Example

Above you see an image of a 3D box made from a single div element, and rendered in Chrome using CSS3 3D Transforms. On one side of the box you see a small window with CSSBakery showing in it. In the live demo, that is actually an iframe that allows you to scroll and click around.

If you click on the image you'll go to the live demo, but at the moment 3D Transforms are only supported on Apple Safari and Google Chrome (and based on my tests, Chrome doesn't render it when running on Windows XP). If you don't have a Browser with 3D transform support then it'll just look like a lot of gibberish and that includes Firefox which is the browser that I use. If you are on IE, you need more than a prayer. To download Chrome for Windows, visit Google. Google Chrome with Windows 7 as your OS will display the example correctly.

Read more »