Портфолио
У вас есть готовые работы для портфолио, но вы никак не можете собрать их все в одном месте? Для вас бесплатный шаблон для сайта-портфолио разработчика!
Он многостраничный и адаптирован под разные экраны. В демо-версию встроен color picker, для возможности подбора цвета основной темы.
Пользуйтесь на здоровье!
Ссылка на демо-версию
Ссылка на GitHub репозиторий
#дизайн
У вас есть готовые работы для портфолио, но вы никак не можете собрать их все в одном месте? Для вас бесплатный шаблон для сайта-портфолио разработчика!
Он многостраничный и адаптирован под разные экраны. В демо-версию встроен color picker, для возможности подбора цвета основной темы.
Пользуйтесь на здоровье!
Ссылка на демо-версию
Ссылка на GitHub репозиторий
#дизайн
Emmet - это расширение для редакторов кода, которое упрощает и повышает скорость написания кода за счет использования сниппетов.
Например, написав div>ul>li*3, вы можете создать вот такой блок:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>.
И сэкономить прилично времени!
Если вы еще не освоили emmet, то сейчас самое время. Быстрый мини-курс из статьи поможет вам в этом!
Ссылка на статью
#статьи
Например, написав div>ul>li*3, вы можете создать вот такой блок:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>.
И сэкономить прилично времени!
Если вы еще не освоили emmet, то сейчас самое время. Быстрый мини-курс из статьи поможет вам в этом!
Ссылка на статью
#статьи
CSS градиент
Для создания красивого градиента, порой недостаточно указать только два цвета.
Например, при создании сине-желтого градиента, можно заметить по середине размытую и сероватую зону.
О CSS градиентах и о том, как избежать подобных несовершенств подробно в статье!
А если вы не совсем хотите вникать в данную тему, в конце статьи вы найдете ссылку на генератор градиентов.
Ссылка на статью
#css
Для создания красивого градиента, порой недостаточно указать только два цвета.
Например, при создании сине-желтого градиента, можно заметить по середине размытую и сероватую зону.
О CSS градиентах и о том, как избежать подобных несовершенств подробно в статье!
А если вы не совсем хотите вникать в данную тему, в конце статьи вы найдете ссылку на генератор градиентов.
Ссылка на статью
#css
QR code
Для генерации кодов существует не мало сторонних ресурсов, но всегда полезно знать, как можно реализовать подобную вещь самому.
Делимся обучающей статьей, как с помощью JavaScript создать генератор QR кода.
Ссылка на статью
#js
Для генерации кодов существует не мало сторонних ресурсов, но всегда полезно знать, как можно реализовать подобную вещь самому.
Делимся обучающей статьей, как с помощью JavaScript создать генератор QR кода.
Ссылка на статью
#js
Omatsuri
Еще один полезный ресурс в вашу копилку!
Здесь вы найдете:
- генератор треугольников
- генератор теней
- генератор градиентов
- конвертер SVG в JSX
- конвертер картинок в формат Base64
и еще многое другое.
Ссылка на ресурс
#инструменты
Еще один полезный ресурс в вашу копилку!
Здесь вы найдете:
- генератор треугольников
- генератор теней
- генератор градиентов
- конвертер SVG в JSX
- конвертер картинок в формат Base64
и еще многое другое.
Ссылка на ресурс
#инструменты
React Form
В интернет-магазинах часто используются многоэтапные формы для сбора всей необходимой информации о пользователе для оформления заказа.
И вы можете научиться создавать такие формы в React! Для этого советуем прочитать данную статью и повторить все этапы создания многоэтапной формы.
Читать статью
#react
В интернет-магазинах часто используются многоэтапные формы для сбора всей необходимой информации о пользователе для оформления заказа.
И вы можете научиться создавать такие формы в React! Для этого советуем прочитать данную статью и повторить все этапы создания многоэтапной формы.
Читать статью
#react
npm пакет
Часто разработчики из проекта в проект копируют различные части кода.
Например, в React повторяются одни и те же компоненты в разных проектах. И чтобы постоянно не заниматься копипастом, можно создать npm пакет для необходимого React компонента и в дальнейшем просто его устанавливать.
Статья как раз на эту тему!
Читать статью
#nodejs
Часто разработчики из проекта в проект копируют различные части кода.
Например, в React повторяются одни и те же компоненты в разных проектах. И чтобы постоянно не заниматься копипастом, можно создать npm пакет для необходимого React компонента и в дальнейшем просто его устанавливать.
Статья как раз на эту тему!
Читать статью
#nodejs
Шаблоны верстки
Делимся ресурсом, на котором собраны шаблоны с готовым кодом 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