Все потоки
Поиск
Написать публикацию
Обновить
64.28

HTML *

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

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

В защиту javascript:void(0);

Время на прочтение1 мин
Количество просмотров96K
Намедни я решил посмотреть новости через Google. Нажимаю правой кнопкой на ссылку «другие новости» и в контекстном меню нет пунтка открыть в новом окне. Я решил глянуть исходный код и вижу javascript:void(0);
Для меня это стало новостью, ведь все что читал до этого — было однозначно против такого решения.
Читать дальше →

AniJS – библиотека для декларативного описания CSS-анимации

Время на прочтение1 мин
Количество просмотров25K
На днях занимался созданием лэндинга с приличным набором анимации, возникающей во время взаимодействия со страницей. Прям чувствовал, что должна быть какая-нибудь крутая библиотека для решения задачи. И тут я нашёл AniJS, которая меня совершенно покорила!

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

Кеширование всего HTML и подключение JS «на ходу»

Время на прочтение5 мин
Количество просмотров16K
Однажды я совершил страшное дело – посмотрел исходный код главной страницы Яндекса и задумался – что-то тут не так. Я вижу 5 заголовков последних новостей, несколько картинок, поле поиска, ссылочки и вот вопрос:
Где тут 700Кб, которые требуют 1,56с моего времени? (по данным веб-инспектора Safari 7.0.3)

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

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

Сайт на с++ (CppCMS). Часть 1

Время на прочтение24 мин
Количество просмотров48K
Здравствуй уважаемый %username%.
Сегодня я хотел бы поделиться с тобой личным опытом в создании Web сайта на CppCMS (библиотека-шаблонизатор на с++). Можно назвать это «помощью начинающему программисту на CppCMS».

Зачем писать сайт на с++


Доводы за и против такого решения могут быть весьма разнообразны и, что бы не спровоцировать войну «языковых школ», я проведу аналогию с автомобилями: «Я купил этот. Нравится. Езжу. Продавать не хочу!».
Из дополнительных аргументов будет то, что данный язык является профильным для моего рабочего места.
Читать дальше →

С чего начать своё расширение для Photoshop, Illustrator и др. на HTML5

Время на прочтение5 мин
Количество просмотров38K
Hello Habrahabr Panel

В этой статье я расскажу как при помощи HTML и JavaScript сделать своё собственное расширение для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign.

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

Последний день регистрации на Всеукраинский чемпионат UA Web Challenge VI для фронтенд разработчиков

Время на прочтение1 мин
Количество просмотров6.6K
image
В этом году оргкомитет чемпионата принял решение разбить соревнования на малые чемпионаты по номинациям (мы их назвали полуфиналами). Чтобы больше участников могло поучаствовать и пройти в очный круг соревнований и ощутить атмосферу изнутри, а не только заочно.

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

Наследование HTML файлов в xslt-стиле

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

Проблема


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

{{if app.version==versions.main}}
<!--один html код-->
{{else if app.version==versions.custom1}}
<!--другой html код-->
{{else if app.version==versions.custom2}}
<!--и ещё html код-->
{{endif}}

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

Привыкнув к удобным методам управления версиями приложения с помощью инъекции зависимостей, когда в зависимости от версии используются разные реализации интерфейсов, я решил изобрести свой велосипед для XSLT-подобного управления версиями html файлов: grunt-html-inheritance. Он позволяет подменять кусочки базового html-файла с помощью маленьких патчей.
Как этим пользоваться?

CSS 3 Timing Functions и с чем их едят

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


Хей народ, пристегните ремни и держитесь покрепче, ибо наступил действительно волнительный момент: вам предстоит разобраться в тонкостях чрезвычайно интересных временных функций CSS!


Окей, ваша кровь, конечно, вряд ли закипела от предмета данной статьи, но шутки в сторону: временные функции — своего рода скрытая жемчужина, когда дело касается CSS, и, вполне вероятно, вы удивитесь тому, сколько всего интересного с помощью них можно сделать.

Полетели!

12 малоизвестных возможностей CSS

Время на прочтение8 мин
Количество просмотров138K
CSS — не очень сложный язык. Но даже если вы пишете таблицы стилей в течении многих лет, наверняка бывают моменты, когда вы узнаете еще что-нибудь новенькое: свойства или значения, которые вам не доводилось использовать, детали спецификации, о которых вы не имели понятия.

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

15 шаблонизаторов для фронтенд-разработки

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

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

Не так давно я писал, что вы могли бы попробовать написать свою библиотеку, когда придёт время. Шаблонизаторы же требуют несколько больших навыков и понимания языка, с которым вы работаете, поэтому лучше полагаться на любой шаблонизатор из имеющихся в списке ниже.
ICanHaz,Hogan,Handlebars,Mustache,Transp-cy,doT,Walrus,Chibi,templayed,ECT,Pithy,T,Nunjuck,Jade,Dust

Скрещиваем WebWorker и XMLHttpRequest

Время на прочтение3 мин
Количество просмотров7.2K
WebWorker+XMLHttpRequest

HTML5 уже никого не удивляет, но у многих новичков возникает много вопросов. Особенно вопросы связаные с параллельными потоками, а именно с WebWorker. Дальнейшее повествование требует знания JS и HTML — я не буду разжевывать основы html и js.
Сегодня мы рассмотрим как обернуть в WebWorker обычный XMLHttpRequest.
Читать дальше →

Лучшие платные Photoshop плагины для веб-дизайнеров

Время на прочтение3 мин
Количество просмотров32K
Привет, Хабр! Относительно недавно я опубликовал "Лучшие бесплатные Photoshop плагины для веб-дизайнеров". В подборке я попытался собрать все известные мне инструменты, которые значительно помогают в работе. Кстати, по возможности я ее обновляю и несколько дней назад добавил Velositey для построения лэйаутов. Таким образом мне хочется сделать «конкретное местечко» где будут храниться удобные для работы с фотошопом штуки. Аналогично не только поста ради, мне хочется собрать и платные инструменты, которые реально окупятся через «несколько» человеко часов. Некоторыми из них я пользуюсь сам.

PNG HAT $39.99



Сей замечательный плагин от достаточно известной компании Source «символизирует» лучший способ того, как должна происходить нарезка слоев. Принцип «в один клик», которые значительно сокращает потраченное время на экспорт слоев наглядно продемонстрирован в видео выше. Что еще есть внутри: мощная оптимизация с помощью PNG Crush, PNG quant и opti PNG, которая по заявлению разработчиков в разы эффективнее стандартного способа; Base64 encoding; код на изображение копируется в буффер для HTML, CSS или Obj C; масштабирование, что очень удобно в связи с необходимостью разработки дизайна под Retina дисплеи; и даже облако объемом 1GB для хранения изображений.

Говоря про «нарезку» также стоит упомянуть Zeick $19.99, который экспортирует все векторные шейпы в SVG и Glifo $19, который экспортирует эти же шейпы в иконочные шрифты.

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

Стилизация элементов форм и попытка обойти подводные камни

Время на прочтение3 мин
Количество просмотров6.4K
Приветствую читатели, стилизованные элементы формы на сайтах сейчас прочно вошли в реалии современного дизайна и кто бы что не говорил, во многих случаях смотрятся они действительно приятно.
Многие из вас уже обзавелись плагинчиками типа chosen и прочим добром, некоторые из них весьма качественно написаны. В этой статье я не буду рассказывать про очередной плагин, а лишь хочу обратить ваше внимание на один из способов расширения возможностей плагина, возможно кому-то он поможет.
Я являюсь сторонником того, чтобы подключая плагины для стилизации форм, мы должны продолжать работать с элементами форм в нативном стиле и никак не зависеть от плагина стилизации. Я практически ни у одного (можно сказать ни у одного) плагина не видел корректную обработку изменения поведения элементов при изменении атрибутов DOM элементов, а именно — обработку изменения атрибута disabled (min, max, maxlength), всегда надо было учитывать апи плагины, верстку элемента и тд, а это неудобно если вы в будущем захотите поменять плагин или верстку. Как вариант — подумать заранее и для всего сделать обертки и работать с ними как с внутренним апи. Но есть и альтернативный путь.
Читать дальше →

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

Несколько интересностей и полезностей для веб-разработчика #15

Время на прочтение3 мин
Количество просмотров25K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Bitcore


image
Полноценная JS библиотека, полностью обеспечивающая поддержку необходимого функционала для создания Bitcoin приложений.

Валидация биткоин адреса:
var bitcore = require('bitcore');
var Address = bitcore.Address;

var addr = new Address("1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa");

console.log(addr.isValid());


Мониторинг блоков и транзакций
var bitcore = require('bitcore');
var networks = bitcore.networks;
var Peer = bitcore.Peer;
var PeerManager = require('soop').load('bitcore/PeerManager', {
  network: networks.testnet
});

var handleBlock = function(info) {
  console.log('** Block Received **');
  console.log(info.message);
};

var handleTx = function(info) {
  var tx = info.message.tx.getStandardizedObject();

  console.log('** TX Received **');
  console.log(tx);
};

var handleInv = function(info) {
  console.log('** Inv **');
  console.log(info.message);

  var invs = info.message.invs;
  info.conn.sendGetData(invs);
};

var peerman = new PeerManager();

peerman.addPeer(new Peer('127.0.0.1', 18333));

peerman.on('connection', function(conn) {
  conn.on('inv', handleInv);
  conn.on('block', handleBlock);
  conn.on('tx', handleTx);
});

peerman.start();



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

Несколько интересностей и полезностей для веб-разработчика #14

Время на прочтение3 мин
Количество просмотров33K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

FastClick.js


Nota Bene. Практически всегда страница в браузере на вашем тач устройстве реагирует недостаточно быстро. Все из-за задержки в 300ms, чтобы убедиться, что это не double tap. FastClick.js — это полифил, который избавляет пользователей вашего сайта от этой задержки.

Кстати, это репозиторий от разработчиков известнейшего Financial Times и у них же есть еще один полезный проект на GitHub — ftscroller, с помощью которого легко создать адаптивный скроллинг и мульти-скроллинг для любого эленмента.

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

Управление JavaScript UI-потоком с помощью планировщика WinJS

Время на прочтение15 мин
Количество просмотров3.6K
От переводчика: в статье рассказывается о новом планировщике задач в библиотеке WinJS 2.0, обновившейся вместе с выходом Windows 8.1. Для понимания части материала крайне желательно понимание работы с отложенными результатами (Promise). См. раздел MSDN, посвященный асинхронному программированию на JavaScript.

Не считая рабочих веб-процессов (web workers) и фоновых задач, которые также выполняются как отдельные веб-процессы, весь JavaScript-код в приложениях для Windows Store выполняется в общем так называемом UI-потоке. Этот код может делать асинхронные вызовы WinRT API, которые выполняют свои операции в отдельных потоках, но есть один важный момент, о котором нужно помнить: результаты из этих не-UI-потоков возвращаются назад для обработки в UI-поток. Это означает, что запуск серии асинхронных вызовов WinRT (например, HTTP-запросов), — всех сразу, — может потенциально перегрузить UI-поток, если результаты от них придут примерно в одно и то же время. Более того, если вы (или WinJS) добавляете элементы в DOM или изменяете стили, которые требуют обновления компоновки страницы в UI-потоке, это создает еще больше задач, конкурирующих за ресурсы CPU. Как результат ваше приложение становится «тормозящим» и неотзывчивым.

В Windows 8 приложение может предпринять ряд шагов для снижения таких эффектов, например, запускать асинхронные операции в рамках временных блоков, чтобы управлять частотой возвратов в UI-поток, или объединять вместе задачи, требующие цикла обновления страницы, чтобы за один проход выполнялось больше операций. Начиная с Windows 8.1, появилась возможность асинхронно расставлять приоритеты разным задачам непосредственно в UI-потоке.

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

Отзывчивый дизайн. Реакция на уровень освещенности

Время на прочтение2 мин
Количество просмотров27K
Media Queries

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

Теперь эта возможность потихоньку перебирается и в движки мобильных браузеров.

В статье будет рассмотрен пример реагирования веб-старницы в браузере на окружающую освещенность.
Читать дальше →

Добавляем кириллицу в шрифт Source Sans Pro для Bootstrap-темы Lumen

Время на прочтение4 мин
Количество просмотров32K
В каталоге бесплатных тем для Bootstrap есть симпатичная тема Lumen, в ней используется шрифт Source Sans Pro, в котором «из коробки» отсутствует кириллица. Эту проблему можно частично решить самостоятельно, скомпилировав шрифт из исходников. Почему частично — см. заключение.

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

Несколько интересностей и полезностей для веб-разработчика #13

Время на прочтение4 мин
Количество просмотров46K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Colour Schemes


image
Репозиторий уже набрал более 4000 старов на GitHub. Автор проекта — Dayle Rees — один из участников команды Laravel PHP, где люди убеждены, что «код должен приносить удовольствие разработчикам, а не только пользователям, принимающим вашу трудную работу». Сolour Schemes на сегодняшний день это 56 различных тем для: Sublime Text (2 & 3), Sublime Text UI (2 & 3), Textmate, Coda 2, VIM, Jetbrains Editors (inc. PHPStorm), Google Code Prettify, Highlight.js и Xcode.

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

Google отказывается от подчеркнутых ссылок

Время на прочтение1 мин
Количество просмотров52K
С 13 марта Google отказывается от использования подчеркивания в ссылках (в результатах поиска). Стоит напомнить, что с 1990-ых годов «кликабельные» элементы выделялись подчеркиванием.

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


Новый и старый вид

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