项目使用ts辅助_如何在10天内启动辅助项目

项目使用ts辅助

by Kyle Gill

凯尔·吉尔(Kyle Gill)

如何在10天内启动辅助项目 (How to launch a side project in 10 days)

从Idea-> Design-> Development-> Deployment征服过程的工具 (Tools for conquering the process from Idea -> Design -> Development -> Deployment)

Like many people, I have no shortage of ideas for apps that don’t genuinely need to exist. I tend to hold onto those ideas waiting for some imaginary occasion where free time is abundant and I can build all of them with no thought of income or expense. For me, oftentimes the hurdle to completing a side project isn’t knowing how to do something, but finding the motivation and time to bring it to fruition.

与许多人一样，对于真正不需要存在的应用程序，我也不乏创意。 我倾向于在空余时间充裕的假想时刻等待那些想法，并且我可以不考虑收入或支出就建立所有这些想法。 对我来说，完成辅助项目的障碍通常是不知道如何做某事，而是找到实现目标的动力和时间。

That’s why I set a goal to launch a side project in 10 days.

这就是为什么我设定目标在10天内启动一个副项目。

This post isn’t about the advantages of building with a new technology I was unfamiliar with, or 7 things I learned while doing it. Rather, it’s about my process of building a web app quickly, keeping irrelevant ideas from muddying my focus, and my tool belt to make it happen. The end result was Card Surge.

这篇文章不是关于使用我不熟悉的新技术进行构建的好处，也不是我在学习过程中学到的7件事。 相反，这是关于我快速构建Web应用程序的过程，避免无关的想法使我的注意力和实现这一梦想的工具带变得模糊。 最终结果是Card Surge 。

想法(1天) (Idea (1 day))

I spend a lot of time designing and building sites, which means I also spend a lot of time poring over well-designed sites from popular brands. I almost inevitably open up the Chrome inspector to examine how styles are applied or elements are laid out, because I want to see what can quantify those designs as good.

我花了大量时间设计和建设网站，这意味着我也花了大量时间来研究流行品牌精心设计的网站。 我几乎不可避免地要打开Chrome检查器，以检查样式的应用方式或元素的布局方式，因为我想看看有什么可以将这些设计量化为好 。

Then I find myself building my own site and referring back to those examples. I repeat the process of opening up the inspector, tweaking their styles, adding my own styles, not getting it right, positioning everything absolute which still doesn’t work, and eventually coming up with something reasonable.

然后，我发现自己建立了自己的网站，并再次引用这些示例。 我重复以下步骤：打开检查器，调整他们的样式，添加我自己的样式，不正确，将所有仍然不起作用的absolute位置都放置好，最后提出一些合理的方法。

Having found other design tools online like Coolors, or Hero Patterns that were valuable to me, I thought I could make something similar to fit my own interest. And so I set out to build a faster way to iterate over card UI.

在网上找到其他对我来说很有价值的设计工具(例如Coolors或Hero Patterns)后 ，我认为我可以做出一些适合自己的事情。 因此，我着手构建一种遍历卡UI的更快方法。

I dug through existing tools and found that they looked kind of meh. They didn’t make it easy to create a decent shadow (because sliders were often used for inputs that rarely needed to be tweaked more than a number or two), and there was no reference to designs that actually worked. I felt like that was ample validation for my idea.

我浏览了现有工具，发现它们看起来不错。 它们使创建像样的阴影变得不容易(因为滑块通常用于很少需要调整多个或两个以上输入的输入)，并且没有提及实际起作用的设计。 我觉得这足以验证我的想法。

设计(2天) (Design (2 days))

You see cards in layouts everywhere: pricing pages, product pages, lists, and so on. They are a great way of grouping relevant information and also can stand out on the page with a drop shadow or outline. You can refer to some of these examples of how they can vary:

您会在随处可见的布局中看到卡片：定价页面，产品页面，列表等。 它们是对相关信息进行分组的好方法，并且可以在页面上突出显示阴影或轮廓。 您可以参考其中一些示例以了解它们如何变化：

They can have drop shadows, borders on some sides and not others, hover styles, can vary in color, and you can even apply multiple shadows to a single element to create a more exponential gradient in the drop shadow.

它们可以具有阴影，在某些侧面上没有边框，悬停样式，颜色可以变化，甚至可以将多个阴影应用于单个元素，以在阴影中创建更指数的渐变。

I wanted my tool to help designers and developers create cards that looked like those. I figured it should look aesthetically pleasing and use cards itself to help demonstrate what can be done to make them shine ?

我想要我的工具来帮助设计人员和开发人员创建外观类似的卡片。 我认为它应该看起来美观，并使用卡本身来帮助演示如何使它们发光？

I started shaping my ideas in Figma, kept myself from hyperfocusing on unimportant pieces that I could easily do later (like adding logos for brands, adding social icons, and so on) and ended up with this:

我开始在Figma中塑造自己的想法，避免将精力过分放在后来可以轻松完成的不重要的部分上(例如，添加品牌徽标，添加社交图标等)，并最终做到了：

I knew that I wanted several things in my end product:

我知道我想要最终产品中的几件事：

1. An editor to tweak styles that would update the UI live
   编辑器来调整样式，以实时更新UI
2. A slider that could rotate through nice, fresh examples
   可以旋转精美示例的滑块
3. A place to export the code by copying to the clipboard
   通过复制到剪贴板导出代码的地方

Those 3 essentials made the design, along with other things like the content below it and how exactly I’d format the footers and headers I’d left unfinished. It wasn’t entirely fleshed out, because I wanted to get started building before I got too carried away unnecessarily changing things that were probably fine as is.

这3个要素构成了设计，另外还有其他内容，例如其下面的内容，以及我如何准确地格式化未完成的页脚和页眉。 它并没有完全充实，因为我想开始构建，然后再过度不必要地改变可能还不错的东西。

发展(7天) (Development (7 days))

I figured that the most time consuming piece would be actually writing the code for the app, and I wasn’t wrong. There always seem to be issues to worry about that don’t become a problem until you’re in the code. Things pop up like proper UX with the form elements, design decisions that weren’t thought out in initial designs, unsupported features by libraries you plan on using, or Twitter demanding your attention at the expense of your project. ?

我认为最耗时的部分实际上是为应用程序编写代码，而我没错。 似乎总有一些问题要担心，直到您进入代码后才成为问题。 诸如适当的UX与表单元素，未在初始设计中考虑的设计决策，计划使用的库所不支持的功能或Twitter要求您关注(以项目为代价)之类的东西突然出现。 ？

I bootstrapped the development process with Gatsby because:

我使用Gatsby引导了开发过程，因为：

• I could build the interface using React
  我可以使用React构建界面

• Converting the site into a PWA would be as simple as adding a couple lines to a config file (see this tweet)

  将站点转换为PWA就像在配置文件中添加几行一样简单(请参阅此推文)

• Hosting would be a breeze with just static files to deploy
  仅需部署静态文件即可轻松托管
• I could skip a lot of the initial boilerplate and start building the fun pieces right way
  我可以跳过很多初始样板并以正确的方式开始构建有趣的片段
• Gatsby is just freaking cool ?
  盖茨比真的很酷吗？

I started from the gatsby-default-starter and built much of the functionality without problems. I implemented 3rd party libraries like react-color and react-slick to remove the need to build complicated slider and color components.

我从gatsby-default-starter开始 ，构建了许多功能而没有问题。 我实现了第三方库，例如react-color和react-slick，从而消除了构建复杂的滑块和颜色组件的需要。

During this time, I decided how to lay out content on other parts of the page that my designs hadn’t included, and built those parts too. I took advantage of newer trends like CSS Grid that made responsive layouts much easier.

在这段时间里，我决定了如何在我的设计未包括的页面其他部分上布置内容，并且也构建了那些部分。 我利用了CSS Grid等新趋势，这使响应式布局变得更加容易。

At one point, I realized that the diagonal divider I’d included in the layout of my app could be abstracted out and turned into an npm package other people could use. After building a simple component and publishing the package on npm, I realized that I was way off course from my original goals for finishing my project. It would take too much time, so I abandoned that venture (after appending it to my aforementioned list of unnecessary apps and projects to be completed at a later date, that is).

有一次，我意识到我的应用程序布局中包含的对角线分隔符可以被抽象出来，并转换成其他人可以使用的npm包。 在构建了一个简单的组件并在npm上发布了软件包之后，我意识到我与完成项目的最初目标相去甚远。 这将花费太多时间，所以我放弃了这项尝试(将其追加到我前面提到的不必要的应用程序和项目列表中，以便以后再完成)。

I used a GitHub project to keep track of some of the little things I wanted to get done that were lower priority, and eventually took some measures to add in Gatsby plugins for Google Analytics, some metadata, and included icons for browsers, mobile devices, and the PWA manifest configurations.

我使用GitHub 项目跟踪我想完成的优先级较低的一些小事情，并最终采取了一些措施，为Google Analytics(分析)添加了Gatsby插件 ，一些元数据，并为浏览器，移动设备，和PWA清单配置。

部署(约45分钟) (Deploy (~45 minutes))

…and launch!

…并发射！

Once I got to a point where my app worked and functioned as I’d designed and envisioned, I thought it still wasn’t good enough. I imagined a portal where users could authenticate, save, and share styles they’d made, and then use the app as a reference to return to. I came to the conclusion that that wasn’t my original intent, and decided to just wrap up what I had actually done. I could build on top of it if I had the motivation later or found that it was something people would actually use.

一旦达到我的应用程序能够按照我设计和设想的那样工作和运行的程度，我就认为它还不够好。 我想象过一个门户，用户可以在其中认证，保存和共享他们制作的样式，然后使用该应用作为返回参考。 我得出的结论是，这并不是我的初衷，因此决定总结一下我实际上所做的事情。 如果以后有动力，或者发现它是人们实际使用的东西，则可以在此基础上构建。

Getting past those inhibitions of uncertainty throughout were easy since I had a goal in my sights.

自从有了目标后，就可以轻松克服不确定性的限制。

I finally realized that I could look at my hard work and appreciate a genuinely cool thing I’d made:

我终于意识到，我可以看着自己的辛勤工作，并欣赏自己做的一件很酷的事情：

Being more or less complete, deploying it was next. Deployment was a really simple process. I didn’t really want to dump money into a domain on a side project I might not care for much in a year or two. So I took advantage of how Surge hosts your sites in the free tier and named it card surge, so all I needed to do was snag the card subdomain and I had a free branded domain at card.surge.sh ?. I ran gatsby build and then surge, and my code was online and distributed across a CDN with automatic SSL.

接下来是完成或多或少完整的部署。 部署是一个非常简单的过程。 我真的不想把钱投入到我可能在一两年内不太在意的附带项目中。 因此，我利用了Surge在免费层中托管您的网站的方式，并将其命名为card sup浪潮，因此，我需要做的就是抓取card子域，并在card.surge.sh？拥有一个免费的品牌域名。 我先运行atsby build ，然后运行atsby build urge,我的代码已联机并通过自动SSL在CDN上分发。

I also love Netlify too much to not use it, so I pointed my GitHub repo at a project on Netlify to automatically build any pull requests or commits to Master (which came in handy just a couple hours after launching when the first pull request came in).

我也很喜欢Netlify太多，不使用它，所以我指着上Netlify一个项目我的GitHub库自动建立任何引入请求或提交到主( 其中派上了用场，短短几个小时，当第一拉请求排在发射后)。

Without a need for a backend, my site was up and I hadn’t spent a cent.

不需要后端，我的网站就可以启动了，我一分钱也没花。

I took some screenshots and recordings using Kap, wrote up a description, and posted Card Surge on Product Hunt.

我使用Kap拍摄了一些屏幕截图和录像，写了描述，并在Product Hunt上张贴了Card Surge。

回头看 (Looking back)

Working fast and pushing towards a completion date (that I had looming on the calendar) was really rewarding. I had to simplify problems to what mattered and only address concerns that would actually interfere with finishing and launching by my end date.

快速工作并争取完成日期(这是我在日历上迫在眉睫)的确很有意义。 我不得不将问题简化为重要的问题，只解决在结束日期之前实际上会干扰完成和启动的问题。

If I find another project I realistically think I can complete in just a few weeks, I’ll definitely do another sprint like this.

如果我发现另一个项目，实际上我认为我可以在几周内完成，那么我肯定会再进行一次这样的冲刺。

Overcome whatever reservations you have to wrap up that side project you’ve been waiting to finish — you won’t regret it!

克服您为完成您一直等待完成的副项目而做出的任何保留，您不会后悔的！

谢谢阅读！ (Thanks for Reading!)

If you have questions about how I did something, why I did something, or what I did horribly wrong, I’m happy to hear from you here in the comments, on Twitter, or via email.

如果您对我的工作方式，为什么做某事或我做错了什么事情有疑问，我很高兴在这里的评论，Twitter或电子邮件中收到您的来信。

If you found what you read interesting or helpful, feel welcome to leave a clap or two, subscribe for future updates, or retweet/share this tweet: ?

如果您发现所读内容有趣或有帮助，欢迎打一两本书，订阅以后的更新，或转发/分享此推文：

翻译自: https://www.freecodecamp.org/news/launching-a-side-project-in-10-days-615df3b0e808/

项目使用ts辅助