Все потоки

JavaScript *

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

279,26

Рейтинг

СтатьиПостыНовостиАвторыКомпании

bakhirev 4 мар 2014 в 11:09

JavaScript to APK. Подводные камни разработки под Android для тех, кого задолбал PhoneGap. Построение мостов из Java в JavaScript

8 мин

62K

Блог компании i-Free GroupВеб-разработка * JavaScript *

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

Я люблю игры на JavaScript и стараюсь сделать их код пуленепробиваемыми для портирования на все платформы. Полгода назад я уже писал о сборке Android приложений и сегодня хотел бы раскрыть тему более подробно.

Сразу предупрежу, что мне пришлось отказаться от PhoneGap, т.к. опыт использования его в двух проектах меня огорчил. Он отлично справляется с «Hello World» приложениями, но при конвейерной сборке всего подряд всплывают нюансы.

Почему PhoneGap не пошел:
1. Он изначально пустой. Постоянно приходится подключать все новые и новые модули.
2. Многие модули написаны криво. Они либо берут много лишнего, либо ведут себя неожиданно. Например, из двух модулей под Android для отправки SMS, один не работал, второй — отправлял true при любых условиях.
3. Не решены элементарные вещи, вроде получения EMEI телефона. Нужно постоянно допиливать.

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

+33

Alik_Kirillovich 4 мар 2014 в 11:00

Font boosting в мобильных браузерах

7 мин

29K

Веб-разработка * JavaScript * Разработка мобильных приложений *

Я хочу рассказать о том, что такое font boosting в мобильных браузерах, к какой неожиданной проблеме он может привести при web-разработке и как с этой проблемой бороться.

Рассмотрим пример из реальной жизни:

Пример 1:

Имеется вновь созданный элемент с display: inline-block.

Измерим его ширину через свойство offsetWidth.

Поменяем его цвет.

И, вдруг, в Google Chrome for Mobile, после изменения цвета ширина элемента резко увеличивается, переставая соответствовать той, что была измерена всего двумя строчками выше!
Показать код
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv = "content-type" content = "text/html; charset=utf-8" />
    <title>Проблема с Font boosting в Google Chrome for Mobile</title>
    <script type = "text/javascript">
      window.onload = function ()
        {
        var spnSpan1 = document.getElementById ("span-1");
        
        alert ("Ширина элемента до изменения цвета: "+ spnSpan1.offsetWidth +"px"); //59px
        spnSpan1.style.color = "red";
        alert ("Ширина элемента после изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px (WTF?!)
        }
    </script>
  </head>
  <body>
    <p>
      <span id = "span-1" style = "display: inline-block;">Элемент</span> 
    </p>

    
    <p>
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    </p>
  </body>
</html>
Смотреть пример on-line.

_{(Для просмотра примеров из этой статьи воспользуйтесь Google Chrome for Mobile или обычным Google Chrome в режиме эмуляции смартфона, например Apple iPhone 5 или Samsung Galaxy Note II).}

Почему же изменение цвета элемента приводит к увеличению его размера?! Причиной этого странного поведения, как раз, и является font boosting.

Что же это такое?

+24

xamd 3 мар 2014 в 18:19

Пишем генератор для Yeoman.io

7 мин

11K

Веб-разработка * JavaScript * Node.JS *

Из песочницы

Recovery Mode

Доброго времени суток, хабрасообщество! В этой статье я хочу описать опыт создания генератора для scaffolding системы Yeoman. Прежде всего, я был немного удивлён тем, что данная система и работа с ней не были описаны на хабре, разве что одно маленькое упоминание из далекого 2012 года: Yeoman.io. Как я уже написал выше, в данной статье я буду рассматривать поэтапное создание yeoman-генератора для ваших проектов.

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

+8

egaxegax 2 мар 2014 в 19:33

Звездное Небо на Canvas. Созвездия

2 мин

19K

Canvas * JavaScript * Векторная графика * Веб-разработка *

Продолжение темы, начатой в предыдущей статье. Идеей к ее развитию послужило прочтение статьи на Хабре «LibCanvas: На пути к звёздам», где описывается реализация планетария на Canvas с выводом созвездий и планет в геодезической системе координат (с координатами точки наблюдения, азимутом и высотой над горизонтом). В посте автор дает ссылку на базу данных звезд и созвездий, которой я любезно воспользовался. Файл содержит координаты прямого восхождения (Right Ascension, в часах) и склонения (Declination, в градусах) звезд, точек созвездий и их названий. Я перевел их в радианы и сохранил в файл constellations.js для своего «звездного» проекта Starry Sky.

Starry Sky

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

+21

ilusha_sergeevich 1 мар 2014 в 20:33

Несколько интересностей и полезностей для веб-разработчика #12

2 мин

40K

Веб-разработка * CSS * JavaScript *

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

BrowserSync

Я считаю это лучшим Live Reload инструментом. BrowserSync — это: конечно же перезагрузка страницы после изменения исходных файлов в том числе и серверных (PHP, ASP, Rails и др); синхронизация с десктопами, планшетами и смартфонами; синхронизирует между браузерами скроллинг, данные в формах и множество других действий; существует как Grunt и Gulp плагин; доступен на Windows, Linux, MacOS.

npm install -g browser-sync


// Using a an IP based host
browser-sync --proxy "192.167.3.2:8001" --files "app/css/*.css"

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

+39

vkopachinsky 1 мар 2014 в 12:45

AngularJS vs IML

7 мин

8.6K

JavaScript * .NET * C# *

Из песочницы

disclaimer: сравнение не подразумевает поднятие “холивара”, а делает обзор задач, решаемых одним инструментом в сравнении с другим. Я не являюсь знатоком всех тонкостей angularJs, но прочитав 10 статьей обзора этого инструмента, привожу альтернативный пример решения тех же самых задач на IML.

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

-14

furyk 1 мар 2014 в 11:07

Тестовое задание моей мечты

3 мин

61K

JavaScript * Веб-разработка *

Около полугода назад я стал замечать, что доля javascript’a в моих личных проектах заметно выросла. Выполнять роль заурядного пхпэшника на моём нынешнем рабочем месте стало не в радость. В то же время, создание одностраничных приложений и изучение премудростей фронтэнда доставляло куда больше удовольствия.

А ведь работа должна приносить удовольствие, правда? В итоге появилось стойкое желание сменить поле деятельности и переквалифицироваться из стандартного “PHP Developer” в модного “Javascript/Frontend Ninja”.

Нашел подходящую контору, отправил CV, договорился о дате тестового задания. На тот момент я чувствовал себя достаточно подготовленным, всё-таки за плечами неплохое знание Backbone, парочка одностраничных приложений, эксперименты с Canvas, Google Maps, Node.js, Websockets и прочими. В общем было что показать.

Но тестовое задание приближалось и надо было готовиться. Первым делом я загуглил “javascript interview questions” и тут же прифигел. В голове завертелась мысль: “Почему все эти задания настолько оторваны от реального мира?”

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

+49

rboots 27 фев 2014 в 12:51

Вы до сих пор не любите JavaScript?

6 мин

96K

Веб-разработка * JavaScript *

Из песочницы

С началом эпохи HTML5, рынку понадобилось большое количество JavaScript программистов. Многие специалисты по другим языкам, начали массово переориентироваться на JavaScript. Я много раз видел, как программисты с большим опытом ругали этот, один из самых гибких и могучих, язык, не понимая его принципов. В этой статье я постараюсь рассказать суть и философию JavaScript. Здесь будет всего 4 строчки кода и много-много того, что не напишут в учебниках. Обещаю, что вы полюбите этот язык, или по крайней мере, станете эффективнее в нём. Итак, поехали!

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

+33

durovchpoknet 27 фев 2014 в 09:53

Angular boilerplate. Простота — тренд молодежи

4 мин

23K

Веб-разработка * JavaScript * Angular *

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

Мотивация

Свести рутину к минимуму, создать интуитивно понятную архитектуру и собрать вместе то, что называется best practices.

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

+20

axeax 27 фев 2014 в 07:58

Создание браузерной игрульки в соц сети от и до

26 мин

87K

Ненормальное программирование * JavaScript * Разработка игр *

Всем привет! Хочу рассказать свою историю создания браузерной онлайн игры для соц. сетей. В статье постараюсь рассмотреть всё от начала до конца, от идеи до 10 перезапуска. Статья вышла не маленькая, но подробная. Возможно, некоторые фичи, примененные в игре покажутся кому-то очевидными. Итак, кому интересно узнать о том ужасе, через который я прошел, прошу под кат! (интересно может быть самым начинающим игроделам и холиварщикам)

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

+58

confa 26 фев 2014 в 08:08

Продвинутая работа с подписками в еvent-driven архитектуре в JavaScript

3 мин

9.3K

Веб-разработка * JavaScript *

Из песочницы

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

Справиться со всеми этими проблемами, призван помочь Capo – модуль, который служит для управления событиями в event-driven js архитектуре и решает один из самых больших недостатков шаблона Mediator – неопределенность триггеров и подписчиков.

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

+16

AKhalilov 25 фев 2014 в 11:33

Knockout-popover: простой байндинг Twitter Bootstrap Popover для KnockoutJS

1 мин

6.1K

Предлагаю вашему вниманию простой custom binding для KnockoutJS для реализации popover'ов из Twitter Bootstrap.

Демо

Единичный случай использования

<span data-bind="popover: true" class="ko-popover"
    data-popover-placement="bottom"
    data-popover-title="knockout-popover"
    data-popover-content="Awesome knockout-popover plugin">
        knockout-popover (hover over me :)
</span>

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

+5

andrevinsky 25 фев 2014 в 05:54

Пользовательские события в действии

5 мин

21K

JavaScript * jQuery *

В этой заметке расскажу, как я использую пользовательские события jQuery (custom events) в своей работе.

Имитиация событий

Дана простая задача, реализацию которой наблюдают все хабровчане: когда пользователь достаточно прокрутил страницу вниз, анимированно отображается блок-врезка «Лучшее за 24 часа», и скрывается, когда пользователь прокручивает страницу вверх. Эта задача решается подвешиванием обработчика на события scroll и resize окна (window), который занят двумя вещами: вычисляет, нужно или нет отображать/скрывать блок-врезку, и в зависимости от результата производит анимацию отображения или осуществляет скрытие.

Если эта задача стояла перед нами, как бы мы приступили к ее реализации? Ну, например, написали такой кусочек кода:

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

+20

dfilatov 24 фев 2014 в 10:36

Модульная система YM

4 мин

11K

JavaScript * Веб-разработка *

Еще одна? Зачем? Есть же CommonJS и AMD? Страждующие могут пройти под кат.

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

+26

termi 24 фев 2014 в 07:08

Стрелочные функции (Arrow functions) в ECMAScript 6

7 мин

91K

Блог компании VKВеб-разработка * JavaScript *

Arrow functions madness

Одной из самых интересных частей нового стандарта ECMAScript 6 являются стрелочные функции. Стрелочные функции, как и понятно из названия определяются новым синтаксисом, который использует стрелку =>. Однако, помимо отличного синтаксиса, стрелочные функции отличаются от традиционных функций и в других моментах:

Лексическое связывание. Значения специальных переменных this, super и arguments определяются не тем, как стрелочные функции были вызваны, а тем, как они были созданы.
Неизменяемые this, super и arguments. Значения этих переменных внутри стрелочных функций остаются неизменными на протяжении всего жизненного цикла функции.
Стрелочные функции не могут быть использованы как конструктор и кидают ошибку при использовании с оператором new.
Недоступность «собственного» значения переменной arguments.

Было несколько причин для введения этих отличий. Первоочередная — это то, что связывание (binding) используется довольно часто в JavaScript. Очень легко потерять нужное значение this при использовании традиционных функций, что может привести к непредсказуемым последствиям. Другая причина, это то, что JS-движки смогут легко оптимизировать выполнение стрелочных функций за счет этих ограничений (в противоположность традиционным функциям, которые могут быть использованы в качестве конструктора и которые свободны для модификации специальных переменных).

Подробности

+101

zag2art 23 фев 2014 в 11:29

Вышла Derby 0.6.0-alpha3

3 мин

7.9K

Derby.js * JavaScript * Веб-разработка *

DerbyJs — реактивный фулстек javascript-фреймворк. О нем неоднократно писали на хабре — материалы по Derby. Буквально пару дней назад в репозитории Derby произошла смена основной ветки. Теперь версия 0.5 отошла на задний план, 0.6 — основная.

Не в традициях команды разработчиков заниматься пиаром — изменения произошли тихо и незаметно. А что же поменялось?

Подробности

+15

viklequick 21 фев 2014 в 17:39

А таки давайте напишем инструмент для написания писем Дяди Федора!

6 мин

8.7K

Ненормальное программирование * JavaScript * Программирование *

Читаю я вчерашний пост простоквашино на Хабре или письмо Дяди Федора. Мысль интересная, но.

Комментарии пугают.

Поясню почему.

Комментарии там условно можно разделить на два вида

~~«как много помещается ангелов на конце иглы»~~ «о сортировке дат»,
~~«как забивать гвозди электронным микроскопом»~~ «мы напишем что-то такое большое в энтерпрайзненьком стиле».

Душа поэта не выдержала, нашел полчаса, и нарисовал userscript.

Скрипт прост до ужаса — перебирает все комментарии в поисках специального маркера. Если маркер найден — показывает все комментарии с маркером во всплывающем окошке.

Всем желающим поучаствовать в улучшении — добро пожаловать, так сказать откатаем технологию. Если ваш комментарий надо добавить в пост — пишите внутри комментария вот так [also]. А я как инициатор этого безобразия — по мере сил буду ваши пожелания в пост переносить. И соответственно — улучшать скрипт тоже.

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

+10

crusat 21 фев 2014 в 15:46

Разработка статического сайта на Meteor

3 мин

15K

Meteor.JS * JavaScript * Веб-разработка *

Перевод

Всем привет! Встретил статью о том, как на сайте meteor.com обеспечена работа для высоких нагрузок. Звучит это довольно интересно. (пер.)

Во-первых, зайдите на meteor.com и посмотрите, как это работает.

Мы все знаем, что meteor.com сделан на Meteor. Вы можете заметить, что загружается он очень быстро. Также, у него нет процесса загрузки — после того, как HTML построен, страница сразу отображается на экране.

Но как это возможно? Обычно, это занимает какое-то время — подключение к серверу, получение данных и отображение информации на экране. Может, Meteor использует какую-то магию с Galaxy?

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

+8

wentout 21 фев 2014 в 10:30

Legacy или Inheritance: немного оффтопа про .prototype, каламбур для неофита

3 мин

4.2K

Веб-разработка * JavaScript *

Постараюсь быть неимоверно кратким.

Написано для тех, кто только начинает!

Статей про наследование в JS не счесть:

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

У меня в google по запросу "what is the difference between inheritance and legacy" первая ссылка ведёт сюда: ссылка.

Само собой, что статей там не одна.

Там есть такая строчка, дописка: Also, as pointed out in some comments, «inheritance» is generally from the viewpoint of the receiver, while «legacy» is from the viewpoint of the giver: My inheritance was my father's legacy.

Краткая суть, которая не отражает всей глубины, которую я себе уяснил, в том, что:

legacy — это взгляд со стороны родителя, широкий
inheritance — это взгляд со стороны потомка, узкий

Поэтому я считаю, что в обычных ООП языках программирования типа Java, C#, С++ и т.п. используется термин inheritance — наследование.

А у нас в JavaScript используется почти то же самое, но немного шире: legacy — наследство.

А т.к. в Русском Языке разницы между этими понятиями почти нет, то отсюда и масса FuckUp'ов с пониманием зачем это нужно.

И, в том числе потому, что от Legacy code мы никуда не денемся.

UPD 2: Выжимка из статьи про legacy code >> Modern interpretations.

… source code inherited from someone else and source code inherited from an older version of the software…

UPD 3: Под катом идёт речь о том, что Inheritance неминуемо влечёт за собой Legacy. Точней наоборот, согласно терминологии носителей языка Legacy — это больше чем Inheritance.

UPD 1: В комментариях подсказывают, что может быть частично речь идёт о Гипотезе Сепира-Уорфа. Спасибо k12th. Так же спасибо lair за конструктивную критику.

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

0

vmb 20 фев 2014 в 08:37

Пометить как прочитанное: Twitter, VK, LiveJournal, Facebook…

10 мин

9.5K

I. В чём проблема.

Почтовые ящики, «Входящие» личных сообщений, RSS — всё это объединяет одно удобство: чёткое разделение прочитанных и непрочитанных сообщений. Однако в блогах и социальных сетях, по крайней мере самых распространённых, такая возможность чаще всего не предусмотрена. И по досадному совпадению именно эти ресурсы не предоставляют пользователям потоки RSS.

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

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

+7

1 2 ...

467

468 469 ...