Senior Frontend Developer | JavaScript, React, HTML & CSS @senior_front Channel on Telegram

Senior Frontend Developer | JavaScript, React, HTML & CSS

@senior_front


№ 4977519491
Изучаем Frontend.

По вопросам сотрудничества: @adv_and_pr

Канал на бирже: https://telega.in/c/senior_front

Senior Frontend Developer | JavaScript, React, HTML & CSS (Russian)

Добро пожаловать на канал Senior Frontend Developer | JavaScript, React, HTML & CSS! Здесь вы найдете множество полезных материалов и обновлений из мира фронтенд-разработки. Наша цель - помочь вам стать опытным frontend разработчиком, овладев технологиями JavaScript, React, HTML и CSS. Мы регулярно публикуем новости, статьи, уроки и советы от опытных специалистов. Если вы хотите улучшить свои навыки в области фронтенда, то наш канал - идеальное место для этого! Присоединяйтесь к нам прямо сейчас и начните свой путь к успешной карьере в разработке веб-приложений. Для всех вопросов о сотрудничестве обращайтесь к администратору @adv_and_pr. Также вы можете найти нас на бирже Telegram по ссылке: https://telega.in/c/senior_front

Senior Frontend Developer | JavaScript, React, HTML & CSS

14 Feb, 20:40


Animate Grid with FLIP

Верстка карточек в стиле masonry. Анимации созданы при помощи библиотеки gsap.

https://codepen.io/pehaa/pen/YzreJZG

Senior Frontend Developer | JavaScript, React, HTML & CSS

13 Feb, 20:49


Позиционирование элементов с помощью JS

Для позиционирования элементов на странице веб-сайта можно использовать CSS свойства, такие как position, top, left, right, bottom. Однако, в некоторых ситуациях может потребоваться изменять эти свойства динамически с помощью JavaScript.

Для изменения кастомных CSS свойств с помощью JavaScript можно использовать метод setProperty() объекта style. Для этого необходимо указать имя свойства и его значение.

Использование setProperty() позволяет создавать анимации и другие эффекты на странице, которые изменяют CSS свойства элементов динамически.

Senior Frontend Developer | JavaScript, React, HTML & CSS

12 Feb, 20:10


Создание анимированной погодной иконки с помощью круговой диаграммы

В примере кода мы имеем класс AnimatedPieChart, который предназначен для создания анимированной круговой диаграммы на основе данных, предоставленных пользователем. Этот код использует SVG и основан на математических вычислениях для отображения и анимации диаграммы.

Класс содержит методы для отрисовки диаграммы (draw) и для описания дуги (describeArc) на основе заданных параметров. Он также использует метод polarToCartesian для преобразования полярных координат в декартовы координаты.

В конце кода создается экземпляр класса AnimatedPieChart с заданными данными и вызывается метод draw для отрисовки диаграммы.

Этот пример кода включает в себя работу с SVG, математические вычисления и анимацию. Frontend Developer может провести разбор кода, чтобы разобраться в деталях и оптимизировать его производительность, добавить настраиваемые параметры и улучшить общую архитектуру класса.

Senior Frontend Developer | JavaScript, React, HTML & CSS

11 Feb, 21:05


Timekeeping

Небольшое приложение — таймер, реализованный на Vue и анимированный библиотекой gsap.

https://codepen.io/Sicontis/pen/qBVMzLj

Senior Frontend Developer | JavaScript, React, HTML & CSS

11 Feb, 13:54


Верстаешь?

Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:


1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке от эксперта;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ даже без опыта.

А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.

👉 Проскочить на интенсив бесплатно

Начинаем уже завтра.

🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием.

Senior Frontend Developer | JavaScript, React, HTML & CSS

10 Feb, 20:56


Пикачу бокс

Данный код представляет собой комбинацию HTML и CSS кода, которая создает 3D-коробку с различными поверхностями, а также включает изображение Пикачу с некоторыми базовыми анимациями. Для достижения визуального представления используются стандартные HTML-теги и стили CSS.

Код содержит:

1. 3D-коробка:
Автор кода создает 3D-коробку с помощью трансформаций и переходов CSS. Определяются шесть поверхностей коробки (front, back, left, right, top и bottom), и каждой из них применяются определенные цвета фона и тени. Коробка вращается при взаимодействии пользователя (при щелчке на поверхность top). Это может научить основам создания 3D-объектов с помощью CSS.

2. Анимация обложки:
Код включает анимацию обложки, которая вращается и раскрывает различные части коробки. Эта анимация запускается, когда пользователь кликает на поверхность top коробки. Это демонстрирует, как с помощью переходов и анимаций CSS можно создавать интерактивные эффекты.

3. Стили для иконок:
Внутри коробки представлены некоторые иконки, такие как зонтик, стакан и стрелки. Эти иконки создаются с использованием стилей и форм CSS. Этот раздел кода может научить созданию простых иконок и иллюстраций с помощью CSS.

4. Пикачу:
Код содержит простое изображение Пикачу с использованием стилей CSS. Создаются голова, глаза, нос и рот Пикачу. У ушей Пикачу также есть небольшая анимация. Этот раздел кода может помочь понять, как создавать основные формы и использовать анимации CSS.

5. CSS-переменные (пользовательские свойства): В коде используются CSS-переменные (пользовательские свойства) для определения и управления некоторыми общими значениями, такими как размеры и цвета. Это полезно для повторного использования и поддержания последовательных стилей в коде.

В целом, этот код может быть отличным отправным пунктом для изучения и экспериментирования с трансформациями CSS. Вы можете изменять и развивать его, чтобы создавать более сложные 3D-объекты и анимации.

👨‍💻Автор кода
🌐Ссылка на код

Senior Frontend Developer | JavaScript, React, HTML & CSS

09 Feb, 21:02


Blob study

Анимированная 3D-капля, реализованная с помощью CSS и JavaScript.

https://codepen.io/shubniggurath/pen/dyOKjLG

Senior Frontend Developer | JavaScript, React, HTML & CSS

07 Feb, 15:23


#вопросы_с_собеседований
Что такое самовызываемые функции?

Самовызываемые функции отличаются от обычных функций — они выполняются в том же месте, где были объявлены. Обычно мы объявляем функцию, а потом вызываем ее. JavaScript автоматически запускает код внутри самовызываемых функций.

Следует отметить, что этим функциям не присваивается имя, то есть мы не можем вызывать их снова. Также они известны как анонимные функции. Примеры на картинке.

Senior Frontend Developer | JavaScript, React, HTML & CSS

06 Feb, 19:46


Отображение стримов с использованием Twitch API, React и Redux

Цель этой темы - разработать веб-приложение, которое будет отображать список стримов с использованием Twitch API, React и Redux. Мы будем использовать Twitch API для получения информации о стримах, а затем использовать React и Redux для управления состоянием и отображения данных.

1️⃣ Получение клиентского идентификатора Twitch: Зарегистрируйте ваше приложение в Twitch Developers Console, чтобы получить клиентский идентификатор Twitch. Этот идентификатор будет использоваться для аутентификации в Twitch API.

2️⃣ Настройка окружения React и Redux: Установите Node.js, создайте новый проект React и установите необходимые зависимости, включая Redux и react-redux для управления состоянием приложения.

3️⃣ Настройка Redux: Создайте необходимые Redux-действия (actions) и редукторы (reducers) для работы с данными о стримах. Затем настройте хранилище (store) и подключите его к вашему React-приложению.

4️⃣ Использование Twitch API: Создайте функцию или хук, которые будут использовать Twitch API для получения списка стримов. Вы можете использовать axios или другую библиотеку для выполнения HTTP-запросов к Twitch API.

5️⃣ Интеграция с React и Redux: Создайте компонент StreamList для отображения списка стримов. Подключите компонент к Redux-хранилищу и получите данные о стримах через Redux-действия. Отобразите полученные данные на странице вашего приложения.

6️⃣ Отображение стримов: Используйте компонент StreamList в вашем приложении, чтобы отображать список стримов на странице.

Это всего лишь базовый пример интеграции Twitch API, React и Redux для отображения списка стримов в вашем веб-приложении. Вы можете расширить эту функциональность, добавить функции фильтрации или дополнительные данные о стримах, в зависимости от ваших потребностей.

Senior Frontend Developer | JavaScript, React, HTML & CSS

06 Feb, 15:04


Офер в Яндекс для опытных фронтендеров за два дня

15–16 февраля приглашаем фронтендеров с опытом работы от пяти лет получить офер в Яндекс через multitrack за 2 дня. Достаточно пройти несколько технических секций 15 февраля, чтобы уже 16-го получить офер и выбрать три команды, к которым вам было бы интересно присоединиться.

Как правило, за несколько собеседований сложно понять, подходит ли вам команда и наоборот. Multitrack позволит вам поработать в трёх разных командах Яндекса и выбрать подходящую. Вы сможете погрузиться в рабочие процессы, познакомиться с будущими коллегами и понять, с какими задачами и технологиями хотите работать.

Узнать подробности и зарегистрироваться.

Senior Frontend Developer | JavaScript, React, HTML & CSS

05 Feb, 21:08


Saturn Icon

Uwe Chardon создает SVG (Scalable Vector Graphics) изображение Сатурна и анимирует его с помощью CSS.

SVG - это формат графики на основе XML, который позволяет создавать масштабируемые и векторные изображения. Этот код использует SVG для создания нескольких геометрических фигур, таких как круги и эллипсы, а затем применяет к ним анимацию с помощью CSS.

🌐Ссылка на код

Senior Frontend Developer | JavaScript, React, HTML & CSS

05 Feb, 15:14


🔥Podlodka React Crew – онлайн-конференция для React-разработчиков.

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

Что в программе:

💬 Говорим на одном языке с пользователями: i18n в React-приложениях Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?

📡 OpenTelemetry для фронтенд-разработчика Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?

🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?

🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?

📅 Конференция пройдет 10-14 февраля.

Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.

🔗 Регистрируйтесь: podlodka.io/reactcrew

Senior Frontend Developer | JavaScript, React, HTML & CSS

05 Feb, 15:05


Fruicy

Этот код представляет собой фрагмент HTML и CSS для веб-страницы. Он создает разметку и стили для страницы, включая заголовок, навигационное меню и группу элементов, используя следующие фреймворки:

1. HTML:
Элементы <main>, <div>, <img>, <h2>, <nav>, <a>, <button> используются для создания структуры и контента страницы.

2. CSS:
В коде определены стили для элементов, используя классы и псевдоэлементы. Например, стили для класса .item-holder задают различные свойства, такие как z-index, position, padding, width, display, justify-content, и другие, для создания фиксированной панели с текстом и ссылками.

🌐Ссылка на код

Senior Frontend Developer | JavaScript, React, HTML & CSS

04 Feb, 20:51


SCSS Washing machine

Стиральная машинка на HTML и SCSS.

https://codepen.io/Arkellys/pen/YoYNve

Senior Frontend Developer | JavaScript, React, HTML & CSS

03 Feb, 18:14


React + Three.js. Создаём собственный 3D шутер. Часть 1

React Three Fiber - это обёртка над Three.js, которая использует структуру и принципы React для создания 3D-графики в вебе.

Смотреть статью

Senior Frontend Developer | JavaScript, React, HTML & CSS

02 Feb, 19:53


Sparkly skull

Анимированная 3D сцена, реализованная с помощью SCSS и библиотек Three.js и GSAP.

https://codepen.io/Mamboleoo/pen/yLbxYdx

Senior Frontend Developer | JavaScript, React, HTML & CSS

01 Feb, 18:28


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

В React часто используют стрелочные функции для создания компонентов и для методов массивов высшего порядка, таких как map() и filter().

Senior Frontend Developer | JavaScript, React, HTML & CSS

31 Jan, 19:12


Tremulous

Автор создает анимацию, представляющую собой сцену с небом, солнцем, луной и озером, в которой происходят следующие действия:

1. Разметка HTML: Здесь создается контейнер <figure>, внутри которого располагаются три <div> элемента - .sun, .lake и .moon.

2. Стили CSS: Задаются стили для разметки, устанавливается фоновый цвет для <body>, задается размер сцены и грид для размещения элементов по центру экрана.

3. Анимации с помощью GSAP (GreenSock Animation Platform): Этот код использует библиотеку GSAP для создания анимаций различных элементов на сцене:

- .moon: Анимация движения луны вверх на 350px по вертикали за 10 секунд.

- .sun: Анимация движения солнца на 200px вниз и на 350px влево за 2 секунды с кастомной функцией CustomEase для плавности движения. Затем солнце перемещается вправо на 340px и обратно с повторением и эффектом "yoyo" (поочередное движение туда и обратно). Затем солнце движется вниз на 300px за 1.5 секунды.

- Фон <figure>: Изменение фонового цвета контейнера на rgb(2,0,43) с задержкой 0.5 секунды и продолжительностью 3 секунды. Затем фон меняется на черный (значение black) с задержкой 9 секунд и продолжительностью 3 секунды.

- .lake: Изменение цвета озера на rgb(1,3,49) с задержкой 8 секунд и продолжительностью 1 секунда.

Замечания:

- Для анимаций используется библиотека GSAP.
- В комментариях указаны дальнейшие планы (TO-DO LIST) для улучшения анимации: анимация изменения цвета луны от серого к белому и добавление некоторых звезд для завершения сцены.

Поэтому, когда вы запустите этот код, вы увидите анимацию, включающую движение солнца и луны, а также изменение фонового цвета и цвета озера на заданное значение.

🌐Ссылка на код

Senior Frontend Developer | JavaScript, React, HTML & CSS

30 Jan, 19:38


#вопросы_с_собеседований
Что такое цикл событий (event loop) и как он работает?

Движок браузера выполняет JavaScript в одном потоке. Для потока выделяется область памяти — стэк, где хранятся фреймы (аргументы, локальные переменные) вызываемых функций.

Список событий, подлежащих обработке, формирует очередь событий. Когда стек освобождается, движок может обрабатывать событие из очереди. Координирование этого процесса и происходит в event loop.

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

Senior Frontend Developer | JavaScript, React, HTML & CSS

29 Jan, 21:01


Card Slider

Автор создает слайдер на основе библиотеки Swiper.js, который позволяет создать аттрактивные и интерактивные слайд-шоу с различными настройками.

Swiper.js - это популярная JavaScript библиотека для создания множества интерактивных слайдеров, каруселей и галерей на веб-сайтах.

Ссылка на код

Senior Frontend Developer | JavaScript, React, HTML & CSS

26 Jan, 18:41


Библиотека Chart.js

Презентации неразрывно связаны с выводом разного рода диаграмм. Существует потрясающая JavaScript-библиотека Chart.js, предназначенная для представления данных с помощью диаграмм.

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

Более подробно вы можете узнать на официальном сайте - тут

Senior Frontend Developer | JavaScript, React, HTML & CSS

24 Jan, 19:47


JavaScript. Задача

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

Необходимо составить программу нахождения цифрового корня натурального числа.

Входные данные: N - натуральное число, где 0 <= N <= 10^9

Вывод: цифровой корень числа N

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

23 Jan, 20:20


Sidebar navigation

Создано и анимировано на HTML и CSS. В JS реализована только логика открытия/закрытия.

https://codepen.io/Taluska/pen/VwMvoep

Senior Frontend Developer | JavaScript, React, HTML & CSS

22 Jan, 18:31


JavaScript. Задача

Дано игровое поле, которое задано матрицей m x n, где каждая ячейка представляет собой клетку корабля «X» или пустую клетку «.».

Необходимо найти количество всех кораблей на игровом поле.

Примечания:
- Корабли можно размещать на игровом поле только горизонтально или вертикально
- Два корабля разделяет по крайней мере 1 горизонтальная или вертикальная клетка.

Входные данные: board — символьная матрица, содержащая символы ‘.’, ‘X’. Размер сторон матрицы от 1 до 100.

Вывод: количество всех кораблей.

Пример:

board = [
[‘X’, ‘.’, ‘.’, ‘X’],
[‘.’, ‘.’, ‘.’, ‘X’],
[‘.’, ‘.’, ‘.’, ‘X’]]

Output: 2

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

21 Jan, 19:49


Ring Prepulsion

Создано на canvas и JS.

https://codepen.io/shubniggurath/pen/qeXRrW

Senior Frontend Developer | JavaScript, React, HTML & CSS

20 Jan, 18:26


Scroll Reveal

В JS создана логика, которая определяет, находится ли элемент на экране, и исходя из этого показывает или скрывает элемент.

https://codepen.io/HighFlyer/pen/qByPyqr

Senior Frontend Developer | JavaScript, React, HTML & CSS

19 Jan, 18:36


Infinite Cover Flow

Бесконечная галерея музыкальных постеров, которую можно прокручивать перетаскиванием, а также прокруткой колеса мыши. Реализована с помощью GSAP, ScrollTrigger и Draggable.

https://codepen.io/jh3y/pen/WNRvqJP

Senior Frontend Developer | JavaScript, React, HTML & CSS

18 Jan, 20:44


Movie App

Концепция приложения - библиотеки фильмов, - реализованная на Vue.

https://codepen.io/rodleviton/pen/jOaXzje

Senior Frontend Developer | JavaScript, React, HTML & CSS

16 Jan, 18:45


JavaScript. Что будет выведено в консоль?

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

15 Jan, 15:37


Credit Card Checkout

Верстка формы на HTML и SCSS. Значения в карточке устанавливаются в JS.

https://codepen.io/supah/pen/OMdPpW

Senior Frontend Developer | JavaScript, React, HTML & CSS

14 Jan, 17:14


JavaScript. Что будет выведено в консоль?

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

13 Jan, 12:46


#вопросы_с_собеседования
Что выведет на экран следующий код?

Ответ:
10
Пояснение: В функции b 3 аргумента, индексы которых начинаются с [0]. Таким образом, аргумент с индексом [2] — это a. В первой строке функции третьему аргументу функции присваивается значение 10.

Senior Frontend Developer | JavaScript, React, HTML & CSS

12 Jan, 15:34


LeetCode теперь в Telegram!

LeetCode — это сайт, который позволяет быстро готовиться к техническим собеседованиям по программированию. Там публикуются задачи с собеседований в Google и Microsoft с решениями.

Подписывайтесь: @leetcode

Senior Frontend Developer | JavaScript, React, HTML & CSS

11 Jan, 19:29


JavaScript. Что будет выведено в консоль?

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

10 Jan, 20:40


#вопросы_с_собеседований
В чём разница между объектами Map и WeakMap?

Эти объекты ведут себя по-разному в том случае, если переменная, содержащая ссылку на объект, являющийся ключом одной из пар ключ/значение, оказывается недоступной.

После того, как завершается выполнение IIFE, у нас уже не будет доступа к объектам a и b. Поэтому сборщик мусора удаляет ключ b из weakmap и очищает память. А вот содержимое map остаётся при этом неизменным.

В результате оказывается, что объекты WeakMap позволяют сборщику мусора избавляться от тех своих записей, на ключи которых нет ссылок во внешних переменных. Объекты map хранят пары ключ/значение вне зависимости от наличия или отсутствия внешних ссылок на ключи. То же самое можно сказать и о реализации структуры данных Map с использованием обычных массивов. В WeakMap используются «слабые» ссылки на ключи. Они не препятствуют работе сборщика мусора в том случае, если на объект, используемый в роли ключа, нет других ссылок.

Senior Frontend Developer | JavaScript, React, HTML & CSS

09 Jan, 19:33


#вопросы_с_собеседований
Что такое прототип объекта?

Прототип — это план (схема или проект) объекта. Он используется как запасной вариант для свойств и методов, существующих в данном объекте. Это также один из способов обмена свойствами и функциональностью между объектами. Это основная концепция прототипного наследования в JS.

Несмотря на то, что объект о не имеет свойства toString, обращение к этому свойству не вызовет ошибки. Если определенного свойства нет в объекте, его поиск осуществляется сначала в прототипе объекта, затем в прототипе прототипа объекта и так до тех пор, пока свойство не будет найдено. Это называется цепочкой прототипов. На вершине цепочки прототипов находится Object.prototype.

Подробнее о прототипах можно прочитать здесь.

Senior Frontend Developer | JavaScript, React, HTML & CSS

07 Jan, 18:24


CyberPunk Info board

Это веб-страница, созданная с использованием только HTML и CSS, которая олицетворяет эстетику киберпанка через свою визуальную структуру.

🌐Ссылка на код

Senior Frontend Developer | JavaScript, React, HTML & CSS

06 Jan, 18:18


Обзор 10 приемов JavaScript для эффективного программирования

1. Объект Intl
Объект Intl позволяет форматировать числа, даты и валюту с учетом разных локалей и параметров.

Он предоставляется с множеством свойств, которые обеспечивают быстрое и безупречное форматирование данных.

Рассмотрим пример форматирования валюты:
let num = 100;

let RupeeFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "INR"})

let RupeeFormatted = RupeeFormatter.format(num);

console.log(RupeeFormatted)
//
100

let USDFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "USD"})

let USDFormatted = USDFormatter.format(num)

console.log(USDFormatted)
// $100


2. Оператор ??
Оператор ?? присваивает переменной значение по умолчанию, если она null или undefined.

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

Пример:
let user = {}

let name = user.name ?? "Anonymous"

console.log(name)
// "Anonymous"


3. Object.fromEntries()
Метод Object.fromEntries() преобразует массив пар “ключ-значение” в объект.

Возьмем следующий массив и создадим из него объект, как показано ниже:
let arr = [["name", "Alice"], ["age", 25]]

let obj = Object.fromEntries(arr);

console.log(obj)
// {name: "Alice", age: 25}


4. Array.flat()
Метод Array.flat() преобразует вложенный массив в один единственный.

Поскольку вложенными массивами сложно управлять, то данный метод помогает уменьшать их вложенность.

Пример:
let arr = [1, [2, [3, [4]]]];

let flat = arr.flat(Infinity)

console.log(flat)
// [1, 2, 3, 4]


5. Оператор ?
Оператор ?. обеспечивает доступ к свойствам объекта без проверки, является ли он null или undefined.

Используйте его, когда не знаете, существует ли объект или нет.

Пример:
let user = null

let age = user?.age

console.log(age)
// undefined


6. Array.reduce()
Метод Array.reduce() применяет функцию к каждому элементу массива и суммирует результат в одно значение.

Пример сложения всех чисел массива:
let arr = [1, 2, 3, 4, 5]

let sum = arr.reduce((a, b) => a + b)

console.log(sum)
// 15


7. String.repeat()
Метод String.repeat() создает новую строку, повторяя заданную строку указанное количество раз.

Пример:
let str = "js".repeat(10)

console.log(str)
// 'jsjsjsjsjsjsjsjsjsjs'


8. Array.from()
Метод Array.from() создает новый массив из массивоподобного или итерируемого объекта.

Пример:
let str = "Hello"

let arr = Array.from(str)

console.log(arr)
// ["H", "e", "l", "l", "o"]


9. Math.hypot()
Метод Math.hypot() находит квадратный корень из суммы квадратов его аргументов.

Так, сумма квадратов 3 и 4 равна 25, а квадратный корень из 25 равен 5. Следовательно, Math.hypot(3, 4) возвращает 5.

Пример:
let hyp = Math.hypot(3, 4);

console.log(hyp)
// 5


10. Object.assign()
Метод Object.assign() копирует значения всех перечисляемых собственных свойств из одного или нескольких исходных объектов в целевой объект.

Пример:
let obj1 = {a: 1, b: 2};

let obj2 = {c: 3, d: 4};

let obj3 = Object.assign(obj1, obj2)

console.log(obj3)
// {a: 1, b: 2, c: 3, d: 4}

Senior Frontend Developer | JavaScript, React, HTML & CSS

06 Jan, 15:00


⚡️ В сети начали массово сливать курсы и книги известных онлайн школ

Вот отсортированная база с тонной материала(постепенно пополняется):

БАЗА (4687 видео/книг):

(363 видео, 87 книги) — Python
(415 видео, 68 книги) — Frontend
(143 видео, 33 книги) — ИБ/Хакинг
(352 видео, 89 книги) — С/С++
(343 видео, 87 книги) — Java
(176 видео, 32 книги) — Git
(293 видео, 63 книги) — C#
(174 видео, 91 книги) — DevOps
(167 видео, 53 книги) — PHP
(227 видео, 83 книги) — SQL/БД
(163 видео, 29 книги) — Linux
(107 видео, 43 книги) — СисАналз
(181 видео, 32 книги) — Go
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(137 видео, 93 книги) — DS/ML
(113 видео, 82 книги) — GameDev
(183 видео, 37 книги) — UI/UX
(129 видео, 73 книги) — QA
(213 видео, 63 книги) — Rust
(121 видео, 24 книги) — Ruby

Скачивать ничего не нужно — все выложили в Telegram

Senior Frontend Developer | JavaScript, React, HTML & CSS

06 Jan, 14:17


Lighthouse — открытый инструмент от Google для аудита производительности, доступности и SEO веб-страниц

Основное преимущество Lighthouse — это его мощная аналитика и обширная база знаний. Утилита предлагает подробные отчёты и рекомендации по улучшению качества веб-страниц, основанные на проверенных методах и практиках

В отличие от других инструментов анализа, Lighthouse интегрируется с DevTools в Google Chrome и может быть использован в качестве расширения для браузера или в командной строке. Это заметно упрощает проведение аудита и получение результатов

Senior Frontend Developer | JavaScript, React, HTML & CSS

05 Jan, 18:45


Electric strings — электрический «паук», который следует за движением курсора.

https://codepen.io/Mertl/pen/dybBPWx

Senior Frontend Developer | JavaScript, React, HTML & CSS

04 Jan, 18:12


#вопросы_с_собеседований
Что такое Cross-Origin Resource Sharing (CORS)?

Cross-Origin Resource Sharing (CORS) — механизм, использующий дополнительные HTTP-заголовки, чтобы дать возможность агенту пользователя получать разрешения на доступ к выбранным ресурсам с сервера на источнике (домене), отличном от того, что сайт использует в данный момент. Говорят, что агент пользователя делает запрос с другого источника (cross-origin HTTP request), если источник текущего документа отличается от запрашиваемого ресурса доменом, протоколом или портом.

В целях безопасности браузеры ограничивают cross-origin запросы, инициируемые скриптами. Например, XMLHttpRequest и Fetch API следуют политике одного источника (same-origin policy). Это значит, что web-приложения, использующие такие API, могут запрашивать HTTP-ресурсы только с того домена, с которого были загружены, пока не будут использованы CORS-заголовки.

Senior Frontend Developer | JavaScript, React, HTML & CSS

31 Dec, 23:05


с новым годом! ура

Senior Frontend Developer | JavaScript, React, HTML & CSS

30 Dec, 16:53


Анимированный полет с помощью Theatre.js и React Three Fiber

Разбираемся, как отобразить 3D-сцену на веб-странице и перемещать по ней камеру во время прокрутки пользователем. Всего 50 строк кода.

Читать

Senior Frontend Developer | JavaScript, React, HTML & CSS

28 Dec, 20:42


Задача

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

Римские цифры представлены семью разными символами:

I - 1,
V - 5,
X - 10,
L - 50,
C - 100,
D - 500,
M - 1000

Справка: римские цифры обычно пишутся от наибольшего к наименьшему слева направо. Однако цифра четыре - это не IIII. Вместо этого число четыре записывается как IV. Поскольку единица стоит перед пятью, мы вычитаем ее и получаем четыре. Тот же принцип применяется к числу девять, которое записывается как IX.

Вычитание используется в шести случаях:

- I можно поставить перед V (5) и X (10), чтобы получилось 4 и 9.
- X можно поставить перед L (50) и C (100), чтобы получилось 40 и 90.
- C можно поставить перед D (500) и M (1000), чтобы получилось 400 и 900.

Входные данные: n - натуральное число от 1 до 3000.

Вывод: римская запись числа n.

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

27 Dec, 20:41


Scrubbing, scrolling and splitting

Анимация при скролле, реализованная при помощи библиотеки gsap.

https://codepen.io/BlogFire/pen/NWYRqmv

Senior Frontend Developer | JavaScript, React, HTML & CSS

26 Dec, 18:32


Rotating border

Граница сделана из псевдоэлементов, которые анимируются в CSS.

https://codepen.io/Chokcoco/pen/dypaobm

Senior Frontend Developer | JavaScript, React, HTML & CSS

25 Dec, 19:47


App Menu With Lock Screen

Адаптивное меню приложения с экраном блокировки, реализованное с помощью React.

https://codepen.io/Hyperplexed/pen/vYpXNJd

Senior Frontend Developer | JavaScript, React, HTML & CSS

24 Dec, 18:44


JavaScript. Что будет выведено в консоль?

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

23 Dec, 20:27


Search Bar

Необычное поле для поиска, сделанное из svg картинки, анимированной в CSS.

https://codepen.io/nexii/pen/OJOdVey

Senior Frontend Developer | JavaScript, React, HTML & CSS

22 Dec, 18:31


Digital clock with separate indicators

Необычные часы, сделанные из трех svg-картинок, параметры которых задаются через JS с помощью логики вычисления текущего времени пользователя.

https://codepen.io/mortezasharifinia/pen/abEgNdJ

Senior Frontend Developer | JavaScript, React, HTML & CSS

21 Dec, 17:17


Morphing Submit Button

Содержимое кнопки - svg-картинка. При нажатии на кнопку изменяются CSS-классы на элементах кнопки.

https://codepen.io/jkantner/pen/zYdaBPJ

Senior Frontend Developer | JavaScript, React, HTML & CSS

20 Dec, 18:28


Typo-coaster

Анимация текста по определенному пути движения, реализованная с помощью Splitting.js.

https://codepen.io/michellebarker/pen/XWJyydY

Senior Frontend Developer | JavaScript, React, HTML & CSS

19 Dec, 18:14


JavaScript. Что будет выведено в консоль?

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

18 Dec, 17:58


Spider

Создано на canvas и чистом JS.

https://codepen.io/strangerintheq/pen/QWmPzja

Senior Frontend Developer | JavaScript, React, HTML & CSS

17 Dec, 10:53


JavaScript. Что будет выведено в консоль?

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

16 Dec, 19:23


Blob study

Анимированная 3D-капля, выполненная с помощью CSS и JavaScript.

https://codepen.io/shubniggurath/pen/dyOKjLG

Senior Frontend Developer | JavaScript, React, HTML & CSS

15 Dec, 19:41


Contrast

Один из вариантов реализации замены цвета текста в зависимости от цвета фона. Реализация на чистом CSS.

https://codepen.io/alvaromontoro/pen/MWvvMpy

Senior Frontend Developer | JavaScript, React, HTML & CSS

14 Dec, 17:18


JavaScript. Что будет выведено в консоль?

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

13 Dec, 19:15


3D Futuristic Room

3D-комната, реализованная с помощью Pug, SCSS и JavaScript.

https://codepen.io/ricardoolivaalonso/pen/LYzwGyW

Senior Frontend Developer | JavaScript, React, HTML & CSS

12 Dec, 18:34


The Turin Horse - Hadi

Анимированная сцена, выполненная с помощью чистого CSS и SVG

https://codepen.io/leimapapa/pen/GRQGzOZ

Senior Frontend Developer | JavaScript, React, HTML & CSS

11 Dec, 18:30


Progress of this year. Keep tracking

Анимированный прогресс года, выполненный с помощью CSS и JavaScript

https://codepen.io/fedot/pen/wvzmmbd

Senior Frontend Developer | JavaScript, React, HTML & CSS

11 Dec, 14:23


Marquee

Бегущая строка, выполненная с помощью SCSS, без использования JavaScript

https://codepen.io/mxbck/pen/NWyaPve

Senior Frontend Developer | JavaScript, React, HTML & CSS

10 Dec, 20:08


Menu micro-interaction with CSS

Анимированное меню, выполненное с помощью SVG и SCSS, без использования JavaScript

https://codepen.io/knyttneve/pen/rNJxwGR

Senior Frontend Developer | JavaScript, React, HTML & CSS

09 Dec, 18:13


Flipping Neon - Анимированная сцена, выполненная на чистом CSS, без использования JavaScript

https://codepen.io/danwilson/pen/abqGjVp

Senior Frontend Developer | JavaScript, React, HTML & CSS

08 Dec, 19:46


#вопросы_с_собеседований
Как бы вы объяснили концепцию и применение замыканий (closures) в JavaScript в контексте управления памятью и утечек памяти? Приведите примеры сценариев, где неправильное использование замыканий может привести к утечкам памяти.

Этот вопрос проверяет понимание кандидатом концепции замыканий в JavaScript и их влияние на управление памятью. Замыкания в JavaScript позволяют функции доступ к переменным внешней функции даже после того, как внешняя функция завершила выполнение. Ответ должен включать обсуждение того, как замыкания могут сохранять ссылки на эти переменные, потенциально приводя к утечкам памяти, если они не управляются должным образом. Кандидат должен объяснить, как избежать таких утечек, например, через освобождение ресурсов или избегание ненужных замыканий, особенно в циклах или в обработчиках событий.

Senior Frontend Developer | JavaScript, React, HTML & CSS

07 Dec, 19:12


Форматирование JSON-кода

Вы, вполне вероятно, хорошо знакомы с методом JSON.stringify(). А знаете о том, что с помощью этого метода можно форматировать JSON-код? Это, на самом деле, очень просто.

Метод stringify() принимает три параметра. Это параметры value, replace и space. Два последних параметра в этом списке являются необязательными. Именно поэтому их вы, возможно, раньше не использовали. Для настройки выравнивания JSON-кода необходимо использовать параметр space.

Senior Frontend Developer | JavaScript, React, HTML & CSS

07 Dec, 12:53


🖥 drei — пополняющаяся коллекция функциональных, готовых абстракций для react-three-fiber

npm install @react-three/drei

Здесь можно найти компоненты для самых разных кейсов.

🖥 GitHub

Senior Frontend Developer | JavaScript, React, HTML & CSS

01 Dec, 20:03


Book

Для переворота страницы используется CSS transform: rotate. Логика перелистывания реализована в JS.

https://codepen.io/maxew33/pen/LYjKNVx

Senior Frontend Developer | JavaScript, React, HTML & CSS

30 Nov, 10:31


Menu Animation

Анимация кнопки меню, реализованная с помощью CSS и JavaScript.

https://codepen.io/aaroniker/pen/abzZbzR

Senior Frontend Developer | JavaScript, React, HTML & CSS

28 Nov, 13:27


Неизвестно полезный CSS

В этой статье:

- как перестать вредить пользователям свойствами justify-content и align-items
- недавно появившиеся возможности разделять CSS на части и управлять их приоритетом
- неизвестный нюанс применения псевдокласса :nth-child.

https://habr.com/ru/companies/ruvds/articles/849114/

Senior Frontend Developer | JavaScript, React, HTML & CSS

27 Nov, 14:28


Tab Bar Menu

Переход между элементами реализован при помощи CSS transform.

https://codepen.io/dgknca/pen/ExYGWJw

Senior Frontend Developer | JavaScript, React, HTML & CSS

26 Nov, 14:28


20 функций JavaScript, которые вы, вероятно, никогда не использовали

В этой статье мы на примерах рассмотрим некоторые скрытые возможности JavaScript. Их использование поможет вам писать более чистый и эффективный код и легко справляться со сложными задачами.

https://techrocks.ru/2024/08/22/20-lesser-known-javascript-features/

Senior Frontend Developer | JavaScript, React, HTML & CSS

25 Nov, 19:46


Sibling Gallery

Галлерея фотографий при наведение на одну из фото, она показывается крупнее. Написана на чистом CSS.

https://codepen.io/jh3y/details/xxjxqOL

Senior Frontend Developer | JavaScript, React, HTML & CSS

24 Nov, 18:28


JavaScript. Что будет выведено в консоль?

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

23 Nov, 19:44


HTML5 canvas and javascript fireworks tutorial

Сцена фейерверка на canvas и JS с очень подробными комментариями в коде.

https://codepen.io/programking/pen/AJgeEd

Senior Frontend Developer | JavaScript, React, HTML & CSS

22 Nov, 19:24


Gooey Navigation

Элементы меню — это svg-картинки, стилизованные в SCSS.

https://codepen.io/simeydotme/pen/LYLxJqV

Senior Frontend Developer | JavaScript, React, HTML & CSS

22 Nov, 15:02


Начать изучать frontend-разработку: подборка ресурсов от НИУ ВШЭ

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

- Литература и ресурсы для тех, кто хочет научиться проектировать и разрабатывать сайты
- Вебинар и статья: «Как работает фронтенд: от загрузки сайта до современных инструментов»
- Вебинар «С нуля до frontend-разработчика: введение в frontend и базовые инструменты»
- Вебинар «Как современные библиотеки упрощают жизнь фронтендера»
- Онлайн-курс «Введение в Git»
- Онлайн-интенсив «Frontend с нуля: первый шаг в веб-разработку»

Больше полезных публикаций, вебинаров и мероприятий — в канале Центра непрерывного образования.

Реклама: Федеральное государственное автономное образовательное учреждение высшего образования «Национальный исследовательский университет «Высшая школа экономики».
Erid: 2SDnjf2cs8X

Senior Frontend Developer | JavaScript, React, HTML & CSS

22 Nov, 14:42


React.js — фундаментальный курс от А до Я.

https://youtu.be/GNrdg3PzpJQ

Senior Frontend Developer | JavaScript, React, HTML & CSS

21 Nov, 14:45


Smart Card Holder

Верстка реализована на HTML и SCSS. Анимации созданы библиотекой gsap.

https://codepen.io/visnuravichandran/pen/wvGvpwX

Senior Frontend Developer | JavaScript, React, HTML & CSS

20 Nov, 14:04


Airplane Mode Animation

Самолет анимируется в CSS. Дым за самолетом генерируется и анимируется на JS.

https://codepen.io/jkantner/pen/rNrZqPV

Senior Frontend Developer | JavaScript, React, HTML & CSS

19 Nov, 19:07


Portal scene

3D-модель, выполненная с помощью SCSS и библиотеки Three.js.

https://codepen.io/aderaaij/pen/BapYONL

Senior Frontend Developer | JavaScript, React, HTML & CSS

19 Nov, 14:57


Дайте старт вашей карьере с нашим бесплатным курсом по JavaScript!

🎓 Курс включает 39 уроков, 46 упражнений и 129 тестов для закрепления знаний.

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

💡 Научитесь не только теории, но и применять знания на практике. Поддержка в «Обсуждениях» поможет вам разобраться с темами, которые вызывают трудности.

Обучение с самого нуля, с акцентом на практику. Подходит для начинающих программистов! Добро пожаловать в мир JavaScript😉

Реклама. ООО "ХЕКСЛЕТ РУС". ИНН 7325174845. erid:LjN8JxPzm

Senior Frontend Developer | JavaScript, React, HTML & CSS

19 Nov, 14:05


Gradient Stroke & Bounce 🏀

Градиентный штрих и отскок. Написан на чистом CSS.

https://codepen.io/jkantner/pen/abwgLNX

Senior Frontend Developer | JavaScript, React, HTML & CSS

18 Nov, 12:21


3D Galaxy Particles

Создано на canvas и анимировано с использованием TweenMax.

https://codepen.io/foretoo/details/zYjpYad

Senior Frontend Developer | JavaScript, React, HTML & CSS

17 Nov, 19:36


JavaScript. Что будет выведено в консоль?

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

16 Nov, 19:42


Animated tabs

Меню с анимацией, реализованное с помощью CSS и JavaScript.

https://codepen.io/mr-zouraiz123/pen/eYMjebE

Senior Frontend Developer | JavaScript, React, HTML & CSS

15 Nov, 14:39


Rating

Выставление рейтинга в виде звезд, анимация реализована с помощью библиотеки GSAP.

https://codepen.io/aaroniker/pen/zYrzogx

Senior Frontend Developer | JavaScript, React, HTML & CSS

14 Nov, 19:23


JavaScript. Задача

Ищем блок поврежденных пикселей.

Дана матрица пикселей, где '0' представляет рабочий пиксель, а '1' - поврежденный.

Поврежденные пиксели связаны (т.е. есть только одна поврежденная область на матрице). Пиксели соединены по горизонтали и вертикали.

Также даны два целых числа - x и y - представляющие расположение одного из поврежденных пикселей.

Необходимо найти площадь наименьшего (выровненного по оси) прямоугольника, охватывающего все поврежденные пиксели.

Входные данные:
- Стороны матрицы имеют размер от 1 до 100 пикселей включительно
- Элементы матрицы - символы '0', '1'.

Вывод: площадь наименьшего прямоугольника, охватывающего все поврежденные пиксели.

Пример:

matrix = [
['0','0','1','0'],
['0','1','1','0'],
['0','1','0','0']
].
x = 0, y = 2
Output: 6

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

14 Nov, 14:59


Ищем новичков во фронтенд-разработке и вёрстке сайтов.

Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.

А именно:

- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.

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

Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.

👉 Приходи на бесплатное обучение и зови с собой друзей

Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

Senior Frontend Developer | JavaScript, React, HTML & CSS

14 Nov, 13:23


Как преобразовать двумерный массив в объект в JavaScript?

Двумерный массив может иметь любое количество строк и два столбца. Например:
[
["John", 12],
["Jack", 13],
["Matt", 14],
["Maxx", 15]
]

Как преобразовать такой массив в объект? Рассмотрим способ с методом reduce() на картинке.

Senior Frontend Developer | JavaScript, React, HTML & CSS

14 Nov, 10:49


В жизни каждого разработчика однажды наступает момент, когда перед ним возникает оно… ЛЕГАСИ 👻

Что такое легаси код и откуда он берется? Как обнаружить легаси в проекте? Какую ошибку постоянно совершают лиды? Как предупредить проблему в будущем? Когда стоит отказаться от рефакторинга?

Обо всем этом расскажет лид frontend-разработки Мерка, Никита Шальнев, на онлайн-митапе «Как лиду работать с легаси?»

Встречаемся с вами в 19:00 МСК в канале @merkteam ⬅️

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

Senior Frontend Developer | JavaScript, React, HTML & CSS

14 Nov, 09:50


Bouncy Star Rating

Каждая звезда - это радио-кнопка. При нажатии запускаются CSS анимации, самое лучшее в самом простом.

🌐Ссылка на код

Senior Frontend Developer | JavaScript, React, HTML & CSS

13 Nov, 20:56


Multi-input Maze

Игра-лабиринт, выполненная с помощью CSS и JavaScript. Управление осуществляется с клавиатуры.

https://codepen.io/nitnelav/pen/GRQEadJ

Senior Frontend Developer | JavaScript, React, HTML & CSS

12 Nov, 19:05


Single div CSS - Window

Окно с открывающейся ставней. В HTML - один блок div, все остальное - CSS.

https://codepen.io/armanb/pen/poGXepp

Senior Frontend Developer | JavaScript, React, HTML & CSS

11 Nov, 10:57


Logo animation

Вся сцена состоит из svg-картинки, которая анимируется библиотекой anime.js

https://codepen.io/juliangarnier/pen/oZNYXB

Senior Frontend Developer | JavaScript, React, HTML & CSS

09 Nov, 19:43


Live data

Демонстрация работы графика с автоматическим обновлением данных. Создано с использованием библиотеки amCharts.

https://codepen.io/team/amcharts/pen/MGVbNV

Senior Frontend Developer | JavaScript, React, HTML & CSS

08 Nov, 20:56


JavaScript. Напишите функцию isEmpty(object), которая возвращает true, если у объекта нет свойств. В противном случае функция возвращает false.

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

08 Nov, 15:01


Ждём фронтендеров на Yet Another Frontend Night!

📅 23 ноября мы приглашаем разработчиков интерфейсов провести вечер в офисе Яндекса на Льва Толстого.

О мероприятии:

YAFN — это митап, на котором вы можете послушать экспертов из Яндекса, узнать о вакансиях в наших командах и развлечься в кругу коллег.

Если вы не в Москве, мы всё равно вас ждём — на онлайн-трансляции.

О программе:

🔶 Выступление Руслана Муфтиева, руководителя разработки интерфейсов Ecom-сценариев

🔶 Батл — ведущие эксперты Яндекса попробуют разобраться, должен ли фронтендер понимать продукт и нужны ли ему навыки менеджера

🔶 Презентация вакансий — узнайте, к каким фронтенд-командам можно присоединиться

🔶 Code in the Dark — победитель получит Яндекс Станцию Дуо Макс, а финалисты — станции Лайт 2. А ещё будет «Доббль»!

🔶 Афтерпати и нетворкинг — под закуски, напитки и музыку

🔗 Оставить заявку на участие можно по ссылке. Дождитесь подтверждения вашего участия.

❤️ Ждём вас!

Реклама. ООО "Яндекс", ИНН 7736207543.

Senior Frontend Developer | JavaScript, React, HTML & CSS

08 Nov, 14:26


Jake's Instagram

Карусель создана на чистом CSS. В JS реализована смена цвета при клике.

https://codepen.io/kotAndy/pen/gOBgXvO

Senior Frontend Developer | JavaScript, React, HTML & CSS

07 Nov, 19:19


Arc Time Slider

Это кастомный слайдер, разработанный с использованием веб-технологий HTML, SCSS и JS. Этот уникальный слайдер добавляет интересный и инновационный элемент управления на вашем веб-сайте.

🌐Ссылка на код

Senior Frontend Developer | JavaScript, React, HTML & CSS

07 Nov, 14:57


🚀 Вебинар: Погружение в децентрализованные технологии🚀

Узнайте, как использовать Solidity для создания продвинутых dApp. Этот вебинар важен для понимания текущего состояния и потенциала Web3, что критично для разработчиков в освоении Solidity и создании продвинутых dApp.

Дата и время: 11.11.2024 в 20:00 (мск)

На уроке будет:
- Обсуждение базовых технологий, включая блокчейн и смарт-контракты
- Представление и анализ нескольких децентрализованных приложений
- Рассмотрение успешных кейсов использования Solidity
- Обсуждение безопасности
- Прогнозы и перспективы развития децентрализованных технологий

В результате участники получат актуальные знания о применении Solidity в разработке современных dApp.

Не упустите возможность узнать больше о dApp и их потенциале!

👉 Зарегистрируйтесь для участия: https://otus.pw/OgxB/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Senior Frontend Developer | JavaScript, React, HTML & CSS

06 Nov, 20:09


Glowy hover effect

В JS создана логика наложения маски на карточку при наведении. Отлично подойдет для коммерческого сайта, приятное восприятие.

🌐Ссылка на код

Senior Frontend Developer | JavaScript, React, HTML & CSS

05 Nov, 12:16


Как работает код, который спит месяц

Смотреть статью

Senior Frontend Developer | JavaScript, React, HTML & CSS

04 Nov, 19:24


JavaScript. Что выведет alert (ИЛИ)?

Ответ: 2. Это первое значение, которое в логическом контексте даст true.

Senior Frontend Developer | JavaScript, React, HTML & CSS

03 Nov, 17:51


JavaScript. Что будет выведено в консоль?

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

03 Nov, 15:48


Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день.

Присоединяйтесь: @FrontendPortal

Senior Frontend Developer | JavaScript, React, HTML & CSS

02 Nov, 11:01


Neon Effect Arrow

Анимация стрелки с неоновым эффектом Pure, реализована с помощью CSS.

https://codepen.io/designtorch2020/details/NWBQJOq

Senior Frontend Developer | JavaScript, React, HTML & CSS

01 Nov, 12:20


Typing Effect

Эффект последовательного ввода букв, реализованный в JS.

https://codepen.io/Coding_Journey/pen/BEMgbX

Senior Frontend Developer | JavaScript, React, HTML & CSS

31 Oct, 14:09


Создание компонента React для загрузки изображений

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

https://dev-gang.ru/article/sozdanie-komponenta-react-dlja-zagruzki-izobrazhenii-tqnvuuf57i/

Senior Frontend Developer | JavaScript, React, HTML & CSS

29 Oct, 19:10


Создание аналога slideToggle() на чистом JavaScript

В этой статье рассмотрим, как реализовать аналог jQuery метода slideToggle() на чистом JavaScript.

https://itchief.ru/javascript/slidetoggle

Senior Frontend Developer | JavaScript, React, HTML & CSS

29 Oct, 15:05


Срочно❗️ Нужны люди, которые имеют минимальный опыт в IT. Покажем, как освоить профессию "Frontend" с зп от 150.000 ₽. Обучение с нас бесплатно!
График: 2-3 часа или полный день, на выбор.

Frontend-разработчик (frontend developer) — это специалист, который отвечает за создание пользовательского интерфейса сайта, приложения или ПО.

Для вас:
1) Удаленная работа
2) Свободный график

Можно совмещать с основной работой🔥

✔️Не нужно что-то продавать или привлекать людей.
✔️За полгода вполне реально вырасти до зп в 300.000 рублей и больше денег.
✔️Мы научим вас искать клиентов, так что у вас уже будет работа.

Сперва проводим бесплатный вводный урок:
👉 Регистрация на урок

На уроке расскажем:

— чем занимается Fronted-разработчик и за что ему готовы платить
— зарплатные вилки разных специалистов от стажёра до тимлида
— сколько времени нужно на обучение и стажировку
— 8 шагов, чтобы стать frontend-разработчиком

Если хотите попробовать себя в одной из самых востребованных профессий в 2024 году, то это ваш шанс! С нами вы сможете научиться этому быстро и уже через пару месяцев найти первых клиентов, а мы с этим поможем!

Регистрируйтесь на бесплатный вводный урок по профессии:
👉 Зарегистрироваться

Senior Frontend Developer | JavaScript, React, HTML & CSS

28 Oct, 18:59


JavaScript. Напишите функцию sumTo(n), которая будет вычислять сумму чисел 1 + 2 + ... + n.

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

28 Oct, 14:06


#вопросы_с_собеседований
Какие значения в JS являются ложными?

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

Senior Frontend Developer | JavaScript, React, HTML & CSS

27 Oct, 18:12


#вопросы_с_собеседований
Объясните стрелочные функции.

Стрелочная функция – это краткий способ записи функциональных выражений.

Стрелочные функции не являются конструкторами, не поддерживают ключевые слова this, arguments, super и new.target и записываются так, как показано на картинке.

Senior Frontend Developer | JavaScript, React, HTML & CSS

26 Oct, 18:36


#вопросы_с_собеседований
Реализовать аналог Function.prototype.bind.

С появлением Rest parameters реализация этой задачи стала чуть проще, чем прежде, когда приходилось делать arguments.slice.

Senior Frontend Developer | JavaScript, React, HTML & CSS

25 Oct, 15:08


Что будет на выходе?

Ответ: 0

Senior Frontend Developer | JavaScript, React, HTML & CSS

24 Oct, 16:17


#вопросы_с_собеседований
Как следует оформлять страницу, содержимое которой может быть на разных языках?

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

Когда к серверу делается HTTP-запрос, то браузер пользователя обычно отсылает информацию о предпочитаемом языке в заголовке Accept-Language. Сервер может использовать эту информацию, чтобы вернуть версию документа на подходящем языке, если такая возможность есть. В возвращённом HTML-документе обязательно должен быть указан атрибут lang у тега <html>, к примеру <html lang="en">...</html>.

На бэкенде HTML-разметка будет содержать плейсхолдер i18n, а контент для конкретного языка будет храниться в YAML- или JSON-формате. Сервер динамически формирует HTML-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.

Senior Frontend Developer | JavaScript, React, HTML & CSS

23 Oct, 08:04


Card Outer GLow Effect

Эффект свечения создается при помощи CSS box-shadow.

https://codepen.io/lincohn/pen/JjPZgXw

Senior Frontend Developer | JavaScript, React, HTML & CSS

22 Oct, 17:08


JavaScript. Что будет выведено в консоль?

Ответ

Senior Frontend Developer | JavaScript, React, HTML & CSS

21 Oct, 06:38


Temperature displays

Индикаторы - это svg-картинки, параметры которых задаются в JS.

https://codepen.io/uchardon/pen/GRRRQpK

Senior Frontend Developer | JavaScript, React, HTML & CSS

20 Oct, 05:42


Текст-тянучка

Текст с интересной анимацией. Сделано на CSS и JavaScript.

https://codepen.io/jomacz/pen/MWZKKEY

Senior Frontend Developer | JavaScript, React, HTML & CSS

18 Oct, 11:44


load

Событие load происходит, когда загрузилась и HTML страница, и все ресурсы для её отображения пользователю: стили, картинки и другое.

Событие load гарантирует, что браузер отображает страницу полностью: все стили и картинки готовы, размеры элементов на странице посчитаны верно и доступны.

🌐Ссылка на статью

Senior Frontend Developer | JavaScript, React, HTML & CSS

17 Oct, 10:36


CodePen Loader

Анимированная загрузка в стиле CodePen, реализованная на CSS и SVG, без применения JavaScript

https://codepen.io/leimapapa/pen/BaPRZRo

Senior Frontend Developer | JavaScript, React, HTML & CSS

16 Oct, 18:28


Pulsing Rainbow Loading Spinner

Анимированная загрузка, реализованная на SCSS, без применения JavaScript

https://codepen.io/designcouch/pen/QWZyQbp

Senior Frontend Developer | JavaScript, React, HTML & CSS

16 Oct, 14:39


Получаете зарплату в криптовалюте? 💸

IT-специалисты, это для вас!

Многие компании предлагают оплату труда в криптовалюте, но как ее удобно и безопасно обменять на фиатные деньги?

С помощью Exnode вы можете обменять криптовалюту на наличные быстро и надежно!

1. Перейдите на Exnode
2. Выберите ваш город
3. Выберите обменник с выгодным курсом.
4. Оставьте заявку.
5. Получите наличные в офисе в вашем городе.

Преимущества:

Анонимные сделки: Совершайте обмен криптовалюты, не раскрывая личные данные.
Проверенные обменники: Exnode сотрудничает только с надежными и проверенными сервисами.
Безопасность и конфиденциальность: Ваша информация и сделки защищены.

Подписывайтесь на телеграм-канал Exnode, чтобы быть в курсе всех новостей мира криптовалют!

Senior Frontend Developer | JavaScript, React, HTML & CSS

16 Oct, 07:26


Screenfull

Используйте Screenfull.js, чтобы добавить полноэкранный элемент в свой проект. Благодаря впечатляющей кроссбраузерности, у вас не возникнет проблем при использовании этой библиотеки JavaScript.

Особенности:
— Полноэкранный просмотр страницы или элемента
— Скрыть пользовательский интерфейс навигации на мобильных телефонах
— Добавьте полноэкранные элементы, используя jQuery и Angular.
— Обнаруживает полноэкранные изменения, ошибки и т.д.

GitHub: https://github.com/sindresorhus/screenfull

Senior Frontend Developer | JavaScript, React, HTML & CSS

15 Oct, 17:12


Animated Windows XP Shutdown Icons

Анимированные иконки выключения из Windows XP, реализованные на CSS и SVG, с применением JavaScript

https://codepen.io/jkantner/pen/oNPRMQY

Senior Frontend Developer | JavaScript, React, HTML & CSS

15 Oct, 15:11


Какой он, отличный день для Frontend-разработчиков? 🤔

21 сентября на A?.Frontend Day мы вместе с сотней IT-специалистов создали именно такую атмосферу! Офлайн в Москве и онлайн это событие собрало тех, кто готов делиться опытом и узнавать новое.

🌟 Что было:
Вадим Царегородцев из Ostrovok.ᅠru представил Valibot — инновационный инструмент для гибкой и безопасной валидации данных в JavaScript.
Сергей Попов из Skillbox раскрыл методы преодоления проблем внедрения изменений в компаниях.
Никита Мамизеров рассказал о сложностях и успехах внедрения BDUI в Альфа-Онлайн.
Никита Ульшин из Т-Банка поделился паттернами отказоустойчивости, помогающими минимизировать риски.
Андрей Смирнов из X5 Tech рассмотрел карьерные ловушки для тимлидов и объяснил, как их избежать.
Евгений Смирнов из Альфа-Банка провёл дискуссию о том, как ИИ и Copilot меняют разработку и что ждёт программирование в будущем.

И это только часть того, что происходило на A?.Frontend Day! А ещё были квизы, розыгрыши подарков и афтепати с нетворкингом.

Хотите увидеть, как это было? Переходите по ссылке и смотрите подробный отчёт с мероприятия!❤️

Senior Frontend Developer | JavaScript, React, HTML & CSS

15 Oct, 13:32


Colorful Theme Switch

Анимированный переключатель цветовой темы, реализованный на CSS и SVG, без применения JavaScript

https://codepen.io/jkantner/pen/eYPYppR

Senior Frontend Developer | JavaScript, React, HTML & CSS

15 Oct, 11:23


Бесплатный практический вебинар: Профессия «Frontend-разработчик».

Когда: 17 октября в 19:00 по мск.

Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере 🎮

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

Какие JS фреймворки учить: Vue, React, а может, Angular?

Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.

🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  Карта компетенций начинающего Frontend-разработчика.

Senior Frontend Developer | JavaScript, React, HTML & CSS

15 Oct, 05:03


Clocktober day 21: Perspective - Стильные часы для вашего сайта

https://codepen.io/jkantner/pen/BaMazpK

Senior Frontend Developer | JavaScript, React, HTML & CSS

14 Oct, 20:01


🎮 Interactive Super Mario - анимация Super Mario, выполненный с помощью SCSS и JavaScript. Управление осуществляется с помощью клавиатуры

https://codepen.io/merchedev/pen/BaYqyNx

Senior Frontend Developer | JavaScript, React, HTML & CSS

13 Oct, 18:04


Красивая платежная форма на JS с валидацией правильности заполнения полей.

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

https://codepen.io/myacode/pen/ExPOdBd

Senior Frontend Developer | JavaScript, React, HTML & CSS

12 Oct, 17:00


Кофе по SSH, сайты в zip-архивах. Чистый HTML лучше всего

Смотреть статью

Senior Frontend Developer | JavaScript, React, HTML & CSS

12 Oct, 15:00


Главная конференция по бизнесу в Telegram

31 октября в Москве пройдёт первая конференция по Telegram от крупнейшего сервиса аналитики Telemetr. Топы Телеграм-рынка, маркетологи и представители бизнеса обсудят самые актуальные тенденции и перспективы развития платформы Telegram.

Присоединиться к мероприятию можно будет и онлайн. Тут найдёте всю информацию - https://telemetr.pro.

На конференции вас ждут:
- 20+ опытных спикеров
- 1000+ онлайн и офлайн участников
- две сцены
- нетворкинг активности
- лаунж зона
- вкусный фуршет
- яркое afterparty в PAPA Moscow

Спикерами главной сцены будут: Артемий Лебедев, руководитель Telemetr - Денис Ларионов, основатель агентства GoDigital - Сурен Альбертян, основатель Сидорин ЛАБ - Дмитрий Сидорин и многие другие!

За подробностями сюда - https://telemetr.pro

А купить билет со скидкой в 10% можно, использовав наш промокод - TMConf10

Купить билет - https://telemetr.pro

Senior Frontend Developer | JavaScript, React, HTML & CSS

12 Oct, 14:36


Letter Animation

Анимация букв при нажатии. Реализована с помощью JavaScript и CSS.

https://codepen.io/FlorinPop17/pen/WEBNyx

Senior Frontend Developer | JavaScript, React, HTML & CSS

11 Oct, 17:23


Пикачу в коробке

Пикачу в коробке отрисован и анимирован с помощью чисто CSS. Отдельные элементы графики сделаны с помощью DIV’ов и затем стилизованы.

Чтобы запустить анимацию нужно нажать на верх коробки и потянуть курсов в сторону. Попробуйте сами. Там же вы найдёте код проекта:

https://codepen.io/maxi83c/pen/JjOZdWX