JavaScript *

При разработке одного сайта мне понадобился загрузчик скриптов, так как хотелось что бы загрузка вызывалась из js кода. Из готовых решений нашел requirejs и yepnope. Requirejs — модульный, что к моим требованиям не подходило. Yepnope — асинхронный, это означает, что код в каждом файле мне пришлось бы обертывать в callback функции. Ничего не оставалось, кроме как написать что-нибудь самому. И вот что у меня получилось: wakeloader — безмодульный синхронный загрузчик скриптов для JavaScript. В этой статье я расскажу про него.

Devconf::JS через неделю — не пропустите
devconf.ru/js/programm/js

1. Применение AngularJS для создания standalone виджета, реализующего игровую механику
2. Модульность JavaScript на клиенте
3. YUI 3 — JavaScript фреймворк от Yahoo! Модульная архитектура и динамическая загрузка приложения.
4. Зачем мы пишем свои драйверы для баз данных?
5. KnockoutJS на примере 2ГИС-Онлайн
6. Возможности последних WEB-стандартов на примере их использования в API Яндекс.Карт
7. Использование Chromium Embedded Framework (CEF) для кросплатформенной разработки на .NET и JavaScript
8. Мастер-класс: ExtJs 4: быстрый старт

Продолжаем познавать доступные инструменты в Chrome Dev Tools. Workspace и Сниппеты были вчера, сегодня на очереди поддержка Sass.

Workspace и Сниппеты — 2 инструмента в Chrome Dev Tools, о существовании которых не все знают. Эти инструменты упрощают веб-разработку, поэтому я решил сегодня о них рассказать.

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

В этой краткой статье мы проведем сравнение наиболее популярных алгоритмов минимизации CSS- и JS-кода на примере адаптеров-минимизаторов из Bundle Transformer. В качестве исходных файлов будут использоваться файлы bootstrap.css и bootstrap.js из Twitter Bootstrap версии 2.3.2. Измерять размеры файлов мы будем с помощью YSlow.

По мотивам этой трансляции.

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

Решил я однажды реализовать гибкий способ стилизации подчеркивания ссылок — чтобы просто делать полупрозрачные подчеркивания, регулировать паттерн в dashed/dotted-border, делать волнистые подчеркивания и вообще иметь настройки CSS3 text-decoration, которые еще ни один браузер не умеет.



В результате получился генератор PNG в data-URI на LESS.

Демо.

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

Полгода назад решил написать online-приложение «Карта звёздного неба». Думаю, многие из нас когда-либо видели эту самую карту звёздного неба, и вероятно, она привлекала к себе внимание.
Я подумал, что интересно будет осуществить нечто подобное на JS. Было решено отчасти использовать готовую библиотеку LibCanvas из-за её продуманного синтаксиса, что было важно при написании объёмных приложений.

Это 3 часть серии «Понимание ненавязчивой валидации в ASP.Net MVC».

1. Работа плагина jQuery validate изнутри
2. Понимание Html-кода, сгенерированного ненавязчивой валидацией в ASP.Net MVC
3. Внутренняя работа плагина unobtrusive jQuery validate в ASP.Net MVC.

О чем мы поговорим в этой статье:

• Метод «parse»
  
  • секция «parceElement»
    
    • объяснение параметра «skipAttach»
    • объяснение функции «parceElement»
    
    
  • секция «validateInfo»
    
    • объяснение функции «validateInfo»
    • объяснение объекта «return»
    
    
  
  
• Адаптеры

Метод «parse»

Мы объясним цикл ненавязчивой валидации, который происходит, когда документ загружается, и поймем роль каждого компонента.
Если мы посмотрим в конец jquery.validate.unobtrusive.js мы найдем

$(function () {
  $jQval.unobtrusive.parse(document);
});

Итак, мы вызываем метод «parse()» и передаем ему «document»
Что представляет собой метод «parse()»?

Это 2 часть серии «Понимание ненавязчивой валидации в ASP.Net MVC»

1. Работа плагина jQuery validate изнутри
2. Понимание Html-кода, сгенерированного ненавязчивой валидацией в ASP.Net MVC
3. Внутренняя работа плагина unobtrusive jQuery validate в ASP.Net MVC.

О чем мы поговорим в этой статье:

• Идея ненавязчивого JavaScript
• Разница между нормальной и ненавязчивой валидацией
• Понимание ненавязчивой валидации:
  
  • Элементы «input», правила их валидации и как они работают
  • Сообщения валидации и как они работают в ненавязчивой валидации.
  
  

Основная идея ненавязчивого JavaScript

Microsoft представил первый модуль валидации в первой верисии MVC. Модуль совершенствовался с каждой версией, и превратился в ненавязчивую валидацию в ASP.Net MVC 3.
Если коротко, даже в современном JavaScript, который мы пишем в основном в отдельном js файле, мы нуждаемся иногда в данных, связанных с Html, и поэтому записываем метаданные объектов JavaScript внутри страницы Html. Мы вызываем функцию из файла js, которой передаем метаданные объекта на странице.

Одна из целей ненавязчивого JavaScript отделить JavaScript от Html разметки.
Почитать больше об этом можно тут ( автор отсылает нас к статье о ненавязчивом JavaScript в англоязычной Википедии, прим. переводчика)

Разница между нормальной и ненавязчивой валидацией.

Ниже представлен код модели и Html разметки, сгенерированной используя валидацию MVC 2 и ненавязчивую валидацию MVC 3.

Всем привет!
На данный момент очень трендово использовать node.js. Однако не всем он нравится. В данном обзоре, я бы хотел рассказать немного о конкуренте, который был написан под влиянием node.js
Vert.x это асинхронный, event-driven фреймворк, цели которого пересекаются с популярным node.js. Высокая производительность, простая асинхронность и конфигурирование — это все по vert.x.
Первая версия фрейворка, была выпущена в 2012 году, в то время как node.js был выпущен в 2009. Однако, уже поддерживается VMware и может запускаться на CloudFoundry.
Основные характеристики продукта под катом:

С ростом популярности node.js он становится всё более привлекательным для разработки приложений. По крайней мере я в последнее время очень часто использую эту технологию для быстрой разработки оных. И на данный момент, технологически нет никаких препятствий для разработки кроссплатформенных приложений на одном языке. И не только классических Web-приложений (клиент-сервер) но и десктопных.

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

tl;dr Eсть новое API для асинхронного try\catch. Из статьи можно скопипастить пример и поиграться.

Интерес к Javascript MV* фреймворкам вызвал их подъем. Meteor, Ember, Angular, and Backbone, все они действительно популярны на Github. Измерить популярность довольно сложно, но хорошим показателем может быть количество Github-фоловеров. Используя данные из Github-архива, можно продемострировать это визуально (с помощью запроса на BigQuery и некоторых других скриптов).

Бывает что есть сайт, но пользоваться им с мобильного телефона не очень удобно и было бы замечательно иметь отдельное приложение для него. Любители веб разработки легко смогут это сделать использую phoneGap. Под катом речь пойдет про сервис отслеживания почтовых отправлений, которым я часто пользуюсь и написанный для него демонстрационный клиент с базовым функционалом: авторизация, получение списка треков и описания к ним и возможность добавить новый трек. Я не связывался с разработчиком по этому поводу и очень надеюсь что он на меня не обидится за наглость, за копание в JavaScript коде и за то что в приложении не будет показана реклама. Так же прошу простить за костыльность и велосипедность кода, воспринимайте его как пример.

На момент написания этой статьи в JavaScript еще не существовало официальной модульной системы и все эмулировали модули как могли.

Модули или подобные структуры это неотъемлемая часть любого взрослого языка программирования. Просто иначе никак. Модули позволяют ограничить область видимости, позволяют реиспользовать части приложения, делают приложение более структурированным, отделяют ресурсы от шума и вообще делают код нагляднее.

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

Дело в том, что раньше не думали, что на JavaScript можно делать огромные проекты, а не просто «пропатчить DOM», поэтому о модулях не думали. Да и вообще не думали о будущем. И тут Внезапно будущее нагрянуло! Все вроде-бы уже есть, а модули в JavaScript, мягко говоря, запаздывают. Поэтому разработчикам приходится крутиться и выдумывать какие-то эмуляторы модульности.

Думаю многие из вас читали прекрасную статью Addy Osmani Writing Modular JavaScript With AMD, CommonJS & ES Harmony, которая стала одной из глав его книги Learning JavaScript Design Patterns в этой статье рассказывается про «современные» JavaScript модули или же читали достаточно старую статью JavaScript Module Pattern: In-Depth 2010 года про «старые» модули.

Я не буду переводить эти статьи и не буду делать из них солянку. В своей статья я хочу рассказать о моем модульном пути. О том как я проделал путь от «старых» модулей к «новым» и что использую сейчас и почему.

Вступление

За время существования Дневник.ру (а это более 4-х лет) скопился огромный объем JavaScript кода: часть находилась в отдельном проекте в виде подключаемых файлов, часть определялась прямо на разметке контролов, а часть собиралась прямо в code-behind при помощи StringBuilder. К этому прибавлялись:

• растущее количество HTTP запросов для получения статичного контента – так, например, на всех страницах только в теге <head> загружалось 11 JavaScript файлов;
• глобальные переменные, которые иногда перекрывали друг друга;

Решив, что с этим пора что-то делать, мы поставили себе первоочередную задачу: вынести все подключаемые по отдельности файлы из тега <head> в один минифицированный пакет. При этом код делился на сторонний и «наш», который планировалось проверять каким-то синтаксическим анализатором.

В этой статье мы расскажем вам о том, как решили эту задачу.

Итак, рассмотрим что же не так в методах fadeIn и fadeOut, которые, как утверждает документация, являются аналогами метода fadeTo, но имеют некоторые свои особенности. На первый взгляд ничего, всё написано в документации. Однако, это не всегда верно, и не все особенности можно найти в документации.

Привет, хабраюзер. Недавно я написал статейку о своем видение интерфейса операционной системы мобильного телефона, но она мало кого заинтересовала и я решил попробовать написать приложение, которое бы частично воплотила идею в реальность, а так как кроме веб языков я мало что знаю, то решил писать приложения на html5+js+css с помощью PhoneGap. И начал с авторизации и получения токенов или кук с различных источников. За день неспешного кодинга получилось сделать плагины авторизации для Facebook, Вконтакте и Хабра (большая часть времени ушла на гугление и чтение документации к API).