Pull to refresh
63
0
Сева Родионов @Jabher

Джаваскрипт-шалун

Send message

Знание и состояние

Reading time6 min
Views9.4K

Сердце любого современного сайта или браузерного приложения (что SPA, что PWA, что любые другие три буквы) — это его State, или состояние.


Мы можем сколько угодно спорить о том, что лучше — React, Vue, Svelte, Angular, можем продолжать пользоваться jQuery, но в действительности это не так важно. Это та часть нашего приложения, которое мы видим — его “мышцы“ и “кожа”. Но то, как вы думаете — какими терминами оперируете, какие механики используете для даже визуализации в голове того, как в вашем приложении “текут” данные — все это идет из его скелета. Из state manager-а.


Помните, пару лет назад у нас была усталость от JavaScript-а? Сейчас я вижу у огромного количества людей усталость от state manger-ов. Redux? Да, да and да. RxJS? Тоже. MobX? Если он такой простой — блин, почему у него есть в документации страница западни.html?


Ответ “почему многим так тяжело” есть, но сначала надо точно сформулировать проблему.


Выбирая state manger — мы выбираем образ мышления. Вариантов сейчас много, но самые популярные подходы бьются на 3 группы:

Читать дальше →
Total votes 14: ↑13 and ↓1+19
Comments9

Собираем свой flow для git с нуля

Reading time6 min
Views17K

На днях вышла прекрасная, хотя и спорная статья — Please, stop using GitFlow! (и еще десяток на эту же тему после нее).


Ее основными тезисами были:


  • GitFlow противоречит тезису "ветки должны быть короткоживущими".
    Это важно, потому что чем меньше живет ветка — тем меньше шанс конфликтов (не только git, но и логических)
  • GitFlow препятствует rebase-ам, чтобы сохранить merge-коммиты.
    Да, их можно сохранять и при ребейзах, но команды Git Flow не делают этого.
  • GitFlow отрицает подход Contunious Delivery, считая, что каждый акт Delivery должен совершаться релиз-инженером, да и в целом можно увидеть, что он ориентирован только на долгий релизный цикл.
  • GitFlow не дружит с микросервисами поверх мультирепозиториев (впрочем, тут вообще мало что подходит, это идея, которая всегда плохо заканчивается)
  • Но проблема GitFlow в том, что он и с монорепозиториями тоже не дружит.


    Я сам об это споткнулся в процессе дизайна пайплайнов CI: GitFlow чудовищно мешает, когда работает поверх монорепозитория с несколькими deliverables, например, когда в одном репозитории отдельно и бэкэнд, и фронтэнд — уже из-за того, что он позволяет докоммичивать в релизные ветки, могут возникнуть конфликты при обратном мердже, если в один момент времени существует больше, чем одна релизная ветка. Да даже если одна, все равно плохо — в таких условиях надо патчить в принципе релизные механизмы GitFlow, чтобы хоть как-то заработали отдельные релизы сущностей.



Так что делать-то?

Читать дальше →
Total votes 14: ↑12 and ↓2+19
Comments48

Почему веб такой сложный?

Reading time7 min
Views38K

Обсуждение итогов года во фронтэнде внезапно стало предметом дискуссии. Добавлю свое мнение, и буду рад услышать мнение других.


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


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


image
источник картинки

Читать дальше →
Total votes 32: ↑30 and ↓2+28
Comments111

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

Reading time8 min
Views91K

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


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


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


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

Читать дальше →
Total votes 53: ↑51 and ↓2+49
Comments43

Агрегат для node.js

Reading time8 min
Views11K
GitHub и NPM библиотеки.


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

Некоторое время назад я задумался, почему же в node.js работа с реляционными БД, такими как *SQL, и некоторыми noSQL типа Mongo, сложна, и сделал альтернативное решение, заточенное под скорость работы программиста (в сравнении с классическими решениями, заточенных под скорость работы с БД) и прямолинейность и компактность API для минимального порога вхождения. Первым источником вдохновления стал доклад "минимальная поверхность API", вторым — знаменитая цитата Дональда Крута:

Программисты тратят ненормальное количество времени, волнуясь о скорости некритичных частей приложений, и эти попытки повысить эффективность серьезно отрицательно влияют на отладку и поддержку этих приложений.  Преждевременная оптимизация есть корень всех зол.
Читать дальше →
Total votes 10: ↑8 and ↓2+6
Comments15

Продвинутый Gulp и Browserify: интересные трюки

Reading time9 min
Views42K
Пару недель назад я начал цикл о том, как делал некоммерческий музыкальный проект (первый пост есть в «я пиарюсь», не буду ставить ссылок), но, к сожалению, в первой же статье увлекся, и вместо того, чтобы рассказывать о том, как делал конкретно его, начал вспоминать эффективные трюки из других проектов. Видимо, именно это вкупе с прописанным акцентом на сам проект привело к тому, что за мной и постом прилетело НЛО.

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

Поэтому я постарался убрать все упоминания проекта и повторно публикую (с доработками и правками) статью, которую по сути никто еще не видел. Если вы фанат grunt — почитайте хотя бы вторую часть: то, что вы не любите gulp, не значит, что вы не любите browserify.

Краткое содержание:
  1. Простой способ обработки ошибок;
  2. Универсальная структура для хранения исходных файлов;
  3. Объединение нескольких потоков (например, скомпилированный coffee и js) в один;
  4. Создание потока из текста;
  5. создание собственных плагинов для Browserify;
  6. создание плагинов из плагинов Gulp для Browserify.

Читать дальше →
Total votes 32: ↑28 and ↓4+24
Comments15

Музыкальные паблики по-новому, или как я Public Radio делал

Reading time11 min
Views6.1K
Это единственный пост про проект Public Radio в хабе «Я пиарюсь». Причина простая: этот пост совершенно, никаким образом не технологический. Просто не знаю, в какой хаб лучше поместить этот пост.

Я пишу его скорее для самого почти полугодичной давности, когда положил в долгий ящик, а потом чуть не забросил этот проект. Для таких же, как я — людей, которые по каким-то причинам, жизненным обстоятельствам перестали работать над каким-то прекрасным проектом, и вот-вот махнут на него рукой. Я довел Public Radio до логической точки, до сегодняшнего первого релиза благодаря, пожалуй, в том числе какому-то везению, которое поставило меня на ноги, но именно такая статья, наверное, помогла бы мне тогда, если бы мне не так сильно повезло.
Остальные публикации пойдут в «веб-разработку», «javascript» и так далее: мне есть много что рассказать о начинке моего «радио», но начать большой рассказ о нем я очень хочу именно с лирики и просто истории того, как я все это делал.

Чтобы вы понимали, о чем я говорю: Public Radio — это специализированный плеер для музыкальных пабликов в Вконтакте. Как сказала моя хорошая подруга, один из первых тестеров этого приложения — «last.fm с подборками от теплых ламповых человеков, а не от бездушных роботов». Собственно, это абсолютно точное описание: last.fm дает достаточно точные подборки по твоим вкусам, но это действительно «группы, похожие на те, что вы слушаете». Но есть одно НО: множество групп, похожих на те, что я слушаю, и множество тех, что меня приведут в восторг, не совпадают. Я вот за неделю использования Public Radio с удивлением для себя самого понял, что мне очень даже нравятся некоторые представители отечественной альтернативной сцены (например, Пионерлагерь Пыльная Радуга) — хотя всегда слушал несколько другую музыку.


Как все начиналось, и почему для меня сегодня это плеер, который играет на моем ноутбуке нон-стоп
Total votes 38: ↑33 and ↓5+28
Comments41

Используете ли вы Веб Компоненты?

Reading time1 min
Views6.3K
Друзья, просто небольшой опрос, чтобы понять — имеет ли смысл рассказывать об этой теме, и на каком уровне рассказывать.
Если у вас есть опыт использования Веб Компонентов или только Пользовательских Элементов — пожалуйста, расскажите об этом в комментариях.
Буду очень благодарен ответам.
Total votes 24: ↑14 and ↓10+4
Comments9

Web Components — это единственное светлое будущее веба. Смиритесь

Reading time11 min
Views57K

Вчера вышла [весьма достойная статья про Web Components, и я понял, что не могу не поделиться тем опытом, что я накопил за последние восемь месяцев. Я не буду рассказывать о том, как работать с Веб Компонентами, я расскажу, почему. Поэтому тем, кто не знает об этом стеке технологий, стоит прочитать статью по ссылке выше.
Дело в том, что в июне вышла первая стабильная версия моей библиотеки CornerJS. Начавшись как автономная реализация директив из AngularJS, она постепенно превратилась в более простой — как в использовании, так и в реализации — аналог (неточный, да, я знаю) Пользовательских Элементов из спецификации Веба Компонентов.

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

Это замечательная, на мой взгляд, в реализации библиотека — я действительно считал ее основным инструментом в разработке, и в последнем проекте (видеопортале) она оказалась важнее jQuery: от него я мог бы отказаться, а от нее нет.

Но я, как человек, внедривший ее в нашу команду, и отказываюсь от нее — мы переходим на Mozilla X-tags для IE9+ сайтов и Polymer для IE10+ сайтов. К счастью, на моей памяти у нас был всего один или два проекта IE8+.

И в этом посте я расскажу, почему веб-компоненты — это не просто будущее веба. А единственное будущее веба.

Читать дальше →
Total votes 91: ↑72 and ↓19+53
Comments23

Перевод AirBnB Style Guide

Reading time4 min
Views48K


У нас, как и у всех, изначально в разработке использовались стандарты написания кода, но на деле они ограничивались примерно таким:

— В кэмелкейсе пишем?
— Да, как обычно, в кэмелкейсе
… прошло две недели…
— Мы ж в кэмелкейсе договаривались!!!


В нашем случае не было разве, что последней фразы.
Уже давно хотелось как-то это систематизировать, но никак не доходили руки до выбора между стилями от jQuery, Google, ideomatic.js и Crockford.

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

Прочитать крайне советую как минимум всем начинающим js-разработчикам.

Читать дальше →
Total votes 77: ↑66 and ↓11+55
Comments92

Есть вероятность глюков в Chrome/Chromium 31, Opera 18: селекторы вроде nth-last-child могут отрабатывать некорректно

Reading time2 min
Views8.7K

В issues хрома за последние несколько дней появилось несколько issue, в которых описывается примерно следующий сценарий: используется тяжелый css3 селектор, в результате чего идет некорректное обращение. В том числе может некорректно работать селектор к нескольким объектам через запятую (#a, #b, #c etc.), однозначно некорректно работает nth-last-child. Гарантированно выявлен баг с ним.
Проблема, судя по всему, находится в механизме css-запросов, так как document.querySelector также некорректно адресуется. Что самое неприятное — jQuery так же опирается на нативные функции (если они существуют). Таким образом, сложные jQuery-запросы также перестали отрабатывать корректно.
Если в ваших проектах используется nth-last-child, подробности бага под катом
Читать дальше →
Total votes 33: ↑31 and ↓2+29
Comments9

Harmony collections NOW

Reading time11 min
Views9.6K

На хабре уже проскакивала статья про такие замечательные вещи, как Map, WeakMap и Set, но в действительности реальные возможности этих API не были раскрыты (если я все-таки хорошо воспользовался поиском).
Эти API толком не реализованы нигде, кроме firefox (можно включить в chrome canary), но даже там до недавних пор не поддерживалось использование HTMLElement-подобных объектов в качестве ключей. Polymer, например, убрал только три недели назад

	if (navigator.userAgent.indexOf('Firefox/') > -1)


Чем же они так хороши? По сути Map/WeakMap можно воспринимать как обычные хэш-объекты, только в качестве ключей можно использовать только сложные объекты (Object, Function, Array), так как привязка идет не по содержимому, а по адресу в памяти.
Таким образом появляется возможность привязаться на фронтэнде к
  • dom-элементу
  • XHR-запросу
  • File-элементу


Это дает нам возможность работать без id-шников элементов, делать дата-биндинг в разы быстрее, создать безумную альтернативную реализацию promises и так далее.
Мы будем говорить о WeakMap. Даже не так, мы будем говорить о существующих полифиллах для WeakMap.

Читать дальше →
Total votes 41: ↑38 and ↓3+35
Comments16

Хотите распределить элементы, привязавшись к их количеству, на одних стилях? Да запросто

Reading time3 min
Views24K
Альтернативное название статьи – «почти :child-count(n)». Потому что именно так оно все и работает. На голом CSS и без каких-либо дата-атрибутов или чего-либо еще в верстке.

Представьте, что у вас есть, например, какая-нибудь лента новостей. Неважно, какая. Главное, что вы не знаете, сколько в ней будет элементов, и как их расставить так, чтобы было симметрично. И хочется сделать что-то бесполезное, но красивое: например, расставить все в две колонки, а некоторые блоки вставить во всю ширину. Каждый третий, или каждый пятый.

Конечно же, если у вас четыре элемента, а третий вы сделали во всю ширину – последний будет свешиваться в конце. Поэтому нужно применять такую красивую и бесполезную вещь только в том случае, если количество элементов кратно трем. А если их нечетное число(но не кратное трем) — нужно делать, например, последний элемент во всю шинину.
Вот так, например:



Как же это сделать?
Total votes 51: ↑43 and ↓8+35
Comments19

CornerJS, или директивы «как в AngularJS», только лучше

Reading time4 min
Views13K
image

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

В рабочих проектах это может сводиться к чему-то вроде

function pageChange(){
    if ($(‘.element-carousel').length>0) {$('.element-carousel').initCarousel()}
    if ($('.element-scrollbox').length>0) {$('.element-scrollbox').initScrollbox()}
…


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

Знакомо? Думаю, да. Считаете ли вы этот подход неправильным? Если первый ответ – да, то уверен, что и второй тоже да.

Хотите узнать, как можно сделать правильно, аккуратно и красиво?
Читать дальше →
Total votes 47: ↑42 and ↓5+37
Comments24

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Date of birth
Registered
Activity