Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Em Calculator 2.0

07 lutego 2007

Em Calculator 2.0

Wypuściłem nową wersję mojego kalkulatorka emów. Em Calculator to narzędzie przydatne do przeliczania wartości pikselowych (uzyskiwanych przykładowo z Photoshopa) na emy - jednostki zależne od wielkości tekstu. Emy do budowania całego designu moim zdaniem się nie nadają (chociaż taki layout jest całkiem całkiem), ale znakomicie poprawią wygląd elementów od tekstu zależnych.

W nowej wersji:

  • wszystko lata na jQuery
  • jest dostępne zapisywanie ustawień na ciasteczkach
  • można edytować nazwę węzła po dwukliku na nim
  • wszystkie obliczenia są przeprowadzane od razu
  • explorer strzelił focha (może kiedyś poprawię)
  • mamy nowy design

Zmiany te są wyjściem naprzeciw prośbom ogromnej fali użytkowników, którym Em Calc przypadł do gustu. Po ostatnim występie na CSS Beauty liczba dodań na del.icio.us przekroczyła 1000. Hehe. :> Planuję jeszcze parę dodatków zwiększających użyteczność, zawsze też możecie prosić o jakieś opcje w komentarzach. :-)

Tagi wpisu: , , , ,

Informacje i hiperłącza

To ja! Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 07 lutego 2007 o 16:46

Kategorie: CSS, Moje dzieła, Narzędzia, Web 2.0

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Dodaj bloga do Technorati Favorites Dodaj bloga do Del.icio.us Blog należy do sieci 10przykazań.com

Komentarze

  1. Koval 1 07 lutego 2007, 16:50

    zrób może maksymalną ilość otwieranych „podkategorii” kalkulatora bo przy 10 już ten 10 ucieka pod ramkę i go widać tylko w połowie.

    btw. przydatne

  2. Ktos 2 07 lutego 2007, 16:51

    Swego czasu próbowałem toto przerobić na rozszerzenie („stacjonarne” nazwijmy to) do Fx ale mnie XUL denerwował i projekt porzuciłem.

    A wersji 2.0 to już na pewno nie przerobię, zbyt skomplikowana jest :-)

  3. Riddle 3 07 lutego 2007, 16:53

    Koval: Niektórzy mają więcej jak 1024 pikseli wzdłuż. :-]
    Ktoś: No jak wolisz. ;)

  4. devnul 4 07 lutego 2007, 16:56

    nawiązując do tego co Ktoś napisał: może by tak wypuścić wersję offline – transferu by nie zjadała (jaki by nie był ;]), reklam i tak tu nie dajesz – więc takie coś byłoby miłe – tym bardziej że czasem net padnie, czasem serwery, czasem dns’y itd

  5. Koval 5 07 lutego 2007, 16:56

    @riddle no dobra niech ci będzie ale mam 1152. to doczepie się do złego linku w kalkulatorze do jogga :P zrobiłeś kropke [.] zamiast myślnik [-] i link jest fake

  6. hash 6 07 lutego 2007, 17:12

    imo

    1. nowe kolory są be :P
    2. można by nie dodawać zera przed kropką ( .667em dobrze, 0.667em źle ) ;)
    3. jak zmieniam nazwę noda, to żeby od razu zaznaczenie na nazwie było, nie jak teraz musze usunąć lub zaznaczyć tekst

    a co do offline-version to na całe szczęście mam poprzednią na dysku, ładniejsza mi sie wydaje ;)

  7. Riddle 7 07 lutego 2007, 17:15

    No dobra, ale 0.667em nie jest źle, jest inaczej.
    Zmiana nazwy node’a – o tym samym myślałem, muszę coś zrobić z selection, bo kiedyś focus() ładnie zaznaczał całość, ale się dobre skończyło.

    Offline version… sprawdza się, jak są aktualizacje. Na przykład dokumentacja jQuery ssa po API nowości. Nie będę zachęcał do ssania, bo im nowsza wersja tym lepsza, jeśli nie kolorystycznie (kurka, ludzie… userCSS to nie jest czarna magia), to funkcjonalnie.

  8. Piotr Usewicz 8 07 lutego 2007, 17:16

    Riddle, a nie lepiej zrobic z tego Widget? :] In other words, moge przerobic na widget ;]

  9. Riddle 9 07 lutego 2007, 17:17

    A przerób, mnie Widgety latają koło… no, wiesz. ;)

  10. hash 10 07 lutego 2007, 17:23

    [Riddle]: „kurka, ludzie… userCSS to nie jest czarna magia”

    ja tylko oceniałem wersję od-autorską ;)
    i z pewnością wygląd sobie zmienię ;]

    [Riddle]: „mnie Widgety latają koło… no, wiesz. ;)”

    ROTFL :D

    E: btw dlaczego lista numerowana nie jest numerowana ?

  11. losamorales 11 07 lutego 2007, 17:24

    byles tez na blogu simona http://simonwillison.net/. normalnie gwiazda socjometryczna

  12. kef 12 07 lutego 2007, 17:38

    Znalazłem mały bug w kalkulatorze.
    Przy przejściu z pola z nazwą, bez zatwierdzenia jej enterem, do pola z ilością pikseli i próbie wpisania tam jakiś cyfry przeliczona wartość w emach wkleja się do drugiego inputa zamiast do trzeciego.

    A na marginesie. Czy te pola nie mogłyby być nieco dłuższe?

  13. Loonatic 13 07 lutego 2007, 18:57

    Przy node11 dodanie kolejnego node zwiększa mi użycie procka do 50% i trochę się przycina, a przy dodaniu 14-16 node karta w której jest otwarty kalkulator zawiesza się. Czego to może być wina?

  14. Riddle 14 07 lutego 2007, 19:27

    kef: Naprawię, dzięki.
    Loonatic: muszę zoptymalizować kod jak widać, nie powinien tak latać po całym dokumencie.

  15. randomuser@hotmail.com 15 07 lutego 2007, 20:09

    I love this tool, I use it on a daily basis.
    Thank you so much. :)

  16. Pala 16 08 lutego 2007, 01:42

    Emy do budowania całego designu moim zdaniem się nie nadają (...)

    Nic bardzo dużego (i ładnego :P) nigdy nie budowałem, ale generalnie staram się używać emów gdzie tylko się da. Odnośnie budowania z emów wrzucam pierwszy raz coś pod Strona WWW co kiedyś dzięki emom udało mi się ładnie uzyskać (przy powiększaniu czcionki).

  17. dos 17 08 lutego 2007, 07:56

    Rozszerzenie do Firefoksa? Mogę pomóc :D

  18. Pizzadude 18 08 lutego 2007, 12:40

    Uwolnij diva. ^^
    Wywal tego overflowa i niech ew. body dostaje pasek przewijania wtedy, kiedy trzeba.

  19. hash 19 08 lutego 2007, 13:41

    Pizzadude: Polecam jeśli jeszcze nie masz w swoim Fx Stylish

  20. Pizzadude 20 08 lutego 2007, 23:18

    To jest skrin z Opery. ;)

  21. Riddle 21 08 lutego 2007, 23:19

    To nie o to chodzi z tym Stylish, hash pisze Ci o UserCSS. A sugestia dobra, zmienię to. Pozwolicie jednak, że nie teraz, mam trochę ważniejszych rzeczy na głowie, a czasu do końca tygodnia mało. :P

  22. hash 22 09 lutego 2007, 00:05

    To miała być reklama alternatywy ;]

  23. Teo 23 09 lutego 2007, 22:51

    Off topic, bo jakoś nie odpowiadasz na e-maila.
    Czy przeczytałeś maila na Gmailu dotyczącego Firebuga?

  24. Tyhagara 24 10 lutego 2007, 12:38

    W ogóle z tego nie korzystam, bo nie jest mi potrzebne, ale wygląda świetnie.

  25. Pala 25 10 lutego 2007, 14:50

    Jestem dokładnie tego samego zdania. Naprawdę fajnie zrobione.

  26. Pizzadude 26 11 lutego 2007, 21:37

    Riddle, domyśliłem się. Chociaż w Operze to więcej babrania się niż efektu. ^^

  27. Anonim 27 14 lutego 2007, 15:36

    Thanks for this great tool! Greetings from Germany, Micha

  28. Fuckier 28 18 lutego 2007, 07:46

    (Komentarz zmodyfikowany 18.02.2007 o 07:47)

    Myslę, ze to zwyczajna padaczka. Chuj. Syf. A Riddle to ciota.
  29. Mathias 29 19 lutego 2007, 15:35

    Thank you very much for your helpful script.

    With best regards,

    Mathias (Germany)

  30. stm 30 26 lutego 2007, 15:30

    Not works in ie6/ie7 (of course javascript is enabled in my config) it says all time:

    „I’m very sorry, but this page needs JavaScript enabled browser. If you happen to use tools like NoScript, turn them off please. If you still encounter problems, consider upgrading your browser.”

    I’m not considering upgrade to ie8 yet… :)

    Anyway in firefox it works, and great!

  31. Riddle 31 27 lutego 2007, 00:37

    Thanks for kind words, appreciate it. :)

    stm: That’s right, IE support is planned but now I simply disabled JS files for this browser – it acts too weird.

  32. piXelRider 32 27 lutego 2007, 05:20

    Świetnie to działa :) Riddle, wiedziałeś, że twój EmCalc’ jest na Protolize ? ;)

  33. Riddle 33 27 lutego 2007, 05:21

    Dzięki za uznanie. ;)
    Tak, wiem, jest w dużej ilości miejsc (śledzę je via Technorati), co mnie niesamowicie cieszy.

  34. sherrif 34 27 lutego 2007, 22:28

    PT to EM and PT to PX would be helpful. Designers often cannot convert from what they see in Photoshop to a format used on the web and I would like to have a place to send them to convert it themselves. Tool is promising.

    Thank you,
    Sherri

  35. MuKuL 35 28 lutego 2007, 21:32

    A właśnie PT do EM lub PX też by się przydało (można w przyszłości zrobić opcje dla kalkulatora uwzględniającą to).

  36. Draakhan 36 03 marca 2007, 20:12

    Trochę nie w temacie, ale zostałeś dopadnięty: http://draakhan.jogger.pl/2007/03/03/dopadniety/. Zapraszam do udziału :.

  37. Andrey Sorochan 37 17 marca 2007, 07:15

    Nice one! :D

  38. Riddle's Miniblog 38 18 marca 2007, 07:13

    Em Calculator 2.1

    Dzisiaj wypuściłem zestaw poprawek dla kalkulatora przeliczającego piksele na emy. Wzrosła głównie użyteczność - oberzyjcie changelog (dostępny pod → more), aby dowiedzieć się szczegółow. Em Calc.

  39. kiero 39 30 kwietnia 2007, 20:04

    Chciałbym dodać, że bardzo przydałaby się funkcja, dzięki której można by było eksportować i importować ustawianie klocków. Wiele osób tworzy daną stronę internetową przez więcej niż jeden dzień. Trzeba na koniec pracy robić screena ustawień bloczków, żeby następnego dnia wprowadzać ustawienie emów od nowa. A jakby była taka opcja, o której wspomniałem wyżej, na koniec pracy można by było wyeksportować sobie plik z ustawieniami, a przy następnej pracy z designem i emami z powrotem je sobie zaimportować. Czekam na odpowiedź.

    pozdrawiam,
    kiero

  40. David Kernow 40 17 maja 2007, 14:13

    Thanks for this useful little tool! I also appreciate its fine presentation.
    Is there a stand-alone version for offline use…?

    Best wishes,
    David

  41. hK 41 17 lipca 2007, 08:32

    Would it be too troublesome to add the line-height calculation ability as well? That would make it possible to have everything aligned to similar baseline. Baseline grids look really good.. :)

  42. Riddle 42 17 lipca 2007, 08:45

    Yeah, baseline grids are awesome, I tried make one in this layout. :) But I used another set of nodes to illustrate myself the dependance.

    body
    p {  }
    p(lh) { }
        em { }
        em(lh) { }

    Thanks David and everyone else. I’m preparing some update and I think you’ll like it. :)

  43. Łukasz Adamczuk 43 29 listopada 2007, 23:53

    Wiedziałem już o pierwszej wersji tego kalkulatora, ale dopiero teraz kiedy zrozumiałem sposób obliczania jednostek em w poszczególnych elementach kodu wykorzystałem go w 100%. W ramach podziękowania wspomnę, o tym skrypcie w jednym z artykułów, aby inni także mogli go poznać

  44. Esben 44 30 listopada 2007, 08:51

    Great tool. – And it actually seems to work great. I’m using IE7 and has no problems.

    I was wondering if you could provide the formula. I’m currently working on at Client solution to be running in trucks and would like to Make a c# class where you can create fonts from sizes in pixels.

    So basically i need to convert any input in pixels into em’s.

    (Sorry if i misunderstood anything, i actually don’t understand a single word of your website ;-)

  45. visisi 45 02 grudnia 2007, 14:43

    Trying to access it with Firefox 2.0.0.11 i’m always presented with the no javascript error message, wether i activate the execution of js or not.

  46. tomenar 46 04 lutego 2008, 03:00

    Could you update the jQ and code for Fx3? Save doesn’t work.

  47. Jonk 47 11 lutego 2008, 09:53

    If I set body to 11px I get 0.69em which seems to be correct but when I create a node under that with 881px I get 80.09em which actually is wrong it should be 79.64em. It’s not much but in pixels it actually differs 5px! And since I use that to resize an image it looks like crap. So I think you’ll have to tweek your calculations just a little bit. Thanks for an otherwise awsome tool!

  48. Riddle 48 11 lutego 2008, 11:00

    Interesting point, thanks. I think I should take a closer look on my current rounding implementation (AFAIR it’s JavaScript’s native one).

  49. Marjolein Katsma 49 20 kwietnia 2008, 20:25

    Coming here with Firefox 3b5 – JavaScript enabled – and it tells me „sorry but you need a browser with JavaScript enabled”.

    I don’t know what you’re using to detect JS, but it doesn’t work.

  50. Riddle 50 24 kwietnia 2008, 18:54

    I’m not detecting JavaScript, that message is embedded in HTML by default and it gets removed by JS when adding a layer of functionality. If something in JS is broken, then you see this message.

    And now straight to the point – Firefox 3 decided to change the way window.globalStorage API works and now it checks for any cross-domain references, resulting in a security error. I will fix this after Fx3.0RC1 is available.

Dodaj komentarz

Do formatowania komentarzy używaj Textile (HTML nie działa). Szczególnie jeśli wklejasz większe fragmenty kodu. W razie niepewności użyj podglądu komentarza.

Wypowiedzi obraźliwe, infantylne oraz nie na temat będą moderowane – pisząc postaraj się zwiększyć wartość dyskusji.

Komentarze nie służą do wysyłania wiadomości albo informowania o błędach, itd. Chcesz coś mi napisać – skontaktuj się.