-
Полезные статьи, качественные проекты, интересные задачи и вкиторины для тренировки собственных навыков. Наш чат @frontend_school_chat По всем вопросам @this_is_patrick
Все свои дела на неделю закончили? Осторожнее, понедельник не за горами😏
@frontend_school
Практикуем вёрстку. Делаем сайт туристического тура
Что отличает опытного разработчика от плохого? Правильно, практика! Предлагаем вам потренироваться в вёрстке, сделав лендинг сайта по макету из Figma.
Ссылка на макет тут. Не забудьте поделиться потом своим результатом в комментариях!
@frontend_school #макет #figma #вёрстка
Введение в асинхронный JavaScript: Callbacks, Promises и Async/Await
Сегодня мы собираемся создать и запустить магазин мороженого, в процессе которого мы освоим асинхронный JavaScript. В конечном итоге вы научитесь работать с коллбэками, промисами и async/await.
Здесь вы увидите многочисленные примеры кода и доступные объяснения его работы.
@frontend_school #статья #javascript
Полифилы JavaScript: что это и зачем они нужны
Полифил — это код, реализующий какую-то функциональность, которая не поддерживается в некоторых браузерах. Реализация собственного полифила обеспечивает единообразное поведение функциональности в разных браузерах.
Эта статья подойдёт новичкам, которые готовятся к собеседованию, и опытным специалистам. В ней вы для наглядности реализуете полифилы таких привычных методов, как map, forEach, filter, reduce.
@frontend_school #статья #javascript
Переключатель в виде сковороды с яичницей
Вот такой переключатель вы можете сделать самостоятельно благодаря коду, который лежит по ссылке. Всё выполнено на html, css и ванильном JS.
От себя могу сказать, что сделать сковороду красной, а не зелёной выглядит куда логичнее. Сможете доработать?😉
@frontend_school #codepen #css #javascript
Как большие размеры DOM влияют на интерактивность и что с этим можно сделать
Представьте, что у вас огромный дом за городом и вам его надо поддерживать в чистоте. Сколько времени и внимания у вас на это уйдёт? Очевидно, что в разы больше, чем при уборке однушки в Бутово.
Так и с DOM-деревом — чем оно больше, тем больше ресурсов требуется на его рендеринг и тем сложнее создать там нормальную интерактивность. Поэтому следить за размерами DOM крайне важно.
А вот как это сделать, на что обращать внимание, где отслеживать размер DOM, узнаете тут:
https://web.dev/articles/dom-size-and-interactivity?hl=ru
@frontend_school #статья #dom
Ну, что ж, давайте тогда начинать! И первым делом я хочу поделиться с вами библиотекой компонентов на чистом CSS
Называется она CSSUI и примечательна она тем, что содержит множество популярных компонентов, готовых к использованию просто в пару строк.
Здесь аккордеоны, выпадающие списки, модальные списки, свитчи, инпуты с диапазоном и многое другое.
Можно как скачать папку с библиотекой по ссылке, так и установить к себе в проект с помощью NPM командой npm i css-ui-lib.
#библиотека #css
13 приёмов работы с npm, которые помогают экономить время
Дойдя до изучения JavaScript, вы неминуемо столкнётесь с NPM. Пакетный менеджер позволяет устанавливать необходимые зависимости для вашего проекта, загружать библиотеки и фреймворки и многое другое.
А поскольку работать с ним приходится достаточно много, то полезно знать некоторые хитрости, которые ускоряет взаимодействие. Подробнее о них в этой статье.
Читать статью
@frontend_school #статья #npm
Сколько хрома в Chromium
Интересная статья, которая новичкам может и не поможет прокачать навыки, но приоткроет завесу тайны для всех пользователей браузеров на Chroimum. Мне показалось, что вам будет интересно.
Все знают, что Chromium — это открытая основа для браузеров, которую может использовать каждый. Так, у Google — это Chrome, у Яндекс — Яндекс.Брааузер, у Microsoft — Edge, а ещё есть Opera, Brave, Vivaldi и так далее. Но оказывается, что для использования Chromium в своих целях компаниям приходится предварительно удалять кучу функционала, который туда запихнули в Google. Зачем? Непонятно.
Читать статью
@frontend_school #статья #chromium
Пользовательские CSS-переменные, инверсия светлоты цветов и создание тёмной темы за 5 минут
Вы, наверное, уже знаете о том, что для хранения сведений об отдельных компонентах цвета можно применять пользовательские CSS-переменные. Это позволяет избавиться от необходимости повторения одних и тех же цветовых координат в стилях, описывающих цветовую тему сайта. Возможно, вы даже знаете о том, что одну и ту же переменную можно использовать для настройки нескольких компонентов цвета.
А знаете ли вы, что с помощью них также можно быстро создать тёмную тему для сайта на основе цветов светлой темы? Если нет, то в этой статье вам расскажут об этом подробнее.
Читать статью
@frontend_school #статья #CSS
Что лучше использовать: ссылки или кнопки
При вёрстке макета не всегда понятно, что перед нами — кнопка или ссылка. Внешне эти элементы могут быть очень похожи, но их функции различаются и браузер реагирует на них по-разному. Поэтому неправильный выбор может привести к ошибкам в работе веб-страницы. Если дизайнер по каким-то причинам не отрисовал состояния вообще, то придётся руководствоваться логикой, описанной в этой статье.
Читать статью
@frontend_school #статья #HTML
Обработка текста поверх изображений в CSS
При вёрстке сайта часто возникает необходимость разместить текст поверх какого-то изображения. В таком случае текст может сливаться с частью изображения, если стили плохо прописаны. Чтобы сделать текст более читаемым, а общий вид привлекательным, существуют различные способы. Вот об этих способах вы узнаете в сегодняшней статье.
Читать статью
@frontend_school #статья #CSS
Тернарный оператор в JavaScript: за, против, подводные камни
Все мы хотим писать чистый и краткий код. Но порой между этими характеристиками приходится выбирать. В целом принято считать, что ясность важнее краткости.
С учетом вышесказанного становится ясно, почему многие люди относятся к тернарному оператору с некоторой опаской. Да, конечно, он более краткий, чем if-предложение. Но вместе с тем тернарные операторы легко могут превратить код в нечитаемую абракадабру.
В этой статье пытаются разобраться в плюсах и минусах тернарного оператора в JS.
Читать статью
@frontend_school #статья #JavaScript
Что такое callback-функция в JavaScript?
В процессе обучения языку JavaScript каждый сталкивается с коллбеками. Это не самая простая тема и без действительно простого пошагового объяснения разобраться в ней может быть очень трудно.
В этой статье автор на простых примерах, подкреплённых реальным кодом объяснил, как работают callback-функции. Надеемся, что эта статья поможет вам разобраться.
Читать статью
@frontend_school #статья #JavaScript
То, ради чего стоит стать фронтенд-разработчиком 😄
@frontend_school #юмор
Два сниппета на JavaScript, которые упростят вам жизнь
В этой короткой статье вы познакомитесь с парой сниппетов, которые очень занимательны. Первый сниппет демонстрирует пример создания простой реактивности (signal), второй — метод предотвращения несоответствия данных из-за состояния гонки (race condition).
@frontend_school #статья #javascript
Делаем пинг-понг на JS с нуля
Вот такой классный проект вы можете реализовать самостоятельно на выходных.
Все необходимые зависимости, части кода, принципы его работы описаны в статье.
@frontend_school #статья #javascript
Делаем гамбургеры с помощью React и Matter.js
Зацените codepen-проект одного энтузиаста, который сделал конструктор бургеров с помощью React. Обратите внимание на физику объектов, она работает благодаря библиотеке Matter.js.
Потыкаться самостоятельно и изучить код проекта можно здесь.
@frontend_school #codepen #react #matterjs
Интересные фишки TypeScript, которые вы вряд ли знаете
Многие из нас, изучив JS переходят на его более типизированного брата TS. Во-первых, с ним удобнее работать, во-вторых, на многих проектах будет использоваться именно он.
В этом ролике вы узнаете про некоторые интересные особенности TypeScript, которые можно и нужно применять на практике: Union типы, подсветку ошибок, тайпгуарды, утилитарные типы, generic компоненты, условные типы и кортежи, разница между enum и as const object.
@frontend_school #видео #typescript
Что такое рекурсия и как она работает
Рекурсия — это процесс, когда функция вызывает саму себя. Она работает следующим образом:
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 #статья #браузер
Всем привет! 2 вопроса:
1. Хотите ли возрождение этого канала? Сейчас думаю стоит ли в него возвращаться или уже поздно и пора забыть про него.
2. Кому нужен Premium? Я тут свой личный канал завёл со всяким разным контентом и разыгрываю там подписку за подписку)
Давайте так, если контент тут хотите как в старые добрые времена — поставьте 👍, а если нет, то 👎
Создаём скрипты для сайта интернет-магазина
В этом объёмном видео вы на практических примерах сможете прокачать свои навыки JS-разработки. Вы сможете поработать с DOM, настроить поиск, клики, а также ближе познакомитесь с функциями, переменными и массивами.
Имейте в виду, что видео длинное, но для удобства разбито на разделы, что позволяет изучать его в несколько приёмов.
Смотреть видео
@frontend_school #видео #javascript
Что лучше использовать: ссылки или кнопки
При вёрстке макета не всегда понятно, что перед нами — кнопка или ссылка. Внешне эти элементы могут быть очень похожи, но их функции различаются и браузер реагирует на них по-разному. Поэтому неправильный выбор может привести к ошибкам в работе веб-страницы. Эта статья поможет вам избавиться от подобных проблем!
Читать статью
@frontend_school #статья
Вебинар «Конечные автоматы в реальной жизни»
Наставник курса «Мидл фронтенд-разработчик» Захар Овчаров расскажет про применение автоматов, а выпускник курса Антон Субботин попытается понять, зачем всё это нужно и как применять.
Что будет на вебинаре:
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
Налейтай, народ! Не вакансия, а мечта!
@frontend_school #юмор
CSS-переменные: о чем вам не говорят
CSS-переменные — отличная вещь, но всё ли вы о них знаете? В этой статье вы узнаете о некоторых особенностях CSS-переменных, о которых многие не говорят. После этого вы уже не сможете воспринимать их, как прежде, но при этом, возможно, найдёте им новое применение.
Читать статью
@frontend_school #статья #CSS
Frontend_thoughts | Про фронтенд. Прост
Frontend_thoughts — канал о разработке, тимлидстве и саморазвитии. Здесь делятся полезными материалами и обмениваются мнениями о frontend-разработке.
На канале вы найдёте много всего интересного, например:
➡️ Современные возможности JS
➡️ Велосипеды. Когда стоит писать свое решение
➡️ Возраст в IT. Когда уже поздно начинать?
Подписывайтесь: @frontend_thoughts
10 полезных инструментов для фронтенд-разработчика
Разработчикам важно использовать ресурсы и инструменты, облегчающие жизнь и повышающие продуктивность при работе над проектами или изучении чего-то нового.
В этой статье вы найдёте десять полезных и бесплатных сервисов, которые помогут вам облегчить фронтенд-разработку.
Читать статью
@frontend_school #статья
БЭМ — соглашение по именованию в CSS
Вообще, БЭМ — это аббревиатура, которая представляет собой сочетание слов «блок», «элемент» и «модификатор». Эта методология предполагает определённый порядок наименования компонентов и вы наверняка столкнётесь с ней при реальной работе.
В этой статье понятным языком объяснили, что же это такое и как правильно этим пользоваться.
Читать статью
@frontend_school #статья #CSS
