1
JUN
20

Some WordPress insights

posted by Samir

Alright, here it is the WordPress bug bit me – again.

Still in the apprentice phase, even though I putzed around with wordpress v 1.x and dabbled with WordPress 2, I am more than excited now with WordPress 3. So much has been improved, but yet so much also became a memory hog. Not so much from the frontend side, but the Admin side can become rather bloated with many nice features, but yet unnecessary.
Point and case: the plugin autoupdates, theme auto updates, and WP Autoupdates and alerts.

Every time we load the Admin Interface WordPress connects to all plugin sites, verifies and checks for updates, the same for themes and core files. A standard blog / cms with only a few plugins this is a unnoticeable process. The more ‘tricked’ out the blog becomes the more “backend heavy” it gets. – Pun intended.

Read the rest of this entry »

Posted in Wordpress | 1 Comment »

0
JUN
12

CSS3 / HTML5 – the hype ?

posted by Samir

Everyone in the office now is talking about CSS3 and HTML5, while not so much interested in HTML5, due to the lack of support in almost every browser (some support more some less), I dabbled around with CSS3 for some time now.

During my endeavor I came across some great sites that make CSS3 development, fairly easy and, to an extent, cross-browser friendly.
Those sites I would like to share with you.
Let’s start first with a site, which I have in my favorite bar as this is THE IMPORTANT site of all.
I like to call myself a CSS purist, with tolerance. Why do I say this ? Well most purists do not like to see ANY pixel values in CSS and instead use EM values.
The advantage of using em over px is, that em is scalable in almost all browsers and readers, thus the most appropriate for accessibility concerns.
And only for this concern I use em, almost exclusively for font sizes.

PX to EM


The best tool ever to help with px to em conversions

Now with the basics out of the way, we can focus on some CSS3 goodness.
Read the rest of this entry »

TAGS: , ,
Posted in tutorials, web design, web development | No Comments »

0
JUN
08

How to center a DIV – CSS Mini Tutorial

posted by Samir

Here we go with another quick tutorial.

We all have been there, an element needs to be centered on the Webpage.
Now how can we do that ? – float only works left or right. Some of us have tried other float options, but… they quickly found out they did not work at all…

The easiest way to center an element is with CSS, depending on the situation, there are different approaches.
Let’s start with the most simple one:

Center an element horizontally

We have an element that needs to be centered horizontally: All we need to know is the width and the rest can be done with margins in CSS:

.class or #id {
	margin:0 auto;
	width:200px;
	height:200px;
}

Read the rest of this entry »

TAGS: , ,
Posted in tutorials, web development | No Comments »

0
APR
04

Firefox tips & tricks

posted by Samir

Well, once again I had to reformat my little IMac, because I forked something up and programs acted weirdly. To put the cherry on the top of my task ahead my DVD drive is dead. So I have an IMac but no way to restore it, my backup drive was ‘sacrificed’ a long time ago to hold my treasures of movies and applications.
For all who are faced with a similar issue, I will write a tutorial on how to restore a Mac when no DVD is directly connected to the computer. – watch for the next tutorial.
All this is the prelude to my dilemma I had when I reinstalled Firefox. Firefox 3.6.x is almost at the end of it’s lifecycle, security patches will still be handed out, but no further development, since FF 4 is officially out.
So I thought: oh well, it’s supposed to be fast, slicker and all around more reliable and stable since allegedly the entire codebase has been optimized and rewritten.
After installing it, yes, FF4 looks awesome, performs smoothly even with a machine with chronic RAM issues, I have the tendency to have multiple programs running and way to many FF tabs open.
OK, now the first challenge started, how do I get my beloved extensions back.
A quick search for extensions yielded just the basic FF extensions: Firebug / Firecookie are all updated and work nicely with FF4.
Now where the heck is my super awesome HTML Validator ? In order to get a FF4 working version I actually had to go to the developer’s site and poke around, didn’t get scared of windows only remarks and voila ..

I found my HTML validator working with FF4 for Mac as 32 and 64bit Intel version. For all who want to use this super awesome tool: here is the link http://users.skynet.be/mgueury/mozilla/download_090.html
Problem one solved.

But where the heck is my cool character counter ? – Each Webdeveloper will eventually have to count characters, not in text fields, not words, but actual characters, including spaces, comma, periods, etc.

On my 3.6.x FF I had one little Character Counter working it became a necessity and helped me out in many instances.
So, I went to Mozilla Homepage, did a search for character counter, but uh oh… no more character counter, it has been removed from Mozillas listings. Or so it appears, even looking for older versions of FF, yielded no results. So, I did a Google search “yer gotta love google”.
I soon learned: Character Counter was removed by Mozilla for whatever reason, and all addons that I got with the character counter search only gave me word counters, text field character counters, etc etc, totally useless stuff (for me at least), and even though there is a Wordcount addon which seems very promising, the developer has yet to integrate a simple char count, even though people request it. highlight text on a webpage and spit out the numbers of characters, that was exactly what the addon did.
So I had to wait until I got to the office, where I knew I had a working version of the addon.
Not lazy – I immediately went to “username/library/application support/Fire Fox/Profiles/some random number.default/extensions” and guess what ?
There it was starring at me, my wonderful sweet character counter.

So I figured: grab the directory, copy it into the same location of the FF4 machine, and boom….
Yeah Boom it made; FF4 complained and said the addon is not compatible.

But surrender is not an option for me, so I poked around in the plugin directory and investigated each file. One file immediately grabbed my attention: “install.rdf” – never heard of an rdf file, so to be on the safe side I opened it in textmate. Eureka I thought after I glanced over the file, it’s a simple XML file I can actually read, and guess what ? There was actually an entry like that:

...
<em:minVersion>3.0a1</em:minVersion>
<em:maxVersion>xxx</em:maxVersion>
...

Hmm I thought, what would happen if I set the maxVersion value to 4 or higher ? I set it to 5… no go. I set it to 4… and YAY…. it worked.

So long story, short sense:
If anyone of you has a plugin / addon for FF which is grown on their hearts and are faced with the ‘death’ of the development.
Make a backup of your old directory “username/library/application support/Fire Fox/Profiles/some random number.default/extensions”,
find the extension and check for the install.rdf file,
try to adjust the maxVersion value, and if it does not exist, just make an entry and chances are: it works.

I got 2 plugins working that way.

Hope this long article helped someone along the way.

Posted in tutorials, web development | No Comments »

2
FEB
18

Javascript better practices: Clone HTML templates instead of directly creating elements

posted by steve

When manipulating the DOM with Javascript, try to avoid creating elements as much as possible. Instead, clone an HTML template, then use Javascript to alter the text and attributes of those elements.

The main benefit of this practice is to keep the HTML separate from the Javascript source. This way, you can style and rearrange HTML elements as much as you’d like, without having to modify your Javascript code.

For example, say we have a list of items grabbed from a feed:

<ul id="feeds">
  <li>
    <h2 class="title">Item title</h2>
    <div class="description">
      Lorem ipsum sin dolor sit amet...
    </div>
  </li>
  ...
</ul>

And say in your Javascript code (jQuery in this example), you’re dumping a feed’s items into this list:

$.get('/feed/url', function(results) {
  for (var i = 0; i < results.entries.length; i++) 
  {
    var entry = results.entry[i];
    
    var li = $('<li></li>');
    $(li).text(entry.title);
    ...
    $(li).appendTo('#feeds');
  }
});

Above, we’re using jQuery to create the <li> element. There’s really nothing wrong with this, but if you use an HTML template beforehand, you can save yourself some time in the future, when you need to make changes.

So our plan is to:

  1. Create an HTML template for the list item
  2. clone() this with jQuery
  3. Alter the attributes and text with jQuery
  4. Then append it to the <ul>

So let’s start with the HTML template:

<ul id="feeds">
  <li class="template" style="display:none">
    <h2 class="title">Item title</h2>
    <div class="description">
      Lorem ipsum sin dolor sit amet...
    </div>
  </li>
</ul>

Now we have a simple HTML template for our list item. Next, we’ll modify the Javascript to clone the list item, then modify its contents and their attributes, rather than creating elements directly.

$.get('/feed/url', function(results) {
  for (var i = 0; i < results.entries.length; i++) 
  {
    var entry = results.entry[i];
    
    // clone li.template
    var li = $('#feeds li.template').clone();
    $(li).removeAttr('style')
         .removeClass('template');
        
    // manipulate its contents
    $(li).find('.title').text(entry.title);
    $(li).find('.description').text(entry.description);
    ...
    $(li).appendTo('#feeds');
  }
});

Now you can modify the HTML, move things around, or change the elements without having to modify your Javascript. Good practice for future-proofing!

What do you think? Do you have a different opinion or other practices?

TAGS: , , , ,
Posted in tutorials, web development | 2 Comments »