Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

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

Боль и слёзы в Svelte 3

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

Вместо предисловия


Статья будет полезна тем, кто так-же как и Мы решил попробовать Svelte в живом проекте. В нашу небольшую компанию пришёл заказ на разработку веб-админки для сервиса с бекэндом на Mongodb Stitch. В последние пару лет frontend Мы пишем на React или Vue (в зависимости от размера проекта и нужен ли ReactNative), но наслышав о красотах Svelte мы решили попробовать его, чтобы понять для себя так ли он хорош. И может нам тоже стоит дальше использовать его вместо Vue или React?..

Кто такой Svelte?


image

Если в двух словах — это новый js фреймворк (но он таким себя не считает), который убийца React и Vue, и бла, бла, бла… В своей статье я хочу рассмотреть Svelte не какой он классный «под капотом», а с точки зрения удобства его использования в реальном проекте.
Мы не делаем машины, мы на них ездим и у нас есть злые заказчики с еще не менее злыми сроками.
Читать дальше →

Инструменты Node.js разработчика. Протокол mqtt для работы с веб-сокетами

Время на прочтение5 мин
Охват и читатели21K
Технология веб-сокет позволяет в веб-приложении или в мобильном приложении реализовать отправку сообщений с сервера на клиент, что невозможно сделать средствами REST-API. Для работы с веб-сокетами часто используют библиотеку socket.io, или же разработчики работают с нативными объектами веб-сокет браузеров. В этом сообщении я попытаюсь показать, что оба пути не решают всех проблем, и гораздо лучше использовать для работы с веб-сокетами специализированные серверы, например mqtt-сервер (раньше его назвали mqtt-брокер).

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

this и ScopeChain в EcmaScript

Время на прочтение7 мин
Охват и читатели12K
Привет, Хабр!

В предыдущей статье мы рассматривали общую теории ООП в применении к EcmaScript и популярное заблуждение начинающих разработчиков относительно отличия ООП в JS и классических языках.

Сегодня мы поговорим о двух других не менее важных концепциях EcmaScript, а именно связи сущности с контекстом исполнения (this и есть эта самая связь) и связи сущности с порождающим контекстом(ScopeChain).

Итак, начнём!

this


На собеседованиях в ответ на вопрос: «Расскажите подробнее про this.». Начинающие разработчики, как правило, дают очень туманные ответы: "this – это объект «перед точкой», который использовался для вызова метода", "this — контекст, в котором был вызвана функция" и т.д.…

На самом деле, ситуация с этим центральным для EcmaScript языков понятием обстоит несколько сложнее. Разберёмся по порядку.

Допустим, у нас есть программа на языке JavaScript, в которой есть переменные объявленные глобально; глобальные функции; локальные функции(объявленные внутри других функций), функции, возвращаемые из функций.
Читать дальше →

«WARNING: sanitizing HTML stripped some content» и как с ним правильно бороться

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

Всем, кому приходилось вставлять HTML содержимое в DOM в Angular, доводилось видеть это сообщение. Конечно, все мы получаем проверенное содержимое с нашего же сервера и просто хотим застилизовать сообщение об ошибке. Или вставляем HTML из наших же констант, инлайним наши SVG иконки, ведь нам всего лишь нужно покрасить их в цвет текста. Ведь ничего плохого не случится, если мы просто скажем Angular`у — не дрейфь, там всё чисто.


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


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

Руководство по Discovery.js: быстрый старт

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

Это и последующие руководства проведут вас через процесс создания решения на основе проекта Discovery.js. Наша цель — создать инспектор NPM-зависимостей, то есть интерфейс для исследования структуры node_modules.



Примечание: Discovery.js находится на ранней стадии разработки, поэтому со временем что-то будет упрощаться и становиться полезнее. Если у вас есть идеи, как можно что-то улучшить, напишите нам.

Аннотация


Ниже вы найдёте обзор ключевых концепций Discovery.js. Изучить весь код руководства можно в репозитории на GitHub, или можете попробовать как это работает онлайн.

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

Оптимизация или как не выстрелить себе в ногу

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

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


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

SPA Meetup 5: интеграция Jest с QA, мощный UIKit, библиотеки компонентов, DI для масштабирования, платформенные команды

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

Привет! Это пост-отчёт с митапа Moscow SPA 5, серии встреч для фронтенд-разработчиков, которым интересна тематика веб-приложений (Single Page Application). Вместе с докладчиками из Mail.Ru, Яндекса, ВКонтакте, Тинькофф и Авито мы говорили об интеграции Jest с QA-инфраструктурой, DI в качестве способа масштабирования, росте библиотек компонентов, платформенной команде. А также обсуждали, может ли UIKit быть максимально гибким и подходящим для всего.


Заходите под кат, если вам интересны эти темы. Внутри вы найдёте материалы встречи: видеозаписи докладов, презентации спикеров, отзывы гостей митапа и ссылки на фотоотчёт.


Будни Программного комитета FrontendConf. Интервью c Сергеем Поповым

Время на прочтение8 мин
Охват и читатели1.5K
Программный комитет FrontendConf отвечает за отбор заявок, готовит программу, расписание, отвечает за стенды и концепцию. При этом участники ПК еще и курируют доклады спикеров. Задача куратора — помочь со структурой, контентом и довести доклад до идеала. Таких докладов у члена ПК бывает от одного до пары десятков, а еще надо готовить программу и свой доклад, если член ПК еще и спикер на конференции.



Накануне FrontendConf мы взяли у интервью у Сергея Попова (@sergeytovarov) и расспросили обо всем подробнее. Сергей — участник ПК, руководитель Лига А., выступающий спикер. Мы узнали о том, как идет подготовка к конференции, какие доклады он берет на курирование и чего от них ждать зрителям, для чего он выступает, о чем его новый доклад и зачем ходить на конференции.
Читать дальше →

Делаем свой Google Call Screening на основе Voximplant и Dialogflow

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

Возможно, вы слышали или читали про функцию Call Screening, которую Google выкатил для своих телефонов Pixel в США. Идея отличная – когда вам поступает входящий звонок, то виртуальный ассистент начинает общаться, в то время как вы видите этот разговор в виде чата и в любой момент можете начать говорить вместо ассистента. Это очень полезно в наши дни, когда почти половина звонков – это спам, но при этом вы не хотите пропускать важные звонки от кого-то не из вашего списка контактов. Единственная загвоздка – эта функциональность доступна только на телефоне Pixel и только в США. Что ж, препятствия существуют, чтобы их преодолевать, верно? Поэтому мы решили рассказать, как сделать подобное решение, используя Voximplant и Dialogflow. Прошу под кат.

Эволюционирующие клеточные автоматы

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


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

В статье присутствуют Gif (трафик!) и контрастные картинки. У эпилептиков может случиться эпилептический припадок.
Читать дальше →

Сервис-воркеры в клиенте Slack: об ускорении загрузки и оффлайн-режиме

Время на прочтение8 мин
Охват и читатели5.5K
Материал, перевод которого мы сегодня публикуем, посвящён рассказу об оптимизации новой версии настольного клиента Slack, одной из центральных особенностей которой стало ускорение загрузки.


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

Применяем github actions для CI и автоматическая публикация на npm

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

Github actions


Привет, Хабр. Это статья о том как автоматизировать ваш проект с помощью github actions.
Автоматизация будет делиться на:


  • CI — над каждым коммитом будут проведены тесты
  • Publish — при релизе публикуем версию в npm
Читать дальше →

Паттерны проектирования в JS: паттерны создания объектов

Время на прочтение5 мин
Охват и читатели16K
Итак, хабровчане, уже в этот четверг в OTUS стартует курс «Fullstack разработчик JavaScript». И сегодня мы делимся с вами еще одной авторской публикацией в преддверии старта курса.



Автор статьи: Павел Якупов


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

Говоря проще, паттерны проектирования — это удачные решения, которые используются достаточно часто. Паттерны проектирования как понятие сформировались еще в то время, когда языка программирования JavaScript не было в помине, в сфере software engineering паттерны проектирования были подробно описаны еще в 1994 году «Большой четверкой». Однако мы в нашей статье обратимся к реализации некоторых несложных паттернов именно на языке программирования JavaScript.
Читать дальше →

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

Мой первый взлом: сайт, позволяющий задавать любой пользовательский пароль

Время на прочтение8 мин
Охват и читатели23K
Недавно я нашёл интересную уязвимость, позволяющую установить любому пользователю конкретного сайта любой пароль. Круто, да?

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

На неё вы и наткнулись.



Примечание: автор переведённой статьи не специалист по информационной безопасности, и это его первый экскурс в мир SQL-инъекций. Он просит быть «снисходительными к его наивности».

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

Видеозвонок в браузере на PeerJS. Быстрый старт

Время на прочтение7 мин
Охват и читатели17K
Приветствую всех читателей Хабра. В этом году довелось писать модуль видеосвязи для одного учебного портала для созвона по видеосвязи прямо на сайте учителя с учеником. Раннее такую задачу решать не приходилось. После недолгих поисков обнаружил, что есть 2 пути: Flash и WebRTC. WebRTC в чистом виде оказался сложноват, и в общем-то это естественно, так как задача видеосвязи не является простой. Но потом я наткнулся на PeerJS, который является оберткой для WebRTC. В этой статье я расскажу, как быстро организовать свою браузерную звонилку.
Читать дальше →

Drag-&-Drop компоненты для слепых пользователей? Вы шутите?

Время на прочтение18 мин
Охват и читатели7.1K
Что объединяет Trello, Gmail, Aviasales и Google Keep? В каждом из них есть Drag-&-Drop-компоненты, которые можно перетаскивать мышкой. Использование этих компонентов делает сайты по-настоящему удобными, потому что в реальной жизни мы часто используем этот паттерн. Передвигать вещи для нас естественно, поэтому и в вебе мы хотим перемещать элементы по экрану с одного места на другое, как стикеры на доске или магнитики на холодильнике. Сортировка todo-списков, организация дашбордов, загрузка файлов — мы просто не можем себе представить все эти события без перетаскивания элементов на странице.



Но есть нюанс. Когда мы разрабатываем такие компоненты, то думаем, что наши пользователи физически видят экран и элементы, могут зацепиться за них мышкой и перетащить.Часто так и есть, но мы забываем о сегменте пользователей с проблемами зрения. Мы создаем компоненты, которыми невозможно пользоваться большой группе людей, которая просто их не видит. Как сделать так, чтобы им тоже были доступны Drag-&-Drop-компоненты?

Сергей Кригер — фронтенд-разработчик в компании SinnerSchrader. Кроме фронтенд-разработки, активно интересуется темой веб-доступности и расскажет о некоторых способах ее повышения. Под катом — рассказ о создании Drag-&-Drop-компонентов для тех, кто не видит экран и пользуется другими устройствами для взаимодействия с браузером.

Космики. 7 лет

Время на прочтение5 мин
Охват и читатели17K
Здравствуй, Хабр!

В 2012 году я написал пост о своем увлечении — Космики: моделирование эволюции многоклеточных организмов


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

Заходят как-то два браузера в скроллбар…

Время на прочтение8 мин
Охват и читатели35K
image Скроллбар (scrollbar, полоса прокрутки) — это простой, но эффективный механизм, который действует как основное средство, с помощью которого можно просматривать большие документы. Но это — далеко не всё, на что способны полосы прокрутки! Эти скромные рабочие лошадки ещё и неплохо подсказывают пользователям о том, каковы размеры документов, с которыми они взаимодействуют. В результате скроллбары несут на себе двойную нагрузку. Они и помогают работать с различными материалами, и информируют пользователя о размерах этих материалов.

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

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

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

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

История и наследие jQuery

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

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

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

Ускорение instagram.com. Часть 1

Время на прочтение9 мин
Охват и читатели9.7K
В последние годы на instagram.com появилось много нового. Очень много. Например — средства создания историй, фильтры, творческие инструменты, уведомления, прямые сообщения. Однако по мере роста проекта всё это дало один печальный побочный эффект, который заключался в том, что производительность instagram.com начала падать. В течение прошлого года команда разработчиков Instagram прилагала постоянные усилия к тому, чтобы это исправить. Это привело к тому, что общее время загрузки ленты Instagram (feed page) снизилось почти на 50%.



Сегодня мы публикуем перевод первого материала из серии статей, посвящённых рассказу о том, как ускоряли instagram.com.
Читать дальше →