Этот канал — про разработку, технологии и реальный опыт работы в IT. Здесь я делюсь тем, что узнаю и применяю на практике:
+ Рассказываю про современные фреймворки, инструменты и подходы в веб-разработке
+ Делюсь опытом работы над реальными проектами — что работает, а что нет
+ Разбираю технические решения и архитектурные подходы
+ Показываю, как устроена разработка в IT-компаниях изнутри
Меня зовут Денис Корнеев. Работаю ведущим фронтенд-разработчиком в крупном IT-интеграторе и развиваю собственные проекты.
На канале пишу про:
+ Frontend-разработку: React, Vue, Nuxt и другие современные технологии
+ Архитектуру приложений и best practices
+ Процессы разработки и работу в команде
+ Инструменты и подходы, которые реально упрощают жизнь разработчика
Если интересна разработка без воды — подписывайтесь.
Написать лично: https://t.iss.one/cathypno
#старт
+ Рассказываю про современные фреймворки, инструменты и подходы в веб-разработке
+ Делюсь опытом работы над реальными проектами — что работает, а что нет
+ Разбираю технические решения и архитектурные подходы
+ Показываю, как устроена разработка в IT-компаниях изнутри
Меня зовут Денис Корнеев. Работаю ведущим фронтенд-разработчиком в крупном IT-интеграторе и развиваю собственные проекты.
На канале пишу про:
+ Frontend-разработку: React, Vue, Nuxt и другие современные технологии
+ Архитектуру приложений и best practices
+ Процессы разработки и работу в команде
+ Инструменты и подходы, которые реально упрощают жизнь разработчика
Если интересна разработка без воды — подписывайтесь.
Написать лично: https://t.iss.one/cathypno
#старт
👍2
Помогаю адаптироваться в айти:
- Изучи план развития
- Порешай задачи, которые сформируют навык
- Маякую куда копать, если возник затык
- Рассказываю о процессах внутри it-компаний
- Провожу интервью по интересующей вакансии и стеку
Обучение фронтенд-разработке
- Чего ждать от менторства
- Что дают платные услуги
- Роадмап для новичка
- Темы для прохождения собеседований
Доступно по подписке
- База знаний
- Психология разработки
- О трудоустройстве в БигТех
Напиши что умеешь, какие ставишь цели:
https://t.iss.one/cathypno
#помощь #обучение
- Изучи план развития
- Порешай задачи, которые сформируют навык
- Маякую куда копать, если возник затык
- Рассказываю о процессах внутри it-компаний
- Провожу интервью по интересующей вакансии и стеку
Обучение фронтенд-разработке
- Чего ждать от менторства
- Что дают платные услуги
- Роадмап для новичка
- Темы для прохождения собеседований
Доступно по подписке
- База знаний
- Психология разработки
- О трудоустройстве в БигТех
Напиши что умеешь, какие ставишь цели:
https://t.iss.one/cathypno
#помощь #обучение
7 простых шагов и ты разработчик
Шагов на деле немного. Их даже можно пройти в любом порядке. Вопрос уверенности, наличия знаний и удачи.
1) Верстаем на HTML/CSS
2) Пишем базовый код на JS и манипулируем DOM
3) Изучаем асинхронность в JS
4) Выбираем фреймворк (Vue, React)
5) Собираем и пишем большой проект
6) Оформляем резюме и посещаем собеседования
7) Получаем оффер на 100к+ и проходим онбординг
На каждом из этапов возникают сложности. Идет кругом голова, из-за новых слов, терминов, сайтов и программ. Постоянно все не работает. Возникает желание бросить и никогда этим не заниматься.
Чтобы с этим справиться и нужна помощь ментора или сообщества тех, кто прошел этот путь. Либо тех, кто совместно преодолевает такие же шаги.
Если интересно, продолжить обучение, пиши:
t.iss.one/cathypno
#дорожная_карта
Шагов на деле немного. Их даже можно пройти в любом порядке. Вопрос уверенности, наличия знаний и удачи.
1) Верстаем на HTML/CSS
2) Пишем базовый код на JS и манипулируем DOM
3) Изучаем асинхронность в JS
4) Выбираем фреймворк (Vue, React)
5) Собираем и пишем большой проект
6) Оформляем резюме и посещаем собеседования
7) Получаем оффер на 100к+ и проходим онбординг
На каждом из этапов возникают сложности. Идет кругом голова, из-за новых слов, терминов, сайтов и программ. Постоянно все не работает. Возникает желание бросить и никогда этим не заниматься.
Чтобы с этим справиться и нужна помощь ментора или сообщества тех, кто прошел этот путь. Либо тех, кто совместно преодолевает такие же шаги.
Если интересно, продолжить обучение, пиши:
t.iss.one/cathypno
#дорожная_карта
Telegram
Denis Korneev
Frontend-разработчик
Обескураживающе краткий гайд по HTML и CSS
HTML
Язык разметки для структурирования контента на веб-странице.
Состоит из элементов, которые определяют различные части страницы, такие как заголовки, параграфы, ссылки, изображения и формы.
HTML не содержит информацию о внешнем виде элементов, но определяет их структуру и содержимое.
Любой из тегов из этого примера гуглится. Важно лишь еще рассказать, про атрибуты тегов.
Видишь здесь src? Этот атрибут тега img, он помогает определить адрес нахождения изображения.
Прочие атрибуты также с легкостью гуглиться в сети.
CSS
Язык стилей для оформления веб-страниц. Позволяет контролировать внешний вид элементов HTML, таких как цвета, шрифты, расположение и размеры.
Доверять в этой области ты можешь следующим сайтам:
developer.mozilla.org/ru
w3schools.com
css-tricks.com
HTML и CSS являются основными технологиями для создания веб-страниц, но без JavaScript на сайтах не будет интерактивности и динамического поведения.
Именно по этому я предлагаю долго не останавливаться на этой теме, поверстать недели две и начать двигаться дальше.
На встречу приключениям в мире JavaScript 😎
#гайд
HTML
Язык разметки для структурирования контента на веб-странице.
Состоит из элементов, которые определяют различные части страницы, такие как заголовки, параграфы, ссылки, изображения и формы.
HTML не содержит информацию о внешнем виде элементов, но определяет их структуру и содержимое.
<!DOCTYPE html>
<html>
<head>
<title>Пример использования тегов HTML</title>
</head>
<body>
<h1>Мой первый заголовок</h1>
<p>Это мой первый параграф.</p>
<a href="https://www.example.com">Перейти на Example.com</a>
<img src="image.jpg" alt="Описание изображения">
<div>Это блок текста.</div>
<span style="color: red;">Этот текст будет красным.</span>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
</ul>
<ol>
<li>Элемент маркированного списка 1</li>
<li>Элемент маркированного списка 2</li>
</ol>
</body>
</html>
Любой из тегов из этого примера гуглится. Важно лишь еще рассказать, про атрибуты тегов.
<img src="image.jpg" alt="Описание изображения">
Видишь здесь src? Этот атрибут тега img, он помогает определить адрес нахождения изображения.
Прочие атрибуты также с легкостью гуглиться в сети.
CSS
Язык стилей для оформления веб-страниц. Позволяет контролировать внешний вид элементов HTML, таких как цвета, шрифты, расположение и размеры.
body {
background-color: lightblue;
}
h1 {
color: navy;
font-size: 24px;
}Доверять в этой области ты можешь следующим сайтам:
developer.mozilla.org/ru
w3schools.com
css-tricks.com
HTML и CSS являются основными технологиями для создания веб-страниц, но без JavaScript на сайтах не будет интерактивности и динамического поведения.
Именно по этому я предлагаю долго не останавливаться на этой теме, поверстать недели две и начать двигаться дальше.
На встречу приключениям в мире JavaScript 😎
#гайд
Темы, которые часто спрашивают на собеседованиях
Обширный перечень тем, но конечный список вопросов может зависеть от требований конкретной позиции и компании.
HTML
- Семантика HTML5
- Формы и их валидация
- Мультимедийные элементы (аудио, видео)
CSS
- Селекторы и стилизация
- Flexbox и Grid Layout
- Анимации и переходы
- Медиа-запросы и адаптивный дизайн
JavaScript
- Основы языка (переменные, типы данных, циклы, условия)
- Функции, замыкания, промисы
- Объектно-ориентированное программирование
- Работа с DOM
- События и обработчики событий
- Асинхронное программирование и Event Loop
- AJAX и работа с HTTP-запросами
- Манипуляции с массивами и объектами
Фреймворки и библиотеки
- Знание React, Angular, Vue.js или других фреймворков
- Работа с управлением состоянием в приложениях
- Маршрутизация во фронтенд-приложениях
Сборка и управление зависимостями
- Webpack, Babel и другие инструменты сборки
- Управление зависимостями с использованием npm или yarn
Верстка и дизайн
- Умение читать макеты и преобразовывать их в HTML/CSS
- Работа с препроцессорами (например, Sass или Less)
- Оптимизация изображений и ресурсов для веба
Тестирование
- Знание основ тестирования, например, с использованием Jest, Mocha или других тестовых фреймворков.
- Юнит-тестирование, интеграционное тестирование
Работа с Git
- Опыт работы с системами контроля версий, особенно Git
- Знание основных команд Git
Производительность и оптимизация
- Инструменты для измерения и оптимизации производительности веб-приложений
- Знание HTTP-протокола и кэширования
Архитектура и инструменты
- Виды архитектур и их особенности
- Паттерны и принципы проектирования
- Развертывание приложений с использованием контейнеров (Jenkins, Docker, Kubernetes)
- Дизайн систем
Стандарты и лучшие практики
- Соблюдение современных стандартов веб-разработки
- Понимание принципов доступности и SEO
Общие вопросы
- Как вы управляете своим временем и задачами?
- Как вы решаете проблемы и исправляете ошибки?
- Сложные/интересные задачи из опыта работы
#вопросы
Обширный перечень тем, но конечный список вопросов может зависеть от требований конкретной позиции и компании.
HTML
- Семантика HTML5
- Формы и их валидация
- Мультимедийные элементы (аудио, видео)
CSS
- Селекторы и стилизация
- Flexbox и Grid Layout
- Анимации и переходы
- Медиа-запросы и адаптивный дизайн
JavaScript
- Основы языка (переменные, типы данных, циклы, условия)
- Функции, замыкания, промисы
- Объектно-ориентированное программирование
- Работа с DOM
- События и обработчики событий
- Асинхронное программирование и Event Loop
- AJAX и работа с HTTP-запросами
- Манипуляции с массивами и объектами
Фреймворки и библиотеки
- Знание React, Angular, Vue.js или других фреймворков
- Работа с управлением состоянием в приложениях
- Маршрутизация во фронтенд-приложениях
Сборка и управление зависимостями
- Webpack, Babel и другие инструменты сборки
- Управление зависимостями с использованием npm или yarn
Верстка и дизайн
- Умение читать макеты и преобразовывать их в HTML/CSS
- Работа с препроцессорами (например, Sass или Less)
- Оптимизация изображений и ресурсов для веба
Тестирование
- Знание основ тестирования, например, с использованием Jest, Mocha или других тестовых фреймворков.
- Юнит-тестирование, интеграционное тестирование
Работа с Git
- Опыт работы с системами контроля версий, особенно Git
- Знание основных команд Git
Производительность и оптимизация
- Инструменты для измерения и оптимизации производительности веб-приложений
- Знание HTTP-протокола и кэширования
Архитектура и инструменты
- Виды архитектур и их особенности
- Паттерны и принципы проектирования
- Развертывание приложений с использованием контейнеров (Jenkins, Docker, Kubernetes)
- Дизайн систем
Стандарты и лучшие практики
- Соблюдение современных стандартов веб-разработки
- Понимание принципов доступности и SEO
Общие вопросы
- Как вы управляете своим временем и задачами?
- Как вы решаете проблемы и исправляете ошибки?
- Сложные/интересные задачи из опыта работы
#вопросы
Задачи JS, массивы и объекты.pdf
68.4 KB
Набор из простых задач, которые позволят вспомнить как работать с циклами, ветвлениями и сравнениями в JS
Для тех, кто решил погрузиться в решение задач на leetcode, но они кажутся слишком сложными на начальном этапе.
#задачи
Для тех, кто решил погрузиться в решение задач на leetcode, но они кажутся слишком сложными на начальном этапе.
#задачи
Пишем свою версию функции reduce на JS
В этом примере:
customReduce - пользовательская функция, которая имитирует поведение встроенной функции reduce.
Она принимает три аргумента: функцию reducer, начальное значение initialValue и массив array.
sumReducer - функция, которая будет использоваться в качестве reducer для суммирования чисел.
Она принимает два аргумента: аккумулятор и текущее значение, и возвращает их сумму.
customReduce используется для суммирования чисел в массиве numbers, начиная с 0 в качестве начального значения аккумулятора.
Этот подход демонстрирует, как можно реализовать функциональность reduce вручную, что может быть полезно для понимания работы этой функции и для ситуаций, когда использование встроенной функции невозможно или нежелательно. А также поможет на собеседовании :)
#задачи
const customReduce = (reducer, initialValue, array) => {
let value = initialValue;
for (let i = 0; i < array.length; i++) {
let currentValue = array[i];
value = reducer(value, currentValue);
}
return value;
};
// Пример использования пользовательской функции reduce для суммирования чисел
const numbers = [1, 2, 3];
const sumReducer = (accumulator, current) => accumulator + current;
const sumOfNumbersCustom = customReduce(sumReducer, 0, numbers);
console.log("Custom reduce function, " + sumOfNumbersCustom);В этом примере:
customReduce - пользовательская функция, которая имитирует поведение встроенной функции reduce.
Она принимает три аргумента: функцию reducer, начальное значение initialValue и массив array.
sumReducer - функция, которая будет использоваться в качестве reducer для суммирования чисел.
Она принимает два аргумента: аккумулятор и текущее значение, и возвращает их сумму.
customReduce используется для суммирования чисел в массиве numbers, начиная с 0 в качестве начального значения аккумулятора.
Этот подход демонстрирует, как можно реализовать функциональность reduce вручную, что может быть полезно для понимания работы этой функции и для ситуаций, когда использование встроенной функции невозможно или нежелательно. А также поможет на собеседовании :)
#задачи
Самая частая проблема с которой сталкивается разработчик
Недавно понадобилось мне развернуть копии приложения на нескольких серверах. В приложении используется Vite - прекрасный сборщик, он отлично справляется со своей задачей, быстро собирать приложение. Но задача чуть сложнее. Нужно как-то прокинуть переменные окружения от api бекенда, чтобы можно было слать запросы.
В первую очередь смотрю документацию, как это сделать, не нахожу ответ
Во-вторую, иду гуглить нахожу что можно создать фаил .env и туда положить переменную.
Решение отличное, но оно не подходит. Серверов же несколько, и у каждого своя переменная окружения, то есть по факту она динамическая. Убираю уже лишний код и продолжаю поиск.
Вывожу в консоль env, много всего вижу, но нет переменной с api бекенда. Думаю. Хм, разворачивается это на докере. Надо глянуть vite docker переменные окружения. И вуаля, есть плагин, который за это отвечает vite-plugin-env-compatible.
Так с чем я столкнулся?
С не знанием, работы конкретных инструментов.
А решил с помощью поиска и изучения информации в сети.
Какого бы уровня, не был разработчик, он часто будет сталкиваться с тем, что какой-то информации недостаточно. И его основное умение, научиться ее искать.
Учиться этому можно бесконечно. Но быстрее нарастить опыт, поможет не только практика, о которой точно не стоит забывать. Но и общение с коллегами и единомышленниками.
Поделись своей историей в нашем чате:
https://t.iss.one/basefront_chat
#разработка
Недавно понадобилось мне развернуть копии приложения на нескольких серверах. В приложении используется Vite - прекрасный сборщик, он отлично справляется со своей задачей, быстро собирать приложение. Но задача чуть сложнее. Нужно как-то прокинуть переменные окружения от api бекенда, чтобы можно было слать запросы.
В первую очередь смотрю документацию, как это сделать, не нахожу ответ
Во-вторую, иду гуглить нахожу что можно создать фаил .env и туда положить переменную.
Решение отличное, но оно не подходит. Серверов же несколько, и у каждого своя переменная окружения, то есть по факту она динамическая. Убираю уже лишний код и продолжаю поиск.
Вывожу в консоль env, много всего вижу, но нет переменной с api бекенда. Думаю. Хм, разворачивается это на докере. Надо глянуть vite docker переменные окружения. И вуаля, есть плагин, который за это отвечает vite-plugin-env-compatible.
Так с чем я столкнулся?
С не знанием, работы конкретных инструментов.
А решил с помощью поиска и изучения информации в сети.
Какого бы уровня, не был разработчик, он часто будет сталкиваться с тем, что какой-то информации недостаточно. И его основное умение, научиться ее искать.
Учиться этому можно бесконечно. Но быстрее нарастить опыт, поможет не только практика, о которой точно не стоит забывать. Но и общение с коллегами и единомышленниками.
Поделись своей историей в нашем чате:
https://t.iss.one/basefront_chat
#разработка
Как JavaScript помогает летать в космос
С детства меня завораживал космос. И кажется крутой идеей однажды туда отправиться. Не знаю как скоро js-разработчики будут востребованы там физически. Но уже сейчас на js пишутся приложения для космонавтики. Например, в известной компании Илона Маска Space X.
Панели управления для космических миссий
Позволяют инженерам и космонавтам управлять космическими аппаратами в реальном времени. Челнок Crew Dragon как раз использует такую, написана на Vue.js
Системы анализа данных
Приложения для обработки и анализа данных, полученных от космических аппаратов, включая изображения, данные о состоянии аппарата и прочие метрики. Здесь могут использоваться библиотеки типа D3.js и Chart.js для отрисовки сложных графиков.
Инструменты для планирования и моделирования миссий
Например, выбор траекторий полета и оптимизация использования ресурсов. Вполне пригодиться библиотека Three.js, которая помогает работать с 3d для визуальной составляющей приложения.
Системы взаимодействия с космическими аппаратами
Веб-приложения, которые позволяют операторам космических аппаратов взаимодействовать с ними, отправлять команды и получать данные. По факту стандартное CRUD приложение или даже телеграм-бот на Node.js
JavaScript гибкий, неплохо справляется с асинхронными операциями и поддерживает большое количества библиотек и фреймворков, таких как React, Angular и Vue, которые значительно упрощают и ускоряют разработку приложений.
Так что, если нравится космос, обрати внимание и на JS :)
#мотивация
С детства меня завораживал космос. И кажется крутой идеей однажды туда отправиться. Не знаю как скоро js-разработчики будут востребованы там физически. Но уже сейчас на js пишутся приложения для космонавтики. Например, в известной компании Илона Маска Space X.
Панели управления для космических миссий
Позволяют инженерам и космонавтам управлять космическими аппаратами в реальном времени. Челнок Crew Dragon как раз использует такую, написана на Vue.js
Системы анализа данных
Приложения для обработки и анализа данных, полученных от космических аппаратов, включая изображения, данные о состоянии аппарата и прочие метрики. Здесь могут использоваться библиотеки типа D3.js и Chart.js для отрисовки сложных графиков.
Инструменты для планирования и моделирования миссий
Например, выбор траекторий полета и оптимизация использования ресурсов. Вполне пригодиться библиотека Three.js, которая помогает работать с 3d для визуальной составляющей приложения.
Системы взаимодействия с космическими аппаратами
Веб-приложения, которые позволяют операторам космических аппаратов взаимодействовать с ними, отправлять команды и получать данные. По факту стандартное CRUD приложение или даже телеграм-бот на Node.js
JavaScript гибкий, неплохо справляется с асинхронными операциями и поддерживает большое количества библиотек и фреймворков, таких как React, Angular и Vue, которые значительно упрощают и ускоряют разработку приложений.
Так что, если нравится космос, обрати внимание и на JS :)
#мотивация
Как выйти из прострации? Психология разработки.
На процесс разработки могут влиять психологические факторы: эмоции, стрессы, конфликтные ситуации, потеря мотивации. В этом тексте, только лаконичная конкретика без воды.
Почему я не могу сесть за работу?
- тревожность? Выписать тревоги и возможные решения
- эмоциональность? Прожить эмоцию, если нужно выписать впечатления
- усталость? Поспать, либо переключить внимание(спорт, домашние дела, залипнуть)
Не понятно что делать?
- делить задачу на более мелкие, пока не появится задача, которую можно сделать или начать искать/изучать потенциальное решение
Есть список задач, но не понятно за какую браться?
- это тревожность, выпиши тревоги, определи важнейшую задачу.
- не можешь? Выбери одну любую задачу и просто делай, погрузись в нее.
Принятие решения
- внутри ощущается спокойствие, смирение с возможными последствиями
И помни:
Нельзя сомневаться.
Сомнения порождают хаос и ведут тебя к гибели 😏
#психология
На процесс разработки могут влиять психологические факторы: эмоции, стрессы, конфликтные ситуации, потеря мотивации. В этом тексте, только лаконичная конкретика без воды.
Почему я не могу сесть за работу?
- тревожность? Выписать тревоги и возможные решения
- эмоциональность? Прожить эмоцию, если нужно выписать впечатления
- усталость? Поспать, либо переключить внимание(спорт, домашние дела, залипнуть)
Не понятно что делать?
- делить задачу на более мелкие, пока не появится задача, которую можно сделать или начать искать/изучать потенциальное решение
Есть список задач, но не понятно за какую браться?
- это тревожность, выпиши тревоги, определи важнейшую задачу.
- не можешь? Выбери одну любую задачу и просто делай, погрузись в нее.
Принятие решения
- внутри ощущается спокойствие, смирение с возможными последствиями
И помни:
Нельзя сомневаться.
Сомнения порождают хаос и ведут тебя к гибели 😏
#психология