バニラコードの6週間前

2022年1月17日から始まるバニラコードPrepレッスンを記録.
今週,並べ替えアルゴリズムを理解し,データ並べ替えの過程をレビューするプロジェクトを行った.論理を実現するのは難しくありませんが、与えられたソースコードを分析し、私が書いたコードに関連付ける作業は想像以上に難しいです.😓
今回の課題と同様に,開発者として作業を開始すれば,同僚が作成したコードを分析するプロセスの継続になると考えられる.指導者も開発者の60%が他人のコードを読むことだと話しています.それをしっかり覚えて、他人のコードを簡単に読めるように練習を続けましょう.

また、カスタムスタイルを試してみることもできます.CSSを使うのは久しぶりでしたが、最初に想定していた通り画面が実現していて満足です😇
改善点

の多くの極端なケースを思い出し、テストするために努力する必要があります.→データに少数や負数、10億桁が含まれていると仮定すれば、より完璧なプログラムを作成することができます.

👍

データのサイズはスクリーン要因の影響を受けないため、その設計は非常に賢い.

各関数の役割をよく区別し、アニメーションに

ロジックを追加しました.

簡潔なコードを追求する

後知の明
innerHTML vs innerText vs textContent

<div>
	<p>나무늘보</p>
	<span style="display: none">바보</span>
</div>

innerHTMLは、要素に含まれるHTMLまたはXMLを取得または設定できます.

var div = document.querySelector('div');

console.log(div.innerHTML);
/*
<p>나무늘보</p>
<span style="display: none">바보</span>
*/

innerText実際に画面に表示されたテキストを要素から読み出す.

console.log(div.innerText); // 나무늘보

textContentは、ノードが所有するテキストを直接読み込みます.

console.log(div.textContent);
/*
나무늘보
바보
*/

CSS Property宣言順序
タイプ別にグループ化するのが一番人気があります.

Layout : position , float , clear , display

Box model : width , height , margin , padding

Visual : color , background , border , box-shadow

Typography : font , text

その他:cursor、overflow、z-index

LESSとSASS
追加構文のスタイルシート言語を提供し、CSSをより簡単に作成できます.

LESSはJavaScript、SASSはRubyに基づく.

LESSは、変換することなくWebブラウザで使用できます.

変数宣言

@nice-blue: #5B83AD; // LESS는 접두어 @, SASS는 접두어 $
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

四則演算と関数

#header { color : lighten(blue, 10%) }

選択者継承(SASS)

.error {
    border : 1px solid red;
    background-color : #fdd;
}
.seriousError {
    @extend .error;
    border-width : 3px;
}

オーバーラップ規則

選択者を重ねることで重複を解消できます.

SASSでは、CSS属性名を重ねてもよい.

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

制御文(SASS)

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

実行

JavaScript(LESS)

javascriptコードを実行し、欠落した値を変数として使用できます.

@hi : `"hello".toUpperCase() + "!"`;

Reference

Element.innerHTML by MDN

HTMLElement.innerText by MDN

Node.textContent by MDN

CSSを書くより便利な方法:コードを書くLESSとSASS

Google HTML/CSS Style Guide by Google

Poll Results: How do you order your CSS properties? by Chris Coyier