Поговорим на больную, но актуальную во все времена проблему.

Как наполнить портфолио тем, что реально пригодится и поможет? Где взять опыт работы, когда его уже требуют при устройстве?

Один из ответов - это фейковые, ненастоящие проекты, если мы говорим о мире IT. Конечно, это не 100% успеха, но почти все это делают. И это правильно. Но какие шаги желательно совершить для максимального увеличения своих шансов попасть туда, куда хотите именно вы?

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

1. Сначала я бы определился с типом клиента, с которым я хотел бы работать. Это может быть стартап, в котором небольшая (обычно) команда работает в режиме «горящей жопы», делает и изучает много всего, выходит на рынок и развивается. Это может быть большая компания, которая без спешки разрабатывает новый продукт, или компания, которая годами сидит на поддержке крупного продукта.

2. Определить нишу: в какой индустрии я бы хотел работать? Финтех, продажи, обучающие платформы, e-commerce, здравоохранение и тд.

3. Расположение: если я хочу работать в англоговорящих странах - то и язык продукта должен быть соответствующим. (хотя тут много нюансов помимо языка)

4. Поиск: нужно найти в гугле подходящие компании по своим запросам и найти их проекты. Можно не только в гугле, но и на специальных ресурсах по типу: https://www.crunchbase.com/

5. Выбрать тип проекта: сайт, веб-приложение, мобильное приложение и тд.

6. Выполнить проект: берете существующий продукт компании, меняете внешний вид до неузнаваемости, выполняете функционал и дополняете своими фичами. Естественно, что вы не знаете всех возможностей реального продукта, так что что-то придется додумывать. Это нормально и вы получите массу нового опыта. Не забывайте, что вы бы хотели решить проблемы компании, а не создавать новые 🙂

7. Повторить схему для наполнения портфолио.

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

#полезности

Пока писал пост понял, что хорошо было бы еще накидать список проектов, которые можно реализовать на js уровня джун/мидл

Ух, предыдущие полтора дня были полны мелких, но отнимающих кучу времени дел. Но это не повод лениться.
Можно повторить про себя вопросы, пока нарезается оливье, варится холодец или проводится уборка перед праздником 😅

❇️ Junior уровень:

📍 Общие вопросы:
Что такое cookie?
За что разработчики не любят Internet Explorer? Какие примеры можете привести? (слышал, что не раз такой вопрос задавали🙂 )

📍 Верстка:
В чем отличия гибкой, адаптивной и отзывчивой верстки?

📍 JS:
Что такое DOM? Что из себя представляют его составные части?
Что такое всплытие?

📍 React:
Какой смысл атрибута key?
Какие виды стилизации приложений вы знаете?

✴️ Middle-уровень

📍 Общие вопросы:
Что такое event loop? Сможете объяснить принцип его работы?

📍 Верстка:
Какие способы lazy-load загрузки ресурсов (изображений)?

📍 JS:
Как создать неизменяемый объект в JS?
Что такое записи (records) и кортежи (tuples)?

📍 React:
Чтобы вы выбрали: Mobx или Redux? (коварный вопрос и из него нужно выкручиваться 😏)

#вопросы_на_собеседования

Не реклама, а информация 😅

Если кому-то нужна прямая и максимальная скидка на какой-нибудь из курсов в этом году - напишите мне или в комменты. До конца года есть купоны, которые могу сделать для вас, пока они не превратились в тыкву.

Да, там сейчас распродажа, но для тех, у кого уже есть курсы, цена может быть больше. Платформа сама регулирует 🤷‍♂️

upd. Вас понял, размещаю.
web-dev: https://www.udemy.com/course/webdeveloper/?couponCode=694C2850F726E49C239D
js+react: https://www.udemy.com/course/javascript_full/?couponCode=0D21AB99F83821B30F3C
Практический js: https://www.udemy.com/course/javascript_practice/?couponCode=2B5A3A624E03F0E77ABC
Админка на React + php: https://www.udemy.com/course/reactjs_admin_panel/?couponCode=82A34B4D568306CC6000
Wordpress: https://www.udemy.com/course/cms-wordpress/?couponCode=1E7A9CB1E77916ED4625

Друзья, поздравляю всех с наступающим или уже наступившим Новым годом 🍾🎉

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

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

(ВАЖНО: для реализации всех перечисленных проектов предполагается использование JavaScript, но можно использовать что угодно + использовать готовый или самописный бэкенд)

📁 to-do app - это классика. Его постоянно дают как тестовое задание на любой стек технологий и уметь его создавать просто необходимо. Но многие забывают, что такое приложение можно превратить во что угодно. Эта концепция повсюду: список покупок, содержимое вашей домашней аптечки, список людей, которых нужно поздравить с днем рождения и тому подобное. Возьмите нестандартную идею и выполните её в коде

📁 Приложение-quiz (викторина, тест). Это не только интересный опыт, где вы научитесь хранить данные каким-то способом, обрабатывать их и выводить результаты. Такие задачи частенько встречаются в реальности на любую из тем. Даже такой заказ в этом канале был уже 🙂

📁 Видео или аудиоплеер. 2019 году косвенно участвовал в разработке очень большого проекта, где как-раз разрабатывали свой плеер. Он брал видео с серверов Амазона (предварительно залитые) и воспроизводил на фронте. Так что не думайте, что это ненужная практика 🙂

📁 Игры: тетрис, гонки, виселица и тд. Хорошая практика с множеством концепций

📁 Онлайн-чат. Тоже встречается как тестовое задание, поэтому лишним не будет

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

📁 Приложение для определения скорости печати. Очень крутая практика. Можно расширить функционал и сделать разного рода тесты. Например, за сколько вы напечатаете первый абзац n-книги и сколько ошибок допустите, с выводом нужно текста на экран + напечатанный текст

📁 Создать свое расширение для браузера. Тут самое сложное - это придумать идею :) А инструкция по внедрению в браузер вот тут: https://tproger.ru/articles/how-to-build-a-chrome-extension/

📁 Информационный агрегатор. Вы можете создать красивый интерфейс, который будет из разных API собирать данные: курсы валют в разных банках, криптовалюты, акции и тд. Добавить туда фильтров, сортировок и все, крутая приложуха готова. Дизайн можно найти на реально работающих продуктах или дриббл/беханс

📁 Генератор рандомных паролей с указание степени сложности

📁 Сориентироваться по готовому API. Идея проста: находите открытые или хотяб бесплатные API, смотрите что они вообще делают и придумываете идею. Например, есть API по продаже авиабилетов - создаем такой интерфейс. Есть API со списком аптек в n-городе с координатами - создаем интерфейс, который будет находить ближайшую аптеку, ориентируясь на его местоположение. Идею вы поняли 🙂

📍 Fullstack-приложения, или где нужно написать бэкенд часть, или использовать готовые наработки:

📁 Приложения для скачивания видео с YouTube, Vimeo, Tictok и тд. Просто вбейте в гугл такой запрос и увидите, что тема популярна :) Можно добавить функционал по выбору и конвертации формата видео, скачать только аудиодорожку, скачать только фрагмент видео и тд.

📁 Приложение для скачивания фото из Instagram. Тоже самое

📁 Приложение для сокращения ссылок. Никому не нравятся ссылки, занимающие пол экрана (особенно с кириллицей)

📁 Определение шрифта по картинке. Сложная штука, но интересная в реализации

📁 Приложения для кропа (обрезания изображения). Загружаете картинку, на фронте меняете размер и после обработки на сервере идет скачивание. Можно засунуть фильтры и кучу всего инстаграмного

📁 Конструктор для инстаграмных (и кучи других) историй. Очень крутой опыт, еще и подвязанный под реальный продукт

📁 Агрегатор с ценами на товары. Наглядный пример: https://hotline.ua/ Тему товаров и откуда брать данные нужно решить самому 🙂

#полезности

📁 Конструктор футболок. Пример: https://www.vsemayki.ru/constructor?alias=tshirt_oversize Можно даже без бекенда, но координаты принтов нужно все равно запоминать. Мой друг лично делал такое приложение для китайцев на React Native

📁 Приложение со случайными цитатами из книг/интернета/твиттера/чего угодно

📁 Интерактивная карта. Если не использовать готовые решения по типу https://leafletjs.com/ , то сложно, нужны данные, но реально. Можно создать карту своей квартиры, дома, улицы и тд

📁 Синтезатор речи. На беке уже есть готовые решения 🙂

#полезности

2021 начинается не совсем как планировалось.
Ребят, если я вам сейчас буду отвечать на платформе чуть дольше, чем обычно, то это только из-за того, что валяюсь с 38+ и очень скверным самочувствием. Может пришла пора и мне переболеть коронавирусом 🤷‍♂️

Зато мне приехал мой подарок. Теперь буду писать звук на новом уровне. Уже проверил, и даже охрипший голос звучит просто 👍

Короче, запись большего ролика на ютуб отложилась до выздоровления

А еще завтра, скорее всего, будут два мини заказа. Скину сюда. Будет возможность немного подзаработать)

Вот это я понимаю UI. Впервые вижу, что при заходе на сайт с телефона, 70% видимого контента - это реклама 😂

Пожалуйста, останавливайте заказчиков, если они хотят такое сделать)

А самое крутое, что каждая закрывается своим маленьким крестиком 🙃

#юмор

Так, я уже почти в работоспособном состоянии, так что пришло время поразминать мозги. Чем больше вопросов мы с вами повторим - тем будет легче потом.

За предыдущую неделю мне написало 5 человек из 4х стран, что они успешно устроились на работу❗️🇵🇱 🇮🇱🇺🇦🇷🇺 Это просто офигенно и значит, что все не зря🙂

❇️ Junior уровень:

📍 Общие вопросы:
Что такое CORS? Зачем это нужно и как с ним бороться?
В чем разница между статической и динамической типизациями? Какую предпочитаете вы? Назовите примеры языков в этих группах.

📍 Верстка:
Как можно использовать циклы в css коде? (интересный вопрос)
На какие моменты вы обращаете внимание в верстке, которая будет заполнятся совершенно разным количеством контента? (статьи, карточки, ценники, ярлыки)

📍 JS:
Что такое .stopPropagation? Может ли он принести проблемы в код?
Зачем в некоторых функциях в самом конце прописывают return false? (имеются в виду функции, которые будут использоваться в обработчиках событий)

📍 React:
Что такое React.lazy? Сможем ли мы его использовать на стороне сервера?

✴️ Middle-уровень

📍 Общие вопросы:
Могут ли веб-браузеры использовать разные движки внутри? Если да - то какие вы знаете и в чем их особенность?
Какие есть способы сохранения данных браузере? Как они работают?

📍 Верстка:
Почему нельзя создать псевдоэлементы у input? input:after{}

📍 JS:
Что такое композиция в JS? Приведите примеры
Зачем существует объект Proxy?

📍 React:
В чем разница между createRef и useRef?

🆘 Senior-уровень:

📍 Общие:
Как лучше всего вносить изменения в проект на старых технологиях, который работает уже 15 лет? Опишите алгоритм действий.

📍 JS:
Что такое Garbage Collector? Как именно он работает в JS? И какие проблемы могут быть, если мы допустим memory leak?
Реализуйте принцип чейнинга в js с нуля. Какие плюсы и минусы такого кода?

📍 React:
Расскажите про компоненты высшего порядка. Какие готовые HOC вы знаете или использовали при работе с React?

#вопросы_на_собеседования

Все таки даже легкое течение ковида дает о себе знать. Уже 3-4 дня нет температуры, но и нет вкуса, запаха, желания и сил вставать с постели. Сонливость просто страшная. Утром открыл глаза и думаешь, как бы не уснуть после завтрака. Для человека, который постоянно что-то делает, это очень необычно.

Короче, не болейте и берегите себя 😷

Правильное использование объекта console

Скорее всего вы, как javascript’er, никогда не использовали ничего, кроме console.log() из набора команд этого объекта. Понятное дело, что для более продвинутого дебага у нас есть дебаггер. Но объект console не стоит недооценивать. Если вывести его на свет, то мы обнаружим еще кучу методов внутри (скрин 1). Вот про них и поговорим.

console.error() - да, это как раз те красные уведомления об ошибках. И если у вас предполагается ошибка, почему бы не понервировать другого разработчика именно этим средством?

console.warn() - а это уже желтое предупреждение. Не такое критичное, но для важного уведомления пойдет.

console.table() - крутая возможность, которая выведет данные в формате таблицы. Для объектов самое то.

console.group() и console.groupEnd() - позволяет вам группировать сообщения. Полезно, например, в циклах или когда у вас целая куча сообщений.

console.count() - позволяет вам посчитать сколько раз мы получили такой результат. Полезно в циклах и цикличных методах. Для полного понимания посмотрите скрин :)

Стилизованные логи. Я уверен, что вы не раз видели застилизованные сообщения в консоли. Сделать это можно, добавим css стили в качестве второго аргумента. Но при этом сообщение обязательно должно начинаться с %c. Тоже смотрите скрин.

А теперь мини-квест для тех, кто дочитал до конца. Почему в конце почти всех команд мы получаем undefined в консоль? Слышал, что это спрашивали на собеседованиях

#полезности