Pull to refresh
22
0
Andrew Ka @comerc

#кодеротбога

Send message

Конструктор шаблонов проектов или сложности управления большими проектами

Reading time9 min
Views6.7K

Rispa — инструмент, чтобы подружить всех со всеми


Предыстория


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

Читать дальше →
Total votes 18: ↑16 and ↓2+14
Comments2

Typescript. Тип object

Reading time3 min
Views63K

В TypeScript версии 2.2 был введён новый тип object. Он описывает любой непримитивный тип.
Следующие типы принято считать примитивными в JavaScript:


  • boolean
  • number
  • string
  • symbol
  • null
  • undefined

Все остальные типы принято считать непримитивными.

Читать дальше →
Total votes 13: ↑12 and ↓1+11
Comments19

23 Шортика по ReactJS – короткие видео-уроки не только для новичков

Reading time6 min
Views23K
image

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

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

Так появились шортики. Я собрал весь изюм из прошлых уроков, часто задаваемых вопросов на практике и дыр у новичков в собеседованиях и превратил их в 3х-4х минутные ролики. Принцип шортиков: пример кода, не больше 5 минут, заранее набранный код, не банальный контент, подтверждение вопроса практикой.
Total votes 30: ↑20 and ↓10+10
Comments8

Тестирование компонентов с Puppeteer и Jest

Reading time4 min
Views7.6K

На Хабре есть публикация, описывающая написание тестов с использованием Puppeteer и Jest. Рекомендую к ознакомлению, если вы ещё не знаете, что такое Puppeteer. В данной статье, на примере React-компонента, будет описываться способ тестирования вызовов callback-функций. Например, есть компонент с props onChange, и необходимо протестировать, что при некоторых действия пользователя будет вызвана callback-функция с ожидаемыми переданными параметрами. Для этого будет использоваться библиотека Puppeteer-io. Но для начала рассмотрим небольшой примерчик на html и чистом javascript без привязки к библиотекам или фреймворкам…
Читать дальше →
Total votes 12: ↑11 and ↓1+10
Comments0

Как убить технаря в тимлиде

Reading time15 min
Views33K
В IT линейных руководителей и тимлидов традиционно набирают из лучших инженеров. Их работа теперь состоит совсем в другом: управлять людьми и взаимодействовать с другими командами и организациями. Исходный же посыл «я лучше знаю, как нужно» часто приводит к совмещению в одном лидере одновременно двух крайностей: отсутствия делегирования и тотального контроля. И то, и другое вовсе не оставляет ни времени, ни сил на управление. О том, как со всем этим справиться и какие еще препятствия могут встретиться на пути новоиспеченного руководителя, на основе собственного опыта и собственноручно набитых шишек расскажет Александр Трофимов из Лаборатории Касперского.


В основе публикации — расшифровка доклада Александра Трофимова с HighLoad++ 2017
Total votes 52: ↑49 and ↓3+46
Comments20

Как мы выбирали между Elastic и Tarantool, а сделали свою (самую быструю) in-memory БД. С Join и полнотекстовым поиском

Reading time10 min
Views47K

Всем привет.


С середины 2016 года мы проектируем и разрабатываем новое поколение платформы. Принципиальное отличие от первого поколения — поддержка API "тонкого" клиента. Если старая платформа предполагает, что на клиента при запуске загружается метаинформация о всем контенте, который доступен для абонента, то новая платформа должна отдавать срезы данных отфильтрованные и отсортированы для отображения на каждом экране/странице.


Высокоуровневая архитектура на уровне хранения данных внутри системы — постоянное хранение всех данных в централизованном реляционном SQL хранилище. Выбор пал на Postgres, тут никаких откровений. В качестве основного языка для разработки — выбрал golang.


У системы порядка 10м пользователей. Мы посчитали, что с учетом профиля теле-смотрения, 10М пользователей может дать сотни тысяч RPS на всю систему.



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


Посмотрели на существующие решения — погоняли прототипы. Данных, по современным меркам у нас немного, но параметры фильтрации (читай бизнес-логика) — сложные, и главное персонализированные — зависящие от сессии пользователя, т.е. использовать параметры запроса как ключ кэширования в K-V кэше будет очень накладно, тем более пейджинг и богатый набор сортировок никто не отменял. По сути, под каждый запрос от пользователя формируется полностью уникальный набор отфильтрованных записей.

Читать дальше →
Total votes 79: ↑74 and ↓5+69
Comments117

Как и почему мы переосмыслили поисковое поле ввода Яндекса

Reading time8 min
Views24K

Мы уже дважды рассказывали про наши поисковые подсказки: первый пост вышел аж в 2012 году, второй же случился совсем недавно.



Поисковые подсказки — одна из тех штук, которыми компания может гордиться, поэтому нам не кажется зазорным рассказывать о них часто. Сегодня мы поговорим о функциональных изменениях в поисковых подсказках, произошедших в 2017 году. Речь пойдёт не только об изменениях в интерфейсе, но и об интересной статистике и технологических вызовах, которые она поставила перед нами.


1. «Расширяющееся» поле ввода


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


Удивительно, что поисковые системы полностью проигнорировали этот тренд. А ведь длинные запросы составляют значительную часть потока. Скажем, запросы, содержащие более семи слов, составляют до 10% всего потока запросов к Яндексу!

Читать дальше →
Total votes 66: ↑63 and ↓3+60
Comments73

Эффективное использование process.env

Reading time6 min
Views84K
Если вы только начинаете осваивать Node.js, то, вам, наверняка, встречались примерно такие строчки кода: app.listen(process.env.PORT). Зачем вбивать в редактор кода шестнадцать символов, когда того же эффекта можно добиться, просто указав номер порта, например — 3000? Предлагаем это выяснить.


Читать дальше →
Total votes 30: ↑27 and ↓3+24
Comments12

Git: советы новичкам – часть 1

Reading time8 min
Views143K
В Playrix приходит много новых сотрудников и большинство из них не работали с Git. Особенно это касается гейм-дизайнеров и художников. Хотя и для программистов это не редкость – опыт работы с другими системами контроля версий не слишком помогает. Например, часто встречается опыт работы с SVN. Но Git заметно отличается по идеологии. Заучить, какие кнопки нажимать, в большинстве случаев не сложно, но шаг в сторону – и уже трудно понять, что происходит.



Поэтому мы решили написать ознакомительный материал. Мы поговорим о системе контроля версий и логике её работы, с самых азов. С Git можно работать с помощью  разных клиентов, потому в статье не пойдет речь об интерфейсе пользователя. Это может показаться непривычным, но это сделано намеренно. Вместо этого мы сфокусируемся на рабочем каталоге, коммитах, ветках, командах pull, push и прочих. Когда вы разберетесь в этих понятиях, вам останется выбрать один из Git-клиентов и освоить его интерфейс.
Читать дальше →
Total votes 35: ↑32 and ↓3+29
Comments45

Долой таблички! Как выучить английские времена

Reading time5 min
Views258K


Времена в английском языке традиционно считаются одной из самых сложных тем в обучении. Они прочно ассоциируются с зазубриванием длинных малопонятных таблиц и запоминанием неочевидных правил. На самом деле, все не так. Рассказываем, как быстро овладеть временами и их аспектами, чтобы начать говорить по-английски, не спотыкаясь.
Читать дальше →
Total votes 77: ↑72 and ↓5+67
Comments97

Я создал приложение, которое делает изучение алгоритмов и структур данных гораздо интереснее

Reading time7 min
Views52K
image

Интерфейс CS-Playground-React

Я программист-самоучка. Это значит, что я постоянно имею дело с синдромом самозванца. Для меня не редкость чувствовать, что я неполноценный, и я в невыгодном положении для понимания сложных концепций информатики.

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

Зайдите на CS-Playground-React, простую браузерную JavaScript-песочницу для изучения и практикования алгоритмов и структур данных.

Это приложение не требует регистрации и автоматически сохраняет ваши достижения, предлагает решения когда вы застряли, и имеет кучу ссылок на полезные статьи, туториалы, и другие ресурсы, чтобы помочь сделать ваше обучение не очень болезненным, как было у меня.
Читать дальше →
Total votes 29: ↑25 and ↓4+21
Comments38

React, встроенные функции и производительность

Reading time13 min
Views30K
Когда мне приходится рассказывать о React, или когда я даю первую лекцию учебного курса, показывая всякие интересные вещи, кто-нибудь непременно спросит: «Встроенные функции? Слышал, они медленные».



Этот вопрос появлялся далеко не всегда, но в последние несколько месяцев мне, в роли автора библиотеки и преподавателя, приходится отвечать на него чуть ли не каждый день, иногда — на лекциях, иногда — в твиттере. Честно говоря, я от этого уже устал. К сожалению, я не сразу сообразил, что лучше изложить всё в виде статьи, которая, надеюсь, окажется полезной для тех, кто задаётся вопросами производительности. Собственно говоря — перед вами плод моих трудов.
Читать дальше →
Total votes 24: ↑20 and ↓4+16
Comments23

Как правильно чистить лук, или Почему разработка ПО выходит из-под контроля

Reading time10 min
Views29K


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

Складывается ощущение, что проект зажил собственной жизнью и пытается сожрать вас.



Как так случилось? Может, наняли плохого разработчика? Кто-то ошибся в планировании проекта? А вдруг сама идея проекта была ужасной?

Возможно. Но часто проект бывает с самого начала обречен на провал из-за недопонимания одного важного момента.

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

Это предположение — неверно.

Проект — это не лист бумаги, не двумерный объект — у него есть глубина.

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

Переведено в Alconost
Читать дальше →
Total votes 42: ↑38 and ↓4+34
Comments35

Паттерны React

Reading time10 min
Views134K
Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «React Patterns» Майкла Чана, с некоторыми моими примечаниями и дополнениями.

Прежде всего хотел бы поблагодарить автора оригинального текста. В переводе я использовал понятие «Простой компонент» как обозначение Stateless Component aka Dump Component aka Component vs Container
Конструктивная критика, а так же альтернативные паттерны и фичи React приветствуются в комментах.

Оглавление
  • Простые компоненты — Stateless function
  • JSX распределение атрибутов — JSX Spread Attributes
  • Деструктуризация аргументов — Destructuring Arguments
  • Условный рендеринг — Conditional Rendering
  • Типы потомков — Children Types
  • Массив как потомок — Array as children
  • Функция как потомок — Function as children
  • Функция в render — Render callback
  • Проход по потомкам — Children pass-through
  • Перенаправление компонента — Proxy component
  • Стилизация компонентов — Style component
  • Переключатель событий — Event switch
  • Компонент-макет — Layout component
  • Компонент-контейнер — Container component
  • Компоненты высшего порядка — Higher-order component

Поехали!
Читать дальше →
Total votes 29: ↑25 and ↓4+21
Comments26

Присвоение имён: руководство для программиста

Reading time4 min
Views16K
Перевод Naming 101: Programmer’s Guide on How to Name Things.

Присвоение имён — одна из главных трудностей в разработке. Невозможно подсчитать, сколько времени мы тратим на обдумывание имён и на попытки разобраться в коде с плохими именами. И не важно, объекты это, методы, классы или что-то другое. Считается доказанным фактом, что мы тратим больше времени на чтение кода, а не на его написание, поэтому хорошие правила присвоения имён в будущем облегчат вам жизнь.

Хорошие имена делают код лучше и чище. Они помогают интуитивно определять, за что отвечает каждая часть кода. В будущем другим разработчикам будет легче читать ваш код, да и вам самим тоже.

Ниже объясним важность хороших правил присвоения имён и поделимся полезными советами.
Читать дальше →
Total votes 25: ↑18 and ↓7+11
Comments5

Задачи планирования и программирование в ограничениях

Reading time8 min
Views25K
Когда у тебя в запасе много популярных инструментов вроде JAVA, Python, Ruby, PHP, C#, C++ и других, чувствуешь себя почти всемогущим. Стандартный подход в разработке рулит. Но только до тех пор, пока не столкнешься с определенным типом задач.

 
Подумайте, как правильно написать программу, которая оптимально…

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

image
Читать дальше →
Total votes 19: ↑19 and ↓0+19
Comments5

Отладка React-приложений в VS Code

Reading time4 min
Views46K


Прошли те дни, когда мне, в процессе разработки, приходилось тратить время, переключаясь между терминалом, браузером и редактором. Теперь всё делается иначе — быстрее и удобнее. Сегодня я расскажу об оптимизации повседневных дел React-разработчика. А именно, речь пойдёт о том, как связать Visual Studio Code и Google Chrome. Это даст возможность отлаживать браузерный код в редакторе.


Средства отладки VS Code и jest от Facebook
Читать дальше →
Total votes 25: ↑22 and ↓3+19
Comments10

React Native: от простой анимации до интерактивной на скорости 60 FPS

Reading time15 min
Views21K

Необходимость в обмене данными между UI и JS процессами в React Native неизбежно сказывается на производительности препятствуя выполнению JavaScript анимации с высокой частотой кадров. Современные библиотеки, такие как Animated, решают эту проблему минимизацией количества сообщений, передаваемых через мост. Следующий шаг — это элементы управления, которые непрерывно реагируют на жесты пользователя. Как мы можем анимировать их со скоростью 60 кадров в секунду?

Осторожно, Траффик!
Total votes 13: ↑13 and ↓0+13
Comments2

Comedy. Акторы в Node.JS для гибкого масштабирования

Reading time14 min
Views16K

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

Читать дальше →
Total votes 27: ↑26 and ↓1+25
Comments36

Аутентификация в Node.js. Учебные руководства и возможные ошибки

Reading time12 min
Views42K
Однажды я отправился на поиск учебных руководств по аутентификации в Node.js/Express.js, но, к сожалению, не смог найти ни одного, которое меня бы полностью устроило. Некоторые были неполными, некоторые содержали ошибки в сфере безопасности, вполне способные навредить неопытным разработчикам.

Сразу скажу, что я всё ещё нахожусь в поиске надёжного, всеобъемлющего решения для аутентификации в Node/Express, которое способно составить конкуренцию Devise для Rails. Однако, удручающая ситуация в сфере руководств подвигла меня на подготовку этого материала. Тут я разберу некоторые наиболее распространённые ошибки в области аутентификации и расскажу о том, как их избежать.

image
Читать дальше →
Total votes 31: ↑25 and ↓6+19
Comments3

Information

Rating
Does not participate
Registered
Activity