Задать вопрос
  • Есть ли скрипт для изменения определённого текста в коде страницы?

    shurshur
    @shurshur
    Сисадмин, просто сисадмин...
    magesypro.com##.active.mdpDeblocker-the-modal.mdpDeblocker-modal
    magesypro.com##body:remove-class(mdpDeblocker-blur)
    magesypro.com##.mdpDeblocker-wrapper
    magesypro.com##.mdpDeblocker-blackout


    Правила, после которых всё стало хорошо (использовал uBlock Origin в Firefox).
    Ответ написан
    1 комментарий
  • В каком порядке изучать технологии начинающему html-верстальщику?

    @backender_ru
    https://backender.ru/
    Оххх. У меня сейчас жена учит HTML. Я ее обучаю, поэтому расскажу как это происходит. Распишу по этапам.

    1) собственно сам HTML. На заучивание тегов ушло пару дней. На первом этапе она учила теги с коротким описанием, что этот тег делает.

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

    3) Когда пришло понимание того, как располагать блоки, начинаем изучать CSS. Здесь изучение идет по нарастающей, сначала float, потом flexbox, потом пишем маленькую сетку, как аналог бутстрапа, а потом уже идут CSS фреймворки.

    Начинать сразу с flexbox + bootstrap 4 к примеру, это выстрел себе в ногу, потому что на фрилансе и в студиях много сайтов с float. И очень важно понимать именно это.

    Также у нас были проблемы с тем, чтобы не привязывать класс к конкретному элементу, а писать так называемый универсальный CSS, ну то есть чтобы не было классов button1-margin-top-10 и так далее.

    CSS мы сейчас изучаем в два этапа: CSS который отвечает за позиционирование (float -> flexbox) и за визуализацию (background, color) этот лайфхак помогает избежать путаницы.

    И еще я понял, что девушки любят не только ушами, но и глазами. Когда показываю CSS, стараюсь делать блоки как можно крупнее и ярче, чтобы было понимание:)

    -------
    И заметьте, все без CSS фреймворков. Пока вы не сможете сделать что-то на чистом CSS, CSS-фреймворки вам противопоказаны.
    Ответ написан
    1 комментарий
  • Как определить все места в слове, в которых можно осуществить перенос части этого слова на другую строку, по правилам русского языка?

    @ERAFY Автор вопроса
    В общем у меня получился нижеприведенный класс, позволяющий расставлять знаки "тире" в местах переноса слов по правилам русского языка.
    Класс работает на основе алгоритма Христова, и написан на языке C#.

    Запускать на выполнение нижеприведенный код можно строкой:
    word = PasteDashes.SeparateWord(word);
    Возможно кому пригодиться в будущем.

    -------------------------------------------------------

    public static class PasteDashes
        {
            // Метод проверки, есть ли в строке гласные?
            private static bool isNotLastSep(string subStr)
            {
                string vowel = "аеёиоуыэюя";
    
                var b = false;
                for (var i = 0; i < subStr.Length; i++)
                {
                    if (vowel.IndexOf(subStr.Substring(i, 1)) != -1)
                    {
                        b = true;
                        break;
                    }
                }
                return b;
            }
    
    
            // Метод разбиения слова на слоги
            private static List<string> addSeparator(string tmpS, List<string> sepList)
            {
                sepList.Add(tmpS);
                //tmpS = "";
    
                return sepList;
            }
    
    
            // Метод убирания знаков тире после первой буквы и перед последней (если там есть знаки тире)
            private static string ConnectFirstAndLastLettersToSyllables(string word)
            {
                if (word[1] == '-')
                    word = word.Remove(1, 1);
    
                if (word[word.Length - 2] == '-')
                    word = word.Remove(word.Length - 2, 1);
    
                return word;
            }
    
    
    
            //Основной метод работающий по алгоритму Христова
            public static string SeparateWord(string word)
            {
                string vowel = "аеёиоуыэюя";
                string voiced = "бвгджзлмнрхцчшщ";
                string deaf = "кпстф";
                string brief = "й";
                string other = "ьъ";
                string consonant = "бвгджзйклмнпрстфхцчшщ";
    
                string letter, syllable = "";
                var syllables = new List<string>();
    
    
                for (var i = 0; i < word.Length; i++)
                {
                    letter = word.Substring(i, 1);
                    syllable += letter;
    
                    bool l;
                    if (word.Length != i + 1)
                    {
                        var k = word.Substring(i + 1, 1);
                        Regex rgx = new Regex("[А-Яа-я]");
                        l = rgx.IsMatch(k);
                    }
                    else
                        l = false;
    
    
                    if (l)
                    {
                        // Проверка на признаки конца слогов
                        // Если буква равна 'й' и она не первая и не последняя и это не последний слог
                        if (
                            (i != 0) &&
                            (i != word.Length - 1) &&
                            (brief.IndexOf(letter) != -1) &&
                            (isNotLastSep(word.Substring(i + 1)))
                            )
                        {
                            syllables = addSeparator(syllable, syllables);
                            syllable = "";
                            //continue;
                        }
    
                        // Если текущая гласная и следующая тоже гласная
                        // EDIT: этот блок необходим если задача - корректно разбить слово на фонетические слоги,
                        // и не нужен если задача - разбить слово на части, которые можно переносить
                        //if (
                        //    (i < word.Length - 1)
                        //    && (vowel.IndexOf(letter) != -1) &&
                        //    (vowel.IndexOf(word.Substring(i + 1, 1)) != -1)
                        //    )
                        //{
                        //    syllables = addSeparator(syllable, syllables);
                        //    syllable = "";
                        //    // continue;
                        //}
    
                        // Если текущая гласная, следующая согласная, а после неё гласная
                        if (
                            (i < word.Length - 2) &&
                            (vowel.IndexOf(letter) != -1) &&
                            (consonant.IndexOf(word.Substring(i + 1, 1)) != -1) &&
                            (vowel.IndexOf(word.Substring(i + 2, 1)) != -1)
                            )
                        {
                            syllables = addSeparator(syllable, syllables);
                            syllable = "";
                            // continue;
                        }
    
                        // Если текущая гласная, следующая глухая согласная, а после согласная и это не последний слог
                        if (
                            (i < word.Length - 2) &&
                            (vowel.IndexOf(letter) != -1) &&
                            (deaf.IndexOf(word.Substring(i + 1, 1)) != -1) &&
                            (consonant.IndexOf(word.Substring(i + 2, 1)) != -1) &&
                            (isNotLastSep(word.Substring(i + 1)))
                            )
                        {
                            syllables = addSeparator(syllable, syllables);
                            syllable = "";
                            // continue;
                        }
    
                        // Если текущая звонкая или шипящая согласная, перед ней гласная, следующая не гласная и не другая, и это не последний слог
                        if (
                            (i > 0) &&
                            (i < word.Length - 1) &&
                            (voiced.IndexOf(letter) != -1) &&
                            (vowel.IndexOf(word.Substring(i - 1, 1)) != -1) &&
                            (vowel.IndexOf(word.Substring(i + 1, 1)) == -1) &&
                            (other.IndexOf(word.Substring(i + 1, 1)) == -1) &&
                            (isNotLastSep(word.Substring(i + 1)))
                            )
                        {
                            syllables = addSeparator(syllable, syllables);
                            syllable = "";
                            // continue;
                        }
    
                        // Если текущая другая, а следующая не гласная если это первый слог
                        if (
                            (i < word.Length - 1) &&
                            (other.IndexOf(letter) != -1) &&
                            ((vowel.IndexOf(word.Substring(i + 1, 1)) == -1) ||
                            (isNotLastSep(word.Substring(0, i))))
                            )
                        {
                            syllables = addSeparator(syllable, syllables);
                            syllable = "";
                            //continue;
                        }
                    }
                }
                syllables = addSeparator(syllable, syllables);
    
                string finalWord = string.Join("-", syllables);
    
                finalWord = ConnectFirstAndLastLettersToSyllables(finalWord);
    
                return finalWord;
            }
        }
    Ответ написан
  • Что именно делает дескриптор w в атрибуте srcset?

    @Ivanushka255 Автор вопроса
    Дескриптор w также как и дескриптор х можно использовать для адаптации картинок под различные ретина-устройства.

    Как это работает? В соответствии с размером экрана и плотностью пикселей устройства, а также шириной, которую будет занимать картинка (атрибут sizes), браузером будет принято решение какую из перечня картинок стоит использовать. Например, у нас есть устройство с шириной - 1366рх и разрешением - 1х. Также у нас есть некий перечень картинок:
    <img
      src="opera-fallback.jpg" alt="The Oslo Opera House"
      srcset="opera-200.jpg 200w,
          opera-400.jpg 400w,
          opera-800.jpg 800w,
          opera-1200.jpg 1200w">

    Какое изображение будет использоваться?
    1) 200/1366=0.14 - не подходит;
    2) 400/1366=0.29 - не подходит;
    3) 800/1366=0.58 - не подходит;
    4) 1200/1366=0.87 - максимально подходящее (наиболее близкое к 1х).

    Как все это работает вместе атрибутом sizes?
    <img
      src="opera-fallback.jpg" alt="The Oslo Opera House"
      sizes="(min-width: 640px) 60vw, 100vw"
      srcset="opera-200.jpg 200w,
          opera-400.jpg 400w,
          opera-800.jpg 800w,
          opera-1200.jpg 1200w">

    Теперь ширина отображения уже не 1366(устройство то же), а меньше - 820рх(60% от 1366рх). Считаем снова.
    1) 200/820=0.24 - не подходит
    2) 400/820=0.48 - не подходит
    3) 800/820=0.97 - нет
    4) 1200/820=1.46 - браузер выберет это*
    * - браузер отдает предпочтение не тому, что немного меньше, а тому, что немного больше
    Ответ написан
    Комментировать
  • Как извлечь картинку с сайта?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    1. Ctrl+shift+i (консоль разработчика) или правой кнопкой мыши по странице -> Исследовать (Inspect)
    2. Вкладка network
    3. В шапке выбрать img(изображения)
    4. Обновить страницу
    В ответ вы получите все изображения со страницы. и Вот ваша картинка
    Ответ написан
    8 комментариев
  • Как сделать, чтобы в итемах бордер не обрезался ( в слике)?

    @drawnofmymind
    .goods__col {
    cursor: pointer;
    position: relative;
    margin: 0 4px;
    margin-top: 10px;
    padding-top: 3%;
    margin-bottom: 20px;
    outline: none;
    outline: 1px solid red;
    }

    https://jsfiddle.net/cvtba47o/
    Ответ написан
    Комментировать
  • Какие есть анимации у slick-slider?

    @NeoLab
    Гуглится по запросу "анимации slick slider", либо "slick slider animations":
    https://codepen.io/artursopelnik/pen/mPvLvj
    https://codepen.io/norman_pixelkings/pen/KrLKgR
    https://codepen.io/FXDuke/pen/grQbXw

    Вот связка slick.js + animate.css
    https://codepen.io/joxxce/pen/WjGLyr
    Ответ написан
    Комментировать
  • Как написать такую красоту на javascript?

    lazalu68
    @lazalu68
    Salmon
    Можно например внутри элемента с сердечком создать прозрачный абсолютно спозиционированный оверлей; при попадании на него курсора мыши 1) включать анимацию сердечка и 2) устанавливать скорость анимации и цвет сердечка в зависимости от расстояния до центра оверлея

    Апдейт: СДЕЛАЛ ЧЁРТОВ ПРИМЕР! Полтора дня делал. Вот: https://jsfiddle.net/lucifer63/41y3qdu9/
    Это эталонный пример говнокода, но я чо-то не смог проще сделать
    Ответ написан
    Комментировать
  • Как вычислить коэффициент уменьшения вписанного в квадрат квадрата под углом n градусов?

    Lynn
    @Lynn
    nginx, js, css
    α — угол DOH (насколько повернули квадрат)
    β — угол DHO, γ — HDO (45°), DO — половина диагонали исходного квадрата (константа)
    β = 180° - α - γ = 135° - α
    По теореме синусов при 0° <= α <= 90°
    DO / sin(β) = HO / sin(γ) =>
    HO = DO * sin(γ) / sin(β) =>
    HO = DO / (sqrt(2) * sin(135° - α))
    5fc6ba3849446844557055.jpeg

    Но как вы хотите запихать эту формулу в CSS это сложный вопрос
    Ответ написан
    4 комментария
  • Какой вариант подключения шрифтов оптимален?

    @Steppp
    Качаешь шрифты откуда угодно,
    Конвертируешь в woff woff2
    Кидаешь в проекте в папку fonts
    И подключаешь их из папки

    Это самый оптимальный вариант!
    Ответ написан
    2 комментария