• Как определить стоимость проекта?

    verkhoturov
    @verkhoturov
    HTML-Верстальщик / Frontend Developer
    const x = стоимость часа вашей работы
    const y = ваша оценка временных затрат на проект (в часах)

    const isNormalPrice = x * y < 15 000 ? true : false;
    Ответ написан
  • Как обрабатывать клик на одном элементе только после клика по другому?

    0xD34F
    @0xD34F Куратор тега JavaScript
    let isBtn1Clicked = false;
    
    button1.addEventListener('click', () => isBtn1Clicked = true);
    button2.addEventListener('click', () => {
      if (isBtn1Clicked) {
        ...
      }
    });

    или

    button1.addEventListener('click', e => e.target.classList.add('clicked'));
    button2.addEventListener('click', () => {
      if (button1.classList.contains('clicked')) {
        ...
      }
    });

    или

    button2.disabled = true;
    
    button1.addEventListener('click', () => button2.disabled = false);
    button2.addEventListener('click', () => {
      ...
    });

    или

    button1.addEventListener('click', () => {
      button2.addEventListener('click', () => {
        ...
      });
    }, { once: true });
    Ответ написан
  • Как на JS узнать время проведенное на сайте (с листанием страниц)?

    wapster92
    @wapster92 Куратор тега JavaScript
    if (!sessionStorage.getItem('startTime')) {
      sessionStorage.setItem('startTime', Date.now());
    }
    
    const enterTime = sessionStorage.getItem('startTime')
    
    const showPopup = () => {
      let currentTime = Date.now()
      let spentTime = (currentTime - enterTime) / 1000
      if (spentTime >= 60) {
        clearInterval(timer)
        alert(`Вы провели на сайте минут: ${Math.floor(spentTime / 60)}, секунд: ${Math.floor(spentTime % 60)}`)
      }
    }
    
    const timer = setInterval(showPopup, 10000)

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

    Zoominger
    @Zoominger
    System Engineer
    Лол, а что вы хотели-то?

    Вместо людей, пришедших в IT по призванию и добившихся успеха многолетним тяжким трудом, подкреплённым истинным фанатизмом и любовью к своему труду (это я про себя, да), в сферу ломанулось стадо откровенно глупеньких и недалёких вайтишников, которые насосались пропаганды от курсоводов про "триста тыщ на удалёнки на пехепе нинапригаясь", причём оглянитесь - этих балбесиков даже не переубедить, они свято верят, что в IT деньги раздают просто так и что веб - это лежать под пальмами с Макпуком и пить коктейли, которые подносят мулатки. По факту же вместо Мальдив - хрущёвка, вместо Макпука - убогий Хлаоми, а вместо мулаток и коктейлей - мамка с чаем из пакетика.

    И да:
    условно говоря юниор средняя около 30-40к

    15-20k. Рублей. В мегаполисе. В галере с полной загрузкой.
    Ответ написан
  • Как прочитать, или получить доступ к сообщениям пользователя через iframe?

    Bavashi
    @Bavashi
    Через window.parent и метод postMessage(), то есть в iframe пишете так
    window.parent.postMessage({message: 'yourMessage'}, '*')
    При этом в родительском окне вешаете обработчик
    window.addEventListener('message', function(event) {}
    Ответ написан
  • Что делать, если я не могу открыть монитор ноутбука Lenovo?

    eapeap
    @eapeap
    Сисадмин, Беларусь
    Отнесите ноутбук тому, кто сможет это сделать.
    Как-то чинил сам свою машину, и не мог вытянуть полуось. Пошел в курилку автомастерской проконсультироваться, и автомастера мне прояснили: "Ты не можешь вытянуть полуось, потому что это ТВОЯ машина и тебе ее ЖАЛКО. А мастер берет кувалду потяжелее, монтировку подлиннее, и всё у него прекрасно разбирается"
    Ситуация с ВАШИМ ноутбуком - ну прям один в один.
    Ответ написан
  • Как лучше обновлять бандл на проде?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    На проде бандл пересобирают!!!! Прод - это не дев мод, где всё на лету собирается и меняется. На прод 1 раз собралось и всё. Сделали новую фичу, правку и т.п., выкатили, пересобрали.

    В гите бандлы не хранят, только когда вы разрабатываете какие-то библиотеки и т.п., что бы сразу можно было брать и юзать. Для проектов не хранят бандлы в гите, бандлы собирают прям на сервере. Потому как бандлы почти всегда собираются на основе окружения, в котором они работают.

    Окружение - это тестовый полигон, либо боевой полигон. Обычно проекты сопровождаются переменными окружения(.env ну или иными, сути не меняет) в которых прописываются разные, нужные проекту данные. Api url, режим(production, development, ещё бывает stage), порт, имя приложения для удобной отладки при запуске именованного процесса на котором будет запускаться приложение и т.п. Следовательно, во время сборки, переменные окружения заносятся в бандл и там уже хранятся.

    Переменные окружения лучше тоже на хранить в гите, т.к. любой разработчик без проблем должен иметь возможность менять эти значения на свои. Например, порт дев сервера. У меня например порт 3000 может быть занят чем-то своим и что бы запустить приложение, я просто сменю порт на свой.

    Либо собрать у себя на компе, а потом залить, дабы не тратить ресурсы сервера в этот момент. А потом просто рестарт сервера. Такой вариант подходит, если у вас всегда 1 источник данных. И вам по сути не нужны никакие переменные окружения. Но как по мне, они всегда должны быть.

    Зашли на сервер, создали файлик с переменными в вашей директории и всё.
    Открыли терминал, дали команду, собрали. Либо автоматизировать этот процесс, но это уже другая история
    Ответ написан
  • Запрет прямого входа на сайт, кроме тех кто пришел из поисковых систем в htaccess?

    VELIK505
    @VELIK505
    Руководитель департамента profitcentr.com
    Ну как правило если реферер пустой то это прямой заход:
    RewriteEngine on 
    RewriteCond %{HTTP_REFERER} ^$ 
    RewriteRule^- [F,L]
    Ответ написан
  • Как вывести картинку от слова на js?

    @loonny
    Без спрайтов, так:


    Со спрайтами, так (не все ровно потому что спрайт кривой):

    Использовал такой спрайт 5eca652b10821837951672.png
    Ответ написан
  • Есть ли "правильность" верстки?

    sniggering_deus
    @sniggering_deus Куратор тега CSS
    Dance Gavin Dance - Prisoner
    Смысл есть в именах классов, то есть если назвать класс:

    .brrrrrrr {.....}

    Или:

    .g6jdk4894 {.....}

    Будет вообще непонятно к чему относится данный класс.

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

    Блоки

    page — корневой элемент страницы
    header — шапка (страницы или элемента)
    footer — подвал (страницы или элемента)
    section — раздел контента (один из нескольких)
    body — основная часть (страницы или элемента)
    content — содержимое элемента
    sidebar — боковая колонка (страницы или элемента)
    aside — блок с дополнительной информацией
    widget — виджет, например, в боковой колонке

    Раскладка

    wrapper, wrap — обёртка, обычно внешняя
    inner — внутренняя обёртка
    container, holder, box — контейнер
    grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)
    row — контейнер в виде строки
    col, column — контейнер в виде столбца

    Элементы управления

    button, btn — кнопка, например, для отправки формы
    control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером
    dropdown — выпадающий список

    Текст

    title, subject, heading, headline, caption — заголовок
    subtitle — подзаголовок
    slogan — слоган
    lead, tagline — лид-абзац в тексте
    text — текстовый контент
    desc — описание, вариант текстового контента
    excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»
    link — ссылка
    copyright, copy — копирайт

    и так далее...


    Источник: https://github.com/yoksel/common-words

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

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

    Нечто в стиле:

    .avatarka-polzovatelуa-izobrazenie {...}

    Подобное выглядит очень и очень ужасно.
    Ответ написан
  • Создание ИП для удалёнки, подводные камни?

    @McBernar
    Такое ощущение, что тут комментируют кто угодно, только не ИП.

    Нет никаких проблем с ИП. Особенности:
    1. Раз в квартал налог 6% на упрощенке. Заработаете 0 - заплатите 0.
    2. Раз в год (можно на каждый месяц разбивать) страховой и пенсионный платежи. Первый в районе 1000 рублей/месяц, второй в районе 3500/месяц + 1% от дохода свыше 300 000 рублей один раз в год. Да, это дикость, что можно ничего не зарабатывать, но все равно платить по 4500 в месяц. Но таковы уж правила игры. Принимать вам это или нет - ваше личное решение.
    3. Бухгалтер вам не нужен. Любой внятный банк сделает всю отчетность за вас - несколько раз на кнопку нажать только будет нужно. И отправит все сам.
    4. Совершенно нормальная практика, что с вами хотят работать в белую. Это хорошо и для вас и для компании, которая сэкономит на налогах приличную сумму. Вместо 149 тысяч они переведут вам 100.
    5. Держите бумаги в порядке и не будет проблем ни с судами ни с налоговой. Тут все просто. Ну, конечно, до тех пор, пока вы не станете представлять интерес для различных любителей чужого труда. Но сейчас вам это не грозит.
    Ответ написан
  • Как сделать размытые границы у блока?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Это не размытие, а уход в прозрачность.

    Поможет:
    1. linear-gradient — если тебя устроит увод в прозрачность только фона картинки.
    2. svg mask — если надо сделать в тютельку, как на пикче, уводя в прозрачность еще и текст.
    Ответ написан
  • Как сделать документацию к коду?

    @kn0ckn0ck
    Продюсер
    Есть две крайности, которых лучше избегать:
    1. красивая и исчерпывающая документация требует колоссальных ресурсов на поддержку
    2. сложно воспринимаемый код, без малейших подсказок с чего все начинается и чем заканчивается

    Стандартные решения:
    1. самодокументируемый код, составленный так, что читающий может понять что для чего и в какой последовательности работает.
    2. описание интерфейсов (назначение метода, тип/суть параметров и т.п.) в форме комментов в коде.
    3. автоматическая документация (генерится из комментариев) - эффективно, только если сам код закрыт.
    4. модульные тесты, фиксирующие требования к коду и демонстрирующие его использование.
    5. описание высокоуровневого дизайна (High Level Design, HLD), описывающий какие элементы существуют, их взаимосвязь друг с другом и основные сценарии взаимодействия.

    Работающая документация - это компромисс из этих практик, релевантный конкретной ситуации.

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

    @ky0
    Миллиардер, филантроп, патологический лгун
    Щуп проверенного градусника, засунутый к процессору вас рассудит.
    Ответ написан
  • Как красиво записать присвоение на js?

    joeberetta
    @joeberetta Куратор тега JavaScript
    Читай: https://epdf.pub/google-for-dummies.html
    С выходом ES2020 можно теперь проверять наличие свойства более лаконичным способом
    req.query?.where // если свойство query у объекта req найдено
    Ответ написан
  • Как сделать такой эффект при скроле?

    @MagicMight

    Примера ради. Надо только озаботиться кроссбраузерностью и красивостью.
    Ответ написан
  • Как переключать не двумя кнопками, а одной?

    @Che603000
    c 2011 javascript
    const pofig = document.querySelector('#pofig');
    let show = true;
    
    document.addEventListener('keydown', function(event) {
      if (event.code === 'KeyZ' && (event.ctrlKey)) {
        pofig.style.display = show ? 'flex': ‘none’;
        show=!show;
       }
    });
    Ответ написан