Веб-страница
24.5K subscribers
1.68K photos
522 videos
1 file
3.87K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Функциональное программирование от А до Я на примере JavaScript: монады, функторы, каррирование, композиция

Если интересовались функциональное программированием, это видео для вас. В нем разобрали декларативность, чистые функции и сайд-эффекты, иммутабельность (неизменяемость), функции первого класса, функции высшего порядка, композицию/конвейер, частичное применение и каррирование, контейнеры, функторы и другие темы.

Сохраните, чтобы не потерять: https://www.youtube.com/watch?v=ScgmlDb5ed4

#javascript #лучшиепрактики
🤩86👍4👎2💩1🤣1
Media is too big
VIEW IN TELEGRAM
Практика JavaScript: делаем целый сайт за 2 часа с нуля

Ловите полезный двухчасовой курс по созданию сайта с JavaScript, где вы:

— напишите с нуля приложение, которое сможете добавить в портфолио;
— научитесь настраивать рабочее окружение;
— поймёте зачем на самом деле нужны классы в JavaScript);
— разберётесь как принципы SOLID помогают писать расширяемый и поддерживаемый код;
— поработаете над оптимизацией приложения;
— задеплоите приложение на хостинг и сделаете многое другое.

Видео взято с YouTube, поэтому если предпочитаете смотреть там, то вот ссылка: youtu.be/0ViiJ8qTCFM

#видео #курс #javascript
🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
Пример необычной анимации на чистом JS и CSS

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

Как это реализовано, можно посмотреть по ссылке. Там же можно поиграться со значениями, чтобы лучше понять алгоритм.

#codepen #javascript #css
👍10🔥4
Тренажёр по промисам

Если вы, как и я, хотите лучше разбираться в промисах в 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🔥2
Полный разбор 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