Frontender's notes. Страница 9

​​👾Signals – новая веха развития Angular В этой статье автор расскажет, как сигналы предлагают более декларативный подход для написания приложений, позволяя новичкам быстрее вкатываться в Angular, и почему основная задача сигналов – сделать механизм обнаружения изменений оптимальней и гибче, чем есть в 15-й версии фреймворка, а также вы узнаете почему автоматическое обнаружение изменений в Angular базируется на Zone.js. Читать...

​​Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке. 🗓 Начало 13 июня ✔️ Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком. ✔️ Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником. Запишитесь прямо сейчас —> https://ru.hexlet.io/link/R4K1WM

​​Performance review, ачивки и погоня за повышением грейда — что может причинить боль сотруднику IT-компании? Алоха товарищи фронты! Интересная статейка которая как мне кажется может быть полезна всем. Читать...

​​😵Обеспечение безопасности Frontend приложений В этой статье автор расскажет, как frontend приложения можно сделать более безопасными и менее уязвимыми для атак, и почему безопасность - это непрерывный процесс, который должен постоянно контролироваться и улучшаться с течением времени, а также вы узнаете почему протокол HTTPS шифрует данные, используя комбинацию симметричного и асимметричного шифрования. Читать...

​​👤Упрощаем разработку на React Native: чем полезен CocoaPods В этой статье автор расскажет, какое значение в iOS-разработке имеет CocoaPods, и почему стандартный сгенерированный Podfile обычно содержит несколько обязательных элементов, а также вы узнаете как можно установить pod определенной версии, определенной ветки, тега или даже коммита. Читать...

​​⚡️Валидация форм без зависимостей В этой статье автор расскажет, как сделать самописную систему из двух частей - валидация и привязка к ui, и почему все валидаторы по умолчанию являются асинхронными, а также вы узнаете почему функция validate поочерёдно запускает массив валидаторов с переданным значением. Читать...

​​😬Кросс-браузерное тестирование с Cypress в CI с использованием Docker В этой статье автор расскажет, почему кроссбраузерность – одна из самых важнейших характеристик веб-приложения, подразумевающая его одинаково корректные отображение и функциональность в различных браузерах, и как Cypress позволяет запускать тесты в нескольких браузерах, а также вы узнаете какие есть возможности Cypress по оптимизации кросс-браузерного тестирования. Читать...

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

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

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

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

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

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

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 эти функции уже поддерживают последние версии всех основных брауеров.

​​Как сделать правильное наследование классов? Применить принцип Барбары Лисков. Как узнать, что это за принцип? Посмотреть новый выпуск «Паттерны и практики написания кода» от бэкендера Авито Юры Афанасьева на YouTube. Выпуски выходят каждый вторник и помогают писать не просто рабочий — грамотный и гибкий код. Полезного просмотра! Реклама. ООО «Авито Тех». LdtCKdYdi

​​👨‍💻NgDoc — Cоздание документации для Angular проектов В этой статье автор расскажет, какая библиотека для приложения Angular, может устанавливается и интегрироваться в существующее приложение, что бы генерировать и отображать в нем документацию, и почему NgDoc автоматически соберет все файлы из которых состоит ваше демо и отобразит их в виде вкладок, а также вы узнаете почему Playgrounds - довольно мощный вид демо который может быть использован для компонентов и директив. Читать...

Новая фича CSS - Nesting Алоха товарищи фронты! Я вчера узнал что оказывается в нативном CSS уже есть такая штука как nesting(вложенность). Штука очень удобная но в целом не новая если вы раньше работали с SASS, LESS и.т.д. Так вот теперь CSS начал это уметь "из коробки". Для тех кто пока не понял о чем речь вот код снизу: 👉 Допустим в сегодняшнем CSS нам нужно сделать что то вроде такого .link { color: red; } .link:hover, .link:focus { color: blue; } 👉 С нововведением мы сможем написать так: .link { color: red; &:hover, &:focus { color: blue; } } ❗ В общем имейте ввиду, но пока особо не торопитесь его использовать. Согласно ресурсу caniuse файрфокс пока что с этим всем добром работать не научился.

​​😵Экосистема фронтенд-разработчика на JavaScript: полезный инструментарий для начинающих В этой статье автор расскажет, почему если вы начинающий JS-разработчик, вам лучше иметь под рукой краткий список самых необходимых и полезных в работе инструментов, и почему до определенного момента внешний вид элементов, созданных с использованием JavaScript, различался в разных браузерах, а также вы узнаете почему многие фреймворки работают с собственными сборщиками — например, Webpack используется в Vue.js. Читать...