Шаблоны верстки
Делимся ресурсом, на котором собраны шаблоны с готовым кодом HTML и CSS для верстки различных элементов:
- кастомных чекбоксов и радио-баттонов,
- переключателей,
- "липкого" хэдэра и футера,
- аккордиона,
и многого другого!
Ссылка на ресурс
#дизайн
Делимся ресурсом, на котором собраны шаблоны с готовым кодом HTML и CSS для верстки различных элементов:
- кастомных чекбоксов и радио-баттонов,
- переключателей,
- "липкого" хэдэра и футера,
- аккордиона,
и многого другого!
Ссылка на ресурс
#дизайн
Странный web
Статья посвящена странному вебу, а именно сайтам без какой-либо конкретной задумки. Некоторые из них и вправду интересные и залипательные.
Иногда полезны и вот такие бессмысленные творения веба, хотя бы просто для того, чтобы снять напряжение и повеселиться!
В статье, вы найдете ссылки на эти сайты и краткое описание.
Ссылка на статью
#статьи
Статья посвящена странному вебу, а именно сайтам без какой-либо конкретной задумки. Некоторые из них и вправду интересные и залипательные.
Иногда полезны и вот такие бессмысленные творения веба, хотя бы просто для того, чтобы снять напряжение и повеселиться!
В статье, вы найдете ссылки на эти сайты и краткое описание.
Ссылка на статью
#статьи
Вкладывание тэгов
Всем знаком сайт Can I use(caniuse.com), где можно проверить какая поддержка CSS свойств браузерами.
Еще один не менее полезный ресурс Can I include, где можно проверить, можно ли вкладывать какой-то определенный тэг в другой.
Очень важно, чтобы разметка сайта была валидна!
Поэтому, если есть сомнения, проверьте на данном сайте.
Ссылка на сайт
#html
Всем знаком сайт Can I use(caniuse.com), где можно проверить какая поддержка CSS свойств браузерами.
Еще один не менее полезный ресурс Can I include, где можно проверить, можно ли вкладывать какой-то определенный тэг в другой.
Очень важно, чтобы разметка сайта была валидна!
Поэтому, если есть сомнения, проверьте на данном сайте.
Ссылка на сайт
#html
Superhero.js
Сайт, на котором собрано множество статей о создании, тестировании и поддержке больших приложений JavaScript.
В них объясняется синтаксис JavaScript, организация проектов, тестирование кода и многое другое.
Кстати, у сайта зачетный дизайн!
Ссылка на ресурс
#javascript
Сайт, на котором собрано множество статей о создании, тестировании и поддержке больших приложений JavaScript.
В них объясняется синтаксис JavaScript, организация проектов, тестирование кода и многое другое.
Кстати, у сайта зачетный дизайн!
Ссылка на ресурс
#javascript
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