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


Людям, знающим как делать такие игры, будет скучно; людям, знающим JS, рекомендую смотреть на код сквозь пальцы (во избежание травм) и читать только про механики. Под катом последовательная инструкция, ориентированная на новичков.

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

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

Список тем, которые покрывает туториал внушает:

• Использование Ember CLI
• Навигация по структуре файлов и папок приложения Ember
• Создание и связь между страницами
• Шаблоны (templates) и компоненты
• Автоматизированное тестирование
• Работа с данными сервера
• Динамические сегменты в маршрутах
• Сервисы в Ember
• Библиотека Ember Data
• Адаптеры и сериализаторы
• Паттерн компонента-провайдера

Садитесь поудобнее, открывайте терминалы, находите проект на своем компьютере и давайте двигаться дальше. И помните, что если у вас возникнут трудности, всегда можно попросить помощи в Discord канале сообщества (на русском канал #lang-russian), а также в русскоязычном телеграмм канале ember_js

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



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

---

С чем можно столкнуться при синхронизации Web Audio и геймплейных часов внутри javascript-приложения; сколько вообще разных «часов» есть в javasctipt (три!) и зачем все они нужны, а также готовое приложение для node.js – под катом.

После довольно удачной пробы пера с Ember Octane я решил (точнее мы с гуглотранслейтом решили) замахнутся на святое перевод туториала из официального руководства Ember.js

Как вы увидите из текста, данный туториал рассчитан на самых маленьких начинающих программистов. Что не мешает ему служить опытным бойцам прекрасной отправной точкой для знакомства фреймворком. Для полного прохождения этой игры туториала вам понадобится 1-2 часа времени. После этого вы сможете оценить Ember.js в его последней редакции Octane без необходимости читать обзоры позапрошлогодней свежести

Список тем, которые покрывает туториал внушает:

• Использование Ember CLI
• Навигация по структуре файлов и папок приложения Ember
• Создание и связь между страницами
• Шаблоны (templates) и компоненты
• Автоматизированное тестирование
• Работа с данными сервера
• Динамические сегменты в маршрутах
• Сервисы в Ember
• Библиотека Ember Data
• Адаптеры и сериализаторы
• Паттерн компонента-провайдера

Если вы согласны, что это вкуснота стоит траты 1-2 часов, добро пожаловать под кат!

В последние годы всё больше платформ для оптимизации фронтенд-проектов предлагают возможности по самостоятельному хостингу или проксированию сторонних ресурсов. Akamai позволяет задавать специфические параметры для самостоятельно создаваемых URL. У Cloudflare есть технология Edge Workers. Fasterzine может переписывать URL на страницах так, чтобы они указывали бы на сторонние ресурсы, находящиеся на основном домене сайта.



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

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

Сегодня мы продолжим наши изыскания на тему функционального программирования в разрезе EcmaScript, на спецификации которого основан JavaScript. В предыдущих статьях цикла были рассмотрены следующие темы:

1. Чистые функции, лямбды, имутабельность
2. Композиция, каррирование, частичное применение

Ember Octane — это новая редакция фреймворка Ember.js, а также лучший способ для команд создавать амбициозные веб-приложения.

20 декабря вышла новая версия Ember 3.15. И это Octane! Любопытно, что это значит для веб-разработки? Этот пост поможет вам сориентироваться.

Мы с гуглотранслейтом усердно старались над переводом (особенно гуглотранслейт). Добро пожаловать под кат!

Badoo регулярно участвует со стендом в выставках IT-конференций. Поэтому каждый год мы с коллегами — инженерами и деврелами — придумываем, что бы такого айтишного сделать, чтобы не скучать в перерывах между докладами.

Меня зовут Иван, я frontend-разработчик. В этой статье вместе с коллегой и DIY-энтузиастом lilek Юрой Лилековым мы расскажем, как при помощи двух красных кнопок, одного микроконтроллера, кода на React и 250 слов на айти-тематику мы сделали игру «IT-угадайка» и собрали уютную тусовочку на Highload++ и Heisenbug.

Lifecycle hooks (Хуки жизненного цикла) — это очень важная часть любого компонента. Нам, нашему приложению, часто нужно знать что происходит с компонентом, когда он создан, смонтирован, обновлен или уничтожен.

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

• created — экземпляр компонента создан
• mounted — экземпляр компонента cмонтирован
• updated — виртуальный DOM был обновлён из-за изменения данных
• destroyed — экземпляр компонента уничтожен
• и т.д. Документация

В коде нашего компонента это будет выглядеть так:

Как создать Простой веб-сервер, используя только стандартные инструкции nodejs

Часто для разработки MPA/SPA/PWA приложений требуется простой веб-сервер. Однажды, на одном большом митинге в ответ на вопрос: «Что ты делал?», я сказал, что поднимал веб-сервер для хостинга PWA приложения. Мы все долго смеялись и да, кстати, PWA это не клей. Как SPA — это не косметический салон. Все это виды веб-приложений. А SSR это не страна :-). Если запустить такое приложение просто открыв стартовую страницу index.html через браузер, оно не будет работать как должно, в лучшем случае мы получим оффлайн версию. Я люблю язык JavaScript и буду решать проблему, используя только доступные мне средства, так сказать из "коробки".

Всем привет!

Я только что выпустил релиз шестой версии библиотеки imaskjs. После каждого мажорного релиза мне кажется, что это последняя версия. Библиотеке уже не один год, она стабильна и достаточно популярна среди сообщества. Что там еще можно сделать да еще и на мажорную версию? Во всех своих проектах я стараюсь делать задачи так, чтобы больше к ним не возвращаться в рамках текущего контекста. Что может измениться в маске? — Браузеры не меняют свои API, javascript все такой же, бизнес задачи все те же — телефоны, карты, числа. Почему нельзя уже остановиться, довести до ума и больше не трогать?

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

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

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

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

Часто такое поведение искажает данные пользователя, приводит к ошибкам и является нежелательным.

Поиск источника таких нежелательных изменений свойств может занять долгое время: так программа может быть уже большой и состоять из сотни тысяч инструкций.

Всем привет!

До нового года остаются считанные дни. Наткнулся на свой список дел, которые собирался сделать в 2019-м, среди них оказалось и написать статью на Хабр. Самое время заскочить в уходящий вагон).

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

Что такое локализация?

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

Помните те времена, когда стеки веб-технологий были простыми? Когда уровни этих стеков можно было обозначить в виде четырёхбуквенного сокращения вроде LAMP, LEMP или LEPP? Когда всё, что было нужно для создания и поддержки сайтов, сводилось к вполне обычному железу, к какому-нибудь опенсорсному софту, да к упорству в достижении цели?

Мой первый успешный сайт, теперь уже старинный проект 1999 года, был создан с использованием технологий, которые можно пересчитать по пальцам одной руки: HTML4, CSS2, JavaScript3 и Apache 1.1. Всё это крутилось на сервере с Linux 2.0. Сайт включал в себя 38000 страниц. И сегодня, через 20 лет, он всё ещё их выдаёт.



С тех пор всё изменилось. Это касается и стеков веб-технологий. Теперь они совсем не те, что прежде.

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

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

Клеточные автоматы имеют различные формы, виды и размерности. Наверно, самым знаменитым клеточным автоматом является конвеевская игра «Жизнь» (Conway's Game of Life, GOL). Она состоит из двухмерной сетки, в которой каждая клетка содержит двоичное значение (живая или мёртвая). Сопутствующие правила на основании состояния соседних клеток определяют, должна ли клетка быть мёртвой или живой. Правила гласят, что живая клетка умирает от одиночества, если вокруг неё меньше 2 живых клеток. Если живы больше трёх соседних клеток, она погибает от перенаселённости. Другими словами, клетка «выживает», если вокруг неё ровно 2 или 3 живых соседних клеток. Чтобы мёртвая клетка ожила, у неё должно быть ровно 3 живых соседних клеток, в противном случае она остаётся мёртвой. Пример автомата GoL, итеративно проходящий несколько состояний, показан ниже.


Ещё один знаменитый вариант клеточного автомата одномерен; он называется элементарным клеточным автоматом (Elementary Cellular Automaton, ECA). Именно его мы реализуем в этом посте.

Это вторая, заключительная, часть туториала, в котором мы пишем TodoMVC-клиент с помощью минималистичного реактивного js-фреймворка dap.

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

Осталось реализовать: удаление произвольных дел, добавление новых дел, массовую установку/сброс и фильтрацию дел по признаку завершенности и функцию удаления всех завершенных дел. Этим мы и займемся. Финальный вариант клиента, к которому мы придем в этой статье, можно посмотреть здесь.

Продолжаю делать расшифровку своего доклада Docker для фронтендера с конференции FrontendConf 2019.

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

В 2019 году мир фронтенд-разработки, как уже бывало, развивался с головокружительной скоростью. Материал, перевод которого мы сегодня публикуем, посвящён обзору важных событий, новостей и трендов 2019 года.



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