☀️ Всем доброго осеннего утра!

В нашем недавнем опросе рубрика #WebDev уверенно одержала победу. Поэтому с нее и начнем.

С проблемой появления лишних отступов под инлайновыми элементами я сталкиваюсь довольно часто. Частично она раскрыта в статье Ильи Кантора "Лишнее место под IMG".

Однако, мне нашлось что исправить, и что дополнить. Так что усаживайтесь поудобнее. Поеехали))

🐾 Привет веселым дизайнерам, таинственным разработчикам и шоколадным печенькам 🍪

Как оказалось, последних на нашем канале больше всего. А это значит, что наш с вами CodeMonkey претендует на звание самого сладкого канала в Telegram 😏

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

На нашем канале уже показали себя все 4 рубрики: #WebDev, #МыслеМюсли, #ДвоичнаяПесочница и #НаЗаметку. Очень хочется услышать ваше мнение: что вам понравилось, а что нет. Может быть, какую-то из этих рубрик вы бы хотели видеть чаще, а какую-то вообще считаете лишней.

Расскажите об этом в комментариях. С нетерпением жду ваши отзывы🔻

Сделаем CodeMonkey лучше!

🖇 Логирование в стрелочных функциях

▪️ Стрелочные функции

Как мы помним, в ES6 появился новый вид функций - стрелочные функции. Стрелочные функции сразу завоевали популярность среди разработчиков, и не зря.

Во-первых, они имеют короткий и понятный синтаксис.
Во-вторых, они имеют лексическую привязку к значению this.

Будем честны, это довольно удобно:

 calcSum = (a, b) => a + b

Но, как говорится, функции функциями, а логирование по расписанию. Ведь все мы с вами любим разводить ошибки, чтобы потом их устранять. А как можно представить себе дебаг без console.log (кхе-кхе)?


▪️Как же быть с логированием в стрелочных функциях?

Встал вопрос, как же быть с логированием в стрелочных функциях?

▫️ Первое, что приходит в голову, это переписать функцию в таком виде:

 calcSum = (a, b) => {
   console.log(a, b);
   return a + b;
}

▫️Если немного подумать, можно прийти ко второму варианту. Он красивее, но все еще не идеал:

 calcSum = (a, b) => (console.log(a, b), (a + b));

Оператор запятая слева направо выполняет каждый из его операндов, а затем возвращает значение последнего операнда.

▫️Третий вариант, как по мне, самый удобный:

 calcSum = (a, b) => console.log(a, b) || (a + b);

Оператор || (ИЛИ) вычисляет операнды слева направо до первого true, а затем возвращает его. Причём, не преобразованное к логическому типу.

console.log слева возвратит undefined, что приведет к выполнению правой части и возврату значения из правой части.


▪️Послесловие

Идею поста я черпал из статьи Александра Майорова "Логируем в стрелках". Там, помимо логирования в стрелочных функциях, рассказывается про логирование в map. Будет полезно прочитать для расширения кругозора

#WebDev

🛴 Иконочные шрифты

Ребята, привет!
Прошу прощения за отсутствие. Готовлю для вас обширную статью про культуру кода. Надеюсь, на этой неделе уже опубликую.

▫️ ▫️ ▫️

А сейчас давайте поговорим про иконочные шрифты.

У многих разработчиков это словосочетание вызывает недоумение. Как это так: и иконочный, и шрифт? Меня часто спрашивают об этом, поэтому я решил подготовить для вас маленькую статью.

План:
1. Что такое иконочный шрифт.
2. Плюсы и минусы.
3. Использование и актуальность.

Вперед!

#WebDev

📐 Фиксируем ширину картинки в блоке

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

Звучит она так:
Картинка вылазит за границы блока, которому задана фиксированная ширина

Поехали 🐌

#WebDev

⚙️ Браузерный движок

Друзья, привет!

Слушал сегодня новый выпуск подкаста "Веб-стандарты". В нем помимо прочего ребята обсуждали переход Microsoft Edge на движок Blink.

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

Давайте разбираться!

▫️ ▫️ ▫️

📋 План:
1. Что такое браузерный движок.
2. Браузер != браузерный движок.
3. Основные браузерные движки.
4. Полезные материалы.

⏱ Время чтения: 3 минуты

📚Рубрика: #WebDev

🌌 Множественные фоновые изображения в одном свойстве

Ребята, а вы знаете, что в свойство background-image можно записывать несколько фоновых изображений?

Пример:

background-image: url('/images/rabbit.png'), url('/images/kitty.png')

▫️ ▫️ ▫️

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

Пример:

background-position: left top, rigth bottom;
. . .
background-repeat: , repeat-y;

❗️В последнем свойстве значение для первого зображения пропущено, а значит применится значение по умолчанию.

#WebDev

📱 Mobile First

Друзья, всем привет!

Совсем недавно мы проводили опрос на тему Mobile First. Результаты показали, что больше половины проголосовавших не знают, что это такое. Но не беда!

Я подготовил для вас лонгрид, в котором просто и понятно обьяснил, что это такое, и для чего это нужно.
▫️ ▫️ ▫️

📋 План:
1. Определение понятия Mobile First.
2. Немного истории. Актуальность.
3. Плюсы этого подхода.
4. Текущее положение дел.
5. Заключение.

⏱ Время чтения: 8 минут

📚Рубрика: #WebDev

❗️Ребята, не забывайте ставить пальцы вверх, если вам понравился этот лонгрид