Frontend Гладиаторы: Этап 1/4
Турнир полным ходом идет🔥
Смонтирую весь процесс в YouTube. Интересный опыт. Если все оценят, то будем раз в 1-2 месяца проводить такие состязания📌
#frontend
Турнир полным ходом идет
Смонтирую весь процесс в YouTube. Интересный опыт. Если все оценят, то будем раз в 1-2 месяца проводить такие состязания
#frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Паттерн Наблюдатель в JavaScript. Продвинутый Frontend на реальных примерах
В этом видео мы рассмотрим Паттерн Наблюдатель (Observer) в контексте JavaScript и Frontend разработки.
Для проекта Рецептов используем Webpack, JavaScript.
Видео предназначено для разработчиков, желающих повысить свои навыки в продвинутом JavaScript и паттернах проектирования.
Видео уже на канале! Четвертая серия видеокурса
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #patterns #observer #redux
В этом видео мы рассмотрим Паттерн Наблюдатель (Observer) в контексте JavaScript и Frontend разработки.
Для проекта Рецептов используем Webpack, JavaScript.
Видео предназначено для разработчиков, желающих повысить свои навыки в продвинутом JavaScript и паттернах проектирования.
Видео уже на канале! Четвертая серия видеокурса
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #patterns #observer #redux
Инверсия зависимостей в React
Инверсия зависимостей — это принцип проектирования, согласно которому модули высокого уровня не должны зависеть от модулей низкого уровня. Оба типа модулей должны зависеть от абстракций.
В React этот принцип реализуется путем передачи зависимостей компоненту через пропсы или контекст, вместо их непосредственного создания внутри компонента.
Здесь компонент UserList зависит от абстракции userService, а не от конкретной реализации. Это позволяет легко заменять реализацию сервиса, например, для тестирования или при изменении источника данных.
При использовании компонента мы передаем конкретную реализацию сервиса
Таким образом, инверсия зависимостей делает компоненты более гибкими, тестируемыми и менее связанными с конкретными реализациями зависимостей.
#frontend #react #solid
Инверсия зависимостей — это принцип проектирования, согласно которому модули высокого уровня не должны зависеть от модулей низкого уровня. Оба типа модулей должны зависеть от абстракций.
В React этот принцип реализуется путем передачи зависимостей компоненту через пропсы или контекст, вместо их непосредственного создания внутри компонента.
Здесь компонент UserList зависит от абстракции userService, а не от конкретной реализации. Это позволяет легко заменять реализацию сервиса, например, для тестирования или при изменении источника данных.
При использовании компонента мы передаем конкретную реализацию сервиса
Таким образом, инверсия зависимостей делает компоненты более гибкими, тестируемыми и менее связанными с конкретными реализациями зависимостей.
#frontend #react #solid
Forwarded from авось прорвемся (Аня)
Please open Telegram to view this post
VIEW IN TELEGRAM
Reactify | Frontend Разработка pinned «Задайте вопрос на стриме 🤝 https://www.youtube.com/watch?v=KJ6RD9_znf4»
This media is not supported in your browser
VIEW IN TELEGRAM
Вчера провели стрим на 4.5 часа. Тяжко было😅 Старался отвечать на все вопросы😎
Кто-нибудь смотрел стрим?
Кто-нибудь смотрел стрим?
В планах на этой неделе выпустить 2-3 видео в YouTube
📌 Все концепции в React
📌 Все хуки в React
📌 Все виды оптимизаций в React
Какое больше всего хотели бы увидеть?
Какое больше всего хотели бы увидеть?
Please open Telegram to view this post
VIEW IN TELEGRAM
Frontend Гладиаторы: Стань королем Web арены
Наш турнир – это возможность прокачать свои знания в игровой форме, подготовиться к собеседованиям и получить признание среди единомышленников.
Зачем это нужно?
✔️ Подготовка к собеседованиям: Учитесь отвечать на вопросы грамотно и уверенно.
✔️ Прокачка навыков: Получите новые знания и улучшите существующие в игровой форме.
✔️ Борьба со стеснением: Практикуйте формулирование мыслей и уверенное общение.
✔️ Мотивация: Соревнование с другими участниками создаст дополнительный стимул для развития.
✔️ Обучение у других: Смотрите, как отвечают другие участники, и учитесь на их примере.
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #react #web
Наш турнир – это возможность прокачать свои знания в игровой форме, подготовиться к собеседованиям и получить признание среди единомышленников.
Зачем это нужно?
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #react #web
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Руслан Куянец | IT
Моя первая работа была в аутсорс-аутстафф компании, где я был джуном и получал 25 тысяч рублей в месяц, а работал аутстаффом за 350 тысяч рублей в иностранной компании. Представьте, сколько компания заработала на мне. При этом я справлялся с 80% задач. Если возникали сложности, мой наставник помогал мне, и я как будто сам сдавал задачу. Достаточно отлаженный механизм: один наставник и пять джунов, которые пишут задачи на других проектах, а ты за ними следишь и иногда помогаешь. Джуны получают 25 тысяч, а компания – по 200-300 тысяч за аренду. Все всё понимают и всех всё устраивает, ведь задачи закрываются. Накрутка – это частая практика в компаниях.
#interview #work
Please open Telegram to view this post
VIEW IN TELEGRAM
Чтобы не перегружать основной канал размышлениями, я создал новый канал, где мы сможем обсуждать различные темы, болтать о рынке и IT, говорить о трудоустройстве, собеседованиях и YeaHub.
В основном канале постараюсь сфокусироваться на фронтенде. Также планирую запустить YouTube-канал, ведь есть много интересных тем для обсуждения.
https://t.me/ruslan_kuyanets_it
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Руслан Куянец | IT
Ментор:
https://reactify.ru
Frontend сообщество:
https://t.me/reactify_IT
YouTube канал:
https://youtube.com/@reactify-it
Связь:
@ruslan_kuyanets
https://reactify.ru
Frontend сообщество:
https://t.me/reactify_IT
YouTube канал:
https://youtube.com/@reactify-it
Связь:
@ruslan_kuyanets
Вопрос на собеседовании по CSS: Что такое схлопывание отступов? | CSS | Собеседование
В этом видео рассмотрим важную концепцию CSS — схлопывание отступов. Если вы готовитесь к собеседованию на позицию разработчика, понимание этой темы может оказаться ключевым. Я постараюсь на примере объяснить, что такое схлопывание отступов и как его избежать.
https://www.youtube.com/watch?v=s4YTfgj4vOY
#frontend #css
В этом видео рассмотрим важную концепцию CSS — схлопывание отступов. Если вы готовитесь к собеседованию на позицию разработчика, понимание этой темы может оказаться ключевым. Я постараюсь на примере объяснить, что такое схлопывание отступов и как его избежать.
https://www.youtube.com/watch?v=s4YTfgj4vOY
#frontend #css
YouTube
Вопрос на собеседовании по CSS: Что такое схлопывание отступов? | CSS | Собеседование
В этом видео рассмотрим важную концепцию CSS — схлопывание отступов. Если вы готовитесь к собеседованию на позицию разработчика, понимание этой темы может оказаться ключевым. Я постараюсь на примере объяснить, что такое схлопывание отступов и как его избежать.…
JavaScript — это высокоуровневый, интерпретируемый, компилируемый во время выполнения, динамически типизированный, однопоточный, с возможностью асинхронного выполнения, мультипарадигмальный язык программирования, широко используемый для разработки веб-приложений.
Основные характеристики JavaScript:
1. Высокоуровневый: JavaScript обеспечивает абстракцию от аппаратных деталей, предоставляя удобный синтаксис и встроенные функции для работы с данными, манипуляций с DOM и сетевыми запросами.
2. Интерпретируемый: Исторически JavaScript выполнялся интерпретатором, который считывает, анализирует и выполняет код непосредственно во время его выполнения. Однако современные движки JavaScript, такие как V8 от Google, используют Just-In-Time (JIT) компиляцию, что позволяет ускорить выполнение кода.
3. Компилируемый во время выполнения (JIT): Современные JavaScript-движки компилируют код в машинный язык непосредственно перед его выполнением, что позволяет добиться высокой производительности при сохранении гибкости интерпретируемого языка.
4. Динамически типизированный: В JavaScript типы переменных определяются во время выполнения. Переменная может изменять свой тип в процессе работы программы, что обеспечивает гибкость, но может приводить к ошибкам времени выполнения.
5. Однопоточный: JavaScript выполняется в одном потоке, что означает выполнение одной операции в каждый момент времени. Это упрощает модель конкурентного выполнения, но требует использования асинхронных механизмов для обработки долгих операций, чтобы не блокировать основной поток.
6. Асинхронное выполнение: JavaScript поддерживает асинхронное программирование через механизмы колбэков, промисов и async/await, что позволяет эффективно обрабатывать операции ввода-вывода без блокировки основного потока.
7. Мультипарадигмальный: JavaScript поддерживает несколько парадигм программирования, включая императивное, объектно-ориентированное и функциональное программирование.
8. Событийно-ориентированный: JavaScript часто используется для создания событийно-ориентированных программ, где выполнение кода инициируется событиями, такими как клики мыши или сетевые запросы.
9. Встроенный в браузеры: JavaScript является неотъемлемой частью веб-браузеров, обеспечивая динамическое взаимодействие с веб-страницами. Все современные браузеры включают JavaScript-движки для выполнения кода.
#javascript #frontend
Основные характеристики JavaScript:
1. Высокоуровневый: JavaScript обеспечивает абстракцию от аппаратных деталей, предоставляя удобный синтаксис и встроенные функции для работы с данными, манипуляций с DOM и сетевыми запросами.
2. Интерпретируемый: Исторически JavaScript выполнялся интерпретатором, который считывает, анализирует и выполняет код непосредственно во время его выполнения. Однако современные движки JavaScript, такие как V8 от Google, используют Just-In-Time (JIT) компиляцию, что позволяет ускорить выполнение кода.
3. Компилируемый во время выполнения (JIT): Современные JavaScript-движки компилируют код в машинный язык непосредственно перед его выполнением, что позволяет добиться высокой производительности при сохранении гибкости интерпретируемого языка.
4. Динамически типизированный: В JavaScript типы переменных определяются во время выполнения. Переменная может изменять свой тип в процессе работы программы, что обеспечивает гибкость, но может приводить к ошибкам времени выполнения.
5. Однопоточный: JavaScript выполняется в одном потоке, что означает выполнение одной операции в каждый момент времени. Это упрощает модель конкурентного выполнения, но требует использования асинхронных механизмов для обработки долгих операций, чтобы не блокировать основной поток.
6. Асинхронное выполнение: JavaScript поддерживает асинхронное программирование через механизмы колбэков, промисов и async/await, что позволяет эффективно обрабатывать операции ввода-вывода без блокировки основного потока.
7. Мультипарадигмальный: JavaScript поддерживает несколько парадигм программирования, включая императивное, объектно-ориентированное и функциональное программирование.
8. Событийно-ориентированный: JavaScript часто используется для создания событийно-ориентированных программ, где выполнение кода инициируется событиями, такими как клики мыши или сетевые запросы.
9. Встроенный в браузеры: JavaScript является неотъемлемой частью веб-браузеров, обеспечивая динамическое взаимодействие с веб-страницами. Все современные браузеры включают JavaScript-движки для выполнения кода.
#javascript #frontend
REBASE
Чтобы избежать трудоемкого слияния в будущем, многие разработчики периодически делают ребейзинг своей ветки.
Представим, что вы работали над фичей 3 недели. За это время другие разработчики 10 раз сделали слияние. Ваш код отличается на 10 коммитов. В таком случае слияние может стать довольно сложной задачей.
Периодически делайте ребейзинг своей ветки. Это позволит:
- Сохранить актуальную историю коммитов.
- Избежать конфликтов при слиянии.
Как сделать ребейзинг:
1. Перейдите на ветку develop.
2. Обновите ее
3. Перейдите на свою ветку
4. Сделайте ребейс
Ребейзинг может изменить историю коммитов.
Перед ребейзингом рекомендуется сделать резервную копию своей ветки.
Вывод:
Ребейзинг – это простой и эффективный способ избежать проблем при слиянии. Используйте его, чтобы ваша работа с Git была более продуктивной.
#git #rebase
Чтобы избежать трудоемкого слияния в будущем, многие разработчики периодически делают ребейзинг своей ветки.
Представим, что вы работали над фичей 3 недели. За это время другие разработчики 10 раз сделали слияние. Ваш код отличается на 10 коммитов. В таком случае слияние может стать довольно сложной задачей.
Периодически делайте ребейзинг своей ветки. Это позволит:
- Сохранить актуальную историю коммитов.
- Избежать конфликтов при слиянии.
Как сделать ребейзинг:
1. Перейдите на ветку develop.
git checkout develop
2. Обновите ее
git pull
3. Перейдите на свою ветку
git checkout my-branch
4. Сделайте ребейс
git rebase develop
Ребейзинг может изменить историю коммитов.
Перед ребейзингом рекомендуется сделать резервную копию своей ветки.
Вывод:
Ребейзинг – это простой и эффективный способ избежать проблем при слиянии. Используйте его, чтобы ваша работа с Git была более продуктивной.
#git #rebase
Как браузер читает JSX?
Браузер не может напрямую прочитать и понять JSX, так как JSX - это расширение языка JavaScript, которое используется во фреймворке React для создания пользовательского интерфейса. JSX выглядит как комбинация JavaScript и HTML.
Чтобы браузер мог понять JSX, необходимо преобразовать его в обычный JavaScript. Этот процесс называется транспиляцией. Для этого обычно используются специальные инструменты или сборщики (например, Babel), которые преобразуют JSX в эквивалентный JavaScript код.
В примере выше JSX трансформируется в вызов
После транспиляции JSX в JavaScript, браузер может вычитать и исполнять этот JavaScript код для отображения веб-страницы пользователю.
#frontend #react #jsx
Браузер не может напрямую прочитать и понять JSX, так как JSX - это расширение языка JavaScript, которое используется во фреймворке React для создания пользовательского интерфейса. JSX выглядит как комбинация JavaScript и HTML.
Чтобы браузер мог понять JSX, необходимо преобразовать его в обычный JavaScript. Этот процесс называется транспиляцией. Для этого обычно используются специальные инструменты или сборщики (например, Babel), которые преобразуют JSX в эквивалентный JavaScript код.
const element = <h1>Hello, World!</h1>;
const element = React.createElement('h1', null, 'Hello, World!');
В примере выше JSX трансформируется в вызов
React.createElement, который создает элемент с тегом h1 и содержанием "Hello, World!".После транспиляции JSX в JavaScript, браузер может вычитать и исполнять этот JavaScript код для отображения веб-страницы пользователю.
#frontend #react #jsx
Геттеры и сеттеры
Геттеры и сеттеры в JavaScript — это методы, которые позволяют вам контролировать доступ к свойствам объекта. Они используются для получения (геттеры) и установки (сеттеры) значений свойств объекта. Геттеры и сеттеры предоставляют возможность добавлять дополнительную логику при доступе к свойствам, например, для валидации данных или преобразования значений.
📌 Геттеры (Getters)
Геттер — это метод, который вызывается при обращении к свойству объекта. Он позволяет вам вычислить и вернуть значение свойства вместо того, чтобы просто его хранить.
📌 Сеттеры (Setters)
Сеттер — это метод, который вызывается при попытке установить значение свойства. Он позволяет вам контролировать, какие значения могут быть присвоены свойству, и выполнять дополнительные действия при присвоении.
📌 Применение
Геттеры и сеттеры часто используются, когда необходимо:
✔️ Добавить логику в момент чтения или записи свойства.
✔️ Контролировать доступ к приватным данным.
✔️ Создать свойства, значение которых вычисляется на основе других данных.
✔️ Обеспечить валидацию данных при установке значений.
#frontend #javascript
Геттеры и сеттеры в JavaScript — это методы, которые позволяют вам контролировать доступ к свойствам объекта. Они используются для получения (геттеры) и установки (сеттеры) значений свойств объекта. Геттеры и сеттеры предоставляют возможность добавлять дополнительную логику при доступе к свойствам, например, для валидации данных или преобразования значений.
Геттер — это метод, который вызывается при обращении к свойству объекта. Он позволяет вам вычислить и вернуть значение свойства вместо того, чтобы просто его хранить.
const person = {
firstName: 'John',
get fullName() {
return `${this.firstName}`;
}
};
console.log(person.fullName); // "John"
Сеттер — это метод, который вызывается при попытке установить значение свойства. Он позволяет вам контролировать, какие значения могут быть присвоены свойству, и выполнять дополнительные действия при присвоении.
const person = {
firstName: 'John',
lastName: 'Doe',
set fullName(name) {
const [first, last] = name.split(' ');
this.firstName = first;
this.lastName = last;
}
};
person.fullName = 'Jane Smith';
console.log(person.firstName); // "Jane"
console.log(person.lastName); // "Smith"
Геттеры и сеттеры часто используются, когда необходимо:
#frontend #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
Скоро появится YeaHub — это будет настоящая "пушка". Мы создаем экосистему для роста и развития, и у нас большие планы. YeaHub стремительно набирает обороты, особенно с тех пор, как я начал брать учеников на практику. За месяц их навыки выросли в 10 раз. Осень — время офферов для наших учеников, и мы готовы выходить на рынок. Такой подготовки нет даже у многих опытных специалистов.
Только YouTube немного расстраивает — пока что без контента 🙃🥲. Но на следующей неделе у нас митап на тему "Как работает браузер". Запись, как всегда, будет доступна в сообществе, вместе с другими 40+ видео по собеседованиям, техническим темам и т.д.
Посмотрите на новые лендинги. Красота 😍
Сайт сообщества
https://community.reactify.ru
Сайт менторства
https://reactify.ru
Reactify & YeaHub Production🔝
Только YouTube немного расстраивает — пока что без контента 🙃🥲. Но на следующей неделе у нас митап на тему "Как работает браузер". Запись, как всегда, будет доступна в сообществе, вместе с другими 40+ видео по собеседованиям, техническим темам и т.д.
Посмотрите на новые лендинги. Красота 😍
Сайт сообщества
https://community.reactify.ru
Сайт менторства
https://reactify.ru
Reactify & YeaHub Production
Please open Telegram to view this post
VIEW IN TELEGRAM