Grow your CSS skills. Land your dream job.

#70: Random Pet Peeves

I just randomly go through some little annoyances and gripes I have with everything from OS X to Photoshop to WordPress to CSS. I thought of about 5 more the second I was done, but I'll spare you!

Comments

  1. Nice Video, Good Job! haha, my bad, but really, I do agree with the spam and dumb comments I get on my videos on youtube, such as “wow” or “nice” or “lol” really? do people find it necessary to take 3 minutes of their time to let me know that they themselves have told me “lol” like I care, if you comment, say something worth while.

    On that note…

    Did you know you can video screencap with QuickTime now? In Snow Leopard, I don’t think the quality is as good as iShowU, but I am sure it will only get better, just wish it had more options like iShowU.

    One last thing, I would LOVE to see you do a LIVE screencast on UStream.tv and you can do it with CamTwist really easily, I have tested it out, the quality on the video isn’t that great, but downscale the screen, as you do, its just fine.

    Sorry for the long comment, but I love your stuff and will continue too.

    ~ Chris

  2. Permalink to comment#

    To avoid the :hover shift when adding/removing a border, you can simply compensate by adding the same amount of margin to the opposite state.


    a { margin-bottom: 1px; }
    a:hover { margin-bottom: 0; border-bottom: 1px solid black; }

    • TeMc
      Permalink to comment#

      Yep, use this one a lot my self. For some reason I usually went with padding. However, now that I think about it, margin makes more sense actually.

      (since padding is inside the box).

      Anyhow, whether the fix works or not. It’s still an annoying thing.

      I wish there was a way to just declare that the box model doesn’t change (like { box-model-state: unchanged; } :D )

      But then again, that would probebly have it’s downsides and change appearances aswell :D

      @Chris: Thanks for the screencast, learned a thing or two ! Just small things, but they do ease up the day-to-day flow.

  3. Permalink to comment#

    Hey Chris,

    just a tip on the forums, try looking into using SMF forums I’ve used it quiet a lot and the number of spam messages/account aren’t many. Also its very secure

  4. Permalink to comment#

    Ahhh that stupid Javascript error in IETester drives me batty. I’ve generally found that if I view it in the real IE6 it’s fine, so I think it’s just IETester. My IETester crashes if you don’t use it for 5-10 minutes. It has such potential, but it makes me want to break things when I use it.

    • LuK
      Permalink to comment#

      a little short comment from me =)…sure you want to break things m8, u use an interface that combines the worst piece of mass-distributed-software in multiple versions^^…in hell they let you only use this, no more safari, no more firefox, no more standards, just IE6 =D

    • David
      Permalink to comment#

      I had the same problem with IETester too (crashing all the time on IE6) but I upgraded to the latest version and the problem went away. I think the engines just needed to be updated again. My interface looks different from yours… and has the final 8.0 rendering engine… so I think your version may be old. Version 0.3.5 is the latest.

  5. Permalink to comment#

    was that me or is this video half finished?

  6. jbcarey
    Permalink to comment#

    This is a very CLEVER screencast….. It doesn’t really talk about pet peeve’s or not as much as I expected you to, it talks more about “your commenters”, your forums, your “awesomeness”…

    I enjoyed the :hover peeve and the OSX, files in Folder…

    Sorry if i’m “a jerk” ;)

  7. David Ferguson
    Permalink to comment#

    Spot on with the roundups. I hate them. They are nice from time to time because someone will come up with some nice resources that you weren’t previously aware of, but so many of them have the same crap on them over, and over, and over. jQuery plugins are the most notorious. I’ve seen so many roundups of jQuery plugins it’s ridiculous, and I always read them hoping I will find something new. Every time though, never fails, 98% of them are the same ones I’ve seen a thousand times before. Roundups are ok, but the authors should at least try to make the content unique.

  8. Permalink to comment#

    Was it just for me…or does the video end abruptly during the Photoshop PNG part?

    • Permalink to comment#

      Uh oh. looks like I screwed something up. My workflow it all screwed up with Snow Leopard, I’ll try to fix ASAP

  9. Permalink to comment#

    Does the screencast cut off for anyone else when it’s half way through the matte/transparency gripe on photoshop?

    • Permalink to comment#

      It’s not you apparently it just stopped recording at some point and I didn’t notice it.

      How that part ends:
      You cannot PASTE into the Matte color selection dialog box. Totally annoying.

      I think I had a few gripes after that as well. If I can here I’ll try to fix that up.

    • Jason
      Permalink to comment#

      Yeah, I totally hate that you can’t paste the matte color. I usually set the foreground/background before save for web and select that option.

  10. Permalink to comment#

    For Gmail spam, you can set up a filter for ‘has the words’ “is:spam” then set it to skip the inbox and delete, you never see the spam number. IT all goes right into the trash.

    It’s kinda nice, I use it.

  11. One of my pet-peeves is when I video screen casts ends with, “How do I choose what matte color I wanted to use…” lol. Did you want that to end there? Seem unintentional.

    Anyway I checked it on the download and on the video above and they both end earlier @ 30:55. I was going to send you a tweet but I am already on this page and my name, email etc is saved.

    Great Job!!

    Sorry couldn’t resist. You hit a few pet peeves of mine in there and some were just plain funny you pretentious @)$*!

    <3

    Frank

  12. My own horrible spelling/writing is a pet-peeve of mine too, and the fact that I can not go back and edit/remove and re-write my horribly sent comments. #fail

  13. Permalink to comment#

    My main pet peeve at the minute is we’ve just switched to Vista at work and nothing seems to work on my computer but everybody elses is fine.

    Oh how I wish I could use my Mac at work!

  14. Permalink to comment#

    I totally hate round up posts too! Totally sick of them…. and most of the time I’m already following those posts before they were “rounded up”.

  15. Randy
    Permalink to comment#

    Update IETester. Pet Peeve solved.

    • Permalink to comment#

      Yep, I updated IETester to version 0.3.5 a couple of days ago and this bug is gone. It has been working stellar for me in Windows 7 since.

  16. Permalink to comment#

    I use Akismet on my forums and it catches all the spam. Guest posting is enabled, so you can just post without registering.

    So far 2000+ posts have been blocked and the spammers IP blocked.

  17. Permalink to comment#

    Also in regards to the JS errors in IE, it’s because MS ships it with debug mode turned on. You can disable that in the options.

    The bigger problem is poorly written JS. I actually just got done writing an AJAX searcher that worked perfectly in every browser, but threw errors in every IE (6,7 and 8). After I rewrote some of the code, the errors were gone.

  18. Antti
    Permalink to comment#

    Hm, is the video supposed to have a sudden end in the middle of a sentence? :)

    (I watched the flash-version, not the download version)

    • Antti
      Permalink to comment#

      Uh, please ignore. The question was already answered while I was watching the video, a page refresh revealed more comments.

    • Jack Feefofe
      Permalink to comment#

      It might be kind of nice to implement some AJAX to update the comments automatically (every X seconds, when you place focus on the comment box, or even just add an “UPDATE COMMENTS” button). It would allow us to see the most recent conversation, which you mentioned in the screencast.

      Great screencast by the way!

  19. Permalink to comment#

    Hey Chris just a heads up, your video stream seems to cut off and end while you are talking about transparencies and background colors. Otherwise, nice job – it’s nice to see that someone shares some of the same pet peeves I have and that I’m not insane.

  20. Permalink to comment#

    Spamming is a real pain in the ass because, as Chris said, the technology is evolving to prevent this, but the technology behind the spam bots is evolving as well. I too can’t believe someone’s job is to just sit all day and spam forums and comments, but I wonder who even hires these people, the real pain in the asses.

    The problem with Captcha, and I’m not sure if it’s just that I’ve gotten lazy with the web lately, but if Captcha is too hard, I don’t end up registering. I know other people probably feel the same way as well, which sucks because it cuts off conversation. If it’s a simple 1+1 = ?? question, no problem, but to do a Captcha every time you comment really isn’t appealing for me.

    I’m getting tired of the round up posts that keep using the same HTML -> CSS sites that have been around for over a year now. I know they are great resources, but it’s been done to death. I agree that roundups have their place, as long as you can add additional information or comments to them. I like the round ups which show a site and then attempts to replicate the effect/design via the authors perspective.

    I like the new design btw. :)

  21. Permalink to comment#

    Hey Chris, shouldn’t this have been titled “12 Top Pet Peeves of All Time!!!”? j/k – enjoyed this one a lot.
    btw, you have a typo on on submit snippets page: “payments ant stuff”.
    looking forward to your series next week.

  22. Bego
    Permalink to comment#

    Hey Chris,

    good job!

    (OK, just kiddin’ …)

    Some things are just a pain in the neck because they distract you from work. (But, hey, what’s wrong about the “Hello Dolly”-plug in in WP? It dosn’t bother anyone, can be deleted easily and gives newbies a good possibility to learn how plug ins work in WP. And it’s a nice reference to WP’s initiator.)

    Oh, just another idea for one of your next videos:

    I’m currently working on a website for a local kindergarden. Nothing big so far, but we definetly have trouble finding the right layout. One day the layout “isn’t appropriate for a kindergarden”, next day it’s “too childish”. Here, coding is definetly not the problem (so far).

    So, before you start setting up your Photoshop mockup (as shown in one of your first videos) … how do you find the right layout for your customer? Is there a general reference you start with (i.e. well designed webpages, art, design studies, books, …?) Where does your input come from? Solely from your customer’s briefing? How do you get started???

    OK, it’s not as easy to work out as your “pet peeves” video, but would help more at work, too.

    Best regards,

    Bego

    • Rafael
      Permalink to comment#

      I don’t know if this’ll help you but it is related to the problem you’re having. I’m pretty much a beginner myself so while researching i came across this:

      Paul Boag – Educating clients to say yes.

      Hope it can help in some way.

    • Jack Feefofe
      Permalink to comment#

      I don’t believe Chris said there was anything wrong with “Hello Dolly” or that it should be removed. He’s saying that when an update is made, the plugin should not be re-enabled every time.

  23. Even updated IEtester is a buggly little program, at least it is for me. And it doesn’t seem to be anything to do with VMWare which I run. I also tried it on my dad’s Vista64 machine and it still managed to crash.

    If anyone wants to make a quick million, build an IETester for mac and sell it for 20 bucks a pop! (Though they probably couldn’t because of microsoft rendering engine and licenses to do with that? )

    who knows :/ still.. i’d give a lot for a mac based STABLE ietester so i could delete XP.

  24. Eire32
    Permalink to comment#

    I have to agree with your round up pet peeve, I’m getting sick of seeing the articles I already have read are being posted on a different site. I check only about 9 sites for web stuff and seriously thats not alot. Round ups are only good if you reference a site that just started with a unique and cool idea. Biggest pet peeve though is this one round up I saw that just rounded up the round ups, like com on. Hope you get the rest of this video on the web. Was that the last pet peeve?

  25. Although this wasn’t one of your pet peeves, another way to accomplish “The Claw” (Save for Web in PS) is to create a custom keyboard shortcut set. You can copy the default set, rename it then change the shortcuts you want. I’ve switched my “Claw” to Ctrl + F3 and my Pen tool options from P to F (So I can cycle the Pen tools from my left hand while I use my tablet with my right).

    Thanks for such killer work Chris!

  26. blue
    Permalink to comment#

    The video was getting really good too, I was learning about mattes (never used them…) and learning a work around, then the video ended.

    I did notice though, a potential “security” risk. As you are talking about how you believe that you have spammers who are actually malicious human beings visiting your site, you switched over to G-Mail, and on full display is someone’s email address. I’d suggest blocking it out if you can….

  27. Permalink to comment#

    I re-uploaded a somewhat-fixed version of the video, but it’s still cached and downloading the old one for me. Hopefully it will fix itself with time here…. Otherwise try hard refreshing and trying the direct download link.

  28. Permalink to comment#

    Is it me or did the screencast abruptly ended?

    • Permalink to comment#

      Also, if you press (Windows) CTRL in the ‘Save for Web’ interface you can zoom in. CTRL+ALT to zoom out.

  29. Permalink to comment#

    Hi Chris, My biggest randomn pet peeve is when your watching a screencast and it cuts off before its finished!! :-)

  30. Mads
    Permalink to comment#

    Hi Chris, since you brought it up I have a Photoshop Pet Peeve, that I must drives me nuts!

    If I drag let’s say 10 images on the PS icon or just dobbelt click to open, it just opens one! Have you or anyone else have this happen?

    It have something to do with snow leopard, becaues it happen right after the installation!

    Any way, keep up the good work, and if you got time to make a screencast on flutter or something better I’ll slap you a “high five” if you ever come by Danmark!

    • Mads
      Permalink to comment#

      If any one need a fix for flutter go to http://magicfields.org/ the guys have made a verison that works :) I hade at lot of troubel with the checkbox list in flutter, but there is no problems with magicfields.

  31. Permalink to comment#

    The spam ones are like a natural disaster the doesn’t end! I have a forum and I had to make the moderators to approve every single message manually. (The auto script helps though, but DAMN). Around a fifth of all messages got denied when I first implemented it. Now the just know there’s no use. No spam can match human selection :). I had to double my staff thou :P

  32. Permalink to comment#

    So what were the other 5? :o)

  33. Matt
    Permalink to comment#

    I’m probably one of your worst offenders for “Hey, good job!” posts.

    Here’s my 2 seconds of thought: I love your screencasts because you are the one narrating it, and not some script. While I love going to nettuts to learn something new for the day, I love to watch your screencasts because I get to see such things as “WELL, ON THE SUBJECT OF PET PEAVES…” (sic).

    You just put so much emotion and opinion into your screencasts, and I think that’s just awesome. I wish other people could be less robotic.

    Oh, and if it matters, I was a moderator on a forum for about 4 years, in which my email was publicly available. I recently changed my email because I was garnering about 300-400 spam emails per day!

  34. Permalink to comment#

    Thanks for the screencast. I was really impressed with your ballsy preface. We do have to be perceptive down to tiny margins, it’s a blessing and a curse, but not something you have to apologize for.

  35. Permalink to comment#

    Hey Chris, good video!

    On spam: I custom created my personal blog from scratch, and didn’t do anything for spam protection at first. I figure, who’s going to spam a tiny little blog that’s got no relevance to anything or any kind of a following? I did a post about Toys R Us’s website not being compatible with anything older than Netscape 4 (believe it or not!), and suddenly, I started getting spam comments. Rather than go the captcha route or utilizing a plugin such as Akismet, I added an extra field to my comments section, zeroed out the height and width and set the visibility to hidden. Any spam-bot that tried to post would fill out this field, and would get a message back saying that the post had been identified as spam. It worked for the most part, but I was still getting some spam through, all of which had email addresses @mail.ru, so I added some more PHP script, returning a message stating that comments are not allowed from that domain. Haven’t had spam since.

    Not sure how well that would work on a popular site like CSS-Tricks, but it worked for me.

    • Permalink to comment#

      I have seen this on a tut somewhere actually and thought it was a great idea! I think the call it either ‘invisible captcha’ or ‘negative captcha’ or something like that. Nice to see it is working for you though!

    • TeMc
      Permalink to comment#

      That invisible captcha is based on a more and more populair technique.

      instead of letting the human proof he’s a human, let the bot proof he’s a bot.

      Another idea:
      an visible! field with an empty label and the input-field with a background-image stating “Leave this blank” – is my personal favorite actually. Because it’s a background-image and not text a robot can’t read the word “empty” maybe thinking it should be left empty, and since it’s not an invisible field it’s not recognizing that either.

      my 2$

  36. Jack Watson-Hamblin
    Permalink to comment#

    It is really small the changes UI wise in Snow Leopard, but, the other thing I noticed after a few days was that if you have something minimised and use expose to show all windows, it will show the minimised things down under all the open windows. Thought it was kinda cool… not that big of a change though

  37. norfauji
    Permalink to comment#

    How did you have categorize ur dock?

  38. Permalink to comment#

    I have found that IETester throws less errors if you right-click the icon and ‘Run as Administrator’, I think its a windows security setting somewhere that causes these crashes and fails. Plus grab the latest version 0.3.5 as it runs a bit sweeter and has some nice new(ish) features.

    Let me know if that fixes it!

  39. Natalie
    Permalink to comment#

    Most likely not the place to post this (and that is a pet peeve of mine!) but you mentioned you will be doing another three part WordPress tut soon.

    Can you please include integrating Jquery into WordPress with it? I am learning WP mostly through here and some other tuts (including digging into WP) and I can’t get this to work. Really frustrating and I am sure it is very simple. Thanks

  40. scott
    Permalink to comment#

    why can’t I rewind your videos like I used to?

  41. Permalink to comment#

    I never noticed the Matte option in Photoshop before. I usually just tried to delete the lighter colors around the edge of gif/png then usually ended up getting frustrated and used a png 24. Nice to know :)

  42. Fun little screen cast, I’m really wondering if I should buy a Mac in the future because the dash board looks quite sleek and sexy. I’d love to see more of what that operating system can do sometime. ;)

    The spam…yeah I have to deal with it as well. Unfortunately spam also gets into my “main” email box so it’s quite a hindrance.

  43. Not sure if it has been brought up yet or not, but concerning the wilcox magic site; it is more than likely a trailing comma in a json string or object. something like:

    var json = {'a':'value_a','b':'value_b',};

    Notice the last comma after the value of b. Firefox doesn’t complain about it, but IE seems to hate it.

  44. Permalink to comment#

    Hey Chris,

    I’ve found that Photoshop does a pretty bad job with PNG 8 images. If you use Fireworks instead to do them it actually allows full alpha transparency (as in like 50% alpha on a pixel) so there is no need for the matte colour. I don’t know why Adobe hasn’t put this in for Photoshop.

    Should give it a try and see if it fixes your pet peeve with having to add the matte colour. Hope this helps.

  45. Permalink to comment#

    Nice Job! LOL. No seriously, I think you did well only doing a 30 min screencast of pet-peeves, I think I’d be there all day.

    I get annoyed with only 1 or 2 spam messages on my little site so I can only imagine how many tries it’s luck on this site!!

  46. Spencerf
    Permalink to comment#

    Hey, did it cut off half way for anyone else?

  47. chris gallagher
    Permalink to comment#

    One of my biggest gripes at the moment is why wordpress jumps around when editing code or text in the browser directly, I know i can take it out into another program , but sometimes , when its a simple addition I need to make – I dont want to go to those lengths.It happens when you are at the bottom (or near) of a page. It drives me round the twist!
    Otherwise – nice article – oops it shouldn’t have said that! :)

  48. Permalink to comment#

    My biggest peeve is definitely that today is the first time I have visited this post and it’s still just showing me the cut-off version :) Even when I download the m4v!

  49. Even I have faced that IE Tester pet peeve of your’s. Its really very annoying! I have this jQuery pet peeve. Sometimes when a person is using a fade technique on an image or a text, a white background on the edges tend to appear during the transition from fade out or fade in. It generally happens in Chrome. Though I don’t know that its common for everybody or is it just my chrome :P

    By the way, the best thing I like about your screen casts is that you host it like a friend and very casually. It just makes it a bit more interesting that way ;)

  50. Permalink to comment#

    The random 10-15 minute wait-then-crash on IETester is very irritating. I think it has something to do with Data Execution Prevention, even though I have hardcore disabled it >_>.

    @Randy I hope you are right, might go and turn the debugger off now :-)

  51. Permalink to comment#

    Chris, the iPod/iPhone version was cut off by the end. But I totally agree on the WP Hello Dolly Plugin. I hate it when the upgrade function adds it again.

  52. Permalink to comment#

    Hey Chris,
    Very nice of you to share your pet peeves with all of us. I do agree about the spam in wordpress (or any blog for that matter) comments. I am using intensedebate plugin from the same folks behind wordpress and it is really good in catching all spambots effectively. Most important it lets visitors to leave a comment by authenticating with twitter or facebook credentials.
    I really love the code snippets section, you can add one more category there for twitter related snippets. There are tons of example found at snipplr and I am sure css-tricks readers will be contributing too.
    You should do this kind of practical screencasts about every day issues often.
    Shameless plug: http://www.tweetzy.me is a blog with a difference, anyone can sign up and contribute articles – only rule is it must be relevant to twitter, twitter tools, mashups etc (no affiliate marketing encouraged). I have started this to build a community of active twitter enthusiasts who can exchange views and business ideas, collaborate with like minded people and bring to fruition more exciting twitter mashups. Consider this my personal invitation to all css-tricks readers to join the tweetzyme community.

  53. Snookerman
    Permalink to comment#

    Great video!!

    Hehe, sorry. Here is one of my pet peeves on your site. It’s the poll. I’m using the latest Firefox and every time I hit “Vote”, the poll starts loading like it will nicely fade from questions to results and then BOOM! The results take over the whole window. So if I’m reading an article or watching a screencast, everything disappears and all I get is a blank page with the results of the poll in the corner. It kills me. Please get it fixed.

  54. Permalink to comment#

    Oh joy!!! around 30 minutes, your pet peeve about transparency and the halo background colour effects … all the grief trying to fight it only to find it looks cack in IE version whatever anyway… That was (is, I just paused the video to write this) such a refreshing bit of news for me. I just did a .psd layout to xhtml site for a friend who is a graphics designer (for print) with 25+ years experience in the trade. He kept sending me all these images supposedly transparent, loads of drop shadows and gradients fades to transparency and I was tearing what little hair I have left out… They just weren’t working right – halos around the transparency or just solid background colour once dropped into the site Aaaargghhhh I’m still waking up with cold sweats! I ended up talking him out of all the shadows etc and actually the site does look a lot cleaner as a result but man was I getting seriously pi$$ed off with .png

  55. Ngan
    Permalink to comment#

    Consider using IE Collection:

    http://finalbuilds.edskes.net/iecollection.htm

    It’ll install all versions of IE on your computer.

  56. Just a quick comment on your pet peeve with photoshop, why are you trying to copy and paste? You just select ‘Foreground Color’ on the Matte options. Much easier than copy and paste.

  57. Permalink to comment#

    Hey Chris,

    that was a very funny video. Yes the IEtester crashes on my end too and found it sooo frustrating. I was laughing my ass off when I saw that. I got rid of all weird standalone IE and basically run several images of XP each with the correct installation of IE and never look back at weird hacked-together IE versions! Wohoo!

    Also the matte color issue. God that is so frickin annooying. And yes I do exactly the same, i.e. writing it down or try to remember it but then forget the last chars and need to go back to get the correct hex code. Man that bug has been in CS for like couple of versions and can’t believe they don’t fix it!

    Well that was a great screencast, pretty random but damn funny for those who can relate to those problems, hehe.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".