JavaScript *

Недавно Appcelerator SDK обновился до версии 5.1.0. Появилось много полезных фич.
Список изменений:

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости.

Урок по реализации круглой кнопки загрузки (далее progress button) by Colin Garven. Будем использовать, описанную by Jake Archibald, технику анимации SVG линий для того, чтобы анимировать progress button и показать пользователю состояния «success and fail».

Привет! Я хочу рассказать об очередной реализации Flux. А точнее о минимальной реализации, которую мы успешно используем в рабочих проектах. И о том, как мы пришли к этому. На самом деле многие так или иначе сами приходят к подобному решению. Описанное здесь решение является лишь вариацией ему подобных.

В Redradix мы уже около года разрабатываем веб-приложения на React и в течении этого времени у каждого из членов команды возникали идеи, которые мы постепенно выносили в свое, домашнее решение. Мы сразу же отказались от хранилищ в классическом Flux в пользу единого глобального состояния. Хранилища всего лишь выполняют роль сеттеров/геттеров в состояние приложения. Чем хорошо глобальное состояние? Одно состояние — это один конфиг всего приложения. Его без труда можно заменить другим, сохранить или передать по сети. Больше нету зависимостей между хранилищами.

Наверное, это — своего рода продолжение темы «Отличия в адаптации сайта и AJAX веб-приложения для iOS» и развитие идеи из моего комментария там.

Тема старая, но для многих до сих пор актуальная. В целом, внутри будет много частностей, поскольку целью не является придумать универсальное решение, а всего лишь надо заставить один конкретный сайт работать как Web App, не прибегая к большим модификациям. В общем, как обычно, кому интересно — под кат, остальные проходят мимо, наверное.

Привет, Хабр! В этой статье речь пойдет о том, как мы в компании Mail.Ru Group подходим к написанию кода; когда использовать готовые решения, а когда лучше писать самим; ну, а самое главное — какие шаги нужно сделать, чтобы ваша работа не оказалась безрезультатной и принесла пользу окружающим. Все эти нюансы будут рассмотрены на примере задачи создания нашей внутренней JSSDK, которая возникла из-за необходимости объединения кодовой базы двух проектов.


Иллюстрация Michael Parkes

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

Требования

Мы будем работать как уже было сказано выше с GULP, предполагается что у вас уже установлены:

• Node.js
• NPM
• Git

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

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

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

С другой стороны, мы могли просто переименовать файлы и включить их в один прекомпилированный css (без какого-либо рефакторинга). Но для улучшения кода было бы хорошо порефакторить стили. Эта работа более затратная, но в будущем себя бы окупила. И, что самое важное — это позволило бы нам работать быстрее, с большей уверенностью что мы что-то не сломаем.

Раньше я рассматривал такие изменения как большие риски. В конце концов, C в CSS это каскадирование, где порядок абсолютно важен. Реструктуризация нескольких стилей означает изменение порядка, что, естественно, приводит к большому риску что-то сломать.

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

На этот раз было решено построить визуально регрессионный набор тестов.

Создание интерактивного приложения немыслимо без обработки событий, будь-то опрос клавиатуры или работа таймера. Реализация этих важных действий зависит от платформы, языка программирования. В этой статье я хочу рассказать о некоторых особенностях использования событий для WebGL-движка Blend4Web. К сожалению, информации по этой теме совсем немного.

Wargaming сейчас разрабатывает тактическую карточную игру WoT: Generals. Веб-версия написана на JS, используются LibCanvas и AtomJS. Я принимал непосредственное участие в разработке и хочу рассказать про функционал, который мне кажется интересным и может быть полезным во всех веб-играх. А именно — о системе плагинов игры, которая вдохновлялась пакетными менеджерами в Linux и имеет следующие возможности:

— История изменений плагинов
— Автоматическое обновление плагина при обновлении версии игры
— Разработка плагинов на localhost
— Неограниченное количество веток, например, для нестабильных версий
— Зависимости (плагин А автоматически подключает плагин Б)
— Встроенная возможность делать паки (следствие предыдущего пункта)
— Легкое изменение любой части клиента игры
— Полный административный контроль авторов игры над всеми плагинами
— Поиск по базе плагинов
— При этом простая установка юзером и удобная работа для плагинописцев.

Недавно я решил отправить свой проект, над которым работал в свободное время последние несколько лет, на конкурс в одну компанию. Я сел и стал думать, нет ли каких-то нюансов, которые я не учёл, и которые могут испортить впечатление и уменьшить шансы на успех. И первое, что мне пришло в голову — проект не работает под IE ниже 9 версии. То есть совсем, там стояла блокировка. После логина появлялось окошко с красивым предупреждением, что браузер не поддерживается, и пользователя опять перебрасывало на форму входа. Довольно изящно — но неприятно. Что, если у человека стоит Windows XP, а сторонних браузеров нет? Незадача.

И вот я решил потратить столько времени, сколько будет нужно, но при этом добиться стабильной безошибочной работы системы как минимум в IE 8. Я готов был убрать часть функций, если будет необходимо — но всё должно было выглядеть аккуратно и работать без сбоев. Предвкушая долгие и тяжёлые мучения (уже был несколько раз подобный опыт), я взялся за дело. Если вам интересно узнать, с какими сложностями я столкнулся, и какие изменения пришлось внести в разные компоненты — добро пожаловать под кат.

Из закона всемирного тяготения известно, что на поверхности тел шарообразной формы ускорение свободного падения постоянно по модулю и направлено к центру шара. Для тел неправильной формы это правило, очевидно, не выполняется. В этой статье я покажу способ расчёта и визуализации ускорения свободного падения для таких тел. Расчёт будем производить на JavaScript, визуализировать — на WebGL с использованием библиотеки three.js.

В итоге получим следующее (красным цветом отмечены области с большим ускорением свободного падения, синим — с малым):

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

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



Полсотни респондентов постарались максимально охватить все актуальные темы IT-современности. Мы говорили про языки и методы программирования, делились опытом трудоустройства, тимлидинга и создания собственных компаний, немного сплетничали и вполне серьёзно рассуждали о перспективах цифрового мира. Итак, обо всём по порядку.

Карьера

Вопросы построения карьеры обсуждались на конференции, пожалуй, наиболее часто. Безусловно, этому поспособствовала ситуация в стране и мире, но и уровень гостей в не меньшей степени располагал к очевидным вопросам о том, как достигнуть таких же успехов. Иван Немытченко из Skillgrid посоветовал не гордиться лишь одним университетским дипломом, а прямо во время обучения стремиться применять навыки в реальном мире. Владимир Железняк из IT-Boost и Иван Бут (ex-Google) затронули тему прохождения собеседований в крупных компаниях и задали ключевой вопрос: «а надо ли вам это?». <a href=«geekbrains.ru/events/158?

Что самое неудобное в сборщиках проекта? Правильно! То, что нужно сборку писать самому. Изучать grunt/gulp/webpack, шаманить с плагинами, думать, как разбить конфиг на модули, когда он вырастает до нескольких сотен строчек, потом несколько месяцев радоваться, что всё работает, а когда в проекте появляется критическое изменение, опять лезть в это болото.

Мне тоже всё это порядком надоело, поэтому написал сборщик, лишенный этих недостатков. Его gulpfile.js выглядит так:

var gulp = require('gulp');
var arjs = require('arjs-builder')();

gulp.task('build', arjs.build);
gulp.task('test', arjs.test);
gulp.task('default', arjs.run);

Скопировали себе проект, и больше никогда туда не лезете, и навсегда забываете что такое сборка.
Единственное, что придется выучить, — это три команды:

gulp #компилит, поднимает локальные серверы
gulp build #билдит проект
gulp test #запускает тесты

Открываете localhost:7000 и наслаждаетесь локальной версией сайта, а в папке build
уже лежит сбилженная версия.

— А как же темплейты, их же надо в js внедрять?
— Конечно! Все внедрено как положено.
— А я стили пишу на less, sass, stylus, их же надо компилить?
— Пишите как писали, всё чудесным образом будет работать.
— А картинки в CSS инклудить?
— Так давно всё в CSS. All included как в пятизвездочном отеле.
— А разбить сбилженный файл на модули?
— Проверьте папку build. Всё по модулям? С уникальными именами, основанными на содержимом файла? Вот, а вы волновались!
— А вот еще там что-то…
— И это тоже работает.

Но как такое возможно? Это мы и рассмотрим в статье. А в конце еще расскажу, почему всё-таки RequireJS

Во фронтенд разработке за последние несколько лет наблюдается огромный скачок развития. JavaScript продолжает увеличивать отрыв от остальных языков как наиболее популярный на Github, а вакансия фронтенд разработчика с каждым годом набирает популярность. И это не удивительно, что c ростом популярности языка мы наблюдаем значительное увеличение числа многообещающих программ изучения фронтенд технологий, учебников, ускоренных курсов и прочего. Такой цикл естественен для любой бурно развивающейся отрасли, и это происходит следующим образом:

• Существует огромный спрос на фронтенд разработчиков. Компании пытаются найти компетентных людей и они платят большие деньги.
• Другие компании видят это требование, и создают образовательные ресурсы, чтобы помочь людям в старте карьеры. Они предлагают решения, которые за короткий срок обучат вас веб-разработке, что в итоге приведет к успеху.
• Такой подход является привлекательным для многих людей. Экспресс курсы и обучающие интернет-ресурсы, продаются как горячие пирожки. Эта сфера быстро стала многомиллиардной долларовой индустрией.

Конечным результатом является огромный «бассейн» слабо обученных кадров. Большинство студентов таких курсов уходят с небольшим портфолио сайта и несколькими демо на javascript. Им не хватает углубленных знаний в отрасли, которые позволили бы им решать реальные задачи, с которыми профессиональные разработчики сталкиваются каждый день.

В рамках проходящей сейчас конференции GeekWeek-2015 мы общаемся с нашими спикерами. Сегодня на связи Денис Измайлов, CEO Startup Makers, уже известный многим из вас по своим статьям DenisIzmaylov

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

К сожалению, именно веб-разработкой я занимаюсь не 15, а 13 лет. :) Летом 1998 года я открыл для себя программирование и спустя год увлекся разработкой программного обеспечения для Windows. А немного позже — даже созданием собственной операционной системы. Тогда у меня не было доступа к Интернет. Это была далекая Сибирь. И вот весной 2002 года судьба свела меня с удивительным человеком. Он открыл для меня возможности Web, Apache, PHP. Сделав несколько экспериментальных проектов, я увидел, что мои способности к исследованиям, самообучению, созиданию и красивому могут быть интересны и полезны большому количеству людей. Это захватывает и вдохновляет, когда твой рост и результаты приятны и полезны обществу.

UPDATE
Результат можно посмотреть так: Скачать приложение Allcountjs на Google Play Market или Apple App Store. Запустить дему CRM. И в мобильное приложении вставить ссылку на сгенеренную дему.
Правда это приложение универсальное и не содержит кастомной клиентской логики и интерфейсов, поэтому канбан доски в нем не будет. Но зато в нем можно запустить любое AllcountJS приложение, например что-нибудь ещё из демо галереи.

Сейчас в большинстве проектов по разработке ПО требуется одновременно иметь как веб, так и мобильную версию приложения. Обычно это довольно непросто, но с AllcountJS эта задача упрощается в разы. В предыдущей статье мы создали простую CRM, которая позволяет отслеживать статус продажи клиентам на наглядной канбан доске.
В этой статье мы создадим мобильное приложение для этой CRM. Кроме фреймворка AllcountJS будем использовать ещё и ionic framework, о котором на хабре тоже уже писали тут и тут.

Часть первая: Google Cloud Endpoints на Java: Руководство. ч. 1
Часть третья: Google Cloud Endpoints на Java: Руководство. ч. 3
Часть четвертая: Работа с базой данных в Google App Engine/Google Cloud Endpoints на Java: фреймворк Objectify
Часть пятая: Google Cloud Storage c Java: изображения и другие файлы в облаках

В первой части мы рассмотрели создание проекта на Google Cloud Endpoints с Java, в этой статье речь пойдет о создании фронтенда к нашему API.

В дополнение к инструментам, использовавшимся в первой части, нам понадобится:

AngularJS, и начальное общее представление о том как он работает, опционально Bootstrap или Foundation.

Простейший веб-сервер на локальной машине для тестирования, и сервер для деплоя приложения.

Если вы любите Bootstrap, активно используете его в работе и решили с головой окунуться в мир ember.js, то вас ожидает увлекательнейшее путешествие по закоулкам Stack Overflow в поисках ответов на десятки вопросов. Мой путеводитель по галактике по Ember.js способен дать ответ на некоторые из них, например:

Как использовать модальные окна Bootstrap в Ember.js?

Прежде чем перейти к ответу, необходимо эффектное вступление для моего путеводителя в целом. Недолго думая вспомнились два коротких слова, которые непременно поддержат тех, кто хочет покорить вселенную ember.js

«DON'T PANIC!»

Хорошее, начало. Поехали!