Обновить
110.86

HTML *

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

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

DiffHTML.js — утилита для патчинга DOM

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


Что такое DiffHTML.js?


DiffHTML — эта утилита для патчинга (частичного изменения) DOM-дерева. Она умеет находить разницу между существующим DOM-деревом и HTML-строкой, между двумя деревьями. В результате будут произведены только те изменения, которые реально имеют место быть. Те элементы которых не было — вставятся, атрибуты которые были реально изменены — изменятся, и только они. Остальные элементы останутся без изменений.
Читать дальше →

15 ошибок или советов HTML и CSS

Время на прочтение4 мин
Количество просмотров45K
Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать конструктивную критику. Пост предназначен для начинающих изучать HTML и CSS, но, возможно, специалистам тоже будет интересно ознакомиться с данным материалом.

1. W3C Validator


Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:

  • не закрыт тег;
  • не рекомендованные символы в ссылках;
  • используется не рекомендованный тег;
  • не указан обязательный атрибут;
  • и другое.
Читать дальше →

Выбираем html-парсер для Apache.JMeter

Время на прочтение11 мин
Количество просмотров9.5K
Среднее качество полноты извлечения ссылок на встроенные ресурсы html-парсерами Apache.JMeter
Среднее качество работы парсеров (для семи сайтов)

Предлагаю:

  • посчитать среднее качество полноты извлечения ссылок на встроенные ресурсы html-парсерами Apache.JMeter;
  • проверить правда ли извлечение ссылок в Apache.JMeter 3.0 стало более полным;
  • испытать в деле плагин CsvLogWriter.

Как гласит народная мудрость: Верить верь, но…
проверь

Зачем нам jQuery?

Время на прочтение6 мин
Количество просмотров64K
Здравствуйте, дамы и господа! Вот уже без малого десять лет минуло с первого релиза библиотеки jQuery, и мы решили отряхнуть пыль веков с классики. Подумываем о выпуске третьего издания гусарской баллады об этой библиотеке:


Чтобы пояснить, чем она нас привлекает в эпоху Node и ES6 (у нас в ассортименте и этого добра навалом) предлагаем познакомиться со статьей Коди Линдли, вышедшей вскоре после вышеупомянутого третьего издания
Читать дальше →

Трёхпозиционный checkbox (aka tristate) без скриптов и смс

Время на прочтение2 мин
Количество просмотров33K
Понадобилось мне недавно реализовать трёхпозиционный переключатель. Ну это такой, у которого вместо двух состояний «включено/выключено», есть ещё промежуточное состояние. Это часто используется, например, в чекбоксе «выбрать всё», для того чтобы показать, что выбраны не все элементы, а только часть. В общем, захотелось такое реализовать, да чтобы без скриптов.
Читать дальше →

Как по маслу, или анимируем со скоростью 60 FPS на CSS 3

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

Изображения и текст принадлежат их авторам.


Анимация элементов в мобильных приложениях — это просто. Правильная анимация тоже может быть простой… если вы последуете представленным в статье советам.


Сегодня кто только не использует CSS 3 анимацию в своих проектах, тем не менее не только лишь все, но мало кто может делать это правильно. Даже описаны так называемые «лучшие практики», но люди продолжают делать всё по-своему. Скорее всего потому, что просто не понимают, почему всё устроено именно так, а не иначе.


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

Альтернатива для .clearfix

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

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


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

Как отображать потоковое видео с помощью HTML5

Время на прочтение4 мин
Количество просмотров26K
В этой статье я объясню и покажу как сделать видео трансляцию на вашем сайте. Недавно меня наняли с целью реализовать данный функционал для клиента. Я посоветовал реализовать это с помощью HTML5 для mp4 видео форматов и flash для его .flv файлов.
Читать дальше →

Управляем компьютером через браузер

Время на прочтение3 мин
Количество просмотров25K
Компьютер давно многим заменил телевизор, а что не хватает компьютеру для комфортного просмотра кино, сериалов и прочего? Мне, лично, не хватало пульта дистанционного управления.

image

Я немного увлекаюсь веб-программированием в свободное время. Было решено написать свой велосипед, и, заодно совместить приятное с полезным. Была изучена возможность с помощью консоли управлять компьютером, в первую очередь меня интересовал следующий минимальный объем задач (который немного увеличился в последствии):

  • Возможность отправить ПК в режим сна
  • Возможность выключить громкость

С помощью известного поисковика нашел консольную программу, NirCmd, программа позволяет осуществлять достаточно много действий кроме указанных выше. С основной частью мы определились. Как я говорил, немного изучаю php, веб-сервер у меня как правило запущен постоянно, поэтому ничего специфичного в плане сервера я придумывать не стал. Сервер написан на php и состоит из двух классов: Control, который представляет собой методы, которые исполняют консольные команды и Route, который делает валидацию приходящих запросов и исполняет методы класса Control.

Control выгладит вот так (код однотипный, поэтому я сократил):
Читать дальше →

Web приложение для работы с markdown заметками

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

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

Я попробовал различные wiki движки, но не всё мне в них нравилось, иногда функционала было недостаточно, а иногда было слишком много. Я подумал, что если хочешь сделать хорошо — сделай это сам нужно написать свой велосипед.

Мне давно хотелось написать web-приложение на Python, поэтому выбор пал на этот язык. Под катом исходный код и описание, а также ссылка на репозиторий.
Читать дальше →

Генератор конфигураций для сетевого оборудования и не только

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


Многие хранят шаблоны конфигураций сетевых устройств (прим. да и не только сетевых) в обычных текстовых файлах. И когда приходит время настраивать новое оборудование, достают эти файлики и начинают в них что-то менять. Повседневные типовые операционные задачи не являются исключением и бой с этими задачами обычно ведётся с помощью фалов-шаблонов конфигураций. Безусловно, есть приложения по управлению сетью, но увы их используют далеко не все, потому что многим они не по карману или задачи по конфигурированию оборудования выполняются достаточно редко, в связи с чем обосновать покупку такого ПО очень сложно. Хочу предложить Вам решение по реализации генератора конфигураций на базе HTML/JS, а так же небольшой DIY набор для быстрого старта.
Читать дальше →

Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса

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

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


Сайт smashingmagazine.com на различных размерах экранов


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

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

Создание игры Doodle Jump для Android в Intel XDK за 2 часа на JavaScript с нуля

Время на прочтение11 мин
Количество просмотров27K
Здравствуй, Хабр.

Непривычно для меня писать статьи спустя такое долгое время, так как я привык к записи материала на видео, где можно свободно что-либо рассказывать. И так уж получилось, что решил написать статью об Intel XDK, но не просто обзор возможностей, а разобрать среду на примере вполне конкретного проекта. Проектом таким для меня стал «клон» игры «Doodle Jump».

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

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

Библиотека, облегчающая разработку форм на сайтах (v3)

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

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


Как-то, год назад я писал о своей небольшой библиотеке, которая облегчает разработку форм на сайтах. Недавно я выпустил 3-ю версию, которая, по-сути, была переписана с нуля, чтобы стать правильней и удобней. Но в своей статье я не буду повторять README и ДЕМО, а лучше покажу на практике, каким образом она помогает писать меньше кода.

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

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

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


Вероятно, вы все уже слышали про технологию «Веб-push» в составе Push API и Notifications API. Я уверен, что среди вас есть те, кто возлагает надежды на эту технологию, как на новый канал коммуникации с пользователем. И я не исключаю возможность, что данную статью будут читать основатели тех немногочисленных стартапов, которые всерьёз занялись окучиванием технологии «Веб-push» для рекламы и маркетинга. Сегодня я вам расскажу, о том как можно использовать данную технологию.
Читать дальше →

Кэш, хэш и няш-меш

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

UPD0 (2016-07-19 23-31): судя по всему, первая половина моей статьи — успешно изобретённый велосипед. Спасибо хабравчанам за ссылку на спецификацию
Статья ценна не более, чем вольное описание уже придуманной технологии.


Предыстория


Июльский субботний вечер подходил к концу. Нарубив дров на шашлык, я повесил USB-модем на багету, скомандовал sudo wvdial, развернул браузер и обновил вкладку с открытым гитхабом. Вернее, попытался обновить. Скорость не радовала, и в итоге страница-то обновилась, но явно не хватало какого-то из стилевых файлов; и дело было не в блокировке, поскольку аналогичные проблемы я наблюдал и с другими сайтами, и зачастую они решались просто многократным обновлением страницы. Во всём был виноват перегруз 3G-сети.


Стоп! А как же кэш?

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

Сражаясь с БЭМ: 10 основных ошибок и как их избежать

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

Не важно, узнали ли вы о БЭМ только сейчас, или следите за ним с самого начала, вы, возможно, уже оценили столь полезную методологию. Если вы не знаете, что такое БЭМ, я рекомендую прочитать вам об этом на сайте БЭМ перед тем, как продолжить чтение этой статьи, потому что я буду использовать термины, которые предполагают базовое понимание этой CSS методологии.
image
Эта статья нацелена на людей, которые уже используют БЭМ и желают использовать его более эффективно, а также на тех, кто хочет узнать о нем больше.

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

Пишем адаптивный шаблон для Emlog CMS

Время на прочтение5 мин
Количество просмотров2.5K
Сегодня хотелось бы рассказать о Emlog CMS, о данной системе мало кто слышал, но она является хорошим вариантом для ведения личного сайта. Emlog работает быстро и стабильно, но уступает по функционалу Wordpress, например, и у этого скрипта меньше плагинов и шаблонов. Скрипт китайский, но имеет русскую локализацию, правда, шаблоны к нему только на китайском и, в основном, не адаптивные, напишем подходящий шаблон для ведения блога, например.
Работа с Emlog немногим отличается от Wordpress, дефолтный шаблон включает в себя такие файлы, как:
  • 404.php
  • echo_log.php – Полная новость.
  • footer.php
  • header.php
  • log_list.php – Короткая новость.
  • main.css – Все css шаблона.
  • module.php – Подключаемые модули и комментарии.
  • page.php — Страница открытой новости.
  • side.php – Боковая панель.
  • t.php – Микроблог.

Примеры функций для шаблона:
<?php require_once View::getView('module'); ?> //Подключение модулей.
<?php include View::getView('side'); ?> //Подключение боковой панели с модулями.
<?php echo $site_title; ?> //Заголовок страницы.
<?php blog_navi(); ?> //Панель со ссылками.
<?php echo $footer_info; ?> //Информация в конце страницы.

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

Книга «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 4-е изд.»

Время на прочтение3 мин
Количество просмотров30K
image Новое 4-ое издание признанного бестселлера, охватывающего как клиентские, так и серверные аспекты веб-разработки. Эта книга поможет вам освоить динамическое веб-программирование с применением самых современных технологий. Книга изобилует ценными практическими советами, содержит исчерпывающий теоретический материал. Для закрепления материала автор рассказывает, как создать полнофункциональный сайт, работающий по принципу социальной сети.

  • Изучите важнейшие аспекты языка PHP и основы объектно-ориентированного программирования.
  • Познакомьтесь с базой данных MySQL.
  • Управляйте cookie-файлами и сеансами, обеспечивайте высокий уровень безопасности.
  • Пользуйтесь фундаментальными возможностями языка JavaScript.
  • Применяйте вызовы AJAX, чтобы значительно повысить динамику вашего сайта.
  • Изучите основы CSS для форматирования и оформления ваших страниц.
  • Освойте продвинутые возможности HTML5: геолокацию, обработку аудио и видео, отрисовку на холсте.

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

Делаем крутые Single Page Application на basis.js — часть 2

Время на прочтение12 мин
Количество просмотров26K
Всем доброго времени суток.
Продолжаю увлекательный цикл статей про создание мощных Single Page Application на basis.js.
В прошлый раз мы немного пофилософствовали, а так же познакомились с токеном — одной из важнейших вещей в basis.js.
Сегодня речь пойдет о работе с данными.
Читать дальше →