Всем привет! 2 вопроса:

1. Хотите ли возрождение этого канала? Сейчас думаю стоит ли в него возвращаться или уже поздно и пора забыть про него.
2. Кому нужен Premium? Я тут свой личный канал завёл со всяким разным контентом и разыгрываю там подписку за подписку)

Давайте так, если контент тут хотите как в старые добрые времена — поставьте 👍, а если нет, то 👎

Ну, что ж, давайте тогда начинать! И первым делом я хочу поделиться с вами библиотекой компонентов на чистом CSS

Называется она CSSUI и примечательна она тем, что содержит множество популярных компонентов, готовых к использованию просто в пару строк.

Здесь аккордеоны, выпадающие списки, модальные списки, свитчи, инпуты с диапазоном и многое другое.

Можно как скачать папку с библиотекой по ссылке, так и установить к себе в проект с помощью NPM командой npm i css-ui-lib.

#библиотека #css

Не знаю, как вы жили без этого, но вам пора узнать, как работает браузер

Если хотите делать крутой фронт, то нужно понимать, как его отрисовывает браузер. Как всё работает, откуда и куда поступают данные, как браузер их обратывает и многое другое вы узнаете в этой статье.

Я рекомендую её прочитать не только фронтенд-разработчикам, но и вообще всем — статья крайне познавательная.

@frontend_school #статья #браузер

Как большие размеры 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