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

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

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

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
Deno — это новый инструмент для работы с JavaScript и TypeScript от создателя Node.js

Deno позиционируется как безопасная альтернатива Node.js с улучшенными возможностями для работы с модулями и встроенным TypeScript. Имеет улучшенную безопасность благодаря контролю за доступом к файлам, сети и процессам.

👀 Читать доку

Coderoll | Frontend
👍21🔥1
Alpine.js — легковесный фреймворк с удобным синтаксисом

Он идеально подходит для добавления динамичного поведения на страницы без необходимости в большом фреймворке, таком как Vue или React.

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

Coderoll | Frontend
🔥2
Flexbox Froggy

Игра про лягушек, где ты управляешь их положением на экране с помощью свойств justify-content, align-items и др. Простая, но гениальная.

👀 Прокачать свой flexbox

Coderoll | Frontend
👍4
Valibot — минималистичная альтернатива Yup и Zod

Valibot — быстрая и легкая библиотека для валидации и преобразования данных. Работает с TypeScript и предоставляет простой API, который делает валидацию читаемой и производительной. Особенно актуальна в новых проектах, где важна производительность.

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

Coderoll | Frontend
Чистая архитектура фронтенда 

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

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

👀 Читать

Coderoll | Frontend
👍1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Взять то взял, а будут ли они сделаны это уже совсем другая история...

Coderoll | Frontend
😁1
Что такое слоистая архитектура (Layered Architecture) и зачем она нужна во фронтенде?

Слоистая архитектура — это подход, при котором код разделяется на логические слои, каждый из которых отвечает за свою зону ответственности. Обычно это: UI слой (компоненты), слой бизнес-логики, слой работы с API и слой хранилища данных.

Такой подход помогает:
1) изолировать ответственность каждого слоя;
2) улучшить читаемость и поддержку кода;
3) упростить тестирование;
4)снизить связность и повысить масштабируемость.

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

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

Coderoll | Frontend
💅31
Jotai — атомарный state management для React

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

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

Coderoll | Frontend
2🔥1
📚 Доступность во фронте

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

👀 Читать статью

Coderoll | Frontend
👍31🔥1
Что такое Lazy Loading?

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

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

Coderoll | Frontend
5💅3
Что выведет этот код?

Coderoll | Frontend
👍53
Что такое Object.freeze()?

Ответ:
Object.freeze() делает объект неизменяемым (immutable). После вызова этого метода нельзя добавить, удалить или изменить свойства объекта.

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

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

Coderoll | Frontend
👍3🔥2
Что такое Proxy в JavaScript?

Ответ:
Proxy — это объект, который позволяет перехватывать операции (например, чтение свойств, установку значений, вызов функций) над другим объектом. Это используется для мониторинга, валидации или изменения поведения объекта.

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

Coderoll | Frontend
💅104
Chart.js — визуализация данных

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

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

Coderoll | Frontend
Как работает метод filter?

Ответ:
Метод filter создаёт новый массив, содержащий все элементы исходного массива, для которых callback-функция возвращает true. Исходный массив не изменяется.

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

Coderoll | Frontend
10💅3
Zod – валидация данных без боли

Если тебе надо валидировать данные в формах, API или везде, где есть объекты – Zod твой лучший друг. Минимальный код, строгая типизация, удобный API. Особенно полезен в TypeScript-проектах.

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

Coderoll | Frontend
Какими способами можно визуально скрыть элемент?

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

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

Coderoll | Frontend
11💅3
Что такое JSON.parse() и JSON.stringify()?

Ответ:
JSON.parse() преобразует JSON-строку в JavaScript-объект или массив.
JSON.stringify() преобразует JavaScript-объект или массив в JSON-строку.

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

Coderoll | Frontend
9💅2
Вопрос с FrontEnd-собеседования 👨‍💻

Опишите шаблон проектирования "Модуль" в Javascript


Как лучше ответить:

Модули JavaScript являются наиболее часто используемыми шаблонами проектирования для сохранения отдельных фрагментов кода независимыми от других компонентов. Это обеспечивает хорошую структурированность кода.

Модули должны быть функциями, вызываемыми прямо на месте (IIFE, Immediately-Invoked-Function-Expressions), чтобы обеспечить приватные области действия, то есть замыкание, которое защищает переменные и методы. Вот как примерно это может выглядеть:


(function() {
// declare private variables and/or functions
return {
// declare public variables and/or functions
}
})();

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

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥21
DevDocs

Универсальная платформа с документацией по различным технологиям (JS, Vue, React, CSS и другим).

Все документации в одном месте без необходимости гуглить.

👀 Ссылка

Coderoll | Frontend
3