Javascript

Как Frontend разработчику найти свою первую работу? 👀 Я Андрей Шопинский — Frontend-разработчик из крупной Российской IT-компании. ⚠️ 15 марта в 18:30 по МСК я проведу бесплатный эфир в своём Telegram-канале про Frontend-разработку! На трансляции будут раскрыты следующие темы: — Как правильно оформить резюме; — Как найти высокооплачиваемую работу; — Какие вопросы задают разработчики и HR; — Как правильно выбрать оффер. 🔥На трансляции будет специальный гость - HR-менеджер из крупной Российской компании!🔥 ✅ Ты сможешь задать свои вопросы в прямом ЭФИРЕ! Подписывайся на канал, чтобы не пропустить! Реклама. ИП Малев С.И. ИНН: 667101819072. erid: 2Vtzqux4TjJ

⚡️ Создание анимированной боковой панели с помощью HTML, CSS и JavaScript Github @javascriptv

SCSS Washing machine Стиральная машинка на HTML и SCSS. https://codepen.io/Arkellys/pen/YoYNve

Платные курсы больше не нужны Вот каналы, чтобы освоить Frontend разработку с нуля 👇 📌 Senior Frontend - JS, HTML и CSS 📌 Frontend Interview - как проходить собеседования 📌 Frontender Libs - библиотеки для фронтендеров 📌 Web Craft - только Web-разработка С таким набором легко зайдешь в IT💪

🖥 JavaScript однопоточный или многопоточный? Ставим точку Полезная статья для лучшего понимания JavaScript. В ней описывается: — внутреннее устройство host-среды — расширяемость и встраиваемость — асинхронность — инструменты организации многопоточности — и ещё много всего 📎 Статья 📎 Вот ещё годное видео в тему, доказательство мультипоточности JS @javascriptv

Лучшие практики React-разработки собраны на бесплатном вебинаре Optimizing React: Web & Beyond! 13 марта команда разработчиков Social Discovery Group на примере реальных кейсов расскажут про: Как оптимизировать React-приложения и снизить нагрузку на устройства; Как основные «фичи» React нашли себе применение в монтаже видео, 3D графике и написании ботов; Как не сломать мемоизацию в React. 📅 Дата: 13 марта, 19:00 (GMT+4) 🔉 Язык: русский Регистрируйтесь на вебинар 👉🏻 здесь 👈🏻

🖥 Truthy и Falsy в JavaScript В JavaScript, truthy – это всё, что в логическом контексте считается истиной. Если что-то не является явно ложным (например, 0 или пустая строка ""), то это truthy. Это решает проблему непредсказуемости в условных конструкциях и логических операциях. Вместо того, чтобы каждый раз явно проверять каждое возможное значение на истинность или ложность, можно полагаться на общие правила. Это делает код более читаемым и лаконичным. ▶️Допустим, вы пишете веб-приложение на JavaScript, и хотите проверить, заполнил ли пользователь поле с именем, прежде чем отправить форму. Вот где в игру вступают понятия truthy и falsy. В JavaScript, если строка не пустая, она считается truthy, а пустая строка — это falsy. Это значит, что вы можете использовать простую проверку, чтобы узнать, заполнено ли поле:

let userName = form.userName.value; // значение, введённое пользователем

if (userName) {
  // Если userName truthy 
  console.log("Спасибо за заполнение имени, " + userName + "!");
} else {
  // Если userName falsy 
  console.log("Пожалуйста, заполните поле с именем.");
}

Этот пример показывает, как использование понятий truthy и falsy может сделать ваш код более кратким и читаемым. Вместо того чтобы писать сложные условия для проверки, не является ли строка пустой, не равна ли она null или undefined, вы можете просто проверить, truthy ли значение переменной. Примеры falsy значений включают: 🟡0 и -0 🟡"" (пустая строка) 🟡null 🟡undefined 🟡NaN Всё остальное в JavaScript считается truthy, включая: 🟡"0" (строка, содержащая символ нуля) 🟡"false" (строка, содержащая текст false) 🟡Пустые объекты {} и массивы [] @javascriptv

Бесплатный практический вебинар для всех возрастов: Профессия «Frontend-разработчик». ⏰ Когда: уже 14 марта в 19:00 по мск. Вы узнаете о типичных рабочих задачах программиста и напишете мини-игру, которая работает прямо в браузере. Под капотом немного HTML+CSS и базовые конструкции JS. Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? 🎁 Всем, кто зарегистрировался — Карта компетенций начинающего Frontend-разработчика, а каждому участнику — Гайд «Как заговорить на сленге IT-специалистов».

🖥 Подборка из интересных 20 мини-проектов на чистом Javascript Никаких фреймворков или библиотек, только JS, HTML5 и CSS Среди проектов: *️⃣форма для заполнения *️⃣бронирование мест в кинотеатре *️⃣видеоплеер *️⃣карточки мемори *️⃣конвертер между валютами *️⃣счётчик до НГ Самое то, чтобы прокачать понимание JS, отточить работу с событиями, потренировать разные техники Just JS it 🔥 @javascriptv

VK — не только соцсеть, но еще и крутое IT-комьюнити. Сейчас они строят суперапп Почты Mail.ru и ищут коллегу, готового улучшать пользовательский опыт. В команде VK вы будете: — работать над умной организацией рассылок; — решать проблемы нежелательной почты; — создавать способы для отслеживания онлайн-заказов; — поддерживать платежные системы и ещё много всего. Ты тоже можешь стать частью команды VK и развивать технологичную, современную и безопасную среду. Оффер ждет тебя тут > https://vk.cc/cveMSm

🖥 Boa — экспериментальный лексер, парсер и компилятор Javascript Тут на днях года состоялся релиз Boa v0.18 — экспериментального лексера, парсера и компилятора Javascript, а также движка ECMAScript, написанного на языке программирования Rust. 🔥 Новая версия Boa позволяет легко встраивать JS-движок в различные проекты, и а также использовать его из WebAssembly и командной строки. Разработчики пояснили, что этот выпуск Boa также знаменует собой серьёзное обновление дизайна сайта проекта и появление нового логотипа. «Поскольку Boa используется все большим количеством проектов, важно, чтобы мы могли предоставить стабильный и надёжный API. Нам кажется, что мы ещё не достигли этого результата, но после обсуждения с командой мы решили нацелиться на выпуск версии 1.0 в ближайшем будущем. Это станет для нас важной вехой, и мы надеемся, что к тому времени у нас будет много новых функций и улучшений», — пояснили разработчики проекта. Впервые проект Boa был представлен на конференции JSConf EU 2019 разработчиком Джейсоном Уильямсом. 🖥Исходный код проекта выложен на GitHub под лицензией MIT 4.6К⭐️ @react_tg

Собеседование на позицию Senior JavaScript Developer. @javascriptv

🖥 Релиз TypeScript 5.4 Приятные новости 🌟 Состоялся релиз TypeScript 5.4. В новой версии языка программирования, построенного на основе JavaScript и позволяющего объявлять и описывать типы, в Microsoft поработали над производительностью языка, добавили новые возможности автодополнения кода для редакторов и упростили способы переподключения библиотек. Типы также используются в инструментах редактора TypeScript, таких как автодополнение, навигация по коду и рефакторинг, которые доступны в Visual Studio и VS Code. Проект доступен через NuGet или npm (npm install -D typescript). В TypeScript 5.4 появился новый тип утилиты NoInfer, добавлена поддержка вызовов require() в пакете --moduleResolution и --module save, быстрое исправление при добавлении отсутствующих параметров, поддержка автоматического импорта для подпутей, исправлены ранее обнаруженные ошибки. С выходом TypeScript 5.4 Microsoft продолжает работу над TypeScript 5.5. Согласно дорожной карте, бета-версия этого проекта должна выйти 16 апреля, релиз-кандидат — 4 июня, а финальный релиз — 18 июня. Что ж, ждём) Также стало возможно запускать тестовые ночные сборки TypeScript 5.4 Nightlies через npm, которые выпускаются каждый день в полночь (npm install -D typescript@next) для VS Code, Visual Studio, Sublime Text и IntelliJ. @javascriptv

🖥 Обработка нажатия Caps Lock в JavaScript Мне одному кажется, что Caps Lock — самая бесполезная клавиша? Вдобавок можно нажать её в самый неподходящий момент, скажем, при вводе пароля и не заметить. В идеале при написании JS добавить блок предупреждения пользователя о нажатии Caps Lock. Чтобы отслеживать, включен ли Caps Lock, мы используем метод getModifierState:

document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (capsLockOn) {
        // предупредить о нажатии Caps Lock?
    }
});

Для подробного ознакомления с getModifierState давайте заглянем в доки W3C :

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

Как видим, getModifierState позволяет получить множество сведений о клавиатуре пользователя во время событий, ориентированных на нажатие клавиш. Полезная штука, используйте) @javascriptv

🖥 Пианино на JavaScript для Chrome Проект состоит из 3 файлов: HTML-страницы, CSS-стилей и JS-скрипта. *️⃣HTML-страница отвечает за «мясо» проекта: надписи, заголовки, подключение звуков и сборку всего проекта в одной точке. Но страница сама по себе ничего не сумеет: мы просто разместим на ней нужные блоки, а вся анимация и поведение задаются в двух других файлах. *️⃣CSS-стили решают две задачи: оформляют страницу и рисуют интерфейс. Плавная анимация нажатия и появления подсказок прописываются именно здесь. *️⃣JS-скрипт занимается всей работой пианино: отслеживает нажатия на клавиши, чтобы включить звук и показать нужный эффект на экране. По-моему, неплохой способ прокачать свой скиллы веб-разработки ⏩ Подробное пошаговое описание, что делать @javascriptv

🖥 Brainwave Проект, с которым вы научитесь создавать современные веб-сайты с эффектом параллакса и макетами в виде коробочек-бенто. Этот курс охватывает все: от стильного дизайна пользовательского интерфейса до принципов mobile-first, укрепляя ваши навыки работы с React.js и Tailwind CSS. ▪Github ▪Обучающее видео @javascriptv

🖥 Пианино на JavaScript для Chrome Проект состоит из 3 файлов: HTML-страницы, CSS-стилей и JS-скрипта. *️⃣HTML-страница отвечает за «мясо» проекта: надписи, заголовки, подключение звуков и сборку всего проекта в одной точке. Но страница сама по себе ничего не сумеет: мы просто разместим на ней нужные блоки, а вся анимация и поведение задаются в двух других файлах. *️⃣CSS-стили решают две задачи: оформляют страницу и рисуют интерфейс. Плавная анимация нажатия и появления подсказок прописываются именно здесь. *️⃣JS-скрипт занимается всей работой пианино: отслеживает нажатия на клавиши, чтобы включить звук и показать нужный эффект на экране. По-моему, неплохой способ прокачать свой скиллы веб-разработки ⏩ Подробное пошаговое описание, что делать @javascriptv

🖥 Интересный codepen-проект Интересная идея; можно сделать что-то похожее — и будет, что показать на собесе. Solar system — анимация описания планет солнечной системы. Проект реализован с помощью CSS и JavaScript. 🔜 Код на Codepen @javascriptv

🔥Тест по JavaScript от OTUS🔥 Хотите изучить JavaScript на продвинутом уровне? Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе «JavaScript Developer. Professional» 🔗 Ссылка для прохождения теста: https://otus.pw/lOAQ/?erid=LjN8KFVwU 📅 После прохождения теста вы сможете записаться на два бесплатных открытых урока: - Как разрабатывать CLI на Node.js — 6 марта - TypeScript в Node.js для server-side приложений — 21 марта 💥 Получите высокую оценку при прохождении теста, сможете забронировать место в мартовской группе курса «JavaScript Developer. Professional» по спеццене!

🖥 При виде этого не сталкивающийся с JS программист переживает шок — как это?! ⏩А ты сможешь с ходу объяснить, почему так? Начнём с того, что для сравнения JavaScript приводит обе стороны равенства к одному типу. Также вспомним, что если число начинается с 0, JS предполагает, что оно написано в восьмеричном формате, и выполняет необходимые преобразования. И в этом всё дело, 018 — недопустимое восьмеричное число (в 8-ричной системе цифры от 0 до 7). А раз в числе 018 есть восьмёрка, то JavaScript теперь рассматривает его как обычное десятичное, то есть равное 18. Получается, что '018' == 18 — выражение является истинным. При этом 017 — допустимое восьмеричное число, поэтому JS представляет его как 8-ричное число 15, потому что 1×8¹ + 7×8⁰ = 15. А строку '017' он рассматривает как десятичное число, в результате чего получается 17. Но 15 не равно 17, поэтому второе выражение неверно. Такие вот дела, ох уж это автоприведение типов 🙃 @javascriptv