Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
Malekith

Ivan Bogatov

  • 3
    вклад
  • 4
    вопроса
  • 7
    ответов
  • 29%
    решений
Лайки
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Как отменить свойство text-decoration у ::after, если оно задано у родителя?

    rockon404
    Антон Спирин @rockon404
    Frontend Developer
    Добавить правило display: inline-block;

    Демо.
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Какие самые простые способы/конструкторы для создания Landing Page?

    Sanes
    Sanes @Sanes
    Научитесь верстать и жизнь станет сильно проще. В хорошем текстовом редакторе лендинг набрасывается буквально за час.
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Почему не работает ни margin, ни padding?

    xevin
    Степан Крапивин @xevin
    python.js
    потому что используется display: inline, а надо inline-block или block
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как сделать красивую навигацию на landing page?

    Kiyoshi
    Евгений Кузовлев @Kiyoshi
    https://alvarotrigo.com/fullPage/examples/responsi...
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как сделать загрузку файла на комп?

    0example
    Алексей Скляров @0example
    <a href="{ссылка_на_файл}" download>Скачать</a>
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Если готовый скрипт открытия блока вверх по клику?

    Serj-One
    Serj-One @Serj-One
    i'm sexy and i know it
    $('.button').on('click', function () {
            $('.footer').toggleClass('active');
        })

    .footer{
      position: absolute;
      bottom: -500px;
      transition: .5s;
    }
    .footer.active{
      bottom: 0;
    }

    Вот и весь скрипт.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как менять оформление блока при прохождении блоков?

    KickeRocK
    Andrew @KickeRocK
    FrontFinish
    var $nav = $(".my_menu");
    var sect1 = $('#section1').height();
    $( window ).scroll(function() {
    if ($(this).scrollTop() > sect1) {
            $nav.css('background','black'); //что угодно 
          }
    });

    по такому же принципу для любого блока. Т.е. Как только проскраливаешься до высоты этого блока - че-то там меняется.
    Ответ написан более трёх лет назад
    5 комментариев
    5 комментариев
  • У абсолютно спозиционированного дива пропадает 100%-я ширина?

    daemonhk
    Одиночка Айс @daemonhk
    ПсиХоПат
    Да, ширина элемента станет равной ширине контента, расположенного в нем, выставляйте 100% принудительно.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • В чем разница между display:flex и display:inline-flex?

    Владимир Варламов @bes_internal
    webdev: perl, gentoo, html/css
    Особенности inline- элементов:

    - им можно задавать размеры, рамки и отступы, как и блочным элементам;
    - их ширина по умолчанию зависит от содержания, а не растягивается на всю ширину контейнера;
    - элементы в одной строке выравниваются вертикально подобно строчным элементам (verticacal-align)
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Тег p внутри h2 - хорошо или плохо?

    vadimkot
    Вадим Кот @vadimkot Куратор тега CSS
    В спецификации для подобного даже есть специальный раздел Subheadings, subtitles, alternative titles and taglines https://www.w3.org/TR/html50/common-idioms.html#co...
    Там один из вариантов:
    <header>
      <h2>3D films set for popularity slide </h2>
      <p>First drop in 3D box office projected for this year</p>
    </header>
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как скрыть текст за пределами блока?

    ElijahTr @ElijahTr
    https://codepen.io/elijah_tr/pen/ZxypPr
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как правильно оформлять медиазапросы: медиазапросы внутри класса или классы внутри медиазапроса?

    delphinpro
    Сергей delphinpro @delphinpro Куратор тега CSS
    frontend developer
    Почему все молчат о том, что второй вариант нарушает синтаксис CSS и не будет работать в принципе?!

    Автор не упоминает препроцессоры, в тегах тоже нет. Значит речь идёт о нативном css, в котором только первый вариант и возможен.

    НО, даже в первом варианте я категорически не рекомендую писать так, как вы написали. Гораздо лучше и удобнее будет так:

    /*== Какой-то блок на странице */
    .class-1 {
      /* стили для экранов 767px и менее */
    }
    @media (max-width: 767px) {
      .class-1 {
        /* стили для экранов 767px и менее */
      }
    }
    
    /*== Какой-то другой блок на странице */
    .class-2 {
      /* стили для экранов 767px и менее */
    }
    @media (max-width: 767px) {
      .class-2 {
        /* стили для экранов 767px и менее */
      }
    }
    
    /*== И так далее… */
    …


    Код должен быть структурирован. Стили, описывающие отдельный селектор, всегда должны быть все вместе и рядом.

    А если вы собираете стили препроцессором, то наверняка у вас описания всех селекторов будут раскиданы по отдельным файлам. Медиазапрос для селектора пишете в том же файле, где и основной стиль.

    Повторю ещё раз: главное — структурированность кода! Пишете один раз, читаете и дорабатываете — сотни. Облегчайте себе будущие чтение и модификацию кода, который пишете.
    Ответ написан более трёх лет назад
    7 комментариев
    7 комментариев
  • Как правильно оформлять медиазапросы: медиазапросы внутри класса или классы внутри медиазапроса?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Если предполагается, что никто после вас не будет редактировать выходной CSS, и весь проект будет собираться сборщиком, то второй вариант удобнее, т.к. получается удобный компонентный подход.
    Допустим, есть компонент "кнопка", и для него отдельный файл /blocks/button.scss, очень удобно писать стили для этой кнопки только в этом файле. И если соблюдать БЭМ, если создавать переменные, то позже, этот компонент (блок) можно будет использовать в других проектах, без дополнительного редактирования. Скопировал файл, поменял переменные (для оформления, цвет, отступы, размеры, шрифт и.т.д.), подключил и готово.
    Но одно замечание, лучше сразу определите миксины (или переменные) для этих медиа запросов, чтобы не было сотни разных медиазапросов аля 300px, 320px, 400px и.т.д. Можно позаимствовать из Bootstrap 4

    Первого варианта придерживаюсь при написании стилей на чистом css и без сборщиков, т.к. легче писать последовательно для разных устройств. Но такое случается редко, только если поддерживать старый проект.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как передать переменную в другую функцию?

    VoidVolker
    VoidVolker @VoidVolker Куратор тега JavaScript
    Разработчик ПО и IT-инженер
    function get(text) {
        return parseInt(text); 
    } 
    
    function Awake() {  
        console.log(get("100"));
    }
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Почему нет простого позиционирования по центру?

    AskMy
    ink @AskMy
    иногда решаю задачки и задаю глупые вопросы
    как это нету :
    display:flex;
    justify-content:center;
    align-items:center;

    вот это отцентрирует любой блок потомок по вертикали и по горизонтали: https://codepen.io/topicstarter/pen/MVbYMg

    Второй вариант с позиционированием : https://codepen.io/topicstarter/pen/QmGbWP
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Загружает ли браузер background-image если класс не используется в html?

    nikolayshabalin
    Николай Шабалин @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    В этом случае загружается.

    <style>
                .image {
                    width: 100px;
                    height: 100px;
                    background-image: url('https://hi-news.ru/wp-content/uploads/2015/01/Galaxy.jpg');
                }
            </style>
    
            <div class="image"></div>


    а в этом случае нет.
    <style>
                .image {
                    width: 100px;
                    height: 100px;
                    background-image: url('https://hi-news.ru/wp-content/uploads/2015/01/Galaxy.jpg');
                }
            </style>
    
            <div class=""></div>


    Это всё очень просто проверяется в developer tools вашего браузера. Во вкладке network
    Ответ написан более трёх лет назад
    2 комментария
    2 комментария
  • Как работать с z-index?

    Alex-HAV @Alex-HAV
    htmlbook.ru/css/z-index
    https://htmlacademy.ru/courses/45/run/19

    Ну дак присвоить им z-index...
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Поможете определить край дозволенности в Гугл Плее?

    EnDeRJaY
    Лежебокер @EnDeRJaY
    cout >> "Hello World!" >> endl;
    Дозволенное заканчивается там, где начинаются половые органы и копирайты. Дотрагиваться до мужских сосков? Пожалуйста, не женские же. Показывать шарж селебретис? Но смотря на кого шарж. Шутить про политику?Да этим кишит четверть игр в ГуглПлее. А вот засунуть что-то в жопу - противно, и это не пропустят. ГуглПлей - вещь странная, в котором контент связывают от неадекватности с помощью запрета на порнографию, или если ты что-то украл(также в плане контента). А так же как сказал Devalone-вы больной ублюдок
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Какие инструменты для разработки мобильного приложения на базе веб-технологий сейчас есть?

    k12th
    Константин Китманов @k12th
    console.log(`You're pulling my leg, right?`);
    Есть несколько вариантов.

    js-to-native, нативное приложение с бизнес-логикой на js и нативными виджетами:
    • react-native
    • NativeScript — на выбор angular, с недавних пор vue, чистый js
    • weex — аналог react-native для vue.js, из коробки так же работает под веб. С документацией пока грустновато, но народ работает.

    Вроде как из этого react-native самый проработанный и стабильный. Имел дело только с ним, если это стабильно и проработанно, то в остальное даже страшно заглядывать (хотя NativeScript+ionic мне хвалили). Выглядит нативно на каждой платформе. Знания html и css по большей части не пригодятся: тэги/компоненты свои, css-свойства работают не все и не во всех сочетаниях.

    webview, гибридное приложение, браузер на весь экран:
    • cordova, старейшее живое решение

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

    прочее:
    • *.webmanifest и PWA, нечто среднее между установкой приложения и добавлением сайта в закладки.

    По идее идеал, часто юзаешь сайт — типа ставишь приложение, редко — открываешь из браузера. У разработчика голова не болит как подружить веб, iOS и Android: везде выглядит и работает одинаково. На практике поддержка пока что пятнистая.
    Ответ написан более трёх лет назад
    5 комментариев
    5 комментариев
  • Как улучшить код javaScript и подход в целом?

    Даниил @daniil14056
    Уделил час времени, вот основные недочеты, будет приятно если ознакомитесь.
    1.!!!!!! Много обработчиков. Можно одним все решить. Почитайте про делегирование событий.
    ///
    var interface=document.getElementById("interface");
    interface..addEventListener('input', function (e) {
            var target= e.target || e.srcElement // получаем элемент где произошло событие
            switch(target.id){    
                  case "hatHarmon" : // для каждого input
                          aVolume = e.target.value;
                           break;
                   case  //.....
        });
    // И проще и быстрее и нагляднее. Вместо мусора ...Button-ов то же самое одним все накрыть.


    2.Слишком много document.querySelector ты каждый раз во всем document, то есть во всем dom дереве ищешь то что находиться рядом! Намного быстрее будет
    var interface=document.getElementById("interface"); 
    var hatValume=interface.querySelector("#hatVolume")
    tomValue=hatValume.parentElement.nextElementSibling.querySelector("#tomVolume");

    3. getDocumentId быстрее чем querySelector(#id) в разы, сам проверял.

    4. Область видимости ;(function(){ ю..весь код...})();

    5. У тебя ++i в конце в цикле script.js не обрабатывает первый элемент.. Замени на i++;
    Т.е. ты находишь элемент и уже в нем ищешь.

    6.
    if (dCh.checked) {
            dVel = 1;
        };
        
        if (!dCh.checked) { // зачем, лишние операции, потеря скорости,  замени на else
            dVel = 0.5;
        };
    
        if (cCh.checked) {
            cVel = 1;
        };
        // не красиво долго, плохие имена, я путаю, "dCh cCh - 10 сек уходит на нахождение различия". Код не поддерживается, долго искать что такое cCh, вся область засорена мусорными глобальными переменными. 
    // Решение, разбить все на блоки или функции, или Паттерн реализовать, к примеру фабрику для звуков и акцентов
    // Массивы у вас не массивы а куча переменных, можно автоматизировать циклом, создать массив из этих элементов, и перебирая его уже составить 2 массива из звуков и акцентов, и уже работать с ними.

    7. Не правильно именуете переменные, переменные с маленькой буквы именуют, а классы большими.

    8style.css очень плохо, вы снова каждый раз ищите во всем документе. Составляйте более конкретные селекторы
    #start:hover,  
    #stop:hover,
    #clear:hover {
        background-color: #2C7769;
    }
    /* медленно, xQuery долго(для больших проектов конечно) их ищет этот селектор. Нужно расписать до него путь поконкретнее*/
    #playStop div{
           background-color: #2C7769;
    }


    9 Вы много раз в подряд объявляете i, let i не спасает в циклах, у вас есть let i=0; глобальной области в начале где-то. Потом можно уже просто for(i=0;i<....
    Вроде все. Но код рабочий конечно, но почти не живучий.
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
Оценили как «Нравится»
  • 1
  • 2
  • Следующие →
Самые активные сегодня
  • Yorido Satoshi
    • 23 ответа
    • 0 вопросов
  • Evgenii
    • 11 ответов
    • 0 вопросов
  • pantsarny
    • 9 ответов
    • 0 вопросов
  • Enokin
    Владислав
    • 8 ответов
    • 0 вопросов
  • Drno
    • 7 ответов
    • 0 вопросов
  • bolfduy
    • 1 ответ
    • 4 вопроса
  • © Habr
  • О сервисе
  • Правила
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации