Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №140 (22 — 28 декабря 2014)
4 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
256K+
JavaScript *
Прототипно-ориентированный язык программирования
268,52
Рейтинг
Реализация Sunburst Chart на JavaScript и HTML5 Canvas
7 мин
Всем привет! Сегодня хотелось бы рассказать про то, как можно сделать собственные графики на js + canvas буквально в пару сотен строк кода. А заодно вспомнить школьный курс геометрии.
15 лучших JavaScript-библиотек для построения диаграмм и сводных таблиц
6 мин
Перевод
Практически невозможно представить себе информационную панель без диаграмм и графиков. Они быстро и эффективно отображают сложные статистические данные. Более того, хорошая диаграмма также улучшает общий дизайн вашего сайта.
В этой статье я покажу вам некоторые из лучших JavaScript библиотек для построения диаграмм/схем (и сводных таблиц). Эти библиотеки помогут вам в создании красивых и настраиваемых графиков для ваших будущих проектов.
Хотя большинство библиотек являются бесплатными и свободно распространяемыми, для некоторых из них есть платные версии с дополнительным функционалом.
В этой статье я покажу вам некоторые из лучших JavaScript библиотек для построения диаграмм/схем (и сводных таблиц). Эти библиотеки помогут вам в создании красивых и настраиваемых графиков для ваших будущих проектов.
Хотя большинство библиотек являются бесплатными и свободно распространяемыми, для некоторых из них есть платные версии с дополнительным функционалом.
Почему вам НЕ стоит использовать AngularJs
12 мин
Много времени прошло с момента появления AngularJs (в масштабах веб-технологий конечно). Сейчас в интернетах есть огромное количество постов восхваляющих этот фреймворк до небес, что это манна небесная не иначе, а критики не так уж и много как он того заслуживает. Но такие статьи уже потихоньку начинают появляться, и меня это радует, надеюсь индустрия переболеет ангуляром так же, как переболела MooTools, Prototype, %какой-нибудь новый язык под JVM%, %другая-супер-революционная-технология%. Не знаю почему, но в IT-области такие революционные технологии, которые поднимают шум, а потом пропадают, появляются довольно часто. Хороший разработчик должен уметь отличать очередную модную технологию, от работающего инструмента. И для этого очень важно критически смотреть на вещи. Моя статья — это компиляция самых весомых выводов из других статей, и моих личных умозаключений. Ангуляр создает хороший вау-эффект, когда видишь его впервые: «ух ты, я написал ng-repeat, и реализовал эту логику одними тегами и все само обновляется!», но как только приходится реализовывать реальные приложения, а не очередной TODO-лист, то все становиться очень печально. Сразу хочу сказать, что фреймворк я знаю хорошо, даже больше чем мне хотелось бы его знать, я программировал на нем в течении 2 лет. И для следующего проекта я его точно не выберу, и это хорошо, все мы учимся на ошибках. Так что же не так с ангуляром? Тут нет однозначного ответа, слишком много разных недостатков, которые создают такой облик фреймворку. Если одним словом – непродуманная архитектура. Под катом я привожу конкретику, так что устраивайтесь поудобнее. ДА НАЧНЕТСЯ ХОЛЛИ ВАР!
Учебник AngularJS: Всеобъемлющее руководство, часть 1
7 мин
Перевод
Содержание
1 Введение в AngularJS
2 Engineering concepts in JavaScript frameworks
3 Modules
4 Understanding $scope
5 Controllers
6 Services and Factories
7 Templating with the Angular core
8 Directives (Core)
9 Directives (Custom)
10 Filters (Core)
11 Filters (Custom)
12 Dynamic routing with $routeProvider
13 Form Validation
14 Server communication with $http and $resource
1 Введение в AngularJS
Angular – MVW-фреймворк для разработки качественных клиентских веб-приложений на JavaScript. Он создан и поддерживается в Google и предлагает взглянуть на будущее веба, на то, какие новые возможности и стандарты он готовит для нас.
MVW означает Model-View-Whatever (модель – вид – что угодно), то есть гибкость в выборе шаблонов проектирования при разработке приложений. Мы можем выбрать модели MVC (Model-View-Controller) или MVVM (Model-View-ViewModel).
Этот обучающий материал задумывался как отправная точка для изучения AngularJS, его концепций и API, чтобы помочь вам создавать великолепные веб-приложения современным способом.
Руководство хакера по нейронным сетям. Глава 2: Машинное обучение. Обучение сети на основе метода опорных векторов (SVM)
8 мин
Перевод
Содержание:
В качестве конкретного примера давайте рассмотрим SVM. SVM – это очень популярный линейный классификатор. Его функциональная форма имеет именно такой же вид, как я описывал в предыдущем разделе — f(x,y)=ax+by+c. На данном этапе, если вы видели описание SVM, вы наверняка ожидаете, что я буду определять функцию потерь SVM и погружаться в пояснения свободных переменных, геометрических понятий больших полей, ядер, двойственности и пр. Но здесь я бы хотел воспользоваться другим подходом.
Глава 1: Схемы реальных значений
Часть 1:
Часть 2:
Часть 3:
Часть 4:
Часть 5:
Часть 6:
Введение
Базовый сценарий: Простой логический элемент в схеме
Цель
Стратегия №1: Произвольный локальный поиск
Часть 2:
Стратегия №2: Числовой градиент
Часть 3:
Стратегия №3: Аналитический градиент
Часть 4:
Схемы с несколькими логическими элементами
Обратное распространение ошибки
Часть 5:
Шаблоны в «обратном» потоке
Пример "Один нейрон"
Часть 6:
Становимся мастером обратного распространения ошибки
Глава 2: Машинное обучение
В качестве конкретного примера давайте рассмотрим SVM. SVM – это очень популярный линейный классификатор. Его функциональная форма имеет именно такой же вид, как я описывал в предыдущем разделе — f(x,y)=ax+by+c. На данном этапе, если вы видели описание SVM, вы наверняка ожидаете, что я буду определять функцию потерь SVM и погружаться в пояснения свободных переменных, геометрических понятий больших полей, ядер, двойственности и пр. Но здесь я бы хотел воспользоваться другим подходом.
Введение в всплывающие события
7 мин
Несмотря на то, что в конце концов я полностью использовал CSS для этого проекта, начиналось все с использования JavaScript и классов.
Однако у меня возникла проблема. Я хотел использовать так называемые Всплывающие События, но также я хотел минимизировать зависимости, которые мне пришлось бы внедрять. Я не хотел подключать библиотеки jQuery для «этого маленького теста», толькло для того, чтобы использовать всплывающие события.
Давайте посмотрим поближе, что такое всплывающие события, как они работают, и рассмотрим несколько путей для их реализации.
Однако у меня возникла проблема. Я хотел использовать так называемые Всплывающие События, но также я хотел минимизировать зависимости, которые мне пришлось бы внедрять. Я не хотел подключать библиотеки jQuery для «этого маленького теста», толькло для того, чтобы использовать всплывающие события.
Давайте посмотрим поближе, что такое всплывающие события, как они работают, и рассмотрим несколько путей для их реализации.
Авторизация пользователей с AngularJS и Firebase
4 мин
В прошлой статье, я рассказывал о Firebase. Сегодня я хочу рассказать как я организовал авторизацию пользователей с использованием AngularJS и Firebase.
На данный момент я работаю, в свободное время над своим проектом, если в вкратце, то это сервис для создания прототипов SPA-приложений, думаю в скором времени я смогу расказать о нем больше, но пока только об авторизации. Почему я выбрал Firebase? Все просто, я очень ленивый программист и не люблю писать велосипеды, а данный сервис предлагает кучу готовых решений среди которых и авторизация и регистрация пользователей.
Для основы проекта я использую ngBoilerplate, так считаю его достаточно удачной сборкой не требующей каких-то особых доработок. В сборке предустановлены Twitter Bootstrap, Angular UI, Angular Bootstrap, Font Awesome и LESS. Также замечательно настроен Grunt и Bower. Для установки и запуска чистого приложения, нужно всего лишь выполнить следующие команды:
На данный момент я работаю, в свободное время над своим проектом, если в вкратце, то это сервис для создания прототипов SPA-приложений, думаю в скором времени я смогу расказать о нем больше, но пока только об авторизации. Почему я выбрал Firebase? Все просто, я очень ленивый программист и не люблю писать велосипеды, а данный сервис предлагает кучу готовых решений среди которых и авторизация и регистрация пользователей.
Для основы проекта я использую ngBoilerplate, так считаю его достаточно удачной сборкой не требующей каких-то особых доработок. В сборке предустановлены Twitter Bootstrap, Angular UI, Angular Bootstrap, Font Awesome и LESS. Также замечательно настроен Grunt и Bower. Для установки и запуска чистого приложения, нужно всего лишь выполнить следующие команды:
$ git clone git://github.com/joshdmiller/ng-boilerplate
$ cd ng-boilerplate
$ sudo npm -g install grunt-cli karma bower
$ npm install
$ bower install
$ grunt watch
История одного маленького эксперимента с Node.js
7 мин
Вот что может получиться если делать приложение на незнакомых технологиях при ограниченном времени.
Эта статья будет интересна скорее всего новичкам ну или просто для развлечения. Будьте осторожны статья полна субъективных оценок и бестолковый рассуждений автора.
Началось все вот с этой статьи и давнего желания поближе познакомиться с Node.js. Упускать такое стечение обстоятельств было нельзя). Что из этого получилось вы найдете под катом.
Эта статья будет интересна скорее всего новичкам ну или просто для развлечения. Будьте осторожны статья полна субъективных оценок и бестолковый рассуждений автора.
Началось все вот с этой статьи и давнего желания поближе познакомиться с Node.js. Упускать такое стечение обстоятельств было нельзя). Что из этого получилось вы найдете под катом.
Суперсилы Chrome DevTools
6 мин
Я работаю в команде Онлайн. Мы делаем веб-версию справочника 2ГИС. Это долгоживущий активно развивающийся проект, в котором JavaScript используется как основной язык как на клиенте, так и на сервере.
Важное место в работе занимают инструменты анализа и отладки приложения. Популярные JavaScript фреймворки как правило обладают собственным инструментарием, заточенным под конкретную идеологию. Наша ситуация осложняется тем, что под капотом Онлайна гудит фреймворк собственного производства — Slot — также находящийся в стадии активной доработки.
В этой статье я расскажу, как мы используем стандартные браузерные инструменты разработчика для эффективной отладки и исследования. Эти рецепты направлены в первую очередь на изучение приложения снаружи-внутрь, поэтому подойдут для любого проекта.
Руководство хакера по нейронным сетям. Глава 2: Машинное обучение. Бинарная классификация
4 мин
Перевод
Содержание:
В последней главе мы рассматривали схемы с реальными значениями, которые вычисляли сложные выражения своих исходных значений (проход вперед), а также мы смогли рассчитать градиенты этих выражений по оригинальным исходным значениям (обратный проход). В этой главе мы поймем, насколько полезным может быть этот довольно простой механизм в обучении машины.
Глава 1: Схемы реальных значений
Часть 1:
Часть 2:
Часть 3:
Часть 4:
Часть 5:
Часть 6:
Введение
Базовый сценарий: Простой логический элемент в схеме
Цель
Стратегия №1: Произвольный локальный поиск
Часть 2:
Стратегия №2: Числовой градиент
Часть 3:
Стратегия №3: Аналитический градиент
Часть 4:
Схемы с несколькими логическими элементами
Обратное распространение ошибки
Часть 5:
Шаблоны в «обратном» потоке
Пример "Один нейрон"
Часть 6:
Становимся мастером обратного распространения ошибки
Глава 2: Машинное обучение
В последней главе мы рассматривали схемы с реальными значениями, которые вычисляли сложные выражения своих исходных значений (проход вперед), а также мы смогли рассчитать градиенты этих выражений по оригинальным исходным значениям (обратный проход). В этой главе мы поймем, насколько полезным может быть этот довольно простой механизм в обучении машины.
Типичные исправления после обновления Windows Store приложений с версии 8 до 8.1
4 мин
Переводя свои приложения на платформу 8.1, я обнаружил, что это довольно несложное занятие, которое не требует особых усилий.
После перевода зачастую возникают типовые предупреждения, возникшие в результате несоответствия платформ. Разумеется, эти предупреждения желательно исправить.
Рассмотрим самые популярные исправления?
Sortable v1.0: Новые возможности
6 мин
Привет хабр! В преддверии нового года хочу поделится своей радостью — выходом Sortable v1.0. Ровно год назад я представил на ваш суд мой маленький инструмент для сортировки списка при помощи drag’n’drop. Всё это время я скрупулезно собирал обратную связь, добавлял новые возможности и правил мелкие баги. Под катом я расскажу о новых возможностях, интеграции с AngularJS, Meteor и других нюансах.Ближайшие события
Несколько интересностей и полезностей для веб-разработчика #35
7 мин
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.
Репозиторий с самыми актуальными вопросами на собеседовании на позицию фронтенд разработчика. Проект от команды знаменитого HTML5 Boilerplate и набрал уже более 7500 звезд на GitHub.
В «Америках» почему-то часто критикуют веб-стандарты и работу консорциума W3C в целом. Но не знаю как вас, а меня современные возможности очень даже радуют, особенно когда я вижу их реализацию. Встречайте P2P сервис для передачи файлов, основанный на технологии WebRTC и Firebase. Это веб аналог яблочного AirDrop. Лично я открыл оффлайновый учебник «Постройка.ру» по HTML лет 7-8 назад и по сравнению с тем, что мы видим сейчас — это небо и земля. Даже невзирая на объем и некоторую путаницу в спецификациях.
Front-end Job Interview Questions
Репозиторий с самыми актуальными вопросами на собеседовании на позицию фронтенд разработчика. Проект от команды знаменитого HTML5 Boilerplate и набрал уже более 7500 звезд на GitHub.
ShareDrop
В «Америках» почему-то часто критикуют веб-стандарты и работу консорциума W3C в целом. Но не знаю как вас, а меня современные возможности очень даже радуют, особенно когда я вижу их реализацию. Встречайте P2P сервис для передачи файлов, основанный на технологии WebRTC и Firebase. Это веб аналог яблочного AirDrop. Лично я открыл оффлайновый учебник «Постройка.ру» по HTML лет 7-8 назад и по сравнению с тем, что мы видим сейчас — это небо и земля. Даже невзирая на объем и некоторую путаницу в спецификациях.
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №139 (15 — 21 декабря 2014)
5 мин
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Руководство хакера по нейронным сетям. Схемы реальных значений. Становимся мастером обратного распространения ошибки
6 мин
Перевод
Содержание:
Со временем вы сможете намного эффективнее писать обратные проходы, даже для сложных схем и для всего сразу. Давайте немного попрактикуемся в создании обратного распространения ошибки на нескольких примерах. В дальнейшем мы просто будем использовать такие переменные, как a,b,c,x, а их градиенты назовем da,db,dc,dx соответственно. Опять же, мы представляем переменные в качестве «прямого потока», а их градиенты в качестве «обратного потока» вдоль каждой линии. Нашим первым примером был логический элемент *:
Глава 1: Схемы реальных значений
Часть 1:
Часть 2:
Часть 3:
Часть 4:
Часть 5:
Часть 6:
Введение
Базовый сценарий: Простой логический элемент в схеме
Цель
Стратегия №1: Произвольный локальный поиск
Часть 2:
Стратегия №2: Числовой градиент
Часть 3:
Стратегия №3: Аналитический градиент
Часть 4:
Схемы с несколькими логическими элементами
Обратное распространение ошибки
Часть 5:
Шаблоны в «обратном» потоке
Пример "Один нейрон"
Часть 6:
Становимся мастером обратного распространения ошибки
Глава 2: Машинное обучение
Со временем вы сможете намного эффективнее писать обратные проходы, даже для сложных схем и для всего сразу. Давайте немного попрактикуемся в создании обратного распространения ошибки на нескольких примерах. В дальнейшем мы просто будем использовать такие переменные, как a,b,c,x, а их градиенты назовем da,db,dc,dx соответственно. Опять же, мы представляем переменные в качестве «прямого потока», а их градиенты в качестве «обратного потока» вдоль каждой линии. Нашим первым примером был логический элемент *:
Выразительный JavaScript: Проект: Веб-сайт по обмену опытом
22 мин
Перевод
Содержание
- Введение
- Величины, типы и операторы
- Структура программ
- Функции
- Структуры данных: объекты и массивы
- Функции высшего порядка
- Тайная жизнь объектов
- Проект: электронная жизнь
- Поиск и обработка ошибок
- Регулярные выражения
- Модули
- Проект: язык программирования
- JavaScript и браузер
- Document Object Model
- Обработка событий
- Проект: игра-платформер
- Рисование на холсте
- HTTP
- Формы и поля форм
- Проект: Paint
- Node.js
- Проект: веб-сайт по обмену опытом
- Песочница для кода
На встречах по обмену опытом люди с общими интересами встречаются и делают небольшие неформальные презентации на тему своих знаний. На встрече по обмену опытом среди фермеров кто-нибудь может рассказать о выращивании сельдерея. На встрече программистов вы можете выступить с рассказом про Node.js
Такие встречи – отличный способ расширить свой кругозор, узнать о новинках области, или просто пообщаться с людьми со схожими интересами. Во многих городах есть встречи любителей JavaScript. Обычно их посещение бесплатное, и я нашёл те, которые посещал, дружелюбными и гостеприимными.
Встречи моноциклистов
В последней главе-проекте мы устроим веб-сайт по обслуживанию выступлений, которые делаются на таких встречах. Представьте себе группу людей, которые регулярно встречаются в офисе одного из участников, чтобы поговорить о моноциклах. Проблема в том, что когда предыдущий организатор встреч переехал в другой город, никто не занял его место. Нам нужна система, которая позволит участникам предлагать и обсуждать темы друг с другом, без участия организатора.
Новогодний розыгрыш
2 мин
Понимаете, каждый год 31 декабря мы с друзьями разыгрываем подарки. Это у нас такая традиция…
Не всегда заранее известно, кто придет на новогоднюю вечеринку, сколько будет гостей и кем они будут. В кругу моих друзей эта ситуация повторялась из года в год.
Подарков на всех может не хватить, поэтому, чтобы никому не было обидно, однажды мы решили, что каждый захватит по одному «общественному» подарку. И на месте решим, кто кому и что дарит.
Работа с ngCordova в Cordova приложениях
3 мин
Всем доброго времени суток.
Есть приложение написанное на ionic и использующее Cordova. Суть приложения — выводить некую информацию с сайта.
Ничего сложного нет. Так же, есть зависимость от интернета. Если есть интернет — отображать свежие данные с сайта, если нет — нужно выводить данные «зашитые» в приложение при релизе. Такое уж было пожелание.
Проблемы возникли, когда нужно было определить наличие интернета на устройстве.
Есть приложение написанное на ionic и использующее Cordova. Суть приложения — выводить некую информацию с сайта.
Ничего сложного нет. Так же, есть зависимость от интернета. Если есть интернет — отображать свежие данные с сайта, если нет — нужно выводить данные «зашитые» в приложение при релизе. Такое уж было пожелание.
Проблемы возникли, когда нужно было определить наличие интернета на устройстве.
Проблема «7-го января»
2 мин
Во время работы над одним из проектов обнаружился довольно интересный баг, который, как потом выяснилось, проявляется не только в «самописных» календарях, но и в популярных open-source библиотеках. Проблема заключается в невозможности выбрать 7 января. В некоторых календарях эта дата просто отсутствует:
Если выбирать 6-е число (которое стоит на месте 7-го), то выбирается… 6-е число.
Баг наблюдается (по предварительным оценкам) под Windows 8.
UPD: Природа проблемы раскрыта здесь. Все дело в RTZ2 после Microsoft Update KB2998527.
UPD2: 0xy: проблема наблюдается не только в Firefox, но и в мобильных версиях различных браузеров. Подробнее (плюс баг-фикс).
Некоторые подробности под катом.
Если выбирать 6-е число (которое стоит на месте 7-го), то выбирается… 6-е число.
Баг наблюдается (по предварительным оценкам) под Windows 8.
UPD: Природа проблемы раскрыта здесь. Все дело в RTZ2 после Microsoft Update KB2998527.
UPD2: 0xy: проблема наблюдается не только в Firefox, но и в мобильных версиях различных браузеров. Подробнее (плюс баг-фикс).
Некоторые подробности под катом.