我如何仅使用html css和javascript构建我的第一个Web应用程序

项目背景(Project Context)

Dashboard Screen

仪表板屏幕

Eatthefrog is a task planning web app. It was my graduation project in the Web Developer Bootcamp that I got accepted in June 2020.

Eatthefrog是一个任务计划网络应用程序。 这是我在Web Developer Bootcamp中的毕业项目，我于2020年6月被接受。

I released the MVP version, which has four main functions Create Task, Edit Task, Delete Task, Filter (by Status, Due Date); and it has not been responsive to Mobile yet.

我发布了MVP版本，它具有四个主要功能：创建任务，编辑任务，删除任务，过滤(按状态，到期日期)； 并且尚未响应Mobile。

Play with my app here: https://eatthefrog.netlify.app

在这里玩我的应用程序： https : //eatthefrog.n​​etlify.app

You can check my codebase here: https://github.com/TotoroSyd/Eatthefrog

您可以在这里检查我的代码库： https : //github.com/TotoroSyd/Eatthefrog

流程 (The Process)

Original wireframe, palette, notes and more

原始线框，调色板，注释等

从头开始编码和选择技术(Coding from scratch and technology choices)

I believe a resourceful programmer should be able to solve problems with or without powerful tools because they understood the nature of the problem.

我相信，一个足智多谋的程序员应该能够使用或不使用功能强大的工具来解决问题，因为他们了解问题的本质。

I used Bootstrap to build the Create/Edit and Delete confirmation modals, toggle cards; other than that, Eatthefrog was completed mainly by HTML, CSS (Flexbox for web layout) and JavaScript.

我使用Bootstrap构建了Create / Edit和Delete确认模式，切换卡； 除此之外，Eatthefrog主要由HTML，CSS (用于网页布局的Flexbox )和JavaScript完成。

Even though updating filter sidebar badges and summary cards were good cases for React as they needed to refresh frequently whenever a task was manipulated (create/edit/delete/filter), I got used to with JavaScript classes.

尽管更新过滤器侧边栏徽章和摘要卡是React的好案例，因为每当操作任务(创建/编辑/删除/过滤器)时它们都需要频繁刷新，我还是习惯了JavaScript类。

To work with Date and Time, I used date-fns library because it was way too time-consuming if I tried to use pure JavaScript.

为了处理日期和时间，我使用了date-fns 库，因为如果我尝试使用纯JavaScript，那将非常耗时。

Regarding storage and data-structure, they were not my main focus for this MVP version, so I stored each task in an object format in localStorage.

关于存储和数据结构，它们不是此MVP版本的主要重点，因此我将每个任务以对象格式存储在localStorage中。

{   1599970396164: “{“id”:”1599970396164",”name”:”Create your task”,”description”:”Hello”,”assignee”:”Phoebe”,”dateNum”:1600128000000,”date”:”15–09–2020",”status”:”To Do”}”,   id_arr: “[“1599970396164”]”}

During the refactoring, I realized a single script.js is a nightmare for me to manage and run unit tests because my codebase was large. I decided to break my code into multiple individual functions, grouped them into classes and separated .js files. Then, the challenge was “How to bundle them back to serve in the browser?”. After researching different options, I chose Parceljs as it is “straightforward, zero configuration web application bundler”.

在重构期间，我意识到只有一个script.js是我管理和运行单元测试的噩梦，因为我的代码库很大。 我决定将我的代码分成多个单独的函数，将它们分组为类并分离.js文件。 然后，面临的挑战是“如何将它们重新捆绑在一起以在浏览器中提供服务？”。 在研究了不同的选项之后，我选择了Parceljs 因为它是“直接，零配置的Web应用程序捆绑程序”。

Lastly, the challenging but satisfying part was to run unit tests with Jest. I wrote unit tests to test storage behaviours and DOM changes.

最后，具有挑战性但令人满意的部分是使用Jest运行单元测试。 我编写了单元测试来测试存储行为和DOM更改。

UX / UI (UX/UI)

At first, I got a “developer/designer block”, so I didn’t know where to start drafting my wireframe while I knew that my main focus was to keep the UX/UI clean and engaging. I sought inspiration from Todoist, Trello, Asana and Google Calendar.

最初，我有一个“开发人员/设计人员”，所以我不知道从哪里开始绘制线框，而我知道我的主要重点是保持UX / UI的清洁和吸引人。 我从Todoist，Trello，Asana和Google日历中寻求灵感。

So, I drafted my first wireframe and found my palette from ColorHunt. The process of “seeking inspiration — adjusting design” was repeated until I liked my MVP version (explain why the original wireframe is different from my actual product :)

因此，我起草了第一个线框，并从ColorHunt找到了我的调色板。 重复“寻找灵感-调整设计”的过程，直到我喜欢我的MVP版本为止(解释为什么原始线框与我的实际产品不同：)

Task View having four functions: Create, Edit, Delete, Filter

任务视图具有四个功能：创建，编辑，删除，过滤

With only four main functions, I can follow the one-page design trend, but it wasn’t engaging enough. However, I also had to consider the time constraint and my coding experience, so I can’t make my design too complicated to deliver. I opted for a two-views design which satisfies these criteria:

仅使用四个主要功能，我就可以顺应一页的设计趋势，但是不够吸引人。 但是，我还必须考虑时间限制和编码经验，因此我不能使设计过于复杂以致无法交付。 我选择了满足以下条件的两视图设计：

1. Deliver four essential functions, and they run on one view.

1.提供四个基本功能，它们在一个视图上运行。

2. Thus, users don’t have to switch context whenever they make a change in their task list.

2.因此，用户不必在任务列表中进行任何更改就切换上下文。

3. The other view (Welcome view) makes the page engaging and interactive.

3.另一个视图(“欢迎”视图)使页面具有吸引力和互动性。

4. Each view is a value-added to a user’s needs.

4.每个视图都是用户需求的增值。

外卖 (Takeaways)

I learnt so much from finishing this project. It is not only technical knowledge, but it is also about defining my learning/problem-solving approach. Here are the top 3 suggestions from a beginner (me) to another beginner.

我从完成这个项目中学到了很多东西。 这不仅是技术知识，而且还与定义我的学习/问题解决方法有关。 这是从初学者(我)到另一个初学者的前3条建议。

不要将框架/模块作为第一资源。 没有它们，尝试解决相同的问题。 (Don’t take frameworks/ modules as your first resources. Try to solve the same problem without them.)

When I started exploring Web Development, I got overwhelmed with the available resources. When I got stuck, I opted for Stackoverflow and documentations, and I got even more overwhelmed because people suggested many solutions which I didn’t know how to choose.

当我开始探索Web开发时，我对可用资源不知所措。 当我陷入困境时，我选择了Stackoverflow和文档，但我什至不知所措，因为人们提出了许多我不知道如何选择的解决方案。

I was drowning in the pool of answers and the fear of being behind others. That was when I reflected myself and figured out the root cause of my issue. I was scared because, at the back of my mind, I didnt understand the problem I was solving. Thus, I can’t tell what made each solution different in the context of my problem.

我淹没在答案池中，害怕被别人抛弃。 那是我反思自己并找出问题根源的时候。 我很害怕，因为在我脑海中，我不了解自己正在解决的问题。 因此，我无法确定是什么使每种解决方案在我的问题中有所不同。

I decided to solve problems without help from frameworks/ modules first. Thus, I can understand the nature of the problem, what challenges I would face without external help. And, that is when a framework/library/module comes in.

我决定首先在没有框架/模块帮助的情况下解决问题。 因此，我可以理解问题的性质，如果没有外部帮助，我将面临哪些挑战。 并且，那是当框架/库/模块出现时。

For instance, I was advised to use React for my graduation project because it would help me with the components’ changes. But I chose to use JavaScript only, which took me longer, but I finally knew where React could help.

例如，建议我在我的毕业设计中使用React，因为它可以帮助我进行组件的更改。 但是我选择只使用JavaScript，这使我花了更长的时间，但我终于知道React可以提供哪些帮助。

总是发表评论。 (Always leave comments.)

I didn’t have many experiences working in a team so when it came to teamwork, I got a bit lost and frustrated. The style, the variables were different. Everything was different. Our team was slowing down even we had a good starting point.

我在团队中没有很多工作经验，所以在团队合作方面，我有些失落和沮丧。 样式，变量不同。 一切都不一样。 即使我们有一个很好的起点，我们的团队也在放慢脚步。

Luckily, I developed a personal coding habit that I write comments to almost every line of code. It helped my teammate understand my code so he can refactor his code to merge with mine easily.

幸运的是，我养成了个人编码习惯，几乎每行代码都写了注释。 它帮助我的队友理解了我的代码，因此他可以重构自己的代码以轻松地与我的代码合并。

Also, thanks to this habit, I was able to take over the project and deliver it on my own when my teammate dropped out of the project due to unavoidable circumstances two weeks before the submission date.

另外，由于这种习惯，当我的队友由于无法避免的情况而在提交日期前两周退出该项目时，我能够接管该项目并自己完成该项目。

I left comments as breadcrumbs; I can distinguish my code and my teammate’s code. It took a quite for me to go through the code base and refactor, but it went smoothly.

我留下评论作为面包屑； 我可以区分我的代码和队友的代码。 我花了相当长的时间浏览代码库并进行重构，但是一切顺利。

养成通过版本控制保存代码的习惯。 (Build a habit of saving your code via Version Control.)

I use Git as my Version Control.

我使用Git作为我的版本控制。

As a beginner, you might not develop (yet) your muscle memory to commit changes constantly. Also, you might not spend enough time to understand and get used to with Git commands. You have to fix these two things fast!

作为初学者，您可能尚未开发(但尚未)肌肉记忆以不断进行更改。 另外，您可能没有花费足够的时间来理解和习惯Git命令。 您必须快速修复这两个问题！

Why?

为什么？

Not committing changes systematically and constantly (means: you made multiple changes and make one big commit) will drive you crazy when your work got conflicted with your teammates and you have to manually merge branches. Commit log can’t show clearly what you changed.

当您的工作与队友发生冲突并且必须手动合并分支机构时，不系统而持续地进行更改(意味着：您进行了多次更改并进行了一次重大提交)会使您发疯。 提交日志无法清楚显示您所做的更改。

寻找技术导师/导师 (Find a technical tutor/ mentor)

As much as I pride myself as a fast, persistent and resourceful learner, I have to admit that I couldn’t finish my project without the support from my Pod instructor and my partner. They were my lifesavers.

尽管我以自己是一个快速，持久且足智多谋的学习者而自豪，但我不得不承认，没有Pod老师和我的伴侣的支持，我无法完成我的项目。 他们是我的救星。

I was proactive to think on my own and got friendly with Google, MDN, CSS-tricks, but having a technical mentor saved me so much time. They guided me with my problem, gave me hints on how to think and choose a solution. They also helped me fix my bad habit and challenged my answers so I can improve my code better.

我很主动地自己思考，并且对Google， MDN和CSS技巧很友善，但是拥有一名技术指导员为我节省了很多时间。 他们为我解决了问题，并给了我有关如何思考和选择解决方案的提示。 他们还帮助我纠正了我的坏习惯，并挑战了我的答案，以便我可以更好地改进代码。

Having so much fun exploring Web Development! I felt so much confident that I completed this app covering from back-end to front-end.

探索Web开发非常有趣！ 我对完成从后端到前端的这个应用程序感到非常有信心。

My next side-project is to experience with Chatbot, AI and API, preferably working with Slack.

我的下一个辅助项目是使用Chatbot，AI和API，最好与Slack合作。

Thanks for reading!

谢谢阅读！

Phoebe

菲比

翻译自: https://medium.com/@phoebephuongnguyen/how-i-built-my-first-web-app-with-only-html-css-and-javascript-96f262a63eac