Генератор 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
Openbase
Openbase помогает разработчикам выбирать среди множества npm пакетов подходящий.
Для каждого пакета вы можете найти обзоры других разработчиков, а также информацию о его популярности, надежности и многом другом.
Данный сервис поможет выбирать правильные решения для любой задачи.
Ссылка
#инструменты
Openbase помогает разработчикам выбирать среди множества npm пакетов подходящий.
Для каждого пакета вы можете найти обзоры других разработчиков, а также информацию о его популярности, надежности и многом другом.
Данный сервис поможет выбирать правильные решения для любой задачи.
Ссылка
#инструменты
nextTick
nextTick - это утилита Vue, которая используется в случаях, когда нужно дождаться обновления DOM после его перерисовки.
Важно знать, что DOM обновляется асинхронно. Когда меняются какие-то данные во Vue, изменение не сразу отображается в DOM. Обычно это происходит так быстро, что порой может не иметь значения.
Но иногда, например, нужно сразу обновить отрендеренный DOM после того, как Vue отрисовал его. А сделать это в методе вы сразу не можете, потому что обновление еще не произошло. В таких случаях на помощь приходит nextTick.
Как и когда использовать nextTick читайте в статье!
Ссылка на статью
#vue
nextTick - это утилита Vue, которая используется в случаях, когда нужно дождаться обновления DOM после его перерисовки.
Важно знать, что DOM обновляется асинхронно. Когда меняются какие-то данные во Vue, изменение не сразу отображается в DOM. Обычно это происходит так быстро, что порой может не иметь значения.
Но иногда, например, нужно сразу обновить отрендеренный DOM после того, как Vue отрисовал его. А сделать это в методе вы сразу не можете, потому что обновление еще не произошло. В таких случаях на помощь приходит nextTick.
Как и когда использовать nextTick читайте в статье!
Ссылка на статью
#vue
Обработка PDF
В экосистеме JavaScript отсутствует надежная поддержка работы с PDF-файлами.
Но для этого существует npm пакет pdf-lib!
В статье на примерах показано, как управлять PDF-файлами: создавать новые, добавлять в них текст и модифицировать уже существующие и еще много других полезных манипуляций. И все это с помощью Node.js!
Ссылка на статью
#nodejs
В экосистеме JavaScript отсутствует надежная поддержка работы с PDF-файлами.
Но для этого существует npm пакет pdf-lib!
В статье на примерах показано, как управлять PDF-файлами: создавать новые, добавлять в них текст и модифицировать уже существующие и еще много других полезных манипуляций. И все это с помощью Node.js!
Ссылка на статью
#nodejs
Анимация градиента
Анимация градиента бэкграунда - это что-то необычное...Стоит взять на заметку!
А еще делимся ссылкой на генератор таких анимаций!
Ссылка на генератор
#дизайн
Анимация градиента бэкграунда - это что-то необычное...Стоит взять на заметку!
А еще делимся ссылкой на генератор таких анимаций!
Ссылка на генератор
#дизайн
emoji
Забавная статья об эмодзи!
Знали ли вы, что если в JavaScript объединить несколько разных эмодзи, они вернут одну общую?
Например, сочетание следующих:
['👨', '🏼', '', '💻'].join('') // => 👨🏼💻
И наоборот, вы можете разделить одну эмодзи на несколько:
[...'👨🏼💻'] // => ['👨', '🏼', '', '💻']
Почему это возможно, читайте в статье.
Ссылка на статью
#статьи
Забавная статья об эмодзи!
Знали ли вы, что если в JavaScript объединить несколько разных эмодзи, они вернут одну общую?
Например, сочетание следующих:
['👨', '🏼', '', '💻'].join('') // => 👨🏼💻
И наоборот, вы можете разделить одну эмодзи на несколько:
[...'👨🏼💻'] // => ['👨', '🏼', '', '💻']
Почему это возможно, читайте в статье.
Ссылка на статью
#статьи
CSS лайфхаки
В статье приведены полезные примеры создания UI элементов и анимационных эффектов без использования JavaScript.
Например, создание чеклиста на чистом CSS или появление подсказок с помощью attr().
Всегда круто иметь в своем арсенале такие знания!
Все примеры смотрите в статье.
Ссылка на статью
#css
В статье приведены полезные примеры создания UI элементов и анимационных эффектов без использования JavaScript.
Например, создание чеклиста на чистом CSS или появление подсказок с помощью attr().
Всегда круто иметь в своем арсенале такие знания!
Все примеры смотрите в статье.
Ссылка на статью
#css
JavaScript анимация
В статье рассказывается о реализации запуска анимации при прокрутке страницы.
Многие пользователи могут вообще никогда не прокручивать страницу вниз, поэтому если запускать анимацию только тогда, когда это необходимо, уменьшит время загрузки.
Существует множество библиотек, которые вы можете использовать для реализации, например, популярный плагин Greensock ScrollTrigger.
Подобное можно реализовать и на ванильном JavaScript. Пример реализации смотрите в данной статье.
Ссылка на статью
#js
В статье рассказывается о реализации запуска анимации при прокрутке страницы.
Многие пользователи могут вообще никогда не прокручивать страницу вниз, поэтому если запускать анимацию только тогда, когда это необходимо, уменьшит время загрузки.
Существует множество библиотек, которые вы можете использовать для реализации, например, популярный плагин Greensock ScrollTrigger.
Подобное можно реализовать и на ванильном JavaScript. Пример реализации смотрите в данной статье.
Ссылка на статью
#js
progressbar.js - JavaScript-библиотека для создания адаптивных и анимируемых индикаторов выполнения.
Библиотека предоставляет несколько встроенных фигур, таких как линия, круг и полукруг, но вы также можете создавать свои фигуры для индикаторов с помощью любого векторного графического редактора.
Библиотека мало весит и поддерживает все современные браузеры.
Ссылка на официальный сайт
#инструменты
Библиотека предоставляет несколько встроенных фигур, таких как линия, круг и полукруг, но вы также можете создавать свои фигуры для индикаторов с помощью любого векторного графического редактора.
Библиотека мало весит и поддерживает все современные браузеры.
Ссылка на официальный сайт
#инструменты
drag-and-drop
Vue 3 сейчас является актуальной версией данного фрэймворка. Пора начинать пользоваться новыми фичами, которые в ней появились.
По этому случаю делимся обучающей статьей по созданию drag-and-drop загрузчику файлов на Vue 3.
Ссылка на статью
#vue
Vue 3 сейчас является актуальной версией данного фрэймворка. Пора начинать пользоваться новыми фичами, которые в ней появились.
По этому случаю делимся обучающей статьей по созданию drag-and-drop загрузчику файлов на Vue 3.
Ссылка на статью
#vue
Fetch в Node.js
Fetch API был добавлен в Node.js!
Fetch уже доступен в качестве экспериментальной функции в Node v17. Если вы хотите попробовать его перед основным выпуском, вам необходимо сначала загрузить и обновить версию Node.js до 17.5. А затем запустить, используя флаг --experimental-fetch.
О том, какие это проблемы решает его появление, читайте в статье.
Ссылка на статью
#nodejs
Fetch API был добавлен в Node.js!
Fetch уже доступен в качестве экспериментальной функции в Node v17. Если вы хотите попробовать его перед основным выпуском, вам необходимо сначала загрузить и обновить версию Node.js до 17.5. А затем запустить, используя флаг --experimental-fetch.
О том, какие это проблемы решает его появление, читайте в статье.
Ссылка на статью
#nodejs