10

Строим ВебПриложение.Анонс

Меня зовут Владимир, я являюсь уже как 1 год и 4 месяца ведущим веб разработчиком в IT студии. В этой серии статей хотел бы поделиться с Вами шагами, которые помогут войти в эту профессию. Обещаю излагать максимально кратко и понятно :) (Сейчас как раз обучаю человека фактически с нуля, по этому буду тестировать сначала на нем, потом делиться с Вами). Надеюсь будет интересно :)

Собственно это пост анонс, благодаря которому я хочу понять- на сколько актуальна тут эта тема. Если одобрите, будем поэтапно разбирать след. технологии:

1. Каркас
1.1. HTML(поговорим о DOM )
1.2. CSS3

2.FrontEnd JavaScript
2.1.JS и с чем его едят
2.2.jQuery(фреймворк для работы с DOM)

3.Серверный язык
*тут все сложно, думаю к этому моменту определимся с тем к какому приложению хотят придти интересующиеся, но базово должен осветить как минимум 3(на мой взгляд востребованные технологии)
3.1. PHP7(пока голенький без всяких reactPHP итд что бы не путать)
3.2. NodeJS(Нативно больше подходит для написания реалТайм приложений, например месенджеров)
3.3.Golang(это просто многопоточное чудо, замечателен для микросервисов)

___

На этом основная часть думаю будет закончена, дальше(если это дальше вообще будет, зависит только от вас)- уже будем разбирать всевозможные библиотеки, фреймворки и другие вкусности :3

P.S.
//Для моих старых подписчиков
Про FO я не забыл :) Он вариться, но уже совсем в другом супе :) Как только буду уверен что не ударю в грязь лицом- выложу в открытый доступ все исходники :)

Дубликаты не найдены

+1

Подписывюсь! Буду ждать.

+1
Ведущему разработчику стоит прокачать навыки русского языка хотя бы до уровня джуниора.
раскрыть ветку 1
0

Так-то фраза "я являюсь уже как 1 год и 4 месяца ведущим веб разработчиком в IT студии" намекае.. )

Никого не пытаюсь обидеть, сам был таким "ведущим". :)

0

друг, насколько рынок frontend сейчас обеспечен специалистами? вижу большую популярность курсов по подготовке данных специалистов, полагаю что начать уметь в фронтенд дело нехитрое, 6-10 месяцев и любой сварщик/повар может верстать страницы.


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

раскрыть ветку 2
+1

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

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

Посмотрите вакансии верстальщиков в веб студии :)


________________

P.S.
Очень извиняюсь что с постами затягиваю, последние 2 недели вообще времени найти не могу, домой дай бог к 2 ночи возвращаюсь. Давненько такого потока задач не было, как с цепи сорвались :))

На следующей неделе планирую начать писать след. пост

раскрыть ветку 1
0

Ну к 2019 и до JS доберёмся.

0

[DELETE]

Сначала спросил, потом зашел в профиль)

0

Подписался, буду читать. Пиши плиз. Для чайников.

0

Чем дольше я этим занимаюсь, тем больше понимаю, что трачу жизнь на всякую херню)

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

Особенностей их Настройки)

раскрыть ветку 2
0

Так ведь программирование - это не только написание сайтиков на пыхе с ангуляром. Есть море направлений разработки, выберите своё. :)

раскрыть ветку 1
0
Вы супер классно сказали, но все сейчас перетикает в веб:) По секрету, недавно писали веб сервис удаленного управления контроллерами гидростанции:)
0

щас тебя заклюют за jquery в 2k18.

раскрыть ветку 1
+1
Возможно, но до сих пор считаю это самой удачной реализацией для работы с DOM, во всяком случае для новичка) и естественно сначала мы прокатимся по ванильному js

Ps
Более современные вещи планирую разбирать в отдельной серии :) В одной из них будем на реакте строить end-to-end месенджер с использованием react-native для последуюшего развертывания полноценных mobileApp :) Все впереди, если пожелаете :)
0

Хабрахабр в другом окошке

раскрыть ветку 7
0

На пикабу это не актуально? Собственно для этого анонс и запустил :)

раскрыть ветку 6
+2

Всё актуально, пиши! Зефиркин просто читать не будет

раскрыть ветку 4
0

Актуально для пикабу, не обращай внимания на них ))

-1

Чё там написано? Какая-то чушь на эльфийском

раскрыть ветку 1
0

Надеюсь, что ваш основной язык не орочий.)))

Похожие посты
126

Во все тяжкие: Веб-разработчик с нуля. 1 год

Во все тяжкие: Веб-разработчик с нуля. 1 год IT, Программирование, Карьера, Javascript, Веб-Разработка, Frontend, Web, Длиннопост

"Еще до встречи с Юнаковым он уже жил по правилу: не отступать и не теряться. Не вышло—повтори. Правило, чем-то напоминающее цирковой обычай: не удался прыжок, упал с лошади или с проволоки — повтори, не откладывая в долгий ящик, повтори, преодолевая боль и страх, повторяй до тех пор, пока не добьешься своего, иначе тебе никогда не избавиться от неуверенности в решающий момент. Александр Крон - "Капитан дальнего плавания".


ЦельSenior Frontend Developer.

Язык: JavaScript.

Возраст: 29 лет.

Работа (настоящее время): Trainee Frontend Developer в компании "Корус Консалтинг СНГ".

Локация: г. Санкт-Петербург.


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


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


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


К чему это я веду? К тому, чтобы глядя на мой пример, вы ни в коем случае, не закрывались в четырех стенах с компьютером в обнимку. Со стороны может показаться, что моя история - это история человека, который решил "жить программированием", что он только и делает, что программирует и больше ему ничего не интересно. Нет, это не так.


Моя жизнь не заканчивается программированием. Для меня программирование сейчас - это лишь сфера, которая мне показалась год назад очень хорошей для того, чтобы освоить определенные навыки и почувствовать под ногами опору в профессиональной сфере. Сейчас она мне кажется до сих пор такой сферой. Получилось ли это? Еще нет, я в начале пути, но определенно кое-какие успехи есть, и чувствую я себя увереннее. И я абсолютный противник такого образа жизни, при котором мышление человека фиксируется на одной плоскости и практически никогда оттуда не смещается. Иногда, да, требуется длительная фокусировка на сфере, но не фиксация.


Что касается программирования - то это обычная профессиональная плоскость, со своими особенностями и определенными требуемыми навыками. Она интересная, как и многие другие сферы, но она не особенная.


Сейчас у меня начался второй месяц стажировки и учебы в компании "Корус Консалтинг СНГ". Могу с уверенностью сказать, что за этот месяц я понял и освоил, с помощью преподавателя, больше, чем за несколько месяцев самостоятельной работы. Это к тому, что если есть возможность учиться у кого-то, кто уже прошел такой же путь - то обязательно делайте это. Еще я понял, что конкретные технологии абсолютно не имеют значения. React, Vue, Angular... это все не важно. Если вы понимаете главные принципы построения программы, принципы взаимодействия ее частей и тот язык на глубоком уровне, на базе которого происходит всё это построение, то вы очень быстро перейдете на любую абстракцию и будете спокойно ее использовать.


Меня недавно спросили -"Как закреплять элементарные основы по JS (if, for, простые функции) на практике? откуда брать задания? с задачами на learn-javascript я более менее справляюсь, но этого мало."

Хочу написать для всех. Задайте себе вопрос: К чему вы идете? Вы хотите научиться решать задачки с Codewars или вы хотите устроиться в компанию и решать коммерческие задачи, тем самым зарабатывая деньги? Если ответ второй, то тогда начните с тестовых заданий в компании (или компанию, если есть такая, в которую вы хотите попасть). И пляшите от тестового задания. Всё, что вам необходимо знать и уметь для решения этой и подобных задач, с полным понимаем, того что вы делаете, и будет тем, куда вам необходимо прикладывать усилия. Про собеседования, на которых вас заставляют решать задачи, абсолютно никак не связанные с будущими задачами на работе - я промолчу.


В связи с этим, я решил помочь таким же как и я и создал базу тестовых заданий для frontend разработчиков. На данный момент она пополняется исключительно теми заданиями, которые присылали мне. По мере возможности, я буду ее пополнять. Я думаю, еще порядка 15-20 заданий, я в ближайшие дни туда выложу. Так же, приветствую пулреквесты. На гитхабе есть подобный репозиторий, но там очень мало тестовых, и в основном задания от крупных компаний. Но ведь больше как раз маленьких компаний, и было бы хорошо +- понимать, какие тестовые могут быть в этой компании и вообще, какие навыки и знания будут требоваться при работе там, с учетом особенности сферы и т.д. С другой стороны это позволит работодателям не расслабляться и постоянно менять тестовые. Дабы действительно брать на работу только тех, кто решил задачу, а не тех, кто скопировал решение из чужого репозитория или канала на ютубе, а потом будет сидеть и тупить на работе.


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


На этом я хочу сегодня закончить. Развиваемся дальше. Впереди у меня еще месяц стажировки, TypeScript и React. Но об этом в следующем отчете.


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



Артем OWIII.

Контакты: Instagram, Github.

Показать полностью
146

Во все тяжкие: Веб-разработчик с нуля. 11 месяцев

Во все тяжкие: Веб-разработчик с нуля. 11 месяцев IT, Программирование, Карьера, Javascript, Веб-Разработка, Frontend, Web, Длиннопост

А вот теперь меня уволили.. Месяц был насыщенным.. И не веселым.


Цель — Senior Frontend Developer.

Язык: JavaScript.

Возраст: 28 лет;

Работа (настоящее время): - Trainee Frontend Developer в компании "Корус Консалтинг СНГ";

Локация: г. Санкт-Петербург.


Привет всем моим подписчикам! Как вы там? У кого какие успехи?


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


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


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

Компания американская, стартап из Силиконовой Долины. Проект - свой браузер (расширение, надстройка над браузером на базе Chromium). Я подумал - крутой проект, плюс работа удаленная, зарплата в долларах, я не один фронт на проекте - предел мечтаний просто. Созвонились по скайпу с ведущим фронтом, я ответил на все вопросы, рассказал о своем небольшом опыте, вроде все обсудили и обо всем договорились.


Часа через два я  уже общался по видеосвязи с руководителем и инвестором стартапа, который сидел в солнечной Калифорнии и рассказывал о работе в их команде.


Еще через час я уже сидел и читал договор на английском и искал в нем пункт о продаже почки. Но нашел только свою зарплату в долларах. Если перевести в рубли, то примерно зарплата миддла в РФ. В общем, все подписал, мне выдали все доступы ко всяким jiraм и корпоративным почтам. Я не мог нарадоваться! Завтра в бой, с утра на митап или как там это называется. Знакомство с командой! Уже представил в мыслях как через пару месяцев смогу загорать на Бали и работать под пальмой. Но рано радовался..


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


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


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


Но спустя пару часов руководитель и инвестор всего проекта предложил созвониться. Я почувствовал что-то неладное. По его тону я понял, что это всё. Говорил, что-то вроде: "Руководитель фронтэнда говорит, что переоценил свои возможности по обучению и уделению времени джуну" . В общем, они не готовы были вкладывать время в мое обучение. Он предложил прекратить сотрудничество и компенсировать мой рабочий день, но чего уж там.. Мне было не до этого. Я расстроился. Это был удар. Неожиданно просто все произошло, вот я и приуныл.


Изначально то мне сказали, что мы начнем с простых задач и потихоньку будем усложнять и делать задачи сложнее. А по итогу даже не дали времени на освоение их стека. Один день - это мало, я считаю. Но у них скоро должен был быть релиз, видимо из-за этого меня быстро отправили восвояси. Хозяин барин. Что сказать.


Вот так прошел мой первый и последний день работы в американском стартапе из Силиконовой Долины.


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


Далее я встряхнулся, сделал выводы и написал в ту компанию, в которую должен был идти на второй(очный) этап тестирования и объяснил ситуацию. И мне пошли навстречу, предложили сделать тестовое удаленно! Но оно было на время, ровно на 4 часа, с контролем времени. И вот на следующий день я выполнил эти два задания. Честно говоря, давно так не стрессовал. Еле уложился в 4 часа. Всё, сдал. Отправил.


Через пару часов получил фидбек, что сделал все замечательно и меня принимают в их проект. Что за проект вы спросите? Дебютный проект компании "Корус Консалтиинг СНГ". Крупная компания, дочка Сбербанка. Суть проекта - это два месяца оплачиваемой учебы (по срочному договору), вы учитесь и вам платят среднюю зп джуна по рынку! Не круто ли? После - трудоустройство в один из их проектов. А там ДМС, белая зп, английский и всякое такое.


Сегодня закончился третий день учебы. И знаете что? Это то, что мне было необходимо. Преподаватель, код ревью, лекции - очень интенсивная учеба и не простые практические задания. Нас в проекте 6 человек, возраст ребят и одной девушки от 22 до 30 лет. Мы общаемся, обмениваемся опытом, в общем - круто. И еще плюс: сегодня нас перевели на удаленку, в связи с чем - сами понимаете :) Стало еще удобнее.


Такие дела. Не останавливаемся и движемся к цели!


Ну и по традиции. Что я сделал и изучил за последний месяц:


1. Дочитал книгу "Грокаем Алгоритмы". Кто подписан на мою инсту уже давно в курсе;

2. Разобрал примерно половину книги Мартина Фаулера "Рефакторинг кода на JavaScript";

3. Разобрал процентов на 20% книгу Эрика Хэнчетта "Vue.js в действии".

4. Написал пару приложений( пару недописал) и мини проектов. Искать в гитхабе.

5. Я оформил свое резюме прямо в гитхабе. Как вам?

6. Посмотрел конференцию от Яндекса «Я ❤ Фронтенд 2020»; рекомендую!

7. Посмотрел конференцию от Яндекса «Я ❤ Фронтенд 2019»; рекомендую!

8. Сходил на конференцию Piter JS #45;

9. Познакомился с библиотекой Lodash;

10. Познакомился и попрактиковался с шаблонизатором Pug;

11. Познакомился и сделал пару проектов по WebGL(Tree.js);

12. Посмотрел где-то 1/4 курса ШРИ 2018 года от компании Яндекс.


Ну, что ребята? 11 месяцев позади и кажется, что у меня вот только-только что-то начинает получаться осознанное. Так, что кто думает, что можно стать более менее понимающим веб-разработчиком за 3-4 месяца - чушь. Вспоминаю свои первые собесы - стыд и срам.


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


Успеха Вам! Подписчикам здоровья и удаленной работы в этой больной мировой обстановке! До встречи через месяц!


Артем, OWIII.

Показать полностью
294

Пост про современный фронтенд

Пикабушники народ странный. И методы у них странные. Но, что занимательно, эти методы работают. Не так давно я оставил безобидный комментарий про JS, и, по нелепому стечению обстоятельств, неожиданно попал под радары половины сайта и получил что-то около четырехсот подписчиков. Почему? А не знаю. Люди просто подписывались на меня, хотя я ничего им не обещал. Даже не давал намеков. Ты оставил комментарий про JS, я на тебя подписался и теперь ты мне торчишь целый пост про JS. Не знаю, как это работает, но раз вы это читаете, то их план исполняется.

Пост про современный фронтенд Javascript, Nodejs, Длиннопост

Само собой, я понятия не имел о чем писать. Уроков и без меня хватает на любой вкус и цвет. И серьезных и несерьезных. Но потом я, все таки, задумался. Прям со всей силы. И как итог, додумался до этого поста. Очень надеюсь, что это единственное, что я напишу про JS, только чтобы вас, четырех сотен, не разочаровывать. Я не особо то горю желанием писать целые курсы, да и куда уж мне, скажем прямо


А рассказать я хочу о том, о чем сам бы очень хотел услышать в начале своего обучения, когда робко вступал на территорию бесконечной содомии и анархии под общим названием “Современный фронтэнд”. Некий экскурс, объясняющий общие понятия и положение дел, чтобы было проще разобраться в ситуации. Наверняка этому посту найдутся аналоги, и в свое время я просто плохо их искал. Однако, хуже от еще одного никому не станет, верно? Так что, будем посмотреть.


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

Node.js


Разумеется, мы начнем именно с node.js, вокруг которого сейчас все и крутится. Если вы никогда с ним до этого не сталкивались, то наверняка задаетесь вопросом, на кой хер он вам вообще нужен и почему его тычут вам в лицо каждый раз, когда вы пытаетесь изучить какую-то современную фронтенд библиотеку или фрэймворк?


И я вас прекрасно в этом понимаю. Когда я пытался в это вникнуть, меня сбивал с толку этот node.js. Я очень хотел изучить какой-нибудь крутой и современный фреймворк по типу React, Angular или Vue. Но каждый раз, когда я пытался это сделать, диктор из видеоуроков упорно начинал с node.js, который я не понимал от слова совсем. Это сильно сбивало с толку, а все из-за одного единственного нюанса.


Почему то, по какой-то совершенно тупой причине, многие продолжают называть Node.js не иначе, как серверный JavaScript. Само собой, от такого определения я начал считать, что все современные технологии для фронтенда работают исключительно с серверами, написанными на JavaScript. Иначе почему Node.js преследует меня повсюду, хотя в сервера я пока лезть не хочу. Ну ладно, думаю я, раз везде нужен этот Node, то изучу Node. Но в каждом уроке по Node мне втирали какую-то совсем уж невразумительную дичь. Очень долго я мучался, пока не нашел то, что описало мне смысл в общих чертах.


И сейчас я постараюсь все расставить по своим местам.


Начнем с того, что JavaScript (только не упадите) — это скриптовый язык. Что это значит? Это значит, что программы для этого языка пишутся в обычном текстовом файле, отличающимся от обычного файла только другим расширением. И все, вот она ваша программа. Открываете блокнот, пишете там console.log(‘Hello World’) и сохраняете в формате .js. Вот и все, ваша программа готова. Вы восхитительны.


Появляется логичный вопрос, раз команды пишутся в обычный текстовый файл, то как нам его запустить? Как заставить эту программу работать? Ответ — скормить этот файл интерпретатору. Это такая программа, которая нужна для исполнения скриптовых файлов. Она их открывает и начинает выполнять строчка за строчкой. Не самый быстрый способ в сравнении с теми же компилируемыми языками, которые просто один раз перегоняются прямо в машинный код и потом запускаются на любом ведре схожим с тем, на котором они были написаны. Но зато, в отличии от них, скриптовый язык запустится на любом ведре, на котором запустится его интерпретатор. Кроссплатформенность!


Каждый скриптовый язык работает так. И Python, и PHP, и, прости господи, Perl. И у каждого свой интерпретатор.


Где же нам, тогда, взять интерпретатор для нашего JS? Ну, самое очевидное — использовать браузер, куда он, само собой, встроен по умолчанию. Браузеры, можно сказать, это естественная среда обитания JS. Вам придется постараться, чтобы найти в сети сайт, работающий без единой строчки этого, позвольте выразиться, кода (DarkWeb не считается!). А заодно, можете попробовать найти в современном мире хоть одно устройство, на котором этого самого браузера нет. Сейчас они везде. Буквально. А раз браузер — это интерпретатор, значит, ваша замечательная программа сработает на любом из этих устройств. Теоретически, само собой.


Но вот проблема, браузеры запускают JS скрипты внутри своей собственной среды, и не дают им никакого доступа во внешний мир. Ваша JS программа, в отличии от любой другой, может действовать только в рамках этого самого браузера, и не может управлять, к примеру, файлами, не может взаимодействовать с операционной системой, с устройствами подключенными компьютеру и так далее. Она изолирована. Для безопасности, само собой. Только представьте, какой был бы ад, если бы любой сайт имел полный доступ к вашему компьютеру. Но с другой стороны, какие безграничные были бы возможности!


А так, не покидает чувство, пардон, стерильности этого языка. И тут на сцену врывается NODE.JS! Платформа (читай как интерпретатор), которая позволяет вам запускать свой ненаглядный JS прямо из под операционной системы, а не из под браузера! Ваш любимый жаваслипт больше не хер собачий, нужный только для написания жалких сайтиков! Теперь, на нем можно писать настоящие взрослые программы! Можете теперь смело подойти к вашему знакомому Python программисту, который всю жизнь смотрел на вас как на говно, расстегнуть ширинку, и вывалить ему на стол ваш огромный мощный движок V8 (Не автомобильный, просто так интерпретатор назвали. Ну круто же! V8!)


И да, само собой, на Node.js можно написать и сервер, кто же вас остановит. Именно написать, потому что, опять таки, из-за того что node все называют серверным JavaScript, многие думают, что можно просто его скачать, установить, и сразу получится нечто вроде PHP в придачу со встроенным в него Nginx. А потом оказывается, что ничего такого там и в помине нет, и чтобы сервер заработал, надо его сначала написать. Доколе!


Но не будем о серверах. Мы уже поняли, что node не только про это. Но по прежнему непонятно, нахрена он нам нужен, ведь приложения для компа мы тоже писать, вроде как, не планировали. Пока.


А нужен он для удобства. На основе node.js мы будем создавать для себя собственную среду разработки. Мы, конечно, будем писать на JavaScript очень многое, ведь мы, все таки, фронтенд разработчики. Вот только этот код, пусть он и написан на JavaScript, исполняться на Node не будет, Node будет работать только с нашими файлами, ведь в отличии от браузерного JS он это умеет!


Более того, он не умеет многое из того, что умеет браузерный JS, так что большую часть кода, даже банальный и всеми любимый alert() вы там не запустите. И это логично. Как вы обратитесь, к примеру, к объекту window, который есть в браузере, если в node.js никакого window не существует?


Знаю, о чем вы думаете. Ты тут столько времени объяснял, что теперь наш JS может работать на компе, но теперь говоришь, что мы этот код даже запускать на Node не будем. Какого хера...


Сейчас все объясню подробнее.


Давайте вернемся в прошлое (для кого-то, впрочем, все еще настоящее, но это мы и пытаемся исправить). Раньше, разработка фронтэнда представляла собой подключение пары библиотек через обычный тег <script>, пару собственных скриптов и, конечно, CSS стили. HTML, CSS, JS. Все прекрасно и лаконично.


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


И сам JavaScript, будь он неладен, не стоит на месте! Он обновляется, в него добавляют новые возможности, делают его удобнее а иногда даже исправляют в нем старые косяки. И ведь очень хочется писать на самой свежей и красивой версии, со всеми ее возможностями. Но, конечно же, эти современные версии не поддерживаются старыми браузерами. Как быть? Ну, либо писать на старых версиях, либо на новой, но потом перегонять ее в старую. С помощью онлайн утилит, вроде babeljs.io/repl. И так каждый раз. Не очень то удобно. Особенно если вы там накодили на целый вагон.


Да и кому, в общем то, нужен этот идиотский нелогичный JavaScript? Хочу писать на новом, модном, молодежном TypeScript! А вот потом, когда я напишу на нем свою роскошную программу, я перегоню ее уже в JS. А потом этот JS перегоню в JS старой версии, для больше поддержки. А потом то, что получилось, еще прогоню через оптимизатор, для экономии места. Не такая уж и длинная цепочка.


Но и этот HTML уже достал, честно говоря. Шаблонизатор хочу! Буду теперь клепать странички с околосветовой скоростью на pug, потом pug превращать в обычный HTML, и уже туда вставлять свой пережатый перетранслированный JS. Ну и сжимать в конце. Скорость загрузки - наше все! Нам дорог каждый килобайт.


Ах да, забыл, только лохи в 2К20 прописывают стили на лоховском CSS. Все уже давно пересели на Less, SCSS, SASS и тому подобное, с шикарными возможностями, невероятным удобством и мега скоростью! Но да, надо бы сжать да перегнать.


Благодаря всем этим технологиям мы оптимизировали скорость нашей разработки в разы! Да, мы потратили полдня чтобы все это в итоге привести обратно к HTML, CSS и JS, чтобы хоть какой-то браузер нас понял, но мы по прежнему восхитительны и современны!


Вот для чего вам нужен Node.js. Для автоматизации. Только представьте, что у вас есть огромный набор исходных файлов, все разбросанные по своим папочкам, с идеальной архитектурой, на каких угодно технологиях. Современный и большой проект! А потом вы ввели одну единственную команду в консоль и начала происходить настоящая магия! Все это дерьмо превратилось в обычную статику! На выходе вы получаете самые обычные HTML страницы, в каждую из которых подключен всего один общий файл со всеми вашими стилями, сжатый и переведенный в обычный CSS, да еще и с автоматическим добавлением всех этих надоедливых префиксеров и костылей для старых браузеров. И всего один единственный JS файл, в котором объединены все ваши скрипты и весь код из ваших библиотек. Причем, только нужный код! И да, само собой, все сжато и в самом поддерживаемом формате. По итогу, проект, который в исходном виде весил под сотню мегабайт, на выходе превратился в набор страничек общим весом в 5 килобайт! Это ли не чудо?


Я вам больше скажу, вы можете даже не утруждать себя вводом этой единственной команды каждый раз, после любого изменения в файлах! Запустите другую команду, всего единожды, и она запустит вам локальный сервер, куда забросит все ваши файлы в уже готовом виде, и будет обновлять их каждый раз, как только вы что-то поменяете в ваших исходных файлах! Даже открытая страница в браузере перезагрузится сама собой!


О, вам и этого мало? Тогда я подготовил вам напоследок самое сильное колдунство. Истинное мракобесие и самую темную сторону магии! Страница может даже не перезагружаться! Ее части просто будут заменяться динамично! Вы можете разместить на ней текстовую область, напечатать что-то в ней, потом вернуться в редактор и изменить атрибуты тега или внешний вид этой же самой текстовой области. У вас даже текст внутри нее не пропадет! Состояние вашего приложения сохранится неизменным, и это не дешевые фокусы, перезагрузки реально не происходит.


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


Для того, чтобы установить себе node, вам надо тупо его скачать с официального сайта. Ничего сложного в его установке нет.

NPM


Итак, с Node.js мы разобрались. Он крут, офигеннен и V8. Вот только это просто платформа для запуска программ. Самих программ для этой магии еще попусту нет. И не самим же нам их писать! Мы установим готовые модули для Node.js.


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


После того, как вы установите node.js на свой компьютер, сразу вместе с ним установится програмка npm. Npm - это менеджер пакетов. Именно эта штука будет отвечать за загрузку нужных вам модулей и библиотек из общего репозитория. И не только за загрузку, но и за установку, обновление, удаление и так далее и до бесконечности. На то она и менеджер. И чтобы прикоснуться к ее чарующему миру, нам нужно просто напросто создать новую папку с названием вашего блистательного проекта. Желательное, конечно, называть латиницей, без всяких пробелов и спец знаков, иначе потом будете долго выть.


Тут начинается страшное. Для многих. Консоли! Но какими бы страшными они не казались, к ним придется привыкать, ибо работать через них придется много. Очень скоро вы поймете, что консоль - ваш друг. Ну и будете чувствовать себя мамкиным хакером.


К счастью, там ничего сложного. Разберетесь. Просто заходите через консоль в вашу созданную папку и инициализируете там проект npm. Инициализация будет представлять из себя создание в этой папке служебных файлов npm. И пока он их создает, он будет спрашивать вас кое-какие вещи, чтобы заполнить информацию об авторе. Можете пока все пропустить, это не суть как важно. Важно то, что в конце он создаст важный файлик - package.json.


В этом файле будет прописана информация о проекте, его название, его версия, все это вы можете менять как вам захочется. Информацию о вас, как об авторе проекта, информацию о лицензии проекта, если таковая имеется, а также список всех установленных вами библиотек и их версий. Список будет пополняться, когда вы что-то устанавливаете. А можно пополнять список самостоятельно а потом приказать npm свериться со списком и установить недостающее. Именно поэтому этот файл так важен, потому что вы можете просто перенести его куда угодно, инициализировать установку, и npm сам скачает все прописанные библиотеки, в нужных вам версиях.


Таким нехитрым образом, вам не обязательно повсюду таскать с собой огромную папку node_modules, куда устанавливаются все библиотеки. Они сами установятся, был бы package.json.


У npm есть альтернативы. Самый популярный из которых Yarn. По факту, то же самое, только лучше, быстрее, выше, сильнее. Можете установить его. Само собой, это уже отдельная программа, а не модуль для node. Ее вы просто ищите и скачиваете в интернете с официального сайта.


Также, стоит упомянуть и то, что при установке любой из библиотек в папке node_modules появится не одна единственная папка с нужной вам библиотекой. Все слегка сложнее, но не пугайтесь, вам об этом заморачиваться не придется. Устанавливаемая вами библиотека для своей работы может использовать другие библиотеки. А те — третьи. И так далее, до победного конца.


В этом и прелесть менеджеров, что он сам этим всем занимается, иначе это было бы попусту невозможно для человека. Например, в одном из своих проектов я использую 24 модуля. А в папке node_modules их уже 807. Такая вот арифметика. Кажется страшным, но на самом деле это здорово. Чтобы один и тот же код не повторялся в нескольких библиотеках, они используют какие-то общие библиотеки. В конечном счете, это позволяет значительно уменьшить повторяемость кода а значит и выходной вес объединенного файла. Просто помните, что каким-то мистическим образом из всех этих файлов будет выбрано только все самое нужное и сожмется в считанные килобайты.

Webpack


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


Сразу предупрежу, что с его настройкой вам будет тяжко. А настраивать его придется. Из коробки он умеет работать только с JavaScript файлами, причем самыми обычными. Сейчас я объясню как именно он это делает.


Вы задаете ему точку входа. Это ваш главный js файл. Вы указываете где он хранится и что с этим файлом надо будет делать. Например, в классическом примере, он находится в папке src и называется index.js. Он его берет и помещает туда, куда вы ему пропишете в настройках. По умолчанию это папка dist, а сам файл будет называться, по умолчанию, bundle.js.


Но не будете же вы весь код хранить в index.js, так ведь? ТАК ВЕДЬ?


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


Как только он находит эту команду, то он переходит к указанному в ней файлу, и начинает обрабатывать его. Если тот файл тоже подключает какие-то дополнительные файлы, то он продолжает путь дальше. И таким образом, от точки входа он проходит по всему дереву вашего проекта, а на выходе выдает объединенный файл, или, как его принято называть, бандл. О нем мы уже говорили.


И тут есть одно очень важное отличие, которое может сбить с толку тех, кто раньше подключал библиотеки и скрипты только через теги script в HTML файле. Сейчас попробую на пальцах его объяснить.


Если вы в ваш HTML файл подключите два скрипта, то они, как бы, склеятся в единую программу. Как будто это один файл. И если в первом файле вы объявили какую-то переменную, а потом решили вывести его во втором, то это сработает.


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


Все остальное в нем — закрыто. Если в вашей точке входа вы сделали импорт двух JS файлов один за другим, то надо помнить, что они независимые модули. Если в одном файле вы объявили переменную, а во втором файле вы попытаетесь ее вывести, то ничего не сработает. Второй файл ничего не знает о переменных, которые находятся в первом файле. И даже главный файл, в который вы импортировали оба этих файла, ничего об этой переменной не знает. Логика каждого отдельного файла инкапсулирована и недоступна для любых других. Это как кокон, у которого есть только вход и выход. Что то импортируется на вход и экспортируется через выход. Что там происходит внутри кокона — секрет)


Откровенно говоря, при попытке импортировать эти два файла в ваш index.js не произойдет вообще ничего. Они просто отработают и все. Разве что второй файл выведет ошибку, так как во время работы он попытается вывести переменную, которой для него не существует. А вот первый файл, по сути, вообще ничего не сделает. Да, он создал переменную. Которая так в нем и осталась.


Но нам не хочется, чтобы они просто работали. Нам хочется получить от этих файлов какие-то данные или какие-то функции, которые мы просто выделили в отдельный файл для удобства. Как же тогда использовать весь этот код и/или данные, если они инкапсулированы внутри файла и доступа к ним нет?

Собственно - экспортировать. Вы можете сделать один общий экспорт в конце файла, тогда у файла будет только один выход для данных. В случае с первым файлом, мы объявляем нашу переменную, и в конце ее экспортируем.


let importantNumber = 42
export default importantNumber

Вот и все, число 5 пошло на экспорт. Именно число, а не сама переменная. В нашем главном файле мы можем задать любую другую переменную для этого числа. Вы можете даже переменную не использовать, просто написать export default 42. И это сработает.


import bukvalnoLubayaPeremennaya from './fileOne.js'
console.log(bukvalnoLubayaPeremennaya) //42

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


Главное, что нужно уловить из всего этого, это то, что мы не импортируем файл. Мы импортируем что-то из файла.


Точно так же вы подключаете библиотеки и модули. Просто вместо адреса файла вы прописываете название плагина, а он уже автоматически найдется в node_modules. Вы подключаете библиотеку каждый раз заново в тех файлах, где она вам нужна. И не подключаете там, где не нужна. Некоторые библиотеки экспортируют все и сразу, некоторые могут экспортировать функционал по кускам.


const $ = require('jQuery');

Здесь мы назначили jQuery привычную переменную в виде доллара. Но можем любую другую. Как я уже сказал, require это почти то же самое, что и import. Об их различиях (кроме того что одна из них новая а другая - старая) почитаете как нибудь сами.


Ну вот, с JS мы более менее разобрались. Но только лишь с ним.


Вспомним опять import и require. Import более новая и удобная возможность, вот только она не будет работать. Почему? Потому что это возможности новой версии языка JavaScript (на самом деле ECMAScript, но не заморачивайтесь), и они не поддерживаются. Зачем мы тогда написали import, а не require? Вот тут то и начинается самое интересное. Мы будем перегонять написанный нами код из новой и удобной версии - в старую, но поддерживаемую. И рыбку съедим, и пик точеных избежим.


Для этого существуют специальные плагины для вебпака, называемые лоадерами (loaders). Мы прописываем специальные инструкции, согласно которым вызывается тот или иной лоадер. В данном случае, мы хотим, чтобы каждый раз, когда вебпак сталкивался бы с файлом формата .js, он запускал babel-loader. Этот лоадер, в свою очередь, автоматически запустит для файла плагин, который называется просто babel (Если вы помните, сайт для перегонки, который я скидывал, был babeljs.io/repl). Нам надо установить в наш проект и сам babel, и babel-loader который служит перемычкой между babael и webpack, а так же один из пресетов для babel, что то вроде настроек. Порой лоадеры не работают сами по себе.


И вуаля! Наши новомодные import и export прекрасно работают, потому что babel перевел их в старый формат за нас.


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


Например, вы можете импортировать в ваши js файлы не только другие js файлы, но и какие только захотите! Хотите импортировать css? Пожалуйста. Так и пишите

import './style.css'


Но как? Да очень просто. Вебпак все так же продолжает гулять по файлам через эти импорты, и каждый раз смотрит на то, что и с каким файлом надо делать. Ага, попался js, значит, надо прогнать его через babel-loader. Ага, а теперь попался css, значит, надо прогнать его сначала через css-loader, а потом еще и через style-loader.


Да, лоадеров может быть несколько для одного и того же типа файлов. Выполняться они, в таком случае, будут поочередно (почему то начиная с последнего. Просто запомните этот факт чтобы меньше ломать голову при настройке)


Например, импортировали мы файл в формате SASS. На этом типе файла у нас в настройках висят сразу 3 лоадера. Первый это sass-loader. Он берет файл и превращает его из sass в обычный и привычный нам css. Потом уже идет css-loader, который добавляет поддержку такого импорта. В конце идет style-loader, он берет весь этот css и вставляет его в шапку нашей будущей страницы. Т.е объединяет все собранные стили и прописывает прямо в HTML.


Вместо style-loader можно использовать, к примеру,  mini-css-extract-plugin. Он, в отличии от style-loader, не прописывает стили в шапку страницы, а собирает их в отдельный файл css и просто его подключает. Прямо как bundle.js.


И так вы можете делать для всех типов файлов. Картинки, шрифты, HTML - все что угодно. Главное для каждого прописать свои правила, что с этими файлами делать и куда их складывать.


Отдельного внимания заслуживает HTML, потому что, как правило, не HTML подключают в JS, а наоборот. Для этого есть html-webpack-plugin, он тоже прописывается в настройках вебпака и в нем явно указывается ссылка на HTML. Именно этот плагин скопирует эту HTML страницу куда надо, сделает с ней что надо, и, самое главное, сможет встроить ссылку на получившийся бандл прямо внутрь. Вам не придется прописывать ее самому.


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


Но что там с локальным сервером разработки? Это плагин webpack-dev-server, который, во многом, использует тот же самый файл с настройками вебпака. Только не создает готовый проект а разворачивает сервер для удобной разработки. Сам следит за обновлениями в файлах, сам обновляет страницу, и именно к нему можно подключить модуль замены содержимого без перезагрузки.


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

Фронтэнд и Бекэнд.


Если вы вдруг хотите начать писать и бенкенд на node.js, то у вас может что-то переклинить в голове, ведь теперь и там и там будет JS, как же его отличить друг от друга?


Ну, код сервера уже будет исполняться самим node.js, и настраивать его нужно так, чтобы он работал уже с готовыми файлами, которые подготовит вам вебпак. Вам придется отказаться от прелестей, которые даст вам webpack-dev-server, потому что заставить их работать синхронно - та еще задача. Но с другой стороны, представить себе ситуацию, где вам нужно прям одновременно работать и с фронтендом и с бенкэндом в одно и то же время — достаточно сложно.


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

Итог


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

Показать полностью
196

Во все тяжкие: Веб-разработчик с нуля. 6 месяцев

Во все тяжкие: Веб-разработчик с нуля. 6 месяцев IT, Программирование, Карьера, Javascript, Веб-Разработка, Frontend, Web, Длиннопост

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


Цель — Senior Frontend Developer.

Язык: JavaScript.

Возраст: 28 лет;

Работа (настоящее время): Junior Frontend Developer (контракт на 3 месяца).


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


Я продолжаю работать над старым проектом и еще как минимум месяц буду им заниматься. Много ли я сделал за последний месяц? Нет, не много. Много ли я понял - думаю да. Есть чем поделиться.


Программирование - сложная сфера, даже не побоюсь сказать, что очень сложная. Но к любому делу нужен правильный подход. Так уж вышло, что я стал именно тем человеком, которого слишком рано подвели к большому и сложному проекту(на мой необъективный взгляд). Это выглядит вот как: 3 месяца я учился работать технически сложноустроенной  лопатой с кучей характеристик и кнопок. Еще не успел до конца не разобраться как следует с этой штукой, как меня подвели к землеройному комплексу из разных крутых и современных технических средств, и сказали - ты тут рулишь всей этой темой. И твоя задача разобраться как оно всё работает, как все устройства взаимосвязаны друг с другом и рыть туннель через вон ту скалу. Дерзай.

И это не весело. Абсолютно.


За последний месяц меня много раз настигало разочарование в себе. Куча мыслей, которые накручивались одна за другой после очередного поражения. А может быть я вообще не создан для этого дела? Наверное я не смогу с этим справиться, наверное это не мое. Вон ребята на ютубе так просто всё делают, у них всё получается, я делаю также - у меня нихера не получается. ОМГ?


Но потом успокаиваешься и просто начинаешь трезво мыслить и понимать, что не получается потому, что много пробелов, очень много пробелов в знаниях и умениях. Те ребята прошли долгий путь с самого нуля, постепенно осваивая технологию за технологией, усложняя и усложняя проекты. А тут ты, хочешь сразу всё понять не имея соответствующего бэкграунда? Камон. Так не бывает.

После этого я возвращаюсь к основам и начинаю изучать основы "Азбуки".


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


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


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


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


1. Познакомился с регулярными выражениями. Сначала начал читать крутую книгу Джеффри Фридл "Регулярные выражения", а потом нашел раздел вот здесь. Этого мне хватило за глаза.

2. На 70% прошел курс Дмитрия Лаврика по Vue JS. Очень крутой, рекомендую.

3. Разобрался на базовом уровне с Vuex. Пользуюсь кстати Vue CLI. Кто писал мне про него - да, спасибо, это спасение :)

4. Углубил основы JS по всем известному учебнику.

5. Прошел несколько уроков по старому курсу JS. Всё никак не могу его закончить.

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

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

8. Начал писать тексты на английском языке. Раз в 2-3 дня сажусь за текстовый документ, открываю рандомайзер слов на английском. Попадается слово(как правило несколько слов) - вокруг них начинаю строить предложения на английском, объяснять их на английском, импровизировать. Задача написать связный текст на 1 страницу вордовского документа, 13 кегль.

По методу Пимпслера прошел 30 уроков и завязал с ним. Скучный он для меня.


По рабочему проекту:

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

2. Научился немного работать с VK Api. Пока слабовато, но кое что удалось написать.

3. С Api Instagram так и не разобрался, темный лес для меня.


Такие у меня дела. Как у вас? Есть успехи у того, кто тоже недавно начал похожий путь? Поделитесь - будет очень интересно почитать!


Через месяц я заканчиваю работу над этим проектом и буду искать пристанище в продуктовой(желательно, но необязательно) компании в г. Санкт-Петербург.

Если есть вакансии в ваших компаниях(обращаюсь к программистам, тим лидам и проджектам) - буду благодарен за наводку.

Начну ходить на собеседования уже через неделю.


Всем успехов, не унывайте и держите хвост трубой!

А я пойду дальше копаться в своем проекте :)

Показать полностью
312

Во все тяжкие: Веб-разработчик с нуля. 5 месяцев

Во все тяжкие: Веб-разработчик с нуля. 5 месяцев IT, Программирование, Карьера, Javascript, Веб-Разработка, Frontend, Web, Длиннопост

Привет!! Давно не виделись, мой друг!

Целый месяц я блуждал по священному гуглу в поисках frontend-грааля, но так его и не нашел.

Я не увидел вечной жизни дэв-сервера, и не были прощены мои грехи после перехода с windows на linux.

Ну, да ладно, обо всем по порядку..


Цель — Senior Frontend Developer.

Язык: JavaScript.

Возраст: 28 лет;

Работа (настоящее время): Junior Frontend Developer (контракт на 3 месяца).


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


Вспоминаю свой режим 4 месяца назад и диву даюсь, как у меня это получалось. Ложиться в 00:00 - 01:00 и вставать в 06:00? Пфф.. да ты гонишь. Сейчас еле поднимаюсь в 08:00 - 10:00. Ложусь при этом нормально, бывает и в 22:00 уже только пятки из-под одеяла торчат.


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


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


В целом, несмотря на расслабленность, месяц был продуктивный. Еще бы - столько времени, это не 2 или 3 часа в день. Сейчас у меня заканчивается подготовительный режим, я бы его назвал так. В нем я латаю дыры в знаниях, чтобы работать над проектом. Частично, конечно была проведена работа, сайт мною сверстан полностью, страницы разбиты на модули посредством шаблонизатора Blade, страницы локализованы(проект на Laravel). Прикручены скрипты на ванильке на верстку. Но недавно было принято решение все модули перенести на Vue, поэтому активно занимаюсь Vue. Много сделал тренировочных проектов по курсам, парочку из которых сможете найти на моем GitHub. Работа по проекту же у нас ведется через BitBucket. Впереди много работы, много приложений, которые мне предстоит написать для проекта в ближайшие два месяца.


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


1. Прочитал и протестил книгу Леа Веру - Секреты СSS. Много хаков по верстке. Рекомендую.

2. Прошел курс по командной строке. Да, после недельных мучений с VirtualBox, я полностью перешел с Windows на Ubuntu. И нарадоваться не могу, хоть еще не ко всему привык. Готовлюсь к MacOS.

3. Прошел курс "Операционные системы".

4. Прошел курс ко компьютерным сетям.

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

6. Прошел курс по протоколу прикладного уровня -  HTTP.

7. Прошел воркшоп по Webpack. С настройкой до сих пор трудности, УЪУ СЪУКА! кот.jpeg

8. Разобрался с шаблонизатором Blade. Который уже не особо нужен в проекте.. Хехе, фронтенд.

9. Прочитал вторую книгу YDNJS. Третью не осилил, отложил. Сложно, пока нет среднего уровня. Но эта серия книг как по мне, лучшая для понимания работы JS на довольно хорошем уровне.


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

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


Сейчас прохожу курс по Vue.js, часто приходится возвращаться в ванильный для устранения пробелов. Поэтому не торопитесь во фрэймворки, если не хотите заниматься бездумным клепанием формочек на Vue посредством копипаста со stackoverflow. Но мне по работе полагается, поэтому вынужден немного ускоряться и прыгать выше головы.


Что касается английского:

1. Нашел курс, где нашел сами понимаете. Очень нравится. Материал структурированный и мощный :) Видео записаны из занятий в скайпе. Но мой уровень еще - Elementary.

2. Также прохожу вот этот курс, метод Пимпслера. Довольно забавный, но мне нравится, 30 минут в день для складирования в память бытовых фраз полезно.


Ограничения все снял.

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

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


Вот как-то так. С каждым днем мне кажется, что мои знания  и умения не увеличиваются, а уменьшаются. Так как всё больше и отчетливее вырисовывается подводная часть айсберга фронтенда. Самое сложое для меня на данном этапе не программирование, а настройка и разбор всей шаурмы, которая требуется, чтобы начать программировать (настройка сервера, окружения, сборщика проектов, шаблонов и т.д.). Иногда хочется орать на весь дом, почему же это с*ка не работает так, как должна работать. Но это, я думаю, нормально там, где требуется мозг для работы, а не просто руки. Быстро привыкаешь, разбираешься и становишься спокойнее.


Через месяц будет круглая дата - пол года, может чего приготовлю интересного для вас!)


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

До скорого!

Показать полностью
127

Как сделать интерактивную карту на сайт, без сторонних библиотек. SVG + HTML + CSS + jQuery

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


На Ютубе зашло, судя по комментам и лайкам (ничего не накручено). Может и тут кому полезно будет.

1494

Куда делить все специалисты и почему рядом с тобой дурак?

- Специалистов по [js/php/c#/c++] сейчас не найти, одни самозванцы и неумехи.

- Шеф, Может установить вилку от 110 000 до 180 000 вместо 30 000 рублей?

- нет, ты что, кто он такой что бы я платил ему больше чем себе?



-Смотрите кого я нашел, хороший специалист, может возьмем его? знает это, это и это, проверил его навыки , реально хороший, редкая птица и денег мало просит.

- Ты что, такие права качать будут, через год затребует большую ЗП, нам нужно что-то попроще.



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

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

*прошло 3 недели*

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

314

Огромный бесплатный видеокурс по основам JavaScript

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

1. Основы JavaScript

https://www.youtube.com/watch?v=le-URjBhevE&amp;index=1&amp;...


2. ECMAScript 6

https://www.youtube.com/watch?v=1mgLWu69ijU&amp;list=PLWKjhJ...


3. DOM (Document Object Model)

https://www.youtube.com/watch?v=eaLKqoB9Fu0&amp;list=PLWKjhJ...


4. Читстый код

https://www.youtube.com/watch?v=b9c5GmmS7ks&amp;index=1&amp;...


5. Алгоритмы и структуры данных

https://www.youtube.com/watch?v=Gj5qBheGOEo&amp;index=1&amp;...

6. Шаблоны проектирования

https://www.youtube.com/watch?v=bgU7FeiWKzc&amp;index=1&amp;...


7. Основы React
https://youtu.be/QqLkkBKVDyM

Показать полностью 6
240

Бесплатная книга «Заметки по PHP»

У меня есть сайт, где я публикую свои заметки по программированию. Решил попробовать сделать раздел по PHP в виде книги (формат PDF). В итоге по объёму получилось 72 страницы.


Все статьи уникальны, т.е. написаны мною.


Скачать книгу можно по этой ссылке: https://yadi.sk/i/aSudVcy-3KucBN

1693

19 полезных сайтов для начинающих программистов

http://learn.javascript.ru — Современный учебник JavaScript


http://iguania.ru/ — основы C ++


http://all4forweb.ru/forum/36/ — на сайте полно материала по различным языкам программирования


http://vbzero.narod.ru/part1.htm/ — Самоучитель Visual Basic 6.0 с нуля


http://ruseller.com/ — HTML и DHTML, PHP, CSS, jQuery, Mootools, WordPress, Joomla!


http://habrahabr.ru/post/143737/ — Программирование для начинающих: как стартовать и куда двигаться?


http://htmlbook.ru/ — полезный сайт для тех кто изучает HTML и CSS


http://habrahabr.ru/post/150302/ — статья для тех, кто начинает изучать Python


http://e-maxx.ru/algo/ — различные алгоритмы на C ++


http://www.delphibasics.ru / — основы Delphi


http://programmersforum.ru/ — форум программистов


http://www.programmersclub.ru/lab/ — различные примеры


http://padabum.com/ — много полезной информации


http://proglive.ru/free/ — бесплатные видео курсы


http://www.postroika.ru/html/ — html для чайников


http://www.cplusplus.com/ — много информации по C++ на английской


http://startandroid.ru/ — разработка под Android + книга «Google Android: программирование для мобильных устройств» А. Голощапова


http://www.intuit.ru/department/pl/javanetbeans/1/ — статья о Java для начинающих


http://htmlweb.ru/ — очень полезный блог по html, php, ajax, seo



Исчточник http://bookflow.ru/19-poleznyh-sajtov-dlya-nachinayushhih-pr...

19 полезных сайтов для начинающих программистов CSS, SEO, C++, PHP, Python, Javascript, HTML, Длиннопост
Показать полностью 1
171

Управление светодиодной лентой на Raspberry PI через websocket

Всем привет!

Продолжаем тему Raspberry PI и гирлянд. (Предыдущий пост)

Сейчас мы рассмотрим светодиодные ленты/гирлянды на чипах WS2811WS2812WS2812b и способы управления ими .

Управление светодиодной лентой на Raspberry PI через websocket Raspberry pi, Микроконтроллеры, Светодиодная лента, Javascript, Nodejs, Гирлянда, Гифка, Длиннопост

Сначала немного теории.

WS2811 и WS2812 работают на частоте около 800 кГц. Данные передаются с помощью широтно-импульсной модуляции.

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

Управление светодиодной лентой на Raspberry PI через websocket Raspberry pi, Микроконтроллеры, Светодиодная лента, Javascript, Nodejs, Гирлянда, Гифка, Длиннопост

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

Управление светодиодной лентой на Raspberry PI через websocket Raspberry pi, Микроконтроллеры, Светодиодная лента, Javascript, Nodejs, Гирлянда, Гифка, Длиннопост

биты передаются в таком порядке:

G7 G6 G5 G4 G3 G2 G1 G0    R7 R6 R5 R4 R3 R2 R1 R0    R8 B7 B6 B5 B4 B3 B2 B1 B0

Обратите внимание, что сначала передается зеленый, а не красный, как в RGB-системе.

То есть, чтобы зажечь светодиод оранжевым цветом (#FF8000), мы отправим:

| 1 0 0 0 | 0 0 0 0 | 1 1 1 1 | 1 1 1 1 | 0 0 0 0 | 0 0 0 0 |

|     8     |     0     |      F     |     F     |     0     |     0     |

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

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

Один из способов управлять светодиодами - подключить управление ленты (DATA) к разъему SPI_MOSI (GPIO10). Затем включить драйвер SPI на частоте 3.2 мГц (в 4 раза выше частоты ленты) и передавать бинарные данные:

1000 - для передачи на ленту нуля

1100 - для передачи на ленту единицы

Управление светодиодной лентой на Raspberry PI через websocket Raspberry pi, Микроконтроллеры, Светодиодная лента, Javascript, Nodejs, Гирлянда, Гифка, Длиннопост

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

Таким образом у нас получается четырехкратная избыточность информации.

К сожалению, стандартный драйвер SPI имеет ограничение на 32767 байт в одном непрерывном сообщении, Поэтому максимальное число светодиодов, которыми мы можем управлять:

                (байт в сообщении) * (бит в байте) / (бит на светодиод) / (избыточность)

                                                 32767 * 8 / 24 / 4 = 2730

Мало? В принципе, достаточно, чтобы управлять 45-метровой лентой с частотой по 60 диодов на метр, или почти 19-метровой лентой с максимальной плотностью диодов (144 на метр)

Напряжение на портах GPIO составляет 0 и 3.3v, а лента требует 5v.

Чтобы поднять уровень сигнала до 5v, рекомендуют использовать сместитель уровня 74HCT125P или 74HCT125. Подключается он таким образом:

Управление светодиодной лентой на Raspberry PI через websocket Raspberry pi, Микроконтроллеры, Светодиодная лента, Javascript, Nodejs, Гирлянда, Гифка, Длиннопост

Но в моем случае ленточка заработала напрямую с порта GPIO, так что этот пункт считаем необязательным.

Теперь о том, как управлять ленточками удаленно через браузер.

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

Для манипуляции с адресной лентой проще всего использовать уже готовый драйвер. Мой выбор остановился на библиотеке rpi-ws281x-native для nodejs.

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

Скопировать и установить его себе можно так:

git clone https://github.com/DPOH-VAR/pi-strip-websocket.git

sudo npm install node-gyp -g

cd pi-strip-websocket

sudo npm install

Теперь переходим в папку pi-strip-websocket, открываем config.json и настраиваем под себя:

Управление светодиодной лентой на Raspberry PI через websocket Raspberry pi, Микроконтроллеры, Светодиодная лента, Javascript, Nodejs, Гирлянда, Гифка, Длиннопост

В этом примере указано подключение трёх ленточек. Ими можно будет управлять по адресам:

ws://raspberrypi:4440/LED-RGB/

ws://raspberrypi:4440/LED-WS2812/

ws://raspberrypi:4440/LED-WHITE/

Запускаем приложение:

sudo node index

Теперь остается только подключиться по вебсокету по одному из адресов и отправить данные.

- Для RGB лент мы отправляем три байта, отвечающие за R,G,B компоненты.

- Для адресной ленты мы отправляем по три байта на каждый светодиод (порядок RGB)

На любом компьютере открываем гуглохром, на не https страничке заходим в консоль (F12) и пишем:

Управление светодиодной лентой на Raspberry PI через websocket Raspberry pi, Микроконтроллеры, Светодиодная лента, Javascript, Nodejs, Гирлянда, Гифка, Длиннопост

Этот скрипт будет каждый раз в 500 миллисекунд зажигать RGB ленту случайным цветом.

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

Показать полностью 5
Похожие посты закончились. Возможно, вас заинтересуют другие посты по тегам: