Автор оригинала: FreeCodeCamp Community Member.
Rhyne Vlaservich
Фон
Я только что закончил летнюю стажировку в Нью-Йорке, работаю в качестве инженера программного обеспечения. Во время моего выездного интервью я попросил некоторые отзывы о любых областях, где я мог бы улучшить. Поскольку я очень заинтересован в карьере в интерфейсном веб-разработке, моя главная вынос от этого разговора стал лучше с CSS.
Я решил, что лучший способ изучить CSS (и как его построить с Меньше ) состояла в том, чтобы создать мою собственную структуру CSS. Вместо того, чтобы просто слепо использовать Bootstrap Я хотел полностью понять все под капотом. Как бонус, эта структура CSS может быть основой всех моих будущих проектов.
Теперь я знал, что хочу построить рамки CSS, но у меня было мало направления, пока я не наткнулся на Несовершенные кнопки Tiffany Rayside’s Codepen Отказ Я любил, как границы не были прямыми и как это было, хорошо, несовершенны. Я думал, что эта концепция будет действительно остыть, если применимо каждого другого типа HTML-элемента. И так родились Picketcs.
Строительные Papercss
Я провел следующие несколько недель, наращивающих классы для рамки. Я начал с FlexGrid, потому что я действительно хотел узнать больше о том, как можно использовать и применять Flexbox. Я также знал, что будет полезно иметь систему элементов позиционирования для веб-сайта документации. Затем я добавил больше функций и стилей, как у меня было время.
Я провел время обучения Гульп автоматизировать создание CSS. Все, что мне нужно было сделать, было добавлять стили в бессонницу и позвольте глотать построить CSS для меня. Затем я мог мгновенно просматривать его на сайте документации/демонстрации. Я использовал Гульп-часы-меньше Модуль, поэтому мне даже не нужно было перезагрузить сайт, чтобы увидеть изменения.
Было весело узнать, как глотает работает и играет со всеми различными модулями, которые существуют для него. Похоже, что есть пакет глотана для всего, что вам нужно.
В целом, построение этой рамки было довольно простым. Я хотел сохранить его как можно просто, чтобы люди могли бы легко внести легче. Но об этом позже.
Развертывание Papercss
Я закончил развертывать рамки на Нечто . Все, что вам нужно сделать, это подключить ваше Git Reppo, команда вашей сборки и ваше доменное имя (если у вас есть). Они даже позволяют вам добавлять HTTPS всего за два клика. Я влюблен в их сервис (и не платят, чтобы сказать это).
Оттуда любые толкания к вашей главной ветке автоматически вызывают восстановление и перераспределение вашего сайта.
Честно говоря, самая сложная часть (до сих пор) этого развертывания выбирает доменное имя. PaperCss.com был взят, поэтому я должен был получить креатив. Я закончил выбрать getmerscss.com, поскольку другие рамки поставили «получить» перед их фактическим именем (AHEM, Bootstrap). Некоторые другие варианты мне понравились, были PaperCss.Style and Papercss.org.
Запускает Pickscss
После получения некоторых отзывов от друзей и предыдущих коллег я решил поделиться PicketCs в Интернете. Я разместил его на Хакеров Новости и R/Web_design . Я создал эту структуру для веб-разработчиков, поэтому я подумал, что эти две аудитории будут идеальными.
Я сделал несколько быстрых исследований и обнаружил, что лучшее время для публикации в Reddit было Утро Воскресенье и понедельник . Поскольку мой гуглинг произошел в воскресенье вечером, я решил опубликовать эти два канала в понедельник утром.
Хакеров Новости получили немного тяги, а некоторые отличные отзывы в комментариях.
Но это Действительно взлетел на Reddit. Обычно, когда я запускаю небольшое приложение или расширение Chrome, я получаю три слова и, возможно, комментарий, говоря «Мех». Но Papercss как-то пошел на вершину R/Web_design и останавливался в верхней позиции поступлений почти на два дня.
Но лучшая часть запуска была непосредственной заинтересованностью вклад в состав. Было три запроса по тяги к тому времени, когда я открыл свое письмо, который днем!
Я вдруг почувствовал чувство ответственности. Это больше не было каким-то случайным проектом, о котором я мог забыть и оставить позади. Люди были заинтересованы достаточно, чтобы хотеть сделать это лучше. Я чувствовал, что я должен им им, и каждый, используя PAREDCSS, чтобы убедиться, что их вклады включены. Проект должен жить!
Первая неделя
Вот быстрое подножение первой недели Picketcss:
- 500+ новых строк кода
- 125+ звезд на Github
- 13 вопросов
- 12 запросов по тяги
- 6 новых функций (подсказка, открытки, оповещения, значки, приграничные стили, кнопки инвалидов)
- И богатство поддержки и обратной связи!
Вы хотите знать самую сумасшедшую часть об этом? Я лично не добавил ни один из этих новых функций. Это была напряженная неделя, поэтому я только что потратил свое время с помощью Pickccsss, комментирующих проблемы и потянул запросы и объединения их всех.
Это очень странно находятся на другой стороне запроса на тягу. Спасибо …| Тотомин , Фрахам и joelwallis за их вклад до сих пор! И спасибо всем остальным за обратную связь на хакерских новостях, Reddit и через вопросы на Github.
Будущее Picketcsss
Будущее этого проекта зависит от того, где каждый хочет взять его. Я люблю маленькое сообщество, которое пропарело вокруг него, и хочет, чтобы он был рамками, который органично растет. Я хотел бы продолжать добавлять функции, очищать базу кода и отпустить его простой проект, который легко внести свой вклад.
Некоторые касательные, которые я действительно хочу позаботиться о как можно скорее:
- Получение Picketcss на CDN. Таким образом, пользователи не нужно его загружать – это может быть просто связано снаружи.
- Получение Picketcss на NPM для Easy-Peasy
NPM установить - Выяснение наилучшего способа убедиться, что документация соответствует последнему выпуску
- Добавление пример страниц
- Вырывая файл Monolithic Index.HTML в кусочки размером с укусом, пока все еще делая его простым, чтобы выяснить и внести свой вклад.
Выступая с этим последним точком: многие проекты на GitHub запугивают, чтобы настроить локально – но Papercs не являются. Это относительно легко понять и добавлять функции, поскольку единственным движущимся частями являются бессплатные файлы и файл index.html. Я хотел бы продолжать держать его простым, и держать барьер к входу (для внесения вклад) низко.
Для тех, кто хочет начать работу с проектом с открытым исходным кодом, это было бы отличным местом для этого. Если вы не открыли запрос на тягу раньше, я был бы рад пройти вас через этот процесс.
Заключение
Суммировать это, это была дикая неделя. Picketcss превзошли мои ожидания на 1000%, и я в восторге от того, как он активирует. Я все еще многому узнаю о том, как управлять рамками и вкладами, и будет признателен за любые советы по этому вопросу. Кроме того, пожалуйста, рассмотрите возможность использования PaperCss для вашего следующего проекта, и отправьте мне ссылку с тем, как получается:)
Оригинал: “https://www.freecodecamp.org/news/how-i-built-and-deployed-papercss-and-got-125-stars-on-github-the-first-week-89f8d6ac14b1/”