JavaScript *

Нередко рассказы о том, как веб-разработчики заботятся о своих приложениях, начинаются с процесса визуализации сайта, опускаются на уровень DOM и останавливаются на утверждениях типа: «И это быстро потому, что используется ускорение». Мартин Сплитт рассказывает о производительности снизу вверх: он начинает с пикселя и поднимается уровень за уровнем, заканчивая компоновкой страницы.


В основе статьи – выступление Мартина на JavaScript-конференции HolyJS 2017 в Питере, где он рассказывает о том, как происходит визуализация в браузерах и что нужно делать для того, чтобы ваши сайты «летали».

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

Всем ведь давно надоели колбэки в асинхронных вызовах и спагетти код? К счастью, в es6 появился новый сахар async/await для использования любых асинхронных функций без головной боли.

Представим себе типовую задачу. Клиент положил товары в корзину, нажал «Оплатить». Корзина должна улететь в ноду, создается новый заказ, клиенту возвращается ссылка на оплату в платежную систему.

Нужны ли фронтендеру алгоритмы и паттерны проектирования?

На самом деле, наверняка вы уже их используете, но можете ещё лучше.

30 ноября в Питере пройдет ежегодная встреча Dart-разработчиков. Что это такое?
Во-первых, это возможность узнать что-то новое (если вы вдруг никогда не слышали о Dart). Во-вторых, это повод хорошо провести время, тем более, что в этот раз всё будет не совсем обычно.

Перед вами четвёртая часть серии материалов, которые посвящены разработке веб-приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой, второй и третьей частях речь шла о создании основных серверных и клиентских компонентов приложения. Сегодня мы продолжим развитие проекта, а именно — займёмся списками документов и клиентов. Кроме того, нельзя не заметить, что к настоящему моменту сделано уже немало, поэтому вполне можно критически взглянуть на то, что получилось, и поработать над повторным использованием кода.

От переводчика

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

Предисловие

В этой статье представлен новый метод эксплуатации переполнения кучи (heap
overflows) в интерпретаторах JavaScript. Вкратце, для получения heap
overflow можно использовать команды JavaScript для обеспечения надежного отображения указателя функции сразу после переполнения буфера. В данном учебном исследовании используется техника для Safari, которую авторы использовали для победы в конкурсе CanSecWest 2008 Pwn2Own.

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

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

Перед вами — перевод пятого материала из серии, посвящённой особенностям JS-разработки. В предыдущих статьях мы рассматривали основные элементы экосистемы JavaScript, возможностями которых пользуются разработчики серверного и клиентского кода. В этих материалах, после изложения основ тех или иных аспектов JS, даются рекомендации по их использованию. Автор статьи говорит, что эти принципы применяются в ходе разработки приложения SessionStack. Современный пользователь библиотек и фреймворков может выбирать из множества возможностей, поэтому любому проекту, для того, чтобы достойно смотреться в конкурентной борьбе, приходится выжимать из технологий, на которых он построен, всё, что можно.

Seneca — microservices toolkit для Node.JS. Он предоставляет плагины, которые заботятся об основах вашего приложения. Это позволяет сосредоточиться на реальной бизнес-логике. Нет необходимости беспокоиться о том, какую базу данных использовать, как структурировать компоненты или как управлять зависимостями. Просто начните писать код.

Вы описываете всё как действия. Действия вызываются всякий раз, когда они соответствуют набору свойств. Ваш вызывающий код не знает и не заботится, какое действие выполняет работу. Один объект JavaScript входит, а другой выходит, асинхронно.

Чем Seneca.js не является

Я люблю конкретные сравнения, и увы я быстро делаю поспешные обобщения, которые могут в конечном итоге причинить мне боль. Чтобы этого избежать, вот список того, что нет у Seneca:

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

Во фронтенде практически безраздельно правит OpenSource, а с недавних пор набирает популярность компонентный подход. Вроде бы всё чудесно. Небольшим компаниям компонентный подход помогает переиспользовать код, а крупным компаниям выравнивать UX во всей линейке продуктов, сервисов и прочего. И вот мы все такие замечательные крутые разработчики пилим свои фреймворки, библиотеки и виджеты, радостно полагая, что если они решают наши задачи, то решают и проблемы окружающего мира. Мы выкладываем их в паблик, ожидая благодарных пользователей, звезд на GitHub, скачиваний на NPM-е. Но почему-то одни библиотеки взлетают, а другие остаются незамеченными и позабытыми.

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

Эта статья основана на моём выступлении на ITSubbotnik, прошедшем в Рязани 14 октября 2017 года. На русском пока что довольно мало материала на эту тему, надеюсь что статья будет вам полезна.

Disclaimer: Автор не является экспертом ни в WebAssembly, ни в JavaScript. Данная статья есть компиляция мыслей и идей, полученных из выступлений других людей на данную тему, плюс эпизодического опыта изучения WebAssembly в течение нескольких месяцев.

В мире современных веб-технологий все стремительно развивается и меняется. Пару лет назад совершенно нормальным было по запросу клиента рендерить DOM структуру на сервере (например, при помощи PHP) и отдавать уже полностью сформированную страницу. Сейчас все чаще появляются сайты c полным отделением фронтенда (Angular, React, Vue.js...) от бэкенда (некие API эндпоинты), где на фронтенде почти весь контент формируется посредством скриптов, а сервер отдает только данные по запросу. Тут можно было бы упомянуть SSR (Server Side Rendering), но не об этом данное произведение.

В любые времена перед разработчиками и владельцами сайтов стояла непростая задача: доставить контент как можно быстрее, как можно большему количеству клиентов. Одно из самых правильных решений — использовать CDN (Content Delivery Network) для раздачи статичных файлов. В случае с динамическим рендером страниц на сервере мы должны были ограничиваться небольшим списком объектов, которые можно было разместить в CDN: таблицы стилей, файлы скриптов, изображения. Однако, фронтенд, написанный на Angular (React, Vue.js...), статичен целиком, включая индексную страницу. Вот тут и возникает мысль: а почему бы не организовать раздачу через CDN всего фронтенда?

В данной статье пойдет речь о настройке комплексного решения для разработки, контроля версий, автоматической сборки и доставки статического сайта с использованием Gitlab CI, Amazon S3 и Amazon CloudFront. Также речь пойдет о настройке сопутствующих вещей: git, безопасное соединение по протоколу HTTPS, доменная почта, DNS хостинг, бэкенд сервер…

Если вас заинтересовала эта тема, добро пожаловать под кат. Осторожно! Много скриншотов.

Собрал в кучу свои впечатления от конференции, которая прошла 7-8 ноября.

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

70 тысяч звездочек на гитхабе и сотни интересных проектов. Кажется, что D3 это что-то большое и очень сложное, но это не так. Я расскажу об основах D3 и поделюсь опытом разработки инфографики Бюростат.

Сегодня публикуем третью часть из серии материалов, посвящённой разработке приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой и второй частях мы создавали сервер, настраивали механизмы аутентификации и занимались обустройством фронтенда. В этом материале продолжим работать над клиентской и серверной частями системы. То, что уже создано, пока почти не касается логики самого приложения, которое предназначено для работы с финансовыми документами. Поэтому, кроме прочего, мы займёмся и этим аспектом проекта.

Здравствуйте, меня зовут Дмитрий Карловский. Недавно я оказался при смерти и понял как сильно я люблю Жизнь. Это идеальная игра для социопатов, где вы выступаете в роли бога, своею дланью единоправно решающего кому жить, кому умереть, а кому фаллоформировать. Новая клетка появляется как результат соития трёх других однополых соседей и умирает будучи затоптанной толпой из более чем трёх, оставшись наедине с собой или в компании всего одного. Кто бы мог подумать, что столь простые законы породят настолько огромное разнообразие игрового опыта, что играть в Жизнь будут и спустя 50 лет после их формулировки.

Если вы ещё не работали со $mol, то перед чтением рекомендуется прочитать более дружелюбное к новичкам руководство "$mol_app_calc: вечеринка электронных таблиц". А если его уже осилили, то далее вы узнаете:

1. Как работать с бесконечным жизненным полем.
2. Как рисовать быструю векторную графику.
3. Как в $mol легко и просто соединить управление пальцем и рисование графики.

Прошли те дни, когда мне, в процессе разработки, приходилось тратить время, переключаясь между терминалом, браузером и редактором. Теперь всё делается иначе — быстрее и удобнее. Сегодня я расскажу об оптимизации повседневных дел React-разработчика. А именно, речь пойдёт о том, как связать Visual Studio Code и Google Chrome. Это даст возможность отлаживать браузерный код в редакторе.


Средства отладки VS Code и jest от Facebook

Многие здесь уже знакомы со Smashing Magazine — сайтом для веб-дизайнеров и веб-разработчиков. А ещё они издают книги и проводят конференции Smashing Conference.

С посещаемостью около 5 миллионов в месяц (раз в 10 раз меньше, чем у Хабра, но тем не менее), он является одним из ведущих интернет-изданий по веб-дизайну. Интересная особенность — если зайти на главную страницу сайта, он определяет включенный AdBlock, но не запрещает просматривать страницы — вместо этого скромно намекает, что неплохо бы купить какую-нибудь книгу. Все, кто пропагандировал идею, что популярному сайту не выжить без кучи рекламы, сейчас напряглись :-)

Мы взяли интервью у одного из основателей сайта (и спикера на HolyJS) — Виталия Фридмана. Мы поговорим о предыстории создания сайта, его технологическом стеке и процессе разработки, о чудесах с возможностью невозбранно использовать AdBlock, а также планах на будущее.