Эта статья описывает использование свойства box-shadow в CSS для добавления теней к элементам на веб-странице. В статье рассматриваются:

- Основы свойства box-shadow: Как добавлять тени к элементам, настраивать их положение, размытие, распространение и цвет.
- Реалистичные тени: Как использовать цвета и альфа-каналы для создания более естественных теней, которые имитируют реальное освещение.
- Сравнение с drop-shadow: Различия между box-shadow и фильтром drop-shadow. и т.д.

🌐 Читать статью

Made in HTML/CSS

Что такое SOLID?

SOLID — это пять принципов объектно-ориентированного программирования:

- S (Single Responsibility): Класс должен иметь одну ответственность.
- O (Open/Closed): Классы должны быть открыты для расширения, но закрыты для изменения.
- L (Liskov Substitution): Подтипы должны заменять базовые типы без нарушения работы программы.
- I (Interface Segregation): Интерфейсы должны быть специфичными, а не общими.
- D (Dependency Inversion): Зависимости должны строиться на абстракциях, а не на конкретных реализациях.

Эти принципы помогают создавать гибкий и поддерживаемый код.

Made in HTML/CSS

Объясните разницу между inline, inline-block и block.

Block:

Начинается с новой строки.
Занимает всю доступную ширину.
Примеры: <div>, <p>.

Inline:

Не начинается с новой строки, отображается в строку с другими элементами.
Ширина и высота зависят от содержимого.
Примеры: <span>, <a>.

Inline-Block:

Отображается в строку, как inline.
Ширина и высота могут быть заданы, как у block.
Пример: используется для изображений или блоков с заданными размерами.

Эти свойства помогают управлять макетом и отображением элементов на веб-странице.

Made in HTML/CSS

Project Manager — это расширение для VS Code, которое упрощает переключение между проектами, позволяя сохранять текущие папки или рабочие области как проекты, фильтровать их по тегам и редактировать список проектов через файл projects.json

Made in HTML/CSS

Что такое UX?

UX-дизайн (User Experience) — это создание удобного и приятного для пользователя опыта взаимодействия с продуктом или сервисом.

От качества UX-дизайна зависит, какой опыт и впечатления получат клиенты от взаимодействия с сайтом. Чтобы они остались довольны, веб-ресурс должен быть понятным и логичным в использовании.

Задачи UX-дизайна включают:

исследование потребностей и проблем пользователей;
создание пользовательских сценариев;
проектирование информационной архитектуры;

Made in HTML/CSS

AJAX для новичков

В статье описывается технология AJAX (Asynchronous JavaScript and XML), которая объединяет JavaScript и XML для создания интерактивных веб-приложений. AJAX позволяет обновлять части веб-страницы без полной перезагрузки, что делает взаимодействие с пользователем более удобным и экономит трафик.

Made in HTML/CSS

В чем разница между UX и UI?

UX-дизайн связан с опытом и удобством использования продукта, в то время как UI-дизайн фокусируется на визуальных и интерактивных элементах, которые позволяют пользователям взаимодействовать с продуктом.
UX-дизайн занимается исследованием пользователей, пользовательскими потоками и общим удобством использования, в то время как UI-дизайн занимается визуальным представлением и эстетикой интерфейса.

Как UX, так и UI дизайн имеют решающее значение для создания успешного и ориентированного на пользователя дизайна, и они часто тесно сотрудничают друг с другом для достижения целостного и впечатляющего пользовательского опыта.

Made in HTML/CSS

Quokka.js – настоящий интерактивный «черновик» прямо внутри VS Code, невероятно полезный инструмент для быстрого тестирования JavaScript-кода без необходимости создавать полноценную проектную среду. Расширение показывает результаты выполнения кода в реальном времени, прямо по мере набора – это многократно повышает продуктивность при экспериментировании с новыми идеями или при отладке сложной логики.

Made in HTML/CSS

Что такое AJAX-запрос?

AJAX-запрос (Asynchronous JavaScript and XML) — это технология, которая позволяет веб-страницам обновлять данные без перезагрузки страницы.

Некоторые области использования AJAX-запросов:

- Динамическое обновление контента. С помощью AJAX обновляются отдельные элементы страниц — таблицы, списки, графики. Это особенно удобно на сайтах, где применяются фильтры — например, на страницах онлайн-магазинов.
- Автозаполнение и поиск. AJAX используется для мгновенной выдачи результатов поиска. Пользователь только начинает вводить текст в поисковую строку и уже видит релевантные варианты.
- Отправка формы. Чтобы отправить данные заполненных форм, пользователю не нужно ждать обновления, что делает работу более плавной. Например, можно залогиниться после просмотра сайта, оставшись на той же странице.

Made in HTML/CSS

Что такое микрофронтенд?

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

🌐 Читать статью

Made in HTML/CSS

Паттерн «Observer» (Наблюдатель) решает задачу управления изменениями состояния и оповещения зависимых компонентов.

В этом паттерне объект-субъект (Subject) поддерживает список наблюдателей (Observers), которые автоматически уведомляются о любых изменениях состояния субъекта.

Made in HTML/CSS

Что такое ClickJacking?

ClickJacking — это тип атаки на безопасность, при котором злоумышленник обманывает пользователя, заставляя его нажимать на элементы веб-страницы, скрытые под видимыми элементами. Основной механизм атаки основан на использовании HTML-фреймов.

Как это работает:

Обман пользователя: Пользователь видит обычный интерфейс веб-страницы и думает, что взаимодействует с безопасными элементами.
Скрытый интерфейс: На самом деле, под видимыми элементами скрыт другой интерфейс, который выполняет нежелательные действия, когда пользователь нажимает на элементы.
Результат: Пользователь выполняет действия, которые могут привести к компрометации его данных или системы, не подозревая об этом.

Пример: Пользователь может думать, что нажимает на кнопку "Play" для воспроизведения видео, но на самом деле он нажимает на скрытую кнопку "Buy" на другом сайте, что приводит к нежелательной покупке

Made in HTML/CSS

Swiper.js — один из самых мощных и гибких инструментов для создания слайдеров.

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

Made in HTML/CSS