A few weeks ago I was trying to figure out how to create a thin, vertical line using CSS the purpose of which was to separate two sections of a web page, for instance a side bar from main content, that would be offset a number of pixels from the top of the element. I couldn’t use a border because of the offset needed (I don’t think) and modifying the underlying HTML was out.

Reading this 24ways article on CSS3 patterns helped me to understand css3 gradients and multiple backgrounds a little better and gave me some ideas on how I might accomplish this using CSS3.

Multiple backgrounds are applied in layers so the top-most background will cover the backgrounds underneath it. I found it helpful to create the backgrounds separately and then combine them together in the end.

I started with creating a 4 pixel wide, solid grey, vertical line at the 240 pixel mark. This would be my bottom-most background layer.

1
2
3
4
5

background-color: #fff;
background-image:
  linear-gradient(0deg, transparent 240px, #5e5d60 240px, #5e5d60 244px, transparent 244px, transparent);
background-size: 100%;
min-height: 100%;

Next, I created a series of 1 pixel high horizontal lines alternating white and transparent. The 2 pixel height specified in “background-size” accommodates 2 lines and all of this repeats vertically to create multiple lines. Note the background color was changed so the transparent lines could be seen.

1
2
3
4
5

background-color: #5e5d60;
background-image:
  linear-gradient(top, #fff 1px, transparent 1px);
background-size: 100% 2px;
min-height: 100%;

For the offset I created a solid white block covering the top 70 pixels with the remainder being transparent. The background color here was also changed so the white block could be seen.

1
2
3
4
5

background-color: #5e5d60;
background-image:
  linear-gradient(top, #fff 70px, transparent 70px);
background-size: 100%;
min-height: 100%;

And finally combining all the backgrounds together produces the separator line:

1
2
3
4
5
6
7

background-color: #fff;
background-image:
  linear-gradient(top, #fff 70px, transparent 70px),
  linear-gradient(top, #fff 1px, transparent 1px),
  linear-gradient(0deg, transparent 240px, #5e5d60 240px, #5e5d60 244px, transparent 244px, transparent);
background-size: 100%, 100% 2px, 100%;
min-height: 100%;

Not very exciting compared to the other CSS3 backround patterns that have been coming out lately but cool enough considering a few weeks ago I didn’t think it was possible to do without creating an image.

There is (of course) a problem that makes this unusable for me. The line refuses to appear in certain versions of Chrome unless the thickness of the line is 4 pixels or wider. I needed the line to be thinner. Oh well. Back to the drawing board.

That’s why I was really excited to find Plum Village Online Monastery videos on Vimeo. Last night I watched the video “Basic Mindfulness practice” right before bed and I think I was able to sleep more deeply than normal.

Basic Mindfulness practice from Plum Village Online Monastery on Vimeo.

I highly recommend watching it. The instructor, Phap Luu, seems like a very friendly and likeable person. I especially liked the idea of using the sounds that cell phones and other electronic devices make as a reminder to stop and breathe and be mindful.

If you know of any other similar videos or resources on mindfulness practice for beginners please leave a comment.

Recently I’ve fallen in love with Backbone.js. If you haven’t had a chance to check it out yet, I highly recommend it. It’s a framework for structuring javascript applications into models, views and collections. Yes collections. Just check it out.

Apparently, the way to learn any new javascript MVC framework is to study the todo list application built with it. (Check out this github repository to find the todo list app for your prefered framework.) The backbone todo list application is well documented in this split screen annotated source file that really helped me a lot. There is also a working example that I referenced quite a bit.

One thing that was obviously missing to me was the ability to drag and drop the todo items into a specific order. I did eventually find another version of the app that did have drag and drop but it looked to be implemented with mootools. Now I haven’t quite gotten around to learning mootools yet. Bad I know. I’m highly dependent on jQuery at this time so I wanted to figure out how to do it with jQuery and more specifically jQuery UI.

Googling didn’t lead me to any ready-made solutions so I decided to try to figure it out on my own. So here’s the solution I came up with.

First things first, jQuery and jQuery UI need to be included for this to work:

1
2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

Then I added a custom html5 data attribute to the todo div element in the javascript template and set the value to the model id. I did this so I would be able to associate the div back to its model later.

1

<%= id ? 'data-id="'+id+'"' : '' %>

Here’s what the entire template would look like:

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/template" id="item-template">
  <div class="todo <%= done ? 'done' : '' %> " <%= id ? 'data-id="'+id+'"' : '' %>>
    <div class="display">
      <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
      <div class="todo-text"></div>
      <span class="todo-destroy"></span>
    </div>
    <div class="edit">
      <input class="todo-input" type="text" value="" />
    </div>
  </div>
</script>

The todo list itself is simply a unordered list element with an id of “todo-list”. Inside the top level view ‘Appview’ inside the initialize function, I called the jquery UI sortable function on that unordered list. The update function passed to sortable will run after the drag and drop ordering has occurred. In this function, I loop through all of the divs in the list, get a reference to the todo model using the value of the data-id attribute and update the order property. Backbone seemed to take care of the rest.

1
2
3
4
5
6
7
8
9

this.$("#todo-list").sortable({
    update: function(event, ui) {
        $('div.todo',this).each(function(i){
            var id = $(this).attr('data-id'),
                todo = Todos.get(id);
            todo.save({order: i + 1});
        });
    }
});

Check out this jsfiddle if you want to play around with it.

This seems to work just fine but at this point I haven’t used it in any production applications so use at your own risk. That and I am still a backbone newbie so if you have any better ideas, please let me know.

I’m nearly finished with the form I set out to create using Zend_Form and I’ve only written one blog post about what I’ve learned so far. I want to try to get as much knowlege in writing as I can before it’s gone. I’m starting to find that I am only an “expert” at what I’m presently doing at the time. Everything else I have to re-learn at some point and that’s what I’m hoping blog posts like this will help me do when the time comes. That and it might actually help someone else. Who knows.

When I first got started learning Zend_Form, I really wanted to stop and try to understand more about the different ways to create elements. The more I looked at different resources online and in books, I was seeing different ways of creating and configuring elements. At first this was confusing but I came to see how this made form creation incredibly flexible.

Creating an Element

You can create elements by either instanciating objects or by using the factory method ‘createElement’. When instanciating objects, it’s necessary to know the class name of the type of element you are trying to create. Alternatively, the factory method accepts a string as the first argument that determines what type of element it will create.

The following snippet shows both ways of creating the same text field with an id of ‘fullname’.

The table below lists the class names of some of the more basic types of form controls with the matching string that can be passed to createElement to create the same type of element. These and more are described in some detail in the Zend Programmer’s Reference.

Configuring the Element

You can configure an element by setting various properties for it including the label, description, whether or not it is a required field, filters and validators for the input, and decorators that determine how the element will look. I’m not going to describe these in detail because that would make this post too long. What I want to show is that these options can be set either by passing an array of options, by calling methods on the element object, or any combination of the two.

The code snippets below create and configure the exact same element. I think I prefer passing an array of options (the 1st snippet) over calling the individual methods. It just seems cleaner to me.

Thanks for reading!

More recently however, I had a need to develop an application on a server I knew had Zend installed on it. The thought of repeating the frustrations from several months earlier did not sound appealing so I have set out to experiment with using the Zend Framework without the Framework, or, in other words, the Zend classes without the MVC. Most of what I have learned so far has come from other posts on the Internet, so I now know I’m not the only one who’s ever attempted to do this.

Actually this turned out to be pretty easy. The rest of this post covers the creation of a very basic, standalone zend form.

The “Controller”

Even though MVC is not being used, a controller of sorts is still needed to get things started. Loading Zend classes can be done by requiring the Zend Loader and then calling the loadClass static method with the name of the class needed. In this basic controller, I load my custom form class RequestForm and also Zend_View which is necessary in order to create a view object to render the form.

Forms in Zend are objects so it is necessary to instanciate an instance of a form in order to display and use it. The form is displayed on a webpage by calling the form’s render method and passing it the view object. The rest of the controller code checks whether or not the form has been posted, and if it has attempts to validate it using a very cool isValid method on the form object. Once the form is posted with valid input, that information can be accessed by calling the getValues method. This makes for a nice, lean controller.

The Form

I mentioned that forms in Zend are objects. I now love the idea of using form objects for creating forms, but this took some time to get used to. The bulk of the work here takes place in the init method. To begin, use a series of setter methods to set the various form attributes such as name, action URL and method. It’s also possible to use the setAttrib method to set custom attributes, such as “id”. There is also a setDescription method although I haven’t quite figured out what this is good for.

Creating form fields is possible by calling the createElement method with 2 arguments: 1st the type of field (ie. text, submit, etc) you need to create and 2nd the name of the field. Calling setOptions on the element it’s possible to do things such as assign a label, make the field required and filter and validate the incoming data. The ability to use Zend’s built-in form handling to filter and validate input is exactly why I wanted to use it for this project in the first place and this seems to be one of its strengths.

Last but not least, calling the addElement method actually adds the created fields to the form.

The Output

The above gets the job done, but what I’m not too happy with is the output. The result is a form structured with a definition list. Lately wrapping fields in <p> tags has been my preference but I know others like to use lists. An unordered list of errors is displayed if the field did not pass validation and the default messages are not the most user-friendly.

I hope to spend more time learning about the various ways of creating different types of elements, filtering and validating input and customizing the appearance of the generated form.

Thanks for reading.

The page itself does not use jQuery but it’s possible to add jQuery to any page with the awesome jQuerify bookmarklet so that’s what I did. Then I fired up the console in Chrome and started hacking.

First, I added the link URL as text after each link.

Next, I executed a series of commands to get rid of things like headings, paragraphs, breaks, images, spaces etc.

Finally, I re-attempted the whole thing as a single command using jquery’s end() method and its ability to chain method calls together.

The less than optimal markup made this a really good test of my knowledge and I learned a lot. Thanks for reading!