Обновить
95.62

HTML *

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

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

WordPress. Бесплатный курс от GeekBrains

Время на прочтение5 мин
Количество просмотров88K
В ноябре 2015 года вышел свежий обзор Venturebeat.com и W3Techs. Выяснилось, что каждый четвёртый сайт в Интернете базируется на открытой системе управления контентом (CMS) WordPress. В исследование включались только сайты из Alexa TOP 1.000.000, что говорит о том, что это были не какие-то ресурсы, сделанные второпях или в учебных целях, а действительно крупные проекты. Занявшая второе место CMS Joomla набрала только 2,8%.



Свой 8-ми летний рубеж в 2011 году WordPress встретила с результатом всего 13,1%. Затем плавно, без скачков или других резких потрясений четыре года непрерывного роста, и в итоге 14-й год существования этой CMS принес ей абсолютное лидерство: 25% всех сайтов в мире отдали ей предпочтение. Надо отметить, что и сервис WHOIS присудил ей в своем рейтинге 1-е место: 36% проверок на тип CMS его пользователями он выдал ответ: WordPress.
Читать дальше →

AdBlockBlock — обходим блокировщики рекламы. Метод 1

Время на прочтение10 мин
Количество просмотров21K
Заниматься чем-то, нарушающим священное волеизъявление здешних господ на контент, который и только который они хотят видеть вокруг себя — дело, конечно, неблагодарное и кармически опасное. Но гонки вооружений между блокировщиками рекламы и рекламными системами не избежать, поэтому говорить об этом нужно. Сейчас, когда общий объем вырезанного трафика крутится около 1% — всё несколько вяленько, но уже есть оглядывающиеся владельцы сайтов, недополучающие до 30% денег с рекламы. Рекламные сети начинают общаться между собой, обмениваться спецификациями, есть уже какой-то израильский стартап на эту тему — думаю, соблазнительно с минимальными усилиями увеличить доход сразу и на проценты. В российском сегменте всё пока обходится увещевательными объявлениями вида «Вы отключили рекламу — это мешает нам развиваться» или простым игнорированием факта существования таких пользователей. Надо сказать, пусть оно всё так и остается.

Здесь, исключительно в режиме минимального доказательства работоспособности — будем обходить самый распространенный тип блокировщиков рекламы — по паттерну URL. Метод должен поддерживать:

  • хранения cookie рекламных систем на стороне пользователя
  • передавать не меньшее количество информации о пользователя, чем браузер: User-Agent, IP
  • требовать минимальной настройки большинства стандартных рекламных тэгов
  • быть легко подключаемым и изменяемым для случаев, когда кто-то не поленился и всё-таки добавил кастомное правило, попавшее в мейнстрим

Для достижения результата — будем маскировать все URL рекламных сетей через своеобразное прокси между сервером издателя и рекламодателя.
Читать дальше →

JQuery — разделение событий onСlick и onDblСlick

Время на прочтение3 мин
Количество просмотров8K
this.window.$.on( 'click', function( event ){ context.toggleActive( ); } )
             .on( 'dblclick', function( event ){ context.toggleMaximized( ); } );

При разработке JS приложений часто возникает неудобство ( всё-таки сложно назвать это проблемой ), когда необходимо отделять событие клика от двойного клика из-за особенностей обработки данных событий — браузерами. Думаю многие из Вас сталкивались с тем что во всех браузерах вначале происходит событие onClick а уже после — onDblClick. Не знаю как Вам, но мне это очень мешает спокойному написанию обработки событий подобного рода.

Но проблема вся в том что каких-то простых и удобных решений подобной задачи — нет. Поэтому пришлось взяться за дело, и написать своё решение.
Читать дальше →

Пишем расширение для Chrome «загрузка аудиозаписей с Вконтакте», часть 2

Время на прочтение6 мин
Количество просмотров17K
Продолжим писать наше расширение для Chrome, которое добавляет ссылку «Скачать» для каждой аудиозаписи вконтакте.
В прошлый раз мы изменяли наш раздел Мои Аудиозаписи так.
Было изначально: Стало с расширением:
Оригинал Результат


Но, в тот раз, у нашего расширения был существенный недостаток: оно не работало при переходе со страницы на страницу.
Если зайти на главную страницу, потом перейти в Мои Аудиозаписи, то ссылки у песен не появлялись.
Напомню, вконтакте при переходе со страницы на страницу не обновляет страницу в классическом понимании, а программно изменяет разметку страницы, и обновляет адресную строку. Это не является классическим браузерным переходом на новую страницу, и поэтому наше расширение не обновлялось.
Давайте это исправим.

Как и прежде, наше расширение будет состоять из трех файлов — файла описания (manifest.json), внедряемого js скрипта (vk_inject.js), и внедряемого файла стилей (vk_styles.css).
Читать дальше →

Templater — менеджер шаблонов и твикер для MantisBT

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

MantisBT — это открытое серверное веб-приложение для управления проектами и задачами аля Redmine. В прошлой своей статье я рассмотрел актуальную для этого проекта проблему — отсутствие шаблонов и угрюмость интерфейса. Вот линк на предыдущий пост. После всех обсуждений я решил развивать тему, и написал плагин для MantisBT, с помощью которого можно применять пользовательские шаблоны оформления. Собственно представляю вам этот плагин — Templater v1.0.
Читать дальше →

Использование Backbone.js при работе c html5 canvas

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

1. Описание задачи


Разрабатывая крупное mind map приложение, мы выбрали Backbone в качестве основной библиотеки построения приложения. При этом карта ума рисуется через canvas элемент с помощью различных примитивов. Мы выбрали библиотеку KineticJS для работы с canvas, так как она отлично поддерживает работу с событиями для объектов на холсте.

Чтобы соответствовать архитектуре Backbone все работа с canvas (точнее с экземплярами объектов KineticJS) происходила в экземплярах Backbone.View:

var Node = Backbone.View.extend({
   initialize : function(params) {
        this.layer = params.layer;
        this.node = this.el();
        this.bindEvents();
    },
    el : function(){
        var rect = new Kinetic.Rect({
          x : 100,
          y : 100,
          width : 50,
          height : 50,
          fill : 'green',
          id : 'rect'
        });
        return rect;
  },
  bindEvents: function() {
         this.node.on('click', function(){
             console.log("on rectangle clicked");
          }
          // etc ...
   }
});


2. Проблема


Но Backbone View спроектирован для работы с DOM элементами, и при таком подходе генерировал не нужные нам div объекты и объявлять события в декларативном стиле (http://backbonejs.org/#View-delegateEvents) тоже не получалось.
Читать дальше →

CSS GuideLines, часть 3. Именование классов

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


Соглашения по именованию CSS позволяют писать строгий, чистый и красивый код. При соблюдении правил именования вы всегда будете знать:

  • Для чего используется класс;
  • Где класс может быть использован;
  • С какими другими классами связан этот класс.
Читать дальше →

Как заставить background-size работать в старых IE

Время на прочтение4 мин
Количество просмотров30K
Всем нам, иногда, хочется сделать красивый фоновый рисунок, в той или иной области сайта.
Еще чаще, в этом случае, нам хочется, чтобы фон не искажался при изменении размеров окна браузера.
Иногда это можно сделать с помощью img, у которого одно из измерений (ширина или высота) заданы в %, иногда нужно более гибкое решение (хотя бы потому, что фон это фон, а на картинке, без специальных приемов, содержимое не разместить).
Читать дальше →

Подарок всем front-end разработчикам. grunt(Jade+Stylus+Watch)

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


Здравствуйте Уважаемые хабра-пользователи!

Во-первых, всех с уже наступившем Новым Годом. Желаю Вам добра и развития в Вашей области деятельности!

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

Решение проблемы border-radius + overflow:hidden с помощью canvas

Время на прочтение2 мин
Количество просмотров14K
Передо мной стояла следующая задача:

image

Есть блок с фоном (необязательно однородным), в нем какое-то количество круглых элементов с белым фоном, внутри которых размещены закругленные картинки любого размера. Если размер картинки меньше размера блока — она центрируется (как по вертикали, так и по горизонтали), если же размер картинки больше размера блока — больший параметр картинки занимает 100% параметра блока, а второй параметр сохраняет пропорциональное отношение, как и в оригинальной картинке.
Читать дальше →

Оптимизация knockoutjs при динамическом добавлении и удалении темплейтов

Время на прочтение5 мин
Количество просмотров5.4K
Сразу предупреждаю, что статья рассчитана только для тех кто использует либо собирается использовать knockoutjs. Предполагается, что читатель уже знает что это такое и для чего он нужен.

В одном своем проекте я решил использовать knockout.js. Все было хорошо и даже замечательно, пока данных было мало и вызовы computed методов были не ресурсоемки. Но потом данных становилось все больше и появились вычисления, которые занимали заметное для глаза время. Пытаясь решить эту проблему, я разделил страницу на вкладки. Переходя на отдельную вкладку я менял темплейт и таким образом логично ожидал что уменьшится число вычислений computed значений при изменении какого-либо observable значения. Но не тут-то было. Оказалось, что особенность фреймворка такова, что перерасчет значений происходит даже тогда, когда темплейт полностью удаляется из дом модели.

Хочу посмотреть пример и решение проблемы

Canvas с аппаратным ускорением в Google Chrome

Время на прочтение1 мин
Количество просмотров7.1K
28 марта версия Google Chrome 18 появилась в стабильном канале и уже установлена на компьютерах большинства пользователей Chrome. Среди разных улучшений в новой версии следует особо отметить рендеринг с аппаратным ускорением Canvas2D под Windows и Mac OS X. Благодаря GPU-ускорению Canvas2D будет быстрее работать в браузере, что позволит повысить производительность и качество работы HTML5-игр и других веб-приложений.

Кроме Canvas2D, в свежей версии Chrome заработал движок для программной растеризации SwiftShader для WebGL. Движок лицензирован у компании TransGaming и обеспечивает работу WebGL на старых компьютерах, не поддерживающих аппаратное ускорение WebGL.
Читать дальше →

HTML5 Camp

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

Спешу поделиться хорошей новостью. Очень рад, что и украинский веб наконец-то выходит в свет, при чем довольно активно и с новыми темами. 28 марта 2011 г. в Киеве пройдет мероприятие HTML5 Camp.

С поддержкой HTML5, ECMAScript 5 и других веб-стандартов в браузерах, разработчики получают хорошую платформу для нового класса веб-приложений, которые являются более мощными и интерактивными.
HTML5 Camp проводится для того, чтобы задать новые вопросы и помочь веб-разработчикам, дизайнерам и usability специалистам вывести пользовательский опыт на новый уровень. Мы приглашаем лучших профессионалов отрасли, чтобы сделать украинский интернет лучше.


Зарегистрироваться на кемп можно здесь.

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

Как сделать сайт бесконечно ленивым. Часть 3: Вендоры и кэш

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров920

Ранее мы поговорили о том, как сделать дерево зависимостей нашего проекта максимально чистым и почему это важно для ленивой загрузки. А в этой статье мы расскажем о следующем:
- Как мы должны загружать вендор файлы с точки зрения правильной организации ленивой загрузки.
- Что общего между стратегиями оптимизации "ленивой загрузки" и "кэширования", и как использование одной из них влияет на другую.
- Что такое кэшируемость и как сделать наше приложение максимально кэшируемым.
- А также как правильно настраивать группы кэша в Webpack и не испортить кэшируемость.

Читать далее

Как сделать сайт бесконечно ленивым. Часть 2: Графы зависимостей

Уровень сложностиСложный
Время на прочтение17 мин
Количество просмотров1.7K

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

Читать далее

Неиспользуемый JavasScript код. Поиск и удаление

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров2.8K

Как найти и удалить неиспользуемый JavaScript код даже на крупном сайте. Объёмный, но простой в использовании способ.

Читать далее

Что такое инкрементальная гидратация в Angular

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров2.3K

Как инкрементальная гидратация в Angular помогает сделать приложения действительно быстрыми

Если вы когда-либо запускали SSR в Angular, вы наверняка сталкивались с этим парадоксом: страница вроде бы загружается молниеносно, но ощущается медленной. Контент есть, кнопки на месте — а кликаешь по ним, и в ответ тишина. Почему? Потому что браузер всё ещё «оживляет» интерфейс — запускает JavaScript, подключает обработчики, восстанавливает состояние. Это и есть гидратация, и в классическом исполнении она не так уж и быстра.

Читать далее

Создание вращающейся ручки на основе Input Range

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

Рад приветствовать тебя,%username%. В этой статье я поделюсь тем, как создать вращающуюся ручку (в зарубежной литературе именуемой Knob). Далее по тексту я её буду называть «кноб». Перейдём к сути вопроса.

Что меня сподвигло на написание данной статьи, или как я докатился до жизни такой

Когда‑то давно, будучи ещё совсем зелёным и несмышлёным кодером, мне взбрело в голову сделать своё приложение. Моих знаний хватало на какой‑нибудь «Hello, World!», но кое‑что выдать я мог. И на тоот момент мне позарез нужно было реализовать кноб — тот самый круглый регулятор, который можно крутить и он будет менять значения. И как любой уважающий себя программист, я сразу же полез гуглить стековерфлоу и прочее непотребство, дабы найти тот самый рецепт хлеба сладкого ответ на вопрос, который так долго меня волновал. Однако перешерстив весь интернет, ничего путёвого я не нашёл. Расстроившись, я забил на эту идею. Но какие‑то угольки веры в то, что у меня получится это сделать, тлели в моей охолодевшей к этому миру душонке. И вот на днях, когда я начал работать над своим проектом (небольшая программка, если она найдёт отклик в народных массах, то и по ней напишу парочку руководств, но пока что спустимся на землю), мне опять ударила моча в голову с этими кнобами. Тем более, что все предпосылки ведут именно к этому. Они нужны в интерфейсе. Забравшись в православный яндекс и одновременно в бездуховный гугл, я опять наткнулся на мель отсутствия нужной мне информации. Были только решения с какими‑то библиотеками и интересными историями на jQuery. Плюнув на всё и засучив рукава, я вдруг осознал, что этот мир нуждается в моём компетентном и всем так очень нужном мнении (спойлер: нет). Тогда я принялся за gehirnsturm и молниеносно придумал пару решений. Первое заключалось в SVG на основе path, но оно показалось мне чересчур геморройным. Там много JS надо написать, но не надо никаких стилей зато. И вот второе решение отчасти продолжает идею первого, но с некоторыми отличиями: оно немножко проще в том плане, что начальное, конечное и текущее значение, а также шаг уже вмонтированы в него, что существенно сокращало труды мои праведные. Но, как гласит закон сохранения энергии, энергия не приходит и не уходит, она лишь изменяется. Поправьте, если не так. А это значит, что если где‑то стало проще, то где‑то стало сложнее.

Читать далее

CodeCraft Academy: Как я создаю открытую платформу для обучения программированию

Уровень сложностиСредний
Время на прочтение2 мин
Количество просмотров1.1K

Привет, Хабр! Я yukk1ro, и сегодня хочу рассказать о своем проекте, который призван сделать обучение программированию более доступным и эффективным.

Читать далее

Работа с атрибутами HTML элементов в JavaScript

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров3.7K

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

Как работать с атрибутами в JavaScript?