​​🔥🔥Toп 8 Расширений VSCode.

1. JavaScript (ES6) Code Snippets - предоставляет сниппеты кода JS, TS, Vue, React и HTML.

2. Live Server - обеспечивает просмотр вашего веб-приложения в реальном времени прямо в редакторе.

3. Prettier - Code formatter - выполняет форматирование кода JS, CSS и HTML.

4. Better Comments - создаёт более понятные и удобные для чтения комментарии.

5. Bracket Pair Colorizer - Это расширение позволяет идентифицировать совпадающие скобки по цвету.

6. Path Intellisense - Это расширение ускоряет разработку за счет автозаполнения имен файлов при импорте.

7. Debugger for Chrome - Это расширение добавляет дебаггер прямо в IDE.

8. Git Lens - это плагин VSC, расширяющий возможности git.

​​Как я организую свои скрипты NPM.

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

[ Статья ]

​​Личный опыт: как нетехнарю стать фронтом

Это может быть страшно — сменить сферу деятельности и из нетехнаря превратиться в ИТ- специалиста. Однако вокруг нас всё больше примеров таких успешных трансформаций. В том числе — истории нескольких выпускников HTML Academy, которые не только получили новые знания, но и смогли найти работу для их применения на практике.

[ Статья ]

​​В JS-функциях «побеждает» последний оператор return

Вот — JavaScript-функция. Какой из операторов return, имеющихся в ней, «победит» при вызове этой функции?

function test() {
  return 'one';
  return 'two';
  return 'three';
}

С первого взгляда очевидный вопрос вставсляет в ступор на собеседованиях.
Статья

Советы по стилю кода для фронтендеров.
Статья

​​Проверка наличия свойства в объекте JS

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

Чтобы узнать, определен ли в объекте некоторый ключ, нужно использовать оператор in.

const person = { name: 'John Doe', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

Он возвращает true или false, в зависимости от того, удалось ли найти требуемое поле.

​​Вместо background лучше использовать background-color , если требуется поменять только цвет фона. В целом разницы никакой но на code review могут придираться

🔴 Не так
.example {
background: tomato;
}

✅ Вот так
.example {
background-color: tomato;
}

​​Психи на работе

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

Статья

​​Включить вибрацию на смартфоне

Метод vibrate() объекта window.navigator может включить режим вибрации на устройстве (при условии что устройство поддерживает режим вибрации).

window.navigator.vibrate(500);

Методу можно передать параметр – время вибрации в миллисекундах. А можно указать даже паттерн – чередование интервалов вибрации и пауз. Для этого передайте методу массив чисел.

​​#вакансия

Друзья, я изредка делюсь с вами отличными вакансиями. Мои друзья из iZi IT (аутстаффинг и аутсорсинг ИТ-услуг для HoReCa и др индустрий) ищут себе человека в команду. Максимально рекомендую и прошу зашарить по чатам/знакомым, если вакансия вам не подходит.

Python разработчик в Центр компетенций НТИ по большим данным на базе МГУ имени М. В. Ломоносова.

Обязанности: 
— Разрабатывать чат-ботов для Telegram, Мессенджера, WhatsApp, сайтов и тд
— Упаковывать веб-решения
— Сопровождать техническую при ведении крупных заказчиков в сфере ИТ

Требования: 
— Опыт работы/свои проекты (нужно будет предоставить ваши работы - код или ссылки)
— Опыт разработки серверных приложений на веб-фреймворках Python (Flask, Django, Falcon и др.) - желательно, но если нет - научим
— Опыт тестирования (юнит-тесты, интеграционное) и работа с любым WEB Framework-ом (желательно)

Условия:
— Удаленно
— З/П обсуждаемо

Отклик: @richbergen

​​6 полезных инструментов для фронта с уклоном в CSS

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

Meanderer - Маленькая библиотека JavaScript для создания отзывчивых траекторий анимации.

Transition.css - Переходы на CSS.

CSS Scan - Hаведите курсор на любой элемент и мгновенно получите его CSS, цвета, ресурсы, анимацию, шрифт и размеры.

Parsel - Парсер CSS-селекторов в два килобайта.

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

​​Свойство CSS - inset или как сделать короче запись с position: absolute

По сути inset позволяет в некоторых случаях сократить запись position: absolute

Пример:
div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

div {
position: absolute;
inset: 0;
}

Подробнее о свойстве inset

Motion Designer

Mail.ru / My.Games ищет Motion Designer (Моушен-дизайнера) / 2D

Обязанности:
- Создание рекламных видео роликов 30 секунд для медиа площадок (Facebook / Instagram / YouTube и прочие)
- Анимирование персонажей и объектов в 2D (навыки в 3D приветствуются)
- Создание спецэффектов и моушен графики
- Генерация идей для видео креативов с последующей реализацией

Требования:
- Опыт работы в Adobe After Effects, Photoshop
- Анимация и риггинг Duik / Spine / Dragon Bones
- Уверенные навыки монтажа видео
- Навыки работы со звуком
- Желание развиваться в сфере производства видео креативов
- Креативное мышление и нацеленность на результат

Условия:
- ГПХ
- Возможность профессионального развития

Контакты:
- телеграм: @Slevin_Tur
- почта: s.turchanovsky@corp.mail.ru

​​Проверка наличия свойства в объекте JS

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

Чтобы узнать, определен ли в объекте некоторый ключ, нужно использовать оператор in.

const person = { name: 'John Doe', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

Он возвращает true или false, в зависимости от того, удалось ли найти требуемое поле.