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

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

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

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
Современный JavaScript. От новичка до профи [2024]

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

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

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

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Разбираем 5 способов ускорить сайт: от простого к сложному

Каждая миллисекунда важна! В этой статье разбираются топовые способы оптимизации загрузки страницы

👀 Читать

Coderoll | Frontend
Что такое Virtual DOM?

Virtual DOM – это концепция, используемая в React и других библиотеках для эффективного обновления пользовательского интерфейса. Вместо прямых изменений в реальном DOM, React сначала обновляет виртуальную копию, сравнивает изменения (diffing), а затем минимально обновляет реальный DOM.

Virtual DOM делает обновления производительнее, так как минимизирует количество реальных манипуляций с DOM.

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

Coderoll | Frontend
Тесты и задачи по HTML, CSS и JS

Эти тесты подойдут вам, если вы уже знаете основы HTML, CSS, JavaScript и хотите проверить свои знания, закрепив ранее изученные материалы.

Вы также узнаете много нового: нюансы, тонкости, особенности, интересные возможности о которых могли не знать раньше.

👀 Проверить знания

Coderoll | Frontend
Что такое промисы (Promises) в JavaScript?

Ответ:
Промисы — это объект, представляющий результат асинхронной операции. У промиса есть три состояния: pending (ожидание), fulfilled (успех) и rejected (ошибка). Они позволяют работать с асинхронным кодом без использования коллбэков.

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

Coderoll | Frontend
TanStack Query – must-have для работы с API

Библиотека, которая делает работу с серверными данными в React и Vue в разы проще. Кэширование, рефетчинг, автоматические обновления – все на высшем уровне. Забудь про useEffect и стейты для загрузки данных!

👀 Попробовать

Coderoll | Frontend
Что такое Event Delegation?

Ответ:
Event Delegation — это техника, при которой обработчик события назначается родительскому элементу, а не каждому дочернему элементу. Это позволяет обрабатывать события для элементов, которые могут быть добавлены в DOM после загрузки страницы.

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

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡️В чём разница между cookie, sessionStorage и localStorage?

Ответ:
Сookies — наиболее защищенный способ хранения данных в браузере. К информации, хранящейся в cookies, можно получить доступ как с бэкенда на сервере, так и в браузере, они отправляются с HTTP-запросами. Максимальный размер — 4 Кб.

LocalStorage и sessionStorage предназначены для хранения данных на клиенте, их нельзя прочитать с сервера. Они не подходят для хранения конфиденциальных данных. Размер localStorage и sessionStorage около 5 Мб, в зависимости от браузера. Данные в localStorage хранятся постоянно, пока не почистят cookies, а в sessionStorage — в течение одной пользовательской сессии, то есть пока пользователь не закроет вкладку браузера.


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

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡️Какими способами можно визуально скрыть элемент?

Ответ:
с помощью свойства display;
с помощью свойства opacity;
с помощью свойства visibility;
с помощью position:absolute;
уменьшить размеры элемента до нуля.


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

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Игровой тренжёр по TypeScript

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

Да, сервис доступен на русском и английском, визуал тоже кайфовый

👀Попробовать

Coderoll | Frontend #typescript
Please open Telegram to view this post
VIEW IN TELEGRAM
Чем useEffect отличается от useLayoutEffect в React?

useEffect выполняется асинхронно, после рендера компонента.

useLayoutEffect выполняется синхронно сразу после рендера, но перед отрисовкой на экране.

Используйте useLayoutEffect , если вам нужно сделать вычисления до отрисовки (например, измерить размер элемента перед его рендерингом).

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

Coderoll | Frontend
VueUse – коллекция полезных хуков для Vue 3

Это набор готовых реактивных утилит, которые упрощают разработку на Vue.

🔥 Что есть полезного?
✔️ useMouse() – отслеживание движения мыши
✔️ useDark() – автоматическая смена темы
✔️ useFetch() – удобный API-запрос с кешированием

👀 Попробовать

Coderoll | Frontend
Unocss – ультрабыстрый CSS-фреймворк

Если ты используешь Tailwind, попробуй UnoCSS – он еще быстрее и гибче! Поддерживает динамические классы, работу с темами и минимальный размер бандла.

🔥 Почему стоит попробовать?
✔️ Генерирует только используемые стили
✔️ Гибкость и мощные пресеты
✔️ Лучшая производительность по сравнению с Tailwind

👀 Попробовать

Coderoll | Frontend
Что такое Higher-Order Function?

Ответ:
Higher-Order Function — это функция, которая принимает другие функции в качестве аргументов или возвращает функцию в качестве результата. Примеры встроенных higher-order функций в JavaScript: map, filter, reduce.

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

Coderoll | Frontend
Классная шпаргалка для методов строк

Coderoll | Frontend
5 игр-тренажеров для прокачки фронтенда 🎮

Осваивать технологии легче в игровой форме. Парочка игр уже были в предыдущих постах — а вот ещё дополнение к ним:

Flexbox Froggy 🐸
Если хотите прокачать Flexbox, попробуйте сыграть за лягушек и расположить их по нужным местам на пруду. Отличная практика на flex-direction, justify-content и другие свойства!
🔗 https://flexboxfroggy.com/

Grid Garden 🌱
А вот тренажёр для CSS Grid: расставляем грядки, используя grid-template-columns, grid-area и другие свойства. Отличный способ освоить сетки в CSS.
🔗 https://cssgridgarden.com/

CSS Diner 🍽️
Для тренировки селекторов CSS идеален CSS Diner! Игра помогает разобраться в основах селекторов и понять, как выбирать элементы в DOM.
🔗 https://flukeout.github.io/

CodeCombat ⚔️
Эта игра для тех, кто хочет развить навыки программирования, включая JavaScript. Сражения с монстрами и решения головоломок в игре требуют от вас писать код. Особенно полезно для практики базового JS!
🔗 https://codecombat.com/

JavaScript 30 📆
Не совсем игра, но челлендж, где за 30 дней вы создадите 30 небольших проектов, каждый из которых оттачивает какой-то конкретный аспект JS. Подходит для продвинутых новичков и тех, кто хочет улучшить навыки JS.
🔗 https://javascript30.com/

Coderoll | Frontend | #Тренажёр
Please open Telegram to view this post
VIEW IN TELEGRAM
tRPC

Полноценный инструмент для работы с API без необходимости в REST или GraphQL. Позволяет напрямую вызывать серверные функции из клиента с полной поддержкой TypeScript.

👀 Попробовать

Coderoll | Frontend
Swiper

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

👀 Попробовать

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

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

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


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

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM