This media is not supported in your browser
VIEW IN TELEGRAM
Magnify Glass w/ Zoom
Изначально на картинку накладывается фильтр blur. В js создана логика, благодаря которой фильтр убирается в месте, где находится курсор пользователя.
#js
Изначально на картинку накладывается фильтр blur. В js создана логика, благодаря которой фильтр убирается в месте, где находится курсор пользователя.
#js
Как анимировать контур при помощи CSS
Загрузчики и индикаторы прогресса являются одними из наиболее широко используемых примеров в руководствах и учебниках по CSS.
Существует огромное множество способов их реализации. Возможно, некоторые подходы будут "лучше" других, но это также зависит от того, чего вы хотите добиться.
В этой статье будет показан подход, использующий анимированные пользовательские свойства, конический градиент, CSS свойство offset и эмодзи, чтобы создать анимацию скутера, мчащегося по круглой дорожке.
#css #ru
Загрузчики и индикаторы прогресса являются одними из наиболее широко используемых примеров в руководствах и учебниках по CSS.
Существует огромное множество способов их реализации. Возможно, некоторые подходы будут "лучше" других, но это также зависит от того, чего вы хотите добиться.
В этой статье будет показан подход, использующий анимированные пользовательские свойства, конический градиент, CSS свойство offset и эмодзи, чтобы создать анимацию скутера, мчащегося по круглой дорожке.
#css #ru
Задачки по Front-end - канал с задачками и тестами по JS/CSS/HTML.
На канале вы найдете:
- тесты по Javascript;
- тесты по CSS;
- тесты по HTML;
- вопросы с собеседований с решением по JS, CSS, HTML
Подписывайтесь, решайте и предлагайте свои решения: @frontquizes
На канале вы найдете:
- тесты по Javascript;
- тесты по CSS;
- тесты по HTML;
- вопросы с собеседований с решением по JS, CSS, HTML
Подписывайтесь, решайте и предлагайте свои решения: @frontquizes
Не стоит недооценивать HTML
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
#html #ru
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
#html #ru
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Responsive animated Accordion
Адаптивный анимированный аккордеон. Реализован с помощью JavaScript и CSS.
#js
Адаптивный анимированный аккордеон. Реализован с помощью JavaScript и CSS.
#js
This media is not supported in your browser
VIEW IN TELEGRAM
Animated BottomBar
Набор из разных анимаций перехода, применяемых к элементам навигационного меню.
#js
Набор из разных анимаций перехода, применяемых к элементам навигационного меню.
#js
Как при помощи JavaScript определить, включен ли Caps Lock
Кто угодно может нажать Caps Lock в любой момент времени и не заметить этого. Вводя обычный текст, пользователи легко обнаруживают, что Caps Lock включен. Но когда вводится пароль, проблема не столь очевидна. В результате пароль не принимается, и это раздражает пользователя. В идеале разработчики могли бы предупреждать пользователя о том, что у него включен Caps Lock.
#js #ru
Кто угодно может нажать Caps Lock в любой момент времени и не заметить этого. Вводя обычный текст, пользователи легко обнаруживают, что Caps Lock включен. Но когда вводится пароль, проблема не столь очевидна. В результате пароль не принимается, и это раздражает пользователя. В идеале разработчики могли бы предупреждать пользователя о том, что у него включен Caps Lock.
#js #ru
This media is not supported in your browser
VIEW IN TELEGRAM
Gooey Navigation
При наведении на элементы меню задействуются CSS-трансформации, параметры которых задаются через CSS-переменные.
#css
При наведении на элементы меню задействуются CSS-трансформации, параметры которых задаются через CSS-переменные.
#css
Верстальщик от Бога - самый большой канал про верстку в телеграм.
Ребята составили классный гайд по входу во фронтенд в 2021 году. Обязательно к прочтению для тех, кто хочет получить максимально подробный план действий.
Подписывайся, если ты:
- хочешь стать программистом и учишь верстку и фронтенд (у нас есть крутой чат, где можно задать вопросы)
- работаешь верстальщиком/фронтендером
- работаешь бэкендером, но хочешь быть в курсе последних тенденций в верстке и на фронтенде в целом
Ребята составили классный гайд по входу во фронтенд в 2021 году. Обязательно к прочтению для тех, кто хочет получить максимально подробный план действий.
Подписывайся, если ты:
- хочешь стать программистом и учишь верстку и фронтенд (у нас есть крутой чат, где можно задать вопросы)
- работаешь верстальщиком/фронтендером
- работаешь бэкендером, но хочешь быть в курсе последних тенденций в верстке и на фронтенде в целом
Telegram
Верстальщик от бога
Регистрация в перечне РКН:
https://knd.gov.ru/license?id=6757e1989d804a279b283165®istryType=bloggersPermission
Самый большой канал по верстке в телеграм.
Чат верстальщиков: @godinhtmlchat
По всем вопросам: @godinmedia
https://knd.gov.ru/license?id=6757e1989d804a279b283165®istryType=bloggersPermission
Самый большой канал по верстке в телеграм.
Чат верстальщиков: @godinhtmlchat
По всем вопросам: @godinmedia
Насколько потолстел JavaScript к 2024 году?
Я немного отстал от современных тенденций фронтенд-разработки. Помню, были статьи на тему раздутия веб-среды, в которых писали, что средний размер страницы начал достигать нескольких мегабайтов!
И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли?
Что ж, проверить это можно лишь экспериментальным путём, чем я и займусь!
#js #ru
Я немного отстал от современных тенденций фронтенд-разработки. Помню, были статьи на тему раздутия веб-среды, в которых писали, что средний размер страницы начал достигать нескольких мегабайтов!
И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли?
Что ж, проверить это можно лишь экспериментальным путём, чем я и займусь!
#js #ru
