Алгоритмы верстки

CSS может восприниматься, как просто набор свойств, которые используются для стилизации элементов.

Автор статьи предлагает посмотреть на CSS под другим углом. CSS — это совокупность взаимосвязанных алгоритмов компоновки, где каждый алгоритм представляет собой сложную систему со своими правилами и секретными механизмами.

Недостаточно узнать, что делают конкретные свойства. Нужно узнать, как работают алгоритмы компоновки и как они используют свойства, которые мы им предоставляем.

Данная статья поможет раскрыть некоторые моменты со свойствами CSS, которые до этого были не понятны или казались волшебством.

Ссылка на статью

#статьи

all: revert

В CSS есть есть такое свойство, как all, одним из значений которого является revert.
revert сбрасывает свойство к значению по умолчанию, которое было установлено браузером.

В каких случаях оно может быть применено?

Например, когда в какой-то уже существующий сайт, нужно встроить приложение с кардинально отличающимся дизайном. Как правило, встраивая, это означает наследование стилей сайта. 

О том, как решать подобную задачу, рассказывает автор статьи. Небольшой спойлер: был использован all: revert.

Ссылка на статью

#css

JavaScript подкаст

Подкаст, посвященный JavaScript и другим веб-технологиям с участием гостей из open-source сообщества.

Как говорится, 2 в 1: и полезную информацию узнаете и по английскому listening подтяните!

Последний эпизод был на тему: "Качество кода".

Ссылка на подкаст

#js

Фронтенд практика

Практиковать свои навыки нужно постоянно. Каким образом?

Делимся ссылкой на ресурс, на котором собрана коллекция реальных сайтов для воссоздания.

В каждом кейсе для практики представлены:

- список того, чему вы научитесь
- ссылки на ресурсы, где можно найти информацию по реализации необходимого функционала для данного кейса
- цветовая палитра
- ссылка на реальный сайт, который нужно воссоздать

Данная практика нацелена прежде всего на самостоятельную работу, а ресурс предоставляет вам идею. Для проверки себя можно подглядывать на реальный пример сайта.

Ссылка на сайт

#инструменты

Лайфхаки Vue 3

В статье представлены полезные советы и рекомендации для разработки на 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

10015 Tools — это набор инструментов для фронтенд разработки. 

На этом ресурсе вы найдете кучу полезных помощников:
- инструменты для работы с картинками
- инструменты для работы с текстом
- генераторы CSS кода
- инструменты для форматирования HTML, CSS, JavaScript и многое другое.

Все собрано на одном ресурсе!

Ссылка на сайт

#дизайн

Аллея памяти веба

Как много вы знаете об истории веба?

Делимся ссылкой на ресурс, посвященный 100 событиям в вебе, начиная с 2008 года.

Ссылка на ресурс

#статьи

Bulma - это CSS фрэймворк, который основан на first-mobile подходе. Это гарантирует, что UI элементы будут отзывчивыми и отлично выглядеть на маленьких экранах.

Bulma предоставляет множество предварительно стилизованных компонентов без использования JavaScript. Этим он похож на Tailwind CSS и Material UI.

Данный фрэймворк очень прост в установке и освоении. Он имеет интуитивно понятные, читаемые модификаторы, синтаксис и классы.

Делимся статьей, которая познакомит вас с Bulma.

Ссылка на статью

#css

Map & weakMap

Map - это коллекция пар ключ-значение, где ключи и объекты могут быть любого типа данных, включая объекты, функции и примитивные типы, в отличие от объектов, созданных с помощью литерала.
Для его создания используется конструктор Map.

Из статьи вы узнаете подробную информацию о Map, когда и как использовать. А так же познакомитесь с такой структурой, как weakMap.

Ссылка на cтатью

#js

AnyWebP - это конвертер картинок любых форматов в формат .webp.

WebP — это формат файла, разработанный компанией Google в 2010 году. Его особенностью является продвинутый алгоритм сжатия, позволяющий сократить размер картинки без видимых потерь в качестве.

А так же на этом ресурсе можно конвертировать из формата WebP в JPG/JPEG/PNG/ICO.

Ссылка на ресурс

#инструменты

GSAP & Vue3

Делимся обучающей статьей по созданию анимации с помощью библиотеки GSAP на Vue 3!

Лучшее обучение всегда эффективнее при создании чего-то на практике. В проекте из статьи задействованы такие современные инструменты, как Vite(инструмент сборки) и TailwindCSS(библиотека для стилизации).

Вы научитесь подключать и использовать на практике данные инструменты во Vue 3. Всего столько полезного в одной статье!

Ссылка на статью

#vue

Deno - это современная среда выполнения JavaScript, конкурирующая с Node.js, которая обещает такие функции, как безопасный ввод-вывод и встроенную поддержку TypeScript.

Райан Даль, первоначальный создатель Node.js, создал Deno, исправив все ошибки и недочеты, допущенные в Node.js.

Сегодняшняя статья на тему: "Почему Deno может заменить Node.js?" 

И правда почему...Ведь Node.js уже достаточно прочно обосновался! Об этом читайте в статье.

Ссылка на статью

#nodejs

3D transform

Сегодня хотим поделиться ссылкой на очень полезный ресурс: гайд по созданию 3D фигур и анимаций на CSS.

С помощью этого руководства, вы сможете создать 3D куб, реализовать эффект переворачивающейся карточки. А самое интересное - это кольцевая карусель!  

Ссылка на ресурс

#дизайн

Safari 15.4

Относительно недавно была выпущена новая версия Safari.

В Safari 15.4 добавлено более 70 дополнений к WebKit, а также новые веб-технологии, обновления и исправления.

Напомним, что WebKit — это движок веб-браузера, используемый Safari, Mail, App Store и многими другими приложениями для macOS, iOS и Linux.

И что же нового и полезного появилось для разработчиков?

Например, была добавлена поддержка элемента <dialog> и псевдоэлемента ::backdrop. Элемент <dialog> - это тэг для создания модальных окон, а псевдоэлемент ::backdrop позволяет стилизовать фон под модальным окном.

О всех остальных обновлениях читайте в статье.

Ссылка на статью

#статьи

:has

Чего очень не хватает в CSS, так это родительского селектора...Все очень ждали его появления, и дождались в виде псевдокласса :has()!

Пока что он поддерживается только в последней версии Safari.

Но уже советуем познакомиться с его возможностями сейчас. О них вы узнаете из статьи!

Ссылка на статью

#css

JavaScript тест

Проверьте свои знания по JavaScript, пройдя данный тест! 10 вопросов и для каждого дается подробное объяснение.

Ссылка на тест

#js

typed.js - это JavaScript библиотека для создания эффекта печатной машинки.

Максимально проста в использовании!

Ссылка на ресурс

#инструменты

Книга по React

Данная книга охватывает базовые основы React. Больше всего подойдет для новичков.

После прочтения у вас будет базовое понимание:
- что такое React и почему он так популярен
- как его установить
- components, state, props
- обработки пользовательских событий
- событий жизненного цикла в компоненте React

Ссылка на книгу

#react

Deno & MongoDB

В одном из постов уже была информация о Deno. 

Напомним, что Deno — это современная среда выполнения для JavaScript и TypeScript, аналог Node.js.

Забавный факт: Deno — это анаграмма. Переставьте буквы в Node и получится Deno.

В сегодняшнем посте делимся ссылкой на обучающую статью по созданию сервера с помощью Deno и MongoDB.

Ссылка на статью

#nodejs

Easy easings - это генератор для создания анимации ключевых кадров (keyframes animation).

В данном генераторе очень классный и удобный интерфейс. В редакторе задаются точки, которые представляют собой ключевые кадры, а в панели настроек можно выбрать тип трансформации и задать остальные настройки.

На выходе вы получаете готовый CSS код.

Ссылка на генератор

#дизайн