Deno - это современная среда выполнения JavaScript, конкурирующая с Node.js, которая обещает такие функции, как безопасный ввод-вывод и встроенную поддержку TypeScript.
Райан Даль, первоначальный создатель Node.js, создал Deno, исправив все ошибки и недочеты, допущенные в Node.js.
Сегодняшняя статья на тему: "Почему Deno может заменить Node.js?"
И правда почему...Ведь Node.js уже достаточно прочно обосновался! Об этом читайте в статье.
Ссылка на статью
#nodejs
Райан Даль, первоначальный создатель Node.js, создал Deno, исправив все ошибки и недочеты, допущенные в Node.js.
Сегодняшняя статья на тему: "Почему Deno может заменить Node.js?"
И правда почему...Ведь Node.js уже достаточно прочно обосновался! Об этом читайте в статье.
Ссылка на статью
#nodejs
3D transform
Сегодня хотим поделиться ссылкой на очень полезный ресурс: гайд по созданию 3D фигур и анимаций на CSS.
С помощью этого руководства, вы сможете создать 3D куб, реализовать эффект переворачивающейся карточки. А самое интересное - это кольцевая карусель!
Ссылка на ресурс
#дизайн
Сегодня хотим поделиться ссылкой на очень полезный ресурс: гайд по созданию 3D фигур и анимаций на CSS.
С помощью этого руководства, вы сможете создать 3D куб, реализовать эффект переворачивающейся карточки. А самое интересное - это кольцевая карусель!
Ссылка на ресурс
#дизайн
Safari 15.4
Относительно недавно была выпущена новая версия Safari.
В Safari 15.4 добавлено более 70 дополнений к WebKit, а также новые веб-технологии, обновления и исправления.
Напомним, что WebKit — это движок веб-браузера, используемый Safari, Mail, App Store и многими другими приложениями для macOS, iOS и Linux.
И что же нового и полезного появилось для разработчиков?
Например, была добавлена поддержка элемента <dialog> и псевдоэлемента ::backdrop. Элемент <dialog> - это тэг для создания модальных окон, а псевдоэлемент ::backdrop позволяет стилизовать фон под модальным окном.
О всех остальных обновлениях читайте в статье.
Ссылка на статью
#статьи
Относительно недавно была выпущена новая версия Safari.
В Safari 15.4 добавлено более 70 дополнений к WebKit, а также новые веб-технологии, обновления и исправления.
Напомним, что WebKit — это движок веб-браузера, используемый Safari, Mail, App Store и многими другими приложениями для macOS, iOS и Linux.
И что же нового и полезного появилось для разработчиков?
Например, была добавлена поддержка элемента <dialog> и псевдоэлемента ::backdrop. Элемент <dialog> - это тэг для создания модальных окон, а псевдоэлемент ::backdrop позволяет стилизовать фон под модальным окном.
О всех остальных обновлениях читайте в статье.
Ссылка на статью
#статьи
:has
Чего очень не хватает в CSS, так это родительского селектора...Все очень ждали его появления, и дождались в виде псевдокласса :has()!
Пока что он поддерживается только в последней версии Safari.
Но уже советуем познакомиться с его возможностями сейчас. О них вы узнаете из статьи!
Ссылка на статью
#css
Чего очень не хватает в CSS, так это родительского селектора...Все очень ждали его появления, и дождались в виде псевдокласса :has()!
Пока что он поддерживается только в последней версии Safari.
Но уже советуем познакомиться с его возможностями сейчас. О них вы узнаете из статьи!
Ссылка на статью
#css
JavaScript тест
Проверьте свои знания по JavaScript, пройдя данный тест! 10 вопросов и для каждого дается подробное объяснение.
Ссылка на тест
#js
Проверьте свои знания по JavaScript, пройдя данный тест! 10 вопросов и для каждого дается подробное объяснение.
Ссылка на тест
#js
typed.js - это JavaScript библиотека для создания эффекта печатной машинки.
Максимально проста в использовании!
Ссылка на ресурс
#инструменты
Максимально проста в использовании!
Ссылка на ресурс
#инструменты
Книга по React
Данная книга охватывает базовые основы React. Больше всего подойдет для новичков.
После прочтения у вас будет базовое понимание:
- что такое React и почему он так популярен
- как его установить
- components, state, props
- обработки пользовательских событий
- событий жизненного цикла в компоненте React
Ссылка на книгу
#react
Данная книга охватывает базовые основы React. Больше всего подойдет для новичков.
После прочтения у вас будет базовое понимание:
- что такое React и почему он так популярен
- как его установить
- components, state, props
- обработки пользовательских событий
- событий жизненного цикла в компоненте React
Ссылка на книгу
#react
Deno & MongoDB
В одном из постов уже была информация о Deno.
Напомним, что Deno — это современная среда выполнения для JavaScript и TypeScript, аналог Node.js.
Забавный факт: Deno — это анаграмма. Переставьте буквы в Node и получится Deno.
В сегодняшнем посте делимся ссылкой на обучающую статью по созданию сервера с помощью Deno и MongoDB.
Ссылка на статью
#nodejs
В одном из постов уже была информация о Deno.
Напомним, что Deno — это современная среда выполнения для JavaScript и TypeScript, аналог Node.js.
Забавный факт: Deno — это анаграмма. Переставьте буквы в Node и получится Deno.
В сегодняшнем посте делимся ссылкой на обучающую статью по созданию сервера с помощью Deno и MongoDB.
Ссылка на статью
#nodejs
Easy easings - это генератор для создания анимации ключевых кадров (keyframes animation).
В данном генераторе очень классный и удобный интерфейс. В редакторе задаются точки, которые представляют собой ключевые кадры, а в панели настроек можно выбрать тип трансформации и задать остальные настройки.
На выходе вы получаете готовый CSS код.
Ссылка на генератор
#дизайн
В данном генераторе очень классный и удобный интерфейс. В редакторе задаются точки, которые представляют собой ключевые кадры, а в панели настроек можно выбрать тип трансформации и задать остальные настройки.
На выходе вы получаете готовый CSS код.
Ссылка на генератор
#дизайн
Отмена последнего коммита
Иногда по ошибке можно закоммитить в репозиторий те файлы, которые вы вовсе не хотели, чтобы туда попали.
Отмена коммитов может выполняться различными способами в зависимости от того, как бы вы хотели сохранить историю git.
В статье представлено 4 способа!
Ссылка на статью
#статьи
Иногда по ошибке можно закоммитить в репозиторий те файлы, которые вы вовсе не хотели, чтобы туда попали.
Отмена коммитов может выполняться различными способами в зависимости от того, как бы вы хотели сохранить историю git.
В статье представлено 4 способа!
Ссылка на статью
#статьи
CSS функции
Как много CSS функций вы знаете и сколько из них используете на практике? Самой известной и часто используемой является calc.
Но есть еще и другие не менее полезные: clamp, min и max.
Например, c помощью функции min можно задать размер шрифта: font-size: min(25px, 1vw);
Тогда он никогда не будет больше 25px и будет уменьшаться до 1vw в зависимости от размера viewport.
Более подробно о функциях и их применении на практике читайте в статье.
Ссылка на статью
#css
Как много CSS функций вы знаете и сколько из них используете на практике? Самой известной и часто используемой является calc.
Но есть еще и другие не менее полезные: clamp, min и max.
Например, c помощью функции min можно задать размер шрифта: font-size: min(25px, 1vw);
Тогда он никогда не будет больше 25px и будет уменьшаться до 1vw в зависимости от размера viewport.
Более подробно о функциях и их применении на практике читайте в статье.
Ссылка на статью
#css
Метод groupBy
В июне 2021 было предложено добавить метод groupBy в Array API.
groupBy, как уже понятно из названия, группирует объекты по какому-то параметру.
Работает он также, как map, filter и reduce. Принимает в качестве параметра callback функцию, которая вызывается для каждого элемента и возвращает новый объект сгруппированных данных.
Сейчас groupBy проходит 3 стадию рассмотрения и не работает пока полноценно. Для его использования нужен полифилл.
Более подробная информация и пример использования в данной статье.
Ссылка на статью
#js
В июне 2021 было предложено добавить метод groupBy в Array API.
groupBy, как уже понятно из названия, группирует объекты по какому-то параметру.
Работает он также, как map, filter и reduce. Принимает в качестве параметра callback функцию, которая вызывается для каждого элемента и возвращает новый объект сгруппированных данных.
Сейчас groupBy проходит 3 стадию рассмотрения и не работает пока полноценно. Для его использования нужен полифилл.
Более подробная информация и пример использования в данной статье.
Ссылка на статью
#js
Array Explorer - полезное приложение для обзора методов массива.
Выбираете в настройках, что хотите сделать с массивом (варианты написаны человеческим языком), а приложение выводит код.
Интересный способ для изучения!
Ссылка на ресурс
#инструменты
Выбираете в настройках, что хотите сделать с массивом (варианты написаны человеческим языком), а приложение выводит код.
Интересный способ для изучения!
Ссылка на ресурс
#инструменты
React змейка
Создание игры - очень хороший вариант для практики!
Сегодня делимся обучающей статьей по созданию игры "Змейка". В разработке используется: React, Redux, Redux Saga.
Такой проект смело можно добавить в портфолио!
Ссылка на статью
#react
Создание игры - очень хороший вариант для практики!
Сегодня делимся обучающей статьей по созданию игры "Змейка". В разработке используется: React, Redux, Redux Saga.
Такой проект смело можно добавить в портфолио!
Ссылка на статью
#react
Экспорт JSON в Excel
Экспорт JSON в файл Excel может понадобиться для резервного копирования важных данных или их перемещения между двумя разными версиями программ.
Node.js имеет несколько вариантов пакетов для экспорта JSON в формат Excel. Среди них: ExcelJS, Excel-Export, Export-to-Excel и Node-Excel-Export.
Однако, по мнению автора статьи наиболее надежным и распространенным в сообществе Node.js является XLSX.
Из статьи вы узнаете, как с помощью данного пакета легко и просто экспортировать данные.
Ссылка на статью
#nodejs
Экспорт JSON в файл Excel может понадобиться для резервного копирования важных данных или их перемещения между двумя разными версиями программ.
Node.js имеет несколько вариантов пакетов для экспорта JSON в формат Excel. Среди них: ExcelJS, Excel-Export, Export-to-Excel и Node-Excel-Export.
Однако, по мнению автора статьи наиболее надежным и распространенным в сообществе Node.js является XLSX.
Из статьи вы узнаете, как с помощью данного пакета легко и просто экспортировать данные.
Ссылка на статью
#nodejs
Loaders
Библиотека лоадеров и спиннеров, которую вы можете подключить через npm и импортировать нужный вариант в React проект.
Или выбрать понравившийся вариант на сайте и скопировать готовый HTML и CSS код.
Ссылка на сайт
#дизайн
Библиотека лоадеров и спиннеров, которую вы можете подключить через npm и импортировать нужный вариант в React проект.
Или выбрать понравившийся вариант на сайте и скопировать готовый HTML и CSS код.
Ссылка на сайт
#дизайн
ООП
До сих пор не понимаете ООП(Объектно-ориентированное программирование)?
Данная статья общий обзор ООП. В ней очень доступным языком объясняются основы: объекты, классы, экземпляры и методы, а так же такие понятия, как: инкапсуляция, абстракция, наследование и полиморфизм.
Статья сопровождается мемами на тему объектно-ориентированного программирования, что делает чтение интереснее.
Ссылка на статью
#статьи
До сих пор не понимаете ООП(Объектно-ориентированное программирование)?
Данная статья общий обзор ООП. В ней очень доступным языком объясняются основы: объекты, классы, экземпляры и методы, а так же такие понятия, как: инкапсуляция, абстракция, наследование и полиморфизм.
Статья сопровождается мемами на тему объектно-ориентированного программирования, что делает чтение интереснее.
Ссылка на статью
#статьи
fetchpriority - HTML атрибут, который позволяет определить приоритет загрузки различных ресурсов. Его можно использовать с тэгами link, img, script и iframe.
Данный атрибут помогает улучшить производительность сайта, а в частности показатель LCP(Largest Contenful Paint). Основным содержимым для LCP обычно является самый крупный элемент. Этим элементом может быть изображение, видео или просто большой блок текста. И как долго загружается этот контент, влияет на LCP.
Подробно об атрибуте fetchpriority и как его использовать для оптимизации читайте в статье.
Ссылка на статью
#html
Данный атрибут помогает улучшить производительность сайта, а в частности показатель LCP(Largest Contenful Paint). Основным содержимым для LCP обычно является самый крупный элемент. Этим элементом может быть изображение, видео или просто большой блок текста. И как долго загружается этот контент, влияет на LCP.
Подробно об атрибуте fetchpriority и как его использовать для оптимизации читайте в статье.
Ссылка на статью
#html
Оптимизация скриптов
Чем компактнее и легче ваш код, тем быстрее он будет работать.
Оптимизация JavaScript — это обязательный шаг в оптимизации, если вы хотите обеспечить быструю работу сайта.
Медленная работа приводит к плохому UX(user experience), из-за чего пользователь уходит. По словам Google, если вы хотите, чтобы пользователь оставался на вашем сайте дольше, ваша страница должна загружаться менее чем за 3 секунды. Если время загрузки вашей страницы увеличивается с 1 секунды до 3 секунд, вероятность ухода пользователя составляет 32%.
Статья содержит советы, как оптимизировать скрипты.
Ссылка на статью
#js
Чем компактнее и легче ваш код, тем быстрее он будет работать.
Оптимизация JavaScript — это обязательный шаг в оптимизации, если вы хотите обеспечить быструю работу сайта.
Медленная работа приводит к плохому UX(user experience), из-за чего пользователь уходит. По словам Google, если вы хотите, чтобы пользователь оставался на вашем сайте дольше, ваша страница должна загружаться менее чем за 3 секунды. Если время загрузки вашей страницы увеличивается с 1 секунды до 3 секунд, вероятность ухода пользователя составляет 32%.
Статья содержит советы, как оптимизировать скрипты.
Ссылка на статью
#js
matter.js - это 2D физический движок для веба. Он помогает симулировать различные физические явления в браузере: столкновение, падение объектов и многое другое. Лучше один раз глянуть демо, чтобы понять его предназначение.
На официальном сайте, вы найдете документацию, примеры и туториалы.
Ссылка на официальный сайт
#инструменты
На официальном сайте, вы найдете документацию, примеры и туториалы.
Ссылка на официальный сайт
#инструменты
useCallback - React хук, который принимает в качестве аргументов: callback и массив зависимостей, а возвращает уже мемоизированный callback, который будет обновлен, только если одна из зависимостей будет изменена.
UseCallback также, как и useMemo позволяет в значительной степени оптимизировать приложения. Но излишнее использование данного хука может привести к замедлению работы компонента.
Статья на тему, как правильно его использовать.
Ссылка на статью
#react
UseCallback также, как и useMemo позволяет в значительной степени оптимизировать приложения. Но излишнее использование данного хука может привести к замедлению работы компонента.
Статья на тему, как правильно его использовать.
Ссылка на статью
#react