Не попадитесь на канал ботавода! Telemetrio находит и помечает такие каналы 👉 Хотите видеть метку — оформите подписку

CodeBase | Frontend

Открыть в Telegram

Все самое интересное и полезное у нас 😎 Контакт: @Filgood777 (реклама, сотрудничество) Включи монетизацию своего TG-канала или сайта через РСЯ и получай пассивный доход. Подключиться по https://ya.cc/B2UP8W

Больше

Сеть:Ленивый вайб-программист Россия218 470 Технологии и приложения31 879

1 927

Подписчики

Нет данных24 часа

-37 дней

-1530 дней

162

Просмотры поста

~ 7924 часа

~ 9348 часов

8.40%

Коэффициент вовлеченности

Нет данных

Постов в день

Ads index

beta

Архив постов

\n \n\n\n

Section 1

Section 2

Section 3

Section 4

\n\n \n\n\n\n🟡 Этот пример создаст веб-страницу с четырьмя полноэкранными секциями, которые можно прокручивать. \n\n🟡 Библиотека fullPage.js широко используется для создания эффектных и интерактивных одностраничных веб-сайтов.\n\nПонравился пост? Добавь 🔥🔥🔥\n\nCodeBase | Frontend | #js_lib","datePublished":"2024-07-04T05:03:06Z","dateModified":"2024-07-04T05:03:06Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":960},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":2,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/165","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/165","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/165","headline":"🖼️ React: Базовые крючки 🖼️ const [state, setState] = useState(initialState); ➡️ Использование функции useSta…","articleBody":"🖼️ React: Базовые крючки 🖼️ \n\nconst [state, setState] = useState(initialState);\n\n➡️ Использование функции useState позволяет создать переменную state и функцию setState для управления ее значением. \n\nВо время инициализации, state равно переданному значению initialState.\n\nsetState(newState);\n\n➡️ Функция setState применяется для изменения значения состояния. При вызове функции с новым значением, React добавляет в очередь повторную отрисовку компонента.\n\nПри последующих обновлениях, значение state, полученное с помощью useState, отображает текущее состояние после всех обновлений.\n\nФункциональные обновления\n\n➡️ Если новое состояние зависит от предыдущего, можно передать функцию в setState, которая принимает предыдущее значение и возвращает новое. В примере с компонентом счетчика используются обе формы setState.\n\nfunction Counter({initialCount}) {\n const [count, setCount] = useState(initialCount);\n return (\n <>\n Count: {count}\n \n \n \n \n );\n}\n\nПонравился пост? Добавь 🔥🔥🔥\n\nCodeBase | Frontend | #react","datePublished":"2024-07-03T05:02:01Z","dateModified":"2024-07-03T05:02:01Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":853},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/164","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/164","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/164","headline":"⚡️ QUOKKA ⚡️ 🟢 Расширение Quokka позволяет тестировать JavaScript-код, не переключаясь на консоль браузера. 🟢…","articleBody":"⚡️ QUOKKA ⚡️ \n\n🟢 Расширение Quokka позволяет тестировать JavaScript-код, не переключаясь на консоль браузера. \n\n🟢 Кроме того, Quokka помогает в прототипировании и работе с файлами. \n\n🟢 В нем есть встроенные отчеты и функции форматирования вывода.\n\n🔗 Ссылка\n\nCodeBase | Frontend | #plugins","datePublished":"2024-07-02T05:04:01Z","dateModified":"2024-07-02T05:04:01Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1017},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/163","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/163","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/163","headline":"⚡️ componentWillUnmount ⚡️ ➡️ Этот метод вызывается прямо перед удалением компонента из DOM. Это важное место…","articleBody":"⚡️ componentWillUnmount ⚡️ \n\n➡️ Этот метод вызывается прямо перед удалением компонента из DOM. Это важное место для выполнения задач по очистке, таких как остановка таймеров, отписка от событий или освобождение ресурсов для предотвращения утечек памяти.\n\n🗣 Пример кода:\n\njsx\nimport React, { Component } from 'react';\n\nclass TimerComponent extends React.Component {\n constructor() {\n super();\n this.state = {\n seconds: 0,\n };\n this.timer = null; // Инициализация таймера\n }\n // При монтировании компонента, запускаем таймер\n componentDidMount() {\n this.timer = setInterval(() => {\n this.setState({ seconds: this.state.seconds + 1 });\n }, 1000); // Обновление каждую секунду (1000 миллисекунд)\n }\n // При размонтировании компонента, очищаем таймер, чтобы избежать утечки памяти\n componentWillUnmount() {\n clearInterval(this.timer);\n }\n render() {\n return (\n <>\n

Timer Component

Прошедшее время: {this.state.seconds} секунд

\n \n );\n }\n}\nexport default TimerComponent;\n\n⏺ TimerComponent класс инициализирует состояние seconds для отслеживания времени. В componentDidMount устанавливается таймер, а в componentWillUnmount он очищается. Таймер обновляет время каждую секунду. Компонент отображает прошедшее время. Очистка таймера в componentWillUnmount предотвращает утечки ресурсов.\n\nCodeBase | Frontend | #react_js","datePublished":"2024-07-01T05:01:01Z","dateModified":"2024-07-01T05:01:01Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1033},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/162","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/162","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/162","headline":"⚡️ Эффект волн - очень привлекательная анимация логотипа. 🔵 Реализована с использованием SCSS и JavaScript. 🔗…","articleBody":"⚡️ Эффект волн - очень привлекательная анимация логотипа. \n\n🔵 Реализована с использованием SCSS и JavaScript.\n\n🔗 Ссылка\n\nCodeBase | Frontend | #scss_js","datePublished":"2024-06-29T05:06:01Z","dateModified":"2024-06-29T05:06:01Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1194},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":27}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/161","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/161","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/161","headline":"🖥 Lucide Icons представляет собой привлекательный и единый набор иконок для веб-приложений. ✔️ Установка — np…","articleBody":"🖥 Lucide Icons представляет собой привлекательный и единый набор иконок для веб-приложений.\n\n✔️ Установка\n\n— npm i lucide\n\n➡️ Этот проект является форком проекта Feather Icons и управляется сообществом, полностью открытым для использования. \n\n➡️ Lucide постоянно расширяется новыми иконками, при этом сохраняя оригинальный минималистичный дизайн.\n\nПонравился пост? Добавь 🔥🔥🔥\n\nCodeBase | Frontend | #icons","datePublished":"2024-06-28T18:14:14Z","dateModified":"2024-06-28T18:14:14Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1138},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":20},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/160","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/160","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/160","headline":"⚡️ 2 лучших канала для любого веб-разработчика: idk Frontend - крупнейшая база обучающих материалов по фронте…","articleBody":"⚡️ 2 лучших канала для любого веб-разработчика:\n\nidk Frontend - крупнейшая база обучающих материалов по фронтенду.\n\nEasy Job - каталог лучших удалённых вакансий от проверенных работодателей для Frontend и Backend разработчиков.\n\nПодписывайся на оба канала, чтобы обучаться и попутно искать работу!","datePublished":"2024-06-28T13:07:00Z","dateModified":"2024-06-30T13:02:17Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":494},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/159","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/159","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/159","headline":"⚡️Приложение для поиска фильмов с помощью React (с хуками) ⚡️ ➡️ Чему вы научитесь ➡️ Создавая данное приложе…","articleBody":"⚡️Приложение для поиска фильмов с помощью React (с хуками) ⚡️\n\n➡️ Чему вы научитесь\n\n➡️ Создавая данное приложение, вы улучшите навыки работы с React, использовав новые хуки API. \n\n➡️ Проект включает в себя компоненты React, разнообразные хуки, взаимодействие с внешним API и стилизацию с помощью CSS.\n\n➡️ Стек технологий и особенности\n\n🟢 React с хуками\n🟢 create-react-app\n🟢 JSX\n🟢 CSS\n\nБлагодаря отсутствию классовых компонентов, эти проекты станут отличным введением в функциональное программирование с React и наверняка помогут вам улучшить свои навыки.\n\nЕсли понравился пост, добавь 🔥🔥🔥\n\n🔗 Ссылка на проект\n\nCodeBase | Frontend | #react #project","datePublished":"2024-06-27T05:01:06Z","dateModified":"2024-06-27T05:01:06Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1189},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":25}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/158","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/158","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/158","headline":"⚡️ Эффект наведения с подсветкой ⚡️ 🟣Светящийся эффект наведения на карточках, реализованный с использованием…","articleBody":"⚡️ Эффект наведения с подсветкой ⚡️ \n \n🟣Светящийся эффект наведения на карточках, реализованный с использованием CSS.\n\n🔗 Ссылка\n\nCodeBase | Frontend | #html #css","datePublished":"2024-06-26T05:03:06Z","dateModified":"2024-06-26T05:03:06Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1109},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/157","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/157","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/157","headline":"🟢 Макет cайта школы серфинга: Wawe 🟢 🔵 Технологии: HTML/CSS, JS 🔵 Страницы: Одностраничный 🔗 Ссылка на макет…","articleBody":"🟢 Макет cайта школы серфинга: Wawe 🟢 \n\n🔵 Технологии: HTML/CSS, JS\n🔵 Страницы: Одностраничный\n\n🔗 Ссылка на макет\n\nCodeBase | Frontend | #макет","datePublished":"2024-06-25T10:02:02Z","dateModified":"2024-06-25T10:02:02Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1186},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":23}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/156","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/156","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/156","headline":"🟢 SAAS 🟢 ⚡️ Sass — один из самых продвинутых и надежных CSS препроцессоров, пользующихся высокой популярность…","articleBody":"🟢 SAAS 🟢\n\n⚡️ Sass — один из самых продвинутых и надежных CSS препроцессоров, пользующихся высокой популярностью среди опытных специалистов.\n\n🟢 Возможность совместимости с различными версиями CSS позволит вам использовать любые CSS библиотеки в вашем проекте.\n🟢 CSS препроцессоры, обладающие таким богатым функционалом, как Sass, являются редкостью.\n🟢 Sass является одним из самых опытных CSS препроцессоров, который накопил множество знаний за свою долгую историю.\n🟢 Удобство использования Sass фреймворков, таких как Bourbon, значительно облегчит жизнь разработчику. Мы также используем Bourbon в определенных выпусках Джедая верстки при работе с Sass.\n🟢 Синтаксис Sass предлагает выбор между двумя вариантами: упрощенным (SASS) и более похожим на CSS (SCSS), чтобы каждый мог выбрать наиболее удобный.\n\n🔗 Посмотреть урок [34:43]\n\nCodeBase | Frontend | #обучение #sass","datePublished":"2024-06-25T01:09:02Z","dateModified":"2024-06-25T01:09:02Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1179},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":28}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/155","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/155","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/155","headline":"⚡️ Топовые курсы теперь можно смотреть бесплатно! 😎 IT Syndicate — собрали весь свежак от популярных онлайн ш…","articleBody":"⚡️ Топовые курсы теперь можно смотреть бесплатно!\n\n😎 IT Syndicate — собрали весь свежак от популярных онлайн школ и выложили у себя на канале. \n\n📁 Дизайн-системы для фронтендеров [0.06 Гб]\n📁 HTML и CSS с нуля для начинающих [4.80 Гб]\n📁 TypeScript для современной разработки [2.35 Гб]\n📁 И многое другое!\n\n 🔥 Заходи прямо сейчас, чтобы не потерять — IT Syndicate!","datePublished":"2024-06-24T17:35:43Z","dateModified":"2024-07-01T08:53:48Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":825},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/154","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/154","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/154","headline":"🌟Анимация смены текста 🌟 🔵 Реализовано на HTML, CSS и JS 🔗 Ссылка Code Base | Frontend","articleBody":"🌟Анимация смены текста 🌟\n\n🔵 Реализовано на HTML, CSS и JS\n\n🔗 Ссылка\n\nCode Base | Frontend","datePublished":"2024-06-24T05:01:06Z","dateModified":"2024-06-24T05:01:06Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1164},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":20}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/153","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/153","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/153","headline":"📌 Составили список лучших каналов от действующих разработчиков: Frontend Developer — советы и практики от дей…","articleBody":"📌 Составили список лучших каналов от действующих разработчиков:\n\nFrontend Developer — советы и практики от действующего Senior-разработчика\n\nPython Developer — готовый код и полезные ресурсы для любого питониста\n\nJava Developer — секреты и тонкости программирования на Java","datePublished":"2024-06-23T13:49:49Z","dateModified":"2024-06-25T13:49:11Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":701},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/152","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/152","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/152","headline":"⚡️ WEBPACK ⚡️ ➡️ Утилита для веб-разработчика, которая объединяет JavaScript- и CSS-файлы в один файл, извест…","articleBody":"⚡️ WEBPACK ⚡️ \n\n➡️ Утилита для веб-разработчика, которая объединяет JavaScript- и CSS-файлы в один файл, известный как \"bundle\".\n\n🟢 При работе над крупными проектами возникает необходимость эффективно организовывать код. \n\n🟢 Хранение всего кода огромного проекта в одном файле неудобно, а ручное разделение и последующая сборка также не оптимальны.\n\n🟢 Для решения этой задачи используются инструменты сборки, такие как бандлеры, которые автоматизируют процесс преобразования исходного кода проекта в готовый к использованию код для продакшена.\n\nCodeBase | Frontend | #webpack","datePublished":"2024-06-22T05:02:58Z","dateModified":"2024-06-22T05:02:58Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1437},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/151","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/151","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/151","headline":"🟢 Крутой макет интернет магазина: Дроны 🟢 Поможет прокачать вам свои навыки! 🔵 Технологии: HTML/CSS, JS 🔵 Стр…","articleBody":"🟢 Крутой макет интернет магазина: Дроны 🟢 \n\nПоможет прокачать вам свои навыки!\n\n🔵 Технологии: HTML/CSS, JS\n🔵 Страницы: Многостраничный\n\n🔗 Ссылка\n\nCodeBase | Frontend | #макет","datePublished":"2024-06-21T05:09:01Z","dateModified":"2024-06-21T05:09:01Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1303},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":35}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/150","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/150","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/150","headline":"⚡️ reveal.js ⚡️ 🖥 reveal.js - это open-source фреймворк, предназначенный для создания HTML-презентаций. ➡️ Он…","articleBody":"⚡️ reveal.js ⚡️\n\n🖥 reveal.js - это open-source фреймворк, предназначенный для создания HTML-презентаций. \n\n➡️ Он обладает широким спектром функций: \n\n🔵 включая поддержку Markdown \n🔵 возможности анимации\n🔵 экспорт в PDF\n🔵 заметки для докладчика\n🔵 поддержку верстки в LaTeX\n🔵 подсветку синтаксиса для кода\n🔵 удобное API.\n\n🔗 Ссылка\n\nCodeBase | Frontend | #js #framework","datePublished":"2024-06-20T10:02:03Z","dateModified":"2024-06-20T10:02:03Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1256},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":23}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/149","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/149","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/149","headline":"Совет фронтендерам и дизайнерам: Хватит тратить время на поиск макетов Figma Все макеты реальных сайтов, кото…","articleBody":"Совет фронтендерам и дизайнерам: Хватит тратить время на поиск макетов Figma\n\nВсе макеты реальных сайтов, которые заказчики присылают на вёрстку уже нашли и бесплатно выкладывают на канале Figma Portal\n\nПополняйте свое портфолио настоящими работами вместе с @maket_figma","datePublished":"2024-06-20T07:07:00Z","dateModified":"2024-06-22T07:01:32Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":539},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/148","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/148","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/148","headline":"🔥 Установка атрибутов файлов cookie 🔥 При работе с cookies в JavaScript можно настроить различные атрибуты, к…","articleBody":"🔥 Установка атрибутов файлов cookie 🔥\n\nПри работе с cookies в JavaScript можно настроить различные атрибуты, которые определяют их поведение. \n\nЭти атрибуты добавляются в строку cookie в виде пар ключ-значение. \n\n⚡️ Вот некоторые из часто используемых атрибутов:\n\n1️⃣ Имя и значение:\n\nИмя и значение определяют данные, которые будут храниться в cookie. Формат выглядит как name=value. \n\nНапример, document.cookie = \"username=johndoe\".\n\n2️⃣ Срок действия (expires):\n\nАтрибут expires определяет срок действия cookie. По умолчанию cookie хранятся до закрытия браузера. Чтобы установить конкретную дату истечения срока действия, используйте expires=date. \n\nНапример, document.cookie = \"username=johndoe; expires=Thu, 31 Dec 2022 23:59:59 GMT\".\n\n3️⃣ Домен (domain):\n\nАтрибут domain указывает на домен, к которому принадлежит cookie. По умолчанию cookie связаны с текущим доменом. Для явного указания домена используйте атрибут domain. \n\nНапример, document.cookie = \"username=johndoe; domain=example.com\".\n\n4️⃣ Путь (path):\n\nАтрибут path определяет путь в домене, по которому доступен cookie. По умолчанию cookie доступен для всего домена. Чтобы ограничить cookie определенным путем, укажите атрибут path. \n\nНапример, document.cookie = \"username=johndoe; path=/admin\".\n\n5️⃣ Безопасность (secure):\n\nАтрибут secure гарантирует, что cookie передается только через безопасное HTTPS-соединение. Для защиты cookie включите атрибут secure. \n\nНапример, document.cookie = \"username=johndoe; secure\".\n\nCodeBase | Frontend | #js","datePublished":"2024-06-20T05:04:03Z","dateModified":"2024-06-20T05:04:03Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1167},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/147","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/147","mainEntityOfPage":"https://telemetr.io/ru/channels/1798973851-codebase_frontend/posts/147","headline":"Хватит терять время на уже готовый код! Frontend Trends — библиотека фронтендера, где собраны готовые CodePen…","articleBody":"Хватит терять время на уже готовый код!\n\nFrontend Trends — библиотека фронтендера, где собраны готовые CodePen решения для ежедневных задач. Эффекты при наведении, 3D-анимации, готовые карточки и др.\n\nЗашли – сохранили – применили в своём проекте. Пользуйтесь: @trends_frontend","datePublished":"2024-06-19T16:17:00Z","dateModified":"2024-06-21T16:11:14Z","author":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"publisher":{"@type":"Organization","name":"CodeBase | Frontend","url":"https://telemetr.io/ru/channels/1798973851-codebase_frontend","image":"https://img.telemetr.io/c/1XKjhh/5226818570820900840?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":514},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}}]}

1 927

⚡️ fullPage.js — это JavaScript-библиотека, которая используется для создания полноэкранных прокручивающихся веб-страниц. Она позволяет создавать веб-страницы, где каждый экран представляет собой отдельный полноэкранный слайд, и пользователи могут переходить между этими слайдами путем прокрутки, нажатия стрелок или щелчков мыши. ➡️ Основные возможности fullPage.js включают: 1️⃣ Полноэкранная прокрутка: Контент отображается по одному слайду на экран. 2️⃣ Навигация: Встроенная навигация по точкам или стрелкам, которая позволяет быстро переходить к нужному слайду. 3️⃣ Мульти-секционные страницы: Возможность создания множества секций и слайдов внутри них. 4️⃣ Анимации переходов: Поддержка различных эффектов переходов между слайдами. 5️⃣ Адаптивность: Поддержка мобильных устройств и возможность адаптировать внешний вид под разные размеры экранов. 6️⃣ Совместимость: Работа с большинством современных браузеров. ➡️ Пример использования fullPage.js может выглядеть так:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
    <style>
        .section {
            text-align: center;
            font-size: 3em;
            color: #fff;
        }
        #section1 { background-color: #1BBC9B; }
        #section2 { background-color: #4BBFC3; }
        #section3 { background-color: #7BAABE; }
        #section4 { background-color: #f90; }
    </style>
</head>
<body>
    <div id="fullpage">
        <div class="section" id="section1">Section 1</div>
        <div class="section" id="section2">Section 2</div>
        <div class="section" id="section3">Section 3</div>
        <div class="section" id="section4">Section 4</div>
    </div>

    <script>
        new fullpage('#fullpage', {
            // Опции конфигурации
            autoScrolling: true,
            navigation: true,
            navigationPosition: 'right',
        });
    </script>
</body>
</html>

🟡 Этот пример создаст веб-страницу с четырьмя полноэкранными секциями, которые можно прокручивать. 🟡 Библиотека fullPage.js широко используется для создания эффектных и интерактивных одностраничных веб-сайтов.

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend | #js_lib

1 927

🖼️ React: Базовые крючки 🖼️

const [state, setState] = useState(initialState);

➡️ Использование функции useState позволяет создать переменную state и функцию setState для управления ее значением. Во время инициализации, state равно переданному значению initialState.

setState(newState);

➡️ Функция setState применяется для изменения значения состояния. При вызове функции с новым значением, React добавляет в очередь повторную отрисовку компонента. При последующих обновлениях, значение state, полученное с помощью useState, отображает текущее состояние после всех обновлений. Функциональные обновления ➡️ Если новое состояние зависит от предыдущего, можно передать функцию в setState, которая принимает предыдущее значение и возвращает новое. В примере с компонентом счетчика используются обе формы setState.

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend | #react

1 927

⚡️ QUOKKA ⚡️ 🟢 Расширение Quokka позволяет тестировать JavaScript-код, не переключаясь на консоль браузера. 🟢 Кроме того, Quokka помогает в прототипировании и работе с файлами. 🟢 В нем есть встроенные отчеты и функции форматирования вывода. 🔗 Ссылка CodeBase | Frontend | #plugins

1 927

⚡️ componentWillUnmount ⚡️ ➡️ Этот метод вызывается прямо перед удалением компонента из DOM. Это важное место для выполнения задач по очистке, таких как остановка таймеров, отписка от событий или освобождение ресурсов для предотвращения утечек памяти. 🗣 Пример кода:

jsx
import React, { Component } from 'react';

class TimerComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      seconds: 0,
    };
    this.timer = null; // Инициализация таймера
  }
  // При монтировании компонента, запускаем таймер
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000); // Обновление каждую секунду (1000 миллисекунд)
  }
  // При размонтировании компонента, очищаем таймер, чтобы избежать утечки памяти
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  render() {
    return (
      <>
        <h1>Timer Component</h1>
        <p>Прошедшее время: {this.state.seconds} секунд</p>
      </>
    );
  }
}
export default TimerComponent;

⏺ TimerComponent класс инициализирует состояние seconds для отслеживания времени. В componentDidMount устанавливается таймер, а в componentWillUnmount он очищается. Таймер обновляет время каждую секунду. Компонент отображает прошедшее время. Очистка таймера в componentWillUnmount предотвращает утечки ресурсов. CodeBase | Frontend | #react_js

1 927

⚡️ Эффект волн - очень привлекательная анимация логотипа. 🔵 Реализована с использованием SCSS и JavaScript. 🔗 Ссылка CodeBase | Frontend | #scss_js

1 927

🖥 Lucide Icons представляет собой привлекательный и единый набор иконок для веб-приложений. ✔️ Установка — npm i lucide ➡️ Этот проект является форком проекта Feather Icons и управляется сообществом, полностью открытым для использования. ➡️ Lucide постоянно расширяется новыми иконками, при этом сохраняя оригинальный минималистичный дизайн.

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend | #icons

1 927

⚡️ 2 лучших канала для любого веб-разработчика: idk Frontend - крупнейшая база обучающих материалов по фронтенду. Easy Job - каталог лучших удалённых вакансий от проверенных работодателей для Frontend и Backend разработчиков.

Подписывайся на оба канала, чтобы обучаться и попутно искать работу!

1 927

⚡️Приложение для поиска фильмов с помощью React (с хуками) ⚡️ ➡️ Чему вы научитесь ➡️ Создавая данное приложение, вы улучшите навыки работы с React, использовав новые хуки API. ➡️ Проект включает в себя компоненты React, разнообразные хуки, взаимодействие с внешним API и стилизацию с помощью CSS. ➡️ Стек технологий и особенности 🟢 React с хуками 🟢 create-react-app 🟢 JSX 🟢 CSS Благодаря отсутствию классовых компонентов, эти проекты станут отличным введением в функциональное программирование с React и наверняка помогут вам улучшить свои навыки.

Если понравился пост, добавь 🔥🔥🔥

🔗 Ссылка на проект CodeBase | Frontend | #react #project

1 927

⚡️ Эффект наведения с подсветкой ⚡️ 🟣Светящийся эффект наведения на карточках, реализованный с использованием CSS. 🔗 Ссылка CodeBase | Frontend | #html #css

1 927

🟢 Макет cайта школы серфинга: Wawe 🟢 🔵 Технологии: HTML/CSS, JS 🔵 Страницы: Одностраничный 🔗 Ссылка на макет CodeBase | Frontend | #макет

1 927

🟢 SAAS 🟢 ⚡️ Sass — один из самых продвинутых и надежных CSS препроцессоров, пользующихся высокой популярностью среди опытных специалистов. 🟢 Возможность совместимости с различными версиями CSS позволит вам использовать любые CSS библиотеки в вашем проекте. 🟢 CSS препроцессоры, обладающие таким богатым функционалом, как Sass, являются редкостью. 🟢 Sass является одним из самых опытных CSS препроцессоров, который накопил множество знаний за свою долгую историю. 🟢 Удобство использования Sass фреймворков, таких как Bourbon, значительно облегчит жизнь разработчику. Мы также используем Bourbon в определенных выпусках Джедая верстки при работе с Sass. 🟢 Синтаксис Sass предлагает выбор между двумя вариантами: упрощенным (SASS) и более похожим на CSS (SCSS), чтобы каждый мог выбрать наиболее удобный. 🔗 Посмотреть урок [34:43] CodeBase | Frontend | #обучение #sass

1 927

⚡️ Топовые курсы теперь можно смотреть бесплатно! 😎 IT Syndicate — собрали весь свежак от популярных онлайн школ и выложили у себя на канале. 📁 Дизайн-системы для фронтендеров [0.06 Гб] 📁 HTML и CSS с нуля для начинающих [4.80 Гб] 📁 TypeScript для современной разработки [2.35 Гб] 📁 И многое другое! 🔥 Заходи прямо сейчас, чтобы не потерять — IT Syndicate!

1 927

🌟Анимация смены текста 🌟 🔵 Реализовано на HTML, CSS и JS 🔗 Ссылка Code Base | Frontend

1 927

📌 Составили список лучших каналов от действующих разработчиков: Frontend Developer — советы и практики от действующего Senior-разработчика Python Developer — готовый код и полезные ресурсы для любого питониста Java Developer — секреты и тонкости программирования на Java

1 927

⚡️ WEBPACK ⚡️ ➡️ Утилита для веб-разработчика, которая объединяет JavaScript- и CSS-файлы в один файл, известный как "bundle". 🟢 При работе над крупными проектами возникает необходимость эффективно организовывать код. 🟢 Хранение всего кода огромного проекта в одном файле неудобно, а ручное разделение и последующая сборка также не оптимальны. 🟢 Для решения этой задачи используются инструменты сборки, такие как бандлеры, которые автоматизируют процесс преобразования исходного кода проекта в готовый к использованию код для продакшена. CodeBase | Frontend | #webpack

1 927

🟢 Крутой макет интернет магазина: Дроны 🟢 Поможет прокачать вам свои навыки! 🔵 Технологии: HTML/CSS, JS 🔵 Страницы: Многостраничный 🔗 Ссылка CodeBase | Frontend | #макет

1 927

⚡️ reveal.js ⚡️ 🖥 reveal.js - это open-source фреймворк, предназначенный для создания HTML-презентаций. ➡️ Он обладает широким спектром функций: 🔵 включая поддержку Markdown 🔵 возможности анимации 🔵 экспорт в PDF 🔵 заметки для докладчика 🔵 поддержку верстки в LaTeX 🔵 подсветку синтаксиса для кода 🔵 удобное API. 🔗 Ссылка CodeBase | Frontend | #js #framework

1 927

Совет фронтендерам и дизайнерам: Хватит тратить время на поиск макетов Figma Все макеты реальных сайтов, которые заказчики присылают на вёрстку уже нашли и бесплатно выкладывают на канале Figma Portal Пополняйте свое портфолио настоящими работами вместе с @maket_figma

1 927

🔥 Установка атрибутов файлов cookie 🔥 При работе с cookies в JavaScript можно настроить различные атрибуты, которые определяют их поведение. Эти атрибуты добавляются в строку cookie в виде пар ключ-значение. ⚡️ Вот некоторые из часто используемых атрибутов: 1️⃣ Имя и значение: Имя и значение определяют данные, которые будут храниться в cookie. Формат выглядит как name=value. Например, document.cookie = "username=johndoe". 2️⃣ Срок действия (expires): Атрибут expires определяет срок действия cookie. По умолчанию cookie хранятся до закрытия браузера. Чтобы установить конкретную дату истечения срока действия, используйте expires=date. Например, document.cookie = "username=johndoe; expires=Thu, 31 Dec 2022 23:59:59 GMT". 3️⃣ Домен (domain): Атрибут domain указывает на домен, к которому принадлежит cookie. По умолчанию cookie связаны с текущим доменом. Для явного указания домена используйте атрибут domain. Например, document.cookie = "username=johndoe; domain=example.com". 4️⃣ Путь (path): Атрибут path определяет путь в домене, по которому доступен cookie. По умолчанию cookie доступен для всего домена. Чтобы ограничить cookie определенным путем, укажите атрибут path. Например, document.cookie = "username=johndoe; path=/admin". 5️⃣ Безопасность (secure): Атрибут secure гарантирует, что cookie передается только через безопасное HTTPS-соединение. Для защиты cookie включите атрибут secure. Например, document.cookie = "username=johndoe; secure". CodeBase | Frontend | #js

1 927

Хватит терять время на уже готовый код! Frontend Trends — библиотека фронтендера, где собраны готовые CodePen решения для ежедневных задач. Эффекты при наведении, 3D-анимации, готовые карточки и др. Зашли – сохранили – применили в своём проекте. Пользуйтесь: @trends_frontend