Свіжі ресурси для веб-дизайнерів і розробників (жовтень 2018)
На відміну від будь-якої іншої галузі, веб-розробка змінюється по дріжджах. Існують нові інструменти, методи і рамки, розроблені майже щодня для задоволення нові тенденції та технологічний прогрес у веб-індустрії.
Ось список останніх інструментів і ресурсів, включаючи PHP рамки, які легко виконувати Тестування E2E для вашої програми PHP, інструмент для створення кольорів, що відповідають стандартам W3C Accessibility, і кілька розширень Vue.js. Давайте перейдемо до повного списку.
Ключові кадри App
Веб-додаток надає хороший графічний інтерфейс для створення анімації CSS і візуалізувати анімацію з часовою шкалою. Додаток також дозволяє завантажувати вивід CSS, як тільки ви задоволені. Ключові кадри CSS не є найпростішою специфікацією в CSS, тому мати додаток, подібне до цього, безумовно, буде тимчасовим заходом.

Симфоні пантери
“Симфоні пантери” є дивовижною рамкою PHP від Symfony для виконання тесту E2E (End-to-end). Він поставляється з його вбудований веб-сервер і може використовувати Chrome, встановлений на вашому комп'ютері, для виконання тесту E2E.
Більше того, він підтримує Виконання JavaScript, захоплення екрану, користувальницький драйвер Selenium, Chrome і клієнт Firefox. Будучи автономним фреймворком, ви можете включити Panther у будь-які проекти PHP, наприклад, WordPress, Joomla і т.д..

Модні палети
Колекція красивих кольорових палітр. Колекція пропонує тисячі відібрані палітри кольорів. Користувачі можуть подавати нову кольорову палітру, тому завжди буде додано нові палітри за будь-який час. TrendyPalettes також доступний як розширення Chrome.

Eagle.js
Eagle.js - це фреймворк для створення слайдів, побудованих на вершині Vue.js, так що ви можете легко повторно використовувати власні компоненти Vue.js у слайдах. Ковзання також підтримує навігація за допомогою клавіатури та миші, спеціальний стиль або тематизація, інтерактивних віджетів і надає шаблон, який допоможе швидко налаштувати та представити слайд. Це може бути великим альтернативою Reveal.js, особливо якщо ви вже знайомі з Vue.js.

Grape.js
GrapeJS - це веб-будівельник з відкритим вихідним кодом, який дозволяє створювати веб-сторінки просто перетягування компонентів. Він надає деякі загальні компоненти, такі як текст, зображення, Vidoe, стовпці, карта, цитата, тощо. Перевірте демо.

Vapid
Vapid - це нова CMS, побудована з Node.js з цікавим і унікальним підходом. Більшість CMS, якщо ви хочете включити новий тип даних, потребують спочатку визначити користувальницький вхід в області інформаційної панелі / адміністратора.
З Vapid, це протилежно, як ви можете визначити шаблон, і Vapid автоматично генерувати вхідні дані в області Dashboard / Admin. Він доступний як пакет NPM.

Повідомлення WP CLI
Назва говорить все. Це індивідуальний пакет WP-CLI для відображення повідомлень ОС, коли WP-CLI вже виконано. Досить фантазія.

CSSGr.id
Веб-додаток для створення CSS Grid. Ви можете налаштувати кількість елементів, стовпців, розрив між кожним елементом, а також кожен відрізок елемента, а потім генерувати код HTML і CSS. CSS Grid - це одна з тих специфікацій CSS, які не дуже легко зрозуміти. Але цей засіб полегшує справу з цим.

Підказка прокрутки
ScrollHint - це бібліотека JavaScript, яка дозволяє створювати елемент зверху, щоб показати, що розділ на веб-сторінці можна прокручувати. Це особливо корисно, якщо на вашій веб-сторінці є елемент горизонтального прокручування, оскільки більшість людей не прокручуються зліва направо (або навпаки) під час користування Інтернетом.

PristineJS
Бібліотека JavaScript, щоб додати перевірку на вхід. HTML5 приходить з деякою перевіркою типу вже з “type = email”, і “type = number” наприклад. Але якщо вам потрібно спеціальний валідатор, який не реалізовано в HTML5, Ця бібліотека JavaScript стане в нагоді.

SelectionJS
Більшість людей, напевно, вже знайомі з тим, як вибрати кілька папок або файлів на своєму комп'ютері; вони зазвичай тримають клацання мишею і перетягують її навколо файлів або папок, які вони хотіли б вибрати. Якщо ви хочете застосувати один і той же UX на своєму веб-сайті, SelectionJS стане в нагоді.

Webdash
Webdash - це інструмент, який може відображення вашого проекту в інтерфейс GUI. Він з'єднується через package.json
на комп'ютері. Таким чином він може відображати список NPM-пакети, оновлення пакета, зареєстровані скрипти, запуск сценарію, та попередній перегляд файлів README прямо з Webdash. Досить дивовижний!

CanJS
Структура JavaScript для побудови веб-інтерфейсу. Це схоже на React.js з деякими додатковими функціями і поставляється разом з маршрутизатор, утиліти DOM і функція AJAX, що виходять з вікна. Вона також має досить активну підтримку спільноти, яка надає деякі розширення.

CheerioJS
Бібліотека JavaScript, що реалізує специфікацію jQuery Core для DOM (Document Object Model) і призначена для використання на стороні сервера. Якщо ви працюючи з Node.js, а також користуйтеся синтаксисом JQuery люблю addClass ()
, attr ()
, і find ()
, це JavaScript, який ви шукаєте.

Colorbox
Colorbox - ініціатива Lyft для створення кольорової композиції, яка відповідає стандарту кольору Accessiblity. Інструмент живиться розумним алгоритмом, який дозволяє просто переміщайтеся навколо ручки, змінюйте конфігурацію, і це створить правильні кольори для вас. Це просто дивно.

Введені властивості в PHP 7.4
PHP7.3 знаходиться за рогом, як ми вже згадували в попередній частині. Але PHP7.4 вже на Плані. Однією з планів є Typed Property. Це означає, що ви скоро зможете написати щось подібне public int $ id;
у вашому класі PHP. Це величезна зміна, яка може суттєво допомогти зменшити ваші помилки у застосуванні PHP.

Трафарет
Компілятор JavaScript, що дозволяє легко створювати веб-компоненти за допомогою останнього стандарту. На додаток до цього, StencilJS також додає деякий сучасний підхід до веб-розробки в суміш, включаючи Підтримка JSX, реактивність, маршрутизатор і управління державою за допомогою плагіна.

Vue Infinite Завантаження
Розширення Vue для створення нескінченної сторінки прокрутки. Це мобільний і сумісний з будь-яким прокручуваним елементом. Він також підтримує два напрямки прокрутки, і, що краще за все, він економить багато часу.

V Буфер обміну
Користувальницьке розширення Vue.js, що робить його таким легко створити a “Копіювати” кнопки. Можна просто додати a v-буфер обміну
атрибут кнопки і ви все налаштовані. Це розширення Vue.js працює як для кожного сучасного веб-переглядача, так і для IE11 і останніх.

Vue Select
Компонент Vue.js, який надає подібну функціональність для Select2. Він призначений для Vue.js, який він дозволяє сумісні з Vuex, Custom Templating, і купа інших доброти Vue.js.
