Обновить
256K+

Веб-разработка *

Делаем веб лучше

434,81
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Какие видеокодеки (не) используют браузеры для видеозвонков

Время на прочтение8 мин
Охват и читатели8.2K

Типичный запрос в техподдержку Voximplant: «Почему видеозвонок между двумя Chrome выглядит лучше, чем видеозвонок между MS Edge и нативным iOS-приложением»? Коллеги обычно отвечают нейтральное — «потому что кодеки». Но мы, айтишники, любопытны. Даже если я не разрабатываю новый Skype-for-web, чтение «какой браузер что может» и как они разбивают одно видео на несколько потоков разного качества обогащает картину мира и дает свежую тему для обсуждения в курилке. Удачно подвернувшаяся статья от широко известного в узких кругах Dr Alex (с лучшим объяснением термина «media engine» из всех, что я видел), немного нашего опыта, пара вечеров в «Циферблате» — и адаптированный для Хабра перевод ждет под катом!
Читать дальше →

Разбор паттерна «Модуль» в JavaScript

Время на прочтение5 мин
Охват и читатели39K
Во многих языках программирования существуют механизмы, позволяющие скрывать, например, методы и свойства классов. В JavaScript нет встроенных средств, позволяющих, без дополнительных усилий, достигать таких эффектов. Однако подобные вещи можно имитировать с использованием других возможностей языка.

image

Материал, перевод которого мы сегодня публикуем, посвящён разбору паттерна проектирования «Модуль», который позволяет скрывать приватную информацию в замыканиях, давая доступ лишь к тому, что решил сделать общедоступным разработчик. Эта статья предназначена, в основном, для начинающих программистов — для тех, кто, вроде бы, знаком с такими вещами, как замыкания и IIFE, но пока не особенно уверенно ими пользуется.
Читать дальше →

Исследование Ivy — нового компилятора Angular

Время на прочтение12 мин
Охват и читатели11K
«Я думаю, что компиляторы — это очень интересно», — говорит Ури Шейкед, автор материала, перевод которого мы сегодня публикуем. В прошлом году он написал статью, в которой шла речь о реверс-инжиниринге компилятора Angular и об имитации некоторых этапов процесса компиляции, помогающей понять особенности внутреннего устройства этого механизма. Надо отметить, что обычно то, о чём автор этого материала говорит как о «компиляторе», называют «движком рендеринга».

Когда Ури услышал о том, что вышла новая версия компилятора Angular, названная Ivy, он тут же захотел рассмотреть её поближе и узнать, что в ней изменилось по сравнению со старой версией. Тут, так же, как и раньше, на вход компилятора поступают шаблоны и компоненты, созданные средствами Angular, которые преобразуются в обычный код на HTML и JavaScript, понятный Chrome и другим браузерам.



Если сравнить новую версию компилятора с предыдущей, то окажется, что Ivy использует алгоритм tree-shaking. Это означает, что компилятор автоматически удаляет неиспользуемые фрагменты кода (это относится и к коду Angular), уменьшая размер бандлов проектов. Ещё одно улучшение касается того, что теперь каждый файл компилируется самостоятельно, что уменьшает время повторной компиляции. Если в двух словах, то, благодаря новому компилятору мы получаем сборки меньших размеров, ускоренную повторную компиляцию проектов более простой готовый код.

Понимание того, как работает компилятор, интересно и само по себе (по крайней мере, автор материала на это надеется), но это, кроме того, помогает лучше понять внутренние механизмы Angular. Это ведёт к совершенствованию навыков «Angular-мышления», что, в свою очередь, позволяет более эффективно использовать этот фреймворк для веб-разработки.

Кстати, знаете, почему новый компилятор назвали Ivy? Дело в том, что это слово звучит как сочетание букв «IV», прочитанное вслух, которое представляет число 4, записанное римскими цифрами. «4» — это четвёртое поколение компиляторов Angular.
Читать дальше →

Чем на самом деле является Node.js?

Время на прочтение4 мин
Охват и читатели143K


Node.js это — среда выполнения JavaScript. Что же это значит, и как работает?
Окружение Node.js включает все, что вам нужно для выполнения программы, написанной на JavaScript.

angular-ngrx-data — state management и CRUD за пять минут

Время на прочтение11 мин
Охват и читатели33K
image
На сегодняшний день ни одно большое SPA приложение не обходится без state management (управления состоянием). Для Angular по данному направлению есть несколько решений. Самым популярным из них является NgRx. Он реализует Redux паттерн с использованием библиотеки RxJs и обладает хорошим инструментарием.

В данной статье мы кратко пройдемся по основным модулям NgRx и более детально сосредоточимся на библиотеке angular-ngrx-data, которая позволяет сделать полноценный CRUD со state management за пять минут.

Разные цены для складов в многоскладовости. Доработка 1С-Битрикс

Время на прочтение3 мин
Охват и читатели6.3K
Были интернет-магазин и b2b платформа у одной компании на системе 1с-Битрикс. Компания росла и появились свои склады и добавились еще склады партнеров которые нужно было отображать. Возникла необходимость отображения остатков по нескольким складам.

И что нам говорит Битрикс: Пожалуйста переходите на редакцию «Бизнес» и будет всё замечательно и сразу. На редакцию перешли и оказалось, что многоценновость и многоскладовость в 1С-Битрикс живут отдельной жизнью. Первая нужна для отображения разных цен для разных групп пользователей, а второе для отображения остатков на разных складах.

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

PWA — это просто. Hello Joomla

Время на прочтение5 мин
Охват и читатели8.4K
Продолжаем изучение Progressive Web Applications. После теоретической первой части и простого практического примера Hello Habr второй части попробуем перевести в PWA веб сайт на CMS Joomla.

Тип серверного фреймворка не важен. Задача данной статьи — показать перевод обычного сайта в PWA как концепцию, применимую к произвольным сайтам на любых фреймворках.

Читать дальше →

Собеседование по TypeScript: 20 вопросов и ответов

Время на прочтение12 мин
Охват и читатели159K
Язык TypeScript основан на том же синтаксисе и семантике, которые хорошо знакомы миллионам JavaScript-разработчиков. TypeScript даёт возможность работать с самыми свежими и ещё только появляющимися возможностями JS, включая те, которые имеются в ECMAScript 2015, и те, которые пока существуют лишь в виде предложений. Среди таких возможностей, например, асинхронные функции и декораторы. Всё это направлено на то, чтобы помочь разработчику в создании надёжных и современных приложений.

TypeScript-программа компилируется в обычный JavaScript-код, который может выполняться в любом браузере или в среде Node.js. Этот код будет понятен любому JS-движку, который поддерживает стандарт ECMAScript 3 или более новый.



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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №326 (6 — 12 августа 2018)

Время на прочтение3 мин
Охват и читатели14K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →

Опыт использования WebRTC. Лекция Яндекса

Время на прочтение8 мин
Охват и читатели29K
Что лучше использовать при разработке софта — нативные или веб-технологии? Холивар по этому поводу закончится ещё не скоро, но мало кто станет спорить, что нативные функции полезно продублировать для использования в браузерах или WebView. И если когда-то приложения для звонков существовали исключительно отдельно от браузера, то теперь их легко реализовать и в вебе. Разработчик Григорий Кузнецов объяснил, как пользоваться технологией WebRTC для P2P-соединений.


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

Как сделать поиск пользователей по Github используя Angular

Время на прочтение5 мин
Охват и читатели5.7K
image

Эта статья является ответом на:


Целью статьи является:

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

Целью статьи НЕ является:

  • разжигание очередного холивара.

Всех, кому интересно, прошу под кат.
Читать дальше →

Как сделать поиск пользователей по Github используя VanillaJS

Время на прочтение10 мин
Охват и читатели6.2K

Здравствуйте. Меня зовут Александр и я Vanilla ES5.1 разработчик в 2018 году.


Данная статья является ответом на статью-ответ «Как сделать поиск пользователей по GitHub без React + RxJS 6 + Recompose», которая показала нам, как можно использовать SvelteJS.


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


Делать будем всё тот же инпут, отображающий плашку GitHub-пользователя:


Читать дальше →

Как работает JS: пользовательские элементы

Время на прочтение17 мин
Охват и читатели26K
[Советуем почитать] Другие 19 частей цикла
Часть 1: Обзор движка, механизмов времени выполнения, стека вызовов
Часть 2: О внутреннем устройстве V8 и оптимизации кода
Часть 3: Управление памятью, четыре вида утечек памяти и борьба с ними
Часть 4: Цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
Часть 5: WebSocket и HTTP/2+SSE. Что выбрать?
Часть 6: Особенности и сфера применения WebAssembly
Часть 7: Веб-воркеры и пять сценариев их использования
Часть 8: Сервис-воркеры
Часть 9: Веб push-уведомления
Часть 10: Отслеживание изменений в DOM с помощью MutationObserver
Часть 11: Движки рендеринга веб-страниц и советы по оптимизации их производительности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 13: Анимация средствами CSS и JavaScript
Часть 14: Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация
Часть 15: Как работает JS: классы и наследование, транспиляция в Babel и TypeScript
Часть 16: Как работает JS: системы хранения данных
Часть 17: Как работает JS: технология Shadow DOM и веб-компоненты
Часть 18: Как работает JS: WebRTC и механизмы P2P-коммуникаций
Часть 19: Как работает JS: пользовательские элементы

Представляем вашему вниманию перевод 19 статьи из серии материалов компании SessionStack, посвящённых особенностям различных механизмов экосистемы JavaScript. Сегодня речь пойдёт о стандарте Custom Elements — о так называемых «пользовательских элементах». Мы поговорим, о том, какие задачи они позволяют решать, и о том, как их создавать и использовать.

image

Читать дальше →

Ближайшие события

Тренды дизайна в 2018: прогноз и реальность

Время на прочтение11 мин
Охват и читатели34K


Примечание переводчика: эту замечательную статью не перевели для Хабра ни в начале года, ни позднее. При том что она действительно полезная и заслуживает внимания. Поэтому, несмотря на то, что почти ⅔ 18-го года уже прожиты, я всё-таки решилась на перевод. Заодно сравнила прогнозы с реальностью, о чём оставила комментарии по тексту.

Внимание: под катом много тяжёлых гифок и красоты!
Читать дальше →

Что не так с популярными статьями, рассказывающими что foo быстрее чем bar?

Время на прочтение6 мин
Охват и читатели11K

Примечание переводчика: я тоже думал, что время статей "Что быстрее — двойные или одинарные кавычки?" прошло еще 10 лет назад. Но вот подобная статья ("What performance tricks actually work") недавно собрала на Реддите относительно большой рейтинг и даже попала в PHP дайджест на Хабре. Соответственно, я решил перевести статью с критическим разбором этих и подобных им "тестов".


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


Главная проблема


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


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

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

Читать дальше →

[в закладки] 23 рекомендации по защите Node.js-приложений

Время на прочтение15 мин
Охват и читатели25K
В наши дни веб-сервисы постоянно подвергаются самым разным атакам. Поэтому безопасность — это то, о чём стоит помнить на всех этапах жизненного цикла проектов. Авторы материала, перевод которого мы сегодня публикуем, поддерживают репозиторий на GitHub, содержащий около 80 рекомендаций по обеспечению безопасности приложений, работающих на платформе Node.js. В этом материале, базой для которого послужило множество публикаций, посвящённых безопасности, собрано более двух десятков рекомендаций, касающихся Node.js, и некоторые советы общего характера. При этом данный материал покрывает топ-10 уязвимостей из списка проекта OWASP.


Читать дальше →

Семинар «Чёрная пятница в e‑commerce. Секреты выживания», 16 августа, Москва

Время на прочтение2 мин
Охват и читатели1.3K


Привет, Хабр! Мы начинаем новый сезон Университетов DataLine.

Открывать сезон будет необычный семинар. Большую часть времени мы будем отвечать на вопросы и дискутировать с вами.

Мы поговорим о подготовке сайта к росту трафика и обсудим как технические, так и организационные тонкости этого процесса.
Читать дальше →

Релиз стабильной версии Dart 2.0 и Dart Web Platform

Время на прочтение7 мин
Охват и читатели12K
Примечание: присоединяйтесь к русскоязычному сообществу Dart в Telegram, Slack и Google+. А в конце статьи вас ждёт небольшой анонс.


Возрождение Dart как популярного языка программирования для мобильной и веб-разработки


Сегодня мы объявляем о релизе стабильной версии языка программирования Dart — 2.0, а также веб-платформы Dart, которая предлагает уникальное сочетание продуктивности, производительности и масштабируемости.



Читать дальше →

Тайна Keyboard Level 3 или как напечатать длинное тире

Время на прочтение4 мин
Охват и читатели60K

Источник: Pexels

Каждый пользователь Хабра, хоть раз напечатавший здесь «пробел-дефис-пробел», может видеть, как дефис магическим образом заменяется на длинное тире. Это сработала автозамена, похожая на ту, что имеется в ворде и других текстовых процессорах.
Читать дальше →

Как сделать поиск пользователей по GitHub без React + RxJS 6 + Recompose

Время на прочтение6 мин
Охват и читатели5.8K
Эта статья является ответом на статью-перевод «Как сделать поиск пользователей по GitHub используя React + RxJS 6 + Recompose», которая буквально вчера научила нас как надо использовать React, RxJS и Recompose вместе. Что ж, предлагаю теперь посмотреть, как это можно реализовать без оных инструментов.


Читать дальше →