GraphQL
Пора осваивать новые технологии!
За последнее время GraphQL стал достаточно популярным и многие компании используют его при разработке приложений.
GraphQL - это язык запросов для API и он имеет ряд преимуществ. Например, дает возможность запрашивать именно то, что нужно, и ничего больше. Для этого нужно просто добавить больше свойств в запросы вместо добавления нескольких конечных точек.
В статье показан пример, как делать такие запросы в React приложении и обрабатывать обновления в реальном времени на стороне клиента.
Ссылка на статью
#react
Пора осваивать новые технологии!
За последнее время GraphQL стал достаточно популярным и многие компании используют его при разработке приложений.
GraphQL - это язык запросов для API и он имеет ряд преимуществ. Например, дает возможность запрашивать именно то, что нужно, и ничего больше. Для этого нужно просто добавить больше свойств в запросы вместо добавления нескольких конечных точек.
В статье показан пример, как делать такие запросы в React приложении и обрабатывать обновления в реальном времени на стороне клиента.
Ссылка на статью
#react
Производительность Node.js
Пишите приложения на Node.js?
В статье вы найдете 6 дельных советов, как повысить производительность приложения.
Ссылка на статью
#nodejs
Пишите приложения на Node.js?
В статье вы найдете 6 дельных советов, как повысить производительность приложения.
Ссылка на статью
#nodejs
Шаблоны фона
Генератор кода векторных бесшовных фонов с возможностью настроек цвета, масштаба, толщины линии.
Вы можете выбрать готовый SVG или CSS код, а так же скачать фон в формате SVG.
Ссылка на сайт
#дизайн
Генератор кода векторных бесшовных фонов с возможностью настроек цвета, масштаба, толщины линии.
Вы можете выбрать готовый SVG или CSS код, а так же скачать фон в формате SVG.
Ссылка на сайт
#дизайн
Создание сниппетов
Сниппет или фрагмент кода — это термин программирования, который относится к небольшой части повторно используемого исходного кода, машинного кода или текста.
Сниппеты кода помогают программистам сократить время, необходимое для ввода повторяющейся информации при написании. Они являются функциями большинства текстовых редакторов, редакторов кода.
У нас для вас радостная новость! Вы можете создавать собственные сниппеты под свои нужды и они ускорят вашу работу в несколько раз.
Как их создавать, читайте в статье!
В статье показаны примеры, как делать сниппеты в VS Code, но их также можно создавать и в других редакторах, просто немного другим способом.
Ссылка на статью
#статьи
Сниппет или фрагмент кода — это термин программирования, который относится к небольшой части повторно используемого исходного кода, машинного кода или текста.
Сниппеты кода помогают программистам сократить время, необходимое для ввода повторяющейся информации при написании. Они являются функциями большинства текстовых редакторов, редакторов кода.
У нас для вас радостная новость! Вы можете создавать собственные сниппеты под свои нужды и они ускорят вашу работу в несколько раз.
Как их создавать, читайте в статье!
В статье показаны примеры, как делать сниппеты в VS Code, но их также можно создавать и в других редакторах, просто немного другим способом.
Ссылка на статью
#статьи
Контент псевдоэлемента
У псевдоэлементов ::before и ::after есть свойство content, куда можно записать текст, символ Unicode и даже CSS функцию attr(данная функция возвращает значение атрибута, указанного в элементе).
В статье показан пример, как с помощью JavaScript можно получить значение CSS свойства content.
Ссылка на статью
#js
У псевдоэлементов ::before и ::after есть свойство content, куда можно записать текст, символ Unicode и даже CSS функцию attr(данная функция возвращает значение атрибута, указанного в элементе).
В статье показан пример, как с помощью JavaScript можно получить значение CSS свойства content.
Ссылка на статью
#js
Vuestic UI
Vuestic UI - это UI библиотека, содержащая более 50 многофункциональных компонентов. Она позволяет настраивать компоненты глобально через конфигурации и переменные CSS.
Пользовательский интерфейс Vuestic совместим с Vue.js 3.0, готов к работе с i18n и поддерживает все современные браузеры.
Ссылка на официальный сайт
#инструменты
Vuestic UI - это UI библиотека, содержащая более 50 многофункциональных компонентов. Она позволяет настраивать компоненты глобально через конфигурации и переменные CSS.
Пользовательский интерфейс Vuestic совместим с Vue.js 3.0, готов к работе с i18n и поддерживает все современные браузеры.
Ссылка на официальный сайт
#инструменты
React Animation
Иногда хочется оживить сайт и добавить немного анимации. Здесь на помощь приходят специальные библиотеки для этой цели.
В статье представлен обзор трех библиотек анимаций для React:
- React Transition Group
- React Reveal
- React Spring
Ссылка на статью
#react
Иногда хочется оживить сайт и добавить немного анимации. Здесь на помощь приходят специальные библиотеки для этой цели.
В статье представлен обзор трех библиотек анимаций для React:
- React Transition Group
- React Reveal
- React Spring
Ссылка на статью
#react
Динамическое автозаполнение
При вводе в строку запроса Google, сразу предлагаются варианты для поиска и с вводом каждого нового символа генерируются новые варианты. Это и есть динамическое автозаполнение строки поиска.
Как реализовать подобную вещь с помощью Node.js и React подробно описано в статье.
Ссылка на статью
#react #nodejs
При вводе в строку запроса Google, сразу предлагаются варианты для поиска и с вводом каждого нового символа генерируются новые варианты. Это и есть динамическое автозаполнение строки поиска.
Как реализовать подобную вещь с помощью Node.js и React подробно описано в статье.
Ссылка на статью
#react #nodejs
Портфолио
У вас есть готовые работы для портфолио, но вы никак не можете собрать их все в одном месте? Для вас бесплатный шаблон для сайта-портфолио разработчика!
Он многостраничный и адаптирован под разные экраны. В демо-версию встроен 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
Ссылка на официальный сайт
#инструменты