Как большие размеры DOM влияют на интерактивность и что с этим можно сделать

Представьте, что у вас огромный дом за городом и вам его надо поддерживать в чистоте. Сколько времени и внимания у вас на это уйдёт? Очевидно, что в разы больше, чем при уборке однушки в Бутово.

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

А вот как это сделать, на что обращать внимание, где отслеживать размер DOM, узнаете тут:

https://web.dev/articles/dom-size-and-interactivity?hl=ru

@frontend_school #статья #dom

Что такое рекурсия и как она работает

Рекурсия — это процесс, когда функция вызывает саму себя. Она работает следующим образом:

1. Сначала, функция выполняет некоторый код до вызова самой себя.

2. Затем, функция вызывает саму себя.

3. Когда функция вызывает саму себя, программа переходит к началу этой функции и повторяет шаги 1 и 2. Таким образом, функция вызывается до тех пор, пока не будет достигнуто определенное условие остановки.

4. Когда условие остановки становится истинным, функция перестает вызывать саму себя и начинает возвращать значения.

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

Вот пример, где функция рекурсивно вычисляет факториал числа:

function factorial(n) {
// Условие остановки
if (n === 0) {
return 1;
}

// Вызываем функцию саму себя с уменьшенным аргументом
return n * factorial(n — 1);
}

// Вызываем функцию
console.log(factorial(5)); // Выведет 120

@frontend_school #основы #рекурсия

Интересные фишки TypeScript, которые вы вряд ли знаете

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

В этом ролике вы узнаете про некоторые интересные особенности TypeScript, которые можно и нужно применять на практике: Union типы, подсветку ошибок, тайпгуарды, утилитарные типы, generic компоненты, условные типы и кортежи, разница между enum и as const object.

@frontend_school #видео #typescript

Полифилы JavaScript: что это и зачем они нужны

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

Эта статья подойдёт новичкам, которые готовятся к собеседованию, и опытным специалистам. В ней вы для наглядности реализуете полифилы таких привычных методов, как map, forEach, filter, reduce. 

@frontend_school #статья #javascript

Делаем гамбургеры с помощью React и Matter.js

Зацените codepen-проект одного энтузиаста, который сделал конструктор бургеров с помощью React. Обратите внимание на физику объектов, она работает благодаря библиотеке Matter.js.

Потыкаться самостоятельно и изучить код проекта можно здесь.

@frontend_school #codepen #react #matterjs

Введение в асинхронный JavaScript: Callbacks, Promises и Async/Await

Сегодня мы собираемся создать и запустить магазин мороженого, в процессе которого мы освоим асинхронный JavaScript. В конечном итоге вы научитесь работать с коллбэками, промисами и async/await.

Здесь вы увидите многочисленные примеры кода и доступные объяснения его работы.

@frontend_school #статья #javascript

Делаем пинг-понг на JS с нуля

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

Все необходимые зависимости, части кода, принципы его работы описаны в статье.

@frontend_school #статья #javascript

Практикуем вёрстку. Делаем сайт туристического тура

Что отличает опытного разработчика от плохого? Правильно, практика! Предлагаем вам потренироваться в вёрстке, сделав лендинг сайта по макету из Figma.

Ссылка на макет тут. Не забудьте поделиться потом своим результатом в комментариях!

@frontend_school #макет #figma #вёрстка

Два сниппета на JavaScript, которые упростят вам жизнь

В этой короткой статье вы познакомитесь с парой сниппетов, которые очень занимательны. Первый сниппет демонстрирует пример создания простой реактивности (signal), второй — метод предотвращения несоответствия данных из-за состояния гонки (race condition).

@frontend_school #статья #javascript

Все свои дела на неделю закончили? Осторожнее, понедельник не за горами😏

@frontend_school

9 главных трендов в разработке фронтенда в 2024 году

Сфера фронтенд-разработки крайне изменчива. Стиль, фреймворки, инструменты меняются очень быстро. Чтобы быть на острие рынка, необходимо своевременно изучать все изменения.

В этой статье собраны 9 главных трендов, которые будут актуальны в этом году.

@frontend_school #статья

@frontend_school #викторина

Что означает ошибка SyntaxError: Unexpected token '{'. Expected ')' to end an 'if' condition

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

О том почему она возникает и как её быстро устранить рассказали в статье: https://thecode.media/chto-oznachaet-oshibka-syntaxerror-unexpected-token-expected-to-end-an-if-condition/

@frontend_school #статья #javascript

30 вопросов на собеседовании фронтенд-разработчика

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

Зная ответы на них, вы будете чувствовать себя гораздо увереннее: https://tproger.ru/articles/20-voprosov-na-sobesedovanii-frontend-razrabotchika

@frontend_school #статья #вопросы

Узнали себя?

@frontend_school

21 лайфхак для новичков в JavaScript

Приготовьтесь пополнить арсенал своих JavaScript-навыков. Всеобъемлющее руководство ознакомит вас с эксклюзивными JavaScript-лайфхаками, которые помогают опытным разработчикам достигать вершин мастерства при создании кода.

Постигаем мастерство тут: https://nuancesprog.ru/p/20310/

@frontend_school #статья #javascript

Что нужно знать о современном CSS

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

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

Подробнее: https://habr.com/ru/articles/816541/

@frontend_school #статья #css

Новые методы Set в JavaScript, которые подарят вам суперспособности

Set был добавлен ещё в стандарте ES2015, но всегда казался немного ограниченным. Работать с ним можно было только через добавление, удаление и проверку наличия элементов. Однако при работе с несколькими коллекциями или их сравнении, приходилось писать дополнительные функции.

Но теперь нам готовят новые методы, которые значительно упростят работу с Set и позволят избежать необходимости придумывать свои функции. Подробнее:
https://proglib.io/p/set-v-javascript-teper-s-novymi-supersposobnostyami-2024-06-19

@frontend_school #статья #javascript

Лоадер в виде анимированной сковороды

Интересный способ отобразить загрузку контента — добавить привлекательный лоадер. Этот вариант сделан с использованием препроцессора SCSS.

Посмотреть код можно по ссылке: https://codepen.io/jkantner/pen/OJGBYJG

@frontend_school #codepen #scss #css