Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

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

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №153 (22 — 29 марта 2015)

Время на прочтение4 мин
Охват и читатели35K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости. Сегодня в слегка сокращенном варианте.


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

Разработка векторного редактора на JavaScript (часть вторая, с исходниками)

Время на прочтение2 мин
Охват и читатели7.1K


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

Плагин написан на JavaScript + jQuery, работа с изображением происходит в CANVAS элементе.

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

Dart 1.9. Релиз, который вы ждали

Время на прочтение1 мин
Охват и читатели13K
Новый релиз по большей части посвящен упрощению асинхронного программирования. В современных приложениями оно везде — это взаимодействие с пользователем, с сетью, файловый I/O и т.д. Новый релиз Dart существенно упростил работу с такими сценариями, введя async/await.
Читать дальше →

Еще одна статья про индексацию ajax-сайтов поисковиками

Время на прочтение4 мин
Охват и читатели43K
image

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

Dart для всего веба

Время на прочтение3 мин
Охват и читатели28K


От переводчика: 2 дня назад создатели языка Dart представили обновлённую стратегию развития языка в отношении веба, которая породила противоречивые дискуссии на популярных ресурсах (reddit, google plus). Вот текст этого анонса.

Мы сотрудничаем со множеством команд внутри и вне Google, которые ежедневно используют Dart для создания критически важных бизнес-приложений. Их отзывы совпадают: им нравится работать с Dart, его библиотеками и инструментами, а также они компилируют его в JS во время развёртывания веб приложений. Однако клиенты хотят лучшей интеграции с JS, а также более простой способ отладки и оптимизации приложений во всех современных браузерах. Мы выслушали все пожелания и сегодня представляем более сфокусированную стратегию Dart для веба.
Читать дальше →

TARS, сделай уровень frontend-рутины 0%

Время на прочтение9 мин
Охват и читатели55K
image

Frontend с каждым днём становится сложнее. Задачи — объёмнее, пользовательский интерфейс — насыщеннее, HTML, CSS и Javascript — огромнее, а сон фронтендера — короче и беспокойнее. Необходимо грамотно структурировать код, выполнять множество рутинных задач (компиляция css- и js-препроцессоров, сборка спрайтов, подготовка и оптимизация изображений, минификация файлов и др). Если вы работаете в команде — это автоматически увеличивает сложность разработки. Чтобы решить эти проблемы, я создал TARS — сборщик html-вёрстки, основанный на gulpjs.
Уменьшить рутину

Webix 2.3. Весеннее обновление

Время на прочтение3 мин
Охват и читатели15K
Не так давно в блоге разработчиков этой JavaScript библиотеки появился пост о релизе новой версии за номером 2.3. Обновления это хорошо, спору нет. Но, глядя в окно на позднемартовскую улицу, становится не вполне понятно, что же выбрать: разбираться с новыми доступными возможностями или же вместо этого неторопливо прогуливаться под неокрепшим еще весенним солнцем, отмечая подспудно скорое уже пришествие долгожданного лета и вдыхая жадно всем нутром своим разлитый повсюду запах весны и оживления? Вопрос непростой. Нужно разбираться.



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

Три состояния пользователя (web-разработка)

Время на прочтение3 мин
Охват и читатели18K
Снижаем количество вычислений и продлеваем жизнь мобильного устройства. Допустим, у пользователя открыта страница сайта на которой воспроизводится видео, проигрывается музыка, запущено приложение с 3d-графикой, но в данный момент он не смотрит на нее пользуется другим приложением, просматривает другую вкладку в браузере, или отвлекся на телефонный разговор и т.д., долгом разработчика является улучшить UX и/или продлить жизнь мобильного устройства пользователя.
Читать дальше →

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

Время на прочтение5 мин
Охват и читатели17K
В магазине расширений chrome наверняка уже есть загрузчики песен с вконтакте, но мы попробуем написать свой.
Наше расширение будет добавлять ссылку в каждую из песен раздела Мои Аудиозаписи, которая будет скачивать песню.

Выглядеть должно примерно так:
Изначально: Попробуем сделать так:

Давайте начнем.
Вообще, писать расширения не так уж и сложно. Расширение — это всего лишь это файл-описание + html/js/css контент. Наше будет состоять из трех файлов — файла описания (manifest.json), внедряемого js скрипта (vk_inject.js), и внедряемого файла стилей vk_styles.css).
Читать дальше →

Хочу таймер и счётчик загруженных строк на Web-форме

Время на прочтение4 мин
Охват и читатели9.8K
… отчет формировался долго. Песочные часы и синяя полоска клонили в сон. Вначале он хотел обезьянку, которая лезет по лестнице, потом градусник, но в итоге остался таймер и счетчик. Глупая улыбка и добрый, сочувствующий, взгляд делают чудеса.

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

API для интернационализации JavaScript: реализация в Firefox

Время на прочтение11 мин
Охват и читатели13K

Что такое интернационализация?


Интернационализация (internationalization, а для краткости — i18n, то бишь i, ещё 18 букв и n; по-русски это получится и17я) – такой способ создания приложений, при котором их можно легко адаптировать для разных аудиторий, говорящих на разных языках. Очень легко ошибиться, предполагая, что все ваши пользователи происходят из одной местности и пользуются одним языком – особенно, если вы даже не задумываетесь о том, что предполагаете именно это.

function formatDate(d)
{
  // Все же пишут дату, как месяц/день/год. Правда ведь?
  var month = d.getMonth() + 1;
  var date = d.getDate();
  var year = d.getFullYear();
  return month + "/" + date + "/" + year;
}
 
function formatMoney(amount)
{
  // Все деньги – это доллары, с двумя знаками после запятой. Ведь так?
  return "$" + amount.toFixed(2);
}
 
function sortNames(names)
{
  function sortAlphabetically(a, b)
  {
    var left = a.toLowerCase(), right = b.toLowerCase();
    if (left > right)
      return 1;
    if (left === right)
      return 0;
    return -1;
  }
 
  // Имена всегда сортируются по алфавиту, не так ли?
  names.sort(sortAlphabetically);
}

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

Динамическое обновление веб-страницы

Время на прочтение5 мин
Охват и читатели139K
image

Введение


Никого уже не удивишь концепцией динамического HTML, почти все сайты давно в той или иной мере используют javascript для того, чтобы сделать страницы интерактивными. А с появлением технологии AJAX стало возможным асинхронно генерировать запросы к серверу, чтобы изменять старые данные на сервере или получать новые. Но как именно обновлять структуру страницы? Кто должен генерировать новый html — сервер или javascript? А может, все вместе?

Посмотрим, как можно ответить на эти вопросы.
Читать дальше →

Pattern-matching (еще один) в coffeescript

Время на прочтение8 мин
Охват и читатели7.3K

Введение


Как-то раз я сидел и грустно смотрел на написанный в рамках изучения эрланговский код. Очень хотелось написать на нем что-нибудь более полезное, чем крестики-нолики, но как назло никаких подходящих задач в голову не приходило. Зато есть JavaScript, в котором есть и функции первого порядка, и каррирование, и map/filter/fold, и, главное, задачу придумать куда проще. А вот pattern matching-а своего нету. Беглый поиск выдал мне несколько библиотек, но предлагаемый ими синтаксис показался мне тяжеловесным. Можно ли сделать лаконичнее, ближе к родному эрланговскому синтаксису?

Спойлер: можно, если взять coffeescript, сделать так:

fn = Match -> [
  When {command: “draw”, figure: @figure = {type: “circle”, radius: @radius}}, -> 
    console.log(@figure, @radius)
  When {command: “draw”, figure: @figure = {type: “polygon”, points: [@first, @second | @rest]}}, -> 
    console.log(@figure, @first, @second, @rest);
]
fn {command: “draw”, figure: {type: “circle”, radius: 5, color: “red”}}
#output: {type: “circle”, radius: 5, color: “red”} 5

Кому интересно, как это получилось — добро пожаловать под кат.
Читать дальше →

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

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №152 (16 — 22 марта 2015)

Время на прочтение7 мин
Охват и читатели39K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости


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

Модульный файловый менеджер Cloud Commander 2.0

Время на прочтение8 мин
Охват и читатели21K
В прошлой статье было рассказано о том, что представляет собой Cloud Commander, об основных причинах появления, недостатках, достоинствах, процессе разработки, а так же философии файлового менеджера. Сегодня мы поговорим о том, что изменилось с того времени, и как эти изменения влияют на дальнейшее развитие приложения. В статье будет рассмотрено множество модулей node.js, о некоторых, возможно, читатель услышит впервые.
Читать дальше →

Поддержка DOM L3 XPath в Project Spartan

Время на прочтение5 мин
Охват и читатели8.2K
Примечание от переводчика: я серверный Java-программист, но при этом так исторически сложилось, что работаю исключительно под Windows. В команде все сидят в основном на Mac или Linux, но кто-то же должен вживую тестировать веб-интерфейсы проектов под настоящим IE, кому как не мне? Так что я уже довольно много лет использую его и по рабочей необходимости, и — в силу лени — в качестве основного браузера. По-моему, с каждой новой версией, начиная с девятой, он становится всё более и более достойным, а Project Spartan и вовсе обещает быть отличным. По крайней мере, в технологическом плане — на равных с другими. Предлагаю вашему вниманию перевод статьи из блога разработчиков, дающей некоторые основания на это надеяться.
image

Обеспечивая совместимость с DOM L3 XPath


Поставив перед собой задачу обеспечить в Windows 10 по-настоящему совместимую и современную веб-платформу, мы постоянно работаем над улучшением поддержки стандартов, в частности, в отношении DOM L3 XPath. Сегодня нам хотелось бы рассказать, как мы этого добились в Project Spartan.
Читать дальше →

Создание семантических сайтов с помощью веб-компонентов и JSON-LD

Время на прочтение4 мин
Охват и читатели8K
С ростом популярности веб-компонентов и связанных библиотек вроде Polymer, польовательские элементы стали привлекательным способом создания UI. Изначальная инкапсуляция пользовательских элементов делает их особенно полезными в создании независимых виджетов.

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

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

Было бы здорово избежать повтора и быть уверенными в согласованности данных повторно используя те же сниппеты для разных виджетов, а так же информируя поисковые системы и других потребителей о содержимом на странице. Мы можем достичь этого используя стандарт schema.org и JSON-LD формат для наших данных.
Читать дальше →

Районы… Кварталы…

Время на прочтение3 мин
Охват и читатели38K
Совсем недавно на хабре была статья от AirBnb — «Создавая карту мира». Хорошая и красивая статья про административное деление мира. Один минус — у статьи один комментарий, и то мой.
Пользуясь случаем проведу опрос — хотели ли бы вы такую карту административных делений?
А то она у меня есть:



Вы наверное замечали, что Google.Карты умеют подсвечивать контура городов. С недавнего времени такое есть и на Яндекс.Картах. Мало кто знает, что геометрия есть и на eSosedi.

А вот когда такая возможность появится на вашем сайте — теперь зависит только от тебя %username%.

Для достижения эффекта достаточно зайти на data.esosedi.org или GitHub, ознакомиться с документацией библиотеки osmeRegions и начать использовать.

P.S.: 3 признака того, что год минувший все сделал красиво: 1. Районы 2. Кварталы. 3. Детализация до «Жилые массивы» доступна для некоторых городов.
Читать дальше →

Angular 2.0.0-alpha для тех, кто не в силах ждать

Время на прочтение9 мин
Охват и читатели54K

Совсем недавно (5-6 марта) прошла конференция ng-conf, и много докладов на ней было посвящено грядущему релизу Angular 2, на нескольких из них даже показали альфа версию. Конечно же после прослушивания очень захотелось опробовать его лично. Если вам тоже не терпится — прошу под кат.

В этой статье мы разберёмся, где взять билд альфа версии Angular 2.0, создадим на нём небольшое приложение — To-do list, и запустим его в браузере без полной поддержки ECMAScript 6.
Читать дальше →

Как отобразить количество оповещений в названии вкладки браузера

Время на прочтение3 мин
Охват и читатели33K


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

Существует пара наиболее распространенных способов оповещения пользователя. С одной стороны, социальные сети Facebook, Twitter и LinkedIn указывают определенное число, которое соответствует количеству обновлений. С другой стороны, Trello отображает небольшой красный кружок поверх favicon.

Trello Facebook and Twitter notifications
Оповещения Trello, Facebook и Twitter

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

Посмотреть на GitHub
Демо (рус.)
Читать дальше →