So my plan is to eventually get some sort of consistency and post a weekly round-up of good links. I haven’t decided exactly which day I will publish it, but I am thinking about trying to do it on Friday’s. I guess I am a little late, but there are a few links that really stood out to me last week.
I noticed that when Apple redesigned their site, the search box looked like the OS X search box. Then I noticed that they used JavaScript to do it (I guess so that it actually worked in Safari).
CSS Eleven is an international group of visual web designers and developers who are committed to helping the W3C's CSS Working Group to better deliver the tools that are needed to design tomorrow's web. I’m so jealous. This is quite a star-studded line-up:
The New York Times recently removed their subscription requirement to reading articles, but you still have to register to read them. Does only removing the subscription requirement solve the problem? I think not.
Webkit now supports the @font-face CSS property. I can only dream that this becomes a standards across all browsers. This was #4 on my birthday web wish list this year.
I guess that’s it from last week. Hopefully I will start to do this on some sort of consistent basis.
";s:10:"bodyBlocks";a:0:{}}i:1;a:6:{s:5:"title";s:16:"I’ve Gone Pink";s:4:"slug";s:13:"ive-gone-pink";s:2:"id";s:3:"269";s:10:"typeHandle";s:4:"blog";s:4:"body";s:618:"In support of Breast Care Awareness Month, I’ve gone pink for the month. While it is not that much, it is in hopes of spreading the word. On the technical side, I decided not to change any of the markup, but to just change the CSS and images.
As with just about anyone you talk to, I was directly effected by breast cancer. My mother died when I was 3. While I wish I could do more to help the cause, I donate and show support when I can.
Show your support, Donate to Breast Cancer Research.
";s:10:"bodyBlocks";a:0:{}}i:2;a:6:{s:5:"title";s:24:"Save Friday Night Lights";s:4:"slug";s:24:"save-friday-night-lights";s:2:"id";s:3:"270";s:10:"typeHandle";s:4:"blog";s:4:"body";s:2796:"This is not a typical topic for me to write about, but it is important enough that I need to write a little something. Most people probably don’ know it, but the best show on TV right now is Friday Night Lights.
While I know most people are probably pretty skeptical about that statement, it is absolutely true. After a wonderful debut season, we are getting geared up for another one. Although, NBC is trying to kill it by putting it on Fridays at 9pm.
It is hard to put into words how amazing the show is. I’m sure there are a lot of people who are thinking that it is just another football show; they are vastly mistaken. Most episodes have about 15 minutes of football or less. The show is about the people, not about football. The whole town of Dillon revolves around their high school football team; it’s crazy.
Have you read the book? Seen the movie? In my opinion, the TV show is just as good as the book. Which is saying a lot since the book is fantastic.
Bill Simmons, the Sports Guy, just had a great article entitled Please, help me keep the ‘Lights’ on. I think he sums it up perfectly:
“Don’t you owe it to yourself to rent Season 1, Disc 1, and try the first four episodes? Look, if FNL doesn’t make it, we’re just going to get more Grey’s Anatomy spin-offs, a CSI for every city and 20 Deal or No Deal clones. Hollywood doesn’t like to take chances, and it doesn’t like to fail; it figures out what works, bleeds it to death, then flips the corpse and bleeds it some more.”
Isn’t there enough trash on TV? Why not take a chance on something so highly recommended. I have never met anyone who has watched the show and didn’t enjoy it.
Forget renting the first season, buy it for $20. You can’t buy many TV shows for that low of a price. If that doesn’t convince you, there is a full money-back guarantee.
So everyone, if that didn’t convince you, tune in to NBC on October 5th at 9pm and watch the Season 2 premiere. I promise you won’t be disappointed.
";s:10:"bodyBlocks";a:0:{}}i:3;a:6:{s:5:"title";s:22:"Ajax Forms with jQuery";s:4:"slug";s:22:"ajax-forms-with-jquery";s:2:"id";s:3:"271";s:10:"typeHandle";s:4:"blog";s:4:"body";s:8266:"There are so many different javascript frameworks out there, but I have recently started to use jQuery, and I love it. Not only is the library much smaller than others, but it is so simple to use. I wanted to show how easy it is to turn a regular form into a AJAX form.
First, I am going to build a regular form. The form is just going to be a basic email form. You enter an email address to send to, an email address to send from, a subject, and a message. All fields are required. So the process of the form is:
Ok, so this form is pretty simple, and doesn’t take much time to submit since it’s so short, but let’s see how much better we can make it with a little jQuery.
OK, so next, I am going to make an AJAX version, which is a duplicate of the first form. The only other things I am going to include on the page are the jquery library (which you can download here) and my JavaScript to process this form.
jQuery has a nice little function to have you script start when the document is ready:
$(document).ready(function(){
//Script goes here
});
OK, easy enough. Now, let’s make something happen when the button to submit the form is clicked. I was smart enough to add an id of submit to my button, so it makes it really easy to reference:
$(document).ready(function(){
$("#submit").click(function(){
return false;
});
});
First things first, I’m going to hide anything with the class of error if it’s showing (which nothing will be unless the form is unsuccessfully submitted twice). I also create a variable that I am going to use later to see if the form has an error and a variable to store the email regular expression:
$(document).ready(function(){
$("#submit").click(function(){
$(".error").hide();
var hasError = false;
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
return false;
});
});
Now that we’ve got the beginning of the script setup, we need to do the error checking. So first, let’s check to make sure that the email to address is not empty or invalid:
$(document).ready(function(){
$("#submit").click(function(){
$(".error").hide();
var hasError = false;
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
var emailToVal = $("#emailTo").val();
if(emailToVal == '') {
$("#emailTo").after('<span class="error">You forgot to enter the email address to send to</span>');
hasError = true;
} else if(!emailReg.test(emailToVal)) {
$("#emailTo").after('<span class="error">Enter a valid email address to send to.</span>');
hasError = true;
}
return false;
});
});
Remember, the email address to send to input has an id of emailTo. What that code is saying is:
Now, we just need to repeat the error checking for the other form fields:
$(document).ready(function(){
$("#submit").click(function(){
$(".error").hide();
var hasError = false;
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
var emailToVal = $("#emailTo").val();
if(emailToVal == '') {
$("#emailTo").after('<span class="error">You forgot to enter the email address to send to.</span>');
hasError = true;
} else if(!emailReg.test(emailToVal)) {
$("#emailTo").after('<span class="error">Enter a valid email address to send to.</span>');
hasError = true;
}
var emailFromVal = $("#emailFrom").val();
if(emailFromVal == '') {
$("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>');
hasError = true;
} else if(!emailReg.test(emailFromVal)) {
$("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>');
hasError = true;
}
var subjectVal = $("#subject").val();
if(subjectVal == '') {
$("#subject").after('<span class="error">You forgot to enter the subject.</span>');
hasError = true;
}
var messageVal = $("#message").val();
if(messageVal == '') {
$("#message").after('<span class="error">You forgot to enter the message.</span>');
hasError = true;
}
return false;
});
});
Ok, error checking is done. If there are no errors, we need to send the email via an AJAX request. I’m not going to include the whole script here, just because it’s getting long, but you can see the whole script.
So, there are no errors. Let’s remove the button from the form, and add in a loading graphic:
if(hasError == false) {
$(this).hide();
$("#sendEmail li.buttons").append('<img src="/images/template/loading.gif" alt="Loading" id="loading" />');
}
Ok, now let’s send the values via an AJAX POST request to our send email script that just sends the email. Once the request is completed, let’s hide the form and display a success message:
$.post("/play/jqueryajaxform/sendEmail.php",
{ emailTo: emailToVal, emailFrom: emailFromVal, subject: subjectVal, message: messageVal },
function(data){
$("#sendEmail").slideUp("normal", function() {
$("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>');
});
}
);
Pretty nice huh? So now, you have a perfectly accessible form. It works fine without JavaScript. But it works even better with JavaScript. I highly recommend checking out the jQuery Documentation. So go ahead, send yourself some emails to see for yourself.
I was asked in the comments if I could include the PHP script. So as requested, here are the files that are used:
";s:10:"bodyBlocks";a:0:{}}i:4;a:6:{s:5:"title";s:31:"It’s Still a Stinking WYSIWYG";s:4:"slug";s:28:"its-still-a-stinking-wysiwyg";s:2:"id";s:3:"272";s:10:"typeHandle";s:4:"blog";s:4:"body";s:2589:"Just the other day, Eric Meyer announced that he has been working with WebAssist to create Eric Meyer’s CSS Sculptor. It’s a Dreamweaver Extension that assists users in creating clean markup and CSS. While this seems like a vast improvement over previous WYSIWYGs, it still feels like one.
While it’s great that this would mean that there is less crap code out there, people are still basically using forms to generate the markup and CSS needed. They still are not learning anything about web development.
One thing I saw in the plans for future releases was:
There are some things I expect will be improved in future releases, like shorthand value minimization—the simplest example of that being a condensation of 0 0 0 0 down to just plain 0.”
Wow, if that’s not going to confuse the hell out of people who don’t know CSS, I don’t know what will. Imagine trying to add a margin in, so you add margin: 10px 0 10px 0;, then it gets condensed to margin: 10px 0;. It kind of seems like you would be confused as to why it wouldn’t accept the values that you were adding. Unless they give some sort of alert telling the user that this is what is happening, they will definitely be confused.
They won’t know the different between margin and padding.
They still may use blockquotes to indent their text.
It just seems like crap.
Users are still going to be choosing from a template. Do we really want the web to be built on templates?
As I was thinking about this writing this, I was reading a post at entitled “Will Software Ever Make Us Redundant?”.
I think this post really got me thinking about how even though the WYSIWYGs are getting better, I don’t ever think that humans will become redundant in Web Design/Development. The human mind is just too creative and amazing for a piece of software to ever be able to accomplish the same thing. Think about all of those wacky IE6 bugs.
I don’t know Mr. Meyer, with all due respect, it kinda feels like you sold out on us.
";s:10:"bodyBlocks";a:0:{}}i:5;a:6:{s:5:"title";s:20:"Stop Using Helvetica";s:4:"slug";s:20:"stop-using-helvetica";s:2:"id";s:3:"273";s:10:"typeHandle";s:4:"blog";s:4:"body";s:1825:"Ok, so that’s a little extreme. I’m going to preface this post a little bit. I love Helvetica as a font. It’s a gorgeous font, and it has stood the test of time. So now that everyone understands my opinion on the font, I’ll go back to my original post…
Why do designers decide to use Helvetica for their site’s body copy? It looks AWFUL at small sizes.
The sizes that I think have the most problems are 12px and lower. Unfortunately, I have seen sites that use body copy as small as 10px. It’s pretty sad that when I get to a site that uses a small size of Helvetica as the body copy, I change the body font-family to Verdana using Firebug.
I made an example page to show the various Helvetica sizes from 10px – 20px.
So I guess this is more of a call to action than a post. So web designers, Stop Using Helvetica at such small sizes!
";s:10:"bodyBlocks";a:0:{}}i:6;a:6:{s:5:"title";s:22:"Calculating Font Sizes";s:4:"slug";s:22:"calculating-font-sizes";s:2:"id";s:3:"274";s:10:"typeHandle";s:4:"blog";s:4:"body";s:4188:"There are a lot of articles out there about typography on the web. I wanted to explain my method of controlling font sizes and margins in CSS.
I love Dan Mall’s Soft Serve Technique, but then you have to make a special case for IE6. (Hopefully it won’t be too much longer that we have to worry about IE6).
Ok, so to start, I like setting the font size of the body to 62.5%. I used to take Dan Cederholm’s approach of setting the font size to small, but I finally realized that it did not give me a nice base font size to play with.
So by setting the font size of the body to 62.5%, we get a base font size of 10px. This gives us a nice round number to work with. Thus, 1em now equals 10px. 10px is way too small to be the font size of the content though. Thus, I just set the font size of the outter-most container to 1.2em. Since we had a base size of 10px, our font size in the container becomes 12px.
The next thing I like to do is to set the font sizes of all of the headings, h1-h6. A good set of values for headings is:
Again, these are just values that I am suggesting, you could definitely choose whatever you want.
To get these font sizes, we just need to do some simple math.
Let’s use an h3 as an example. We take the size that we want the heading to be, 18px, and divide it by the container font size, 12px. So, 18/12 = 1.5. Then, we set the font size to either 1.5em or 150%. I personally like working with ems, although I used to prefer percentages.
So again, font size we want to achieve / font size of the container. Use this to compute the rest of your heading font sizes, and then you will have nice pixel values to work with.
So obviously you want to avoid letting the browser control how your elements will be spaced, so let’s work on setting the margins on these elements too.
The first thing I do in a stylesheet is zero out the margins and paddings:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, th, td {
margin: 0;
padding: 0;
}
Next, I set a bottom margin of 1em on p, ul, ol, dl, blockquote:
p, ul, ol, dl, blockquote { margin-bottom: 1em; }
Then, to get an equal amount of margin on the bottom of the headings, we just need to do more simple math. We can’t just set the bottom margin to 1em because our font size on these elements are bigger than the rest of the content.
So let’s use the h3 as an example again. This time, we take the font size of the container, 12px, and diving it by the size of the heading, 18px. 12/18 = 0.667. So then, our h3 would look like this:
h3 {
font-size: 1.5em;
margin-bottom: 0.667em;
}
So again, font size of the container / font size of the element. If you do this for all elements, you will have an equal margin between all elements. I made a page showing elements with equal margins.
I used to think this was best, but I have since realized that I like having the headings closer to the text that is following. So I divide the bottom margin on the headings by 4. Thus, we get a quarter of the margin above the heading, below it.
In my opinion, the example page with custom margins looks much better.
Anyone else have other methods?
";s:10:"bodyBlocks";a:0:{}}i:7;a:6:{s:5:"title";s:33:"Creating a Dynamic Google Sitemap";s:4:"slug";s:33:"creating-a-dynamic-google-sitemap";s:2:"id";s:3:"275";s:10:"typeHandle";s:4:"blog";s:4:"body";s:5978:"My site has a Wordpress blog on it, but it does not power the whole site, just the blog. If my entire site were powered by Wordpress, then I could generate a sitemap for Google using Wordpress functions.
I did not want to have Wordpress control everything; I wanted to have more control. By doing some quick queries, you can generate a sitemap for Google that has all of your blog entries in it.
First, you will need to send the correct headers, create the opening xml tag, and connect to your database.
<?php
header("Content-Type: text/xml;charset=iso-8859-1");
echo '<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
require_once('DB CONNECTION GOES HERE'); //This is where I would require my DB connection file
If you are not sure how to connect to your database, you will need to contact your host to get that information, and then do a search for php MySQL connection. If you can’t figure it out still, let me know, and I can help.
Next, we want to query the database to get the categories used in Wordpress:
$query = "SELECT cat_ID, category_nicename
FROM wp_categories
ORDER BY category_nicename";
$result = @mysql_query($query);
Then, we need to loop through the categories and display a url entry for each category:
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo '<url>
<loc>//trevor-davis.com/blog/' . $row['category_nicename'] . '/</loc>
<changefreq>weekly</changefreq>
</url>';
Next, we need to create a query to return all of the entries for each category:
$artQuery = "SELECT p.post_name, DATE_FORMAT(p.post_date, '%Y-%m-%d') AS createdOn
FROM wp_posts AS p, wp_categories AS cat, wp_post2cat AS pc
WHERE p.ID = pc.post_id AND pc.category_id = " . $row['cat_ID'] . "
GROUP BY p.ID
ORDER BY p.ID DESC";
$artResult = @mysql_query($artQuery);
Finally, we want to create a url entry for each blog entry:
while($artRow = mysql_fetch_array($artResult, MYSQL_ASSOC)) {
echo '<url>
<loc>//trevor-davis.com/blog/' . $row['category_nicename'] . '/'. $artRow['post_name'] . '.php</loc>
<lastmod>'.$artRow['createdOn'].'</lastmod>
<changefreq>weekly</changefreq>
</url>';
}
To finish it off, we just close everything up:
}
echo'</urlset>';?>
Here is the finished script:
<?php
header("Content-Type: text/xml;charset=iso-8859-1");
echo '<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
require_once('DB CONNECTION GOES HERE'); //This is where I would require my DB connection file
$query = "SELECT cat_ID, category_nicename
FROM wp_categories
ORDER BY category_nicename";
$result = @mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo '<url>
<loc>//trevor-davis.com/blog/' . $row['category_nicename'] . '/</loc>
<changefreq>weekly</changefreq>
</url>';
$artQuery = "SELECT p.post_name, DATE_FORMAT(p.post_date, '%Y-%m-%d') AS createdOn
FROM wp_posts AS p, wp_categories AS cat, wp_post2cat AS pc
WHERE p.ID = pc.post_id AND pc.category_id = " . $row['cat_ID'] . "
GROUP BY p.ID
ORDER BY p.ID DESC";
$artResult = @mysql_query($artQuery);
while($artRow = mysql_fetch_array($artResult, MYSQL_ASSOC)) {
echo '<url>
<loc>//trevor-davis.com/blog/' . $row['category_nicename'] . '/'. $artRow['post_name'] . '.php</loc>
<lastmod>'.$artRow['createdOn'].'</lastmod>
<changefreq>weekly</changefreq>
</url>';
}
}
echo'</urlset>';
?>
We also want to rewrite the url for this file so that it is available at //trevor-davis.com/sitemap.xml. Open up your .htaccess file, or create one if you don’t have one. Then add the following:
RewriteEngine on
RewriteRule sitemap.xml googleSitemap.php
Upload this file along with the googleSitemap.php script to your site root, and you are set. You can also add the rest of your site’s file structure to the sitemap as well. You can see how I did this in my google sitemap.
You can read more about the sitemaps protocal to see what other attributes you can apply to each url entry.
Let me know if you can think of any way to improve this.
";s:10:"bodyBlocks";a:0:{}}i:8;a:6:{s:5:"title";s:37:"Centering Absolutely Positioned Items";s:4:"slug";s:37:"centering-absolutely-positioned-items";s:2:"id";s:3:"276";s:10:"typeHandle";s:4:"blog";s:4:"body";s:2218:"At work the other day, I was working on the homepage of a small save the date site. We had so many beautiful images to use, so our designer decided to limit the text that is on the homepage. So the container is absolutely positioned with a height of 100% in order to fill the viewport.
The client wrote back right before we were ready to launch and said that they noticed a large white margin on the right hand side. We had to explain to them that since the design was left aligned and the picture can’t go on forever, there has to be an end to the design. We decided to center the design in order to make it look better.
So I went in and added margin: 0 auto like I normally would to center anything, but then I realized since it is absolutely positioned, it would’t work like that.
After doing some thinking, I thought about positioning the item from the left edge a certain percent. So I thought if I moved it over 50% and then shifted it back to the right, then it should work.
Here is the CSS that I started with:
div#centered {
height: 300px;
left: 50%;
position: absolute;
top: 20px;
width: 500px;
}
Ok, so now we’ve got it shifted over 50% from the left hand side, and in order to get it back to the center, you need to take half of the width of the item, in this case 250px.
So if we set a negative left margin of -250px, we end up with the following CSS:
div#centered {
height: 300px;
left: 50%;
margin-left: -250px;
position: absolute;
top: 20px;
width: 500px;
}
You can see that the absolutely positioned item is now centered.
I alphabetize my CSS properties. It makes everything so much easier to maintain. Once you actually start to think about it, it pretty much comes naturally too. Give it a shot.
";s:10:"bodyBlocks";a:0:{}}i:9;a:6:{s:5:"title";s:21:"Switched to Wordpress";s:4:"slug";s:21:"switched-to-wordpress";s:2:"id";s:3:"277";s:10:"typeHandle";s:4:"blog";s:4:"body";s:722:"I have been using Movable Type for a little while now, but I just wasn’t that happy with it. I didn’t really have any problems, but it just wasn’t for me. So I installed Wordpress in a separate folder to try it out.
I loved it. I decide to make the switch. Even though some things are broken right now, I should be able to fix them this weekend.
I think the main thing that got me to switch was the fact that Wordpress is written in PHP, which I can code; and Movable Type is written in Perl, which I have no clue how to code in. Just having the ability to go in and change code was reason enough for me to switch.
So don’t worry about the broken stuff, it will be fixed soon enough.
";s:10:"bodyBlocks";a:0:{}}}s:5:"total";i:270;}}i:1;O:25:"yii\caching\TagDependency":3:{s:4:"tags";a:4:{i:0;s:7:"element";i:1;s:29:"element::craft\elements\Entry";i:2;s:40:"element::craft\elements\Entry::section:4";i:3;s:7:"graphql";}s:4:"data";a:4:{s:40:"CraftCMSce35088bdfe0816226cd17fd051a4803";s:21:"0.46162700 1707493692";s:40:"CraftCMS2743a789e8993267a348eee1ee7e4450";s:21:"0.34758900 1706282441";s:40:"CraftCMS2ac34726f299f7e18e449d8e536c67f8";s:21:"0.22771600 1711953912";s:40:"CraftCMS3817d4a648fcfac939af46605323feb0";s:21:"0.44505500 1681499442";}s:8:"reusable";b:0;}}