CodeRoll | Frontend

Deno & MongoDB В одном из постов уже была информация о Deno.  Напомним, что Deno — это современная среда выполнения для JavaScript и TypeScript, аналог Node.js. Забавный факт: Deno — это анаграмма. Переставьте буквы в Node и получится Deno. В сегодняшнем посте делимся ссылкой на обучающую статью по созданию сервера с помощью Deno и MongoDB. Ссылка на статью #nodejs

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

typed.js - это JavaScript библиотека для создания эффекта печатной машинки. Максимально проста в использовании! Ссылка на ресурс #инструменты

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

:has Чего очень не хватает в CSS, так это родительского селектора...Все очень ждали его появления, и дождались в виде псевдокласса :has()! Пока что он поддерживается только в последней версии Safari. Но уже советуем познакомиться с его возможностями сейчас. О них вы узнаете из статьи! Ссылка на статью #css

Safari 15.4 Относительно недавно была выпущена новая версия Safari. В Safari 15.4 добавлено более 70 дополнений к WebKit, а также новые веб-технологии, обновления и исправления. Напомним, что WebKit — это движок веб-браузера, используемый Safari, Mail, App Store и многими другими приложениями для macOS, iOS и Linux. И что же нового и полезного появилось для разработчиков? Например, была добавлена поддержка элемента <dialog> и псевдоэлемента ::backdrop. Элемент <dialog> - это тэг для создания модальных окон, а псевдоэлемент ::backdrop позволяет стилизовать фон под модальным окном. О всех остальных обновлениях читайте в статье. Ссылка на статью #статьи

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

Deno - это современная среда выполнения JavaScript, конкурирующая с Node.js, которая обещает такие функции, как безопасный ввод-вывод и встроенную поддержку TypeScript. Райан Даль, первоначальный создатель Node.js, создал Deno, исправив все ошибки и недочеты, допущенные в Node.js. Сегодняшняя статья на тему: "Почему Deno может заменить Node.js?"  И правда почему...Ведь Node.js уже достаточно прочно обосновался! Об этом читайте в статье. Ссылка на статью #nodejs

GSAP & Vue3 Делимся обучающей статьей по созданию анимации с помощью библиотеки GSAP на Vue 3! Лучшее обучение всегда эффективнее при создании чего-то на практике. В проекте из статьи задействованы такие современные инструменты, как Vite(инструмент сборки) и TailwindCSS(библиотека для стилизации). Вы научитесь подключать и использовать на практике данные инструменты во Vue 3. Всего столько полезного в одной статье! Ссылка на статью #vue

AnyWebP - это конвертер картинок любых форматов в формат .webp. WebP — это формат файла, разработанный компанией Google в 2010 году. Его особенностью является продвинутый алгоритм сжатия, позволяющий сократить размер картинки без видимых потерь в качестве. А так же на этом ресурсе можно конвертировать из формата WebP в JPG/JPEG/PNG/ICO. Ссылка на ресурс #инструменты

Map & weakMap Map - это коллекция пар ключ-значение, где ключи и объекты могут быть любого типа данных, включая объекты, функции и примитивные типы, в отличие от объектов, созданных с помощью литерала. Для его создания используется конструктор Map. Из статьи вы узнаете подробную информацию о Map, когда и как использовать. А так же познакомитесь с такой структурой, как weakMap. Ссылка на cтатью #js

Bulma - это CSS фрэймворк, который основан на first-mobile подходе. Это гарантирует, что UI элементы будут отзывчивыми и отлично выглядеть на маленьких экранах. Bulma предоставляет множество предварительно стилизованных компонентов без использования JavaScript. Этим он похож на Tawlind CSS и Material UI. Данный фрэймворк очень прост в установке и освоении. Он имеет интуитивно понятные, читаемые модификаторы, синтаксис и классы. Делимся статьей, которая познакомит вас с Bulma. Ссылка на статью #css

Аллея памяти веба Как много вы знаете об истории веба? Делимся ссылкой на ресурс, посвященный 100 событиям в вебе, начиная с 2008 года. Ссылка на ресурс #статьи

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

yarn - это альтернативный менеджер пакетов для Javascript и среды его выполнения Node.js, который, как утверждается, обеспечивает скорость, согласованность, стабильность и безопасность.  Кстати, расшифровывается данное название, как Yet Another Resource Negotiator. Сложно утверждать, что лучше: npm или yarn. Есть приверженцы и того, и другого! На случай, если хотите попробовать и сравнить, делимся статьей в которой рассказано, как установить данный пакетный менеджер и необходимые команды для использования. Ссылка на статью #nodejs

Лайфхаки 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

JavaScript теперь в телеграм! JavaScript — самый популярный язык в мире, он используется в 95% всех сайтов, которые вообще существуют. Теперь у JS есть русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсов. Стоит подписаться! #реклама

Фронтенд практика Практиковать свои навыки нужно постоянно. Каким образом? Делимся ссылкой на ресурс, на котором собрана коллекция реальных сайтов для воссоздания. В каждом кейсе для практики представлены: - список того, чему вы научитесь - ссылки на ресурсы, где можно найти информацию по реализации необходимого функционала для данного кейса - цветовая палитра - ссылка на реальный сайт, который нужно воссоздать Данная практика нацелена прежде всего на самостоятельную работу, а ресурс предоставляет вам идею. Для проверки себя можно подглядывать на реальный пример сайта. Ссылка на сайт #инструменты

JavaScript подкаст Подкаст, посвященный JavaScript и другим веб-технологиям с участием гостей из open-source сообщества. Как говорится, 2 в 1: и полезную информацию узнаете и по английскому listening подтяните! Последний эпизод был на тему: "Качество кода". Ссылка на подкаст #js

all: revert В CSS есть есть такое свойство, как all, одним из значений которого является revert. revert сбрасывает свойство к значению по умолчанию, которое было установлено браузером. В каких случаях оно может быть применено? Например, когда в какой-то уже существующий сайт, нужно встроить приложение с кардинально отличающимся дизайном. Как правило, встраивая, это означает наследование стилей сайта.  О том, как решать подобную задачу, рассказывает автор статьи. Небольшой спойлер: был использован all: revert. Ссылка на статью #css