❄️ Привет, друзья!

А у нас снежно. Хочется нарядиться в дождик, набрать мандаринов и сидеть под ёлкой в ожидании Нового года.

А как настроение у вас?

Кто ты сегодня:
- 👨‍💻 Таинственный разработчик
- 👨‍🎨 Весёлый дизайнер
- 🍪 Шоколадная печенька

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

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

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

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

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

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

📌 Новая рубрика #Поревъюим

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

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

Поэтому я решил создать подрубрику #Поревъюим, в которой мы с вами будем рассматривать распространенные ошибки и искать способы их решениями.

Первый пост из этой рубрики - уже вечером, а пока что давайте покажем нашу активность!

#Поревъюим

Верстка, которую мы знаем сейчас, очень сильно отличается от верстки 4/5-летней давности.

❓Что стало тому причиной?
▫️Первой и главной причиной таких метаморфоз стал выход 5 версии Html. Он принес нам понятие семантики. Семантика была призвана искоренить понятия тегошлёпства и divелоперства, и на ментальном уровне изменить подход к разработке.

▫️Второй причиной стало интенсивное развитие сложности сайтов. Еще пару-тройку лет назад сайт представлял собой набор из двух-трех статических страничек, сейчас же это набор десятка страниц, до отказа накачанных анимацией. Стоит ли упоминать о том, что в последнее время все больше разработчиков отдают свое предпочтение SPA и PWA.

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

❗️Итог
Вышеуказанные перемены повлекли за собой изменение главной парадигмы фронтенд-разработки. И если раньше перед разработчиком стояла задача "Сделать что-то", то сейчас она формулируется как "Сделать что-то правильно".

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

P.S.: На эти понятия я не раз буду ссылаться во время разбора ошибок, поэтому нужно немного потерпеть. Однако первый ревью-баттл совсем скоро! Оставайтесь с Code Monkey и не переключайтесь 😉

👆 Согласны с предыдущим постом?

#НаЗаметку

Отличная статья о том, как правильно составлять текст о себе 👍🏻

Автор - основатель сервиса для проверки "Главред", соавтор замечательной книги "Пиши. Сокращай", - Максим Ильяхов.

Ссылка

Команда разработчиков берется за новый проект

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

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

Как мы помним, в 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

​​👨🏼‍💻 О рабочем процессе в коллективе

Ребята, недавно встретил эту картинку на просторах интернета. И, на самом деле, было бы смешно, если бы не было так грустно.

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

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

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

Все печенек и какао ☕️

#МыслеМюсли

​​Svgomg - отличный сервис для оптимизации svg-изображений.

Гибкая настройка оптимизации, возможность просмотреть готовый код - незаменимая вещь для фронтенд-разработчика.

#НаЗаметку

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

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

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

Поехали 🐌

#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

⬆️ А ты знал об этом?
public poll

🥺 А что, так можно было?? – 53
👍👍👍👍👍👍👍 44%

🤓 Знал! Даже пару раз использовал) – 38
👍👍👍👍👍 32%

🧐 Слышал про такое. Но на практике не применял :| – 29
👍👍👍👍 24%

👥 120 people voted so far.

Предновогодней депрессии пост

Htmlreference.io - сайт с перечнем всех актуальных html-тегов.

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

Полезная вещь для тех, кому нужно найти полную и актуальную информацию о каком-нибудь html-теге.

#НаЗаметку

☃️ Ребята, привет!

Хочу поздравить вас с наступающим Новым годом ❄️

Пусть 2019 год принесет вам море любви, радости и фич без рефакторинга.

Желаю, чтобы в новом году вам удалось реализовать поставленные цели и достигнуть желаемых высот.

Будьте здоровыми и счастливыми!

С новым 2019 годом 🍾

📱 Mobile First

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

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

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

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

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

📚Рубрика: #WebDev

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