Всем привет! Мы как-то задумали сделать легкий вводный курс на тему JavaScript и разработки приложений (он, кстати, скоро будет опубликован): и, пока я собирал материалы к нему, как-то само собой выяснилось, что есть довольно много вещей, которые, так сказать, находятся на переднем крае развития JavaScript. Отсюда родилась идея сделать отдельную обзорную статью в жанре «X трендов на год Y по технологии Z».

Многие из тех, вещей, которые я буду описывать, можно попробовать в той или иной степени уже сегодня (собственно, иначе я бы говорил о космическом будущем, а не о трендах). В этом есть несомненный плюс: если у вас будет свободное время (а на праздниках его обычно много), вам будет чем заняться. Да и, в целом, хорошо начинать новый год с расширения своих горизонтов!

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

Рисование — это обман.
М.К.Эшер

Браузеры позволяют нам рисовать графику разными способами. Проще всего использовать стили для расположения и расцветки стандартных элементов DOM. Так можно добиться многого, как показал пример игры из предыдущей главы. Добавляя частично прозрачные картинки узлам, мы можем придать им любой нужный вид. Возможно даже поворачивать или искажать узлы через стиль transform.

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

Есть две альтернативы. Первая – SVG, масштабируемая векторная графика, также основанная на DOM, но без участия HTML. SVG – диалект для описания документов, который концентрируется на формах, а не тексте. SVG можно встроить в HTML, или включить через тег <img>.

Вторая альтернатива – холст (canvas). Холст – это один элемент DOM, в котором находится картинка. Он предоставляет API для рисования форм на том месте, которое занимает элемент. Разница между холстом и SVG в том, что в SVG хранится начальное описание форм – их можно в любой момент сдвигать или менять размер. Холст же преобразовывает формы в пиксели (цветные точки растра), как только нарисует их, и не запоминает, что эти пиксели из себя представляют. Единственным способом сдвинуть форма на холсте является очистить холст (или ту часть, которая окружает форму) и перерисовать её на другом месте.

Неделя Хэллоуина – популяция статей про веб-сайты в облаке Microsoft Azure удваивается.

Как многие знают, на Microsoft Azure есть очень простой сервис для размещения веб-сайтов на .NET, Java, PHP, Python, Node.js. Эту статью можно использовать в качестве шпаргалки для того, чтобы постоянно иметь под рукой перечень опций развертывания и ссылок на инструкции.
В шпаргалке: Visual Studio, Git, Mercurial, TFS, WebMatrix, MSBuild и WebDeploy.

Традиционно рекомендации по обучению десятипальцевой печати сводятся к двум советам:

• тратить нервы на клавиатурные тренажеры вроде пресловутого «Соло на клавиатуре»;
• заклеить подписи на клавишах.

Научиться печатать на клавиатуре вслепую при помощи этих способов — издевательство над собой. Каждый, кто пробовал «Соло», хотя бы раз в ярости бил по клавиатуре кулаком, и практически никто не дошел до конца. А кто пробовал заклеивать надписи на клавишах, вскоре отрывал наклейки обратно, потому что без навыка и без подписей печатать невозможно, а жить дальше как-то надо.

Что если я скажу вам, что есть абсурдно простой, состоящий из одного пункта способ научиться слепой печати без этих дурацких органичений?
 

Статья про то, что делать тем, кто хочет переехать работать в США. Я предполагаю инженерные позиции, на которые проще всего получить визы, но, возможно, статья окажется полезна и другим специалистам.

Мой опыт несколько отличается от нижеописанного (я попала на работу в США после стажировки). Но за 4 года в США пообщалась с людьми, которые попали сюда разными путями и набрала кое-какой опыт. Так что если бы я очень хотела найти работу в США сегодня, то я бы действовала примерно так, как описано ниже.

Заранее извиняюсь, если мой тон кому-то покажется наставническим — я не имею амбиций учить других жизни, просто иногда у меня получается такой стиль.

Привет всем! Сегодня хотелось бы сделать небольшое введение в такую штуку, как Size Classes. Она появилась недавно вместе с Xcode 6, документации по ней от самой Apple совсем немного.

Итак, для чего же предназначена Size Classes? Все мы знаем, что на подходе уже iPhone 6 двумя (как минимум) разными размерами дисплея (4,7 и 5,5), после чего разработчикам еще больше придется заморачиваться с версткой UI для них + само собой расширения iPad«ов. В итоге количество всех поддерживаемых экранов будет около 7 (маленький привет Android). Герой сегодняшнего дня — Size Classes — как раз и предназначен для того, что бы помочь решить данную проблему.

В начале апреля я уволился с работы. От переизбытка свободного времени я решил написать игру для iOS. Игра про бедного кубика, которого постоянно преследуют другие геометрические фигуры. Настоящая драма. Кубику нужно продержаться как можно дольше без столкновений. Прототип игры был написан примерно за 8 часов. Всего разработка игры заняла 3,5 месяца. Чем я занимался все это время можно узнать ниже.

Во время работы над очередной версией приложения возникла задача сделать публикацию фото в социальной сети ВКонтакте через стандартный контроллер UIActivityViewController.


Поиск в сети дал следующие результаты:

1. Готовой реализации не обнаружено
2. Есть официальное sdk ВКонтакте: содержит механизмы авторизации, работы с картинками, но не имеет готового класса для загрузки через UIActivityViewController
3. Есть документация Apple для создания кастомного UIActivity

 

Эффективная работа в любой IDE, да и не только в IDE, определяется в немалой степени тем, как много вы используете клавиатурных сокращений и всяческих фич, призванных облегчить вашу жизнь.
В этом посте я попытаюсь поделиться тем, что знаю и использую сам, что накопалось в сети но так же очень рассчитываю на вашу помощь. Поделитесь своими находками и трюками. По результатам думаю сделать какой-то PDF, вроде известного Xcode-рам pdf c шорткатами от Colin Wheeler (не знаете? тогда вот линк)

На хабре в прошлом месяце была опубликована статья Конкурс ВК: Мессенджер для Android. Как это было!, в которой автор поделился своими мыслями о конкурсе и опубликовал список ресурсов и статей, которые помогли ему в создании приложения. Так как в последнее время я начал изучать разработку под iOS, то у меня скопилось некоторое количество ссылок, которые могут быть полезны для начинающих. Поэтому я последую его примеру и сделаю то же самое, только для своей платформы. Надеюсь, кому-нибудь они окажутся полезны и сэкономят немного времени.

Какое-то время назад я решил перепрофилироваться на разработчика под iOS, и решил систематизировать материал. Так сказать, составить свой roadmap. Получился некий обзор, которым я хотел бы поделиться с вами.
Данный обзор не претендует на полноту, непогрешимость и истину в последней инстанции.

Итак, вы приобрёли iPhone или iPad. Чудесные устройства, не правда ли? Какое-то время спустя пришла мысль “а не создать ли мне под него программу, которая завоюет мир?”. Я расскажу вам, с чего начать.

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

Первое исследование было проведено в 2005 году. Его автор, Dimitri Mortelmans, изучал взаимосвязь между дизайном витрины магазина и ее восприятия покупателем. В том числе, автор указывает на то, что элитным бутикам и магазинам удается создать ощущение роскоши в своих экспозициях, благодаря грамотному использованию пустого пространства в оформлении витрин и выставочных залов.

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

Пример 1
Пример 2

Второе исследование было проведено в 2013 году. В ходе эксперимента были собраны статистические данные о том, как использование пустого пространства в дизайне интернет-магазина влияет на оценку стоимости товара посетителем.

В странах СНГ не менее 75-80% заказов приходятся на cash-and-delivery (оплата заказа при доставке). Это отличие российского и западного потребителя легло в основу редизайна оформления заказа Сотмаркета еще в 2012 году. Тогда впервые в России интернет-магазин перестал требовать авторизации или регистрации клиента перед совершением покупки.

Фоновая регистрация и авторизация пользователей

Хотя авторизация на последнем шаге покупки и не несет никакой ценности для пользователя, это западное клише глубоко укоренилась в Рунете. Со средней частотой покупки (техники) раз в 9-10 месяцев люди зачастую не запоминают регистрационных данных: эл. почты, логина, пароля. Парадокс в том, что большинство интернет-магазинов с готовностью принимают заказы по телефону, но при этом создают искусственные препятствия при совершении покупке онлайн.

Это наблюдение легло в основу концепции фоновой регистрации и авторизации пользователей.

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

Для работы с расширениями вам понадобится переключить канал обновлений на Dev или Beta.

PHPExcel — отличная библиотека с огромным функционалом по работе с форматами xls, xlsx. Можно считывать, записывать, менять форматирование, задавать формулы, а из xlsx можно и картинки вытаскивать.

На хабре уже был пост про эту библиотеку - Универсальное чтение ячеек в PHPExcel. Я остановлюсь только лишь на главном минусе PHPExcel — вечно памяти не хватает, все время сыпятся ошибки «Fatal error: Out of memory». Этот пост о том, как это обойти.

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

Использование контейнера для каждого изображения

Простой способ, который можно применить к любому изображению на сайте. Заключается в том, что каждая картинка оборачивается в DIV, который предотвращает построчную загрузку:

<div class="img_wrapper">
    <img src="comicbookguy.jpg" alt=""/>
</div>

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

Разбор полетов

По итогам прошлого поста мы выяснили, что:

• доставка происходит в обход Почты РФ через UPS/DHL;
• в Москву посылка приходит за 5 дней;
• для РФ Киндл продается только в версии «без встроенной рекламы» и без аксессуаров в отдельном лоте. Поэтому чехлы, к примеру, можно взять тут.
• Amazon оплачивает услуги таможенного брокера;
• заказывая доставку на рабочий адрес, никак не упоминайте название компании, иначе получателем будет компания, а не вы, со всеми последствиями;
• если ваша покупка дешевле 200 евро, включая стоимость доставки, вам не о чем переживать;
• если вы хотите сделать покупку весом до 31 кг. и стоимостью до 1000 евро, включая стоимость доставки, то вам желательно заказывать ее на адрес в одном из городов списка (Москва, Санкт-Петербург, Краснодар, Владивосток, Ставрополь, Новороссийск и Нижний Новгород). В этом случае доступны следующие варианты развития событий:
• 1. скорее всего, вам не о чем переживать, и покупку вам доставят без лишних проблем;
  2. возможно, вам позвонят\ напишут из UPS и попросят прислать им отсканированную распечатку электронной квитанции заказа из Amazon, подписанный договор оказания услуг перевозки груза и копию паспорта.
  3. самый маловероятный и худший вариант — квест по самостоятельному прохождению таможни. Не переживайте, с этой инструкцией процесс займет не больше 2 часов времени и будет не сложнее похода в библиотеку.
• это же Amazon! При возникновении любых проблем — задержка, потеря посылки, дополнительные таможенные сборы, повреждение товара — служба поддержки придет вам на помощь вплоть до полного возмещения стоимости.

Теперь о том, что же все-таки можно купить.

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

Сегодня я решил опубликовать свои шпаргалки, на самые часто встречающиеся ошибки при работе с MySQL.

Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

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

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

Если бы я не был веб-разработчиком, мне пришлось бы плакать и грызть кактус. К счастью, я им являюсь, поэтому решил сделать себе сайт сам. Чтобы выкладывать на нём статьи вроде этой, небольшие хобби-проекты, и чтобы было что указать в поле «сайт» профиля на Хабре.

Если вы тоже хотели бы иметь сайт, который полностью контролируете, на котором всё именно так, как вам хочется, но всё никак руки не доходили разобраться и сделать, то эта статья для вас.

Некоторые знания HTML и JS вам пригодятся. Опыт работы с Node.js не обязателен.