Подборка User Flow сервисов
1. Overflow - Специализированный сервис для работы с user flow. Красивый визуал, работа в команде, работает с Adobe XD, Figma, Sketch, and Photoshop
2. Figma - удобно простраивать user flow сразу на макетах. Для удобства используйте User Flow Kit
3. Mockplus - популярный онлайн инструмент для создания мокапов и user flow в одном месте
4. Wireflow.co - бесплатный онлайн-инструмент с открытым исходным кодом
5. Diagrams.net - Удобный Flowchart инструмент с возможностью сохранения на google drive, dropbox, github.
6. Flowmapp.com - создание быстрых небольших user flow. В free версии доступен только 1 проект
7. Whimsical.com - набор инструментов для совместной работы
Подборка лучших фреймворков ReactJS💡
Next JS
Next.js дает вам лучший опыт разработчика со всеми функциями, необходимыми для производства: гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута и многое другое. Конфигурация не требуется.
Gatsby JS
Создавайте невероятно быстрые и насыщенные веб-интерфейсы, объединяющие все ваши любимые службы и контент. Создавайте сайты электронной коммерции, целевые страницы, блоги и многое другое за считанные минуты.
Remix JS
Создание продукта - это весело, но возиться с инструментами сборки и загрузкой данных - нет. Remix знакомит вас с последними достижениями в области веб-разработки (а затем и некоторых других), не оставляя позади фундаментальных принципов, которые делают ее отличной.
Remix, созданный для бессерверной эпохи и использующий наш открытый исходный код, который уже используется в миллионах проектов, дает вам прочную основу для создания лучших веб-сайтов. Вам понравятся производительность и продуктивность, которые дает вам наш новый (и традиционный) подход.
Blueprint JS
Blueprint — это набор компонентов пользовательского интерфейса React, которые охватывают большинство общих элементов интерфейса, шаблонов и взаимодействий в Интернете. Использование Blueprint гарантирует, что вы получите элегантный и простой в использовании пользовательский интерфейс, что позволит вам сосредоточиться на создании продукта, а не на элементарных элементах, которые его составляют. Повысьте свою производительность с помощью набора высококачественных базовых компонентов, которые можно использовать «из коробки», а универсальные концепции дизайна и модификаторы применимы ко всем компонентам. Blueprint был разработан с нуля для настольных приложений, поэтому он не был тщательно протестирован в мобильных веб-браузерах (iPad работает нормально).
На курсе «Мидл фронтенд-разработчик» студенты становятся уверенными мидлами за пять месяцев, а не за полтора года.
→ Приходите учиться, если вы разбираетесь в HTML, CSS, JavaScript — мы поможем повысить грейд.
Выпускники смогут браться за более сложные задачи, чем одностраничные сайты или простые веб-сервисы. На курсе мы поможем глубже разобраться:
— в алгоритмах и структурах данных;
— в паттернах проектирования;
— в том, как работают популярные в веб-разработке технологии.
Что будет на учёбе:
⬛️ Код-ревью и обратная связь от старших разработчиков из Яндекса и других IT-компаний.
⬛️ Обучение на реальных рабочих задачах: студенты создадут мессенджер и веб-игру с нуля.
⬛️ Наставники и менторы будут делиться опытом на вебинарах и встречах один на один.
⬛️ Кураторы и дедлайны не дадут прокрастинировать.
⬛️ Карьерные консультации: наши специалисты помогут найти новый проект или сделать так, чтобы на текущей работе вам начали давать более амбициозные задачи.
→ Старт потока — 3 марта. Учёба длится пять месяцев.
→ Познакомьтесь с курсом и оцените свои силы — это бесплатно.
Тайна меняющейся фавиконки
Вчера на работе разработчик обратился ко мне с проблемой. Разговор шел примерно так:
Дев: Привет, Альваро! У нас проблема.
Я: Что не так?
Дев: Фавиконка на сайте неправильная. Это не наш корпоративный логотип.
Я: Что????
Дев: показывает экран
Я: .....
Rus https://habr.com/ru/post/651877/Engalvaromontoro.com/blog/67…-favicon
Привет! У нас прекрасные новости 🥰
26 февраля мы в четвёртый раз соберёмся на конференции «Я 🧡Фронтенд», чтобы признаться в любви к вебу, поделиться друг с другом опытом и провести время в отличной компании.
В этом году мероприятие станет ещё масштабнее: 14 февраля мы запустили две недели онлайн-активностей на любой вкус. Челленджи, воркшопы, лекции, CTF, котики, коллаборации и подкасты — каждый сможет найти себе любимое занятие. Всё бесплатно, потому что любовь к фронтенду не купишь за деньги.
Боитесь пропустить всё самое интересное? Регистрируйтесь и мы заботливо напомним о том, что интересно именно вам: ilovefrontend.ru
Я ❤ Фронтенд 2021
01. Максим Сальников — Автоматизируем сервис-воркер с Workbox 6
02. Артем Арутюнян — Архитектура менеджера состояния
03. Роман Дворнов — JSON: push the limits
04. Валерия Курмак — Пользовательский опыт незрячего человека
05. Андрей Печкуров — ES6-коллекции на примере V8: у ней внутре неонка
06. Василика Климова — Расширяем реальность
07. Разбор заданий Capture the flag и награждение победителей
[Воркшоп] 08. Юлия Миоцен — Палка, палка, огуречик. Рисуем персонажную анимацию на CSS
[Воркшоп] 09. Андрей Мелихов — Теория и практика dependency injection
[Воркшоп] 10. Дмитрий Николаев — Создание приложений для голосовых ассистентов
Стелим соломку для фронтенда
www.youtube.com/playlis…playlist
Создание пиксельных эффектов на JavaScript и Canvas
00:00:00 Intro
00:00:55 Project 1 INTRODUCTION to pixel manipulation for beginners
00:02:30 How to bring image into HTML canvas project
00:05:15 How to analyze image for pixel data
00:11:58 How to turn image into grayscale
00:14:55 Project 2 BLACK AND WHITE PIXEL RAIN using image data
00:19:45 Particle system using JavaScript classes
00:25:18 Connect particle movement to pixel data
00:43:50 Project 3 PIXEL FLOW EFFECTS
00:53:12 HTML canvas gradients, filters and other experiments
01:04:48 Project 4 INTERACTIVE PARTICLE TEXT
01:13:50 Creating particles
01:21:33 Particle physics and mouse interactions
01:35:46 How to shape particles as letters
01:49:15 Constellations effect from particles.js with vanilla JavaScript
Как создать радиальный градиент в CSS?
Для создания фона в виде радиального (кругового, эллиптического) градиента испольуется функция radial-gradient.
Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}
В этом случае начальная точка помещается в центр элемента, а градиент рисуется таким образом, чтобы в углах элемента был последний указанный в скобках цвет.
Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента.
Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).
Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.
Svelte и Sapper в действии
Марк Волкманн (2022)
Многие веб-фреймворки замедляют работу приложений, загружая сотни строк кода «на всякий случай». Svelte позволяет компилировать приложения в эффективные крошечные пакеты с минимальным временем загрузки. Объединение Svelte с фреймворком Sapper облегчает маршрутизацию страниц, генерирование на стороне сервера, разработку статических сайтов и решение многих других задач.
Хотите научиться создавать быстрые и элегантные веб-приложения?
Вам помогут компоненты Svelte и качественный опыт взаимодействия. Вы научитесь использовать уникальную модель управления состояниями, освоите упрощенную маршрутизацию страниц, разбиение кода, поддержку автономного режима и работу с представлениями, генерируемыми на сервере.
Подписывайтесь на канал 👉@coddy_academy
Babel - бесплатный компилятор JS с открытым исходным кодом
Babel - это набор инструментов, который в основном используется для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript в текущих и старых браузерах или средах.
Особенности:
👉 изменение синтаксиса
👉 Преобразование синтаксиса Функции Polyfill, которые отсутствуют в вашей целевой среде (с помощью сторонних полифилов, таких как core-js)
👉 Преобразования исходного кода (codemods)
Ссылка: https://babeljs.io/
Гит: https://github.com/babel/babel
Как освоить все возможности Vue? Прийти учиться на курс «Vue.js разработчик» в OTUS!
За 4 месяца вы научитесь:
– Продвинутым возможностям Vue, Vue-router, Vuex.
– Создавать SPA-приложения и оптимизировать их для production.
– Писать чистый и лаконичный код на ES6/ES8/TypeScript.
– Писать интеграционные и юнит-тесты с Jest, Cypres.
– Работать с GraphQL, Firebase, Electron, NativeScript.
Также вы узнаете, как работает Webpack и Babel, освоите различные паттерны проектирования и научитесь их применять для построения сложных приложений на Vue.
🎯 Пройдите тест и присоединяйтесь к группе по специальной ценеhttps://otus.pw/68fw/
Создаём расширение для Chrome
Написать расширение для Chrome непросто. Это не то же самое, что разработка веб-приложения: не хочется перегружать браузер оверхедом JS, ведь расширения работают одновременно с сайтами. Более того, у нас нет инструментов упаковки или отладки из привычных фреймворков.
Подробнее