• Что такое такое rest api?

    @eandr_67
    web-программист (*AMP, Go, JavaScript, вёрстка).
    API социальных сетей - это вполне типичные примеры реализации REST API.

    REST (RESTful) - это общие принципы организации взаимодействия приложения/сайта с сервером посредством протокола HTTP. Особенность REST в том, что сервер не запоминает состояние пользователя между запросами - в каждом запросе передаётся информация, идентифицирующая пользователя (например, token, полученный через OAuth-авторизацию) и все параметры, необходимые для выполнения операции.

    Всё взаимодействие с сервером сводится к 4 операциям (4 - это необходимый и достаточный минимум, в конкретной реализации типов операций может быть больше):
    1. получение данных с сервера (обычно в формате JSON, или XML)
    2. добавление новых данных на сервер
    3. модификация существующих данных на сервере
    4. удаление данных на сервере

    Операция получения данных не может приводить к изменению состояния сервера.

    Для каждого типа операции используется свой метод HTTP-запроса:
    1. получение - GET
    2. добавление - POST
    3. модификация - PUT
    4. удаление - DELETE

    Т.е. :

    GET-запрос /rest/users - получение информации о всех пользователях
    GET-запрос /rest/users/125 - получение информации о пользователе с id=125
    POST-запрос /rest/users - добавление нового пользователя
    PUT-запрос /rest/users/125 - изменение информации о пользователе с id=125
    DELETE-запрос /rest/users/125 - удаление пользователя с id=125
    Ответ написан
    20 комментариев
  • Как сменить класс пункта меню при скролле до блока?

    In4in
    @In4in
    °•× JavaScript Developer ^_^ ו°
    hSpy

    jQuery("nav > a").hSpy(
      "section", {
        classTargets : "active",
        classTitles : "active",
        spaces : false,
        middleLine : 0,
        bottomLine : 0,
        axis : "y"
      }
    );
    Ответ написан
    1 комментарий
  • Как вызвать Javascript событие для виджета "Поделиться" от Yandex?

    @Faliah
    Все прекрасно работает даже простым ctrl-c+ctrl-v
    Скопировано из официальной документации

    По сути:
    1. кидаете на страницу элемент, предположим
      <div id="ya_share" class="ya-share2" data-services="vkontakte,twitter,facebook,gplus" data-counter></div>

    2. инициализируете виджет:
      Ya.share2('#ya_share', {
          hooks: {
              onready: function () {
                  alert('блок инициализирован');
              },
      
              onshare: function (name) {
                  alert('нажата кнопка' + name);
              }
          }
      });

    3. ...Profit
    Ответ написан
    5 комментариев
  • Как в Яндекс.Метрике настроить цель «Доскролил до конца страницы»?

    Попробуйте использовать событие скрола у jquery, по достижении подвала, можно выполнить js функцию из Яндекс.Метрика АПИ
    p.s.
    Как пример может послужить этот код:
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $('.footer').offset().top) {
            yaCounterXXXXXX.reachGoal('TARGET_NAME');
        }
    });
    Ответ написан
    1 комментарий
  • Как сверстать текст по дуге?

    qork
    @qork
    { background: #F00B42 }
    Комментировать
  • Как сверстать текст по дуге?

    Принципиальная особенность (достоинство) этого способа – в том, что геометрия самих букв тоже изменяется. Напр. в букве "H" параллельные вертикальные становятся непараллельными, получив перспективное искажение. Т.е. это 100% честное искажение всей картинки, а не разброс букв по отдельности.

    Способ: отрисовать этот текст в SVG, из него сделать canvas в разрешении с запасом – в несколько раз больше нужного. В canvas применить нужные искажения (легкая фраза, за которой куча сложностей, в т.ч. математика и антиалиасинг).

    Вставить как data-uri и просто новые canvas.

    Сделал пример, в котором из такого:
    <svg xmlns="http://www.w3.org/2000/svg"
         width="920" height="160" viewBox="0 0 230 40">
      <text text-anchor="middle" x="115" y="32" font-family="Times New Roman" font-size="35">
        Hello, Toster
      </text>
    </svg>
    получается такая картинка:
    example.png
    P.S. там всё сыро, надо ещё по краям области билиниар интерполяцию прозрачности, что ли, сделать..
    Ответ написан
    2 комментария
  • Как кастомизировать стрелки next/prev у слайдера Slick?

    zorro76
    @zorro76
    Вот slick responsive кастомизированые стрелки (мой вариант):

    $('.responsive').slick({
            dots: false,
            arrows: true,
            nextArrow: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
            prevArrow: '<i class="fa fa-angle-left" aria-hidden="true"></i>',
            infinite: false,
            speed: 300,
            slidesToShow: 3,
            slidesToScroll: 3,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        infinite: false,
                        arrows: true,
                        dots: false
                    }
                },
                {
                    breakpoint: 700,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
    Ответ написан
    Комментировать
  • Какие вопросы задают на собеседовании?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Я обычно собеседую обсуждая бывшие проекты соискателя и наши текущие. Смотрю, понимает ли человек о чём говорит, под каким углом смотрит на задачи и т.п. Могу дать машину и реальный рабочий код и спросить о нём мнение соискателя. Здесь важно как соискатель будет код анализировать, куда первым делом полезет смотреть, будет ли пользоваться какими-либо инструментами, что ему бросится в глаза, насколько глубоко закопается и т.д.
    Ответ написан
    Комментировать
  • Кто-то скликивает рекламу? что делать?

    iiiBird
    @iiiBird
    Пока ты спишь - твой конкурент совершенствуется
    директ примерно каждую неделю делает проверку рекламы и пересчитывает цены.
    должно прийти письмо от директа примерно такого содержания:
    "Наша система осуществляет регулярные проверки рекламных кампаний, чтобы автоматически выявить и исключить недобросовестные клики.
    По результатам очередной проверки для ваших кампаний была проведена корректировка статистики и возврат средств на баланс кампаний:"
    Ответ написан
    7 комментариев
  • Как сделать красивую сортировку изображений в прямоугольнике?

    cashalot
    @cashalot
    Если я вам помог - пометьте мой ответ как решение
    Это можно сделать на flex. Просто скопируй )
    <div id="gallery">
    	<img src="1.jpg" alt>
    	<img src="2.jpg" alt>
    	<img src="3.jpg" alt>
    	…
    </div>


    И к этим блокам следующий css:
    div#gallery {
    	display: -ms-flexbox;
    	-ms-flex-direction: column;
    	-ms-flex-wrap: wrap;
    	display: flex;
    	flex-direction: column;
    	flex-wrap: wrap;
    	height: 100vw;
    	font-size: 0; 
    }
    div#gallery img { 
    	width: 33.3%;
    	transition: .8s opacity;
    }
    Ответ написан
    Комментировать
  • Как автоматически сбрасывать opcache?

    VELIK505
    @VELIK505 Автор вопроса
    Руководитель департамента profitcentr.com
    Разобрался сам.
    opcache.validate_timestamps=1
    - чтобы автоматическая перезапись происходила изменённых файлов
    регулируеться параметром (чеканья в секундах).
    opcache.revalidate_freq=20
    Ответ написан
    Комментировать
  • На какой бесплатной CMS можно оперативно сделать лёгкий сайт?

    @dobromin
    А можно вопрос? для меня, интересно, почему не modx?
    По своему опыту за два часа имея шаблон реализовал, лендинг, достаточно функциональный, при том что я его совсем не знал, когда переносил шаблон делал это вместе с видео уроком. Все получилось и все работает.
    Ответ написан
    Комментировать
  • Как постепенно уменьшать элемент при скролле?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    посчитали высоту страницы (hp), высоту окна (hw)
    получили максимальный скролл smax = hp - hw и минимальный smin = 0
    знаем начальный (hmax) и конечный (hmin) размеры целевого элемента
    получаем текущую величину скролла (s)
    вычисляем диапазоны изменений
    ds = smax - smin = smax
    dh = hmax - hmin

    отсюда вытекает что
    s / ds = h / dh , где h - приращение высоты целевого элемента

    =>

    h = hmax - (dh * s) / ds

    Если нужно увеличивать элемент, меняем последнюю формулу
    h = (dh * s) / ds + hmin

    Итоговый код (подробный)
    var element = document.getElementById('d');
    var hp   = document.body.scrollHeight,
        hw   = window.innerHeight,
        smax = hp - hw,
        smin = 0,
        hmin = 100,
        hmax = 300,
        ds   = smax - smin,
        dh   = hmax - hmin;
    
    window.addEventListener('scroll', function () {
        var s = window.pageYOffset; // current scrollTop
        var h = hmax - (dh * s) / ds;
    
        element.style.height = h + 'px';
    });


    Сокращенный
    var element = document.getElementById('d');
    var hmin = 100, 
        hmax = 300;
    
    window.addEventListener('scroll', function () {
        var s = window.pageYOffset; // current scrollTop
        var h = hmax - ((hmax - hmin) * s) / (document.body.scrollHeight - window.innerHeight);
    
        element.style.height = h + 'px';
    });


    И демо на фиддле
    Ответ написан
    Комментировать
  • Где узнать всё о семантике вёрстки?

    hvdd
    @hvdd
    Кратко о себе
    Давайте разберёмся
    3fb27f0eccd54d829cdc6271fd558024.jpg

    Самый важный и простой шаг — лечение дивянки использование html5 тегов для разметки страницы.

    Вот здесь Вадим Макеев расскажет Вам, как и почему стоит использовать html5 теги.
    А вот здесь Ричард Кларк расскажет Вам, как и почему не стоит использовать html5 теги.
    А потом ещё можете прочитать вот эту статью, чтобы окончательно запутаться и уйти на бэк-энд.

    Но если вам это интересно настолько, что вы понимаете, что между SEO и семантикой не очень-то много общего, то можете ещё почитать вот эти статьи.

    Кстати, обязательно читайте комментарии к статьям, они тоже очень полезны.

    P.S. После просмотра этих видео вы поймете, почему картинка под спойлером очень крутая.
    Ответ написан
    1 комментарий
  • Настройка окружения для front end?

    sompylasar
    @sompylasar
    Frontend Software Engineer
    Зависит от того, собираетесь вы делать сайт (то есть с большим количеством доступного для поисковиков контента, верстки, дизайна, с небольшим повторным использованием компонентов и небольшим интерактивом в целом) или веб-приложение (с большим количеством интерактива, обычно за авторизацией, с большим количеством повторно используемых компонентов).

    Для веб-приложений могу порекомендовать https://github.com/facebookincubator/create-react-app с подключенным https://www.npmjs.com/package/custom-react-scripts... – этот комплект даст быстрый старт в сборку статичного React-приложения с SASS- и CSS-модулями (БЭМ-классы генерируются автоматически, стили принадлежат компонентам). Можно прикрутить его к любому бэкенду, если требуется, но он не даст необходимого для контент-нагруженного сайта: нет генерации полной разметки на сервере. Здесь перечислены некоторые альтернативы: https://github.com/facebookincubator/create-react-...

    Не сочтите за саморекламу, но недавно рассказывал о том, как думать компонентами – может, пригодится:
    1. https://www.slideshare.net/IvanBabak/think-compone...
    2. https://www.slideshare.net/IvanBabak/think-compone...
    Ответ написан
    Комментировать
  • Настройка окружения для front end?

    devellopah
    @devellopah
    установи yeoman командой npm install -g yo
    установи webapp-generator (сгенерирует дефолтный шаблон для будущего сайта) командой npm install -g webapp-generator
    установи gulp-cli и bower командой npm install -g gulp-cli bower

    и наконец командаyo webapp чтобы поднять каркас

    Вообщем всё это объясняется на самом сайте yeoman.io

    UPDATE: поскольку этот вопрос очень многих заинтересовал, я написал простой стартер для вёрстки с pug.
    вкратце: под капотом проект, который скаффолдит webapp-generator, только приспособленный для работы с pug, убрана папка тестов, добавлен gulp-uncss(чтобы отрезать неиспользумемые стили фреймворка) и почищен gulpfile.js
    Вобщем форкайте, лайкайте, пулл-реквестите(если хотите)
    Ответ написан
    1 комментарий
  • Как сделать интерактивную карту из кривых?

    Sticher78
    @Sticher78
    гуггли mapplic, может всё тобой указанное и чуть-чуть больше)

    Пример:
    https://www.mapplic.com/mall-map/?location=starbucks
    Ответ написан
    Комментировать
  • Какие библиотеки, плагины и прочее для верстки вы используете в своих проектах?

    xPomaHx
    @xPomaHx
    1vs9
    Слишком всё быстро меняется, лучше каждый раз гуглить по необходимости, даже если у вас проекты каждые 2 дня меняются, это не сильно дольше чем брать из закладок или ставить сборщиками.
    Ответ написан
    Комментировать
  • Какие библиотеки, плагины и прочее для верстки вы используете в своих проектах?

    SergGrbanoff
    @SergGrbanoff
    UX/UI Desinger, Front-End Developer
    Фреймворки, библиотеки и плагины для верстки сайта.

    1. Bootstrap - самый популярный HTML, CSS, и JS фреймворк в мире для разработки отзывчивых, mobile-first проектов в вебе.

    2. slick - Адаптивный слайдер для сайта

    3. Owl Carousel 2 - красивый, отзывчивый карусельный слайдер

    4. Fotorama - плагин для создания галереи на сайте

    5. MagnificPopup - плагин для создания модальных окон

    6. FancyBox - построениe всплывающих окон

    7. Mmenu - мобильное меню


    8. bxSlider - отзывчивый jQuery-слайдер для контента


    9. Fullscreen Slit Slider - слайдер с интересной анимацией

    10. parallax.js - эффект Parallax

    Первая 10-ка
    Ответ написан
    Комментировать
  • Как в modx сделать такой расчет?

    @seriogja
    Добрый день!

    Вопрос очень похож на: "Знаю таблицу цветов и несколько html тегов, как сделать социальную сеть на 3млн пользователей с 99.9% аптаймом?" Вы для начала определите, что вы хотите сделать. Далее определите, можете ли вы это сделать самостоятельно (хотя бы частично). Если да, то делайте, что можете, а дальше спрашивайте, нет - ищите готовые решения или заказывайте у других разработчиков.
    Это я к тому, что у вас не вопрос, а скорее предложение "сделайте за меня" :)
    Ответ написан
    Комментировать