Стоковые фото
Делимся ресурсом с бесплатными стоковыми фотографиями для личного и коммерческого использования.
Все изображения с высоким разрешением и распределены по категориям на определенные тематики.
Ссылка на ресурс
#дизайн
Делимся ресурсом с бесплатными стоковыми фотографиями для личного и коммерческого использования.
Все изображения с высоким разрешением и распределены по категориям на определенные тематики.
Ссылка на ресурс
#дизайн
Версия 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
Keyframes CSS - это редактор для создания анимаций. Особенность его в том, что интерфейс представлен в виде видеоредактора с временной шкалой. За счет этого можно создавать сложные анимации и пошагово отслеживать их работу. На выходе, вы получаете готовый CSS код.
Опробуйте его сами!
Ссылка на сайт
#дизайн
Опробуйте его сами!
Ссылка на сайт
#дизайн
Атрибуты HTML
В HTML немало полезных атрибутов. Возможно о некоторых вы даже не слышали!
Например, знали ли вы, что для тэга <ol> (нумерованного списка) можно использовать атрибуты, которые позволяют настраивать поведение нумерации, отображаемой в списке:
- reversed - для нумерации элементов в обратном порядке;
- start - для определения с какого числа начинать;
- type - для определения, что использовать для нумерации: числа, буквы или римские числа;
- value - для указания номера для определенного элемента списка.
А об атрибуте download для тэга <a> знали?
Об этих атрибутах и других читайте в статье!
Ссылка на статью
#статьи
В HTML немало полезных атрибутов. Возможно о некоторых вы даже не слышали!
Например, знали ли вы, что для тэга <ol> (нумерованного списка) можно использовать атрибуты, которые позволяют настраивать поведение нумерации, отображаемой в списке:
- reversed - для нумерации элементов в обратном порядке;
- start - для определения с какого числа начинать;
- type - для определения, что использовать для нумерации: числа, буквы или римские числа;
- value - для указания номера для определенного элемента списка.
А об атрибуте download для тэга <a> знали?
Об этих атрибутах и других читайте в статье!
Ссылка на статью
#статьи
will-change
Свойство CSS, которое появилось еще в 2015 году. Если вкратце, то will-change - это метод оптимизации анимации путем информирования браузера о том, какие элементы и свойства изменятся. Самое главное, что надо запомнить: применять его надо умеренно.
Чтобы более подробно узнать об этом свойстве и как его использовать, читайте статью.
Ссылка на статью
#css
Свойство CSS, которое появилось еще в 2015 году. Если вкратце, то will-change - это метод оптимизации анимации путем информирования браузера о том, какие элементы и свойства изменятся. Самое главное, что надо запомнить: применять его надо умеренно.
Чтобы более подробно узнать об этом свойстве и как его использовать, читайте статью.
Ссылка на статью
#css
Условия
Написание сложных и объемных условий влечет за собой огромное ветвление if/else или switch/case. Главный недостаток в том, что читать и воспринимать такой код сложно.
Конечно всегда есть более элегантные способы написания кода! В статье предложены варианты, как писать условия с помощью литерала объекта.
Ссылка на статью
#js
Написание сложных и объемных условий влечет за собой огромное ветвление if/else или switch/case. Главный недостаток в том, что читать и воспринимать такой код сложно.
Конечно всегда есть более элегантные способы написания кода! В статье предложены варианты, как писать условия с помощью литерала объекта.
Ссылка на статью
#js
layzr.js - JavaScript библиотека для отложенной загрузки изображений(lazy loading).
Маленькая и быстрая, написана на ES6.
Ссылка на официальный сайт
#инструменты
Маленькая и быстрая, написана на ES6.
Ссылка на официальный сайт
#инструменты
Radix - это библиотека UI компонентов для создания приложений на React, которая делает акцент на доступности своих компонентов.
Компоненты созданы с учетом правильной семантики, обеспечивают полную поддержку устройств ввода и протестированы на скрин ридерах. Они не стилизованы, что дает вам полный контроль над их оформлением.
Ссылка на официальный сайт
#react
Компоненты созданы с учетом правильной семантики, обеспечивают полную поддержку устройств ввода и протестированы на скрин ридерах. Они не стилизованы, что дает вам полный контроль над их оформлением.
Ссылка на официальный сайт
#react