Category: Web Development
May 01, 2013 Flattr this
Safari Web Inspector

webkit-icon-256.pngWith the update of Safari 6.0.4 i realized the Web Inspector changed in a way which makes it almost unusable for my needs. In 6.0.4, the Inspector wouldn't even properly show cascading css properties or inheritance for a selected element anymore! See the screenshots below for a comparison between Safari's and Chrome's Inspector.

I posted my frustration on Twitter and thanks to some keyword search running somewhere in a lonely cloud, a Safari Engineer got back to me. So thank you very much, Timothy! This blogpost is for you, because i couldn't fit it into 140 characters.

In this post, i will focus on one aspect of the Inspector only: Working with CSS. Because that's what i do most and because for JavaScript development, the tools at hand generally get the job done well for me.

Web Inspectors showing information for the exact same element (Safari to the left, Chrome to the right):

Safari Chrome

Preface

Shortcomings in the Safari Web Inspector and a lot of rendering bugs in Safari (which seem to be mostly ironed now) forced me to use Chrome more and more for my development needs. I never wanted to. I care for Safari. I still prefer the Safari UI over Chrome (just look at Chrome's Preferences-Screens – shudder) and don't know if i like where Google (the company) is headed to. But Chrome has compelling features and before i knew it, i was using Chrome during 95% of my development time.

Features i miss most in Safari's Inspector

  1. Being able to select an element in the source view of the Inspector and keep the element selected between reloads and navigating a site. Chrome supports this and if i remember right, Safari did at one time in the past.
    You won't believe how important that is for me and how often i need that during the day. Webdev often is rinse, repeat, reload (preferably via the Live Reload plugin).
  2. Edit a linked css file directly in the browser. This is often more convenient than fiddling with css in the styles pane of the inspector. Chrome supports that. Safari never did, afaik.
  3. Plugins, that work with file:// URLs. The live reload plugin is a huge timesaver when developing for the web. Unfortunately, Safari plugins are not allowed to work with file:// URLs, which i do most of the day while i develop (i just drag and drop a html file into my browser window). Chrome doesn't have that limitation.
  4. Easily check inheritance of certain values. Sometimes i just want to select an element in the source and e.g. quickly find out, where it inherited its font-size from, without having to endlessly scroll through all the rules and parse striked-through rules etc. I'd like to look at a property in the "Computed Style" section, klick on a little icon and together with a link to the respective line number in the css source, see the classname or id of the rule in the CSS displayed, which ultimately set the property. Chrome has this, but with a UI from hell.
  5. A toggle to simulate :active, :focus, :hover and :visited pseudo classes
  6. Inspector Preferences. Chrome's Inspector Preferences and Overrides are very, very useful. Also, as one get's older, a font-size setting for the inspector ui comes in pretty handy.

Features Safari's Inspector will hopefully soon get

Inspector toolbar

Timothy suggested i should check out the Inspector in Webkit Nightly (which i haven't done in a while). So that's what i just did. I looked at Webkit Nightly Build 8536.29.13, 537+. If all i see there makes it into Safari soon, things don't look so bad at all. Here's my comments on what i saw in the Nightly related to my above laundry list:

  • Live editing of linked css files is supported
  • Toggles to simulate :active, :focus, :hover and :visited pseudo classes are there
  • The proper display of cascading rules seems restored

Inspector pseudoclass new rule
New in Nightly: Nicely cleaned up Rules-Section with new pseudo elements toggles and a Button to quickly add a new rule (you missed a button to easily delete an added rule though). Further above you see a pretty nice new tooolbar.

Features still missing

Here's what's left from my above laundry list with comments about the nightly added (in bold):

  1. Being able to select an element in the source view of the Inspector and keep the element selected between reloads and navigating a site. Chrome supports this and if i remember right, Safari did at one time in the past.
    Selecting an Element in Source and reloading a page is totally buggy in the nightly (it's a beta, so that's ok).
  2. Edit a linked css file directly in the browser. This is often more convenient than fiddling with css in the styles pane of the inspector. Chrome supports that. Safari never did, afaik.
  3. Plugins, that work with file:// URLs. The live reload plugin is a huge timesaver when developing for the web. Unfortunately, Safari plugins are not allowed to work with file:// URLs, which i do most of the day while i develop (i just drag and drop a html file into my browser window). Chrome doesn't have that limitation.
  4. Easily check inheritance of certain values. Sometimes i just want to select an element in the source and e.g. quickly find out, where it inherited its font-size from, without having to endlessly scroll through all the rules and parse striked-through rules etc. I'd like to look at a property in the "Computed Style" section, klick on a little icon and together with a link to the respective line number in the css source, see the classname or id of the rule in the CSS displayed, which ultimately set the property. Chrome has this, but with a UI from hell.
  5. A toggle to simulate :active, :focus, :hover and :visited pseudo classes
  6. Inspector Preferences. Chrome's Inspector Preferences and Overrides are very, very useful. Also, as one get's older, a font-size setting for the inspector ui comes in pretty handy.

Inspector Design in Webkit Nightly

I am pretty sure, that the design we see in the nightlies won't make it into Safari without some additional designer-love, but let me offer some brief remarks anyway. Just in case. I really hope though, the new toolbar (i love it!) makes it into Safari (the current one is kind of overloaded and confusing).

  • Icon sizeThe icons in the toolbar seem too big for me (in relation to the label text-size), even when i set it to display small icons. I'd keep the icon size similar to the size of the 2 icons displayed to the left of the toolbar (the icons to close or dock the window).
  • I prefer the design of the icons very much over the coloured icons currently visible in the Safari Inspector. However, i think we don't need gradients in the icons. We also don't need color to indicate the selection, just make the icon for the selected section darker. Keep it simple.
  • I love the new "Instruments" display, where you - at a glance - see the number of resources loaded, total size, load time, console -logs, -errors and -warnings. However, i won't use fake glass. This is not a 90's version of iTunes. I believe an inset shadow around the area and light borders between the individual sections on hover will do. PS: the icon-size in here feels just right. That'd be a good size for the other toolbar icons too.
  • The area with the pseudo class toggles consumes too much vertical space. It should me much more condensed. Have a look at the chrome toolbar and use an 11" Air when you look at both toolbars, then you get my reasoning.
  • Same goes for the new "+ New Rule" area. Far too much top- and bottom-padding.

Conclusion

I was genuinely worried. Looking at Webkit Nightly, things look much better and some of my confidence is restored. Given, that what i see in the nightlies really makes it into Safari soon.

I still wonder, how it could happen, that Inspector in Safari 6.0.4 is in such a bad state and lost valuable features which it previously had. Is this just a bug that slipped in there due to sloppy QA or is it a case of terrible product management?

I hope, the importance of good developer tools in the form of the web inspector is clear to Apple. If we developers don't like the tools or if the tools slow us down, why should we use them? If we don't use them, we won't develop with the unique features of the platform (used) in mind and thus won't help drive it forward or keep afloat.

Thanks again Timothy for getting back to me! That was totally unexpected. If this feedback, which touches only very few specific points, is of any value to you and the Safari team, i can certainly post some more from time to time.

Posted in: , , by seiz | Comments (0)
November 30, 2009 Flattr this
Blue Beanie Day 2009. We have a hero.

Blue Beanie Day, showing our support for web standards by wearing a blue beanie.

#bbd09
Posted in: , by seiz | Comments (0)
September 17, 2009 Flattr this
Twitter API change catches clients cold and confuses users

This morning i was shocked to see tweets of people i don't follow. Turns out it's half as bad as it initially looked and the reason is an API change from twitter.

For whatever reason, Twitter seems to have rolled out an api change before Twitter Clients have implemented the necessary changes to deal with them.
The changes are concerning retweets. There's a new way retweets are handeled in a users timeline XML. Twitter is effectively stripping out the RT parts of the tweet text (making them invisible to the user) and includes them as meta data into the XML:

<retweet_details>
    <retweeting_user>
    	...
    </retweeting_user>
    <retweet_count>1</retweet_count>
    <retweet_id type="integer">4043457594</retweet_id>
    <retweeted_at type="datetime">2009-09-17T01:15:32+00:00</retweeted_at>
</retweet_details>

Today, there's only few Twitter-Clients which already support this new XML and this is where the problem starts. As the RT part of a tweet is now effectively hidden to anyone not supporting the new XML format, a retweet might be displayed as if it is a message from someone you do not follow (if someone you follow retweets someone you don't).

Twitter-Problem-Twittelator.jpg

TwittelatorPro 3.2 already supports the new format and indicates the retweet (RT) in the upper right corner of a tweet
Twitter-Problem-Twitterrific.jpg

Twitterrific (3.2 Mac) doesn't support the new API and thus it looks as if i received a tweet from Trisha which i do not follow. Shock and awe!

Update 1: These changes are clearly documented on the twitter API site, but contrary to the documentation, the changes affected friends_timeline.xml (at least for me) also and not only the new home_timeline.xml!

Update 2: It is possible, that i misinterpreted this and twitter didn't accidentally roll out any changes to friends_timeline. It may well be, that Andrew Stone (he retweeted Trisha as seen in the screenshots above and i am following him) was simply testing the new features using the statuses/retweet API call.
But still, even if he did, the RT shouldn't have arrived in my friends_timeline (in that new format).
That is why other services use versioned APIs and don't bend live APIs at will!


Posted in: , by seiz | Comments (0)
February 10, 2009 Flattr this
Why i hate Movable Type
Because:
mt-rebuild.jpg

This effing progress bar won't ever finish. It stands still at the exact position you see above. And MT silently fails to republish "ALL" (after a template change or such).
Worst of all, i am a web developer and have no clue how to fix this (emphasis on MT, not my abilities), nor does MT give me any hint as to what might be going wrong.

This could be such a lovely relationship but MT doesn't stop to show its ugly face every once in a while. Oh well, i love Movable Type.

Posted in: , , by seiz | Comments (2)
February 07, 2009 Flattr this
Meaningful Graphs in Web Analytics

Have you ever used Google Analytics (or any other tool) to compare your metrics to the previous month's or any other past timeframe?
Did you then realize, that the graphs shown didn't really tell you a story?

So here's a tip – which in case you haven't already discovered this yourself – is so simple, that you'll probably bang your head against the desk.

This tip probably applies to most Web Analytic Tools out there. As i have no access to any other tools, i'll use Google Analytics here for the examples.

Google Analytics has a nice date-picker which lets you select the timeframe used to display its verious reports. The timeframe is usually defined by a start- and end-date. In order to let you compare metrics to the past, there can even be two start- and end-dates.
Let's assume you want to look at your dashboard, and compare your statistics for April to the ones from March (the previous Month).

The Default

GA-Date-Range.jpg By default, you'll define a date range by either clicking on the month name (April) which automatically inserts 04/01/2008 and 04/30/2008 into the date fields or you fill in the date fields by hand (or even use the fency Timeline slider or what have you).
You then repeat this step for the timeframe in the past you want to compare your metrics to, click on Apply and you're done defining your timeframes and your report is being displayed.

GA-Mar-Apr.jpg
The defined timeframe as seen in the little calendar view

In your dashboard, you'll see all kinds of graphs and probably also one for Absolute Unique Visitors which might look just like the image below:

GA-Visits-Months.jpg As you can see in the graph to the left, we have a nice pattern, as the data used for this example is from a B2B Site which has an audience browsing the site mainly during weekdays.
The blue line represents April's trend and the green line represents visitors in March. You'll notice, the pattern is somehow repeated in the green line for March.
What the graph to the left fails to communicate however is the data you might probably be interested in most: The difference in quantity between the two months. Did April have more unique visitors or March?
The graph simply fails because there is too much noise and the pattern isn't aligned.
If your traffic doesn't show any patterns and you have the same amount of traffic every day, please stop reading, as all i say here doesn't apply to you.


The Hand Tuned, Meaningful Beauty

Now here's the simple trick. Let's align the patterns by adjusting our timeframes in a way, that makes sense for our scenario: Instead of picking whole months, we need to align our timeframes by a specific Weekday, which will be the same day for the current and past timeframe. We'll also make sure, both timeframes have the same length.

GA-Mar-Apr-Weeks.jpg
Adjusted timeframes with similar lengths and the start days aligned at a Monday.
We're looking at four weeks each.

GA-Visits-Weeks.jpg Look at the graph to the left. Isn't this a beauty? Get the story this picture is telling you? Huge difference. We can still immediately identify the patterns from the previous graph, but can also see a meaningful, comparable representation of quantities.
I believe everybody will now be able to immediately spot the decline in March's visitors which lasts from the middle of week three until mid of week four.


This trick is so simple, i wish google had "Align by Weekday" build right in to Google Analytics already.
I hope this was news to at least some of you and that this little nugget will be helpful to you as you are crunching your numbers.

PS: If you're into Web Analytics and don't read him already, do yourself a favor and have a look at Avinash's Blog.

May 13, 2008 Flattr this
Alistapart.com WTF?
alistapart.jpg

Seems Network Solutions runs a year early:
Domain Name: ALISTAPART.COM
Registrar: NETWORK SOLUTIONS, LLC.
Updated Date: 13-may-2008
Creation Date: 07-may-1998
Expiration Date: 06-may-2009

I wonder how anyone can still trust this company. Time to move to a different registrar i'd say.

Posted in: by seiz
December 17, 2007 Flattr this
Twitter Maintenance page done right

twittermaintenance.gifOnce again, Twitter.com is in maintenance-mode. Hopefully -- as usually -- for the win.

There's one thing i realized which really puzzles me. It is the way, they serve their temporary maintenance page (pictured in parts in the screenshot to the left).

This time (i haven't checked this during any of their downtimes before), they publish their temporary page in an extremely stupid way:
Twitter is serving a 404 status for every URL on twitter.com. The page you see during maintenance is a customized 404 "Not Found" error page. The 404 HTTP status means, that the url you tried to access doesn't exist and you should never use this url again, as it is bogus. This is not very clever. Now you can argue how important a proper google-index for twitter.com is, but even if you'd not care about google (and any other search engine) throwing every twitter-page out of it's index due to the 404 the crawler gets with every request, it still is wrong. HTTP statuses are there for a reason and serving a 404 during maintenance is not what the 404 status was meant to be used for.

The proper way to handle this would be to do a temporary redirect by serving a 307 or, even better, simply serve the maintenance page with a 503 status, which is the perfect fit for a maintenance. HTTP Status 503 stands for "Service Unavailable" which is exactly what is happening during a maintenance break.

Serving a 503 would deal with search engines nicely and clients like Twitterrific could also nicely parse it and inform the user correctly. For instance hahlo.com is momentarily just serving black frames, making their users believe something is wrong with hahlo. Pockettweets on my iPhone also confuses the user as Mobile Safari is simply alerting the user about too many redirects.

Hopefully someone from twitter will read this and not make the same mistake again in the future.

July 26, 2007 Flattr this
Host monitoring with Twitter and Perl - a poor man's Nagios

Twitter LogoJustin Mason of SpamAssassin fame recently published a perl-script on his blog, he developed to check health of some of his servers using perl and posting alerts to Jaiku.

Since i use twitter, i modified his script to post alerts and extended the functionality a bit. The script cureently only checks webservers via HEAD requests. If a host does not respond, it posts an alert to a given Twitter account, remembers the host and will post a host-up notification to twitter, should the host come up again.

The benefit of this is, that you can get Tweets via SMS providing you a nice 24/7 monitoring solution. In order to receive SMS alerts, you basically need 2 twitter accounts. One where you send the alerts to and a second one which you use to follow the first one in order to receive notifications vis SMS (as you can't receive notifications from your own account, this is not possible using just one account).

The script is usually run by cron. To run it, you need Perl and the Perl LWP module as well as a configuratio-file which is described in the header of the perl-script.

Download checkandtwitter.pl V 0.2 here and enjoy.

Posted in: , by seiz | Comments (0)
December 05, 2006 Flattr this
WebKit Nightly Builds and Saft / SIMBL /Safari PlugIns

Here's my little christmas gift to all of you having either Saft or any SIMBL PlugIns installed and want to work with the WebKit nightly bulilds without crashing or having to manually disable the above mentioned PlugIns:

OpenWebKit

is a simple AppleScript App, that just does the following:

  • Rename /Library/InputManagers to /Library/xInputManagers
  • Start /Applications/WebKit (the nightly build you have installed)
  • Rename /Library/xInputManagers back to /Library/InputManagers

Installation notes:
Download, unpack and doubleclick.

Note: as this script needs to rename a folder in /Library, it will only work when you have Admin rights for your Mac!

Tada! No more hassle.

Enjoy!

PS: i wonder why the nightlies do not just already disable all input managers so we don't have to.

Posted in: , , , by seiz | Comments (0)
November 23, 2006 Flattr this
Website Statistics in Google Earth

Jacob Cord wrote a very nice little converter which takes a tab-text file, exported out of your Google Analytics Geo Map Report and converts it to a KML file which you can import into Google Earth.

The output of the original script didn't look all that exciting, so i modified it a little to produce some awesome visualisation of website traffic.


Click the image to see an animation (QuickTime required)

The longer the lines, the more pageviews are represented. If the pageviews are above a set limit, the lines are drawn in red instead of yellow.

Now isn't that an entirely different approach to website statistics visualisation? I'll soon follow up with a Mac OS X PPC binary of the converter and instructions.

December 02, 2005 Flattr this
Ajax: Just because we can?

Just read an interesting Article over at ALA which also mentions new techology like AJAX and the like being too much hyped and immediately being used without thinking about the user and his needs first.

Let's make a test. I recently developed something at work, where many would see AJAX written all over it. Look at the movie below:

Is this using AJAX? Let me know in the comments (sorry, TypeKey login required now due to crazy comment spam)!

BTW: the above is a live recording right out of my browser window. No editing involved other than scaling the movie down to 60%.

August 15, 2005 Flattr this
An open letter to all american websites, web developers and usability experts

Dear Webmaster,

surely you are having a contact form somewhere on your site where i can contact you by providing my Address, Phone and such. It'll probably look something like this:

Sample Form

Please be aware that many countries do not need any States in a postal address. In fact, in many countries it is totally uncommon to have a state included in a postal address - some don't even have any states at all.

So please, please, please do not make the STATE fields on your contact forms mandatory. If you're clever, you can decide on making them mandatory depending on the Country chosen. But please, once i selected Germany or such (you'd have to research that country-list on your own - i was to lazy to research it and only make states mandatory IF USA was selected as country) do not make the State Field mandatory!

Oh, and while we're at it: Our phone numbers are also formatted differently and might have a different total length, so don't force us to format them like 123-123-1234 (German area codes might have 4 to 5 digits for example).

Thanks so much for not being ignorant about foreign countries!

This is driving me mad for almost a decade now.

March 04, 2004 Flattr this
Ridiculous Auto-Padding in IE (Win) Submit Buttons

I hope someone has a suggestion to get around one of the nasty "features" coming from Redmond:

Internet Explorer on Windows has some funny logic implemented to add some PADDING to SUBMIT-Buttons (<input type=Submit>) of forms. The Longer the content/text of the VALUE tag is, the more PADDING it adds automagically. Thus we have real ugly looking form buttons on our pages which take up valuable space.
This padding can not (to my knowledge) be set using CSS.

I'd appreciate if anyone knowing of a workaround to get rid of the padding IE is adding could let me know.

Look at the grey buttons in the screenshot below (click on the image for larger display) to get a picture of what i am talking about:
iesubmit.jpg

Posted in: by seiz | Comments (6)