Posts Tagged ‘Web Design’

Wordpress 3.0, some links, lets exclude people, and more!

Tuesday, June 22nd, 2010

Sooooo….what to talk about. Well, lets start with the Wordpress 3.0. Its out, as you all know (unless you are living under a rock), and has a ton of great new features. One of which I can’t wait to see, is the new menu manager. I’d like to try everything really, but I’m scared as hell. I went to the WordPress forum and saw some really scary stuff. “Hey, why is my admin page all white?” or “Where did my blog go?” kind of thing. Most of the problems seem to come from plugin compatibility. That is where I’m nervous. I have some plugins that might not go well with 3.0, and I don’t want to lose them. If anyone has upgraded from 2.9.2, to 3, please take a look at my post about my plugins, and if you know of any that will not work, let me know. I would be most greatful.

Next up, some links. I don’t know why all of a sudden these are popping up now, but apparently people think that code snippet sites are the “bomb.” Why not use Evernote? Do you really have time to go to a site and just browse through snippets that people have come up with? I sure don’t. But if you are indeed one who does, here are two new ones: smipplr, and codesnipp.it. If you would be so kind and let me know if you find sites like these helpful, or if you use them? A small comment review on one would be helpful. I struggle to wrap my mind around the usefulness of these things. Its like they are trying to come up with a social network site for us devs/designers, but this is all they could come up with.

(more…)

Creating your own web dev tool kit – Part II: Being fast

Friday, June 4th, 2010

In my Part I post, I talked about having a base CSS starting file and an HTML/PHP/Whatever file. This helps you do things quickly that would normally take time to set up. But what else is there that can spead up your process in getting a site done quickly?

Keyboard Kung-fu

Plenty, I say, plenty. Most of them little. It used to be, back in the day, that Photoshop didn’t allow you to edit your keyboard shortcuts. I use to have a huge Action file that did all sorts of things like flatten layers, change color modes, aligning things with a push of a button, stuff like that. Now though, PS allows you to customize the keyboard shortcut preferences. I have a ton of my rearranged. For instance, to flatten layers, I just have to hit F2, to change to RGB mode for when I get something that is in CMYK or when I open a gif, I just hit Ctrl + R, and bingo, RGB mode.

Doesn’t seem like much, but think of all of things you do in Photoshop…and I mean things you do all the time. Wouldn’t it be nice to just hit a button and presto that is done? I know this sounds stupidly easy, but I am still amazed by how many new developers keep going to the damn menus to do simple things. Maybe they are scared to overwrite the shortcuts that PS has by default. Well, they shouldn’t.

(more…)

Creating your own tool kit – Part I: CSS

Thursday, May 27th, 2010

How many of you start every design from scratch? Meaning you will code your html and css from the beginning. If you are a beginner, probably quite a few. Which is a good thing, because that is how you learn your chops. I do it every once in a while, so I don’t forget things. Most of the time I am starting from a starter file I created. I have different versions of CSS files, depending on what I am building. At work, the one I made is very detailed, and can be because we follow a strict structure. It also helps because I consistently use the same id names, and when I firebug something, I know right away what the hell is going on.

Creating a file like this to be reused is just one of the tools web developers have in their “tool kit.” Things we have to speed up the time it takes to build a site. Tonight is part one in how ever many I decide to do. They won’t be consecutive, but spread out whenever I get one together. For my next one, I would like to do a base CSS file, but using Sass and showing the neat little tricks you can do with it.

(more…)

Things we do in the beginning that make us shake our heads now

Tuesday, May 18th, 2010

Sometimes its hard to write blog posts, because nothing inspiring pops into my head. Didn’t get to actually learn anything tonight, which sucks, but I will be on a mission tomorrow to do just that. Anyway, a thought came into my head as I was staring mindlessly at my keyboard. “Wow…remember when I tried to do THAT the first time? God I was an idiot!”

We’ve all had those moments. One of mine was getting things positioned using ‘relative’ positioning. I won’t go into the details, of how dumb I was, but lets just say I had my top margins at -500px or something silly like that. Now I know that you have to position relative the parent div and absolute the one you need to place with pin point accuracy using top and left. All browsers then get along.

Another…the float. I used to float the HELL out of divs, when it was totally unnecessary. I mean EVERYTHING. Stupid, stupid, stupid. Yes I could get things to work, but man what a pain in the ass.

Or how about dealing with IE6’s double margin? I used to write a separate rule for each margin that had a a left or right on it for IE6, when really a display: inline will work just fine.

You know when everything got real easy though? Using a css reset. I remember doing a site that had a bunch of ul’s on it, and they were all different. My css was disgusting. Everyone of them had seperate padding and margin rules and all sorts of crazy was going on. If I had just reset them all to 0, and then adjusted what I needed…wow.

So what are some things you have done that makes you shake your head and want to slap yourself? I know there are a ton more that I’ve done. But really, that is the point of this blog. To help the new and middle level web developer skip through all the crap I’ve gown through. I wish I had the resources available to me back in the day, as everyone does now.

Oh, and if anyone has a freakin’ link/site that shows how to start from ground zero to getting a web page up and going using Ruby, PLEASE give it to me! I talking about a for dummies type approach.

jQuery junkBox

.prependTo(target);
This method will return matching elements and add them to the beginning to the target. So, below would add an h1 tag to the beginning of the tag with an id of ‘container’

$('h1').prependTo('#container');

Divititis….beware, its catchy!

Tuesday, April 20th, 2010

I’m sure you have heard someone either say or write about “divititis.” If not, it is referring to someone who over uses the ‘div’ tag. If someone with this terrible disease were to, say…design a navigation, they would do something like this:

<div id="container">
    <div id="navigationContainer">
        <div id="navList">
            <ul>
                <li>Nav item 1</li>
                <li>Nav item 2</li>
                <li>Nav item 3</li>
                <li>Nav item 4</li>
            </ul>
       </div>
    </div>
</div>

In most cases though, you could just have the first container and the ul. You can position any block level element, such as the ul, just as you would a div. By doing so, you would eliminate unnecessary code, making it cleaner as well as easier to read and figure out what is going on. Now of course, there are going to be times where you need extra container-y things to do some graphic awesomeness, because the multiple background CSS3 styling isn’t supported across the board. I get that, but I would bet a majority of the time, if you looked at your code, you could strip some of the crap out.

(more…)