Строительство «Я сокрушаю это».

Эй, читатель, да ты, как дела? Хорошо. Теперь, когда мы разобрались с этим, есть ли у вас какие-либо решения на этот год? Я знаю, резолюции глупы, с этим мнением согласны немногие. К счастью, все, с кем я работаю в Percolate Galactic, согласны с этим. Вот почему мы решили создать imcrushing.it, детище нашего блестящего генерального директора (хотя на самом деле он не называет себя генеральным директором) Райана. Я в восторге, это генератор новогодних обещаний, который высмеивает людей, которые принимают новогодние обещания, предлагая вам самые саркастические, неприятные и веселые решения, которые могли придумать 10 из нас. Так что да, в следующий раз, когда кто-то спросит вас, каково ваше намерение на год, мы вас обеспечим.

Его сборка была, наверное, самым познавательным 2-дневным днем, который у меня был на этой неделе. Я начал с того, что принес Спенсеру прототип, который я разветвил из JS-проекта и подправил (о котором я писал здесь), и сначала я просто подправил дизайн, поработал над темой и прочим, когда я был доволен его внешним видом. насколько это возможно, я работал над анимацией. Да, я не думал об этом, работая над Спенсером, поскольку мы работали с изображениями вместо текста, и у нас был отдельный фон для части с изображением, поэтому никакой анимации не требовалось (поскольку мы использовали встроенный переход изменения страницы iOS). Еще одна вещь, которая вдохновила меня на добавление анимации к тексту, — это блестящий генератор цитат DJ Khaled @gk3 theydontwantyouto.win. Этот веб-сайт действительно должен быть эталоном для генераторов цитат/текста.

После некоторых исследований я решил, что textillate.js — лучший вариант. Процесс установки был довольно сложным (ну, я сам слишком усложнил все, в конце концов, это было довольно легко), и как только я понял это, я начал работать! Однако это работало только с текстовыми элементами, которые были на странице, а не с div, который у меня был, вытягивая кавычки из моего массива в JS. Должно быть, я потратил около 4 часов, работая над этим, размещая классы в разных местах, но ничего не получалось. Я подумал, почему бы не создать проблему на GitHub? Разработчик вернулся ко мне на следующее утро и сообщил, что textillate плохо работает с js-файлами, но сказал, что учтет это для версии 2.0. Yay, я сделал вклад, я думаю? В любом случае, пора искать второй вариант.

Я немного изучил blast.js, прежде чем пришел к выводу, что по нему недостаточно документации, и, поскольку мы хотели, чтобы это было сделано довольно быстро, у меня действительно не было времени экспериментировать. В итоге я остановился на animate.css и остановился на том, чтобы анимировать всю строку текста вместо отдельных слов. Чуть позже немного магии css и JQuery, и все заработало!

Практически вся основа была заложена, все, что мне нужно было сделать, это придумать кнопки обмена, и дело было за дизайном. Кнопки «Поделиться» в Facebook и LinkedIn были довольно простыми, учитывая, что они не позволяют вам брать текст из innerHTML и помещать его в диалоговое окно «Поделиться», но я видел кнопки «Поделиться в Твиттере», которые позволяют вам, поэтому я прочесывал StackOverflow, пока, наконец, не нашел что-то, что работало.

Дизайн

Теперь дизайн. Райан упомянул, что ему нужно что-то похожее на универсальную целевую страницу стартапа, и я нашел идеальный шаблон на StartBootstrap. Я отрезал панель навигации и все, кроме основного изображения/контейнера, установил скрытое переполнение, и все было идеально. Все, что мне оставалось сделать, это перенести файлы JS и отформатировать HTML, чтобы они соответствовали друг другу, и ImCrushing.it был готов.

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

Как бы нам ни нравилась картина, борьба за то, чтобы оставаться современными, потерпела поражение. По сути, я имею в виду, что файл изображения был слишком маленьким, из-за чего он отлично выглядел на небольших мобильных устройствах, таких как iPhone 5, откройте приложение на более крупном устройстве, например, на iPhone 6plus или ноутбуке, и оно выглядело как горячее. мусор.

Наконец, мы остановились на изображении ниже, похожем на те, которые вы найдете в вдохновляющей цитате из Tumblr.

Мы не собирались никого обидеть этой программой, но, наверное, так и сделали.

ImCrushing.it имеет открытый исходный код, и его можно найти здесь.