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
SOLID — это аббревиатура пяти основных принципов проектирования в объектно-ориентированном программировании — Single responsibility, Open-closed, Liskov substitution, Interface segregation и Dependency inversion.

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

В статье даются практические примеры принципов SOLID в JavaScript.

Ссылка на статью

#js
Channel name was changed to «CodeRoll | Frontend»
Какое значение примет result?
Anonymous Quiz
63%
1
4%
0
29%
NaN
4%
undefined
Мы живем в эпоху своего рода CSS-ренессанса: новые возможности, техники, эксперименты и идеи сыплются на нас в таком количестве, какого мы не видели со времен CSS3.

В то время как сложность CSS кажется постоянной дискуссией, Джефф Грэм рассматривает способы, которыми современный CSS в 2023 году фактически сделал CSS проще в написании.

Подробнее о способах упростить CSS читайте в статье.

Ссылка

#css
Чистая архитектура фронтенда

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

В этой статье речь пойдет об архитектуре фронтенда, проектирование которой подчиняется множеству принципов, в том числе SOLID, KISS, DRY и DDD.

Ссылка

#статьи
Что будет в консоли?

function sayHi() {
console.log(name);
console.log(age);
var name = "Lydia";
let age = 21;
}

sayHi();
Сборка мусора в JavaScript

Каждый из нас, хотя бы раз, слышал о сборке мусора. Мы знаем, что где-то там работает сборщик мусора, убирая за нами ненужные объекты. Но сколько из нас знают, как он устроен под капотом?

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

Поехали убираться!

Ссылка

#js
Усиливаем TypeScript с помощью switch + notReachable

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

Ссылка

#js
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1);
}

for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1);
}
Что будет в консоли ?
Anonymous Quiz
36%
0 1 2 и 0 1 2
12%
0 1 2 и 3 3 3
51%
3 3 3 и 0 1 2
WebTransport API — это интерфейс/механизм передачи данных между клиентом и сервером с помощью протокола HTTP/3.

На днях я прочитал статью о WebTransport API как будущей альтернативе или даже замене WebSockets. Мне стало интересно, что это такое и с чем его едят. Давайте разбираться вместе.


Ссылка

#utils
Обработка ошибок в Js

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


Ссылка

#js
const shape = {
radius: 10,
diameter() {
return this.radius * 2;
},
perimeter: () => 2 * Math.PI * this.radius
};

console.log(shape.diameter());
console.log(shape.perimeter());
Что будет в консоли ?
Anonymous Quiz
47%
20 и 62.83185307179586
43%
20 и NaN
6%
20 и 63
4%
Nan и 63
All About Cookies

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

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

Ссылка

#js
Что такое генераторы статических сайтов и почему Astro — лучший фреймворк для разработки лендингов

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

Ссылка

#framework
+true;
!'Lydia';
Что будет в консоли ?
Anonymous Quiz
80%
1 и false
5%
false и NaN
15%
false и false
👩‍💻Как использовать html-элемент <dialog>?

В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().

Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.

Ссылка

#html