• Как сделать многослойную Parallax иллюстрацию на CSS & JavaScript

    • Перевод
    • Tutorial
    image
    Рисунок используемый для parallax эффекта. Автор Patryk Zabielski

    Привет друзья, я покажу вам как создать простою многослойную иллюстрацию с глубиной, которая переходит к контенту. Мы будем использовать метод, в котором необходим только css и чистый JS(coffeescript) (Никаких jQuery!).

    Этот урок для начинающих, с начальным знанием JS и CSS, так что я буду объяснять большинство вещей и ссылаться на внешние источники.

    Финальное демо
    Читать дальше →
  • CoffeeScript array comprehensions — модно, стильно, медленно

      В детстве мне часто говорили, что сахар — белая смерть. Позже я понял, что калории есть калории, а разглагольствующие о вреде сахара зачастую просто не владеют матчастью.

      И вдруг выяснилось, что всё, чем меня пугали взрослые — чистая правда. Сахар жуткая вещь, которая убивает мозг и медленно ведёт нас к альцгеймеру. Его нельзя есть никому и никогда. Эта тема подробно раскрыта в книге Гэрри Тауба Good Calories Bad Calories, а также в книге Дэвида Перлмуттера Grain Brain.

      Но речь в статье не об этом. Недавно я обнаружил, что группа моих товарищей плотно сидит на CoffeeScript. Они ничуть не стесняются этого факта и даже умудряются испытывать в процессе какое-то противоестественное удовольствие. Более того, они не чураются использовать содержащийся в кофе синтаксический сахар и даже хотели пристрастить к этому меня.

      К счастью, я наделён редким даром. Я всегда узнаю зло, и неважно в какие одежды оно вырядилось на этот раз.
      Ужасная правда
    • Html-maker — удобная и простая генерация html с помощью coffeescript

      Хочу поделиться своей небольшой библиотекой. Интересно услышать ваше мнение о ней.

      Сразу к сути дела: htmlmake — это js-функция, позволяющая создавать строку с html-разметкой внутри для дальнейшей вставки в DOM-дерево.
      Читать дальше →
    • Pattern-matching (еще один) в coffeescript

      Введение


      Как-то раз я сидел и грустно смотрел на написанный в рамках изучения эрланговский код. Очень хотелось написать на нем что-нибудь более полезное, чем крестики-нолики, но как назло никаких подходящих задач в голову не приходило. Зато есть JavaScript, в котором есть и функции первого порядка, и каррирование, и map/filter/fold, и, главное, задачу придумать куда проще. А вот pattern matching-а своего нету. Беглый поиск выдал мне несколько библиотек, но предлагаемый ими синтаксис показался мне тяжеловесным. Можно ли сделать лаконичнее, ближе к родному эрланговскому синтаксису?

      Спойлер: можно, если взять coffeescript, сделать так:

      fn = Match -> [
        When {command: “draw”, figure: @figure = {type: “circle”, radius: @radius}}, -> 
          console.log(@figure, @radius)
        When {command: “draw”, figure: @figure = {type: “polygon”, points: [@first, @second | @rest]}}, -> 
          console.log(@figure, @first, @second, @rest);
      ]
      fn {command: “draw”, figure: {type: “circle”, radius: 5, color: “red”}}
      #output: {type: “circle”, radius: 5, color: “red”} 5
      

      Кому интересно, как это получилось — добро пожаловать под кат.
      Читать дальше →
    • Функциональное программирование на CoffeeScript с библиотекой f_context

        Тем, кто сталкивался с функциональными языками программирования наверняка знакома такая конструкция:
          fact(0) -> 1
          fact(N) -> N * fact(N - 1)
        

        Это один из классических примеров ФП — вычисление факториала.
        Теперь это можно делать и на CoffeeScript с библиотекой f_context, просто оборачивая код в f_context ->, например:
          f_context ->
            fact(0) -> 1
            fact(N) -> N * fact(N - 1)
        

        Под катом можно узнать о возможностях библиотеки, а так же о том как и почему это работает.
      • GamepadAPI или джойстик в браузере

          Здравствуй, Хабр!





          Смотря, как всё более новые и новые технологии внедряются в веб, смотря, как в него переносят игры, я задумался: «А было бы круто, если бы геймпад тоже можно было подключить...». И в поиске первым же результатом было GamepadAPI.
          Немного ниже ссылка на W3C GamepadAPI. Посмотрев, попробовав, я обнаружил ряд проблем, подводных камней, которые поставили бы крест на внедрении джойстиков в браузер. И я решил это исправить, создав интерфейс. Что есть «из коробки», и что именно было доработано, изменено и на мой взгляд улучшено, описано под катом.

          Чтобы ходить по воде, надо знать, где подводные камни...
        • AdBlock похитил этот баннер, но баннеры не зубы — отрастут

          Подробнее
          Реклама
        • WebJars + RequireJS

            День добрый, читатели Хабра!
            В этой статье спешу вам рассказать (хоть и с опозданием) о том, что такое WebJars на примере приложения в Play Framework.

            image В практически любом веб-приложении нельзя обойтись без сторонних javascript-библиотек. Самый простой способ добавить их: скачать и добавить в проект, а также добавить файл в git-репозиторий. Решение годное, но лично для меня наличие в проекте какой-либо статики малость раздражает. Есть другой метод: указывать ссылку на внешний хостинг js-библиотек такой как google, yandex. В принципе вариант, но в моей практике были случаи, когда необходимо было продолжить разработку а доступ в интернет оставлял желать лучшего либо его вообще не было, в итоге клиентская часть не функционировала. Наиболее годным решением мне видится добавления js библиотеки в качестве зависимости в проект, с подобным подходом вы могли сталкивать в Ruby on Rails.
            Читать дальше →
          • Перевод книги «The Little Book on CoffeeScript»


              Приветствую, хабраюзер!
              Недавно я решил изучить CoffeeScript. В поисках книги по этому языку я наткнулся на The Little Book on CoffeeScript. Однако, эта книга на английском — и я подумал, почему бы не перевести её на русский? Небольшая часть перевода уже завершена, и я был бы рад, если бы сообщество поддержало инициативу и помогло с переводом (сам я не настолько эксперт в JS, поэтому перевод местами кривоват, это надо корректировать).

              За процессом перевода можно следить здесь. Ниже прикладываю перевод первой главы.
              Читать дальше →
            • Автоматизированный шаблон для front-end проектов



                Человек изобрел компьютеры, чтобы они выполняли за нас большую часть повторяющихся задач. Это позволяет нам экономить много времени и использовать его с максимальной пользой. И, так как эта статья о front-end разработке, в этой области таких задач много: компиляция css- и js-препроцессоров, сборка спрайтов, оптимизация изображений, минификация файлов и др.
                Познать дзен
              • Упрощение жизни программиста с vim + vim-slime + tmux

                Эта публикация рассказывает о том, как экономить время при разработке для Clojure и NodeJS, а также Bash скриптов, посылая текст из vim в REPL, c использованием tmux + vim + vim-slime. Также приводятся рецепты с nodemon.

                Скорее всего, vim-slime сработает и для других интерпретируемых языков (Ruby / Python / PHP / Perl ...). vim-slime также работает со screen.
                На хабре достаточно освещались и vim, и tmux. Я только хотел показать, что можно получить от их комбинации.
                Добавление от Fikys: с Ruby работает.

                Если вы знаете vim и tmux, и вам интересен только vim-slime — прыгайте сразу ко второй секции.

                Вступление


                Мы все стремимся быть производительными. После того, как код написан, мы хотим узнать, работает ли он и получить обратную связь. Мы придумали много способов ускорения обратной связи: статическое выведение типов при компиляции и в IDE, юнит-тесты, интеграционные тесты, REPL, LiveReload и т.д.

                Для моих небольших проектов я использую связку REPL и юнит-тестов, что позволяет получать обратную связь мгновенно.

                Я веб-разработчик. По работе и в своем проекте обычно я делаю фронтэнд и стыкующуюся с ним часть бэкэнда. В течении рабочей сессии я пишу PHP, phtml, Stylus, css, Coffeescript, Javascript, + sql запросики и пуши в гит; что обеспечивается связкой tmux и vim. Также есть пара маленьких проектов на CoffeeScript, для которых используется комбо tmux + vim + vim-slime + Coffeescript REPL. В проектной сессии увязываются Сlojure, CoffeeScript, Stylus; tmux + vim + vim-slime + Clojure REPL. Под катом я расскажу об трех сетапах для трех окружений.
                Читать дальше →
              Самое читаемое