<rmcreative>

RSS

Все заметки с тегом «JavaScript»

  1. Monaco Editor

    2 апреля 2019

    Я живо интересуюсь редакторами для веб. В 2016-м в процессе переделки yiiframework.com я пощупал CodeMirror. Недавно начал использовать Visual Studio Code и, удивившись что нечто на Electron может так годно работать (стоит вспомнить как затупливает иногда клиент Slack), начал смотреть на код и обнаружил, что сам JavaScript-редактор является отдельным проектом, который можно использовать у себя на страницах.

    Весит побольше, чем тот же CodeMirror, но в плюс документация, скорость работы с большими текстами, API и расширяемость. Можно, например, сделать из него редактор diff или редактор markdown с подсветкой кода в блоках.

    Пробуем

    2 комментария
  2. Супрепростые шаблоны без дополнительных библиотек

    3 ноября 2016

    Вдогонку к варианту с jQuery тот же простой шаблонизатор, но без библиотек.

    Для начала задаём сам шаблон прямо в HTML страницы:

    <script type="html/tpl" id="my-template">
    <div class="item">
        <h1>{title}</h1>
        <p class="description">{description}</p>
    </div>
    </script>

    Далее реализовываем сам метод получения строки с заменёнными плейсхолдерами:

    function renderTemplate(name, data) {
        var template = document.getElementById(name).innerHTML;
     
        for (var property in data) {
            if (data.hasOwnProperty(property)) {
                var search = new RegExp('{' + property + '}', 'g');
                template = template.replace(search, data[property]);
            }
        }
        return template;
    }

    Использовать можно так:

    var html = renderTemplate('my-template', {
        title: "My cool thing",
        description: "It is really cool, isn't it?"
    });

    Стоит отметить, что экранирование спецсимволов не делается, так что будьте осторожны.

    5 комментариев
  3. Супрепростые шаблоны на jQuery без дополнительных библиотек

    2 ноября 2016

    Шаблоны — это удобно. Особенно когда альтернатива — формировать HTML конкатенацией. Если в проекте есть jQuery, а отдельный шаблонизатор использовать не хочется, реализовать простые шаблоны очень просто.

    Для начала задаём сам шаблон прямо в HTML страницы:

    <script type="html/tpl" id="my-template">
    <div class="item">
        <h1>{title}</h1>
        <p class="description">{description}</p>
    </div>
    </script>

    Далее реализовываем сам метод получения строки с заменёнными плейсхолдерами:

    function renderTemplate(name, data) {
        var template = document.getElementById(name).innerHTML;
     
        for (var property in data) {
            if (data.hasOwnProperty(property)) {
                var search = new RegExp('{' + property + '}', 'g');
                template = template.replace(search, data[property]);
            }
        }
        return template;
    }

    Использовать можно так:

    var html = renderTemplate('my-template', {
        title: "My cool thing",
        description: "It is really cool, isn't it?"
    });

    Стоит отметить, что экранирование спецсимволов не делается, так что будьте осторожны.

    8 комментариев
  4. JavaScript, задачка Trello

    3 февраля 2016

    Как-то в Trello решили нанять фронтендщика и натвитили base64-urlencode строчку, которая при раскодировании вела на страницу с прекрасной задачкой. Задачку, как и страницу, похоже, уже выпилили, но у меня сохранилась.

    Write code to find a 7 letter string of characters that contains only letters from
    acdegilmnoprstuw
    such that the hash(the_string) is
    675202166929
    if hash is defined by the following pseudo-code:
    Int64 hash (String s) {
        Int64 h = 7
        String letters = "acdegilmnoprstuw"
        for(Int32 i = 0; i < s.length; i++) {
            h = (h * 37 + letters.indexOf(s[i]))
        }
        return h
    }
    For example, if we were trying to find the 7 letter string where hash(the_string) was 680131659347, the answer would be "leepadg".
    

    Ответ надо было прислать в subject письма HR-у. Первых сколько-то человек получали возможность пообщаться.

    Как по мне, поход просто замечательный.

    3 комментария
  5. Аддоны для CodeMirror

    6 января 2016

    Несколько дней назад написал пару аддонов для CodeMirror — отличного настраиваемого редактора текста и кода для веб. Идеи возникли в процессе написания нового yiiframework.com.

    codemirror-buttons добавляет панельку с кнопками. Какие это кнопки, что делают, а также горячие клавиши настраивается через простой конфиг.

    codemirror-autosuggest вызывает окошко с подсказкой вариантов слова сразу после того, как напечатан определённый символ.

    Вместе получается примерно вот так. Попробуйте понажимать на кнопки, использовать CTRL + B и напечатать @.

    Несмотря на то, что API CodeMirror очень мощный и, в принципе, есть документация, писать аддоны под него не прочитав и не осознав весь его код практически невозможно.

    6 комментариев
  6. Прячем флаги в замыкания

    23 июня 2015

    window.addEventListener('click', function () {
        var i = 0;
        return function () {
            window.alert('You\'ve clicked it ' + (++i) + ' time(s).');
        };
    }());

    Благодаря замыканиям JavaScript позволяет не выносить флаги за функцию-обработчик и тем самым не засорять области видимости уровнями выше.

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

    Кстати, я выкладываю этот и другие интересные кусочки кода на gostash.ru

    4 комментария
  7. Копируем в буфер обмена без Flash

    26 мая 2015

    Trello уже довольно продолжительное время позволяет нажать CTRL + C при наведённом на карточку курсоре мыши и получить в буфер обмена ссылку на эту карточку. Удобно, но вроде ничего необычного, я такое уже делал в Stay.com при помощи Flash.

    Trello не использует Flash и это заметили пользователи StackOverflow. Через какое-то время подтянулся автор кода и рассказал, как это работает.

    На самом деле с буфером обмена Trello не работает. При нажатии CTRL текст пишется в создаваемый <textarea> и туда ставится фокус. То есть когда мы нажимаем C текст копируется. Когда CTRL отпускается, <textarea> скрывается.

    Код приведён там же в вопросе на StackOverflow.

    14 комментариев
  8. Плавная анимация в браузере

    20 февраля 2015

    Добиться плавной анимации при наличии тучи DOM-элементов, да ещё и когда в анимируемом контейнере грузятся картинки и какой-нибудь Google Maps, оказалось не просто. Путь был довольно долг и тернист. Приведу только рецепт:

    1. Не используйте jQuery.animate(). Он тормоз.
    2. Вместо него используйте Velocity.js.
    3. Если возможно, анимируйте только transform: translate, transform: scale, transform: rotate, opacity.
    4. Включайте аппаратное ускорение для анимируемого слоя. Делайте это сразу в CSS, приправьте чёрной магией.

    Если и после этого не помогло:

    1. Попробуйте уменьшить количество DOM-элементов в анимируемом контейнере.
    2. Не стартуйте несколько анимаций единовременно.
    3. Если контент в контейнер подгружается динамически, рисуйте во время анимации эмуляцию контента, как это делает, например, Facebook. Заменяйте на реальный контент как только анимация закончена.
    Комментировать
  9. popstate, webkit и старый Chrome

    20 февраля 2015

    Вроде бы рекомендацию HTML5 приняли, поддержка JavaScript везде неплохая. Думал, проблем поработать с историей браузера не будет.

    Не тут-то было! Оказывается, Safari и старые Chrome вызывают лишнее событие popstate при начальной загрузке страницы. Chrome это в современных своих версиях поправил, а вот в актуальном Safari проблема есть.

    Изучение кода pjax и гугление дало много разных решений. Вот правильное (код для jQuery, но без него будет примерно оно же):

    $(window).load(function() {
        setTimeout(function() {
            $(window).on('popstate', function (e) {
                    // работаем
            });
        }, 0);
    });

    Идея в том, чтобы зарегистрировать наш обработчик после того, как начальное событие popstate всплывёт. Всплывает оно по load, поэтому вешаем обработчик на него. setTimeout с задержкой 0 нужен для того, чтобы обработчик был последним.

    6 комментариев
  10. Сюрреализм на JavaScript

    5 октября 2014

    Вышла довольно занятная свободно распространяемая книга Бахирева Алексея «Сюрреализм на JavaScript».

    В ней содержатся различные рекомендации, советы и идеи касательно разработки сложного фронтенда на JavaScript. Рассматривается архитектура игровых движков и проблемы создания веб-игр и веб-приложений. Так же в книге приведено множество рекомендаций касательно вёрстки интерфейсов под различные устройства и особенностей разработки на JavaScript под различные платформы.

    6 комментариев