• Что такое замыкание?

    DzodzikovAK
    @DzodzikovAK
    Java Developer
    Замыкание - это функция, содержащая в себе ссылки на переменные из внешней области видимости. Т.е. она "замыкает" внешние переменные в себе.

    Собственно, это один из двух видов анонимных функций: есть лямбда-функции, есть замыкания (clojures). В этом их отличие.

    замыкание js - это функция внутри другой функции ("обертки")

    Нет, замыкание не обязательно является вложенной функцией.
    Ответ написан
    2 комментария
  • Что такое замыкание?

    @HowardRoark
    Full stack developer
    Мне кажется, самый простой пример замыкания - это счетчик.
    var counter = (function () {
    	var current = 0;
    	return function () {
    		current++;
    		return current;
    	}
    })();
    
    console.log(counter()); // 1
    console.log(counter()); // 2

    В данном случае мы не имеем доступ к переменной current и функция гарантированно возвращает каждый раз уникальное значение.
    Если бы это была простая функция, то переменная, содержащая состояние (current), должна была бы находиться вне функции.
    var current = 0;
    var counter = function () {
    	current++;
    	return current;
    }
    
    console.log(counter()); // 1
    current = 5;
    console.log(counter()); // 6

    А это уже нарушает принцип "черного ящика", т.к. переменной можно присвоить другое значение в любом месте.
    Ответ написан
    4 комментария
  • В этом случае объект очищается по причине работы алгоритма Mark-and-sweep или это просто эффект работы локальной переменной...?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Все сильно зависит от движка, но в основном принципы похожи. Расскажу на примере v8 (chrome, node).
    Первое, что надо понять, в v8 сборка мусора основана на поколениях. И в разных поколениях применяются разные алгоритмы. В v8 используется 3 поколения:
    - Молодое (собирается по наполнению (часто), но быстрым упрощенным алгоритмом)
    - Старое (собирается по расписанию (редко), здесь как раз Mark & Sweep)
    - Особое (я не очень про него знаю, здесь очень большие объекты + объекты с прямым доступом из глобального)

    Второе, что нужно понять, все данные доступные из JS v8 хранит на куче, независимо примитив это или js-объект. С точки зрения GC все есть объект, и числа и строки и функции.

    Теперь более подробно про молодое поколение. Его цель - быть быстрым, быстро выделять и освобождать память. Создатели v8 прекрасно знают, что аллокация на куче - крайне затратная операция, поэтому здесь преаллоцированы 2 страницы памяти, которые используются по очереди. Заодно можно получить бонус в работе с процессорным кэшем, за счет того, что здесь "горячие" данные и они лежат рядом, а значит попадут на одну кэш линию. Когда мы создаем новый объект, v8 просто помещает его в конец активной страницы. Если места не хватает происходит быстрая сборка мусора. А еще здесь используется подсчет ссылок (он быстрее), но только для ссылок из старого поколения - если есть хоть 1 такая ссылка - объект живой, а так же живо все его объектное дерево. Так же нельзя "убивать" объект, если на него есть ссылки из стэка. Все остальное "мертвое". Живые объекты переносятся в начало второй страницы памяти (заодно происходит дефрагментация памяти), после чего она становится активной. Если объект пережил 3 таких быстрых сборки, то вместо второй страницы его переносят на старое поколение, при этом происходит аллокация памяти.

    В Вашем примере задействовано только молодое поколение.
    function f() {
        // это мертвый код, после оптимизации f строка вообще не будет память использовать
        let a = 'some text';
    
        // это 2 молодых объекта, на них уже ссылается контекст вызова f, а на него ссылается стэк
        var obj1 = {};
        var obj2 = {};
        obj1.p = obj2; // obj1 references obj2
        obj2.p = obj1; // obj2 references obj1. This creates a cycle.
    
        // при завершении функции стэк перестает ссылаться на контекст вызова
        // контекст вызова умрет при ближайшей GC,
        // а вместе с ним и obj1 и obj2, так как их никто не отметит "живыми"
    }
    f();
    Ответ написан
    Комментировать
  • Зачем использовать циклы для перебора свойств объекта?

    KorniloFF
    @KorniloFF Куратор тега JavaScript
    Работаю по font-end / JS
    Это для случаев, и довольно частых, когда вы не знаете количества свойств в объекте, но программно нужно обработать их все по определённому алгоритму.
    При этом лучше использовать:
    for (let item of object) {
        console.log(item);
    }


    UPD by Даниил Попов
    Ответ написан
    5 комментариев
  • Зачем ставить сразу несколько точек останова?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    >> Зачем тогда некоторые программисты при отладке ставят несколько этих breakpoint'ов?
    Например:
    - чтобы узнать какая функция выполнится раньше
    - убедиться, что программа в эти места не заходит при выполнении
    Вы можете и сами придумать как это использовать. В общем, разрешено все, что не запрещено.
    Ответ написан
    Комментировать
  • Переподключите устройство с местоположением файла или выберите новую папку... Как это убрать в CorelDRAW?

    @submariner
    1 . Щелкните Инструменты Параметры Общие.
    2 . Выберите Местоположения файлов.
    3 . Выберите местоположение, которое требуется изменить, и нажмите Изменить.
    4 . В диалоговом окне Выбрать папку перейдите к требуемой папке.
    Для перемещения файлов содержимого, сохраненных в старом расположении, в новое нажмите кнопку Да в диалоговом окне Перемещение содержимого.

    У меня там были указаны неверные пути после смены буквы диска. Поставил по умолчанию перестало выскакивать сообщение.
    Ответ написан
    4 комментария
  • В чем разница между display:flex и display:inline-flex?

    SagePtr
    @SagePtr
    Еда - это святое
    Точно такая же, как между block и inline-block
    Ответ написан
    Комментировать
  • Почему не работает package control в Sublime Text

    @nick1m
    Столкнулся с той же проблемой "There are no packages available for installation". Возможно кому пригодится.

    Boshnik Маленькая поправка не "В настройках брандмауэра", а в "свойства браузера", а то мне пришлось поискать :).

    Но, на данный момент эту проблему решили, сертификат обновили. Но не работало. Сначала оказалось, что лежал сайт (в конце ответа лежит решение позволяющее обойти и эту проблему), проверяем https://packagecontrol.io/channel_v3.json, но и после возобновления проблема не ушла.

    Добавляем в настройки плагинов для пользователя (Preferences > Package Settings > Package Control > Settings - User) каналы:
    "channels":
    [
    "https://packagecontrol.io/channel_v3.json",
    "https://web.archive.org/web/20160103232808/https://packagecontrol.io/channel_v3.json",
    "https://gist.githubusercontent.com/nick1m/660ed046a096dae0b0ab/raw/e6e9e23a0bb48b44537f61025fbc359f8d586eb4/channel_v3.json"
    ],

    Мою проблему это решило. Видимо channel_v3.json выдаёт сейчас не то, что должен. Решение временное, т.к. скорее всего в ближайшее время починят и в вебархиве данные могут устареть.

    UPD!!!: поправил код, у кого не работало - ссылка резалась тестером, сейчас в код обернул, спасибо Максим !

    UPD2: ещё раз исправил. Добавил свежую ссылку с вебархива от Максим , а так же скопировал на гист свежие данные от 04.01.2016 вторая ссылка, можно использовать по усмотрению. Не забываем о разделителях типа "запятая" :).

    PS: Кстати, ST удобно пользоваться гистом, я там и зарегался вчера только из-за любопытства :).
    Ответ написан
    14 комментариев
  • Почему не работает подсветка Color Highlighter для модулей sass-scss?

    Devinora
    @Devinora Автор вопроса
    Front-end web development
    Ответил разработчик плагина и сказал, что он переписал его и есть недоработки.
    https://github.com/Monnoroch/ColorHighlighter/issu...
    Ответ написан
    Комментировать
  • Почему я не могу выровнять таким способом несколько элементов?

    @syntaxorange
    Вы позиционируете родительский контейнер, который растянут на всю ширину страницы. Разумется после сдвигов с одинковыми величинами он возвращается на своё исходное положение. Задайте родителю тоже блочно-строчный бокс, чтобы его ширина зависела от размера потомков.
    Ответ написан
    Комментировать
  • С чего начать и как изучить веб-дизайн, дизайн интерфейсов в целом?

    BUSHA
    @BUSHA
    Найдите сайт, который вас возбуждает свои дизайном, который будоражит мысли и заставляет сердце биться быстрее, который открывает новые грани применения и восприятия существующих техник или новые подходы. Сделайте скриншот и попробуйте повторить его. В идеале результат должен соответствовать пиксель в пиксель :)
    Поискать можно на ресурсах подобным www.webcreme.com/ или просто гуглите «webdesign showcases»
    И если позволяет английский, делайте как можно больше западных пошаговых туториолов, которые научат вас некоторым фишкам и хакам, которым конкретно нигде не учат. Туториалы можно искать здесь — psd.tutsplus.com/

    И самые главные два совета:
    1. Уделяйте внимание каждому пикселю.
    2. Любите, то, что делаете. Хоть даже, как хорошая шлюха, на короткий промежуток времени работы, но любите всей душой! :)
    Ответ написан
    Комментировать
  • Веб-дизайнер и Верстальщик в одном лице - реально?

    Aleksei_Segodin
    @Aleksei_Segodin
    арт директор / дизайнер
    Я — веб-дизайнер и верстальщик в одном лице. Так что это реально.

    Использую HTML, CSS и JavaScript. С помощью этих троих могу сверстать интерфейс любой сложности. Но пока без 3D интерактива, потому что только недавно взялся за JavaScript.

    А что касается дизайна, то за плечами уже десятки дизайнов сайтов, один из которых даже выиграл золото в номинации "Лучший редизайн сайта" на MENA Transform Awards 2016.

    Кстати, в США это очень распространенено когда дизайнер сам верстает свои макеты. И когда просматриваю вакансии в разных студиях, то замечаю, что всем нужен дизайнер со знанием верстки. Или указывают что знание верстки будет плюсом ля кандидата.
    Потому что только дизайнер сможет сверстать свой дизайн так как нужно, сделать их "pixel perfect" и ни разу не ошибиться в цвете.
    Вот первые попавшиеся вакансии с Биханса для примера:
    SENIOR INTERACTIVE DESIGNER
    SENIOR UX DESIGNER - WEB/MOBILE
    Ответ написан
    Комментировать
  • Почему относительно позиционированный блок перекрывает абсолютно позиционированный блок?

    dimovich85
    @dimovich85 Куратор тега CSS
    https://u-academy.net/
    Контекст наложения. Почитайте про это. Он же работает с трансформациями и прозрачностью.
    Ответ написан
    Комментировать
  • Веб-дизайнер и Верстальщик в одном лице - реально?

    @bioforge
    Верстающий пыхер
    Попробуйте заниматься дизайном и практиковать вёрстку, через пару месяцев (может и раньше) уже поймёте, как дальше развиваться. В любом случае, опыт обязательно пригодится.
    Ответ написан
    Комментировать
  • Почему не работает background-position?

    @Sn0wSky
    background-position влияет на background-image, но не на img, как и все остальные правила с backround-*
    Ответ написан
    3 комментария
  • Как понять какой именно шрифт отображается?

    @Flying
    Не скажу за Chrome, в Firefox это видно на вкладке Fonts:
    5fb038e1e16b2507425378.png
    Ответ написан
    Комментировать
  • Как использовать шрифты Roboto и San Francisco в одном приложении на двух платформах Android и iOS?

    dom1n1k
    @dom1n1k
    Использовать нативные шрифты для каждой платформы - это нормальная и хорошая практика. И по умолчанию следует придерживаться именно её.

    Использовать какой-то свой шрифт - тоже нормальная практика. Но обычно это имеет смысл только в том случае, если компания имеет хороший, внятный фирстиль, брендбук и вот это всё. Чаще всего они есть, если вы какой-нибудь Билайн или Фольксваген. Если вы небольшая конторка и тем более инди-разработчики - скорее всего это вам не нужно (если бы у вас были внятные причины на использование своего шрифта - вы не задавали бы этот вопрос тут, а решали бы со своим штатным дизайнером).
    Ответ написан
    Комментировать
  • Для чего в шрифтах форматы EOT и WOFF?

    SagePtr
    @SagePtr
    Еда - это святое
    eot - для старых версий Internet Explorer
    woff и woff2 - современные форматы шрифтов для веб (весят меньше, чем ttf)
    woff2 более современный и весит ещё меньше, чем woff, но меньшая поддержка старыми браузерами
    https://caniuse.com/#search=eot
    https://caniuse.com/#search=ttf
    https://caniuse.com/#search=woff
    https://caniuse.com/#search=woff2
    Ответ написан
    2 комментария
  • Как верстать под печать?

    @acwartz
    Тут должна быть ваша реклама.
    Но мне кажется, что это ерунда. Туда отдельно писать код для всей страницы снова?

    На чистом CSS - да.

    Чтобы скрасить монотонность копирования одного и того же, существуют препроцессоры css (LESS, SCSS, Stylus), и вместо дублирования под все медиа, Вы сразу пишите медиа запросы к конкретному классу, в последующем препроцессор сформирует нужное, и оно будет ожидаемо работать.
    Например:
    .sidebar {
      width: 300px;
      @media screen and (orientation: landscape) {
        width: 500px;
      }
      @media screen and (min-width: 640px) {
        width: 350px;
      }
      @media print {
        display: none;
      }
    }

    на выходе будет:
    .sidebar {
    	width: 300px;
    }
    
    @media screen and (orientation: landscape) {
    	.sidebar {
    		width: 500px;
    	}
    }
    
    @media screen and (min-width: 640px) {
    	.sidebar {
    		width: 350px;
    	}
    }
    
    @media print {
    	.sidebar {
    		display: none;
    	}
    }


    Отладка меди-запросов включается в DevTools доп утилитах рендера:
    5f9925e993892286417134.png
    Туть:
    5f99260ea64cd837540535.png
    Ответ написан
    3 комментария
  • Как верстать под печать?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ну давай посмотрим на примере тостера.

    Попробуем распечатать страницу с вопросом.
    Для начала вопрос: для чего мы его распечатываем? Очевидно, нам интересен вопрос, и главное его решение. Именно это мы хотим распечатать на бумаге.

    Что же нам предлагают верстальщики из ТМ?
    5f98935dba783645914348.png


    Мы получаем на бумажной версии кнопку главного меню, поле поиска, кнопки добавления вопроса и контекстного меню. Отлично. Я обязательно их понажимаю после распечатки. Ха-ха. Хорошо хоть сайдбар спрятали.

    Смотрим дальше
    5f98942e4692f875969058.png


    Форма комментирования. Ну что же. Наверное я отстал от современных технологий в своей деревне и во всем мире уже давно можно комментировать распечатанные страницы...

    В самом конце аж три листа совершенно бесполезной информации.

    В общем мы видим совершенно не оптимизированную под печать страницу.

    А вот если не забывать про печатные устройства, можно все это лишнее как минимум спрятать.
    Ответ написан
    2 комментария