Senior Frontend - javascript, html, css

REKONFA Live 6 ноября приглашаем всех, кто имеет отношение к маркетингу и рекламным технологиям, обсудить рынок, тренды, вызовы и их решения. С докладами на актуальные темы выступят лидеры индустрии и медийные спикеры. Принять участие можно офлайн и онлайн. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

Projects Carousel Карусель с автоматическим переключением слайдов, анимированная на SCSS. 👉 @seniorFront

​Как работает сборка мусора в JS? Управление памятью в JavaScript выполняется автоматически и незаметно. Мы создаём примитивы, объекты, функции… Всё это занимает память. Но что происходит, когда что-то больше не нужно? Как движок JavaScript обнаруживает, что пора очищать память? Основной концепцией управления памятью в JavaScript является принцип достижимости. Если упростить, то «достижимые» значения – это те, которые доступны или используются. Они гарантированно находятся в памяти. 1. Существует базовое множество достижимых значений, которые не могут быть удалены. Например: - Выполняемая в данный момент функция, её локальные переменные и параметры. - Другие функции в текущей цепочке вложенных вызовов, их локальные переменные и параметры. - Глобальные переменные. - (некоторые другие внутренние значения) Эти значения мы будем называть корнями. 2. Любое другое значение считается достижимым, если оно доступно из корня по ссылке или по цепочке ссылок. Например, если в глобальной переменной есть объект, и он имеет свойство, в котором хранится ссылка на другой объект, то этот объект считается достижимым. И те, на которые он ссылается, тоже достижимы. Далее вы познакомитесь с подробными примерами на эту тему. В движке JavaScript есть фоновый процесс, который называется сборщиком мусора. Он отслеживает все объекты и удаляет те, которые стали недоступными. 👉 @seniorFront

React-монополист: как мы сами убиваем развитие фронтенда Команда JavaScript for Devs подготовила перевод статьи о том, как доминирование React сдерживает развитие фронтенда. Автор утверждает: выбор React «по умолчанию» тормозит инновации, мешает развитию альтернативных фреймворков и превращает всю экосистему в монокультуру. 👉 @seniorFront

Array Helpers Расширьте встроенный класс Array следующими методами: square(), cube(), average(), sum(), even() и odd(). square() - должен возвращать копию массива, содержащую все значения, возведенные в квадрат. cube() - должен возвращать копию массива, содержащую все значения, возведенные в куб. average() - должен возвращать среднее значение всех значений массива; для пустого массива должно возвращать NaN sum() - должен возвращать сумму всех значений массива even() - должен возвращать массив всех четных чисел odd() - должна возвращать массив всех нечетных чисел Пример:

 var numbers = [1, 2, 3, 4, 5];

 numbers.square();  // must return [1, 4, 9, 16, 25]
 numbers.cube();    // must return [1, 8, 27, 64, 125]
 numbers.average(); // must return 3
 numbers.sum();     // must return 15
 numbers.even();    // must return [2, 4]
 numbers.odd();     // must return [1, 3, 5]

👉 @seniorFront

🥶🖌 Реализовано без использования JS при помощи CSS filter 👉 @seniorFront

Pixel Button Effects В этом видео создаются кнопки с пиксельным эффектом при наведении на CSS и JS. 👉 @seniorFront

Falling autumn leaves Создано и анимировано библиотекой Three.js 👉 @seniorFront

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

Apple Бесконечная анимация, запускающаяся через JS в setInterval. 👉 @seniorFront

Они безнадежны( 👉 @seniorFront

Circular Progress Bar В этом видео создается круглый индикатор загрузки на чистом CSS. 👉 @seniorFront

Card Beam Animation Оригинальная карусель, реализованная на чистых CSS и JS. 👉 @seniorFront

Почему перфекционизм и желание делать свое дело хорошо — медленно, но верно крадут ваше счастье? Ловушка, в которую попадают хорошие специалисты и предприниматели, — они стремятся сделать свое дело идеально, больше и лучше работать, и тем самым роют себе могилу. Означает ли это, что им надо работать меньше? Нет, это означает, что им надо стать обычными людьми и перестать гнаться за результатами, и тогда им станет легче, а их результаты станут лучше! Как это возможно? А вот так… 👉 @seniorFront

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_ready 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 👩‍💻 Java — t.me/java_ready 👩‍💻 Linux — t.me/linux_ready 🖼️ DevOps — t.me/devops_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Весь IT — t.me/it_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

​Я — идеальный программист Я — идеальный программист. Не помню себя таким, чтобы не хотел кодить. Задачки с двумя звёздочками, олимпиады, домашний ПК раньше всех — всё вело к профессии. Убеждён в необходимости математического бэкграунда — и получил его. Для меня программирование — искусство плюс математика. Каждое утро: Хабр, спецификации языков. Пока чищу зубы — профессиональные тг-каналы. Я — идеальный программист. Точно оцениваю время на задачу, всегда укладываюсь в дедлайн. Форс-мажора не бывает: не зависаю часами над функцией. Сроки священны — важнее, чем время скорой. Промедление сдвинет все процессы. Я — идеальный программист. Разбираюсь в бизнесе круче CEO: без понимания каждого винтика разработки не ведёшь. Не собираю требования с коллег, не ругаюсь за дубли — готов заменить всех. Моё видение целостное: знаю цели, стратегию компании. Злюсь, если кто-то не вписывается. Я — идеальный программист. Весь код покрыт тестами: решаю проблемы, предвижу и предотвращаю. Тестировщики не нужны — сам отлаживаю, анализирую баги. Девопсы? Сам владею софтом. Менеджер? Сам юзаю продукты и знаю нужды пользователей. Я — идеальный программист. Начинал с Assembler, Cobol, Lisp, Erlang... C, C++, Java, JS, Go, Python — база. Фуллстек, плюс немного дизайна. Могу работать один: legacy, правки старше меня — легко.Я — идеальный программист. Трачу три зарплаты в год на обучение, прохожу все курсы компании. На переднем крае технологий и менеджмента, английский на уровне, все сертификаты во всём. Я — идеальный программист. Хобби: робот на Arduino, моб-игры, LeetCode. Непрерывно придумываю и реализую. Хобби вдохновляют на работу. Я — идеальный программист. Если тимлид орёт — продолжаю кодить: у них стресс, они за дело. Почему не тимлид? Живу кодом, не хочу рулить. В команде все неидеальны — не сработаемся. Код совершенен: зависит только от меня. Я — идеальный программист. Обожаю рефакторить: каждая строка, функция — идеал. Трачу время (не в ущерб дедлайну), переписываю за коллегами для оптимизации. Я — идеальный программист. Сделал code style компании, напоминаю коллегам. Точка с запятой, скобки — важно. Комментарии? Нет: код самодокументируемый, читабельный. Я — идеальный программист. Могу удалёнку, но офис — чтобы фокус на коде. Раздражают распределёнщики: на созвонах без камеры жуют пельмени. Удалёнка = прокрастинация, быт. Дорога? Время на самообразование с планшета — тещу новое app для тайм-менеджмента. Я — идеальный программист. Сам общаюсь с клиентами, опросы. Маркетологи не слышат между строк, не понимают проблем. Каждый маркетолог должен пройти курс по dev — иначе не поговоришь: что такое exception и mutex?! Я — идеальный программист. Ненавижу вайб-кодинг и ИИ в проекте — лень и халатность. ИИ напишет куски, а рефакторить, поддерживать? Опасаюсь, что коллеги запушат навайбкодилое. Я — идеальный программист. Предложили менторство джунам — тяжело. Объясняю простое, а они косячат. За две недели можно освоить мои принципы. Они никогда не станут идеальными! Я — идеальный программист. Зовут спикером на конфы: идеальные презентации, дорабатываю с оргкомитетом. Аплодисменты хлипкие, вопросы редкие — а фрикам с шардированием на коленке — овации. Зато я решаю все квесты на стендах и уношу мерч. Я — идеальный программист. Работаю за идею, не за бабки. Деньги круто, но важно соответствие вклада и оплаты. Обидно: нас недооценивают, не понимают — только идеальный программист создаст идеальный софт. Жаль, что пользователи никогда не бывают идеальными. Я — идеальный программист. Проблема лишь в том, что я не существую. 👉 @seniorFront

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

The Great Fall Создано и анимировано с использованием возможностей библиотеки Three.js 👉 @seniorFront

​Какими способами можно визуально скрыть элемент в CSS? В CSS существует несколько способов визуально скрыть элемент от пользователей, сохраняя его доступность для скринридеров и поисковых систем. Ниже перечислены некоторые из часто используемых способов: 1. display: none; - Свойство display: none; полностью убирает элемент из потока документа, делая его невидимым и не занимающим место на странице. 2. visibility: hidden; - Свойство visibility: hidden; скрывает элемент, но все равно оставляет его в потоке документа, так что место на странице будет занято. 3. opacity: 0; - Установка opacity: 0; делает элемент полностью прозрачным, но он остается в потоке и может влиять на макет страницы. 4. position: absolute; left: -9999px; - Присвоение элементу position: absolute; left: -9999px; перемещает его за пределы видимой области экрана, сохраняя доступность для скринридеров. 5. clip-path: inset(100%); opacity: 0; - Этот метод использует clip-path: inset(100%); opacity: 0; для скрытия элемента за пределами видимой области. 6. width: 0; height: 0; overflow: hidden; - Установка width: 0; height: 0; overflow: hidden; может быть использована для скрытия содержимого элемента. Каждый из этих методов имеет свои особенности и может применяться в зависимости от требуемого поведения элемента на странице. 👉 @seniorFront