Обновить
113.03

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
Порог рейтинга
Уровень сложности

Советы, библиотеки и дополнительные материалы по CSS-анимации

Время на прочтение25 мин
Количество просмотров68K
Советы, библиотеки и дополнительные материалы по CSS-анимации

Введение


Была глубокая ночь. В темную комнату через деревянные окна проникал лунный свет. Он недостаточно освещал мой деревянный стол с ноутбуком, блокнотом и синей ручкой. Поэтому я протянул свою руку к настольной лампе и включил её.

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.
Читать дальше →

Интерактивное видео и с чем его едят

Время на прочтение8 мин
Количество просмотров16K
Полгода назад за чашечкой кофе программист, режиссер и геймдизайнер вели дружескую беседу на тему того, что кинематограф становится скучным. «Да, спецэффекты становятся круче, количество D становится больше, но этим сейчас малого кого можно удивить. Людей цепляет сюжет. А теперь представьте, что когда-нибудь мы будем смотреть смотреть фильмы, которыми можно управлять?»
— Я бы убил Джона Коннора.
— А я бы не выбросил бузинную палочку и стал плохим волшебником.
— А я бы на месте Поттера воспользовался маховиком времени, чтобы спасти его родителей, а не клювокрыла.



И, как говорится, понеслось…

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

Парсим HTML на C++ и Gumbo

Время на прочтение5 мин
Количество просмотров48K

Gumbo — это парсер HTML5 на Си. Пока что Gumbo предоставляет только дерево, но никаких удобных функций для работы с ним. Поэтому написал парочку вспомогательных классов:
  • STL совместимый итератор обхода дерева в глубину;
  • компараторы для поиска по тегу, атрибуту;
  • пара фасадов.

Под катом будет пример разбора страницы habrahabr.ru/all/
Читать дальше →

Пунктирное подчеркивание ссылок с нормальным расстоянием между текстом и линией

Время на прочтение1 мин
Количество просмотров8.9K
К сожалению, стиль text-decoration: dotted пока не поддерживается большинством браузеров, а желание сделать что-то подобное — присутствует.
Читать дальше →

REM vs EM – Великий спор

Время на прочтение12 мин
Количество просмотров234K


Представляю вашему вниманию перевод достаточно большой и объемной статьи по поводу вечного спора, какие же единицы измерения использовать при верстке: em'ы или rem'ы. В каких случаях стоит использовать одни единицы, а в каких другие. Вас ожидает много кода, примеров и их объяснений.

Добро пожаловать в мир типографики и относительных единиц измерения =)
Читать дальше →

BEM с человеческим лицом

Время на прочтение9 мин
Количество просмотров23K

Звучная аббревиатура BEM пришла к нам из лабораторий Яндекса. Там, как и в случае с XSLT, применение BEM решили возвести в абсолют: под BEM'ом в Яндексе понимают целое семейство утилит и подходов, объединенных единой идеологией блочной архитектуры веб-приложений. Как любая тоталитарная система, BEM требует соблюдения строгих правил при разработке, не редко вступающих в конфликт со здравым смыслом небольших проектов, не сравнимых по ресурсам с Яндексом. И да, то самое чувство, когда читаешь официальные доки по BEM.


Однако, как часто бывает в процессе эволюции больших систем, под давлением интеллекта и безлимитных сроков рождается технологический алмаз, настолько же маленький и самостоятельный, насколько и ценный, который огранят уже другие. Да, BEM с его спасительной строгостью — это явное откровение. Каждый, кто на моих глазах причащался, мгновенно становился счастливым. Однако, после первой волны наслаждения приходит осознание, что второй подход к этому снаряду может порвать ментальные связки по всему объему мозга. И вот уже слышны жалобы на слишком большую сложность освоения, на чрезмерную многословность, на (внимание!) увеличение количества мегабайт в HTML и CSS, и кто знает на что еще, не относящееся к делу.


Соглашусь, трудно взять и начать писать BEM без разбега: и нотация глаз колет, и старые трюки не проходят, и думать приходится системно. И вообще, писали как-то годами без BEM'а и писать будем! А ведь для легкого и непринужденного преодоления порога вхождения нужно сделать всего два движения. Во-первых, понизить сам порог, смягчив BEM. И во-вторых, немного подтянуться самим. Тогда переход будет ровненьким и мы мягко вкатимся в эру читабельного и поддерживаемого CSS.

Как мы дошли до жизни такой?

Меньше 2 месяцев, GoPro, крутая идея и команда — всё, что нужно, чтобы сделать игру от первого лица

Время на прочтение2 мин
Количество просмотров10K
Полгода назад за чашечкой кофе программист, режиссер и геймдизайнер вели дружескую беседу на тему того, что кинематограф становится скучным.
Да, спецэффекты становятся круче, количество D становится больше, но этим малого кого сейчас можно удивить. Людей цепляет сюжет. А теперь представьте, что когда-нибудь мы будем смотреть смотреть фильмы, которыми можно управлять?
— Я бы убил Джона Коннора
— А я бы не выбросил бузинную палочку и стал плохим волшебником
— А я бы на месте Поттера воспользовался маховиком времени, чтобы спасти его родителей, а не Клювокрыла

И, как говорится, понеслось…

Читать дальше

Релиз Webix 3.2. Новые виджеты для работы с данными и прочие фичи

Время на прочтение6 мин
Количество просмотров11K


Следуя традиции выпускать новые версии библиотеки с завидным постоянством, разработчики Webix сообщили о выходе регулярного весеннего релиза, на этот раз за номером 3.2. Среди нововведений в этой версии были замечены два новых виджета: SpreadSheet, который, как видно из названия, служит для создания экселеподобных таблиц, а также RangeChart, позволяющий выбрать для отображения определенный участок большого графика. Помимо этого, были добавлены новые возможности, позволяющие расширить функционал уже имеющихся компонентов.

Но обо всем по порядку.
Читать дальше →

Что делает программное обеспечение качественным?

Время на прочтение21 мин
Количество просмотров19K
image
КДПВ

Кто-то создает программное обеспечение с открытым исходным кодом, а я провожу много времени размышляя над тем, как сделать программное обеспечение лучше. Бесконечный поток просьб о помощи на форумах Stack Overflow, GitHub, Slack, в электронных письмах и личных сообщениях неизбежен. К счастью, в итоге вы знаете многих людей, которые добились определенного успеха и сделали фантастические вещи, и знание о том, что вы приняли в этом участие благодаря вам и вашей помощи, является хорошей мотивацией для новых достижений.

У вас возникает вопрос: какие качества программного обеспечения приводят разработчика к успеху или к неудаче? Как я могу улучшить свой софт и помочь бо́льшему количеству людей стать успешным? Я могу ясно сформулировать некоторые основные принципы или полагаюсь на интуицию в зависимости от конкретного случая? (Рождение и воплощение одной мысли это два совершенно разных действия).

Возможно это что-то вроде принципов Дитера Рамса, способствующих качественному дизайну программного обеспечения?

  • Хороший проект является инновационным.
  • Хороший проект делает продукт полезным.
  • Хороший проект эстетичен.
  • Хороший проект делает продукт понятным.
  • Хороший проект ненавязчив.
  • Хороший проект честен.
  • Хороший проект длителен.
  • Хороший проект продуман до мельчайших деталей.
  • Хороший проект безвреден для окружающей среды.
  • В хорошем проекте дизайна настолько мало, насколько это возможно.
Читать дальше →

Парсеров всем! Анализируем и тестируем существующие HTML парсеры

Время на прочтение4 мин
Количество просмотров19K


Всем привет!

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

Да, в этой статье я предлагаю выложить все парсеры на стол и измерить!

Приступим!

Яндекс убивает бизнес, или будьте осторожны с блоком #main

Время на прочтение3 мин
Количество просмотров67K
UPD 16.03.2016: Новая версия аддона больше не убивает!

Заголовок, конечно, абсолютно желтый. Я хочу рассказать короткую детективную историю о том, как большой и могучий Яндекс решил разрушить бизнес (не специально, конечно — совершенно случайно, по ошибке) нашему маленькому и уютному сайту, и о том, почему при создании расширений для браузеров, которые должны работать только на определенных сайтах — важно в коде прописать, чтобы расширение работало только на этих определенных сайтах, и ни на каких больше.

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



Казалось бы, просто поехала верстка, футер стал наезжать на контент, при чем тут Яндекс?
При чем же здесь Яндекс?

Кризис ожирения сайтов

Время на прочтение30 мин
Количество просмотров123K
Примечание переводчика: визит под кат этого поста означает большие объёмы потреблённого трафика. И это иронично, если учесть поднятую тему. Но всё сразу встаёт на свои места, если помнить, что в оригинале это было выступление в прошлом ноябре в Сиднее длиной почти в час. Чтение поста занимает куда меньше времени. В форме видеозаписи (1280×720) речь занимает два гигабайта. Пост же занимает всего лишь 12 МиБ. Рекомендуется просмотр на широких мониторах.



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

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

Подборка материалов для начинающего разработчика игр на JavaScript

Время на прочтение2 мин
Количество просмотров10K
Предоставленные ниже материалы затрагивают лишь основы, то самое начало, с которого можно стартовать человеку, решившему создать игру но не знающему с чего начать. Хорошим вариантом будет изучение соответствующей литературы, статей или же рассмотрения примеров уже готовых игр, а так же просмотр исходников разных программ и решений.

Данные материалы не претендуют на то, чтобы показать «как надо делать», они лишь помогут наглядно понять, что и как работает, а вот как правильно это сделать — решит только сам разработчик. Однако, кого-то эти материалы могут замотивировать на дальнейшую работу, так как они достаточно наглядны и объясняют простоту создания игр на JavaScript.
Читать дальше →

Ближайшие события

Туториал по Jade для начинающих

Время на прочтение8 мин
Количество просмотров229K


Jade — это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js. Проще говоря, Jade — это именно то средство, которое предоставляет вам возможность написания разметки совершенно по новому, с целым рядом преимуществ по сравнению с обычным HTML.
Читать дальше →

Знакомимся с веб-стандартами. Работа с аудио. — Видео и история создания

Время на прочтение3 мин
Количество просмотров10K
Всем привет! Специально для тех, кто только знакомится с веб-технологиями и новыми веб-стандартами мы подготовили вводный 15-минутный ролик, рассказывающий про работу с аудио в вебе (HTML Audio и Web Audio).



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

Под катом дробности создания ролика

Мой «Умный дом» на ПЛК и с веб-интерфейсом. Часть 2. Веб-интерфейс

Время на прочтение8 мин
Количество просмотров12K

«Прелюдия»



В продолжение предыдущей истории, я расскажу о создании средства отображения информации в моей квартире (HMI, SCADA называйте как хотите).
На текущий момент я не встретил SCADA –системы, которые отвечали моим требованиям:
— клиентская часть должна работать на любой платформе, а особенно на мобильной платформе;
— бесплатность системы
— доступ к данным от ПЛК по OPC — технологии.
Итого поискав варианты SCADA (с крэком и без) я понял, что варианты в основном корявые или дорогие. Решил, что надо идти другим путем и путь этот называется «свой костыль плюс framework». Дальше я рыл гугл — Node ModBus-клиенты, самопальные PHP скрипты и т. д. И из чего что было я выбрал CSWorks. Установил, настроил, работает и вроде неплохо работает + HTML5. Лицензия распространяется «Бесплатно 999 переменных, 1 сессия» и это меня устроило. И я остановился на CSWorks.

Ниже я постарался сделать не большую инструкцию по настройке CSWorks.Наверно инженерам по промышленной автоматики, будет полезна эта инструкция, так как вы сможете сделать достаточные простые (и сложные) проекты через web интерфейс;
Читать дальше →

Оптимизация HTML5 игр для Android

Время на прочтение3 мин
Количество просмотров6.7K
Сегодня речь пойдет снова об элементе CANVAS, а так же немного об оптимизации самих игр в HTML5.

HTML часть


В современных браузерах для отрисовки в canvas используются мощи видеокарты, но, не всегда по умолчанию они включены. Можно залезть в настройки браузера и проверить. Для того, чтобы элемент вызывал такую обработку, можно в HTML добавить элементы 3D трансформации объекта. Отличным способом ускорения может (но не факт) послужить такая вот модификация канваса:

 canvas.style.WebkitTransform= 'translate3d(0,0,0)';
 ... много подобных параметров
 canvas.style.transform= 'translate3d(0,0,0)';

Читать дальше →

Рип сетевых словарей при помощи Node.js, ч. 2: динамические страницы; подключение NW.js

Время на прочтение16 мин
Количество просмотров8.4K
В предыдущей части были описаны базовые операции и сопутствующие задачи при копировании сетевых словарей при помощи Node.js. В этой части описывается использование важного дополнительного инструмента для конвертирования веб-источников особого уровня сложности.

I. Зачем нам NW.js?


1. Чем сложнее структура веб-страниц словаря, тем больше оснований опереться на весь спектр возможностей, предоставляемый отточенным браузерным движком. JSDOM — довольно развитая библиотека, но даже она не сравнится с полным набором средств из Chromium.

2. Люди, занимающиеся созданием и конвертированием цифровых словарей, — в значительной мере гуманитарии, которых волей судьбы занесло в сферу IT. Иногда им комфортнее работать с GUI, чем с интерфейсом командной строки, особенно если они не пишут утилиты сами, а пользуются готовыми разработками коллег. NW.js предоставляет простые способы создания GUI к тривиальным приложениям для анализа, обработки и конвертирования веб-страниц.

Как пример для краткого описания этого инструмента я выбрал сайт www.wordspy.com.
Читать дальше →

Как покрасить вкладку Chrome

Время на прочтение1 мин
Количество просмотров91K
image

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

Как выбрать фреймворк для frontend-разработки

Время на прочтение6 мин
Количество просмотров116K
Предлагаю вашему вниманию перевод статьи How To Pick a Frontend Web Framework c сайта top.fse.guru.

Привет, приятель!

Ниже ты найдешь большой список компоновки инструментов и фреймворков. Не волнуйся! Ты можешь выбрать один, в котором точно уверен, или проигнорировать все и придумать свой вариант.

Данная статья предназначена для того, что бы помочь тебе узнать и упорядочить список инструментов которые используются в сфере frontend-разработки. А так же, это неплохой список, из которого ты можешь выбрать то, что тебе придется по душе.
Читать дальше →