Sobakowy Blog

Trochę o wszystkim i wiele o niczym

Szukaj

HTML&CSS

Minifikowanie kodu JS i CSS

Bardzo możliwe, że podczas swoich doświadczeń z tworzeniem stron WWW zetknąłeś się kiedyś z pojęciem minifikacji kodu. Mimo wszystko poczynię krótki wstęp dla osób, które nie mają pojęcia o co chodzi.

Minifikowanie lub minifikacja to proces zmniejszania objętości kodu źródłowego przy zachowaniu jego dotychczasowego działania. Jest to więc jedna z odmian kompresji. Wystarczy spojrzeć na dowolny plik CSS, JavaScript czy HTML, aby zobaczyć, że można stosunkowo łatwo zmniejszyć jego objętość, np. przez usunięcie przełamań linii, komentarzy, wcięć i tak dalej. O ile przy kodzie HTML wspomniany proces nie jest taki łatwy, bo nie możemy przecież pozbawić spacji i enterów tekstu znajdującego się pomiędzy znacznikami, to w wypadku CSS i JS zadanie jest dosyć proste.

Powstało sporo narzędzi do realizacji tego zadania, a taka forma optymalizacji stron WWW jest wysoce zalecana. Wiadomo, że lepiej wysyłać użytkownikowi jak najmniej zbędnych danych (a nasze komentarze w plikach CSS są raczej zbędne ;)).

Jednym z najlepszych narzędzi realizującym zarówno kompresje JS, jak i CSS jest YUI Compressor. Jest to program autorstwa Yahoo! napisany w Javie. Ze względu na dobre wyniki kompresji powstało wiele portów do innych języków, np. PHP. Porcja linków dla wszystkich zainteresowanych:

[Mini] Jakby to było dobrze…

Pierwszy wpis w nowopowstałej kategorii "Mikroblog". Nazwa i prefix wpisu chyba tłumaczą wszystko. Proszę nie spodziewać się zbyt wiele :)

Muszę niektórych rozczarować, to nie będą fantazje erotyczne… To po prostu kilka drobnych myśli, które naszły mnie podczas pisania kolejnej wersji IronCMS-a. Chodzi mi tu o możliwości, które ma wprowadzić HTML5 i PHP6.

Logo HTML 5

Pomyślmy tylko jakby to było pięknie gdyby:

  • zamiast pisać potworki w stylu 
    <input onFocus="if (this.value=='Wpisz swój komentarz...') {this.value='';}" onBlur="if (this.value=='') {this.value='Wpisz swój komentarz...'}" [...] />
    móc napisać po prostu <input placeholder="Wpisz swój komentarz" ... />
  • praktycznie całą walidację po stronie klienta wykonywać za pomocą takich atrybutów jak required czy pattern (porównywanie tekstu wpisanego z regExem na poziomie HTML-a- marzenie) oraz odpowiednich wartości podanych w type (gdy podamy np. email, to adres zostanie sprawdzony przez browsera)
  • móc nie mieć w PHP takich archaizmów jak safe_mode, register_globals, czy magic_quotes. W większości wypadków są one wyłączone, jednak gdy jest inaczej, to możemy mieć sporo roboty, np. z kasowaniem slashy dodaną przez tego ostatniego "ficzera"
  • nie musieć podawać masy zbędnych atrybutów i tagów takich jak
    • całego długiego doctype w stylu 
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      gdyż od teraz wystarczy nowe <!DOCTYPE html>
    • deklarowanie kodowania poprzez długaśne <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - w HTML 5 to <meta charset="UTF-8">
    • oczywiste wartości atrybutu type, takie jak text/css dla arkuszy stylów, czy text/javascript dla plików JS
  • mieć semantyczne tagi dla najczęstszych części strony (header, footer, article, section i spółka). Wyszukiwarki pewnie też odetchnęłyby z ulgą
  • w końcu ujednolicona obsługa filmów na stronach poprzez tag video
  • wiele więcej…

Do tego wszystkiego dorzuciłbym jeszcze jedno nierealne życzenie. Żeby przeglądarki działały jak kompilatory. Nie wybaczały nawet najmniejszych błędów :P

Zdaję sobie oczywiście sprawę, że każdy kto interesował się HTML-em 5, nie znajdzie tu wiele nowego, ale po prostu chciałem się podzielić przemyśleniami. Więc proszę nie bić ;)

Jeśli kogoś to zainteresowało i chciałby poczytać conieco o tym co nas czeka, to mogę polecić ten CheatSheet HTML 5.

PS: Obrazki we wpisach. Czyżby nowy trend na sobak.pl?

Dlaczego HTML5 nic nie zmieni?

Od dłuższego już czasu w internecie występuje ogromne poruszenie pracami nad nową, piątą, wersją HTML-a. Sam też byłem i w sumie po części nadal jestem jego entuzjastą. Miło byłoby gdyby istniał standard pozbawiony wszelkich archaizmów, który wymuszałby poprawne pisanie stron na webmasterach, a internet zmieniłby się w jedną wielką cyfrową sielankę…

Nie no. Oczywiście przesadzam, ale w tym wpisie chciałbym przestawić Wam prosty powód, dla którego tak naprawdę wejście w życie HTML-a 5 niewiele zmieni.

Co z tego, że specyfikacja zabrania używania HTML-a do opisu wyglądu strony (czyli znaczniki takie jak font itd…), że zabrania używania ramek, skoro przeglądarki nadal to wszystko obsługują.

Jako "materiał dowodowy" do tego wpisu posłuży ta prosta strona. Polecam zajrzenie w jej kod. Jest tam sieczka najgorszych znaczników z HTML4 tj. font, center, iframe…

I teraz stawiam główne pytanie: Co z tego, że specyfikacja HTML5 wymusza np. stosowanie wyłącznie CSS-a do opisu wyglądu strony, skoro przeglądarki internetowe tego nie robią?

Już teraz mamy takie przykłady: twórcy wielkich portali szczycą się, że ich strony używają HTML5. Szkoda tylko, że w większości używanie tego standardu kończy się wraz z sekcją head.

Marzy mi się, żeby przeglądarki podchodziły tak rygorystycznie do parsowania HTML-a, jak do XML-a lub jak parser do parsowania PHP. Żeby browser widząc stronę z błędem wyświetlał komunikat na ekranie. Myślę, że dopiero to zmobilizowałoby porządnie "webmasterów" do tworzenia stron zgodnych ze standardami.

Strona z DTD HTML-a piątego z działającymi frame'ami, to nie jest moje marzenie… Wygląda na to, że twórcy stron będą mogli tworzyć sieczkę, z którą będą męczyć się przeglądarki. Zmieni się tylko ilość błędów w walidatorze, o którego istnieniu większość normalnych użytkowników nie ma pojęcia (a szkoda)…