CodeRoll | Frontend @coderoll Channel on Telegram

CodeRoll | Frontend

@coderoll

— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

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

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

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

CodeRoll | Frontend (Russian)

CodeRoll | Frontend - лучший канал для разработчиков и дизайнеров, предлагающий широкий спектр IT инструментов, курсов и книг. Здесь вы найдете все необходимое для веб-разработки на JavaScript, HTML, CSS, React, Vue и Angular. Станьте экспертом в своей области с помощью нашего канала!
Не упустите возможность раскрутить свой бизнес или продвинуть свои проекты с помощью рекламы на нашем канале. Покупайте рекламу здесь: https://telega.in/c/coderollnnПрисоединяйтесь к нашему чату, чтобы общаться с другими участниками канала и задавать интересующие вас вопросы: https://t.me/coderoll_chatnnДля всех остальных вопросов и предложений обращайтесь к @yankovsky28. Присоединяйтесь к нам прямо сейчас и станьте частью сообщества профессионалов в сфере разработки и дизайна!

CodeRoll | Frontend

07 Jan, 14:37

⚡️ В сети начали массово сливать курсы и книги известных онлайн школ

Вот отсортированная база с тонной материала(постепенно пополняется):

БАЗА (4687 видео/книг):

(363 видео, 87 книги) — Python
(415 видео, 68 книги) — Frontend
(143 видео, 33 книги) — ИБ/Хакинг
(352 видео, 89 книги) — С/С++
(343 видео, 87 книги) — Java
(176 видео, 32 книги) — Git
(293 видео, 63 книги) — C#
(174 видео, 91 книги) — DevOps
(167 видео, 53 книги) — PHP
(227 видео, 83 книги) — SQL/БД
(163 видео, 29 книги) — Linux
(107 видео, 43 книги) — СисАналз
(181 видео, 32 книги) — Go
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(137 видео, 93 книги) — DS/ML
(113 видео, 82 книги) — GameDev
(183 видео, 37 книги) — UI/UX
(129 видео, 73 книги) — QA
(213 видео, 63 книги) — Rust
(121 видео, 24 книги) — Ruby

Скачивать ничего не нужно — все выложили в Telegram
552
CodeRoll | Frontend

07 Jan, 12:36

Игра-тренажёр по Flexbox

Раз уж вам так понравилась предыдущая игра — держите ещё одну, но уже по флексам. Суть игры — расставить пушки так, чтобы кружочки-злодеи не прошли по карте

👀 Расставить пушки

Coderoll | Frontend #css
543
CodeRoll | Frontend

06 Jan, 14:03

Вопрос с собеседования:

❓Что такое NaN?

NaN (Not a Number): это значение, получаемое в результате выполнения числовой операции над нечисловым значением.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend
568
CodeRoll | Frontend

06 Jan, 11:05

Подборка советов от Дениса Мищенко для студентов и новичков о том как на самом деле преуспеть в команде и чего ждет от тебя руководитель.

Денис рассказывает в своем блоге о развитии бизнеса и выхода из долга в 💵10+ миллионов рублей
575
CodeRoll | Frontend

28 Dec, 14:30

Вопрос с собеседования:

❓Как объединить массивы?

1 - Можно использовать метод concat()
2 - Можно использовать spread оператор

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend
900
CodeRoll | Frontend

27 Dec, 14:03

Immer — библиотека для работы с состоянием

Позволяет писать чистый и лаконичный код при работе с вложенными объектами. С помощью Immer можно обновлять состояние как будто напрямую, но в итоге получать неизменяемые данные. Работает через "проекты" (draft), которые можно безопасно менять, а библиотека сама позаботится о создании нового объекта.

Отлично интегрируется с Redux Toolkit и позволяет избавиться от громоздких .map и ...spread конструкций, ускоряя разработку и делая код чище.

👀 Посмотреть

Coderoll | Frontend
936
CodeRoll | Frontend

25 Dec, 15:10

Господи, да в чём проблема стать фронтендером?

Подписался на эти три канала:

👉 Фронтенд
👉 Верстка
👉 Node.JS

Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!

Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
673
CodeRoll | Frontend

24 Dec, 15:06

Вопрос с собеседования:

❓Что такое замыкания?

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

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend
860
CodeRoll | Frontend

21 Dec, 08:59

Вопрос с собеседования:

❓Что такое имутабельность в JS?

Иммутабельность в JavaScript означает, что данные не могут быть изменены после их создания.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend
995
CodeRoll | Frontend

20 Dec, 11:44

Генератор CSS Grid для быстрого создания адаптивных сеток

Инструмент, который упрощает работу с CSS Grid. Рисуйте сетку прямо в браузере, настраивайте её поведение и получайте готовый код. Подходит как для обучения, так и для ускорения разработки.

👀 Посмотреть

Coderoll | Frontend
1,114
CodeRoll | Frontend

16 Dec, 14:09

Вопрос с собеседования:

❓Какие элементы в HTML5 могут иметь aria атрибут?

Любой элемент)

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend
1,191
CodeRoll | Frontend

14 Dec, 14:07

Fuse.js

Легкий и мощный инструмент для поиска по тексту. Поддерживает "нечеткий" поиск. Работает без внешних зависимостей.

👀 Посмотреть

Coderoll | Frontend
1,237
CodeRoll | Frontend

13 Dec, 09:35

Вопрос с собеседования:

❓Чистые и нечистые функции, что это и какие отличия между ними?

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

Нечистая функция - Изменяет состояние программы или какие-либо внешние переменные.
Может иметь побочные эффекты, такие как вывод в консоль, изменение DOM, отправка HTTP-запросов и т. д.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend
1,064
CodeRoll | Frontend

12 Dec, 09:35

SVGOMG — онлайн-инструмент для оптимизации SVG

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

👀 Посмотреть

Coderoll | Frontend
981
CodeRoll | Frontend

11 Dec, 09:35

Вопрос с собеседования:

❓Какие элементы в HTML5 могут иметь aria атрибут?

Любой элемент

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend
938
CodeRoll | Frontend

10 Dec, 09:36

TsParticles

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

👀 Посмотреть

Coderoll | Frontend
1,098
CodeRoll | Frontend

08 Dec, 10:25

Вопрос с собеседования:

❓Какое будет поведение ```<script async defer>```?

При одновременном указании async и defer в современных браузерах будет использован только async, в IE9- – только defer (не понимает async).

Подробнее

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#web
1,180
CodeRoll | Frontend

07 Dec, 09:40

Современный JavaScript. От новичка до профи [2024]

Курс. По мере прохождения вы погрузитесь в интереснейший мир JavaScript. Обучение начинается с основных концепций языка и продолжается передовыми техниками программирования.

Вне зависимости от уровня подготовки, курс обеспечит вас всей самой необходимой информацией для успешного освоения JS.

👀 Посмотреть курс

#js
1,291
CodeRoll | Frontend

05 Dec, 10:28

Codepip

Сборник мини-игр для изучения веб-технологий: Flexbox, Grid, CSS-анимации и многое другое.

👀 Потыкать игры

#тренажёры
968
CodeRoll | Frontend

04 Dec, 10:30

Вопрос с собеседования:

❓В чем разница между HTML и XHTML?

— XHTML - это приложение XML, которое является довольно строгим языком с угловыми скобками.
— HTML - это приложение SGML, которое является гораздо менее строгим языком с угловой скобкой.
— (XML также является применением SGML.)

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

Правила XHTML следующие.
// Все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами).
// Значения любых атрибутов необходимо заключать в кавычки.
// Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
// Должна соблюдаться правильная вложенность тегов.
// Нельзя использовать сокращенные атрибуты тегов.
// Вместо атрибута name следует указывать id.
// Следует определять DTD (document type definition, описание типа документа) с помощью элемента DOCTYPE.

Подробнее с примерами: http://htmlbook.ru/xhtml/sintaksis-xhtml

Ставь ❤️если знаешь ответ
Если нет — ставь 💅
851
CodeRoll | Frontend

03 Dec, 14:42

Тренируем регулярки на Regex101

На Regex101 вы сможете тестировать регулярные выражения в реальном времени, разбирать их структуру с подробными объяснениями каждой части, а также находить и исправлять ошибки благодаря встроенным подсказкам. Ресурс поддерживает синтаксисы для популярных языков программирования, таких как JavaScript, Python и PHP, и позволяет легко проверять ваши регулярки на примерах. Это идеальный инструмент как для новичков, так и для опытных разработчиков, желающих упростить работу с текстовыми шаблонами.

👀 Перейти к сервису

#тренажёр
984
CodeRoll | Frontend

30 Nov, 13:43

Recharts: простая визуализация данных для React 👩‍💻

Recharts — библиотека, которая поможет добавить графики и диаграммы в ваш проект. Легко подключается, настраивается и отлично работает с React. Хотите показать тренды, сравнить показатели или сделать крутой аналитический дашборд? С этой библиотекой всё это можно сделать за пару строк кода. Выбирайте линейные графики, круговые диаграммы, гистограммы или что-то своё.

👀 Посмотреть библиотеку

#инструменты
1,146
CodeRoll | Frontend

26 Nov, 10:42

Что такое атрибут key? Для чего он нужен?

Key помогает React определять, какие элементы были изменены, добавлены или удалены. Key нужен для лучшего определения порядка элементов в списке.

Key всегда должен присваивается на верхнем уровне:

Правильно:


const howUseKey = () => {
  const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
};


Неправильно (Приглядитесь к its a trap):



const howNotUseKey = () => { 
 const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div className="its a trap">
          <div key={item}>{item}</div>
        </div>
      ))}
    </div>
  );
};



Если использовать индекс массива или другие значения которые могут меняться, то мы можем получить неприятные баги. Лучше всего использовать уникальный id объекта.

Более подробно про key можете прочитать здесь
1,030
CodeRoll | Frontend

26 Nov, 07:42

Как юридически защитить продукт своей компании или стартапа?

Если вы:
✔️ разрабатываете ПО, базы данных;
✔️ Работаете сами на себя;
✔️ Учавствуете в госзакупках
✔️ выходите на зарубежные рынки
✔️ привлекаете инвестиции
✔️ Изобретаете, продаете, покупаете.
Неважно…

То рано или поздно вашу идею и разработки могут просто украсть 🏴‍☠️ пираты или конкуренты!

Поэтому так важно:

✅регистрировать товарный знак;
✅регистрировать фирменный стиль;
✅депонировать свои продукты и разработки.

☝🏻Как все это сделать? 🫠

Подписаться на канал БРРРЕНДЫ и быть в безопасности 👉 https://t.me/brrrands
492
CodeRoll | Frontend

24 Nov, 19:39

🎨 Дизайн-системы: Создание масштабируемых UI-компонентов

🎨 Дизайн-система — это набор повторно используемых компонентов и стандартов, которые помогают поддерживать единообразие и качество пользовательского интерфейса на протяжении всего проекта.
Преимущества использования дизайн-систем:

1) Консистентность
Использование единого стиля и компонентов улучшает восприятие бренда и упрощает разработку.

2) Масштабируемость
Дизайн-системы позволяют легко добавлять новые элементы и поддерживать большие проекты.
3)Ускорение разработки

Готовые компоненты и шаблоны сокращают время разработки и тестирования.

Как создать дизайн-систему?

Определите основные элементы
Начните с типографики, цветовой палитры, сетки и базовых компонентов (кнопки, формы и т.д.).

Создайте библиотеку компонентов
Используйте инструменты, такие как Storybook или Figma, для документирования и визуализации компонентов.

Интегрируйте в проект
Реализуйте компоненты в коде с использованием React или других фреймворков, сохраняя их универсальность и настраиваемость.


💡 Полезные ресурсы:
Storybook Documentation
Atomic Design by Brad Frost


Создание дизайн-системы позволяет обеспечить качество и масштабируемость интерфейсов на всех уровнях разработки. Это важный шаг для профессиональной работы над крупными проектами.
599
CodeRoll | Frontend

19 Nov, 13:23

Hero Patterns

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

👀Посмотреть поближе

#front
1,026
CodeRoll | Frontend

18 Nov, 13:44

Вопрос с собеседования:

❓Что такое инкапсуляция?

Инкапсуляция - это механизм, который объединяет данные и методы, манипулирующие этими данными, и защищает и то и другое от внешнего вмешательства или неправильного использования. Когда методы и данные объединяются таким способом, создается объект.

Почитать подробнее на Хабре

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#web
975
CodeRoll | Frontend

17 Nov, 14:32

date-fns — удобная JS-библиотека для работы с датами

Легковесная библиотека для работы с датами и временем в JavaScript. Она позволяет обрабатывать даты без лишних зависимостей и сложностей, как в других библиотеках (например, Moment.js).

В чём удобство библиотеки:
✅Она легкая — модульная структура: импортируешь только нужные функции.
✅Современная — работает с нативными объектами Date.
✅Мощная — более 200 функций для форматирования, парсинга, вычислений, локализации и других операций с датами.
✅Поддержка таймзон — через дополнение date-fns-tz.

Подойдёт, когда нужно быстро работать с датами и важна производительность и модульность

👀 Посмотреть поближе

#js
958
CodeRoll | Frontend

15 Nov, 12:59

👨‍💻 Tabler Icons — легковесные иконки для ваших проектов

Набор из более чем 4300 современных SVG-иконок с минималистичным дизайном. Они быстро загружаются, легко настраиваются по размеру, цвету и толщине линий, что делает их отличным выбором для использования в React, Vue и других фреймворках. Набор полностью бесплатный и подходит для коммерческих проектов. Благодаря Tabler Icons интерфейс становится более профессиональным, а интеграция занимает всего несколько минут.

👀 Посмотреть иконки

#web
848
CodeRoll | Frontend

14 Nov, 15:01

💻 Ты еще не в курсе последних IT-трендов? 🤯
Скорее всего, твои конкуренты уже внедряют новые фишки в проекты!

🚀 Эксклюзив в мире фронтенда, инсайды из мира технологий, лайфхаки для разработчиков – всё это уже ждёт тебя в моём блоге.
Не пропусти – будь впереди всех! 👀

🌐 Подписывайся прямо сейчас и прокачай свои навыки быстрее, чем другие напишут console.log('hello world')!

➡️ Перейти в канал ⬅️
420
CodeRoll | Frontend

14 Nov, 11:34

Вопрос с собеседования:

❓Что такое архитектурный паттерн MVP?

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

Признаки презентера:
Двухсторонняя коммуникация с представлением;
Представление взаимодействует напрямую с презентером, путем вызова соответствующих функций или событий экземпляра презентера;
Презентер взаимодействует с View путем использования специального интерфейса, реализованного представлением;
Один экземпляр презентера связан с одним отображением.

Подробнее — раз, два, три, четыре

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#web
897
CodeRoll | Frontend

13 Nov, 11:59

Браузер для фронтенд-разработчиков

Polypane позволяет одновременно просматривать сайт на разных экранах, тестировать доступность и контрастность, синхронизировать скроллинг и клики между всеми экранами, поддерживает hot-reload для фреймворков вроде React и Vue, а также предоставляет данные по SEO и производительности.

👀 Потыкать браузер

#web
995
CodeRoll | Frontend

11 Nov, 14:29

Вопрос с собеседования:

❓Расскажите про тег keygen

Используется для генерации пары ключей — закрытого и открытого. Когда форма отправляется на сервер, закрытый ключ сохраняется на локальном компьютере, а открытый ключ передается вместе с формой. Сами ключи необходимы для шифрования и расшифровки данных, создания и проверки цифровой подписи.

Подробнее — раз, два

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#web
1,199
CodeRoll | Frontend

11 Nov, 07:04

Успей ухватить 7 дней бесплатного обучения фронтенд-разработке!

🔥 С нас обучение, практика и помощь с выходом на фриланс. 

💻 Чем ты займешься:

1. Верстка с нуля
Освоишь HTML и CSS, создашь свой первый лендинг и полноценный веб-сайт.

2. JavaScript и интерактивность
Оживишь сайт с помощью JavaScript, а затем поработаешь с Angular и TypeScript.

3. Продакшен и хостинг
Подключишь Backend и выложишь сайт в интернет.

4. Адаптивность
Сделаешь адаптивную верстку, чтобы сайт выглядел отлично на любом устройстве.

🔥 На каждом этапе тебя поддержит куратор и поможет с заданиями.

 Для кого подходит интенсив? 

- Тем, кто хочет попрактиковаться в вёрстке сайтов
- Тем, кто хочет стабильно и уверенно зарабатывать на вёрстке сайтов
- Тем, кто хочет в IT, но не знает, с чего начать

👉 Проскочить на интенсив бесплатно
649
CodeRoll | Frontend

09 Nov, 11:10

6 инструментов, которые облегчают работу веб-разработчику

BundlePhobia
Быстро оценивайте размер npm-пакетов, прежде чем добавлять их в проект. Поможет избежать перегрузки приложения лишними зависимостями и держать его быстрым.
👉 https://bundlephobia.com

Polypane
Браузер для веб-разработчиков с поддержкой всех экранов и устройств в одном окне. Отлично подходит для тестирования адаптивности и доступности.
👉 https://polypane.app

CSS Grid Generator
Легкий способ создать сложные макеты на CSS Grid за пару минут. Просто укажите нужное количество строк и столбцов — и код готов!
👉 https://cssgrid-generator.netlify.app

CodeSandbox
Онлайн-редактор для быстрого прототипирования на React, Vue, Angular и других фреймворках. Удобно для тестирования компонентов и мелких проектов.
👉 https://codesandbox.io

Sizzy
Браузер, заточенный под тестирование на множестве устройств одновременно. Идеален для кроссбраузерной проверки, поддерживает отладку и сразу показывает, как страница выглядит на разных экранах.
👉 https://sizzy.co

Can I Use
Быстро проверяйте поддержку фич HTML, CSS и JavaScript в разных браузерах. Прекрасный способ убедиться, что ваш код работает везде.
👉 https://caniuse.com

Каждый из этих инструментов экономит время и помогает создавать более качественные и производительные веб-приложения👨‍💻

#web
1,197
CodeRoll | Frontend

08 Nov, 11:08

Вопрос с собеседования:

❓Что такое HTTPS?

HTTPS (HyperText Transfer Protocol Secure) — расширение протокола HTTP для поддержки шифрования в целях повышения безопасности. Данные в протоколе HTTPS передаются поверх криптографических протоколов SSL или TLS. В отличие от HTTP с TCP-портом 80, для HTTPS по умолчанию используется TCP-порт 443

Почитать подробнее

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#web
1,076
CodeRoll | Frontend

07 Nov, 11:44

Чистый код: фундаментальное руководство по JavaScript

Статья о принципах чистого кода с 10 примерами кода JS и TS, которые иллюстрируют принципы

👀 Посмотреть, почитать

#js
1,134
CodeRoll | Frontend

06 Nov, 11:35

choose the plan

#hehe
1,106
CodeRoll | Frontend

05 Nov, 09:16

Вопрос с собеседования:

❓Что такое canvas в HTML 5?

Это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой (и не очень) анимации. Изображения в правой части статьи являются примерами использования , примеры их создания приводятся в этой статье.
Статья

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#html
1,025
CodeRoll | Frontend

04 Nov, 11:34

Продвинутые концепции языка JavaScript и ООП [2023]

Этот продвинутый курс по JavaScript охватывает ООП, асинхронность, Event Loop, модульность, структуры данных и сборку. Он требует базовых знаний JS, HTML и CSS.

👀 Глянуть курс

#js
1,126
CodeRoll | Frontend

02 Nov, 18:16

Вопрос с собеседования:

❓Как можно оптимизировать загрузку внешних ресурсов на странице?

— Уменьшите количество HTTP-запросов
— Используйте поддомены для параллельного скачивания
— Используйте кэш браузера
— Используйте CDN для загрузки популярных JavaScript библиотек
— Используйте Gzip-сжатие

Почитать подробнее

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#web
1,141
CodeRoll | Frontend

02 Nov, 08:55

Вопрос с собеседования:

❓Что такое Virtual DOM? Как он работает?

Virtual DOM - это абстракция HTML DOM, которая выборочно отображает поддеревья узлов на основе изменений состояния. Он обеспечивает минимальное количество манипуляций с DOM, чтобы поддерживать ваши компоненты в актуальном состоянии.

Подробнее по теме: раз, два, три

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#web
1,034
CodeRoll | Frontend

01 Nov, 09:32

CSS Diner 🍽️

Для тренировки селекторов CSS идеален CSS Diner! Игра помогает разобраться в основах селекторов и понять, как выбирать элементы в DOM.

👀 Посмотреть или поиграть

#css
1,051
CodeRoll | Frontend

31 Oct, 10:33

Вопрос с собеседования:

❓Что такое DOM?

Объектная Модель Документа (DOM) является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания. DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, она связывает веб -страницы со скриптами или языками программирования.

DOM (Document Object Model — «объектная модель документа») — это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#web
1,080
CodeRoll | Frontend

30 Oct, 11:53

JavaScript 30 📆

Челлендж на 30 дней, где каждый день вы будете создавать небольшой проект, каждый из которых поможет отточить какой-то конкретный аспект JS.

Задания подойдут и для опытных, и для новичков

👀 Начать челлендж

#js
1,171
CodeRoll | Frontend

29 Oct, 13:03

Основы TypeScript

TypeScript — это надстройка над JavaScript с поддержкой статической типизации, которая помогает сократить количество ошибок и повысить качество кода. В книге Адама Фримена «Основы TypeScript» (третье издание) подробно разобраны все возможности TypeScript 5, включая новые функции, такие как декораторы.

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

👀 Почитать книжку

#ts
996
CodeRoll | Frontend

28 Oct, 10:07

Вопрос с собеседования:

❓Что такое категории контента в HTML5, cколько их, расскажите о них

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

Существует три типа категорий контента:
— Основные категории контента, описывающие общие для многих элементов правила;
— Категории контента для элементов форм, описывающие общие правила для элементов форм;
— Особые категории контента, описывающие редкие категории, актуальные только для нескольких элементов, возможно, лишь в особом контексте.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#html
917
CodeRoll | Frontend

27 Oct, 10:37

Реальное тестовое задание на позицию Junior Frontend Developer (React) от компании Jupiter Soft

❗️ Обратите внимание, что макеты часто дают не только в формате Figma, но и в Adobe XD

Все материалы, что предоставляли для реализации тестового задания лежат тут:

👀 Посмотреть

#js
931
CodeRoll | Frontend

26 Oct, 12:28

Вопрос с собеседования сегодня полегче:

❓Можно ли вложить p в другой такой же p? Можно ли вложить div в p?

Синтаксически div и p внутри p является недопустимым во всех стандартах HTML. Более того, при использовании соответствующего парсера HTML невозможно разместить элемент div внутри p в DOM, потому что открывающий тег div автоматически закрывает элемент p.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#html
926
CodeRoll | Frontend

25 Oct, 09:07

Вопрос с собеседования

❓Знаете ли вы тег dfn и за что он отвечает?

Ответ:
Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Тег dfn применяется для выделения таких терминов при их первом появлении в тексте.

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

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#html
967
CodeRoll | Frontend

24 Oct, 10:37

JavaScript. Рецепты для разработчиков

Зачем решать типовые задачи с нуля? В книге представлены готовые рецепты для JavaScript, примеры кода и советы по настройке среды разработки, работе с мультимедиа, данными и асинхронным кодом. Вы также освоите Node.js и Express для создания приложений.

👀 Почитать книжку

#js
944
CodeRoll | Frontend

23 Oct, 07:57

CodeBasics — портал с бесплатными курсами программирования

Курсы по самым разным направлениям. По фронту есть HTML/CSS, JS, TypeScript. Как пишут авторы, помимо материала на курсе есть тренажёры для отработки навыков

👀 Приступить к курсам

#js #css #html
936
CodeRoll | Frontend

22 Oct, 08:57

MediaElement.js

JavaScript-библиотека для добавления HTML5 видео- и аудиоплеера на сайт.

👀 Посмотреть и забрать себе

#html
875
CodeRoll | Frontend

21 Oct, 08:27

JavaScript с нуля до профи

Книга обучает разработке веб-приложений на JavaScript через теорию и практические проекты, включая проверку данных, асинхронный код и работу с DOM. Включены примеры валидаторов, игр и анимаций, а также краткий курс по HTML и CSS.

👀 Почитать книжку

#js
976
CodeRoll | Frontend

20 Oct, 09:27

Игра-тренажёр по Flexbox

Раз уж вам так понравилась предыдущая игра — держите ещё одну, но уже по флексам. Суть игры — расставить пушки так, чтобы кружочки-злодеи не прошли по карте

👀 Расставить пушки

#css
941
CodeRoll | Frontend

19 Oct, 09:17

Игра-тренажёр по CSS Grid

В Grid Garden вам предстоит следить за своим огородом управлять растениями в саду при помощи CSS Grid, Приятный нетипичный способ изучить важную технологию

👀 Начать тренировку

#css
1,041
CodeRoll | Frontend

18 Oct, 11:47

Сервис с базой вопросов к собесам и квизами по фронтенду

Квизы по JS, React, вопросами по CSS и TypeScript.

👀 Посмотреть-почитать

#frontend
978
CodeRoll | Frontend

17 Oct, 13:07

Пачка новых докладов от спикеров HolyJS

Посмотреть видео

#лекции
903
CodeRoll | Frontend

16 Oct, 10:42

Книга по React

Лучшие практики создания приложений, для чтения не нужны супер-глубокие знания React, хватит HTML/CSS + JS на базовом уровне

👩‍💻 Почитать книжку

#react
1,099
CodeRoll | Frontend

15 Oct, 11:57

Бесплатный онлайн-справочник по HTML (если вдруг у вас с ним проблемы)

Справочник хорош тем, что показывает всё наглядно: не просто «вот тег <a> делает то-то», но и покажет пример использования тега

Перейти к справочнику

#html
1,069
CodeRoll | Frontend

08 Oct, 13:38

React.js: Знакомимся с useReducer, Axios и JSON Server на примере создания инвентарного списка

Независимо от того, как вы относитесь к React, создавать что-либо с его помощью — это настоящее удовольствие, и с этим трудно не согласиться. Поэтому сегодня я решил создать простой инвентарный список, чтобы объяснить несколько мощных концепций, таких как сложное управление состояниями с помощью useReducer.

А также между делом мы создадим мок API сервера с помощью JSON Server, будем использовать axios для вызова API и, наконец, воспользуемся хуком useReducer для управления состоянием.

Ссылка

#react
1,451
CodeRoll | Frontend

08 Oct, 06:22

📘 5 must-read книг по JavaScript

🎯 JavaScript — язык, который постоянно развивается, и чтобы оставаться на гребне волны, важно углублять свои знания. Вот 5 книг, которые обязательно стоит прочитать каждому разработчику:

"You Don't Know JS" (Kyle Simpson) — серия из шести книг, которая глубоко погружается в концепции языка.

"JavaScript: The Good Parts" (Douglas Crockford) — классика, которая научит писать чистый и эффективный код.

"Eloquent JavaScript" (Marijn Haverbeke) — книга, которая поможет новичкам освоить JavaScript, а опытным разработчикам углубить свои знания.

"JavaScript: The Definitive Guide" (David Flanagan) — подробное руководство, которое часто называют "библией JavaScript".

📚 Эти книги помогут вам не только улучшить навыки, но и понять, как работает JavaScript изнутри. Чтение — отличный способ перейти на новый уровень!
1,310
CodeRoll | Frontend

16 Sep, 17:03

Как мы приготовили Feature-Sliced Design

В этой статье расскажу немного о том, как мы знакомились с замечательной архитектурой FSD (Feature-Sliced Design), как мы рефакторили свои проекты под неё. И, самое главное, что из этого вышло. Постараюсь заинтересовать вас, чтобы и вы смело её внедряли в свои проекты. FSD — это, пожалуй, то, чего так не хватало в Frontend-мире.

Ссылка

#react
1,677
CodeRoll | Frontend

16 Sep, 12:02

Кажется, мы стали забывать основы фронтенда

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

В этой статье я перескажу истории с некоторыми техническими деталями и порассуждаю, что делать дальше.

Ссылка

#js
1,504
CodeRoll | Frontend

06 Sep, 08:23

Пояснение к ответу

В функции sayHi мы сначала определяем переменную name с помощью ключевого слова var. Это означает, что name поднимается в начало функции. name будет иметь значение undefined до тех пор, пока выполнение кода не дойдет до строки, где ей присваивается значение John. Мы еще не определили значение name, когда пытаемся вывести ее значение в консоль, поэтому получаем undefined. Переменные, объявленные с помощью ключевых слов let и const, также поднимаются в начало области видимости, но в отличие от переменных, объявленных с помощью var, не инициализируются, т.е. такие переменные поднимаются без значения. Доступ к ним до инициализации невозможен. Это называется временной мертвой зоной. Когда мы пытаемся обратиться к переменным до их определения, JavaScript выбрасывает исключение ReferenceError.
1,784
CodeRoll | Frontend

06 Sep, 08:23 


function sayHi() {
  console.log(name)
  console.log(age)
  var name = "John"
  let age = 30
}

sayHi()
1,463
CodeRoll | Frontend

05 Sep, 14:11

👩‍💻Насколько потолстел JavaScript к 2024 году?

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

И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли?

Ссылка

#js
1,428
CodeRoll | Frontend

04 Sep, 14:43

👩‍💻Вышел Vue 3.5

Сегодня мы рады сообщить о выходе Vue 3.5 "Tengen Toppa Gurren Lagann"!

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

Ссылка

#vue
1,369
CodeRoll | Frontend

02 Sep, 08:59

👩‍💻 CSR, SSG, SSR — про рендеринг приложений на примерах

В статье на примере простого сайта, постараюсь описать три способа рендеринга приложений, раскрыть их плюсы и минусы, и на практических примерах провести сравнение производительности и размеров приложения. Материал больше подойдёт начинающим фронтенд-разработчикам, или тем, кто хочет познакомиться c CSR, SSG и SSR. Для лучшего понимания от вас потребуются начальные знания React, менеджеров пакетов npm или yarn.

Ссылка

#ssr
1,348
CodeRoll | Frontend

01 Sep, 11:49

🎨 Дизайн-системы: Создание масштабируемых UI-компонентов

🎨 Дизайн-система — это набор повторно используемых компонентов и стандартов, которые помогают поддерживать единообразие и качество пользовательского интерфейса на протяжении всего проекта.
Преимущества использования дизайн-систем:

1) Консистентность
Использование единого стиля и компонентов улучшает восприятие бренда и упрощает разработку.

2) Масштабируемость
Дизайн-системы позволяют легко добавлять новые элементы и поддерживать большие проекты.
3)Ускорение разработки

Готовые компоненты и шаблоны сокращают время разработки и тестирования.

Как создать дизайн-систему?

Определите основные элементы
Начните с типографики, цветовой палитры, сетки и базовых компонентов (кнопки, формы и т.д.).

Создайте библиотеку компонентов
Используйте инструменты, такие как Storybook или Figma, для документирования и визуализации компонентов.

Интегрируйте в проект
Реализуйте компоненты в коде с использованием React или других фреймворков, сохраняя их универсальность и настраиваемость.


💡 Полезные ресурсы:
Storybook Documentation
Atomic Design by Brad Frost


Создание дизайн-системы позволяет обеспечить качество и масштабируемость интерфейсов на всех уровнях разработки. Это важный шаг для профессиональной работы над крупными проектами.
1,183
CodeRoll | Frontend

31 Aug, 12:01

🚀 Введение в Server-Side Rendering (SSR) с Next.js

⚡️ Server-Side Rendering (SSR) — это процесс рендеринга страниц на сервере, что позволяет значительно улучшить SEO и ускорить время загрузки первой страницы.

Почему стоит использовать SSR?
- SEO: Поисковые системы лучше индексируют страницы с SSR.
- Быстрый первый рендер: Контент отображается быстрее, особенно на медленных устройствах.
- Предварительный рендеринг: Возможность рендерить страницы заранее и кэшировать их.

Как использовать SSR с Next.js?
Next.js — это популярный фреймворк для React, который поддерживает SSR "из коробки". Вот простой пример:



import React from 'react';

export async function getServerSideProps() {
  // Запрос данных на сервере
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

function Page({ data }) {
  return <div>{data.title}</div>;
}

export default Page;


Полезные ссылки:

Документация Next.js
SSR vs CSR: Что выбрать?(ru)
950
CodeRoll | Frontend

26 Aug, 07:28

🌐 Введение в WebAssembly (Wasm)

🔍 WebAssembly (Wasm) — это новая технология, которая позволяет выполнять код в браузере на скорости близкой к нативной. Это отличное решение для улучшения производительности веб-приложений.

Основные особенности:
Скорость: WebAssembly компилируется в машинный код, что делает выполнение значительно быстрее.

Кросс-платформенность: Работает в любом современном браузере.

Совместимость: Может взаимодействовать с JavaScript, что позволяет использовать его вместе с существующим кодом.

💡 Ресурсы:
Официальный сайт WebAssembly
Документация MDN
1,222
CodeRoll | Frontend

25 Aug, 07:13

🎨 Дизайн для доступности: основные принципы и инструменты

♿️ Доступность (Accessibility) — важный аспект веб-дизайна, обеспечивающий удобный доступ к вашему контенту для людей с ограниченными возможностями. Вот основные принципы и инструменты для улучшения доступности:

🔑 Основные принципы:

Семантическая разметка
Используйте правильные HTML-теги (<header>, <nav>, <main>, <footer>) для лучшего восприятия вашего контента скрин-ридерами.

Контраст и читаемость
Убедитесь, что текст хорошо читаем на фоне (достаточный контраст) и используйте большие шрифты.

Альтернативный текст для изображений
Добавляйте описания (alt атрибут) к изображениям, чтобы пользователи, использующие скрин-ридеры, могли понять, что на них изображено.

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

Фокусировка
Управляйте фокусом на элементах формы и интерактивных компонентах, чтобы пользователи с ограниченными возможностями могли легко перемещаться по вашему приложению.

🔧 Полезные инструменты:
WAVE — онлайн-инструмент для проверки доступности веб-страниц.
axe — расширение для браузеров, которое помогает находить и исправлять проблемы с доступностью.
Color Contrast Checker — инструмент для проверки контраста текста и фона.

🛠 Интеграция принципов доступности в ваши проекты сделает их более инклюзивными и удобными для всех пользователей.
1,285
CodeRoll | Frontend

24 Aug, 07:09

🔍 Дебаггинг в React — лучшие практики

🛠 Дебаггинг в React может быть сложной задачей, особенно когда приложение становится большим и сложным. Вот несколько лучших практик, которые помогут вам быстрее находить и устранять баги:

React Developer Tools
🔧 Используйте официальное расширение для браузера, чтобы исследовать дерево компонентов, следить за состоянием и пропсами.

Логгирование состояния и пропсов
📝 Используйте console.log, чтобы отслеживать состояние и пропсы. Можно подключить более продвинутые инструменты, такие как redux-logger.

Использование Error Boundaries
🚧 Создайте компоненты Error Boundary, чтобы отлавливать ошибки на уровне компонентов и предотвращать падение всего приложения.

Профилирование производительности
⚡️ Используйте встроенный профайлер React, чтобы понять, какие компоненты занимают больше всего времени при рендеринге.

Storybook
📚 Storybook помогает изолировать и тестировать компоненты вне контекста приложения. Отличный способ проверить логику и дизайн отдельных компонентов.

⚠️ Совет: Всегда разбивайте большой компонент на более мелкие части. Это не только упрощает поддержку, но и облегчает дебаггинг!
991

2025 All Right Reserved

Disclaimer: The content displayed on this website is solely provided by the respective Telegram channels. We hold no ownership or responsibility for the content shared by these channels.