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

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
CSS | Реализация карточек каталога с адаптивной высотой

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

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

В примере используется кастомная сетка, но его легко передать на сетку bootstrap или tailwind.
Именованные аргументы функций в PHP 8

Одной из новинок в PHP 8 будет возможность передавать аргументы в функции по именам.

Это позволяет передавать аргументы в функцию по имени в произвольном порядке, что будет особенно полезно, если функция принимает несколько не обязательных аргументов.
This media is not supported in your browser
VIEW IN TELEGRAM
CSS | Интерактивные карточки каталога

При вёрстке каталогов, списков статей и подобных типов сетки можно потратить немного больше времени и создать интересные анимации.
Что выведется в консоли?
Anonymous Quiz
57%
[10]
16%
10
23%
undefined
4%
null
Строки и кавычки в PHP

Строки в PHP нужно обрамлять одинарными или двойными кавычками. Но не все знают в чем разница.

Двойные кавычки позволяют вставлять переменные и специальные символы, а одинарные - нет.

Вставка переменных в строку называется интерполяцией.
This media is not supported in your browser
VIEW IN TELEGRAM
JS | Справочник по операторам

Джош Комо создал отличный сайт под названием Operator Lookup, который объясняет, как работают операторы JavaScript. Есть несколько примеров кода, объясняющих, что они делают, добавлены ссылки на MDN с подробным описанием работы оператора.

Сохраняйте в закладки, освежайте знания.
Как правильно задавать вопросы, или «Проблема XY»

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

Если описывать простыми словами, проблема XY – это когда мы начинаем чинить/помогать не там, где поломалось, заходим не с того конца. Это приводит к потере времени и энергии, как со стороны людей, обращающихся за помощью, так и со стороны тех, кто оказывает помощь.

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

О том как избежать этой проблемы, читайте в статье.
Что будет выведено?
Anonymous Quiz
18%
A, A
24%
A, B
39%
B, A
19%
B, B
JS | Как получить информацию из профиля инстаграм

Вывод на сайте фотографий из профиля инстаграм можно сделать своими руками, небольшой скрипт и немного стилей помогут вам с этой задачей, для получения информации используется axios.
CSS | Геометрические фигуры, наглядно

Для отображения мелких деталей интерфейсов - стрелок или маркеров не обязательно отрисовывать noscript-иконки, всё это можно реализовать на чистом css, существует множество фигур, которые можно сделать с помощью стилей, от самых простых многоугольников, до комплексных иконок.

В статье рассмотрены не самые очевидные пути использования самых обычных css-свойств.
This media is not supported in your browser
VIEW IN TELEGRAM
JS | Оформляем ввод данных банковских карт

CardInfo.js позволяет по номеру карты получить логотип банка и типа, фирменные цвета и прочие данные. Можно использовать эти данные для создания форм приёма банковских карт.
Даже опытные разработчики на php часто не знают разницы между composer install и composer update.

composer install устанавливает пакеты в точном соответствии с версиями из файла composer.lock.

composer update обновляет пакеты согласно версиям из файла composer.json.

Таким образом, composer install гарантирует, что у всех участников проекта будут установлены одинаковые версии зависимостей.
This media is not supported in your browser
VIEW IN TELEGRAM
Vue.js | Делаем свой слайдер

Для начинающих или интересующихся Vue.js - пример реализации простого слайдера, стрелки, пагинация, свайп, бесконечная прокрутка.

Пример показывает работу с событиями, вычисляемыми свойствами и методами, подойдет для основы вашего собственного слайдера или для сайта где от слайдера ничего особенного не требуется.
Как сделать версионирование баз данных удобным и понятным всем участникам процесса разработки? Научитесь управлять миграциями БД на экспресс-курсе OTUS.

19 декабря вместе с Юрием Дворжецким, ведущим разработчиком, за 8 часов вы пройдете теорию и практику, после которых сможете:
— Использовать инструменты Flyway или Liquibase
— Быстро создавать любое окружение с точки зрения базы данных
— Применять практику DBVC к уже существующей базе.

Успейте оставить заявку, пока действует спец.цена.

Количество мест ограничено https://otus.pw/Pkex/
Функциональное программирование в PHP

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

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