❓Что будет на выходе?
const num = 8;
const obj = {
num: 10,
inner: {
num: 6,
getNum: function() {
return this.num;
}
}
};
console.log(obj.inner.getNum());
const getNum = obj.inner.getNum;
console.log(getNum());
Ответ: 6 undefined
🖥 JavaScript test // чат
const num = 8;
const obj = {
num: 10,
inner: {
num: 6,
getNum: function() {
return this.num;
}
}
};
console.log(obj.inner.getNum());
const getNum = obj.inner.getNum;
console.log(getNum());
Ответ: 6 undefined
Please open Telegram to view this post
VIEW IN TELEGRAM
Наблюдение за изменением размера любого элемента!
Есть нативный инструмент
Достаточно наблюдать за элементом:
Теперь любое изменение его ширины или высоты - мгновенно вызывает
Можно остановить наблюдение:
🖥 JavaScript test // чат
Есть нативный инструмент
ResizeObserver, который реагирует именно на изменение размеров конкретного элемента:const ro = new ResizeObserver(entries => {
const rect = entries[0].contentRect;
console.log('width:', rect.width, 'height:', rect.height);
});Достаточно наблюдать за элементом:
ro.observe(document.querySelector('#box'));Теперь любое изменение его ширины или высоты - мгновенно вызывает
callback.Можно остановить наблюдение:
ro.disconnect();
ResizeObserver даёт контроль над размерами элементов и позволяет строить предсказуемые, адаптивные интерфейсы.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Вот отсортированная база с тонной материала (постепенно пополняется):
(363 видео, 87 книги) — Python
(117 видео, 53 книги) — ВАЙБКОД
(174 видео, 91 книги) — DevOps
(415 видео, 68 книги) — Frontend
(137 видео, 93 книги) — DS/ML
(143 видео, 33 книги) — ИБ/Хакинг
(352 видео, 89 книги) — С/С++/C#
(343 видео, 87 книги) — Java/QA
(176 видео, 32 книги) — Git/Linux
(167 видео, 53 книги) — PHP/1С
(227 видео, 83 книги) — SQL/БД
(114 видео, 77 книги) — Сисадмин
(107 видео, 43 книги) — BA/SA
(181 видео, 32 книги) — Go/Rust
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(113 видео, 82 книги) — GameDev
(183 видео, 37 книги) — Дизайн
(136 видео, 33 книги) — PM/HR
Скачивать ничего не нужно — все выложили в Telegram
Please open Telegram to view this post
VIEW IN TELEGRAM
Использование Proxy для валидации объектов
🖥 JavaScript test // чат
Proxy позволяет перехватывать и изменять операции над объектом, в данном случае используется для валидации значений.Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
🧩Что будет на выходе?
function Animal() {}
function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
const rover = new Dog();
console.log(rover.constructor === Animal);
console.log(rover.constructor === Dog);
console.log(Dog.prototype.isPrototypeOf(rover));
console.log(Animal.prototype.isPrototypeOf(rover));
Ответ:true, false, true, true
🖥 JavaScript test // чат
function Animal() {}
function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
const rover = new Dog();
console.log(rover.constructor === Animal);
console.log(rover.constructor === Dog);
console.log(Dog.prototype.isPrototypeOf(rover));
console.log(Animal.prototype.isPrototypeOf(rover));
Ответ:
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Получаем предыдущий и следующий элементы в массиве — будто «крутим карусель»
Иногда нужно перемещаться по массиву: переключать слайды, шагать по списку товаров, листать подсказки. Сделаем мини-утилиту, которая даёт соседние элементы по индексу.
Базовая функция:
Использование:
Сделаем версию с циклическим режимом — как в каруселях:
Использование:
Мини-инструмент, который сильно упрощает навигацию по массивам: слайдеры, шаговые формы, клавиатурная навигация, циклические списки — всё становится на порядок чище.
🖥 JavaScript test // чат
Иногда нужно перемещаться по массиву: переключать слайды, шагать по списку товаров, листать подсказки. Сделаем мини-утилиту, которая даёт соседние элементы по индексу.
Базовая функция:
function neighbors(arr, index) {
return {
prev: arr[index - 1] ?? null,
next: arr[index + 1] ?? null
};
}Использование:
const items = ["A", "B", "C", "D"];
console.log(neighbors(items, 1));
// { prev: "A", next: "C" }
Сделаем версию с циклическим режимом — как в каруселях:
function cycleNeighbors(arr, index) {
const len = arr.length;
return {
prev: arr[(index - 1 + len) % len],
next: arr[(index + 1) % len]
};
}Использование:
console.log(cycleNeighbors(items, 0));
// { prev: "D", next: "B" }
Мини-инструмент, который сильно упрощает навигацию по массивам: слайдеры, шаговые формы, клавиатурная навигация, циклические списки — всё становится на порядок чище.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
❗️Что будет на выходе?
function delayedLog(item) {
setTimeout(() => {
console.log(item);
}, 1000);
}
for (var i = 0; i < 3; i++) {
delayedLog(i);
}
Ответ:0 1 2
🖥 JavaScript test // чат
function delayedLog(item) {
setTimeout(() => {
console.log(item);
}, 1000);
}
for (var i = 0; i < 3; i++) {
delayedLog(i);
}
Ответ:
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Универсальное чтение файлов: текст, JSON и бинарные данные!
Когда пользователь загружает файл обычно начинают писать разные обработчики. Получается много дублирования.
Можно сделать универсальный ридер:
Теперь можно читать файл как текст:
Читаем как
Читаем картинку в виде
Читаем бинарные данные:
🖥 JavaScript test // чат
Когда пользователь загружает файл обычно начинают писать разные обработчики. Получается много дублирования.
Можно сделать универсальный ридер:
const readFile = (file, as = 'text') =>
new Promise(r => {
const fr = new FileReader();
fr.onload = () => r(fr.result);
fr[`readAs${as[0].toUpperCase() + as.slice(1)}`](file);
});
Теперь можно читать файл как текст:
const txt = await readFile(file, 'text');
Читаем как
JSON:const obj = JSON.parse(await readFile(file, 'text'));
Читаем картинку в виде
base64:const base64 = await readFile(file, 'dataURL');
Читаем бинарные данные:
const buf = await readFile(file, 'arrayBuffer');
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Алгоритмы и структуры данных с примерами на JavaScript
➡️ Читать статью
🖥 JavaScript test // чат
В этом репозитории лежат JS-примеры реализаций многих популярных алгоритмов и структур данных.
Каждый алгоритм и структуру данных можно изучить подробнее, кликнув по гиперу;
Всё сопровождается подробными пояснениями и ссылками на материалы для дальнейшего изучения.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования:
Выбирай своё направление:
Please open Telegram to view this post
VIEW IN TELEGRAM
❓Что будет на выходе?
var a = 1;
function scopeQuiz() {
console.log(a);
var a = 2;
}
scopeQuiz();
Ответ:undefined
JavaScript test | ChatGPT
var a = 1;
function scopeQuiz() {
console.log(a);
var a = 2;
}
scopeQuiz();
Ответ:
JavaScript test | ChatGPT
👍2
Обработка исключений на JS – неудобная, но не безнадежная
➡️ Читать статью
🖥 JavaScript test // чат
Автор этой статьи рассказывает про работу с исключениями в JavaScript.
Помимо привычных способов обработки исключений, он также приводит и альтернативные способы, чтобы показать, как сделать её не такой безнадёжной.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
🔥Что будет на выходе?
const x = [1, 2, 3];
const y = x;
y.push(4);
console.log(x);
Ответ:[1, 2, 3, 4]
JavaScript test | ChatGPT
const x = [1, 2, 3];
const y = x;
y.push(4);
console.log(x);
Ответ:
JavaScript test | ChatGPT
👍2
Шпаргалка по JS-методам для работы с DOM
➡️ Читать статью
🖥 JavaScript test // чат
Автор этой статьи сделал подробную и понятную шпаргалку по методам JavaScript для работы с DOM (объектной моделью документа).
Совет: для того, чтобы получить максимальную пользу от данной шпаргалки, пишите код вместе с автором и внимательно следите за тем, что происходит в консоли инструментов разработчика и на странице.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
🔨Что будет на выходе?
const product = {
name: "Laptop",
price: 1000,
discount: function(percentage) {
return this.price * (percentage / 100);
}
};
const result = product.discount(10);
console.log(result);
Ответ:100
JavaScript test | ChatGPT
const product = {
name: "Laptop",
price: 1000,
discount: function(percentage) {
return this.price * (percentage / 100);
}
};
const result = product.discount(10);
console.log(result);
Ответ:
JavaScript test | ChatGPT
👍2
Совет по JavaScript:
Можно использовать метод console.table(), чтобы вывести табличные данные в виде таблицы в консоли.
Ты, скорее всего, каждый день пользуешься console.log().
Но знаешь ли ты, что у объекта console есть и другие полезные методы — например, console.table() и console.error()?
➡️ Читать статью
🖥 JavaScript test // чат
Можно использовать метод console.table(), чтобы вывести табличные данные в виде таблицы в консоли.
Ты, скорее всего, каждый день пользуешься console.log().
Но знаешь ли ты, что у объекта console есть и другие полезные методы — например, console.table() и console.error()?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Каждый JavaScript-разработчик хотя бы раз писал ${name} в обычных кавычках, сохранял файл и видел вместо Hello John просто "Hello ${name}". Потом, конечно, стирал и перепечатывал всё с обратными кавычками.
Теперь об этом можно забыть. Новое расширение Quotick автоматически заменяет обычные кавычки на обратные, как только вы вводите ${}.
Никаких настроек, команд или меню — всё происходит мгновенно и незаметно.
Работает с JS, TS, JSX и TSX
Понимает контекст (не трогает комментарии, импорты и другие строки)
Маленькое улучшение, которое реально экономит время и бережёт нервы
➡️ Ссылка на Github
🖥 JavaScript test // чат
Теперь об этом можно забыть. Новое расширение Quotick автоматически заменяет обычные кавычки на обратные, как только вы вводите ${}.
Никаких настроек, команд или меню — всё происходит мгновенно и незаметно.
Работает с JS, TS, JSX и TSX
Понимает контекст (не трогает комментарии, импорты и другие строки)
Маленькое улучшение, которое реально экономит время и бережёт нервы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Универсальное чтение файлов: текст, JSON и бинарные данные!
Когда пользователь загружает файл обычно начинают писать разные обработчики. Получается много дублирования.
Можно сделать универсальный ридер:
Теперь можно читать файл как текст:
Читаем как
Читаем картинку в виде
Читаем бинарные данные:
🖥 JavaScript test // чат
Когда пользователь загружает файл обычно начинают писать разные обработчики. Получается много дублирования.
Можно сделать универсальный ридер:
const readFile = (file, as = 'text') =>
new Promise(r => {
const fr = new FileReader();
fr.onload = () => r(fr.result);
fr[`readAs${as[0].toUpperCase() + as.slice(1)}`](file);
});
Теперь можно читать файл как текст:
const txt = await readFile(file, 'text');
Читаем как
JSON:const obj = JSON.parse(await readFile(file, 'text'));
Читаем картинку в виде
base64:const base64 = await readFile(file, 'dataURL');
Читаем бинарные данные:
const buf = await readFile(file, 'arrayBuffer');
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Уже очевидно, что ВАЙБКОДИНГ — главный навык ближайших лет
Посмотрите сами. ИИ уже забирает на себя работу целых команд: пишет код, закрывает задачи джунов и позволяет стартапам запускать продукты в 2–3 раза меньшим составом. То, на что раньше нужны были несколько разработчиков, сегодня всё чаще делает один человек с ИИ-агентами.
И это только начало. Те, кто освоит вайбкодинг сейчас, смогут быстрее запускать проекты, автоматизировать огромный объём работы, увереннее конкурировать на рынке и зарабатывать больше тех, кто продолжает делать всё вручную.
Начать с нуля поможет канал Вайб-кодинг. Там ребята круглосуточно мониторят более 320 российских и зарубежных источников и публикуют только главное: релизы, инструменты, гайды, курсы и практические кейсы.
Подписывайтесь, нас уже 60 тысяч: @vibecoding_tg
Посмотрите сами. ИИ уже забирает на себя работу целых команд: пишет код, закрывает задачи джунов и позволяет стартапам запускать продукты в 2–3 раза меньшим составом. То, на что раньше нужны были несколько разработчиков, сегодня всё чаще делает один человек с ИИ-агентами.
И это только начало. Те, кто освоит вайбкодинг сейчас, смогут быстрее запускать проекты, автоматизировать огромный объём работы, увереннее конкурировать на рынке и зарабатывать больше тех, кто продолжает делать всё вручную.
Начать с нуля поможет канал Вайб-кодинг. Там ребята круглосуточно мониторят более 320 российских и зарубежных источников и публикуют только главное: релизы, инструменты, гайды, курсы и практические кейсы.
Подписывайтесь, нас уже 60 тысяч: @vibecoding_tg
25 готовых программ на JavaScript
В статье собрано 25 готовых программ на JS, которые помогут улучшить навыки и продемонстрировать вам, как эффективно решать различные задачи.
Есть проги, созданные как с помощью Vanilla JS, так и с использованием популярных фреймворков.
Сначала идёт описание проектов, а после код, на случай, если вы хотите сделать проекты самостоятельно.
🖥 JavaScript test // чат
В статье собрано 25 готовых программ на JS, которые помогут улучшить навыки и продемонстрировать вам, как эффективно решать различные задачи.
Есть проги, созданные как с помощью Vanilla JS, так и с использованием популярных фреймворков.
Сначала идёт описание проектов, а после код, на случай, если вы хотите сделать проекты самостоятельно.
Please open Telegram to view this post
VIEW IN TELEGRAM