CSS font stacks, developer FAQs & web standards
This page is part of a searchable archive of the Code Style site log. Technical implementation notes that shed light on when, why and how the site has evolved since 2000.
Follow the latest entries to the site log.
bash utility scripts, 30th May 2009
Wrote a bash wrapper script to simplify the addition of new premium content subscriber logins via the htdigest.py python script. The script takes the subsriber's username as a single argument and passes standard arguments for the realm and password file reference.
#!/bin/sh
#
# Add a premium content subscriber
~/bin/htdigest.py ~/passwords/.htdigest "Code Style premium content" $1
Also wrote a local bash script for Cygwin to increment the FAQ asked_count value by question. The script takes the question as a single argument and executes an update on the FAQ database via psql. The asked count is used to generate the top 7 "very common questions" lists included on most section index pages.
#!/bin/sh
#
# Increment the asked count for a question
psql -c "UPDATE question SET asked_count = asked_count + 1 WHERE question = '$1';" codestyle_faq
Updated the Exim general.filter file with recent spam keywords and the FilterTest.sh bash test script to list its own test results files via cat and less on completion.
# List the preceding test results output
cat ~/filters/results-Clean.txt | less
cat ~/filters/results-Spam.txt | less
Updated the Javascript text ads page with the current top 10 search engine results keywords for the section.
Actions: Ask a question about this post, seek clarification or offer a correction.
Corrected the current year selector option for the site log archive navgiator form, which was showing 2008, not 2009.
Actions: Ask a question about this post, seek clarification or offer a correction.
Changed the scheme of the Exim mail filter create a better combination with Dovecot mail alias configuration. Rather than accept mail then decide whether its addressed to a valid recipient, the mail configuration has a specific set of accepted local part aliases that channel mail to a primary address that has the Exim filter attached.
primary: # Exim filter
# Filter commands follow
secondary: primary
tertiary: primary
This arrangement allows a simpler set of filtering commands without pre-qualification.
# Exim filter
# Precautionary exclusion
#############################################
if error_message then finish endif
# Distinctive comment form submissions
#############################################
if $h_subject: begins "Prefix 1: "
or $h_subject: begins "Prefix 2: "
then
save $home/dovecot/boxes/clean/
finish
Also added a set "benefit of the doubt" spam keywords to manually check rather than discard, and exclusion for persistent spam from addresses.
# Benefit of the doubt check
#############################################
elif $h_subject: contains "ambiguous phrase"
or $h_subject: contains "stem-word"
...
then
save $home/dovecot/boxes/filter-spam/
finish
# Persistent spam addresses
#############################################
elif $h_from: contains "@spam-domain.example"
then
seen
finish
Having tested and checked the filter, definite spam is discarded without reading using the seen command. Whatever remains is delivered.
# Exclude spam
#############################################
elif $h_subject: contains "[SPAM]"
or $h_subject: contains "amazing pill"
...
then
seen
finish
# Not spam
#############################################
else
save $home/dovecot/boxes/clean/
finish
endif
Now requires a new mailedit approach using vi to import the filter and aliases.
$ mailedit example.com
# Clear the existing mail configuration
dG
# Import the filter file
:r! cat ~/filters/general.filter
# Import the alias file
:r! cat ~/filters/general.aliases
# Return to the top of the configuration file
1G
# Switch to insert mode
i
# Prefix the filter with the primary local part
primary:
# Switch to comand mode
[esc]
# Save and quit
:wq
mailedit: Mail configuration successfully updated
$
Created some further email test files and a bash script to test each case. The outcome of the filters is either a Save or Seen command, so egrep is used to append the key part of each test result.
sendmail -bf ~/filters/general.filter <~/filters/clean-Test009.eml |egrep 'Save|Seen'>>~/filters/results-Clean.txt
Also created a bash script to archive Tomcat access logs daily via a uschedule job. Completed a working draft UpdateProfile servlet class using the Apache Commons File Upload library to answer a question about managing uploaded files.
Actions: Ask a question about this post, seek clarification or offer a correction.
Increased the JAVA_OPTS memory allocation in the Tomcat start script to give extra performance headroom.
JAVA_OPTS="-server -Xms256m -Xmx256m"
Actions: Ask a question about this post, seek clarification or offer a correction.
Corrected a save command entry in the Exim mail filter to include a trailing slash for the Dovecot mailbox directory. Also added explicit finish commands after the save action to stop further processing.
Actions: Ask a question about this post, seek clarification or offer a correction.
Created an Exim email filter for Dovecot and a set of test emails. The filter conditions quickly narrow out obvious spam before further processing.
# Precautionary exclusion ############################################# if error_message then finish endif# Comment spam filtered at source, save to bulk check ############################################# if "$h_to:, $h_cc:, $h_bcc" contains "aaa@example.com" then save $home/dovecot/boxes/spam/ finish endif
Since amended by changes on 23rd May.
# Recognised addresses ############################################# if "$h_to:, $h_cc:, $h_bcc" contains "xxx@codestyle.org" or "$h_to:, $h_cc:, $h_bcc" contains "yyy@metacentric.net" ... # Mailing list addresses ############################################# or "$h_to:, $h_cc:, $h_bcc" contains "zzz@lists.sourceforge.net" then# Distinctive comment form submissions ############################################# if $h_subject: begins "Prefix 1: " or $h_subject: begins "Prefix 2: " then save $home/dovecot/boxes/clean/ finish # Exclude spam ############################################# elif $h_subject: contains "[SPAM]" or $h_subject: contains "amazing pill" ... then save $home/dovecot/boxes/spam/ finish # Not spam ############################################# else save $home/dovecot/boxes/clean/ finish endif# Not a recognised address ############################################# else save $home/dovecot/boxes/spam/ finish endif
Made some notes on importing the Exim filter to Dovecot via the mailedit interface and vi editor.
$ mailedit example.com
# Clear the existing mail configuration
dG
# Import the filter file
:r! cat ~/filters/general.filter
# Return to the top of the configuration file
1G
# Switch to insert mode
i
# Prefix the filter with wildcard local part
*:
# Switch to comand mode
[esc]
# Save and quit
:wq
mailedit: Mail configuration successfully updated
$
Actions: Ask a question about this post, seek clarification or offer a correction.
Created a Lighttpd configuration directive to compress selected static file types, limit keep alive requests and limit the number of connections per client IP address. Compression reduces the download size of the assets to speed page load and is supported by most contemporary browsers.
# Compress output
compress.cache-dir = "/lighttpd/cache"
compress.filetype = ("text/plain",
"image/x-icon",
"text/css; charset=iso-8859-1",
"text/xml; charset=UTF-8",
"image/jpeg",
"image/png",
"image/gif",
"application/x-javascript; charset=iso-8859-1")
# Control keep-alive connections
server.max-keep-alive-requests = 4
server.max-keep-alive-idle = 4
# Limit connections per client IP
evasive.max-conns-per-ip = 10
These settings require the mod_compress and mod_evasive modules to be added to the server.module array. Output is compressed according to the content type of the source and uses the client Accept-Encoding request header to decide which to compress and serve as deflate, gzip or bzip2. The compress.cache-dir directive stores the compressed files to optimise secondary requests further.
Added a uschedule task to periodically clear the compressed file cache, as suggested by the Lighttpd compress module documentation.
find /lighttpd/cache -type f -mtime +10 | xargs -r rm
Actions: Ask a question about this post, seek clarification or offer a correction.
Updated the page copy in the EchoRequest servlet with a call to action to use it for form testing and added example form element markup. Changed sequence of the table data so that any URL parameters are listed before the HTTP headers.
Updated the copyright date in the CodeStyleTemplate class and standardised table element width attributes at 69% and set 40:60 column ratio. Changed th element class attributes to SupraHeading to make left aligned table headings with a lilac background tint. Also added a row counter variable and added Odd class values for striping.
Created a call to action server side include for the EchoRequest servlet and included it in the Java & servlets and HTML & XHTML section index pages, and the Java servlets subsection index.
Latest: Build a better CSS font stack with our font survey results:
Added the most recent site log entries and top 10 search engine keywords for Java text ads. Also added an entry about the font stack builder to the servlets in action article.
Added a shortcut redirect to the Lighttpd configuration to use in newsletter links to the font stack builder servlet.
$HTTP["url"] == "/fontstack" { url.redirect = ( "" => "http://www.codestyle.org/servlets/FontStack" ) }
Actions: Ask a question about this post, seek clarification or offer a correction.
Added BuySellAds zone code to all remaining service areas through server side includes and updated the site sponsorship page to rewrite it as a more compact banner ad service page. Created a new subsection local navigation include file for the Java servers area in the process of the update. This update also extended the use of the .LocalNav container through most of the pages of the site.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added BuySellAds zone code to the AbstractSample, FontStack servlet and FaqMenuGenerator classes. Also standardised the text ad service link on the font stack builder local navigation with the down arrow format used elsewhere.
Also completed the configuration of a CSS zone banner include file and adjusted layout and livery styles for new .SponsorZone class container in the local navigation bar. Added the banner include to all standard pages in the CSS style guide section through the Web font sampler and CSS media monitor sub-sections.
The .SponsorZone styling is based on the original .Sponsor styles with more compact margins, in CSStdLayoutCommon.css:
.SponsorZone {
clear: both;
margin-top: 0em;
margin-bottom: 0em;
}
.AdLink, .Sponsor, .SponsorText, .SponsorZone {
text-align: center;
}
.SponsorZone {
min-width: 180px;
width: 24%;
padding: 0em 0em 0.3em 0em;
}
.LocalNav .RgtBox, .LocalNav .RgtPicBox,
.LocalNav .LftBox, .LocalNav .LftPicBox,
.LocalNav .TextAd, .LocalNav .SponsorText,
.LocalNav .Sponsor, .LocalNav .SponsorZone {
width: 92%;
margin-left: 0;
margin-right: 0;
}
.LocalNav .SponsorZone {
padding-top: 0;
}
.TextAd, .Sponsor, .SponsorZone, .SponsorText,
.RgtBox, .RgtPicBox, .Book, .Software {
float: right;
margin-left: 0.5em;
}
#Content .SponsorZone p {
margin: 0em 0em 0em 0em;
padding: 0em;
}
The group selectors in CSStdLiveryCommon.css apply common font-family, font-size and text-align properties.
th, #Content .TextAd p, #Content .Sponsor p,
.SponsorZone p, .SponsorText p, .Box label,
#Content .RgtBox p, .RgtBox ul,
#Content .LftBox p, .LftBox ul,
#Footbar, #Footer, #Sidebar, .WideNav, .NavBar,
legend, #Content .MenuBox td, .ScrollMenuBox td,
.MailingList td, .MailingList th,
#Content .MenuBox p, #Content .FAQSearchBox p,
p.Information, #LinkShare ul, .QueryLinks td,
.AdRates td {
font-family: arial,
helvetica,
tahoma,
"arial narrow",
sans-serif;
}
#Content .TextAd p,
#Content .Sponsor p,
#Content .SponsorZone p,
#Content .SponsorText p,
#Content .RgtBox p,
#Content .LftBox p,
#Content .RgtBox ul,
#Content .LftBox ul,
#Footer, .AlphaLinks,
#Content .MenuBox td,
#Content .MenuBox p,
#Content .ScrollMenuBox td,
#Content .ScrollMenuBox p,
#Content .FAQSearchBox p,
#LinkShare ul, .NavBar,
.QueryLinks td {
font-size: smaller;
}
#Content .TextAd p,
#Content .Sponsor p,
#Content .SponsorZone p,
#Content .SponsorText p,
#Footbar, #Footer, .AlphaLinks,
.Caption{
text-align: center;
}
After tests in the CSS section, extended the BuySellAds zone code to all Help & FAQs section pages and the Code Style home page service area. Deployed the latest codestyle.jar package to the production host to update the font stack builder and font sampler servlets with BuySellAds zone code.
Actions: Ask a question about this post, seek clarification or offer a correction.
Archived site log January 2009, site log February 2009 and March 2009 entries and created a new Site log contents 2008 page.
Updated all Lighttpd redirect directives to a single line format for greater visual clarity and to support line sorting.
Actions: Ask a question about this post, seek clarification or offer a correction.
Created a new BuySellAds banner include file for the CSS service area.
Actions: Ask a question about this post, seek clarification or offer a correction.
Find technical implementation notes on all aspects of the Code Style site.
For a summary overview, see the annotated site log contents.
