Frontender's notes [ru]

2023-05-22 10:07:21 ​​ Что нужно знать, если хочешь стать JavaScript-разработчиком? 
Сначала, конечно же, нужно овладеть базовыми знаниями. 

24 мая в 20:00 мск
Открытый урок: «JavaScript Array» 
На занятии мы рассмотрим основы Javascript:
— Что такое массивы
— Какие структуры данных они реализовывают в Javascript
— Приемы работы с массивами 
— Семантическую разницу между разными методами массивов

Вебинар приурочен к старту онлайн-курса «Специализация Fullstack Developer». После вебинара курс можно приобрести удобным для вас способом.

Для участия зарегистрируйтесь: https://otus.pw/UqvYX/

Используйте эту возможность, чтобы познакомиться с преподавателем и форматом обучения. Курс доступен в рассрочку.
Нативная интеграция. Информация о продукте www.otus.ru Открыть/Комментировать

2023-05-21 20:07:40 ​​ Учимся писать сложные Typescript типы на примере роутинга в React

В этой статье автор расскажет, почему в Single Page приложениях роутинг производится на стороне клиента, и почему в большинстве React приложений, система роутинга разбросана по файлам, а также вы узнаете как научиться писать сложные TypeScript типы на примере централизованного роутинга.

Читать... Открыть/Комментировать

2023-05-21 15:07:49 ​​ Делаем кастомное модальное окно для React

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

Читать... Открыть/Комментировать

2023-05-20 20:07:15 ​​ 6 новых возможностей CSS, которые должен знать каждый front-end разработчик в 2023 году

В этой статье автор расскажет, зачем каждый front-end разработчик должен знать, как использовать container query, создавать привязку к прокрутке, избегать position: absolute с помощью grid, быстро создавать круг, использовать каскадные слои и достигать большего с помощью логических свойств, а также вы узнаете как хорошо организованная возможность прокрутки выделяет сайт среди других.

Читать... Открыть/Комментировать

2023-05-20 15:07:54 ​​ 30 советов для начинающего FrontEnd программиста

В этой статье автор расскажет, почему тег summary используется для выделения заголовка раздела, а тег details используется для выделения самого содержимого, и почему семантический тег mark используется для выделения текста, который был выделен по какой-либо причине, а также вы узнаете зачем нужно избегать селекторов, которые являются или включают в себя html теги.

Читать... Открыть/Комментировать

2023-05-19 20:07:21 ​​ Делаем пагинацию в React приложении

В этой статье автор расскажет, как написать на typescript простой, переиспользуемый пагинатор для React приложения, и зачем данные нужно хранить в компоненте контейнере, а также вы узнаете почему render компонента будет представлять из себя весьма тривиальный набор из двух кнопок и блока навигации.

Читать... Открыть/Комментировать

2023-05-19 15:07:10 ​​ Написание нативных Swift модулей для React Native

В этой статье автор расскажет, почему нативные модули пишутся на нативных языках хост-платформ, и как контролировать children view, которые передаётся в нативный компонент, а также вы узнаете как можно сделать делать маркеры для нативной карты.

Читать... Открыть/Комментировать

2023-05-18 20:07:37 ​​ Трудности маскирования текстового поля

В этой статье автор расскажет, почему даже беглое заполнение формы на сайте не обходится без опечаток, и как хороший UI/UX помогает пользователю избежать большинства таких проблем, а также вы узнаете как маска может не только предотвратить ввод невалидных значений, но и помочь пользователю добавить нужные символы.

Читать... Открыть/Комментировать

2023-05-18 15:37:36 CSS - min(), max() - функции

Всем привет! Относительно недавно в CSS появилась еще одна клевая фича которая позволяет сократить наши портянки кода и сделать его более лаконичным. 
Сегодня я хотел бы рассказать о min, max функциях

Например мы имеем div и у него свойство width, max-width, min-width:

Как мы писали раньше:

// Вариант 1 
div {max-width: 780px; width: 80%};

// Вариант 2
div {width: 50%; min-width: 400px};

Как это можно написать сейчас:

// Вариант 1
div {max-width: min(80%, 780px)};

// Вариант 2
div {width: max(50%, 400px)};

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

Так же согласно caniuse эти функции уже поддерживают последние версии всех основных брауеров. Открыть/Комментировать

2023-05-18 10:37:55 ​​Как сделать правильное наследование классов? Применить принцип Барбары Лисков. Как узнать, что это за принцип? Посмотреть новый выпуск «Паттерны и практики написания кода» от бэкендера Авито Юры Афанасьева на YouTube.

Выпуски выходят каждый вторник и помогают писать не просто рабочий — грамотный и гибкий код. Полезного просмотра!

Реклама. ООО «Авито Тех». LdtCKdYdi Открыть/Комментировать