Thread

div#day_dreaming_in_css {
 browser-family: safari, firefox, IE7, opera, kitchen-sink;
}

When I code the CSS for a site, I use an editor that allows me to see about 90 percent of my changes live in its own browser area, has built-in code validation, indenting and features beyond what I’ve had time to play with. It really speeds up the process, and I appreciate the finished CSS as it’s so much better than the ragged code I was creating a few years ago.

At the same time I’m coding the CSS, I have EE open in another window so I can add new divs as needed and add comments in the cool

{!-- hidden comments --}

tags that Paul created for us a few years ago. On a good day, I’ll even hand-code in some weblog tags so I can sample some of the basic dynamic content while coding my CSS.

Continue Reading

I caught myself daydreaming today of [a] time way, way off in the future when we can recommend a browser, just as easily as we do a font in CSS today.

Surely we wouldn’t want back the days of “Best viewed with Browser X”, albeit automatically? It looks like even IE is slowly catching on to the importance of web standards, so I am hoping for the best.

Reminds me of a strip I recently found again while cleaning up old files on my harddisk (And, yes, attaching it here is fine with their licence.)

That’s a great strip Ingmar!

Last weekend I finally started playing with the EE bundle for TextMate and now I’m thinking about how I can incorporate this great tool into my building method. I can see a day in the near future, when I’ve become familiar with it, that it could save me time and effort too.

It’s probably old news to you, but TextMate together with It’s all text and Firefox is really a time saver. This way you can edit the text boxes from EE in TextMate.

What CSS editor are you using? I’m using CSSEdit.

I would love to see some video tutorials from you guys with good coding practices and the tool pipeline you’re using to develop an EE site.

Kurt:

It is worth pointing out that Maxthon and Shira are derivative browsers that use common rendering engines (Maxthon=Trident:IE/Gecko:Firefox, Shira=Webkit:Safari). Testing them seems somewhat redundant.

ref:
http://en.wikipedia.org/wiki/Maxthon
http://en.wikipedia.org/wiki/Shiira

@eexperience - Somehow “It’s all text” hasn’t made its way into my FF yet. The challenge for me has been that when things are busy, (and that’s nearly all the time), I tend to keep reaching for the same old tools, as I don’t want to slow down long enough to try new ones. Hearing from folks that are using different tools, and how they are using them though can make me curious enough to make the time to try out some new things, and see how they may find their way into my work flow.

The more of us that share what’s really working well for them, the more tools we’re likely to learn about. Especially those one-man and one-woman dev/design shops that use EE, as they may not get exposed to as many of the helpful tools as some of us do.

Jamie Poitra introduced me to CSSEdit a while ago and I’ve been using it most of the time now, this week I’m trying out firebug and some of its features, like the Yslow add on just to see what those are all about. Two weeks ago I had a client that needed a free FTP client, so I had her install the FireFTP (another FF add on) and we had her up and running with it in just a few minutes.

There are a lot of good tools out there these days, I just don’t have, or make the time to play with them all, but I love learning about them, so that when I do have some “play-time”, I can try them out.

@colinscroggins - Yes, those two are based on popular rendering engines, that’s why I just check them for fun mostly. Although, sometimes I’ll catch something in Shiira or Maxthon that I overlooked in one of the other browsers.

There are a lot of good tools out there these days, I just don’t have, or make the time to play with them all, but I love learning about them, so that when I do have some “play-time”, I can try them out.

I don’t have the time really myself either but I do always try out every single productivity application on OSX that comes out. I am subscribed to Versiontracker and quite a few other sites such as that and get about 12 e-mails a day with all the new programmes listed and if anything catches my eye I will always try them out. I usually stay up until around 3 or 4 in the morning and have to then get to work at 8 so I can safely say that there isn’t much that gets past me! 😉

I’ve been using the Mac now ever since they first came out and in that time must have used SO many applications that the mind would probably boggle.

Going back to what you said in your post though about the TextMate bundle. I think these things are good in one way but in others I think they can make people not only a little lazy but also I think that they can actually hinder working on sites because if you are always allowing something else to fill in the code for you then you will most likely forget how to code it yourself at some stage and if you move across to another computer that doesn’t have those productivity apps on it then you can most likely get in a right pickle! 😉

I think that if you are fast at coding tags and whole pages then stick at it. You will just get faster and much better at it in time but adding in all the productivity apps take away some of that learning curve and really stop you from venturing down other paths that you may have gone to if you hadn’t used them.

I’m not saying that they are all 100% bad as I do use a few on my computer myself, namely Quicksilver as the main one and then Default Folder, Deskshade and a few other bits and bobs that don’t really get in the way so to speak but I try to never use anything that is going to fill in answers for me as I would just forget how to do it myself then.

Really it is obviously down to the individual but personally I would say that if you are good at coding already and pretty speedy then “If it ain’t broke, don’t fix it!” 😉 as you will carry on to just get quicker and quicker as time goes by.

Just my two penneths worth anyway! Nice read by the way Kurt.

Best wishes,

Mark

Give that same composition to a creative jazz band though, and all bets are off. She can’t dictate what instruments will play what parts, or predict the tempo, the dynamic range, or that all the written notes will be played, or with what rhythms. Once the group starts to play her tune, she might still recognize melody and some of the harmony of the composition, but shouldn’t count on it

Write a free tune based on the trumpet excerpt at the beginning of Mahler 5, in 7/4 with an “ECM” groove….

I love the look in sometimes get from people after passing out a “free” tune….

“uhhh….dude, you forgot to write changes on my part.”  ha!

OT….sorry….

Kurt, nice article, I always look forward to them.

-greg

I love your example of working with IE. I have at times stooped to making snide comments about Microsoft for making IE as an explanation for why the site needs to go through that last (usually more lengthy than my client or I wish) CSS-IE-hack-process.

@Greg A. - There’s this drummer in my town that can read flyspecs on the page. I love him, I hate him. I’ve always wanted to mess with his brain just a tad bit.

On drum charts (music written for drummers of bigbands and the like) there is typically a “style” or “groove” marking near the top left of the page somewhere to give the drummer a clue as to what style the tune should be played in.

You get use to seeing “FoxTrot, Swing, Shuffle, BossaNova, ChaCha. . .” there’s a whole bunch of them and the pro’s all pride them selves in knowing how to interpret the music when they see them.

I’ve always wanted to slip a chart on to this guy’s stand with a style marking of “Rabbit**”

Then down at the bottom of the chart. . .

**Rabbit: a groove that is open on both sides

Just to see what he would play.

I like to think I have streamlined my workflow as much as possible.

I have been using Panic‘s great one-window web-development application, Coda. I have fallen in love with it and absolutely cannot recommend anything else. It is commercial software, but at $80 a great deal for all the functionality! I believe there is a free trial for anyone interested.

Browsershots is a great web tool for testing your design in lots of browsers.

I also run a Windows XP and Ubuntu virtual machine using VMWare Fusion on my Mac, this allows me to instantly check compatibility in XP, in all the various browsers, without having a separate box dedicated to running Windows. To be honest, emulating Windows XP on my Mac is actually faster than running Windows XP on it’s own hardware.

In the screenshot below I have 4 browsers open. 2 of them on the XP virtual machine, and 2 mac browsers. nifty yea.

Ingmar beat me to my comment. Any site that dictates a browser to me doesn’t get my readership, and sometimes companies don’t get my business just based off lack of browser support.

These videos must be viewed using “Firefox with the Silverlight plugin,” or any other such nonsense just means I won’t view those videos on your site. If really interested, I may google the content and find the videos elsewhere, but I’ve moved on from your site.

And I had a bank “upgrade” their system, then tell me their online banking only works on IE 6 and above. I use a Mac, so am guessing you can see the problem right away. I withdrew my cash, and found a Credit Union that does support Safari.

Browsers are almost like a religion to some people. Take me for example. I use it because it’s Apple’s. Are their better browsers out there? Sure. Do I use them? No. I know this one. I don’t want to have to THINK when using a browser. Of course, I check my sites on as many as I can, and Firebug is a great help to me when I am debugging a CSS issue, otherwise I wouldn’t even have other browsers on my Mac.

Ingmar beat me to my comment. Any site that dictates a browser to me doesn’t get my readership, and sometimes companies don’t get my business just based off lack of browser support.

These videos must be viewed using “Firefox with the Silverlight plugin,” or any other such nonsense just means I won’t view those videos on your site. If really interested, I may google the content and find the videos elsewhere, but I’ve moved on from your site.

And I had a bank “upgrade” their system, then tell me their online banking only works on IE 6 and above. I use a Mac, so am guessing you can see the problem right away. I withdrew my cash, and found a Credit Union that does support Safari.

Browsers are almost like a religion to some people. Take me for example. I use it because it’s Apple’s. Are their better browsers out there? Sure. Do I use them? No. I know this one. I don’t want to have to THINK when using a browser. Of course, I check my sites on as many as I can, and Firebug is a great help to me when I am debugging a CSS issue, otherwise I wouldn’t even have other browsers on my Mac.

Completely agree…and just about died laughing at Silverlight plugin.
BUT, by the same token you have justified your banks actions….mostly PC out there….mostly w our nasty 2-letter-friend IE loaded…therefor why worry about what majority of people want/have. Upgrade was probably due to some fancy active-x or some other MS/win gizmo tailored for IE experience of fake corporate GUI…and guess what, they are stuck with it. Man I hate supporting users who are now panicking because they can’t access ‘their money/their bank’. I am supposed to ‘relax’ company wide security so they can bank. The answers is the same…if they somehow manage to install sliver-thingy-jingy-plugin they are on their own or now have a new browser to learn…hello FF - period.
I am guilty of it as well….for ‘under the hood’ I use FF w a few plugins but browse the web through the eyes of IE….again, simply out of laziness and because I am used to organizing Fav/Bookmarks through it.

The best statement I heard about browsers was from a mother of a friend of mine.
“Thanks for setting up the new computer,BUT my AOL internet is now gone”. 😊

“best viewed under x” is excellent approach lol….what I am supposed to do? go buy a bigger monitor so I can see the site….is a fixed width page/site for single resolution supposed to be reverse psychology for weight loss or better glasses?
I am with you Chris….of to another site or revise my keywords.
Unfortunately, I don’t think this will change and we can only hope they browser companies will give up on making them.

The only thing one (I) can do is learn more about standards…if I have to condition the presentation then something is wrong.

In the meantime I would love to hear more from Pro’s that do this for living.
Thanks!

I think these things are good in one way but in others I think they can make people not only a little lazy but also I think that they can actually hinder working on sites because if you are always allowing something else to fill in the code for you then you will most likely forget how to code it yourself at some stage and if you move across to another computer that doesn’t have those productivity apps on it then you can most likely get in a right pickle!

Years ago an engineer told me to learn to code by hand. That’s the best advice in the world.
Editors are ok, but I agree 100% with the above. Add on knowing how to debug when things go wrong and not being limited by an editor.

A good solid template set that works in all browsers, and checked with browsercam or such, is the biggest timesaver I have, along with a LOT of templates on my site that are pre done code samples for clients sites.

Learn code until you can put on your site:

Best viewed in anything you want
.

Going back to what you said in your post though about the TextMate bundle. I think these things are good in one way but in others I think they can make people not only a little lazy but also I think that they can actually hinder working on sites because if you are always allowing something else to fill in the code for you then you will most likely forget how to code it yourself at some stage

I do agree with what you’re saying, but not in the context of TextMate bundles. You can create your own customized bundle. I made my own HTML and CSS bundles for TM and it just takes the repetition out o my workflow. For me, that’s what a computer (and programming) is all about… Getting rid off the tedious repetitive stuff… Just like Photoshop actions…

I’d rather type:

“iepng” + tab

than:

background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_img/image_name.png',sizingMethod='scale');

any day of the week, any time of the day… plus, in this particular example, I make a point not to pollute my brain by remembering this specific snippet 😉

The way I setup my CSS bundle, I type any declaration “acronym” then tab out to get the full thing, so for instance “lst” + tab + 1 becomes: “list-style-type: none;” I don’t forget anything, it doesn’t “fill out” anything for me but it saves me a *lot* of typing… 😊