<form> function() & .class 2015

banner_ffc5_webpage

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? :)

Running your PHP app with pow – The Mae’s an idiot guide

Just because the entire exercise has driven me to madness (almost) where I was wishing I could literally do a table flip and none of my stuff will be broken. At 3AM. I’m afraid my neighbors think someone’s getting slaughtered at my apartment.

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 that 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! :)

<form> function() & .class on September 2011!

Philippine Web Designers Organization is bringing back <form> function() & .class this year! It’s going to be on September 10 and 11, 2011 (yes, that’s 9/11) and will have 3-hour awesome workshops on HTML5 and CSS3, Javascript, Usability and Design by the country’s leading designers and front-end developers. There will also be talks on Business, Mobile Dev, Branding, and future trends. Speakers include Dan Matutina, Rico Sta. Cruz, Jason Torres, JP de Guzman, Allan Caeg, Drei Gonzales and John Leyson.

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! :)

Introducing HTML5 and HTML5 for Web Designers, a review

I wasn’t really HTML5’s biggest fan. The fact that you can write it however you want made me very worried that it might result in poor coding again (unclosed tags, or mismatched closing tags). But after reading Introducing HTML5 and HTML5 for Web Designers, I realized that what it lacked in rigid coding conventions it made up with semantic elements like section, article, nav, aside, header and footer to name a few.

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.)

Introducing HTML5 by Bruce Lawson and Remy Sharp

Introducing HTML5 book cover Bought Introducing HTML5 (ref) a couple of days after I got my Kindle. The sample file was engaging and I thought it would be great to read about HTML5 in one place. The web is just buzzing with HTML5 news and tips and tricks that just getting up to date is hard to do.

The book uses a conversational tone and it’s probably the biggest reason why I love it. Bruce Lawson and Remy Sharp were able to discuss the difference between seemingly similar elements in a very clear and concise way. The explanations are so easy to understand that I just realized that, unfortunately, the only thing I did right in my markup (in this site) is using article for my blog posts.

The book is divided into 10 chapters, they discussed how HTML started to structuring text elements and new types of forms, to using video and audio tags properly as well as canvas, how to access and set data storages, offline mode, drag and drop, geolocation and APIs.

Pros

I love how in-depth the book is, it gave a lot of examples that you can follow throughout the book, the discussions on which element is which and what for is so succinct. Introduction to HTML5 is a very meaty one, it’s the type of book you’re going to consult over and over again.

Continue reading

Airphilexpress’ pricing bug

The past year, I realized that I love traveling as much as I love airline seat sales, I follow a number of airlines like Cebu Pacific, PAL, Tiger Airways and Air Asia for all the seat sale goodness.

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.

Screen shot 2010-11-23 at 1.14.32 PM.png

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.

Screen shot 2010-11-23 at 1.15.01 PM.png

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…

Continue reading

Using dl for a Semantic Form


Wufoo’s login form

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.

Continue reading

The CSS3 Carousel Experiment

When I first read about CSS Animation, I thought that they shouldn’t be messing with the separation of logic and style. In my mind, it should be clear that logic (animation, rotation, even the alternating row styles) should be in javascript, all the styles should be in CSS, and the document structure in HTML.

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 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! 1

Some people would obviously rather use a div and apply the image as background, all you have to do is replace img with div or the class you assigned to it.

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

Further Reading: