Świeże zasoby dla projektantów stron internetowych i programistów (marzec 2019)
Wiele się wydarzyło w ciągu ostatnich kilku miesięcy w świecie tworzenia stron internetowych. Po pierwsze, nowy edytor blokowy o nazwie kodowej Gutenberg, został ostatecznie połączony z WordPress 5.0. To naprawdę duża zmiana od czasu jej powstania, ponieważ wyznacza nowe podstawy dla WordPress, aby ewoluować w przyszłości i zmieni sposób, w jaki deweloperzy rozszerzają funkcje WordPressa.
Po drugie, kilku naszych programistów stworzyło kilka naprawdę przydatnych narzędzi, takich jak takie, które pozwala zobacz JSON w terminalu oraz kilka bibliotek React, które mogą okazać się wielką pomocą w projektowaniu stron internetowych i projektach rozwojowych.
I wreszcie, niektóre z najbardziej efektywnych zasoby, referencje i wtyczki zostały uruchomione, aby pomóc zaktualizować projekty zgodnie z nowszymi trendami.
Przejdźmy do najbardziej wyczerpującej listy świeżych zasobów do tworzenia stron internetowych.
Podręcznik Gutenberga
Oficjalny podręcznik WordPress, w którym możesz znaleźć referencje do projektu, przykłady kodu do tworzenia bloków i inni oraz przewodnik, który ma przyczynić się do projektu. To twoja pierwsza wzmianka o rozwoju z Gutenbergiem.
Blokowy rusztowanie
Dzięki edytorowi opartemu na blokach WP-CLI zapewnia teraz wygodny sposób na rozpoczęcie pracy stworzenie bloku Gutenberga z nowym poleceniem CLI, wp blok rusztowań. Możesz tworzyć i dołączać je do istniejących wtyczek i motywów.
CGB
Innym sposobem na łatwe uruchomienie bloku Gutenberga jest utworzenie bloku Guten (CGB) wygeneruj szablon rozwinąć blok Gutenberga. Składa się z nowoczesnych narzędzi, takich jak React.js, Webpack, ESLint, Babel itd. Najlepsze jest to, że ty nie musisz konfigurować żadnego z tych narzędzi więc możesz po prostu skupić się na pisaniu kodu.
Bloki elementarne dla Gutenberga
Wtyczka WordPress, która pozwala wstaw dowolne szablony Elementora i przejrzyj go bezpośrednio w edytorze. Wtyczka zawiera wiele innych kompatybilności, które zapewniają bezproblemowa edycja między Elementorem a Gutenbergiem. Obejrzyj ten film, aby zobaczyć, jak to działa w akcji.
Bloki atomowe
Zestaw bloków Gutenberga z rosnącą liczbą kolekcji. W czasie pisania tego tekstu zapewnia “Blok siatki po” co pozwala dodaj listę postów swojej witryny w układzie siatki. Jest też a “Blok referencyjny” co, jak sama nazwa wskazuje, wstawienie opinii na stronie. Sprawdź pełne podglądy bloków na tej stronie.
Galeria bloków
Przyciągający wzrok blok do wstawiania galerii zdjęć, Block Gallery, zapewnia płynne dodawanie zdjęć do postu. Po prostu upuść swoje zdjęcia, nadaj stylowy wygląd galerii (styl murowany, karuzela lub pełny ekran), a wszystko będzie gotowe. W tej chwili jest to po prostu najlepszy blok galerii dla WordPress.
CoBlocks
Zestaw bloków tego samego autora, który opracował wspomnianą wyżej Galerię bloków, CoBlocks składa się z wielu bloków, które poprawią zawartość witryny, np. Akordeon, tabela cenowa, Gif, Click-to-Tweet, i więcej bloków do dodania.
StagBlocks
Kolejny pakiet bloków Gutenberga. Wtyczka przynosi wiele interesujących bloków, które wielu z was doceni. Zawiera blok statyczny, który pozwala dostosować statystyki w swoich postach i stronach. Blok karty internetowej, który będzie podgląd strony w fantazyjnym stylu kartowym. Blok kodu, który wyświetla kod z podświetlonym kolorem.
Otter Blocks
Również kolekcja bloków Gutenberga, takich jak “Blok Google Maps” wstawić mapę, “Nasz blok serwisowy” do wstaw listę usług za pomocą przycisku w widoku siatki, i “Blok obszaru referencji” wstawić listę referencji. Otter Block to kolekcja bloków Gutenberg, które docenią firmy i twórcy motywów.
Zaawansowane bloki Gutenberga
Ta wtyczka jest dostarczana z garstką zaawansowane bloki, aby wzbogacić zawartość takie jak automatycznie wygenerowany spis treści, “Giphy Bloki” dołączyć obraz GIF z Giphy.com, “Unsplash Block” wstawiać obrazy z Unsplash.com, “Blok reklam banerowych”, WooCommerce “Dodatkowy blok przycisków”, i dużo więcej.
Blokuj laboratorium
Block Lab ułatwia programistom tworzenie bloku Gutenberga. Wtyczka pozwala zarejestruj nowy blok za pomocą przyjaznego dla użytkownika GUI i szablony w PHP. Nie musisz nawet uczyć się React.js.
Bloki EDD
Wtyczka umożliwiająca renderowanie produktów Easy Digital Downloads w edytorze Gutenberga. W przeciwieństwie do używania kodu Shortcode, blok wyświetli widoki produktu.
Sprawdź Gutenberga
Nie jesteś gotowy, aby zainstalować wtyczkę Gutenberga lub zaktualizować swoją witrynę do WordPress 5.0? Możesz po prostu załaduj tę stronę, aby wypróbować nowy edytor.
Chmura Gutenberga
To jak AppStore dla bloków Gutenberga. Centralne miejsce, gdzie możesz się dostać Bloki Gutenberga, które mogą być używane w WordPressie i Drupalu. Tak, Drupal przyjmie także redaktora Gutenberga dla swojego edytora.
Przykłady Gutenberga
Repozytorium próbek Github do tworzenia bloków Gutenberga. Tutaj znajdziesz najprostszy blok do bardziej złożonego przykładu, taki jak ten, który tworzy “Blok przepisu” który ustawia szablon w edytorze dla użytkowników do dodania Przepis zawartość. Dobra referencja dla tych, którzy wolą uczyć się na prawdziwych przykładach niż w podręczniku.
GutenbergJS
Wersja Gutenberga przeznaczona tylko dla JavaScript. Jest dostępny jako pakiet NPM, który umożliwia integrację Gutenberga z dowolną aplikacją JavaScript.
Wyłącz Gutenberga
Chociaż Gutenberg wnosi nowe możliwości do WordPress, ale nie każdy jest na to gotowy. Jeśli istniejące witryny nie działają dobrze z Gutenbergiem, możesz zainstalować tę wtyczkę. To pozwala wyłącz edytor Gutenberga dla poszczególnych postów, typów postów, ról użytkowników, tematów, a także wyłącz arkusze stylów Gutenberga w interfejsie.
Klasyczny edytor
Alternatywnie możesz zainstalować tę wtyczkę, abyś mógł być na bieżąco aktualizowany do WordPress 5.0, a jednocześnie używać starego klasycznego edytora. Ta wtyczka będzie obsługiwana do 2022 roku.
ClassicPress
Inną alternatywą jest przełączenie na widelec WordPress, ClassicPress. ClassicPress skupia się na przedsiębiorstwa, stabilność i bezpieczeństwo. Jest kompatybilny z wtyczkami WordPress i planuje wprowadzenie nowych ciekawych funkcji w przyszłych wydaniach. Sprawdź nasz post: ClassicPress: Alternatywa dla WordPress bez Gutenberga i React.js
Przyspieszenie WordPress
Ponieważ WordPress stał się tak duży; więcej niż tylko platforma blogowa. Szczególnie Gutenberg dodał kilka dodatkowych obciążeń, kodów, plików do Twojej witryny, które mogą spowolnić Twoją witrynę. Jest to szczegół, który możesz odnieść, aby pomóc Ci zidentyfikować punkty bólowe na swojej stronie i odnieść się do najnowszych najlepszych praktyk w branży.
Podgląd przeglądarki Visual Studio Code
Edytor kodu wizualnego, który dodaje prawdziwą przeglądarkę opartą na Chrome Headless wewnątrz Visual Studio Code. To pozwala podgląd swojej pracy w czasie rzeczywistym bezpośrednio w edytorze kodu i włącza takie funkcje, jak debugowanie w edytorze.
Bundlesize
Bundlesize to narzędzie do zachowaj plik JavaScript sprzedaż wiązana rozmiar w ryzach. Możesz zdefiniować maksymalny rozmiar każdego z dołączonych plików i powiadomi Cię, gdy pojawi się lub przekroczy określony maksymalny rozmiar. Bundlesize można zintegrować z usługą CI, taką jak TravisCI i CircleCI, w celu bezproblemowego wdrożenia przepływu pracy w projekcie.
WP Emerge
Nowoczesny Struktura motywu WordPress oparta na wzorze MVC. Jeśli jesteś przyzwyczajony do pracy z frameworkiem PHP, takim jak Laravel i Slim, na pewno docenisz tę strukturę. Możesz używać rzeczy takich jak Router i kontroler, DI Container i Middlerware.
Latarnia morska Bot
Narzędzie, które umożliwia uruchamianie Lighthouse w serwisie CI za pomocą Docker. To świetne narzędzie do automatyzuj sprawdzanie wydajności witryny za każdym razem, gdy wprowadzasz nową zmianę do kodu swojej strony.
Dowiedz się React App
Learn React App to zasób do nauki React.js. Ale w przeciwieństwie do innych dostępnych tam zasobów, powinno tak być zainstalowany lokalnie na komputerze. Zawiera nie tylko materiały do nauki, ale także kod i interaktywne próbki. Najlepsze jest to, że możesz to zrobić w trybie offline po zainstalowaniu.
Akceptacja WP
WP Akceptacja to nowe narzędzie, które pozwala na wykonywanie testów akceptacyjnych. Mówiąc prościej, Testy Akceptacji to seria testy naśladujące zachowanie użytkownika. Istnieje wiele struktur do wykonywania tego typu testów.
Jeśli jednak pracujesz głównie z WordPress, docenisz to narzędzie, ponieważ jest ono łatwe w użyciu, ponieważ zostało zaprojektowane i dostosowane do typowych potrzeb projektów WordPress.
Błyszczący
Biblioteka JavaScript do naśladuj odbicie światła na swojej stronie, gdy oglądasz je na urządzeniu mobilnym. Możesz zobaczyć demo w https://pqina.nl/shiny/. Warto zauważyć, że będzie działać tylko na urządzeniu mobilnym, ponieważ opiera się na pewnym interfejsie API dostępnym tylko w urządzeniach mobilnych.
Reaguj na Lucid
ReactLucid to narzędzie do pomocy debuguj aplikacje React i GraphQL w bardziej interaktywny sposób. Pozwala zobaczyć hierarchię komponentów, zmiany stanu / wsparcia w aplikacji React, a także schemat GraphQL, zapytania i mutacje w czasie rzeczywistym.
Przełączanie funkcji CSS
Rozszerzenie Chrome, które pozwala wyłącz niektóre funkcje CSS w Chrome. Dzięki temu możesz zobaczyć, jak strona internetowa będzie renderować i zachowywać się, gdy pewne funkcje nie istnieją. Całkiem przydatne, aby pomóc Ci wdrożyć nowe funkcje CSS, które mogą nie być zaimplementowane we wszystkich przeglądarkach.
Blendy
Narzędzie, które może ci pomóc dostosuj swoje tryby mieszania tła CSS. Możesz przeglądać tryby mieszania, zmieniać kolory i stosować gradienty. Możesz użyć obrazów z Unsplash lub przesłać je z komputera.
React Elemental
Kolekcja elementów React, które działają od razu po wyjęciu z pudełka. Brak zewnętrznego CSS do importowania lub dostosowywania konfiguracji w celu dodania do pakietu Webpack. Zawiera podstawowe elementy, takie jak Button, Checkbox, SelectList, Tabs, Tooltip i wiele innych.
FX
Jeśli często masz do czynienia z formatem JSON, jestem pewien, że docenisz to narzędzie. fx jest narzędzie linii poleceń, które umożliwia wizualizację danych JSON w Terminalu z trybem interaktywnym. w taki sposób, że możesz rozwinąć lub zwinąć dane. fx można zainstalować za pomocą NPM lub Homebrew.
Monica
Monica jest w swojej kategorii. To rodzaj CRM (Customer Relationship Manager), ale nie jest przeznaczony dla twojego klienta, ale dla twoich bliskich, takich jak twoja rodzina i przyjaciele.
Podobnie jak CRM, pozwala ci śledzić takie rzeczy, jak twoja aktywność z nimi, a kiedy ostatnio do nich dzwoniłeś itd. Co więcej, możesz ustawić, aby przypominać o tym, aby zadzwonić do kogoś, z kim nie rozmawiałeś od jakiegoś czasu. Nazywają to PRM (Personal Relationship Manager).
Ionic Framework
Ionic framework już istnieje od jakiegoś czasu. Ostatnio jednak znacznie poprawił swoją funkcjonalność. Teraz nie tylko jest szybszy, ale ioniczny kompatybilny z dwoma wschodzącymi gwiazdami: React.js i Vue.js.
Stwarza to podstawy do tego, aby Ionic był ramowe narzędzie agnostyczne. Nie tylko dlatego, że działa dla określonych frameworków, ale może też działać z nowymi, ponieważ rozwój frontonu ewoluuje w przyszłości.
Znaczny
Godny uwagi jest aplikacja do robienia notatek. W przeciwieństwie do jakiejkolwiek innej podobnej aplikacji, nie ma własnego formatu, WYSIWYG ani innych typowych dzwonków i gwizdków. The edytor aplikacji jest obsługiwany głównie przez Markdown o smaku Github. Notatki są przechowywane w pliku płaskim .md pliki oraz załącznik. To działa i jest proste.
TipTap
TipTap to edytor WYSIWYG zbudowany na szczycie ProseMirror z Vue.js. Oprócz dziedziczenia funkcji numerycznych z ProseMirror po wyjęciu z pudełka, takich jak niesamowita obsługa składni Markdown, TipTap oferuje kilka nowoczesnych funkcji, takich jak Bubble menu, w którym pojawi się menu formatowania podczas zaznaczania tekstu, funkcja Sugestia, w której można oznaczyć lub wspomnieć osoba w treści i wyeksportuj możliwość eksportowania treści w formatowaniu JSON.
Restplain
Restplain to wtyczka WordPress, która umożliwia łatwe generowanie dokumentacji punktów końcowych API REST WordPress, w tym niestandardowych punktów końcowych w witrynie, a także wywołanie API z poziomu dokumentów. Należy pamiętać, że generowanie dokumentacji zależy od schematu punktu końcowego, więc upewnij się, że dodałeś odpowiedni schemat dla niestandardowych punktów końcowych.
React Content Loader
React Content Loader to komponent niestandardowy React, który umożliwia wyświetlanie symbolu zastępczego treści podczas ładowania rzeczywistej zawartości. Jest podobny do typu programu ładującego, który widzisz na Facebooku i Instagramie .
Mityczny
Mythic to motyw startowy WordPress z nowoczesnymi najlepszymi praktykami, takimi jak wtryskiwanie zależności, widoki i kontrolery, a także nowoczesne narzędzia, takie jak użycie Pakiety internetowe, Sass, Linting, PHP7 minimalne wymagania i BEM. To świetny motyw, aby podnieść swoje umiejętności jako twórca motywów.
Wyrafinowany Github
Rozszerzenie przeglądarki, aby udoskonalić twoje doświadczenie podczas korzystania z Github. Dodaje kilka przydatnych skrótów klawiszowych, udoskonala niektóre układy i interfejsy użytkownika, automatycznie dodaje link do problemów i PR, i wiele więcej.
Otwarta toaleta
Open WC to zestaw narzędzi, które umożliwiają tworzenie niestandardowego składnika sieci Web. Zawiera główną bibliotekę do tworzenia składnika sieci Web, generatory Yeoman do szybkiego generowania “Otwarta toaleta” projekt, który obejmuje rusztowanie do testowania, strzępienie, i kontynuuje integrację.
Otwarte WC może być dobrą alternatywą, jeśli chcesz wolę implementować z natywną funkcją internetową zamiast używać frameworka takiego jak Vue.js lub React.js.
Gridsome
Gridsome to narzędzie do tworzenia statycznych stron internetowych i aplikacji internetowych za pomocą Vue.js i GraphQL. Jest w stanie obsłużyć wiele strumieni danych, takich jak CMS, takich jak WordPress i Drupal, lokalny plik, taki jak Markdown lub Yaml, lub zewnętrzny interfejs API, taki jak AirTable i Contentful. To naprawdę świetna alternatywa dla Gatsby.js, zwłaszcza jeśli wolisz Vue.js niż React.js.
Przeglądarka
Jest to przeglądarka zaprojektowana przez wynalazcę World Wide Web, Tima Bernersa-Lee. To jest prosta przeglądarka do renderowania HTML i nie pokazuje paska adresu jak nowoczesna przeglądarka, ale możesz przeglądać, przechodząc do Dokument> Otwórz z pełnego odwołania do dokumentu i wklej adres URL i kliknij otwarty. I tam zobaczysz, jak Twoja strona będzie renderowana za pomocą oryginalnej przeglądarki.
Raster
Raster to nowoczesna struktura gridowa zbudowana z nowoczesnej specyfikacji HTML i CSS, takiej jak siatka CSS, własność niestandardowa CSS (zmienna) i element niestandardowy. Idealne ramy dla tych, którzy lubią żyć na krawędziach.
Hooper
Komponent Vue.js, aby dodać karuzelę lub suwak. Jest dostępny i można go używać za pomocą klawiatury dotykowej, klawiatury, kółka myszy i innej nawigacji wspomagającej, obsługuje RTL i kierunek pionowy, rozszerzalny i oczywiście odpowiedź.
