农民约翰是一个惊人的会计_我的朋友约翰在CSS Grid中犯了一个错误。 不要像约翰-这样做。
農(nóng)民約翰是一個(gè)驚人的會計(jì)
It had been two years and John had no job.
已經(jīng)兩年了，約翰沒有工作。
John was a smart 20-something guy. Okay, he had a job — but it wasn’t one he liked. It was too monotonous and was not nearly creative enough. His day job only bored the hell out of him.
約翰是個(gè)聰明的20多歲的家伙。 好的，他有一份工作-但這不是他喜歡的工作。 這太單調(diào)了，還不夠有創(chuàng)意。 他的日常工作只會使他無聊。
求職 (The Job Search)
For John, it felt as though it wasn’t difficult to learn to code. He taught himself to code, and started looking for the opportunity to leave his boring job — finally.
對于John來說，感覺好像并不難學(xué)習(xí)編碼。 他自學(xué)了編碼，并開始尋找機(jī)會離開無聊的工作-終于。
After a month of futile job searching, he got a call from Sharon.
經(jīng)過一個(gè)月的徒勞尋找工作，他接到了沙龍的電話。
Sharon was the recruiter for youknowho Inc, an AI startup in the valley.
沙龍?jiān)俏挥谏焦鹊腁I初創(chuàng)公司youknowho Inc的招聘人員。
With a lot of enthusiasm, John blazed through all the hiring process. Guess what the interesting part was?
約翰滿懷熱情地完成了整個(gè)招聘過程。 猜猜有趣的部分是什么？
That call from Sharon.
沙龍的那個(gè)電話。
She asked a couple questions on his background, and John couldn’t wait to share his boring, monotonous typical work day with her.
她問了幾個(gè)有關(guān)他的背景的問題，約翰迫不及待地想與她分享他無聊，單調(diào)的典型工作日。
He tried to tell himself that it didn’t matter if he got the Job. At least, those were the words he muttered as the call ended. “I just had to share how I really felt about my current Job,” he said.
他試圖告訴自己，是否得到這份工作并不重要。 至少這些是通話結(jié)束時(shí)他喃喃自語的話。 “我只是分享如何我真的覺得對我現(xiàn)在的工作，”他說。
Weeks went by, and it felt like a dream when got himself a job as a junior frontend developer.
幾周過去了，當(dāng)自己擔(dān)任初級前端開發(fā)人員的工作時(shí)，這就像一個(gè)夢。
And that’s where the story begins.
這就是故事的開始。
John遇到Khalid和CSS網(wǎng)格 (John meets Khalid and the CSS Grid)
Khalid wasn't a DJ.
哈立德不是DJ。
If he were, then all he mixed was clean code, and not songs.
如果他是，那么他所混合的只是干凈的代碼，而不是歌曲。
If you wanted to ruin a nice afterparty, then have Khalid be your DJ. You’d get nothing short of a complete mess.
如果您想破壞一場美好的派對，那么請讓哈立德(Khalid)做您的DJ。 您將一團(tuán)糟。
Khalid wasn't a big fan of songs anyway, but who needs to love music when you’re tech lead at a thriving Startup in the Valley?
無論如何，哈立德(Khalid)都不是歌迷，但是當(dāng)你在硅谷蓬勃發(fā)展的創(chuàng)業(yè)公司擔(dān)任技術(shù)主管時(shí)，誰會喜歡音樂？
As tech lead, Khalid was responsible for the entire development team. This meant more than just dealing with technical issues — it also meant he had to deal with people from different backgrounds.
作為技術(shù)主管，Khalid負(fù)責(zé)整個(gè)開發(fā)團(tuán)隊(duì)。 這不僅意味著要處理技術(shù)問題，還意味著他必須與來自不同背景的人打交道。
And that’s a darn hard thing to suceed at. But Khalid excelled not just at being a great technical leader. He had an impeccable relationship with the development team.
這是一件很難的事情。 但是Khalid不僅擅長成為一名出色的技術(shù)領(lǐng)導(dǎo)者。 他與開發(fā)團(tuán)隊(duì)有著無可挑剔的關(guān)系。
It wasn't a surprise that the two got talking almost immediately. Who wouldn't love John?
這兩個(gè)人幾乎立即開始交談并不奇怪。 誰會不愛約翰？
His broad smiles were enough to light up a tunnel. He just smiled always. Who does that!
他燦爛的笑容足以照亮隧道。 他只是一直微笑。 誰做的！
回到辦公室 (Back at the office)
Everyone was ready for work.
每個(gè)人都準(zhǔn)備工作。
John entered with a cup of coffee. It was morning, and the office had just started to buzz.
約翰帶著一杯咖啡進(jìn)來了。 那天早上，辦公室剛開始嗡嗡作響。
Good Monday morning, eh?
星期一早上好，是嗎？
“So, John it is nice to have you join the development team. Was wondering if you were ready to take on a new task today?” asked Khalid
“所以，約翰，很高興您加入開發(fā)團(tuán)隊(duì)。 想知道您今天是否準(zhǔn)備好承擔(dān)一項(xiàng)新任務(wù)？” 哈立德問
“Hey, boss. I was born ready! ”
“嘿，老板。 我天生就準(zhǔn)備好了！ ”
That’s John for you. He was born ready — indeed. Happy dude.
那是約翰給你的。 他天生就準(zhǔn)備好了-的確如此。 老兄
“Umm, I need you to set up a new landing page for our new product. And we want it written with the CSS Grid. Ever heard of it?”
“嗯，我需要您為我們的新產(chǎn)品設(shè)置一個(gè)新的登錄頁面。 我們希望它使用CSS Grid編寫。 聽說過嗎？”
“Oh yes I have,” John said quickly.
“哦，是的，”約翰Swift說道。
學(xué)習(xí)CSS網(wǎng)格 (Learning the CSS Grid)
John had no idea what the CSS Grid was.
John不知道CSS網(wǎng)格是什么。
The only reason he said yes was that he didn't want to look stupid in front of Khalid.
他唯一同意的理由是，他不想在哈立德面前顯得愚蠢。
He searched on Medium and found great CSS Grid articles. He read to his heart’s content, and started working on the layout.
他在Medium上搜索，找到了很棒CSS Grid文章。 他認(rèn)真閱讀了內(nèi)容，并開始進(jìn)行版式設(shè)計(jì)。
約翰建立的布局 (The layout John built)
John had a lot of experience with Bootstrap.
約翰在Bootstrap上有很多經(jīng)驗(yàn)。
He was quite familiar with the concept of a 12-column grid. So, with the CSS Grid, the first thing he did was set up a 12 column grid like so:
他對12列網(wǎng)格的概念非常熟悉。 因此，對于CSS網(wǎng)格，他所做的第一件事是建立一個(gè)12列網(wǎng)格，如下所示：
grid-template-columns: repeat(12, 1fr)“Haha, that was easy,” he thought to himself.
“哈哈，那很容易，”他自言自語。
In fact, John did this for every side project he worked on while learning the CSS Grid.
實(shí)際上，John在學(xué)習(xí)CSS網(wǎng)格時(shí)為他從事的每個(gè)副項(xiàng)目都做了此工作。
John enjoyed working with the CSS Grid, and he thought it was fun.
John喜歡使用CSS Grid，他認(rèn)為這很有趣。
He made a few mistakes, and some stuff didn't work as he expected, but he was able to quickly fix the issues.
他犯了一些錯(cuò)誤，有些東西沒有達(dá)到他的預(yù)期，但是他能夠Swift解決問題。
He knew how to Google things. In this day and age, everyone should.
他知道如何Google的東西。 在這個(gè)時(shí)代，每個(gè)人都應(yīng)該。
與哈立德的會面 (The meeting with Khalid)
“I’ve got it working now, Boss.”
“我現(xiàn)在已經(jīng)開始工作了，老板?！?
Khalid was excited to see John. They chatted about his experience building the layout, and Khalid went on to take a look at the code.
哈立德很高興見到約翰。 他們聊起了他構(gòu)建布局的經(jīng)驗(yàn)，然后Khalid繼續(xù)看了一下代碼。
Well, every layout built with the CSS Grid pretty much begins with the grid definition. So, that was where Khalid looked first.
嗯，使用CSS Grid構(gòu)建的每個(gè)布局幾乎都始于網(wǎng)格定義。 因此，這就是Khalid的第一眼。
“Oh, man. There’s something not right here.”
“天啊。 這里有些不對勁?！?
為什么創(chuàng)建12列？ (Why did you create 12 columns?)
And Khalid began his lecture …
哈立德開始他的演講……
12 column grids are popular in web design today. But the idea behind the CSS Grid is to create the number of columns you need without bloating the layout with columns you don’t really need.
12個(gè)列網(wǎng)格在當(dāng)今的網(wǎng)頁設(shè)計(jì)中很流行。 但是CSS網(wǎng)格背后的想法是創(chuàng)建所需的列數(shù)，而不會用不需要的列來使布局膨脹。
The CSS Grid layout forces you to think about layouts in CSS a little differently than we’ve done for over 20 years.
CSS網(wǎng)格布局迫使您對CSS布局的思考與我們20多年來所做的稍有不同。
It is a game changer, one that includes a lot of unlearning.
它是一個(gè)改變游戲規(guī)則的人，其中包括很多未學(xué)習(xí)的知識。
“A neater approach would have been to create the 2 or 3 columns you needed and just get on with the design,” said Khalid.
Khalid說：“更巧妙的方法是創(chuàng)建所需的2或3列，然后繼續(xù)進(jìn)行設(shè)計(jì)。”
“There’s no harm in redefining the number of columns within the media query too. Makes it perfect for responsive design.”
“重新定義媒體查詢中的列數(shù)也沒有害處。 使其非常適合響應(yīng)式設(shè)計(jì)?！?
課程 (The lesson)
With the CSS Grid layout, you aren’t bound to a set number of rows or columns.
使用CSS Grid布局，您不必綁定到一定數(shù)量的行或列。
You also don’t have to create 12 columns every time. If you don’t need 12 columns, don’t create them. The CSS Grid isn’t another grid based CSS framework.
您也不必每次都創(chuàng)建12列。 如果不需要12列，則不要?jiǎng)?chuàng)建它們。 CSS網(wǎng)格不是另一個(gè)基于網(wǎng)格CSS框架。
You’re free.
你自由了。
As pointed out by Per Harald Borgen, you may create 12 columns if you want to experiment with white spaces between columns.
正如Per Harald Borgen指出的那樣，如果您要嘗試在列之間使用空白，則可以創(chuàng)建12列。
Other than that, create the number of columns you really need, and get on with the design.
除此之外，創(chuàng)建您真正需要的列數(shù)，然后繼續(xù)進(jìn)行設(shè)計(jì)。
使用CSS網(wǎng)格布局可以使網(wǎng)絡(luò)向前發(fā)展 (Using the CSS Grid layout moves the web forward)
I read an answer to why Apple keeps getting rid of things, instead of adding them.
我讀了一個(gè)答案 ，解釋了為什么Apple不斷擺脫事物而不是添加事物。
There, I learned this:
在那里，我學(xué)到了這一點(diǎn)：
“Supporting legacy is not always the best answer. Dropping things helps the industry move forward to adopt newer, better, formats.”“支持傳統(tǒng)并不總是最好的答案。 放下東西可以幫助行業(yè)向前邁進(jìn)，采用更新，更好的格式?！?In the same way, choosing to learn and use the CSS Grid advances the web. It helps the industry embrace newer and better formats. It helps us grow as a community. A community we so love, and want to grow.
以同樣的方式，選擇學(xué)習(xí)和使用CSS Grid可以使網(wǎng)絡(luò)發(fā)展。 它可以幫助行業(yè)采用更新更好的格式。 它幫助我們成長為一個(gè)社區(qū)。 我們熱愛并希望成長的社區(qū)。
Be like Khalid. Start using the CSS Grid if you can.
像哈立德一樣。 如果可以，請開始使用CSS網(wǎng)格。
Where possible, invest in a decent CSS Grid education. You’ll be helping to move the web forward.
在可能的情況下，投資進(jìn)行體面CSS Grid教育。 您將幫助推動網(wǎng)絡(luò)向前發(fā)展。
想成為專業(yè)人士嗎？ (Want to become a Pro?)
Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!
下載我的免費(fèi)CSS Grid備忘單，并免費(fèi)獲得兩本優(yōu)質(zhì)的交互式Flexbox課程！
Get them now ?
立即獲取 ？
翻譯自: https://www.freecodecamp.org/news/my-friend-john-made-a-mistake-in-css-grid-dont-be-like-john-do-this-instead-91649f480da1/
農(nóng)民約翰是一個(gè)驚人的會計(jì)
總結(jié)
以上是生活随笔為你收集整理的农民约翰是一个惊人的会计_我的朋友约翰在CSS Grid中犯了一个错误。 不要像约翰-这样做。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到别人给我帽子是什么意思
- 下一篇： 梦到捡柴是什么意思啊