18 марта 2014
Егор Львовский, Веб-евангелист и член Web Standards Group из Киева, проводит 12 апреля 2014 года скринкаст «Angular.js: разбор полетов».
За несколько часов вы узнаете, что такое Angular.js, при помощи чего можно расширить возможности этого фреймворка, best practices, и все это на основе многолетнего опыта профессионала. На руках у вас останется небольшое приложение, созданное на Angular.js.
Посмотреть подробный план, оплатить и записаться можно на сайте smartme.com.ua.
18 марта 2014
Качественный перевод книги Addy Osmani «Patterns For Large-Scale JavaScript Application Architecture».
В этой книге мы обсудим набор паттернов, который поможет вам в создании больших масштабируемых JavaScript-приложений.
Книга доступна совершенно бесплатно в форматах epub, mobi, fb2 и pdf.
19 апреля 2013
Релизнулась версия 2.0 самой популярной JavaScript-библиотеки.
В релизе выкинули поддержку Internet Explorer 6, 7 и 8. За счёт этого выиграли в размере на 12% и прибавили в скорости. Можно выиграть в размере ещё больше, если сделать свой билд, убив ненужные из 12-и встроенных по умолчанию модулей.
Тем, кому нужны старые IE остаются на ветке 1.x, которая их поддерживает и которую не забросили (скоро выйдет 1.10) и планируют поддерживать ещё несколько лет. API 2.0 хоть и совместим с не-deprecated 1.9, но изменений всё-таки много.
30 октября 2012
В рядах тех, кто пока не очень много работал с JavaScript, ну или каким-то образом только-только нашёл этим замечательные инструменты для статического анализа JavaScript-кода, существует некоторое замешательство по поводу того, чем же пользоваться, JSHint или JSLint.
JSHint появился как более человечный и настраиваемый форк JSLint, напсанного Douglas Crockford. Crockford-а смело можно назвать одним из лучших по части JavaScript, но, к несчастью (а может и наоборот), он славится ещё и тем, что не признаёт других стилей форматирования и оформления кода, о чём несколько раз высказывался в довольно категоричной форме. Наверное поэтому JSLint не особо настраивается и практически неприменим, если ваш код отформатирован не так, как у его автора.
Именно поэтому я использую JSHint. Кстати, оба инструмента встроены в PhpStorm и другие IDE JetBrains.
10 августа 2012
Вышла новая версия JavaScript-библиотеки jQuery.
Совместима с jQuery UI (1.8.22) и jQuery Mobile (1.1.1).
Главное изменение — переписан движок селекторов Sizzle, что дало определённый прирост производительности. Также:
$('#test').css("user-select", "none"); // В Chrome/Safari получим "-webkit-user-select" // В Firefox — "-moz-user-select" // IE10 — "-ms-user-select".
13 июля 2012
Оформил «правильные модальные окна» в плагин jQuery и выложил на github.
API получился, на мой вкус, неплохим. Можно делать, например, вот такие штуки:
$.modal().open({ onOpen: function(el, options){ $.get('http://example.com/', function(data){ el.html(data); }); } });
На данный момент найдены две нехорошести — одна со скроллом кнопками в FF, вторая — со скроллом на iPad. Со временем, конечно же, они будут исправлены.
5 июля 2012
Обычно модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal или jqModal. К сожалению, все они, в варианте по умолчанию, работают неправильно.
Если окно модальное, то пользователю нельзя позволять прокручивать страницу под ним. При этом, если содержимого в модальном окне очень много, нужно позволить это содержимое прокручивать.
По этому принципу работает просмотр фото в Facebook и Вконтакте.
Для реализации подобного функцианала частенько нагромождают тонны JavaScript, хотя можно обойтись почти чистым CSS (за исключением навешивания одного класса на контейнер).
Немного прокомментирую:
/* Данный класс навешивается на контейнер при открытии модального окна. Для нормальных браузеров это body, для стырах IE — html */ .lock { /* Скрываем скроллбары */ overflow: hidden; } .modal { /* По умолчанию не показываем содержимое модальных окон */ display: none; } .lock .modal { /* Показываем подложку (полупрозрачное затенение) при открытии модального окна */ display: block; /* Саму подложку фиксируем и растягиваем на всё пространство */ position: fixed; bottom: 0; left: 0; top: 0; right: 0; /* Если содержимое модального окна в подложку не влезает — показываем скроллбары */ overflow: auto; }
29 июня 2012
Много где написано, что REST API Facebook устарел, но, я не нашёл в официальной документации JavaScript SDK, что с этим делать в случае FQL. Описанные в примерах fql.query и fql.multiquery посылают запросы как раз на устаревший restserver.php.
Как это обычно бывает у Facebook, решение сделали по-тихому. Кому нужна документация, верно?
fql.query:
// старая версия FB.api( { method: 'fql.query', query: 'SELECT name FROM user WHERE uid=me()' }, function(response) { alert('Your name is ' + response[0].name); } ); // новая версия FB.api('/fql', { q: 'SELECT name FROM user WHERE uid=me()' }, function(response) { // формат ответа отличается alert('Your name is ' + response.data[0].name); } );
fql.multiquery:
// старая версия FB.api( { method: 'fql.multiquery', queries: { username: 'SELECT name FROM user WHERE uid = me()', userpic: 'SELECT pic_big FROM user WHERE uid = me()' } }, function(response){ console.log(response); } ); // новая версия FB.api('/fql', { q: { username: 'SELECT name FROM user WHERE uid = me()', userpic: 'SELECT pic_big FROM user WHERE uid = me()' } }, function(response){ console.log(response); } );
1 июня 2012
В очередной раз Facebook заставил попотеть. После реализации приглашалок через диалоги Facebook выяснилось, что они никак не хотят работать на мобильных девайсах, выдавая загадочную API Error Code 3, Unknown method. This method isn't supported by this display type.
Оказывается, вызывать диалоги на мобильных устройствах и планшетах через JavaScript SDK — дохлый номер. Однако, примеры с URL в описании диалогов работали, поэтому родилась вот такая штука:
// определяем, мобильный ли браузер // не забудьте iPad if(isMobileBrowser()) { var params = { // если не используете SDK, можно просто вставить ID приложения app_id: FB._apiKey, name: header, link: link, description: description, // позволяет видеть ошибки, лишним не будет show_error: 1, to: userID, redirect_uri: window.location.href, // не рисовать лишнее, ресайзить попап автоматом display: 'popup' }; // строим URL var url = 'http://www.facebook.com/dialog/send?'; var parts = []; $.each(params, function(key, val){ parts.push(key+'='+encodeURIComponent(val)); }); // открываем попап var facebookPopup = window.open(url+parts.join('&'),'facebook-popup','height=300,width=200'); // ставим на него фокус if (window.focus) { facebookPopup.focus(); }
29 мая 2012
На подобные вопросы отлично отвечает ресурс caniuse.com.
Есть данные о:
Информация предствлена в виде удобных таблиц.
