掩碼項目編碼

by Angela He

通過何安佳

每天進行20天的編碼項目 (A coding project a day for 20 days)

我如何在20天內自學Web開發 (How I taught myself web development in 20 days)

It was the first day of winter break for Stanford students. Back at home, I opened a dozen tabs of coding inspiration, got onto a code editor, and created my first coding project. 20 days later, I created my last project before packing up and flying out to return to the college grind.

這是斯坦福大學學生寒假的第一天。回到家里，我打開了十二個編碼靈感標簽，進入了一個代碼編輯器，并創建了我的第一個編碼項目。 20天后，我創建了我的最后一個項目，然后打包整理并飛回大學。

I challenged myself to code a project every day so I could gain the skills to make a website as amazing as the websites that inspire me. To make my numerous ideas into reality, and be able to share them with the world, has always been my driving force, first in art, now in code.

我每天都在挑戰自己編寫一個項目的代碼，這樣我才能掌握使網站像激發我靈感的網站一樣驚人的技能。使我的眾多想法變為現實，并能夠與世界分享，一直是我的動力，首先是藝術，現在是代碼。

During those 20 days, I taught myself multiple web development languages and created many projects including a messaging app, a notes app, and a chatbot.

在那20天內，我自學了多種Web開發語言，并創建了許多項目，包括消息傳遞應用程序，便箋應用程序和聊天機器人。

You can find my 20 Days projects on CodePen.

您可以在CodePen上找到我的20天項目。

Here are my tools, creative process, and some reflection at the end.

這是我的工具，創作過程以及最后的幾點思考。

工具類 (Tools)

I used all of the following tools, but everything beyond HTML, CSS, Javascript, and a code editor is optional.

我使用了以下所有工具，但HTML，CSS，Javascript和代碼編輯器之外的所有工具都是可選的。

CodePen. An online code editor for HTML, CSS, and Javascript where users can showcase their work — great for getting your web dev code seen.
CodePen。用于HTML，CSS和Javascript的在線代碼編輯器，用戶可以在其中展示其工作-非常適合查看您的Web開發代碼。
Photoshop. A world-class graphics editor for creating raster graphics. I created graphics for certain projects with this and a Huion tablet.
Photoshop。世界一流的圖形編輯器，用于創建柵格圖形。我使用此軟件和Huion平板電腦為某些項目創建了圖形。
HTML. Hypertext Markup Language; creates the content of a webpage.
HTML。超文本標記語言; 創建網頁的內容。
Pug. A template engine for a more ‘clean, whitespace sensitive syntax for HTML’ — great for speeding up development.
哈巴狗一個模板引擎，用于更“干凈的，對HTML的空格敏感的語法” —非常適合加快開發速度。
Bootstrap. A component library for getting responsive components up quick. Great for speed; not so great for unique designs since every component will have a predetermined look.
引導程序。一個組件庫，用于快速啟動響應式組件。非常適合速度；對于獨特的設計來說并不是那么好，因為每個組件都具有預定的外觀。
CSS. Cascading Style Sheets; dictates the design of a webpage.
CSS。級聯樣式表；決定網頁的設計。
Sass. Style sheet language that provides variables, functions, mixins, and more to streamline creating CSS.
ass子樣式表語言，提供變量，函數，mixin等，以簡化CSS的創建過程。
Javascript. Used to define unpredictable or user-controlled events of a webpage.
Javascript。用于定義網頁的不可預測或用戶控制的事件。
React. A Javascript library that helps maintain state and create the content of a webpage by separating each part into a reusable component.
React 一個Javascript庫，通過將每個部分分成一個可重用的組件來幫助維護狀態并創建網頁的內容。
jQuery. A Javascript library to help simplify HTML DOM manipulation and traversal — note, however, that its ease comes at the cost of its relatively large size — around 30 KB.
jQuery的。一個有助于簡化HTML DOM操作和遍歷的Javascript庫-但是請注意，它的簡便性是以相對較大的大小為代價的-大約30 KB。
three.js. A Javascript library for creating and displaying 3D models.
three.js。一個用于創建和顯示3D模型的Javascript庫。
Firebase. A mobile and web platform that provides easy access to database, messaging, authentication, and other services.
火力基地。一個移動和Web平臺，可輕松訪問數據庫，消息傳遞，身份驗證和其他服務。

創作過程 (Creative Process)

To successfully create a project, I had to do two things:

要成功創建一個項目，我必須做兩件事：

Have an idea,
有個主意
Know it’d be feasible.
知道這是可行的。

Thus my creative process took form in three steps —

因此，我的創作過程分三步走：

1.了解一個想法(30分鐘) (1. Get an idea (30 min))

My goal for each project was to make something cool while learning something new. With that in mind, I browsed my favorite design and web development sites for inspiration —

對于每個項目，我的目標都是在學習新知識的同時做一些有趣的事情。考慮到這一點，我瀏覽了自己喜歡的設計和Web開發網站以獲取靈感-

My favorite design sites:

我最喜歡的設計網站：

Dribbble.
運球。
Behance.
行為。
Daily UI.
每日用戶界面。

My favorite web dev sites:

我最喜歡的Web開發網站：

CodePen.
CodePen 。
Awwwards.
啊！
Codrops.
科洛普斯。
CodyHouse.)
CodyHouse 。)

And brainstormed a list of ideas like the following —

并集思廣益，列出了如下想法：

…then picked my favorite out of the list as the Official Idea of the Day?.

…然后從列表中選擇了我最喜歡的作為“每日官方想法?” 。

2.查找示例(30分鐘) (2. Find examples (30 min))

For every idea I had, I knew some part of it must have an existing implementation on the web. I scoured the internet for elegant implementations. Some sites that usually led to public solutions include —

對于我的每個想法，我都知道其中的某些部分必須在網絡上已有一個實現。我在互聯網上搜索了優雅的實現。通常導致公開解決方案的一些網站包括-

GitHub
的GitHub
CodePen
密碼筆
JSFiddle
JSFiddle
StackOverflow
堆棧溢出
Plain Old Google
普通的舊Google
..and going into Chrome Developer Tools on any website that seems similar to what I was trying to accomplish.
..然后進入似乎與我想要完成的網站類似的任何網站上的Chrome開發者工具。

I studied what had been done, how it’d been done, then combined what I’d learned to make the cleanest solution I could.

我研究了已經完成的工作，如何完成工作，然后結合我所學到的知識來制定最干凈的解決方案。

No need to reinvent the wheel when you can improve upon the past.

當您可以改善過去時，無需重新發明輪子。

3.創建！ (當日余下的時間) (3. Create! (rest of the day))

Armed with an idea and examples, I made my idea into reality. Every day there’d be roadblocks, and progress would seem mind-numbingly slow. But with online research, I learned from my mistakes and got more knowledgeable and faster every day.

有了一個想法和例子，我使我的想法變成了現實。每天都有障礙，進展似乎令人麻木。但是，通過在線研究，我可以從錯誤中吸取教訓，并且每天都能掌握更多知識，并且更快。

第1至9天：重新創建示例 (Days 1–9: recreating examples)

For days 1 to 9, I took a design or website I especially liked and tried to recreate it.

從第1天到第9天，我選擇了一個我特別喜歡的設計或網站，然后嘗試重新創建它。

10到20天：提出獨到的見解 (Days 10–20: Develop original ideas)

Once I became more comfortable with web development, I based my coding projects on original ideas I’ve always wanted to do, like interactive art, original fonts, and a cute notes app.

一旦我對網絡開發變得更加滿意，我就將我的編碼項目基于我一直想做的原始想法，例如交互藝術，原始字體和一個可愛的note應用程序。

反射 (Reflection)

1.學到終身知識。 (1. Learned lifelong knowledge.)

Looking back, I came a long way from where I was before. Over the 20 days, I learned Bootstrap, jQuery, React, Pug, Sass, and other tools, as well as loads of neat HTML/CSS/Javascript concepts such as blend modes, masking and clipping, animations, pseudo elements, media queries, closures and context, Promises, and much more. These will help me tackle future projects, especially if and as web development and progressive web apps become more popular.

回首過去，我已經走了很遠。在這20天的時間里，我學習了Bootstrap，jQuery，React，Pug，Sass和其他工具，以及大量簡潔HTML / CSS / Javascript概念，例如混合模式，蒙版和剪切，動畫，偽元素，媒體查詢，閉包和上下文，承諾等等。這些將幫助我應對未來的項目，尤其是當Web開發和漸進式Web應用變得越來越流行時。

2.永遠沒有足夠的時間。 (2. Never enough time.)

Although I learned a lot, I didn’t learn as much as I’d like. I’m saddened I didn’t have time to learn other tools I had my eye on, like Vue.js, Redux, GreenSock, and others. Nonetheless, those are all things I can go back and work on in the future.

盡管我學到了很多東西，但我沒有學到很多。我很傷心，我沒有時間學習我關注的其他工具，例如Vue.js ， Redux ， GreenSock等。盡管如此，這些都是我以后可以繼續努力的事情。

It was better to take time to understand my tools instead of rushing from one tool to the next without understanding.

最好花一些時間來了解我的工具，而不要在不了解的情況下匆匆忙忙地使用一種工具。

3.對自己充滿信心。 (3. Grew confident in myself.)

Most importantly, I grew to believe in my coding and creative abilities.

最重要的是，我逐漸相信自己的編碼和創造能力。

Instead of starting a massive project (again) and never finishing it (again), I’d complete a project from start to end every day or two, forced to scope small by the time limit.

我不會(再一次)開始一個龐大的項目，也不會再一次(再一次)完成它，我每天或每兩天從頭到尾完成一個項目，受時間限制而不得不縮小范圍。

With every completed project, I grew more confident in my skills, ambition, and ability to achieve goals.

在完成每個項目后，我對自己的技能，雄心和實現目標的能力變得更加自信。

Unlike last winter break, where I started a (still unfinished) project then became discouraged by the immeasurable work it required, I’m encouraged by this break. Today, I’m content back at Stanford, grateful for what I’ve learned, a little more confident, and eager to create more.

與去年冬季休假不同，在這里我開始了一個(仍未完成的)項目，然后由于需要做的無量工作而灰心喪氣，這次休假使我感到鼓舞。今天，我對斯坦福大學感到滿意，對我所學到的知識表示感謝，更加自信，并渴望創造更多。

Big thanks to Tiantian Xu who inspired me with her 100 days of motion design!

非常感謝徐天天的 100天運動設計啟發了我！

If you liked reading this, be sure to give a ?(or several!) It’d mean so much to me. ?

如果您喜歡閱讀本文，請務必給一個(或幾個！)這對我來說意義非凡。？

You can also follow me on Twitter, Tumblr, Instagram, and GitHub for more cool projects :)

您也可以在Twitter ， Tumblr ， Instagram和GitHub上關注我，以獲得更多有趣的項目：)