Frontender Libs - обзор библиотек JS / CSS – Telegram
Frontender Libs - обзор библиотек JS / CSS
8.1K subscribers
2.04K photos
735 videos
4 files
247 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
JS | WTFJS

JavaScript - отличный язык. У него простой синтаксис, большая экосистема и, что самое главное, отличное сообщество.

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

Основная цель этого списка - собрать несколько безумных примеров и, если возможно, объяснить, как они работают. Если вы новичок, вы можете использовать эти заметки, чтобы глубже погрузиться в JavaScript. Если вы профессиональный разработчик, вы можете рассматривать эти примеры как отличный справочник по всем причудам и неожиданным граням JavaScript.
CSS | Как правильно размещать изображения во flex

Из-за особенностей расчета размеров потомков флекс-элементов заменяемые блоки (изображения например) могут сильно искажаться. В статье показано как правильно стилизовать такие блоки, показаны несколько проблем неправильного размещения изображений во флекс-сетке и рассказано как их решить.
Tabnine - Расширение VS Code для интеллектуального автодополнения

Tabnine - это мощный помощник с искусственным интеллектом, предназначенный для ускорения кодинга, уменьшения количества ошибок и не покидая комфорта VS Code. Tabnine изучает общедоступный код и использует алгоритмы глубокого обучения AI, которые дают возможность спрогнозировать ваши следующие потребности в коде и предложить завершение кода.

Tabnine работает со всеми основными языками программирования, включая JavaScript, Python, TypeScript, PHP, C/C++, HTML/CSS, Go, Java, Ruby, C#, Rust, SQL, Bash, Kotlin, Julia, Lua, OCaml, Perl, Haskell, и React
PHP | Вызов методов родительского класса и подключенного трейта

В переопределенном методе иногда бывает нужно вызвать этот же метод из родительского класса. Для этого используется вызов через parent.

В случае с трейтами, просто так вызвать метод с тем же именем не получится. Для этого нужно импортировать метод под другим именем при подключении трейта.
Что выведется в консоли?
Anonymous Quiz
26%
1,2,3,4,5
35%
[1,2,3,4,5]
9%
[1]
30%
1
JS | Сервис по поиску регулярного выражения

Решение проблем с помощью регулярных выражений может добавить еще проблем, этот сервис предоставляет удобный способ поиска подходящего регулярного выражения по ключевым словам, обширная база регулярок позволит найти именно то что нужно.
PHP | PHP CodeSniffer

PHP CodeSniffer - это консольный инструмент для проверки вашего кода на соответствие стандартам оформления кода PSR.

Позволяет как искать проблемы в коде, так и автоматически исправлять их.

Для PHPStorm, VSCode и других популярных редакторов кода есть плагины для интеграции с phpcs.
CSS | Погружение в clip-path

В статье тщательно разобраны все свой свойства clip-path:
- Система координат
- Принимаемые значения
- Обрезка кругом, многоугольником, кривой

Варианты его использования:
- Скошенные углы
- Эффекты наведения и появления
Что выведется в консоли?
Anonymous Quiz
63%
object
12%
undefined
25%
function
Завтра онлайн интенсив "Я веб-разработчик"

На интенсиве вы шаг за шагом создадите свой сайт - с нуля до публикации в интернете.

Профессиональный разработчик обучит вас основам HTML, CSS, SQL, PHP

Как это будет?

📌 1 час теории
📌 5 часов интенсивной практики
📌 7 заданий для отработки навыков
👨‍🏫 Преподаватель с 15-летним опытом

Интенсив бесплатный
Регистрироваться надо сегодня 👇
PHP | Генерация PDF из html

dompdf - библиотека для генерации PDF из любого валидного HTML.

По сути, dompdf - это HTML движок написанный на PHP. Поддерживает CSS 2.1 и, частично, CSS 3.

Для работы с библиотекой достаточно установить ее в ваш проект через composer.
JS | Паттерн "Декоратор"

Декоратор — это средство, которое позволяет обернуть одну функцию другой и расширить ее возможности. Вы «декорируете» существующий код, обернув его другим кодом. Этот прием известен всем, кто знаком с композицией функций или функциями высшего порядка.

Статья рассказывает зачем нужны и как реализовать декораторы функций, классов, свойств класса и поля класса
GRASP паттерны проектирования

GRASP (General Responsibility Assignment Software Patterns) — шаблоны проектирования, используемые для решения общих задач по назначению обязанностей классам и объектам.

Известно девять GRAPS шаблонов. Эти паттерны не имеют выраженной структуры, четкой области применения и конкретной решаемой проблемы, а лишь представляют собой обобщенные подходы/рекомендации/принципы, используемые при проектировании дизайна системы.

Шаблоны включают в себя:
- Information Expert (Информационные эксперт) ;
- Creator (Создатель) ;
- Controller (Контроллер) ;
- Low Coupling (Слабая связанность) ;
- High Cohesion (Высокая сцепленность) ;
- Pure Fabrication (Чистая выдумка или чистое синтезирование) ;
- Indirection (Посредник) ;
- Protected Variations (Сокрытие реализации или защищенные изменения) ;
- Polymorphism (Полиморфизм).

Статья живым языком с примерами подробно рассказывает о всех этих шаблонах.
Сколько ссылок из списка откроют страницу в новой вкладке?
Anonymous Quiz
65%
1
25%
2
10%
3
Какой из стандартов PSR описывает HTTP запросы и ответы?
Anonymous Quiz
26%
PSR3
32%
PSR7
21%
PSR2
21%
PSR4
Шаблоны проектирования "банды четырёх (GoF)"

Порождающие паттерны — это паттерны, которые абстрагируют процесс порождения классов и объектов.

Структурные паттерны - рассматривает, как классы и объекты образуют более крупные структуры - более сложные по характеру классы и объекты.

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

В статье собраны описания работы всех этих паттернов с примерами реализации.
JS | Отслеживание высоты экрана на iOS

Сделать блок на высотой на весь экран довольно просто,

height: 100vh

Но это не работает для браузера Safari на iOS, его адресная строка сверху и панель кнопок снизу не учитываются при расчете высоты экрана и блок высотой 100vh окажется под кнопками, для решения этой проблемы поможет небольшой скрипт получающий высоту экрана и записывающий её в css переменную.
Улучшение производительности сайта, Perceived Performance

Субъективное восприятие скорости работы сайта и его реальная скорость могут не совпадать, статья рассказывает о приёмах увеличивающих производительность, использование скелетонов, Optimistic Updates и другие технические и психологические средства увеличения производительности.