Step by Step for Web
1.06K subscribers
280 photos
21 videos
24 files
196 links
шаг за шагом к Веб разработке.

Это история моего личного успеха и всех тягот становления разработчиком

Чат: https://t.me/+RX9j7nAotKsGCSM3
Связь: @AngryWebDev

English channel: @angryway
English chat: @angryway_chat
Download Telegram
И я совсем забыл сказать про github. Крестики нолики запушил туда.

Да и все последующие работы буду оставлять там.

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

Хотелось бы посмотреть, что интересного у вас.

😊👇
https://github.com/StepbyStepper
Доброе утро, друзья

Сразу перейду к обсуждению успехов и проблем на текущий момент.

Первое что хочу отметить, так это то, что я почти ежедневно пишу что то. Даже если слишком сильно хочу спать, я просыпаюсь в 1:00 ночи и до 3-4 утра что то разбираю.

Сейчас дописываю приложение, которое показывает погодные данные по запросу. Это учебное приложение на основе некоторых курсов. Позже расскажу каких, там тоже интересная история про то, кто у кого украл и об авторстве.

Проблемы были с такой штукой, как

Cross-Origin Resource Sharing (CORS)—механизм, использующий дополнительные 
HTTP -заголовки, чтобы дать возможность агенту пользователя получать разрешения на доступ к выбранным ресурсам с сервера на источнике (домене), отличном от того, что сайт использует в данный момент


По сути я не мог получить данные через API на другом сайте.

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

Ещё из хороших новостей взялся за подработку. Если все получится, опишу подробнее
Привет, друзья!

Наконец то я разобрался с погодным приложением. Как я вообще нашел этот материал?
Как оказалось там довольно мутная история.

После чтения некоторых туториалов на официальном сайте я пошёл на youtube. По запросу "react" вывел канал Гоши Дударя. Многие слышали про него, записывает кучу всякого и приглашает к себе на сайт для покупки его курсов.

Один из последних курсов у него, это как раз создание погодного приложения на react. Получается форма, куда вводишь город, через API получаешь данные с openweathermap.org и красиво выводишь результат.

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

Итог
Кто за кем повторяет и кто прав и виноват не имеет смысла выяснять. Наша задача получить опыт, знания и практику опираясь на этот материал. Рекомендую новичкам, довольно понятно и просто все описано. Особенно ясна для меня стала работа с API

Уроки по этому приложению👇
https://www.youtube.com/playlist?list=PL0lO_mIqDDFWjZpUTRJ8cBAsTJ5WFk4Cs

А тут англоязычные первоисточники👇
https://www.youtube.com/watch?v=204C9yNeOYI

👇
https://medium.com/@peterekeneeze/build-a-react-js-weather-app-with-stateless-functional-components-e61567004b54
Всем хороших выходных!

Я продолжаю разбираться с react по вот этой небольшой книге

https://maxfarseer.gitbooks.io/react-course-ru-v2/content/

Знаете, вначале много непонятного, но со временем, возвращаясь к той проблеме раз за разом, все становится на свои места.

Ещё у меня отличные новости

По поводу трудоустройства. Подвернулся хороший вариант для удаленки. Но нужно выполнить тестовое задание.

Мне специально дают задание, на тот стек технологий, которые я совсем не знаю, чтобы посмотреть как я решаю проблему в незнакомой обстановке. Это php и yii2.

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

Для кого то это может плёвое дело. Но для меня это будет нереальное испытание. Пока не знаю, с чего начать и как вообще все делать. Ещё нужно пробежаться по синтаксису php, ООП, посмотреть что за зверь yii2 и глянуть на базы данных

Всю работу нужно будет трекать через hubstaff. Это специальный софт, которые делает снимки твоего экрана и отслеживает всю проделанную работу.

На всю работу отведено 4 дня. Начинаю с понедельника.

Будет нереально тяжело, страшно и не понятно. Возможно буду делать посты чаще, что и как делаю. В реальном времени.

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

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

Пора начинать мой челлендж.
Подготовил рабочее место.

Настроил локальный сервер OpenServer, phpmyadmin.

Включаю тайм-трекер hubstaff.

Пока посмотрю как вообще можно организовать вывод данных из базы данных. Да и вообще посмотреть примерно, что и как работает.

Уровень понимания технологий:

📌 PHP - 1 %
📌 Yii2 - 0 %
📌 mySQL - 1 %
Всем добра и позитива

Вчера разбирался с основами php, mySQL. Yii2 пока совсем не трогал.

Разобрался с выводом постов на страницу из базы данных.

Попрактиковался в phpmyadmin.

В hubstaff пошло 2.5 часа.

С трекером времени ощущение того, что за тобой подсматривают в ванной. Но это дело привычки.

Уровень понимания технологий:

📌 PHP - 1.5 %
📌 mySQL - 1.1 %
📌 Yii2 - 0 %
Третий день разбираюсь уже

В сумме примерно часов 5. Маловато.

Сегодня хочу приступить к разбору yii2.

Уровень понимания технологий:

📌 PHP - 2 %
📌 mySQL - 1.5 %
📌 Yii2 - 0 %
Всем добра

Немного потерялся из поля зрения, но не перестал заниматься

Первые два дня я изучал php. Работу с базой данных, чтение, запись, вывод данных себе на страницу.

Потом не стал долго засиживаться и перешел к фреймворку yii2.

Порадовала официальная документация. Все описано и с большим количеством примеров.

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

Посмотрел работу с файлами, вывод, изменение статей. Добавление, вывод картинки, простые валидации, вчера начал смотреть как делать авторизацию на сайте

Для полного понимания нужно больше времени и практики. А пока только лёгкое касание.

📌 PHP - 6 %
📌 mySQL - 4 %
📌 Yii2 - 5 %
Всем добра и позитива, друзья

С тестовым проектом пока нет четкой определенности. Но пожалуй продолжу в лайтовом режиме. Скину код заказчку, что получилось на данном этапе

И конечно, я успел соскучиться по фронтенду и возвращаюсь к реакт. Чему я довольно рад.

Кстати, кроме документации хочу отметить курс на youtube от Marlin по Yii2. Очередной раз спасибо Рахиму за хорошие уроки.

🎄🎄 Merry Christmas!!! 🎄🎄

Всех с праздником, кто имеет отношение к этой дате! Счастливого и позитивного рождества!
This media is not supported in your browser
VIEW IN TELEGRAM
Хочется улыбок с утра!😀 Всем хорошего настроя.
О митапах

Вчера попал в местную IT тусовку. Это регулярные митапы на разнообразные темы. Неформальная обстановка, уютный паб, толковые спикеры и профессионалы своего дела. Все свои и знают друг друга.

Мне конечно было немного неуютно в том плане, что я никого не знаю. И так не познакомился и не поговорил ни с кем.

Но с удовольствием послушал два доклада:

1. “React через призму функционального программирования”

Доклад о преимуществах функционального подхода в React на примере ClojureScript.

2. “Мобильная разработка на React-Native + ClojureScript”.

Доклад о написании медицинского приложения под iOS на React-Native + ClojureScript.

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

Во первых это мотивация и настрой на работу.

Во вторых это взгляд на интересующую тебя тему под другим углом.
Ну и конечно общение, полезные знакомства и приобщение к профессии.
ПОЧЕМУ 0.3 - 0.2 НЕ РАВНО 0.1?

В нашем сообществе часто встречаю подобные вопросы. И настало время разобраться с этим. Мы ведь с вами будем копать в глубь.
(Возможно это будет целая рубрика статей на подобные темы, так как за один пост не описать)

Что мы имеем:

📌 Числа

0.3, 0.2, 0.1, ... - это числа. Которыми мы оперируем. Углубляемся дальше.

Число это основное понятие математики.

Развновидности чисел:
- Натуральные
- Целые
- Рациональные
- Действительные (вещественные)
- Комплексные

📌 Вещественные числа

Сегодня пока что остановимся (немного коснемся) понятия именно вещественного числа или действительного числа (от лат. realis — действительный).

Наглядно понятие вещественного числа можно представить при помощи числовой прямой.

Если на прямой выбрать направление, начальную точку и единицу длины для измерения отрезков, то каждому вещественному числу можно поставить в соответствие определённую точку на этой прямой.

Вследствие этого соответствия термин «числовая прямая» обычно употребляется в качестве синонима множества вещественных чисел.


📌 Представление чисел в компьютере

Замечание:
Количество вещественных чисел бесконечно, а память в компьютере фиксированного размера - конечна. Это означает что невозможно создать способ кодирования, который позволяет упаковать все множество (бесконечное) вещественных чисел в этот объем памяти. Поэтому получаются ошибки округления при расчетах

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

Представление целых чисел достаточно простое — выделяется необходимое количество разрядов для размещения чисел. Для представления вещественных чисел используются две формы записи: число с фиксированной точкой и число с плавающей точкой.

📌 JavaScript

Выражение, вроде "0.3 - 0.2 неравно 0.1", мы видим, представление в привычной нам десятичной системе счисления.

Но компьютер оперирует двоичными числами. То есть десятичные операнды имеют двоичное представление (последовательность нулей и единиц).

Некоторые операнды в двоичной форме могут представлять собой либо очень большие либо бесконечные дроби (чем и являются вещественные числа).

Так вот, числа то бесконечные, но на их хранение выделяется ограниченное пространство памяти.

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

Все числа в JavaScript, как целые так и дробные, имеют тип Number и хранятся в 64-битном формате IEEE-754, также известном как «double precision».

IEEE-754 - широко используемый стандарт IEEE, описывающий формат представления чисел с плавающей точкой. Используется в программных (компиляторы с разных языков программирования) и аппаратных (CPU и FPU) реализациях арифметических действий (математических операций).

IEEE - (англ. Institute of Electrical and Electronics Engineers) (I triple E — «Ай трипл и») — международная некоммерческая ассоциация специалистов в области техники, мировой лидер в области разработки стандартов по радиоэлектронике, электротехнике и аппаратному обеспечению вычислительных систем и сетей.
🎄 Поздравляю всех с наступающим Новым годом! 🌲

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

Спасибо вам, ребята🙂! Вы помогаете мне ценными советами, подбадриваете словами. Это придает мне мотивации. Мы развиваемся вместе. Это не только моя история успеха, но и ваша тоже.

Что я ожидаю от 2019?

📌 Я хорошо освою react.js. Тем более намечается вариант стажировок.

📌 Мой друг просит помочь с разработкой интернет магазина. Backend часть будет на мне. Скорее всего это будет cms OpenCart. Но тем не менее.

📌 Я буду пытаться пробиваться в ту компанию, где мне дали тестовое задание на php, yii2.

📌 Обязательно подтяну пробелы в нативном JS и обычной верстке.

📌 Конечно будет много английского.

Это самые основные направления. Что ж будет о чем писать😜
Подошли к концу длинные выходные и не запланированный отпуск

Отличное время было. Вполне доволен. Ощутил обалденное чувство свободы. Было много проведённого времени за компьютером.

Самое главное, чего я добился - это регулярности в кодинге. В этом году ещё не было перерывов.

Ежедневно погружен в React. Доработал книгу Пацианского. О чем на гитхабе подробно коммитил разные примеры. Некого рода шпаргалки для себя. Получил некоторое понимание работы с этой библиотекой. Но конечно, нужно закреплять полученные знания на практике больше и больше. Пока процесс идёт туго.

Вчера заинтересовала идея сделать чат на React. Чем и займусь в ближайшее время.

Так же уже пора браться за OpenCart. Работа не заставляет долго себя ждать. Нужно как можно скорее почувствовать вкус фриланса. И немного подзаработать.

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

Вот такое начало года. Нельзя терять ни дня и стараться качать скиллы лучше и быстрее 💪🙂
Привет! Бодрости духа и позитива вам

Всю прошедшую неделю я разбирался как сделать чат у себя в приложеии. За основу берется такой инструмент как Chatkit API

Это продукт лондонского стартапа, который предоставляет инструменты и облачную инфраструктуру для разработчиков. А разработчики добавляют в свои приложения функциональные возможности в режиме реального времени, такие как push-уведомления и чаты. Собственно сам продукт Chatkit это API с различными возможностями. Таким образом с помощью этого инструмента можно оживить свое приложение чатом без совего серверного кода.

Вот их сайт:👇
https://pusher.com/

И вводный туториал, который я и прорабатывал:👇
https://medium.freecodecamp.org/how-to-build-a-react-js-chat-app-in-10-minutes-c9233794642b
Хорошего настроения вам!

Все глубже и глубже проникаюсь фронтендом. Периодически возвращаюсь к пройденным темам. И все лучше и лучше начинаю понимать кухню построения приложений на react.js.

Если делать паузу на несколько дней, то могу что то забыть. Поэтому не стесняюсь повторять, темы, писать базовые и элементарные вещи снова и снова.

Копится информация из важных ссылок и тем, которые нужно освоить. И ими делюсь с вами:

Официальный блог. Там разработчики публикуют подробную информацию с описанием изменений и нововведений реакта:👇

https://facebook.github.io/react/blog/

Несколько популярных React-конференций, из которые можно почерпнуть свежую информацию о библиотеке. Публикуют на youtube:👇

React Conf (http://conf.reactjs.org/) — конференция, спонсируемая Facebook, в СантаКларе, Калифорния

React Rally (http://www.reactrally.com/) — конференция сообщества в Солт-ЛейкСити

ReactiveConf (https://reactiveconf.com/) — конференция сообщества в Братиславе, Словакия

React Amsterdam (https://react.amsterdam/) — конференция сообщества в Амстердаме.

Любопытно будет заглянуть туда. И практика английского и новые фишки не помешают.
Инструменты реакт-разработчика, которые могут пригодиться:

📌 React-detector - расширение для Chrome, позволяющее узнать, какие сайты используют React, а какие нет

👉 https://chrome.google.com/webstore/detail/react-detector/

📌 Show-me-the-react - еще одно средство, доступное для Firefox и Chrome, обнаруживающее React на сайтах

📌 React Developer Tools - дополнительный модуль, который может расширить функциональность стандартных инструменов разработчика браузера. Создает новую вкладку в инструментах разработчика, где можно будет просматривать элементы React.

👉 https://chrome.google.com/webstore/detail/react-developer-tools/
Продуктивного дня всем!

На несколько дней застрял на настройке конфигов webpack.

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

Суть проблемы. Смотрел один урок по react.js. И там обьяснялось, как использовать CSS модули. Все для удобства, так сказать.

Я шел строго по инструкции, но конфинг создавался немного другой. Я перепробовал кучу разных дополнительных пакетов, много раз создавал проект заново и с помощью yarn и с помощью npm. И все такое прочее.

А потом просто почитал документацию по create-react-app и по css-modules. И оказывается все должно работать из коробки. Только css файлы называем: name.module.css

Итог: На гайды надейся, а сам в доки смотри!

Некоторым может показаться забавным мой ступор на такой простой теме. Но тем не менее приятно, когда разобрался в проблеме.
А что же такое React?

Некоторые просто не знакомы с этой штукой, а кто то просто не задумывался. Я вот познаю его. И как без определения быть? Надо разобраться.

"React представляет собой библиотеку для создания пользовательских интерфейсов, которая помогает вам определить пользовательский интерфейс раз и навсегда.

Затем при изменении состояния приложения пользовательский интерфейс перестраивается для реагирования на изменения — и вам не нужно выполнять какие-либо доработки. Ведь вы уже определили пользовательский интерфейс.

Определили? Больше похоже на то, что вы его объявили. А для создания большого полнофункционального приложения вы воспользовались небольшими управляемыми компонентами.

Теперь уже половина внутреннего кода ваших функций не занимается охотой на DOM-узлы, и вам остается лишь отслеживать состояние state вашего приложения (с помощью обычных объектов JavaScript), а все остальное происходит в соответствии с этим состоянием."

@ Stoyan Stefanov
Добра вам и бодрости!

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

Да и сам теряю веру. Нужен результат. Это сам факт работы и деньги за проделанную работу.

Чем занимаюсь:

👉 Оформил резюме на хедхантере в качестве фронтендера.
Довольно таки много там вакансий для react-разработчика.


👉 Взял тестовое задание. Проект интересный. Очень хочу закрепиться. Это действительно тот проект, которым можно будет заниматься с удовольствием.

👉 Взял задание по работе с интернет магазином.

Работы много, времени мало. Самооценка на нуле.
Не знаю почему, но начало месяца всегда встречаю амбициозно

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

У вас тоже так?

Вчера снова побывал на местном митапе. Было пару интересных докладов.

Один из которых - это проблемы при работе со временем. Например при бронировании отеля. Как обрабатывать различные форматы, календари. Ведь есть и китайский календарь и еврейский, юлианский, григорианский и часовые пояса и все такое прочее.

И второй - это отказ от традиционных градаций junior/middle/senior и замена этих мерил на более индивидуальные черты характера человека в небольших компаниях.

Как и в первый раз непринужденная, дружеская обстановка и тусовка. Как говорится "банка с огурцами".

Так что будь огурцом-молодцом! Всем хорошего дня!

Если интересны посты про реакт и ES6 - то ставь очкарика - 🤓

Что то про фриланс - то ставь человеча в темных очечах - 😎