Обновить
256K+

JavaScript *

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

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

Топ-10 ошибок из 1000+ JavaScript-проектов и рекомендации по их устранению

Время на прочтение11 мин
Охват и читатели33K
В компании Rollbar, которая занимается созданием инструментов для работы с ошибками в программах, решили проанализировать базу из более чем 1000 проектов на JavaScript и найти в них ошибки, которые встречаются чаще всего. В результате они сформировали список из 10 наиболее часто встречающихся ошибок, проанализировали причины их появления и рассказали о том, как их исправлять и избегать. Они полагают, что знакомство с этими ошибками поможет JS-разработчикам писать более качественный код.

image

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

Dart Summit 2018: основные мысли

Время на прочтение5 мин
Охват и читатели4.1K
Больше недели назад прошла крупнейшая и самая важная конференция по языку Dart. Ваш покорный слуга там был (и даже немного постоял на сцене), так что перед вами отчёт о том, как это было. Весьма субъективный надо сказать. Тут всё вперемежку: новости о языке, мои собственные впечатления, фоточки и прочее, так что если интересно — заходите.

Dart Summit 2018 Logo
Как это было...

VDOM своими руками

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

Привет.


У многих frontend-разработчиков бытует мнение, что технология VDOM, которая, в частности, используется в React.js, работает как черный ящик. Так же на просторах npm есть куча библиотек, реализующих эту технологию, однако вот как по мне — так в них черт ногу сломит. Сама тема VDOM-а меня заинтересовала некоторое время назад и я начал экспериментировать наощупь, сам. В конечном итоге все кончилось тем, что я сделал свою реализацию VDOM-а и встроил в свой фрейморк для датагридов (о нём я как-нибудь напишу). Это оказалось не просто, а очень просто и в этой статье я детально объясню что к чему, зачем и почему. И как оно работает тоже расскажу. Ныряйте под кат и мы предадимся интересному опыту.

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

Надоевшая почта или как отправлять сообщения с сайта в Telegram через Node.js (Express)

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

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

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

Но давайте обо всем по порядку.
Читать дальше →

Тернарные операторы и логическое “И” в React.js

Время на прочтение3 мин
Охват и читатели33K
Всем привет! Вы читаете перевод статьи Donavon West “Conditional Rendering in React using Ternaries and Logical AND”

image

Существуют несколько способов заставить React рендерить то, что вам нужно. Вы можете использовать традиционный оператор if или switch. В этой статье мы рассмотрим этим способам альтернативу. Будьте осторожны: она несет некоторые сюрпризами, с которыми стоит быть поаккуратнее.
Читать дальше →

WebRTC и Electron: тренд для desktop-приложений

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


В блоге на хабре мы стараемся рассказывать интересные истории из собственного опыта: телефония и браузеры, телеком, автоматизация звонков, видеоконференции — все эти истории. Но наш давний знакомый Цахи, автор bloggeek.me и мировой спец по WebRTC, настолько хорошо пишет, что его просто нельзя не переводить. Его новая статья, вышедшая неделю назад, про поддельные desktop-приложения, которые на самом деле обернутые в Electron веб-страницы. Многие такое видели – Slack, Discord и прочие товарищи вешают на свои страницы огромную кнопку «Скачайте наше desktop-приложение», а там — обернутая в .exe или .dmg веб-страничка. Которая иногда сделана удобнее, чем «хардкорные» WinAPI и Cocoa решения. А еще эти штуки умеют звонить голосом и видео. Под катом, традиционно для Цахи, много картинок, ссылок и интересных выводов от опытного программиста-телекомщика, ушедшего в популисты-аналитики. Перевод мы традиционно адаптируем для Хабра, а не слово-в-слово. Цахи любит заковыристые обороты…

Дайджест свежих материалов из мира фронтенда за последнюю неделю №300 ( 29 января — 4 февраля 2018)

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


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

W3View — библиотека на Javascript, для которой был создан HTML

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

Да, ещё одна новая библиотека на JS, хочу поделиться. Фидбека жажду, любого, лучше конечно позитивного конструктивного.

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

Как я ускорил работу отдела продаж более чем в 20 раз

Время на прочтение7 мин
Охват и читатели72K
Если вам знакома ситуация, когда нужно обработать заявку от клиента размером 150 или больше позиций, подобрав для каждой самую лучшую по цене из 20 прайс-листов по 10 000 + позиций в каждом, но вы не готовы тратить на это больше 30 минут, то добро пожаловать под кат.
Читать дальше →

Как мы запустили offline-версию сайта RG.RU

Время на прочтение17 мин
Охват и читатели16K
Как часто, запрашивая страницу, мы видим сообщение «Нет подключения к интернету». Однако, уже давно существует возможность отлавливать события в отсутствие интернета и контролировать содержимое, которое видит пользователь. Алексей Чернышев и Максим Чагин запустили offline-версию сайта Российской Газеты – официального издания Правительства России с 1 млн посетителей в сутки – и поделились своим опытом на РИТ++ 2017. Под катом расшифровка их доклада.


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

Разработка статического блога на Gatsby и Strapi

Время на прочтение10 мин
Охват и читатели40K
Статические веб-сайты содержат страницы с неизменным содержимым. Технически — это набор HTML-файлов, которые, для каждого посетителя сайта, выглядят одинаково. В отличие от динамических веб-сайтов, для разработки таких сайтов не нужно серверное программирование или базы данных. Публикация статического веб-сайта проста: файлы выгружают на обыкновенный веб-сервер или в некое хранилище. Два основных преимущества статических веб-сайтов — это безопасность и скорость. Тут нет базы данных, поэтому отсюда нечего красть, и тут нет нужды программно генерировать страницу для каждого запроса, что ускоряет работу.

Для того чтобы упростить создание статических веб-сайтов, создано множество опенсорсных инструментов. Например, это Jekyll, Hugo, Hexo, и другие. Работа по подготовке содержимого сайта ведётся путём редактирования чего-то вроде файлов с разметкой, или через некое API для управления контентом. После того, как данные готовы к публикации, генератор берёт эти данные, внедряет их в шаблоны и создаёт множество HTML-файлов, готовых для публикации.

Сегодня мы расскажем о быстрой разработке проектов с помощью Gatsby — генератора статических прогрессивных веб-приложений, и Strapi — системы управления контентом. В результате после того, как вы освоите это руководство, у вас будет работающий статический блог и масса идей, касающихся его развития.
Читать дальше →

WSTester – JS библиотека для тестирования веб-сервисов с ВебСокетами

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

Добрый день, Хабрасообщество! Как и большинству айтишников, мне нравится создавать что-то новое, классное, нечто способное как-то повлиять на мир или хотя бы принести небольшую пользу другим людям. Надеюсь, что описываемый далее инструмент для тестирования онлайн систем с ВебСокетами как раз такая вещь.


logo

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

Частичные вау-эффекты: о магии простыми словами

Время на прочтение6 мин
Охват и читатели18K
Существует такая категория сайтов, которые мы обычно называем «вау-сайтами». Они не предназначены для непосредственного потребления контента, а скорее производят впечатление на посетителя. Эти сайты обычно уникальны в своем дизайне, содержат экспериментальные решения для взаимодействия с пользователем, ломают стереотипы и изобилуют разными анимациями. Особый интерес представляют различные трюки с SVG и анимации, основанные на большом количестве частиц, о которых и пойдет речь в этой статье.



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

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

Эффективное преобразование данных с использованием трансдьюсеров

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


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


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


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


const ageAbove18 = (person) => person.age > 18;
const isFemale = (person) => person.gender === ‘female’;
const livesInTheNetherlands = (person) => person.country === ‘NL’;
const pickFullName = (person) => person.fullName;
const output = bigCollectionOfData
  .filter(livesInTheNetherlands)
  .filter(isFemale)
  .filter(ageAbove18)
  .map(pickFullName);

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


image

Конечно, отфильтрованные коллекции будут несколько сокращены, но это, все еще довольно затратно.


Однако главный момент заключается в том, что map и filter могут быть определены с помощью reduce. Давайте попытаемся реализовать приведенный выше код в формате сокращений.

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

Рассказ о том, как не дать мне украсть номера кредиток и пароли у посетителей ваших сайтов

Время на прочтение19 мин
Охват и читатели26K
Недавно мы опубликовали перевод истории программиста, придумавшего способ распространения вредоносного кода, который собирает данные банковских карт и пароли с тысяч сайтов, оставаясь при этом незамеченным.


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

Неявное преобразование типов в JavaScript. Сколько будет !+[]+[]+![]?

Время на прочтение13 мин
Охват и читатели118K
Приведение типов — это процесс преобразования значений из одного типа в другой (например — строки в число, объекта — в логическое значение, и так далее). Любой тип в JavaScript, идёт ли речь о примитивном типе, или об объекте, может быть преобразован в другой тип. Напомним, что примитивными типами данных в JS являются Number, String, Boolean, Null, Undefined. К этому списку в ES6 добавился тип Symbol, который ведёт себя совсем не так, как другие типы. Явное приведение типов — процесс простой и понятный, но всё меняется, когда дело доходит до неявного приведения типов. Тут то, что происходит в JavaScript, некоторые считают странным или нелогичным, хотя, конечно, если заглянуть в стандарты, становится понятно, что все эти «странности» являются особенностями языка. Как бы там ни было, любому JS-разработчику периодически приходится сталкиваться с неявным приведением типов, к тому же, каверзные вопросы о приведении типов вполне могут встретиться на собеседовании.

image

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

Как работают многоканальные телефонные номера

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

Недавно на Хабре была статья про «необычные» DEF-номера. Под необычностью скрывалась «многоканальность» — возможность принимать на номер несколько параллельных звонков (а разговаривать по ним будут операторы колл-центра). Целых пять одновременных разговоров и восклицательный знак в конце фразы! Под катом я расскажу про многоканальность не с маркетинговой, а с технической точки зрения. Как операторы «принимают» звонки, чем «необычный DEF-номер» отличается от «обычного ABC-номера», и много это или мало — целых пять параллельных звонков? Кстати, почему именно пять, а не двадцать или сто?
Читать дальше →

Вашему вниманию — Webpack 4

Время на прочтение3 мин
Охват и читатели54K
Всем привет! На этот раз на повестке дня перевод статьи Valentino Gagliardi «Webpack 4 tutorial: All You Need to Know, from 0 Conf to Production Mode».

image

Команда разработчиков Webpack этот раз изрядно потрудилась над новым поколением популярного сборщика модулей (бандлера) — webpack 4.

Репозиторий с используемым кодом здесь.
Читать дальше →

Я ненавидел Javascript. А теперь он мне нравится

Время на прочтение4 мин
Охват и читатели26K
Моя карьера началась с написания программ для мобильных устройств. Я изучал C и Objective-C, чтобы работать с устройствами на iOS. У меня был чёткий контроль над программным обеспечением, я учился тому, как правильно работать с памятью, и проводил долгие часы за отладкой багов, которые возникали из-за моей небрежности (это было ещё до ARC). Я развивался с уклоном в сторону iOS, а так же так же начал изучать Java (и совсем недавно приступил к Kotlin) для перехода на Android.
Читать дальше →

Инструменты разработчика на языке Elm

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

С момента публикации статьи Основы разработки на языке Elm (руководство по инструментарию для начинающих) прошло полтора года. За это время в инструментарии для языка разработки веб-интерфейсов Elm произошли многочисленные изменения: появилась более удобная система сборки с возможностью генерации нового проекта; для редактора Atom набор дополнений в некоторых отношениях теперь лучше, чем для популярного тогда среди разработчиков на Elm редактора LightTable; заработал инспектор состояния приложения. Давайте пройдёмся по этому набору на простом примере.


Инструменты разработчика на языке Elm: обложка

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