成長: フルスタック成長エンジニア ガイド_html/css_WEB-ITnose

ByPhodal (フォローミー: Weibo、Zhihu、SegmentFault)

GitHub: Growth: フルスタック成長エンジニア ガイド

ダウンロード: Epub バージョン、Mobi バージョン、 PDF 版、RTF 版

私の他の電子書籍:

• 「Building an Internet of Things System Step by Step」
• 「GitHub Hitchhiker's Guide」
• "RePractise"

成長実践章: Django バージョン

GitBook: http://gitbook-growth.phodal.com/

WeChat パブリックアカウント

読んでいる途中で質問がある場合は、GitHub: Growth Ebook Issues

文法上の間違いやスペルの間違いに遭遇した場合は、お気軽にお問い合わせください。読書中に技術的なエラーなどがあった場合は、この電子書籍を読んでいる他の子供たちを助けるために、お気軽にプル リクエストを作成してください。

Growth: フルスタック グロース エンジニアへのガイド

これは、フルスタック エンジニアだけでなく、グロース ハッカーになるための知識も含まれている学習マニュアルです。

フルスタックエンジニアは未来です

このドキュメントは、優秀なフルスタックエンジニアを目指すすべての人に贈りたいと思います。

テクノロジーは過去数十年で急速に進歩しており、今後数十年でさらに速く発展するでしょう。今日のテクノロジーの障壁はますます急速に低下しており、当初はチームで構築する必要があった Web アプリケーションは、今では 1 人か 2 人で構築できるようになりました。

同時に、会社の組織構造の変化と変化への適応力により、各個人に割り当てられる責任はますます大きくなります。工場ベースの生産の利点が分かると同時に、リーン思考によってもたらされる変化も分かります。この変化により、より多くの専門家がフルスタックに加わり、組織内のコミュニケーションが向上します。

エキスパートとフルスタックの 2 つの異なる学習モードと、フルスタック エンジニアの将来についても説明します。

テクノロジー革新の歴史

CGI の始まりから MVC モデル、フロントエンドとバックエンド分離のアーキテクチャ モデルに至るまで、テクノロジーの敷居は常に低くなり続けています。これらのしきい値を下げると、1 人か 2 人でほとんどの作業を完了できます。

CGI

20 年前、このような Web サイトは静的な形式で登場し、維持および管理にそれほど多くの人員を必要としませんでした。そこで人々は、動的なWebサイトを実現するCGI（Common Gateway Interface、英語: Common Gateway Interface）を発明しました。次の図は、初期の Web サイトのアーキテクチャ図です:

CGI Web サイトのアーキテクチャ

当時のこの種の Web サイトの URL は次のようなものでした:

https://www.phodal.com/cgi-bin/getblog

(追記: このリンクは説明のために存在しますが、実際には存在しません。)

ユーザーが上記の Web ページにアクセスすると、cgi-bin のパスにある対応する getblog スクリプトにアクセスします。シェルを使用してこの Web ページに戻ることができます:

#!/bin/shecho Content-type: text/plainecho hello,world

Blabla、さまざまなコードが混在したごちゃごちゃしたもの。 2012 年にもこのようなコードをいくつか見たことがあります。簡単に言えば、この時代のコード構造は次のとおりです。

CGI スクリプト ファイル

これは悪夢です。ただし、これが今日の PHP 初心者のコードの書き方のようです。

さて、MVC パターンについて説明します。

MVC アーキテクチャ

Martin Fowler の「エンタープライズ アプリケーション アーキテクチャ パターン」は当時非常に人気があったに違いないと信じる理由があります。コードは、上記の結合状態から次のように変化します。

MVC アーキテクチャ

同様に、このアーキテクチャについては誰もがすでによく知っているため、これ以上説明しません。よく分からない場合は、この本の後半を読んでください。

バックエンド サービス指向とフロントエンドの一貫したアーキテクチャ

今日の観点からは、次の図に示すアーキテクチャがわかります。

バックエンド サービス指向とフロントエンド統合アーキテクチャの終了

バックエンドは、知らず知らずのうちにサービス指向になっています。つまり、API インターフェイスとサービスのみが提供されます。現時点では、フロントエンドと APP エンドの一貫性を保つために、可能な限り統合されています。

ソフトウェア開発の中核問題: コミュニケーション

ソフトウェア開発は過去数十年間、大企業の専有物であり、中小企業にはそのようなことを行う能力がまったくありません。コンピューターが発明されてから数十年間、ソフトウェアの開発は大企業のみが行うことができるものでした。一般の非技術系企業はソフトウェアシステムを自社でカスタマイズすることができず、既存のソフトウェアを購入することしかできません。テクノロジーコストの低下により、今日では平均的な中小企業でも、同じ仕事をするために 1 人か 2 人を雇うことができます。この進化のプロセスは非常に興味深いものです。

開発の進化

このプロセスの各プロセスは、基本的にコミュニケーションの問題を解決するためのものです。ウォーターフォールからアジャイルへは組織内のコミュニケーション問題を解決することであり、アジャイルからリーンへは組織内のコミュニケーション問題を最適化するだけでなく、外部との関係も強化します。つまり、リーンにはインターネットの考え方の一部が組み込まれているのです。

ウォーターフォール

最初に、機能を事前に設計し、コーディングして、適切な時期にソフトウェアをリリースします。

事前設計されたウォーターフォール

しかし、この開発方法は市場の変化に対応するのが困難です。つまり、数年前まで人々が必要としていたソフトウェアを開発するのに数年を費やした場合です。同時に、ソフトウェア開発自体の複雑さの制限により、コピーされたシステムは後の段階で多くのシステム統合作業を必要とします。このような統合作業には、数週間から数か月というかなりの時間がかかる場合があります。

ウォーターフォール コミュニケーション モデル

人々はこの問題に気づくと、作業プロセスの改善を始めます。アジャイル ソフトウェア開発の出現により、プロダクト マネージャーが要件を頻繁に変更する理由が説明できます。機能自体が必要ないのであれば、なぜわざわざ開発する必要があるのでしょうか?しかし、設計の初期段階で機能が適切に設計されていない場合、要件を変更することは避けられません。

アジャイル

既存のインターネット企業のワークフローは、反復や分析などのプロセスを含む多くの部分でアジャイル ソフトウェア開発に似ています。

アジャイル ソフトウェア開発

しかし、私の知る限り、ほとんどの国内インターネット企業はテストを書かず、コードレビューなども行いません。もちろん、これはアジャイルの実践方法に関する記事ではありません。アジャイル開発とウォーターフォール開発の大きな違いは、コミュニケーションの問題です。従来のソフトウェア開発では、研究が完了した後に分析、開発などが行われます。アジャイル開発では、このプロセスにおけるコミュニケーションの問題が強調されます:

アジャイル ソフトウェア開発のコミュニケーション モデル

は、プロセス全体を通じて常にコミュニケーションの問題を強調しますが、まだ問題があります: 組織構造自体の問題。そのような組織構造は次の図に示すとおりです。

組織構造

マーケティング部門/プロダクト マネージャーが研究開発チームと協力して問題を分析しないと、問題が発生します。多くの問題。要件の実装プロセス中に問題が発生した場合、問題はどの部門にあるのでしょうか?

同様に、研究開発部門が次のような構造である場合:

研究開発部門

この場合でも、研究開発および発売のプロセス中にさまざまなコミュニケーションの問題が発生します。

さて、戻って大企業の専門家と中小企業全体を見てみましょう。

大企業の専門家と中小企業のフルスタック

フルスタックと専門家に関する技術記事をよく読むと、人によって強調する方向が異なることがわかります。大企業の記事は特定の分野の専門家になることを強調することを好みますが、中小企業は小さくて美しいチーム、つまりフルスタックのエンジニアを好みます。

ご覧のとおり、大企業も中小企業もさまざまな種類の問題を解決しています。大企業はパフォーマンスの問題を解決する必要がありますが、中小企業は生き残るためにほぼ全能の人材に依存する必要があります。そして、大小を問わず企業は残業をしています。そういう意味で見ていくと、実は大企業が労働力を搾取しているということがわかります。

専門家

技術者は専門家になるべきだという記事のほとんどは、特定の技術分野の専門家になった専門家によって書かれた記事です。そして、興味深い点を見つけることができます。それは、彼らは全員マネージャーであるということです。マネージャーは採用が動機となっているため、問題解決を支援してくれる特定の分野の専門家が必要です。

フルスタック

同様に、フルスタックエンジニアになることに関する記事のほとんどは、スタートアップ企業の CTO によって書かれています。これらのスタートアップの CTO のほとんどはフルスタック エンジニアであり、問​​題解決を支援するためにフルスタック エンジニアを採用する必要があります。

2 つの異なる学習モデル

そして、あなたも何かに気づいたでしょうか。専門家も 「1 つの専門分野には多くの才能がある」 を強調しています。 1 つの分野のテクノロジーのみに依存する専門家はほとんどいないため、技術専門家は企業のニーズに基づいてさまざまな分野を探索する必要があります。結局のところ、「会社とは、すべての資本が株主によって投資され、利益を目的として法律に従って設立される企業組織の形態を指します。」 経営者は、テクノロジー自体が相互に関連していると想定しています。技術分野での強みがあれば、新しい技術に参入することは難しくありません。

技術者として、私たちはこの分野の特定のサブ分野の専門家です。このような専門家として、私たちが学習を他の分野に広げることは難しいことではありません。これまでの学習経験を活用すると、この新しいサブドメインの知識をすぐに習得できます。ご覧のとおり、図の欠点をすぐに補うことができます:

バレル

最近の探索で、非常に興味深いものを発見しました: 20/80 ルールに依存する場合そうであれば、エキスパートになるための学習時間とフルスタックになるまでの学習時間は同等になります。最初は、フルスタックエンジニアリングと特定の技術分野の専門家で80点のレベルを達成する必要があります。

専門家として、この技術分野を深く掘り下げるには、依然として時間の 80% が必要です。フルスタック エンジニアは、時間の 80% を利用して 4 つの新しい領域を探索できます。

フルスタックとエキスパートの学習時間

これは理論的には当てはまりますが、エキスパートは相互学習を行う必要があります。現場の障害 - 既存のモデルを適用します。フルスタックには学習の障壁もあります。つまり、エキスパートになるにはどうすればよいのですが、新しい分野を学ぶ方法を知っておく必要があります。

解决问题的思路：不同的方式

有意思的是——成为专家还是成为全栈，取决于人的天性，这也是两种不同的性格决定的。成为管理者还是技术人员看上去就像一种简单的划分，而在技术人员里成为专家还是全栈就是另外一种划分。这取决于人们对于一个问题的思考方式：这件事情是借由外部来解决，还是由内部解决。下面这张图刚好可以表达我的想法：

内向与外向思维

而这种思维依据于不同的事情可能会发生一些差异，但是总体上来说是相似的。当遇到一个需要创轮子的问题时，我们就会看到两种不同的方式。

对于全栈工程师来说，他们喜欢依赖于外部的思维，用于产生颠覆式思维。如 AngularJS 这样的框架便是例子，前端结合后端开发语言 Java 的思维而产生。而专家则依赖于内部的条件，创造出不一样的适应式创新。如之前流行的 Backbone 框架，适应当时的情况而产生。

全栈工程师的未来：无栈

全栈工程师本身不应该仅仅局限于前端和后台的开发，而可以尝试去开拓更广泛的领域——因为全栈本身是依赖于工程师本身的学习能力，正是这种优秀的学习能力可以让他们接触更广泛的知识。

全栈的短板

如果你也尝试过面试过全栈工程师，你会怎么去面试他们呢？把你知道的所有的不同领域的问题都拿出来问一遍。是的，这就是那些招聘全栈工程师的公司会问你的问题。

人们以为全栈工程师什么都会，这是一个明显的误区——然而要改变这个误区很难。最后，导致的结果是大家觉得全栈工程师的水平也就那样。换句来说，人们根本不知道什么是全栈工程师。在平时的工作里，你的队伍都知道你在不同领域有丰富的知识。而在那些不了解你的人的印象里，就是猜测你什么都会。

因此，这就会变成一个骂名，也是一个在目前看来很难改变的问题。在这方面只能尽可能地去了解一些通用的问题，并不能去了解所有的问题。在一次被面试全栈工程师的过程中，有一个面试官准备了几个不同语言（JavaScript、Java、Python、Ruby)的问题来问我，我只想说 Ciao —— 意大利语：你好！

除了这个问题——人们不了解什么是全栈工程师。还有一个问题，就是刚才我们说的成为专家的老大难问题。

无栈

让我毫不犹豫地选择当全栈工程师有两个原因：

1. 这个世界充满了未解的迷，但是我只想解开我感兴趣的部分。
2. 没有探索，哪来的真爱？你都没有探索过世界，你就说这是你最喜欢的领域。

当我第一次看到全栈工程师这个名字的时候，我发现我已然是一个全栈工程师。因为我的学习路线比较独特：

中小学：编程语言 -> 高中：操作系统、内核、游戏编程 -> 大学： 硬件、Web 开发 -> 工作：后端 + 前端

而在当时我对 SEO 非常感兴趣，我发现这分析和 Marketing 似乎做得还可以。然后便往 Growth Hacking 发展了：

Growth Hacking

而这就是全栈学习带来的优势，学过的东西多，学习能力就变强。学习能力往上提的同时，你就更容易进入一个新的领域。

参考书籍

• 《精益企业： 高效能组织如何规模化创新》
• 《企业应用架构模式》
• 《敏捷软件开发》
• 《技术的本质》

基础知识篇

在我们第一次开始写程序的时候，都是以 Hello World 开始的。或者：

printf("hello,world");

又或许：

alert('hello,world');

过去的十几年里，试过用二十几种不同的语言，每个都是以 hello,world 作为开头。在一些特定的软件，如 Nginx，则是 It Works 。

这是一个很长的故事，这个程序最早出现于1972年，由贝尔实验室成员布莱恩·柯林汉撰写的内部技术文件《A Tutorial Introduction to the Language B》之中。不久，同作者于1974年所撰写的《Programming in C: A Tutorial》，也延用这个范例；而以本文件扩编改写的《C语言程序设计》也保留了这个范例程式。工作时，我们也会使用类似于 hello,world 的 boilerplate 来完成基本的项目创建。

同時に、注意すべきことの 1 つは、大きなプロジェクトを開始する前に、適切な開発環境を見つける必要があるということです。環境を構築することは非常に重要であり、それによってより良い仕事ができるかどうかが決まります。結局のところ、環境は生産性の一部です。有能なプログラマと非有能なプログラマの 10 倍の差は、少なくとも 3 倍は環境の違いによるものです。

この章では、次の点について説明します。

1. 使用するオペレーティング システム
2. ツールの選び方
3. 方法対応するオペレーティング システムで環境をセットアップする
4. 言語を学ぶ方法

ツールは単なる補助的なものです

優れたツールはプログラミングに役立ちますが、それは私たちに助けをもたらすだけです。私たちが書くコードは依然として私たちのレベルと一致しています。

良いツールとは何かについては多くの意見がありますが、時々私たちは物事の表面に執着する傾向があります。変更する必要があるのが構成ファイルだけである場合、Vim の方が Visual Studio よりも強力な場合もあります。VS で開く前に、この作業はすでに Vim で行っています。

「良い機材は役に立ちますが、実際のところ、あなたのプレイレベルは自分の指によって決まります。」 – 「REWORK」

WebStorm か Sublime?

IDE としては、無視できない要素が多すぎる場合があります。最初のコードは Sublime text などのエディターで開始する方が適切です。そこで、私たちは再び IDE とエディターの戦争に陥り始めました。退屈なときにこれらのことについて話し合うのは役に立ちます。お互いの強みを理解し、時には違う環境で試してみるのも良いでしょう。

私たちが最初に学習を始めたとき、作業を始めるために必要なのは通常のツール、または使い慣れたツールだけでした。私たちが望んでいるのは、ツールではなく、物事を学ぶことに集中することです。初めて新しい言語を学び始めるとき、Java などの開発ツールがどれであるかについて議論する必要はありません。単に hello, world を書きたい場合は、Eclipse である場合もあれば、Vim である場合もあります。 Eclipse は、指を動かしてマウスを動かすと効率が悪くなりますので、あまり時間をかけすぎない方が良いと思います。走っていました。

ツールは効率化のためにあります

ツールを見つける目的は、作業をより速く、より効率的に完了する必要があるということです。その他のこと。このツールの目的は、具体的なものによって異なります。小説やブログを書く場合、tex Studio よりも Word または Web エディタの方が高速ですよね。組版に TEX を使用すると、WORD を使用するよりも高速になるため、このツールは相対的なものになります。便利なツールを使用した方がはるかに優れている場合もありますが、半分の労力で 2 倍の結果が得られるとは限りません。ツールではなくコンテンツに目標を集中させるべきです。

Windows に付属のペイントを使用してトリミングを完了できる場合、この単純なタスクを完了するために GIMP や Photoshop を実行する必要はありません。場合によっては、選択したツールよりも効率の重要性がはるかに役立つことがあります。学習の始まりは、世間から尊敬されているものを理解することです。

ツールについてよく知り、使いこなしてください

Windows は非常に強力ですが、ほとんどの人はそのほんの一部しか使用していません。ほんの一部というより、毎日使っていても何も新しいことは学べていない。これは私たちのツールと同じで、何かを書くためにのみ Word を使用する場合は、Abiword に置き換えることができます。しかし、私たちにとって強力なツールのほうが魅力的であるため、その可能性は明らかに低いでしょう。

手持ちのツールを購入する余裕がある場合は、そのツールで何ができるかをできるだけ詳しく学びましょう。たとえそれが、Emacs でコーヒーを作るなどの無関係な機能であってもです。マニュアルが手元にあり、すぐに参照できるのがベストですが、環境保護に関してはそうはいきません。ソフトウェアと同じタイミングでマニュアルを更新することはできません。電子版は、使用しているマニュアルよりも早く更新されます。

Linux には多数のコマンドがありますが、一般的に使用されるのはごく一部だけです。コマンドの 20% で作業の 80% を完了できます。 CISC や RISC と同様、頻繁に使用する命令は、あまり使用しない命令のことを忘れてしまいます。そして、それらは最も実用的なものであり、私たちが毎日の仕事で使用する Linux と同じで、非実用的なことをあまりにも多く暗記することは、メモに書き留めることと同じくらい実用的ではありません。どのような機能があり、どのように使用するかを理解する必要があるだけです。

言語もツールです

ますます多くのフレームワークや言語が登場し、ますます速く更新されています。特にこのように急速に発展している業界では、毎日新しい用語が登場しています。言語を選択するときと同じように、適切な言語を選択することは、快適な言語を選択することよりも重要な場合があります。ただし、これは継続的に覆される可能性があります。

私たちが Python、Ruby、PHP などを使用して Web サイトを構築することに慣れているのに、JavaScript が Web サイトのバックエンドとして使用されるのはなぜでしょうか。そこで Node.js が普及しました。ツールを選ぶこと自体も、可能性がどんどん広がっていくのでとても楽しいです。

昔は PHP が開発の主流でしたが、今もそうですが、PHP は WEB のために生まれました。ある日、Ruby on Rails が登場し、すべてが変わり、より効率的かつ強力になりました。 MVC は常に優れていますね。その結果、Django、Laravel など、ますます多くのフレームワークが登場しました。言語が異なればフレームワークも異なり、JavaScript にも AngularJS などの適切なフレームワークがあります。ほとんどの人にとって、新しいことを学ぶことは新たな挑戦であるため、異なる言語のユーザーは適切なツールを使用します。オブジェクト指向言語を学習する場合、手続き型スタイルでプログラムを作成するのは簡単です。

適切なツールがない場合は、作成するか、適切なツールを選択します。

概要

Django を学習していたとき、バックエンドがあることに慣れていたので、Laravel を使い始めたとき、Administrator を探しました。私は、コンパイルが必要な場合は IDE を使用し、不要な場合はエディターを使用することに慣れています。IDE が効率的であるという理由だけで、IDE を組み込むとさらに効率的になります。

以前 WebStorm を知らなかったときは、DW を使用して HTML をフォーマットし、Aptana を使用して JavaScript をフォーマットすることに慣れていました。

以前は、モバイルクライアントがあるため、WordPress を使用してブログを書くことに慣れていましたが、コンピューターを使用しているときにブラウザを開いて書くのが好きではありませんでした。

お待ちください

お待ちください

効率を向上させるツール

効率を提出する N 個の方法のうち、非常に重要な方法の 1 つは、ショートカット キーを使用することです。ショートカット キーを使いこなせると、自分の気分に従ってプログラムを書くことができます。気分が優れない場合は、今日はコーディングに適していないことを意味します。笑~~

異なるツールを完成させるために異なるオペレーティング システムを使用する可能性があるからです。まず、無制限の操作を備えたいくつかの一般的なツールについて説明します。

クイック スタート ソフトウェア

そのようなツールがなかったとき、私は常に下のタスクバーにアイコンを置きました:

Windows タスクバー

ある日まで、私はそのようなツールがあることを知りました。ここで、効率を向上させるための多くのツールについて言及している書籍『The Effects Programmer』について触れなければなりません。ショートカット キーを使用することもその 1 つであり、もう 1 つはクイック起動ソフトウェアを使用することです。そこで、Windows で Launcy を使用しました。

Launchy

このソフトウェアを介して、コンピューター上でソフトウェア名を入力し、関連するソフトウェアを実行できます。メニューをクリックして、メニューから開くソフトウェアを選択する必要はなくなりました。

IDE

前の記事では、IDE とエディターについて議論することは何もないと言いました。ただし、環境を最初から構築する場合は、IDE が最適です。エディターは、対応するプラグインもインストールする必要があります。これが、面接中にエディターを使用する理由です。

IDE の正式名称は、名前が示すように、使用する必要のあるいくつかのツールを統合した開発環境です。エディターの場合は、それを行うための適切なツールを自分で見つける必要があります。ただし、これはエディターを使用する際の自由度が高まることも意味します。独自の開発環境を構築する十分な時間がない場合は、IDE を使用してください。

一般に、次の要素が必要です:

• ショートカット キー
• Code HighLight
• オートコンプリート
• 構文チェック

エディタの場合は自分で探す必要があります 対応プラグインイン。

IDE は通常、特定の言語用に作成され、より適切に最適化されています。ただし、編集者自身がそれに合わせる必要があります。これは、複数の言語で作業する必要があり、あれこれやりたい場合は、エディタの使用を検討できることも意味します。

デバッグ ツール

一部の IDE には独自のデバッグ ツールが付属しており、IDE を使用する方が有利になる可能性があることに言及しなければなりません。単純なプロジェクトでは、このようなデバッグ ツールは必要ない場合があります。私たちはコードベースに精通しているため、単純な問題は一目で理解できます。複雑なプロジェクトの場合は、それほど単純ではない場合があります。特に、新しい大規模または中規模のプロジェクトでは、実装時に単純なロジックを一連の関数で処理する必要がある場合があります。

現時点ではデバッグ ツールが必要です。フロントエンド開発には Chrome の開発ツールを使用する場合があります。ただし、バックエンドには他のツールを使用する必要があります。以下の図に示すように、Intellij Idea のデバッグ インターフェイスは次のとおりです。

Intellij Idea Debug

デバッグ プロセス中、コードの実行プロセスに従って段階的に実行できます。これは、バグが発生したときに、より簡単にバグを発見できることも意味します。これがデバッグ ツールと呼ばれる理由です。

ターミナルまたはコマンド プロンプト

初めてコードを書き始めると、GUI を使用する習慣を断ち切るのが難しい場合があります。しかし、ターミナルの使用やターミナル ツールの使用に慣れてくると、これが別世界であることがわかるでしょう。 GUI アプリケーションと同じメニューについては、ターミナルに同じツールがあり、覚えておくべきコマンドが増えるだけです。さらに、ツールが異なれば、同じ実装でも仕様が異なる場合がありますが、GUI アプリケーションは一貫したスタイルを持ちます。ただし、一般的に、ターミナルを使用することは、速度と利便性の点で非常に有益な習慣です。言い忘れていましたが、Linux サーバーを使用する場合はターミナルを使用する必要があります。

Linux ターミナルのスクリーンショット

ターミナルを使用する利点は、マウスを取り除くことができることです。これにより、タスクの完了に集中しやすくなります。これらは、利便性と高速性の 2 つの異なるオプションです。これは事実ですが、同時に Linux の学習がますます容易になることを意味します。

Linux と Windows の学習曲線

これらは Linux と Windows の 2 つの異なる比較ですが、ターミナル ツールの点で 2 つのシステム間のギャップは非常に大きいです。 Linux 独自の哲学では、コマンド ラインを使用してタスクを完了することが奨励されています。これは、Linux 上でコマンド ラインから使用できるツールが増えることも意味します。 Windows 上でも (たとえば CygWin を使用して) 実行できますが、それほど満足のいくものではありません。

パッケージ管理

パッケージ管理はオペレーティング システム内にだけ存在するわけではなく、言語パッケージ管理ツールもあります。オペレーティング システムにソフトウェアをインストールする場合、最も便利なのはパッケージ管理です。 OpenSUSE 公式 Web サイトから引用した説明と写真:

パッケージ管理

Linux ディストリビューションは、パッケージの形式のアプリケーションの束と、これらのアプリケーションを全体として管理するためのツールにすぎません。通常、OpenSUSE を含むこれらの Linux ディストリビューションは、数千の異なるソフトウェア パッケージで構成されています。

• ソフトウェア パッケージ: ソフトウェア パッケージは単なるファイルではなく、プログラム自体、共有ライブラリ、開発パッケージ、使用説明書など、ソフトウェアを構成するすべてのファイルが含まれています。 。

• メタデータはソフトウェア パッケージに含まれており、ソフトウェアの通常の動作に必要な情報が含まれています。ソフトウェア パッケージがインストールされると、そのメタデータはパッケージを取得できるようにローカル パッケージ データベースに保存されます。

• 依存関係はソフトウェア パッケージ管理の重要な側面です。実際、すべてのソフトウェア パッケージには他のソフトウェア パッケージが含まれており、ソフトウェア パッケージ内のプログラムの実行には実行可能環境が必要です (他のプログラム、ライブラリなどが必要です)。この関係を説明するには、ソフトウェア パッケージの依存関係が使用されます。

私たちは日常の使用を高速化するために、さまざまなパッケージ管理ツールをよく使用します。 Google で特定のソフトウェアを検索し、ダウンロードしてインストールするのではなく。

環境セットアップ

最近のツールは Mac OS X 上にあるため、最初に Mac OS X を例として説明します。

OS X

Homebrew

パッケージ管理ツール。正式には OS X の不足しているパッケージ マネージャーと呼ばれます。

Homebrew Cask

brew-cask を使用すると、コマンド ラインを使用して OS X アプリをインストールできます。

iTerm2

iTerm2 は、最も一般的に使用されるターミナル アプリケーションであり、ターミナル アプリケーションの代替品です。

Zsh

Zsh は、対話型ターミナルまたはスクリプト インタプリタとして使用できる強力なターミナル (シェル) ソフトウェアです。 Bash と互換性があります (sh をエミュレートするように設定されていない限り、デフォルトでは互換性がありません) が、次のような多くの改善も提供されています。

• より効率的
• より良いオートコンプリート
• ファイル名拡張 (ワイルドカード拡張) の改善
• 配列処理の改善
• 高度にカスタマイズ可能

Oh My Zsh

Oh My Zsh は、コマンド ライン操作を簡素化するためのプラグインとツールのセットも提供します。

Sublime Text 2

強力なファイルエディター。

MacDown

MacDown は Markdown エディタです。

CheatSheet

CheatSheet は、現在のプログラムのショートカット キーのリストを表示できます。デフォルトのショートカット キーは ⌘ を長押しします。

SourceTree

SourceTree は、Atlassian によって作成された優れた Git グラフィカル クライアントです。

Alfred

マウスとキーボードを必要としない Mac ユーザーにとって必須のツールです。多数のワークフローを使用すると、操作を大幅に軽減できます。慣れたら時間。

始めるのは簡単ですが、後の段階でワークフローをカスタマイズするためにトレーニング費用がかかります。ただし、Lei Feng ユーザーによって提供される既製の拡張機能が多数あります。好きなものを選択すれば、自分のニーズに合わせて簡単に変更できます。

Vimium

Vimium は、純粋なキーボードで Chrome を操作できるようにする Google Chrome 拡張機能です。

関連資料:

• Mac web developer apps
• 强迫症的 Mac 设置指南

Windows

Chocolatey

Chocolatey 是一个软件包管理工具，类似于 Ubuntu 下面的 apt-get,不过是运行在 Windows 环境下面。

Wox

Wox 是一个高效的快速启动器工具，通过快捷键呼出，然后输入关键字来搜索程序进行快速启动，或者搜索本地硬盘的文件，打开百度、Google 进行搜索，甚至是通过一些插件的功能实现单词翻译、关闭屏幕、查询剪贴板历史、查询编程文档、查询天气等更多功能。它最大的特点是可以支持中文拼音的模糊匹配。

PowerShell

Windows PowerShell 是微软公司为 Windows 环境所开发的壳程序（shell）及脚本语言技术，采用的是命令行界面。这项全新的技术提供了丰富的控制与自动化的系统管理能力。

cmder

cmder 把 conemu，msysgit 和 clink 打包在一起，让你无需配置就能使用一个真正干净的 Linux 终端！她甚至还附带了漂亮的 monokai 配色主题。

Total Commander

Total Commander 是一款应用于 Windows 平台的文件管理器 ，它包含两个并排的窗口，这种设计可以让用户方便地对不同位置的“文件或文件夹”进行操作，例如复制、移动、删除、比较等，相对 Windows 资源管理器而言方便很多，极大地提高了文件操作的效率，被广大软件爱好者亲切地简称为：TC 。

GNU/Linux

Zsh

Zsh 是一款功能强大终端（shell）软件，既可以作为一个交互式终端，也可以作为一个脚本解释器。它在兼容 Bash 的同时 (默认不兼容，除非设置成 emulate sh) 还有提供了很多改进，例如：

• 更高效
• 更好的自动补全
• 更好的文件名展开（通配符展开）
• 更好的数组处理
• 可定制性高

Oh My Zsh

Oh My Zsh 同时提供一套插件和工具，可以简化命令行操作。

ReText

ReText 是一个使用 Markdown 语法和 reStructuredText (reST) 结构的文本编辑器，编辑的内容支持导出到 PDF、ODT 和 HTML 以及纯文本，支持即时预览、网页生成以及 HTML 语法高亮、全屏模式，可导出文件到 Google Docs 等。

Launchy

Launchy 是一款免费开源的协助您摒弃 Windows “运行”的 Dock 式替代工具，既方便又实用，自带多款皮肤，作为美化工具也未尝不可。

环境搭建完毕！现在，就让我们来看看如何学好一门语言！

学好一门语言的艺术

一次语言学习体验

在我们开始学习一门语言或者技术的时候，我们可能会从一门 hello,world 开始。

好了，现在我是 Scala 语言的初学者，接着我用搜索引擎去搜索『Scala』来看看『Scala』是什么鬼：

Scala 是一门类 Java 的编程语言，它结合了面向对象编程和函数式编程。

接着又开始看『Scala ‘hello,world’』，然后找到了这样的一个示例：

object HelloWorld {  def main(args: Array[String]): Unit = {    println("Hello, world!")  }}

GET 到了5%的知识。

看上去这门语言相比于 Java 语言来说还行。然后我找到了一本名为『Scala 指南』的电子书，有这样的一本目录：

• 表达式和值
• 函数是一等公民
• 借贷模式
• 按名称传递参数
• 定义类
• 鸭子类型
• 柯里化
• 范型
• Traits
• …

看上去还行， 又 GET 到了5%的知识点。接着，依照上面的代码和搭建指南在自己的电脑上安装了 Scala 的环境：

brew install scala

Windows 用户可以用:

choco install scala

然后开始写一个又一个的 Demo，感觉自己 GET 到了很多特别的知识点。

到了第二天忘了！

Bro Wrong

接着，你又重新把昨天的知识过了一遍，还是没有多大的作用。突然间，你听到别人在讨论什么是 这个世界上最好的语言 ——你开始加入讨论了。

于是，你说出了 Scala 这门语言可以：

• 支持高阶函数。lambda，闭包…
• 支持偏函数。 match..
• mixin，依赖注入..
• 等等

虽然隔壁的 Python 小哥赢得了这次辩论，然而你发现你又回想起了 Scala 的很多特性。

最流行的语言

你发现隔壁的 Python 小哥之所以赢得了这场辩论是因为他把 Python 语言用到了各个地方——机器学习、人工智能、硬件、Web开发、移动应用等。而你还没有用 Scala 写过一个真正的应用。

让我想想我来能做什么？我有一个博客。对，我有一个博客，我可以用 Scala 把我的博客重写一遍：

1. 先找一 Scala 的 Web 框架，Play 看上去很不错，就这个了。这是一个 MVC 框架，原来用的 Express 也是一个 MVC 框架。Router 写这里，Controller 类似这个，就是这样的。
2. 既然已经有 PyJS，也会有 Scala-js，前端就用这个了。

好了，博客重写了一遍了。

感觉还挺不错的，我决定向隔壁的 Java 小弟推销这门语言，以解救他于火海之中。

『让我想想我有什么杀手锏？』

『这里的知识好像还缺了一点，这个是什么？』

好了，你已经 GET 到了90%了。如下图所示：

Learn

希望你能从这张图上 GET 到很多点。

输出是最好的输入

上面那张图『学习金字塔』就是在说明——输出是最好的输入。

如果你不试着去写点博客、整理资料、准备分享，那么你可能并没有意识到你缺少了多少东西。虽然你已经有了很多的实践，然并卵。

因为你一直在完成功能、完成工作，你总会有意、无意地漏掉一些知识，而你也没有意识到这些知识的重要性。

Output is Input

从我有限的（500+）博客写作经验里，我发现多数时候我需要更多地的参考资料才能更好也向人们展示这个过程。为了输出我们需要更多的输入，进而加速这个过程。

而如果是写书的时候则是一个更高水平的学习，你需要发现别人在他们的书中欠缺的一些知识点。并且你还要展示一些在别的书中没有，而这本书会展现这个点的知识，这意味着你需要挖掘得更深。

所以，如果下次有人问你如何学一门新语言、技术，那么答案就是写一本书。

如何应用一门新的技术

对于多数人来说，写书不是一件容易的事，而应用新的技术则是一件迫在眉睫的事。

通常来说，技术出自于对现有的技术的改进。这就意味着，在掌握现有技术的情况下，我们只需要做一些小小的改动就更可以实现技术升级。

而学习一门新的技术的最好实践就是用这门技术对现有的系统行重写。

第一个系统(v1)： Spring MVC + Bootstrap + jQuery

那么在那个合适的年代里， 我们需要单页面应用，就使用了Backbone。然后，我们就可以用 Mustache + HTML 来替换掉 JSP。

第二个系统(v2)： Spring MVC + Backbone + Mustache

在这时我们已经实现了前后端分离了，这时候系统实现上变成了这样。

第二个系统(v2.2)： RESTful Services + Backbone + Mustache

或者

第二个系统(v2.2)： RESTful Services + AngularJS 1.x

Spring 只是一个 RESTful 服务，我们还需要一些问题，比如 DOM 的渲染速度太慢了。

第三个系统(v3)： RESTful Services + React

系统就是这样一步步演进过来的。

尽管在最后系统的架构已经不是当初的架构，而系统本身的业务逻辑变化并没有发生太大的变化。

特别是对于如博客这一类的系统来说，他的一些技术实现已经趋于稳定，而且是你经常使用的东西。所以，下次试试用新的技术的时候，可以先从对你的博客的重写开始。

Web 编程基础

从浏览器到服务器

如果你的操作系统带有 cURL 这个软件(在 GNU/Linux、Mac OS 都自带这个工具，Windows 用户可以从 http://curl.haxx.se/download.html 下载到)，那么我们可以直接用下面的命令来看这看这个过程(-v 参数可以显示一次 http 通信的整个过程)：

curl -v https://www.phodal.com

我们就会看到下面的响应过程:

* Rebuilt URL to: https://www.phodal.com/*   Trying 54.69.23.11...* Connected to www.phodal.com (54.69.23.11) port 443 (#0)* TLS 1.2 connection using TLS_ECDHE_RSA_WITH_AES_256_CBC_SHA384* Server certificate: www.phodal.com* Server certificate: COMODO RSA Domain Validation Secure Server CA* Server certificate: COMODO RSA Certification Authority* Server certificate: AddTrust External CA Root> GET / HTTP/1.1> Host: www.phodal.com> User-Agent: curl/7.43.0> Accept: */*>< HTTP/1.1 403 Forbidden< Server: phodal/0.19.4< Date: Tue, 13 Oct 2015 05:32:13 GMT< Content-Type: text/html; charset=utf-8< Content-Length: 170< Connection: keep-alive<<html><head><title>403 Forbidden</title></head><body bgcolor="white"><center><h1>403 Forbidden</h1></center><hr><center>phodal/0.19.4</center></body></html>* Connection #0 to host www.phodal.com left intact

我们尝试用 cURL 去访问我的网站，会根据访问的域名找出其 IP，通常这个映射关系是来源于 ISP 缓存 DNS（英语：Domain Name System）服务器[^DNSServer]。

以“*”开始的前8行是一些连接相关的信息，称为 响应首部 。我们向域名 https://www.phodal.com/ 发出了请求，接着DNS服务器告诉了我们网站服务器的IP，即54.69.23.11。出于安全考虑，在这里我们的示例，我们是以 HTTPS 协议为例，所以在这里连接的端口是 443。因为使用的是HTTPS协议，所以在这里会试图去获取服务器证书，接着获取到了域名相关的证书信息。

随后以“>”开始的内容，便是向Web服务器发送请求。Host即是我们要访问的主机的域名，GET / 则代表着我们要访问的是根目录，如果我们要访问 https://www.phodal.com/about/ 页面在这里，便是 GET 资源文件 /about。紧随其后的是 HTTP 的版本号（HTTP/1.1）。User-Agent 通过指向的是使用者行为的软件，通常会加上硬件平台、系统软件、应用软件和用户个人偏好等等的一些信息。Accept 则指的是告知服务器发送何种媒体类型。

这个过程，大致如下图所示：

DNS 到服务器的过程

在图中，我们会发现解析 DNS 的时候，我们需要先本地 DNS 服务器查询。如果没有的话，再向根域名服务器查询——这个域名由哪个服务器来解析。直至最后拿到真正的服务器IP才能获取页面。

当我们拿到相应的 HTML、JS、CSS 后，我们就开始渲染这个页面了。

HTTP 协议

说到这里，我们不得不说说 HTTP 协议——超文本传输协议。它也是一个基于文本的传输协议，这就是为什么你在上面看到的都是文本的传输过程。

从 HTML 到页面显示

而浏览器接收到文本的时候，就要开始着手将 HTML 变成屏幕。下图是 Chrome 渲染页面的一个时间线：

Chrome 渲染的 Timeline

及其整个渲染过程如下图所示：

Render HTML

（PS: 需要注意的是这里用的是 WebKit 内核的渲染过程，即 Chrome 和 Safari 等浏览器所使用的内核。）

从上面的两图可以看出来第一步都 Parser HTML，而 Paser HTML 实质上就是将其将解析为 DOM Tree。与此同时，CSS 解析器会解析 CSS 会产生 CSS 规则树。

随后会根据生成的 DOM 树和 CSS 规则树来构建 Render Tree，接着生成 Render Tree的布局，最后就是绘制出 Render Tree。

详细的内容还得参见相关的书籍~~。

相关内容：

• 《 How browsers work 》

HTML

让我们先从身边的语言下手，也就是现在无处不在的 HTML+Javascript+CSS。

之所以从 HTML 开始，是因为我们不需要配置一个复杂的开发环境，也许你还不知道开发环境是什么东西，不过这也没关系，毕竟这些知识需要慢慢的接触才能有所了解，尤其是对于普通的业余爱好者来说，当然，对于专业选手言自然不是问题。HTML 是 Web 的核心语言，也算是比较基础的语言。

hello,world

hello,world 是一个传统，所以在这里也遵循这个有趣的传统，我们所要做的事情其实很简单，虽然也有一点点 hack 的感觉。——让我们先来新建一个文并命名为“helloworld.html”。

(PS:大部分人应该都是在 Windows 环境下工作的，所以你需要新建一个文本，然后重命名，或者你需要一个编辑器，在这里我们推荐用 Sublime Text 。破解不破解，注册不注册都不会对你的使用有太多的影响。)

1. 新建文件

2. 输入

   hello,world

3. 保存为->“helloworld.html”，

4. 双击打开这个文件。 正常情况下都应该是用你的默认浏览器打开。只要是一个正常工作的现代浏览器，都应该可以看到上面显示的是“Hello,world”。

这才是最短的 hello,world 程序，但是呢？在 Ruby 中会是这样子的

2.0.0-p353 :001 > p "hello,world""hello,world"    => "hello,world"2.0.0-p353 :002 >

等等，如果你了解过 HTML 的话，会觉得这一点都不符合语法规则，但是他工作了，没有什么比安装完 Nginx 后看到 It works! 更让人激动了。

遗憾的是，它可能无法在所有的浏览器上工作，所以我们需要去调试其中的 bug。

调试 hello,world

我们会发现我们的代码在浏览器中变成了下面的代码，如果你和我一样用的是 Chrome，那么你可以右键浏览器中的空白区域，点击审查元素，就会看到下面的代码。

<html>    <head></head>    <body>hello,world</body></html>

这个才是真正能在大部分浏览器上工作的代码，所以复制它到编辑器里吧。

说说 hello,world

我很不喜欢其中的f9905dec65b53e7277c4d818a36cc3f577175ce147e75e963d33b93aa0a49f93，但是我也没有找到别的方法来代替它们，所以这是一个设计得当的语言。甚至大部分人都说这算不上是一门真正的语言，不过 HTML 的原义是

超文本标记语言

所以我们可以发现其中的关键词是标记——markup，也就是说 HTML 是一个 markup，head 是一个 markup，body 也是一个 markup。

然而，我们真正工作的代码是在 body 里面，至于为什么是在这里面，这个问题就太复杂了。打个比方来说：

1. 我们所使用的汉语是人类用智慧创造的，我们所正在学的这门语言同样也是人类创造的。

2. 我们在自己的语言里遵循着 桌子是桌子，凳子是凳子 的原则，很少有人会问为什么。

中文？

所以我们也可以把计算机语言与现实世界里用于交流沟通的语言划上一个等号。而我们所要学习的语言，并不是我们最熟悉的汉语语言，所以我们便觉得这些很复杂，但是如果我们试着用汉语替换掉上面的代码的话

<语言>    <头><结束头>    <身体>你好，世界<结束身体><结束语言>

这看上去很奇怪，只是因为是直译过去的原因，也许你会觉得这样会好理解一点，但是输入上可就一点儿也不方便，因为这键盘本身就不适合我们去输入汉字，同时也意味着可能你输入的会有问题。

让我们把上面的代码代替掉原来的代码然后保存，打开浏览器会看到下面的结果

<语言> <头><结束头> <身体>你好，世界<结束身体> <结束语言>

更不幸的结果可能是

<璇█> <澶�><缁撴潫澶�> <韬綋>浣犲ソ锛屼笘鐣�<缁撴潫韬綋> <缁撴潫璇█>

这是一个编码问题，对中文支持不友好。

我们把上面的代码改为和标记语言一样的结构

<语言>    <头></头>    <身体>你好，世界</身体><结束语言>

于是我们看到的结果便是

<语言> <头> <身体>你好，世界

被 Chrome 浏览器解析成什么样了？

<html><head></head><body><语言>        <头><!--头-->        <身体>你好，世界<!--身体-->    <!--语言--></body></html>      

以

结尾的是注释，写给人看的代码，不是给机器看的，所以机器不会去理解这些代码。

但是当我们把代码改成

<whatwewanttosay>你好世界</whatwewanttosay>

浏览器上面显示的内容就变成了

你好世界

或许你会觉得很神奇，但是这一点儿也不神奇，虽然我们的中文语法也遵循着标记语言的标准，但是我们的浏览器不支持中文标记。

结论:

1. 浏览器对中文支持不友好。
2. 浏览器对英文支持友好。

刚开始的时候不要对中文编程有太多的想法，这是很不现实的:

1. 现有的系统都是基于英语语言环境构建的，对中文支持不是很友好。
2. 中文输入的速度在某种程度上来说没有英语快。

我们离开话题已经很远了，但是这里说的都是针对于那些不满于英语的人来说的，只有当我们可以从头构建一个中文系统的时候才是可行的，而这些就要将 CPU、软件、硬件都包含在内，甚至我们还需要考虑重新设计 CPU 的结构，在某种程度上来说会有些不现实。或许，需要一代又一代人的努力。忘记那些吧，师夷之长技以制夷。

其他 HTML 标记

添加一个标题，

<html>    <head>        <title>标题</title>    </head>    <body>hello,world</body></html>

我们便可以在浏览器的最上方看到“标题”二字，就像我们常用的淘宝网，也包含了上面的东西，只是还包括了更多的东西，所以你也可以看懂那些我们可以看到的淘宝的标题。

<html><head>    <title>标题</title></head><body>hello,world<h1>大标题</h1><h2>次标题</h2><h3>...</h3><ul>    <li>列表1</li>    <li>列表2</li></ul></body></html>

更多的东西可以在一些书籍上看到，这边所要说的只是一次简单的语言入门，其他的东西都和这些类似。

小结

美妙之处

我们简单地上手了一门不算是语言的语言，浏览器简化了这其中的大部分过程，虽然没有 C 和其他语言来得有专业感，但是我们试着去开始写代码了。我们可能在未来的某一篇中可能会看到类似的语言，诸如 Python，我们所要做的就是

$ python file.py=>hello,world

然后在终端上返回结果。只是因为在我看来学会 HTML 是有意义的，简单的上手，然后再慢慢地深入，如果一开始我们就去理解指针，开始去理解类。我们甚至还知道程序是怎么编译运行的时候，在这个过程中又发生了什么。虽然现在我们也没能理解这其中发生了什么，但是至少展示了

1. 中文编程语言在当前意义不大，不现实，效率不高兼容性差
2. 语言的语法是固定的。（ps:虽然我们也可以进行扩充，我们将会在后来支持上述的中文标记。）
3. 已经开始写代码，而不是还在配置开发环境。
4. 随身的工具才是最好的，最常用的 code 也才是实在的。

更多

我们还没有试着去解决“某商店里的糖一颗5块钱，小明买了3颗糖，小明一共花了多少钱”的问题。也就是说我们学会的是一个还不能解决实际问题的语言，于是我们还需要学点东西，比如 JavaScript, CSS。我们可以将 JavaScript 理解为解决问题的语言，HTML则是前端显示，CSS 是配置文件，这样的话，我们会在那之后学会成为一个近乎专业的程序员。我们刚刚学习了一下怎么在前端显示那些代码的行为，于是我们还需要 JavaScript。

CSS

如果说 HTML 是建筑的框架，CSS 就是房子的装修。那么 JavaScript 呢，我听到的最有趣的说法是小三——还是先让我们回到代码上来吧。

下面就是我们之前说到的代码，CSS 将 Red 三个字母变成了红色。

<!DOCTYPE html><html><head></head><body>    <p id="para" style="color:red">Red</p></body>    <script type="text/javascript" src="app.js"></script></html>

只是，

var para=document.getElementById("para");para.style.color="blue";

将字体变成了蓝色，CSS+HTML 让页面有序的工作着，但是 JavaScript 却打乱了这些秩序，有着唯恐世界不乱的精彩，也难怪被冠以小三之名了——或许终于可以理解，为什么以前人们对于 JavaScript 没有好感了——不过这里要讲的是正室，也就是 CSS，这时还没有 JavaScript。

Red Fonts

简介

这不是一篇专业讲述 CSS 的书籍，所以我不会去说 CSS 是怎么来的，有些东西我们既然可以很容易从其他地方知道，也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码，不过有些重复是不可少的，也是有必要的，而通常这些东西可能是由其他地方复制过来的。

到目前为止我们没有依赖于任何特殊的硬件或者是软件，对于我们来说我们最基本的需求就是一台电脑，或者可以是你的平板电脑，当然也可以是你的智能手机，因为他们都有个浏览器，而这些都是能用的，对于我们的 CSS 来说也不会有例外的。

CSS(Cascading Style Sheets)，到今天我也没有记得他的全称，CSS 还有一个中文名字是层叠式样式表，事实上翻译成什么可能并不是我们关心的内容，我们需要关心的是他能做些什么。作为三剑客之一，它的主要目的在于可以让我们方便灵活地去控制 Web 页面的外观表现。我们可以用它做出像淘宝一样复杂的界面，也可以像我们的书本一样简单，不过如果要和我们书本一样简单的话，可能不需要用到 CSS。HTML 一开始就是依照报纸的格式而设计的，我们还可以继续用上面说到的编辑器，又或者是其他的。如果你喜欢 DreamWeaver 那也不错，不过一开始使用 IDE 可无助于我们写出良好的代码。

忘说了，CSS 也是有版本的，和 Windows，Linux 内核等等一样，但是更新可能没有那么频繁，HTML 也是有版本的，JS 也是有版本的，复杂的东西不是当前考虑的内容。

代码结构

对于我们的上面的 Red 示例来说，如果没有一个好的结构，那么以后可能就是这样子。

<!DOCTYPE html><html><head></head><body>    <p style="font-size: 22px;color:#f00;text-align: center;padding-left: 20px;">如果没有一个好的结构</p>    <p style=" font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;">那么以后可能就是这样子。。。。</p></body></html>

虽然我们看到的还是一样的:

No Style

于是我们就按各种书上的建议重新写了上面的代码

<!DOCTYPE html><html><head>    <title>CSS example</title>    <style type="text/css">        .para{            font-size: 22px;            color:#f00;            text-align: center;            padding-left: 20px;        }        .para2{            font-size:44px;            color:#3ed;            text-indent: 2em;            padding-left: 2em;        }    </style></head><body>    <p class="para">如果没有一个好的结构</p>    <p class="para2">那么以后可能就是这样子。。。。</p></body></html>

总算比上面好看也好理解多了，这只是临时的用法，当文件太大的时候，正式一点的写法应该如下所示:

<!DOCTYPE html><html><head>    <title>CSS example</title>    <style type="text/css" href="style.css"></style></head><body>    <p class="para">如果没有一个好的结构</p>    <p class="para2">那么以后可能就是这样子。。。。</p></body></html>

我们需要

<!DOCTYPE html><html><head>    <title>CSS example</title>    <link href="./style.css" rel="stylesheet" type="text/css" /></head><body>    <p class="para">如果没有一个好的结构</p>    <p class="para2">那么以后可能就是这样子。。。。</p></body></html>

然后我们有一个像 app.js 一样的 style.css 放在同目录下，而他的内容便是

.para{    font-size: 22px;    color:#f00;    text-align: center;    padding-left: 20px;}.para2{    font-size:44px;    color:#3ed;    text-indent: 2em;    padding-left: 2em;}

这代码和 JS 的代码有如此多的相似

var para={    font_size:'22px',    color:'#f00',    text_align:'center',    padding_left:'20px',}

而22px、20px以及#f00都是数值，因此：

var para={    font_size:22px,    color:#f00,    text_align:center,    padding_left:20px,}

目测差距已经尽可能的小了，至于这些话题会在以后讨论到，如果要让我们的编译器更正确的工作，那么我们就需要非常多这样的符号，除非你乐意去理解:

(dotimes (i 4) (print i))

总的来说我们减少了符号的使用，但是用 lisp 便带入了更多的括号，不过这是一种简洁的表达方式，也许我们可以在其他语言中看到。

\d{2}/[A-Z][a-z][a-z]/\d{4}

上面的代码，是为了从一堆数据中找出“某日/某月/某年”。如果一开始不理解那是正则表达式，就会觉得那个很复杂。

这门语言可能是为设计师而设计的，但是设计师大部分还是不懂编程的，不过相对来说这门语言还是比其他语言简单易懂一些。

样式与目标

如下所示，就是我们的样式

.para{    font-size: 22px;    color:#f00;    text-align: center;    padding-left: 20px;}

我们的目标就是

如果没有一个好的结构

所以样式和目标在这里牵手了，问题是他们是如何在一起的呢？下面就是 CSS 与 HTML 沟通的重点所在了:

选择器

我们用到的选择器叫做类选择器，也就是 class，或者说应该称之为 class 选择器更合适。与类选择器最常一起出现的是 ID 选择器，不过这个适用于比较高级的场合，诸如用 JS 控制 DOM 的时候就需要用到 ID 选择器。而基本的选择器就是如下面的例子:

p.para{    color:#f0f;}

将代码添加到 style.css 的最下面会发现“如果没有一个好的结构”变成了粉红色，当然我们还会有这样的写法

p>.para{    color:#f0f;}

为了产生上面的特殊的样式，虽然不好看，但是我们终于理解什么叫层叠样式了，下面的代码的重要度比上面高，也因此有更高的优先规则。

而通常我们可以通过一个

p{    text-align:left;}

这样的元素选择器来给予所有的 p 元素一个左对齐。

还有复杂一点的复合型选择器，下面的是 HTML 文件

<!DOCTYPE html><html><head>    <title>CSS example</title>    <link href="./style.css" rel="stylesheet" type="text/css" /></head><body>    <p class="para">如果没有一个好的结构</p>    <div id="content">        <p class="para2">那么以后可能就是这样子。。。。</p>    </div></body></html>

还有 CSS 文件

.para{    font-size: 22px;    color:#f00;    text-align: center;    padding-left: 20px;}.para2{    font-size:44px;    color:#3ed;    text-indent: 2em;    padding-left: 2em;}p.para{    color:#f0f;}div#content p {    font-size:22px;}

更有趣的 CSS

一个包含了 para2 以及 para_bg 的例子

    <div id="content">        <p class="para2 para_bg">那么以后可能就是这样子。。。。</p>    </div>

我们只是添加了一个黑色的背景

.para_bg{    background-color:#000;}

重新改变后的网页变得比原来有趣了很多，所谓的继承与合并就是上面的例子。

我们还可以用 CSS3 做出更多有趣的效果，而这些并不在我们的讨论范围里面，因为我们讨论的是 be a geek。

或许我们写的代码都是那么的简单，从 HTML 到 JavaScript，还有现在的 CSS，只是总有一些核心的东西，而不是去考虑那些基础语法，基础的东西我们可以在实践的过程中一一发现。但是我们可能发现不了，或者在平时的使用中考虑不到一些有趣的用法或者说特殊的用法，这时候可以通过观察一些精致设计的代码中学习到。复杂的东西可以变得很简单，简单的东西也可以变得很复杂。

JavaScript

JavaScript 现在已经无处不在了，也许你正打开的某个网站，他便可能是 node.js+json+javascript+mustache.js 完成的，虽然你还没理解上面那些是什么，也正是因为你不理解才需要去学习更多的东西。但是你只要知道 JavaScript 已经无处不在了，它可能就在你手机上的某个 app 里，就在你浏览的网页里，就运行在你 IDE 中的某个进程里。

hello,world

这里我们还需要有一个 helloworld.html，JavaScript 是专为网页交互而设计的脚本语言，所以我们一点点来开始这部分的旅途，先写一个符合标准的 helloworld.html

<!DOCTYPE html><html>    <head></head>    <body></body></html>

然后开始融入我们的 JavaScript，向 HTML 中插入JavaScript 的方法，就需要用到 HTML 中的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签，我们先用页面嵌入的方法来写 helloworld。

<!DOCTYPE html><html>    <head>        <script>            document.write('hello,world');        </script> </head>    <body></body></html>

按照标准的写法，我们还需要声明这个脚本的类型

<!DOCTYPE html><html>    <head>        <script type="text/javascript">            document.write('hello,world');        </script> </head>    <body></body></html>

没有显示 hello,world ?试试下面的代码

<!DOCTYPE html><html>    <head>        <script type="text/javascript">            document.write('hello,world');        </script> </head>    <body>        <noscript>            disable Javascript        </noscript> </body></html>

Ja