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

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

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

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

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

@frontend_school #статья #dom

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

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

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

@frontend_school #статья #javascript

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

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

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

@frontend_school #статья #javascript

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

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

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

@frontend_school #статья #javascript

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

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

@frontend_school #статья #javascript

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

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

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

@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 #статья #вопросы

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

Ответы на популярные вопросы по HTML

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

Чтобы вопросы у вас не копились, делимся большой статьёй, где, скорее всего, вы найдёте ответ на то, что вас интересует: https://www.frontendinterviewhandbook.com/ru/html-questions

@frontend_school #статья #html

5 крутых функций JavaScript, о которых не знает большинство разработчиков

С помощью JavaScript можно делать одно и то же разными способами. С выпуском каждой новой спецификации ECMAScript добавляются новые методы и операторы, чтобы сделать код более коротким и читабельным.

Как использовать всю мощь языка, рассказали здесь: https://proglib.io/p/5-krutyh-funkciy-javascript-o-kotoryh-ne-znaet-bolshinstvo-razrabotchikov-2021-09-04

@frontend_school #статья #javascript

Как обеспечить безопасность фронтенд-приложений

Безопасность является важным фактором при создании фронтенд-приложений, поскольку они часто являются отправной точкой для атак. В этой статье собраны основные меры, которых стоит придерживаться или о которых хотя бы нужно задуматься: https://habr.com/ru/articles/736866/

@frontend_school #статья #безопасность

Полное руководство по localStorage в JavaScript localStorage

JavaScript localStorage – это основное хранилище данных, которое находится в объекте Window браузера. Вы можете сохранять любую информацию в localStorage, и она будет сохраняться даже при перезагрузке страницы или закрытии и повторном открытии браузера.

Зачем оно нужно, как им пользоваться и какие методы существуют, рассказали в статье: https://tproger.ru/articles/javascript-localstorage-polnoe-rukovodstvo/

@frontend_school #статья #javascript

Условные конструкции в CSS

На прошлой неделе рабочая группа по CSS решила добавить inline if() в CSS. Но что это значит и почему это так интересно? CSS наконец-то превратится в язык программирования?

Подробности в статье: https://lea.verou.me/blog/2024/css-conditionals/

@frontend_school #статья #css

CSS-классы вредны?

Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда?

Сейчас вы узнаете о том, почему настало время отказаться от него:

https://habr.com/ru/companies/ruvds/articles/829926/

#css #статья

Учитесь фронтенду с нами — подпишитесь 💻

8 советов, которые сделают JavaScript-код чище

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

Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым, упростив работу с ним в будущем:

https://nuancesprog.ru/p/19910/

#статья #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Как работает движок JavaScript, а также что такое JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора

Нашёл для вас статью, где понятно и, главное, наглядно показывается, как работает движок JS и его основные составляющие. Не обязательно пытаться всё это запомнить. Но если прочитаете, то станете лучше понимать механизмы языка. Это точно положительно скажется на качестве вашего кода:

https://nuancesprog.ru/p/21194/

#статья #javascript

Учитесь фронтенду с нами — подпишитесь 💻

JavaScript эволюционирует: новые методы и функции для эффективной разработки

Новые функции появились в JavaScript и мы спешим поделиться ими с вами. Здесь вы узнаете про:

— новый метод группировки элементов массива;
— обновление в регулярных выражениях;
— обновлённые промисы;
— новые методы для мутаций массивов.

Интересно? Тогда скорее переходите по ссылке: https://proglib.io/p/javascript-evolyucioniruet-novye-metody-i-funkcii-dlya-effektivnoy-razrabotki-2024-07-22

#статья #javascript

Учитесь фронтенду с нами — подпишитесь 💻