Na Chrome Dev Summit 2014 poruszaliśmy wiele tematów i omawialiśmy nowe interfejsy API, ale nie chodzi tylko o nowości.
Jeśli jesteś nowym deweloperem witryn lub nawet doświadczonym deweloperem, który chciał już poznać nowe interfejsy API, prawdopodobnie wykonasz te 3 kroki: nauka, stworzenie i powtarzanie.
Matt Gaunt przedstawia ze strony zespołu Chrome Developer Platform działania, które mają na celu rozwiązanie tych problemów.
Informacje
Podstawy tworzenia witryn to zestaw dokumentacji obejmującej wiele tematów, oparty na przykładach użycia. Podstawowym celem jest jak najszybsze wprowadzanie sprawdzonych metod w oparciu o niewielką ilość wiedzy lub jej brak.
Jednym z głównych celów kursu Web Fundamentals jest zagwarantowanie, że jeśli dopiero zaczynasz jakiś temat, zredukować „paraliż wyboru”. Addy Osmani idealnie pasuje do tej kwestii w kształcie Ciastka Pudełko.
Jeśli zauważysz problemy z witryną lub jej zawartością albo chcesz, aby kurs Podstawy tworzenia witryn obejmował konkretny temat, poinformuj nas o tym, przesyłając opinię na GitHubie.
Kompilacja
Aby ułatwić Ci rozpoczęcie nowego projektu internetowego, stworzyliśmy Web Starter Kit. Ma wszystko, czego potrzebujesz:
- Solidny proces kompilacji
- Standardowy kod HTML
- Poradnik dotyczący stylów
Proces kompilacji
Osoby, które dopiero zaczynają konstruować procesy, najprościej wyobrazić sobie proces kompilacji jako program, który wykonuje na nich określone zadania i generuje nowe wersje w innej lokalizacji. Zadania te optymalizują pliki, by przyspieszyć ich wczytywanie, sprawdzać potencjalne błędy i obsługiwać zadania, które można zautomatyzować.
W Web Starter Kit znajdują się następujące procesy:
Zmniejszamy i łączymy kody CSS oraz JavaScript, aby przeglądarka mogła szybko pobrać plik. Kod JavaScript jest również przesyłany przez JSHint pod kątem sprawdzonych metod dotyczących JavaScriptu i typowych błędów w kodowaniu. Obrazy są zmniejszone za pomocą funkcji imagemin, co pozwala znacznie zmniejszyć rozmiar pliku. Mamy też proces tworzenia arkuszy stylów CSS.
Szablon HTML na różne urządzenia
Pierwszy zestaw kodu HTML, który piszesz na potrzeby nowej strony, jest bardzo skomplikowany. Możliwe, że w jakiś sposób szybko uzyskasz standardowy plik HTML, który będzie działał dobrze na różnych urządzeniach i ekranach.
W pakiecie Web Starter Kit wprowadziliśmy obsługę wszystkich funkcji, które zamazały granicę między platformą a witryną, dlatego dodaliśmy obsługę dodawania do ekranu głównego i ekranów powitalnych na Androida, Windows Phone, iOS i Operę.
Poradnik dotyczący stylów
Ostatnim elementem pakietu Web Starter Kit jest przewodnik po stylach.
Dzięki temu każdy nowy projekt zyskuje świetny zestaw domyślnych stylów i komponentów, które zachęcają do programowania opartego na stylu. Możesz zmieniać dotychczasowe style elementów i dodawać własne.
W kolejnej wersji WSK, która ma pojawić się na początku przyszłego roku, staramy się uprościć nasz przewodnik stylu i przejść na styl Material Design. Mattzaprezentowałwstępną wersję tego, jak może ona wyglądać na konferencji Chrome Dev Summit. Przykład znajduje się poniżej.
Regulacja
Gdy już zaczniesz stosować zdobytą wiedzę w praktyce, możesz używać Narzędzi deweloperskich do debugowania, ulepszania i utrzymywania swojej pracy.
W Narzędziach deweloperskich znajdziesz sporo nowych funkcji, a Matt przedstawia je poniżej.
Tryb urządzenia
Tryb urządzenia to nowa sekcja w Narzędziach deweloperskich, która pozwala szybko sprawdzić, jak witryna działa na różnych urządzeniach mobilnych, podczas wyświetlania zapytań o multimedia w CSS.
Jedną z najważniejszych funkcji trybu urządzenia jest możliwość ograniczania szybkości sieci, co pozwala symulować działanie użytkownika korzystającego z połączeń GPRS, EDGE, 3G, DSL lub Wi-Fi.
Program profilujący renderowanie
Jeśli zdarzyło Ci się otworzyć kartę osi czasu i kliknąć przycisk nagrywania, pewnie zdarzyło Ci się widzieć w kaskadzie zdarzenia wyrenderowania. Zwykle jest to czarne pole, w którym nie ma informacji o tym, co robi przeglądarka ani co robi.
Program profilujący Paint podaje więcej informacji o tym, co dokładnie robi przeglądarka podczas tego procesu.
Śledzenie unieważnień
W Narzędziach deweloperskich dowiesz się, dlaczego odświeżanie lub układ strony zawsze się działo. Jest to przydatne dla osób, które poznają oś czasu i sposób działania przeglądarki, a także umożliwiają zoptymalizowanie kodu w celu uniknięcia problemów z wydajnością.
Widok wykresu płomieniowego
To zupełnie inny sposób wyświetlania informacji na osi czasu. Dzięki temu znacznie łatwiej można zaobserwować, w jaki sposób zadania nakładają się na siebie i jakie działania przeglądarki zmieniają się w wyniku ich wykonywania.
Wyświetlający ramki
W widoku wykresu płomieni możesz wybrać konkretną ramkę, a w niej możesz sprawdzić, które elementy strony zostały przeniesione do warstwy złożonej oraz dlaczego tak się stało.
Ucz się. Buduj. Regulacja
To niektóre działania zespołu Chrome, które ułatwiają programistom tworzenie stron internetowych. Zapoznaj się z artykułami Web Fundamentals, Web Starter Kit i nowe funkcje dostępne w Narzędziach deweloperskich w Chrome.