JavaScript.
Код примеров можно найти в этом репозитории.
Читать статью...
Frontender's notes. Страница 32
15018
@frontendnoteschannel
Годные заметки, новости, видео и интересные статьи для Frontend разработчиков.
-
Frontender's notes
JavaScript: управление содержимым веб-страницы с помощью жестов Алоха товарищи! Еще недавно управление содержимым веб-страницы с помощью жестов можно было наблюдать разве что в фантастических фильмах. Сегодня все, что для этого требуется — видеокамера и браузер (и библиотека от Google). В данном туториале рассматриваются 5 примеров: получение данных с видеокамеры и их отрисовка на холсте (canvas); обнаружение и отслеживание кисти руки; управление "курсором" с помощью указательного пальца; определение жеста "щипок" (pinch); нажатие кнопки с помощью щипка. Все примеры будут реализованы на чистом 
-
Frontender's notes
Стажировка в Яндексе 😱 Стажировка в Яндексе — это работа над реальными проектами, адекватная зарплата и корпоративные плюшки в офисе: от спортзалов и комнат для видеоигр до капсул для сна. Стажировку можно совмещать с учебой, по итогам больше половины ребят устраиваются в штат компании 🔥 Хочешь присоединиться? Тогда не откладывай и подавай заявку 🤟 -
Frontender's notes
CSS псевдокласс :has() Алоха товарищи! Сегодня будет небольшой пост про один из новых псевдоклассов CSS. Что он делает: позволяет создать CSS селектор для элемента в зависимости от того есть ли у него тот или иной дочерний элемент. Примеры: // Выбираем элемент section который содержит h2section:has(h2) {background: lightgray;}// Выбираем img только в том случае если его родительский элемент содержит h2section:has(h2) img {border: 5px solid lime;}Собственно вот интересная такая штука. ❗ Но как это часто случается есть нюанс. Согласно ресурсу caniuse этот псевдокласс на данный момент не поддерживает Firefox, но учитывая что месяца 3 назад его еще не поддерживал хром то думаю это вопрос недолгого времени. #shortread -
Реклама
-
Frontender's notes
Курс «Английский для разработчиков» от Яндекс Практикума Для специалистов, которые хотят изменить свою профессиональную жизнь и работать в международной команде. Обучение построено вокруг рабочих ситуаций и полезных для карьеры навыков: • Самопрезентация. Рассказ о своей роли, задачах, сфере ответственности на поведенческом интервью и в неформальной беседе. • Работа в команде. Стендапы, планирование спринтов, демонстрация навыков командной работы на собеседовании. • Общение в процессе работ над кодом. Код-ревью, парное программирование, комментирование алгоритмических задач на собеседовании. • Общение с заказчиками. Уточнение технического задания, решение спорных ситуаций. • Нетворкинг. Выступление на митапах, неформальное общение с коллегами из отрасли. • Рефлексия и самоанализ. Ретроспектива, ревью, ответы на сложные вопросы. Запишитесь на бесплатную консультацию. Определим ваш уровень языка, расскажем про обучение и ответим на все вопросы. 
-
Frontender's notes
3 крутых GitHub репы для фронта Приветствую! Собрал для вас небольшую подборку GitHub реп которые скорее всего будут интересны всем. 👉 JavaScript Algorithms - ресурс для всех, кто хочет получить четкое представление об алгоритмах и структурах данных. Он содержит примеры многих популярных алгоритмов и структур данных, реализованных на JavaScript. 👉 Front End interview handbook - В этой репе вы найдете ответы на все распространенные вопросы, которые так любят задавать на собесах. 👉 30 seconds of code - этот ресурс содержит короткие фрагменты кода на JavaScript для всех рутинных манипуляций в разработке. ❗ Есть нюанс с репой 30 seconds of code, у нее нет варианта на русском языке, но думаю что для большинства из нас это не будет огромной проблемой. Первые две - переведены. Как обычно удачи в изучении и экспериментах! #shortread -
Frontender's notes
Ты начнёшь верстать увереннее, добавишь в портфолио 1 крутой сайт и сможешь повысить цену на свои услуги… Потому что Роман Чернов, веб-разработчик с 8-летним стажем, организовал бесплатный 7-дневный интенсив с практикой и обратной связью. За 7 дней ты: - Сверстаешь веб-сайт на HTML + CSS; - Реализуешь функционал на JavaScript; - Используешь фронтенд-фреймворк Angular; - Подключишь Backend и загрузишь сайт на хостинг. 👉 Забрать бесплатно 7 дней обучения frontend-разработке 
-
Frontender's notes
15 полезных методов для работы с массивами в JS Алоха коллеги! Решил подготовить для вас небольшую подборку с методами массивов, по большому счету она будет наиболее полезна для новичков но и более продвинутые разработчики возможно найдут что то полезное. [1, 2, 3].push(4) // 4 : [1, 2, 3, 4][1, 2, 3].pop() // 3 : [1, 2][1, 2, 3].shift() // 1 : [2, 3][1, 2, 3].unshift() // 3 : [1, 2, 3]['a', 'b'].concat('c') // ['a', 'b', 'c']['a', 'b'].join('-') // 'a-b'['a', 'b', 'c'].slice(1) // ['b', 'c']['a', 'b', 'c'].indexOf('b') // 'b'['a', 'b', 'c'].includes('c') // true[3, 5, 6, 8].find((n) => n % 2 === 0) // 6[2, 4, 3, 5].findIndex((n) => n % 2 !== 0) // 2[3, 4, 8, 6].map((n) => n * 2) // [6, 8, 16, 12][1, 4, 7, 8].filter((n) => n % 2 === 0) // [4, 8][2, 4, 3, 7].reduce((acc, cur) => acc + cur) // 16[2, 4, 3, 5].every((x) => x < 6) // true[3, 5, 6, 8].some((n) => n > 6) // true[1, 2, 3, 4].reverse() // [4, 3, 2, 1][3, 5, 7, 8].at(-2) // 7❗ Собственно вот. Удачи в экспериментах и надеюсь это будет полезно для вас. -
Frontender's notes
Как одновременно попасть в клевое IT-комьюнити, продолжить развиваться в сфере и найти работу Нечасто встретишь каналы, где специалисты международной продуктовой IT-компании рассказывают о своей работе, помогают развиваться в IT и набирают сотрудников из числа подписчиков. Ребята из канала команда Garage Eight как раз ведут такой канал, где находится место для анонсов мероприятий, рассуждениям про язык Golang и рассказам о моделях обучения. Все самые классные посты для разработчиков можно найти в закрепе. Главное не забыть подписаться, чтобы не упустить новые полезности. Реклама ООО «Гараж 8» ИНН 7810671708 erid Pb3XmBtzsrvgVVRgFxEHN4iJH55HqSxJb3To2nJ Команда Garage Eight Garage Eight — экосистема инвестиционных продуктов с душой «гаражного стартапа». Строим карьеру в IT и рассказываем, как устроена наша «внутренняя кухня». Больше о нас: https://cutt.ly/cJK3w8q
-
Frontender's notes
Promise.any (ES12 / ES2021) Метод Promise.any(iterable) принимает итерируемый объект содержащий объекты Promise. Как только один из них выполнится успешно, метод вернёт единственный объект Promise со значением выполненного promise. По сути, он является противоположностью для Promise.all() Отличие от Promise.all() Promise.all срабатывает тогда, когда все такие объекты будут выполнены, а Promise.any выполняется как только срабатывает какой-либо из них. Если все объекты будут отклонены, то он отклоняется с AggregateError. #shortread #js #es12 
-
Frontender's notes
Если ты Java-разработчик или фронтендер и не знаешь, кого ждут на митапе BRO.JS в Казани, — прочитай второе слово. Конечно, тебя! Митап — возможность наладить полезные связи, обменяться опытом и узнать прикладную информацию от экспертов. В качестве спикеров выступят senior-фронтендеры СберБанка Онлайн и лидер компетенции web в проекте СберИнвестор. Они расскажут: • об отличиях протокола http3 от предыдущих версий; • как применять технологию WebTransport; • как поддерживать стабильным open-source-решение на enterprise-проектах; • как внутри enterprise-проекта работать с формами; • как сделать переход с selenium-like-инструмента на Cypress. Помимо выступлений спикеров, будут воркшопы, кофе-брейки и вручения призов. 🕖 Дата мероприятия: 14–15 ноября, 17:00 🚩 Место проведения: Казань, ул. Спартаковская, 2к2, школа 21 
-
Frontender's notes
React tips for faster development at scale Впервые я познакомился с React в 2015 году и вот уже использую его можно сказать повседневно 7 лет. Бесчисленное количество компонентов было написано за это время, React из подающей надежды модной технологии вырос в серьезную библиотеку и по сути стал стандартом для написания веб приложений в 2022 году. Мы полюбили эту библиотеку за простое и лаконичное, но в тоже время очень мощное API, производительность, крутейшее коммюнити, наличия множество npm пакетов и просто за возможность решать прикладные задачи быстро и легко. Читать... 
-
Frontender's notes
❓Хотите прокачаться во Frontend-разработке? Присоединяйтесь к открытом уроку СЕГОДНЯ, 7 ноября, в 20:00 «Создание быстрых сайтов с Astro.build». Вместе с Арсением Высоцким, тимлидом в большой международной компании, познакомимся с новым инструментом для разработки сайтов с динамическим контентом — Astro.build. Astro поддерживает множество популярных фреймворков, включая React. Этот урок — часть онлайн-курса «React.js Developer» от OTUS и ориентирован на тех, кто имеет опыт работы с JavaScript и знаком с HTML/CSS. 👉 Пройдите вступительный тест и регистрируйтесь на вебинар: https://otus.pw/Soes/ 
-
Frontender's notes
Offscreen - React придумал новый компонент! Всем привет! Крутой видос о новом экспериментальном React компоненте. В видео рассказывается о его плюсах, возможных минусах и кейсах где его можно использовать. Рекомендую к просмотру! Смотреть... #react #video 
-
Frontender's notes
Яндекс Практикум ищет наставников на курс «Мидл фронтенд разработчик». Ждём специалистов с такими навыками: • имеете опыт работы программистом больше трех лет; • знаете HTML, CSS; • работали с JavaScript, React, TypeScript, Node.js; Мы предлагаем: → Частичную занятость. → Доход от 35 000 ₽. → Удалённую работу с гибким графиком от 8 часов в неделю. → Сильный опыт менторства: научим давать развивающую обратную связь начинающим разработчикам, работать с критикой и возращениями и учить их совершенствовать проекты. → Бесплатное обучение в Школе наставников. → Углубление знаний и развитие софт скиллов. → Доступ к курсу Практикума «Мидл фронтенд разработчик» и скидки на остальные курсы. Помогайте новичкам развиваться и учитесь сами — каждый день. Если вам интересно поработать с нами — оставьте заявку. 
-
Frontender's notes
React: все о новом предложении — хуке use() Представляю вашему вниманию перевод этой небольшой заметки, посвященной предложению нового хука React. Читать... 
-
Реклама
-
Frontender's notes
React теперь в телеграм! - 40,14% разработчиков сайтов использовали React в 2022 году — это самая популярная библиотека для создания пользовательских интерфейсов; - 196 850 звёзд у React на GitHub; - 25,12% разработчиков хотят изучить React; - 16.9 млн раз пользователи установили React С каналом React JS вы сможете вывести свои навыки фронтенд разработки на совершенно новый уровень! От создаталей популярного 
-
Frontender's notes
Как превратить сайт в удобное мобильное приложение В течение последних лет внимание компаний переключилось с сайтов на мобильные приложения — комфортные в использовании, кастомизированные технологии. Однако разнообразие доступов к онлайн-услугам не бывает лишним, и тем более это актуально для банковских сервисов. Рассказываем о ключевых решениях, которые позволили доработать интернет-банк, по сути объединив преимущества сайта и мобильного приложения: сервис не занимает память на устройстве и не требует обновления, но при этом удобен и понятен для наших пользователей. Читать... 
-
Frontender's notes
