Текучие блоки
Интересный приём на сайте — блоки становятся текучими от ховера. Задаёт игривое настроение, которое вдобавок поддерживается сторителлингом-анимацией на первом экране. За наводку спасибо @anna_ze1

Источник
#web #анимация

Вариативность
Ещё один любопытный приём из мира анимации на сайтах — демонстрация вариативности шрифта через барабан. Здорово демонстрирует и многообразие вариантов, и моноширинность и единообразие в размерах. За наводку спасибо @vanyauhalin

Источник
#web #анимация

Табы и скролл
Необычное поведение табов на презентационном сайте: при скролле они перелистываются. Диковато, но интересно, для промо-сайта неплохой приём (в более сервисных интерфейсах, пожалуй, будет ту мач).
Кстати, сам сайт продукта интересен — много приятных и понятных линейных иллюстраций, ненавязчивая анимация, хорошие метафоры AI. За наводку спасибо @vladkorobov

Источник
#web #ui

How web bloat impacts users with slow devices.

#article #coding #web #js
@thedevs
@thedevs_js

https://thedevs.link/ir8iwV

🛠 Redkit - это набор инструментов, который поможет вам создавать потрясающие адаптивные веб-приложения с помощью React, Redux и React-router. Фреймворк предлагает два мощных инструмента для работы с фреймворком - полнофункциональную среду разработки Rekit Studio и расширенный интерфейс командной строки для работы с терминалом.

🌍 Сайт

Daily Coding #инструменты #web

🛠 Parcel - это удивительно быстрый пакет веб-приложений, который не требует настройки. Он предлагает поддержку JavaScript, CSS, HTML, файловых ресурсов и автоматическое преобразование модулей с использованием Babel, PostCSS и PostHTML. Он также имеет удобный журнал ошибок с выделенными синтаксисом кодовыми рамками для более легкой идентификации проблем.

🌍 Сайт

Daily Coding #инструменты #web

Шаблон веб-сайта для консалтинга.

• Современный и простой шаблон, созданный на основе глубоких исследований в соответствии с актуальными требованиями консалтингового бизнеса и агентств.

#template #web #business

Открыть в Figma

👨 Дизайн-телега

📖Web Coding and Development All-in-One
🖋Paul McFedries| 2024

Изучите востребованные навыки, которые позволят вам превращать строки кода в веб-сайты и приложения

💾 Скачать книгу

Daily Coding #книги #web

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

Источник
#модули #web

Контринтуитивное позиционирование
Приятное и несколько неожиданное позиционирование криптокошелька: заявляемую простоту инструмента передают не столько через скрины, доказательства и объяснения, сколько через визуальные метафоры:
— скруглённые формы,
— простые (и даже чуточку старомодные) иллюстрации в стиле Хэдспейса,
— спокойные микроанимации,
— тексты на скринах (меня вот покорило трогательное «Виталик»).

Прикольно, что сайт техностартапа может не стремиться быть модным, зрелищным и подчёркнуто технологичным. Отстроиться от конкурентов можно радикально иначе, а индивидуальности и живости придать через микроанимации, живость, бодрость, язык тела.

Время покажет, удалось или нет, но подход интересный.

Источник
#web #иллюстрации

🛠 Minify - расширение для минимизации вашего кода. Оно предлагает множество настроек настройки и возможность автоматического сокращения при сохранении и экспорте в файл .min. Minify работает с JavaScript, CSS и HTML с помощью uglify-js, clean-css и html-minifier соответственно.

🌍 Сайт

Daily Coding #инструменты #web

Ховер с раскладкой карт
Симпатичный ховер на несколько сущностей сразу: привлекается внимание не к одной детали, а к россыпи карточек — мол, смотри, у нас много всего. За наводку спасибо каналу Нора референсов

Источник
#web #модуль

📖Веб-дизайн для начинающих
🖋Роббинс Дженнифер | 2021

Книга поможет освоить веб-дизайн, не имея опыта. На практических примерах показано, как создать простой сайт и постепенно его совершенствовать. Расска-зано о создании веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано применение CSS для создания и выбора цвета, фона, форма-тирования текста, макетирования страниц и выполнения простой анимации. Да-ны основы языка JavaScript и подчеркнута его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени загрузки веб-изображений.

💾 Скачать книгу

Daily Coding #книги #web

🛠 FireShot - позволяет пользователям Chrome делать полные скриншоты веб-страниц, а затем напрямую загружать, распечатывать или отправлять их в Photoshop или буфер обмена. Он также поддерживает множество популярных форматов, таких как pdf, png и gif, и может без проблем работать в автономном режиме.

🌍 Сайт

Daily Coding #инструменты #web

🛠 Blur - это расширение для Google Chrome, которое упрощает отслеживание и защиту всей вашей личной информации в Интернете. Оно помогает вам запоминать пароли, генерировать новые, которые трудно взломать, и синхронизировать все браузеры и устройства, на которые вы заходите.

🌍 Сайт

Daily Coding #инструменты #web

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

🌍 Сайт

Daily Coding #инструменты #web

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

🌍 Сайт

Daily Coding #инструменты #web

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

🌍 Сайт

Daily Coding #инструменты #web

📖Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5
🖋 Никсон Робин, 2023

Новое издание бестселлера описывает как клиентские, так и серверные аспекты веб-разработки. Книга, наполненная ценными практическими советами и подробным теоретическим материалом, поможет вам освоить динамическое веб-программирование с применением самых современных технологий. Для закрепления усвоенных знаний автор расскажет, как создать полнофункциональный сайт, работающий по принципу социальной сети.

💾 Скачать книгу

Daily Coding #книги #web

🛠 Omi — веб-фреймворк нового поколения, который сочетает в себе преимущества веб-компонентов и JSX в одном. Он основан на Shadow DOM, поддерживает TypeScript и имеет современную реактивную привязку данных. Более того, Omi чрезвычайно легкий (4 Кбайт в сжатом виде) и поставляется с простым в использовании расширением Chrome для отладки.

🌍 Сайт

Daily Coding #инструменты #web