Świeże zasoby dla projektantów stron internetowych i programistów (lipiec 2015)

Twórcy stron internetowych są obdarzeni darmowymi narzędziami i zasobami znalezionymi w Internecie, które co miesiąc sumiennie gromadzimy w serii Fresh Resources. Jeśli przegapiłeś partię z poprzedniego miesiąca, odwiedź ją ponownie lub sprawdź resztę świeżych zasobów skompilowanych na początku roku.

W przypadku partii z lipca 2015 r. Wyróżniamy nowe narzędzia i zasoby, które ułatwiłyby wykonywanie zadań, począwszy od wtyczek WordPress, które umożliwiają wdrażanie aktualizacji wtyczek prywatnie do biblioteki JavaScript, po dodawanie angażujących animacji.

Aladyn

Ta wtyczka dodaje dodatkową funkcjonalność do administracji WordPress, która jest podobna do OS X Spotlight. Dzięki niemu można szybko uzyskać dostęp do plików i folderów na komputerze Mac. Po zainstalowaniu naciśnij dwukrotnie klawisz Shift, a następnie wpisz, co chcesz uzyskać dostęp. Sprawia, że ​​administracja WordPress jest bardziej dostępna za pomocą klawiatury.

SiteOrigin CSS

SiteOrigin CSS to solidna wtyczka WordPress, która umożliwia dostosowanie wyglądu motywu w czasie rzeczywistym. Wtyczka dodaje nowy panel pod Wygląd> Własny CSS menu. W tym miejscu możesz napisać niestandardowe reguły CSS, aby nadpisać CSS używanego motywu, lub użyć panelu GUI, aby intuicyjnie dodać reguły CSS.

DynamicsJS

DynmaicJS to biblioteka do stosowania animacji opartej na fizyce. Nie jestem ekspertem od fizyki, ale przykłady w tym menu wyglądają naprawdę fajnie. Może animować elementy HTML i SVG, a także zapewnia szybką wydajność bez zależności. DynamicJS został przetestowany na Safari 7+, Firefox 35+, Chrome 34+ i IE10+.

Tryb samolotowy

Wtyczka ta uniemożliwi kilku zewnętrznym żądaniom HTTP WordPress, takim jak Google Fonts, Gravatar i WordPress, próbę połączenia się z wtyczkami i repozytoriami motywów w celu aktualizacji. Jest to przydatna wtyczka do rozwoju lokalnego w celu tłumienia błędów pojawiających się, gdy te połączenia nie powiodą się (co zwykle ma miejsce, gdy rozwijasz się lokalnie w wyjątkowo wolnym Internecie).

Coverr

Zbiór filmów, które świetnie nadają się do nagłówków Twojej witryny. Wszystkie filmy są bezpłatne, licencjonowane w domenie publicznej. Nie zapomnij sprawdzić “Jak używać” sekcja, aby dowiedzieć się, jak dodać wideo do swojej strony internetowej.

VibrantJS

VibrantJS pobiera wyraźne kolory z obrazu. Udostępnia także kilka interfejsów API, które umożliwiają przetwarzanie uzyskanego koloru, takich jak przełączanie formatu koloru i decydowanie o odpowiedniej kompozycji tła i tekstu. Możesz go użyć do ulepszenia interfejsu witryny dzięki dynamicznemu generowaniu kolorów, użyć koloru jako obrazu zastępczego, gdy obraz nie jest jeszcze w pełni załadowany, lub utworzyć aplikację internetową do generowania próbki koloru.

GradifyCSS

Ta biblioteka pobiera dwa wyraźne kolory i generuje gradient CSS z uzyskanych kolorów. Podobnie jak VibrantJS, można zastosować gradient jako symbol zastępczy obrazu, gdy obraz nie jest w pełni załadowany lub jako kolor nakładki.

PurifyCSS

PurifyCSS czyści nieużywane reguły CSS z arkusza stylów. Możesz użyć tego do zmniejszenia rozmiarów arkuszy stylów dużych ram, takich jak Bootstrap i Foundation, nawet o 40%. PurifyCSS jest dostępny jako wtyczka Grunt i Gulp.

Tytuł Capital for WordPress

Nazwa powiedziała wszystko. Ta wtyczka WordPress zmieni tytuły i nagłówki w treści na poprawną wielkość po zapisaniu lub opublikowaniu posta i strony. Wtyczka ta jest przydatna w przypadku witryn z wieloma autorami, aby zachować spójność zawartości witryny.

Aktualizator GitHub

Ta wtyczka umożliwia użytkownikowi zainstaluj i automatycznie aktualizuj Wtyczki WordPress hostowane w GitHub. Pomimo nazwy wtyczka obsługuje również Bitbucket i GitLab, w tym jeden w prywatnym repozytorium. Jest to przydatna wtyczka dla programistów, którzy opracowują i rozpowszechniają swoje wtyczki lub motywy wyłącznie dla swoich klientów.

Przykłady kodu

Zbiór przykładów kodu z Zespół przeglądu motywów WordPress. W tej chwili przykład składa się z kodów do tworzenia komponentów Custom Customizer za pomocą interfejsu API Customizer, w tym do tworzenia sekcji, ustawień i panelu. Więcej przykładów najlepszych praktyk dodanych w przyszłości.