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
Защита данных в Node.js
Любой веб-ресурс может быть подвержен хакерской атаке для заполучения каких-либо данных, например, о пользователях.
Компании несут большую ответственность за эти данные, а кто как ни разработчики могут обеспечить их хорошую защиту.
В статье представлены cоветы по укреплению защиты приложений на Node.js.
Ссылка на статью
#nodejs
Любой веб-ресурс может быть подвержен хакерской атаке для заполучения каких-либо данных, например, о пользователях.
Компании несут большую ответственность за эти данные, а кто как ни разработчики могут обеспечить их хорошую защиту.
В статье представлены cоветы по укреплению защиты приложений на Node.js.
Ссылка на статью
#nodejs
preloader
Делимся ссылкой на небольшую библиотеку анимированных спиннеров с готовым CSS кодом.
Просто выберите понравившийся вариант, нажмите на вкладку 'source' и готовый код у вас в кармане!
Ссылка на сайт
#дизайн
Делимся ссылкой на небольшую библиотеку анимированных спиннеров с готовым CSS кодом.
Просто выберите понравившийся вариант, нажмите на вкладку 'source' и готовый код у вас в кармане!
Ссылка на сайт
#дизайн
Алгоритмы верстки
CSS может восприниматься, как просто набор свойств, которые используются для стилизации элементов.
Автор статьи предлагает посмотреть на CSS под другим углом. CSS — это совокупность взаимосвязанных алгоритмов компоновки, где каждый алгоритм представляет собой сложную систему со своими правилами и секретными механизмами.
Недостаточно узнать, что делают конкретные свойства. Нужно узнать, как работают алгоритмы компоновки и как они используют свойства, которые мы им предоставляем.
Данная статья поможет раскрыть некоторые моменты со свойствами CSS, которые до этого были не понятны или казались волшебством.
Ссылка на статью
#статьи
CSS может восприниматься, как просто набор свойств, которые используются для стилизации элементов.
Автор статьи предлагает посмотреть на CSS под другим углом. CSS — это совокупность взаимосвязанных алгоритмов компоновки, где каждый алгоритм представляет собой сложную систему со своими правилами и секретными механизмами.
Недостаточно узнать, что делают конкретные свойства. Нужно узнать, как работают алгоритмы компоновки и как они используют свойства, которые мы им предоставляем.
Данная статья поможет раскрыть некоторые моменты со свойствами CSS, которые до этого были не понятны или казались волшебством.
Ссылка на статью
#статьи
all: revert
В CSS есть есть такое свойство, как all, одним из значений которого является revert.
revert сбрасывает свойство к значению по умолчанию, которое было установлено браузером.
В каких случаях оно может быть применено?
Например, когда в какой-то уже существующий сайт, нужно встроить приложение с кардинально отличающимся дизайном. Как правило, встраивая, это означает наследование стилей сайта.
О том, как решать подобную задачу, рассказывает автор статьи. Небольшой спойлер: был использован all: revert.
Ссылка на статью
#css
В CSS есть есть такое свойство, как all, одним из значений которого является revert.
revert сбрасывает свойство к значению по умолчанию, которое было установлено браузером.
В каких случаях оно может быть применено?
Например, когда в какой-то уже существующий сайт, нужно встроить приложение с кардинально отличающимся дизайном. Как правило, встраивая, это означает наследование стилей сайта.
О том, как решать подобную задачу, рассказывает автор статьи. Небольшой спойлер: был использован all: revert.
Ссылка на статью
#css
JavaScript подкаст
Подкаст, посвященный JavaScript и другим веб-технологиям с участием гостей из open-source сообщества.
Как говорится, 2 в 1: и полезную информацию узнаете и по английскому listening подтяните!
Последний эпизод был на тему: "Качество кода".
Ссылка на подкаст
#js
Подкаст, посвященный JavaScript и другим веб-технологиям с участием гостей из open-source сообщества.
Как говорится, 2 в 1: и полезную информацию узнаете и по английскому listening подтяните!
Последний эпизод был на тему: "Качество кода".
Ссылка на подкаст
#js
Фронтенд практика
Практиковать свои навыки нужно постоянно. Каким образом?
Делимся ссылкой на ресурс, на котором собрана коллекция реальных сайтов для воссоздания.
В каждом кейсе для практики представлены:
- список того, чему вы научитесь
- ссылки на ресурсы, где можно найти информацию по реализации необходимого функционала для данного кейса
- цветовая палитра
- ссылка на реальный сайт, который нужно воссоздать
Данная практика нацелена прежде всего на самостоятельную работу, а ресурс предоставляет вам идею. Для проверки себя можно подглядывать на реальный пример сайта.
Ссылка на сайт
#инструменты
Практиковать свои навыки нужно постоянно. Каким образом?
Делимся ссылкой на ресурс, на котором собрана коллекция реальных сайтов для воссоздания.
В каждом кейсе для практики представлены:
- список того, чему вы научитесь
- ссылки на ресурсы, где можно найти информацию по реализации необходимого функционала для данного кейса
- цветовая палитра
- ссылка на реальный сайт, который нужно воссоздать
Данная практика нацелена прежде всего на самостоятельную работу, а ресурс предоставляет вам идею. Для проверки себя можно подглядывать на реальный пример сайта.
Ссылка на сайт
#инструменты
Лайфхаки Vue 3
В статье представлены полезные советы и рекомендации для разработки на Vue 3.
Например, вот один из них. Если вы знакомы с Сomposition API, то знаете, для его работы нужно каждый раз в компоненте объявлять defineComponent и setup:
А можно воспользоваться короткой записью:
Об этом и других советах читайте в статье!
Ссылка на статью
#vue
В статье представлены полезные советы и рекомендации для разработки на Vue 3.
Например, вот один из них. Если вы знакомы с Сomposition API, то знаете, для его работы нужно каждый раз в компоненте объявлять defineComponent и setup:
<script lang="ts">import {defineComponent} from 'vue';export default defineComponent({ name: 'Test', setup() { // ... }})</script>А можно воспользоваться короткой записью:
<script lang="ts" setup> //...</script>Об этом и других советах читайте в статье!
Ссылка на статью
#vue
yarn - это альтернативный менеджер пакетов для Javascript и среды его выполнения Node.js, который, как утверждается, обеспечивает скорость, согласованность, стабильность и безопасность.
Кстати, расшифровывается данное название, как Yet Another Resource Negotiator.
Сложно утверждать, что лучше: npm или yarn. Есть приверженцы и того, и другого!
На случай, если хотите попробовать и сравнить, делимся статьей в которой рассказано, как установить данный пакетный менеджер и необходимые
команды для использования.
Ссылка на статью
#nodejs
Кстати, расшифровывается данное название, как Yet Another Resource Negotiator.
Сложно утверждать, что лучше: npm или yarn. Есть приверженцы и того, и другого!
На случай, если хотите попробовать и сравнить, делимся статьей в которой рассказано, как установить данный пакетный менеджер и необходимые
команды для использования.
Ссылка на статью
#nodejs
10015 Tools — это набор инструментов для фронтенд разработки.
На этом ресурсе вы найдете кучу полезных помощников:
- инструменты для работы с картинками
- инструменты для работы с текстом
- генераторы CSS кода
- инструменты для форматирования HTML, CSS, JavaScript и многое другое.
Все собрано на одном ресурсе!
Ссылка на сайт
#дизайн
На этом ресурсе вы найдете кучу полезных помощников:
- инструменты для работы с картинками
- инструменты для работы с текстом
- генераторы CSS кода
- инструменты для форматирования HTML, CSS, JavaScript и многое другое.
Все собрано на одном ресурсе!
Ссылка на сайт
#дизайн
Аллея памяти веба
Как много вы знаете об истории веба?
Делимся ссылкой на ресурс, посвященный 100 событиям в вебе, начиная с 2008 года.
Ссылка на ресурс
#статьи
Как много вы знаете об истории веба?
Делимся ссылкой на ресурс, посвященный 100 событиям в вебе, начиная с 2008 года.
Ссылка на ресурс
#статьи
Bulma - это CSS фрэймворк, который основан на first-mobile подходе. Это гарантирует, что UI элементы будут отзывчивыми и отлично выглядеть на маленьких экранах.
Bulma предоставляет множество предварительно стилизованных компонентов без использования JavaScript. Этим он похож на Tailwind CSS и Material UI.
Данный фрэймворк очень прост в установке и освоении. Он имеет интуитивно понятные, читаемые модификаторы, синтаксис и классы.
Делимся статьей, которая познакомит вас с Bulma.
Ссылка на статью
#css
Bulma предоставляет множество предварительно стилизованных компонентов без использования JavaScript. Этим он похож на Tailwind CSS и Material UI.
Данный фрэймворк очень прост в установке и освоении. Он имеет интуитивно понятные, читаемые модификаторы, синтаксис и классы.
Делимся статьей, которая познакомит вас с Bulma.
Ссылка на статью
#css
Map & weakMap
Map - это коллекция пар ключ-значение, где ключи и объекты могут быть любого типа данных, включая объекты, функции и примитивные типы, в отличие от объектов, созданных с помощью литерала.
Для его создания используется конструктор Map.
Из статьи вы узнаете подробную информацию о Map, когда и как использовать. А так же познакомитесь с такой структурой, как weakMap.
Ссылка на cтатью
#js
Map - это коллекция пар ключ-значение, где ключи и объекты могут быть любого типа данных, включая объекты, функции и примитивные типы, в отличие от объектов, созданных с помощью литерала.
Для его создания используется конструктор Map.
Из статьи вы узнаете подробную информацию о Map, когда и как использовать. А так же познакомитесь с такой структурой, как weakMap.
Ссылка на cтатью
#js
AnyWebP - это конвертер картинок любых форматов в формат .webp.
WebP — это формат файла, разработанный компанией Google в 2010 году. Его особенностью является продвинутый алгоритм сжатия, позволяющий сократить размер картинки без видимых потерь в качестве.
А так же на этом ресурсе можно конвертировать из формата WebP в JPG/JPEG/PNG/ICO.
Ссылка на ресурс
#инструменты
WebP — это формат файла, разработанный компанией Google в 2010 году. Его особенностью является продвинутый алгоритм сжатия, позволяющий сократить размер картинки без видимых потерь в качестве.
А так же на этом ресурсе можно конвертировать из формата WebP в JPG/JPEG/PNG/ICO.
Ссылка на ресурс
#инструменты
GSAP & Vue3
Делимся обучающей статьей по созданию анимации с помощью библиотеки GSAP на Vue 3!
Лучшее обучение всегда эффективнее при создании чего-то на практике. В проекте из статьи задействованы такие современные инструменты, как Vite(инструмент сборки) и TailwindCSS(библиотека для стилизации).
Вы научитесь подключать и использовать на практике данные инструменты во Vue 3. Всего столько полезного в одной статье!
Ссылка на статью
#vue
Делимся обучающей статьей по созданию анимации с помощью библиотеки GSAP на Vue 3!
Лучшее обучение всегда эффективнее при создании чего-то на практике. В проекте из статьи задействованы такие современные инструменты, как Vite(инструмент сборки) и TailwindCSS(библиотека для стилизации).
Вы научитесь подключать и использовать на практике данные инструменты во Vue 3. Всего столько полезного в одной статье!
Ссылка на статью
#vue
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 позволяет стилизовать фон под модальным окном.
О всех остальных обновлениях читайте в статье.
Ссылка на статью
#статьи