Задать вопрос
  • В каких случаях использовать Class, а в каких function (js)?

    JavaScript - удобный язык, если разработчик хочет использовать разные стили программирования.
    В js если хотите использовать ООП, можете использовать прототипный стиль или же функциональный.
    Используя классы - не вводится новая объектно-ориентированная модель, внутри все те же прототипы, это просто синтаксический сахар
    Ответ написан
    1 комментарий
  • Как правильно написать наследуемый класс (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 по наследованиям - Уроки
    Ответ написан
    Комментировать
  • Как набираться опыта и формировать портфолио?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Итак, я учусь на geekbrains веб-разработке.

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

    Пока не будете читать, так и будете практиковать визуальные эффекты на jQuery. Нужна база. В начале 25% теории 75% практики. Читайте https://css-tricks.com , большую книгу css (она немного устарела, гриды не рассматривают, но основная база очень полезная), смотрите Юрия Артюха (если хотите делать крутые анимации), лазьте по https://www.awwwards.com/ и разбирайтесь, как люди так делают. А также практикуйтесь, сделайте себе сайт, сайт другу, сайт девушке - всем.

    UPD: В чем сложно придумать себе близкую к боевому задачу? Боевую задачу вам вряд-ли кто-то даст, т.к. без опыта боевых задач, вы сделаете не боевое решение. Вот там "боевые" задачи.
    1) Сделайте калькулятор произведения матриц - разминочка.
    2) Сделайте игру арканоид, хоть на дивах (а раньше, когда мы учили программирование, новичков привлекала разработка игр, а сейчас почему-то сайты. Раньше было романтичнее как-то).
    3) Сделайте приложение учета личных финансов, в котором есть такие функции
    - личный счет
    - форма добавления денег в личный счет с комментарием и выбором группы доходов (долг, зп, заказ, подарок и.т.д.).
    - форма снятия денег с личного счета с комментарием и выбором группы расхода (вернул долг, купил домой что-то, купил технику, еду, потратил на женщину и.т.д.)
    - Вывод списка доходов и расходов с фильтром, сортировкой и категориями.
    - создание расписания автоматического пополнения (зп) или снятия (аренда, абонентская плата) средств с личного счета.
    - создание простого графика расходов и доходов. Я бы сюда добавил еще прогнозирование доходов и расходов хотя бы через линейную регрессию (да, я люблю машинное обучение),
    - добавление нескольких счетов
    Эта задача норм, и типа боевая, и для себя пригодится, и на гитхаб можно выложить - красота.
    Ответ написан
    14 комментариев
  • Как анимировать цифры?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Поможет jQuery.animate() – этим методом можно, в т.ч., абстрактное значение изменять от A до B. Примерно так:
    $({ myProp: A }) // начальное значение A
      .animate(
        { myProp: B }, // целевое конечное значение B
        { // всякие опции анимации: время, функция на каждый шаг и т.п.
          step: function(now, tween) {  } // эта будет вызываться на каждом шаге анимации
        }
      );


    Для вашей задачи пример (Fiddle):
    const $price = $("#banner-message > p > span");
    
    $("button").on("click", function(){
      const oldPrice = parseInt($price.text());
      const newPrice = Math.round(500 + Math.random() * 4500);
      $({price:oldPrice}).animate({price:newPrice}, {
        step: (now, tween) => $price.text(Math.round(tween.elem.price))
      });
    });
    Ответ написан
    2 комментария
  • Как анимировать цифры?

    SnaIP
    @SnaIP
    Front-end разработчик
    Комментировать
  • Где брать примеры хорошего ООП?

    Stalker_RED
    @Stalker_RED
    Посмотрите исходники nodejs, vue, или еще чего-нибудь, у чего тыщщи звезд.
    Даже если окажется, что ООП там не идеальный - вы будете не в одиночестве. Найдутся тысячи единомышленников, готовых вести святую войну за единственно правильный ООП. (По крайней мере на этой неделе.)
    Ответ написан
    Комментировать
  • Как добавить класс элементу, найденному по классу?

    Sanasol
    @Sanasol Куратор тега JavaScript
    нельзя просто так взять и загуглить ошибку
    getElementsByClassName

    getElementById

    https://www.w3schools.com/jsref/met_document_getel...
    третий пример
    Ответ написан
    Комментировать
  • Как добавить класс элементу, найденному по классу?

    FFxSquall
    @FFxSquall
    Могу писать код, могу не писать
    Вы находите "элементы", а не один элемент.
    Правильно например так:
    document.querySelector('.body').classList.add("test2");

    Если у вас много таких классов и всем надо добавить ещё, то придется воспользоваться циклом for:
    var elements = document.getElementsByClassName("body");
    for (var i = 0; i < elements.length; i++) {
        elements[i].classList.add("test2");
    }
    Ответ написан
    5 комментариев
  • Div, который выглядит по-разному в каждом браузере?

    @itsjustmypage
    Outline это контур элемента с внешней его стороны, то есть сразу за border. В отличие от border он никак не влияет на элементы, их ширину и расположение. Ключевое слово inset в свойстве outline: inset 100px green; устанавливает этот контур в виде псевдотрехмерной рамки за счёт осветления правой и нижней границ и затемнения левой и верхней относительно указанного цвета. Ширина 100px, цвет зелёный.

    Баг создаёт свойство outline-offset: -125px;, которое задаёт смещение контура. При положительном значении контур будет расширяться во все стороны. А при отрицательном будет сжиматься внутрь элемента.

    Спецификация CSS Basic User Interface Module Level 3 в статусе рекомендации говорит о том, что контур элемента со свойством outline-offset при отрицательном значении не должен становиться меньше, чем двукратная вычисляемая ширина контура. То есть если в примере у нас размеры элемента 100x100 пикселей и контур задан у нас шириной 100px, то при outline-offset: -125px; он должен сжаться внутрь элемента на 125px со всех сторон, а спецификация визуально ограничивает сжатие до outline-offset: -50px; (по 50px внутрь с каждой стороны элемента). То есть контур должен просто сойтись вместе со всех сторон, образуя квадрат в нашем случае и насколько больше не ставь отрицательное значение, больше он сжиматься не должен. Но реализация в браузерах не учитывает это поведение и выдаёт непонятные фигуры, если отрицательное значение слишком большое.

    https://www.w3.org/TR/css-ui-3/#outline-offset
    5b447ea6c9061121780680.jpeg

    Поведение при отрицательном outline-offset должно быть как на гифке. Если дальше уменьшать значение, ничего меняться не должно. AMQ4hnM.gif
    Ответ написан
    1 комментарий
  • Эталонные примеры ООП js кода?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    TodoMVC – реализация одного и того же простого приложения с использованием различных фреймворков, языков, компилируемых в JS и чистом JS.
    Ответ написан
    Комментировать
  • На каком языке пишутся сложные сайты?

    Jump
    @Jump
    Системный администратор со стажем.
    Их не пишут, нельзя вот так вот взять и написать yotube.
    Во первых не стоит называть такие проекты сайтами. Сайт это просто аккуратно оформленная страничка с данными доступная по протоколу http.
    Т.е вордовский документ размещенный в сети интернет это и есть сайт.

    А то что вы назвали - vk.com, imhonet, youtube это не сайты.
    Это программно аппаратные комплексы.
    Т.е нужны сервера, датацентры размещенные в ключевых точках, нужна система обеспечивающая взаимодействие этих серверов.
    Это продукт труда множества системных администраторов, программистов, инженеров, электриков, маркетологов, и.т.д..
    Ответ написан
    10 комментариев
  • Как сочетаются flex-basis flex-grow и flex-shrink?

    bugo_aneo
    @bugo_aneo
    Верстальщик по жизни, буддист, кофеман
    СВОЙСТВА!!! flex-basis flex-grow и flex-shrink
    flex-basis - это та ширина, будем называть так, которая неотъемлима у элемента. Не хотите ее юзать - используйте min-width.
    flex-grow - это "жадность" того или иного элемента. Т.е. сколько свободного пространства он съест, по сравнению с соседом (Спека: Определяет, сколько пространства может занимать флекс внутри контейнера. По дефолту = 0). Вспоминаем ФБоксовский способ прижатия футера к низу:
    .wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
    .content {
    flex: 1 0 auto;
    }
    .footer {
    flex: 0 0 auto;
    }

    и flex-shrink - это то, как будут сжиматься элементы, если места хватать не будет. Антагонист flex-grow. По дефолту = 1, в отличие от flex-grow = 1 (Это ТОЛСТЫЙ намек)
    Спека: Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку

    Базис задавать НАДО! если желаете адаптивности, при заданном flex-wrap: wrap;
    Спека: Свойство flex-basis определяет основу флекса, которая является начальным размером элемента.
    ВОПРОСЫ?!
    https://webref.ru/css/flex-basis
    https://webref.ru/css/flex-grow
    https://webref.ru/css/flex-shrink

    Нужны ответы? Берете простеньки макетик, а-ля Бутстрап и верстаете весь!!! на флексах. После 5-й верстки наступит Дзен! ИМХО!
    Ответ написан
    Комментировать
  • Django и маршрутизация без указания явного url?

    @immaculate
    Программист-путешественник
    Такая мини CMS уже встроена в Django, называется Flatpages. Можно посмотреть как она устроена — там очень простой код.

    А еще лучше использовать Wagtail, на сегодняший день — это лучшая CMS для Django.
    Ответ написан
    Комментировать
  • Как правильно обрабатывать ошибки и исключения?

    FanatPHP
    @FanatPHP
    Чебуратор тега РНР
    Если я правильно понял функционал

    class AppException extends Exception {}
    
    class Test{
      public function create(array $data){
        if(empty($data['message'])){
          throw new AppException('Сообщение не может быть пустым');
        }
      }
    }
    
    $test = new Test();
    
    try{
      $test->create(array('message' => 'v'));
      // redirect
    }catch(AppException $e){
      echo $e->getMessage();
    }


    Идея в том, что при использовании исключений, никаких ручных проверок делать не надо. Если исключения не было - значит всё нормально. А если было, то код попросту не будет исполнен.
    Ответ написан
    1 комментарий
  • Как это сверстать?

    @McBernar
    Самое лучшее решение — отобрать у дизайнера компьютер.
    Это я вам как дизайнер говорю.

    Кажется, что <pre> будет самым простым вариантом.
    Ответ написан
    1 комментарий
  • PHP ORM для бизнес приложений?

    artemylapko
    @artemylapko
    Symfony, Doctrine developer. Немного js и python.
    Doctrine. Возможно в начале будет не очень легко, нужно только выбросить из головы всякие active record и т.д. Но когда вникнешь в суть, уйти от доктрины не сможешь.
    Ответ написан
    6 комментариев
  • Как правильно передать переменную в mixin (SCSS)?

    mtvphnx
    @mtvphnx
    Двигаю пиксели, играюсь со шрифтами
    Блоки контента, переданные в миксин, вычисляются в той же области видимости, где определён этот блок, а не миксин. Это значит, что локальные переменные миксина не могут быть использованы в передаваемом блоке контента и переменные будут восприняты как глобальные - источник.
    Ответ написан
    4 комментария
  • Как сформировать версию продукта?

    rockon404
    @rockon404
    Frontend Developer
    В npm такое соглашение:
    1.0.0 - начальная стабильная версия
    1.0.1 - patch release, небольшие исправления, функциональность не меняется
    1.1.0 - minor release, добавление новой функциональности, сохраняется поддержка старой функциональности
    2.0.0 - major release, новая функциональность, не сохранена поддержка прерыдущих версий

    [link]
    Ответ написан
    1 комментарий