Nové zdroje pro webové designéry a vývojáře (říjen 2018)
Na rozdíl od jiných průmyslových vývoj webových aplikací se mění mílovými kroky. Tam jsou nové nástroje, metody a rámce vyvinuté téměř každý den obstarávat novější trendy a technologický pokrok ve webovém průmyslu.
Takže zde je seznam nejnovějších nástrojů a zdrojů, včetně PHP rámce pro snadné provádění Testování E2E pro vaši aplikaci PHP, nástroj pro generování barev, které vyhovují standardům W3C Accessibility, a hrstku rozšíření Vue.js. Pojďme skočit a uvidíme úplný seznam.
Klíčové snímky App
Webová aplikace poskytuje pěkné grafické uživatelské rozhraní pro tvorbu CSS animace a vizualizovat animaci časovou osou. Aplikace také umožňuje stáhnout CSS výstup, jakmile budete spokojeni. CSS klíčové snímky není nejjednodušší specifikace v CSS, takže s aplikací, jako je tato, by určitě byl timesaver.

Symfony Panther
“Symfony Panther” je úžasný rámec PHP od společnosti Symfony k provedení testu E2E (End-to-end). Dodává se s jeho vestavěný webový server a mohl využít Chrome nainstalovaný v počítači k provedení testu E2E.
Navíc podporuje Spuštění JavaScriptu, snímání obrazovky, vlastní ovladač Selenium, Chrome a klient Firefoxu. Být samostatný rámec, můžete zahrnout Panther do všech projektů PHP, jako je například WordPress, Joomla, atd..

TrendyPalettes
Kolekce krásných barevných palet. Kolekce nabízí tisíce ručně vybírané palety barev. Uživatelé mohou odeslat novou paletu barev, takže vždy budou přidány nové palety. TrendyPalettes je také k dispozici jako rozšíření Chrome.

Eagle.js
Eagle.js je rámec pro vytváření snímků postavených na vrcholu Vue.js, takže můžete snadno použít vlastní komponenty Vue.js uvnitř snímků. Snímek také podporuje navigace na klávesnici a myši, vlastní styling nebo motivy, interaktivní widgety a poskytuje kotelnu, která vám pomůže nastavit a prezentovat snímek rychle. Může to být skvělé alternativu k Reveal.js, zejména pokud jste již obeznámeni s Vue.js.

Grape.js
GrapeJS je webový tvůrce, který umožňuje vytvářet webové stránky jednoduše přetažení komponent. Poskytuje některé běžné komponenty, jako je Text, Obraz, Vidoe, Sloupce, Mapa, Citace atd. Můžete exportovat do HTML a CSS a výstup je neuvěřitelně čistý, na rozdíl od některých podobných nástrojů, které jsem vyzkoušel dříve. Podívejte se na demo.

Vapid
Vapid je nový CMS postavený s Node.js se zajímavým a jedinečným přístupem. Většina CMS, za předpokladu, že chcete zahrnout nový typ dat, bude muset nejprve definovat vlastní vstup v oblasti Řídicí panel nebo Správce..
S Vapidem je to naopak, protože můžete definovat šablonu a Vapid automaticky vygeneruje vstup v oblasti Dashboard / Admin. Je k dispozici jako balíček NPM.

Oznámení WP CLI
Jméno říká všechno. Je to vlastní balíček WP-CLI, který zobrazuje oznámení OS, když je WP-CLI již provedeno. Docela fantázie.

CSSGr.id
Webová aplikace pro tvorbu CSS Grid. Můžete konfigurovat počet položek, sloupců, mezer mezi jednotlivými položkami, stejně jako každou položku rozpětí a pak generovat kód HTML a CSS. CSS Grid je jedním z těch CSS specifikací, které nejsou snadno pochopitelné. Ale tento nástroj je mnohem snazší se s tím vypořádat.

Tipy pro rolování
ScrollHint je knihovna JavaScriptu, která vám umožňuje vytvořit prvek nahoře, který ukáže, že sekce na vaší webové stránce je posouvatelná. To je užitečné zejména v případě, že máte na webové stránce vodorovný prvek posouvání, protože většina lidí se při konzumaci webu přirozeně neposouvá zleva doprava (nebo naopak)..

PristineJS
Knihovna JavaScript pro přidání ověření na vstup. HTML5 přichází s nějakým ověřením typu již s “type = email”, a “type = číslo” například. Ale pokud potřebujete Vlastní validátor, který není implementován v HTML5, tato knihovna JavaScriptu se hodí.

SelectionJS
Většina lidí je pravděpodobně již obeznámena s tím, jak vybrat více složek nebo souborů v počítači; typicky budou držet kliknutí myší a přetahovat je kolem souborů nebo složek, které chtějí vybrat. Pokud chcete použít stejné UX na svých webových stránkách, SelectionJS přijde vhod.

Webdash
Webdash je nástroj, který může zobrazit projekt do rozhraní GUI. Připojuje se přes package.json
v počítači. Může tedy zobrazit seznam NPM balíčky, aktualizovat balíček, registrované skripty, spustit skript, a náhled souborů README přímo z Webdash. Docela úžasné!

CanJS
JavaScriptový rámec pro tvorbu webového rozhraní. Je to podobné React.js s některými dalšími funkcemi a přichází s router, DOM Utilities a AJAX fungují ihned po vybalení z krabice. Má také poměrně aktivní podporu komunity, která poskytuje některá rozšíření.

CheerioJS
Knihovna JavaScript, která implementuje specifikaci jQuery Core pro DOM (Document Object Model) a je určena pro použití na straně serveru. Pokud jsi pracovat s Node.js a zároveň si užívat syntaxi jQuery jako addClass ()
, attr ()
, a nalézt()
, toto je JavaScript, který hledáte.

Barevná krabice
Colorbox je iniciativa společnosti Lyft, která generuje barevnou kompozici, která splňuje normu barevného přístupu. Nástroj je poháněn chytrým algoritmem, který vám umožní jednoduše pohybujte kolem knoflíku, změňte konfiguraci, a vygeneruje pro vás správné barvy. Je to prostě úžasné.

Typové vlastnosti v PHP 7.4
PHP7.3 je hned za rohem, jak jsme zmínili v předchozí splátce. PHP7.4 je však již v plánu. Jedním z plánů je Typed Property. To znamená, že budete brzy schopni něco napsat public int $ id;
ve vaší třídě PHP. Je to obrovská změna, která by mohla výrazně pomoci snížit vaše chyby aplikací PHP.

Šablona
Kompilátor JavaScriptu, který usnadňuje vytváření komponent Web s nejnovějším standardem. Kromě toho, StencilJS také přidává nějaký moderní přístup k vývoji webu do mixu včetně Podpora JSX, reaktivita, směrovač a správa státu pomocí pluginu.

Vue Infinite Loading
Rozšíření Vue pro vytvoření nekonečné stránky posouvání. Je to mobilní a přátelský kompatibilní s libovolným posuvným prvkem. Podporuje také směr dvou posouvání, a nejlepší ze všech, ušetří spoustu času.

V Schránka
Vlastní rozšíření Vue.js snadno vytvořit “kopírovat” tlačítko. Můžete jednoduše přidat v-clipboard
atributu na tlačítko a jste všichni nastaveni. Toto rozšíření Vue.js funguje pro každý moderní prohlížeč stejně jako IE11 a nejnovější.

Vue Select
Komponenta Vue.js, která poskytuje podobnou funkci jako Select2. Je určen pro Vue.js, který umožňuje být kompatibilní s Vuex, Custom Templating, a spoustu dalších Vue.js dobrot.
