• Хороший пример структурированного CSS файла?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Вот реальный файл
    /*!
     * Main styles
     *
     * @author     delphinpro <delphinpro@gmail.com>
     * @copyright  copyright © 2018 delphinpro
     * @license    licensed under the MIT license
     */
    //==
    //== Config & mixins
    //== ======================================= ==//
    $DEV_MODE: true;
    @import "vrhythm.cfg.scss";
    @import "grid.cfg.scss";
    @import "../../node_modules/bs-grid-system/source/scss/bs-grid";
    @import "../../node_modules/vrhythm/source/mixins/rhythm";
    @import "main.cfg.scss";
    @import "mixins.scss";
    @import "../../node_modules/tiny-slider/src/tiny-slider";
    //==
    //== Global styles
    //== ======================================= ==//
    @import "webfonts.scss";
    @import "vendor/normalize";
    @import "base/global.scss";
    @import "base/grid-system.scss";
    @import "base/page.scss";
    @import "base/site.scss";
    @import "base/table.scss";
    @import "base/input.scss";
    @import "base/uploadbox.scss";
    @import "base/buttons.scss";
    @import "base/checkbox.scss";
    @import "base/radio.scss";
    @import "base/radio-button.scss";
    @import "base/radio-panel.scss";
    @import "base/controls-group.scss";
    @import "base/form-field.scss";
    @import "base/auto-height.scss";
    @import "base/transitions.scss";
    //==
    //== Blocks
    //== ======================================= ==//
    @import "blocks/availability.scss";
    @import "blocks/availability-details.scss";
    @import "blocks/back-link.scss";
    @import "blocks/benefit-block.scss";
    @import "blocks/block-heading.scss";
    @import "blocks/breadcrumb.scss";
    @import "blocks/btn-close.scss";
    @import "blocks/callback-link.scss";
    @import "blocks/checked-list.scss";
    @import "blocks/ci.scss";
    @import "blocks/clear-link.scss";
    @import "blocks/document-list.scss";
    @import "blocks/download-link.scss";
    @import "blocks/email-link.scss";
    @import "blocks/entry-item.scss";
    @import "blocks/expert-consult.scss";
    @import "blocks/goods-attributes.scss";
    @import "blocks/heading.scss";
    @import "blocks/icons.scss";
    @import "blocks/info-text.scss";
    @import "blocks/logo.scss";
    @import "blocks/paginate.scss";
    @import "blocks/phone-link.scss";
    @import "blocks/phone-with-icon.scss";
    @import "blocks/phone.scss";
    @import "blocks/popular-links.scss";
    @import "blocks/price.scss";
    @import "blocks/print-link.scss";
    @import "blocks/section.scss";
    @import "blocks/service-description.scss";
    @import "blocks/services.scss";
    @import "blocks/share-block.scss";
    @import "blocks/show-all.scss";
    @import "blocks/smenu-box.scss";
    @import "blocks/smenu.scss";
    @import "blocks/tags.scss";
    @import "blocks/unordered-list.scss";
    @import "blocks/worktime.scss";
    @import "blocks/zoom.scss";
    //==
    //== Blocks
    //== ======================================= ==//
    @import "blocks/about-us-section.scss";
    @import "blocks/article-section.scss";
    @import "blocks/benefits.scss";
    @import "blocks/carousel.scss";
    @import "blocks/cart.scss";
    @import "blocks/delivery-map.scss";
    @import "blocks/delivery-partners.scss";
    @import "blocks/delivery.scss";
    @import "blocks/footer.scss";
    @import "blocks/header.scss";
    @import "blocks/help-me.scss";
    @import "blocks/load-more.scss";
    @import "blocks/nav-catalog.scss";
    @import "blocks/nav.scss";
    @import "blocks/navbar.scss";
    @import "blocks/news-section.scss";
    @import "blocks/panel.scss";
    @import "blocks/params-panel.scss";
    @import "blocks/payment-block.scss";
    @import "blocks/search.scss";
    @import "blocks/catalog-table.scss";
    @import "blocks/catalog-grid.scss";
    @import "blocks/time-range.scss";
    //==
    //== Components
    //== ======================================= ==//
    @import "components/spin.scss";
    @import "components/selector.scss";
    @import "components/tabs.scss";
    @import "components/hamburger.scss";
    @import "components/fixed-bar.scss";
    @import "components/step-indicator.scss";
    @import "components/complete-screen.scss";
    @import "components/ordering.scss";
    @import "components/order-complete.scss";
    @import "components/summary.scss";
    @import "components/goods.scss";
    @import "components/basket-contains.scss";
    @import "components/basket-goods.scss";
    @import "components/basket.scss";
    @import "components/icon-complete.scss";
    @import "components/big-order-form.scss";
    @import "components/feedback-form.scss";
    @import "components/modal.scss";
    @import "components/vue-scrollbar.scss";
    @import "components/mobile-menu.scss";
    @import "components/gallery.scss";
    //==
    //== Page specific classes
    //== ======================================= ==//
    @import "pages/home.scss";
    @import "pages/articles.scss";
    @import "pages/catalog.scss";
    @import "pages/product.scss";
    @import "pages/terms.scss";
    @import "pages/services.scss";
    @import "pages/news.scss";
    @import "pages/feedback.scss";
    @import "pages/page404.scss";
    //==
    //== Helpers & other classes
    //== ======================================= ==//
    @import "base/helpers.scss";
    @import "base/printer.scss";
    Ответ написан
    5 комментариев
  • Как сделать безопасную авторизацию с помощью JWT?

    @akass
    Developer
    https://gist.github.com/zmts/802dc9c3510d79fd40f9d...
    Отдаешь два токена и время жизни access token, которое обычно минут 30.
    Соответственно если угоняют access, то он стухнет через пол часа, а если угонят оба, то юзер не сможет обновить по реврешу, его кинет на перелогин и тогда у угонщика все стухнет.
    Ответ написан
    3 комментария
  • Как реализовать статус "просмотрено" в чате (напротив сообщений)?

    politon
    @politon
    HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
    Используй WebSocket. Ajax для такого функционала- прошлый век
    Ответ написан
    Комментировать
  • Как правильно написать наследуемый класс (js)?

    class Parent {
        constructor() {
            this._name = 'Иван'
        }
    
        get name() {
             return this._name
         }
    }
    
    class Child extends Parent {
        constructor() {
            super()
            this._patronymic = 'Иванович'
        }
    
         get patronymic() {
             return this._patronymic
         }
    
         getMsg() {
             console.log(`${super.name} ${this.patronymic}`)
         }
     }
    
    const child = new Child() 
    
    child.getMsg()

    Посмотрите уроки codeDojo по наследованиям - Уроки
    Ответ написан
    Комментировать
  • Как сделать range-slider с диаграммой в javascript?

    profesor08
    @profesor08 Куратор тега JavaScript
    Расположи элементы диаграммы. Зная их количество, ширину и ширину контейнера. Подсчитай основываясь на позиции точек, какие закрашивать, какие нет. Например подели ширину контейнера на количество полосок, так ты получишь расстояние в пикселях, которое нужно протащить точку, чтоб закрасилась полоска. Поделив пройденное точкой расстояние на ширину полоски, получишь количество полосок которое надо закрасить.
    Ответ написан
    Комментировать
  • Где искать заказы?

    Olek1
    @Olek1
    Просто прокрутите данную страницу вниз:
    5b33ea251aca7220571946.png
    Ответ написан
    2 комментария
  • Как правильно называть переменные в CSS?

    LenovoId
    @LenovoId
    svg, css,js
    :root{
      --firstcolor: blue;
    }
    
    header{
     background:var(--firstcolor);
    }

    https://jsfiddle.net/top5jb1f/ демо
    Ответ написан
    2 комментария
  • Что лучше локальные файлы или БД?

    sim3x
    @sim3x
    и недавно узнал, что html шаблоны можно кодировать в base64 и хранить в бд MySQL
    а теперь забудьте.

    В здравом уме никто
    - не кодирует хтмл в бейз64
    - почти никто не хранит шаблоны в БД

    Шаблоны следует хранить в файлах, так как так их можно поместить в гит и следить за их изменениями
    Ответ написан
    Комментировать
  • Можно лишь на одном PHP написать бекенд?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    2 комментария
  • Потеря css кода при переходе на https, как исправить?

    NetSky
    @NetSky
    Nix-админ, Разработчик Bitrix, Drupal и Wordpress
    При внешнем подключении скриптов и стилей убираем протокол

    <link rel="stylesheet" href="http://assets.example.com/style.css"/>


    вот так

    <link rel="stylesheet" href="//assets.example.com/style.css"/>
    Ответ написан
    2 комментария
  • Всплывающие блоки DIV?

    Morpheus_God
    @Morpheus_God
    Смотрите в сторону модальных окон.
    Ответ написан
    Комментировать
  • Что почитать для прокачивания навыков проектирования приложений?

    rockon404
    @rockon404
    Frontend Developer
    Достаточно поработать в проектах с хорошей архитектурой.
    С нуля писать не надо, используйте фреймворки. Приложения на фреймворках отлично поддерживаются, рефакторятся и масштабируются.
    Почитайте о MVC, SOLID, паттернах проектирования.
    Ответ написан
    Комментировать
  • Как выполнить код php при нажатии на кнопку?

    @vashaaa
    Юх с горы
    Чтобы выполнить php, существует только 2 способа - это открыть url с кодом, будь то клик по ссылке, , или через $.ajax, $.post, $.get, так или иначе надо сказать серверу, что вы хотите выполнить php и получить результат.
    Ответ написан
    Комментировать
  • Что означает (jQuery) после (function( $ )?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    (function( ) {
    })();

    Вот эта конструкция называется "анонимная самовызываемая функция".

    То есть, тут два действия:
    Объявление анонимной функции
    function( ) {
    }

    и сразу ее вызов
    ()()
    Первые скобки это синтаксический приём для вызова анонимной функции. Есть и другие методы. Например
    +function(){}()
    Вторые скобки - это собственно вызов функции и при необходимости передача параметра (обычный вызов же)

    ()(jQuery) — в параметре передается jQuery

    function($){} — а тут этот параметр объявлен и используется

    (function($){})(jQuery) — итого, объявили анонимную функцию, и вызвали ее, передав параметром объект jQuery

    Например, доллар у вас используется другой библиотекой, пусть MooTools.
    Тогда вы запускаете jQuery в безконфликтном режиме

    jQuery.noConflict();

    Это значит, что доллар использоваться не будет, и объект будет доступен только по ссылке jQuery.

    Но для удобства вы можете использовать анонимную функцию и безопасно использовать внутри неё переменную доллара

    (function($){
      $('.slider').slick();
    })(jQuery);


    Чтобы стало совсем понятно, конструкцию можно переписать без анонимной функции

    var myFunc = function($){
     // some code
    }
    
    myFunc(jQuery);
    Ответ написан
    Комментировать
  • Кто знает как сделать границы DIV в виде волн?

    profesor08
    @profesor08 Куратор тега CSS
    Сделай волну на svg. Просто посмотри что из себя представляет svg path. Твоя задача сгенерировать аналогичный твоему в макете.

    Вот пример (В поле для скриптов увидишь кнопку настроек, там список подключенных библиотек, если понадобятся.)
    https://codepen.io/peacepostman/pen/jBavvN?editors=0110

    Вот еще волна
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486...

    Но лично я бы сделал на canvas, так проще и результатом проще управлять.
    https://codepen.io/Profesor08/pen/ddGoxa
    Ответ написан
    1 комментарий
  • Как бы отредактировать html чужого сайта онлайн?

    @Qeemerc
    Frontend developer
    Добавить "пару строк" в html вполне реально.
    В инспекторе того же Chrome в контекстном меню при клике на любом элементе есть пункт "Edit as HTML".
    Ответ написан
    Комментировать
  • Как прописать ответственность ИТ-исполнителя за ошибки?

    DMGarikk
    @DMGarikk
    Lead Software Developer
    Для начала надо понять что вешая на исполнителя денежную ответственность за потерю прибыли по вине косяков внедрения - это путь в тупик, вы распугаете всех подрядчиков и с вами никто не будет работать

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

    Это ВЫ не проверили работоспособность системы, а не подрядчик накосячил, поймите что ЭТО главное
    Ответ написан
    5 комментариев
  • Хотите задать вопрос администрации Тостера?

    chelovekmuravei
    @chelovekmuravei
    \(-_-)/ раз два три четыре
    Иногда "Правильный ответ - решение" пишут в комментариях, под главным вопросом. Предлагаю дать возможность отметить это как "решение". Рядом с кнопкой "нравится" добавить "Отметить решением". Добавить зелёную галочку напротив этого комментария и напротив кнопки комментарии. И отмечать в списках вопросов как ответ.

    Дополнено. Второе предложение.
    Иногда вопросы могут иметь не совсем точный и прямой ответ, некое рассуждение и высказывание мысли по вопросу и так далее. Споры ответчиков. Предлагаю дать возможность отметить эту тему как решение, но не зеленой галочкой, а зеленой иконкой чата.
    Ответ написан
    1 комментарий
  • Хотите задать вопрос администрации Тостера?

    xpert13
    @xpert13
    Full Stack Developer
    Добавьте возможность игнорировать вопросы определенных личностей (Черный список).
    Ответ написан
    24 комментария
  • Как через js/jquery вызвать загрузку файла c сайта на пк?

    @webfln
    Если правильно понял:

    function download(content, fileName, contentType) {
        var a = document.createElement("a");
        var file = new Blob([content], {type: contentType});
        a.href = URL.createObjectURL(file);
        a.download = fileName;
        a.click();
    }
    Ответ написан
    1 комментарий