Frontender Libs - обзор библиотек JS / CSS
8.46K subscribers
2.02K photos
735 videos
2 files
239 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
JS | Советы по написанию читаемого кода

1. Пишите простой код с хорошим форматированием
2. Выбирайте осмысленные имена
3. Разбивайте код на самостоятельные функции
4. Выбирайте содержательные имена типов
5. Применяйте именованные константы
6. Выделяйте важные фрагменты кода
7. Объединяйте взаимосвязанные данные
8. Снабжайте файлы заголовками
9. Правильно обрабатывайте ошибки
10. Пишите осмысленные комментарии

Подробности в статье.
PHP | удаление элемента массива по значению

Удаление элемента из массива делается функцией unset. Но unset умеет удалять элементы из массивов только по ключу.

В примере показано как найти ключ и удалить элемент из массива в одну строку.
JS | Правильная обработка ошибок

Обработка ошибок важный этап при разработке приложений, неправильная обработка исключений может замедлить и усложнить отладку. В статье даются советы грамотной работы с выброшенными исключениями на простых и понятных примерах.
Чему будет равна толщина border и размер padding у div?
Anonymous Quiz
14%
border - 0, padding - 0
45%
border - 10px, padding - 0
41%
border - 10px, padding - 10px
array_map и array_walk очень похожи на первый взгляд. Они обе принимают массив и функцию, которая будет применена к элементам массива.

Разница же заключается в том, что array_walk применяет переданную функцию к каждому элементу, но не возвращает новый массив и не изменяет оригинальный. array_map же возвращает массив с результатами выполнения, а так же может принимать как аргументы несколько массивов.
Подборка полезных техник и хитростей для оптимизации кода на JavaScript. Пригодится не только новичкам, но и опытным программистам.

Короткий синтаксис for, быстрая конверсия строки в число и округление и другие приёмы в статье.
Media is too big
VIEW IN TELEGRAM
JS | Three.js - честное 3D в браузере

Работа с WebGL, и с шейдерами в частности, — это трудоемкий процесс. Необходимо описать каждую точку, линию, грань и так далее. Чтобы все это визуализировать, необходимо прописать объемный кусок кода. Для повышения скорости разработки, была разработана библиотека Three.js.
👍1
CSS | Хитрости CSS-переменных

Кастомные свойства в css постепенно становятся всё популярнее, в статье рассказывается как сделать подобие тернарного оператора из css-переменных, переопределять их значения и как можно использовать пустые переменные. свойства в css постепенно становятся всё популярнее, в статье рассказывается как сделать подобие тернарного оператора из css-переменных, переопределять их значения и как можно использовать пустые переменные.
Select2 - универсальный плагин, подходит для полного контроля над селектом.
Плюсы:
- встроенный поиск;
- полный программный контроль, методы и события для всех действий;
- динамическая подгрузка списка.
Минусы:
- выпадающий список появляется не в блоке с select, а добавляется в конец body и позиционируется абсолютом, может привести к проблемам при использовании в модальных окнах или в анимациях;

Selectric - младший брат Select2, возможности поскромнее, но его полностью хватает для базовых задач.
Плюсы:
- простой в использовании;
- полный программный контроль, методы и события для всех действий;
- есть несколько готовых тем оформления.
Минусы:
- ограниченный функционал

Можно написать подобный плагин и своими руками.
Плюсы:
- Селект будет делать именно то что вы сказали и выглядеть так как вам нужно;
Минусы:
- Сложно проверить и протестировать на всех платформах и устройствах;
- Могут возникнуть проблемы при дальнейшем развитии проекта.
This media is not supported in your browser
VIEW IN TELEGRAM
Что спрашивают на собеседованиях у Frontend-разработчиков

Даже такая мелочь, как знание даты последнего обновления вашего языка, поставит под вопрос вашу карьеру в IT-гигантах.

Так выявляют людей, кто живёт темой кодинга и интересуется трендами.

Для тех, кто ищет работу во фронтенде, создан канал @frontendinterview. Его ведут тимлиды. Там они рассказывают, какие технические моменты JS, HTML и CSS необходимо знать, чтобы получить место с высоким окладом.

@frontendinterview обязателен к подписке, если находитесь в поиске работы или зарплаты побольше
PHP | SplFileInfo

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

Это бывает очень удобно, если ваше приложение как-либо работает с файлами, например генерирует PDF-документы и выводит информацию о них.
This media is not supported in your browser
VIEW IN TELEGRAM
Слайдеры и карусели

Из целого моря различных слайдеров и каруселей можно выделить два плагина с похожим функционалом, оба слайдера имеют массу настроек, комбинируя которые можно добиться практически любых результатов. Удобное программное управление, методы и события на все действия. Адаптивная смена опций в зависимости от разрешения экрана.

Slick Slider
Плюсы
- не требует особой разметки для слайдов, всё что находится в целевом элементе станет слайдами
- может показывать слайды группой в несколько рядов
Минусы
- Последнее обновление было 2 года назад

Splide
Плюсы
- содержит несколько тем оформления
- есть компоненты для Vue и React
Минусы
- относительно молодой проект, могут проявится неожиданные баги
PHP | HTMPurifier

HTMLPurifier - это PHP-библиотека для очистки HTML.

Позволяет очистить HTML от подозрительного и невалидного кода.

Также позволяет удалять теги на основе белого списка.
Ищешь годный материал по front end разработке?

FrontEndDev - канал для продвинутых веб-разработчиков.

На канале найдешь свежие статьи, фишки JS и TS, туториалы по современным фреймворкам, лучшие практики разработки и многое другое.

Рекомендуем подписаться - @front_end_dev
Какая фигура появится на странице?
Anonymous Quiz
69%
Круг
16%
Овал
4%
Прямоугольник
11%
Никакая