Archive | Web Development

Technologies, techniques and neat stuff on the www

CentraLUG, 6-Dec-2010, David Berube, MySQL Operations

The December meeting of the Central NH Linux User Group will be held as usual in Room 146 of the NHTI Library – details and directions can be found at http://www.centralug.org – and will feature David Berube presenting “Real World Experience with Large MySQL Deployments”

David recently attend the Percona Operations Day training covering real world howto’s on big MySQL deployments and will share what he’s learned.

About David: David is a principal at Berube Consulting. David Berube is a software developer, consultant, speaker, and writer. He is constantly researching, perfecting, and practicing his trade. He is a prolific writer, appearing in places such as Dr Dobbs Journal, Linux Magazine, IBM DeveloperWorks, PHP International Magazine, and many others. He speaks frequently, notably including his seminar series, “Making Money Using Open Source Software”. He authored the books “Practical Rails Gems” and “Practical Reporting with Ruby and Rails”, and co-authored the book “Practical Rails Plugins.” He is also a leader in the Open Source community. He was involved with the AmphetaDesk project, developing much of its Win32 GUI code.

PySIG Notes, 23-Sept-2010, Bill Freeman and Django

Seven folks attended the September meeting of the Python Special Interest Group of the Greater New Hampshire Linux User Group held as usual on the 4th Thursday of the month at the Amoskeag Business Incubator in Manchester. Bill Sconce, PySIG’s organizer, supplied milk and Janet supplied (excellent!) chocolate chip cookies.

Bill Freeman was the presenter for the night, and spoke about Django. Django is a web framework written in Python. It supports the WSGI web server gateway interface specification which allows a standard way of connecting to web servers and provides facilities to “stack” additional WSGI-compliant applications to act as filters, caches, security modules, etc. between the web server and your application. Bill walked through the flow of data through the application’s architecture from http request, through parsing, views and the template language, processing in the ORM and out as the http response. There are hooks galore where you can add your own code, modifying the flow of data and responses. Django is a world-class web framework, with facilities to plug in additional “engines” — mini-applications — and add your own template tags, customize the automated generate of the data schema, and of course, write your own application logic. It’s Open Source, it’s Python, and the code is there for you to mess with. Django’s most popular add-on provdes an administrative function that provides developers (and, optionally, their customers) with simple add/edit/delete forms. Django seems to be a platform well worth considering if you’re interested in web apps in Python. Bill’s slides are available on the GNHLUG wiki.

Thanks to Bill Freeman for a great presentation, to Bill Sconce for organizing the meeting, to Janet for the awesome cookies, and to the Amoskeag Business Incubator for providing the fine facilities.

Notes from Ruby SIG, 16-Aug-2010

The New Hampshire Ruby/Rails group met as usual on the 3rd Monday of the month. We met at the New Hampshire Innovation Commercialization Center, a new space near the Pease airfield. Mark Galvin, NHICC’s Managing Director, was kind enough to offer the space for our meeting and tell us about the ICC. Eleven members attended the meeting.

As we often do, we started with a round of introductions. It’s always interesting to find out who’s there and what they’re up to. I mentioned the GNHLUG calendar and Nick plugged the upcoming Ruby Rampage. Near the end of the meeting, we plugged the NorthEast RailsCamp, coming up on it’s third meeting, this one in Stowe, VT. 5 alums from previous camps were there, and all loved it. There may still be a ticket or two left, even though the site says zero – you’d better hurry!

We were lucky enough to have two presentations tonight.

Brian Turnbull presented “Interfacing Ruby with C.” He explained he needed to do some automation with a “black box” his company was using, and their documentation consisted of a C API and a DLL. Rather than developing an entire application in C, he used Ruby to interface to the C API and then could develop an easy-to-modify Ruby app. That turned out to be a good idea, as the final product he delivered turned out to be very different from the initial request, and having the ability to rapidly re-develop in Ruby was a success. To show us how to use C to access Ruby and vice-versa, Brian used a simple example of a “leaky bucket stack,” a fixed-length stack that would lose the oldest item as the stack was pushed. It was a great example in that it had enough complex behavior to be useful, while simple enough to explain and translate into C without too much effort. First, we reviewed the pure Ruby implementation. Brian proceeded to build up the equivalent code in C, calling Ruby array functionality and data types where appropriate. He then showed how to configure the C extension from from Ruby, build, compile, debug and run from the ruby command line.

See the example code and slides (I’ll update the URL when available). Also http://github.com/bturnbull/padpaws for his more advanced C example.

Brian Cardarella, @bcardarella, http://bcardarella.com, presented his gem, client-side validation, which he developed while working on the “Raise Your Vote” site for the Democratic National Committee. The Raise Your Vote site is intended to assist in voter registration by collecting data online and generating matching PDFs of the voter application. Naturally, 50 states have fifty different forms, with different requirements. He wanted to avoid duplicating the server-side validations with hand-maintained client side code, as the regular changing of requirements and the difficulty of keeping business rules in synch across the two languages would doom the project. He wrote client-cisde_validations to use the declarative validations within the entity models to generate the equivalent Javascript code. Client-side_validations has remarkable depth and breadth, handling nearly all of the common and exceptional types of valiation (Brian notes the few difficult cases in his slides). You can find the code on GitHub (gem code, examples) and the slides here: client_side_validations.pdf

Thanks to Brian Cardarella for travelling all the way to Portsmouth and thanks to both Brians for their fine presentations. Thanks to Nick Plante and Brian Turnbull for organizing and promoting the meeting and the group. And thanks to Mark Galvin and the New Hampshire Innovation Commercialization Center for providing the fine facilities!

Notes from New Hampshire Ruby/Rails Group, 19-July-2010: Redis, Resque, Vanity, Mogotest, Nick Plante

The July meeting of the New Hampshire Ruby/Rails group was held as usual on the third Monday of the month at RMC Research in Portsmouth. Nick Plante was the featured speaker, talking about Redis, the NOSQL database, Resque and Vanity. Brian Turnbull ran the meeting and brought pizzas — thanks, Brian and Nick!

We started off with a round of introductions and speaking a little bit about who we are, what we do, why we’re there. There’s an interesting assortment of backgrounds: a few folks with deep Ruby experience, a number of people transitioning from other languages (Java was mentioned more than once) and some web design folks looking to get a little deeper into the workings. Brian mentioned that the Ruby Rampage was coming up fast – October 16th – and that seats went quickly once registration for the event was open. Keep an eye out for future announcements.

Nick Plante talked about Redis, Resque and Vanity. You can view the slides here: http://www.scribd.com/doc/34712184/A-Quick-Introduction-to-Redis-NH-rb. Redis (http://github.com/antirez/redis) is a NOSQL (“Not Only SQL”) database that has a simpler API (put/get/list keys) than the complex SQL needed for a relational database. It is a “key-value” store that stores flat values (and/or documents, arrays, lists, etc.) with a great deal of speed, high-performance, reliability and scalability. It is ideal as the primary means of access for data on a demanding web site, acting as a cache for underlying relational data or transient data. Nick talked about how he and his partner used Redis and the Resque
Ruby library (http://github.com/defunkt/resque) to manage a job queue where the front-end servers posted jobs, many background workers processed the jobs, and the front end could display progress or completion. Nick also talked about A/B testing with Vanity, another package which uses Redis as its backend datastore. Vanity lets you present two different interfaces (hence the A/B) and monitor statistics on how the users react to the differences (do green buttons get better conversion than orange?). Nick wrapped up by showing us some of the code used in Mogotest and how they managed backend tasks.

As a bonus, we got the briefest of tours of what Mogotest can do: it will spider a web site, gathering the content, show you validation issues with the code (HTML and CSS), compare how the web pages look in a number of different browsers (side-by-side or a slick overlay). This can be really handy to include as part of testing a web site. Mogotest has just entered into public beta, during which you can test your site for free. Check it out!

Thanks to Nick for a very interesting presentation! Thanks to Brian for coordinating the event and getting pizza! Thanks to RMC for the great facilities.

HowTo notes: installing REE, Passenger, Ruby on Rails on CentOS5

Recently, I installed Redmine, the Rails-based project tracker,  on an existing virtual private server, running CentOS 5 Linux and an assortment of LAMP applications and web sites using Apache, PHP and MySQL. I chose Ruby Enterprise Edition (REE), an optimized and high-performance version of Ruby, and Passenger, an Apache module to connect to Ruby. Here are the steps I followed, as a reference and in hopes it might help others:

  1. Log onto the box via ssh. As a good practice, I run as an unprivileged user, and use sudo only when superuser rights are needed. So, download the files and un-tar them and read the READMEs and run the processes as a regular user, switching to root via sudo only when the rights are needed.
  2. Download and install Ruby Enterprise Edition. Today, that’s:
    wget http://rubyforge.org/frs/download.php/68719/ruby-enterprise-1.8.7-2010.01.tar.gz

    but follow the instructions you’ll find at http://www.rubyenterpriseedition.com/download.html for the latest. Those instructions will have you un-tar the file and then run the installer.

  3. Install the tools needed to build Ruby Enterprise Edition. If you run the installer, it will prompt you for missing tools. In my case, I needed to:
    sudo yum install gcc-c++ make patch zlib-devel openssl-devel readline-devel
  4. If you’ll be using mysql, you’ll need the native code to build the matching gem. REE attempts to build gems for MySQL, SQLite and PostgreSQL, so choose your flavor and issue the appropriate command like:
    sudo yum install mysql-devel
    

    or postgresql-devel or sqlite-devel as appropriate.

  5. Follow the instructions supplied by the REE installer. They did a nice job on that. To install Passenger when I was done, some additional source code files were required:
    sudo yum install httpd-devel apr-devel
    sudo /opt/ruby-enterprise-1.8.7-2010.01/bin/passenger-install-apache2-module
  6. Once again, follow the prompts to add the proper load module and path commands to your web server configuration, add a configuration file for your site, and you’re ready to start installing your site’s code.

NOTE: It wasn’t the case with my particular host, but you may need to adjust your SELinux settings, if you’ve got SELinux enabled. See the post at http://www.catapult-creative.com/2009/02/04/installing-rails-on-centos-5/ and look for “SELinux” for some ideas.

Git presentation, CentraLUG, 3 May 2010

The Central New Hampshire Linux User Group will meet at its usual place and time, NHTI Library, Room 146, 7 PM – 9 PM. Directions can be found at http://wiki.gnhlug.org/twiki2/bin/view/Www/NHTILibrary.

In keeping with the tradition of 3-letter presentations (CSS, Vim, SQL, er, HTM), I’ll talk abut Git, the distributed version control system. Git was originally developed by Linus Torvalds for the Linux kernel and is licensed under GPL2. It’s become popular in Rails development as well, especially with the hosted site GitHub.com. Similar to Mercurial [Updated link, Ed.] or Bazaar, Git is a DVCS – a distributed (or Decentralized) version control system or revision control system. DVCSes introduce an easier way to work on shared project. We’ll talk about how DVCSes work and Git in particular, look at some of the available references, handy cheatsheets, and sites to host your DVCS.

As always, we’ll have some time for introductions, job postings, folks looking for work, questions and hopefully answers.

Hope to see you there.

Some additional links, besides the ones I posted to the announcement above:

Scott Chacon is the authority on Git. Check out his book, his tweets, his online reference, his PDF, and Why Git Is Better Than X.

The Git wiki is a good source of reference materials.

A great diagram and discuss about using git branches in a real development and production environment.

PySIG notes, 25-Feb-2010: CSS

Six people braved miserably wet weather to attend the February meeting of the Python Special Interest Group, held as usual on the fourth Thursday of the month at the Amoskeag Business Incubator.

We had a brief set of introductions and announcements of upcoming meetings. We hope to host a discussion of PyCon 2010 presentations by PySIG members next month; details to be worked out, stay tuned.

I’ve seen this presentation seven times and I think this was the best. Along with the Introduction to CSS, I added a “sneak peek” preview of HTML5 and CSS3 and discussed the support (finally!) for CSS 2.1 in Internet Explorer 8 and how that meant the leading browsers all had support for some intriguing features as outlined in the SitePoint book, “Everything You Know About CSS is Wrong!” There was lots of give and take with the audience, and a few side trips off-script to cover an issue someone wanted to know more about, and a war story or two. Ben Scott was heckled in abstentia.

Slides can be found at http://www.tedroche.com/Present/2010/css/css.html.

Thanks to Bill for arranging and promoting the meeting, to the Amoskeag Business Incubator for the fine facilities, to Laura and the Hopkinton High girls basketball team fundraiser for the M&M cookies, and to all who attended and participated.

Visibone, a source of great reference guides and online utilities

Visibone's Everything Book
One of my favorite tools for the past couple of years has been a web developer’s reference guide from Visibone. The book has rarely left my desk, within arm’s reach, to help out when I just can’t remember all the options for an HTML tag or a CSS style. While there are some great online references, having it all in a couple sheets of paper makes it easy to find what I’m looking for (especially if I couldn’t remember if it was text-something or font-mumble) and the reference has also let me browse around the dusty corners and learn something I didn’t know.

Recently, I did some web development using XHTML 1.1 and CSS 2.1 and realized my 2004 version of the guide was getting out of date. I was pleased to see many of the pages had been updated to a 2009 version. After reviewing the many options, I chose to go all in and bought the Everything Book, a step up from my earlier version. This one includes cheatsheets for PHP, MySQL, JavaScript, DOM, HTML, CSS, HTML special characters, web colors and a great index. The reference not only includes broad coverage of each topic but many side notes and compatibility guides (for CSS, the IE-Netscape-Opera-FireFox-Safari compatibility color coding is tremendously useful!)

There are a number of bonus references available on the Visibone site at no cost. Check out the color lab, the color swatches for many of the common graphics programs, the online color codes reference, and excerpts from all of the various reference materials. In addition to reference book, Visibone offers posters, charts and mouse pads. The web site is worth a visit; it’s charmingly quirky, retro, opinionated and clearly individualistic.

Semantic markup and styling of data entry forms, IE falls short

Somehow, in my 10 years of working with HTML, I had missed the fieldset and legend tags. I’ve just started in on a web site redesign where they can be used to great effect and nice semantic markup. The fieldset tag is intended to be used as a container for grouping related input items in a form. By default, the fieldset has a transparent background and a thin black outline around the fields. The fieldset can contain a legend tag that appears by default in the upper left corner of the black outline as a title for the grouping. Both elements can be be modified with CSS styles to match and complement the rest of the page design. Here’s the basic HTML snippet:

<form...>
 <fieldset><legend>Ship To Address</legend>
 <br clear="all" />

 <label for="Building_or_Hotel">Name of Building/Hotel:</label>
 <input type="text" id="Building_or_Hotel" size="25" maxlength="50" />
 <br clear="all" />
...
</fieldset>

And the applicable CSS to make the form look pretty includes:

/* Styles for legends, the title atop the fieldset */
.dataform legend {
 background-color:rgb(137,111,43);
 color:white;
 font-weight:bold;
 margin-left: 0.5em;
 padding:0 1em 0 1em;
 }
/* Fieldset groups a set of inputs in a visual container */
.dataform fieldset {
 border-color:rgb(137,111,43);
 border-style:solid;
 border-width:1px ;
 background-color: rgb(93%,89%,78%);
 }

Results in a data entry form that looks like this:

HTML form layout with fieldset and legend tags

Using CSS to add visual effects to the elements can yield some pretty sharp results while still having the speed and minimal bandwith of lightweight HTML and CSS text files. In addition, using the semantic fieldset and legend elements provides additional information about the form fields and their relationships in a machine-readable format, rather than just splattering a bunch of colored div boxes and styled text on the form. This is a great aid to tools used by the vision-impaired to provide more context to their users, and to search engines trying to derive the context of your forms.

Compatibility between different browsers is not too bad, though things could improve a bit. FireFox 3.5x, Chromium 4.0.285.0 (on Fedora, thanks, Spot!) and Safari 4.x appear dead-on the same (the screenshot above is FireFox 3.5.5), but there is an outlier and no one should be surprised to discover it’s Internet Explorer. Even in version 8, perhaps the most compatible browser Microsoft has shipped since the now-legendary IE5.5/Mac, things are just different. For some reason, the IE8 developers decided that the background color of the frameset should extend out over the border, to the edge of the legend, resulting in this less attractive appearance instead:

IE8 fieldset background colors overflow the border at the top.

For IE7, the background color doesn’t appear at all, which might actually be better than to have it appear incorrectly. (Update: no, my bad, it just doesn’t like rgb values expressed as percentages.) So the appearance definitely won’t be as sharp for your IE users as for any other browser user. (Yet another reason to encourage your clients, friends, associates, neighbors and strangers on the street to avoid Internet Explorer. We can eliminate it in our lifetimes.) (UPDATE: there are, of course, work-arounds. Here are a few suggestions that might work for you from Sitepoint and CommunityMX and Matt Heerema.)

So, the next time you’re called upon to draw up an HTML data entry form, keep in mind that you can group your elements with fieldsets and use legends to add more contextual information to your design.

Powered by WordPress. Designed by Woo Themes

This work by Ted Roche is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.