JavaScript *

Карантин и переход на удаленку наводят на ностальгические воспоминания о полном жизни офисе, когда вместо звонков и трансляций мы работали и собирались на хакатонах в одной комнате с коллегами. Сегодня вспомним хакатон, где мы писали веб-сервер на Lua, а заодно кратко пробежимся по истории развития real-time web. Под этим термином мы будем понимать технологии, которые позволяют делать в браузере вещи, сравнимые по UX с десктопными приложениями — когда отклик на действия или события приходит сразу. Вспомним, как это делалось раньше, как делается сейчас, сравним существующие решения и расскажем, что и как используем сами. Видео-версию оригинального доклада можно посмотреть на нашем канале.

История

iframe

Начнем с начала нулевых — многие, наверное, помнят чаты на iframe. Сейчас уже сложно назвать это real-time технологией, но тем не менее. Принцип работы — в HTML-документ с помощью тега iframe встраивается содержимое другой веб-страницы — например, блок с чатом в игре. При обновлении этой встроенной части вся остальная страница не обновляется.

Имеется древняя игрушка LaserAge, которая написана на Flash (на очень древнем Macromedia Flash 4) и работает только под Windows. В детстве она мне очень понравилась, поэтому я решил для души портировать её, чтобы можно было играть с браузера со всех устройств.

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

При уничтожении всех противников на уровне происходит переключение на следующий уровень. Всего 100 уровней.

В терминах игры уровень — волна (Wave), а несколько волн объединены в большой уровень (Level), который представляет из себя просто смену заднего фона, т.е. всего 4 больших уровня в каждом из которых 25 волн. В последней волне большого уровня обычно бывает босс — противник с огромным значением жизни и мощным оружием.

Вышел Angular 10.0.0! Это — мажорный релиз, который затрагивает всю платформу, включая сам фреймворк, библиотеку компонентов Angular Material и инструменты командной строки. Размер этого релиза меньше, чем обычно. Дело в том, что с момента выхода Angular 9 прошло всего 4 месяца.

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



Поговорим о том, что нового появилось в Angular 10.

Привет, хабр! Уже сегодня на otus.ru стартует курс "Fullstack разработчик JavaScript" и я решил поддержать ребят этой статьей. Я кстати сам преподаю на курсе по React.js.

Есть такой принцип — Don't break the web, который можно раскрыть как "веб всегда старается сохранить максимальную обратную совместимость". В некоторой мере этот принцип применим и к веб сайтам и приложениям — ваш сайт должен работать не только в одном конкретном браузере, но в целом наборе разных браузеров и версий. Но в каких? Однозначно должны быть какие-то разумные пределы и IE 6 и netscape navigator поддерживать не стоит, но два вопроса остаются открытыми: какие браузеры вы поддерживаете и как это обеспечить?

Если есть обратная совместимость значит что-то меняется. Меняются в вебе три вещи: ECMAScript (javascript), CSS и различные Web API. CSS мы сегодня оставим на опушке, а пока, тропинка ведет нас в дебри современной фронтенд разработки

Всем привет! Меня зовут Вова, я фронтэндер в Тинькофф. Наша команда отвечает за два продукта для юридических лиц. О размерах продукта я могу сказать цифрами: полный регресс каждого из продуктов двумя тестировщиками проходит от трех дней (без влияния внешних факторов).

Сроки значительные и напрашиваются на борьбу с ними. Способов борьбы несколько, основные из них:

• Распил приложения на более мелкие продукты со своими релизными циклами.
  
• Покрытие продукта тестами в соответствии с тестовой пирамидой.
  

Последний пункт и стал темой моей статьи.

Есть ли способ улучшить свои навыки в 10 раз? Есть ли какой-то волшебный секрет, который — если бы вы только знали это — открыл бы для вас совершенно новый мир мастерства и производительности в разработке программного обеспечения?

Вот где сомневающиеся думают: «Здесь не удастся срезать углы! Каждый должен практиковаться, чтобы стать хорошим!» И это действительно так, но что практикуют специалисты чтобы ускорить разработку программного обеспечения, и есть ли одна ключевая вещь, которая может иметь огромное значение?

Да! Есть!

Но даже если я поделюсь им с вами — даже если я подробно изложу его для вас — вам может потребоваться 10 лет, чтобы вырасти и полностью оценить его простоту.

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

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

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

Секрет того, чтобы быть в 10 раз более продуктивным, заключается в овладении абстракцией. Многие разработчики относятся к «абстракции» как к грязному слову. Вы можете услышать совет, например, «не абстрагируйтесь слишком рано» или знаменитое в Zen Python «явное лучше, чем неявное», подразумевая, что конкретное лучше, чем абстрактное. И все это хорошие советы — в зависимости от контекста.

А Вас не посещала мысль, что вёрстка руками — это долго, дорого, избыточно и устарело?
Меня вот постоянно. В данной статье я поверхностно затрону текущее состояние индустрии, проблематики и поделюсь результатами своих исследований.

Интересно? Добро пожаловать под кат!

Как Web Scraping помог собрать нам данные по официальным коллекциям как у Белгазпромбанка.

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

Помните как Apple представила iOS7 c эффектом параллакса? Теперь это можно делать прямо в браузере.


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

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

Я никогда не работала профессиональным фронтенд-разработчиком, и хотя уже 15 лет пишу HTML/CSS/JS для небольших побочных проектов, но все проекты были довольно маленькими. Бывает, что я не пишу на Javascript в течение многих лет между этими проектами, и часто не уверена в том, что всё делаю правильно.

Отчасти поэтому я часто использовала библиотеки! Десять лет назад я использовала jQuery, а где-то с 2017 года для моих маленьких проектов много использую vue.js (можете посмотреть небольшую игру типа «сапёр», которую я сделала в качестве вступления к Vue).

Но на прошлой неделе, впервые за долгое время, я написала простой Javascript без библиотеки, и это было весело, поэтому я хотела немного поговорить об этом!

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

Представляю Вашему вниманию перевод статьи «What JavaScript Developers Should Know About Curl» автора Valery Karpov.

Curl — это популярный инструмент командной строки, часто используемый для отправки HTTP-запросов. Curl поддерживает большое количество протоколов, однако как Node.js-разработчик вы, скорее всего, будете использовать его для отпраки http-запросов к RESTful API.

Документация curl представляет собой перечень из 383 флагов командной строки, поэтому в ней очень трудно найти то, что ищешь. В этой статье я хочу поделиться с вами некоторыми часто используемыми мной шаблонами. Для примеров будет использоваться сервис httpbin.org.

Недавно мне на глаза попалась одна статья на Хабре. В ней сравниваются C# и JavaScript. На мой взгляд, сравнивать их — всё равно что сравнивать луну и солнце, которые, если верить классику, не враждуют на небе. Эта статья напомнила мне о другой публикации. В ней речь идёт о сценариях неожиданного и неочевидного поведения JavaScript, а C# не упоминается от слова совсем, но живое любопытство сподвигло меня попытаться повторить подобное поведение на другом языке.

В разработке приложений на Typescript всегда есть этап сборки проекта. Обычно для этого используются системы сборки и автоматизации workflow, такие как webpack или gulp, обвешанные достаточным количеством плагинов, либо процесс сборки размазывается в командах package.json и шелл-скриптах с использованием нативного tsc или команд CLI используемого в проекте фреймворка. Все эти решения имеют свои плюсы и минусы. Зачастую в процессе сборки нужно сделать что-то нестандартное, и оказывается, что используемая система сборки не предоставляет нужную функциональность из коробки, а имеющиеся плагины делают не совсем то, что надо. В такие моменты работа над проектом встает, и начинается судорожное ковыряние в конфигах и поиск подходящего плагина. В какой-то момент понимаешь, что за время, потраченное на поиск подходящего костыля, можно было написать свое решение.

Во многих случаях критичные процессы в проекте можно автоматизировать скриптами на javascript, выразительность и функциональность которого вполне позволяет описать нужный workflow и выбирать из всего разнообразия библиотек, не заморачиваясь наличием для них плагинов под конкретную систему сборки. Важное преимущество такого подхода – полный контроль над процессами и максимальная гибкость. Для проектов, в которых используется Typescript в качестве основного языка разработки, возникает вопрос, как встроить процесс его компиляции в свой workflow. Здесь на помощь приходит Typescript Compiler API. В этой статье мы посмотрим, как его можно использовать для того, чтобы выполнить компиляцию проекта, реализованного на Typescript, взаимодействуя с компилятором на разных этапах его работы и напишем скрипт для hot-reloading’а REST-сервера, разработанного на Nest.js.

Привет, Хабр! Меня зовут Влад, я лид направления Web Performance в Тинькофф.

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

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

Ведущие игроки IT-индустрии продолжают обращать внимание на важность производительности, проводят масштабные исследования и эксперименты, разрабатывают новые концепции, инструменты и API. А в ближайшем будущем Google и вовсе будет учитывать основные показатели производительности в поисковой выдаче.

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

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

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

Из известного мультфильма:
— я хочу измерить свой рост!
— два слоненка
— пять мартышек
— 38 попугаев и одно попугайское крылышко

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

Что ж, чтоб не горело, там где сидело, предлагаю разработать некую систему оценок

Дано:
1) многие менеджеры не любят диапазоны в оценках
2) [ходят слухи] на задачу тратится все отведенное время
3) слишком много вариантов для оценки (1 час, 2 часа, 3, 4, 5,… n)
4) роль тимлида не учтена

Всем привет! Давно хотел и наконец написал небольшую книжку — бодрое пособие по своей профессиональной области: актуальным подходам к разметке интерфейсов, экранному дизайну и доступности. Она о моем оригинальном подходе к созданию GUI, препроцессорам CSS (для объективности, немного и об альтернативных подходах), и его эффективном практическом использовании с javascript и популярными реактивными компонентными фреймворками Vue и React. Материал представлен аккуратно последовательно, но безумно интенсивно и динамично — ничего лишнего или даже слишком подробного — для того чтобы увлеченный и подготовленный читатель не потерял интереса и «проглотил на одном дыхании». С другой стороны, текст, достаточно сложный ближе к концу, и на всем протяжении — густо насыщенный идеями, ссылками на технологии и подходы — поэтому, очевидно, будет «на вырост» начинающим. Но, в любом случае, как и если вы только начали интересоваться данной тематикой, так и если уже давно занимаетесь веб-дизайном, версткой и программированием фронтенда — вам может быть полезно на него взглянуть.

Введение

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

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

Начало работы

Если вы уже знакомы с приведёнными ниже материалами, — смело можете пролистать этот раздел.

В Angular очень мощный механизм Dependency Injection. Он позволяет передавать по вашему приложению любые данные, преобразовывать и переопределять их в нужных частях.

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

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

В этой статье я хотел бы показать альтернативный вариант работы с полученными из DI данными. Цель: упростить компоненты, директивы и сервисы, которые эти данные используют.