CodeRoll | Frontend
5.04K subscribers
1.59K photos
73 videos
1 file
899 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
typeof в TypeScript

В Javascript оператор typeof используется для определения типа данных. Поскольку TypeScript является строго типизированным языком, то там typeof имеет другое предназначение.

О том, как работает typeof в TypeScript, читайте в статье!

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

#js
massCode - это бесплатный менеджер сниппетов кода для разработчиков. Он поможет создать и организовать свою собственную личную коллекцию сниппетов и иметь быстрый доступ к ней.

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

#инструменты
Zustand — это быстрое и масштабируемое решение для управления состоянием в React приложениях, созданное разработчиками Jotai и React springs

Zustand известен своей простотой: 
- Использует хуки для управления состояниями; 
- Рендерит компоненты только при изменении значения состояния. Изменения в состоянии часто могут быть обработаны без повторного рендеринга компонента;

Подробнее об остальных особенностях Zusstand и о том, как его использовать читайте в статье.

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

#react
Express 5

Express v5 пока еще доступен в бета-версии. Новая версия включает в себя множество новых функций и улучшений, направленных на повышение эффективности фреймворка. Однако это обновление может вызвать проблемы или генерировать предупреждения об устаревании.

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

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

#nodejs
Конические градиенты

Фоновые градиенты в CSS могут быть линейными, радиальными, а еще конусообразными или коническими.

Делимся коллекцией простых и симпатичных конических градиентов с готовыми CSS стилями!

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

#дизайн
Podman

Встречайте Podman - альтернативу Docker!

Podman — это еще один инструмент для разработки, управления и запуска контейнеров и образов контейнеров. Он относительный новичок на сцене контейнеризации: версия 1.0 была выпущена в 2019 году.

Весомое их различие в том, что Podman пока остается полностью бесплатным, а Docker частично платный.

Подробное их сравнение читайте в статье!

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

#статьи
box-shadow

Чтобы не мучаться над созданием красивой тени, можно обратиться к данному ресурсу. На нем собрана коллекция из 93 образцов!

Выберите понравившийся вариант, кликните по нему и готовый CSS код будет автоматически скопирован в буфер обмена.
 
Ссылка на сайт

#css
Полезные JS сниппеты

Автор собрал в статье 58 полезных сниппетов JavaScript!

Например, один из них генерирует звездный рейтинг:

const StartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
const start = StartScore(3);
// start => '★★★☆☆'

Все сниппеты смотрите по ссылке.

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

#js
snipt.dev - это инструмент по поиску готовых сниппетов.

Напомним, что сниппет - это готовый фрагмент или кусок кода, который выполняет определенные задачи.

Например, вам нужно перемешать элементы в массиве. Вводите в поисковую строку "Shuffle an array" ("перемешать массив") и сервис выдает вам готовый вариант.

Для поиска доступны сниппеты JavaScript, TypeScript, Python и другие.

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

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

Модуль Content в NuxtJS это headless CMS, основанная на файловой системе. Она предоставляет мощные функции для создания блогов, документации или просто добавления контента на обычный сайт.

Контент хранится в директории content/ в вашем проекте в виде файлов .md, .yml, .csv и .json и извлекать его можно также с помощью API.

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

Ссылка на официальный сайт

#vue
Bun — это новая среда выполнения JavaScript, как Node и Deno. Она обладает собственным сборщиком, транспилером, таск-менеджером и встроенным клиентом npm и по мнению создателей является быстрее других.

Подробнее о Bun читайте на официальном сайте.

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

#nodejs
Кнопки TailwindCSS 

TailwindCSS – это CSS-библиотека, которая упрощает стилизацию HTML, тем же путем, как это делает Bootstrap – добавляя определенные классы к элементам.

Делимся готовой коллекцией красивых и эффектных кнопок с hover эффектами, созданных с помощью классов TailwindCSS

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

#дизайн
Wasp - это новый язык программирования для разработки full-stack веб-приложений с меньшим количеством кода.

Это простой декларативный язык, который упрощает разработку веб-приложений, но при этом позволяет использовать новейшие технологии, такие как React, Node.js и Prisma.

Упрочнит ли он свою позицию в вебе? Покажет время!

А пока можете познакомиться с ним поближе. В статье рассказывается: чем Wasp может быть полезен для веб-разработки, как он работает, на какой он сейчас стадии и каковы планы создателей на будущее. 

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

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

Ссылка на официальный сайт

#статьи
overflow: hidden

Как достичь такого же результата, как у overflow: hidden, но без его использования?

Для этого есть два способа:
- использовать свойство clip-path
- использовать contain: paint.

Подробно о данных способах, читайте в статье!

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

#css
Фильтрация объектов

Объекты JavaScript не являются итерируемыми, как массивы или строки, поэтому для них невозможно использовать метод filter()

Объект — это набор пар ключ-значение. Можно извлекать ключи, используя метод Object.keys(), значения с помощью Object.values(), а если нужно и то и другое, то с помощью метода Object.entries(). Эти методы как раз и помогут в фильтрации объектов!

В статье рассказывается, как фильтровать объекты по ключу.

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

#js
Nunjucks

Nunjucks является мощным шаблонизатором для JavaScript. Его можно использовать в браузере, на стороне клиента и на стороне сервера Node.js. Но также, Nunjucks очень удобно применять для верстки сайтов.

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

Шаблонизатор Nunjucks позволяет вынести все повторяющееся элементы в один базовый шаблон. При этом изменить надпись в хедере на всем сайте займет пару минут.

Кстати, Nunjucks был разработан командой Mozilla.

Ссылка на официальный сайт

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

Еще одна библиотека для быстрого создания React приложений!

Mantine - это библиотека более 120 настраиваемых компонентов и 30 хуков. 

Mantine предлагает немало полезных функций. Например:
- c помощью данной библиотеки можно добавить темную тему в приложение, написав всего несколько строк кода;
- имеет полнофункциональную систему уведомлений;
- Transitions API для создания плавных анимаций
и многое другое!

Ссылка на официальный сайт

#react
Как стать веб-разработчиком с нуля в 2022? Узнайте на вебинаре.
→ Бесплатно, 26 июля в 19:00

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

◾️ Георгий Девяткин, наставник на курсе по веб-разработке, расскажет и покажет на примерах, как проходит рабочий день обычного веб-разработчика.

◾️ Олег Гордиенов, студент курса по веб-разработке Яндекс Практикума, поделится опытом обучения и трудоустройства. Олег нашёл работу ещё до того, как получил диплом разработчика. 

На вебинаре вы узнаете:
— почему через веб-разработку реально попасть в IT;
— какие задачи решает веб-разработчик;
— какие навыки нужны для успешного старта карьеры.

В финале встречи вы получите пошаговый план, как выйти на стабильный доход в новой профессии.

→ Зарегистрироваться на вебинар

#реклама
Morgan — это промежуточное ПО для Node.js, которое регистрирует HTTP-запросы. Обычно оно используется в проектах Express.

Morgan упрощает работу по регистрации HTTP-запросов к приложению и от него. Обычно разработчики должны писать весь код ведения журнала вручную. Они указывают Node.js/Express.js - что, как и где сохранять.

А Morgan как раз может позаботиться об этом без участия разработчика. Он сам собирает журналы с сервера и подготавливает их к чтению.

Подробнее о том, как его использовать читайте в статье!

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

#nodejs
Mesher - инструмент для создания сетчатых градиентов. 

Сетчатый градиент — это сложный градиент на основе двухмерной сетки, также он называется mesh-градиентом.

Можно добавлять бесконечное количество цветов, создавая интересные фоны. На выходе генератор выдает готовый CSS код.

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

#дизайн
CMS, CRM, и ERP

CMS, CRM и ERP — это три основных программных решения для автоматизации основных бизнес-процессов, а также типы проектов над которыми часто приходится работать разработчикам.

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

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

#статьи