Вже доступно! Дослідження Telegram за 2025 — головні інсайти року 
CodeRoll | Frontend
Відкрити в Telegram
OZ — Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги — Веб-разработка на JS, HTML, CSS, React, Vue,Angular Купить рекламу: https://telega.in/c/coderoll Чат: https://t.me/coderoll_chat По всем вопросам пишите сюда - @yankovsky_ads
Показати більше4 235
Підписники
+124 години
-57 днів
-4930 день
Архів дописів
4 235
Пояснение к предыдущему посту
Object.entries (person) возвращает массив вложенных массивов, содержащий ключи и объекты:
[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]
Используя цикл for-of, мы можем перебирать каждый элемент массива, в данном случае подмассивы. Мы можем мгновенно деструктурировать подмассивы в цикле for, используя const [x, y]. x равен первому элементу в подмассиве, y равен второму элементу в подмассиве.
Первым подмассивом является [ "name", "Lydia" ], где x равно "name", и y равно "Lydia", которые выводятся в лог. Вторым подмассивом является [ "age", 21 ], где x равно "age", и y равно 21, которые выводятся в лог.
4 235
const person = {
name: 'Lydia',
age: 21
}
for (const [x, y] of Object.entries(person)) {
console.log(x, y)
}4 235
Анализируем виды тестов для Frontend
С развитием веба сайты превратились в сложные приложения, которыми ежедневно пользуются десятки и сотни миллионов людей: почта, облачные хранилища, соцсети, маркетплейсы, стриминговые платформы и т. д. И каждое из них должно работать корректно. Как это сделать? Конечно писать хороший код, а потом и тестировать его. Хотя кто‑то обходится без тестов, тем не менее тестирование — важная часть инженерных практик наравне с мониторингом. Оно помогает нам заблаговременно находить и исправлять баги (или незапланированные фичи) в приложениях. Основная цель тестирования — получить гарантию корректной работы любого ПО .
Ссылка
#статьи
4 235
Пояснение к предыдущему посту
Обычные функции, такие как функция giveLydiaPizza, имеют свойство prototype, которое является объектом (прототипом объекта) со свойством constructor. Однако функции со стрелками, такие как функция giveLydiaChocolate, не имеют этого свойства prototype. undefined возвращается при попытке доступа к свойству prototype с использованием giveLydiaChocolate.prototype.
4 235
function giveLydiaPizza() {
return 'Here is pizza!'
}
const giveLydiaChocolate = () =>
"Here's chocolate... now go hit the gym already."
console.log(giveLydiaPizza.prototype)
console.log(giveLydiaChocolate.prototype)4 235
React: полное руководство по повторному рендерингу
Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React:
- первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
- ререндеринг — второй и последующие рендеринги компонента.
Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.
Ссылка
#react
4 235
class Person {
constructor(name) {
this.name = name
}
}
const member = new Person('John')
console.log(typeof member)4 235
React + TypeScript: необходимый минимум
Преимущества изучения TS могут быть сведены к следующему:
- ваши шансы получить более высокооплачиваемую работу сильно увеличатся;
- в вашем коде будет намного меньше багов, его будет легче читать и поддерживать;
- рефакторить код и обновлять зависимости станет гораздо проще.
Эта статья представляет собой минимальное введение по использованию TS в React.
Ссылка
#react
4 235
Пояснение к предыдущему посту
С синтаксисом import * as name мы импортируем все exports из файла module.js в файл index.js, тогда и создается новый объект с именем data. В файле module.js есть два экспорта: экспорт по умолчанию и именованный экспорт. Экспорт по умолчанию - это функция, которая возвращает строку "Hello World", а именованный экспорт - это переменная с именем name, которая имеет значение строки "Lydia".
Объект data имеет свойство default для экспорта по умолчанию, другие свойства имеют имена именованных экспортов и их соответствующие значения.
4 235
// module.js
export default () => 'Hello world'
export const name = 'Lydia'
// index.js
import * as data from './module'
console.log(data)4 235
App Router и Pages Router: что изменилось в Next.js
Как могут заметить разработчики, фреймворк Next очень активно развивается. Так, некоторое время назад в 13 версии появилась новая парадигма (модель) для создания приложений — app router, которая должна прийти на смену старой pages router.
В этой статье мы постараемся наглядно продемонстрировать и рассказать, что же поменялось в работе приложения с появлением app router, какие изменения произошли в сравнении с pages router, что нового успели добавить разработчики, а от чего они отказались.
Ссылка
#статьи
4 235
Как стать frontend разработчиком с 0 до первой работы в IT
Знакомим вас с Сергеем Дмитриевским - ведущим программистом и экспертом по frontend разработке.
✅ 12 лет в IT, прошел путь с нуля до тимлида в бигтехе
✅ Автор популярного ютуб канала про IT и программирование (62 000 подписчиков)
✅ Посетил 5 стран за последний год: Тайланд, Вьетнам, Малайзия, Казахстан, ОАЭ
На своем телеграм канале Сергей делиться полезными материалами для новичков по frontend, личным опытом карьеры в IT с нуля до тимлида в бигтехе.
🎁 В закрепленном сообщении в канале Сергея вы найдете пошаговый roadmap "Как стать frontend разработчиком с нуля" и другие полезные материалы.
Переходите и подписывайтесь на канал 👇🏻
https://t.me/+a1T0GQSWJXU3YTky
erid: LjN8K9T7o
4 235
Создание сайтов через нейросети
Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.
Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.
Ссылка
#статьи
4 235
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем 16 февраля.
4 235
Пояснение к предыдущему посту
Вы можете установить значение параметра по умолчанию равным другому параметру функции, если они были определены до параметров по умолчанию. Мы передаем значение 10 в функцию sum. Если функция sum принимает только один аргумент, это означает, что значение для num2 не передано, и в этом случае значение num1 равно переданному значению 10. Значением по умолчанию num2 является значение num1, которое равно 10. num1 + num2 возвращает 20.
Если вы пытаетесь установить значение параметра по умолчанию равным параметру, который определен после (справа), то значение параметра еще не было инициализировано; это приведет к ошибке.
