Frontender Libs - обзор библиотек JS / CSS

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

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

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

Lodash Lodash - это библиотека, с набором полезных функций, для работы с данными, для конвертирования их из одного формата в другой, фильтрации, маппинга и других вещей. Конечно, можно реализовать все функции самому, но зачем очередной раз изобретать велосипед, когда до нас уже столько сделано, и, главное, хорошо оттестировано, а бывает даже и нормально задокументировано. Вот несколько примеров функций, реализованных в lodash для массивов: difference - Создаем новый массив, как разницу, где из первого массива исключили все значения второго (А-Б) first - Возвращает первый или несколько первых элементов массива flatten - Извлекает, в виде массива, элементы из объектов, содержащихся в передаваемом массиве для объектов: assign - Дополняет объект отсутствующими (не просто undefined) свойствами из другого объекта clone - Делает копию объекта (вложенные объекты копируются по ссылке) cloneDeep - Глубокое копирование объекта (вложенные объекты копируются по содержанию) 👉 @sWebDev

React Material-UI React Material-UI — это набор компонентов React, которые реализуют концепцию Material Design от Google. Если учесть то, что у библиотеки Material-UI более 30 тысяч звёзд на GitHub, она, вероятно, является самой популярной библиотекой для React. Стоит отметить качество и объем документации этой библиотеки. Вам нужно разобраться, как все работает, а чем больше функционала, тем больше проблем может возникнуть. Так что наличие обширной и хорошо продуманной документации очень важно. 👉 @sWebDev

JavaScript задачи с собеседований - канал на котором публикуются интересные задачки по JavaScript. Так же react, vue, angular, node.js Тематика канала : — cинтаксис, — условные операторы, переменные и типы данных, — функции и функциональные выражения, — циклы, взаимодействие с пользователем, — строки, массивы. Проверь свои знания языка на @javascriptquiz

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

Lazy load в том числе и нативный Отложенная загрузка изображений значительно сокращает время показа страницы, существует множество библиотек для решения этой задачи, луче всего справляются те, что используют Intersection Observer. Так же создана и потихоньку внедряется в браузеры технология ленивой загрузки средствами самого браузера, но у него пока плохая поддержка. lozad.js - работает без зависимостей, поддерживает <img>, <picture>, iframe, video, audio, background-image и т.д. Отличается простой настройкой, но немного запутанной документацией. vanilla-lazyload - так же написан на чистом js, но имеет гораздо более богатый функционал, можно настроить все аспекты работы, отличная документация, примеры реализации и советы по использованию. 👉 @sWebDev

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

FrontendQuiz задачи с собеседований - канал на котором публикуются задачки для фронтендщиков: алгоритмы, регулярные выражения, вопросы с интервью, задачи для Junior Frontend и разбор их решения. Проверь свои знания на @frontendquiz

👉 @sWebDev

Хотите заниматься iOS разработкой? Сделайте первые шаги на бесплатном интенсиве от OTUS и создайте простейшее приложения без единой строчки кода! Интенсив пройдет 6-7 мая и даст вам возможность активно протестировать обучение на онлайн-курсе «iOS Developer. Basic». 📌Программа интенсива: 6 мая Что такое XCode? Как «рисуются экраны» Добавим на экраны кнопки и поля ввода. Создадим экран авторизации. Создадим второй экран нашего приложения и добавим переход на него из окна авторизации. 7 мая Посмотрим, какие есть возможности что бы «бродить» по приложению. Добавим свою навигацию Создадим экран личных данных пользователя ( имя, фото, описание ). ⚡️В итоге получим простенькое приложение без единой строчки кода, но имеющее авторизацию, навигацию и экран пользователя. Регистрируйтесь, чтобы принять участие: https://otus.pw/2lmJ/

Макеты для верстки теперь в Telegram! Figma Макеты — уникальный канал, куда выкладываются дизайн-макеты в форматах Figma и PSD для верстки сайтов, практикуйтесь и добавляйте проекты к себе в портфолио! Подписывайся: @FigmaMaket🔥

Стилизация range slider Стандартный input type="range" даёт неплохие возможности кастомизации, но для сложной логики работы или нестандартного дизайна лучше воспользоваться js-плагинами. ion.rangeSlider - jQuery плагин простой в использовании и лёгкий в освоении Плюсы - Возможность настройки через дата атрибуты - Несколько скинов Минусы - зависимость от jQuery - максимум два ползунка noUiSlider - это легкий слайдер с поддержкой мультитач и множеством функций. Он поддерживает нелинейные диапазоны, не требует внешних зависимостей, поддерживает клавиатуру и отлично работает в адаптивном дизайне. Плюсы - Отсутствие зависимостей - Отличная документация - Полный программный контроль - Тонкая настройка всех параметров Минусы - Сложность в освоении 👉 @sWebDev

PHP | compact и extract compact - это функция, которая собирает массив из переменных по их именам. extract - функция создающая переменные в текущей области видимости по именам ключей массива. Будьте осторожны при использовании данных функций. Так как иногда они могут быть не очевидны. 👉 @sWebDev

👉 @sWebDev

Кастомные полосы прокрутки Оживить внешний вид сайта или сделать скроллбары не такими заметными можно и с помощью CSS, но для полноценных скроллбаров без JS не обойтись Nicescroll jQuery Plugin - небольшой jQuery плагин, оборачивает переданный элемент в свою разметку. Плюсы - Простота использования - Легкая кастомизация Минусы - Нет методов и событий PerfectScrollbar - плагин позволяющий получить максимум от скроллбаров, настраивается на любой вкус Плюсы - Множество опций - Подробная документация - Полный программный контроль, методы и события 👉 @sWebDev