Grommet - библиотека компонентов React, которая обеспечивает доступность, модульность, адаптивность и кроссбраузерность.
Библиотека включает в себя такие компоненты, как:
- header
- footer
- меню
- табы
- аккордион
- различные контроллы и многое другое.
Все они созданы с учетом спецификации W3C и легко настраиваются в соответствии с потребностями вашего проекта.
Статья поможет вам разобраться, как работать с данной библиотекой.
Ссылка на статью о Grommet
Ссылка на официальный сайт
#инструменты
Библиотека включает в себя такие компоненты, как:
- header
- footer
- меню
- табы
- аккордион
- различные контроллы и многое другое.
Все они созданы с учетом спецификации W3C и легко настраиваются в соответствии с потребностями вашего проекта.
Статья поможет вам разобраться, как работать с данной библиотекой.
Ссылка на статью о Grommet
Ссылка на официальный сайт
#инструменты
VeeValidate
Как легко и быстро создать валидацию для формы?
Воспользоваться готовым решением!
VeeValidate - фрэймворк для валидации форм в приложениях на Vue.
Хочется похвалить документацию! Все доступно и понятно. В документации версии v4.x для Vue3 есть обучающая статья по использованию данного фрэймворка.
Ссылка на официальный сайт
#vue
Как легко и быстро создать валидацию для формы?
Воспользоваться готовым решением!
VeeValidate - фрэймворк для валидации форм в приложениях на Vue.
Хочется похвалить документацию! Все доступно и понятно. В документации версии v4.x для Vue3 есть обучающая статья по использованию данного фрэймворка.
Ссылка на официальный сайт
#vue
Depcheck
По мере того, как проект разрастается, он превращается в беспорядок. Особенно если в нем задействовано много разработчиков.
Частично данный беспорядок заключается в наличии неиспользуемых импортов, файлов, кусков кода и зависимостей.
Depcheck — это инструмент для анализа зависимостей в проекте, чтобы определить какие пакеты не используются или устарели.
В статье показано, как пользоваться данным инструментом. Избавьтесь от всего ненужного и держите код чистым!
Читать статью
#nodejs
По мере того, как проект разрастается, он превращается в беспорядок. Особенно если в нем задействовано много разработчиков.
Частично данный беспорядок заключается в наличии неиспользуемых импортов, файлов, кусков кода и зависимостей.
Depcheck — это инструмент для анализа зависимостей в проекте, чтобы определить какие пакеты не используются или устарели.
В статье показано, как пользоваться данным инструментом. Избавьтесь от всего ненужного и держите код чистым!
Читать статью
#nodejs
Иконки
Ресурсов с бесплатными иконками много не бывает...
Поэтому сохраняйте в закладки!
Примечательно, что на данном сайте можно менять толщину начертания и размер одновременно для всех иконок в библиотеке. А это означает, что не нужно тратить много времени, чтобы подбирать похожие по стилям иконки.
Ссылка на сайт
#дизайн
Ресурсов с бесплатными иконками много не бывает...
Поэтому сохраняйте в закладки!
Примечательно, что на данном сайте можно менять толщину начертания и размер одновременно для всех иконок в библиотеке. А это означает, что не нужно тратить много времени, чтобы подбирать похожие по стилям иконки.
Ссылка на сайт
#дизайн
Сode Pen
Где искать вдохновение frontend-разработчику? На сайте Code Pen!
100 самых популярных пенов по версии пользователей.
Среди них можно найти очень крутые работы, например:
- интересные экраны загрузки;
- эффект порванной фотографии;
- различные 3D анимации;
и многое другое!
Ссылка на список пенов
#статьи
Где искать вдохновение frontend-разработчику? На сайте Code Pen!
100 самых популярных пенов по версии пользователей.
Среди них можно найти очень крутые работы, например:
- интересные экраны загрузки;
- эффект порванной фотографии;
- различные 3D анимации;
и многое другое!
Ссылка на список пенов
#статьи
Flexulator - это инструмент, помогающий визуализировать работу флексов.
Ведь возможно не всем до конца понятно, как работают свойства flex-grow, flex-shrink и flex-basis.
В данном инструменте наглядно можно посмотреть как производятся расчеты.
Ссылка на сайт
#css
Ведь возможно не всем до конца понятно, как работают свойства flex-grow, flex-shrink и flex-basis.
В данном инструменте наглядно можно посмотреть как производятся расчеты.
Ссылка на сайт
#css
ES2022
Новые спецификации ECMAScript выпускаются каждый год, начиная с 2015 года. И этот год не исключение! Что нового стоит ожидать?
В этой статье рассмотрено 8 нововведений, которые, как ожидается, будут выпущены в середине 2022 года.
Маленький спойлер:
ES2022 позволит разработчикам использовать await за пределами асинхронной функции.
Читать статью
#javascript
Новые спецификации ECMAScript выпускаются каждый год, начиная с 2015 года. И этот год не исключение! Что нового стоит ожидать?
В этой статье рассмотрено 8 нововведений, которые, как ожидается, будут выпущены в середине 2022 года.
Маленький спойлер:
ES2022 позволит разработчикам использовать await за пределами асинхронной функции.
Читать статью
#javascript
Grid шпаргалка
CSS Grid является неотъемлемой частью набора знаний любого фронтенд разработчика, поскольку данный модуль достаточно упрощает процесс верстки. И если вы им не владеете, то советуем начать изучение.
Как раз по этому поводу, делимся интерактивной шпаргалкой по гридам.
Ссылка на шпаргалку
#инструменты
CSS Grid является неотъемлемой частью набора знаний любого фронтенд разработчика, поскольку данный модуль достаточно упрощает процесс верстки. И если вы им не владеете, то советуем начать изучение.
Как раз по этому поводу, делимся интерактивной шпаргалкой по гридам.
Ссылка на шпаргалку
#инструменты
Эволюция Vue
Vue 3 - актуальная версия данного фрэймворка на текущий момент.
Более двух лет происходили изменения в экосистеме Vue и за это время многое изменилось.
Например, новый Composition API позволил создавать более компонуемый код, а также проложил путь для более легкого внедрения TypeScript.
Об этом обновлении и других читайте подробнее в статье.
Ссылка на статью
#vue
Vue 3 - актуальная версия данного фрэймворка на текущий момент.
Более двух лет происходили изменения в экосистеме Vue и за это время многое изменилось.
Например, новый Composition API позволил создавать более компонуемый код, а также проложил путь для более легкого внедрения TypeScript.
Об этом обновлении и других читайте подробнее в статье.
Ссылка на статью
#vue
Сайты на Node.js
Из этой статьи вы узнаете, какие популярные приложения написаны на Node.js и почему компания выбрала эту платформу.
Маленький спойлер:
Среди них Netflix, Medium, а также другие не менее известные.
Список остальных приложений смотрите в статье.
Ссылка на статью
#nodejs
Из этой статьи вы узнаете, какие популярные приложения написаны на Node.js и почему компания выбрала эту платформу.
Маленький спойлер:
Среди них Netflix, Medium, а также другие не менее известные.
Список остальных приложений смотрите в статье.
Ссылка на статью
#nodejs
Генератор Mockup
С помощью данного генератора, вы можете создавать картинки макетов интерфейсов для вставки их на сайт, в портфолио или презентацию.
Доступны макеты:
- дашбордов
- CRM-систем
- мессенджеров
и другие.
Ссылка на сайт
#дизайн
С помощью данного генератора, вы можете создавать картинки макетов интерфейсов для вставки их на сайт, в портфолио или презентацию.
Доступны макеты:
- дашбордов
- CRM-систем
- мессенджеров
и другие.
Ссылка на сайт
#дизайн
CSS Overview - это вкладка в Chrome Dev Tools, на которой отображается сводная информация о текущей веб-странице.
В данной вкладке вы можете посмотреть:
- все используемые цвета
- используемые шрифты и их все размеры
- список неактивных CSS стилей (с указанием на каком элементе и какое именно свойство не работает)
и другое.
О том, как найти эту вкладку и как ей пользоваться читайте в статье.
Ссылка на статью
#статьи
В данной вкладке вы можете посмотреть:
- все используемые цвета
- используемые шрифты и их все размеры
- список неактивных CSS стилей (с указанием на каком элементе и какое именно свойство не работает)
и другое.
О том, как найти эту вкладку и как ей пользоваться читайте в статье.
Ссылка на статью
#статьи
Анимация фона
Автор статьи назвал данную анимацию "эффект поднятия шторы".
Это эффект при котором фон меняется от темного к светлому при прокрутке, а содержимое сверху также меняется от светлого к темному.
Звучит, возможно не совсем понятно на словах, поэтому лучше всего посмотреть пример реализации.
А еще лучше повторить его, в статье все рассказано пошагово.
Ссылка на статью
#css
Автор статьи назвал данную анимацию "эффект поднятия шторы".
Это эффект при котором фон меняется от темного к светлому при прокрутке, а содержимое сверху также меняется от светлого к темному.
Звучит, возможно не совсем понятно на словах, поэтому лучше всего посмотреть пример реализации.
А еще лучше повторить его, в статье все рассказано пошагово.
Ссылка на статью
#css
Паттерны проектирования
Бесплатная книга!
В этой книге вы узнаете о паттернах проектирования, производительности и шаблонах рендеринга для создания высококачественных веб-приложений с использованием современного JavaScript и React.
Ссылка на книгу
#js
Бесплатная книга!
В этой книге вы узнаете о паттернах проектирования, производительности и шаблонах рендеринга для создания высококачественных веб-приложений с использованием современного JavaScript и React.
Ссылка на книгу
#js
30 seconds of knowledge
Изучаете фронтенд-разработку?
Один из необычных и весьма полезных способов изучения - использовать расширение для Google Chrome "30 seconds of knowledge".
Каждый раз открывая новую пустую вкладку, на экране будет появляться полезная информация, связанная с выбранными вами темами.
Нужно выбрать какие языки программирования вам интересны в параметрах расширения.
И каждый день вы будете изучать что-то новое.
Это гениально!
Ссылка на официальный сайт
#инструменты
Изучаете фронтенд-разработку?
Один из необычных и весьма полезных способов изучения - использовать расширение для Google Chrome "30 seconds of knowledge".
Каждый раз открывая новую пустую вкладку, на экране будет появляться полезная информация, связанная с выбранными вами темами.
Нужно выбрать какие языки программирования вам интересны в параметрах расширения.
И каждый день вы будете изучать что-то новое.
Это гениально!
Ссылка на официальный сайт
#инструменты
localStorage в React
localStorage — это объект веб-хранилища, который позволяет сайтам и приложениям хранить данные в виде пары ключ-значение в браузере.
Например, иногда его используют для хранения текущей установленной цветовой темы. Каждый раз, когда пользователь ее переключает, данные сохраняются в хранилище браузера.
Из этой статьи вы узнаете, как использовать localStorage с хуками React.
Ссылка на статью
#react
localStorage — это объект веб-хранилища, который позволяет сайтам и приложениям хранить данные в виде пары ключ-значение в браузере.
Например, иногда его используют для хранения текущей установленной цветовой темы. Каждый раз, когда пользователь ее переключает, данные сохраняются в хранилище браузера.
Из этой статьи вы узнаете, как использовать localStorage с хуками React.
Ссылка на статью
#react
npm команды
В статье идет речь о малоизвестных командах npm list и npm config list.
Например, npm list позволяет просмотреть все установленные зависимости в проекте.
В каких случаях они могут быть полезны читайте подробно в статье.
Ссылка на статью
#nodejs
В статье идет речь о малоизвестных командах npm list и npm config list.
Например, npm list позволяет просмотреть все установленные зависимости в проекте.
В каких случаях они могут быть полезны читайте подробно в статье.
Ссылка на статью
#nodejs
Стоковые фото
Делимся ресурсом с бесплатными стоковыми фотографиями для личного и коммерческого использования.
Все изображения с высоким разрешением и распределены по категориям на определенные тематики.
Ссылка на ресурс
#дизайн
Делимся ресурсом с бесплатными стоковыми фотографиями для личного и коммерческого использования.
Все изображения с высоким разрешением и распределены по категориям на определенные тематики.
Ссылка на ресурс
#дизайн
Версия 100
Chrome и Firefox достигнут версии 100 через несколько месяцев и это может привести к поломке сайтов...
Но не пугайтесь, не к поломке всех сайтов! А только тех, которые полагаются на идентификацию версии браузера для выполнения какой-то бизнес-логики.
User-Agent (UA) — это строка, которую браузеры отправляют в заголовках HTTP, чтобы серверы могли идентифицировать браузер. Она также доступна через JavaScript с помощью navigator.userAgent.
Проблема в том, что при передаче этой строки учитывается номер версии, состоящий из двух цифр, а поскольку намечается релиз версий, состоящих их трех цифр, это может стать некой проблемой.
Более подробно о данной сложности и какие решения были предусмотрены для ее решения читайте в статье.
Ссылка на статью
#статьи
Chrome и Firefox достигнут версии 100 через несколько месяцев и это может привести к поломке сайтов...
Но не пугайтесь, не к поломке всех сайтов! А только тех, которые полагаются на идентификацию версии браузера для выполнения какой-то бизнес-логики.
User-Agent (UA) — это строка, которую браузеры отправляют в заголовках HTTP, чтобы серверы могли идентифицировать браузер. Она также доступна через JavaScript с помощью navigator.userAgent.
Проблема в том, что при передаче этой строки учитывается номер версии, состоящий из двух цифр, а поскольку намечается релиз версий, состоящих их трех цифр, это может стать некой проблемой.
Более подробно о данной сложности и какие решения были предусмотрены для ее решения читайте в статье.
Ссылка на статью
#статьи
selectmenu
Относительно легко стилизовать внешний вид select, в то время как option почти невозможно.
selectmenu - это экспериментальный контролл формы, который должен решить проблемы кастомизации select в будущем.
Open UI — это группа разработчиков и дизайнеров, которые решили решить именно эту проблему, а заодно попутно и другие. Для этого они создают спецификации того, как эти элементы управления должны быть реализованы на веб-платформе, а также требования доступности, которые они должны учитывать.
Реализация selectmenu началась относительно недавно и он еще не доступен во всех популярных браузерах, а пока только в тех, что на основе Chromium (если включить флаг «Экспериментальные функции веб-платформы» на странице). Работа выполняется командой Microsoft Edge в сотрудничестве с командой Google Chrome.
Примеры реализации кастомизированного select с помощью selectmenu, а так же более подробно о новинке читайте в статье.
Ссылка на статью
#css
Относительно легко стилизовать внешний вид select, в то время как option почти невозможно.
selectmenu - это экспериментальный контролл формы, который должен решить проблемы кастомизации select в будущем.
Open UI — это группа разработчиков и дизайнеров, которые решили решить именно эту проблему, а заодно попутно и другие. Для этого они создают спецификации того, как эти элементы управления должны быть реализованы на веб-платформе, а также требования доступности, которые они должны учитывать.
Реализация selectmenu началась относительно недавно и он еще не доступен во всех популярных браузерах, а пока только в тех, что на основе Chromium (если включить флаг «Экспериментальные функции веб-платформы» на странице). Работа выполняется командой Microsoft Edge в сотрудничестве с командой Google Chrome.
Примеры реализации кастомизированного select с помощью selectmenu, а так же более подробно о новинке читайте в статье.
Ссылка на статью
#css
Deep JavaScript
Бесплатная версия книги Deep JavaScript!
Также доступна платная в других форматах.
Эта книга предлагает погрузиться глубоко в JavaScript.
В ней рассказывается:
- о практических методах, как использовать язык лучше;
- о том, как работает язык;
- о спецификации ECMAScript и многом другом!
Ссылка на книгу
#javascript
Бесплатная версия книги Deep JavaScript!
Также доступна платная в других форматах.
Эта книга предлагает погрузиться глубоко в JavaScript.
В ней рассказывается:
- о практических методах, как использовать язык лучше;
- о том, как работает язык;
- о спецификации ECMAScript и многом другом!
Ссылка на книгу
#javascript