​​Обработка текста поверх изображений в CSS

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

Читать статью

@frontend_school #статья #CSS

Налейтай, народ! Не вакансия, а мечта!

@frontend_school #юмор

​​Что лучше использовать: ссылки или кнопки

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

Читать статью

@frontend_school #статья #HTML

​​​​Вебинар «Конечные автоматы в реальной жизни»

Наставник курса «Мидл фронтенд-разработчик» Захар Овчаров расскажет про применение автоматов, а выпускник курса Антон Субботин попытается понять, зачем всё это нужно и как применять.

Что будет на вебинаре:
1. Поговорите про абстрактные машины, не существующие в реальности. Вы увидите, как на их основе строятся алгоритмы решения широкого круга задач.
2. Разберёте на примерах, как работают конечные автоматы и где находят применение.
3. Построите небольшой конечный автомат для валидации и допуска строк пользовательского ввода.
4. Обсудите использование, сложности и ограничения конечных автоматов для решения прикладных повседневных задач.

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

8 мая в 15:00 (Мск)

https://praktikum.blog/webinar-avtomati/?utm_source=telegram&utm_medium=performance&utm_campaign=Telegram_performance_webinar-avtomati-frontend_school

​​Пользовательские CSS-переменные, инверсия светлоты цветов и создание тёмной темы за 5 минут

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

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

Читать статью

@frontend_school #статья #CSS

Что лучше использовать: ссылки или кнопки

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

Читать статью

@frontend_school #статья

Сколько хрома в Chromium

Интересная статья, которая новичкам может и не поможет прокачать навыки, но приоткроет завесу тайны для всех пользователей браузеров на Chroimum. Мне показалось, что вам будет интересно.

Все знают, что Chromium — это открытая основа для браузеров, которую может использовать каждый. Так, у Google — это Chrome, у Яндекс — Яндекс.Брааузер, у Microsoft — Edge, а ещё есть Opera, Brave, Vivaldi и так далее. Но оказывается, что для использования Chromium в своих целях компаниям приходится предварительно удалять кучу функционала, который туда запихнули в Google. Зачем? Непонятно.

Читать статью

@frontend_school #статья #chromium

Создаём скрипты для сайта интернет-магазина

В этом объёмном видео вы на практических примерах сможете прокачать свои навыки JS-разработки. Вы сможете поработать с DOM, настроить поиск, клики, а также ближе познакомитесь с функциями, переменными и массивами.

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

Смотреть видео

@frontend_school #видео #javascript

13 приёмов работы с npm, которые помогают экономить время

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

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

Читать статью

@frontend_school #статья #npm

Всем привет! 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 #вёрстка