Ryan Rampersad
Thoughts, opinions, ideas and now links
  • About
  • Podcast
  • Links

Monthly Archives

Selecting Elements with Multiple CSS Classes

I was wondering recently how to get select elements with multiple selectors. Why would you want to select elements this way?

As a hypothetical example, imagine you read my post about highlighting author comments with Hybrid from a week or so ago. What if you wanted to be more precise with your selectors, so you could target that list element like so: list item comment with administrator entry-author ryan which highlights the list element with the comment, adminstrator and entry author classes on it.

Doing this is painfully obvious in retrospect. I can’t believe how this slipped by w3schools. So how, now, brown cow? Easy. Please enjoy my silly examples with follow.

div.comment {padding: 5px; margin: 5px;}
div.comment.admin {background-color: #ff00ff;}
div.comment.conscript {border: 2px solid #ff3312;}
div.comment.user {border: 1px solid #a3a3a3;}

And some basic html.

<div class="admin comment">Hi there, from the admin! - ryan</div>
<div class="comment admin">Hello, from another admin! - chris</div>
<div class="conscript comment">So, having fun? - loyal conscript, emily</div>
<div class="user comment">of course I am! - user, joe</div>

Styling elements with multiple selector is easy. Just write the classes together, tag.class1.class2.

You can checkout the demo too based on the code samples above.

Happy styling.

On Latency and Code Loading

On Ajaxian a post recently from Bikin Chiu of the Gmail Mobile team was talking about reducing latency and code loading. I didn’t have the time to compose a great and well edited response to the post. So expanding on what I wrote earlier, I continue.

I think our download size and code execution speed is decent. The problem we should look at now is not only reducing latency via reduces HTTP requests but by also having larger pipes and more nodes clustered around high traffic hubs. The internet was supposed to be location agnostic but it is clearly not so in prime time web applications. We’re still using methods that we could have come up in the 90’s. We’re not dealing in the 90’s anymore, browsers are new and fast, clean and powerful but our network is seriously underpowered and ready for an overhaul. And not just our network in the United States but across the world, we need a new backbone, or perhaps better yet, we need to make a completely new type of foundation centerpiece.

Nevertheless, it’s great that the Gmail Mobile team made loading performance ten times better by reducing their HTTP requests. My blog asks for a horrid amount of resources because of my theme and various plugins. My blog is simple, Gmail on the other hand is a monster of a web application so I can only imagine the difference it really makes. I recently read that Mootools lazy loading via client and server side methods. This is what many people have been asking for. Once it was clever to have such modularity. Now, it’s not much of a big deal.

Latency will continue to grow unless we make some changes outside of software and focus on hardware for a moment. I’m scared of hardware, many are, but that is where I believe our bottleneck is.

Time for a WordPress Gripe

Yes, it is that time again. I love WordPress to death. Yet sometimes I find it a bit silly. There must be a solution to this gripe at the very least because somehow, Facebook and many other huge sites solved it.

The Gripe

It’s about CSS and Javascript. It’s about how just about every CSS and Javascript file is hosted locally and therefore should be compressed. I notice many plugins run with a particular version of jQuery, Mootools or Prototype. We can make an exception for those but why aren’t other scripts and stylesheets being minified?

The Way to Fix It

The way to fix it is to have a function accept an argument that will slurp up all of the requested css or javascript and subsequently put it in one file and then compress the life out of it. My child theme’s style.css ran about 17kb before I compressed it, it came out as 12kb after whitespace annihilation. It would be unbelievable if that had made a significant difference, it doesn’t. However, my theme consists of more than just my style.css, it uses other @import directives to include other files which means there’s still an extra 30kb of css somewhere going uncompressed.

Actually, the way to fix it already is out there. The front-page example of Minify compressing WordPress assets! WordPress already has the wp_enqueue_script function which will include a script tag to a specific url in the head. A function similar to this could do the minifying.

The Grim Reality

I realize that compressing and caching stylesheets and javascript files isn’t the final solution. The big slow down is HTTP requests. My plugins and theme send out 24 separate HTTP requests and I think that is too many. I could live with, at most, ten for a regular blog page. If it were a gallery blog or a ajax powered blog, I’d think differently but as my blog focuses on code and an image here or there, I think 24 is too high.

So that’s about it for now. I hope that the WordPress developers address this in the next version, 2.9.

Final ArrayLists can Change

This wasn’t a revelation or anything. My AP Computer Science class was wondering what would happen if one were to set an ArrayList to final. Remember, when you add the final prefix to an variable declaration, it becomes constant and therefore not changeable. (That definition is where we got lost.)

I wrote some sample code that you can test out on your own. I came to my conclusions based on this same code too.

import java.util.*;
public class FinalArrayList {
	public static void main(String[] args) {
		
		ArrayList<String> list = new ArrayList<String>();
		final ArrayList<String> list2 = new ArrayList<String>();
		
		list.add("hello");
		list.add("world");
		
		list2.add("hello");
		list2.add("world");

		
		for (String item : list) {
			System.out.println("From variable ArrayList - " + item);
		}
		System.out.println("");
		for (String item : list2) {
			System.out.println("From final ArrayList - " + item);
		}
		
	}
}

Definition of Final

I looked up the true definition of final. I came to the same understanding after making my example above. I’ll explain why it makes sense.

A final variable can only be assigned once. This assignment does not grant the variable immutable status. If the variable is a field of a class, it must be assigned in the constructor of its class.

Finally Making Sense

To make sense of this, let’s try another example. Let’s pretend we have the following code.

		final String str = "hello world";
		System.out.println(str.substring(6));

What happens? Did you just say world is printed out? That’s right. However, that is only half the answer. Think about the final String str. Did you catch it yet? A new String object is returned! The original object, the original String is untouched. Strings are immutable as mentioned in the definition above. The final keyword doesn’t affect this property but instead does not let assignments to happen upon the same variable name.

So, to answer my class’ question, “If you make an ArrayList final, can you still add things to it?” Yes you can.

Fixed sample code.

Highlight Author Comments with the Hybrid Theme Framework

I’ve been using the excellent Hybrid theme framework for more than a year now and I’ve come to love it. I use a modified version of the classic child theme from versions previous to the big 0.6 release. One thing that I’ve always loved to read on other blogs are the author comments. Those few author comments are always packed with quick wit or deep wisdom; they stand out too, are are highlighted!

Hybrid makes highlighting author comments ridiculously easy. In the main style.css of your child theme (you are using a child theme of hybrid, aren’t you?), simply add these styles.

.comment li.entry-author {
 background-color: #FFFEC4;
 border: 1px solid #FFDD59;
}

There you have it! Any author comment will now be highlighted with a light yellow background and border. It is really that easy too.

There are other things you can do additionally. For instance, let’s say you have administrators and contributors on your blog and they both post. You can use some clever hybrid magic to make their posts stand out.

.comment li.administrator {
 background-color: #FFFEC4;
 border: 1px solid  #BA9400;
}

.comment li.contributor {
 background-color: #FFFEC4;
 border: 1px solid #FFDD59;
}

I simply reused the author-style for the contributor style, but the administrators that leave comments will now have a nice deep brown border around their comment.

Hybrid makes it effortless to do this. Be creative while making your author comments stand out. Many people only scan the comments but pause on the author comments for the very same reasons I do.

Pluralize In Java, Javascript and PHP

I was just reading David Walsh’s post about Possessives. It was a very clever use of PHP. I remembered a helper method I wrote last year that was somewhat similar in use, another form of coding English. It was Pluralization.

At first I just added s if the first argument was not 1 and that won’t always work. For instance, while blog will pluralize with just an s but box will not. Is there a solution to this horrible problem? Yes.

The solution is a three argument function, although exhausting, it does get the job done. So I provide these functions in Java, the original language, javascript and PHP.

Java

This method accepts a double and two strings. The first argument is a double for a technical reason. Do you say, “I have .57 apples?” or “I have .57 of an apple?” My conclusion was that decimals were plural. It sounds right. Is it linguistically correct? Somebody should tell me.

public static String pluralize(double howMany, String singular, String plural) {
 return ( howMany == 1.00 ? singular : plural  );
}

Javascript

function pluralize(howMany, singular, plural) {
 return ( howMany == 1.00 ? singular : plural  );
}

PHP

function pluralize($howMany,$ singular, $plural) {
 return ( $howMany == 1.00 ? $singular : $plural  );
}

The code for this method is based off of the Java version and because they all have similar syntax, they all look the same. Using something like this won’t be useful in a internationalization-localization context but it can help for tiny projects.

A little example and that should do it.

$itemsInCart = 1;
echo( "There " . pluralize($itemsInCart, "is one item", "are items" ));

WordPress Query Counter

I like to read over my blog posts from time to time, especially at the older entries since they always make me laugh. I have noticed a lag between the request time and complete rendering. Aside from the mass use of css and javascript from theme and plugins, I thought it’d be a good idea to look at how much the database was getting hit.

A quick trip to the WordPress Codex revealed what I was looking for.

// footer.php
    echo get_num_queries();

After a quick trip to the Theme Editor and adding the function into the footer.php, I found out while I was logged in, I was hitting the database with 47 queries for every single post!

However this isn’t reflective of reality. Most visitors never leave a comment and therefore they are served with the cached version of most posts which, as far as I know, reduced the query to almost nothing. I did my test while logged in, so I suppose that’s why my query count was high.

Extra

Since I have a template based off the amazing Hybrid theme framework, I got an added bonus when it came to using query counter. If you use Hybrid 0.6.1 you can go into your Hybrid settings and just use the special footer replacement string .

Two Javascript Testing Utilities

PasteBin, Pastie and of course, Gist. There are tons of pasting services. Lately however, we’ve started to ask more of our neighborly paste service, we need it to run and demonstrate our javascript, basically, we need a javascript playground. I have found two such playgrounds, they both looks great and work well.

JSBin

JSBin

JSBin


JSBin is the more polished of the two testing utilities. JSBin allows you to create custom css,html and of course javascript and in conjunction with Google Ajax Library APIs, serve you with a live testing ground. The reason JSBin is more polished in my opinion is that it has some syntax highlighting and it uses those Google Libraries. This gives it an edge. I highly recommend that you check this out.

MooShell

MooShell

MooShell


This is dedicated to Mootools right now but it shows huge promise. It has four panes, HTML, CSS, JS and the result. Unlike in JSBin, the result isn’t accessible outside of the editing space so the Ajax mimicry isn’t quite as advanced yet. MooShell though is pretty cool and I’d love to see it put on GitHub, I’d love to help add features. You really need to try MooShell sometime, with your favorite Mootools code.

Share similar testing utilities you’ve seen or even made. I actually one similar to these a year ago for personal use.

9/9/2009 9:09:09

Oh yes, it is that time of day, it’s 9/9/2009 at 9:09:09. I just had to do a post. Enjoy it!

I’ve lived through yet another repeating date and time and this one was fairly good. I was excited for the second day of school but the real highlight of the day was supposed to be the Apple event for iPod touches. It wasn’t as great as expected and because of that, I feel like Apple lost a bit of my support.

My calculus books weights about eleven pounds, that’s really way too big. That’s about all the news for this repeating day.

The next one, 2010-10-10 10:10:10, will be in a bit more than a year. I’ll be a senior then and I’ll probably look at this post and get a laugh out of it.
(more…)

Junior Year

I’ve had a great summer blogging, programming and tweeting. However, it is back to school time for me and many others in the United States. School officially starts at 7:30 on Tuesday, September 8th. It’ll be my Junior year, my third year in Central High School. I’ve had plenty of great experiences and I look forward to many more.

I thought I’d take a minute to post my first quarter schedule, for laughs and giggles.

  1. Computer Science IB/AP
  2. English 11 IB
  3. Physics IB SL
  4. AP US Government and Politics
  5. Calculus 1 IB
  6. Advanced Computer Programming

I have two computer classes every day for the first semester which is great. I intend to learn quite a bit in that computer science class. The advanced programming class is mostly just for personal projects because I’ll be pretty far ahead of the class.

So, I’m off to have my first day, basically going over the syllabus and an introduction to each teacher and class I’ll be having. I hope that everyone has a great year. I hope I do too.

mooWalkthrough Feedback for the Future

The mooWalkthrough has been around for a couple years now. I know that people read it but I don’t see or hear much feedback such as likes and dislikes about the content, pacing, structure and so on.

mooWalkthrough

mooWalkthrough

Every school year I take a couple weeks and rewrite some of it. Last last year I bit the bullet; I restructured everything and made the new mooWalkthrough 1.2.x edition, which we all know and love today. I’ll have ample time this school year to try to make it even better. Right now though, there aren’t any solid plans. The mooWalkthrough is supposed to be a guide so people can begin to play with Mootools in a hand-in-hand kind of way, or at least, that’s the idea I came up with. So I’d like some feedback and some suggestions about the future of the mooWalkthrough.

  • The structure of the content – The introduction of Mootools, General Knowledge, Elements, Events and Effects, is this good enough as an introduction to Mootools?
  • Future Content – Perhaps another branch that introduces Mootools-more?
  • Demos and Sample Code – There are new solutions such as jsbin and MooShell that can solve the demo part but, do the current code samples look fine?
  • Wiki-Factor – The mooWalkthrough is basically a big installation of dokuwiki. Anyone want to help write some pages?
  • Other Stuff – Anything you can think of to make it better? Other thoughts, comments?

Just leave a comment with your feedback or suggestions.

Thanks!

© 2013 Ryan Rampersad.