PS: What's up?: Stories by Lars Pind

Make it your own

Lars Pind — Mon, 11 Sep 2006 10:18:15 GMT

In case you haven't noticed, a little over a week ago we put in a new theme editor, which lets you fully customize your design using the neat templating language "Liquid":http://home.leetsoft.com/liquid. Using this editor, you can completely alter the look of every reader-facing piece of the site. You start by cloning an existing theme, and from there you can do anything from merely tweaking the CSS to creating new partial templates that can be reused across the site. Very powerful stuff. You will have a number of variables available. Some are always there, like 'site', which gives you access to things that relate to your entire publication. Others depend on which page you're on. We're still working on some of the innards of these variables, and for this reason, we ask you to still be patient with us and not kill us if we break your pages occassionally. We will be sure to let you know when the interface is finally locked down and stable. Once that happens, we will also provide some documentation for all of that, so you don't have to fumble about blindly. We're as anxious as you are. If you make a great theme and would like to share it, please get in touch. We want to make a nice gallery of top-notch themes available for everyone. Find all the good stuff on the Design tab from your Dashboard.

5 reasons not to use email for login

Lars Pind — Mon, 02 Oct 2006 19:05:20 GMT

Using email for login seems a compelling choice, because an email address is guaranteed to be globally unique—no two people will have the same email. Unfortunately, there are some problems.

h2. 1. People have more than one email

People often have several different emails, and they can’t remember which one they used. Some of us have our own domain and use the firstname@lastname.com format always, but a lot of people have an email address from they employer, one from Hotmail, and a Gmail one, and they forget which one they used for your site. The next time they come back, they try to log in with the wrong one, think that they must not have an account, and register for another one.

h2. 2. People use fake emails

People are afraid of spam, and so they’ll tend to use fake emails, or mailinator.com emails, or something else that they’ll forget the next time they come back. Even people with their own domain may use nospam@lastname.com or yourservice@lastname.com or some other variation to avoid the risk of getting spam to their primary address. Again, they’ll end up registering a new account.

h2. 3. People change emails

Some people use an email address that belong to their employer and then change jobs. Or they have a hotmail account and it expires because they don’t use it often. For whatever reason, they may loose access to the mailbox. Now their account is associated with an email they no longer use, and they’re likely to forget that.

h2. 4. A username imposes fewer constraints

When you ask for email, there’s the constraint that it should be a working email, and it needs to follow a certain format. With usernames, people can choose freely, so long as other people haven’t used the same username. People will frequently have a username that they typically use, which can be their own name (lowercased and with dot instead of space, perhaps), or it can be a nickname that they often use.

h2. 5. A username lets people express themselves

With an inventive nickname, people get to express a bit of their personality in their username, if they so choose. It’s not necessarily something others get to see, but it can still give that warm fuzzy feeling. (and perhaps a bit more commitment in the long term?)

You’d think, that by asking for both username and email you’ll be asking for two things instead of one, but in practice, you’re better off going with username, and use email for backup.

Liquid Guide: Comment Form Tag

Lars Pind — Wed, 30 Jan 2008 15:16:51 GMT

h2. commentform tag The commentform tag is used like this:


  {% commentform %}    
    Body: {{ form.body }}
    {{ form.submit }}
  {% endcommentform %}

The tag will insert the FORM tag that will submit to the right URL. The form has an id 'comment_[comment.id]_form', where comment.id is the internal ID of the comment object. For a new comment, the id will be 'comment__for', with a double-underscore. This form expects to find a variable name 'comment' in its scope, which holds the comment object to create a form for. The comment form submits via AJAX using the [[public.js]] default javascript library. In addition, it provides an object, 'form' with the following attributes, which helps you build the form: h3. body The comment's body. Textarea, cols=40, rows=10, which you can override with CSS. HTML id is 'comment_[comment.id]_body'. h3. submit A submit tag for the form, with class 'submit_tag comment_submit', id 'comment_[comment.id]_submit'. The label is 'Post Comment' if it's a new comment, or 'Save Changes' if it's an edit. Submission is handled by the 'PublicSquare.comment.submit' javascript function in [[public.js]]. h3. cancel A link to cancel editing of the comment. This is handled by the 'PublicSquare.comment.cancel_edit' javascript function provided by [[public.js]]. h2. id object There's also an id object with just one attribute: h3. spinner This is the ID of a spinner that will be shown as the comment is being saved. Use like this:

Liquid Guide: Category Object

Lars Pind — Wed, 30 Jan 2008 15:17:11 GMT

A category has the following attributes: h2. Core Attributes h3. id The id of the category. h3. label (HTML-escaped) The label. h3. published_stories_count Number of published stories in this category. h2. Associations h3. published_stories ([[Story object]]) The published stories in this category. h2. URLs h3. url The URL of the page listing all stories in this category. h3. rss_url The URL of the RSS feed for this category. h2. Example code

           {% if current_site.categories != empty %}
                  
              
              {% for siteCategory in current_site.categories %}
                {% if category != siteCategory %}
                {{ siteCategory | link }}
                {% else %}
                {{ siteCategory | link }}
                {% endif %}
              {% endfor %}
              
       	    
            {% endif %}

Liquid Guide:Comment Show tag

Lars Pind — Wed, 30 Jan 2008 15:18:25 GMT

The commentshow tag is used like this:


  {% commentshow %}    
    
      ...
      ...
      ...
    
  {% endcommentshow %}

The comment handling in PublicSquare is quite sophisticated, so there's a lot of moving parts here. Start with another theme that works and modify that. This tag expects to find a variable name 'comment' in its scope, which holds the comment object to create a form for. It works in close cooperation with the [[public.js]] public javascript library. At the end of the tag, it will output a javascript call to 'PublicSquare.feedback.setup' from [[public.js]], which will configure the comment display for this user: * Turn on the admin toolbar for staff members * Show the feedback container if the user is logged in * Render the points This tag provides two objects, 'id' and 'action', described below. h3. Caching The entire comment chunk will be cached and served for all requests, all users. That's why we use the javascript setup call to configure the comment for this particular user. That also means you should refrain from displaying things, or making if statements that depend on the current user. h3. id The id object has a number of attributes which are HTML ids for various elements that are required to have certain names in order to function with the [[public.js]] javascript library. | *Attribute* | *Description* | | admin | This is the container that has the staff links - edit, delete, and ban. | | comment | The container of the entire comment, including all controls. | | display | This is the container that will be hidden/shown by the toggle link. | | feedback | This is the container of the feedback area, the links that will vote the comment up/down. | | flagging | This is the container of the "Flag for editor attention" link. | | inner | This is the container that will be replaced with the form when the comment is being edited inline. | | points | This is the container that has sum of all user's votes. This will be updated with AJAX after voting. | h3. action The action object has a number of attributes that do javascript calls to [[public.js]] in response to a user's interaction with the comment. | *Attribute* | *Description* | | ban | Will delete the comment and ban the poster (staff only) | | delete | Will delete this comment (staff only) | | edit | Will request a form to edit this comment via AJAX | | flag | Will flag this comment for editorial attention. Same classes get set consequences as 'action.positive' | | negative | Will submit a negative vote for this comment. Same classes get set as 'action.positive' | | positive | Will submit a positive vote for this comment, update the 'id.points' container with the new sum, and adds a 'voted' class to the 'id.feedback' container and a 'flagged' class to the 'id.flagging' container, so the positive/negative/flag buttons can be grayed out. You can only vote once on a given comment. |

Liquid Guide:Comment object

Lars Pind — Wed, 30 Jan 2008 15:21:18 GMT

A comment has the following attributes: h2. Core Attributes h3. id The id of the comment. h3. title (HTML-escaped) The title of the story, idea, or other object that this comment belongs to. h3. posted_at The timestamp when the comment was posted. h3. poster_id The ID of the user who posted this comment. h3. points The sum of the positive and negative votes the comment has received. h3. parent_id The ID of the object this comment belongs to. h3. body (HTML-escaped) The actual text of the comment in HTML format. h3. body_raw The raw contents of the body. h3. summary A version of the text of the comment with HTML tags stripped and truncated to 300 characters. h3. new_record? Whether or not this comment has been saved yet. h3. setup_info A JSON string containing the info needed to setup this comment using Javascript. This is passed on to the Javascript function PublicSquare.comment.setup. This call is automatically inserted by the [[comment tag]]. h3. correctable_for_minutes For how many more minutes can the poster edit his comment. People are given a grace period of 15 minutes to edit their comment for typos after it's been posted. h3. posted_by_author? Whether this comment was posted by the author of the object it belongs to. This can be used to differentiate the color or other presentation of the comment. h2. Associations h3. authors ([[User object]]) An array containing the poster of the comment. Made available so comments and stories can be handled by the same templating code. h3. poster ([[User object]]) The user who posted this comment. h3. target ([[Story object]], [[Idea object]]) The object this comment belongs to. h2. URLs h3. url The URL to this comment. Will include an anchor (#) to the specific comment. h3. submit_idea_url URL to link to to submit this comment as an idea for a new story.