JavaScript *

Доброго времени суток, друзья!

Представляю вашему вниманию три задания по JS, предложенные участникам Microsoft’s Online Assessment 2019.

Microsoft’s Online Assessment — предварительный отбор кандидатов в разработчики. Тех, кто прошел предварительный отбор, приглашают на онлайн собеседование. Нашел в сети информацию, что на решение задач отводился ровно один час, но это не точно.

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

За решения огромное спасибо Matt Clark.

Итак, поехали.

В попытках оптимизировать 2D анимацию созданную в canvas, был найден один интересный вариант.

Предварительная визуализация — prerender.

"А что если записать все кадры заранее и показать их после окончания анимации?" — подумали мы с товарищем и вот что получилось на следующий день.

ഹലോ Эмберисты!

Присылайте видео для вступительного слова на EmberConf, вышла новая версия Ember 3.16, Сапер встречает Ember Octane, прочитайте рассказ о первом опубликованном аддоне, пройдите опрос сообщества Ember 2020, и узнайте, как пересылать модификаторы элементов за <10 минут !

От переводчика: Все ссылки без пометки указывают на англоязычные ресурсы. На русском вопросы можно задать в вашем любимом телеграмм-канале

Готов ответить на ваши вопросы.

Приготовьтесь написать клон сервиса по доставке еды deliveroo.co.uk используя современные технологии: Nuxt.js, GraphQL, Strapi и Stripe!

От входа до оформления заказа, мы дадим пользователям возможность открывать для себя новые рестораны, блюда и выбирать свою любимую еду.

Сейчас доступно приличное количество материалов по написанию API на node.js. Большинство из них в виде туториалов и демо-примеров в документациях. Этого достаточно, чтобы быстро разобраться и написать что-то свое. Но в них редко найдутся детали, почему это делается именно так. А некоторые моменты и вовсе опускаются для простоты и краткости.

Это статья нацелена, чтобы заполнить некоторые пробелы, которые могли возникнуть, и в конечном счете улучшить вам сервис на node.js.

P.S. Ни в коем случае не считаю себя экспертом: есть куда расти. Но вместе с тем есть чем поделиться.

Файловая структура проекта

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

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

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

Системы частиц это одни из самых простых способов сделать 3D сцену визуально богаче. В одном из наших Android приложений 3D Buddha Live Wallpaper достаточно простая сцена, которой было бы неплохо добавить чуть больше деталей. И когда мы думали как добавить разнообразия изображению то самым очевидным решением заполнить пустое пространство вокруг статуи Будды стало добавление клубов дыма или тумана. Благодаря использованию мягких частиц мы достигли довольно хорошего результата. В этой статье мы детально опишем реализацию мягких частиц на чистом WebGL / OpenGL ES без использования сторонних библиотек и готовых 3D-движков.

Разница между старым и обновленным приложением даже превзошла наши ожидания. Простенькие частицы дыма существенно улучшили сцену, сделали ее богаче и полнее. Клубы дыма это и дополнительные детали за которые “цепляется глаз”, а также способ сделать переход между основными объектами и фоном более плавным:

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

Мессенджеры, это отличная альтернатива, и это путь, который я выбрал. Telegram предоставляет один самых простых способов создания ботов (если не самый простой). На его месте может быть что угодно — другие мессенджеры, телефонные звонки (Amazon Connect) или Яндекс Диалоги.

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

Привет Хабр! Изучал недавно красно-черные деревья. Попробовал визуализировать детали работы алгоритмов вставки и удаления на d3.js. Надеюсь, полученный результат поможет сэкономить немного времени тем, кто изучает алгоритмы на javascript. Посмотреть можно тут. Исходник реализации, от которой отталкивался тут . Под катом краткие подробности.

Если вдруг кому интересно то я веду телеграм канал по фронтенду где выкладываю интересные статьи на разные темы а так же сам периодически пишу шорт-риды которые могут быть вам полезны. А теперь поехали!

---

Привет, Хабр! Представляю вашему вниманию перевод статьи «7 Tricks with Resting and Spreading JavaScript Objects» автора Joel Thoms.

Всем привет, на днях коллега по работе скинул мне ссылку на статью на английском языке в которой перечисляются разные методы работы с rest и spread операторами. Она оказалась мне полезна и я решил её перевести. Итак, начнем.

Этот пост является вторым в серии статей об авто-трекинге — новой системе реактивности в Ember.js. Я также обсуждаю концепцию реактивности в целом, и как она проявляется в JavaScript.

От переводчика: Крис Гарретт — работает в компании LinkedIn и является одним из core-контрибьюторов js-фреймворка Ember. Он принимал активное участие в создании нового издания фреймворка — Ember Octane. Одним из краеугольных камней этой редакции является новая система реактивности на основе автоматического отслеживания (autotracking). Несмотря на то, что его серия написана для Ember-разработчиков в ней затрагиваются концепции, которые полезно знать всем веб-программистам.

Один ранимый, глупый, мечтательный верстальщик решил стать программистом и у него ничего не вышло… Но он не бросил программировать и решил начать с малых программ…

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

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

Это не обучение. Больше похоже на блог.

Была цель сделать 3 версии игры крестики нолики.

1 — Самое простое(без красивого визуала, с помощью DOM)
2 — Дать возможность играть вдвоем(один компьютер)
3 — Перенести все это в canvas

Описывать крестики-нолики я не буду, надеюсь, все знают принцип игры. Все полезные ссылки(репозиторий, документация) будут в конце статьи.

Что из этого вышло? Хм…

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

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



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

Материал, перевод которого мы сегодня публикуем, посвящён рассказу о 10 React-компонентах.

Начав разрабатывать боты для Telegram несколько лет назад, я открыл для себя производительность, простоту и гибкость работы с ними как с частным случаем интерфейса командной строки. Эти характеристики, доступные сегодня многим — во многом заслуга популярного фреймворка telegraf.js и ему подобных, которые предоставляют упрощенные методы для работы с API Telegram.

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

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

Доброго времени суток, друзья!

Chrome Developer Tools — очень мощный набор инструментов для разработки веб приложений. С помощью этих инструментов мы можем перемещаться по DOM, осуществлять проверку запросов на сервер, настраивать производительность приложений и др.

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

Какие-то приложения грузятся быстро, какие-то медленно, но за счет чего это происходит? Только ли скорость загрузки страницы является показателем производительности приложения?

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

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

В нём всё, конечно, крутится вокруг JavaScript. Поэтому если вы используете для веб-разработки JS — я очень рекомендую взглянуть на State of JavaScript в том случае, если вы ещё этого не сделали.

Для меня одним из самых интересных результатов State of JavaScript стало неожиданное внимание тех, кто участвовал в опросе, к фронтенд-фреймворку Svelte.

В общем рейтинге ведущих фронтенд-инструментов (основанном на показателях осведомлённости о фреймворке, интереса к нему и удовлетворённости им) Svelte появился на второй позиции. Он идёт там сразу после React, опережая такие хорошо известные инструменты, как Vue.js, Preact, Angular и Ember.
Меня это слегка шокировало, так как Svelte — это сравнительно новый инструмент — как в плане возраста, так и в плане парадигмы разработки программного обеспечения.

Рейтинг фронтенд-фреймворков по результатам исследования State of JavaScript

Периодически возникает желание положить в базу «неположимое» — например, засунуть очень длинную строку. Нет, записать ее в поле таблицы — для PostgreSQL проблем нет, но вот в индекс…

Проблема в том, что вся строка (ROW) индекса целиком должна полностью умещаться на одной странице данных (8KB), иначе вас ждет примерно такая ошибка:

ERROR: index row size… exceeds maximum… for index ...

То есть даже в простейшем случае индекса из единственной строки — можно наступить на грабли. Как с ними бороться?