• Как работет context в Javascript?

    rockon404
    @rockon404
    Frontend Developer
    Так будет показывать экземпляр класса:
    class TestTwo {
      constructor() {
        this.logThis = logThis;
      }
    }


    Почитать.
    Ответ написан
    4 комментария
  • Как работет context в Javascript?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Dark side eye. А у нас печеньки! А у вас?
    Соответственно есть вопрос, почему в 4 случае он указывает на window?

    Потому что у вас logThis вызывается в глобальном контексте. this устанавливается при каждом вызове каждой функции. Т.е., это переменная, которая внутри каждой функции своя, как локальная.
    function logThis() {
      console.log('logThis', this);
    }
    class TestTwo {
      constructor() {}
      log() {
        logThis();
        console.log('TestTwo.log', this);
      }
    }


    https://codesandbox.io/s/n4x93k3ppl

    UPD: Тут как раз подоспела свежая статья на хабре: https://habr.com/company/ruvds/blog/422089/
    Ответ написан
    6 комментариев
  • Photoshop, notepad++ и бочка кофе в придачу, что ещё поможет верстать сайты быстрее и с меньшими затратами нервов?

    Rou1997
    @Rou1997
    WebStorm используйте, Notepad++ это явно не для быстрой верстки, кофе не поможет, это когда однажды нужно сделать срочную работу, сдать ее, и пойти пить совсем другой напиток, с обратным эффектом, а долговременно кофе не поднимет производительность, зато привыкание вызовет.
    Ответ написан
    Комментировать
  • Что почитать по веб-безопасности в 2016 новичку?

    littleguga
    @littleguga
    Не стыдно не знать, а стыдно не интересоваться.
    1. Для того, чтобы понимать, как производится та или иная атака/взлом - нужно очень хорошо понимать, как работает и устроен тот или иной продукт, какие процессы происходят внутри него.
    В первую очередь, конечно же, следует тщательно разобраться с устройством сети(как работает интернет, что такое пакет, протоколы, из чего они состоят, dns и тд). Как работает фаервол, для чего он нужен и т.д. Также крайне советовал бы научиться основам системного администрирования. А также стать более-менее уверенным пользователем unix-like систем. (сложные команды можно подсмотреть в гугле), но перемещение, логи, отслеживание состояния системы, правила для фаервола - помнить, понимать и уметь использовать.

    2. После этого посмотреть в сторону sql или других БД, как они работают, какие можно допустить ошибки. XSS уязвимости.
    Понять, что такое утечка памяти и из-за чего она возникает.

    2.1 Методы шифрования, обмен ключами, длина ключа, шифры. Что такое VPN и т.д.

    3. Чтобы всё это было не скучно, предлагаю Вам участвовать в CTF, которые проходят во всем мире с завидной регулярностью.
    Следить можно здесь, например: https://vk.com/invulnerble

    Также можете попробовать потренироваться самостоятельно, для этого есть тестовые кейсы, например: OWASP
    https://www.owasp.org/index.php/Main_Page

    ОСТОРОЖНО! СПОЙЛЕРЫ!:(а точнее разбор заданий)
    https://habrahabr.ru/post/250551/

    4. Также материалы по безопасности и ресурсы для обучения периодически добавляю здесь: https://github.com/lgg/studying/tree/master/security

    upd:
    Как идет ДДос атака?
    Собственно изучив первый пункт, Вы найдете ответ.

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

    Как пишутся программы для подбора паролей
    Зависит от шифрования. Есть брутфорс, радужные таблицы и много других. Опять таки, когда Вы дойдете до методов шифрования, то тоже ответите на этот вопрос.
    Ответ написан
    3 комментария
  • Socket.io на Node.js. Простой пример, но обмен некорректный. Почему?

    @miki131
    Событие connect на клиенте происходит каждый раз код он подключается к серверу.
    Когда вы перезапускаете сервер происходит разрыв соединения, а потом снова connect.
    Вы каждый раз при connect-е вешаете socket.on('news'... - этого делать не надо.

    var socket = require('socket.io-client')('http://localhost:3000');
    
    socket.on('connect', function() {
      console.log('connected to server');
    });
    
    socket.on('news', function (data) {
      console.log(data);
      socket.emit('my other event', { my: 'data' });
    });
    Ответ написан
    1 комментарий
  • Как применять Less на практике?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    если все равно только начинаешь изучать - переметнись на сторону sass) и сразу найдешь много гайдов и видеоуроков и всего прочего)
    Ответ написан
    5 комментариев
  • Какую почту выбрать для работы?

    @Beltoev
    Живу в своё удовольствие
    Видимо, вы не разобрались с Gmail.

    Там можно создавать отдельные папки для разного типа сообщений (например, для сервисов, которые шлют по 3 спама в секунду), и в основной вашей папке входящих не будет никакого отвлекающего мусора.

    Настройки там гибкие, интерфейс не такой уж и тяжелый
    Ответ написан
    Комментировать
  • Хорошая книга без привязки к синтаксису?

    sabramovskikh
    @sabramovskikh
    стив макконнелл совершенный код
    Ответ написан
    Комментировать
  • Почему интернет-магазины не используют спрайты для товаров?

    @metaf
    Спрайты - это background. Background - это оформление, а не контент. Ваши товары - это контент.
    Как потом в поиске ваши товары отображаться будут, или гугл должен будет их нарезать?
    Хотите ускорить работу - грузите картинки на cdn, а не занимайтесь извращениями.
    Ответ написан
    Комментировать
  • Где можно найти best practices по программированию?

    Freika
    @Freika
    Senior Ruby on Rails developer
    "Совершенный код" Стива Макконелла
    Ответ написан
    Комментировать
  • На сколько ресурса затратно операция получения даты - микросекунд с 1970 в современных языках?

    @nirvimel
    На большинстве (всех?) современных ОС получение времени - это функция ядра. Следовательно для пользовательского процесса в userspace это требует ровно один вызов в ядро, который представляет собой syscall, то есть программное прерывание. На стороне ядра код обычно тривиальный и заключается в получении значения переменной, в которой хранится время (эта переменная инкрементируется из обработчика прерывания таймера), и возврате этого значения через sysret, то есть возврат из прерывания. Поэтому основные временные затраты сводятся к исполнению syscall/sysret и сохранению/восстановлению контекста пользовательского процесса при входе/выходе в/из ядра.
    От единиц измерения (нано/мирко/милли) скорость вызова практически не зависит. Конвертация одних единиц в другие происходит на стороне пользовательского процесса, за это отвечают библиотеки и окружение конкретного языка, но эти вычисления составляют всего несколько машинных инструкций и не вносят значительный вклад общее время вызова.

    В Linux существуют несколько таймеров в ядре: высокого/обычного разрешения и переводимые/непереводимые назад, но получение времени происходит через одну функцию clock_gettime как бы по-разному это не выглядело в разных ЯВУ.

    В Windows стандартные механизмы GetSystemTime и GetTickCount выдают время только с миллисекундной точностью. А таймер высокого разрешения QueryPerformanceCounter предназначен только для измерения временных интервалов, его абсолютное значение не имеет смысла.

    Историческая справка: В реальном режиме работы x86 до тех пор, пока BIOS владеет аппаратным прерыванием таймера и таймер настроен по умолчанию (его еще можно перенастраивать), то есть с интервалом в 55ms и частотой в 18.2 герц, на каждый тик таймера инкрементируется четырехбайтное значение по абсолютному адресу 0:046C. Так что пользовательская программа (термин процесс тут не совсем применим) может получить значение времени мгновенно простым считыванием этого значения из памяти без каких-либо вызовов.
    Стоит отметить, что данный функционал не имеет никакого отношения к DOS или какой-либо ОС вообще, а прошит в BIOS любого x86-совместимого (даже современного) компьютера и действителен каждый раз при загрузке машины вплоть до момента перевода процессора в защищенный режим в момент загрузки ядра современной ОС.
    Ответ написан
    Комментировать
  • Чем лечить данный вирус?

    leahch
    @leahch
    3Д специалист. Долго, Дорого, Дерьмово.
    То что пришел по почте троян, это не значит, что он начал жить у вас на маке! Для того, чтобы он начал жить на маке, нужно как минимум его установить ручками, на что система пару раз задаст вопрос - "в своем ли вы уме, что пытаетесь запустить файло из интернета". После этого еще скажет, что данное файло запустить не получится, так как настройки безопасности не соответствуют. Ну и если уж совсем все не сложилось и вы его каким-то образом внедрили в систему, то он не запустится, так как вирусы для винды под маком вообще не живут!
    Ответ написан
  • Код ревью или что не так с моим тестовым заданием?

    @dmitryKovalskiy
    программист средней руки
    Лично у меня код вида
    setupList();
    showListProgress(true);
    getTaskList();

    ассоциируется с процедурным программированием. Java это насколько я знаю ООП. А тут ни паттернов, ничего. Покрыть тестами такой код я не знаю как. Наверняка внутри идет обращение к параметрам окружения или глобальным переменным, мокировать которые просто праздник.
    Разделения логики на слои я тут не вижу и внутри методов есть и получение данных и настройки отображения, однако на мой взгляд это проблема не сколько программиста, сколько человека, поставившего задачу за 5 часов написать целое приложение. На мой взгляд лучше бы или дал сутки или дал конкретные задачи на алгоритмы.

    Поскольку сам работаю на шарпе, комментировать стиль написания не могу. Может какие-то приемы это классика
    Ответ написан
    Комментировать
  • Как пропустить td при парсинге?

    @artemsee
    Array.from(
       document.getElementsByTagName("table")[1]
           .getElementsByTagName("tr"))
               .forEach(function(item) {
                   console.log(item.getElementsByTagName("td")[0].textContent+ "-" + item.getElementsByTagName("td")[1].textContent);
                }
    );
    Ответ написан
    1 комментарий
  • Как отправить такой ajax запрос?

    evgeniy2194
    @evgeniy2194
    PHP, js developer
    https://jsfiddle.net/yjrw2zvt/

    <input type="checkbox" class="checkbox" name="id1"/> 1
    <input type="checkbox" class="checkbox" name="id2"/> 2
    <input type="checkbox" class="checkbox" name="id3"/> 3

    $('.checkbox').change(function(){
    		var data = [];
        $('.checkbox').each(function(){
            if( $(this).is(':checked') ){
               data.push( $(this).attr('name'));
            }
        });
        console.log(data);
    });
    Ответ написан
    6 комментариев
  • Почему Sublime Text 3 не минифицирует JS с помощью плагина Minify?

    Не занимайся ерундой и используй сборщики проектов: gulp, grunt и тд
    Ответ написан
    2 комментария
  • Есть ли ляпы в коде?

    In4in
    @In4in
    °•× JavaScript Developer ^_^ ו°
    Одна логическая ошибка в коде точно есть. Объясню ее на примере.

    function setHandler(el){
    
       var obj = new MyController(el);
    
      $(el).on("click", function hand(){
          alert(obj.name);
      });
    
    }
    
    setHandler(element1);
    setHandler(element2);


    После выполнения данного кода в память браузера попадают:
    • Функция setHandler
    • Два объекта типа MyController
    • Две функции hand - обработчики события onclick.


    Да-да, для каждого вызова setHandler создается своя функция hand. Две (три, десять или даже миллион) разные функции с одинаковым телом. Все, что их отличает - область видимости, в которой они объявлены (к примеру, внутри каждой из них доступен свой obj).

    Но, спрашивается, как мы можем оптимизировать потребление памяти в данной ситуации? А вот так:

    function hand(){
    
      var obj = $(this).data("obj");
    
      alert(obj.name);
    
    }
    
    function setHandler(el){
    
       var obj = new MyController(el);
    
      $(el)
        .data("obj", obj) //Как вариант
        .on("click", hand)
      ;
    
    }
    
    setHandler(element1);
    setHandler(element2);

    Вынесем hand в более высокую область видимости.

    Теперь в памяти сохранены:
    • Функция setHandler
    • Функция hand
    • Два объекта MyController
    Ответ написан
    7 комментариев
  • Есть ли ляпы в коде?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Комментарии в коде бесполезные, только глаза мозолят:
    index: function (settings) {
        // Метод контроллера index
    ....
    create: function (settings) {
        // Метод контроллера create
    ....

    Если уж вы описываете свой код - делайте это с умом, посмотрите какие есть средства для генерации документации, например JSDoc

    Используйте фигурные скобки и отступы везде, где только можно. Я, разумеется, понимаю, что "стильно модно молодежно" писать if в одну строку, но такого рода конструкции взрывают мозг:
    ....
    else data = settings;
    if (typeof data !== "string") data = $.param(data);
    if (method == 'post') return $.post(url, data + '&_method=' + method_hidden);
    else return $.get(url, data);
    ....

    И, если еще придираться, - пустые строки после объявления переменных, после if/else, и.т.д. улучшают читабельность.

    Не используйте ключевые слова из es6 где попало:
    class: '.jsgrid-container',

    Есть некоторая непоследовательность - иногда вы выносите объявления всех переменных в начало функции, иногда нет. Имеет смысл определиться и использовать что-то одно.

    Да, и киньте ссылку на codepen что-ли, а то в 500 строк кода ни разу не понятно работает ли там что-то (и что оно вообще делает). И к этому хочется добавить - посмотрите в сторону систем сборки (Grunt/Gulp/...)на ваш вкус - скорее всего эти 500 строк можно разбить на части поменьше, станет проще ориентироваться в происходящем.
    Ответ написан
    1 комментарий
  • Как развиваться начинающему web-разработчику?

    Коротко
    Карта развития Web Разработчика

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

    Живой пример: Есть толковый фронтендер(или бекендер по JS) пишет морду сайта на JS Фреймворке. Есть гуру бэкенда пишет API сайта. В случае с фулстаком(образно) он пишет обе задачи сам, но заведомо понятно, что он пишет это дольше и не факт что по последнему слову будет сделано.


    Что нужно для развития дальше:
    - Читайте блоги зарубежных программистов, они делают отличные архитектуры как в самом коде, так и решения в DB.
    - Фреймворки PHP и JS - чем больше их будет тем лучше. Все они ускоряют разработку. Все чаты, соц авторизации, регистрации,и прочие первоочередные задачи давно уже написаны. Вы можете концентрироваться на более важных задачах.
    - ООП тут очень спорный вопрос, на определенных этапах разработки оно решает, но когда этот уровень появляется, чаще всего прибегают к другому языку программирования и переписывают проект в угоду скорости (С++, Java, Python). Понимать нужно, поскольку фреймворки построены на этих парадигмах, но самостоятельно придумывать вам гибкие решения вряд ли придется(по крайней мере до Senior-а точно).
    - Не изобретайте велосипеды. Разбирайтесь в чужом коде(Этот навык очень ценен после "решить/найти решение любую задачу"). Любой магазин чаще всего будет написан в лучшем случае на фреймворке, в худшем на OpenCart, Woedpress - что просто идиотизм, это блоговая система БЛОГОВАЯ. из за тренда выкручивают яйца.
    - Учить английский и работать не на СНГ, Укр или места постсоветского пространства. Искать фирмы зарубежных филиалов и работать там. Поскольку так или иначе там уже работают профессионалы и знакомы с западным рынком, европейским. Там пишутся интересные проекты и появляются интересные решения.
    Ответ написан
    7 комментариев
  • Как реализуется такое меню?

    romich
    @romich
    Frontend разработчик
    Я, конечно, код вам расписывать не буду здесь, но смысл очень простой. Там стоит по скроллу раздавание классов. То есть, опускаемся на 50 пикселей, получаем дополнительный класс на меню, у которого стоит изменение бэкграуна. Потом просто добавляются и убираются активные классы элементам меню (в зависимости от того, насколько вниз опустилась страница). На каждом дополнительном классе стоит свой css.

    jQuery(document).ready(function() {
        jQuery("#scrollup").mouseover(function() {
            jQuery(this).animate({
                opacity: .65
            }, 100)
        }).mouseout(function() {
            jQuery(this).animate({
                opacity: 1
            }, 100)
        }).click(function() {
            $("html, body").animate({
                scrollTop: "0px"
            });
            return !1
        });
        jQuery(window).scroll(function() {
            0 < jQuery(document).scrollTop() ? jQuery("#scrollup").fadeIn("slow") : jQuery("#scrollup").fadeOut("slow")
        })
    });

    #scrollup {
        position: fixed;
        width: 35px;
        height: 35px;
        right: 20px;
        bottom: 40px;
        display: none;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: -3px -76px;
    background-image: url('data:image/png;base64....)

    Это пример плавного появления кнопки наверх, когда нужно. Здесь все реализовано по такому же принципу для классов меню. У самого меню изначально стоит фиксированная позиция, и ей просто добавляется дополнительный класс, у которого изменяется фон.
    Ответ написан
    Комментировать