• Подборка: Более 800 ресурсов для front-end-разработчиков

    • Перевод
    Мы продолжаем публиковать подборки полезных инструментов. Ниже представлена подборка из более 800 сервисов, книг, статей, видеотуториалов и других материалов, которые будут полезны всем, кто занимается фронтенд-разработкой.

    Читать дальше →
  • WebGL для всех

    • Tutorial


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

    WebGL, в отличие от Javascript, имеет высокий порог вхождения, его до сих пор мало кто использует, а ещё меньше тех, кто об этом пишет. Большинство руководств или статей перепрыгивают сразу на использование какой-нибудь библиотеки. Но мы-то с вами знаем, что большие универсальные инструменты не всегда пригодны для наших задач или, возможно, делают это на неприемлемом уровне: проигрывают в скорости, поставляются с ненужным багажом и т.д.

    Этой статьёй хочется облегчить порог вхождения в чистый WebGL, дать начальное представление и подсказать, куда двигаться дальше.
    Поехали!
  • Самые нужные плагины для Grunt



      Доброго времени суток, всем! Кто-то умный, не помню в какой статье именно на Хабре, буквально недавно размышлял о процессе разработки с явным призывом автоматизировать все, что только можно автоматизировать. И лучше один раз потратить время на автоматизацию, чтобы потом экономить его на протяжении всего проекта.

      У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется Grunt. И моя страсть к таксономии заставила себя собрать огромную коллекцию почти из 100 ценных плагинов для этого сборщика. Думаю многие кто уже использует Grunt найдут для себя что-то нужное, а кто нет, глядя на возможности, получит хорошую мотивацию установить его и понять как эта штука работает.

      А еще я выложил подборку на GitHub, чтобы каждый мог пополнить коллекцию.

      Читать дальше →
    • Красивая консоль для работы с git под Windows

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

      В итоге терминал для git у нас будет выглядеть примерно вот так:


      Читать дальше →
    • Малоиспользуемые, но от этого не менее прекрасные возможности LESS

      Данный пост навеян коментарием уважаемого хабраюзера SerafimArts о том, что LESS много чего не умеет. Хочется развеять эти крамольные заявления и заодно показать, каким прекрасным может быть LESS, если правильно его готовить.

      Примечание: некоторые примеры «из жизни» в данной статье предоставлены для тех людей, кто по каким-то причинам (вплоть до религиозных) не использует Autoprefixer.

      Примечание 2: для всего, что написано ниже используется последняя версия LESS, потому что нет вообще ни одной причины её не использовать.



      Слияния


      Они же объединения, они же мерджи (Merge). Используются, если вам нужно что-нибудь присоединить через пробел или через запятую. Транзишны, трасформы, множественные бэкграунды, тени (простите за русское слово: бокс-шадоуы звучит как-то неласково) ликуют. Лучше всего за меня скажут примеры.
      Смотреть примеры
    • HTML по стандартам

        Привет Хабр!

        image Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.

        В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.
        Читать дальше →
      • Знакомство с UnrealEngine. Часть 1

        • Tutorial

        Хотелось ли вам когда нибудь сделать свою игру или 3D презентацию, или просто узнать как работают другие игры? Мне всегда хотелось сделать свою игру, и было интересно узнать как работают уже существующие. Не буду скрывать что одной из моих любимых игр является Unreal, работающая на движке UnrealEngine от Epic Games. Первая версия движка появилась 1998 году. На данный момент актуальная версия движка четвёртая. Кроме самой серии Unreal на движке было сделано очень много игр.
        Выпустив первую версию движка Epic Games приложила к движку UnrealEditor — редактор позволяющий делать свои уровни и моды для игры. В 2009 году Epic Games выпустила UDK который позволил делать свои игры. На мой взгляд этот движок достоин того, чтобы разобраться как с ним работать и что он может.
        Я попытаюсь описать основы работы с UnrealEngine, но в силу некоторых причин я буду описывать его в основном по второй его версии. Большинство из описанного будет работать и в UDK и в UnrealEngine4. Итак, если вас это заинтересовало, добро пожаловать под кат.
        Читать дальше →
      • Интерактивный глобус — SVG versus Canvas

        • Tutorial
        Доброго времени суток, уважаемый читатель! В прошлый раз мы изучали процесс создания интерактивной карты-хороплета, теперь предлагаю немного усложнить задачу и перейти к трёхмерной модели Земли, именуемой в народе глобусом. Глобус делать будем двух видов: SVG версия и Canvas версия. В обоих случаях будем использовать JavaScript библиотеку d3.js. У каждого варианта свои преимущества. В моём исполнении Голубая планета выглядит следующим образом:

        Планета Земля

        А как создать свой собственный Мир с материками и океанами можно узнать под катом.
        Читать дальше →
      • Интерактивная обучалка ветвлению в Git

          Некий Питер Коттл (Peter Cottle) сделал интерактивную обучалку по основам ветвления в Git. Есть несколько простых обучающих уровней, где нужно сделать пару коммитов, а затем merge или rebase, есть и сложные уровни, над которыми придется подумать. Можно также сохранять уровни и делиться ими с друзьями.

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

          image
          Читать дальше →
          • +150
          • 73,8k
          • 38
        • HTML и CSS безумие [перевод]

            или Создаем 3D миры при помощи HTML, CSS и JS


            image
            В прошлом году, я сделал демо, которое показывает как можно использовать CSS 3D transforms для создания 3D пространства. Демо было технической демонстрацией того, чего можно достичь при помощи CSS на то время, но я хотел увидеть насколько далеко я могу зайти, поэтому последние несколько месяцев я работал над новой версией с еще более сложными моделями, реалистичным освещением, тенями и определением столкновений. Этот пост документирует то, как я это делал и какие техники применял.

            Демо Демо2
            Читать дальше →
          • Бесплатная книга «HTML5. Руководство разработчика»

              ХО-ХО-ХО! Праздник к нам приходит! Всегда coca-co… HTML5!
              Выпал снежок и как-то незаметно пришло праздничное, предновогоднее настроение. Чтобы как-то поддержать праздничный дух, мы решили сделать небольшой сюрприз от издательства и порадовать наших читателей бесплатной электронной книгой Марка Пилгрима «HTML5. Руководство разработчика» (DIVE INTO HTML5). Оригинал книги также есть в бесплатном варианте в Интернете.

              Прежде чем скачать книгу целиком, предлагаем вам познакомиться с первой главой:

              Глава 1. Как мы сюда попали?


              Приступим


              Недавно я прочел высказывание одного разработчика для платформы Mozilla, где говорится о той напряженности, которая всегда сопутствует разработке стандартов:

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


              Пока я буду рассказывать, как появился HTML5, помните эти слова.
              Читать дальше →
            • Ratchet — быстрое прототипирование мобильных приложений на HTML, CSS и JS



                Ratchet — новый фреймворк, который позволяет быстро создавать прототипы приложений для iOS. По сути является аналогом Twitter Bootstrap для мобильных устройств.

                Сайт проекта | Ratchet на GitHub | Обсуждения в Google Groups | Twitter
                Читать дальше →
              • 30 CSS-фреймворков для адаптивного веб-дизайна

                  Заметил, в последнее время на любое упоминание Twitter Bootstrap, минимум один человек отмечает, что «слишком много его стало». Большинство все устраивает, но некоторым он уже приелся и они хотят чего-то нового. Поэтому решил написать статью со сборником css-фреймворков, думаю каждый сможет найти что-нибудь для себя. Заодно сделаем интернет разнообразнее.

                  Читать дальше →
                • JSter – все, что нужно для Javascript

                    Насколько сложно собрать все Javascript библиотеки в одном месте? Задача, конечно, непростая, у веб-разработчика из солнечной Финляндии Juho Vepsäläinen ушло на это около семи месяцев. Его проект JSWiki содержит более 30 категорий, в которых перечислены самые разнообразные проекты для frontend разработки. Сколько библиотек и утилит там упомянуто посчитать очень трудно. Прежде всего, потому что каталог слабо структурирован и не содержит практически ничего кроме ссылок.

                    Тем не менее, JSWiki послужила нам отличной базой для нового проекта JSter. Вместе с Juho Vepsäläinen мы разработали самый полный открытый Javascript каталог. В нем уже почти 700 библиотек (в основном open-source) и любой пользователь может дополнить список.
                    Читать дальше →
                  • Четыре паттерна вызова функций в JavaScript

                    • Перевод
                    Язык JavaScript был представлен как язык функционального программирования. Причина заключается в том, что функции в JS не просто разделяют логику на операционные блоки, функции являются объектами первого класса, способными создавать другие объекты. Подобная зависимость от функций одновременно является как сильной стороной, так и настоящим проклятием этого языка. Сильная сторона заключается в том, что язык, обладая подобными особенностями, становится легковесным и быстрым (каким JavaScript изначально и видели его создатели). Однако если вы не знаете что делаете — однозначно ждите беды.

                    Я предлагаю посмотреть на паттерны вызова функций, а точнее на то, как значительно изменяется результат в зависимости от выбранного паттерна. Также мы рассмотрим как ведет себя this, в зависимости от способа вызова функции.

                    Итак, существует четыре пути вызова функций:

                    • Вызов метода — Method Invocation
                    • Вызов функции — Function Invocation
                    • Вызов конструктора — Constructor Invocation
                    • Вызов apply и call — Apply And Call Invocation

                    Читать дальше →
                  • Понимание ООП в JavaScript [Часть 1]

                    • Перевод
                    • Tutorial
                    — Прототипное наследование — это прекрасно
                    JavaScript — это объектно-ориентированный (ОО) язык, уходящий корнями в язык Self, несмотря на то, что внешне он выглядит как Java. Это обстоятельство делает язык действительно мощным благодаря некоторым приятным особенностям.

                    Одна из таких особенностей — это реализация прототипного наследования. Этот простой концепт является гибким и мощным. Он позволяет сделать наследование и поведение сущностями первого класса, также как и функции являются объектами первого класса в функциональных языках (включая JavaScript).

                    К счастью, в ECMAScript 5 появилось множество вещей, которые позволили поставить язык на правильный путь (некоторые из них раскрыты в этой статье). Также будет рассказано о недостатках дизайна JavaScript и будет произведено небольшое сравнение с классической моделью прототипного ОО (включая его достоинства и недостатки).
                    Читать дальше →
                  • Вспоминаем ретро Spectrum ZX с помощью ubuntu

                    Не так давно


                    Совсем недавно, когда деревья были большими, мы с товарищами ждали момента, когда начнется игра. Ждали мы вместе с Spectrum'ом, аудио-кассетами с играми и тетрадками в рюкзаках. Последние, впрочем, не мешали нам слушать звук загрузки и считать мотки с помощью аналогового устройства.

                    Итак, последний момент загрузки и мы получаем в свое распоряжение шедевры!
                    У нас это были:

                    Exolon

                    image
                    Читать дальше →
                  • Internet Explorer 7-9: выбор инструментов для максимальной поддержки CSS3, HTML5

                    Наверное, вы уже слышали о таких вещах как CSS3 Pie, Selectivizr, HTML5 Boilerplate, CSS3 Media queries и т.п. Речь пойдет о том, как использовать все эти инструменты вместе: дело в том, что неоднократно были замечены конфликты между ними. Ну, а если вы не совсем понимаете, зачем вам HTML 5 и CSS 3, тогда не стану навязывать эти технологии; просто скажу, что они позволяют сократить время верстки (хотя, это не единственный плюс).
                    Читать дальше →
                  • Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 1

                    • Перевод
                    (от 27 июля 2012)
                    При написании нативного веб-приложения легко начать чувствовать себя богом, способным работать просто с библиотекой работы с DOM (такой как jQuery) и горсткой сервисных плагинов. Вскоре возникает проблема в виде груды вложенных возвратных функций jQuery и разбросанных DOM-элементов без всякой структуры вместо приложения.

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

                    ■ Что такое MVC или, лучше сказать, MV*?


                    Эти современные библиотеки дают разработчикам простой путь к организации кода, используя вариации паттерна проектирования, известного как MVC (Model-View-Controller). MVC разделяет задачи в приложении на 3 части:
                    Читать дальше →