Javascript js frontend

​Как при помощи JavaScript определить, включен ли Caps Lock

Кто угодно может нажать Caps Lock в любой момент времени и не заметить этого. Вводя обычный текст, пользователи легко обнаруживают, что Caps Lock включен. Но когда вводится пароль, проблема не столь очевидна. В результате пароль не принимается, и это раздражает пользователя. В идеале разработчики могли бы предупреждать пользователя о том, что у него включен Caps Lock.

#js #ru

Animated BottomBar

Набор из разных анимаций перехода, применяемых к элементам навигационного меню.

#js

JavaScript On-Demand Dictionary

Автор: Programmers Suite
Год издания: 2023

#js #en

CSS Responsive animated Accordion

Адаптивный анимированный аккордеон. Реализован с помощью JavaScript и CSS.

#js

​Не стоит недооценивать HTML

«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.

И очень часто они вызывали у меня грусть.

Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…

В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.

#html #ru

3D glass weather icons

Иконки, сверстанные на HTML и SCSS.

#css

CSS Flex & Grid

Автор: Shruti Balasa
Год издания: 2021

#css #en

​Особенности кодировки строк в Base64 в JavaScript

Что происходит при кодировке и декодировании в base64 строк в JS? В этой статье мы рассмотрим некоторые особенности и ловушки, связанные с этими процессами.

#js #ru

Задачки по Front-end - канал с задачками и тестами по JS/CSS/HTML.

На канале вы найдете:
- тесты по Javascript;
- тесты по CSS;
- тесты по HTML;
- вопросы с собеседований с решением по JS, CSS, HTML

Подписывайтесь, решайте и предлагайте свои решения: @frontquizes

​Как анимировать контур при помощи CSS

Загрузчики и индикаторы прогресса являются одними из наиболее широко используемых примеров в руководствах и учебниках по CSS.

Существует огромное множество способов их реализации. Возможно, некоторые подходы будут "лучше" других, но это также зависит от того, чего вы хотите добиться.

В этой статье будет показан подход, использующий анимированные пользовательские свойства, конический градиент, CSS свойство offset и эмодзи, чтобы создать анимацию скутера, мчащегося по круглой дорожке.

#css #ru

Magnify Glass w/ Zoom

Изначально на картинку накладывается фильтр blur. В js создана логика, благодаря которой фильтр убирается в месте, где находится курсор пользователя.

#js

React 18 Design Patterns and Best Practices

Автор: Carlos Santana Roldan
Год издания: 2023

#js #react #en

Overlapping Sushi Cards

Анимация перекрывающихся карточек. Реализована с помощью JavaScript.

#js

​Тренды UX/UI дизайна на 2024 год

Bento UI  —  очередная дизайнерская тенденция, которая начала набирать популярность на таких платформах, как Dribbble и Behance, и была замечена миллионами дизайнеров. Однако концепция “модульного” дизайна началась с панелей управления для сайтов. Это включает в себя панели управления продажами и финансами, например PayPal, аналитику, наподобие Google Ads, и многое другое.

#ru

UX in Motion | Animation

UX-элементы в движении. Написано на чистом CSS.

#css

Click To Zoom Calendar

Создано на React и TypeScript, стилизовано в SCSS.

#js #react

Building Micro Frontends with React 18

Автор: Vinci J Rufus
Год издания: 2023

#js #react #en

Pure CSS Hamburger fold-out menu

Раскладывающееся меню Гамбургер. Написано на чистом CSS.

#css

​11 полезных фичей Chrome DevTools

Все мы постоянно используем Chrome DevTools, но там так много фичей, что некоторые из них мы никогда не использовали и даже не замечали. В этой небольшой статье я хочу поделиться интересными находками, которыми пользуюсь сам.

#ru

Range Slider

Стилизованный input type="range" с градиентной светящейся полосой.

#js