PHP | Нам точно нужен фреймворк?

В статье автор рассказывает о том, какие вопросы должен задать себе разработчик, прежде чем выбрать фреймворк или отказаться от фреймворков вообще.

👉 @sWebDev

JS | 14 уроков с основами JS

Серия коротких, 3-6 минут, роликов с объяснением базовых возможностей JS, подойдет для тех кто совсем ничего не знает о программировании.

👉 @sWebDev

👉 @sWebDev

Кастомные полосы прокрутки

Оживить внешний вид сайта или сделать скроллбары не такими заметными можно и с помощью CSS, но для полноценных скроллбаров без JS не обойтись

Nicescroll jQuery Plugin - небольшой jQuery плагин, оборачивает переданный элемент в свою разметку.
Плюсы
- Простота использования
- Легкая кастомизация
Минусы
- Нет методов и событий

PerfectScrollbar - плагин позволяющий получить максимум от скроллбаров, настраивается на любой вкус
Плюсы
- Множество опций
- Подробная документация
- Полный программный контроль, методы и события

👉 @sWebDev

👉 @sWebDev

PHP | compact и extract

compact - это функция, которая собирает массив из переменных по их именам.

extract - функция создающая переменные в текущей области видимости по именам ключей массива.

Будьте осторожны при использовании данных функций. Так как иногда они могут быть не очевидны.

👉 @sWebDev

Стилизация range slider

Стандартный input type="range" даёт неплохие возможности кастомизации, но для сложной логики работы или нестандартного дизайна лучше воспользоваться js-плагинами.

ion.rangeSlider - jQuery плагин простой в использовании и лёгкий в освоении
Плюсы
- Возможность настройки через дата атрибуты
- Несколько скинов
Минусы
- зависимость от jQuery
- максимум два ползунка

noUiSlider - это легкий слайдер с поддержкой мультитач и множеством функций. Он поддерживает нелинейные диапазоны, не требует внешних зависимостей, поддерживает клавиатуру и отлично работает в адаптивном дизайне.
Плюсы
- Отсутствие зависимостей
- Отличная документация
- Полный программный контроль
- Тонкая настройка всех параметров
Минусы
- Сложность в освоении

👉 @sWebDev

👉 @sWebDev

Автоматическая респонсивная гексагональная сетка, интересное решение для галереи, списка новостей или контактов.

👉 @sWebDev

Lazy load в том числе и нативный

Отложенная загрузка изображений значительно сокращает время показа страницы, существует множество библиотек для решения этой задачи, луче всего справляются те, что используют Intersection Observer. Так же создана и потихоньку внедряется в браузеры технология ленивой загрузки средствами самого браузера, но у него пока плохая поддержка.

lozad.js - работает без зависимостей, поддерживает <img>, <picture>, iframe, video, audio, background-image и т.д. Отличается простой настройкой, но немного запутанной документацией.

vanilla-lazyload - так же написан на чистом js, но имеет гораздо более богатый функционал, можно настроить все аспекты работы, отличная документация, примеры реализации и советы по использованию.

👉 @sWebDev

Интересные эффекты наведения реализованные на чистом css.

👉 @sWebDev

React Material-UI

React Material-UI — это набор компонентов React, которые реализуют концепцию Material Design от Google. Если учесть то, что у библиотеки Material-UI более 30 тысяч звёзд на GitHub, она, вероятно, является самой популярной библиотекой для React.

Стоит отметить качество и объем документации этой библиотеки. Вам нужно разобраться, как все работает, а чем больше функционала, тем больше проблем может возникнуть. Так что наличие обширной и хорошо продуманной документации очень важно.

👉 @sWebDev

Lodash

Lodash - это библиотека, с набором полезных функций, для работы с данными, для конвертирования их из одного формата в другой, фильтрации, маппинга и других вещей.
Конечно, можно реализовать все функции самому, но зачем очередной раз изобретать велосипед, когда до нас уже столько сделано, и, главное, хорошо оттестировано, а бывает даже и нормально задокументировано.

Вот несколько примеров функций, реализованных в lodash
для массивов:
difference - Создаем новый массив, как разницу, где из первого массива исключили все значения второго (А-Б)
first - Возвращает первый или несколько первых элементов массива
flatten - Извлекает, в виде массива, элементы из объектов, содержащихся в передаваемом массиве

для объектов:
assign - Дополняет объект отсутствующими (не просто undefined) свойствами из другого объекта
clone - Делает копию объекта (вложенные объекты копируются по ссылке)
cloneDeep - Глубокое копирование объекта (вложенные объекты копируются по содержанию)

👉 @sWebDev

React Spinner

Вам случалось слышать фразу «иногда меньше значит больше»? Эта библиотека — прекрасная иллюстрация данной фразы. React Spinner фокусируется не на общем виде вашего приложения и не на внутреннем дизайне его архитектуры. Вместо этого она заботится об одной-единственной вещи: индикаторах загрузки.

👉 @sWebDev

Chart.js

Chart.js - это бесплатная JavaScript-библиотека с открытым исходным кодом для визуализации данных, которая поддерживает 8 типов диаграмм: линейчатая, линейная, площадь, круговая, пузырьковая, радарная, полярная и разбросанная. И все эти диаграммы можно легко настроить и застилизовать под свои нужды.

👉 @sWebDev

Компоненты Ant-design

Ant-design предлагает полновесный список из больше чем 50 настраиваемых компонентов, которые вы можете использовать для создания прекрасных приложений.
Особенность библиотеки в том, что все ее компоненты базируются на языке дизайна, разработанном создателями этой библиотеки.

👉 @sWebDev

Moment.js

Moment - это библиотека JavaScript, которая помогает анализировать, проверять, манипулировать и отображать дату и время в JavaScript очень простым способом

Она позволяет отображать дату в соответствии с локализацией и в удобочитаемом формате. Вы можете использовать MomentJS внутри браузера, используя метод script. Он также доступен с Node.js и может быть установлен с помощью npm.

Примеры использования:

 moment().format('MMMM Do YYYY, HH:mm:ss');

вернет дату в заданном формате

 февраль 21. 2013, 18:48:48

 moment().add('days', 7).add('months', 1);

добавит к изначальной дате семь дней, а затем 1 месяц

👉 @sWebDev