Ответы пользователя по тегу Веб-разработка
  • Почему не работают курсоры e-resize и w-resize как надо?

    copist
    @copist
    Empower people to give
    У меня на этих курсорах двусторонние стрелки.
    download?id=w3LmiNBi5xBTndcuglcfV4TfwC1n

    Первый раз вижу курсоры односторонние. Всегда же были туда-сюда. А что такими делать?
    download?id=jXmKmK1vlyGBIRj2EnDeBGUvF3nr
    Ответ написан
  • Где брать элементы дизайна для веб?

    copist
    @copist
    Empower people to give
    https://icons8.com/web-app/ 15 000+ иконок flat style и утилиты для работы с иконками
    Ответ написан
    Комментировать
  • Будут ли индексироваться страницы построенные на MVC?

    copist
    @copist
    Empower people to give
    1. Как поисковики находят страницы твоего сайта
    Поисковики сканируют все страницы, на которые он нашёл гиперссылки где-либо.
    Гиперссылки могут размещаться где угодно.
    • Внутренние перекрёстные гиперссылки на твоём сайте. Одна страница ссылается на другую. Для этого делают меню навигации, поиск по сайту, коллеции ссылок по теме, коллеции по тегам, коллеции по категориям, коллеции по датам, коллекции по полулярности и другие способы: take.ms/7GsUX
    • На чужом сайте. Это называется входящие ссылки. Например, я могу вставить ссылку на свой блог здесь на тостере и поисковая система через некоторое время найдёт эту страницу
    • Через карты сайта в формате Sitemap. Почитай сам.
    • Ищи информацию по фразам "SEO" и "Поисковая оптимизация".


    2. Почему поисковая система по запросу "город1" может выдать страницу твоего сайта
    Если на странице твоего сайта есть текст, как-то связанный с поисковой фразой, то есть "город1", то она появится в результатах поиска на яндексе или гугле.

    <html>
    <head>
        <title>город1</title>
    </head>
    <body>
        <h1>город1</h1>
        <p>Этот город1 самый лучший город1 на земле</p>
    </body>
    </html>


    Ищи информацию по фразам "SEO" и "Поисковая оптимизация".
    Ответ написан
    5 комментариев
  • Как сделать сервер, чтобы передавать с него данные в формате json?

    copist
    @copist
    Empower people to give
    Почитай про backens-as-a-service
    Это платформы, предоставляющие серверную часть приложений: база данных с неким программным интерфейсом, обычно REST + JSON.

    https://en.wikipedia.org/wiki/Mobile_Backend_as_a_...
    habrahabr.ru/company/backendless/blog/180367
    Ответ написан
    Комментировать
  • Как сделать простого онлайн консультанта для сайта?

    copist
    @copist
    Empower people to give
    Простейший пример всплыващей формы: jqueryui.com/dialog/#modal-form
    Там есть ссылка "view source" - по ней увидишь код HTML и JavaScript

    Вот та же форма в отдельном окне jqueryui.com/resources/demos/dialog/modal-form.html
    Чтобы форма появилась по таймауту, надо вставить такой код на Javascript
    setTimeout(function(){ $("#dialog-form").dialog("open"); }, 10 * 1000); // через 10 сек открыть диалог

    вставить можно вот сюда: (картинка)
    download?id=jjftchcDzdgewNR98lySiRa0sn0s

    В диалоге должны быть поля ввода и кнопка "Отправить". По клику на кнопку отправить надо проверить значения полей ввода и, если все значения правильные, выполнить запрос на сервер через AJAX
    Документация api.jquery.com/jquery.post там много примеров.
    Ответ написан
    Комментировать
  • Как отправить put запрос через curl в виде "PUT http://domain/folder/file.php HTTP/1.1"?

    copist
    @copist
    Empower people to give
    Потестируй на своём собственном веб-сервере. Создай страницу, которая будет просто вываливать все заголовки запроса

    <?php
    var_dump($_SERVER);


    Добейся, чтобы в твоём запросе были все указанные заголовки

    Нужные заголовки добавляются в запрос отдельными командами
    $headers = array(
        /* условно, добавить/удалить при необходимости */
        'date' => '2015-08-28T09:41:49+04:00',
        'content-length' => '198284',
        'content-md5' => 'ea200caec1ed9ef712fddafe4e2361e4',
        'x-upload-filename' => 'file_name.ext',
    );
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);


    Знаю, что PUT запрос лучше отправлять по другому:
    curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'PUT'); // вместо curl_setopt($ch, CURLOPT_PUT, true);
    // и обязательно заголовок передать array('content-length' => 'число байт в файле')
    Ответ написан
  • Какие методы/библиотеки/технологии использовать в web-проекте?

    copist
    @copist
    Empower people to give
    Общий ответ: вебсокеты и асинхронные сообщения через pub/sub
    В гугле искать по фразам "socket.io rabitmq" "php rabbitmq" "php websocket" "php pub/sub"

    Вариант реализации с использованием PHP
    На клиентском приложении: socket.io + javascript
    На сервере: socket.io + RabbitMQ + PHP

    Чтобы следить за игровым процессом:
    Скрипт PHP будет посылать сообщения в очередь на RabbitMQ
    socket.io будет читать очередь RabbitMQ и пересылать в веб-сокеты

    Клиентское приложение в браузере будет создавать постоянное соединение к сервером по протоколу веб-сокетов и читать из него всё, что пришлёт сервер socket.io. Всё, что присылается, нужно будет показывать в веб-интерфейсе.

    Чтобы управлять игровым процессом
    Из клиентской части веб-приложения нужно будет отправлять команды управления через AJAX или через то же соединение веб-сокет.
    В случае "через AJAX" нужно будет создать серверное микро-приложение, которое будет принимать команды через AJAX и затем передавать в основной игровой процесс через RabbitMQ или иным способом.
    В случае "через веб-сокет" серверная сторона socket.io должна будет отрабатывать полученные команды и передавать в основной игровой процесс через RabbitMQ или иным способом.

    На сервере нужно будет периодически делать дамп состояния основного серверного игрового процесса и сохранять в какую-нибудь базу. Я бы предложил дамп хранить в формате JSON в базе NoSQL, например, Mongo, CouchDB, Redis.
    При перезапуске основного серверного игрового процесса нужно будет восстанавливать состояние из этого дампа.

    Игрокам нужно будет выполнять авторизацию. У нескольких игроков может быть один игровой мир или отдельный микро-мир на несколько пользователей или на отдельный сеанс игры (например, одна шахматная доска на двух игроков и несколько зрителей). Поэтому надо будет хранить данные о пользователях и мирах. Вот тут подойдёт SQL база, например, MySQL или PostgreSQL. Хотя и NoSQL тоже можно использовать.

    Ну как то так.
    Выглядит замысловато, а на деле реализуется очень просто.
    Ответ написан
  • На чем писать конструктор?

    copist
    @copist
    Empower people to give
    Дельный совет: посмотри как реализованы уже работающие современные конструкторы landing page
    https://www.google.ru/search?q=landing+page+online...

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

    Если ты делаешь LP под заказ, то тебе, может статься, тебе вполне хватит возможностей таких конструкторов.

    Моё предположение: весь конструктор - это JS, а на сервере весь шаблон и его настройки хранятся в NoSQL базе, например Mongo.

    Всё веселье начинается когда на странице попросят вывести грид из динамических данных, например, каталог товаров. Погугли в направлении BaaS (backend as service). Это может решить вопрос с хранением данных.
    Ответ написан
    Комментировать
  • Какой workflow front-end разработки у вас?

    copist
    @copist
    Empower people to give
    1. локально развёрнута система в виртуалке Vagrant почти такая же как demo-сервер и prod-сервер.
    2. весь код отправляется на bitbacket в репозиторий git в ветку dev
    3. bamboo периодически проверяет состояние ветки dev (по хуку + таймаут) и через 15 минут от последнего комита запускает юнит-тесты
    4. если тесты прошли, делает merge ветки dev -> в ветку demo. Конфликтов нет.
    5. deployhq по хуку определяет, что изменилась ветка demo и запускает автоматическое обновление demo-сервера. Перед обновлением (* см. ниже) делается дамп базы, пользовательский интерфейс закрывается, крон-задачи и очереди тушатся (** см. ниже). После обновления делается дамп базы, интерфейс открывается, крон-задачи и очереди восстанавливаются, выполняется рестарт кэша.
    6. с демо-сервера собираются метрики скорости и делаются селениум тесты
    7. когда релиз, вручную мержим dev -> prod. Конфликтов нет.
    8. deployhq по хуку определяет, что изменилась ветка prod и запускает автоматическое обновление прод-сервера. Перед обновлением делается дамп базы, пользовательский интерфейс закрывается, крон-задачи и очереди тушатся. После обновления делается дамп базы, интерфейс открывается, крон-задачи и очереди восстанавливаются, выполняется рестарт кэша.

    9. если хотфиксы, то восстанавливаешь у себя базу с последнего дампа, берёшь код из prod, исправляешь, комитишь в prod, затем мержишь prod -> demo -> dev

    * обновление - это что?
    Обновление исходных кодов (PHP, Python, JS, SCSS), компиляция и сжатие CSS, сборка и сжатие JS, обновление зависимостей, установка обновлений на базу данных.

    ** зачем закрывать интерфейс, тушить крон и очереди?
    В проекте много всяких вещей, которые не хранятся в репозитории, а именно: CSS собранные из SCSS, модульное приложение на AngularJS с кучей зависимостей, подмодули git, пакеты для PHP (composer) - они на bamboo, на demo, на prod собираются заново. Это занимает время. Чтобы не было сбоев, выключаем всё, кроме самой сборки. На машинах разработчиков все зависимости обновляются по мере необходимости, а на CSS и JS следит gulp.

    Настройка всей этой кухни заняла 2 месяца. По другим проектам - неделю максимум.

    Ссылки: Bitbucket (git), Vagrant (develop), Bamboo (continuous integration), Deployhq (continuous deployment).

    Ну и чуть рекламы от спонсора ;)
    Icons8 15 000+ free flat style icons
    download?id=ufWm2fSkYEEsK5OXT4v2JzxGfn5O
    Наш стек технологий на stackshare.io
    Ответ написан
    3 комментария
  • CodePen/JSFiddle альтернатива на своем сервере?

    copist
    @copist
    Empower people to give
    JSFiddle и Codepen используют онлайн редактор кода с подсветкой синтаксиса CodeMirror.
    Cloud9 используют Ace.

    Нужно приделать авторизацию, храненение кусков кода и отображение результата.
    База подойдёт NoSQL, а можно в файликах хранить
    Интерфейс можно написать на AngularJS + NodeJS + Meteor, а можно на PHP + jQuery собрать

    Репо CodeMirror https://github.com/codemirror/codemirror
    Репо Ace https://github.com/ajaxorg/ace

    Есть навороченный, но не такой красивый как Codepen проект JSBin https://github.com/jsbin/jsbin/

    А тебе зачем?
    Ответ написан
    4 комментария
  • На какой CMS Реализовать сайт мотиваций для каждого?

    copist
    @copist
    Empower people to give
    Вы хотете сделать самостоятельно? Опыт есть? Если нет, начните с самого начала: Как самостоятельно переучиться на веб-разработчика?. Тут на тостере ещё много таких. Все делятся опытом, который вам как раз и нужен.

    Будет не быстро. Это точно то, что вы хотели? А не собирались ли сделать что-то как справа на этой картинке?
    download?id=VX8VlT0KLQ99xrChz0K9cvzLhHSy

    (источник картинки - отличная книга Тимоти Пичил "Не откладывай на завтра. Краткий гид по борьбе с прокрастинацией")
    Ответ написан
    Комментировать
  • Как вернуть мотивацию к обучению?

    copist
    @copist
    Empower people to give
    Я сначала хотел дать вот такую ссылку htt_://copi.st/demotivator но это голимый демотиватор. Не читай.

    На самом деле часто бывает разочарование из-за того, что время за книгами тянется, а ощущения "всемогущества" нет. Где-то изначально была ошибка в оценке времени. По моей оценке на технологию уходит месяца три, а то и больше. Вот мои рассчёты.
    Учитывая, что для веб-разработки мало знать один язык программирования, нужно пройти ещё дополнительно 3-4 курса и основательно попрактиковаться. 3 месяца * 4 курса = год, может быть полтора года на освоение того, что должен знать junior web developer.

    Не отчаивайся по поводу недостаточной скорости. Просто иди вперёд.

    И ещё постоянно хочется сменить направление. Неа. Занеси в todo, поставь зарубку на будущее, и двигайся дальше по плану. Если слишком часто менять курс, то будешь крутиться на месте.
    Ответ написан
    Комментировать
  • Какую структуру WEB API вы используете в своих проектах: api.site.ru или site.ru/api/?

    copist
    @copist
    Empower people to give
    Выбор делается исходя не из красивости звучания, а по тому, являются ли api.site.ru и site.ru физически одной инсталяцией приложения или двумя.
    Если у двух доменов одна общая кодовая база, а отличается только логика на уровне роутинга запросов, то нет смысла заморачиваться с поддоменами.

    Минусы поддоменов:
    Отдельные поддомены - это отдельный запрос браузера к DNS. Это время.
    Если всё ваше приложение работает на SSL (а вам придётся перейти на него, когда захотите в статистике Google Analytics видеть рефереров) - на поддомены вам надо будет отдельные сертификаты, или wildcard сертификат.
    И если поддомены работают на SSL, то браузер сделает дополнительный хэндшейк для обмена ключами с каждым поддоменом.
    Если управление поддоменами ручное и вам придётся хостинг поменять, то руками двигать устанете.

    Почему к какого-нибудь сайта поддмены третьго-четвёртого уровня?
    Потому что, может быть, у них сервера API дублируются географически для распределения нагрузки.
    Можно сделать ping на каждый поддомен и убедиться - у них, скорее всего, будут разные IP.
    Выбираются автоматически или иным способом исходя из местонахождения пользователя.

    Адрес домена API на SEO почти не влияет. Почти - это потому что гуглобот считает время от обращение к серверу до момента отрисовки страницы целиком, включая загрузку стилей, шрифтов, скриптов JS, загрузку данных и рендеринг страницы в своём виртуальном браузере. Если учесть пункты выше, то на установку соединения и хэндшейки придётся потратить время. По косвенным признакам медленные сайты имеют больше позицию в поисковой выдаче, то есть дальше от первого места. А вот откуда данные на странице появились, гуглоботу начхать.

    Но иногда приходится жертвовать скоростью на DNS resolve и SSL handshake, и делать поддомены, если требуется выдавать много данных за раз. Например, если на странице очень много картинок, то браузер будет пытаться загружать их одновременно. В браузере есть ограничение на количество конкурентных запросов на один домен, кажется = 6. То есть пока не загрузятся 6 картинок (site.ru/img/1.jpg, ...), javascript не сможет обратиться к к данным на том же домене site.ru/api.
    Варианты:
    1. вынести всю статику (стили, картинки, скрипты) на поддомен static.site.ru - пусть статика тупит в отдельных запросах; причём javascript и css должны загрузиться первыми
    2. выделить для api поддомен api.site.ru

    Я обычно делаю первый вариант, но всё зависит от нагрузки.

    Пример: сайт icons8.com, API работает на домене api.icons8.com и является независимым приложением, статика отдаётся через maxcdn.icons8.com
    В данном случае я ожидаю рост нагрузки и при необходимости количество серверов будет увеличено, нагрузку распределю путём балансировки в nginx, а имя у них останется одно api.icons8.com
    Чтобы время на DNS resolve уменьшить, используем DNS Amazon - он вроде самый быстрый. Ну и MaxCDN тоже использует Amazon и в общем потеря почти не ощущается.

    Замеры времени делали через утилиту www.webpagetest.org - классный сервис, просто золото.
    Ответ написан
    Комментировать
  • Каким алгоритмом (функцией PHP) лучше получить хэш строки для последующего сравнения по базе данных?

    copist
    @copist
    Empower people to give
    sha1 - там коллизий меньше, вычисляется не намного дольше md5, длина 40 байт

    Активно используется в протоколе BitTorrent и Git
    Ответ написан
    Комментировать
  • Есть ли хороший сервис онлайн заметок/блога?

    copist
    @copist
    Empower people to give
    imhonet.ru - составляйте отзывы на книги, фильмы, сериалы, товары, сайты. Интерфейс приятный. Карточки есть, даже загружать чаще всего не придётся - там уже есть. Поиск по своим отзывам и комментариям есть.
    Он даже потом сможет подсказать, что ещё подходит к вашим интересам.
    Ответ написан
    1 комментарий
  • Почему приходит неполная станица при иcпользовании curl + proxy?

    copist
    @copist
    Empower people to give
    У вас есть доступ к самому прокси?
    Проверьте, может ли ваш прокси писать в папку с временными файлами.
    Ответ написан
  • Как повысить навык проектирования хороших сайтов?

    copist
    @copist
    Empower people to give
    Нет, я не согласен с тем, что созерцание чужих сайтов даёт навык проектирования хороших своих. Максимум - вдохновление. А тут нужны склад ума, навыки, определённая техника.

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

    Я рекомендую обратиться к направлению User eXpirience (EX) - создавать удобные пользователям решения.
    Это большое направление. Там есть немного от художника, но много от самого пользователя. Нужно давать пользователям задания, которые можно решить на твоём сайте, чтобы они при тебе делали и рассказывали - что хотят сделать, какой элемент интерфейса они бы кликнули, какие ожидания у них в голове до клика, что они получили после клика, получили ли они желаемое, достаточно ли просто было получить желаемое. Это в общем называется User/Usabity Testing. Нужно несколько таких ревью. Затем принимается решение, устраивает ли пользователей ваш способ удовлетворить его потребности, не стоит ли упростить или усложнить сценарии поведения пользователей, изменить размеры или цвета, переставить элементы местами.
    Через некоторое время, на N+1 проекте, у вас в голове начнёт складываться правильное понимание того, что ожидают пользователи, как удобнее для пользователя реализовать в интерфейсе решения его проблем. Идеального решения не будет. То, что вы придумете для N проектов, на N+1 вообще может не сработать. Главное знать как определить, что именно является причиной неудачи и иметь идеи, как это изменить.
    Ещё есть такая техника, как A/B тестирование, сплит-тестирование.
    В общем - делайте, проверяйте, исправляйте.
    Небольшой обзор для затравки www.zenexmachina.com/what-we-do/user-experience
    lean-startup-01.png
    Под хорошими я понимаю сайты, ... которые приносят прибыль своим владельцам

    Этот раздел называется маркетинг и, в частности, интернет-маркетинг. Первая задача: найти потребность и удовлетворить её. Вторая задача: удовлетворить потребности бОльшего количества потребителей, то есть "зацепить" больший процент аудитории либо увеличить аудиторию. Третья задача: найти оптимальную цену, то есть сбалансировать возможности производства, затрат, потребления и покупательской способности. Ну и ещё много задач.

    Под хорошими я понимаю сайты, ... которые при этом сделаны с заделом на будущее.

    Ищите новые потребности новых потребителей. Ищите новые потребности старых потребителей. Обозначу всё это словом диверсификация.
    Ищите новые способы удовлетворения старых потребностей, более эффективные или менее затратные. В том числе, новые клиентские технологии, более современный дизайн, если пользователю так будет удобно.
    Не останавливайтесь. Развивайтесь.
    Вот такой мини-обзор поможет: uxmastery.com/resources/process
    ux-process-diagram-cropped-620x360.png
    Опыт показывает, что меньше всего в этом вопросе помогают умные книги. Из них можно почерпнуть знания, но навык от этого не растёт ни чуть.

    Не согласен. Но конкретных книг не дам. Я просто не записывал, что именно я прочитал.
    Издательство МИФ много современных иностранных книг переводит. Много источников на английском.

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

    Не так уж и быстро она растёт. А ещё, часто бывает, что знания растут, а на практике ничего не меняется. Цель изучения не в том, чтобы знать, а в том, чтобы действовать. Обычно лучше запоминается именно то, с чем сталкиваешься в реальности. А ещё, зная как делать, начинаешь экспериментировать.

    P.S. Тут какая то "серебрянная пуля", а не "золотая середина" ж))
    Ответ написан
    Комментировать
  • Какой есть сервис для закладок "по интересам"?

    copist
    @copist
    Empower people to give
    Frontend? Посмотрите вот это: https://uptodate.frontendrescue.org/
    Ответ написан
    Комментировать
  • Блог или сайт портфолио?

    copist
    @copist
    Empower people to give
    Я бы не ставил целью создать блог как способ завоевать работодателя. Вот если действительно есть что написать, то хороший блог - это повод работодателю начать завоёвывать вас.
    Блог - это по сути электронный дневник или журнал. Там пишут разные вещи, выводятся они хронологически. По блогу удобно узнать, куда и с какой скоростью вы развиваетесь, что вас интересует, доводите ли дело до конца.

    Портфолио - это куда лучше, если надо показать итоговое состояние. Что умею делать, что сделано, каким образом. Портфолио компактнее, презентабельнее.
    Ответ написан
    1 комментарий