24

Программист-самоучка решил запилить сайт-портфолио. Что скажете?

Для ЛЛ:
Хотел бы узнать мнение профессионалов и не очень, гожусь ли я в разработчики, или есть ли потенциал.
Сайт: https://deevdevs-my-portfolio.herokuapp.com
Можно перевести на русский, кнопочка имеется. Лучше смотреть через комп, но и мобильная версия имеется.

Для разбирающихся:
Последние два года учился верстке + SCSS/PUG, работе с Vanilla Javascript с ES6 фичами, а потом попробовал себя в Node.js с Express Framework и базами данных MongoDB. Поучаствовал в 8 проектах, два из которых разработал сам (вся инфа на сайте). Добавлял сторонние API, а также создавал свои. Можно увидеть и сами проекты, и код на Github в публичном доступе с описанием на русском и английском. Хотел бы узнать профессиональное мнение, советы и рекомендации, ну и чтобы просто похвалили немного... не зря ж старался :-)

Для всех, кому интересно:
Вначале учился собирать содержимое веб-страниц в красивый и удобный вид, кнопочки создавать и ссылки, картинки, видео и т.д. Это - HTML/CSS вёрстка. У прогеров это еще программированием не считается. HTML добавляет на страницу всякие формы, параграфы, картинки, видео и т.д., а CSS - это свод правил, который указывает содержимому, какого оно должно быть размера, формы, цвета, где находиться, и т.д.

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

И вот когда то, с чем сталкивается пользователь открывая браузер, было понятно. Я решил узнать, как оно все на сервере происходит, куда летит ваш запрос, когда вы кнопочку то нажимаете, или текст/картинку отправляете. Или откуда весь этот контент на страничке появляется. Вот тут есть много всякого, но я взялся за Node.js. Это как бы язык программирования на базе Javascript. Там немного другие функции преобладают, отличающиеся от ванильки, и он не связан напрямую с браузером. И вот тут я решил пользоваться этим языком вместе с плюшками для Node.js, которые называются Express.

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

Не знаю, может кому интересно было.

Пост без рейтинга. Мне бы мнение со стороны и одобрение. Здравую критику. А вдруг и заметит кто :-)

Всем спасибо за внимание и добра!

Программист-самоучка решил запилить сайт-портфолио. Что скажете?

Лига программистов

2.1K постов11.9K подписчиков

Правила сообщества

- Будьте взаимовежливы, аргументируйте критику

- Приветствуются любые посты по тематике программирования

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

Вы смотрите срез комментариев. Показать все
0
Автор поста оценил этот комментарий

Если не обращать внимания на странные штуки, вроде js-code-darkblue.png, то для начинающего - пойдет. Но с точки зрения пользования сайта, контента - кот наплакал и продираться к нему нужно сквозь гору свистелок ради свистелок. CV должно быть лаконичнее (с возможностью его сохранить для HR), а у "развесистого" сайта должна быть какая-то функция, будь то блог со статьями, каталог проектов и т.п. Сейчас это резюме стилизованное ни то под лендинг, ни то под каталог готовых компонентов, где все крутится-ползает-взрывается.


То, что не понравилось:

- Огромные размеры ресурсов (JS-код на фоне - картинкой в полмега, серьезно?)

- Жадная загрузка ресурсов, не смотря на интерактив, под которым они прячутся

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

- Ресурсы не минифицированны, доступны сорсмапы, тянется axios для хот-релоада (?!), причем с редиректом. Если уж показывать, то продакшн-сборку без этого всего.

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

раскрыть ветку (5)
0
Автор поста оценил этот комментарий
Можете пожалуйста объяснить про хот-релоуд с редиректом, вкратце?

И что вы имеете ввиду под сомнительными полифиллами?
Я, как вы видите, использовал babel/polyfill. Это нечто устаревшее? Есть получше packages?
раскрыть ветку (4)
1
Автор поста оценил этот комментарий

Я, как вы видите, использовал babel/polyfill. Это нечто устаревшее?

Подозреваю, что где-то в сборщике/опциях babel настраивается минимальная версия поддерживаемых браузеров, из-за чего прилетают полифилы ES6, а они - просто мертвый код, раздувающий в бандл. Эту настройку можно просто подкрутить хотя бы до уровня новых фич CSS. В частности - https://caniuse.com/css-variables

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Ни разу не заглядывал в настройки/опции babel. Вы для меня открываете новые и на первый взгляд сложные вещи. Почитаю. Спасибо.
0
Автор поста оценил этот комментарий

Можете пожалуйста объяснить про хот-релоуд с редиректом, вкратце?

Судя по всему, фронт вы собираете с помощью Parcel. В dev-режиме он умеет на лету обновлять изменившиеся модули или по крайней мере дрыгать перезагрузку (hot reload). С этой целью он держит открытым WebSocket.


С axios я ошибся, его используете вы сами при отправке контактной формы. Но можно заметить, что все время происходит два запроса axios.min.js, первый из которых редиректит на адрес конкретной версии. Если сам скрипт может быть кэширован, то редирект происходит все время, ибо он временный (302). Тут достаточно было бы вставить ссылку на конкретную версию, которую браузер может с чистой совестью кэшировать.

Иллюстрация к комментарию
раскрыть ветку (1)
Автор поста оценил этот комментарий
Спасибо. Я понимаю о чем вы говорите. Я и не замечал, как это происходит с axios. Пойду почитаю, как можно вставить ссылку на конкретную версию, и как оно вообще отражается на производительности/скорости.

Да, я пользуюсь парсел и парсел бандлер. Есть и другие но до них пока не доходил. Мне пока страшно пробовать что-то новое в сборке и платформах для запуска))
Вы смотрите срез комментариев. Чтобы написать комментарий, перейдите к общему списку

Темы

Политика

Теги

Популярные авторы

Сообщества

18+

Теги

Популярные авторы

Сообщества

Игры

Теги

Популярные авторы

Сообщества

Юмор

Теги

Популярные авторы

Сообщества

Отношения

Теги

Популярные авторы

Сообщества

Здоровье

Теги

Популярные авторы

Сообщества

Путешествия

Теги

Популярные авторы

Сообщества

Спорт

Теги

Популярные авторы

Сообщества

Хобби

Теги

Популярные авторы

Сообщества

Сервис

Теги

Популярные авторы

Сообщества

Природа

Теги

Популярные авторы

Сообщества

Бизнес

Теги

Популярные авторы

Сообщества

Транспорт

Теги

Популярные авторы

Сообщества

Общение

Теги

Популярные авторы

Сообщества

Юриспруденция

Теги

Популярные авторы

Сообщества

Наука

Теги

Популярные авторы

Сообщества

IT

Теги

Популярные авторы

Сообщества

Животные

Теги

Популярные авторы

Сообщества

Кино и сериалы

Теги

Популярные авторы

Сообщества

Экономика

Теги

Популярные авторы

Сообщества

Кулинария

Теги

Популярные авторы

Сообщества

История

Теги

Популярные авторы

Сообщества