Сообщество - Web-технологии

Web-технологии

534 поста 5 786 подписчиков

Популярные теги в сообществе:

23

С нуля до Frontend-разработчика. Первый месяц

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

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

2. В остальном советую смотреть видео-курсы, как верстают люди и повторять. Главное, не зацикливаться на одном преподавателе из видео, а постоянно их менять, тем самым сможете подчерпать много нового и увидите различные методы написания кода. Мне помог данный канал, узнал некоторые тонкости. Когда придет понимание, можно уже брать различные PSD-макеты и практиковаться самостоятельно.


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



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


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

Готовый телефонный справочник на NODE.JS с админкой

Всем здравствуйте. Начну с истории.

Устроился я на работу техником(в тех отдел), через какое-то время ковыряться с компами поднадоело и поговорив с начальником мне предложили заняться разработкой. Опыт верстки и программирования на php был. Первой задачей была "сделать телефонный справочник", погуглив я не нашел готовых решений, тогда начальник предложил WordPress. Ну не долго думая поставил на наш сервер WP, начал пробовать сделать и понял, что все как-то не так.

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

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

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

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

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

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

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

Для чего?

Во-первых это опыт.

Во-вторых я люблю заниматься подобным.

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

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

Тут присутствую 2 группы кнопок

1) Left(main)

2)Center(second)

Для удобства понимания на данный момент используется в качестве кнопок branch(отделение) и floor(Этаж), но в целом можно задать все что угодно.

Зайдя на страницу справочника у вас будет показана левая группа, после выбора отделения, в центре появится вторая группа с этажами которые находятся внутри отделения. После выбора этажа вам дадут номера телефонов которые находятся в выбранном отделение, на выбранном этаже.

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

Предельно простой функционал для пользователя.

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


Если кто-то будет пользоваться этим справочником то доступ

Адресс админки: домен/panel/admin

login: 'admin',

password: 'wwqe1rws'

Меняется в файле passport.js



Тут перед нами разворачивается 2 кнопки.

Первая - просто добавление кнопок и людей.

Вторая более запутанная для настройки связей и удаления записей.

Первым делом на кнопки Edit вас встретит поиск, при помощи него вы ищите человека с которым хотите делать манипуляции.

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

Следующая кнопка Edit button, тут вы переименовываете кнопки.

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

Последняя кнопка assign, она предназначена для  того, что бы настроить связи у записи.

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

В поле link main data вы указываете этаж у связки записей "отделение-контакт". В поле link second вы можете порвать эту связь.

Т.е последовательность добавления такая

На вкладке add добавляем кнопки и записи, идем в edit, жмем Assign all и настраиваем этажи для отделений. Затем ищем запись, жмем assign у нужной и присваиваем ее к отделению, затем указываем на каком этаже внутри этого отделения нужно выводить запись.

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

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

В общем я открыт для критики и советам

Код справочника https://github.com/ura2rist/Open-Phone-Book

Так же если есть какие-то вопросы или т.п то можно написать в телегу @urifcof там я тоже сразу окажу поддержку)

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

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

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

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


Цель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.

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

Домашний проект - ищем фронта

Привет всем. Несмотря на то, что первый пост закидали минусами я (а точнее уже мы не) не сдаёмся.

Ищем junior frontend разработчика, у которого есть желание написать своё web приложение с целью добавления в свой репозиторий чего-то приличного. Пока что в обсуждении мы остановились на сервисе онлайн заказа услуги (сама услуга не важна в данный момент и может быть как заказом грузчиков на выезд, заказом доставки еды и тп).

Архитектура — стандартный MVC. Backend на java (Spring boot, mvc, data, security), БД postgre. На фронт передаем json. Хотелось бы чтобы фронт работал с ajax запросами, остальное на ваш вкус и цвет.

Функционал. Регистрация/авторизация, вывод услуг и их сортировка по параметрам, заказ услуги, уведомление на email о заказе.

Итого, если ты front junior, учишь js и хочешь пополнить своё резюме небольшим проектом добро пожаловать в телеграм (в комментах).

Нас уже трое: devops (Харьков) и 2 java (Минск и Питер). Встретились украинец, белорус и русский:)

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

55

С нуля до Frontend-разработчика. Начало

С нуля до Frontend-разработчика. Начало

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

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

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

Сейчас хотел бы посоветовать небольшой план для людей, которые только начинают свой путь в веб-разработку:

1) Думаю, самый народный способ изучить основы HTML и CSS это воспользоваться бесплатными курсами от HTML Academy.
Затем эти знания можно закрепить пройдя бесплатные задания на FreeCodeCamp. (Basic)

2) Советую скачать бесплатно курс, который писал здесь (п. 2)

!Либо можете найти ссылку на скачивание zip-файла в комментариях в этом посте!
Посмотрев первый модуль, вы уже отточите свои базовые знания + будет настроено пространство.

3) После этого сразу советую изучить препроцессор CSS  (хотя его и ставят в середину обучения, считаю его надо учить сразу после основ). Про них можно узнать в модуле 2  - 025  из того курса, либо из любого другого видео на YouTube.

4) Изучаем основы Git/Github. Из курса Модуль 3 - 041, либо на YouTube. В начале необходимо уметь только пушать проекты в репозиторий. имхо)

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

Сложно описать сколько времени у вас займет на обучение данного материала, но в среднем можно предположить 2/3 недели.

После этого можно уже с головой углубляться в верстку.

Мой план обучения на ближайшее время:
1) Практикуем верстку с помощью Bootstrap Grid (ее многие недолюбливают, но я хотел бы закрепить эти знания);
2) Продвинутая верстка с Flexbox без интерактива;
3) Стараемся настолько набить руку, чтобы могли сверстать почти любой проект без интерактива;
4) Основы JS;
5) Поверхностное изучения JQuery и добавления интерактива на сайты.
6) Продвинутый JS;
7) React.js
8) Создаем портфолио;
8) Стараемся устроиться на работу джуном.

План на следующую неделю:
1) Доделать проект из курса (модуль 2);
2) Найти и сверстать самостоятельно пару лендингов с помощью сетки + делать их "резиновыми".

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

Все получилось сумбурно, я еще дилетант в этом деле, так что рад любой критике и пожеланиям :)

Показать полностью
Отличная работа, все прочитано!