At this point, you’ve probably figured out that despite the fact that we basic idea of breakpoints per device, your layouts would still pretty much flop because your font sizes are too small or you find yourself fixing the font sizes manually on each device widths. And it is te-di-ous! DRY is shaking its head.

Enter rem, I’ve always had a soft spot for em over pixels. During the elastic vs. fixed vs. fluid debacle, I’ve always been in camp elastic but the problem with em is it can get pretty confusing, specially with nested elements with different font sizes. Not having Sass or LESS to ease the computation is a factor, too, of course. But rem just makes it all so much better.

rem stands for root em (read up more from Jonathan Snook because I’m horrible at explaining things), in a nutshell, it has all the goodness of em but it will only depend on one factor, the base font size that’s declared on your body and/or html element. I’ve used it in a number of projects in the past with Sass, and it has made making sites more readable on mobile so much easier. No more multiple font-size declarations (most of the time)!

I’m sure there are tons of resources available for this particular topic, but I’d rather dump all of my notes in this site so I can get back to it easily. So let’s get down to business, shall we?

Making a variable out of the base font size is optional, but I prefer having one because my laziness knows no bounds! This way, I don’t have to declare the base font size twice, once in the body (you’ll see below) and in the function’s formula. The function’s pretty basic and self-explanatory, to use it, all you have to do is write @rem-calc(14px) as value, for example:

h1 {
  font-size:@rem-calc(36px);
}

our function will then convert it as (if the base font size is 18px):

h1 {
  font-size:2rem;
}

Don’t forget the px or it will throw an error. Honestly, I would have liked forpxto be optional but I’m so used to typing the values with either apx or % and, frankly, it’s a habit that I’d rather not break. Moving forward! Declare theinitial font sizes, one for the desktop and another for mobile, I haven’thad the chance to target anMBP retina but based on when I last used it, you won’t have a need for a separate font size for it.

It’s important to note that once you start with rem, you will have to use it for every element and every declaration where you’re using pixels, specially with height and width! Otherwise, there will be awkward situations where your text is much, much bigger than its container.

Well then, there you go. If you have a much better and easier way to use rem, feel free to leave a comment and let’s chat!

The 5th <form> function & .class is happening this November 8!

And we, at PWDO, are very excited about it! Now that I think about it, we’re just less than a month away, it’s so easy to freak the hell out right about now… Hold that thought…

Anyway, we’re bring in Eric Clark Su, John Allsopp, Jina Bolton, and Sacha Greif, and we’re hoping the community is as excited about it as we are.

There are a couple of other events happening in November as well, among others are DevFest Asia which is one of the biggest in Asia I think, and there’s also UXPH (disclosure, PWDO and UXPH has a partnership going on, you can buy 1 ticket for both events  so you can listen to the talks of some of the best designers and UX practitioners in the industry :) )

With all these dev and design events, might as well call November the Month of Web Makers, or something more catchy :P More on that point, don’t you wish you can just buy 1 pass and get to go to these events wherever in the world you are? Now there’s a business idea!

But before you build that, grab an FFC ticket or two, why don’t you? :)

Anyhoo! So, you want to run your PHP app locally, eh? You’re in a for a ride! It may include hair pulling and a little bit of screaming – so I suggest you keep your scream jar nearby.

First, I hope you’re pretty familiar with the terminal; and if you haven’t already, you should create a shortcut so you can open sublime through the command line, makes everything so much easier.

Start with this pretty vague tutorial on running pow with apache and know that it may not just stop there.

If that didn’t work for you, time to get down and dirty! Open your apache2 folder in sublime by typing sudo sublime /etc/apache2 it should show all of the files and folders within apache2. If you open your other folder, you should see the zzz_pow.conf file that was created earlier.

Note: if you want to see any changes in your localhost, you should always do a sudo apachectl restart

Moving on, open httpd.conf then go to line 118, uncomment that line to activate the PHP module so it should look like this:

LoadModule php5_module libexec/apache2/libphp5.so

Some tutorials will want you to uncomment Include /private/etc/apache2/extra/httpd-vhosts.conf which will make your virtual hosts file readable by the server, but I prefer to be on the safe side. While doing this darn thing, I had to remember which files I had to edit and what I did to them, so I prefer to have my changes to be in the same folder, in this case it’s all in the other folder. It will all be read anyway! Make sure that your httpd.conf's last line is:

Include /private/etc/apache2/other/*.conf

Create a new file within the other folder called aaa_default.conf (keeping with the original pow tutorial). This will contain your virtual host code(s) that may look something like this:

<VirtualHost *:80>
    ServerName project.dev
    ServerAlias www.project.dev
    DocumentRoot "/Users/username/Sites/project"
    ErrorLog "/private/var/log/apache2/project.com-error_log"
    CustomLog "/private/var/log/apache2/project.com-access_log" common
    ServerAdmin email@domain.com
        <Directory "/Users/username/Sites/project">
            Options Indexes FollowSymLinks
            AllowOverride All
            Order allow,deny
            Allow from all
        </Directory>
</VirtualHost>

<VirtualHost *:80>
  #no need for settings, use apache defaults.
</VirtualHost>

Replace ‘project’ with your actual project name and username with your account username. Remember that since we already did this, there’s no need for you to create a symlink in your .pow folder. It’s not as nice and simple as the symlink but if it does the job… well…

Next, create another file called php.conf (or php5.conf or whatever) which will contain a piece of code that will tell the server that whatever file that has the extension .php should be executed and not displayed as text.

<IfModule php5_module>
	AddType application/x-httpd-php .php
	AddType application/x-httpd-php-source .phps

  	<IfModule dir_module>
  		DirectoryIndex index.html index.php
  	</IfModule>
</IfModule>

If you got this error:

SQLSTATE[HY000] [2002] No such file or directory

Open your /etc/php.ini in sublime and look for pdo_mysql.default_socket. Mine was located in line 986 and it didn’t have any value. Just append =/tmp/mysql.sock so it will be like this:

pdo_mysql.default_socket=/tmp/mysql.sock

Restart your apache server, hopefully, for the last time and your local PHP app should be available in http://project.dev!

If welder bros still didn’t work, like mine, open your hosts file (/etc/hosts) with sublime (don’t forget to sudo!) and add project.dev and www.project.dev beside localhost, and ta-da! Your PHP is running with pow!

It’s as easy as 10 million steps and lots of bashing! Enjoy! :)

Since the format totally changed, thanks to AIM for accommodating our last minute request BTW (they’re awesome!), the price will have to reflect said change as well. So this year, the payment scheme will be as follows:

Early Bird (ends September 3):

• PhP 1,500 per day
• PhP 2,000 for 2 days

Walk In: PhP 2,000 per day (no discount for 2-day signups)

Note that to prevent long lines and annoyed participants like what happened in 2009, we’re strictly implementing the payment scheme. Meaning, if you didn’t pay on or before September 3, then you will be considered a walk-in and will have to pay the rate of 2,000 PhP a day. It doesn’t matter if you registered before September 3, what we’re going to take into account is when you actually paid, sorry. :(

If you want to know more, head on over to the FFC site to see the schedule and register! Or if you want, you can also contact us to be one of our sponsors which we’ll really appreciate!

Hope to see you there and don’t forget to say hi! :)

If you’re planning on learning more about HTML5 then I suggest that you pick up these two books as it will help you immensely. Funny enough, while I’m reading these books, I suddenly realized how bad I did in coding this site up. I’m currently in the process of re-writing the entire thing while keeping in mind the mobile first philosophy. It’s a little challenging, but that’s how things get more fun, right? (I sure miss IE a little bit.)

On the 23rd of November, Air Philippines Express announced a seat sale, a one-way fare of 1,888 from Manila to Singapore. For something that usually costs 5,000 Philippine Pesos and up, that’s already a steal! So, as usual, I hurriedly tested how much this will cost me since my friend and I are planning a trip there anyway.

I like the fact that you can a number of days so you can choose from them, unlike Cebu Pacific’s standard practice of making me click and wait to see other days.

I didn’t know that there’s going to be a stop over but I thought that it’s fine, that’s what you get for being such a cheapskate. Until…

I may have misunderstood this whole thing but looking back at the previous screenshot, it has been to my understanding that the fare of 1,888 is going to cover the entire trip, with the stopover and the base fare is indeed 3776, I expected the final fare to be around 4,000 due to taxes but I never expected that even the stopover’s going to be 1,888, too! With this, it appears that the non-stop regular fare of 4,488 is the better choice.

Of course, I cannot discount the fact that it’s just a software problem, but still. It’s wise to iron out blocker bugs like these before announcing anything. Specially in this kind of tight industry since apparently, everyone wants to travel but doesn’t want to spend as much. (LOL)

Anyway, isn’t it deploying 101? There were times before when we had to keep working until 2 or 3 in the morning because we just deployed, and we had to make sure that we go through the site a couple of times to make sure that every bugs, from minor to blockers, have been “squashed” before we retire for bed. Something like this shouldn’t have been overlooked.

If it is intentional, then they have a serious problem because what they’re doing is misleading and just plain wrong.

I know it’s a bit late to be complaining about this, but I wondered if this has been brought to their attention or if I’m just one of the lucky few to have experienced this. I wish they’ve sorted this out already because Cebu Pacific needs a competitor.

Semantics in forms are one of the things that needs to be talked about, in my opinion, since they are one of the most important parts of a web site. You create/edit user accounts, create/edit blog posts, submit a comment, gather information from your audience, and lots more through them. However, apart from fieldset, we don’t really have a semantic way of marking up a pair of form elements.

There are different ways in marking up one’s form: div, p, ul or ol and dl. Because using dl, or definition list, to mark up a form is still unusual even though it’s not exactly a new idea, I will be talking and boring you, unfortunate people, about it here.

Understanding the dl element

dl is one of the most overlooked element in HTML since, I assume, people mostly associate it with just definition lists, aka glossary. But it can be much, much more as was shown by Mike Robinson in his article about the dl element in HTML5 Doctor. The HTML5 draft describes definition list as:

The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements).

HTML5 Working Draft: The dl element

The key to why dl is the mark up that makes most sense (at least to me) is the name-value groups phrase. Form elements are all about pairing as you have the label which is the name and the corresponding value which is the input or textarea or select.

Using dl, your code is going to look something like this:

<form action="">
  <dl>
    <dt><label for="input-value">Label Name</label></dt>
    <dd><input type="text" name="input-value" id="input-value" size="32" /></dd>
  </dl>
</form>

Pros

Aside from your code being semantic, using definition lists for forms will enable you to have a correctly styled form element by default since both dt (definition term aka term) and dd (definition aka value) are block elements. dl also lets you mark checkboxes up with more sense like so:

<dt>Select one or more option:</dt>
<dd>
  <label>
    <input type="checkbox" name="value-1" id="value-1" />
  </label>
</dd>
<dd>
  <label>
    <input type="checkbox" name="value-2" id="value-2" />
  </label>
</dd>
<dd>
  <label>
    <input type="checkbox" name="value-3" id="value-3" />
  </label>
</dd>

I have to admit that I’m stumped checkboxes and radio boxes. There are times when it makes sense to put the option heading in a legend, but you can’t always put them in a separate fieldset! Using a heading element makes even less sense. Most of the time, I just use label even though it’s not really linked to anything. Well, p works, too.

Cons

Like everything else, using dl isn’t really foolproof:

• dt and dd are separate elements which makes it harder for you to clear them in case you’ve decided to float them and have multiple values. This scenario is easier for div, li and p because they act as a wrapper to the label-input pair. You can fix this by clearing your dt.
• You’ll encounter a version of the above mentioned problem when you have an empty value in a pair. You can either put a space (  ;) or min-height. I’m thinking that min-height is the better solution between the two, though.
• An IE 6 problem: when you add a block element within dl and its child elements, IE6 escapes the definition list so that the block element is outside it. There’s still a workaround like, instead of p, you can use span instead, which sort of defeats the purpose of what we’re trying to do. Ken, a co-worker of mine assured me that that problem doesn’t exist in IE 7, which is a sigh of relief.

Personally, I think the pros outweighs the various CSS issues you might encounter in the process. Nothing makes you feel better than being able to solve a CSS problem, which is probably why I miss IE 6 sometimes (isn’t that sad?). :(

How do you mark up your form? Do you think you’ll try and switch to dl one of these days?

One time, while working on our internal project, I thought I’d try a little -webkit-transition-duration because I wanted the color of the links to gradually change to something else on hover. But when I hovered on our main navigation that was using a sprite image, the background scrolled from one background position to the next every time we hover on it because of the delay! It was really amusing.

CSS3 Carousel

I experimented a little bit with transition and descendant selectors, but apparently, p ~ p doesn’t work with :hover or :active or :focus very well (browser notes below) and came up with this CSS3 carousel experiment.

To do this, you should have the following markup:

<div class="carousel">
  <a href="#" class="first-image">1</a>
  <a href="#" class="second-image">2</a>
  <a href="#" class="third-image">3</a>
  <a href="#" class="fourth-image">4</a>
  <img src="main-background.jpg" alt="" />
</div>

It’s really rather plain, it’s because we’ll be choosing the image using CSS’ child selectors to move the image and it won’t work if we enclose the links at in a div or list.

And this CSS:

  img { -webkit-transition: all 5s; -o-transition: all 5s; }
  .carousel { width: 500px; height: 372px; overflow: hidden; }
  a.first-image:hover ~ img { margin-left: 0; }
  a.second-image:hover ~ img { margin-left: -500px; }
  a.third-image:hover ~ img { margin-left: -1000px; }
  a.fourth-image:hover + img { margin-left: -1500px; }

New child selectors: the ~ symbol is used to select all fellow child elements, in this case, an image. If you add another image, it will be selected by this, too. The + sign on the other hand is to select a descendant that directly follows it. It’s really exciting, go nuts! ¹

Browser (in)compatibilities:

• For some reason, webkit-based browsers doesn’t interpret this very well, the second and third link can’t be triggered unless you hover on the fourth link first.
• Firefox interprets the child selectors perfectly but not transition because it will only be implemented in Firefox 4.
• The experiment works perfectly in Opera 10.6 and it gives me a warm fuzzy feeling inside. :D

When I first looked at the code within Volusion’s LiveEditor, I thought “Well this is going to be simple and easy.” But I was so, so, so wrong. It was a nightmare so hard, I’m not used to making the design work for the CMS — I’m used to bending it with my jedi mind tricks (or well, try).

Volusion only has one theme for everything. Ever since I started learning more and more about Drupal, I’ve started to appreciate this one-theme-for-all-page strategy where you update all of the options in the admin panel instead of in the theme itself. It wasn’t easy at first because I was used to how WordPress works but I realized that this way is actually more flexible (and dare I say user-friendly for the clients once they’re used to it), so that’s not really what I dislike dislike about Volusion.

It’s that there really is that one HTML file, and your CSS. With Volusion, you can show the contents of the site by adding <div id="content_area"></div> within your theme, the Volusion script adds the code and content within that div. And boy, do they add codes (read: table, b, font!)! Unfortunately for you, the designer/front-end developer, you can’t edit the codes that’s within it. This means no conditional tags for your menu or sub menu, no includes, nothing. Just your HTML and CSS. :(

The code they add within #content_area doesn’t have a lot of classes or IDs either, having them would have made my life easier because I can select them through CSS. But no, they’re using tables within tables within tables within tabl— well, you get the drift. So in the end, don’t be surprised if your CSS will look something like this:

 table[cellspacing="2"] table table table font { styles }
  table[cellpadding="8"] table table td .classname table { styles }

You can customize how it looks per category but whenever you have to adjust something, let’s say, change a URL in one of the sections or add a new section, it means that you have to edit it in all of the category pages. It’s like editing static HTML files all over again. This makes me sad because I feel that Volusion was left by its CMS counterpart and got stuck in the 90s. What. Is. Up?

Since you can’t edit what goes on in your #content_area div, it also means that if you want a bigger product image, you’ll have to, you guessed it, update all of the product images so it will match the new design’s specified image proportion. When the client said she wanted a bigger image, I initially thought that I’d just select a bigger version of the product image either in the option or code unfortunately though, there’s no option for it. There is an tig welder reviews article in their support section on how to change your product thumbnails.

The submit buttons are all in images, too. Call me rigid in my ways or just plain lazy, but I’d like to have the option of just creating one background image to apply on all text-based buttons. And if I ever decide that images make a better experience for the users then I’d like to have that option, too.

I wonder what’s going on with them, with the advent of hosted ecommerce solutions like shopify and bigcartel, just to name a few, you’d think they’d do everything they can to make theming and updating the sites easier and more flexible for their clients. I do know that you have to make your app backwards compatible for all of those who can’t be bothered to update their design since whenever; but isn’t it also the service provider’s responsibility to make sure that what they have is at par with what’s out there? I’m really curious with what’s cooking in the Volusion HQ, will they be updating their backend’s design (that doesn’t work that well with webkit-based browsers), etc?

I’ve recently overhauled Last Leaf and turned it into a lifestream. I have stopped blogging there since the start of the year and have always thought of turning it into just that but I haven’t because creating themes for another CMS seemed intimidating.

At first, I thought of writing my own lifestream, it should have been my way of learning more about RoR but until now, all I have in my folder is the basic install (which I have forgotten how I was able to produce) so I turned to the next best thing: Sweetcron. It’s been months since I have looked at Sweetcron, I remember that I found it so unfriendly to customize to one’s needs before. Turns out, all I really needed was to read a good documentation, a lot of focus and plenty of time to test things out. It’s a pleasant exercise, and it’s something I know I’ll do again.

And so, with the intro done and over with, I suggest that you try and do something you haven’t tried before once in a while, if you’re not yet ready to commit full-time to something really big (RoR for me) then do some little things (like theme customizations, I think I want to try Drupal next) and so, here are the notes I made myself remember while writing Last Leaf’s theme:

• Base your first theme on one of the default ones

  Most of the time, you already have almost everything you need in the default theme, the developers won’t include that otherwise, I think. Trying to edit the defaults also make the learning curve more enjoyable because you know you won’t just break something because it acts as your guide in the process.

  My first WordPress theme was something based on WordPress Classic, I have little to no knowledge in CSS that time and that’s the best thing I could come up with. It helped me get familiar with the CMS’ templating system (man, I sound so pretentious) as well as taught me what this CSS shenanigan is. With Sweetcron, I used the Boxy Theme. As soon as you were able to stop the nauseous feeling whenever you see a PHP snippet, you’d realize that it’s pretty straightforward.

  I had a great time styling the individual boxes, it got a little confusing after a while though, what with all those accounts, so I made a separate file for each one of them like what you can see on the image, it made _activity_feeds.php less cluttered and made isolating the problem easier.

• Experiment

  I wanted to get just the image within the post because I’m not planning on directing people into the single page of every items and all I really want to show sometimes are the interior decors I love. At first I used this: <?php echo $item->item_data[$item->get_feed_class()]['image']['m']?> which is something you need to call the images you uploaded in Flickr but won’t work anywhere else. Thankfully, somewhere in the _activity_feeds.php file is <?php echo $item->get_image()?> and that’s what I used for my Tumblr and Google Reader posts.

  However, I don’t post images there all the time so I need a way to retrieve the text if the image doesn’t exist and so, there goes the only thing I’m good at, if-else statement:

  <?php if ($item->get_image() == ''):?>
       <?php //display your text here ?>
  <?php else: ?>
       <?php //and this is for your photo ?>
  <?php endif; ?>
  

• Search and then ask

  I would’ve probably given up on Sweetcron the second time have I not found that Nettuts tutorial, all you really need to do is keep your cool if you can’t find a solution to your problem. And if you can’t find the solution through searching, go to the usergroup/website of the CMS.

Sweetcron is still new and AFAIK, there’s only one developer so it’s understandable if there’s no documentation on the site like: is there a way to retrieve the tags I added in my starred items in Google Reader? How do I truncate the title? (<?php echo word_limiter($item->get_title(), 20) ?> doesn’t work :() Is it possible that I could host the images in my own server instead of relying on other sites? However, the community behind it is very, very friendly and you’re sure to find answers you’re looking for there, unless you’re too shy to ask for it. :P In the end, go and get these Sleeklens free presets for your photoshop.