Изучение открытого исходного кода – это лучший способ научиться писать качественный код, особенно если речь идет о новом инструменте с не полностью сформировавшимися стандартами. Одним из таких инструментов является React Native. Он постоянно дорабатывается, функциональность его API расширяется с каждым релизом, а количество библиотек растет. В то же время большинство обучающих ресурсов по работе с React Native очень поверхностны и не идут дальше вступительных рекомендаций. Но даже несмотря на это, изучение исходного кода должно быть нормой для каждого разработчика.

Я хочу представить 5 проектов с открытым исходным кодом, которые я изучаю сам и советую остальным.

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

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

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

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

Одним прекрасным вечером, не предвещающим ничего интересного, в наш чатик поступило предложение от автора публикации «Переводим в код 5 действительно полезных шаблонов адаптивной разметки», написанной им весной 2012 года, написать статью-ремейк, но с применением FlexBox и сопутствующим пояснением что и как работает. После некоторой доли сомнений, интерес глубже разобраться в спецификации все таки победил и я благополучно сел верстать те самые примеры. В ходе погружения в эту область стало выясняться множество нюансов, что переросло в нечто большее чем просто переверстать макетики. В общем в данной статье хочу рассказать о такой чудесной спецификации, под названием «CSS Flexible Box Layout Module» и показать некоторые ее интересные особенности и примеры применения. Всех кому интересно, любезно приглашаю под хабракат.

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

Мы в Хекслете используем JavaScript не только для очевидных задач во фронтэнде, но и, например, для реализации браузерной среды разработки (наш опен-сорсный hexlet-ide) на React'е. У нас есть практический курс по JavaScript, и один из уроков там посвящен замыканиям. Это важная тема не столько в рамках JS, сколько в программировании вообще. Мы освещаем ее и в других курсах.

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

Я использую замыкания уже достаточно давно. Я научился их использовать, но не до конца понимал как они на самом деле работают, что происходит «под капотом». Что это вообще такое? Википедия не очень помогает. Когда замыкание создается и уничтожается? Как выглядит реализация?

"use strict";
 
var myClosure = (function outerFunction() {
 
  var hidden = 1;
 
  return {
    inc: function innerFunction() {
      return hidden++;
    }
  };
 
}());
 
myClosure.inc();  // возвращает 1
myClosure.inc();  // возвращает 2
myClosure.inc();  // возвращает 3
 
// Ага, круто. А как это реализовано?
// И что происходит под капотом?

Недавно я получил письмо от читателя моего блога, которое, по какой-то причине, заставило меня задуматься. Письмо гласило:

Привет Филип, можно спросить, как ты стал отличным front-end-разработчиком? Можешь дать совет?

Признаться, я был удивлен тем, что подобный вопрос задают мне, так как я никогда не считал себя «отличным» front-end-разработчиком. На самом деле, я не уверен, что был достаточно квалифицирован для всего, за что брался, когда только начинал работать в этой сфере. Я подавал заявки на работу только потому, что не понимал, как мало я знаю, а получал её, потому что люди, на собеседование к которым я приходил, не знали, какие вопросы задавать.

Содержание

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, чтобы помочь вам создавать великолепные веб-приложения современным способом.

На фото: Том Круз в фильме Лучший Стрелок

В этой статье мы рассмотрим взаимодействие Single Page HTML Application с облачной MongoDB через JavaScript. В качестве MongoDB-as-a-Service я возьму Mongolab. Стоимость развернутой MongoDB, с объёмом в 500мб, обойдется нам всего-лишь в 0 USD.

Для того, чтобы создать todo-лист, нам не потребуется бекенд. Взаимодействовать с Mongolab мы будем через REST API, а обертку для него в клиентской части мы напишем не прибегая к помощи сторонних JavaScript-фреймворков.

Myth — препроцессор CSS, позволяющий уже сейчас использовать в ваших проектах новые и экспериментальные возможности CSS.

Почему Myth?

С помошью Myth вы можете полноценно использовать даже те CSS свойства, которые все еще находятся на этапе разработки W3C и не поддерживаются абсолютным большинством браузеров. Но основным его преимуществом перед другими препроцессорами является то, что вам не придется изучать новый язык разметки, как это происходит с SASS или LESS. В Myth используется стандартная разметка CSS. Поэтому вам не придется ничего переписывать, когда поддержка тех или иных свойств появится в браузерах, а всего лишь перекомпилировать уже имеющиеся стили, что обычно занимает буквально несколько секунд — всю остальную работу за вас сделает Myth.

Вот несколько возможностей CSS, которые доступны в Myth на данный момент:

• CSS переменные;
• Пользовательские Media queries;
• Функция color();
• функция calc() без динамических расчетов во время выполнения;
• Автоматическое добавления вендорных префиксов;

Такой движок JS, как V8 (Chrome, Node) от Google, заточен для быстрого исполнения больших приложений. Если вы во время разработки заботитесь об эффективном использовании памяти и быстродействии, вам необходимо знать кое-что о процессах, проходящих в движке JS браузера.

Что бы там ни было — V8, SpiderMonkey (Firefox), Carakan (Opera), Chakra (IE) или что-то ещё, знание внутренних процессов поможет вам оптимизировать работу ваших приложений. Но не призываю вас оптимизировать движок для одного браузера или движка – не делайте так.

Задайте себе вопрос:
— можно ли что-то в моём коде сделать более эффективным?
— какую оптимизацию проводят популярные движки JS?
— что движок не может компенсировать, и может ли сборка мусора подчистить всё так, как я от неё ожидаю?



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

Привет, хабражители!

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

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

Под катом — текущая версия списка.

Я работаю в команде Онлайн. Мы делаем веб-версию справочника 2ГИС. Это долгоживущий активно развивающийся проект, в котором JavaScript используется как основной язык как на клиенте, так и на сервере.

Важное место в работе занимают инструменты анализа и отладки приложения. Популярные JavaScript фреймворки как правило обладают собственным инструментарием, заточенным под конкретную идеологию. Наша ситуация осложняется тем, что под капотом Онлайна гудит фреймворк собственного производства — Slot — также находящийся в стадии активной доработки.

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

В детстве я не расставался с конструкторами. У меня их было 2 типа: аналог LEGO (пластмассовый и с пупырышками) и металлический с болтиками. После поста на Хабре, я понял, насколько скудный был в те времена выбор. Пару недель назад мембер хакспейса Костя Костюк подсказал мне, что в Москве есть люди, которые занимаются продвижением и обучением FISCHERTECHNIK.


(на фото: Электромобиль с заправочной станцией и водородный топливный элемент, солнечная батарея)

В Германии вокруг этого конструктора сложилось свое сообщество, они гордятся своим изобретателем и ставят свои рекорды.

Чем понравился мне этот конструктор — хардкорностью научно-технической серьезностью и отсылками ко множеству реальных механизмов/устройств (от принтера, CD-привода и механизмов Леонардо да Винчи, до шаговых экскаваторов, роботов и электромобилей). В наборы входит и контроллер с графической средой программирования, что позволяет учить детей основам алгоритмов и программирования.

Под катом немного про автомобиль на водородном топливном элементе (из конструктора «Экологическая
энергетика» + «Топливный элемент»), про изобретателя конструктора и короткий обзор существующих в Москве наборов для конструирования (можно только позавидовать тем гикам, кому сейчас 8+ лет, ибо на новый год их ждут такие подарки).


(Осторожно! Под катом боль за бесцельно прожитые годы)

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

А вот Гена взял и объяснил, почему наша кухня — это лучшая рекламная площадка для его проекта, и как он захантил человека из нефтянки; Оля — как у всех учиться после Гарварда; Кирилл вообще пояснил, что думал про клуб анонимных алкоголиков; а Митя пришёл не пилить стартап, а перепридумывать его идею.

Короче, мы опять поняли, что ничего не знаем. Но точно решили, что мы уже не коворкинг, а что-то другое. Например, коллективный разум зергов. Или, возможно, Кирилл прав, клуб анонимных разработчиков.

Заходите внутрь, покажу в лицах, как живётся в российской «Крёмневой долине». Именно крёмневой, у нас тут пещерные технологии в сравнении с США.

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

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

Walkway.js и Vivus.js

Вы видели этот великолепный лэндинг посвященный анонсу Sony PlayStation 4? Обратите внимание на анимацию SVG объектов состоящих из контуров. Они словно рисуются художником в режиме реального времени. Отныне этот эффект можно легко повторить с помощью Walkway и Vivus. Обе библиотеки максимально просты в использовании и применимы только для path элементов, поскольку принцип их работы основывается на взаимодействии с CSS свойством strokeDashoffset. Хоть и у Walkway значительно больше звезд на Гитхабе, зато Vivus предоставляет несколько вариантов отрисовки: Delayed, Async и OneByOne.

//Walkway
var svg = new Walkway('#test');

svg.draw(function() {
  console.log('Animation finished');
});

//Vivus
new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback);

Сколько часов в неделю вы тратите на работу? Около 40, не так ли? А как вы думаете, что будет, если работать 90 часов в неделю?

Автор сайта a Year of Productivity Chris Bailey решил провести такой эксперимент. К чему это привело? Читайте о 10 уроках, которые он извлек, в нашем переводе его статьи.

Очень многие из нас верят в существование волшебной субстанции под названием «призвание». «Если бы я только мог найти свое призвание», — с горечью говорим мы. «Я был бы счастлив, если бы нашел свое призвание...»

Что сказать? Призвание — реальность, причем, невероятно могущественная. Но почти все, что люди знают о его поиске, в корне неверно. Именно об этом ведет речь в своей последней статье Оливер Эмбертон. Продолжаем размышлять над личной эффективностью!

Я изучил множество ошибок, возникающих в результате копирования кода. И утверждаю, что чаще всего ошибки допускают в последнем фрагменте однотипного кода. Ранее я не встречал в книгах описания этого феномена, поэтому и решил о нём написать. Я назвал его «эффектом последней строки».

Несколько недель назад в Минске проходил хакатон WTH.BY, в котором я решил принять участие. Его основной идеей было то, что это хакатон для разработчиков. Мы могли делать все, что угодно, лишь бы нам это было весело и интересно. Никаких монетизаций, инвестиций и менторов. Всё весело и круто!

Идей для реализации у меня было много, но все они не дотягивали до какого-то «Вау!». Именно поэтому накануне мероприятия я пролистывал старые статьи хабра из раздела DIY и наткнулся на статью "Опыт создания multitouch стола". Это было то, что вызвало тот самый отсутствующий «Вау!» и я решил сделать отдаленный аналог из того, чтобы под рукой.

Под рукой у меня оказалось стекло формата примерно А3, обычная бумага, маркер, мобильный телефон и ноутбук. Я быстро нашел себе сообщника Егора и началась активная работа.