Ответы пользователя по тегу Веб-разработка
  • Быстрая загрузка баннера. Как лучше реализовать?

    1. Уменьшайте размер картинок по максимуму, насколько это возможно. Выбирайте форматы, позволяющие хорошо их сжимать. Но, главное тут - не переусердствовать.
    2. Все статические ресурсы лучше хранить в CDN, а не на своём сервере. Они очень быстрые, располагаются по всему миру и выбираются ближе всего к пользователю. Есть у Яндекса, у Cloudflare и т.д.
    https://yandex.cloud/ru/services/cdn

    Ваше решение ускорить загрузку сайта весьма похвально, это сейчас новый тренд. Всех уже достали эти медленные монстры. Многие люди тупо закрывают страницу, когда сайт долго грузится.
    Ответ написан
    Комментировать
  • Как сделать такую анимацию формы?

    Такие вещи можно решить полностью на CSS.
    Делается скрытый checkbox, его label стилизуется в виде нужной кнопки, а как мы знаем, чекбокс срабатывает даже при клике на его label. И потом при помощи селектора ".toggle:checked + .lbl-toggle + .collapsible-content" запускаем анимацию, когда checkbox устанавливается в значение checked



    P.S. Учите HTML и CSS и вам зачастую не нужно будет использовать Javascript, который последнее время пихают везде: и куда нужно, и куда совершенно противопоказано.
    Ответ написан
    2 комментария
  • Как лучше сделать обновление данных строго по времени?

    Я всегда советую сначала попробовать самое простое решение в таких случаях.
    А именно, есть проект Mercure Hub https://mercure.rocks/docs/getting-started

    Это сервис, устанавливаемый куда-то к себе на сервер, который умеет принимать обычный http запрос откуда-то с бэкенда или из другого места, данные из которого сразу перенаправлять подключенным к нему браузерам через SSE (Server Sent Events). Подключиться к нему из JavaScript через EventSource - это три строчки кода.

    Вот небольшое знакомство с этим:
    https://youtu.be/DzHvscVacj0?si=BzdhFA4q0rqUU7D5

    https://youtu.be/kYNC47V7R_0?si=VCn1AEsqIa5AFddU

    Ну и далее на сервере настраиваем cron, чтобы он каждый час запускал какой-то скрипт, который и будет осуществлять этот самый http-запрос с нужными данными в Mercure Hub, а тот его отправит в браузеры клиентов.
    Ответ написан
  • Как организовать доступ к непубличным токенам?

    1. НИКОГДА не храните секреты (токены, логи-пассы и т.д.) в коде, который сохраняете в Git. Даже для пет-проектов. Даже если вы потом удалите этот токен из файла, он навсегда сохранится в истории гита, потом вы про это забудете, поделитесь кодом с кем-то, и он найдёт этот токен в истории. Вопрос не в том, найдет ли пользователь этот токен или нет, вопрос только в том, когда он найдёт этот токен. Очень-очень-очень многие просто забывают о том, что когда-то коммитили токен в репозиторий, забывают вычистить историю, и этот токен утекает...

    2. Код и секреты - это отдельные сущности, и жить они должны в разных местах. Если хотите поделиться кодом, обязательно опишите в README процесс получения токена, чтобы пользователи смогли хоть как-то этим кодом пользоваться. Это хороший тон в open-source.

    3. Если вы будете пользоваться системами CI/CD от Github или Gitlab, то там у репозиториев есть специальные разделы, в которых можно безопасно хранить секреты. Но вы должны быть внимательными, если сделаете кого-нибудь контрибьютером в вашем проекте. Не забудьте проверить все разрешения, которые выдаёте этим людям, потому что они при деплое проекта через эти системы CI/CD смогут вычитать ваши секреты. Если вы один хозяин репозитория, то хранить секреты там вполне безопасно.

    4. Если же вам всё-таки по какой-то причине очень надо, чтобы пользователи всё же как-то работали с вашим токеном, то единственное, что мне приходит в голову - это написать приложение типа API Gateway, которое будет имитировать ту апиху, от которой ваш токен. И это ваше приложение будет иметь базу данных пользователей которые смогут в вашем приложении регистрироваться и получать уже ваши токены, вами сгенерированные, для доступа к вашей апихе, а ваша апиха будет внутри себя вытаскивать данные из оригинальной API по оригинальному токену и отдавать эти данные им.
    Ответ написан
    Комментировать
  • Как реализовать домашний ПК для веб сервера и pet проектов?

    Если не боитесь использовать Cloudflare в наших волшебных политических реалиях, то у них есть прекрасное решение для обеспечения безопасности: "Zero trust tunnel". Это не просто прокси-сервер, а самый настоящий туннель. Т.е. ваш сервак может находиться за непробиваемым файрволом, но по туннелю вы сможете организовать безопасный доступ к тем ресурсам, к которым пожелаете.
    Таким образом, даже если кто-то будет атаковать ваши ресурсы, то атаковать они будут Cloudflare, а не ваш ненаглядный сервачок.
    Ответ написан
    Комментировать
  • Как скачать весь контент с сайта?

    Сайт полностью сгенерирован Javascript уже в браузере после загрузки страницы. В самом исходном коде html никаких данных нет. Поэтому скачать обычным образом его не получится.

    Хорошо, что прекрасные люди придумали для этой задачи расширения для браузера. Например, вот такое https://chromewebstore.google.com/detail/save-page...

    Нажав на кнопку расширения, будет скачана вся страничка полностью вместе со всеми текстами, стилями и изображениями в формате base64
    Ответ написан
  • MacBook Air M1 8/256 подойдёт для разработки?

    У меня Macbook Pro M1 Pro 16/512.
    Когда запускаешь какую-то IDE от Jetbrains типа Goland, то батарея тает на глазах, да и памяти она кушает хорошо.

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

    Но... Как только вам понадобится Docker, могут начаться проблемы. На Маке он не нативный, и может сжирать много памяти. У меня много чего в Докере запускается, и вкладок в браузере всегда несколько требуется, поэтому мне 16 прям впритык.

    Мой совет - брать машину с 16гб минимум, но тогда уже нет смысла брать Air...

    P. S. Мак в разы лучше работает с памятью, чем винда, поэтому сравнивать не всегда корректно.
    Ответ написан
    2 комментария
  • Как реогранизовать процесс разработки в IT-продукте?

    1. Git. Без него сейчас ну просто никак.
    2. Gitlab CI или GitHub actions для деплоя.
    3. Пишете скрипт, который при запуске на локалке создаёт новую базу и заполняет её фейковыми данными для тестов. Так новые разработчики не будут иметь доступ к данным.
    3. Новые разработчики будут иметь доступ к коду, смогут создавать свои ветки в Git, пушить эти свои ветки в ваш удаленный репозиторий Git и даже создавать merge request на слияние их ветки с основной веткой разработки. А вы уже сможете сделать ревью их кода и подтвердить слияние, либо отказать. Все права отлично настраиваются как в Gitlab, так и в GitHub.
    4. Если же вы вообще не хотите показывать даже код сторонним разработчикам, то тут без модулей либо даже микросервисов не обойдешься. Я бы начал пробовать с модулей.

    P. S. Если в голову придёт мысль переписать проект полностью, то десять тысяч раз подумайте перед этим. В моей практике нет ни одного успешного переписывания сложного проекта... Всегда нужны новые срочные фичи, и придется параллельно внедрять эти фичи в старую кодовую базу, одновременно с этим пытаться их внедрить в сырую переписываемую кодовую базу. Это может закончиться ещё более запутанным проектом, чем был оригинал.
    Ответ написан
    Комментировать
  • Можно ли конвертировать/сохранить динамически сгенерированную js страницу в статичный html-файл?

    Есть банальные расширения для браузера
    https://chromewebstore.google.com/detail/save-page...
    https://chromewebstore.google.com/detail/webscrapb...

    А так же целое десктопное приложение и ещё одно расширение для браузера
    https://github.com/webrecorder/webrecorder-desktop
    https://chromewebstore.google.com/detail/webrecord...
    Ответ написан
    Комментировать
  • Как предотвратить бесконечную загрузку страницы при отправке post запроса?

    Использовать SSE (Server Sent Events). Это на порядок проще, чем вебсокеты, но мощь практически такая же.
    Вот неплохая статья на английском.
    https://blog.stackademic.com/real-time-communicati...

    Кстати, библиотека HTMX позволяет это обрабатывать и без написания Javascript
    https://htmx.org/extensions/server-sent-events/
    Ответ написан
    Комментировать