🎨 Дизайн-системы: Создание масштабируемых UI-компонентов
🎨 Дизайн-система — это набор повторно используемых компонентов и стандартов, которые помогают поддерживать единообразие и качество пользовательского интерфейса на протяжении всего проекта.
Преимущества использования дизайн-систем:
1) Консистентность
Использование единого стиля и компонентов улучшает восприятие бренда и упрощает разработку.
2) Масштабируемость
Дизайн-системы позволяют легко добавлять новые элементы и поддерживать большие проекты.
3)Ускорение разработки
Готовые компоненты и шаблоны сокращают время разработки и тестирования.
Как создать дизайн-систему?
Определите основные элементы
Начните с типографики, цветовой палитры, сетки и базовых компонентов (кнопки, формы и т.д.).
Создайте библиотеку компонентов
Используйте инструменты, такие как Storybook или Figma, для документирования и визуализации компонентов.
Интегрируйте в проект
Реализуйте компоненты в коде с использованием React или других фреймворков, сохраняя их универсальность и настраиваемость.
💡 Полезные ресурсы:
Storybook Documentation
Atomic Design by Brad Frost
Создание дизайн-системы позволяет обеспечить качество и масштабируемость интерфейсов на всех уровнях разработки. Это важный шаг для профессиональной работы над крупными проектами.
🎨 Дизайн-система — это набор повторно используемых компонентов и стандартов, которые помогают поддерживать единообразие и качество пользовательского интерфейса на протяжении всего проекта.
Преимущества использования дизайн-систем:
1) Консистентность
Использование единого стиля и компонентов улучшает восприятие бренда и упрощает разработку.
2) Масштабируемость
Дизайн-системы позволяют легко добавлять новые элементы и поддерживать большие проекты.
3)Ускорение разработки
Готовые компоненты и шаблоны сокращают время разработки и тестирования.
Как создать дизайн-систему?
Определите основные элементы
Начните с типографики, цветовой палитры, сетки и базовых компонентов (кнопки, формы и т.д.).
Создайте библиотеку компонентов
Используйте инструменты, такие как Storybook или Figma, для документирования и визуализации компонентов.
Интегрируйте в проект
Реализуйте компоненты в коде с использованием React или других фреймворков, сохраняя их универсальность и настраиваемость.
💡 Полезные ресурсы:
Storybook Documentation
Atomic Design by Brad Frost
Создание дизайн-системы позволяет обеспечить качество и масштабируемость интерфейсов на всех уровнях разработки. Это важный шаг для профессиональной работы над крупными проектами.
Storybook
Get started with Storybook | Storybook docs
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.
В статье на примере простого сайта, постараюсь описать три способа рендеринга приложений, раскрыть их плюсы и минусы, и на практических примерах провести сравнение производительности и размеров приложения. Материал больше подойдёт начинающим фронтенд-разработчикам, или тем, кто хочет познакомиться c CSR, SSG и SSR. Для лучшего понимания от вас потребуются начальные знания React, менеджеров пакетов npm или yarn.
Ссылка
#ssr
Please open Telegram to view this post
VIEW IN TELEGRAM
Сегодня мы рады сообщить о выходе Vue 3.5 "Tengen Toppa Gurren Lagann"!
Этот минорный релиз не содержит кардинальных изменений и включает в себя как внутренние улучшения, так и новые полезные функции. Мы расскажем о некоторых основных моментах в этом блоге - полный список изменений и новых возможностей можно найти в полном журнале изменений на GitHub.
Ссылка
#vue
Please open Telegram to view this post
VIEW IN TELEGRAM
Я немного отстал от современных тенденций фронтенд-разработки. Помню, были статьи на тему раздутия веб-среды, в которых писали, что средний размер страницы начал достигать нескольких мегабайтов!
И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли?
Ссылка
#js
Please open Telegram to view this post
VIEW IN TELEGRAM
function sayHi() {
console.log(name)
console.log(age)
var name = "John"
let age = 30
}
sayHi()
Что будет в консоли ?
Anonymous Quiz
34%
John и undefined
15%
John и Error
11%
Error
41%
undefined и Error
Пояснение к ответу
В функции sayHi мы сначала определяем переменную name с помощью ключевого слова var. Это означает, что name поднимается в начало функции. name будет иметь значение undefined до тех пор, пока выполнение кода не дойдет до строки, где ей присваивается значение John. Мы еще не определили значение name, когда пытаемся вывести ее значение в консоль, поэтому получаем undefined. Переменные, объявленные с помощью ключевых слов let и const, также поднимаются в начало области видимости, но в отличие от переменных, объявленных с помощью var, не инициализируются, т.е. такие переменные поднимаются без значения. Доступ к ним до инициализации невозможен. Это называется временной мертвой зоной. Когда мы пытаемся обратиться к переменным до их определения, JavaScript выбрасывает исключение ReferenceError.
Кажется, мы стали забывать основы фронтенда
Обычно, в подобных статьях я выступаю на позитивной стороне и говорю, что не все так плохо, что умелыми руками можно делать прекрасные вещи. Однако, недавно со мной произошло несколько историй, которые заставили меня пересмотреть некоторые вещи.
В этой статье я перескажу истории с некоторыми техническими деталями и порассуждаю, что делать дальше.
Ссылка
#js
Обычно, в подобных статьях я выступаю на позитивной стороне и говорю, что не все так плохо, что умелыми руками можно делать прекрасные вещи. Однако, недавно со мной произошло несколько историй, которые заставили меня пересмотреть некоторые вещи.
В этой статье я перескажу истории с некоторыми техническими деталями и порассуждаю, что делать дальше.
Ссылка
#js
Как мы приготовили Feature-Sliced Design
В этой статье расскажу немного о том, как мы знакомились с замечательной архитектурой FSD (Feature-Sliced Design), как мы рефакторили свои проекты под неё. И, самое главное, что из этого вышло. Постараюсь заинтересовать вас, чтобы и вы смело её внедряли в свои проекты. FSD — это, пожалуй, то, чего так не хватало в Frontend-мире.
Ссылка
#react
В этой статье расскажу немного о том, как мы знакомились с замечательной архитектурой FSD (Feature-Sliced Design), как мы рефакторили свои проекты под неё. И, самое главное, что из этого вышло. Постараюсь заинтересовать вас, чтобы и вы смело её внедряли в свои проекты. FSD — это, пожалуй, то, чего так не хватало в Frontend-мире.
Ссылка
#react
📘 5 must-read книг по JavaScript
🎯 JavaScript — язык, который постоянно развивается, и чтобы оставаться на гребне волны, важно углублять свои знания. Вот 5 книг, которые обязательно стоит прочитать каждому разработчику:
"You Don't Know JS" (Kyle Simpson) — серия из шести книг, которая глубоко погружается в концепции языка.
"JavaScript: The Good Parts" (Douglas Crockford) — классика, которая научит писать чистый и эффективный код.
"Eloquent JavaScript" (Marijn Haverbeke) — книга, которая поможет новичкам освоить JavaScript, а опытным разработчикам углубить свои знания.
"JavaScript: The Definitive Guide" (David Flanagan) — подробное руководство, которое часто называют "библией JavaScript".
📚 Эти книги помогут вам не только улучшить навыки, но и понять, как работает JavaScript изнутри. Чтение — отличный способ перейти на новый уровень!
🎯 JavaScript — язык, который постоянно развивается, и чтобы оставаться на гребне волны, важно углублять свои знания. Вот 5 книг, которые обязательно стоит прочитать каждому разработчику:
"You Don't Know JS" (Kyle Simpson) — серия из шести книг, которая глубоко погружается в концепции языка.
"JavaScript: The Good Parts" (Douglas Crockford) — классика, которая научит писать чистый и эффективный код.
"Eloquent JavaScript" (Marijn Haverbeke) — книга, которая поможет новичкам освоить JavaScript, а опытным разработчикам углубить свои знания.
"JavaScript: The Definitive Guide" (David Flanagan) — подробное руководство, которое часто называют "библией JavaScript".
📚 Эти книги помогут вам не только улучшить навыки, но и понять, как работает JavaScript изнутри. Чтение — отличный способ перейти на новый уровень!
React.js: Знакомимся с useReducer, Axios и JSON Server на примере создания инвентарного списка
Независимо от того, как вы относитесь к React, создавать что-либо с его помощью — это настоящее удовольствие, и с этим трудно не согласиться. Поэтому сегодня я решил создать простой инвентарный список, чтобы объяснить несколько мощных концепций, таких как сложное управление состояниями с помощью useReducer.
А также между делом мы создадим мок API сервера с помощью JSON Server, будем использовать axios для вызова API и, наконец, воспользуемся хуком useReducer для управления состоянием.
Ссылка
#react
Независимо от того, как вы относитесь к React, создавать что-либо с его помощью — это настоящее удовольствие, и с этим трудно не согласиться. Поэтому сегодня я решил создать простой инвентарный список, чтобы объяснить несколько мощных концепций, таких как сложное управление состояниями с помощью useReducer.
А также между делом мы создадим мок API сервера с помощью JSON Server, будем использовать axios для вызова API и, наконец, воспользуемся хуком useReducer для управления состоянием.
Ссылка
#react
Бесплатный онлайн-справочник по HTML (если вдруг у вас с ним проблемы)
Справочник хорош тем, что показывает всё наглядно: не просто «вот тег <a> делает то-то», но и покажет пример использования тега
Перейти к справочнику
#html
Справочник хорош тем, что показывает всё наглядно: не просто «вот тег <a> делает то-то», но и покажет пример использования тега
Перейти к справочнику
#html
Книга по React
Лучшие практики создания приложений, для чтения не нужны супер-глубокие знания React, хватит HTML/CSS + JS на базовом уровне
👩💻 Почитать книжку
#react
Лучшие практики создания приложений, для чтения не нужны супер-глубокие знания React, хватит HTML/CSS + JS на базовом уровне
#react
Please open Telegram to view this post
VIEW IN TELEGRAM
Сервис с базой вопросов к собесам и квизами по фронтенду
Квизы по JS, React, вопросами по CSS и TypeScript.
👀 Посмотреть-почитать
#frontend
Квизы по JS, React, вопросами по CSS и TypeScript.
#frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Игра-тренажёр по CSS Grid
В Grid Garden вам предстоитследить за своим огородом управлять растениями в саду при помощи CSS Grid, Приятный нетипичный способ изучить важную технологию
👀 Начать тренировку
#css
В Grid Garden вам предстоит
#css
Please open Telegram to view this post
VIEW IN TELEGRAM
Игра-тренажёр по Flexbox
Раз уж вам так понравилась предыдущая игра — держите ещё одну, но уже по флексам. Суть игры — расставить пушки так, чтобы кружочки-злодеи не прошли по карте
👀 Расставить пушки
#css
Раз уж вам так понравилась предыдущая игра — держите ещё одну, но уже по флексам. Суть игры — расставить пушки так, чтобы кружочки-злодеи не прошли по карте
👀 Расставить пушки
#css
JavaScript с нуля до профи
Книга обучает разработке веб-приложений на JavaScript через теорию и практические проекты, включая проверку данных, асинхронный код и работу с DOM. Включены примеры валидаторов, игр и анимаций, а также краткий курс по HTML и CSS.
👀 Почитать книжку
#js
Книга обучает разработке веб-приложений на JavaScript через теорию и практические проекты, включая проверку данных, асинхронный код и работу с DOM. Включены примеры валидаторов, игр и анимаций, а также краткий курс по HTML и CSS.
👀 Почитать книжку
#js
MediaElement.js
JavaScript-библиотека для добавления HTML5 видео- и аудиоплеера на сайт.
👀 Посмотреть и забрать себе
#html
JavaScript-библиотека для добавления HTML5 видео- и аудиоплеера на сайт.
#html
Please open Telegram to view this post
VIEW IN TELEGRAM
CodeBasics — портал с бесплатными курсами программирования
Курсы по самым разным направлениям. По фронту есть HTML/CSS, JS, TypeScript. Как пишут авторы, помимо материала на курсе есть тренажёры для отработки навыков
👀 Приступить к курсам
#js #css #html
Курсы по самым разным направлениям. По фронту есть HTML/CSS, JS, TypeScript. Как пишут авторы, помимо материала на курсе есть тренажёры для отработки навыков
#js #css #html
Please open Telegram to view this post
VIEW IN TELEGRAM
JavaScript. Рецепты для разработчиков
Зачем решать типовые задачи с нуля? В книге представлены готовые рецепты для JavaScript, примеры кода и советы по настройке среды разработки, работе с мультимедиа, данными и асинхронным кодом. Вы также освоите Node.js и Express для создания приложений.
👀 Почитать книжку
#js
Зачем решать типовые задачи с нуля? В книге представлены готовые рецепты для JavaScript, примеры кода и советы по настройке среды разработки, работе с мультимедиа, данными и асинхронным кодом. Вы также освоите Node.js и Express для создания приложений.
👀 Почитать книжку
#js