На прошлой неделе BBC рассказала, что для новой версии главной страницы использовала методологию БЭМ, созданную в Яндексе. По такому случаю мы решили поднять материалы мастер-класса «Разрабатываем сайт с нуля на полном стеке БЭМ-технологий» и рассказать вам, как начать использовать полный стек БЭМ-технологий в своих проектах.

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



В статье мы расскажем, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомимся с готовыми библиотеками блоков и инструментами для автоматизации сборки. Покажем, как разные инструменты — например, autoprefixer, css-препроцессор Stylus или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки по БЭМ.

На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельно остановимся на декларативных шаблонах BEMHTML и BEMTREE, которые позволяют преобразовывать данные в БЭМ-дерево, описанное в формате BEMJSON и, затем в HTML. Рассмотрим в деталях, как написать серверную часть приложения по БЭМ-методологии.

Если вы когда-нибудь сталкивались с задачей ресайза картинок в браузере, то вы наверное знаете, что это очень просто. В любом современном браузере есть такой элемент, как холст (<canvas>). На него можно нанести изображение нужных размеров. Пять строчек кода и картинка готова:

function resize(img, w, h) {
  var canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  canvas.getContext('2d').drawImage(img, 0, 0, w, h);
  return canvas;
}

Из холста картинку можно сохранить в JPEG и, например, отправить на сервер. Можно было на этом закончить статью, но сперва давайте взглянем на результат. Если вы поставите рядом такой холст и обычный элемент <img>, в который загружена та же картинка (исходник, 4 Мб), то вы увидите разницу.

Привет, Хабрахабр!


Сразу скажу: ничего феноменального в статье нет. Эта статья посвящена разработанной «на коленке» программе по созданию панорам из видео и временному усреднению видеопотока (кадров). Программа также может быть использована как виртуальная slit-камера. Статья будет интересна всем тем, кто увлекается обработкой видео и изображений, а так же гик-артом. Весьма простая программа — весьма интересный результат. В конце статьи ссылка на скачивание. Осторожно, трафик!

В последнее время на Хабре появилось довольно много постов по данной теме, но по своей сути их можно назвать: «Смотрите, я поставил Varnish / W3 Total Cache и держу миллион запросов на «Hello world» страничке». Данная же статья рассчитана больше на гиков, желающих познать, как же это все работает и написать собственный плагин для страничного кеширования.

Зачем?

Стандартный вопрос, который возникает у каждого разработчика перед созданием велосипеда уже существующего функционала. Действительно, готовых плагинов уйма и многие из них довольно качественные, но нужно понимать что в первую очередь они рассчитаны на статические блоги. Что же делать, если у вас не стандартный WordPress сайт?

В этой статье я хочу показать, как просто в Go можно делать достаточно сложные вещи, и какую мощь в себе несут интерфейсы. Речь пойдет о симуляции медленного соединения — но, в отличие от популярных решений в виде правил для iptables, мы реализуем это на стороне кода — так, чтобы можно было легко использовать, к примеру, в тестах.

Ничего сложного тут не будет, и ради большей наглядности я записал ascii-анимации (с помощью сервиса asciinema), но, надеюсь, будет познавательно.

Приветствую. Представляю сообществу проект Konva.js.

Konva.js — это фреймворк, который позволяет работать c canvas 2d в объектном стиле с поддержкой событий.

Кратко список особенностей выглядит так:

1. Объектное API
2. Вложенные объекты и «всплытие» событий
3. Поддержка нескольких слоёв (нескольких canvas элементов)
4. Кэширование объектов
5. Поддержка анимаций
6. Настраиваемый drag&drop
7. Фильтры
8. Готовые к использованию объекты, включая прямоугольник, круг, изображение, текст, линия, SVG путь, ..
9. Простое создание собственных фигур
10. Событийная архитектура, которая позволяет разработчикам подписываться на события изменений аттрибутов, отрисовки, и так далее
11. Сериализация и десериализация
12. Продвинутый поиск с помощью селекторов stage.get('#foo') и layer.get('.bar')
13. Десктоп и мобильные события
14. Встроенная подержка HDPI устройств
15. и еще много разного

Далее подробней рассмотрим возможности фреймворка с примерами кода.

Продолжаем обзор деятельности нашего Хакспейс-клуба.

Мы давно мечтали купить в наш клуб ЧПУ станок. Но решили его сделать сами. С нуля, начиная от железа и кончая программного обеспечение (прошивка контроллера и управляющая программа). И у нас это получилось.

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

Когда неподготовленный человек видит сайт на арабском, иврите или любом другом RTL (right-to-left) языке, у него кружится голова: справа налево располагаются не только текст, но и элементы интерфейса.



Когда мы в Alconost впервые столкнулись с необходимостью локализовать сайт на арабский, а затем протестировать его, нам пришлось изучить, как именно RTL пользователи смотрят на мир:

• вместо подчёркивания, курсива или р а з р я д к и арабы обычно пользуются надчёркиванием;
• дробный перенос слова на другую строку не допускается;
• пустое пространство в строке устраняется растяжением букв;
• цифры пишутся слева направо;
• в арабском знаки препинания пишутся слева направо;
• в иврите и в арабском нет заглавных букв.

А если в RTL текст нужно вставить слово на латинице, оно пишется как обычно: слева направо. Такой смешанный RTL-LTR текст превращается в отличный тренажер для глаз.

Здравствуйте многоуважаемые хабравчане. Уж не знаю куда писать, сюда или в GT, но раз первоисточник находиться здесь, то и я запощу на Хабр.
В общем если вы, такой же как и я, прилежный установщик обновлений и вас постигла сия участь



… а из опуса UnknownType вы мало что поняли, добро пожаловать под кат!

Иногда борьба корпораций с конечными пользователями приобретает гротескную форму, что и побудило меня написать этот пост. Коротко: я перестал беспокоиться любить FTDI.

Если вы используете устройство с подключением через конвертер USB2COM на чипе FTDI под Windows — берегитесь. В рамках борьбы с пользователями за интеллектуальную собственность FTDI ломает контрафактные чипы программными средствами.

Привет Хабр.
Занимаясь Computer Vision, я интересовался Natural интерфейсами, общался с людьми, кто проектирует столы для баров с touch интерфейсами. И у меня появилась идея сделать свой. Дешево, сердито, но главное, чтобы все работало. То есть важно испытать и протестировать. А тут, мой друг Александр Жеделев, музыкальный продюссер Русского Драматического Tеатра Эстонии, предложил сделать какой нибудь новый музыкальный инструмент для выступления на фестивале Tallinn Music Week. Времени было немного, и мы приступили.

Не так давно приобрёл паяльную станцию. Давно занимаюсь любительской электроникой, и вот настал момент когда точно осознал что пора. До этого пользовался батиным самопальным блоком, совмещавшим лабораторный блок питания и блок питания низковольтного паяльника. И вот встала передо мной проблема: паяльную станцию я ставлю, а старый блок держать ради хилого и не точного блока питания 0-30в 3А или таки купить нечто современное, с защитой по току и цифровыми индикаторами? Поползав по ебею понял что максимум что мне светит это за 7-10 тыс купить Китайский блок с током максимум в 5А. Жаба сказала своё веское «ква», руки зачесались и…

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

Введение
1. Базовые элементы
2. Группировка
3. Движение
4. Частицы
5. Анимация — 1
6. Анимация — 2
7. Простой ландшафт
8. Статические коллизии
9. Динамические коллизии
10. Импорт моделей
11. Встраивание физических движков
12. Тени, туман
Продолжение — многопользовательский шутер

Об утилите xargs написано очень много — что можно написать еще? Но если, что называется, копнуть поглубже, то выясняется, что во многих публикациях излагаются лишь самые основы, но нет главного: не объясняется, как можно применять xargs в реальной практике. Статей с разбором сложных и нетривиальных вариантов применения этого весьма полезного для системного администратора инструмента, к сожалению, очень мало. Именно поэтому мы написали свою статью и постарались включить в нее как можно больше примеров использования xargs для решения различных проблем.

Сначала мы рассмотрим принцип работы xargs и разберем примеры попроще, а затем перейдем к разбору сложных и интересных кейсов.

Резюме

Я хочу рассказать о том, как создал вполне заурядное и совсем не инновационное приложение, которое объективно стало лучшим в своём роде и даже некоторое время пребывало на самой вершине топа. Это не история успеха и не руководство к действию. Я просто хочу рассказать, как у меня получилось сделать самое популярное приложение в своём сегменте.

Содержание курса

• Статья 1: алгоритм Брезенхэма
• Статья 2: растеризация треугольника + отсечение задних граней
• Статья 3: Удаление невидимых поверхностей: z-буфер
• Статья 4: Необходимая геометрия: фестиваль матриц
  
  • 4а: Построение перспективного искажения
  • 4б: двигаем камеру и что из этого следует
  • 4в: новый растеризатор и коррекция перспективных искажений
• Статья 5: Пишем шейдеры под нашу библиотеку
• Статья 6: Чуть больше, чем просто шейдер: просчёт теней

Улучшение кода

• Статья 3.1: Настала пора рефакторинга
• Статья 3.14: Красивый класс матриц

---

Official translation (with a bit of polishing) is available here.

---

Постановка задачи

Цель этого цикла статей — показать, как работает OpenGL, написав его (сильно упрощённый!) клон самостоятельно. На удивление часто сталкиваюсь с людьми, которые не могут преодолеть первоначальный барьер обучения OpenGL/DirectX. Таким образом, я подготовил краткий цикл из шести лекций, после которого мои студенты выдают неплохие рендеры.

Итак, задача ставится следующим образом: не используя никаких сторонних библиотек (особенно графических) получить примерно такие картинки:



Внимание, это обучающий материал, который в целом повторит структуру библиотеки OpenGL. Это будет софтверный рендер, я не ставлю целью показать, как писать приложения под OpenGL. Я ставлю целью показать, как сам OpenGL устроен. По моему глубокому убеждению, без понимания этого написание эффективных приложений с использованием 3D библиотек невозможно.

Такой движок JS, как V8 (Chrome, Node) от Google, заточен для быстрого исполнения больших приложений. Если вы во время разработки заботитесь об эффективном использовании памяти и быстродействии, вам необходимо знать кое-что о процессах, проходящих в движке JS браузера.

Что бы там ни было — V8, SpiderMonkey (Firefox), Carakan (Opera), Chakra (IE) или что-то ещё, знание внутренних процессов поможет вам оптимизировать работу ваших приложений. Но не призываю вас оптимизировать движок для одного браузера или движка – не делайте так.

Задайте себе вопрос:
— можно ли что-то в моём коде сделать более эффективным?
— какую оптимизацию проводят популярные движки JS?
— что движок не может компенсировать, и может ли сборка мусора подчистить всё так, как я от неё ожидаю?



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

Наглядный пример задачи — сайт vk.com. Каждый раз, когда вы воспроизводите музыку или видео в одной вкладке, в других вкладках воспроизведение останавливается. И если вы обратитесь в интернет за помощью в решении данной задачи, то наверняка найдете описание Storage Events или Page Visibility API или даже готовые решения, к примеру Visibility.js.

На хабре уже был обзор этих вещей, к примеру вот и ещё.



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

Многие молодые разработчики и ребята пока еще не имеющие отношения к геймдеву, часто говорят фразу «У меня есть идея для игры и мы заработаем на ней миллион!». Узнали себя? В этот момент они находятся в необычайном состоянии, когда им кажется, что море по колено и тот заветный миллион у них уже в кармане. На этой волне вдохновения они приступают к началу разработки и даже не задумываются еще о том, что их ждет впереди.

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

В прошлом году мы с другом были на летней школе. На ней необходимо было сделать проект. Прочитав две статьи про создание 3d сканеров (раз, два) мы решили попробовать свои силы в его сборке и по возможности улучшить его конструкцию. Мы даже не представляли, что из этого получится и тем более не представляли, что победим с ним на нескольких научно-инженерных выставках. Но по порядку. Кому интересно узнать результат, добро пожаловать под кат (много фотографий).