Ответы пользователя по тегу Веб-разработка
  • Код HTTP ответа, для уведомления о смене пароля?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    HTTP 200 OK
    А в ответе признак особой операции и текст "Требуется смена пароля"

    Или вот в википедии вот указано вне-регламентное использование кода 419
    419 Authentication Timeout (not in RFC 2616) — Этого кода нет в RFC 2616, используется в качестве альтернативы коду 401, которые прошли проверку подлинности, но лишены доступа к определенным ресурсам сервера. Обычно код отдается, если CSRF токен устарел или оказался некорректным.
    Ответ написан
  • Скрытая отправка формы, без следа в консоли?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    1. Подавить контекстное меню мыши
    2. Перехватить нажатия клавиш, которые включают панель отладки
    3. Заменить объект, который реализует консоль
    4. Шифровать отправляемые и получаемые данные, причём код JS должен быть изощрённо обфусфированным, чтобы там нельзя было найти ключ или алгоритм шифрования (см. коды каких-нибудь вирусов - полиморфов)
    5. Использовать протокол websocket - там смотреть фреймы тупо неудобно
    6. Использовать HTTP прослойку на Flash или Java и там тоже шифровать

    Не забывайте, что кроме браузера обмен данными могут смотреть снифферы, например Wireshark. Кому надо, тот посмотрит.

    Я рекомендую изучить вопрос защиты данных, а не скрытия трафика.
    Не отдавайте клиенту лишнее, авторизуйте всех, проверяйте всегда кто что и зачем прислал, пользуйтесь токетами CSRF, заблокируйте кросс-доменные запросы, не выполняйте модифицирующие операции через GET запросы и так далее. Защищайте бэк.
    Ответ написан
  • Как отключить кеш в мобильных браузерах?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Кэширование надо подавлять

    К URL каждого файла статики добавляй версию.

    Для разработки - версия должна меняться часто, я использую псевдорандомные строки типа 'app.js?v=' + Math.random()

    Для продуктовой сборки использую версию сборки из package.json, либо из файла конфига, либо код текущей ревизии, если приложение собирается из репозитория git. Последний вариант более точно определяет факт изменений.
    Ответ написан
  • Как сделать валюту оплаты отличной от валюты сайта?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Прежде всего нужно определиться с платёжным агрегатором. Stripe Skrill PayPal 2Checkout Braintree и туча их ещё
    У каждого из них разные варианты оплаты
    Нужно смотреть описание API

    Обычно в запросе на проведение оплаты сумма задаётся в базовой валюте (USD например), а пользователю показывается селектор валюты, либо сразу отображается в местной валюте, либо показывается в USD, но в итоге с карты списывается в рублях

    Иногда цены "для запада/для России" отличаются значительно. Например, для России - 100 рублей за штуку, для Европы - 10 евро за штуку. Это реализуется в бизнес-логике твоего приложения, как Developer описал. В таблице хранятся цены, курсы.

    Иногда цены отличаются для новеньких и для бывших пользователей (дисконтная система). Иногда скидка реализовывается на стороне платёжного агрегатора (Stripe), а чаще - хранишь параметры у себя и выставляешь через API сумму с учётом скидки.
    Ответ написан
  • Как деплоить небольшие проекты?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    1. Хорошая ли идея стягивать все исключительно по тегам т.е. поставил я на фронте и на беке тег v0.4 и скрипт на сервере стянул и то и другое
    2. Самонаписанный скрипт постоянно чекающий теги гитлаба это вообще идея хорошая? В чем +\- деплоя по тегам?


    Метки ставить можно. Даже полезно релизы метками отмечать. Всегда можно определить, на какой комит надо откатиться, чтобы локально восстановить версию кода как на сервере. И release notice писать по git log между метками, а не в памяти держать.

    Постоянно чекать git не надо. Лишняя нагрузка на проц. Совершенно лишняя. Рекомендую веб-хуки или деплоить по SSH команде.

    3. Как быть с адресами и портами.

    Выносите в конфигурационные файлы или в параметры окружения

    10+ вариантов на странице https://css-tricks.com/deployment/
    Я для разного размера проектов пользовался
    1. deployhq - как только обновляется ветка master - сервис обновляет сервер по SSH
    2. веб-хуками из bitbacket + самописным веб-скриптом на PHP без таймлимита - как только приходит хук об обновлении ветки master, выполняется скрипт типа такого
    cd /var/www/project
    cp web/closed.bak web/closed.html # закрыть приложение
    git pull
    composer update && php yii migrate # как то код бэка обновить
    npm run build # как то код фронта обновить
    rm web/closed.html # открыть приложение

    3. такой же командой, запускаемой через ssh, без веб-хуков. Это когда понадобилось сразу бэк и фронт пересобирать из разных репо и из разных веток. Ну типа демо из ветки develop, а релизы из ветки master на несколько серверов.
    4. настраивали Jenkins для авто-установки

    В принципе устраивает
    Ответ написан
  • Как реализовать отзывы на лендинге без бэкенда?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Попробуй backendless архитектуру - храни отзывы в специальном сервисе, сохраняй и получай через AJAX
    https://habr.com/ru/company/backendless/blog/180367/

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

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

    Вдруг они вместо отзыва вопрос зададут? Как написать им в ответ?
    Вдруг отзыв будет жалобой? Как потом пометить отзыв как "проблема решена"?

    Более чем уверен, понадобится админка для всех этих отзывов. Не такая уж и сложная.
    Ответ написан
  • SVG и stroke-dasharray объясните, пожалуйста?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Твоё решение прикольное, но не практичное. Позволяет только два сегмента сделать.

    Если нужно больше сегментов, то можно "соорудить" более сложное изображение SVG, которое будет состоять из фрагментов окружности с разным цветом.

    Вот пример: jsfiddle.net/NVX3S/2 - диаграмма генерируется с помощью библиотеки highcharts

    Этот пример по сути генерирует вот такой код SVG https://jsfiddle.net/copist/zeoq7hbL/
    Выглядит, конечно громоздко, но как видишь, никаких stroke-dasharray там не упоминается.

    А вот так выглядит самая суть - фрагменты окружности разного цвета https://jsfiddle.net/copist/de9qL7kp/

    Пример генератора круговой диаграммы в формате SVG для массива значений https://codepen.io/shshaw/pen/KpyNQq
    Пример готовой круговой диаграммы в формате SVG с анимацией, без использования JS, на элементах <circle> https://codepen.io/ksksoft/pen/xsnmp
    Ответ написан
  • Что использовать для интерактивного сайта-конструктора?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Вариантов несколько
    1. Сделать кастомный редактор на базе SVG или VML - составлять схемы из элементов библиотеки. Может пригодиться что-то из этого списка: svgjs.com dmitrybaranovskiy.github.io/raphael snapsvg.io www.graphicsjs.org
    Требуется знание Javascript и HTLM

    2. Сделать редактор на базе Canvas
    Посмотри обзор https://crunchify.com/my-favorite-5-javascript-can...
    Требуется знание Javascript и HTLM

    3. Если интранет - можно написать редактор C# и SilveLight
    Требуется C#, а Javascript и HTLM уже значительно меньше, но технология без будущего. Кажется и без настоящего.

    4. Старые добрые апплеты Java
    Требуется Java, а Javascript и HTLM уже значительно меньше

    5. Flash
    Требуется знание Flash и взорванный мозг, чуть присыпанный HTML и Javascript

    6. А может есть готовые решения?
    * https://dcaclab.com/en/lab
    * https://github.com/logical/webtronix (demo logical.github.io/webtronix/schematic.html)
    * или эта подборка https://www.intorobotics.com/draw-circuit-diagrams...

    Я бы остановился на snapsvg.io или подпилил готовый редактор
    Ответ написан
  • Современный динамический сайт. Что изучить?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Очень неконкретный вопрос.

    Шутки шутками, но всё что нужно можно сделать на PHP и JS. А если невозможно на PHP, то можно сделать только на JS. Если вы ими владеете.
    Ответ написан
  • Как учитывать стоимость своей работы на своем стартапе?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Ты когда инвестора в свой проект пускаешь, сразу оговаривай сколько процентов от компании он получает. Он инвестор, а не совладелец. Обычно ему доля 5-10%, а тебе - всё остальное. И при необходимости ты можешь своей долей делиться со следующим инвестором, если потребуется.

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

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

    P.S. Выражаю признательность ответу пользователя Николай Чуприк: это очень точное и понятное объяснение, почему работа не является первоначальным вкладом и почему нельзя измерять свой труд банальной часовой ставкой - оценивать продукт надо исходя из стоимости аналогичных продуктов на рынке или его потенциальной прибыльности.
    Ответ написан
  • Есть ли плагин для WordPress для вставки иконок на страницах?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    По удобству выделяется Icons Enricher

    * Всё бесплатно
    * Много иконок
    * Удобная система семантического поиска с приятным пользовательским интерфейсом - иконку можно найти, даже если вообще не знаешь её название, по синонимам или ассоциациям.
    screenshot-4.gif?rev=1654780

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

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Привет. Могу помочь разорвать цепочку, оформить веб-портфолио дизайнера и разработчика https://webmentor.pro/portfolio

    В качестве идей для веб-дизайнера:

    Посмотри не на themeforest, где уже целые темы - это сложно для начинающего концепцию целого сайта придумать, а на https://dribbble.com/ - там дизайнеры публикуют очень небольшие по объёму работы, например только форма обратной связи или одна страница приложения-чата.

    Первый вариант - ревью чужих работ.
    Как дизайнеру я предлагаю тебе взять раздел "Дебюты" https://dribbble.com/shots?list=debuts, оценить любую работу по качеству, найти недостатки. Считай что ты как будто занимаешься приёмом на работу другого дизайнера. Встал на другую сторону так сказать.
    После твоего же ревью найди возможность улучшения чужой работы, исправить самостоятельно, то есть перерисуй с учётом своих же замечаний.
    После этого в портфолио можно вставить чужую работу как образец, свои замечания к ней и переработанную личную версию. С пометкой "ревью", "ремейк", "по мотивам". Это не воровство, а абсолютно самостоятельная работа.

    Второй вариант, который встречается на практике - рисовать новые страницы сохраняя общий стиль и идею.
    Вот дали тебе PSD макеты нескольких страниц или UI Kit с полным набором всех элементов интерфейса. Нарисуй страницу, которой нет. Например, у тебя на руках только PSD главной страницы и формы обратной связи. Как бы выглядела страница со списком клиентов, страница тарифов, страница личного кабинета пользователя, страница витрины интернет-магазина в том же стиле? Эта работа дизайнера. Они не всегда рисуют дизайн с нуля. Бывает к проекту подключают второго или третьего дизайнера и они обязаны продолжать работу в одном стиле.
    Это не воровство, а тоже абсолютно самостоятельная работа.

    Третий вариант - имитация работы с заказчиков и исполнителем.
    Ты ведь часто ходишь по сайтам, мы все тут часто куда-то ходим. Поставь себе таймер на какой-нибудь момент времени и когда он сработает - СТОП! - та страница, на которой ты сейчас находишься - она требует срочного редизайна.
    1) представь, что ты сам заказчик:
    посмотри на то что уже есть на странице;
    определи задачу, которую решает эта страница;
    определи задачу, которую решает этот сайт;
    опиши задание дизайнеру на редизайн
    2) представь, что ты сам дизайнер:
    сделай прототип;
    черновой дизайн;
    и наконец выполни задачу
    И это не воровство, а самостоятельная работа.

    В качестве идей для веб-разработчика:
    Запрограммируй то, что видишь на макете. Можно использовать тот же https://dribbble.com/ - там полно целых макетов сайтов и отдельных элементов интерфейса.

    Покупать только PSD считаю бесполезной тратой. Рекомендую брать сразу готовый результат вёрстки (то есть HTML шаблона сайта), к которому прилагается PSD, чтобы сделать вёрстку самостоятельно и потом сравнить свой вариант и вариант более опытного верстальщика. Учиться у старших, можно сказать. Особенно ценными считаю макеты, у которых есть ревизии, то есть их переделывали несколько раз, исправляя замечания.
    Ищи в google по фразе "free PSD HTML5"
    Примеры:
    bootflat.github.io
    https://thesiteslinger.com/blog/free-html-templates
    graphicdesignjunction.com/2015/10/html5-website-te...

    Есть вариант списаться с дизайнерами, которые выложили на themeforest только PSD макеты. Их можно сверстать и продавать самостоятельно или совместно с автором темы согласно вашей договорённости.

    Конечно же веб-разработчику каждый HTML макет в итоге нужно запрограммировать. Сделать на его базе сайт с нужной функциональностью, решающий какую-то задачу. А какую именно - придумай сам.
    Генераторы идей:
    tevko.github.io/practice/index.html
    https://copist.ru/ru/blog/2016/02/11/pet-project-ideas/
    Ответ написан
  • Как сделать скрытую авторизацию?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Используй HTTP MiddleWare

    Вот решение по ограничению доступа к некоторым URL с проверкой прав доступа авторизованного пользователя
    laravel.io/forum/02-17-2015-laravel-5-routes-restr...

    Но у них при отсутствии некоторой роли идёт редирект на /home , а тебе надо (я так понимаю) вернуть 404 Page Not Found

    public function handle($request, Closure $next)
    {
        if ($request->user()->type != 'A')
        {
            abort(404,'Page not found');
        }
    
         return $next($request);
    }
    Ответ написан
  • Как победить ошибку?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Посмотри лог ошибок на сервере - скорее всего была ошибка (исключение), которое в результате было отображено в формате HTML, а не JS или JSON

    Посмотри панель "Network" в Google Chrome - там возможно будет запись с кодом 4xx или 5xx - это ошибка
    5737225ce9db431faf67c054f2d2fffa.png

    И посмотри на текст ответа - там может быть HTML вместо JS
    ed296226618d458ba43dadaa33f29481.png
    Ответ написан
  • Что делать с тем, что я постоянно переписываю почти весь код?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    А я даже рад, что есть интересная задача и время на то, чтобы переписать фрагменты, которые не нравятся.

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

    С одной стороны, возможно автор всей душой хочет сделать код идеальным, что для учебного проекта просто замечательно. S.O.L.I.D., KISS, DRY, шаблоны, вёрстка, игровая логика, игровой баланс — много на чём можно зацепиться.

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

    Не хотел загромождать тостер картинками, поэтому опубликовал полный вариант ответа у меня в блоге: copist.ru/blog/2016/08/19/mvp
    Ответ написан
  • Какую CMS лучше выбрать для разработки каталога репетиторов?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Какую CMS лучше взять чтобы ускорить и удешевить разработку ?
    Не вижу смысла писать с нуля, потому что должны быть готовые решения


    Поищи Education Open Source CRM
    Навскидку https://www.openeducat.org/ или https://moodle.org/
    Последняя мультиязычная.

    Ещё по запросу Open Source Social Networks
    https://elgg.org/
    https://www.humhub.org/
    https://www.getanahita.com/

    А вообще подобное можно сделать и на базе Wordpress (https://wordpress.org/plugins/tags/community, например buddypress.org ) или Joomla ( extensions.joomla.org/tags/communities, например extensions.joomla.org/extensions/extension/clients... ) а потом допиливать до нужной функциональности.
    Ответ написан
  • Отобразить текст по таймеру, чтобы клиенту не было видно в коде?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Фраза "Hello World" - это пример, что-то типа секретной информации.
    Думаю, автор имеет в виду, что ни JS, ни в HTML, ни в CSS нет этой фразы и её нельзя собрать из частей типа "Hello" + "World".

    В этом случае решение - AJAX с проверкой меток времени на сервере.

    В куки сохраняется код серверной сессии, а на сервере в сессию сохраняется когда секретная фраза будет доступна.

    У пользователя в HTML странице встраивается счётчик на JS, который некоторое время делает AJAX запрос на сервер.

    На сервере проверяется метка времени в сессии и текущий счётчик времени - "Достиг ли счётчик времени нужной отметки?" Если да - возвращается секретная строка. Если нет - возвращается ошибка.

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

    Именно таким образом работают всякие там файло-качалки типа depositfiles: пока таймер не дотикает, пользователь не получит ссылку на файл, даже если полностью изучит JS код и отправит нужный запрос напрямую, не дожидаясь окончания таймера.

    Пример реализации:

    1. файл index.php
    <?php
    session_start();
    $_SESSION['secret_phrase'] = 'Hello, World'; // секретная фраза
    $_SESSION['time_to_show_secret'] = time() + 10; // через сколько времени фраза может быть доступна
    ?>
    <!DOCTYPE html>
    <html lang="ru">
    <head>
      <meta charset="utf-8" />
    </head>
    <body>
      <div id="ajax"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      setTimeout(function(){
        $('#ajax').load('/secret.php'); // запросить данные через /secret.php и вставить внутрь <div id="ajax"></div>
      }, 10 * 1000); // через 10 секунд
    });
    </script>
    </body>
    </html>


    2. файл secret.php
    <?php
    session_start();
    if (isset($_SESSION['secret_phrase']) // если в сессии есть секретная фраза
            && isset($_SESSION['time_to_show_secret']) // и есть метка времени, когда фраза будет доступна
            && time() > $_SESSION['time_to_show_secret']) // и текущее время больше этой метки
        echo $_SESSION['secret_phrase']; // выдать секретную фразу
    else
        echo 'Секретная фраза пока не доступна'; // выдать ошибку


    Этот пример в архиве: https://www.dropbox.com/sh/54xk7ahezuandag/AABqbRa...
    Ответ написан
  • Что означают эти логи и как эти действия предотвратить?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Это прощупывание твоего сайта на уязвимость.
    Можно попробовать удалить со страниц твоего сайта упоминание про версию CMS (
    <meta name="generator" content="WordPress 4.4.2" />
    ). Также посмотри как отключить служебные HTTP заголовки типа "X-Powered-By:PHP/5.3.28". Как скрыть специфические директории /wp-content/ и /upload/. Как скрыть специфические файлы wp-login.php и другие. В общем, не дай сторонним сайтам узнать, что у тебя за CMS.
    Есть специальные сервисы, через которые можно проверить - удалось ли скрыться (1, 2, 3)
    Количество запросов уменьшится

    По поводу
    Сервер не выдерживает нагрузки.

    Посмотри error.log - на каких страницах обычно падает по 500 или 501 ошибкам

    Установи nginx+php-fpm вместо apache+mod_php и включи php-fpm slow log, выясни что там у тебя вызывает ошибки 502 request timeout (на тостере)

    Через htaccess апача или конфиги nginx пропиши правила для ответа 404 Not Found на такой список URL

    В nginx установи кэширование ответов с кодом 404 на час или больше, чтобы до PHP даже не добиралось.
    Ответ написан
  • Как получить реальный опыт разработки без устройства в штат?

    copist
    @copist
    Мидл, хочешь стать синьором? http://copi.st/ExhE
    Соглашусь с Владислав Копылов
    Набить портфолио тестовыми заданиям - вариант хороший
    Во-первых - сделаешь сам. Может быть даже расскажут в чём косяки, если не понравится. Может быть даже дадут второй шанс на решение, если показать интерес и настоять.

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

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

    Пиши свой личный учебный проект, ищи союзников для написания мини-проекта в команде, участвуй в OpenSorce проектах
    Ответ написан