November 29, 2014 Flattr this

Maschine Webfont. Frei, wie in Bier.


1994 hatte ich eine dieser ultraportablen Reiseschreibmaschinen mit einem schon ziemlich lädierten Schriftbild. Dieses Schriftbild gefiel mir und ich wollte es gerne ins digitale Zeitalter rüber retten. Und genau das habe ich dann einfach getan.

Maschine book preview
Maschine Book

Ich habe alle verfügbaren Zeichen auf ein Blatt Papier getippt, eingescannt, in Altsys Fontographer nachkonstruiert und somit meinen ersten Typ 1 Postscript-Font geschaffen. Der Font enthält weder einen Klammeraffen (ät-) noch ein Euro-Zeichen. Ja, Kinder, Neunzehnhundertvierundneunzig gab es nämlich noch keinen Euro und mit einer Reiseschreibmaschine konnte man keine E-Mails schreiben. Vielleicht finde ich ja mal die Zeit, ein paar fehlende Glyphen zu ergänzen.

Nun bin ich durch Zufall auf die alten Dateien gestossen, konnte sie in ein zeitgemäßeres Format konvertieren und – Ladies and Gentlemen – präsentiere euch nun (ja ist denn schon wieder Weihnachten) meinen „Maschine“-Font als Webfont (.eot, .svg, .ttf, .woff).

Den Font, der einen normalen und einen fetten Schnitt beinhaltet, stelle ich unter folgender CC-Lizenz zur Verfügung:

Creative Commons LizenzvertragMaschine von Stefan Seiz ist lizenziert unter einer Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.

Viel Spass damit!

Download „Maschine“

Posted in: , by seiz | Comments (0)
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)
January 18, 2013 Flattr this

48


How the hell could i get so old so fast?
It's weird, that in my head i don't notice as much change as the numbers suggest. Time is such a weird concept.

Buzzele

Posted in: by seiz | Comments (0)
December 01, 2012 Flattr this

Leistungsschutzrecht


IconMein Beitrag zum Thema ist eine Safari Erweiterung, die Einträge von Verlagen, die das Leistungsschutzrecht unterstützen, aus den Suchergebnissen von google.de, google.com und bing.com ausblendet.

Hier entlang bitte!

Posted in: , , by seiz | Comments (0)
 

Older Posts: He cared - even about angry customers like me