Как стать автором
Обновить
45
0
Андрей Губанов @Finom

Веб разработчик

Отправить сообщение

5 полезных плагинов для webpack

Время на прочтение 5 мин
Количество просмотров 21K
Привет, Хабр!

У webpack'а есть много полезных плагинов, о которых многие не знают и не используют в своих проектах. Под катом я собрал 5 таких, они могут здорово упростить вам жизнь!


Читать дальше →
Всего голосов 31: ↑31 и ↓0 +31
Комментарии 5

Автоматизация квартиры с HomePod, Raspberry Pi и Node.js

Время на прочтение 5 мин
Количество просмотров 11K


Перевели для вас статью Криса Хокинса, в которой он рассказывает о превращении своей квартиры в умный дом. В качестве базы используется HomePod от Apple, но, конечно, можно применять и другие системы.

У меня дома работает Apple HomePod, который помогает контролировать определенные системы в доме (к примеру, умные лампы) при помощи обычного запроса к Siri. Работает система как из дома, так и вне его (умный помощник есть на телефоне).
Всего голосов 33: ↑31 и ↓2 +29
Комментарии 1

Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация

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

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

image
Читать дальше →
Всего голосов 25: ↑24 и ↓1 +23
Комментарии 5

Решение, которое нужно принять, чтобы не жалеть о жизни через 30 лет

Время на прочтение 6 мин
Количество просмотров 134K


«Определение ада: «Тот человек, которым вы стали, в свой последний день на земле встретится с человеком, которым вы могли бы стать».
— Автор неизвестен


Читать дальше →
Всего голосов 90: ↑72 и ↓18 +54
Комментарии 173

Делаем адаптивный HTML, добавляя одну строку в CSS

Время на прочтение 4 мин
Количество просмотров 190K
image

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

И самое классное: адаптивность будет добавлена с помощью одной строки CSS.
Это означает, что нам не нужно загромождать HTML лишними классами (Col-sm-4, col-md-8) или создавать медиа-запросы для каждого размера экрана.

Рассмотрим все подробнее.
Читать дальше →
Всего голосов 67: ↑66 и ↓1 +65
Комментарии 103

Эти токсичные, токсичные собеседования

Время на прочтение 8 мин
Количество просмотров 104K


Всё началось, когда автор Ruby on Rails признался миру:

Всего голосов 205: ↑197 и ↓8 +189
Комментарии 734

React медленный, React быстрый: оптимизация React-приложения на практике

Время на прочтение 14 мин
Количество просмотров 65K

Всем привет! Хочу поделиться своим переводом статьи React is Slow, React is Fast: Optimizing React Apps in Practice автора François Zaninotto. Надеюсь, это кому-то будет полезным.


Краткое содержание:


  1. Измерение производительности React
  2. Почему ты обновился?
  3. Оптимизация через разбиение на компоненты
  4. shouldComponentUpdate
  5. Recompose
  6. Redux
  7. Reselect
  8. Остерегайтесь объектных литералов в JSX
  9. Заключение

React может быть медленным. Я хочу сказать, что любое React приложение среднего размера может оказаться медленным. Но прежде, чем искать ему замену, вы должны знать, что и любое среднее приложение на Angular или Ember может также оказаться медленным.


Хорошая новость в том, что если вы действительно заботитесь о производительности, то сделать React приложение очень быстрым довольно легко. Об этом — далее в статье.

Читать дальше →
Всего голосов 36: ↑35 и ↓1 +34
Комментарии 59

4 вида утечек памяти в JavaScript и как с ними бороться

Время на прочтение 16 мин
Количество просмотров 127K

В этой статье мы рассмотрим распространённые виды утечек памяти в клиентском JavaScript. Также мы узнаем, как их обнаружить с помощью Chrome Development Tools.


timeline в Chrome Dev Tools

Читать дальше →
Всего голосов 98: ↑98 и ↓0 +98
Комментарии 16

Переходим от MongoDB Full Text к ElasticSearch

Время на прочтение 6 мин
Количество просмотров 30K
В своем прошлом посте, с анонсом Google Chrome расширения для Likeastore, я упомянул тот факт, что в качестве поискового индекса мы начали использовать ElasticSeach. Именно ElasticSeach дал достаточно хорошую производительность и качество поиска, после которого было принято решение, выпустить расширение к хрому.

В этом посте, я расскажу о том, что использование связки MongoDB + ElasticSeach, есть крайне эффективное NoSQL решение, и о том, как перейти на ElasticSearch, если у вас уже есть MongoDB.
Читать дальше →
Всего голосов 31: ↑28 и ↓3 +25
Комментарии 22

json-api-normalizer: легкий способ подружить Redux и JSON API

Время на прочтение 10 мин
Количество просмотров 23K

JSON API + redux


В последнее время набирает популярность стандарт JSON API для разработки веб-сервисов. На мой взгляд, это очень удачное решение, которое наконец хоть немного стандартизирует процесс разработки API, и вместо очередного изобретения велосипеда мы будем использовать библиотеки как на стороне сервера, так и клиента для обмена данными, фокусируясь на интересных задачах вместо написания сериалайзеров и парсеров в сто первый раз.


Читать дальше →
Всего голосов 17: ↑15 и ↓2 +13
Комментарии 11

Боли в руках при работе за компьютером. Часть 1: туннельные синдромы – обзор и диагностика проблем

Время на прочтение 3 мин
Количество просмотров 97K
Синдром запястного канала — боли, онемение в кисти руки, частый спутник длительно работающих за компьютером людей. Множество популярных публикаций и решений эргономики сводят проблему только к длительной травматизации срединного нерва в запястном канале, что очень упрощает ситуацию и не позволяет получить эффективное решение.

image


Основная проблема в том, что для работы за компьютером используются точные мелкие движения руки в статической позе, из-за чего возникают предпосылки для повреждения сосудисто-нервных пучков на всём протяжении — от шеи до кисти руки. И часто боли в кисти руки являются следствием отдаленных проблем, не связанных с запястным каналом.
Всего голосов 24: ↑24 и ↓0 +24
Комментарии 70

Как не ослепнуть, используя гаджеты: приложения для зрения

Время на прочтение 8 мин
Количество просмотров 60K


Мы настолько привыкли к гаджетам, что уже не расстаемся с ними ни на работе, ни дома. Согласно докладу ВОЗ 2014 года порядка 300 млн человек в мире страдают от нарушения зрения. В частности, в России снижением зрения страдает каждый второй житель, особенно печальна ситуация у детей. Главной причиной такой тенденции становится неограниченное использование компьютеров и гаджетов. И сейчас никого не удивишь тем, что ты носишь очки или контактные линзы. В самих очках нет ничего плохого, но они — дополнительный и не всегда удобный предмет: от детского обзывания “очкариком” до проблем с походом на сеансы в 3D-кинотеатр. С линзами проблем меньше, но спросите любого, кто ими пользуется и узнаете много о мучениях, связанных с поисками линзы в глазу.

Но помимо традиционных способов коррекции зрения на помощь приходят различные приложения, помогающие взять под контроль вашу “неограниченную” цифровую жизнь и выделить время для глаз. Таких приложений сейчас множество, и мы подготовили для вас подборку из самых полезных.
Читать дальше →
Всего голосов 20: ↑18 и ↓2 +16
Комментарии 44

Нейронные сети на JS. Создавая сеть с нуля

Время на прочтение 8 мин
Количество просмотров 90K

КПДВ про нейронные сети


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


Но врожденные любознательность и энтузиазм довели меня до того, что я стал одним из разработчиков Synaptic — проекта фреймворка для построения нейронных сетей на JS с 3к+ звезд на GitHub. Сейчас мы с автором фреймворка занимаемся созданием Synaptic 2.0 с ускорением на GPU и WebWorker-ах и с поддержкой почти всех основных фич любого приличного NN-фреймворка.


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

Читать дальше →
Всего голосов 53: ↑51 и ↓2 +49
Комментарии 43

Титан — колыбель жизни?

Время на прочтение 16 мин
Количество просмотров 42K
Доброго времени суток, уважаемое гик-сообщество! Представляю на ваш суд мой первый перевод и первый пост на Geektimes — «Титан — колыбель жизни?» (в оригинале — «Titan — The Abode of Life»). Оригинал от NASA здесь. В работе рассмотрены физико-химические свойства Титана с точки зрения возможности возникновения на нём метаногенных форм жизни. Канцелярит и прочие прелести старался минимизировать, но пока, по-моему, не слишком удачно. В любом случае, заинтересованных прошу под кат.


Читать дальше →
Всего голосов 82: ↑82 и ↓0 +82
Комментарии 16

It’s the future

Время на прочтение 5 мин
Количество просмотров 85K

Этот пост просто шутка и не пытается выставить инструменты, упомянутые здесь, в дурном свете. Я использую их постоянно, они великолепны, и я рекомендую их использовать. По мотивам It's the future @ CircleCI Blog


— Эй, я бы хотел научиться писать крутые веб-приложения. Слышал, у тебя есть опыт.


— Да, я как раз занимаюсь фронтендом, юзаю пару тулз.


— Круто. Я щас делаю простое приложение — обычный TODO-лист, используя HTML, CSS и JavaScript, и планирую заюзать JQuery. Это норм?


— Не-не-не. Это олдскул. Джиквери мёртв — никто не использует его теперь! Тебе нужен React. Это будущее.


— Окей, лады. А что это?


Читать дальше →
Всего голосов 178: ↑167 и ↓11 +156
Комментарии 287

Нейронные сети на Javascript

Время на прочтение 7 мин
Количество просмотров 164K
image
Идея для написания этой статьи возникла прошлым летом, когда я слушал доклад на конференции BigData по нейронным сетям. Лектор «посыпал» слушателей непривычными словечками «нейрон», «обучающая выборка», «тренировать модель»… «Ничего не понял — пора в менеджеры», — подумал я. Но недавно тема нейронных сетей все же коснулась моей работы и я решил на простом примере показать, как использовать этот инструмент на языке JavaScript.

Мы создадим нейронную сеть, с помощью которой будем распознавать ручное написание цифры от 0 до 9. Рабочий пример займет несколько строк. Код будет понятен даже тем программистам, которые не имели дело с нейронными сетями ранее. Как это все работает, можно будет посмотреть прямо в браузере.
Читать дальше →
Всего голосов 58: ↑54 и ↓4 +50
Комментарии 79

Быстрое клонирование объектов в JavaScript

Время на прочтение 5 мин
Количество просмотров 45K
cloneКлонирование объектов в JavaScript довольно частая операция. К сожалению, JS не предоставляет быстрых нативных методов для решения этой задачи.

К примеру, популярная Node.JS ORM Sequelize, которую мы используем на backend-е нашего проекта, значительно теряет в производительности на предвыборке большого (1000+) количества строк, только на одном клонировании. Если вместе с этим, к примеру, в бизнес-логике использовать метод clone известной библиотеки lodash — производительность падает в десятки раз.

Но, как оказалось, не всё так плохо и современные JS-движки, такие как, например, V8 JavaScript Engine, могут успешно справляться с этой задачей, если правильно использовать их архитектурные решения. Желающим узнать как клонировать 1 млн. объектов за 30 мс — добро пожаловать под кат, все остальные могут сразу посмотреть реализацию.
Читать дальше →
Всего голосов 46: ↑43 и ↓3 +40
Комментарии 56

Запуск NodeJS-приложения на Android

Время на прочтение 3 мин
Количество просмотров 78K
Без сомнения, вам понравится запускать NodeJS на своем Android-устройстве. Благодаря эмулятору терминала и Linux-окружения для Android, разработка веб-приложений на смартфоне перестанет быть для вас проблемой.
Читать дальше →
Всего голосов 28: ↑25 и ↓3 +22
Комментарии 13

WebPack: как внутри устроено Hot Reloading

Время на прочтение 7 мин
Количество просмотров 43K
Наша платформа voximplant активно использует javascript. С помощью него клиенты управляют в реальном времени звонками, на нем работает наша backend логика и большинство frontend. Javascript мы любим, ценим и стараемся быть в курсе последних новостей. Сейчас наши разработчики активно экспериментируют с перспективной связкой webpack + typescript + react (кстати, для typescript мы сделали type definitions к нашему web sdk, но об этом как-нибудь в другой раз).

Особенно нам нравится «hot module replacement»: возможность при изменении исходников очень быстро отобразить изменения в браузере без перезагрузки страницы. Выглядит как магия. К сожалению, документировано тоже как магия — по словам eyeofhell, нашего технического евангелиста, «пример на офсайте — это уникальная комбинация частных случаев и особых команд, любое изменение в которых делает его неработоспособным». На наш взгляд все не так плохо, за пару вечеров вполне можно разобраться. Но и не так просто, как хотелось бы. Поэтому специально для Хабра под катом мы максимально просто и понятно расскажем как работает под капотом вся эта машинерия.
Открыть попкорн и посмотреть шоу с эвалом и вебсокетами
Всего голосов 26: ↑26 и ↓0 +26
Комментарии 12

Пишем свой Lisp на JavaScript

Время на прочтение 6 мин
Количество просмотров 22K

image


Для начала следует задать простой вопрос: для чего?


Писать свой язык программирования — практически всегда плохая идея. Так зачем нам еще один лисп? Тем более, что уже есть ClojureScript, который на данный момент является production ready и имеет кучу приятных фич. Конкурировать даже с ClojureScript — безумие, — не гворя уже о TypeScript, CoffeeScript, etc. Но язык нам нужен и не для этого!


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

Читать дальше →
Всего голосов 44: ↑39 и ↓5 +34
Комментарии 49

Информация

В рейтинге
Не участвует
Откуда
Одесса, Одесская обл., Украина
Дата рождения
Зарегистрирован
Активность