🛠 Pattern Lab – это инструмент для ведения документации и аннотирования паттернов,. Это генератор статических сайтов, использующий методологию атомарного дизайна.
В генератор забрасывают исходный код и ассеты, он их компилирует и выдает старый добрый HTML, CSS и JavaScript. Pattern Lab берет исходный код (а именно паттерны) и преобразует эти паттерны в функциональный внешний интерфейс в рамках библиотеки паттернов.
🌍 Сайт
WebDEV #инструменты
В генератор забрасывают исходный код и ассеты, он их компилирует и выдает старый добрый HTML, CSS и JavaScript. Pattern Lab берет исходный код (а именно паттерны) и преобразует эти паттерны в функциональный внешний интерфейс в рамках библиотеки паттернов.
🌍 Сайт
WebDEV #инструменты
Какое значение будет у переменной result после выполнения следующего кода?
const obj = {a: 1, b: 2}; const result = 'a' in obj;
const obj = {a: 1, b: 2}; const result = 'a' in obj;
Anonymous Quiz
71%
true
7%
false
18%
undefined
3%
null
💡 Делайте упор на типографику
Типографика. Правильный выбор шрифтов и их сочетание могут значительно улучшить читаемость и визуальную привлекательность вашего сайта. Используйте не более двух-трех шрифтов и следите за их размером, межбуквенным и межстрочным интервалом. Выбирайте шрифты, которые соответствуют общему стилю и атмосфере вашего проекта.
WebDEV #советы
Типографика. Правильный выбор шрифтов и их сочетание могут значительно улучшить читаемость и визуальную привлекательность вашего сайта. Используйте не более двух-трех шрифтов и следите за их размером, межбуквенным и межстрочным интервалом. Выбирайте шрифты, которые соответствуют общему стилю и атмосфере вашего проекта.
WebDEV #советы
Полное руководство по макетам!
Не тратьте больше времени на перетаскивание вещей, пока они не будут выглядеть хорошо. Посмотрите, как Мэтт рассказывает о принципах макетирования в первой части этой серии видеороликов, состоящей из трех частей.
В сегодняшнем выпуске он обсуждает три идеи: фокусную точку, пустое пространство и иерархию.
📺 YouTube
WebDEV #видео
Не тратьте больше времени на перетаскивание вещей, пока они не будут выглядеть хорошо. Посмотрите, как Мэтт рассказывает о принципах макетирования в первой части этой серии видеороликов, состоящей из трех частей.
В сегодняшнем выпуске он обсуждает три идеи: фокусную точку, пустое пространство и иерархию.
📺 YouTube
WebDEV #видео
YouTube
Complete Layout Guide
Watch Part 2 (Grouping, Scale, and Sequence): https://youtu.be/_Pp0JHEswMk
Watch Part 3 (Alignment, Balance, and Grids): https://youtu.be/DP9Bzd4_-NM
🤑 FREE "Principles of Layout" Handbook - Download here 👉 https://bit.ly/3M7cuB3 🤑
Don't waste more time…
Watch Part 3 (Alignment, Balance, and Grids): https://youtu.be/DP9Bzd4_-NM
🤑 FREE "Principles of Layout" Handbook - Download here 👉 https://bit.ly/3M7cuB3 🤑
Don't waste more time…
Какого инпута не существует?
Anonymous Quiz
16%
<input type="color">
8%
< input type="search">
1%
< input type="date">
75%
‹input type="table">
🛠 Interplay – это система создания прототипов, которая позволяет взаимодействовать дизайнерам и разработчикам, находясь на одной странице одновременно.
Также она интегрируется с кодом для создания документации, которая отслеживается и обновляется автоматически. Interplay все еще является бета-версией, но уже работает с рядом основных инструментов для дизайна и разработки.
🌍 Сайт
WebDEV #инструменты
Также она интегрируется с кодом для создания документации, которая отслеживается и обновляется автоматически. Interplay все еще является бета-версией, но уже работает с рядом основных инструментов для дизайна и разработки.
🌍 Сайт
WebDEV #инструменты
💡 Обращайте внимание на скорость загрузки
Производительность. Медленно загружающиеся сайты могут оттолкнуть пользователей. Оптимизируйте изображения, используйте асинхронную загрузку скриптов и минимизируйте количество HTTP-запросов. Быстрая загрузка страниц улучшает пользовательский опыт и может положительно сказаться на вашем SEO.
WebDEV #советы
Производительность. Медленно загружающиеся сайты могут оттолкнуть пользователей. Оптимизируйте изображения, используйте асинхронную загрузку скриптов и минимизируйте количество HTTP-запросов. Быстрая загрузка страниц улучшает пользовательский опыт и может положительно сказаться на вашем SEO.
WebDEV #советы
Обновление Figma 2024. Figma AI. Искусственный интеллект в Figma
Фигма обновила свою UI теперь это третья версия. Стало ли лучше, куда подевались привычные инструменты?
Разберем новый фишки обновления Фигма 2024, потрогаем искусственный интеллект в Figma на что он способен и что умеет делать. Спойлер, пока тебя ИИ не заменит. Возможно через пару лет, но пока можно спасть спокойно
📺 YouTube
WebDEV #видео
Фигма обновила свою UI теперь это третья версия. Стало ли лучше, куда подевались привычные инструменты?
Разберем новый фишки обновления Фигма 2024, потрогаем искусственный интеллект в Figma на что он способен и что умеет делать. Спойлер, пока тебя ИИ не заменит. Возможно через пару лет, но пока можно спасть спокойно
📺 YouTube
WebDEV #видео
YouTube
Обновление Figma 2024. Figma AI. Искусственный интеллект в Фигма
❤️Телега https://xn--r1a.website/evgenmarfel
----------------------------
🔥Курс Веб-дизайн в Figma 2024 https://stepik.org/a/129362
👉🏻Курс UX-дизайн в Figma. UX-аналитика проекта https://stepik.org/a/129807
💪🏻Полный Курс Создание UI KIT в FIGMA https://stepik.org/a/128009…
----------------------------
🔥Курс Веб-дизайн в Figma 2024 https://stepik.org/a/129362
👉🏻Курс UX-дизайн в Figma. UX-аналитика проекта https://stepik.org/a/129807
💪🏻Полный Курс Создание UI KIT в FIGMA https://stepik.org/a/128009…
Как скрыть переполняющее содержимое элемента?
Anonymous Quiz
6%
visibility: hidden;
4%
display: none;
88%
overflow: hidden;
2%
opacity: 0;
💡 Учитывайте контекст использования
Контекст. Понимание того, в каком контексте будет использоваться ваш сайт или приложение, поможет создать более релевантный и удобный дизайн. Подумайте о том, где и как пользователи будут взаимодействовать с вашим продуктом, и адаптируйте интерфейс под эти условия. Например, мобильные пользователи могут нуждаться в более крупном тексте и кнопках.
WebDEV #советы
Контекст. Понимание того, в каком контексте будет использоваться ваш сайт или приложение, поможет создать более релевантный и удобный дизайн. Подумайте о том, где и как пользователи будут взаимодействовать с вашим продуктом, и адаптируйте интерфейс под эти условия. Например, мобильные пользователи могут нуждаться в более крупном тексте и кнопках.
WebDEV #советы
Секреты создания уникальный сайтов: модульный дизайн
Модульный дизайн — это подход к созданию веб-сайтов, который подразумевает использование повторяющихся модулей или блоков. Этот метод позволяет создавать гибкие и легко масштабируемые интерфейсы, улучшая как процесс разработки, так и пользовательский опыт.
В этом видео мы покажем, как применять модульный дизайн для создания уникальных сайтов. Вы узнаете о ключевых принципах модульного дизайна, современных трендах и лучших практиках. Мы продемонстрируем, как использовать инструменты для создания модульных компонентов, чтобы ваш сайт стал стильным, функциональным и удобным.
📺 YouTube
WebDEV #видео
Модульный дизайн — это подход к созданию веб-сайтов, который подразумевает использование повторяющихся модулей или блоков. Этот метод позволяет создавать гибкие и легко масштабируемые интерфейсы, улучшая как процесс разработки, так и пользовательский опыт.
В этом видео мы покажем, как применять модульный дизайн для создания уникальных сайтов. Вы узнаете о ключевых принципах модульного дизайна, современных трендах и лучших практиках. Мы продемонстрируем, как использовать инструменты для создания модульных компонентов, чтобы ваш сайт стал стильным, функциональным и удобным.
📺 YouTube
WebDEV #видео
YouTube
Секреты создания уникальных сайтов: модульный дизайн
В этом видео мы рассмотрим ключевые принципы эффективного веб-дизайна и научимся создавать стильные и функциональные сайты в Модульном стиле. Изучите современные тренды, практики и инструменты, которые помогут вам улучшить пользовательский опыт и сделать…
🛠 Fluid Simulation — это не то чтобы инструмент, а, скорее, просто сайт, на котором можно зависнуть надолго.
Я потратил много времени (больше, чем готов признать), экспериментируя с многочисленными настройками (которые до сих пор не вполне понимаю) и наблюдая, как это влияет на цветовые пятна.
🌍 Сайт
WebDEV #инструменты
Я потратил много времени (больше, чем готов признать), экспериментируя с многочисленными настройками (которые до сих пор не вполне понимаю) и наблюдая, как это влияет на цветовые пятна.
🌍 Сайт
WebDEV #инструменты
Что означает асинхронное программирование в JavaScript?
Anonymous Quiz
2%
Выполнение операций последовательно, одна за другой
13%
Выполнение операций одновременно в разных потоках
79%
Выполнение операций, которые могут завершиться позже, не блокируя основной поток выполнения
5%
Выполнение операций только после завершения предыдущей операции
💡 Делайте упор на типографику
Типографика. Правильный выбор шрифтов и их сочетание могут значительно улучшить читаемость и визуальную привлекательность вашего сайта. Используйте не более двух-трех шрифтов и следите за их размером, межбуквенным и межстрочным интервалом. Выбирайте шрифты, которые соответствуют общему стилю и атмосфере вашего проекта.
WebDEV #советы
Типографика. Правильный выбор шрифтов и их сочетание могут значительно улучшить читаемость и визуальную привлекательность вашего сайта. Используйте не более двух-трех шрифтов и следите за их размером, межбуквенным и межстрочным интервалом. Выбирайте шрифты, которые соответствуют общему стилю и атмосфере вашего проекта.
WebDEV #советы
React + Redux + TypeScript
React — создаст интерфейс, Redux поможет им управлять, а TypeScript сделает код более читаемым и стабильным. Отличный же сайт получится, если всё это объединить!
Перед просмотром надо иметь базу по всем инструментам, ведь в ролике рассказывается как их объединить, а не как ими пользоваться.
📺 YouTube
WebDEV #видео
React — создаст интерфейс, Redux поможет им управлять, а TypeScript сделает код более читаемым и стабильным. Отличный же сайт получится, если всё это объединить!
Перед просмотром надо иметь базу по всем инструментам, ведь в ролике рассказывается как их объединить, а не как ими пользоваться.
📺 YouTube
WebDEV #видео
YouTube
React & Redux & TypeScript ПОЛНЫЙ КУРС 2021
В этом курсе мы на практике поработает с typescrit, react, redux и разработаем небольшое веб приложение.
Мой курс "Продвинутый Frontend. В production на React" - https://ulbitv.ru/frontend
Ссылка на исходный код - https://github.com/utimur/react-redux-typescript…
Мой курс "Продвинутый Frontend. В production на React" - https://ulbitv.ru/frontend
Ссылка на исходный код - https://github.com/utimur/react-redux-typescript…
🛠 Если вам нравится Bootstrap, но вы не хотите углубляться в код, Startup 3 – создан именно для вас.
Это онлайн-приложение со встроенными шаблонами и темами для создания веб-сайтов на основе Bootstrap 4 с сеткой из 12 столбцов. Вы можете создать сайт без написания кода, используя интерфейс с поддержкой перетаскивания объектов. Но вам все же понадобятся некоторые знания HTML и CSS, чтобы завершить работу.
🌍 Сайт
WebDEV #инструменты
Это онлайн-приложение со встроенными шаблонами и темами для создания веб-сайтов на основе Bootstrap 4 с сеткой из 12 столбцов. Вы можете создать сайт без написания кода, используя интерфейс с поддержкой перетаскивания объектов. Но вам все же понадобятся некоторые знания HTML и CSS, чтобы завершить работу.
🌍 Сайт
WebDEV #инструменты