Na konferencji Chrome Dev Summit 2014 omówiliśmy mnóstwo tematów dotyczących nowych interfejsów API, ale nie chodzi tylko o to, by było to naprawdę atrakcyjne.
Jeśli jesteś nowym twórcą stron internetowych lub doświadczonym programistą, który chce wypróbować nowe interfejsy API, prawdopodobnie wykonasz te 3 kroki: zdobywanie wiedzy, tworzenie i powtarzanie rozwiązań.
Matt Gaunt opowiada o trwających działaniach związanych z rozwiązywaniem tych problemów w ramach zespołu Chrome Developer Platform.
Informacje
Podstawy tworzenia witryn to zestaw dokumentacji z przypadkami użycia dotyczącymi wielu różnych tematów. Głównym celem jest jak najszybsze wdrożenie sprawdzonych metod.
Jednym z głównych celów Podstawy tworzenia witryn jest zapewnienie, że osoby, które dopiero zaczynają korzystać z danego tematu, mogą w największym stopniu ograniczyć „paraliż wyboru”. Addy Osmani świetnie to przedstawia w Cukierni Box.
Jeśli zauważysz problemy z witryną lub jej zawartością albo chcesz, aby zespół WebFundamentów obejmował określony temat, poinformuj nas o tym, przesyłając opinię na GitHubie.
Kompilacja
Aby ułatwić rozpoczęcie nowego projektu internetowego, stworzyliśmy Web Starter Kit. Znajdziesz w nim wszystko, czego potrzebujesz:
- Solidny proces kompilacji
- Szablon HTML
- Poradnik dotyczący stylów
Proces kompilacji
Jeśli nie masz doświadczenia w tworzeniu procesów, najprościej będzie postrzegać go jako program, który składa się z zestawu plików, wykonuje na nich określone zadania i tworzy na nich nowe wersje w innej lokalizacji. Zadania optymalizują pliki, aby skrócić czas wczytywania, sprawdzić, czy nie występują błędy, lub obsługiwać zadania, które można zautomatyzować.
W pakiecie Web Starter Kit dostępny jest następujący proces:
Zmniejszamy i łączymy CSS oraz JavaScript, by przeglądarka mogła szybko pobrać plik, a JavaScript jest wykonywany przez JSHint, aby sprawdzić sprawdzone metody dotyczące tego języka i typowe błędy w kodzie. Obrazy są zmniejszane za pomocą funkcji Imagemin, co pozwala znacznie zmniejszyć rozmiar pliku. Mamy też proces tworzenia kodu CSS przewodników.
Szablon HTML na wiele urządzeń
Pierwszy zestaw kodu HTML do napisania nowej strony jest dość skomplikowany. Możliwe, że będziesz w stanie szybko uzyskać gotowy plik HTML, który dobrze działa na różnych urządzeniach i ekranach.
W pakiecie Web Starter Kit zdecydowaliśmy się dodać obsługę wszystkich funkcji, które zacierały granice między platformą a witryną, dlatego dodaliśmy obsługę funkcji Dodaj do ekranu głównego oraz ekranów powitalnych w systemach Android, Windows Phone, iOS i Opera Coast.
Poradnik dotyczący stylów
Ostatnim elementem pakietu Web Starter Kit jest Przewodnik po stylu.
Daje to każdemu nowemu projektowi świetny zestaw domyślnych stylów i komponentów, co zachęca do rozwoju stylu. Możesz zmieniać istniejące style elementów i dodawać własne.
W nowej wersji WSK, która ma się ukazać na początku przyszłego roku, pracujemy nad uproszczeniem sposobu, w jaki przewodnik stylów pasuje do siebie, oraz przechodzi na wygląd i działanie Material Design. Mattzaprezentowałwstępną próbkę tego, jak to może wyglądać podczas konferencji Chrome Dev Summit. Przykład znajdziesz poniżej.
Regulacja
Gdy już zaczniesz stosować zdobytą wiedzę w praktyce, skorzystaj z Narzędzi deweloperskich, by debugować, ulepszać i utrzymywać swoją pracę.
W Narzędziach deweloperskich pojawiło się kilka nowych funkcji, a Matt zapoznaje się z nimi.
Tryb urządzenia
Tryb urządzenia to nowa sekcja w Narzędziach deweloperskich, która umożliwia szybkie sprawdzenie, jak działa Twoja witryna na różnych urządzeniach mobilnych, oraz wyświetlanie zapytań o multimedia w CSS.
Jedną z najciekawszych funkcji trybu urządzenia jest możliwość ograniczania szybkości sieci, co pozwala symulować wrażenia użytkownika korzystającego z połączenia GPRS, EDGE, 3G, DSL lub Wi-Fi.
Program profilujący renderowanie
Jeśli zdarzyło Ci się otworzyć kartę osi czasu i nacisnąć przycisk nagrywania, na pewno zdarzyło Ci się zauważyć w kaskadzie zdarzenia wyrenderowania obrazu. Normalnie byłaby to czarna ramka, bez możliwości sprawdzenia, dlaczego przeglądarka ani co robi.
Paint Profiler nie udostępnia żadnych dodatkowych informacji o tym, co dokładnie robi przeglądarka podczas renderowania.
Śledzenie unieważnień
W Narzędziach deweloperskich, gdy tylko jest to możliwe, wyjaśniają, dlaczego doszło do renderowania lub układu. Jest to przydatne dla każdego, kto poznaje oś czasu i działanie przeglądarki. Pozwala też zoptymalizować kod, by zapobiec problemom z wydajnością.
Widok wykresu płomieniowego
To zupełnie inny sposób wyświetlania informacji na osi czasu. Dzięki temu łatwiej jest zaobserwować, jak zadania się nakładają i jakie zachowanie przeglądarki jest efektem innych zadań.
Wyświetlający Frame
W widoku wykresu płomieniowego możesz wybrać konkretną ramkę i tam sprawdzić, które elementy strony zostały awansowane do warstwy złożonej oraz dlaczego zostały awansowane.
Ucz się. Buduj, Regulacja
Oto niektóre działania zespołu Chrome, które mają na celu pomóc programistom w szybkim tworzeniu stron internetowych. Zapoznaj się więc z podstawami tworzenia witryn Web Fundamentals, Web Starter Kit i z nowymi funkcjami w Narzędziach deweloperskich w Chrome.