CodeRoll | Frontend
前往频道在 Telegram
OZ — Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги — Веб-разработка на JS, HTML, CSS, React, Vue,Angular Купить рекламу: https://telega.in/c/coderoll Чат: https://t.me/coderoll_chat По всем вопросам пишите сюда - @yankovsky_ads
显示更多4 022
订阅者
+124 小时
-137 天
-5030 天
帖子存档
\n\nА можно воспользоваться короткой записью:\n\n\n\nОб этом и других советах читайте в статье!\n\nСсылка на статью\n\n#vue","datePublished":"2022-04-08T10:00:47Z","dateModified":"2022-04-08T10:00:47Z","author":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"publisher":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1639},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1473","url":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1473","mainEntityOfPage":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1473","headline":"JavaScript теперь в телеграм! JavaScript — самый популярный язык в мире, он используется в 95% всех сайтов, к…","articleBody":"JavaScript теперь в телеграм!\n\nJavaScript — самый популярный язык в мире, он используется в 95% всех сайтов, которые вообще существуют. Теперь у JS есть русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсов. Стоит подписаться!\n\n#реклама","datePublished":"2022-04-07T14:01:05Z","dateModified":"2022-04-08T14:00:10Z","author":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"publisher":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":854},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1472","url":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1472","mainEntityOfPage":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1472","headline":"Фронтенд практика Практиковать свои навыки нужно постоянно. Каким образом? Делимся ссылкой на ресурс, на кото…","articleBody":"Фронтенд практика\n\nПрактиковать свои навыки нужно постоянно. Каким образом?\n\nДелимся ссылкой на ресурс, на котором собрана коллекция реальных сайтов для воссоздания.\n\nВ каждом кейсе для практики представлены:\n\n- список того, чему вы научитесь\n- ссылки на ресурсы, где можно найти информацию по реализации необходимого функционала для данного кейса\n- цветовая палитра\n- ссылка на реальный сайт, который нужно воссоздать\n\nДанная практика нацелена прежде всего на самостоятельную работу, а ресурс предоставляет вам идею. Для проверки себя можно подглядывать на реальный пример сайта.\n\nСсылка на сайт\n\n#инструменты","datePublished":"2022-04-07T10:01:44Z","dateModified":"2022-04-07T10:01:44Z","author":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"publisher":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1691},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":37}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1471","url":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1471","mainEntityOfPage":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1471","headline":"JavaScript подкаст Подкаст, посвященный JavaScript и другим веб-технологиям с участием гостей из open-source…","articleBody":"JavaScript подкаст\n\nПодкаст, посвященный JavaScript и другим веб-технологиям с участием гостей из open-source сообщества.\n\nКак говорится, 2 в 1: и полезную информацию узнаете и по английскому listening подтяните!\n\nПоследний эпизод был на тему: \"Качество кода\".\n\nСсылка на подкаст\n\n#js","datePublished":"2022-04-06T10:00:23Z","dateModified":"2022-04-06T10:00:23Z","author":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"publisher":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1589},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1470","url":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1470","mainEntityOfPage":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1470","headline":"all: revert В CSS есть есть такое свойство, как all, одним из значений которого является revert. revert сбрас…","articleBody":"all: revert\n\nВ CSS есть есть такое свойство, как all, одним из значений которого является revert.\nrevert сбрасывает свойство к значению по умолчанию, которое было установлено браузером.\n\nВ каких случаях оно может быть применено?\n\nНапример, когда в какой-то уже существующий сайт, нужно встроить приложение с кардинально отличающимся дизайном. Как правило, встраивая, это означает наследование стилей сайта. \n\nО том, как решать подобную задачу, рассказывает автор статьи. Небольшой спойлер: был использован all: revert.\n\nСсылка на статью\n\n#css","datePublished":"2022-04-05T10:00:41Z","dateModified":"2022-04-05T10:00:41Z","author":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"publisher":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1643},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1469","url":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1469","mainEntityOfPage":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1469","headline":"Python пришел в телеграм! Python — второй по популярности язык в мире. Он очень универсален: можно писать сай…","articleBody":"Python пришел в телеграм!\n\nPython — второй по популярности язык в мире. Он очень универсален: можно писать сайты, а можно искусственный интеллект. Теперь у Python есть русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсах. Стоит подписаться!\n\n#реклама","datePublished":"2022-04-04T14:00:49Z","dateModified":"2022-04-05T14:00:16Z","author":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"publisher":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":850},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1468","url":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1468","mainEntityOfPage":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1468","headline":"Алгоритмы верстки CSS может восприниматься, как просто набор свойств, которые используются для стилизации эле…","articleBody":"Алгоритмы верстки\n\nCSS может восприниматься, как просто набор свойств, которые используются для стилизации элементов.\n\nАвтор статьи предлагает посмотреть на CSS под другим углом. CSS — это совокупность взаимосвязанных алгоритмов компоновки, где каждый алгоритм представляет собой сложную систему со своими правилами и секретными механизмами.\n\nНедостаточно узнать, что делают конкретные свойства. Нужно узнать, как работают алгоритмы компоновки и как они используют свойства, которые мы им предоставляем.\n\nДанная статья поможет раскрыть некоторые моменты со свойствами CSS, которые до этого были не понятны или казались волшебством.\n\nСсылка на статью\n\n#статьи","datePublished":"2022-04-04T10:01:19Z","dateModified":"2022-04-04T10:01:19Z","author":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"publisher":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1721},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":29}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1467","url":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1467","mainEntityOfPage":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1467","headline":"preloader Делимся ссылкой на небольшую библиотеку анимированных спиннеров с готовым CSS кодом. Просто выберит…","articleBody":"preloader \n\nДелимся ссылкой на небольшую библиотеку анимированных спиннеров с готовым CSS кодом.\n\nПросто выберите понравившийся вариант, нажмите на вкладку 'source' и готовый код у вас в кармане!\n\nСсылка на сайт\n\n#дизайн","datePublished":"2022-04-03T10:01:13Z","dateModified":"2022-04-03T10:01:13Z","author":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"publisher":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1654},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":27}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1466","url":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1466","mainEntityOfPage":"https://telemetr.io/ch/channels/1256373241-coderoll/posts/1466","headline":"Защита данных в Node.js Любой веб-ресурс может быть подвержен хакерской атаке для заполучения каких-либо данн…","articleBody":"Защита данных в Node.js\n\nЛюбой веб-ресурс может быть подвержен хакерской атаке для заполучения каких-либо данных, например, о пользователях.\n\nКомпании несут большую ответственность за эти данные, а кто как ни разработчики могут обеспечить их хорошую защиту.\n\nВ статье представлены cоветы по укреплению защиты приложений на Node.js.\n\nСсылка на статью\n\n#nodejs","datePublished":"2022-04-02T10:01:01Z","dateModified":"2022-04-02T10:01:01Z","author":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"publisher":{"@type":"Organization","name":"CodeRoll | Frontend","url":"https://telemetr.io/ch/channels/1256373241-coderoll","image":"https://img.telemetr.io/c/1n1C4x/5208891793939215177?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1699},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":31}]}}]}
4 022
:has
Чего очень не хватает в CSS, так это родительского селектора...Все очень ждали его появления, и дождались в виде псевдокласса :has()!
Пока что он поддерживается только в последней версии Safari.
Но уже советуем познакомиться с его возможностями сейчас. О них вы узнаете из статьи!
Ссылка на статью
#css
4 022
Safari 15.4
Относительно недавно была выпущена новая версия Safari.
В Safari 15.4 добавлено более 70 дополнений к WebKit, а также новые веб-технологии, обновления и исправления.
Напомним, что WebKit — это движок веб-браузера, используемый Safari, Mail, App Store и многими другими приложениями для macOS, iOS и Linux.
И что же нового и полезного появилось для разработчиков?
Например, была добавлена поддержка элемента <dialog> и псевдоэлемента ::backdrop. Элемент <dialog> - это тэг для создания модальных окон, а псевдоэлемент ::backdrop позволяет стилизовать фон под модальным окном.
О всех остальных обновлениях читайте в статье.
Ссылка на статью
#статьи
4 022
3D transform
Сегодня хотим поделиться ссылкой на очень полезный ресурс: гайд по созданию 3D фигур и анимаций на CSS.
С помощью этого руководства, вы сможете создать 3D куб, реализовать эффект переворачивающейся карточки. А самое интересное - это кольцевая карусель!
Ссылка на ресурс
#дизайн
4 022
Deno - это современная среда выполнения JavaScript, конкурирующая с Node.js, которая обещает такие функции, как безопасный ввод-вывод и встроенную поддержку TypeScript.
Райан Даль, первоначальный создатель Node.js, создал Deno, исправив все ошибки и недочеты, допущенные в Node.js.
Сегодняшняя статья на тему: "Почему Deno может заменить Node.js?"
И правда почему...Ведь Node.js уже достаточно прочно обосновался! Об этом читайте в статье.
Ссылка на статью
#nodejs
4 022
GSAP & Vue3
Делимся обучающей статьей по созданию анимации с помощью библиотеки GSAP на Vue 3!
Лучшее обучение всегда эффективнее при создании чего-то на практике. В проекте из статьи задействованы такие современные инструменты, как Vite(инструмент сборки) и TailwindCSS(библиотека для стилизации).
Вы научитесь подключать и использовать на практике данные инструменты во Vue 3. Всего столько полезного в одной статье!
Ссылка на статью
#vue
4 022
AnyWebP - это конвертер картинок любых форматов в формат .webp.
WebP — это формат файла, разработанный компанией Google в 2010 году. Его особенностью является продвинутый алгоритм сжатия, позволяющий сократить размер картинки без видимых потерь в качестве.
А так же на этом ресурсе можно конвертировать из формата WebP в JPG/JPEG/PNG/ICO.
Ссылка на ресурс
#инструменты
4 022
Map & weakMap
Map - это коллекция пар ключ-значение, где ключи и объекты могут быть любого типа данных, включая объекты, функции и примитивные типы, в отличие от объектов, созданных с помощью литерала.
Для его создания используется конструктор Map.
Из статьи вы узнаете подробную информацию о Map, когда и как использовать. А так же познакомитесь с такой структурой, как weakMap.
Ссылка на cтатью
#js
4 022
Bulma - это CSS фрэймворк, который основан на first-mobile подходе. Это гарантирует, что UI элементы будут отзывчивыми и отлично выглядеть на маленьких экранах.
Bulma предоставляет множество предварительно стилизованных компонентов без использования JavaScript. Этим он похож на Tawlind CSS и Material UI.
Данный фрэймворк очень прост в установке и освоении. Он имеет интуитивно понятные, читаемые модификаторы, синтаксис и классы.
Делимся статьей, которая познакомит вас с Bulma.
Ссылка на статью
#css
4 022
Аллея памяти веба
Как много вы знаете об истории веба?
Делимся ссылкой на ресурс, посвященный 100 событиям в вебе, начиная с 2008 года.
Ссылка на ресурс
#статьи
4 022
10015 Tools — это набор инструментов для фронтенд разработки.
На этом ресурсе вы найдете кучу полезных помощников:
- инструменты для работы с картинками
- инструменты для работы с текстом
- генераторы CSS кода
- инструменты для форматирования HTML, CSS, JavaScript и многое другое.
Все собрано на одном ресурсе!
Ссылка на сайт
#дизайн
4 022
yarn - это альтернативный менеджер пакетов для Javascript и среды его выполнения Node.js, который, как утверждается, обеспечивает скорость, согласованность, стабильность и безопасность.
Кстати, расшифровывается данное название, как Yet Another Resource Negotiator.
Сложно утверждать, что лучше: npm или yarn. Есть приверженцы и того, и другого!
На случай, если хотите попробовать и сравнить, делимся статьей в которой рассказано, как установить данный пакетный менеджер и необходимые
команды для использования.
Ссылка на статью
#nodejs
4 022
Лайфхаки 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>
Об этом и других советах читайте в статье!
Ссылка на статью
#vue4 022
JavaScript теперь в телеграм!
JavaScript — самый популярный язык в мире, он используется в 95% всех сайтов, которые вообще существуют. Теперь у JS есть русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсов. Стоит подписаться!
#реклама
4 022
Фронтенд практика
Практиковать свои навыки нужно постоянно. Каким образом?
Делимся ссылкой на ресурс, на котором собрана коллекция реальных сайтов для воссоздания.
В каждом кейсе для практики представлены:
- список того, чему вы научитесь
- ссылки на ресурсы, где можно найти информацию по реализации необходимого функционала для данного кейса
- цветовая палитра
- ссылка на реальный сайт, который нужно воссоздать
Данная практика нацелена прежде всего на самостоятельную работу, а ресурс предоставляет вам идею. Для проверки себя можно подглядывать на реальный пример сайта.
Ссылка на сайт
#инструменты
4 022
JavaScript подкаст
Подкаст, посвященный JavaScript и другим веб-технологиям с участием гостей из open-source сообщества.
Как говорится, 2 в 1: и полезную информацию узнаете и по английскому listening подтяните!
Последний эпизод был на тему: "Качество кода".
Ссылка на подкаст
#js
4 022
all: revert
В CSS есть есть такое свойство, как all, одним из значений которого является revert.
revert сбрасывает свойство к значению по умолчанию, которое было установлено браузером.
В каких случаях оно может быть применено?
Например, когда в какой-то уже существующий сайт, нужно встроить приложение с кардинально отличающимся дизайном. Как правило, встраивая, это означает наследование стилей сайта.
О том, как решать подобную задачу, рассказывает автор статьи. Небольшой спойлер: был использован all: revert.
Ссылка на статью
#css
4 022
Python пришел в телеграм!
Python — второй по популярности язык в мире. Он очень универсален: можно писать сайты, а можно искусственный интеллект. Теперь у Python есть русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсах. Стоит подписаться!
#реклама
4 022
Алгоритмы верстки
CSS может восприниматься, как просто набор свойств, которые используются для стилизации элементов.
Автор статьи предлагает посмотреть на CSS под другим углом. CSS — это совокупность взаимосвязанных алгоритмов компоновки, где каждый алгоритм представляет собой сложную систему со своими правилами и секретными механизмами.
Недостаточно узнать, что делают конкретные свойства. Нужно узнать, как работают алгоритмы компоновки и как они используют свойства, которые мы им предоставляем.
Данная статья поможет раскрыть некоторые моменты со свойствами CSS, которые до этого были не понятны или казались волшебством.
Ссылка на статью
#статьи
4 022
preloader
Делимся ссылкой на небольшую библиотеку анимированных спиннеров с готовым CSS кодом.
Просто выберите понравившийся вариант, нажмите на вкладку 'source' и готовый код у вас в кармане!
Ссылка на сайт
#дизайн
4 022
Защита данных в Node.js
Любой веб-ресурс может быть подвержен хакерской атаке для заполучения каких-либо данных, например, о пользователях.
Компании несут большую ответственность за эти данные, а кто как ни разработчики могут обеспечить их хорошую защиту.
В статье представлены cоветы по укреплению защиты приложений на Node.js.
Ссылка на статью
#nodejs
