• Почему Ramda?

    Пост содержит перевод статьи «Why Ramda?», которую подготовил один из контрибьютеров Скот Сайет. Статья была опубликована 10 Июня 2014 года на сайте и рассказывает о том почему стоит обратить своё внимание на библиотеку Ramda и функциональное программирование в целом.


    Примечание переводчика

    В связи с тем, что статья была написана в 2014 году, некоторые примеры устарели и не работали с последней версией библиотеки. Поэтому они были адаптированы под последнюю версию Ramda@0.25.0.

    Почему Ramda?


    Когда-то давно buzzdecafe представил миру Ramda, в тот же момент сообщество поделилось на два лагеря.

    Читать дальше →
    • +32
    • 16.1k
    • 9
  • JavaScript паттерны… для чайников

      Однажды вечером, сразу после того, как я закончил разбираться с наследованием в JS, мне пришла в голову идея, что пора бы заняться чем-нибудь посложнее — например паттернами. На столе внезапно оказалась книжка Gof, а на экране ноутбука появился труд с названием «JavaScript patterns».

      В общем, спустя пару вечеров, у меня появились описания и реализации на JavaScriptе самых основных паттернов — Decorator, Observer, Factory, Mediator, Memoization (не совсем паттерн, а скорее техника, но мне кажется что она прекрасно в этот ряд вписывается) и Singleton.

      Читать дальше →
    • Путь JavaScript модуля



        На момент написания этой статьи в JavaScript еще не существовало официальной модульной системы и все эмулировали модули как могли.

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

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

        Дело в том, что раньше не думали, что на JavaScript можно делать огромные проекты, а не просто «пропатчить DOM», поэтому о модулях не думали. Да и вообще не думали о будущем. И тут Внезапно будущее нагрянуло! Все вроде-бы уже есть, а модули в JavaScript, мягко говоря, запаздывают. Поэтому разработчикам приходится крутиться и выдумывать какие-то эмуляторы модульности.

        Думаю многие из вас читали прекрасную статью Addy Osmani Writing Modular JavaScript With AMD, CommonJS & ES Harmony, которая стала одной из глав его книги Learning JavaScript Design Patterns в этой статье рассказывается про «современные» JavaScript модули или же читали достаточно старую статью JavaScript Module Pattern: In-Depth 2010 года про «старые» модули.

        Я не буду переводить эти статьи и не буду делать из них солянку. В своей статья я хочу рассказать о моем модульном пути. О том как я проделал путь от «старых» модулей к «новым» и что использую сейчас и почему.
        Читать дальше →
      • «Выглядит похоже». Как работает перцептивный хэш

        • Translation
        За последние несколько месяцев несколько человек спросили меня, как работает TinEye и как в принципе работает поиск похожих картинок.

        По правде говоря, я не знаю, как работает поисковик TinEye. Он не раскрывает деталей используемого алгоритма(-ов). Но глядя на поисковую выдачу, я могу сделать вывод о работе какой-то формы перцептивного хэш-алгоритма.
        Читать дальше →
      • Алгоритм Хаффмана на пальцах

        • Translation
        Вы вероятно слышали о Дэвиде Хаффмане и его популярном алгоритме сжатия. Если нет, то поищите информацию в интернете — в этой статье я не буду вас грузить историей или математикой. Сегодня я хочу просто попытаться показать вам практический пример применения алгоритма к символьной строке.
        Разархивировать текст статьи
      • Введение в разработку слайд-шоу на JavaScript

        • Translation
        В этой статье мы опишем основные принципы построения слайд-шоу на JavaScript, то, из чего они строятся (HTML, CSS, JavaScript) и техники, которые используются при их создании.

        JS-код будет представлен в двух видах – ванильном и jQuery. Это сделано специально, чтобы подчеркнуть: в современных браузерах даже простой JS можно прекрасно использовать, особенно комбинируя его с анимациями и переходами CSS. jQuery хорош, если нам не хочется волноваться насчёт несовместимостей браузеров или использовать более простой API. Предоставленный код преследует лишь в демонстрационные цели.

        В примерах с ванильным JS я использую простейший метод инициализации объектов, init(). Этот метод занимается вызовом нужного кода для создания экземпляра объекта через new. В этой ветке на Stack Overflow всё объясняется подробнее. Почему объекты, а не функции? Для ответа на этот вопрос понадобилась бы отдельная статья – но, в общем, просто чтобы код был более организованным и простым для повторного использования.
        Читать дальше →
        • +11
        • 69k
        • 6
      • Как создать веб-сайт, используя видео с YouTube в качестве фона?

        • Translation


        Большие видео на заднем плане веб-сайтов — довольно популярный тренд в веб-дизайне. Умело примененные видео могут сделать веб-сайт более драматичным и привлекательным для пользователей.

        Кроме того видео-фоны могут воспроизводиться плавно и без «тормозов» в отличие от фонов, созданны с помощью JavaScript, которые требуют загрузить определенный код и изображения прежде чем пользователь увидит результат анимации.

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

        Хотя и наиболее популярным способом создания видео-фона является использование HTML5 видео тега вместе с некоторыми параметрами CSS, стоит также обратить внимание на альтернативные источники видео, например, YouTube. В этом случае, вам не придется переживать о медленном ответе сервера, потому что запрос будет отправляться напрямик в YouTube.

        В этой статье, я покажу вам, как можно построить клевый сайт, использующий видео с YouTube в качестве фона. Мы будем использовать jQuery.mb.YTPlayer.js для редактирования и управления внешним видом нашего видео. Итак, приступим!

        Скачать исходники
        Демо
        Читать дальше →
      • Что нужно знать про арифметику с плавающей запятой



        В далекие времена, для IT-индустрии это 70-е годы прошлого века, ученые-математики (так раньше назывались программисты) сражались как Дон-Кихоты в неравном бою с компьютерами, которые тогда были размером с маленькие ветряные мельницы. Задачи ставились серьезные: поиск вражеских подлодок в океане по снимкам с орбиты, расчет баллистики ракет дальнего действия, и прочее. Для их решения компьютер должен оперировать действительными числами, которых, как известно, континуум, тогда как память конечна. Поэтому приходится отображать этот континуум на конечное множество нулей и единиц. В поисках компромисса между скоростью, размером и точностью представления ученые предложили числа с плавающей запятой (или плавающей точкой, если по-буржуйски).

        Арифметика с плавающей запятой почему-то считается экзотической областью компьютерных наук, учитывая, что соответствующие типы данных присутствуют в каждом языке программирования. Я сам, если честно, никогда не придавал особого значения компьютерной арифметике, пока решая одну и ту же задачу на CPU и GPU получил разный результат. Оказалось, что в потайных углах этой области скрываются очень любопытные и странные явления: некоммутативность и неассоциативность арифметических операций, ноль со знаком, разность неравных чисел дает ноль, и прочее. Корни этого айсберга уходят глубоко в математику, а я под катом постараюсь обрисовать лишь то, что лежит на поверхности.
        Читать дальше →
      • 9 основных принципов отзывчивого веб-дизайна

        • Translation

        Отзывчивый дизайн — отличное решение проблемы корректного отображения сайта на разных экранах. Однако новичкам зачастую трудно понять основы, обучаясь только по книгам/статьям. С каждым днём появляется всё больше различных устройств, имеющих разные размеры экрана, поэтому создание дизайна в пикселях и только для настольных компьютеров/смартфонов остаётся в прошлом. Именно поэтому сейчас стоит изучить принципы отзывчивого дизайна — дизайна, совмещающего в себе адаптивность и резиновость (если вы ещё не знакомы с адаптивным дизайном, то эта статья будет хорошим выбором для начала изучения).
        Читать дальше →
      • Мобильная версия сайта или адаптивный дизайн?

        С началом эры бума мобильных устройств разработчики оказались перед выбором: оставлять ли мобильные версии своих сайтов наряду с «полноценными», или сайты должны стать адаптивными и самостоятельно подстраиваться под разные размеры экранов?

        На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:

        • Адаптивный дизайн;
        • Отдельная мобильная версия сайта;
        • RESS (Responsive Design + Server Side).

        Каждый из способов обладает своими плюсами и минусами, которые я постараюсь подробно описать.
        Читать дальше →
      • Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №143 (12 — 18 января 2015)

          Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости


          Читать дальше →
          • +32
          • 42.2k
          • 5
        • Все способы перебора массива в JavaScript

          • Translation

          Содержание:


          • I. Перебор настоящих массивов
            1. Метод forEach и родственные методы
            2. Цикл for
            3. Правильное использование цикла for...in
            4. Цикл for...of (неявное использование итератора)
            5. Явное использование итератора

          • II. Перебор массивоподобных объектов
            1. Использование способов перебора настоящих массивов
            2. Преобразование в настоящий массив
            3. Замечание по объектам среды исполнения


          Читать дальше →
        • 58 признаков хорошего интерфейса

          • Translation
          У хорошего интерфейса пользователя высокая конверсия и его просто использовать. То есть, он хорош и для бизнеса, и для использующих его людей. Вот список опробованных нами идей.

          1 Один столбец вместо нескольких


          Один столбец точнее отражает то, что вы хотите донести. Пользователи проходят сверху вниз по более предсказуемому пути. В дизайне с несколькими колонками есть риск отвлечения пользователя от основной задачи страницы.

          image
          Читать дальше →
        • О том как забирать обратно музыку и видео с ВК средствами браузера Chrome, используя свое расширение

          Добрый день уважаемые Хабровчане. Сегодня хочу поделиться с Вами кодами на Javascript для возможности перекачивания музыки и видео с ВК своими ручками на свой персональный компьютер. Ведь нетрудно себе представить, как записал клевый клип и музыку, потом закачал их туда, но на твоем компьютере все это добро куда то пропало… Что же, не беда! Мы выкачаем то, что по праву принадлежит нам обратно. Главное, что нам это наш браузер, да сайт позволяют, осталось — пораскинуть мозгами.

          Для начала нам надо распарсить аудиофайлы… Итак, возьмемся за класс «area clear_fix» и будем пихать в массив то, что принадлежит к классу «play_new». Сначала присвоим в массиве стили, чтобы отловить положение элементов на странице (в последующем для отображения кнопочек рядышком). Потом получим ссылки из input и имя будущего файла из тега b. Потом нужно будет присваивать новым ссылочкам, которые мы будем создавать атрибут download.

          function audio(){
          var main_div=document.getElementsByClassName("area clear_fix");
          for(var i=0;i<main_div.length;i++){ 
          if(main_div[i].parentNode.firstChild.href){
          main_div[i].parentNode.firstChild.style.top=main_div[i].getElementsByClassName('play_new')[0].offsetTop+"px";
          continue;
          }
          var _mp3_=main_div[i].getElementsByTagName("input")[0].value.split(",")[0];
          var _b_=main_div[i].getElementsByTagName("b")[0];
          var _top_=document.getElementById(main_div[0].parentNode.id.replace('audio','play')).offsetTop+"px";
          var _t_=main_div[i].getElementsByClassName('play_new')[0].offsetTop+"px";
           var span=main_div[i].getElementsByTagName('span')[0];
           var ispan=span.innerHTML;
            if(span.children[0]){
             var ispan=span.children[0].innerHTML;
            }
          var _a_=document.createElement("a");
          //_a_.href=""+_mp3_+"&name="+_b_.children[0].innerHTML+"-"+ispan; 
          _a_.href = _mp3_.substring(0, _mp3_.indexOf('.mp3') + 4);
          _a_.download=trim(_b_.children[0].innerHTML+"-"+ispan)+".mp3";
          _a_.title='Скачать '+_b_.children[0].innerHTML+"-"+ispan;
          _a_.draggable="true";
          _a_.innerHTML='<span style="cursor:copy;padding:6px;width:16px;height:16px;background-color:#5F7D9D;color:#fff;border-radius:2px;"><img src="http://st0.vk.me/images/icons/darr.gif" /></span>';  
          _a_.style.zIndex="10";
          _a_.style.left="30px";
          _a_.style.top=_t_;
          _a_.style.position="absolute";
          main_div[i].parentNode.insertBefore(_a_,main_div[i].parentNode.firstChild);
          _b_.style.paddingLeft="27px";  
          }
          }
          
          


          Тут как бы понятно должно быть, все… ну а чтобы отрезать всякий мусор после расширения файла мы применили:
          _a_.href = _mp3_.substring(0, _mp3_.indexOf('.mp3') + 4);

          В общем уже можно это запустить таким образом через интервал, конечно же если мы находимся на том самом сайте:
          
          setInterval(function(){
            if(window.location.href.indexOf('vk.com')>1) {
              if(document.getElementsByClassName("area clear_fix").length!=0){
                  audio();
                  }	
            }		
          },1000);
          
          


          Хорошо. Одна функция готова. Пора поведать и о том как скачать видеофайлы…
          Читать дальше →
          • –7
          • 2.1k
          • 5
        • Проблемы даты и времени в JS



            Редкому программисту случается избежать работы с датой и временем. Вообще, дата/время — базовое понятие и в основной массе языков существуют встроенные механизмы работы с этим типом данных. Казалось бы, JS не исключение, есть встроенный тип Date, есть куча функций в прототипе, однако…
            Читать дальше →
          • Пересмотренное руководство по Grunt для начинающих

            • Translation
            • Tutorial
            Еще в марте 2013 года я написал статью руководство по Grunt для начинающих и она стала самой посещаемой статьей на моем сайте. Я написал ее в то время, когда сам только начинал своё знакомство с Grunt, и это было скорее руководство для себя, чем для кого-то ещё. Теперь, спустя 18 месяцев, я почувствовал, что пришло время пересмотреть как я использую Grunt потому что сейчас я знаю гораздо больше, чем в то время.

            Если вам не терпится просто увидеть код, то весь он есть на Github.
            Читать дальше →
          • Руководство для дизайнера по DPI



            Это руководство — начальный материал о кросс-DPI и кроссплатформенном дизайне для начинающих и средних дизайнеров, желающих узнать о нем с самого начала или получить больше знаний. Без сложных математических и непонятных диаграмм, только непосредственные объяснения, упорядоченные в небольших разделах, для понимания и применения их непосредственно к вашей дизайнерской работе.

            Автор — Sebastien Gabriel.

            Я не знаю всего, так что, если по вашему мнению я где то ошибаюсь или вам нужно уточнить что-то, либо у вас есть предложения или вопросы для улучшения данного руководства, отправьте письмо (на англ) на sgabriel.contact@gmail.com. Вы также можете найти на меня Twitter, G+ или Facebook.
            Читать дальше →
          • Выравниваем блок по центру страницы

            • Tutorial
            Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
            Читать далее
          • Выразительный JavaScript: Структура программ

            • Translation

            Содержание




            Сердце моё сияет ярко-красным светом под моей тонкой, прозрачной кожей, и им приходится вколоть мне десять кубиков JavaScript, чтобы вернуть меня к жизни (я хорошо реагирую на токсины в крови). От этой фигни у вас враз жабры побледнеют!

            _why, Why's (Poignant) Guide to Ruby


            В этой главе мы начнём заниматься тем, что уже можно назвать программированием. Мы расширим использование языка JavaScript за пределы существительных и фрагментов предложений к более-менее осмысленной прозе.
            Читать дальше →