Веб-страница
24.3K subscribers
1.72K photos
527 videos
1 file
3.91K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Тренажёр по промисам

Если вы, как и я, хотите лучше разбираться в промисах в JS, то я к вам с хорошими новостями. Нашёл репозиторий с тренажёром, который поможет отточить навыки. Тут куча упражнений, которые вам помогут. А встроенные тесты сразу покажут результат.

Лежит тут: https://github.com/henriqueinonhe/promises-training

#javascript #тренажер
🔥18👍1
От массивов до объектов в JavaScript: пособие для новичков

Базовая статья для новичков в JS. Как работают объекты, зачем нужны, в чём их прелесть и как они помогают организовавывать и обрабатывать данные? Всё по ссылке.

#javascript
👍6🔥1
Какие базовые способы объявления функции в JS вы знаете?

Существуют четыре базовых способа:

1️⃣ Function Declaration
function sum(a, b) { return a + b } — поднимается (hoisting), имя видно во всей области видимости.

2️⃣ Function Expression
const sum = function (a, b) { … } — выражение, часто анонимное; удобно передавать как значение. Есть вариант с именем для лучших стектрейсов.

3️⃣ IIFE (немедленно вызываемое выражение)
(function () { /* изоляция */ })() — исторический способ создать локальную область.

4️⃣ Стрелочные функции
const inc = x => x + 1 — короткий синтаксис, лексический `this` и `arguments`, нет собственного prototype, нельзя вызывать через new. Отличный вариант для коллбеков и замыканий.


#вопросответ #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
👎7👍6🔥21
Полный разбор THIS в JavaScript за 26 минут

Этот ролик — полный гайд по this в JS. Из него вы узнаете про:

🔘 this в глобальной области видимости (объекты Window и Global);
🔘 this в обычных функциях;
🔘 this в функциях-конструкторах;
🔘 особенности this в стрелочных функциях;
🔘 this в forEach и setTimeout.

И многое другое – с объяснением и примерами.

#видео #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
👍64
Что такое замыкания в JavaScript?

Замыкание в JavaScript — это функция, которая «помнит» свою внешнюю область видимости, даже если она выполняется вне неё.

Пример:

function makeCounter() {
let count = 0
return function() {
count++
return count
}
}

const counter = makeCounter()
console.log(counter()) // 1
console.log(counter()) // 2

Здесь внутренняя функция получает доступ к переменной count из makeCounter, хотя та уже завершила выполнение.

Зачем нужно:

— хранить состояние между вызовами без глобальных переменных;
— создавать приватные данные;
— передавать функции с «захваченным» контекстом.


#вопросответ #javascript
🔥9👍7🤔4
«Хватит писать try/catch вокруг fetch: история о том, как я устал ловить ошибки»

Этот мем смешной, пока не осознаешь, что в реальных проектах мы именно так и поступаем. Только заворачиваем не весь код сразу, а каждый HTTP-запрос по отдельности.

Пишешь fetch и рефлекторно добавляешь try/catch. Где-то словил TypeError, где-то таймаут, где-то сервер вернул 500. В итоге половина кода превращается в кашу проверок, а другая половина — в обработчики ошибок. Но проблема не в том, что мы ловим ошибки. Проблема в том, что fetch заставляет нас их ловить везде и всегда.

Библиотека safe-fetch решает эту проблема. Её задача проста: убрать try/catch из проектов навсегда. Как это работает и какие плюсы дает — в материале.

#библиотека #javascript
🔥7
Делегирование событий в JavaScript: когда обычного всплытия недостаточно

По мере роста фронтенд-приложений управление пользовательскими взаимодействиями становится все более важным. Добавление обработчика событий на каждый интерактивный элемент — плохая практика: это усложняет код, увеличивает расход памяти и снижает производительность. Здесь на помощь приходит делегирование событий (event delegation).

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

#javascript
👍4🤔31
Деструктуризация в JavaScript

Деструктуризация — это удобный инструмент получения данныхв JS. Он позволяет «распаковывать» сразу много значений из массивов или объектов во множество переменных. Это, например, активно используется в React-хуках.

Простейший пример:

const timers = [10, 20, 30];
const [first, second, third] = timers;


Здесь мы одной строкой задаем значения из массива сразу трём переменным — first, second, third.

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

#javascript #основы
5👍4👎1
Современный способ разработки серверов на JS

Ели вы когда-нибудь заходили на главную страницу Node, то наверняка видели этот кусок кода с картинки. Это самый простой веб-сервер, с которого сегодня начинается почти каждый сервер, написанный на JS. Да, это всё может быть прикрыто фреймворком, но по сути, все такие сервера делают примерно одно и то же.

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

#nodejs #javascript #бэкенд
👍7🗿41
Вам больше не нужен JavaScript

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

Подробнее.

#фронтенд #безопасность #javascript #css
😁28👍62💩1