Подборка: Как оживить фронтенд — 8 лучших JS-библиотек для анимации
Разумная доза анимации способна кардинально изменить эстетику, атмосферу и удобство веб-приложения. В статье рассказывают о популярных вариантах, а также об их преимуществах и недостатках. А тут краткий список:
— GSAP — для высокопроизводительной HTML-анимации;
— Framer Motion — анимация и интерактивные элементы React;
— Anime.js — анимация CSS-свойств, SVG, DOM-атрибутов;
— Popmotion — анимация интерфейса;
— React Spring — анимация в React-приложениях;
— Three.js — создание и отображение анимированной 3D-графики;
— Vivus — анимация SVG-изображений;
— Mo.js — для создания сложной и многоуровневой анимации;
#подборка #frontend #js #ru
Разумная доза анимации способна кардинально изменить эстетику, атмосферу и удобство веб-приложения. В статье рассказывают о популярных вариантах, а также об их преимуществах и недостатках. А тут краткий список:
— GSAP — для высокопроизводительной HTML-анимации;
— Framer Motion — анимация и интерактивные элементы React;
— Anime.js — анимация CSS-свойств, SVG, DOM-атрибутов;
— Popmotion — анимация интерфейса;
— React Spring — анимация в React-приложениях;
— Three.js — создание и отображение анимированной 3D-графики;
— Vivus — анимация SVG-изображений;
— Mo.js — для создания сложной и многоуровневой анимации;
#подборка #frontend #js #ru
Библиотека программиста
▶️ Как оживить фронтенд: 8 лучших JS-библиотек для анимации
Разумная доза анимации способна кардинально изменить эстетику, атмосферу и удобство веб-приложения. Помимо Three.js и GSAP рассказываем какие есть еще библиотеки, которые помогут улучшить пользовательский опыт.
Статья: Вопросы и ответы для собеседования на позицию frontend-разработчика
Подготовка к собеседованию — трепетный и важный процесс, особенно для начинающих разработчиков. Ко всем возможным вариантам вопросов подготовиться нереально, но разобрать можно часто встречающиеся.
Держите подборку вопросов с ответами для фронтендеров. В первой части делается упор на JavaScript, а во второй части — на TypeScript. Заучивать ответы нет смысла, т.к. формулировка вопросов может меняться. А вот что действительно поможет, так это разобраться в каждом примере и понять суть задачи и её решения.
#статья #frontend #трудоустройство #ru
Подготовка к собеседованию — трепетный и важный процесс, особенно для начинающих разработчиков. Ко всем возможным вариантам вопросов подготовиться нереально, но разобрать можно часто встречающиеся.
Держите подборку вопросов с ответами для фронтендеров. В первой части делается упор на JavaScript, а во второй части — на TypeScript. Заучивать ответы нет смысла, т.к. формулировка вопросов может меняться. А вот что действительно поможет, так это разобраться в каждом примере и понять суть задачи и её решения.
#статья #frontend #трудоустройство #ru
Хабр
Вопросы и ответы для собеседования на позицию frontend-разработчик. Часть 1
Всем привет! В этой статье хотел бы поделиться вопросами и ответами, которые я задаю на собеседованиях фронтенд-разработчикам и которые попадались мне, когда я сам искал работу. Здесь собраны вопросы...
Инструмент для удобной отладки адаптивности веб-приложения
С помощью этой тулзы можно одновременно смотреть как ваш сайт выглядит на всех необходимых разрешениях. И основная фишка в том, что какие-либо действия, выполняемые в одном из окон, будут автоматически воспроизводиться на всех других окнах. Поэтому не придётся проводить один и тот же сценарий на каждом из разрешений. Эта прелесть ещё и бесплатная.
Ссылка на инструмент: Responsively
#инструмент #web #frontend
С помощью этой тулзы можно одновременно смотреть как ваш сайт выглядит на всех необходимых разрешениях. И основная фишка в том, что какие-либо действия, выполняемые в одном из окон, будут автоматически воспроизводиться на всех других окнах. Поэтому не придётся проводить один и тот же сценарий на каждом из разрешений. Эта прелесть ещё и бесплатная.
Ссылка на инструмент: Responsively
#инструмент #web #frontend
Курс: Программа-минимум по TypeScript для React
В планах есть плотная работа с React, но пока не дружите с TS? Эта статья проведёт быстрый экскурс по тому, что и как происходит в TypeScript: от самых основ до нишевых и специфичных тем. Вам не потребуется тратить много времени на другие полноценные курсы по TS, достаточно засесть на один вечер с этой статьёй.
#курс #typescript #react #frontend #en
В планах есть плотная работа с React, но пока не дружите с TS? Эта статья проведёт быстрый экскурс по тому, что и как происходит в TypeScript: от самых основ до нишевых и специфичных тем. Вам не потребуется тратить много времени на другие полноценные курсы по TS, достаточно засесть на один вечер с этой статьёй.
#курс #typescript #react #frontend #en
profy.dev
Minimal TypeScript Crash Course For React - With Interactive Code Exercises
Learning TypeScript is THE best investment. Here's everything you need to get started. Follow the story of a nasty CTO called Pat to learn the basics of TS and React.
Forwarded from Точка входа в программирование
Большая подборка бесплатных учебных материалов для фулстека
Вам больше не нужно ходить по сети в поисках подходящих материалов — всё, что нужно для обучения веб-разработки, собрано в одном месте. Само собой, эта подборка будет полезна не только фулстекам, но и отдельно фронтенд и бэкенд-разработчикам.
В этой подборке вы найдёте бесплатные курсы по вёрстке, JavaScript, JS-фреймворкам, Node.js, PHP, базам данных, Docker и другим важным технологиям.
@prog_point #web #frontend #backend
Вам больше не нужно ходить по сети в поисках подходящих материалов — всё, что нужно для обучения веб-разработки, собрано в одном месте. Само собой, эта подборка будет полезна не только фулстекам, но и отдельно фронтенд и бэкенд-разработчикам.
В этой подборке вы найдёте бесплатные курсы по вёрстке, JavaScript, JS-фреймворкам, Node.js, PHP, базам данных, Docker и другим важным технологиям.
@prog_point #web #frontend #backend
Инструмент для добавления интерактивности HTML-страницам
Благодаря такому инструменту вы получаете доступ к AJAX, CSS Transitions, WebSockets и Server Sent Events прямо из HTML, без необходимости обрабатывать это всё на стороне JS. Так вы сможете сконцентрироваться на вёрстке и даже делать интерактивные страницы без знания JavaScript или CSS.
Ссылка на инструмент: htmx
#инструмент #web #frontend
Благодаря такому инструменту вы получаете доступ к AJAX, CSS Transitions, WebSockets и Server Sent Events прямо из HTML, без необходимости обрабатывать это всё на стороне JS. Так вы сможете сконцентрироваться на вёрстке и даже делать интерактивные страницы без знания JavaScript или CSS.
Ссылка на инструмент: htmx
#инструмент #web #frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированное руководство по CSS flex
flex — свойство в CSS, определяющее способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства.
Вариантов использования flex много — про популярные способы рассказали в этом гайде. Всё с гифками, поэтому можно будет сразу определить нужную конфигурацию flex.
#frontend #css #ru
flex — свойство в CSS, определяющее способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства.
Вариантов использования flex много — про популярные способы рассказали в этом гайде. Всё с гифками, поэтому можно будет сразу определить нужную конфигурацию flex.
#frontend #css #ru
10 игр для изучения CSS
Учиться разработке через игры во многом интересней и эффективней, чем делать это же самое в видео и статьях. Ловите целых 10 таких игрушек для изучения CSS: Flexbox froggy, Flexbox defense, Knights of the Flexbox Table, Flex Box adventure, Flexbox zombies, Grid garden, Grid attack, CSS Diner, Guess CSS, CSS Speedrun.
Подробней про каждую игру с описанием смотрите в источнике.
#frontend #css
Учиться разработке через игры во многом интересней и эффективней, чем делать это же самое в видео и статьях. Ловите целых 10 таких игрушек для изучения CSS: Flexbox froggy, Flexbox defense, Knights of the Flexbox Table, Flex Box adventure, Flexbox zombies, Grid garden, Grid attack, CSS Diner, Guess CSS, CSS Speedrun.
Подробней про каждую игру с описанием смотрите в источнике.
#frontend #css
Короткий курс по TypeScript
TypeScript — это язык программирования со строгой типизацией, который компилируется в JavaScript, что позволяет ему затем выполняться в браузере.
Забирайте в сохранёнки это короткий курс, где вы изучите всё необходимое для комфортного начала разработки на TypeScript: типы данных, функции и перечисления, классы и абстрактные классы, перегрузку методов, интерфейсы и многое другое.
https://youtu.be/nyIpDs2DJ_c?si=CuqcqN-0Iuitzp_v
#курс #typescript #frontend #ru
TypeScript — это язык программирования со строгой типизацией, который компилируется в JavaScript, что позволяет ему затем выполняться в браузере.
Забирайте в сохранёнки это короткий курс, где вы изучите всё необходимое для комфортного начала разработки на TypeScript: типы данных, функции и перечисления, классы и абстрактные классы, перегрузку методов, интерфейсы и многое другое.
https://youtu.be/nyIpDs2DJ_c?si=CuqcqN-0Iuitzp_v
#курс #typescript #frontend #ru
YouTube
TypeScript – Быстрый Курс за 70 минут
Исходники тут: https://t.iss.one/js_by_vladilen/8
Получить профессию Frontend разработчика - https://bit.ly/3u79ler
Подробнее узнать об обучении в Result School - https://bit.ly/3OL0g2z
Бесплатный курс HTML & CSS - https://bit.ly/3ypUI8r
Сделать 5 проектов…
Получить профессию Frontend разработчика - https://bit.ly/3u79ler
Подробнее узнать об обучении в Result School - https://bit.ly/3OL0g2z
Бесплатный курс HTML & CSS - https://bit.ly/3ypUI8r
Сделать 5 проектов…
This media is not supported in your browser
VIEW IN TELEGRAM
Интерактивный тренажёр фронтендера
Авторы включили в тренажёр 1,5 тысячи заданий — этого с лихвой хватает для практики во фронтенде.
С самого начала вы осваиваете работу с реальным кодом и самостоятельно решаете задачи, приближённые к практическим условиям.
Такое добро лишним не бывает:
Ссылка на тренажёр
#курс #frontend #начинающим #ru
Авторы включили в тренажёр 1,5 тысячи заданий — этого с лихвой хватает для практики во фронтенде.
С самого начала вы осваиваете работу с реальным кодом и самостоятельно решаете задачи, приближённые к практическим условиям.
Такое добро лишним не бывает:
Ссылка на тренажёр
#курс #frontend #начинающим #ru
Топ-50 ресурсов с бесплатными HTML/CSS/JS шаблонами
Эта подборка точно должна оказаться в ваших сохранёнках, т.к. в ней вы сможете найти бесплатные шаблоны на любой вкус и сэкономить время и средства на разработку. Вот лишь парочка из них, а полный список в подборке.
— LayoutFlow — шаблоны для сайтов агенств, портфолио и услуг.
— Treact — React-шаблоны.
— Flout UI — компоненты Tailwind и готовые шаблоны Next.js
— Themesberg — шаблоны админ панелей, лендингов и UI-китов.
— Templatemo — много Bootstrap-шаблонов.
— HTMLrev — крупнейшая библиотека шаблонов со всеразличными технологиями.
#подборка #frontend
Эта подборка точно должна оказаться в ваших сохранёнках, т.к. в ней вы сможете найти бесплатные шаблоны на любой вкус и сэкономить время и средства на разработку. Вот лишь парочка из них, а полный список в подборке.
— LayoutFlow — шаблоны для сайтов агенств, портфолио и услуг.
— Treact — React-шаблоны.
— Flout UI — компоненты Tailwind и готовые шаблоны Next.js
— Themesberg — шаблоны админ панелей, лендингов и UI-китов.
— Templatemo — много Bootstrap-шаблонов.
— HTMLrev — крупнейшая библиотека шаблонов со всеразличными технологиями.
#подборка #frontend
25 полезных HTML тегов, элементов и атрибутов, которые стоит знать каждому фронтендеру
В HTML есть средства для создания раскрывающихся виджетов, индикаторов прогресса и скалярных значений, переадресации на нужный URL, воспроизведения аудио/видео, сохранения форматирования кода и валидации с помощью regex.
Список всех тегов и элементов с описанием и примерами кода можно забрать в статье.
#статья #html #frontend #ru
В HTML есть средства для создания раскрывающихся виджетов, индикаторов прогресса и скалярных значений, переадресации на нужный URL, воспроизведения аудио/видео, сохранения форматирования кода и валидации с помощью regex.
Список всех тегов и элементов с описанием и примерами кода можно забрать в статье.
#статья #html #frontend #ru
Топ-10 советов начинающим фронтендерам
Создание качественного пользовательского интерфейса — важный шаг к успешному приложению. Вот ключевые советы:
— Отступы: Равномерные отступы делают интерфейс аккуратным.
— Пустые состояния: Добавьте сообщения или кнопки действий.
— Индикаторы загрузки: Уведомляйте пользователей о процессе загрузки.
— Визуальная иерархия: Используйте разные размеры и цвета для важных элементов.
— «Воздух» в дизайне: Увеличьте расстояние между несвязанными элементами.
— Ошибки: Делайте сообщения понятными и с контекстом.
— Подсказки: Указывайте, почему элементы неактивны.
— Цвета: Следуйте цветовым конвенциям для обратной связи.
— Иконки: Держите их простыми и узнаваемыми.
— UI-библиотеки: Используйте готовые решения для экономии времени.
Подробней про каждый из пунктов с примерами кода в статье.
#советы #frontend #начинающим #ru
Создание качественного пользовательского интерфейса — важный шаг к успешному приложению. Вот ключевые советы:
— Отступы: Равномерные отступы делают интерфейс аккуратным.
— Пустые состояния: Добавьте сообщения или кнопки действий.
— Индикаторы загрузки: Уведомляйте пользователей о процессе загрузки.
— Визуальная иерархия: Используйте разные размеры и цвета для важных элементов.
— «Воздух» в дизайне: Увеличьте расстояние между несвязанными элементами.
— Ошибки: Делайте сообщения понятными и с контекстом.
— Подсказки: Указывайте, почему элементы неактивны.
— Цвета: Следуйте цветовым конвенциям для обратной связи.
— Иконки: Держите их простыми и узнаваемыми.
— UI-библиотеки: Используйте готовые решения для экономии времени.
Подробней про каждый из пунктов с примерами кода в статье.
#советы #frontend #начинающим #ru
Где и как подтянуть навыки JS или подготовиться к собеседованию?
Можно, например, в этом репозитории с 62К звёзд и 150 вопросами по JavaScript. Сложность от базовой до продвинутого и список вопросов периодически обновляется. Есть страница на русском:
Прокачиваем свой JS тут
#репозиторий #javascript #frontend #трудоустройство
Можно, например, в этом репозитории с 62К звёзд и 150 вопросами по JavaScript. Сложность от базовой до продвинутого и список вопросов периодически обновляется. Есть страница на русском:
Прокачиваем свой JS тут
#репозиторий #javascript #frontend #трудоустройство
GitHub
javascript-questions/ru-RU at master · lydiahallie/javascript-questions
A long list of (advanced) JavaScript questions, and their explanations :sparkles: - lydiahallie/javascript-questions
Best шпаргалка по CSS Flexbox
У этой шпаргалки есть всё, что нужно для удобства: лаконичные описания, понятные объяснения в картинках и примеры кода.
Сохраняем, ведь оно по-любому однажды понадобится
#шпаргалка #css #frontend
У этой шпаргалки есть всё, что нужно для удобства: лаконичные описания, понятные объяснения в картинках и примеры кода.
Сохраняем, ведь оно по-любому однажды понадобится
#шпаргалка #css #frontend
Крутая шпаргалка по CSS
Тут можно найти множество свойств CSS с их подробным описанием, примерами кода и визуальным объяснением — всё, чтобы можно было разобраться даже в самых сложных ситуациях.
Мастхев для верстальщиков: cssreference.io
#шпаргалка #css #frontend #en
Тут можно найти множество свойств CSS с их подробным описанием, примерами кода и визуальным объяснением — всё, чтобы можно было разобраться даже в самых сложных ситуациях.
Мастхев для верстальщиков: cssreference.io
#шпаргалка #css #frontend #en
Большая и интерактивная шпаргалка по CSS
Эта шпаргалка не просто список параметров, а наглядный инструмент для работы с атрибутами и настройками. Ползунки и кнопки позволяют настроить значения, а итоговый CSS-код легко копируется. Включены параметры для работы с цветами, обводками, шрифтами, тенями, анимациями и многим-многим другим.
Такое терять нельзя
#шпаргалка #css #frontend
Эта шпаргалка не просто список параметров, а наглядный инструмент для работы с атрибутами и настройками. Ползунки и кнопки позволяют настроить значения, а итоговый CSS-код легко копируется. Включены параметры для работы с цветами, обводками, шрифтами, тенями, анимациями и многим-многим другим.
Такое терять нельзя
#шпаргалка #css #frontend
Что почитать по вёрстке сайтов?
— "HTML и CSS. Разработка и дизайн веб-сайтов" — Джон Дакетт. Красочная и понятная книга для изучения HTML и CSS с акцентом на визуал.
— "CSS для профессионалов" — Эрик А. Мейер. Глубокое руководство по CSS с разбором продвинутых техник и нюансов.
— "JavaScript и jQuery. Разработка интерактивных веб-сайтов" — Джон Дакетт. Простое введение в динамическое взаимодействие на веб-страницах с помощью JS и jQuery.
— "Адаптивный веб-дизайн" — Аарон Густафсон. Практики для создания сайтов, которые выглядят отлично на любых устройствах.
— "Секреты CSS" — Лиа Веру. Сборник эффективных приемов и трюков, которые помогут прокачать CSS.
— "Элементы пользовательских интерфейсов. CSS и HTML в действии" — Аарон Уолтер. Создание привлекательных и удобных интерфейсов с помощью базовых технологий.
— «Отзывчивый веб-дизайн. HTML5 и CSS3 в действии" — Итан Маркотт. Базовые принципы и практические примеры использования HTML5 и CSS3 в адаптивной вёрстке.
#подборка #книга #frontend #html #css
— "HTML и CSS. Разработка и дизайн веб-сайтов" — Джон Дакетт. Красочная и понятная книга для изучения HTML и CSS с акцентом на визуал.
— "CSS для профессионалов" — Эрик А. Мейер. Глубокое руководство по CSS с разбором продвинутых техник и нюансов.
— "JavaScript и jQuery. Разработка интерактивных веб-сайтов" — Джон Дакетт. Простое введение в динамическое взаимодействие на веб-страницах с помощью JS и jQuery.
— "Адаптивный веб-дизайн" — Аарон Густафсон. Практики для создания сайтов, которые выглядят отлично на любых устройствах.
— "Секреты CSS" — Лиа Веру. Сборник эффективных приемов и трюков, которые помогут прокачать CSS.
— "Элементы пользовательских интерфейсов. CSS и HTML в действии" — Аарон Уолтер. Создание привлекательных и удобных интерфейсов с помощью базовых технологий.
— «Отзывчивый веб-дизайн. HTML5 и CSS3 в действии" — Итан Маркотт. Базовые принципы и практические примеры использования HTML5 и CSS3 в адаптивной вёрстке.
#подборка #книга #frontend #html #css
Топ-5 перспективных frontend-фреймворков на 2025 год
Забираем:
— Solid.js — реактивный фреймворк без виртуального DOM, обновляющий только измененные части страницы для максимальной производительности.
— Qwik — фреймворк с мгновенной загрузкой и оптимизированной интерактивностью благодаря откладыванию выполнения JavaScript.
— Svelte — компилирует компоненты в чистый JavaScript на этапе сборки, обеспечивая быстрые и легковесные приложения.
— Astro — сочетает преимущества статических сайтов с возможностью добавлять интерактивные элементы только при необходимости.
— Alpine.js — минималистичный фреймворк для добавления интерактивности на статические страницы, работающий прямо в HTML.
Подробней с примерами кода
#подборка #frontend #web
Забираем:
— Solid.js — реактивный фреймворк без виртуального DOM, обновляющий только измененные части страницы для максимальной производительности.
— Qwik — фреймворк с мгновенной загрузкой и оптимизированной интерактивностью благодаря откладыванию выполнения JavaScript.
— Svelte — компилирует компоненты в чистый JavaScript на этапе сборки, обеспечивая быстрые и легковесные приложения.
— Astro — сочетает преимущества статических сайтов с возможностью добавлять интерактивные элементы только при необходимости.
— Alpine.js — минималистичный фреймворк для добавления интерактивности на статические страницы, работающий прямо в HTML.
Подробней с примерами кода
#подборка #frontend #web
GitHub
GitHub - solidjs/solid: A declarative, efficient, and flexible JavaScript library for building user interfaces.
A declarative, efficient, and flexible JavaScript library for building user interfaces. - solidjs/solid