Exploring the web

Todays talk: less practical, more on coding ethics that can prevent your head from exploding.

Some background: I decided to give my portfolio an overhaul. Now that I’m not yet job-bound, I wanted to explore PHP, JS and CSS a bit more. These are some tips and tricks I want to share with you. Good tips for junior (and sloppy or lazy senior) web designers:

-> Valuable tip 0: Dynamic > static
Even in small projects like a portfolio, dynamic code can be such a delight. The web has become a dynamic place to be, so use those possibilities.

-> Valuable tip 1: Find a technology that works!
Is the focus on speed, on usability, on comprehensiveness, …?
There are many ways to get to Rome so choose wisely. My focus was: learning more about web languages, browser compatibility, being future proof, code readability and ease of change. I chose for PHP because it’s nice and dynamic, pretty understandable, there’s good documentation on the subject and it runs on LAMP servers.

-> Valuable tip 2: Keep headers and footers in separate documents and include them.
This follows the rule “Single point of data“, which can save you a lot of time when dealing with larger projects.

-> Valuable tip 3: Separate style/design from content. That is why I use external CSS files. If you don’t know CSS yet: w3schools has tons of clear info. Use it.

-> Valuable tip 4: Use unobtrusive JavaScripts when using JS for extra bells and whistles.
Example: During my work on a new portfolio, I wanted to add thumbnails to give an overview of some of my projects. Of course, some effects would be nice I thought, so I checked some example image galleries. They came in wide varieties. Eventually I found something pretty cool in JavaScript. The code was pretty bloated though, not very readable and it did not separate style/design from behavior. On top of that, it wasn’t unobtrusive, meaning you’d see absolutely nothing when JavaScript is turned off. Many people have JS-enabled browsers, but still… a fallback would be nice.

I eventually coded it myself using PHP, html and well applied CSS. On top of that – to add the bells and whistles – I use JavaScript for some animating parts.
However, with JS turned off, it’s still functional. So if you have sufficient time, strive towards something unobtrusive.
I found a good article by Jeremy Keith on Unobtrusive JS.

-> Valuable tip 5: When one approach fails, try another.
Example: I wanted a matching layout for my WordPress blog and portfolio.
Since WordPress (WP) has a WYSIWYG way of doing things, I looked into:

– Method 1: Implementing my pages in WP.
This seemed to be pretty limiting since WP is just a CMS/blogsoftware, so I approached the problem in an other way.

Method 2: Implementing the WP header, footer and stylesheets in my pages.
This caused me headaches.  Wordpress is very useful, but its code is chaos. I couldn’t be as flexible as I wanted to be in my own pages. No need to get stuck though… Different approach!

Method 3: Changing WP’s theme’s header and footer to my header and footer.
This got things running smooth again. Tip n°2 proved useful. I already had my header and footer separated and that proved very pluggable into WP. Of course, basic rules like naming your id’s, classes, variables and such appropriately, will prevent conflicts with other libraries, API’s, software, …

This entry was posted in Web technologies. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *