Фон

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

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

Теперь я знал, что хочу создать CSS-фреймворк, но у меня не было особого направления, пока я не наткнулся на Кодпен несовершенных кнопок Tiffany Rayside. Мне нравилось, что границы были неровными и, ну, ну, несовершенными. Я подумал, что эта концепция будет действительно крутой, если применить ее ко всем другим типам HTML-элементов. Так родился PaperCSS.

Строительная бумагаCSS

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

Я потратил время на изучение Gulp для автоматизации построения CSS. Все, что мне нужно было сделать, это добавить стили в файл .less и позволить Gulp построить за меня CSS. Затем я мог сразу просмотреть его на сайте документации / демонстрации. Я использовал модуль gulp-watch-less, поэтому мне даже не пришлось перезагружать сайт, чтобы увидеть изменения.

Было весело узнать, как работает Gulp, и поиграть со всеми различными модулями, которые для него существуют. Такое ощущение, что есть пакет gulp для всего, что вам нужно.

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

Развертывание PaperCSS

В итоге я развернул фреймворк на Netlify. Все, что вам нужно сделать, это подключить репозиторий Git, команду сборки и свое доменное имя (если оно у вас есть). Они даже позволяют добавлять https всего за два клика. Я влюблен в их услуги (и мне не платят за это).

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

Честно говоря, самой сложной частью (пока) этого развертывания был выбор доменного имени. papercss.com был взят, поэтому мне пришлось проявить творческий подход. В итоге я выбрал getpapercss.com, поскольку в других фреймворках перед фактическим именем ставится «get» (кхм, Bootstrap). Еще мне понравились варианты papercss.style и papercss.org.

Запуск PaperCSS

Получив отзывы от друзей и предыдущих коллег, я решил поделиться PaperCSS в Интернете. Я разместил его в Hacker News и r / web_design. Я создал этот фреймворк для веб-разработчиков, поэтому решил, что эти две аудитории будут идеальными.

Я провел небольшое исследование и обнаружил, что лучшее время для публикации на Reddit - утро воскресенья и понедельника. Поскольку мой поиск в Google происходил в воскресенье вечером, я решил публиковать сообщения на этих двух каналах в понедельник утром.

Hacker News получил немного внимания и отличные отзывы в комментариях.

Но это действительно взлетело на Reddit. Обычно, когда я запускаю небольшое приложение или расширение Chrome, я получаю три голоса за и, возможно, комментарий с надписью «ага». Но PaperCSS каким-то образом поднялся на вершину рейтинга r / web_design и продержался там почти два дня.

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

Я внезапно почувствовал ответственность. Это больше не был случайный проект, о котором я мог забыть и оставить позади. Люди были достаточно заинтересованы, чтобы захотеть сделать это лучше. Я чувствовал, что обязан им и всем, кто использует PaperCSS, чтобы убедиться, что их вклад был включен. Проект должен жить!

Первая неделя

Вот краткое изложение первой недели PaperCSS:

  • 500+ новых строк кода
  • 125+ звезд на Github
  • 13 выпусков
  • 12 запросов на вытягивание
  • 6 новых функций (всплывающие подсказки, карточки, предупреждения, значки, стили границ, отключенные кнопки)
  • И огромная поддержка и отзывы!

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

Очень странно оказаться по ту сторону пулреквеста. Спасибо TotomInc, Fraham и joelwallis за их вклад! И спасибо всем остальным за отзывы о Hacker News, Reddit и за ответы на вопросы на Github.

Будущее PaperCSS

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

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

  • Получение PaperCSS в CDN. Таким образом, пользователям не нужно загружать его - его можно просто связать извне.
  • Легко подключить PaperCSS к NPM npm install
  • Выявление наилучшего способа убедиться, что документация соответствует последней версии
  • Добавление примеров страниц
  • Разбивая монолитный файл index.html на небольшие куски, при этом упростив его поиск и внесение вклада.

Говоря об этом последнем пункте: многие проекты на Github страшно создавать локально, но PaperCSS - нет. Его относительно легко понять и добавить функции, поскольку единственные движущиеся части - это файлы .less и файл index.html. Я хотел бы, чтобы все было просто, а входной барьер (для внесения вклада) оставался низким.

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

Заключение

Подводя итог, это была дикая неделя. PaperCSS превзошел мои ожидания на 1000%, и я в восторге от того, как он развивается. Я все еще много узнаю о том, как управлять структурой и вкладом, и был бы признателен за любой совет по этому поводу. Также, пожалуйста, подумайте об использовании PaperCSS для вашего следующего проекта и пришлите мне ссылку с тем, как это получается :)