🗣 Анонс Elm #2: Загрузка файла

Вебинар состоится 17.02.20 в 20:00 по Москве. Как обычно перед занятием, собираемся заранее минут за 10 пообщаться. Расскажу о том, как я нахожусь под бомбардировкой от различных npm пакетов и подходов на текущей работе.

На вебинаре разберем пример, в котором будут:

- кнопка для загрузки файла (input type="file")
- список загруженных файлов
- состояние загрузки:
 - еще ничего не загружали
 - загружается
 - готово (лист файлов)
 - ошибка (текст ошибки)

Пример того, как это может выглядеть - https://i.imgur.com/euRw3Bw.mp4

---

💪 Для тех, кто уже готов развлекаться - попробуйте сделать это задание самостоятельно. Решение присылайте мне на maxpfrontend@gmail.com с пометкой "Elm #2: Загрузки файла" (ссылкой на репозиторий или на ellie).

- примеры загрузки файла на Elm в документации

---

👶 Для тех, кто еще не готов, чего ждем? Для вас тоже есть задание:

- посмотреть онлайн-редактор ellie;
- установить себе Elm, разобраться как работает elm-live и create-elm-app;
- почитать про альтернативу webpack - parcel;
- запустить пример на parcel + elm (кода, кот наплакал);
- посмотреть какой-нибудь пример spa с роутингом, например elm-batteries (как раз используется parcel);
- почитать документацию, в конце концов :)

Не нужно ждать, что кто-то придет и наконец-то вам с нуля все разжует. Этот кто-то задерживается! А на вебинаре будет гораздо веселее, если вы попробуете сами что-нибудь банальное, например, отобразить массив ["яблоко", "банан", "груша"] в обычном <ul><li> списке.

Выходите из зоны комфорта, посмотрите на новые инструменты. Пора!

И не переживайте, если вас напугает код spa с роутингом, "это норма" :)
До понедельника 2 раза будет суббота и воскресение, и если вы сетуете на то, что времени у вас нет - я вам не верю.
Увидимся в понедельник 17 февраля!

У state of js 2019 есть русская версия. Если кто еще не читал, то рекомендую ознакомиться со статистикой.
https://2019.stateofjs.com/ru/

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

📆 17.02.2020

🕐 19:50 - 20:00 расскажу о своей рутине фронтендера на текущей работе и какие из навыков мне пригодились
🕐 20:00 Elm #2 пример с загрузкой файла

---

Если вы думаете, что это не стоит вашего внимания, то подумайте зачем бы мне сидеть в выходные и готовить очередной вебинар? Помимо ответа, что это какой-никакой PR, главное - это хорошее настроение от изучения нового и общения с вами. Жду!

⚠️ На вебинаре завтра, возможно, изменим тему, если не успеем уложиться в час, так как кажется немного жестко будет сразу прыгать в загрузку файла ) Посмотрим, как пойдет.

p.s. будем собирать проект parcel'ом и писать код в IntelliJ IDEA (для разнообразия)

Начинаем
https://www.twitch.tv/maxpfrontend

🚩 Апдейт по сервису стикеров (кодовое название CutCut):
- сегодня поправил назойливый баг с ресайзом и качеством изображения;
- Кодовая база на данный момент: Elm 49.2%, TS 46.8% (остальное html/css);
- процент TS большой, потому что много взаимодействия со сторонними библиотеками (отрезать кусок фото, стереть с канваса...), вообще, с канвасом много возни на этом проекте;
- жду когда будет готов функционал создания стикера, так как после ожидаю побольше работы с Elm;

🚩 Апдейт в целом:
- пока нет возможности стримить из офиса, из дома даже второй вебинар загрузить не могу, но может попробую ночью :)

CutCut пока в приватном репо, но ближе к релизу проведу стрим, посмотрим с какими трудностями столкнулся, что получилось, что не получилось, отвечу на вопросы и если будет интерес разберем подробнее процесс создания.

Не расслабляемся! 👨‍💻👩‍💻

👋, Если кто устал от bootsrap и material, то посмотрите в сторону:
- bulma (https://bulma.io/)
- TailwindCSS (https://tailwindcss.com/)

Bulma, я кстати использую для CutCut, и сегодня/вчера по несколько часов провел за версткой / чтением документации. Не могу сказать, что я, вдруг, снова полюбил это дело, но в целом какие-то базовые вещи заверстать удалось.

Про Tailwind, как и про "бульму", часто слышу в Elm вакансиях, пример - https://stackoverflow.com/jobs/339325/senior-web-developer-omicron (первая строка после RESPONSIBILITIES)

🚩Апдейт по CutCut

Сегодня, по уже накатанной схеме добавил фичу "добавить текст" на стикер, получилось как и задумывалось, все прошло гладко, база кода на Elm пополнилась.

👨‍🏫 Жду возможности выбраться в офис и провести стрим.

🔜 Выходные не за горами, что поделать:

- https://youtu.be/aRHkMYyCM40 (некто, Денис, на русском делает форму логина на Elm. Очень спокойно рассказывает, похоже на наш вебинар #1 по элму - https://youtu.be/iDkE6bJShMc)

- поискать что-нибудь из курсов на англ, пока бесплатно ( https://www.pluralsight.com/ )

- попрактиковаться!

---

❗️Особенно отмечу  практику. В очередной раз. Теория вас далеко не продвинет, а главное не даст вам волшебный возглас "ах вот оно что!" С этим возгласом, будьте уверены, вы только что выучили что-то новое.

---

✂️CutCut ушел на золото, а точнее на code review 😉 Первая оценка уже есть, в целом все не плохо, но есть над чем подумать. Планов по стриму это все равно не меняет, так как главное, что цели были достигнуты: было весело и проект работает. Как только найду стабильный интернет - начнем обсуждать, причем нам есть о чем поговорить и по typescript, и по canvas, и про то как разбивать проект на задачи, как не опускать руки и конечно, про Elm.

Elm научил меня чаще думать о "всех возможных вариантах". Теперь уже нет банальных указаний typescript'у - я знаю точно, что это поле есть (через ? или ! ). Раз ts считает что такой кейс возможен, то стоит подумать и, возможно, выбросить ошибку (throw error), чтобы потом не наступить на эти грабли.

---

🇩🇪 В Мюнхене четыре выходных подряд, и я решил посмтореть advanced course по Elm на Frontend masters (https://frontendmasters.com/courses/advanced-elm/), и (о чудо!) там есть задачи. Мне, как и многим из вас, лень начинать: решать задачу, писать первый код... но, главное начать!

Только что (это и послужило желанием написать пост), я выучил и запомнил на 100% еще одну ошибку компилятора, а компилятор в Elm прекрасный. Но как вы научитиесь его понимать, если всегда читали только теорию и не бились лбом об эти ошибки? То же самое про TypeScript... Учитесь читать ошибки, а чтобы ошибки были - практикуйтесь.

😉 Запись вебинара по Elm #2, где мы в начале настроили IntelliJ IDEA для работы с Elm, затем притянули для сборки Parcel и в итоге показали список фруктов из JSON.

Видео: https://youtu.be/PbAvTGQJi0M
Конспект: https://maxpfrontend.ru/elm/elm-2-zagruzka-i-otobrazhenie-json/

p.s. пока конвертировал видео, глянул одним глазом в чем я плавал в моменты объяснения и могу сказать, что очень хорошо продвинулся вперед всего за два месяца.

p.p.s так же не за горами вебинар, на котором мы немного передохнем и посмотрим на то, какие я получал тестовые задания.

Всем привет! Сегодня хочу протестировать новый интернет-канал и провести стрим по работе над сервисом стикеров. Без подготовки, просто разработка на elm.

Что интересного можно будет увидеть? Разработку через дебаггер 🤭 и попытки уйти от этого :)

Начало ориентировочно в районе 14.00 по Москве.

https://twitch.tv/maxpfrontend

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

Запись будет, рекомендую к просмотру.

🚩Выложил запись вчерашнего стрима, с отметками времени. На отметки убил почти час, надеюсь, не зря. Стрим вышел зачетный, приглашаю к просмотру https://youtu.be/E67K3IrsBhU

👌Поддержка видео лайком/комментарием = новые материалы :)

🗓В планах: e2e тесты для текущего продукта на работе, стриминг рабочего процесса (если дадут добро), вебинар по сервису стикеров CutCut и выпуск его в открытый доступ.

Всем хорошей рабочей недели!

Всем привет, подходит срок показывать вам сервис стикеров. Я думаю, пора выкладывать репозиторий в открытый доступ.

Сервис стикеров - это громко сказано, конечно. Но свою задачу версия v.1.0.0 выполняет: можно автоматически отрезать фон, добавить эффект "обводки" (как у настоящих стикеров) и добавить текст. Далее можно скачать стикер или добавить его в один клик в стикер-пак вашего бота в телеграм.

Приглашаю вас на вебинар, на котором мы разберем:

- процесс создания проекта от идеи, до первой версии
- за что отвечает Elm, за что отвечает TypeScript
- какие сторонние библиотеки были использованы, были ли трудности в интеграции js/ts кода в Elm проект
- были ли трудности в работе с API сторонних сервисов
- какой профит был получен от Elm, окупились ли вложения на изучение
- немного поговорим про canvas
- деплой проекта на now.sh
- список "хотелок" и не реализованных идей для сервиса

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

🖌 Заполните небольшой опрос - https://forms.gle/2YcKf23dsZYfvtxEA (1 минута)

Жду вас уже завтра (30 апреля) в 20:00 по Москве

Видео-приглашение + как это выглядит: https://youtu.be/Pfu5vi01KZ4

Привет, сегодня буду работать над добавление страницы настроек в CutCut, чтобы можно было использовать своего бота и свой стикер-пак для загрузки стикеров.

План:
- добавить страницу
- добавить несколько инпутов
- сохранять / отображать информацию в LocalStorage
- использовать введенные значения в запросах к API remove.bg и telegram

Старт стрима минут через 20-30, если получится быстро разобраться, то буду стримить сразу на YouTube, если нет - как обычно на твич.

Писать буду на Elm.

👋 Всем привет, сегодня буду работать над настоящей задачей с текущего проекта. Это не open source, но руководство дало добро, если я не буду показывать "конфиденциальных данных". Данный проект, я практически не знаю, поэтому будет полезно посмотреть, как я ищу "где проблема" и какие варианты решения придумаю.

👉 План:

- клон репозитория и установка пакетов (заранее)
- старт работы, задача - "добавить прелоадер"
- проблемы: старый проект (react 0.14.8), старый eslint, конфликты с автоматическим форматированием от prettier, простыня библиотек и не идеальный код, минимум подсказок от редактора. От некоторых проблем избавимся на стриме.

👉 Цель:

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

👉 Стэк:

Миллион старых библиотек, нам скорее всего потребуется немного копнуть в:

- react
- redux, redux-actions, redux-form, redux-saga, redux-simple-router
- lodash, babel, webpack :)

Я думаю, что придется большую часть задачи сидеть в debugger'e, и выяснять "что, откуда и куда" происходит в приложении, поэтому стрим будет очень полезен для новичков.

Заранее не готовился, я даже не могу написать "все как будто в настоящем офисе", потому что мы будем работать над настоящей задачей, в настоящем приложении и с настоящей проблемой, которую испытывают наши пользователи. Результат решения за 1-2 часа не гарантирован, но скорее всего мы успеем.

Старт 16:00 (Мск), Twitch - https://www.twitch.tv/maxpfrontend

Для новичков - быть обязательно, для "тех кто в теме" - думаю будет скучновато, но может быть вы подсмотрите что-то новое для себя.

Good news everyone 🙂
Стрим на Javascript/React для новичков, сегодня в 16 (Мск), подробности в посте выше.

Начинаем
https://www.twitch.tv/maxpfrontend

Салют, выложен стрим, на котором мы решали проблему прелоадера в legacy коде (react, redux, redux-saga).

Мне понравилось:
+ решили рабочий тикет
+ было много людей
+ были вопросы и подсказки

Мне не понравилось:
- приходится думать, чтобы "не спалить" ничего лишнего
- приходится редактировать видео перед публикацией
- не могу выложить исходный код полностью

Главный вопрос, набегут ли хейтеры. Так как мы работали в legacy коде, можем нарваться на недовольство "настоящих программистов", которые все переписывают и делают идеально. Поэтому рассчитываю на вашу поддержку в комментариях =)

Голосуйте лайком, если подобный контент интересен, если нет - сфокусируемся на другом.

https://youtu.be/RIzQQqAN4cs