Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Рубрика «javascript» - 88
Дайджест свежих материалов из мира фронтенда за последнюю неделю №398 (13 — 19 января 2020)
2020-01-19 в 20:08, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтендПарочка интересных методов объекта Console (заметка)
2020-01-19 в 10:24, admin, рубрики: console, console.log, javascript, консоль, Программирование, Разработка веб-сайтов
Доброго времени суток, друзья!
В этой небольшой заметке я хочу поделиться с Вами информацией о некоторых методах объекта Console, которые можно использовать наряду с console.log().
Полный список методов можно посмотреть здесь.
От слов — к делу. Да, для работы будет использоваться Chrome.
Console.debug() и сonsole.info()
Console.debug() и console.info() служат для вывода информационных сообщений в консоль и, по сути, являются аналогами console.log(). Одна из особенностей console.debug() состоит в том, что выводимое этим методом сообщение отображается только если консоль настроена на показ сообщений уровня отладки (для Chrome — галочка у Verbose вкладки Levels).
Читать полностью »
Универсальный роутинг для React приложений
2020-01-19 в 0:23, admin, рубрики: javascript, react.js, ReactJS, Разработка веб-сайтовЕсли попытаться в двух словах описать, в чем заключается функция роутинга на фронтэнде веб-приложений, то можно придти к выводу, что каждый популярный фреймоворк совершенно по-разному представляет это себе. Даже, сравнивая версии одного и того же фреймоворка, можно придти к выводу, что функции и API роутинга наиболее подвержены изменениям (часто без обратной совместимости). Например 4-я версия роутинга в React была переработана настолько радикально, что некоторые популярные проекты на githab.com так и не перешли на эту версию.
За всем этим просматривается общая тенденция, которая, по моему мнению, заключается в том, что функционал роутинга в многих популярных фронтэнд фрейморках перегружен. В связи с этим, он становится жестко связанным с другими компонентами, которые могли быть выделены из роутинга (например с навигацией, историей, ссылками и т.п.). Поэтому, наверное, многим знакомо то чувство, когда использование роутинга становится неудобным, а его расширение просто невозможным. По сравнению с гибкими и расширяемыми компонентами, роутинг в популярных фронтэнд фрейморках выглядит на порядок менее удобным и совсем не расширяемым. Особенно это относится первым версиям (до 4-й) роутинга в React.
В этом сообщении я рассмотрю некоторые исторические моменты, которые привели к такому положению дел с роутингом, а также использование библиотеки universal-router, совместно с React.
Расширяемые расширения в JavaScript
2020-01-18 в 13:31, admin, рубрики: css, dom, javascript, web-разработка, Блог компании Издательский дом «Питер», браузер, Клиентская оптимизация, книги, Программирование, Профессиональная литератураПривет!
Обращаем ваше внимание на долгожданную допечатку книги "Выразительный JavaScript", которая только-только пришла из типографии.
Тем, кто еще не знаком с творчеством автора книги (при всей энциклопедичности она понравится и начинающим разработчиком) — предлагаем познакомиться со статьей из его блога; в статье изложены мысли об организации расширений в языке JavaScript
Распространенные ошибки при работе с промисами в JavaScript, о которых должен знать каждый (перевод)
2020-01-18 в 13:12, admin, рубрики: async/await, javascript, promise, Программирование, промис, Разработка веб-сайтов
Доброго времени суток, друзья!
Представляю вашему вниманию перевод статьи Apal Shah «Common Javascript Promise mistakes every beginner should know and avoid».
Распространенные ошибки при работе с промисами в JavaScript, о которых должен знать каждый
(я намеренно опустил слова «начинающий разработчик». Думаю, Вы поймете почему, после прочтения статьи — прим. пер.)
Хотел бы я знать об этих ошибках, когда изучал JavaScript и промисы.
Всякий раз, когда ко мне обращается какой-нибудь разработчик и жалуется на то, что его код не работает или медленно выполняется, я прежде всего обращаю внимание на эти ошибки. Когда я начал программировать 4 года назад, я не знал о них и привык их игнорировать. Однако после назначения в проект, который обрабатывает около миллиона запросов в течение нескольких минут, у меня не было другого выбора, кроме как оптимизировать свой код (поскольку мы достигли уровня, когда дальнейшее вертикальное масштабирование стало невозможным).
Поэтому в данной статье я бы хотел поговорить о самых распространенных ошибках при работе с промисами в JS, на которые многие не обращают внимания.
Читать полностью »
Запись звука JS c микрофона или голосовые комментарии
2020-01-16 в 11:36, admin, рубрики: javascript, php, голосовые сообщения, запись звукаЗапись звука JS c микрофона или голосовые комментарии
Не давно, при разработке одного корпоративного веб-приложения, заказчик пожелал иметь возможность оставлять голосовые комментарии. Ранее мне не приходил сталкиваться с созданием медиаконтента и я с интересом приступил к изучению данной темы.
В сети предоставлено достаточно справочной информации по теме создания и обработки такого рода контента, однако я не нашел простого, полноценно работающего примера. После реализации поставленной задачи заказчиком, решил опубликовать максимально упрощенный пример записи и сохранения голосового комментария и написать статью. Возможно, этот материал будет кому-то полезен и поможет в изучении.
Постановка задачи
Поставим себе задачу разработать мини приложение, работающее в браузере, которое позволит записать голосовой комментарий, отправить запись на сервер, сервер сохранит запись, в случае успеха вернет ответ с именем созданного файла и отобразит объект на странице для того чтоб запись можно было прослушать.
Читать полностью »
О 30-кратном увеличении параллелизма в Node.js
2020-01-16 в 9:30, admin, рубрики: javascript, node.js, Блог компании RUVDS.com, разработка, Разработка веб-сайтовКаков наилучший способ беспроблемного увеличения параллелизма в Node.js-сервисе, который используется в продакшне? Это — вопрос, на который моей команде понадобилось ответить пару месяцев назад.
У нас запущено 4000 контейнеров Node (или «воркеров»), обеспечивающих работу нашего сервиса интеграции с банками. Сервис изначально был спроектирован так, что каждый воркер был рассчитан на обработку только одного запроса за раз. Это снижало воздействие на систему тех операций, которые могли неожиданно заблокировать цикл событий и позволяло нам игнорировать различия в использовании ресурсов различными подобными операциями. Но, так как наши мощности были ограничены одновременным выполнением лишь 4000 запросов, система не могла достойно масштабироваться. Скорость выдачи ответов на большинство запросов зависела не от мощности оборудования, а от возможностей сети. Поэтому мы могли бы улучшить систему и снизить стоимость её поддержки в том случае, если бы нашли способ надёжной параллельной обработки запросов.
Занявшись исследованием этого вопроса, мы не смогли найти хорошего руководства, в котором речь шла бы о переходе от «отсутствия параллелизма» в сервисе Node.js к «высокому уровню параллелизма». В результате мы разработали собственную стратегию перехода, которая была основана на тщательном планировании, на хороших инструментах, на средствах мониторинга и на здоровой дозе отладки. В итоге нам удалось повысить уровень параллелизма нашей системы в 30 раз. Это эквивалентно снижению затрат на поддержку системы примерно на 300 тысяч долларов в год.
Данный материал посвящён рассказу о том, как мы увеличили производительность и эффективность наших Node.js-воркеров, и о том, что мы узнали, пройдя этот путь.
Читать полностью »
Пишем свою стратегию для виртуального скролла из Angular CDK
2020-01-16 в 7:49, admin, рубрики: angular, cdk, infinite scrolling, javascript, scroll, scrolling, TypeScript, virtual scroll, Блог компании Tinkoff.ru, Разработка веб-сайтовПривет!
В Angular CDK в седьмой версии появился виртуальный скролл.
Он отлично работает, когда размер каждого элемента одинаков, — причем прямо «из коробки». Мы просто задаем размер в пикселях и указываем, к какому элементу нужно прокрутить контейнер, сделать ли это плавно, а также можем подписаться на индекс текущего элемента. Однако что делать, если размер элементов меняется? Для этого в CDK предусмотрен интерфейс VirtualScrollStrategy, реализовав который мы научим скролл работать с нашим списком.
В моем случае требовалось сделать календарь для мобильного представления, который можно прокручивать непрерывно, а количество недель в месяце всегда разное. Попробуем разобраться, что представляет собой стратегия виртуального скролла и напишем свою.
Новый фронтенд Одноклассников: запуск React в Java. Часть I
2020-01-16 в 6:00, admin, рубрики: graalvm, java, javascript, ok.ru, React, react.js, ReactJS, Блог компании Одноклассники, одноклассники, ок.tech, Разработка веб-сайтов
Многие слышали название GraalVM, но опробовать эту технологию в продакшене пока довелось не всем. Для Однокласснииков эта технология уже стала «священным Граалем», меняющим фронтенд.
В этой статье я хочу рассказать о том, как нам удалось подружить Java и JavaScript, и начать миграцию в огромной системе с большим количеством legacy-кода, а так же как на этом пути помогает GraalVM.
Во время написания статьи оказалось, что весь объём материала не влезает в традиционный для ХАБРа размер и если выложить публикацию целиком, то на её прочтение уйдет несколько часов. Поэтому мы решили разделить статью на 2 части.
Из первой части вы узнаете об истории фронтенда в Одноклассниках и познакомитесь с его историческими особенностями, пройдете путь поиска решения проблем, которые накопились у нас за 11 лет существования проекта, а в самом конце окунетесь в технические особенности серверной реализации принятого нами решения.
Читать полностью »
6 GitHub проектов для веб-разработчиков, на которые стоит взглянуть
2020-01-14 в 12:45, admin, рубрики: github, javascript, nodejs, Алгоритмы, Разработка веб-сайтовПривет! Представляю вам перевод статьи 6 Github Repos for web developers you should have a look at автора lampewebdev.
Однажды я пролистывал ленту dev.to и наткнулся на пост 6 GitHub проектов для быстрой прокачки знаний.
Я согласен с автором, что список действительно впечатляет, но порой списки ссылок в этих проектах очень большие.
Поэтому, вот список моих любимых проектов GitHub для быстрой прокачки знаний, но созданный специально для веб-разработчиков.
Читать полностью »