Это перевод поста Steven Luscher опубликованного в блоге Babel. Steven работает в Facebook над Relay – JavaScript фрэймворком для создания приложений с использованием React и GraphQL.

За этот год, в процессе реорганизации Instagram Web, мы насладились использованием ряда особенностей ES6+, при написании нашх React компонентов. Позвольте мне остановиться на тех моментах, когда новые возможности языка могут повлиять на то как вы пишите React приложения, и сделают этот процесс легче и веселее, чем когда-либо.

JavaScript – один из главных языков нашего стека в Хекслете. Мы используем ReactJS и NodeJS в интерактивных частях платформы, и сделали вводный курс (более продвинутые – на подходе). Любовь к JS помогла опубликовать этот перевод хорошего эссе «Prototypes are Objects (and why that matters)».

Этот пост рассчитан на тех, кто знаком с объектами в JavaScript и знает, как прототип определяет поведение объекта, что такое функция-конструктор и как свойство .property конструктора относится к объекту, который он конструирует. Общее понимание синтаксиса ECMAScript 2015 тоже не помешает.

Мы всегда могли создать класс в JavaScript таким образом:

От переводчика.
Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить. Если вы найдете ошибки, просьба сообщить о них в личном сообщении.

Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.

Фавикон был представлен в 1999 году, в Internet Explorer 5 (источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.



С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного.

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

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

Меня настолько заинтересовал вопрос о книгах, что я решил начать новую серию статей на своём сайте catonmat о моих топ-100 книгах о программировании, программном обеспечении, науке, физике, математике и компьютерах. В каждой статье я буду размещать по пять книг, ведь разбивать огромное задачи на маленькие подзадачи — это самый простой способ их решать (GTD — get things done).

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

Мы еще даже не успели освоить HTML5 как W3C уже выкатил первую версию HTML6. И мы не морочим вам голову. Он появился, поэтому пришло время еще раз испачкать руки. Забудьте о дате релиза HTML6 и давайте немного покодим на нем.

HTML6 настолько новый, что на Википедии даже еще нет страницы о нем. Он в абсолютно зачаточном состоянии, но мы выясним, что он из себя представляет, чем порадует и как на нем кодить. Давайте же быстренько посмотрим, что такое HTML6.

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

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

Для статьи я подобрал наиболее полезные дополнения «на все случаи жизни».

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

Landing Page – (далее по тексту Целевая страница) – одностраничный сайт, построенный таким образом, чтобы обеспечить сбор контактов максимального количества целевых посетителей и максимальную конверсию в контексте его использования.

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

Так научимся же создавать качественные и красивые целевые страницы. Разобьём урок на 3 части. Содержание, Оформление и Практика.

Хочу уделить внимание книге, которую написал Kyle Simpson — «ES6 и за его пределами» (англ. «ES6 & Beyond»). Конечно, вклад внес не только он, а множество замечательных контрибьюторов. Благодарности.
На данный момент имеет статус — завершенный черновик.

Оглавление:

• Глава 1: ES? Настоящее & Будущее
• Глава 2: Синтаксис
• Глава 3: Организация
• Глава 4: Асинхронное управление потоком
• Глава 5: Коллекции
• Глава 6: API Дополнения
• Глава 7: Мета программирование
• Глава 8: За пределами ES6

Перед тем как начать читать эту книгу, я полагаю, что вы уже обладаете твердым знанием JavaScript вплоть до самого популярного стандарта (на момент написание этой книги), который обычно называют ES5 (технически это ES5.1). Здесь мы будем говорить о предстоящем стандарте ES6 и попытаемся понять дальнейшее развитие JS.

Добро пожаловать в серию «ES6 в деталях»! В этой еженедельной серии статей мы будем изучать ECMAScript 6 — новую готовящуюся к выходу спецификацию языка JavaScript. ES6 имеет множество новых возможностей, которые делают JS мощнее и выразительнее, и каждую неделю мы будем рассматривать эти возможности. Но прежде чем мы приступим, неплохо бы поговорить о том, чем является ES6 и что от него ожидать.

Native script (NS) – это библиотека, позволяющая делать кросс-платформенные приложения, используя XML, CSS, JavaScript. Native script решает ту же задачу, что и уже всем известный phonegap (создание кросс-платформенных приложений), но подходы у них разные. Phonegap использует движок браузера, чтобы отобразить ваш UI (фактически вы получаете веб-страницу), Native script использует нативный рендеринг, использует элементы нативного UI. Следующее важное отличие: чтобы получить доступ к камере, gps и так далее в phonegap необходимо устанавливать плагины, в то время как NS дает доступ из коробки.

Часто путают терминал и шелл. В тех же *nix есть шеллы (bash, csh, zsh, …) и терминалы (konsole/guake/yaquake/tilda и т.д. и т.п.) Для мира Windows общеизвестный терминал только один – стандартное консольное окошко, которое часто ошибочно называют «cmd.exe». И мало кто знает о существовании множества других эмуляторов терминала. Известных шеллов больше, их целых два: cmd.exe и powershell.exe. И хотя есть как минимум три порта bash (MinGW, CygWin, GIT) многие юниксоиды предпочитают ругать cmd.exe.

Меня не устраивал ни один из найденных альтернативных терминалов (как в 2009-м, когда я начал работу над ConEmu, так и сейчас). Казалось бы требований немного, вот основные:

Пытаясь разобраться с библиотекой от Facebook ReactJS и продвигаемой той же компанией архитектурой «Flux», наткнулся на просторах интернета на две занимательные статьи: «ReactJS For Stupid People» и «Flux For Stupid People». Чуть раньше я поделился с хабравчанами переводом первой статьи, настала очередь второй. Итак, поехали.

Flux для глупых людей

TL;DR Мне, как глупому человеку, как раз не хватало этой статьи, когда я пытался разобраться с Flux. Это было не просто: хорошей документации нет и многие ее части перемещаются.

Это продолжение статьи «ReactJS For Stupid People».

Перевод статьи «Building robust web apps with React: Part 1, in-browser prototypes», Matt Hinchliffe

От переводчика: это первая статья из цикла «Building robust web apps with React».
Переводы:

• Построение надежных веб-приложений на React: Часть 1, браузерные прототипы
• Построение надежных веб-приложений на React: Часть 2, оптимизация с Browserify
• Построение надежных веб-приложений на React: Часть 3, тестирование с Jasmine
• Построение надежных веб-приложений на React: Часть 4, серверная генерация

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


404PageFound содержит до сих пор работающие сайты, созданные еще в 1993 году.

Уже год как я начал пытаться программировать под Android, и весь год меня в этом поддерживал добрый друг Android Studio. Безусловно, я продвигался бы намного быстрее, знай зеленый я о хоткеях больше, но в свое время я не нашел цельного и понятного справочника важных горячих клавиш IDE, а посему написал его сам. В нем далеко не все комбинации, лишь те, что показались полезными в работе, за исключением Ctrl+C, Ctrl+V, Ctrl+X и Ctrl+Z. Выставляю его на суд общественности и для всеобщего пользования здесь:

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

Чтобы использовать AppCache, создается файл описания с расширением «appcache», например, manifest.appcache. В этом файле можно перечислить все файлы, которые должны кэшироваться. Чтобы включить эту функцию на вашем сайте, необходимо включить ссылку на этот файл описания на вашей веб-странице в html-элемент следующим образом:

Со времён систематизации методов объекта console прошло достаточно много времени, некоторые браузеры получили поддержку недостающих ранее методов. Таблица вызывает естественный интерес у разработчиков, поэтому — почему бы её не обновить, дополнив в одной статье описаниями? Github.

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

Прощай, XMLHttpRequest!

fetch() позволяет вам делать запросы, схожие с XMLHttpRequest (XHR). Основное отличие заключается в том, что Fetch API использует Promises (Обещания), которые позволяют использовать более простое и чистое API, избегать катастрофического количества callback'ов и необходимости помнить API для XMLHttpRequest.