👍3
Селекты, инпуты, батоны и прочие обитатели форм
Зачем они нужны, если есть куча библиотек с красивыми кастомными элементами?
Нужны! и важно уметь с ними работать
✔️ С нативным элементом можно предсказуемо взаимодействовать клавиатурой
✔️ Не возникает косяков с положением выпадающих элементов на экране
✔️ Элемент соответствует настройкам операционной системы
✔️ Контролы доступны скринридерам
✔️ Элемент будет доступен пользователям с ограниченными возможностями
Чтобы разобраться во всех тонкостях создания нативных форм, рекомендую эти тренажеры
Тренажер «Погружение в формы»
Проходить можно прямо в браузере, подача - огонь 🔥
Зачем они нужны, если есть куча библиотек с красивыми кастомными элементами?
Нужны! и важно уметь с ними работать
✔️ С нативным элементом можно предсказуемо взаимодействовать клавиатурой
✔️ Не возникает косяков с положением выпадающих элементов на экране
✔️ Элемент соответствует настройкам операционной системы
✔️ Контролы доступны скринридерам
✔️ Элемент будет доступен пользователям с ограниченными возможностями
Чтобы разобраться во всех тонкостях создания нативных форм, рекомендую эти тренажеры
Тренажер «Погружение в формы»
Проходить можно прямо в браузере, подача - огонь 🔥
👎5🔥1
Чем отличается хук useLayoutEffect от useEffect?
Anonymous Quiz
57%
useLayoutEffect вызывается синхронно, до отрисовки, а useEffect асинхронно, после отрисовки.
15%
useLayoutEffect предотвращает лишние обновления компонентов, а useEffect не влияет на это.
24%
В отличие от useEffect, useLayoutEffect срабатывает только при первоначальной отрисовке компонентов.
3%
Оба хука выполняют одни и те же задачи
👍3
Почему этот код нестабилен?
Поскольку setState() является асинхронным, установка нового состояния на основе предыдущего состояния иногда может пойти не так. В таких сценариях нужно использовать синтаксис функции обратного вызова для установки состояния. Тогда в prevState будет актуальное значение.
👉 @frontendInterview
Поскольку setState() является асинхронным, установка нового состояния на основе предыдущего состояния иногда может пойти не так. В таких сценариях нужно использовать синтаксис функции обратного вызова для установки состояния. Тогда в prevState будет актуальное значение.
const [state, setState] = useState(0);
setState((prevState) => prevState + 1);👉 @frontendInterview
🔥22👎2👍1👏1
React. Сборник рецептов. Практические приемы работы с фреймворком React
Книга посвящена практическому применению фреймворка React. Описано создание простых приложений и приложений со сложным интерфейсом, рассмотрены вопросы маршрутизации в приложениях и управление их состоянием. Даны примеры реализации интерактивного взаимодействия с пользователем, подключения к различным службам бэкенда, таким как REST и GraphQL, описана работа с библиотеками компонентов. Подробно рассматривается безопасность приложений, процесс их тестирования, даны советы по обеспечению доступности. Приводятся практические рекомендации по повышению производительности и созданию прогрессивных веб-приложений.
👉 @frontendInterview
Книга посвящена практическому применению фреймворка React. Описано создание простых приложений и приложений со сложным интерфейсом, рассмотрены вопросы маршрутизации в приложениях и управление их состоянием. Даны примеры реализации интерактивного взаимодействия с пользователем, подключения к различным службам бэкенда, таким как REST и GraphQL, описана работа с библиотеками компонентов. Подробно рассматривается безопасность приложений, процесс их тестирования, даны советы по обеспечению доступности. Приводятся практические рекомендации по повышению производительности и созданию прогрессивных веб-приложений.
👉 @frontendInterview
❤7👍4
Merged String Checker
Создайте функцию, которая проверит, можно ли составить строку s из символов двух других строк - part1 и part2. При этом символы в part1 и part2 нельзя менять местами.
Пример:
👉 @frontendInterview
Создайте функцию, которая проверит, можно ли составить строку s из символов двух других строк - part1 и part2. При этом символы в part1 и part2 нельзя менять местами.
Пример:
'codewars' is a merge from 'cdw' and 'oears':
s: c o d e w a r s = codewars
part1: c d w = cdw
part2: o e a r s = oears👉 @frontendInterview
Различия протоколов TCP и UDP
TCP – транспортный протокол передачи данных в сетях TCP/IP, предварительно устанавливающий соединение с сетью.
UDP – транспортный протокол, передающий сообщения-датаграммы без необходимости установки соединения в IP-сети.
Разница между протоколами TCP и UDP – в так называемой "гарантии доставки". TCP требует отклика от клиента, которому доставлен пакет данных, подтверждения доставки, и для этого ему необходимо установленное заранее соединение. Также протокол TCP считается надежным, тогда как UDP получил даже именование “протокол ненадежных датаграмм. TCP исключает потери данных, дублирование и перемешивание пакетов, задержки. UDP все это допускает, и соединение для работы ему не требуется. Процессы, которым данные передаются по UDP, должны обходиться полученным, даже и с потерями. TCP контролирует загруженность соединения, UDP не контролирует ничего, кроме целостности полученных датаграмм.
👉 @frontendInterview
TCP – транспортный протокол передачи данных в сетях TCP/IP, предварительно устанавливающий соединение с сетью.
UDP – транспортный протокол, передающий сообщения-датаграммы без необходимости установки соединения в IP-сети.
Разница между протоколами TCP и UDP – в так называемой "гарантии доставки". TCP требует отклика от клиента, которому доставлен пакет данных, подтверждения доставки, и для этого ему необходимо установленное заранее соединение. Также протокол TCP считается надежным, тогда как UDP получил даже именование “протокол ненадежных датаграмм. TCP исключает потери данных, дублирование и перемешивание пакетов, задержки. UDP все это допускает, и соединение для работы ему не требуется. Процессы, которым данные передаются по UDP, должны обходиться полученным, даже и с потерями. TCP контролирует загруженность соединения, UDP не контролирует ничего, кроме целостности полученных датаграмм.
👉 @frontendInterview
👍11🔥2😁1🤔1
♥️ Все наши каналы по JS / PHP / Python, подпишись ♥️
@seniorFront - всё про фронтенд, практика, примеры кода, интересные статьи
@web_craft - php, Laravel, фронтенд
@sWebDev - обзор библиотек JS / CSS
@python_practics - всё про Python, обучающие материалы, полезные советы и статьи
@seniorFront - всё про фронтенд, практика, примеры кода, интересные статьи
@web_craft - php, Laravel, фронтенд
@sWebDev - обзор библиотек JS / CSS
@python_practics - всё про Python, обучающие материалы, полезные советы и статьи
❤1👍1
Элементы какого типа растягиваются на всю доступную им ширину - блочного или строчного?
Anonymous Quiz
19%
Строчного
70%
Блочного
12%
Оба
👍8👎5😁3
Что такое HTTP и HTTPS?
HTTP (от англ. HyperText Transfer Protocol — протокол передачи гипертекста) — это прикладной протокол передачи данных в сети. На текущий момент используется для получения информации с веб-сайтов. Протокол HTTP основан на использовании технологии «клиент-сервер»: клиент, отправляющий запрос, является инициатором соединения; сервер, получающий запрос, выполняет его и отправляет клиенту результат.
HTTPS (от англ. HyperText Transfer Protocol Secure — безопасный протокол передачи гипертекста) — это расширение протокола HTTP, поддерживающее шифрование посредством криптографических протоколов SSL и TLS.
Чем отличаются HTTP и HTTPS:
- HTTPS не является отдельным протоколом передачи данных, а представляет собой расширение протокола HTTP с надстройкой шифрования;
- передаваемые по протоколу HTTP данные не защищены, HTTPS обеспечивает конфиденциальность информации путем ее шифрования;
- HTTP использует порт 80, HTTPS — порт 443.
👉 @frontendInterview
HTTP (от англ. HyperText Transfer Protocol — протокол передачи гипертекста) — это прикладной протокол передачи данных в сети. На текущий момент используется для получения информации с веб-сайтов. Протокол HTTP основан на использовании технологии «клиент-сервер»: клиент, отправляющий запрос, является инициатором соединения; сервер, получающий запрос, выполняет его и отправляет клиенту результат.
HTTPS (от англ. HyperText Transfer Protocol Secure — безопасный протокол передачи гипертекста) — это расширение протокола HTTP, поддерживающее шифрование посредством криптографических протоколов SSL и TLS.
Чем отличаются HTTP и HTTPS:
- HTTPS не является отдельным протоколом передачи данных, а представляет собой расширение протокола HTTP с надстройкой шифрования;
- передаваемые по протоколу HTTP данные не защищены, HTTPS обеспечивает конфиденциальность информации путем ее шифрования;
- HTTP использует порт 80, HTTPS — порт 443.
👉 @frontendInterview
❤13👍8👏2
Реклама. ООО "Яндекс" ИНН 7736207543 Erid LdtCKfwJx
Forwarded from Яндекс
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Разыгрываем Станцию Дуо Макс! Это первая колонка Яндекса с камерой и сенсорным экраном — флагман новой линейки устройств.
Что делать? Подпишитесь на телеграм-каналы @yandex и @techno_yandex, а потом нажмите кнопку «Участвовать» под этим постом. 15 декабря в 13:00 бот рандомно выберет победителя из числа участников.
▶️ А как производят и тестируют умные устройства Яндекса на заводе в Гуанчжоу, смотрите в мини-сериале YaC 2023 — на Кинопоиске и YouTube.
Что делать? Подпишитесь на телеграм-каналы @yandex и @techno_yandex, а потом нажмите кнопку «Участвовать» под этим постом. 15 декабря в 13:00 бот рандомно выберет победителя из числа участников.
▶️ А как производят и тестируют умные устройства Яндекса на заводе в Гуанчжоу, смотрите в мини-сериале YaC 2023 — на Кинопоиске и YouTube.
👎4❤2
Можно ли задать стили для элемента, в котором есть элемент, находящийся в фокусе?
Anonymous Quiz
6%
Нет
50%
Да, псевдоклассом :focus
8%
Да, псевдоклассом :hover
36%
Да, псевдоклассом :focus-within
🤔21🔥5👍3🥰2❤1
Что представляет собой функция-преобразователь (reducer) в контексте управления состоянием приложения?
Anonymous Quiz
6%
Функция, возвращающая идентификатор действия
7%
Функция, изменяющая DOM элементы
87%
Функция, принимающая текущее состояние и идентификатор действия, которое необходимо совершить
👍3
Какие HTTP-запросы вы знаете?
HTTP определяет множество методов запроса, которые указывают, какое желаемое действие выполнится для данного ресурса. Несмотря на то, что их названия могут быть существительными, эти методы запроса иногда называются HTTP глаголами. Каждый реализует свою семантику, но каждая группа команд разделяет общие свойства: так, методы могут быть безопасными, идемпотентными или кешируемыми.
GET запрашивает представление ресурса. Запросы с использованием этого метода могут только получать данные.
HEAD запрашивает ресурс так же, как и метод GET, но без тела ответа.
POST используется для отправки сущностей к определённому ресурсу. Часто вызывает изменение состояния или какие-то сайд-эффекты на сервере.
PUT заменяет все текущие представления ресурса данными запроса.
DELETE удаляет указанный ресурс.
CONNECT устанавливает "туннель" к серверу, определённому по ресурсу.
OPTIONS используется для описания параметров соединения с ресурсом.
TRACE выполняет вызов возвращаемого тестового сообщения с ресурса.
PATCH используется для частичного изменения ресурса.
👉 @frontendInterview
HTTP определяет множество методов запроса, которые указывают, какое желаемое действие выполнится для данного ресурса. Несмотря на то, что их названия могут быть существительными, эти методы запроса иногда называются HTTP глаголами. Каждый реализует свою семантику, но каждая группа команд разделяет общие свойства: так, методы могут быть безопасными, идемпотентными или кешируемыми.
GET запрашивает представление ресурса. Запросы с использованием этого метода могут только получать данные.
HEAD запрашивает ресурс так же, как и метод GET, но без тела ответа.
POST используется для отправки сущностей к определённому ресурсу. Часто вызывает изменение состояния или какие-то сайд-эффекты на сервере.
PUT заменяет все текущие представления ресурса данными запроса.
DELETE удаляет указанный ресурс.
CONNECT устанавливает "туннель" к серверу, определённому по ресурсу.
OPTIONS используется для описания параметров соединения с ресурсом.
TRACE выполняет вызов возвращаемого тестового сообщения с ресурса.
PATCH используется для частичного изменения ресурса.
👉 @frontendInterview
🔥10👍6
Как пасти котов. Наставление для программистов, руководящих другими программистами
Программист подобен кошке, которая гуляет сама по себе. Так уж исторически сложилось. Именно поэтому так непросто быть руководителем команды программистов. Даже если вы еще месяц назад были блестящим и дисциплинированным программистом и вдруг оказались в роли менеджера, вряд ли вы знаете, с чего надо начать, какой выбрать стиль руководства, как нанимать и увольнять сотрудников, проводить совещания, добиваться своевременного выполнения задач. В таком случае без этой книги вам не обойтись. А может быть, вы — опытный менеджер, желающий пересмотреть свои принципы лидерства? Тогда, опять же, эта книга для вас. Вне зависимости от возраста, пола и социального статуса, она поможет вам укрепить свои позиции в роли лидера программистов. Материал изложен довольно компактно и легко укладывается в голове.
👉 @frontendInterview
Программист подобен кошке, которая гуляет сама по себе. Так уж исторически сложилось. Именно поэтому так непросто быть руководителем команды программистов. Даже если вы еще месяц назад были блестящим и дисциплинированным программистом и вдруг оказались в роли менеджера, вряд ли вы знаете, с чего надо начать, какой выбрать стиль руководства, как нанимать и увольнять сотрудников, проводить совещания, добиваться своевременного выполнения задач. В таком случае без этой книги вам не обойтись. А может быть, вы — опытный менеджер, желающий пересмотреть свои принципы лидерства? Тогда, опять же, эта книга для вас. Вне зависимости от возраста, пола и социального статуса, она поможет вам укрепить свои позиции в роли лидера программистов. Материал изложен довольно компактно и легко укладывается в голове.
👉 @frontendInterview
❤5😁3👍1👎1🥰1