Frontend Interview - собеседования по Javascript / Html / Css
08 Mar 2025 17:06
Mobile-first vs Desktop-first
Mobile-first и Desktop-first — это подходы в веб-дизайне и разработке, которые определяют, для каких устройств начинается проектирование дизайна и разработка в первую очередь.
Mobile-first подход получил широкое распространение в современном вебе благодаря возросшей популярности мобильных устройств. Однако есть типы задач (CRM / ERP системы, дашборды, эффектные имидживые проекты), для решения которых Desktop-first остаётся более подходящим.
Mobile-first
Минималистичные интерфейсы
Важно понимать, что в данном случае термин «минималистичные интерфейсы» не означает, что функциональность интерфейсов урезана. Минималистичность здесь — следствие небольшого размера экрана. В первую очередь создается UI & UX (англ. User Interface & User Experience, «пользовательский интерфейс и пользовательский опыт») именно для таких устройств. Далее, на основе мобильных интерфейсов, дорабатывается UI & UX для более широких экранов.
Мобильные сценарии использования
Чтобы пользователю было комфортнее работать с мобильным интерфейсом, при его разработке учитывают:
- удобство сенсорного взаимодействия (по интерактивным элементам должно быть удобно тапать пальцами);
- возможность навигации одной рукой (дотягивается ли большой палец, не мешает ли ему что-то при скролле?);
- приоритетность основного контента (не заставляйте пользователя доскролливать до контента, ради которого он зашёл).
Не ограничивайтесь эмуляцией мобильной версии в браузере, откройте сайт, который разрабатываете, на смартфоне и попробуйте выполнить все приходящие в голову действия одной рукой, пока готовите кофе.
SEO
Google преимущественно использует мобильную версию сайта для индексации (mobile-first-indexing).
Desktop-first
Богатая функциональность
Благодаря большому размеру экрана, как правило, не возникает проблем с расположением элементов интерфейса, которые предлагают расширенную функциональность. Например, интерфейс аналитического дашборда может вмещать редактируемые таблицы с большим количеством столбцов.
Десктопные сценарии использования
С десктопным интерфейсом пользователь взаимодействует с помощью клавиатуры и мыши. Курсор менее требователен к области клика, чем палец, зато он всегда на экране: хорошей практикой будет следить, чтобы контент не появлялся и не пропадал с экрана при малейшем сдвиге мыши. Клавиатура в пользовательском интерфейсе может быть представлена (в виде подсказок о горячих клавишах) или нет, но в любом случае интерфейс должен на неё отзываться: например, отправится ли форма при нажатии на «Enter»?
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
07 Mar 2025 07:36
Курс "Дизайн карточек для WB и Ozon". Бесплатно и с нуля
Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰
Научись ей бесплатно!
- Бесплатный доступ к курсу
- Разбор ДЗ от наставника
- Мощные кейсы в портфолио
Узнать больше
#реклама 16+
yudaevschool24.online
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
06 Mar 2025 06:35
Срочно требуются Веб-Дизайнеры в Figma. Обучим с нуля.
Онлайн-программа с наставником и чатом.
Осторожно! 80% практики.
По результату обучения у вас будет портфолио из нескольких работ.
Сертификат о прохождении курса.
Возможность пройти полное обучение и получить гарантированное трудоустройство!
Учитесь дизайну у профессионалов.
Переходи по кнопки: "Узнать больше" и начинай свое обучение.
Доступ 0 руб.
Узнать больше
#реклама 16+
yudaevschool24.online
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
04 Mar 2025 17:06
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
03 Mar 2025 07:41
В канале Selectel Newsfeed новые бесплатные курсы!
Наши бесплатные курсы для специалистов всех уровней помогут разобраться в темах быстро, структурно и последовательно.
Вступайте в сообщество IT-специалистов в Telegram от Selectel и развивайте новые навыки📚
Смотреть
#реклама 16+
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
02 Mar 2025 11:06
JavaScript from Frontend to Backend: Learn full stack JavaScript development using the MEVN stack with quick and easy steps
Книга начинается с основ переменных и объектов в JavaScript, а затем быстро переходит к созданию компонентов на стороне клиента с помощью Vue.js и простого приложения для управления списками. После этого внимание переключается на серверную сторону и Node.js, где вы рассмотрите модель MVC и изучите модуль Express. После того как вы освоите серверную и клиентскую части, останется только база данных. Вы познакомитесь с MongoDB и модулем Mongoose. В последней главе этого быстрого руководства вы объедините все эти части, чтобы интегрировать приложение Vue.js в сервер Node.js, используя Express для структурирования серверного кода и MongoDB для хранения информации.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
01 Mar 2025 10:04
Когда исправляешь опечатку в комменте в большом пулл-реквесте:
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
27 Feb 2025 07:35
Курс "Дизайн карточек для WB и Ozon". Бесплатно и с нуля
Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰
Научись ей бесплатно!
- Бесплатный доступ к курсу
- Разбор ДЗ от наставника
- Мощные кейсы в портфолио
Узнать больше
#реклама 16+
yudaevschool24.online
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
26 Feb 2025 06:32
IT-аутстаффинг
Ежедневно публикуем запросы на аутстаффинг разработчиков Java, Python, Flutter, C#, 1С и других ИТ-специалистов. Есть свой резерв, готовый прямо сейчас влиться в ваш проект. Посмотрите в канале наших свободных разработчиков.
Подписаться
#реклама
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
24 Feb 2025 10:05
Как работает реактивность в vue.Js ?
Реактивность — это одна из ключевых характеристик фреймворка, которая позволяет автоматически обновлять пользовательский интерфейс при изменении состояния. Вот как это работает:
Реактивные данные:
Vue использует объекты с реактивными свойствами, чтобы отслеживать изменения. Когда данные изменяются, Vue автоматически обновляет связанные с ними компоненты.
Объект Vue:
При создании нового экземпляра Vue, он делает все данные, определенные в опции data, реактивными.
var vm = new Vue({
data: {
message: 'Hello Vue!'
}
});
Реактивность через геттеры и сеттеры:Vue использует JavaScript Proxy (или Object.defineProperty в более старых версиях) для создания реактивных свойств. Каждый раз, когда свойство считывается, вызывается геттер, и когда свойство изменяется, вызывается сеттер.
Пример реактивностиvar vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});При изменении
vm.message интерфейс автоматически обновится:
vm.message = 'Hello World!';
Как это работает "под капотом"1. Инициализация:
При инициализации Vue.js обходит все свойства объекта
data и преобразует их в геттеры и сеттеры с помощью
Object.defineProperty. Этот процесс называется
обсервацией.
2. Детекторы изменений (Observers):
Каждый раз, когда создается реактивное свойство, создается объект наблюдателя (Observer), который следит за изменениями этого свойства.
3. Депенденси трекинг (Dependency Tracking):
Во время рендера компонента, Vue регистрирует все зависимости (реактивные свойства), которые используются. Это означает, что Vue "запоминает", какие свойства нужно отслеживать для каждого компонента.
4. Реактивное обновление:
Когда реактивное свойство изменяется, Vue уведомляет все компоненты, которые зависят от этого свойства, и они автоматически перерисовываются.
Реактивные системы в действияхnew Vue({
el: '#app',
data: {
a: 1,
b: 2
},
computed: {
sum() {
return this.a + this.b;
}
},
watch: {
a(newValue, oldValue) {
console.log(`a изменилось с ${oldValue} на ${newValue}`);
}
}
});Вычисляемые свойства:
sum автоматически пересчитывается, когда
a или
b изменяются.
Наблюдатели (watchers): Реагируют на изменения данных и могут выполнять побочные эффекты.
Преимущества1. Простота использования: Можно сосредоточиться на логике приложения, а не на обновлении DOM.
2. Высокая производительность: Vue эффективно отслеживает изменения и обновляет только те части DOM, которые изменились.
3. Поддержка сложных приложений: Реактивная система Vue легко масштабируется для больших и сложных приложений.
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
23 Feb 2025 17:08
Reverse words
Выполните функцию, которая принимает строковый параметр и меняет местами каждое слово в строке. Все пробелы в строке должны быть сохранены.
Примеры:
"This is an example!" ==> "sihT si na !elpmaxe"
"double spaces" ==> "elbuod secaps"
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
23 Feb 2025 06:34
Живи и зарабатывай в Крыму 2 500 000 рублей ежегодно!
👌Поможем подобрать лучшие апартаменты Крыма с собственным пляжем, видом на море и горы
😊Живите сами, отдыхайте здесь с семьей или сдавайте и получайте пассивный доход 2 500 000 рублей в год
-Апартаменты на любой вкус а также под ваш бюджет
-Акции от застройщиков: рассрочка без переплат, ежемесячный платеж всего 50 тысяч рублей
-Старт продаж!
-Апартаменты с видом на море или горы - под ваш вкус!
🏠Мы предлагаем несколько способов покупки а также услуги по подбору недвижимости с помощью: ипотеки, рассрочки, дистанционной покупки
✅Узнайте подробнее и получите вкусное предложение
Узнать больше
Проектная декларация на сайте https://наш.дом.рф/
#реклама
mrqz.me
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
22 Feb 2025 10:03
Это я через 5 лет «вышел погулять» после тяжёлого трудового дня
👉 @
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
20 Feb 2025 07:36
Бесплатный курс по дизайну в FIGMA
Онлайн-программа с наставником и чатом.
Осторожно! 80% практики.
По результату обучения у вас будет портфолио из нескольких работ.
Сертификат о прохождении курса.
Возможность пройти полное обучение и получить гарантированное трудоустройство!
Учитесь дизайну у профессионалов.
Переходи по кнопки: "Узнать больше" и начинай свое обучение.
Доступ 0 руб.
Узнать больше
#реклама 16+
yudaevschool24.online
О рекламодателе
Читать полностью…
Frontend Interview - собеседования по Javascript / Html / Css
18 Feb 2025 13:00
📕Открытый урок по манипуляции с HTML и CSS с помощью JavaScript для начинающих и опытных разработчиков JavaScript, frontend и веб разработчикам
На открытом уроке 19 февраля в 20:00 мск мы узнаем всё об основах динамичного взаимодействия с элементами страницы.
📗В результате вы:
- Узнаете, как использовать JavaScript для взаимодействия с HTML и CSS, включая управление элементами страницы через простые клики и другие события;
- Изучите основные методы изменения стилей и классов, чтобы делать интерфейсы более динамичными;
- Освоете практические навыки для применения в проектах, позволяя создавать страницы с интерактивными элементами, которые реагируют на действия пользователей.
👉 Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://otus.pw/eAIt/
📙 Все участники открытого урока получат скидку на курс "Fullstack Developer"
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjeHiuvk
Читать полностью…
12730
