brian on 2008.03.18 at 06:46 pm
If you download the latest official build of Apple’s Safari web browser, you’ll gain access to it’s new developer menu.
Previously, you had access to a “Debug” menu, which gave you many options, mostly for WebKit.org’s use in debugging the browser. You had to set a hidden, command-line preference to access it. However, the latest build, the feature is available in the Advanced tab of the application preferences.
The new Develop menu has (as far as I can tell) all the same functionality of the old Debug menu for web developers, but show much more succinctly. The big feature is the Web Inspector.
Clicking “Develop > Show Web Inspector” brings up a an attractive window that allows you to inspect in part of the web page you’re viewing. From Safari’s Help menu:
It lets you view and search the page’s source code, Cascading Style Sheet (CSS) information, DOM trees, visual DOM metrics, and DOM properties. The Web Inspector also contains the error console and network timeline.
You optionally have the choice of attaching the inspector to the bottom of your browser window, like Firebug for Mozilla Firefox. The bottom left corner of the Inspector window contains a toggle button to attach/detach the Inspector.
To use, the simplest thing to do is Right-click (or ctrl+click) the element in the web browser window that you would like to inspect. This will bring up your Inspector, with the element highlighted in the code. Additionally, Safari applies a nice dark grey-screen filter on the parts of the page you’re not inspecting. If you use the arrow keys to move up and down the code, or simply click on another code snippet in the Inspector, the highlight back on the rendered page adjusts in real time.
Sadly, for now, it appears that you cannot live edit, as you can in Firebug. If I can find a way to do this, I’ll update this blog entry.
brian on 2008.03.14 at 02:15 pm
I took a handful of crappy iPhone photos at the event, which you are invited to see.
jake on 2007.10.30 at 02:09 am
Back in college Brian used to randomly proclaim things he was reading online if he thought I’d be interested. He reenacted this over the weekend while I was visiting Boston. He stumbled upon some information involving Leopard’s rendering of submit buttons. Setting a background color removes Safari’s default aqua buttons and produces flat buttons with the declared background color.
Mr Dominey’s solution of setting a class or removing the styles all together works for restoring the default visuals. But it makes more sense to simply change them from
button type="submit". Using button instead of input reaps similar benefits when it comes to inheritance in non Safari browsers too.
Update: I spoke a little hastily last night. Brian thought it best that I test out my theory before mentioning it. Since I don’t have Leopard installed I had to use the Safari beta on Windows. It actually confirmed my hypothesis. Though in the beta Dominey’s solution actually failed. Can anyone take a look in Leopard?
I also rediscovered that Safari 2 does not handle buttons the same when using the button element. Not too mention IE6’s issues with buttons. They’re still usable but can require a little hacking… but then again what in IE6 doesn’t require a little hacking? ;)
Posted in: Design · Programming · Standards · Web
brian on 2007.06.12 at 12:02 am
Today is WWDC Keynote day, and I have a lot to say about how today seems like a disappointment at first, until you dig deeper and see exactly what kind of profound effect these seemingly small annoucements could have on a couple of industries. If you agree (or not) please leave a comment, and link up the post. This has to get out to web developers and phone developers, and fast. I can see my jet pack now…
Please read on, I think you’ll enjoy it.
brian on 2007.05.15 at 12:56 am
It will also support text resizing (long a complaint of mine) and microformats! Hooray for old-school usability and new school web2point0hishness.
brian on 2007.03.25 at 11:50 pm
Yeah, clearly, I cannot read simple tables. I thought there was two tracts, but clearly I am an idiot. So the below list of courses are one’s I’m looking forward to, not just the ones I’m attending, because I’m attending all of them. The upside is I get to see everything! (So I’ve re-written the post so that it makes sense.)
Twelve hours out from An Event Apart Boston, and I’m trying to plan out what sessions I’m going to attend. It’s not easy.
As of right now, this is my tentative schedule.
- Good vs. Great Design – Cameron Moll Looking forward to seeing Cameron in person!
*Secrets of CSS Jedi – Eric Meyer
This will be an in-depth exploration of how CSS really works, and how this knowledge can make your work easier.
- Writing the User Interface – Jeffrey Zeldman :: I’ve never seen the “Z-man” in person (He probably couldn’t pick me out of a line up, though. But why would he need to?) so this should be great. That and the topic is really interesting, the idea of writing as design, which I think receives much less attention than it deserves.
- Redesigning Your Way Out of a Paper Bag – Jason Santa Maria :: We’re in the midsts of redesigning one of our sites at work (due out soon) and am interested.
- The Web Usability Diet – Steve Krug :: Let’s see what Steve has to say. I really enjoyed reading his book when I first got seriously interested in usability.
- Selling Design – Jeffrey Zeldman :: The most successful designers can sell their ideas, not just make them beautiful. Z is certainly one of the best sellers of design out there, and I’m interested in hearing how.
- Interface Design Juggling – Dan Cederholm :: I’m always reading about how hard Dan works on his presentations, so I feel I should see how they turn out. Forget that his work is some of the finest examples of understated elegance, executed in fine CSS, available.
Wow, what a murderer’s row. I’m excited. I’m likely not to attend the post-conference party Monday night, since I live locally, won’t have anything to do during the hour gap between the end of the last session and the party, and thus I’ll be pretty wiped with the hour T commute both ways. So if you want to talk to me (I’m very popular) you’ll want to find me during the day. If the WiFi is good, I should also be twittering, so hopefully you can follow me on my Twitter feed.
Looking forward to tomorrow.
brian on 2006.08.30 at 11:32 pm
brian on 2005.11.21 at 03:13 pm
As I am not a developer of this sort, I am not qualified to say it’s a good spec or not, but the promises look… eh-hem, promising. Common, open specs are good all around. I’d love to see it integrated so that it can work with the vCard format for syncing contacts, and the iCal (.ics) format for lightwieght, standards-based calendaring.
I propose that SSE is pronounced “Essex.” (Here’s what Essex is.) This would also help distinguish it vocally from Intel’s SSE. The next letter after the “E” in Extensions is an “x” so it would be a natural. Saying “Ess” gives a nod to the two “S’s” and avoids the trouble-prone option of calling it “sex.” The last thing anyone needs is more “sex” on the internets.
Posted in: Standards · Technology · Web
brian on 2005.11.10 at 08:03 pm
The authors of this blog wish to bring to your attention:
Heehee. And don’t miss its sister site, Kill Bill’s Browser. which is a checklist of the best reasons (in their opinion) to leave IE. I laughed out loud at reason number eight.
We will not be employing any draconian devices to entice our readers to not use Internet Explorer. We support the use of any web standards compliant browsers, especially ones derived from open source projects.
Personally I spend most of my time in Safari, with the rest of my time split between Camino (for you Windows users, that’s a Mac-only derivative of Firefox) and Firefox. I usually use the original Firefox when viewing image-intesive websites so i can use its Linky extension. I also use the Web Developer’s Extension toolbar for design and development.
So if you haven’t got the gist yet, and you use Internet Explorer… get a clue.
Posted in: Software · Standards · Technology · Web
jake on 2005.06.27 at 06:36 pm
Just a new link list.
- Creative Zen Micro — Thank God my little brother doesn’t read these pages, at least I don’t think he does. In any event, he choose the Zen Micro over an iPod mini (just barely) so I ordered one from ZipZoomFly and spent a little time loading CD’s into it for him. Now he has a bunch of good albums and it gives me a chance to play with it ;).
- I’m not sure what to do about searching around here. Currently we just use Google. Which isn’t too bad since Google loves us. Or at least we like to think so. I’m also looking into just using Full-Text Search like Textpattern does. Another possibility is using The Search Engine Project.
brian on 2005.06.24 at 01:28 pm
Things bouncing around my head that you should perhaps know about, in no particular order:
- Camino 0.9a1 – I’m posting from this latest update, which has a lot of new goodness in it.
- microformats.org – stuff we’re interested in here. Lots of good new stuff. Designed by friend Dan C.
- New music:
- That’s What I Say [ITMS] – Jazz guitar great’s tribute to the late genius Ray Charles, featuring other stars including John Mayer, Warren Hayes, Aaron Neville, Mavis Staples and Dr. John. OUTSTANDING Especially like What’d I Say featuring John Mayer, Hit the Road Jack, and I Don’t Need No Doctor.
- Transatlanticism [ITMS] – To resist Ben Gibbard sticky bubblegum alt-pop rock is futile. Especially enjoying The New Year, Title and Registration, and We Looked Like Giants. Excellent. If you enjoyed The Postal Service, then don’t miss Ben’s regular gig with Death Cab. Not that this album, nor the band are new. In fact I have friends who have listened to Ben’s assorted works for a while, but I’ve just now bought in.
- MIT Weblog Survey – Do participate if you are of the blogging persuasion. It’s fun, and very well made from a technical standpoint. Cam Marlow sez… “Thanks so much for the respect on the design, I did invest quite a bit of time into getting the AJAX to work” and work it does. Be sure to check thr results as well, when you’re done. Worth the effort. Cam’s behind Blogdex, as well.
brian on 2005.04.16 at 12:46 pm*Outstanding.* Dave Hyatt write on his weblog about the release of of Safari 1.3 along with Mac OS X 10.3.9 update. There are "thousands" of engine updates.
What you are getting is all of the new standards support, new WebKit capabilites, site compatibility fixes and performance optimizations that are also present in Safari 2.0 for Tiger. The layout engines for the two are virtually identical.
brian on 2005.03.15 at 11:47 am
I love iPhoto. However, there are times I wish I could use it to produce photo galleries that I could style on my own, using CSS.
Now I can, introducing Well-Formed , from All That is Solid. And, not only does it produce xHTML and styles in CSS, but it can also produce XML and SQL. Excellent. Additionally, there is an “extras” section which includes a simple Flash gallery, to boot.
At very least I have something that’ll export the thumbs, web-sized pics and a bare bones gallery for me to style on top of. That’s outstanding.
Posted in: Photography · Software · Standards · Web
brian on 2004.11.09 at 01:55 pm
Coincidentally, this coincides with my 26th. I feel special.
What am I doing on my birthday? Working. A closing shift.
What am I getting for my birthday? Amanda is getting me a new Timbuk2 courier bag. For those of you who don't personally know me, I like cycling bags, so I am all smiles over this.
Additionally, I'm considering getting a G5 tower to act as my home server and a central backup solution. All my drives are full. I can get a good price on a single processor 1.8, and I am debating making the plunge. This could be fun.
Posted in: Software · Standards · Technology
jake on 2004.07.16 at 05:54 pm
I've been trying to wrap my head around this all day. Wired has an article touting the changing of your browser. With all of the security problems out there for Internet Explorer it makes sense not to use it. There are other reasons, since I'm a designer (and not a writer) I'll touch on those aspects in a second but let me start with security.
The article lists off five alternatives. Two of these recommendations are flawed. iRider and Deepnet Explorer are shells that wrap around Internet Explorer. They add a bunch of functionality and with things like pop-up blocking are arguably more secure. But they are still running IE under the hood and therefore are still perceptible to not all, but some, if not many vulnerabilities. The real kicker is that iRider has a walkthrough to make browsing with their software more secure. But all the settings you are changing while going through the process are actually Internet Explorer settings. You are actually making Internet Explorer more secure, which is a good thing, but things they mention, like running Windows Update, should be happening anyway.
Both of these browsers (yes I downloaded them) add a lot to the browsing experience and iRider has a tabbed interface similar and beyond Omniweb's (for Mac), which I love. But if you want to actually be more secure I'd go with one of the other offerings mentioned, like the Mozilla Suite, Opera, or Safari (only for Mac).
The other big gripe I have with IE wrapping browsers is their inherent lack of standards support because of IE's crappy standards support. In not updating IE since 2001 (besides security issues) Microsoft has left what was once the king of standards to stagnate. Now many of the hacks and workarounds that web developers used to have to do with Netscape 4 we have to do for IE.
It also can not display PNG image files correctly. So many of the nice things like million colored icons with full transparency, something many WindowsXP and OS X users take for granted now on their desktops, can not be translated to the web.
Many end users don't really care about making developers like us happier just because we would have an easier time with making web sites. But I implore you to think about the other things. If all you want to do is make your browser a little more secure and get some nice new features then go get one of the two wrapper programs mentioned above. They'll give you some nice new features and if you follow that security page you'll be a little safer from jerks out there. Just don't forget they're wrapped around an unsafe browser to begin with. If you want something completely different go get Mozilla or Opera and browse away to your hearts content.
Remember it's basically impossible to actually remove IE from your system so if you come across a page that says it's IE only then open up IE and just go to that page. Just don't use it for everything.
Posted in: Service Announcement · Software · Standards
brian on 2004.04.14 at 04:25 pm
FOLDOC is the Free On-Line Dictionary of Computing. I found this today after looking up the word "twain" as in "Ne’er the twain shall meet" which is said to give birth to the term TWAIN, a standard technology which brought together personal computers and scanners. TWAIN is not an acronym, but that did keep popular folklore from making up an extension for it, "Technology Without An Interesting Name."
By the way, "twain" means a lot of things, but "pair" is one of the fitting definitions in this case.
Lastly, FOLDOC is supposed to be found at http://www.foldoc.org but the first time I typed that, it didn't connect. Subsequently, it redirected to the above linked site. Additionally, there are mirrors of the Imperial College (UK) FOLDOC site.
None of this has the least to do with Samuel Langhorne Clemens. Sorry for any confusion.
Posted in: Standards · Technology · Web
jake on 2004.02.08 at 01:46 am
jake on 2003.10.10 at 04:18 pm
A couple things brought me to research this technique. One was that I wanted to be able to style things in the manner of Jeff Croft. You can notice that on his blog when you mouseover an entry the links highlight. Their color goes from a dark grey (the rest of the text is a lighter shade) to orange.
The second was that a few web sites use the style display: block to create some fancy looking links. A couple of them are; Adaptive Path, and twothirty. Adaptive Path uses the technique to highlight two boxes towards the bottom left which contain pictures and some extra text besides just a generic link. On the twothirty page it is used to bring out their two primary services, website design, and web application interface design.
I wanted to combine these two techniques because to add any block elements, like a form, inside the link tag would function, but not validate. And Jeff's nice little highlight feature uses the :hover declaration on something other than a link. This validates, but does not function on many browsers.
I've seen something similar done using inline code and setting things like this.style.backgroundColor, but that destroys the whole notion of CSS. Also this would get even more unruly trying to style other elements within the text block.
To view what the heck I'm talking about, I have set up a local page. I tried to give the code some structure, but if anyone has problems with figuring it out, I can try and clean it some more.
jake on 2003.08.19 at 03:28 pm
jake on 2003.07.30 at 01:33 pm
Simplebits has a post about setting the negative space of an image to the same color as your background. Then you can set the positive space to transparent and change the color of the icon at will. I have done something like this before, but I'll let Dan do the talking.
jake on 2003.07.24 at 01:12 pm
Zeldman has been posting XHTML/CSS standards sites recently. A couple of them caught my eye as very well done. I'm a big fan of standards compliance, but making the site look good too is always a bonus.
The first is a weather site for Lawrence, Kansas. I really love the image swapping at the top. It has an illustration along the top that depending on the weather changes for each day. The colors are nice and the fact that it's XHTML is great.
The second site is a design group from England. It's fairly simple, minimalist, black text on a white background, but it looks good doing it. It also has fairly good semantics.