Я тоже не понимаю этого названия. Я просто не знаю, что мы делаем сегодня.

«Сделать сейчас» выглядит сложно. Джастин хочет, чтобы мы написали функцию с именем sum(), которая имеет по крайней мере две из этих функций:

  • вариативное поведение (с использованием оператора распространения (…))
  • синтаксис жирной стрелки
  • .редуктор

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

Все прошло немного лучше, чем я ожидал. Шон показал мне, как работают операторы распространения, и я, по-видимому, уже знал, как работают функции жирных стрелок. Тем не менее, часть сокращения немного разрушает меня. Я не могу заставить сокращение работать так, как я хочу. Надеюсь, Джастин собирается объяснить это.

Я сделал домашнее задание на прошлый вечер с небольшой помощью Мастера Кендзи. Я почти уверен, что он на самом деле может быть волшебным лепреконом. Если этот чувак не станет наставником или наставником, миру от этого станет хуже.

Я думаю, что «волшебный лепрекон» излишен. Лепрекон считается волшебным.

Хорошо, «сделай сейчас». Лоран — счастливый победитель, который первым запустил свой код. Он написал простую функцию sum(), которая просто делала обычный пробел + пробел, а затем задним числом превратил ее в функцию с толстой стрелкой. Его аргументы изначально были num1 и num2, поэтому после того, как он сделал жирную стрелку, он хотел, чтобы это был оператор расширения, поэтому он изменил свой (num1,num2) на (...nums)или что-то подобное. Джастин предложил поместить свою функцию в одну строку и убрать оператор return. Судя по всему, с одной строкой он вам особо и не нужен, так как это «подразумеваемый возврат» или какая-то бредовая хрень.

Да, если в вашей функции несколько строк, вы должны указать, какая строка является оператором возврата, и вам нужно использовать фигурные скобки. Однако, если все это находится в одной строке, вы можете сделать так, чтобы все выглядело красиво и «кратко», как var sum = (...nums) => num1 + num2 , так что это аккуратно. Я предполагаю, что это заставляет компьютер говорить: «Давай, чувак, я вижу твою линию и поднимаю тебе подразумеваемый доход». Потому что покер.

Я только что узнал, что есть один аргумент, в котором скобки не нужны. Однако вам нужно это с оператором распространения, поэтому мы используем это здесь. Ранее упомянутая функция sum() может не работать, меня немного беспокоит часть num1 + num2. Посмотрим, что произойдет.

Ах, Лоран сделал цикл for, чтобы пройтись по массиву, созданному, когда мы суммируем() с оператором распространения. Я копаю это. Я думал об этом, но хотел, чтобы функция reduce() работала на меня. Я должен был, вероятно, сначала сделать цикл for, а затем попытаться сделать его причудливым.

Теперь Кенджи собирается сделать это forEach(). В sum() со спредом и толстой стрелкой мы собираемся сделать nums.forEach(). Digression для объяснения forEach! Ого!

Хорошо, я не умею читать доску, но я уверен, что как только Кендзи поймет, где он спрятал свои волшебные монеты, он правильно объяснит, как использовать forEach в нашей сумме(), и я быстро это пойму.

Вот дерьмо, они объясняли это, пока я был в стране лепреконов. Итак, forEach теперь выглядит так: nums.forEach(el => summation += el) return summation. Кроме того, мы определили var summation = 0 перед этой строкой, поэтому у нас есть новая переменная, в которую можно добавить этот массив. Мы говорим о части «эль», которая, как я знаю, означает элемент. То же, что и nums.forEach(function(el) {summation += el})

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

Знаешь, мне вообще нравятся все в этом классе. Обычно это не так, понимаете? В вашей жизни всегда есть люди, которые раздражают, или грубы, или раздражают, или что-то еще, но весь класс, без исключения, просто действительно замечательные люди. Кроме Джеймса. У него пальцы с попкорном.

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

Хм. Я думал, что это займет больше времени, чтобы объяснить. Думаю, я мог бы объяснить это в контексте. О, давайте использовать нашу текущую штуковину!

var summation = 0

nums.forEach(el => summation += el) return summation

Итак, что здесь происходит, так это «числа» в строке 2, это введенный массив. Введено не слово. Черт возьми. Во введенном массиве используется метод forEach, а внутри скобок мы делаем быструю анонимную функцию, чтобы сообщить нам, какую функцию обратного вызова использовать для каждого элемента массива. Он в основном добавляет промежуточный итог (сумму) к каждому элементу. Таким образом, если введенные значения равны 1, 2 и 3, они становятся массивом [1,2,3] из-за оператора расширения. Эти три числа добавляются к переменной суммирования по очереди, например: 0 + 1 = 1, 1 + 2 = 3, 3 + 3 = 6. Таким образом, суммирование теперь имеет значение 6, которое возвращается после завершения функции. . Мне нравится что-то объяснять, пусть даже только самому себе, но намного приятнее и поучительнее объяснять это другим.

Мне нравится, что я потратил все это время на объяснение forEach(), и мы не использовали его здесь. Мы использовали сокращение(). Потому что трахни меня. Я объясню, как использовать метод reduce() позже.

Вы знаете, это не плохая идея. Может быть, я сделаю целую запись в блоге, объясняющую каждую функцию высшего порядка, но в тексте Барни*.

  • Текст Барни означает, что он объяснен настолько простыми словами, что его может понять даже 5-летний ребенок. Мы использовали эту стратегию в армии, чтобы ни один тупица не мог неправильно понять концепцию или приказ: «Хорошо, дерьмовые мешки, я разберу этот стиль Барни для тех из вас, у кого есть когнитивные проблемы. «Когнитивные трудности» означают, что ты глупее отца Симмонса, потому что не сдаешься». — затем приходят инструкции, столь же уважительные.

Мне не хочется писать код, который в настоящее время находится на доске для этой разминки «Сделай сейчас». Это выглядит красиво и декларативно, и я это понимаю, и я уверен, что остальная часть класса отлично справляется с функцией reduce().

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

Хорошо, похоже, он хочет пройтись по синтаксису ES6. Что сделает Патрика очень счастливым. Я думаю, он хотел сделать это вчера.

Поэтому мы всегда делали var student = 'hank'. var назначит отношение типа ключ-значение. var перезаписывается, а это означает, что после того, как студент стал «хэнком», мы можем просто сказать student = patrick в любом другом месте, и теперь это будет patrick. Кроме того, var имеет «функциональную область». Я думаю, это означает, что его можно использовать для присвоения имени функции. Мы также знаем, что мы не можем использовать var вне функции, но можем, если var находится внутри «логического блока», такого как мошеннический оператор if или цикл for.

Хорошо, теперь альтернативы var. Мы собираемся начать с const. Я уже спрашивал о const, и раньше мне объяснили, что const — это примерно то же самое, что и var, но его нельзя перезаписать. Const в данном контексте означает «постоянный».

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

Он повторяет то, что я напечатал ранее о var, перезаписываемом, невидимом изнутри функции и т. д.

Итак, это было var и const, так что теперь давайте пройдемся по «let».

Переменные let имеют лексическую область видимости. Это означает, что они являются секретными, если они определены в любом блоке кода. У меня так много вопросов.

Итак, if (1 === 1) {let finalStudent = 'amanda'}, и вы попытаетесь зарегистрировать finalStudent, он скажет, что он не определен. Потому что, как мы сказали около двенадцати секунд назад, let будет секретным, если он находится в любом блоке кода. По-видимому, лучшее место для использования let — это циклы for. Не совсем уверен, почему, но ладно, я с этим смирюсь. Я очень хочу курить. Я всегда хочу курить. Мне нужно бросить. Я увольняюсь!

Хаха нет. Я хочу, но черт возьми, как это трудно сделать. Я сделал это несколько успешно только дважды, и один раз из-за базовой подготовки для проклятой армии. В другой раз мой бывший говорил: «Я не выйду за тебя замуж, если ты все еще куришь», поэтому я бросил. Где-то месяц или два, потом я просто скрывал это от нее (каким-то образом) в течение последних двух лет или около того наших отношений. Ура обману!

Джастин говорит о ES6, о том, что это русская матрёшка дерьма для базового языка JS. Каждый новый ES просто дополняет предыдущий лексикон.

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

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

Итак, Джеймс знает код. Джастин дал ему четкие инструкции кодировать только то, что говорят люди. Джеймс «попкорновые палочки» Сьюэлл любит прыгать вперед/назад.

Мы хотим, чтобы Джеймс что-то сделал с кодом, который вчера опубликовала AWO. Я думаю, мы попытаемся объединить два кода, с тем, что было у Джеймса, и с тем, что было у AWO. Он записывает CD в свой собственный проект giphy, а затем git remote add amanda urlгде URL-адрес — это код Аманды.

Судя по всему, AWO принесли книгу «JS для детей» для Лизбет, которая беременна. Это очень мило. Лизбет сегодня нет, к сожалению. Джастин думал, что это подарок для него от Лизбет. Тск, тск.

Итак. Сначала Джеймсу пришлось git initзатем git pull amanda master. Нет, подождите, ему нужно было сначала добавить это удаленно, как то, что я изначально написал там. Джастин хочет, чтобы мы узнали о «upstream», то есть о том, как вы можете работать на нескольких удаленных устройствах. Я думаю. Я постараюсь уточнить позже, терминал Джеймса шатается.

Хорошо, не знаю как, но у нас есть конфликты слияния. Мы проходим, чтобы посмотреть, сможем ли мы понять, что к чему. Кенджи собирается провести Джеймса через конфликты слияния для класса.

Итак, мы видим две версии одного и того же кода в нескольких местах. Git не знает, как все время объединять их, поэтому нам нужно определить, какой код мы хотим сохранить, а какой стереть.

Джеймс только что ушел с «зудом на внутренней стороне бедра». Он говорит, что здесь неудобно чесаться. Пфф.

Мы хотим сохранить код Аманды, так как знаем, что он работает. Кенджи провел Джеймса (и, соответственно, весь класс) через различные конфликты.

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

Я забыл взять чашку для своих семечек. Мне интересно, смогу ли я успешно использовать свою банку Rockstar в качестве репозитория оболочки.

Хорошо, Джастин сейчас просматривает поток данных. Я пропустил первую часть, так что теперь я не уверен, стоит ли мне приводить ее здесь или просто послушать и попытаться кратко обобщить.

Я собираюсь перейти к идее репо.

Что-то важное - почему установлен единственный способ, которым нам разрешено обновлять МАГАЗИН? Он одновременно изменяет состояние данных и запускает публикацию события.

Сэм собирается провести нас через… кое-что. Мы проверяем, что относится к приложению с отслеживанием состояния; trendingColl и activeID. Так как же наше приложение управляет изменениями в TrendingColl? Когда наше приложение загружается впервые, что такое TrendingColl? Пустой массив. Это состояние, потому что оно изменяется.

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

Нет, мне сейчас хорошо. Операция Rockstar Shell Repo имеет посредственный успех. Работает, но совсем не удобно. Тем не менее, это не так раздражает, что я изо всех сил хватаю бумажный стаканчик.

Оглядываясь назад, я хотел бы записать, что переживает Сэм. Мне кажется, что я на 75% недостаточно хорош, чтобы не записывать. Если я не уверен на 100%, мне всегда нужна дополнительная поддержка.

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

Так как же сделать так, чтобы гифки отображались внизу, на горизонтальной полосе с возможностью прокрутки? Есть несколько элементов, которые следует учитывать; полоса класса элемента и GIF-файлы класса элемента. Мы хотим, чтобы полоса была блочной, как по умолчанию. Однако нам нужно сделать гифки встроенными блоками. Таким образом, чтобы полоса оставалась внизу, нам нужно сделать контейнер полоски фиксированным. Давайте узнаем, как это сделать на этом дерьмовом, дерьмовом языке scss!

Мы собираемся попрактиковаться с инструментами разработчика, используя их для обновления CSS. Давайте начнем со стиля контейнера полосы, поэтому он щелкнул этот класс div в части элементов инструментов разработчика. .strip имеет положение: фиксированное. Хорошо. Теперь мы устанавливаем bottom: 0, чтобы он был внизу. Мы уберем максимальную высоту 30%. Теперь о встроенном блоке. Нажмите +, чтобы добавить правило стиля. Теперь в стиле .singlegif у нас есть display: inline-block.

Встроенная блокировка по-прежнему не отображала их горизонтально; изображения слишком большие. Под .strip мы отображаем: flex. Также для .img мы сделали max-width: 100%. Джастин предложил, чтобы это было постоянной вещью, которую мы делаем во всех проектах.

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

Боже, я так красноречив.

Итак, мы используем display: flex от .strip. Теперь мы собираемся сделать ширину .gif: 20%. Я печатал этот предыдущий фрагмент, поэтому я не знаю, почему мы отключили flex. Ну что ж.

Время прокрутки переполнения. Под .strip у нас будет overflow: scroll.

Хорошо, мне нужно в ванную. Черт бы побрал этот мощный дым, зря трачу мое время.

Назад. Что я пропустил.

Фу. Просто проверьте файл scss позже. Фрикин фракин.

Отступы › поля

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

Мычание от Сэма к Патрику. Джастин хочет, чтобы мы сосредоточились на функциональности приложения, а не только на его стиле, так что да. Сейчас Джастин пытается понять, почему лапочка Патрика такая стерва. Похоже, что его package.json забит. Я понятия не имею, что Джастин делает прямо сейчас, я думаю, у него есть дерганые конфликты слияния, где он действительно не должен.

Разве Джастин не говорил, что отладка — это примерно 80% работы программиста?

Хорошо, я не знаю, исправил ли он это, но он прямо сейчас обновляет scss Патрика. Потому что жизни нужно больше scss.

Думаю, я готов к обеду. Я слежу за всем этим относительно хорошо; это не похоже на то, что мы делаем что-то особенно новое или умопомрачительное, мы больше полагаемся на предыдущее дерьмо, которое мы изучили, чтобы сделать это полностью функциональное, сексуально выглядящее приложение. Я думаю, что во всех будущих проектах, как в TIY, так и за его пределами, я просто заставлю Шона сделать это. Мол, я его украду. Запри его в моем подвале.

У меня нет подвала. Блядь.

Отбросьте эту идею, думаю, я просто научусь быть разработчиком.

Хорошо, Джастин все еще занимается быстрой работой в scss. О, подожди.

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

  • начните с того, что сделайте самый первый gif в коллекции активным gif
  • дайте этой картинке фиксированную позицию и верхнюю часть: 50%, чтобы мы могли хотя бы убедиться, что она стала активной.

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

Итак, мы хотим установить activeID после получения коллекции. Мы можем сделать это в ACTIONS. Это возможность сделать GIF активным ID.

В нашем Actions.fetchTrending() после пары ключ-значение trendingColl мы создаем новый KVP (сначала мы видим путь к идентификаторам коллекции), и в итоге мы получаем activeID: trendingInstance.models[0].get('id')

Возьми? Мы делаем для activeID в МАГАЗИНЕ то же значение, что и для trendingInstance.models[0].get(‘id’).

Так где сейчас эта информация? Он был установлен в STORE, который транслировался, и данные STORE стали состоянием StripView.

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

Патрик только что сказал мне, что хотел бы быть таким же привлекательным и талантливым, как я. Я понимаю это много.

Так что все гифки услышат, кто активный ID. Они сверят его со своим ID, и активным будет только тот, который ему равен.

Кендзи попросил Патрика написать в разделе Strip, в разделе gifCollection, activeID={this.state.activeID}

Патрик выключен, а Шон, э... Бомба, включен. Да, Шон Бомба.

Джастин только что рассказал неловкую историю об аспирантуре и месячных.

Мы только что передали ActiveID в Strip, теперь Strip отвечает за передачу в gif.

Итак, мы в Strip, в файле StripView. В возврате для GifComponent после gifData мы будем activeID={this.props.activeID}

Переходим к GifComponent. GifComponent теперь имеет activeID. Каждый класс гифок теперь знает, кто самая нижняя сука. Хэнку пришла в голову идея тройного оператора перед функцией рендеринга. Он проверит, является ли идентификатор gifs активным идентификатором. Затем мы дадим этому div другое имя класса, с которым мы сможем работать в scss. Тройное утверждение выглядит следующим образом:

var gifClass = this.props.gifData.get('id') === this.props.activeID ? 'single-gif active' : 'single-gif'

Это похоже на то, что если это я, я буду активен в одиночной гифке. Если нет, то я просто буду одиночной гифкой. Магия, блядь.

Вернуться к ссс. Ррг. В порядке.

.single-gif.active{position:fixed;top:50%}

Я не объясняю, что scss. Это довольно ясно. Джастин хочет, чтобы мы закончили ссс завтра, после выступающего.

Теперь мы собираемся сделать GIF-файлы кликабельными и изменить активный-gif на тот, который мы кликаем. Лоран станет капитаном корабля после того, как мы выясним некоторые ошибки в его коде. Я собираюсь порассуждать на мгновение.

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

Хорошо, вернемся к работе. Мы довольно хорошо автоматизировали процесс этого приложения. У нас осталось не так много функций, с которыми можно было бы иметь дело. Просто щелкающее дерьмо. Итак, у кого будет метод onClick? GifComponent звучит хорошо. Внутри определения div, перед именем класса, мы собираемся поместить нашу функцию щелчка.

Поэтому над функцией рендеринга в GifComponent мы создадим пользовательский метод с именем _handleClick, который скажет нам, что делать с щелчком.

Чтобы изменить что-то в нашем приложении с сохранением состояния, мы должны обновить наш STORE. Для этого нам нужно использовать ACTION.

Мы притворимся, что у нас есть действие, и вызовем его в нашем _handleClick. Он немного похож на ACTIONS.setActiveID(this.props.gifData.get('id')), и теперь мы можем определить этот метод в нашем файле ACTIONS. Этот метод будет передавать идентификатор gif, по которому он щелкает.

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

setActiveID: function(gifID){STORE.set({activeID: gifID})}

О, это работает. Мы добавили немного больше scss, но наша гифка, на которую мы нажимаем, теперь выскакивает, как босс. Практически время обеда. Возможно, сегодня я смогу взять выходной, может быть, просто займусь кодированием предыдущих проектов в React/Flux. Ради забавы.