Ответы пользователя по тегу JavaScript
  • Какими средствами разрабатываются онлайн-опросники, как, например, typeform.com?

    copist
    @copist
    Empower people to give
    1. Очень импонируют онлайн-опросники вроде typeform.com, но хочется сделать похожее свое. Не совсем понимаю, какими средствами на backend и frontend это делается.

    Фронтенд typeform.com
    * underscore.js
    * jQuery
    * собирали и сжимали возможно через Gulp
    * CSS возможно скомпилирован их SCSS или LESS
    * CSS/JS фреймворков не вижу. Писали с нуля?

    Бакенд
    * ОС Ubuntu (по заголовкам ответа)
    * Apache 2.2 (по заголовкам ответа)
    * nginx 1.4.6 (по заголовкам ответа)
    * Язык программирования, возможно, PHP (по наличию куки PHPSESSID) но может быть что-то другое
    * Кэширование на уровне nginx и HTTP
    * Возможно кэширование в memcached/redis или иначе
    * Сжатие в gzip

    2. Где правильнее хранить полученные от опроса данные? Может имеет смысл сразу куда-то результаты отправлять (на мыло), а не хранить их?
    База данных реляционная (MySQL или PostgreSQL), но может быть смесь SQL + noSQL.
    На мыло можно посылать копию, но хранить где-то надо, чтобы посмотреть если мыло потеряется.

    3. Как это правильнее реализовать? ЦМС не нужна по сути?
    Я бы для такой одноразовой задачей вообще Google Forms воспользовался или вот же typeform.com

    На самом деле это проект включает просто уйму технологий.
    Вот их скрытое меню навигации: take.ms/sfRHZ (дурацкое скажу меню)
    Я только часть пометил стрелками. Эти стрелки выделяют части проекта, которые сделаны на разных технологиях или платформах.
    Есть какая-то система управления контентом (CMS) для публикации цен и других небольших страниц, а может быть это статические страницы.
    Блог на "тумблере" hellotypeform.tumblr.com
    Есть API для подключения сторонних сервисов + документация на API и консоль для тестирования docs.typeform.io/v0.3/page/sandbox написано на node.js + фреймфорк Express
    Есть какая-то внутренняя система биллинга, а платежи принимают через https://stripe.com/
    Подключена какая-то система работы с пользователями helpcenter.typeform.com (Zendesk?)

    Вот нашёл ещё информацию об их стеке технологий: stackshare.io/typeform
    Ого-го список!

    И ещё информацию о финансировании: https://www.crunchbase.com/organization/typeform
    Проект TYPEFORM.COM с 2012 года, в прошлом году получили $1.4 миллиона баксов и за это время они могли с любых костылей уже переписать всё с нуля.
    Ответ написан
    2 комментария
  • Как добавить отправку файла (скрипт "PHP + AJAX скрипт отправки форм на E-mail")?

    copist
    @copist
    Empower people to give
    Читать код не хотелось, но спасибо, что приложили к вопросу.

    Общий ответ такой: для mail() нужно скомпоновать сложное электронное письмо, то есть выставить правильные заголовки письма, закодировать и собрать куски-аттачменты

    Общий исходный код письма может получиться такой take.ms/htDkD
    Смотрите в гугле про
    • Content-Type: multipart/mixed
    • Content-Transfer-Encoding: base64
    • Content-Type: multipart/alternative
    • email message boundary


    Если с этим заморачиваться нет желания, то воспользуйтесь готовой библиотекой например
    Ответ написан
    Комментировать
  • Чем упростить иконку SVG для генерации веб-шрифта?

    copist
    @copist Автор вопроса
    Empower people to give
    Даю ответ на свой вопрос.

    Я сделал упрощатель "любых" SVG. Под "любыми" подразумевается тестовая выборка из почти 7000 иконок от нашей компании icons8.com - ни одного сбоя, все как на подбор. Тестовая выборка отличается тем, что все иконки в flatstyle. С другой стороны, я не видел ни одного веб-шрифта с многоцветными иконками.

    Работает на связке двух утилит, работающих в консольном режиме под Centos:


    Если позволят мои друзья по имени Альтруизм, Время и Честолюбие, я сделаю специальную страницу для аплоада пользовательских файлов SVG в стиле flatstyle и преобразованию в упрощённые. А тут уже прямой путь к веб-шрифтам.
    Ответ написан
    Комментировать
  • Как правильно отправить json через POST с помощью CURL?

    copist
    @copist
    Empower people to give
    Пример ты взял (приблизительно) отсюда www.lornajane.net/posts/2011/posting-json-data-wit... и очевидно, что у автора статьи всё работает

    Если тебе приходит пустота, то скорее всего на сервере фатальная ошибка.
    Проверяй error.log веб-сервера.
    Ответ написан
  • Как структуризировать процесс обучения?

    copist
    @copist
    Empower people to give
    У вас среди вопросов уже был подобный и в нём уже указан приоритет технологий для изучения (ответ).

    А Petja указал правильный подход изучения каждой отдельной технологии (ответ)

    Я хотел бы раскрыть пункт "4. Практика и еще раз практика, решение множества конкретных задач"

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

    Для примера были взяты свежие задачи с бирж фрилансеров weblancer.net и fl.ru типа "создать тему к CMS", "сделать посадочную страницу" (landing page) или "разработать сайт-визитку".

    Были рассмотрены следующие способы изучения:
    1. Повторить работы опытных фрилансеров. Исходные макеты либо не дали, либо они уже отличаются от того, что есть на сайте.
    2. Включиться в открытый проект. Проблема в том, что сверстать страницы HTML можно несколькими способами, вплоть до image map или таблиц. А сравнить-то результат вёрстки не с чем.
    3. Взять где-нибудь бесплатно или купить шаблон, к которому прилагается макет PSD, изучить свёрстанный вариант и повторить. Это оказался самый эффективный способ. Платные шаблоны делают профессионалы, "вылизывают" их, доводят до совершенства. И бесплатные шаблоны есть очень крутые, но их мало.


    Мы использовали шаблоны с templatemonster. Там есть шаблоны под популярные CMS и просто HTML шаблоны. Также позже брали примеры из обзоров (35 примеров прекрасных посадочных страниц...) и повторяли несколько из них. Несложный макет в итоге верстается за сутки.

    Это покрывает темы (из указанного же списка):
    • XHTML, HTML4, HTML5
    • CSS2.1, CSS3
    • JavaScript, Ajax
    • jQuery
    • Twitter Bootstrap
    • CSS Grids
    • CSS Frameworks
    • Progressive Enhancement, Graceful Degradation
    • Responsive Web Design
    • CSS Pre-Processors (LESS / Sass)
    • CMS (WordPress, Joomla)
    • Data Formats (JSON, XML)
    • Internationalization / Localization
    • Image Editing Tools (Photoshop, Fireworks, etc.)
    • работа со шрифтами

    Задачи типовые, а охват тем сразу вот какой обширный. Изучение в интенсивном темпе заняло 2...4 месяца. Профессионалом так быстро не станешь, но на позицию junior уже можно претендовать.

    Так что мои советы:
    1. Чтобы получить бесценную практику, занимайся реальными вещами, а не учебными примерами
    2. Используй опыт профессионалов, чтобы повторять и копировать лучшие решения

    Но это не отменяет необходимость изучения учебных примеров. Надо знать, откуда копипастить решения :) Онлайн курсы и правильные статьи очень пригодятся.
    Ответ написан
    Комментировать
  • Чем отличается верстальщик от front-end developer?

    copist
    @copist
    Empower people to give
    Верстальщик преобразует графический макет (Photoshop или иной) в набор HTML + CSS + картинки. Иногда к свёрстанному макету может подключить типовые библиотеки Javascript, например, slider для картинок, или всплывающие подсказки (tooltip), или диалоговые окна (dialog/popup).
    Знания и навыки:
    • работа с графическими программами, чтобы понять, как собран макет
    • знание HTML, HTML5, CSS, CSS3, понятие про веб-шрифты, спрайты и другие технологии
    • пригодятся знания по HTML-фреймворкам, например, Twitter Bootstrap или Semantic UI
    • навыки кроссбраузерной вёрстки, чтобы в разных браузерах выглядело и работало одинаково
    • навыки отзывчивой вёрстки, чтобы можно было использовать на устройствах с разными возможностями и разрешениями
    • знание типовых решений javascript, чтобы реализовать простейшие вещи, заложенные в макете


    Фронтенд-разработчик делает так, чтобы макеты, полученные от верстальщика, были наполнены реальными данными. Если приложение построено как client-side (то есть вся основная логика загружается в виде огромного javascript в браузер, а данные запрашиваются с сервера по AJAX; это называется "толстый клиент"), то фронтенд-разработчику потребуется следующее:
    • знание HTML, HTML5, CSS, CSS3, понятие про веб-шрифты, спрайты, Comet и другие технологии
    • глубокое знание Javascript, включая использование готовых фреймворков, библиотек и написание расширений для них, что подразумевает объектно-ориентированное и событийное программирование
    • знание AJAX, CORS и навык создания тестовых затычек на стороне сервера, чтобы можно было разрабатывать приложение пока бакенд не готов


    Если фронтенд строится на стороне сервера, то дополнительно потребуется знать используемый серверный язык программирования (например, Python, Ruby или PHP) и используемый фреймворк (Django, Ruby-on-Rails, Yii). На практике бывало такое, что фронтендер просил в нужной части проекта сделать var_dump от структуры данных, которую надо показать и перечислить серверные методы, которые надо вызвать по нажатию предполагаемых кнопок.

    Зачастую фронтенд-разработчик может и сам закодировать эти серверные методы, если не требуется углубляться в серверную логику (отношения в данных, конкретная бизнес-логика, хранение данных, кэширование, очереди, крон-задачи). Я лично таких очень ценю.

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

    -----------

    Написал дополнение: copist.ru/blog/2015/08/29/layout-designer-vs-front...
    Ответ написан
    2 комментария
  • Есть ли альтернатива JQuery? Если мне требуется управляться DOM, то зачем мне Ajax?

    copist
    @copist
    Empower people to give
    Если я вас правильно понял, то вам помогут Knockout.js или Angular.js - они предназначены для управления DOM.
    Ответ написан
  • Как реализовать порядок в массиве?

    copist
    @copist
    Empower people to give
    P.S. Если не понятно я могу постараться объясниться еще лучше, спрашивайте.

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

    Что дано и что вы в итоге хотите?

    Отладьте ваши алгоритмы в режиме пошаговой отладки, воспользовавшись какой-нибудь IDE (среда разработки):


    Так же рекомендую вам составить план проверки функций (что на входе - что на выходе) и применить юнит-тестирование с помощью PHPUnit

    P.S. Все ссылки на актуальность не проверял. Поищите свежие версии инструкций на сайтах производителей.
    Ответ написан
  • Какой скрипт используют для демонстрации адаптивного дизайна сайта?

    copist
    @copist
    Empower people to give
    Скрипт переключения размеров - очень простой jsfiddle.net/copist/y3xxkLto

    Наука там в том, что на сайте, который отображается в iframe, прописаны стили CSS, отдельные правила которых применяются при разных размерах экрана. Адаптивный дизайн.

    P.S. Я знаю, вы в тайне любите поняшек. Только скрываете это :)
    Ответ написан
    1 комментарий
  • Как организовать защиту от парсинга сайта?

    copist
    @copist
    Empower people to give
    Пользовался вот такими методами для защиты небольших фрагментов текста:
    1. Генерация текстов в виде изображений - обычно раньше так имейлы скрывали, но можно что угодно генерировать. Можно накладывать водяные знаки, использовать многоцветную подложку, а лучше всего вставлять произвольные символы в произвольных местах тем же цветом, что и основной текст - при распознавании в результатах будет мусор.
    2. Вставка в текст мусорных тегов c динамическими случайными стилями
    <style>.GHJbk.KLJHK { display: none; }</style>
    <span class="ADsdas POxlka3">note</span>
    <span class="GHJbk KLJHK">x862</span>
    <span class="j38jdJ Uu300D">book</p>


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

    Шум должен быть псевдослучайным, то есть не зависеть от времени, погоды или генератора случайных чисел. Он должен зависеть от текста. Это во избежании восстановления неиспорченного текста путём многократной генерации картинки или текста с "шумом".

    Оба способа приводят к просадке по производительности
    Ответ написан
    5 комментариев
  • Какой есть терминал под windows для веб-разработки?

    copist
    @copist
    Empower people to give
    на github'e дают ссылку для установки, только вот что и как оно устанавливает, не могу понять


    Это клиентское приложение для системы контроля версий GIT.
    На хабре habrahabr.ru/post/125799
    Документация на русском: git-scm.com/book/ru
    Клиент GIT для Windows (один из ...) : git-scm.com/download/win

    После этого сможешь получать копии проектов с GIT (git clone ...)
    Вообще копии проектов можно получать и без клиента, потому что gitbub позволяет скачать их в виде архивов ZIP.

    Также может кто знает терминал для windows ?

    Указанный дистрибутив клиента git включает и визуальное средство для работы с репозиториями и терминал, очень похожий на терминал linux, и очень много линуксовых команд поддерживаются,
    а Linux для этого ставить не потребуется, потому что это только имитация для совместимости.

    в видеоуроках разработчики под маком вводят для открытия файлов команды в строку

    Операционная система MacOS похожа на linux. Запомнить пару команд несложно, плюс в командной строке есть автодополнение при вводе имён файлов. И после этого запускать файлы становится быстрее, чем в проводниках мышкой тыкаться.

    Но если речь идёт о консольной среде linux и ты не планируешь менять операционную систему компьютера, то потребуется виртуальная машина.
    Прочитай вот эту статью на хабре о системе Vagrant, которая автоматизирует процесс создания виртуальных машин из заранее подготовленных файлов-образов: habrahabr.ru/post/113354

    По всем вопросам по этой кухне (virtualbox, vagrant, linux, git) обращайся - контакты в моём профиле.
    Ответ написан
    Комментировать
  • JS RegExp: как написать регулярку для определенного количества цифр в строке?

    copist
    @copist
    Empower people to give
    1. Удалить все символы кроме цифр
    2. Проверить, что осталось 11 цифр

    /\d{11}/.test("+7(111)-313-13-11".replace(/[^\d]/g,''))
    Ответ написан
    Комментировать
  • Как в Google Chrome после загрузки или во время отладки javascript найти переменные, содержащие определенное значение?

    copist
    @copist
    Empower people to give
    Не забывайте, что в javascript есть анонимные функции, замыкания и область видимости. Найти что-то без точки останова и имени переменной нельзя.

    HTML могли менять через $(...).html() или через $(...).append(...) или даже document.getElementById(...).innerHTML = ' ... '

    Задача не имеет решения.
    Ответ написан
    Комментировать
  • Как осуществить запуск локальных файлов *.exe на Windows из Chrome браузера?

    copist
    @copist
    Empower people to give
    https://developer.chrome.com/extensions/messaging#...

    Extensions can exchange messages with native applications. Native applications that support this feature must register a native messaging host that knows how to communicate with the extension. Chrome starts the host in a separate process and communicates with it using standard input and standard output streams.
    Ответ написан
    3 комментария
  • Почему не работает не анонимная функция?

    copist
    @copist
    Empower people to give
    Второй пример
    window.onload = All();
    function All() {
                obj = document.getElementById("NewMessage");
            }

    написан с ошибкой
    Ответ написан
  • Как JS из сокращённого вида переписать (8 строк)?

    copist
    @copist
    Empower people to give
    Здесь || используется вместо ;
    && используется вместо if () { }
    непонятное усложнение при вызове addClass / removeClass

    В общем у меня получилось так
    e.preventDefault();
    var $this = $(this),
        href = $this.attr('href'),
        target_id = $this.attr('data-id'),
        target = $this.attr('data-target'),
        option = $(target).data('collapse') ? 'toggle' : $this.data();
    
    if (href) { href.replace(/.*(?=#[^\s]+$)/, ''); }
    
    if ($(target).hasClass('in')) {
        $this.addClass('collapsed')
    } else {
        $this.removeClass('collapsed')
    }
    
    $(target).collapse(option);


    А вот процесс получения https://www.dropbox.com/s/jny55205vg2sb6j/toster.r...
    Ответ написан
  • Сайт для обучения Javascript. От идеи до релиза

    copist
    @copist
    Empower people to give
    Это называется "сука-code-reviewer опять не пропускает мой код"
    Обращайся. Скайп в контактах.
    Ответ написан
    Комментировать
  • Можно ли загрузить страницу через js?

    copist
    @copist
    Empower people to give
    Хочу написать расширение для хрома, которое в фоне следило бы за изменениями на определенном сайте и выводило бы уведомление в случае некоторых изменений

    У автора речь идёт не о любом сайте, а об определённом. Нужно на том сайте возвращать заголовок 'Access-Control-Allow-Origin' с разрешением для всех доменов и AJAX запросы будут выполняться.
    Ответ написан
    Комментировать
  • Логирование действий пользователя. Есть готовое решение?

    copist
    @copist
    Empower people to give
    Поищи на поисковиках «mouse tracking tools» — есть онлайн и оффлайн решения


    Вот одна из первых ссылок выдала «полу-серьёзную» статью на английском: htp://www.usefulusability.com/24-usability-testing-tools/

    Ещё вот тут в коментах несколько ссылок habrahabr.ru/post/102689
    Ответ написан
    Комментировать
  • Как правильно написать счётчик посещений работающий на стороннем сайте?

    copist
    @copist
    Empower people to give
    1. Ифреймы использовать совершенно не обязательно, они по большому счёту нужны только при отключенном javascript. Можно написать такой код, что при отключенном JS будет iframe а при включенном — генерация через JS. Могу показать как.

    2. Правильный Javascript может сгенерировать всё что угодно. А ещё более правильный сделает это асинхронно, не вызывая задержек отрисовки страницы. Могу показать как.

    3. Да какая разница как ссылка выглядит. Юзер на картинку тыкает, ему графическое содержание понравилось, а не ссылка.

    Яндекс директ использует мегассылки вида htp://yandex/qEMYmHbj0u40000ZhEWQYK5KfK1cm9kGxS198YpH9dW0echwWm2c1gTeNq-3wOjYgVjb9gg0QMgrs82ZG6HkamEg0YJGPa5GeoGaYAsa5yAjP3A2A2LQIQla98Yiv342RIGoWYKctGWfvOn7QYZeOCFfC00002H0Qxu6Zvfh-DYw0In0R84kQ5zFW-xvRwxDVIWzXDv4G00 (ссылка намеренно битая — содержит какой-то код, сервер его идентифицирует с рекламируемым сайтом)

    У гугля ещё длинее: htp://google/aclk?sa=L&ai=mdsgdqpWUpL_GOHvwQOHyYCwBJy5l-MDnPS642D-otjqCQgAEAFQotfL2P7_____AWCEje2F7B3IAQGpAlkUaNTdn2A-qgQjT9AbkFvZ_XabH5e-rqXVV6spN4fHO_3LZ1m_avwqG-bK8ZGAB5yo7iCQBwI&sig=AOD64_3Zwt8-zurwnz52xCBJyhofu6octA&rct=j&q=%D0%BF%D0%B0%D0%BB%D0%B0%D1%82%D0%BA%D0%B8+%D0%BD%D0%BE%D1%80%D0%BC%D0%B0%D0%BB&ved=0CCwQ0Qw&adurl=ТУТ_РЕАЛЬНЫЙ_URL_САЙТА (ссылка битая — содержит какой-то код ссылки, по которому идентифицирует рекламируемый сайт и, неизвестно зачем, текст поискового запроса и URL сайта)

    4. Защита от накруток — это самая сложная тема. Могу только предположить как, но 100% защиты не обеспечит
    Иногда реализуют не подсчёт кликов, а подсчёт завершённых сделок (регистрация пользователя, или первая продажа товара пользователем, или первое добавление контента пользователем, или подписка на рассылку). В этом случае сайт, куда ведёт ссылка, сообщает рекламной службе о факте по какому-нибудь API. Вот этом могу рассказать.
    Ответ написан
    1 комментарий