Бесит — подборка косяков, постоянно встречающихся от сайта к сайту
#почитать
tl;dr:
▫️Приложения, в которых нельзя отключить рекламные пуши
▫️Безосновательное разлогинивание
▫️Сброс выбранного города или неверное его отображение
▫️Выбор дат без возможности ввода с клавиатуры
▫️Буквенная клавиатура для телефонных номеров и неуместная автокоррекция ввода
▫️Куки-ху*ки
⏱ Читать беситься
#почитать
Если вы отвечаете за разработку/дизайн/менеджмент какого-либо сайта или приложения, пожалуйста, никогда так не делайте.
tl;dr:
▫️Приложения, в которых нельзя отключить рекламные пуши
▫️Безосновательное разлогинивание
▫️Сброс выбранного города или неверное его отображение
▫️Выбор дат без возможности ввода с клавиатуры
▫️Буквенная клавиатура для телефонных номеров и неуместная автокоррекция ввода
▫️Куки-ху*ки
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13
🔥 Вакансия: React frontend-разработчик в vivaCRM
Привет-привет! Сразу по-честному: у нас особая любовь к интерфейсам и пользовательскому опыту. Обожаем когда всё выглядит стильно и профессионально. Мы ищем талантливого разработчика, который имеет те же чувства к клиентской части сервисов.
Мы уделяем большое внимание архитектуре, интерфейсам и внутренним взаимодействиям: не спешим с релизами, уделяем время рефакторингу и юнит-тестам. Проводим совместное планирование функционала и его декомпозицию.
▫️СРО ждёт именно тебя, так как:
— Профессионально владеешь react и Java
— Любишь и умеешь работать с дизайн системами
— Имеешь опыт работы с Redux и понимаешь принципы управления состоянием приложений
— Обладаешь опытом в создании отзывчивых и адаптивных веб-интерфейсов
— Интересуешься последними тенденциями в разработке фронтенд-решений
➡️ Откликнуться
Привет-привет! Сразу по-честному: у нас особая любовь к интерфейсам и пользовательскому опыту. Обожаем когда всё выглядит стильно и профессионально. Мы ищем талантливого разработчика, который имеет те же чувства к клиентской части сервисов.
Мы уделяем большое внимание архитектуре, интерфейсам и внутренним взаимодействиям: не спешим с релизами, уделяем время рефакторингу и юнит-тестам. Проводим совместное планирование функционала и его декомпозицию.
▫️СРО ждёт именно тебя, так как:
— Профессионально владеешь react и Java
— Любишь и умеешь работать с дизайн системами
— Имеешь опыт работы с Redux и понимаешь принципы управления состоянием приложений
— Обладаешь опытом в создании отзывчивых и адаптивных веб-интерфейсов
— Интересуешься последними тенденциями в разработке фронтенд-решений
➡️ Откликнуться
👍8👎2🔥2
Игры на чистом CSS
#почитать
⏱ Посмотреть демо и исходники
#почитать
От головоломок до классики — игры, демонстрирующие универсальность CSS - без JavaScript.
Please open Telegram to view this post
VIEW IN TELEGRAM
👏11🔥3👍2
Event Loop. Разбор
#почитать
⏱ Читать разбор
#почитать
В сети есть довольно большое количество публикаций про Event loop и как он работает. Новые статьи появляются на популярных ресурсах и по сей день, в том числе на Хабре. Однако, к сожалению, далеко не вся информация, представленная в этих материалах является проверенной или достоверной. В связи с чем, само понятие обросло рядом мифов и догадок. Порой, даже опытному разработчику требуется немало внимания и опыта, чтобы понять, где истина, а где, чистой воды, вымысел.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10👎2🔥1
Портфолио с CodePen
#почитать
Лучшие проекты CodePen: карусели, 3D-карты, стили кнопок на все случаи жизни. Для портфолио.
⏱ Посмотреть
#почитать
Лучшие проекты CodePen: карусели, 3D-карты, стили кнопок на все случаи жизни. Для портфолио.
Please open Telegram to view this post
VIEW IN TELEGRAM
👏9❤3👍1🔥1
"Вёрстка — это не тупо"
#почитать
Сводка ошибок которые встречались во фронтенде и верстке за время работы. Конечно это очень малая часть и только те ошибки которые постоянно повторяются. Но всё же давайте пробежимся хотя бы по ним.
⏱ Читать статью
#почитать
Сводка ошибок которые встречались во фронтенде и верстке за время работы. Конечно это очень малая часть и только те ошибки которые постоянно повторяются. Но всё же давайте пробежимся хотя бы по ним.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤3
Плохие стороны HTML
#почитать
Хотелось найти баланс между широко известными проблемами и встречаемыми (но менее известными), а также добавить в список то, что воспринимаем, как должное. В каждом из разделов укажу степень серьёзности проблемы, альтернативные решения и ссылки, по которым можно найти более подробную информацию.
▫️<select multiple>
▫️<i> (для значков)
▫️<ul> и <ol>
▫️Атрибут title
▫️<datalist>
▫️<input placeholder>
▫️<input type=number>
▫️<input type=date>
▫️<menu>
▫️<button disabled>
▫️<video>
▫️Протоколы ссылок (tel:, mailto:)
⏱ Читать статью
#почитать
Хотелось найти баланс между широко известными проблемами и встречаемыми (но менее известными), а также добавить в список то, что воспринимаем, как должное. В каждом из разделов укажу степень серьёзности проблемы, альтернативные решения и ссылки, по которым можно найти более подробную информацию.
▫️<select multiple>
▫️<i> (для значков)
▫️<ul> и <ol>
▫️Атрибут title
▫️<datalist>
▫️<input placeholder>
▫️<input type=number>
▫️<input type=date>
▫️<menu>
▫️<button disabled>
▫️<video>
▫️Протоколы ссылок (tel:, mailto:)
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👎2👏2👍1
Синтаксис CSS. Директивы и переменные
#почитать
Синтаксис, переменные и комментарии, CSS-директивы (@-правила).
▫️CSS-правила
▫️CSS-директивы или at-rules
▫️CSS-переменные
▫️Комментарии в CSS
▫️Кэширование CSS-файлов в браузере
⏱ Читать статью
#почитать
Синтаксис, переменные и комментарии, CSS-директивы (@-правила).
▫️CSS-правила
▫️CSS-директивы или at-rules
▫️CSS-переменные
▫️Комментарии в CSS
▫️Кэширование CSS-файлов в браузере
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥2
Искусство взаимодействия. Эстетика, Функциональность, и Пользовательский Опыт
#почитать
Также кейсы успешных продуктовых дизайнов.
⏱ Читать статью
#почитать
Также кейсы успешных продуктовых дизайнов.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2
Еще раз о svh, lvh, dvh в CSS и адаптивной верстке
#почитать
⏱ Читать статью или лучше
▫️ Посмотреть видео ⏱ 10 минут
#почитать
Допустим, вам нужно сверстать кнопку, которая попросит пользователя принять пользовательское соглашение. Используя vh, вы легко могли попасть в ситуацию, когда ваша кнопка скрывается за поисковой строкой. Чтобы решить эту проблему, в CSS ввели новые единицы измерения. Это svh, lvh и dvh.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥2
Как правильно скруглять внутренние углы фигур
#почитать
Новички, как и я в свое время, допускают ошибку, когда создают закругленную фигуру в фигуре и забывают учитывать то, как визуально их скругленность будет смотреться.
⏱ Разобраться
#почитать
Новички, как и я в свое время, допускают ошибку, когда создают закругленную фигуру в фигуре и забывают учитывать то, как визуально их скругленность будет смотреться.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Идеи проектов UI (на HTML, CSS и JavaScript)
#почитать
Создание пользовательских интерфейсов помогает закрепить знания, полученные при изучении HTML, CSS и JS, а также развить дизайнерские способности. Представляем подборку подходящих идей UI-проектов. К каждому проекту прилагается скриншот общего вида и Codepen с примером реализации.
⏱ Читать статью
#почитать
Создание пользовательских интерфейсов помогает закрепить знания, полученные при изучении HTML, CSS и JS, а также развить дизайнерские способности. Представляем подборку подходящих идей UI-проектов. К каждому проекту прилагается скриншот общего вида и Codepen с примером реализации.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🎉2
#почитать #посмотреть
▫️ В CSS существует два способа создания анимаций: переходы (transitions) и анимации (animations).
▫️ Переходы используются для плавного изменения свойств при взаимодействии пользователя, например, при наведении курсора.
▫️ Анимации позволяют контролировать анимацию по кадрам с помощью ключевых кадров (keyframes) для создания сложных анимаций.
▫️ Для создания перехода необходимо указать свойства transition: transition-property, transition-duration, transition-timing-function и transition-delay.
▫️ Можно использовать сокращенную запись свойства transition, объединяя все параметры перехода.
При изменении нескольких свойств можно использовать ключевое слово 'all' в свойстве transition для применения анимации ко всем свойствам.
▫️ Для создания анимации необходимо определить ключевые кадры с помощью синтаксиса @keyframes и задать параметры анимации: animation-name, animation-duration и другие.
▫️ Свойство animation-fill-mode определяет, как стили из ключевых кадров применяются до и после выполнения анимации.
▫️ Можно использовать сокращенную запись свойства animation, объединяя все параметры анимации.
▫️ Для повышения удобства использования и избежания жесткой привязки анимации к элементам можно создавать утилитарные классы с анимацией.
▫️ Создание утилитарных классов позволяет создать свою мини-библиотеку анимаций и использовать их в различных элементах HTML.
▫️ Примеры анимаций включают движение влево (slideInLeft), вправо (slideInRight), вращение (rotate) и отскок (bounce).
▫️ Свойство transform-origin позволяет изменять точку, относительно которой происходит трансформация (например, вращение).
▫️ Использование процентов в @keyframes дает больший контроль над промежуточными состояниями анимации.
или
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥3
Нашумевшее на Хабре "Не стоит недооценивать HTML"
#почитать
⏱ Читать статью
#почитать
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍2😁2
Про userstyles (пользовательский CSS)
#почитать
⏱ Читать статью
#почитать
Этой статьей призываю перестать страдать от проблем сайтов/сервисов ежедневного использования - а написать свой CSS который уберет лишние элементы дизайна, подвинет что-то, что-то увеличит.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7👍5
У HTML Academy день рождение, поэтому мы дарим подарки.
Попробуйте свою удачу, вращая колесо фортуны, где вас ждёт возможность выиграть курсы, скидки, подписки и промокоды. Ищите иконку подарка на нашем сайте, кликайте и забирайте призы.
У нас вы сможете освоить профессию веб-разработчика независимо от уровня знаний.
Мы 12 лет посвятили обучению веб-разработке и ведём полноценные дисциплины в сильнейших технических вузах страны.
Прямо во время учёбы за вашими результатами будут наблюдать IT-компании, и многие из них готовы пригласить вас на работу сразу после окончания курса.
Никакой боли с бесконечными откликами на вакансии и собеседованиями.
Найти подарок
Попробуйте свою удачу, вращая колесо фортуны, где вас ждёт возможность выиграть курсы, скидки, подписки и промокоды. Ищите иконку подарка на нашем сайте, кликайте и забирайте призы.
У нас вы сможете освоить профессию веб-разработчика независимо от уровня знаний.
Мы 12 лет посвятили обучению веб-разработке и ведём полноценные дисциплины в сильнейших технических вузах страны.
Прямо во время учёбы за вашими результатами будут наблюдать IT-компании, и многие из них готовы пригласить вас на работу сразу после окончания курса.
Никакой боли с бесконечными откликами на вакансии и собеседованиями.
Найти подарок
👍10