Pull to refresh
1
0
Анастасия @astarta0

Пользователь

Send message

Интересная задачка для интервью, карринг и частичное применение функции

Reading time3 min
Views80K
Хожу по job interview. Где-то скучно, где-то весело. Где-то интересно. На одном из таких меня попросили написать функцию, которая умеет складывать два числа. Я написал:

  it ('should add two numbers', function () {
    var add = function (a,b) {
      return a + b;
    };

    assert.equal(add(2,3), 5);
  });


А если, говорят, сигнатура функции должна быть типа такой: add(num1)(num2)? Не вопрос, говорю. Думая, что хитрый буржуин хочет проверить, знаю ли я про то, что можно возвращать функции из функций, пишу вот такое:

  it ('should be called like add(num1)(num2)', function () {
    var add = function (a) {
      return function (b) {
        return a + b;
      };
    };

    assert.equal(add(2)(3), 5);
  });


Читать дальше →
Total votes 168: ↑163 and ↓5+158
Comments74

Паттерны React

Reading time10 min
Views135K
Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «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 time5 min
Views72K

Браузеру предстоит пройти много шагов, прежде чем HTML-ответ от сервера будет преобразован в пиксели на экране. Последовательность этих шагов, необходимая для первого отображения страницы, называется «Критический путь рендеринга» (ориг. Critical Rendering Path).


Читать дальше →
Total votes 22: ↑21 and ↓1+20
Comments11

«Бизнес с нуля. Метод Lean Startup». Книга за 15 минут

Reading time14 min
Views192K


Lean Startup — это концепция бережливого производства. Эта методика помогает использовать научный подход для построения растущего бизнеса и избегать лишних затрат.

Рекомендуем к прочтению краткое изложение бестселлера Эрика Риса предпринимателям и всем, чья деятельность связана с инновациями и запуском продуктов.
Читать дальше →
Total votes 9: ↑9 and ↓0+9
Comments1

Что взять за основу React приложения

Reading time10 min
Views30K

Каждый раз начиная писать React приложение, вы так или иначе выберите какой-то вариант:


  • копи-паст вашего предыдущего проекта
  • какой-то бойлерплейт или даже генератор (типа Yeoman)
  • готовый фреймворк не требующий конфигурации
  • пишете сами все с нуля

Каждый из способов имеет свои сильные и слабые стороны, как на длинной, так и на короткой дистанции.


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

Читать дальше →
Total votes 33: ↑31 and ↓2+29
Comments84

Create React App (aka React Scripts) и серверный рендеринг с Redux и Router

Reading time5 min
Views28K

Из комментариев к статье стало понятно, что очень многие люди склоняются в сторону экосистемы Create React App (он же React Scripts). Это вполне разумно, т.к. это самый популярный и простой в использовании продукт (благодаря отсутствию конфигурации и поддержке ведущих людей React-сообщества), в котором, к тому же, есть почти все необходимое — сборка, режим разработки, тесты, статистика покрытия. Не хватает только серверного рендеринга.


В качестве одного из способов в официальной документации предлагается либо вбивать начальные данные в шаблон либо воспользоваться статическими слепками. Первый подход не позволит поисковикам нормально индексировать статичный HTML, а второй — не поддерживает проброс никаких начальных данных, кроме HTML (фраза из документации: this doesn't pass down any state except what's contained in the markup). Поэтому если используется Redux, то придется для рендеринга использовать что-то другое.


Я адаптировал пример из статьи для использования с Create React App, теперь он называется Create React Server и умеет запускать серверный рендеринг командой:


create-react-server --createRoutes src/routes.js --createStore src/store.js
Читать дальше →
Total votes 7: ↑7 and ↓0+7
Comments12

Разработка простых современных JavaScript-приложений с использованием Webpack и прогрессивных веб-технологий

Reading time19 min
Views33K
Думали ли вы о том, чтобы воспользоваться при разработке своего очередного веб-проекта простейшим из существующих набором технологий? Если это так — значит материал, перевод которого мы публикуем сегодня, написан специально для вас.

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

image

В этой статье мы поговорим о применении современных технологий при разработке веб-приложений, возможности которых не ограничены возможностями фреймворков. Кстати, если вам это нужно, то вы, с использованием описываемых здесь технологий, сможете создать собственный узкоспециализированный фреймворк. Чистый JavaScript и другие базовые веб-технологии дают разработчикам возможность делать то, что им нужно, не ограничивая себя рамками применяемых ими инструментов.
Читать дальше →
Total votes 33: ↑30 and ↓3+27
Comments9

Prettier, ESLint, Husky, Lint-Staged и EditorConfig: инструменты для написания аккуратного кода

Reading time16 min
Views131K
Вы стремитесь к тому, чтобы писать аккуратный код, но не знаете с чего начать… Вы вчитываетесь в руководства по стилю, вроде этого от Airbnb, стараетесь следовать практическим рекомендациям ведущих специалистов… Вам приходится удалять неиспользуемый код? Приходится искать ненужные переменные? Вы пытаетесь выявлять неудачные паттерны, применённые в ваших программах? Например — хотите понять, читая хитросплетения кода некоей функции, возвратит ли она что-нибудь или нет. Звучит знакомо? Проблема заключается в том, что программисту очень тяжело и многое успевать, и многому учиться.

Может быть вы — тимлид, под началом которого трудится команда разработчиков разного уровня? В вашей команде есть новые люди? Беспокоит ли вас то, что код, который они напишут, не будет соответствовать вашим стандартам? Проходят ли ваши дни в проверках чужого кода, когда эти проверки, в основном, касаются соблюдения стандартов, а не программной логики?



Автор этого материала говорит, что он сталкивался со всем тем, чему посвящены только что заданные вопросы. То, с чем он столкнулся, утомляет и изматывает. Здесь он хочет рассказать об инструментах, правильное применение которых позволяет решить вышеописанные проблемы.

А именно, здесь пойдёт речь о таких средствах как Prettier, ESLint, Husky, Lint-Staged, EditorConfig, об автоматизации форматирования и линтинга кода. Этот материал ориентирован, в основном, на React-разработку, но рассмотренные здесь принципы можно применить в любом веб-проекте. Вот репозиторий, где, кроме прочего, собрано то, о чём тут пойдёт речь.
Читать дальше →
Total votes 38: ↑34 and ↓4+30
Comments15

Переносим 30 000 строк кода с Flow на TypeScript

Reading time12 min
Views14K
Недавно мы перенесли 30 тысяч строк кода JavaScript нашей системы MemSQL Studio с Flow на TypeScript. В этой статье я расскажу, почему мы портировали кодовую базу, как это происходило и что получилось.

Дисклеймер: моя цель — вовсе не критика Flow. Я восхищаюсь проектом и думаю, что в сообществе JavaScript достаточно места для обоих вариантов проверки типов. В итоге каждый выберет то, что ему лучше подходит. Искренне надеюсь, что статья поможет в этом выборе.

Сначала введу вас в курс дела. Мы в MemSQL большие фанаты статической и строгой типизации JavaScript, чтобы избежать типичных проблем с динамической и слабой типизаций.
Читать дальше →
Total votes 21: ↑21 and ↓0+21
Comments11

Анализ и оптимизация React-приложений

Reading time22 min
Views39K
Люди, вроде меня, которые борются за высокую производительность сайтов, часто тратят на это много времени. Поэтому сейчас я собираюсь раз и навсегда решить проблему низкого быстродействий веб-ресурсов, интерфейс которых написан на React. А именно, я предлагаю всем, кто это читает, сегодня же прекратить пользоваться React.



Автор материала, перевод которого мы сегодня публикуем, конечно же, шутит. Здесь речь пойдёт о том, как оптимизировать производительность React-приложений. Кстати, прежде чем начать, подумаем о том, зачем вообще нужна оптимизация сайтов. Пожалуй, можно сказать, что нужна она для того, чтобы сайтом могло бы пользоваться больше людей, чем до оптимизации.
Total votes 34: ↑32 and ↓2+30
Comments4

Осваиваем async/await на реальном примере

Reading time9 min
Views58K
Конструкция async/await представляет собой сравнительно новый подход к написанию асинхронного кода в JavaScript. Она основана на промисах и, в результате, не блокирует главный поток. Новшество этой конструкции заключается в том, что благодаря ей асинхронный код становится похожим на синхронный и ведёт себя подобным образом. Это открывает перед программистом замечательные возможности.

image

До появления async/await при разработке асинхронных механизмов программ использовались коллбэки и промисы. Автор материала, перевод которого мы публикуем сегодня, предлагает сначала вспомнить о том, как писать код по-старому, а потом, на реальном примере, изучить применение async/await.
Читать дальше →
Total votes 53: ↑45 and ↓8+37
Comments23

Новшества серверного рендеринга в React 16

Reading time11 min
Views47K
Вышел React 16! Рассказывая об этом событии, можно упомянуть множество замечательных новостей (вроде архитектуры ядра Fibers), но лично меня больше всего восхищают улучшения серверного рендеринга. Предлагаю подробно всё это разобрать и сравнить с тем, что было раньше. Надеюсь, серверный рендеринг в React 16 понравится вам так же, как он понравился мне.


Читать дальше →
Total votes 33: ↑33 and ↓0+33
Comments18

Переписываем тестовое задание для junior frontend на TypeScript и react-hooks

Reading time21 min
Views43K

Привет Хабр, сегодня мы позанимаемся с TypeScript и React-hooks. Данный туториал поможет вам разобраться с основами "тайпскрипта" и поможет в работе над тестовым заданием для фронтендера.


Тестовые задания на проекте "Без Воды" — это возможность получить code-review. Дедлайн для текущего задания — 11 апреля 2019 года.


Читать дальше →
Total votes 21: ↑20 and ↓1+19
Comments0

Keys in React. Готовим правильно

Reading time15 min
Views78K

Сегодня поговорим об атрибуте key в React. Часто разработчики, которые только начинают использовать React, не придают большого значения атрибуту key. А зря…


image
Что говорит уточка, когда узнала, что ты не используешь key


Чтобы представить работу ключей полностью и с различными кейсами, рассмотрим план:


  1. Reconciliation
  2. Реиспользование ключей и нормализация
  3. Использование key при рендере одного элемента
  4. Работа с ключами при передаче компоненту children
Total votes 33: ↑33 and ↓0+33
Comments1

Перед вами — React Modern Web App

Reading time21 min
Views35K

Перед тем как начать собирать с нуля Modern Web App нужно разобраться, что такое — Современное Веб-Приложение?


Modern Web App (MWA) — приложение, придерживающееся всех современных веб-стандартов. Среди них Progressive Web App — возможность скачивать мобильную браузерную версию на телефон и использовать как полноценное приложение. Так же это возможность листать сайт в оффлайне как с мобильного устройства, так и с компьютера; современный материальный дизайн; идеальная поисковая оптимизация; и естественно — высокая скорость загрузки.



Вот что будет в нашем MWA (советую использовать эту навигацию по статье):



Люди на Хабре деловые, поэтому сразу ловите ссылку на GitHub репозиторий, архив с каждой из стадий разработки и демо. Статья рассчитана на разработчиков, знакомых с node.js и react. Вся необходимая теория представлена в необходимом объеме. Расширяйте кругозор, переходя по ссылкам.


Приступим!

Читать дальше →
Total votes 17: ↑14 and ↓3+11
Comments11

Неочевидные навыки, необходимые менеджеру продукта

Reading time8 min
Views6K


Позвольте я раскрою тайну, которую в управлении продуктами скрывают — по крайней мере, об этом не говорят вслух: нас не слишком заботят профессионально-технические навыки. И о каких навыках речь? Оформление требований к продукту? Проведение опросов среди пользователей? Понимание дизайна интерфейсов? Знание бизнеса и технологий?

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

Несколько лет назад, когда я начала карьеру в сфере управления продуктами, почти каждый поисковый запрос вроде «Что делают менеджеры продуктов?» или «Какие навыки нужны хорошему менеджеру продукта?» приводил к следующей диаграмме Венна:


Источник: What, exactly, is a Product Manager?

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

И тут действительность нанесла мне удар — иными словами, я погрузилась в реальную работу.

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

Переведено в Alconost
Читать дальше →
Total votes 24: ↑23 and ↓1+22
Comments2

Иван Тулуп: асинхронщина в JS под капотом

Reading time24 min
Views54K
А вы знакомы с Иваном Тулупом? Скорее всего да, просто вы еще не знаете, что это за человек, и что о состоянии его сердечно-сосудистой системы нужно очень заботиться.

Об этом и о том, как работает асинхронщина в JS под капотом, как Event Loop работает в браузерах и в Node.js, есть ли какие-то различия и, может быть, похожие вещи рассказал Михаил Башуров (SaitoNakamura) в своем докладе на РИТ++. С удовольствием делимся с вами расшифровкой этого познавательного выступления.



О спикере: Михаил Башуров — fullstack веб-разработчик на JS и .NET из Luxoft. Любит красивый UI, зеленые тесты, транспиляцию, компиляцию, технику compiler allowing и улучшать dev experience.

От редактора: Доклад Михаила сопровождался не просто слайдами, а демо-проектом, в котором можно понажимать на кнопочки и самостоятельно посмотреть за выполнением тасок. Оптимальным вариантом будет открыть презентацию в соседней вкладке и периодически к ней обращаться, но и по тексту будут даны отсылки на конкретные страницы. А теперь передаем слово спикеру, приятного чтения.

Total votes 40: ↑33 and ↓7+26
Comments4

[в закладки] PDF-версия руководства по Node.js и новое руководство по JavaScript

Reading time2 min
Views45K
Недавно мы опубликовали серию материалов, представляющую собой перевод руководства по Node.js. В первой публикации мы интересовались мнением аудитории о целесообразности перевода этого руководства и говорили, что планируется подготовить его PDF-версию.

image


PDF-версия документа состоит более чем из 120 страниц, содержит оглавление, немного картинок и всё необходимое форматирование. Просто закидывайте файлик в читалку и готово. Или в папочку с литературой. Или… решать вам.

Скачать PDF-версию [ 1.8 Мб ]



Сегодня мы хотим представить вашему вниманию новое руководство того же автора, посвящённое JavaScript.

Вот краткий перечень вопросов, которые оно раскрывает:
  • Общая характеристика языка и его стандартизация
  • Особенности стандартов ES6, ES7, ES8, ES9
  • Оформление кода, руководства по стилю
  • Лексическая структура языка
  • Переменные
  • Типы данных
  • Выражения
  • Логические выражения
  • Прототипное наследование
  • Классы
  • Исключения
  • Функции и замыкания
  • Массивы
  • Циклы
  • События
  • Асинхронное программирование
  • Таймеры
  • Строгий режим
  • Математические вычисления
  • Модули

Мы планируем это руководство перевести, но, прежде чем приняться за работу, хотели бы предложить вам поучаствовать в небольшом опросе
Читать дальше →
Total votes 37: ↑34 and ↓3+31
Comments11

Что такое на самом деле VPS-хостинг и как выбрать надежного провайдера VPS

Reading time7 min
Views120K
Каждый, кто создает веб-сайт, сталкивается с целым рядом проблем, и одна из самых сложных задач – выбор между многочисленными предложениями. Бюджет у большинства начинающих весьма ограничен, так что вариантов у них не особенно много.



Один из подходящих – виртуальный хостинг (shared hosting). Это идеальный выбор для сайтов, еще не ставших популярными, то есть с невысокой посещаемостью. Но если нагрузка на сайт может в ближайшее время существенно вырасти, или на том же физическом сервере хостится высоконагруженный проект, например, площадка электронной коммерции, то такой вариант – не самый лучший. В подобных ситуациях предпочтительнее VPS-хостинг – виртуальный частный сервер. За немного более высокую цену вы получите лучшую функциональность, безопасность и ряд других преимуществ.
Читать дальше →
Total votes 39: ↑27 and ↓12+15
Comments58

Руководство по Node.js, часть 1: общие сведения и начало работы

Reading time10 min
Views345K
Мы начинаем публикацию серии материалов, которые представляют собой поэтапный перевод руководства по Node.js для начинающих. А именно, в данном случае «начинающий» — это тот, кто обладает некоторыми познаниями в области браузерного JavaScript. Он слышал о том, что существует серверная платформа, программы для которой тоже пишут на JS, и хотел бы эту платформу освоить. Возможно, вы найдёте здесь что-то полезное для себя и в том случае, если уже знакомы с Node.js.

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



Сегодня мы обсудим особенности Node.js, начнём знакомство с экосистемой этой платформы и напишем серверный «Hello World».

Читать дальше →
Total votes 47: ↑39 and ↓8+31
Comments25

Information

Rating
Does not participate
Location
Саров (Нижегородская обл.), Нижегородская обл., Россия
Date of birth
Registered
Activity