Javascript Pro
2.44K subscribers
172 photos
30 videos
116 links
Канал для начинающих JavaScript разработчиков. Если вы приступаете к изучению JS - этот канал для вас.

Админ: @anothertechrock
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Variable Fonts and the Web Audio API

Демонстрация Web Audio API, изменяющая переменные шрифты на основе аудиовхода. Реализована с помощью JavaScript.

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

Ответ
Стек вызовов JavaScript: объяснение с помощью иллюстраций

Стек представляет собой структуру данных, организованных по принципу LIFO, т.е. в порядке обратной очередности (last-in — first-out, последним вошел — первым вышел). Давайте посмотрим, как это работает в JS.

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

Ответ
JavaScript Design Patterns

Автор: Hugo Di Francesco
Год издания: 2024

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

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

#js #ru
👏1
Ребят, возвращаемся к рабочему режиму. 2 года однотипных постов прошло.

Будем создавать топовое комьюнити по фронтент разработке. Концентрация теперь будет на этом канале, работа в найме закончилась, могу себе позволить. 🙈

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

P.S сори что ночью)
👍30🎉82🔥1
🤔 Что такое цепочка прототипов?

Это механизм в JavaScript, который обеспечивает наследование между объектами.
Каждый объект имеет ссылку на свой прототип, где ведётся поиск методов или свойств, если их нет у самого объекта.
Поиск продолжается вверх по цепочке, пока не будет найдено свойство или достигнут null.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу Frontend книг
Please open Telegram to view this post
VIEW IN TELEGRAM
3👌2👍1🔥1
🧩 Разбивай задачи, даже если они кажутся простыми

Думал, что закроешь задачу за пару часов, а в итоге весь день потратил на разбор сложных деталей?

👉 Совет: перед тем как писать код, распредели задачу на маленькие шаги. Даже простая фича может скрывать кучу подводных камней. Чем точнее разбиение, тем проще двигаться и не тонуть в хаосе.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32
👩‍💻 Signature animation

Поле для ввода подписи с интересной анимацией. Сделана на SVG, CSS и JavaScript.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
🤔 Как развернуть строку в JS?

Можно воспользоваться методами работы с массивами.
Сначала строка преобразуется в массив символов с помощью split(''), затем массив разворачивается с помощью reverse(), и в конце собирается обратно в строку с помощью join('').
Это стандартный и удобный способ для выполнения такой операции.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу Frontend книг
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
👩‍💻 13 приемов CSS, которые изменят твой подход к верстке

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥51
Как устроен JavaScript.

Автор:
Крокфорд Дуглас
Год издания: 2019

#js #ru

Скачать книгу
👍1
🤔 Каким образом HTML превращается в страницу?

1. Загрузка: Браузер загружает HTML-документ.
2. Парсинг: HTML разбивается на DOM (Document Object Model).
3. Стилизация: CSS применяется к элементам DOM.
4. Рендеринг: Браузер рендерит элементы на странице, создавая визуальное представление.


Ставь 👍 если знал ответ, 🔥 если нет

Забирай 📚 Базу Frontend книг
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Область видимости и замыкания

Автор:
Кайл Симпсон
Год издания: 2022

#js #ru

Скачать книгу
👍2
👩‍💻 Реализация кнопки с таймером блокировки

Создайте кнопку, которая становится недоступной (disabled) на 5 секунд после каждого нажатия. Отображайте обратный отсчёт времени на кнопке, чтобы пользователь видел, когда её можно будет нажать снова.

Ожидаемое поведение:

При нажатии на кнопку она становится недоступной.
На кнопке отображается обратный отсчёт времени: 5... 4... 3....
Через 5 секунд кнопка снова становится активной и текст возвращается в исходное состояние.

Решение задачи🔽

<button id="timer-button">Нажми меня</button>


#timer-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

#timer-button:disabled {
background-color:
#ccc;
cursor: not-allowed;
}


const button = document.getElementById('timer-button');

button.addEventListener('click', () => {
let countdown = 5;

// Деактивируем кнопку и запускаем таймер
button.disabled = true;
const interval = setInterval(() => {
button.textContent = `Ждите... ${countdown}`;
countdown--;

if (countdown < 0) {
clearInterval(interval);
button.disabled = false;
button.textContent = 'Нажми меня';
}
}, 1000);
});
Please open Telegram to view this post
VIEW IN TELEGRAM
👌31
🤔 Не кодь уставшим — всё равно переделаешь

Работать на пределе сил кажется продуктивным, но на деле это путь к багам и костылям.

👉 Совет: если чувствуешь, что мысли путаются, а ошибки валятся одна за другой — лучше сделай перерыв. 15 минут отдыха полезнее, чем 2 часа попыток «дожать» задачу в состоянии зомби.
Please open Telegram to view this post
VIEW IN TELEGRAM
💯7