Всем привет. В общем решил я запилить пост и рассказать вам о своём старом проекте. Как то давно была у меня идея сделать свой сайт для создания простенького блога, где его основой служила бы фотография. И самый главный акцент был сделан на том что бы было всё максимально оптимизировано при просмотре картинок и грузилось даже при медленном интернете. Ну и пошло поехало по накатанной. Сначала я сделал редактор изображений на основе Canvas, который оптимизирован и под мобильные устройства и под компьютер:
Конечно каждый блог имеет в своем арсенале редактор поста, тут то я и застрял на целый год, и в итоге сделал его. В нем теперь есть возможность добавлять фотографии с постов и оформлять его с помощью BBcod-ов.
Так же есть возможность добавлять спойлеры с максимальным вложением до 1000 штук, как матрёшку.
Для удобства, текстовые блоки, а так же блоки изображений можно передвигать соответствующими кнопками, так же можно передвигать сам блок добавления элементов.
Так как в основе сайта лежали фотографии, но их разрешение и качество для оптимизации я сделал низкими, пользователи это заметили и попросили о возможности добавлять оригиналы фотографий. Попросили, сделал, хоть это и заняло целый месяц, так как пришлось переделывать некоторые элементы под это и структуру сохранения фотографий, ведь одно фото, это background расширением base64, миниатюра, файл среднего размера и сам оригинал который загружается при увеличении фото, его размер может достигать 17мегобайт, и он имеет отдельный блок просмотра, который тоже для этого пришлось делать, эту фишку я назвал BigPhoto:
На смартфонах фото можно приблизить двумя пальцами. Наверно у вас возникнет вопрос что за надпись в нижнем левом углу /r9nvhv? Это сокращённая ссылка на изображение, которое можно найти либо в поиске сайта, он находится на главной странице, либо добавить домен хайпика к ссылке и вас перенесет на саму картинку:
Больше всего пришлось повозиться что бы эта ссылка корректно передавалась в WhatsApp и других месенджерах, а именно правильно показывалась превью картинки:
Ну и конечно куда же без социальных печенек, а именно лайков... Но что бы было равноправие при рейтинге и хоть что то влияло на репутацию пользователя, решили что справедливо будет дать возможность другим пользователям, разбавить карму непослушного пользователя дизлайками:
И конечно же все эти лайки и дизлайки повлияют на его общий рейтинг, но не спешите радоваться что сможете просто так заминусовать любого пользователя, для этого пополните свой минусомет, лайкая понравившиеся записи, ведь пока не зарядишь обойму просто так ненашпигуете неприятеля своим негативом в виде дизлайка:
Есть возможность добавлять аватарку в виде алмазика который генерируется на стороне сервера с рандомными гранями, но это уже совсем другая история. В целом это основное над чем я работал четыре года, разрабатывая свой проект практически с нуля, и занавесой разработки это целая история познания программирования на языках PHP, js и css . Теперь я работаю над Android приложением и в планах выпустить его в Google Play уже совсем в другом виде и другими фишками. Всем добра!
Комментарии (12)
SerafimArts
15.03.2022 21:25+10Поставил статье минус. Наверное имеет смысл пояснить почему: Статьи на Хабре — это то место, где любой технический специалист приходит, открывает статью, читает, и узнаёт много нового и полезного (в идеале, конечно) по его специальности.
Вопрос: Что по вашей теории я нового должен узнать из этой статьи? Ну вот примерно такого, чтобы я, например джуниор-php-девелопер, стал после прочтения уже почти миддлом? ;)
P.S. Не хочу выглядеть как ханжа, но всё же дополню: Пет проекты — это, конечно, хорошо и даже поощряется! Но имеет смысл располагать его в соответствующих разделах (например "я пиарюсь"), а не преподносить как технический материал.
DaneSoul
15.03.2022 23:12+2Пет проекты — это, конечно, хорошо и даже поощряется!
Дополню: пет проекты хороши, когда есть четкий акцент на том КАК это делалось, с различными техническими деталями, которые позволили бы интересующимся использовать опыт автора и сделать что-то свое. Тут же я вообще ни строчки кода не увидел.
djasonx Автор
16.03.2022 05:10Ну так это было только знакомство и это моя первая статья на Хабре, я тут не совсем в курсе что к чему. Конечно я бы рассказал что и как делалось, и не думал что с минусами накинутся на мой первый пост. Где тут как вы говорите раздел я пиарюсь, понятия не имею и не думал что он есть. Был расчет на то что люди заинтересуются какими то разделами что я описал и что то спросят как делал то или это, я бы на основе этих вопросов сделал бы уже технический пост, но по минусам понимаю что уже не дадут. В самом начале статьи я немного слукавил, изначально я делал не редактор на основе Canvas, а изучал sql инъекции и как организовать безопасное хранение пользовательских данных, что бы их не скомпрометировали, поэтому большая часть времени ушла на это, всякие там проверки данных отсылаемые на сервер и прочее.
13werwolf13
16.03.2022 08:32и не думал что он есть
ходят легенды что при регистрации на хабре ты это можешь прочитать по назойлевой ссылке которую тебе предлагают аж 4 раза (ну по крайней мере так было когда я регался) вместе с правилами сайта и советами как не получить кучу минусов в карму (которые не всегда, но всё же работают).
а вообще я согласен с ораторами выше, на хабре в статье "я написал сайтеГ" ожидаешь увидеть код, описание почему так а не иначе, больше технической инфы.
А теперь вопрос: я не увидел в статье (ткните носом если проглядел) вот какой информации: основная претензия к сайтикам с фоточками - по соглашению, которое ты должен прочитать перед тем как выкладывать фоточки, у них у всех после того как фото было выгружено оно начинает принадлежать владельцам сервиса а не тебе, как на вашем ресурсе? Ну и второй вопрос это конечно "зашакаливание" фото при просмотре и отсутствие возможности получить оригинал.
UPD: открыл сайт и ужаснулся.. возможно с телефона это выглядит хорошо, но вот с ПК просто мрак..
djasonx Автор
16.03.2022 11:41Спасибо всём за конструктив. Всё по порядку, когда я здесь зарегался был 2017 год, уж не помню честно говоря что там выскакивало и по скольки раз.
По поводу вопроса о том принадлежат ли фото ресурсу я не понял, это уже юридические тонкости, я в них не сильно силён, но для того что бы отметить то, что фото принадлежит тому пользователю что его загрузил, на каждом изображении ставится копирайт, ну или водяной знак, как кому угодно в виде его никнейма, например как тут, его вроде нет, но оно есть:
Копирайт Да сайт изначально делался для мобильных устройств, с расчётом на то что скоро я его перенесу на андройд устройства в виде полноценного приложения. Я пытался всячески минимизировать код, в том числе стили css, js код, ведь если верстать сайт для ПК, это совсем другая вёрстка и дизайн расположения элементов, это увеличило бы его ещё на несколько килобайт и сам размер движка, я стремился к минимальному размеру при большем функционале. Но здесь главное даже не это, а то что его статьи и так хорошо индексируются в Яндексе по поисковым запросам, и если человек ищет нужную информацию и она есть на нём, то думаю ему не сильно помешает то как выглядит сайт на компьютере, а главное то что он найдёт, то что ему нужно, и было бы глупо отсеивать пользователей ПК. Да не представляю как он выглядит на мониторе с 4К разрешением, то наверно ещё зрелище)))
serginho
16.03.2022 14:11Для меня тут тоже ничего нового, но нет, Хабр не только для того, чтобы просвещать именно вас, и подтягивать исключительно ваши знания. Здесь много разных людей. Высказывая подобные мнения вы закрываете возможность для новичков что-то узнать на Хабре. Также специалисты из других областей могут впервые узнать для себя про HTML например.
В общем очень вредное для сообщества мнение.
SerafimArts
16.03.2022 14:18Смысл в Ваших словах есть, однако что именно вы узнали из этой статьи про HTML? Что он существует в природе и есть такая аббревиатура? Не думаете, что это… Как бы так сказать...
В любом случае — большинство минусующих не рассказывают о том почему так делают и этом может смущать начинающих авторов. Я подумал, что имеет смысл, т.к. наверняка не у меня одного подобное мнение о материале сложится, чтобы следующая статья получилась уже более грамотная с точки зрения технической составляющей. Вот и всё.
serginho
16.03.2022 15:20Даже хотя бы узнать что HTML существует. Минусующие люди это в любом случае люди с положительной кармой. А вот новички как раз проголосовать не могут.
djasonx Автор
16.03.2022 15:28Всё дело в том что о PHP, HTML, CSS здесь очень много всего, я тут не писал статьи, но много для себя чего почерпнул от сюда. Эта статья была рассчитана на то что люди заинтересуются что и как я реализовал, там много есть о чем рассказать, есть что покритиковать, поспорить, надо было так делать или нет, возможно были бы какие нибудь советы по распределению нагрузки на сервер, на худой конец например что дизайн уже не тот и так далее... Но по минусам я вижу что это никому не нужно, просто потому что даже вопросов нет, поэтому рассматривать техническую часть не вижу смысла. Время которое я потратил на эту статью ушло впустую, не исключаю что под технической частью было бы столько же бы минусов, потому что на каждое решение найдётся своя критика и порой не конструктивная, поэтому мой пост и ваш фидбек даёт мне понять, что можно не продолжать.
SerafimArts
16.03.2022 15:48Очень жаль, что вы это так воспринимаете.
Более того, прошу заметить, что карму вашу никто не трогал. Это говорит о том, что к вам лично, как к автору — претензий никаких нет. Просто материал не подходит. Первый блин комом, как говорится.
А то что вы переживаете на тему того, что нет никаких вопросов по теме, так тут всё просто: Никто кроме вас не знает что вы там использовали, т.к. вы не предоставили ничего по технической составляющей материала. Лично у меня претензия конкретно к этому: Я просто не знаю что спрашивать ;)
Давайте приведу пример как бекенд-разработчик, например задам общий вопрос: Как вы решали проблему с разделением сервисов в DI контейнере на глобальные (в рамках инстанса приложения) и сессионные (в рамках одного реквест-респонза)? И тут же возникают вопросы: 1) А есть ли вообще DI контейнер? 2) А если есть, то какой? 3) А как происходит цикл запроса? 4) А может вообще это невозможно сделать, т.к. По не предусматривает работу в эвентлупе, а за подчистку отвечает FPM, чистя всю память? 5) и т.д.
Ну т.е. поймите, я не могу задать вообще никакого вопроса, т.к. нет вообще никакой технической информации. Да даже если по ресайзу картинок задавать, то вопрос "почему вы выбрали intervention image, а не glide" — тоже некорректный, потому что вдруг вы там напрямую через gd работаете? а если не с gd, то может imagemagik? Или ffmpeg? Или вообще в opengl/vulkan грузите как текстуру и обратно получаете сгенерированный mip? А вдруг руками декодируете всё и напрямую через пых уменьшаете?
djasonx Автор
17.03.2022 05:11IoC, DI — очень хороший инструмент, но и как любой другой механизм использовать его нужно осознанно и к месту.
z0ic
Мой "hello world" был таким ...