├── Books ├── CSS_The_Definitive_Guide.md ├── DOM_Scripting.md ├── Eloquent_Javascript.md ├── Professional_Javascript_for_Web_Developers.md └── 自控力.md ├── Courses ├── CMU_15213_Introduction_to_Computer_Systems │ └── Summary.md ├── Cornell_CS2043_Unix_Tools_And_Scripting │ └── Summary.md ├── Princeton_Algorithms │ └── Summary.md ├── UCBerkeley_CS61B_Data_Structures │ └── Summary.md ├── Udemy_Ultimate_AWS_Certified_Solutions_Architect_Associate_2021 │ └── Summary.md ├── Unimelb_COMP20008_Elements_of_Data_Processing │ ├── Exam_checklist.pdf │ ├── Image │ │ ├── Approx_similarity.png │ │ ├── JSON_syntax.png │ │ ├── add_random_noise.png │ │ ├── bloom_filter_similarity.png │ │ ├── differential_privacy.png │ │ ├── html.png │ │ ├── privact_loss_budget_1.png │ │ └── promise_differential_privacy.png │ └── Summary.md ├── Unimelb_COMP30023_Computer_Systems │ ├── Image │ │ ├── Analogy.png │ │ ├── CBC.png │ │ ├── Cookie_example.png │ │ ├── EBC.png │ │ ├── Git.png │ │ ├── HTTP_Request.png │ │ ├── HTTP_Response.png │ │ ├── Hierarchy_of_DNS_server.png │ │ ├── Mail_msg_format.png │ │ ├── NAT.png │ │ ├── TCP_exercise.png │ │ ├── TLS_handshake.png │ │ ├── Transport_layer.png │ │ ├── UDP_checksum_example1.png │ │ ├── UDP_checksum_example2.png │ │ ├── UDP_checksum_example3.png │ │ ├── UDP_segment_structure.png │ │ ├── URL_example.png │ │ ├── congestion_avoidance.png │ │ ├── fast_recovery.png │ │ ├── fast_retransmission.png │ │ ├── rdt1.0_pic1.png │ │ ├── rdt1.0_pic2.png │ │ ├── rdt2.0_pic1.png │ │ ├── rdt2.0_pic2.png │ │ ├── rdt2.1_pic1.png │ │ ├── rdt2.1_pic2.png │ │ ├── rdt2.2_pic1.png │ │ ├── rdt2.2_pic2.png │ │ ├── rdt3.0_pic1.png │ │ ├── rdt3.0_pic2.png │ │ ├── rdt3.0_pic3.png │ │ ├── rwnd_demo.png │ │ ├── tcp_structure.png │ │ ├── telnet_example.png │ │ └── three_way_handshake.png │ ├── Summary.md │ └── placeholder.html └── Unimelb_INFO30005_Web_Information_Technologies │ ├── Image │ ├── HTML5.png │ ├── Integration_testing.png │ ├── Istanbul_coverage.png │ ├── Keyword_distribution.png │ ├── Mocha_showcase.png │ ├── Web1.0.png │ ├── Web2.0.png │ ├── Web_illustration_1.png │ ├── Web_illustration_2.png │ ├── api.png │ ├── box_model1.png │ ├── box_model2.png │ ├── box_model3.png │ ├── box_model4.png │ ├── box_model5.png │ ├── box_model6.png │ ├── box_model7.png │ ├── css1.png │ ├── css2.png │ ├── css3.png │ ├── css4.png │ ├── css5.png │ ├── css6.png │ ├── css7.png │ ├── css8.png │ ├── hash&salt.png │ ├── http_request.png │ ├── http_response.png │ ├── long_answers_question_1.png │ ├── long_answers_question_1_answer.png │ ├── long_answers_question_2.png │ ├── long_answers_question_2_answer.png │ ├── npm_test_failed.png │ ├── npm_test_succeed.png │ └── restful_routes.png │ ├── Questions.md │ └── Summary.md └── README.md /Books/CSS_The_Definitive_Guide.md: -------------------------------------------------------------------------------- 1 | # Notes for [](https://www.amazon.com/gp/product/1449393195/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1449393195&linkCode=as2&tag=285975600-20&linkId=319482acbe5fb41c5f68365d080b328c) 2 | 3 | - Author: Eric A. Meyer, Estelle Weyl 4 | - Version: 4th Edition 2017 5 | 6 | ## **Ch. 1 CSS and Documents** 7 | 8 | ### 1.1 A Brief History of (Web) Style 9 | 10 | ### 1.2 Elements 11 | 12 | - 1.2.1 Replaced and Nonreplaced Elements 13 | - *Replaced elements* are those where the element's content is replaced by something that is not directly represented by document content. For example, The img element is replaced by an image file external to the document itself 14 | - *Nonreplaced elements* are those whose content is presented by the user agent (generally a browser) inside a box generated by the element itself 15 | - 1.2.2 Element Display Roles 16 | - *Block-level elements*: generate an element box that fills its parent element's content area and cannot have other elements at its sides 17 | - *Inline-level elements*: generate an element box within a line of text and do not break up the flow of that line 18 | - CSS Property: `display` eg. `display: inline;` `display: block;` 19 | 20 | ### 1.3 Bringing CSS and HTML Together 21 | 22 | - 1.3.1 The `` Tag 23 | - 1.3.2 The ` 32 | ``` 33 | 34 | - Like ``, there can be more than one `@import` statement in a document 35 | - Unlike ``, the stylesheets of every `@import` directive will be loaded and used 36 | - 1.3.4 HTTP Linking 37 | - 1.3.5 Inline Styles 38 | 39 | ### 1.4 Stylesheet Contents 40 | 41 | - 1.4.1 Markup 42 | - 1.4.2 Rule Structure 43 | - 1.4.3 Vendor prefixing 44 | - 1.4.4 Whitespace Handling 45 | - 1.4.5 CSS Comments 46 | 47 | ### 1.5 Media Queries 48 | 49 | - 1.5.1 Usage 50 | - 1.5.2 Simple Media Queries 51 | - 1.5.3 Media Types 52 | - 1.5.4 Media Descriptors 53 | - 1.5.5 Media Feature Descriptors and Value Types 54 | 55 | ### 1.6 Feature Queries 56 | 57 | ### 1.7 Summary 58 | 59 | ## **Ch. 2 Selectors** 60 | 61 | ### 2.1 Basic Style Rules 62 | 63 | - 2.1.1 Element Selectors 64 | - 2.1.2 Declarations and Keywords 65 | 66 | ### 2.2 Grouping 67 | 68 | - 2.2.1 Grouping Selectors 69 | - 2.2.2 Grouping Declarations 70 | - Although it is not technically necessary to follow the last declaration of a rule with a semicolon in CSS, it is generally good practice to do so. First, it will keep you in the habit of terminating your declarations with semicolons, the lack of which is one of the most common causes of rendering errors. Second, if you decide to add another declaration to a rule, you won’t have to worry about forgetting to insert an extra semicolon. Third, if you ever use a preprocessor like Sass, trailing semicolons are often required for all declarations. Avoid all these problems—always follow a declaration with a semicolon, wherever the rule appears. 71 | - 2.2.3 Grouping Everything 72 | - 2.2.4 New Elements in Old Browsers 73 | 74 | ### 2.3 Class and ID Selectors 75 | 76 | - 2.3.1 Class Selectors 77 | - 2.3.2 Multiple Classes 78 | - 2.3.3 ID Selectors 79 | - 2.3.4 Deciding Between Class and ID 80 | - In the real world, browsers don’t always check for the uniqueness of IDs in HTML. That means that if you sprinkle an HTML document with several elements, all of which have the same value for their ID attributes, you’ll probably get the same styles applied to each. This is incorrect behavior, but it happens anyway. Having more than one of the same ID value in a document also makes DOM scripting more difficult, since functions like getElementById() depend on there being one, and only one, element with a given ID value. 81 | 82 | ### 2.4 Attribute Selectors 83 | 84 | - 2.4.1 Simple Attribute Selectors 85 | - 2.4.2 Selection Based on Exact Attribute Value 86 | - this format requires an exact match for the attribute’s value. Matching becomes an issue when the selector form encounters values that can in turn contain a space-separated list of values (e.g., the HTML attribute class). For example, consider the following markup fragment: `Mercury` The only way to match this element based on its exact attribute value is to write: `planet[type="barren rocky"] {font-weight: bold;}` If you were to write planet[type="barren"], the rule would not match the example markup and thus would fail. This is true even for the class attribute in HTML. Consider the following: `

When handling plutonium, care must be taken to avoid the formation of a critical mass.

` To select this element based on its exact attribute value, you would have to write:`p[class="urgent warning"] {font-weight: bold;}` This is not equivalent to the dot-class notation covered earlier, as we will see in the next section. Instead, it selects any p element whose class attribute has exactly the value "urgent warning", with the words in that order and a single space between them. It’s effectively an exact string match. 87 | - 2.4.3 Selection Based on Partial Attribute Values 88 | - 2.4.4 A Particular Attribute Selection Type 89 | - You may have noticed that I’ve quoted all the attribute values in the attribute selectors. Quoting is required if the value includes any special characters, begins with a dash or digit, or is otherwise invalid as an identifier and needs to be quoted as a string. To be safe, I recommend always quoting attribute values in attribute selectors, even though it is only required to makes strings out of invalid identifiers. 90 | - 2.4.5 The Case Insensitivity Identifier 91 | 92 | ### 2.5 Using Document Structure 93 | 94 | - 2.5.1 Understanding the Parent-Child Relationship 95 | - 2.5.2 Descendant Selectors 96 | - 2.5.3 Selecting Children 97 | - 2.5.4 Selecting Adjacent Sibling Elements 98 | - 2.5.5 Selecting Following Siblings 99 | 100 | ### 2.6 Pseudo-Class Selectors 101 | 102 | - 2.6.1 Combining Pseudo-Classes 103 | - 2.6.2 Structural Pseudo-Classes 104 | - 2.6.2.1 Selecting the root element `:root` 105 | - 2.6.2.2 Selecting empty elements `:empty` 106 | - 2.6.2.3 Selecting unique children `:only-child` `:only-of-type` 107 | - 2.6.2.4 Selecting first and last children `:first-child` `:last-child` 108 | - 2.6.2.5 Selecting first and last of a type `:first-of-type` `:last-of-type` 109 | - 2.6.2.6 Selecting every nth child `:nth-child(n)` `:nth-child(3n+1)` `:nth-last-child(odd)` 110 | - 2.6.2.7 Selecting every nth of a type `:nth-of-type(even)` 111 | - 2.6.3 Dynamic Pseudo-Classes 112 | - 2.6.3.1 Hyperlink pseudo-classes 113 | - `:link` Refers to any anchor that is a hyperlink (i.e., has and href attribute) and points to an address that has not been visited 114 | - `:visited` Refers to any anchor that is a hyperlink to an already visited address. For security reasons, the styles that can be applied to visited links are severely limited 115 | - Styled visited links enables visitors to know where they have been and what they have yet to visit. This is especially important on large websites where it may be difficult to remember, especially for those with cognitive disabilities, which pages have been visited. Not only is highlighting visited links one of the W3C Web Content Accessibility Guidelines, but it makes searching for content faster, more efficient, and less stressful for everyone. 116 | - 2.6.3.2 User action pseudo-classes 117 | - `:focus` Refers to any element that currently has the input focus—i.e., can accept keyboard input or be activated in some way. 118 | - `:hover` Refers to any element over which the mouse pointer is placed—e.g., a hyperlink over which the mouse pointer is hovering. 119 | - `:active` Refers to any element that has been activated by user input—e.g., a hyperlink on which a user clicks during the time the mouse button is held down. 120 | - While you can style elements with :focus any way you like, do not remove all styling from focused elements. Differentiating which element currently has focus is vital for accessibility, especially for those navigating your site or application with a keyboard 121 | - 2.6.3.3 Real-world issues with dynamic styling 122 | - 2.6.4 UI-State Pseudo-Classes 123 | - `:enabled` Refers to user-interface elements (such as form elements) that are enabled; that is, available for input. 124 | - `:disabled` Refers to user-interface elements (such as form elements) that are disabled; that is, not available for input. 125 | - `:checked` Refers to radio buttons or checkboxes that have been selected, either by the user or by defaults within the document itself. 126 | - `:indeterminate` Refers to radio buttons or checkboxes that are neither checked nor unchecked; this state can only be set via DOM scripting, and not due to user input. 127 | - `:default` Refers to the radio button, checkbox, or option that was selected by default. 128 | - `:valid` Refers to a user input that meets all of its data validity semantics 129 | - `:invalid` Refers to a user input that does not meet all of its data validity semantics 130 | - `:in-range` Refers to a user input whose value is between the minimum and maximum values 131 | - `:out-of-range` Refers to a user input whose value is below the minimum or above the maximum values allowed by the control 132 | - `:required` Refers to a user input that must have a value set 133 | - `:optional` Refers to a user input that does not need to have a value set 134 | - `:read-write` Refers to a user input that is editable by the user 135 | - `:read-only` Refers to a user input that is not editable by the user 136 | - 2.6.4.1 Enabled and disabled UI elements 137 | - 2.6.4.2 Check states 138 | - 2.6.4.3 Default option pesudo-class 139 | - 2.6.4.4 Optionality pseudo-classes 140 | - 2.6.5 The :target Pseudo-Classes 141 | - 2.6.6 The :lang Pseudo-Classes 142 | - 2.6.7 The Negation Pseudo-Classes 143 | 144 | ### 2.7 Pseudo-Element Selectors 145 | 146 | - 2.7.1 Styling the First Letter 147 | - 2.7.2 Styling the First Line 148 | - 2.7.3 Restrictions on ::first-letter and ::first-line 149 | - 2.7.4 Styling (or Creating) Content Before and After Elements 150 | 151 | ### 2.8 Summary 152 | 153 | ## Ch. 3 Specificity and the Cascade 154 | 155 | ## Ch. 4 Values and Units 156 | 157 | ### 4.1 Keywords, Strings, and Other Text Values 158 | 159 | - 4.1.1 Keywords 160 | - 4.1.2 Strings 161 | - 4.1.3 URLs 162 | - 4.1.4 Images 163 | - 4.1.5 Identifiers 164 | 165 | ### 4.2 Numbers and Percentages 166 | 167 | - 4.2.1 Integers 168 | - 4.2.2 Numbers 169 | - 4.2.3 Percentages 170 | - 4.2.4 Fractions 171 | 172 | ### 4.3 Distances 173 | 174 | - 4.3.1 Absolute Length Units 175 | - 4.3.2 Resolution Units 176 | - 4.3.3 Relative Length Units 177 | 178 | ### 4.4 Calculation values 179 | 180 | ### 4.5 Attribute Values 181 | 182 | ### 4.6 Color 183 | 184 | - 4.6.1 Named Colors 185 | - 4.6.2 Colors by RGB and RGBa 186 | - 4.6.3 Colors by HSL and HSLa 187 | - 4.6.4 Color Keywords 188 | 189 | ### 4.7 Angles 190 | 191 | ### 4.8 Time and Frequeny 192 | 193 | ### 4.9 Position 194 | 195 | ### 4.10 Custom Values 196 | 197 | ## Ch. 5 Fonts 198 | 199 | ### 5.1 Font Families 200 | 201 | - 5.1.1 Using Generic Font Families 202 | - 5.1.2 Specifying a Font Family 203 | 204 | ### 5.2 Using `@font-face` 205 | 206 | - 5.2.1 Required Descriptors 207 | - 5.2.2 Other Font Descriptors 208 | - 5.2.3 Combining Descriptors 209 | 210 | ### 5.3 Font Weights 211 | 212 | - 5.3.1 How Weights Work 213 | - 5.3.2 Getting Bolder 214 | - 5.3.3 Lightening Weights 215 | - 5.3.4 The font-weight descriptor 216 | 217 | ### 5.4 Font Size 218 | 219 | - 5.4.1 Absolute Sizes 220 | - 5.4.2 Relative Sizes 221 | - 5.4.3 Percentages and Sizes 222 | - 5.4.4 Font Size and Inheritance 223 | - 5.4.5 Using Length Units 224 | - 5.4.6 Automatically Adjusting Size 225 | 226 | ### 5.5 Font Style 227 | 228 | - 5.5.1 The font-style Descriptor 229 | 230 | ### 5.6 Font Stretching 231 | 232 | - 5.6.1 The font-stretch Descriptor 233 | 234 | ### 5.7 Font Kerning 235 | 236 | ### 5.8 Font Variants 237 | 238 | ### 5.9 Font Features 239 | 240 | - 5.9.1 The font-feature-settings Descriptor 241 | 242 | ### 5.10 Font Synthesis 243 | 244 | ### 5.11 The font Property 245 | 246 | - 5.11.1 Adding the Line Height 247 | - 5.11.2 Using Shorthands Properly 248 | - 5.11.3 Using System Fonts 249 | 250 | ### 5.12 Font Matching 251 | 252 | ### 5.13 Summary 253 | 254 | ## Ch. 6 Text Properties 255 | 256 | ### 6.1 Indentation and Inline Alignment 257 | 258 | - 6.1.1 Indenting Text 259 | - 6.1.2 Text Alignment 260 | - 6.1.3 Aligning the Last Line 261 | 262 | ### 6.2 Inline Alignment 263 | 264 | - 6.2.1 The Height of Lines 265 | - 6.2.2 Vertically Aligning Text 266 | 267 | ### 6.3 Word Spacing and Letter Spacing 268 | 269 | - 6.3.1 Word Spacing 270 | - 6.3.2 Letter Spacing 271 | - 6.3.3 Spacing and Alignment 272 | 273 | ### 6.4 Text Transformation 274 | 275 | ### 6.5 Text Decoration 276 | 277 | - 6.5.1 Weird Decorations 278 | 279 | ### 6.6 Text Rendering 280 | 281 | ### 6.7 Text Shadows 282 | 283 | ### 6.8 Handling Whitespace 284 | 285 | - 6.8.1 Setting Tab Sizes 286 | 287 | ### 6.9 Wrapping and Hyphenation 288 | 289 | - 6.9.1 Wrapping Text 290 | 291 | ### 6.10 Writing Modes 292 | 293 | - 6.10.1 Setting Writing Modes 294 | - 6.10.2 Changing Text Orientation 295 | - 6.10.3 Declaring Direction 296 | 297 | ### 6.11 Summary 298 | 299 | ## Ch. 7 Basic Visual Formatting 300 | 301 | ### 7.1 Basic Boxes 302 | 303 | - 7.1.1 A quick Refresher 304 | - 7.1.2 The Containing Block 305 | 306 | ### 7.2 Altering Element Display 307 | 308 | - 7.2.1 Changing Roles 309 | - 7.2.2 Block Boxes 310 | - 7.2.3 Horizontal Formatting 311 | - 7.2.4 Horizontal Properties 312 | - 7.2.5 Using auto 313 | - 7.2.6 More Than One auto 314 | - 7.2.7 Negative Margins 315 | - 7.2.8 Percentage Heights 316 | - 7.2.9 Auto Heights 317 | - 7.2.10 Collapsing Vertical Margins 318 | - 7.2.11 Negative Margins and Collapsing 319 | - 7.2.12 List Items 320 | 321 | ### 7.3 Inline Elements 322 | 323 | - 7.3.1 Line Layout 324 | - 7.3.2 Basic Terms and Concepts 325 | - 7.3.3 Inline Formatting 326 | - 7.3.4 Inline Nonreplaced Elements 327 | - 7.3.5 Building the Boxes 328 | - 7.3.6 Vertical Alignment 329 | - 7.3.7 Managing the line-height 330 | - 7.3.8 Scaling Line Heights 331 | - 7.3.9 Adding Box Properties 332 | - 7.3.10 Changing Breaking Behavior 333 | - 7.3.11 Glyphs Versus Content Area 334 | - 7.3.12 Inline Replaced Elements 335 | - 7.3.13 Adding Box Properties 336 | - 7.3.14 Replaced Elements and the Baseline 337 | - 7.3.15 Inline-Block Elements 338 | - 7.3.16 Flow Display 339 | - 7.3.17 Contents Display 340 | - 7.3.18 Other Display Values 341 | - 7.3.19 Computed Values 342 | 343 | ### 7.4 Summary 344 | 345 | ## Ch. 8 Padding, Borders, Outlines, and Margins 346 | 347 | ### 8.1 Basic Element Boxes 348 | 349 | - 8.1.1 Width and Height 350 | 351 | ### 8.2 Padding 352 | 353 | - 8.2.1 Replicating Values 354 | - 8.2.2 Single-Side Padding 355 | - 8.2.3 Percentage Values and Padding 356 | - 8.2.4 Padding and Inline Elements 357 | - 8.2.5 Padding and Replaced Elements 358 | 359 | ### 8.3 Borders 360 | 361 | - 8.3.1 Borders with Style 362 | - 8.3.2 Border Widths 363 | - 8.3.3 Border Colors 364 | - 8.3.4 Shorthand Border Properties 365 | - 8.3.5 Global Borders 366 | - 8.3.6 Borders and Inline Elements 367 | - 8.3.7 Rounding Border Corners 368 | - 8.3.8 Image Borders 369 | 370 | ### 8.4 Outlines 371 | 372 | - 8.4.1 Outline Styles 373 | - 8.4.2 Outline Width 374 | - 8.4.3 Outline Color 375 | - 8.4.4 How They Are Different 376 | 377 | ### 8.5 Marigins 378 | 379 | - 8.5.1 Length Values and Margins 380 | - 8.5.2 Percentages and Margins 381 | - 8.5.3 Single-Side Margin Properties 382 | - 8.5.4 Margin Collapsing 383 | - 8.5.5 Negative Margins 384 | - 8.5.6 Margins and Inline Elements 385 | 386 | ### 8.6 Summary 387 | 388 | ## Ch. 9 Colors, Backgrounds, and Gradients 389 | 390 | ### 9.1 Colors 391 | 392 | - 9.1.1 Foreground Colors 393 | - 9.1.2 Affecting Borders 394 | - 9.1.3 Affecting Form Elements 395 | - 9.1.4 Inheriting Color 396 | 397 | ### 9.2 Backgrounds 398 | 399 | - 9.2.1 Background Colors 400 | - 9.2.2 Clipping the Background 401 | - 9.2.3 Background Images 402 | - 9.2.4 Background Positioning 403 | - 9.2.5 Changing the Positioning Box 404 | - 9.2.6 Background Repeating (or Lack Thereof) 405 | - 9.2.7 Getting Attached 406 | - 9.2.8 Sizing Background Images 407 | - 9.2.9 Bringing It All Together 408 | - 9.2.10 Multiple Backgrounds 409 | 410 | ### 9.3 Gradients 411 | 412 | - 9.3.1 Linear Gradients 413 | - 9.3.2 Radial Gradients 414 | - 9.3.3 Manipulating Gradient Images 415 | - 9.3.4 Repeating Gradients 416 | 417 | ### 9.4 Box Shadows 418 | 419 | ### 9.5 Summary 420 | 421 | ## Ch. 10 Floating and Shapes 422 | 423 | ### 10.1 Floating 424 | 425 | - 10.1.1 Floated Elements 426 | - 10.1.2 Floating: The Details 427 | - 10.1.3 Applied Behavior 428 | - 10.1.4 Floats, Content, and Overlapping 429 | 430 | ### 10.2 Clearing 431 | 432 | ### 10.3 Float Shapes 433 | 434 | - 10.3.1 Creating a Shape 435 | - 10.3.2 Shaping with Image Transparency 436 | - 10.3.3 Adding a Shape Margin 437 | 438 | ### 10.4 Summary 439 | 440 | ## Ch. 11 Positioning 441 | 442 | ### 11.1 Basic Concepts 443 | 444 | - 11.1.1 Types of Positioning 445 | - 11.1.2 The Containing Block 446 | 447 | ### 11.2 Offset Properties 448 | 449 | ### 11.3 Width and Height 450 | 451 | - 11.3.1 Setting Width and Height 452 | - 11.3.2 Limiting Width and Height 453 | 454 | ### 11.4 Content Overflow and Clipping 455 | 456 | - 11.4.1 Overflow 457 | 458 | ### 11.5 Element Visibility 459 | 460 | ### 11.6 Absolute Positioning 461 | 462 | - 11.6.1 Containing Blocks and Absolutely Positional Elements 463 | - 11.6.2 Placement and Sizing of Absolutely Positioned Elements 464 | - 11.6.3 Auto-edges 465 | - 11.6.4 Placing and Sizing Nonreplaced Elements 466 | - 11.6.5 Placement on the Z-Axis 467 | 468 | ### 11.7 Fixed Positioning 469 | 470 | ### 11.8 Relative Positioning 471 | 472 | ### 11.9 Sticky Positioning 473 | 474 | ### 11.10 Summary 475 | 476 | ## Ch. 12 Flexible Box Layout 477 | 478 | ### 12.1 Flexbox Fundamentals 479 | 480 | - 12.1.1 A Simple Example 481 | 482 | ### 12.2 Flex Containers 483 | 484 | - 12.2.1 The flex-direction Property 485 | - 12.2.2 Other Writing Directions 486 | - 12.2.3 Wrapping Flex Lines 487 | - 12.2.4 Defining Flexible Flows 488 | - 12.2.5 flex-wrap Continued 489 | 490 | ### 12.3 Arranging Flex Items 491 | 492 | ### 12.4 Flex Container 493 | 494 | ### 12.5 Justifying Content 495 | 496 | - 12.5.1 justify-content Examples 497 | 498 | ### 12.6 Aligning Items 499 | 500 | - 12.6.1 Start, End, and Center Alignment 501 | - 12.6.2 Baseline Alignment 502 | - 12.6.3 Additional Notes 503 | 504 | ### 12.7 The align-self Property 505 | 506 | ### 12.8 Aligning Content 507 | 508 | ### 12.9 Flex Items 509 | 510 | - 12.9.1 What Are Flex Items? 511 | - 12.9.2 Flex Item Features 512 | - 12.9.3 Minimum Widths 513 | 514 | ### 12.10 Flex-Item-Specific Properties 515 | 516 | ### 12.11 The flex Property 517 | 518 | ### 12.12 The flex-grow Property 519 | 520 | - 12.12.1 Growth Factors and the flex Property 521 | 522 | ### 12.13 The flex-shrink Property 523 | 524 | - 12.13.1 Proportional Shrinkage Based on Width and Shrink Factor 525 | - 12.13.2 Differing Bases 526 | - 12.13.3 Responsive Flexing 527 | 528 | ### 12.14 The flex-basis Property 529 | 530 | - 12.14.1 The content Keyword 531 | - 12.14.2 Automatic Flex Basis 532 | - 12.14.3 Default Values 533 | - 12.14.4 Length Units 534 | - 12.14.5 Zero Basis 535 | 536 | ### 12.15 The flex Shorthand 537 | 538 | - 12.15.1 Common Flex Values 539 | 540 | ### 12.16 The order property 541 | 542 | - 12.15.2 Tabbed Navigation Revisited 543 | 544 | ## Ch. 13 Grid Layout 545 | 546 | ### 13.1 Creating a Grid Container 547 | 548 | ### 13.2 Basic Grid Terminology 549 | 550 | ### 13.3 Placing Grid Lines 551 | 552 | - 13.3.1 Fixed-Width Grid Tracks 553 | - 13.3.2 Flexible Grid Tracks 554 | - 13.3.3 Fitting Track Contents 555 | - 13.3.4 Repeating Grid Lines 556 | - 13.3.5 Grid Areas 557 | 558 | ### 13.4 Attaching Elements to the Grid 559 | 560 | - 13.4.1 Using Column and Row Lines 561 | - 13.4.2 Row and Column Shorthands 562 | - 13.4.3 The Implicit Grid 563 | - 13.4.4 Error Handling 564 | - 13.4.5 Using Areas 565 | - 13.4.6 Grid Item Overlap 566 | 567 | ### 13.5 Grid Flow 568 | 569 | ### 13.6 Automatic Grid Lines 570 | 571 | ### 13.7 The grid Shorthand 572 | 573 | - 13.7.1 Subgrids 574 | 575 | ### 13.8 Opening Grid Spaces 576 | 577 | - 13.8.1 Grid Gutters (or Gaps) 578 | - 13.8.2 Grid Items and the Box Model 579 | 580 | ### 13.9 Aligning the Grids 581 | 582 | - 13.9.1 Aligning and Justifying Individual Items 583 | - 13.9.2 Aligning and Justifying All Items 584 | 585 | ### 13.10 Layering and Ordering 586 | 587 | ### 13.11 Summary 588 | 589 | ## Ch. 14 Table Layout in CSS 590 | 591 | ### 14.1 Table Formatting 592 | 593 | - 14.1.1 Visually Arranging a Table 594 | - 14.1.2 Table Display Values 595 | - 14.1.3 Anonymous Table Objects 596 | - 14.1.4 Table Layers 597 | - 14.1.5 Captions 598 | 599 | ### 14.2 Table Cell Borders 600 | 601 | - 14.2.1 Separated Cell Borders 602 | - 14.2.2 Collapsing Cell Borders 603 | 604 | ### 14.3 Table Sizing 605 | 606 | - 14.3.1 Width 607 | - 14.3.2 Height 608 | - 14.3.3 Alignment 609 | 610 | ### 14.4 Summary 611 | 612 | ## Ch. 15 Lists and Generated Content 613 | 614 | ### 15.1 Lists 615 | 616 | - 15.1.1 Types of Lists 617 | - 15.1.2 List Item Images 618 | - 15.1.3 List-Marker Positions 619 | - 15.1.4 List Style in Shorthand 620 | - 15.1.5 List Layout 621 | 622 | ### 15.2 Generated Content 623 | 624 | - 15.2.1 Inserting Generated Content 625 | - 15.2.2 Specifying Content 626 | - 15.2.3 Counters 627 | 628 | ### 15.3 Defining Counting Patterns 629 | 630 | - 15.3.1 Fixed Counting Patterns 631 | - 15.3.2 Cyclic Counting Patterns 632 | - 15.3.3 Symbolic Counting Patterns 633 | - 15.3.4 Alphabetic Counting Patterns 634 | - 15.3.5 Numeric Counting Patterns 635 | - 15.3.6 Additive Counting Patterns 636 | - 15.3.7 Extending Counting Patterns 637 | - 15.3.8 Speaking Counting Patterns 638 | 639 | ### 15.4 Summary 640 | 641 | ## Ch. 16 Transforms 642 | 643 | ### 16.1 Coordinate Systems 644 | 645 | ### 16.2 Transforming 646 | 647 | - 16.2.1 The Transform Functions 648 | 649 | ### 16.3 More Transform Properties 650 | 651 | ### 16.4 Summary 652 | 653 | - 16.4.1 Moving the Origin 654 | - 16.4.2 Choosing a 3D style 655 | - 16.4.3 Changing Perspective 656 | - 16.4.4 Dealing with Backfaces 657 | 658 | ## Ch. 17 Transitions 659 | 660 | ### 17.1 CSS Transitions 661 | 662 | ### 17.2 Transition Properties 663 | 664 | - 17.2.1 Limiting Transition Effects by Property 665 | - 17.2.2 Setting Transition Duration 666 | - 17.2.3 Altering the Internal Timing of Transitions 667 | - 17.2.4 Delaying Transitions 668 | - 17.2.5 The transition Shorthand 669 | 670 | ### 17.3 In Reverse: Transitioning Back to Baseline 671 | 672 | ### 17.4 Animatable Properties and Values 673 | 674 | - 17.4.1 How Property Values Are Interpolated 675 | 676 | ### 17.5 Fallbacks: Transitions Are Enhancements 677 | 678 | ### 17.6 Printing Transitions 679 | 680 | ## Ch. 18 Animation 681 | 682 | ### 18.1 Defining Keyframes 683 | 684 | ### 18.2 Setting Up Keyframe Animations 685 | 686 | - 18.2.1 Naming Your Animation 687 | 688 | ### 18.3 Keyframe Selectors 689 | 690 | - 18.3.1 Omitting from and to Values 691 | - 18.3.2 Repeating Keyframe Properties 692 | - 18.3.3 Animatable Properties 693 | - 18.3.4 Nonanimatable Properties That Aren't Ignored 694 | - 18.3.5 Scripting @keyframes Animations 695 | 696 | ### 18.4 Animating Elements 697 | 698 | - 18.4.1 Naming Animations 699 | - 18.4.2 Defining Animation Lengths 700 | - 18.4.3 Declaring Animation Iterations 701 | - 18.4.4 Setting an Animation Direction 702 | - 18.4.5 Delaying Animations 703 | - 18.4.6 Animation Events 704 | - 18.4.7 Changing the Internal Timing of Animations 705 | - 18.4.8 Setting the Animation Play State 706 | - 18.4.9 Animation Fill Modes 707 | 708 | ### 18.5 Bringing It All Together 709 | 710 | ### 18.6 Animation, Specificity, and Precedence Order 711 | 712 | - 18.6.1 Specifity and !important 713 | - 18.6.2 Animation Order 714 | - 18.6.3 Animation Iteration and `display: none;` 715 | - 18.6.4 Animation and the UI Thread 716 | 717 | ### 18.7 Seizure and Bestibular Disorders 718 | 719 | ### 18.8 Animation Events and Prefixing 720 | 721 | - 18.8.1 animationstart 722 | - 18.8.2 animationend 723 | - 18.8.3 animationiteration 724 | 725 | ### 18.9 Printing Animations 726 | 727 | ## Ch. 19 Filters, Blending, Clipping, and Masking 728 | 729 | ### 19.1 CSS Filters 730 | 731 | - 19.1.1 Basic Filters 732 | - 19.1.2 Color Filtering 733 | - 19.1.3 Brightness, Contrast, and Saturation 734 | - 19.1.4 SVG Filters 735 | 736 | ### 19.2 Compositing and Blending 737 | 738 | - 19.2.1 Blending Elements 739 | - 19.2.2 Darken, Lighten, Difference, and Exclusion 740 | - 19.2.3 Multiply, Screen, and Overlay 741 | - 19.2.4 Hard and Soft Light 742 | - 19.2.5 Color Dodge and Burn 743 | - 19.2.6 Hue, Saturation, Luminosity, and Color 744 | 745 | ### 19.3 Blending Backgrounds 746 | 747 | - 19.3.1 Blending in Isolation 748 | 749 | ### 19.4 Clipping and Masking 750 | 751 | - 19.4.1 Clipping 752 | - 19.4.2 Clip Shapes 753 | - 19.4.3 Clip Boxes 754 | - 19.4.4 Clip Filling Rules 755 | 756 | ### 19.5 Masks 757 | 758 | - 19.5.1 Defining a Mask 759 | - 19.5.2 Changing the Mask's Mode 760 | - 19.5.3 Sizing and repeating Masks 761 | - 19.5.4 Positioning Masks 762 | - 19.5.5 Clipping and Composition Masks 763 | - 19.5.6 Bringing It All Together 764 | - 19.5.7 Mask Types 765 | - 19.5.8 Border-image Masking 766 | 767 | ### 19.6 Object Fitting and Positioning 768 | 769 | ## Ch. 20 Media-Dependent Styles 770 | 771 | ### 20.1 Defining Media-Dependent Styles 772 | 773 | - 20.1.1 Basic Media Queries 774 | - 20.1.2 Complex Media Queries 775 | 776 | ### 20.2 Paged Media 777 | 778 | - 20.2.1 Print Styles 779 | 780 | ### 20.3 Summary -------------------------------------------------------------------------------- /Books/DOM_Scripting.md: -------------------------------------------------------------------------------- 1 | # Notes for Book \ 2 | 3 | ## Chapter 1 A Brief History of JavaScript 4 | 5 | ## Chapter 2 JavaScript Syntax 6 | 7 | ## Chapter 3 The Document Object Model 8 | 9 | ## Chapter 4 A JavaScript Image Gallery 10 | 11 | ## Chapter 5 Best Practice 12 | 13 | ## Chapter 6 The Image Gallery Revisited 14 | 15 | ## Chapter 7 Creating Markup on the Fly 16 | 17 | ## Chapter 8 Enhancing Content 18 | 19 | ## Chapter 9 CSS-DOM 20 | 21 | ## Chapter 10 An Animated Slideshow 22 | 23 | ## Chapter 11 HTML 5 24 | 25 | ## Chapter 12 Putting It All Together 26 | -------------------------------------------------------------------------------- /Books/Eloquent_Javascript.md: -------------------------------------------------------------------------------- 1 | # Notes for the book 2 | 3 | - Author: Marijn Haverbeke 4 | - Vertion: 3rd Edition 2018 5 | 6 | ## Ch. 1 Values, Types, and Operators 7 | 8 | ### 1.1 Values 9 | 10 | ### 1.2 Numbers 11 | 12 | - Infinity & -Infinity. Don't put too much trust in infinity-based computation. 13 | - NaN stands for "Not a Number", event though it is a value of the number type. You;ll get this result when you, for example, try to calculate 0 / 0 (zero divided by zero), Infinity - Infinity, or any number of other numeric operations that don't yield a meaningful result 14 | 15 | ### 1.3 Strings 16 | 17 | ### 1.4 Unary operators 18 | 19 | ### 1.5 Boolean Values 20 | 21 | ### 1.6 Empty values 22 | 23 | - There are two special values, written null and undefined, that are used to denote the absence of a meaningful value. They are themselves values, but they carry no information. 24 | 25 | ### 1.7 Automatic type conversion 26 | 27 | - When an operator is applied to the "wrong" type of value, JavaScript will quietly convert that value to the type it need, using a set of rules that often aren't what you want or expect. This is called *type coercion*. 28 | 29 | ### 1.8 Summary 30 | 31 | ## Ch. 2 Program Structure 32 | 33 | ### 2.1 Expressions and statements 34 | 35 | ### 2.2 Bindings 36 | 37 | ### 2.3 Binding names 38 | 39 | ### 2.4 The environment 40 | 41 | ### 2.5 Functions 42 | 43 | ### 2.6 The console.log function 44 | 45 | ### 2.7 Return values 46 | 47 | ### 2.8 Control flow 48 | 49 | ### 2.9 Conditional execution 50 | 51 | ### 2.10 while and do loops 52 | 53 | ### 2.11 Indenting Code 54 | 55 | ### 2.12 for loops 56 | 57 | ### 2.13 Breaking Out of a Loop 58 | 59 | ### 2.14 Updating bindings succinctly 60 | 61 | ### 2.15 Dispatching on a value with swich 62 | 63 | ### 2.16 Capitalization 64 | 65 | ### 2.17 Comments 66 | 67 | ### 2.18 Summary 68 | 69 | ### 2.19 Exercises 70 | 71 | ## Ch. 3 Functions 72 | 73 | ### 3.1 Defining a function 74 | 75 | ### 3.2 Bindings and scopes 76 | 77 | ### 3.3 Functions as values 78 | 79 | ### 3.4 Declaration notation 80 | 81 | ### 3.5 Arrow functions 82 | 83 | ### 3.6 The call stack 84 | 85 | ### 3.7 Optional Arguments 86 | 87 | - JavaScript is extremely broad-minded about the number of arguments you pass to a function. If you pass too many, the extra ones are ignored. If you pass too few, the missing parameters get assigned the value `undefined` 88 | 89 | ### 3.8 Closure 90 | 91 | ### 3.9 Recursion 92 | 93 | ### 3.10 Growing functions 94 | 95 | ### 3.11 Functions and side effects 96 | 97 | ### 3.12 Summary 98 | 99 | ### 3.13 Exercises 100 | 101 | ## Ch. 4 Data Structures: Objects and Arrarys 102 | 103 | ### 4.1 The weresquirrel 104 | 105 | ### 4.2 Data sets 106 | 107 | ### 4.3 Properties 108 | 109 | ### 4.4 Methods 110 | 111 | ### 4.5 Objects 112 | 113 | ### 4.6 Mutability 114 | 115 | ### 4.7 The lycanthrope's log 116 | 117 | ### 4.8 Computing correlation 118 | 119 | ### 4.9 Array loops 120 | 121 | ### 4.10 The final analysis 122 | 123 | ### 4.11 Further arrayology 124 | 125 | ### 4.12 Strings and their properties 126 | 127 | ### 4.13 Rest parameters 128 | 129 | ### 4.14 The Math object 130 | 131 | - `Math.max()` 132 | - `Math.min()` 133 | - `Math.sqrt()` 134 | - `Math.random()` returns a new pseudorandom number between zero (inclusive) and one (exclusive) 135 | 136 | ### 4.15 Destructuring 137 | 138 | ### 4.16 JSON 139 | 140 | - All property names have to be surrounded by double quotes, and only simple data expressions are allowed — no function calls, bindings, or anything that involves actual computation. Comments are not allowed in JSON. 141 | 142 | ### 4.17 Summary 143 | 144 | - Most values in JavaScript have properties, the exceptions being `null` and `undefined`. Properties are accessed using `value.prop` or `value["prop"]`. 145 | 146 | ### 4.18 Exercises 147 | 148 | ## Ch. 5 Higher-Order Functions 149 | 150 | ### 5.1 Abstraction 151 | 152 | ### 5.2 Abstrating repetition 153 | 154 | ### 5.3 Higher-order functions 155 | 156 | - Functions that operate on other functions, either by taking them as arguments or by returning them, are called *higher-order functions.* In simple words, A Higher-Order funciton is a function that receives a function as an argument or returns the function as output ** 157 | - Higher-order functions allow us to abstract over actions, not just values 158 | - A JavaScript Callback Function is a function that is passed as a parameter to another JavaScript function, and the callback function is run inside of the function it was passed into. JavaScript Callback Functions can be used synchronously or asynchronously. 159 | 160 | ### 5.4 Script data set 161 | 162 | ### 5.5 Filtering arrays 163 | 164 | ### 5.6 Transforming with map 165 | 166 | ### 5.7 Summarizing with reduce 167 | 168 | ### 5.8 Composability 169 | 170 | ### 5.9 Strings and character codes 171 | 172 | ### 5.10 Recognizing text 173 | 174 | ### 5.11 Summary 175 | 176 | - Arrays provide a number of useful higher-order methods 177 | - use `forEach` to loop over the elements in an array 178 | - use `filter` method returns a new array containing only the elements that pass the predicate function 179 | - transforming an array by putting each element through a function is done with `map` 180 | - use `reduce`to combine all the elements in an array into a single value 181 | - use `some` method tests whether any element matches a given predicate function 182 | - use `findIndex` finds the position of the first element that matches a predicate 183 | 184 | ### 5.12 Exercises 185 | 186 | ## Ch. 6 The Secret Life of Objects 187 | 188 | ### 6.1 Encapsulation 189 | 190 | - The core idea in object-oriented programming is to divide programs into smaller pieces and make each piece responsible for managing its own state. Different pieces of such a program interact with each other through *interfaces*, limited sets of fcuntions or bindings that provide useful functionality at a more abstract level, hiding their precise implementation. Such program pieces are modeled using objects. Their interface consistes of a specific set of methods and properties. Properties that are part of the interface are called *public*. The others, which outside code should not be touching, are called *private*. 191 | - It is common to put an underscore (_) character at the start of property names to indicate that those properties are private 192 | - Separating interface from implementation is a great idea. It is usually called *encapsulation* 193 | 194 | ### 6.2 Methods 195 | 196 | - Methods are nothing more than properties that hold function values 197 | - Usually a method needs to do something with the object it was called on. When a function is called as a method — looked up as a property and immediately called, as in `object.method()` — the binding called `this` in its body automatically points at the object that it was called on 198 | - You can think of this as an extra parameter that is passed in a different way. If you want to pass it explicitly, you can use a function's `call` method, which takes the `this` value as its first argument and treats further arguments as normal parameters 199 | - Since each function has its own `this` binding, whose value depends on the way it is called, you cannot refer to the `this` of the wrapping scope in a regular function defined with the `function` keyword 200 | - Arrow functions are different — they do not bind their own `this` but can see the `this` binding of the scope around them 201 | 202 | ### 6.3 Prototypes 203 | 204 | - In addition to their set of properties, most objects also have a *prototype*. A prototype is another object that is used as a fallback source of properties. When an object gets a request for a property that it does not have, its prototype will be searched for the property, then the prototype's prototype, and so on 205 | 206 | ### 6.4 Classes 207 | 208 | - Constructors (all functions, in fact) automatically get a property named `prototype`, which by default holds a plain, empty object that derives from `Object.prototype` 209 | - By convention, the names of constructors are capitalized so that they can easily be distinguished from other functions 210 | - It is important to understand the distinction between the way a prototype is associated with a constructor (through its `prototype` property) and the way objects have a prototype (which can be found with `Object.getPrototypeOf`). The actual prototype of a constructor is `Function.prototype` since constructors are functions. Its prototype *property* holds the prototype used for instances created through it. 211 | 212 | ### 6.5 Class notation 213 | 214 | - The `class` keyword starts a class declaration, which allows us to define a constructor and a set of methods all in a single place. Any number of methods may be written inside the declaration's braces. The one named `constructor` is treated specially. It provides the actual constructor function, which will be bound to the name Rabbit. The others are packaged into that constructor's prototype. 215 | 216 | ### 6.6 Overriding derived properties 217 | 218 | ### 6.7 Maps 219 | 220 | - A *map* (noun) is a data structure that associates values (the keys) with other values 221 | - `Object.keys` returns only an object's *own* keys, not those in the prototype. As an alternative to the `in` operator, you can use the `hasOwnProperty` method, which ignores the object's prototype. 222 | 223 | ### 6.8 Polymorphism 224 | 225 | - When a piece of code is written to work with objects that have a certain interface — in this case, a `toString` method — any kind of object that happens to support this interface can be pugged into the code, and it will just work. This technique is called *polymorphism* 226 | 227 | ### 6.9 Symbols 228 | 229 | - Symbols are values created with the `Symbol` function. Unlike strings, newly created symbols are unique — you cannot create the same symbol twice 230 | - Being both unique and usable as property names makes symbols suitable for defining interfaces that can peacefully live alongside other properties, no matter what their names are 231 | 232 | ```jsx 233 | const toStringSymbol = Symbol("toString"); 234 | Array.prototype[toStringSymbol] = function() { 235 | return `${this.length} cm of blue yarn`; 236 | }; 237 | console.log([1, 2].toString()); 238 | console.log([1, 2][toStringSymbol]()); 239 | ``` 240 | 241 | ### 6.10 The iterator interface 242 | 243 | ### 6.11 Getters, setters, and statics 244 | 245 | ### 6.12 Inheritance 246 | 247 | ### 6.13 The instanceof operator 248 | 249 | ### 6.14 Summary 250 | 251 | ### 6.15 Exercises 252 | 253 | ## Ch. 7 Project: A Robot 254 | 255 | ### 7.1 Meadowfield 256 | 257 | ### 7.2 The task 258 | 259 | ### 7.3 Persistent data 260 | 261 | ### 7.4 Simulation 262 | 263 | ### 7.5 The mail truck's route 264 | 265 | ### 7.6 Pathfinding 266 | 267 | ### 7.7 Exercises 268 | 269 | ## Ch. 8 Bugs and Errors 270 | 271 | ### 8.1 Language 272 | 273 | ### 8.2 Strict mode 274 | 275 | ### 8.3 Types 276 | 277 | ### 8.4 Testing 278 | 279 | ### 8.5 Debugging 280 | 281 | ### 8.6 Error propagation 282 | 283 | ### 8.7 Cleaning up after exceptions 284 | 285 | ### 8.8 Selective catching 286 | 287 | ### 8.9 Assertions 288 | 289 | ### 8.10 Summary 290 | 291 | ### 8.11 Exercises 292 | 293 | ## Ch. 9 Regular Expressions 294 | 295 | ### 9.1 Creating a regular expression 296 | 297 | ### 9.2 Testing for matches 298 | 299 | ### 9.3 Sets of characters 300 | 301 | ### 9.4 Repeating parts of a pattern 302 | 303 | ### 9.5 Grouping subexpressions 304 | 305 | ### 9.6 Matches and groups 306 | 307 | ### 9.7 The Date class 308 | 309 | ### 9.8 Word and string boundaries 310 | 311 | ### 9.9 Choice patterns 312 | 313 | ### 9.10 The mechanics of matching 314 | 315 | ### 9.11 Backtracking 316 | 317 | ### 9.12 The replace method 318 | 319 | ### 9.13 Greed 320 | 321 | ### 9.14 Dynamically creating RegExp objects 322 | 323 | ### 9.15 The search method 324 | 325 | ### 9.16 Thel lastIndex property 326 | 327 | ### 9.17 Parsing an INI file 328 | 329 | ### 9.18 International characters 330 | 331 | ### 9.19 Summary 332 | 333 | ### 9.20 Exercises 334 | 335 | ## Ch. 10 Modules 336 | 337 | ### 10.1 Modules 338 | 339 | ### 10.2 Packages 340 | 341 | ### 10.3 Improvised modules 342 | 343 | ### 10.4 Evaluating data as code 344 | 345 | ### 10.5 CommonJS 346 | 347 | ### 10.6 ECMAScript modules 348 | 349 | ### 10.7 Building and bundling 350 | 351 | ### 10.8 Module design 352 | 353 | ### 10.9 Summary 354 | 355 | ### 10.10 Exercises 356 | 357 | ## Ch. 11 Asynchronous Programming 358 | 359 | ### 11.1 Asynchronicity 360 | 361 | ### 11.2 Crow tech 362 | 363 | ### 11.3 Callbacks 364 | 365 | ### 11.4 Promises 366 | 367 | ### 11.5 Failure 368 | 369 | ### 11.6 Networks are hard 370 | 371 | ### 11.7 Collections of promises 372 | 373 | ### 11.8 Network flooding 374 | 375 | ### 11.9 Message routing 376 | 377 | ### 11.10 Async functions 378 | 379 | ### 11.11 Generators 380 | 381 | ### 11.12 The event loop 382 | 383 | ### 11.13 Asynchronous bugs 384 | 385 | ### 11.14 Summary 386 | 387 | ### 11.15 Exercises 388 | 389 | ## Ch. 12 Project: A Programming Language 390 | 391 | ### 12.1 Parsing 392 | 393 | ### 12.2 The evaluator 394 | 395 | ### 12.3 Special forms 396 | 397 | ### 12.4 The environment 398 | 399 | ### 12.5 Functions 400 | 401 | ### 12.6 Compilation 402 | 403 | ### 12.7 Cheating 404 | 405 | ### 12.8 Exercises 406 | 407 | ## Ch. 13 JavaScript and the Browser 408 | 409 | ### 13.1 Networks and the Internet 410 | 411 | ### 13.2 The Web 412 | 413 | ### 13.3 HTML 414 | 415 | ### 13.4 HTML and JavaScript 416 | 417 | ### 13.5 In the sandbox 418 | 419 | ### 13.6 Compatibility and the browser wars 420 | 421 | ## Ch. 14 The Document Object Model 422 | 423 | ### 14.1 Document structure 424 | 425 | ### 14.2 Trees 426 | 427 | ### 14.3 The standard 428 | 429 | ### 14.4 Moving through the tree 430 | 431 | ### 14.5 Finding elements 432 | 433 | ### 14.6 Changing the document 434 | 435 | ### 14.7 Creating nodes 436 | 437 | ### 14.8 Attributes 438 | 439 | ### 14.9 Layout 440 | 441 | ### 14.10 Styling 442 | 443 | ### 14.11 Cascading styles 444 | 445 | ### 14.12 Query selectors 446 | 447 | ### 14.13 Positioning and animating 448 | 449 | ### 14.14 Summary 450 | 451 | ### 14.15 Exercises 452 | 453 | ## Ch. 15 Handling Events 454 | 455 | ### 15.1 Event handlers 456 | 457 | ### 15.2 Events and DOM nodes 458 | 459 | ### 15.3 Event objects 460 | 461 | ### 15.4 Propagation 462 | 463 | ### 15.5 Default actions 464 | 465 | ### 15.6 Key events 466 | 467 | ### 15.7 Pointer events 468 | 469 | ### 15.8 Scroll events 470 | 471 | ### 15.9 Focus events 472 | 473 | ### 15.10 Load event 474 | 475 | ### 15.11 Events and the event loop 476 | 477 | ### 15.12 Timers 478 | 479 | ### 15.13 Debouncing 480 | 481 | ### 15.14 Summary 482 | 483 | ### 15.15 Exercises 484 | 485 | ## Ch. 16 Project: A Platform Game 486 | 487 | ### 16.1 the game 488 | 489 | ### 16.2 The technology 490 | 491 | ### 16.3 Levels 492 | 493 | ### 16.4 Reading a level 494 | 495 | ### 16.5 Actors 496 | 497 | ### 16.6 Encapsulation as a burden 498 | 499 | ### 16.7 Drawing 500 | 501 | ### 16.8 Motion and collision 502 | 503 | ### 16.9 Actor updates 504 | 505 | ### 16.10 Tracking keys 506 | 507 | ### 16.11 Running the game 508 | 509 | ### 16.12 Exercises 510 | 511 | ## Ch. 17 Drawing on Canvas 512 | 513 | ### 17.1 SVG 514 | 515 | ### 17.2 The canvas element 516 | 517 | ### 17.3 Lines and surfaces 518 | 519 | ### 17.4 Paths 520 | 521 | ### 17.5 Curves 522 | 523 | ### 17.6 Drawing a pie chart 524 | 525 | ### 17.7 Text 526 | 527 | ### 17.8 Images 528 | 529 | ### 17.9 Transformation 530 | 531 | ### 17.10 Storing and clearing transformations 532 | 533 | ### 17.11 Back to the game 534 | 535 | ### 17.12 Choosing a graphics interface 536 | 537 | ### 17.13 Summary 538 | 539 | ### 17.14 Exercises 540 | 541 | ## Ch. 18 HTTP and Forms 542 | 543 | ### 18.1 The protocol 544 | 545 | ### 18.2 Browsers and HTTP 546 | 547 | ### 18.3 Fetch 548 | 549 | ### 18.4 HTTP sandboxing 550 | 551 | ### 18.5 Appreciating HTTP 552 | 553 | ### 18.6 Security and HTTPS 554 | 555 | ### 18.7 Form fields 556 | 557 | ### 18.8 Focus 558 | 559 | ### 18.9 Disabled fields 560 | 561 | ### 18.10 The form as a whole 562 | 563 | ### 18.11 Text fields 564 | 565 | ### 18.12 Checkboxes and radio buttons 566 | 567 | ### 18.13 Select fields 568 | 569 | ### 18.14 File fields 570 | 571 | ### 18.15 Storing data client-side 572 | 573 | ### 18.16 Summary 574 | 575 | ### 18.17 Exercises 576 | 577 | ## Ch. 19 Project: A Pixel Art Editor 578 | 579 | ### 19.1 Components 580 | 581 | ### 19.2 The state 582 | 583 | ### 19.3 DOM building 584 | 585 | ### 19.4 The canvas 586 | 587 | ### 19.5 The application 588 | 589 | ### 19.6 Drawing tools 590 | 591 | ### 19.7 Saving and loading 592 | 593 | ### 19.8 Undo history 594 | 595 | ### 19.9 Let's draw 596 | 597 | ### 19.10 Why is this so hard? 598 | 599 | ### 19.11 Exercises 600 | 601 | ## Ch. 20 Node.js 602 | 603 | ### 20.1 Background 604 | 605 | ### 20.2 The node command 606 | 607 | ### 20.3 Modules 608 | 609 | ### 20.4 Installing with NPM 610 | 611 | ### 20.5 The file system module 612 | 613 | ### 20.6 The HTTP module 614 | 615 | ### 20.7 Streams 616 | 617 | ### 20.8 A file server 618 | 619 | ### 20.9 Summary 620 | 621 | ### 20.10 Exercises 622 | 623 | ## Ch. 21 Project: Skill-Sharing Website 624 | 625 | ### 21.1 Design 626 | 627 | ### 21.2 Long polling 628 | 629 | ### 21.3 HTTP interface 630 | 631 | ### 21.4 The server 632 | 633 | ### 21.5 The client 634 | 635 | ### 21.6 Exercises -------------------------------------------------------------------------------- /Books/Professional_Javascript_for_Web_Developers.md: -------------------------------------------------------------------------------- 1 | # Notes for Book \ 2 | 3 | ## Chapter 1 What is JavaScript 4 | 5 | ### 1.1 A Short History 6 | 7 | ### 1.2 JavaScript Implementation 8 | #### 1.2.1 ECMAScript 9 | #### 1.2.2 The Document Object Model (DOM) 10 | #### 1.2.3 The Browser Object Model (BOM) 11 | 12 | ### 1.3 JavaScript Versions 13 | 14 | 15 | 16 | ## Chapter 2 JavaScript in HTML 17 | ### 2.1 The Element 18 | #### 2.1.1 Tag Placement 19 | #### 2.1.2 Deferred Scripts 20 | #### 2.1.3 Asynchronous Script 21 | #### 2.1.4 Changes in XHTML 22 | #### 2.1.5 Deprecated Syntax 23 | 24 | ### 2.2 Inline Code versus External Files 25 | ### 2.3 Document Modes 26 | ### 2.4 The Element 27 | 28 | 29 | ## Chapter 3 Language Basics 30 | ### 3.1 Syntax 31 | #### 3.1.1 Case-sensitivity 32 | #### 3.1.2 Identifiers 33 | #### 3.1.3 Comments 34 | #### 3.1.4 Strict Mode 35 | - To enable strict mode for an entire script, including the following at the top: 36 | - `"use strict"` 37 | - To enable strict mode in just a function 38 | ``` javascript 39 | function doSomething() { 40 | "use strict" 41 | // fuction body 42 | } 43 | ``` 44 | #### 3.1.5 Statements 45 | ### 3.2 Keywords and Reserved words 46 | ### 3.3 Variables 47 | - ECMAScript variables are loosely typed, meaning that a variable can hold any type of data. Every variable is simply a named placeholder for a value 48 | - To define a variable, use the *var* operator followed by the variable name 49 | - Using the *var* operator to define a variable makes it local to the scope in which it was defined. For example, defining a variable inside of a function using var means that the variable is destroyed as soon as the function exits 50 | ``` javascript 51 | function test() { 52 | var message = "hi"; //local variable 53 | } 54 | test() 55 | alert(message) //error 56 | ``` 57 | - It is possible to define a variable globally by simply omitting the *var* operator. As soon as the function *test()* is called, the variable is defined and becomes accessible outside of the function once it has been executed 58 | ``` javascript 59 | function test() { 60 | message = "hi"; //global variable 61 | } 62 | test(); 63 | alert(message); //"hi" 64 | ``` 65 | - Although it's possible to define global variables by omitting the *var* operator, this approach is not recommended. Global variables defined locally are hard to maintain and cause confusion, because it's not immediately apparent if the omission of *var* was intentional. Strict mode throws a *ReferenceError* when an undeclared variable is assigned a value 66 | 67 | ### 3.4 Data Types 68 | - There are five simple data types (also called primitive types) in ECMAScript: Undefined, Null, Boolean, Number, and String. There is also one complex data type called Object, which is an unordered list of name-value pairs. Any values can be represented as one of six. 69 | 70 | #### 3.4.1 The typeof Operator 71 | - The *typeof* operator is used to determine the data type of a given variable 72 | - "undefined" if the value is undefined 73 | - "boolean" if the value is Boolean 74 | - "string" if the value is string 75 | - "number" if the value is number 76 | - "object" if the value is an object (other than a function) or *null* 77 | - "function" if the value is a function 78 | - Note that because *typeof* is an operator and not a function, no parentheses are required (although they can be used) 79 | - Calling *typeof null* returns a value of "*object*", as the special value *null* is considered to be an empty object reference 80 | 81 | #### 3.4.2 The Undefined Type 82 | - The Undefined type has only one value, which is the special value *undefined*. When a variable is declared using *var* but not initialized, it is assigned the value of *undefined* as following: 83 | ``` javascript 84 | var message 85 | alert(message == undefined); //true 86 | ``` 87 | - Note that a variable containing the value of *undefined* is different from a variable that hasn't been defined at all 88 | ``` javascript 89 | var message; //this variable is declared but has a value of undefined 90 | 91 | //make sure this variable isn't declared 92 | //var age 93 | 94 | alert(message); //"undefined" 95 | alert(age); //causes an error 96 | ``` 97 | - The *typeof* operator returns "undefined" when called on an uninitialized variable, but is also returns "*undefined*" when called on an undeclared variable, which can be a bit confusing 98 | ``` javascript 99 | var message; //this variable is declared but has a value of undefined 100 | 101 | //make sure this variable isn't declared 102 | //var age 103 | 104 | alert(typeof message); //"undefined" 105 | alert(typeof age); //"undefined" 106 | ``` 107 | - Even though uninitialized variables are automatically assigned a value of undefined, it is advisable to always initialize variables. That way, when *typeof* returns "undefined*, you'll know that it's because a given variable hasn't been declared rather than was simply not initialized 108 | 109 | #### 3.4.3 The Null Type 110 | - The Null type is the second data type that has only one value: the special value *null*. Logically, a *null* value is an empty object pointer, which is why *typeof* returns "object" when it's passed a null value 111 | ``` javascript 112 | var car = null; 113 | alert(typeof car); //"object" 114 | ``` 115 | - When defining a variable that is meant to later hold an object, it is advisable to initialize the variable to *null* as opposed to anything else. That way, you can explicitly check for the value *null* to determine if the variable has been filled with object reference at a later time 116 | ``` javascript 117 | if (car != null) { 118 | //do something with car 119 | } 120 | ``` 121 | 122 | #### 3.4.4 The Boolean Type 123 | - The Boolean type has only two literal values: *true* and *false*. These values are distinct from numeric values, so *true* is not equal to 1, and *false* not equal to 0. 124 | - To convert a value into its Boolean equivalent, the special *Boolean()* casting function is called 125 | ``` javascript 126 | var message = "Hello world!" 127 | var messageAsBoolean = Boolean(message); 128 | ``` 129 | 130 | #### 3.4.5 The Number Type 131 | - Uses IEEE-754 format to represent both integers and floating-point values 132 | - For an octal literal, the first digit must be a zero 133 | - For a hexadecimal literal, the first two characters must be 0x (case insensitive) 134 | 135 | ##### 3.4.5.1 Floating-Point Values 136 | - Because storing floating-point values uses twice as much memory as storing integer values, ECMAScript always looks for ways to convert values into integers. 137 | - For very large or very small numbers, floating-point values can be represented using e-notation 138 | - Floating-point values are accurate up to 17 decimal places but are far less accurate in arithmetic computations than whole numbers. For instance, adding 0.1 and 0.2 yields 0.30000000000000004 instead of 0.3. These small rounding errors make it difficult to test for specific floating-point values. 139 | ``` javascript 140 | if (a + b == 0.3) { //avoid! 141 | alert("You got 0.3."); 142 | } 143 | ``` 144 | - You should never test for specific floating-point values 145 | - It's important to understand that rounding errors are a side effect of the way floating-point arithmetic is done in IEEE-754 based numbers and is not unique to ECMAScript. Other language that use the same format have the same issues 146 | 147 | ##### 3.4.5.2 Range of Values 148 | - Not all numbers in the world can be represented in ECMAScript, because of memory constraints 149 | - The smallest number that can be represented in ECMAScript is stored in *Number.MIN_VALUE* and is 5e-324 on most browsers. The largest number is stored in *Number.MAX_VALUE* and is 1.7976931348623157e+308 on most browsers 150 | - If a calculation results in a number that cannot be represented by JavaScript's numeric range, the number automatically gets the special value of *Infinity*. 151 | - Any negative number that can't be represented is -*Infinity* (negative infinity), and any positive number that can't be represented is simply *Infinity* (positive infinity) 152 | - To determine if a value is finite, there is the *isFinite() function 153 | ``` javascript 154 | var result = Number.MAX_VALUE + Number.MIN_VALUE; 155 | alert(isFinite(result)); //false 156 | ``` 157 | - Testing: Though it is rare to do calculations that take values outside of the range of finite numbers, it is possible and should be monitored when doing very large or very small calculations 158 | 159 | ##### 3.4.5.3 NaN 160 | - *NaN* is a special numeric value, short for *Not a Number*, which is used to indicate when an operation intended to return a number has failed 161 | - Unique properties of *NaN* 162 | 1. Any operation involving *NaN* always returns *NaN* (for instance, Nan/10), which can be problematic in the case of multistep computations 163 | 2. *NaN* is not equal to any value, including *NaN* 164 | ``` javascript 165 | alert(NaN == NaN); //false 166 | ``` 167 | - *isNaN()* can be used to determine if any data type passed has value "Not a number" 168 | 169 | ##### 3.4.5.4 Number Conversions 170 | - There are three functions to convert non numeric values into numbers: 171 | 1. *Number()* casting function. Can be used on any data type 172 | 2. *parseInt()* function. Need to be used specifically for converting strings to numbers 173 | 3. *parseFloat()* function. Need to be used specifically for converting strings to numbers 174 | - The *Number()* function performs conversions based on these rules: 175 | - When applied to Boolean values, *true* and *false* get converted into 1 and 0, respectively 176 | - When applied to numbers, the value is simply passed through and returned 177 | - When applied to *null*, *Number()* returns *NaN* 178 | - When applied to strings, the following rules are applied: 179 | - If the string contains only numbers, optionally preceded by a plus or minus sign, it is always converted to a decimal number, so "1" becomes 1, "001" becomes 11 180 | - If the string contains a valid floating-point format, such as "1.1", it is converted into the appropriate floating-point numeric value 181 | - If the string contains a valid hexadecimal format, such as "0xf", it is converted into an integer that matches the hexadecimal value 182 | - If the string is empty, it is converted to 0 183 | - If the string contains anything other than these previous formats, it is converted to *NaN* 184 | - When applied to objects, the *valueof()* method is called and the returned value is converted based on the previously described rules. If that conversion results in *NaN*, the *toString()* method is called and the rules for converting strings are applied 185 | - *parseInt()* 186 | - Can recognize various integer formats (decimal, octal, and hexadecimal) 187 | - Provide second argument the radix (number of digits) to use. If you know that the value you're parsing is in hexadecimal format, you can pass in the radix 16 as second argument 188 | - *parseFloat()* 189 | - Initial zeros are always ignored 190 | - There is no radix mode 191 | 192 | #### 3.4.5 The String Type 193 | ##### 3.4.5.1 Character Literals 194 | ##### 3.4.5.2 The Nature of Strings 195 | ##### 3.4.5.3 Converting to a String 196 | 197 | 198 | #### 3.4.6 The Object Type 199 | 200 | 201 | ### 3.5 Operators 202 | 203 | #### 3.5.1 Unary Operators 204 | ##### 3.5.1.1 Increment/Decrement 205 | ##### 3.5.1.2 Unary Plus and Minus 206 | 207 | #### 3.5.2 Bitwise Operators 208 | ##### 3.5.2.1 Bitwise NOT 209 | ##### 3.5.2.2 Bitwise AND 210 | ##### 3.5.2.3 Bitwise OR 211 | ##### 3.5.2.4 Bitwise XOR 212 | ##### 3.5.2.5 Left Shift 213 | ##### 3.5.2.6 Signed Right Shift 214 | ##### 3.5.2.7 Unsigned Right Shift 215 | 216 | #### 3.5.3 Boolean Operators 217 | #### 3.5.4 Multiplicative Operators 218 | #### 3.5.5 Additive Operators 219 | #### 3.5.6 Relational Operators 220 | #### 3.5.7 Equality Operators 221 | #### 3.5.8 Conditional Operators 222 | #### 3.5.9 Assignment Operators 223 | #### 3.5.10 Comma Operators 224 | 225 | 226 | ### 3.6 Statements 227 | #### 3.6.1 The if Statement 228 | #### 3.6.2 The do-while Statement 229 | #### 3.6.3 The while Statement 230 | #### 3.6.4 The for Statement 231 | #### 3.6.5 The for-in Statement 232 | #### 3.6.6 Labeled Statements 233 | #### 3.6.7 The break and continue Statement 234 | #### 3.6.8 The with Statement 235 | #### 3.6.9 The switch Statement 236 | 237 | 238 | ### 3.7 Functions 239 | #### 3.7.1 Understanding Arguments 240 | #### 3.7.2 No Overloading 241 | 242 | 243 | 244 | ## Chapter 4 Variables, Scope, and Memory 245 | 246 | ### 4.1 Primitive and Reference Values 247 | #### 4.1.1 Dynamic Properties 248 | #### 4.1.2 Copying values 249 | #### 4.1.3 Argument Passing 250 | #### 4.1.4 Determining Type 251 | 252 | ### 4.2 Execution Context and Scope 253 | #### 4.2.1 Scope Chain Augmentation 254 | #### 4.2.2 No Block-Level Scopes 255 | 256 | ### 4.3 Garbage Collection 257 | #### 4.3.1 Mark-and-Sweep 258 | #### 4.3.2 Reference Counting 259 | #### 4.3.3 Performance 260 | #### 4.3.4 Managing Memory 261 | 262 | 263 | ## Chapter 5 Reference Types 264 | 265 | ### 5.1 The Object Type 266 | 267 | ### 5.2 The Array Type 268 | #### 5.2.1 Detecting Arrays 269 | #### 5.2.2 Conversion Methods 270 | #### 5.2.3 Stack Methods 271 | #### 5.2.4 Queue Methods 272 | #### 5.2.5 Reordering Methods 273 | #### 5.2.6 Manipulation Methods 274 | #### 5.2.7 Location Methods 275 | #### 5.2.8 Iterative Methods 276 | #### 5.2.9 Reduction Methods 277 | 278 | ### 5.3 The Data Type 279 | #### 5.3.1 Inherited Methods 280 | #### 5.3.2 Data-Formatting Methods 281 | #### 5.3.3 Date/Time Component Methods 282 | 283 | ### 5.4 The RegExp Type 284 | #### 5.4.1 RegExp Instance Properties 285 | #### 5.4.2 RegExp Instance Methods 286 | #### 5.4.3 RegExp Constructor Properties 287 | #### 5.4.4 Pattern Limitations 288 | 289 | ### 5.5 The Function Type 290 | #### 5.5.1 No Overloading (Revisited) 291 | #### 5.5.2 Function Declarations versus Function Expressions 292 | #### 5.5.3 Functions as Values 293 | #### 5.5.4 Function Internals 294 | #### 5.5.5 Function Properties and Methods 295 | 296 | ### 5.6 Primitive Wrapper Types 297 | #### 5.6.1 The Boolean Type 298 | #### 5.6.2 The Number Type 299 | #### 5.6.3 The String Type 300 | 301 | ### 5.7 Singleton Built-in Objects 302 | #### 5.7.1 The Global Object 303 | #### 5.7.2 The Math Object 304 | 305 | 306 | ## Chapter 6 Object-Oriented Programming 307 | 308 | ### 6.1 Understanding Objects 309 | #### 6.1.1 Types of Properties 310 | #### 6.1.2 Defining Multiple Properties 311 | #### 6.1.3 Reading Property Attributes 312 | 313 | ### 6.2 Object Creation 314 | #### 6.2.1 The Factory Pattern 315 | #### 6.2.2 The Constructor Pattern 316 | #### 6.2.3 The Prototype Pattern 317 | #### 6.2.4 Combination Constructor/Prototype Pattern 318 | #### 6.2.5 Dynamic Prototype Pattern 319 | #### 6.2.6 Parasitic Constructor Pattern 320 | #### 6.2.7 Durable Constructor Pattern 321 | 322 | ### 6.3 Inheritance 323 | #### 6.3.1 Prototype Chaining 324 | #### 6.3.2 Constructor Stealing 325 | #### 6.3.3 Combination Inheritance 326 | #### 6.3.4 Prototypal Inheritance 327 | #### 6.3.5 Parasitic Inheritance 328 | #### 6.3.6 Parasitic Combination Inheritance 329 | 330 | 331 | ## Chapter 7 Function Expressions 332 | 333 | ### 7.1 Recursion 334 | 335 | ### 7.2 Closures 336 | #### 7.2.1 Closures and Variables 337 | #### 7.2.2 The this Object 338 | #### 7.2.3 Memory Leaks 339 | 340 | ### 7.3 Mimicking Block Scope 341 | 342 | ### 7.4 Private Variables 343 | #### 7.4.1 Static Private Variables 344 | #### 7.4.2 The Module Pattern 345 | #### 7.4.3 The Module-Augmentation Pattern 346 | 347 | 348 | ## Chapter 8 The Browser Object Model 349 | 350 | ### 8.1 The Window Object 351 | #### 8.1.1 The Global Scope 352 | #### 8.1.2 Window Relationships and Frames 353 | #### 8.1.3 Window Position 354 | #### 8.1.4 Window Size 355 | #### 8.1.5 Navigating and Opening Windows 356 | #### 8.1.6 Intervals and Timeouts 357 | #### 8.1.7 System Dialogs 358 | 359 | ### 8.2 The Location Object 360 | #### 8.2.1 Query String Arguments 361 | #### 8.2.2 Manipulating the Location 362 | 363 | ### 8.3 The Navigator Object 364 | #### 8.3.1 Detecting Plug-ins 365 | #### 8.3.2 Registering Handles 366 | 367 | ### 8.4 The screen Object 368 | 369 | ### 8.5 The history Object 370 | 371 | ## Chapter 9 Client Detection 372 | 373 | ### 9.1 Capability Detection 374 | #### 9.1.1 Safer Capability Detection 375 | #### 9.1.2 Capability Detection Is Not Browser Detection 376 | 377 | ### 9.2 Quirks Detection 378 | 379 | ### 9.3 User-Agent Detection 380 | #### 9.3.1 History 381 | #### 9.3.2 Working with User-Agent Detection 382 | #### 9.3.3 The Complete Script 383 | #### 9.3.4 Usage 384 | 385 | 386 | ## Chapter 10 The Document Object Model 387 | 388 | ### 10.1 Hierarchy of Nodes 389 | #### 10.1.1 The Node Type 390 | #### 10.1.2 The Document Type 391 | #### 10.1.3 The Element Type 392 | #### 10.1.4 The Text Type 393 | #### 10.1.5 The Comment Type 394 | #### 10.1.6 The CDATASection Type 395 | #### 10.1.7 The DocumentType Type 396 | #### 10.1.8 The DocumentFragment Type 397 | #### 10.1.9 The Attr Type 398 | 399 | ### 10.2 Working with the DOM 400 | #### 10.2.1 Dynamic Script 401 | #### 10.2.2 Dynamic Styles 402 | #### 10.2.3 Manipulating Tables 403 | #### 10.2.4 Using NodeLists 404 | 405 | 406 | ## Chapter 11 DOM Extensions 407 | 408 | ### 11.1 Selectors API 409 | #### 11.1.1 The querySelector() Method 410 | #### 11.1.2 The querySelectorAll() Method 411 | #### 11.1.3 The matchSelector() Method 412 | 413 | ### 11.2 Element Traversal 414 | 415 | ### 11.3 HTML5 416 | #### 11.3.1 Class-Related Additions 417 | #### 11.3.2 Focus Management 418 | #### 11.3.3 Changes to HTMLDocument 419 | #### 11.3.4 Character Set Properties 420 | #### 11.3.5 Customer Data Attributes 421 | #### 11.3.6 Markup Insertion 422 | #### 11.3.7 The scrollIntoView() Method 423 | 424 | ### 11.4 Proprietary Extensions 425 | #### 11.4.1 Document Mode 426 | #### 11.4.2 The children Property 427 | #### 11.4.3 The contains() Method 428 | #### 11.4.5 Scrolling 429 | 430 | 431 | ## Chapter 12 DOM Level 2 and 3 432 | 433 | ### 12.1 DOM Changes 434 | #### 12.1.1 XML Namespaces 435 | #### 12.1.2 Other Changes 436 | 437 | ### 12.2 Styles 438 | #### 12.2.1 Accessing Element Styles 439 | #### 12.2.2 Working with Style Sheets 440 | #### 12.2.3 Element Dimensions 441 | 442 | ### 12.3 Traversals 443 | #### 12.3.1 NodeIterator 444 | #### 12.3.2 TreeWalker 445 | 446 | ### 12.4 Ranges 447 | #### 12.4.1 Ranges in the DOM 448 | #### 12.4.2 Ranges in Internet Explorer 8 and Earlier 449 | 450 | 451 | ## Chapter 13 Events 452 | 453 | ### 13.1 Event Flow 454 | #### 13.1.1 Event Bubbling 455 | #### 13.1.2 Event capturing 456 | #### 13.1.3 DOM Event Flow 457 | 458 | ### 13.2 Event Handlers 459 | #### 13.2.1 HTML Event Handlers 460 | #### 13.2.2 DOM Level 0 Event Handlers 461 | #### 13.2.3 DOM Level 2 Event Handlers 462 | #### 13.2.4 Internet Explorer Event Handlers 463 | #### 13.2.5 Cross-Browser Event Handlers 464 | 465 | ### 13.3 The Event Object 466 | #### 13.3.1 The DOM Event Object 467 | #### 13.3.2 The Internet Explorer Event Object 468 | #### 13.3.3 Cross-Browser Event Object 469 | 470 | ### 13.4 Event Types 471 | #### 13.4.1 UI Events 472 | #### 13.4.2 Focus Events 473 | #### 13.4.3 Mouse and Wheel Events 474 | #### 13.4.4 Keyboard and Text Events 475 | #### 13.4.5 Composition Events 476 | #### 13.4.6 Mutation Events 477 | #### 13.4.7 HTML5 Events 478 | #### 13.4.8 Device Events 479 | #### 13.4.9 Touch and Gesture Events 480 | 481 | ### 13.5 Memory and Performance 482 | #### Event Delegation 483 | #### Removing Event Handlers 484 | 485 | ### 13.6 Simulating Events 486 | #### DOM Event Simulation 487 | #### Internet Explorer Event Simulation 488 | 489 | 490 | ## Chapter 14 Scripting Forms 491 | 492 | ### 14.1 Form Basics 493 | #### 14.1.1 Submitting Forms 494 | #### 14.1.2 Resetting Forms 495 | #### 14.1.3 Form Fields 496 | 497 | ### 14.2 Scripting Text Boxes 498 | #### 14.2.1 Text Selection 499 | #### 14.2.2 Input Filtering 500 | #### 14.2.3 Automatic Tab Forward 501 | #### 14.2.4 HTML5 Constraint Validation API 502 | 503 | ### 14.3 Scripting Select Boxes 504 | #### 14.3.1 Options Selection 505 | #### 14.3.2 Adding Options 506 | #### 14.3.3 Removing Options 507 | #### 14.3.4 Moving and Reordering Options 508 | 509 | ### 14.4 Form Serialization 510 | 511 | ### 14.5 Rich Text Editing 512 | #### 14.5.1 Using contenteditable 513 | #### 14.5.2 Interacting with Rich Text 514 | #### 14.5.3 Rich Text Selections 515 | #### 14.5.4 Rich Text in Forms 516 | 517 | 518 | ## Chapter 15 Graphics With Canvas 519 | 520 | ### 15.1 Basic Usage 521 | 522 | ### 15.2 The 2D Context 523 | #### 15.2.1 Fills and Strokes 524 | #### 15.2.2 Drawing Rectangles 525 | #### 15.2.3 Drawing Paths 526 | #### 15.2.4 Drawing Text 527 | #### 15.2.5 Transformations 528 | #### 15.2.6 Drawing Images 529 | #### 15.2.7 Shadows 530 | #### 15.2.8 Gradients 531 | #### 15.2.9 Patterns 532 | #### 15.2.10 Working with Image Data 533 | #### 15.2.11 Compositing 534 | 535 | ### 15.3 WebGL 536 | #### 15.3.1 Typed Arrays 537 | #### 15.3.2 The WebGL Context 538 | #### 15.3.3 Support 539 | 540 | 541 | ## Chapter 16 HTML5 Scripting 542 | 543 | ### 16.1 Cross-Document Messaging 544 | 545 | ### 16.2 Native Drag and Drop 546 | #### 16.2.1 Drag-and-Drop Events 547 | #### 16.2.2 Custom Drop Targets 548 | #### 16.2.3 The dataTransfer Object 549 | #### 16.2.4 DropEffect and effectAllowed 550 | #### 16.2.5 Draggability 551 | #### 16.2.6 Additional Members 552 | 553 | ### 16.3 Media Elements 554 | #### 16.3.1 Properties 555 | #### 16.3.2 Events 556 | #### 16.3.3 Custom Media Players 557 | #### 16.3.4 Codec Support Detection 558 | #### 16.3.5 The Audio Type 559 | 560 | ### 16.4 History State Management 561 | 562 | ## Chapter 17 Error Handling and Debugging 563 | 564 | ### 17.1 Browser Error Reporting 565 | #### 17.1.1 Internet Explorer 566 | #### 17.1.2 Firefox 567 | #### 17.1.3 Safari 568 | #### 17.1.4 Opera 569 | #### 17.1.5 Chrome 570 | 571 | ### 17.2 Error Handling 572 | #### 17.2.1 The try-catch Statement 573 | #### 17.2.2 Throwing Errors 574 | #### 17.2.3 The error Event 575 | #### 17.2.4 Error-handling Strategies 576 | #### 17.2.5 Identify Where Errors Might Occur 577 | #### 17.2.6 Distinguishing between Fatal and Nonfatal Errors 578 | #### 17.2.7 Log Errors to the Server 579 | 580 | ### 17.3 Debugging Techniques 581 | #### 17.3.1 Logging Messages to a Console 582 | #### 17.3.2 Logging Messages to the Page 583 | #### 17.3.3 Throwing Errors 584 | 585 | ### 17.4 Common Internet Explorer Errors 586 | #### 17.4.1 Operation Aborted 587 | #### 17.4.2 Invalid Character 588 | #### 17.4.3 Member Not Found 589 | #### 17.4.4 Unknown Runtime Error 590 | #### 17.4.5 Syntax Error 591 | #### 17.4.6 Syntax Error 592 | #### 17.4.7 The System Cannot Locate the Resource Specified 593 | 594 | 595 | ## Chapter 18 XML in JavaScript 596 | 597 | ### 18.1 XML DOM Support in Browsers 598 | #### 18.1.1 DOM Level 2 Core 599 | #### 18.1.2 The DOMParser Type 600 | #### 18.1.3 The XMLSerializer Type 601 | #### 18.1.4 XML in Internet Explorer 8 and Earlier 602 | #### 18.1.5 Cross-Browser XML Processing 603 | 604 | ### 18.2 XPath Support in Browsers 605 | #### 18.2.1 DOM Level 3 XPath 606 | #### 18.2.2 XPath in Internet Explorer 607 | #### 18.2.3 Cross-Browser XPath 608 | 609 | ### 18.3 XSLT Support in Browsers 610 | #### 18.3.1 XSLT in Internet Explorer 611 | #### 18.3.2 The XSLTProcessor Type 612 | #### 18.3.3 Cross-Browser XSLT 613 | 614 | 615 | ## Chapter 19 ECMAScript For XML 616 | 617 | ### 19.1 E4X Types 618 | #### 19.1.1 The XML Type 619 | #### 19.1.2 The XMLList Type 620 | #### 19.1.3 The Namespace Type 621 | #### 19.1.4 The QName Type 622 | 623 | ### 19.2 General Usage 624 | #### 19.2.1 Accessing Attributes 625 | #### 19.2.2 Other Node Type 626 | #### 19.2.3 Querying 627 | #### 19.2.4 XML Construction and Manipulation 628 | #### 19.2.5 Parsing and Serialization Options 629 | #### 19.2.6 Namespaces 630 | 631 | ### 19.3 Other Changes 632 | 633 | ### 19.4 Enabling Full E4X 634 | 635 | 636 | ## Chapter 20 JSON 637 | 638 | ### 20.1 Syntax 639 | #### 20.1.1 Simple Values 640 | #### 20.1.2 Objects 641 | #### 20.1.3 Arrays 642 | 643 | ### 20.2 Parsing and Serialization 644 | #### 20.2.1 The JSON Object 645 | #### 20.2.2 Serialization Options 646 | #### 20.2.3 Parsing Options 647 | 648 | 649 | ## Chapter 21 AJAX and COMET 650 | 651 | ### 21.1 The XMLHttpRequest Object 652 | #### 21.1.1 XHR Usage 653 | #### 21.1.2 HTTP Headers 654 | #### 21.1.3 GET Requests 655 | #### 21.1.4 POST Requests 656 | 657 | ### 21.2 XMLHttpRequest Level 2 658 | #### The FormData Type 659 | #### Timeouts 660 | #### The overrideMimeType() Method 661 | 662 | ### 21.3 Progress Events 663 | #### The load Event 664 | #### The Progress Event 665 | 666 | ### 21.4 Cross-Origin Resource Sharing 667 | #### 21.4.1 CORS in Internet Explorer 668 | #### 21.4.2 CORS in other Browsers 669 | #### 21.4.3 Preflighted Requests 670 | #### 21.4.4 Credentialed Requests 671 | #### 21.4.5 Cross-Browser CORS 672 | 673 | ### 21.5 Alternate Cross-Domain Techniques 674 | #### 21.5.1 Image Pings 675 | #### 21.5.2 Comet 676 | #### 21.5.3 Server-Sent Event 677 | #### 21.5.4 Web Sockets 678 | #### 21.5.5 SSE versus Web Sockets 679 | 680 | ### 21.6 Security 681 | 682 | 683 | ## Chapter 22 Advanced Techniques 684 | 685 | ### 22.1 Advanced Functions 686 | #### 22.1.1 Safe Type Detection 687 | #### 22.1.2 Scope-Safe Constructors 688 | #### 22.1.3 Lazy Loading Functions 689 | #### 22.1.4 Function Binding 690 | #### 22.1.5 Function Currying 691 | 692 | ### 22.2 Tamper-Proof Objects 693 | #### 22.2.1 Nonextensible Objects 694 | #### 22.2.2 Sealed Objects 695 | #### 22.2.3 Frozen Objects 696 | 697 | ### 22.3 Advanced Timers 698 | #### 22.3.1 Repeating Timers 699 | #### 22.3.2 Yielding Processes 700 | #### 22.3.3 Function Throttling 701 | 702 | ### 22.4 Custom Events 703 | 704 | ### 22.5 Drag and Drop 705 | #### 22.5.1 Fixing Drag Functionality 706 | #### 22.5.2 Adding Custom Events 707 | 708 | 709 | ## Chapter 23 Offline Applications and Client-side Storage 710 | 711 | ### 23.1 Offline Detection 712 | 713 | ### 23.2 Application Cache 714 | 715 | ### 23.3 Data Storage 716 | #### 23.3.1 Cookies 717 | #### 23.3.2 Internet Explorer User Data 718 | #### 23.3.3 IndexedDB 719 | 720 | 721 | ## Chapter 24 Best Practices 722 | 723 | ### 24.1 Maintainability 724 | #### 24.1.1 What is Maintainable Code? 725 | #### 24.1.2 Code Conventions 726 | #### 24.1.3 Loose Coupling 727 | #### 24.1.4 Programming Practices 728 | 729 | ### 24.2 Performance 730 | #### 24.2.1 Be Scope-Aware 731 | #### 24.2.2 Choose the Right Approach 732 | #### 24.2.3 Minimize Statement Count 733 | #### 24.2.4 Optimize DOM Interactions 734 | 735 | ### 24.3 Deployment 736 | #### 24.3.1 Build Process 737 | #### 24.3.2 Validation 738 | #### 24.3.3 Compression 739 | 740 | 741 | ## Chapter 25 Emerging APIs 742 | 743 | ### 25.1 RequestAnimationFrame() 744 | #### 25.1.1 Early Animation Loops 745 | #### 25.1.2 Problems with Intervals 746 | #### 25.1.3 mozRequestAnimationFrame 747 | #### 25.1.4 webkitRequestAnimationFrame and msRequestAnimationFrame 748 | 749 | ### 25.2 Page Visibility API 750 | 751 | ### 25.3 Geolocation API 752 | 753 | ### 25.4 File API 754 | #### 25.4.1 The FileReader Type 755 | #### 25.4.2 Partial Reads 756 | #### 25.4.3 Object URLs 757 | #### 25.4.4 Drag-and-Drop File Reading 758 | #### 25.4.5 File Upload with XHR 759 | 760 | ### 25.5 Web Timing 761 | 762 | ### 25.6 Web Workers 763 | #### 25.6.1 Using a Worker 764 | #### 25.6.2 Worker Global Scope 765 | #### 25.6.3 Including Other Scripts 766 | #### 25.6.4 The Future of Web Workers 767 | -------------------------------------------------------------------------------- /Books/自控力.md: -------------------------------------------------------------------------------- 1 | # Notes for <自控力> 2 | 3 | - English Name: The Willpower Instinct 4 | - Author: Kelly Mcgonigal 5 | 6 | ## Ch1 我要做，我不要，我想要：什么是意志力？为什么意志力至关重要？ 7 | - 意志力就是驾驭“我要做” “我不要” 和 “我想要” 这三种力量 8 | 9 | ### 1.1 我们为什么会有意志力？ 10 | - 每个人的意志力都是与生俱来的，但有些人意志力更强。无论从哪个方面看，能够更好地控制自己的注意力、情绪和行为的人，都会活的更幸福 11 | 12 | ### 1.2 “我要做” “我不要” 和 “我想要” 的神经学原理 13 | - 人类的前额皮质位是于额头和眼睛后面的神经区，负责控制人的运动，比如走路、跑步、抓取、推拉等，这些都是自控力的表现 14 | 15 | ### 1.3 两个自我导致的问题 16 | - 我们的脑袋里有两个自我，一个自我任意妄为、及时行乐，另一个自我则克制冲动、深谋远虑 17 | - 意志力挑战就是两个自我的对抗 - 明智的你想要什么？冲动的你又想要什么？ 18 | - 在意志力挑战中获胜的关键，在于学会利用原始本能，而不是反抗这些本能 19 | - 注意力分散的人更容易向诱惑屈服，如果心里在想其他事，那么冲动就会主导你的选择 20 | 21 | ### 1.4 训练大脑，增强意志力 22 | - 冥想 —— 科学证明经常性让大脑冥想，不仅会让人变得擅长冥想，还会提升自控力，注意力，管理压力，克制冲动和认识自我的能力 23 | - 冥想一段时间后，大脑就会变成调试良好的意志力机器。在前额皮质和影响自我意识的区域里，大脑灰质都会增多 24 | - 专心呼吸是一种简单有效的冥想技巧，它不但能训练大脑，还能增强意志力。它能减轻你的压力，指导大脑处理内在的干扰（冲动、担忧、欲望）和外在的诱惑（声音、画面、气味）。 25 | - 自控力是一个过程，在这个过程中，人们不断偏离目标，又不断把注意力收回来 26 | -------------------------------------------------------------------------------- /Courses/CMU_15213_Introduction_to_Computer_Systems/Summary.md: -------------------------------------------------------------------------------- 1 | # CMU 15-213 Introduction to Computer Systems Summary 2 | 3 | ## Overview 4 | - Version: 2017 Fall 5 | - Lecturer: [Randy Bryant](http://www.cs.cmu.edu/~bryant/), [Brian Railing](http://www.cs.cmu.edu/~bpr/), [Phillip B. Gibbons](http://www.cs.cmu.edu/~gibbons/) 6 | - [Course Website](http://www.cs.cmu.edu/afs/cs/academic/class/15213-f17/www/index.html) 7 | - [Lab Website](http://csapp.cs.cmu.edu/3e/labs.html) 8 | - Text Books: 9 | - Randal E. Bryant and David R. O'Hallaron, 10 | 11 | - Brian W. Kernighan and Dennis M. Ritchie 12 | -------------------------------------------------------------------------------- /Courses/Cornell_CS2043_Unix_Tools_And_Scripting/Summary.md: -------------------------------------------------------------------------------- 1 | # Cornell CS2043 Unix Tools and Scripting Summary 2 | 3 | ## Some Points 4 | - Version: 2019 Spring 5 | - [Course Website](http://www.cs.cornell.edu/courses/cs2043/2019sp/) 6 | 7 | ## Lecture 1 Introduction 8 | - What is Shell? 9 | - A really easy programming language 10 | - A really verbose dialogue box 11 | - Typed commands replace clicked button 12 | - Raw User Interface 13 | - Why do we still need shell? 14 | - Scripting and Automation 15 | - Very old, very new, or very simple program 16 | - low-overhead, no-frills system access 17 | 18 | ## Lecture 2 SSH & Navigating the Unix File Systems 19 | ### 2.1 SSH 20 | - Working remotely via SSH 21 | - The server you are logging into is called the *remote* (host) 22 | - The user you are referred to as the *client* 23 | - The remote port us an integer, by default 22 24 | - Logging into a remote host: the SSH command 25 | - `ssh @remote` 26 | - *username* is the username on the remote host 27 | - *remote* is the url of the server you want to log into 28 | - IP address, e.g., 128.253.141.34 29 | - Symbolic name, e.g., *wash.cs.cornell.edu* 30 | - Use *@* to specify username 31 | - `ssh username@remote` 32 | 33 | ### 2.2 Navigating the Unix File Systems 34 | - **Notation** 35 | - Some-command [opt1] \[opt2] [arg2] 36 | - [brackets] indicate optional items (flags / arguments) 37 | - : arg1 is required 38 | - \[arg2]: command supports multiple arguments 39 | - **`pwd`** (Print Working Directory) 40 | - Prints the "full" path of the current directory 41 | - The *-P* flag is needed when symbolic links are present 42 | - Handy on minimalist systems when you get lost 43 | - Can be used in scripts 44 | - **`ls`** (List Directory Contents) 45 | - Lists directory contents (including subdirectories) 46 | - Works like the *dir* command in Windows 47 | - The *-l* flag lists detailed file / directory information 48 | - Use -a to list hidden files 49 | - **`cd [directory name]`** (Change Directory) 50 | - changes directory to [directory name] 51 | - If not given a destination defaults to the user's home directory 52 | - Reminder: the home directory is `~` 53 | - **paths** 54 | - A path describes how to access a file 55 | - Most paths are relative paths - they start in your current working directory 56 | - Simple paths are just file names in the current directory 57 | - Example: I'm in ~, which contains course; while I'm in ~ the path course will refer to this directory 58 | - A path can traverse directories using the / separator 59 | - example: the path `~/course` will always mean the directory course in my home directory, no matter what my current working directory is 60 | - example: to get to the directory bar in the directory baz in the directory ~, I could `cd ~/bar/baz` 61 | - **Relative Path Shortcuts** 62 | - **`~`** current user's home directory 63 | - **`.`** the current directory 64 | - **`..`** the parent directory of the current directory 65 | - **`-`** for **cd**, return to previous working directory 66 | - **The Unix Filesystem** 67 | - Unlike Windows, UNIX has a single global "root" directory (instead of a root directory for each disk or volume) 68 | - The root directory is just `/` 69 | - All files and directories are case sensitive 70 | - hello.txt != hEllo.txt 71 | - Directories are separated by / in Unix instead of \ in windows 72 | - Unix: `/home/mpm288/lemurs` 73 | - Windows: `E:\Documents\lemurs` 74 | - Absolute paths start with a /, and always refer to the root directory (and never care about the current working directory) 75 | - Hidden files and directories begin with a "." 76 | - e.g. *`.git/`* (a hidden directory) 77 | - e.g. *`..`*(your parent directory) 78 | - **`/dev`**: Hardware devices, like your hard drive, USB devices 79 | - `/lib`: Stores libraries, along with **`/usr/lib`**, **`/usr/local/lib`**, etc. 80 | - **`/mnt`**: Frequently used to mount (access) disk drives 81 | - Your second hard drive, for example, instead of E:\, /mnt/better_name_than_E 82 | - **`/media`**: For accessing removable storage drivers, like flash drives, CDs, etc 83 | - **`/usr`**: Mostly user-installed programs and amenities 84 | - **`/etc`**: System-wide settings 85 | - **Program Editions** 86 | - Programs usually installed in one of the "binaries" directories: 87 | - **`/bin`**: System programs 88 | - **`/usr/bin`**: System-managed user program 89 | - **`/usr/local/bin`**: Manually-installed user program 90 | - **Personal Files** 91 | - Your personal files are in your home directory (and its subdirectories), which is usually located at 92 | - Linux: `/home/username` 93 | - Mac: `/Users/username` 94 | - There is also a built-in alias for it: `~` 95 | - **`cat [files]`** (Concatenate files and print them) 96 | - Prints ("concatenates") the listed files to your terminal 97 | - With no arguments, does something more advanced 98 | - Note: if you run *cat* without any arguments and your console is just hanging, hold CTRL and press C to stop program 99 | - **`touch [flag] `** (Change File Timestamps) 100 | - The easiest way to create an empty file 101 | - Adjust the timestamp of the specified file 102 | - With no flags uses the current date and time 103 | - If the file does not exist, touch creates it 104 | - File extensions (.txt, .c, .py, etc) often don't matter in Unix 105 | - Using *touch* to create a file results in a blank plain-text file, you don't need to add .txt if you don't want to 106 | - **`mkdir [flags] <...> `** (Make directories) 107 | - Can use relative or absolute paths 108 | - Not restricted to making directories in the current directory only 109 | - Need to specify at least one directory name 110 | - Can specify multiple, separated by spaces 111 | - The *-p* flag is commonly used in scripts: 112 | - Makes all parent directories if they do not exist 113 | - Convenient because if the directory exists, *mkdir* will not fail 114 | - **`rm [flag] `** (Remove Files or Directories) 115 | - Removes the file 116 | - Remove multiple files with wildcards 117 | - Remove every file in the current directory: `rm *` 118 | - Remove every .jpg file in the current directory: `rm *.jpg` 119 | - Prompt before deletion: rm -i 120 | - **`rmdir [flag] `** (Remove Directory) 121 | - Removes an empty directory 122 | - Throws an error if the directory is not empty 123 | - You are encouraged to use this command: failing on non-empty can and will save you 124 | - To delete a directory and all its subdirectories, we pass em the flag -r (for recursive) 125 | - `rm -r /home/mpm288/oldstuff` 126 | - This is DANGEROUS! 127 | - **`cp [flags] `** (Copy) 128 | - Copies from one location to another 129 | - To copy multiple files, use wildcards (such as *) 130 | - Globs / pattern can only be used fo 131 | - must be explicit and singularly defined 132 | - To copy a complete directory: `cp -r ` 133 | - To overwrite more aggressively: `cp -f ` 134 | - **`mv [flag] `** (Move or Rename Files and Directories) 135 | - Unlike the `cp` command, the move command automatically recurses for directories 136 | - Moves a file or directory from one place to another 137 | - Also used for renaming, rename `` to `` 138 | - `mv badFolderName correctName` 139 | - **Summary** 140 | - `ls`: list directory contents 141 | - `cd`: change directory 142 | - `pwd`: print working directory 143 | - `rm`: remove file 144 | - `rmdir`: remove directory 145 | - `cp`: copy file 146 | - `mv`: move file 147 | -------------------------------------------------------------------------------- /Courses/Princeton_Algorithms/Summary.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Princeton_Algorithms/Summary.md -------------------------------------------------------------------------------- /Courses/UCBerkeley_CS61B_Data_Structures/Summary.md: -------------------------------------------------------------------------------- 1 | # UC-Berkeley CS61B Data Structures Summary 2 | 3 | 4 | ## Some Points 5 | - Version: 2019 Spring 6 | - Lecturer: [Josh Hug](https://www2.eecs.berkeley.edu/Faculty/Homepages/joshhug.html) 7 | 8 | 9 | 10 | ## Resources 11 | - [Course Website (Spring 2019)](https://sp19.datastructur.es/) 12 | - [A minitext book called \ written by Josh Hug (The Lecturer)](https://joshhug.gitbooks.io/obscurantism-in-java-first-edition/) 13 | 14 | 15 | 16 | ## Lecture 1 Intro, Hello World Java 17 | - **Introduction** 18 | - What is this course about? 19 | - Writing code that runs efficiently 20 | - Good Algorithms 21 | - Good Data Structure 22 | - Writing code efficiently 23 | - Designing, building, testing, and debugging large programs 24 | - Use of programming tools 25 | - Git, IntelliJ, JUnit, and various command line tools 26 | - JAVA (not the focus of the course) 27 | - Assuming solid foundation in programming fundamentals, including: Object-Oriented programming, recursion, lists and trees 28 | - **Course Logistics** 29 | - *Phase 1*: Programming Intensive Introduction to Java 30 | - Weeks 1-4 31 | - One browser-based programming HW (HW0) 32 | - Three labs to introduce you various tools 33 | - Two projects (proj0 and proj1) 34 | - *Phase 2*: Data Structures 35 | - Weeks 5-10 36 | - Incredibly important and foundational material: Expect an CS job interview to learn heavily on this part of the course 37 | - Two medium sized HWs (HW1, HW2) and one small HW (HW3) 38 | - Application and deeper insight into data structure 39 | - One large project (Proj 2A/2B) 40 | - No autograder. You're responsible for the correctness of your code 41 | - Standard labs implement data structures (e.g. hash table) 42 | - Challenge labs are more like hard puzzles using data structures 43 | - *Phase 3*: Algorithms and Software Engineering 44 | - Weeks 10-14 45 | - Labs: Implement a basic algorithm (e.g quick sort) 46 | - Challenge labs: Hard data structure / algorithms puzzles 47 | - One medium sized HW: Implement an AI that solves problems using A* algorithm 48 | - Two projects: 49 | - Proj2C: BearMaps. Uses data structure from proj2A/2B and algorithm from HW4 to implement a browser-based mapping application 50 | - Proj 3: Build Your Own World: An open ended project where you build a 2D world with physics according to your own design 51 | - **Hello World** 52 | 53 | ## Lecture 2 Defining and Using Classes 54 | -------------------------------------------------------------------------------- /Courses/Udemy_Ultimate_AWS_Certified_Solutions_Architect_Associate_2021/Summary.md: -------------------------------------------------------------------------------- 1 | # []([https://www.udemy.com/course/aws-certified-solutions-architect-associate-saa-c02/](https://www.udemy.com/course/aws-certified-solutions-architect-associate-saa-c02/)) Summary 2 | 3 | ## Section 1: Introduction - AWS Certified Solutions Architect Associate 4 | 5 | ### 1. Course Learning Contest 6 | 7 | ### 2. Course Introduction - AWS Certified Solutions Architect Associate 8 | 9 | ### 3. PLEASE READ: Lectures you can skip if you took a course from me before 10 | 11 | ### 4. Creating and AWS Account 12 | 13 | ### 5. AWS Account Activation Troubleshooting 14 | 15 | ### 6. AWS Budget Setup 16 | 17 | ### 7. Important Message 18 | 19 | ### 8. About your instructor 20 | 21 | ### 9. How to read an AWS Bill 22 | 23 | ## Section 2: Code & Slides Download 24 | 25 | ### 10. Slides and Code Download 26 | 27 | ## Section 3: AWS Fundamentals: IAM & EC2 28 | 29 | ### 11. AWS Fundamentals - Section Introduction 30 | 31 | ### 12. AWS Regions and AZs 32 | 33 | - AWS Availability Zones 34 | - Each Region has many availability zones (usually 3, min is 2, max is 6). Example: 35 | - ap-southeast-2a 36 | - ap-southeast-2b 37 | - ap-southeast-2c 38 | - Each availability zone (AZ) is one or more discrete data centers with redundant power, networking, and connectivity 39 | - They're separate from each other, so that they're isolated from disasters 40 | - They're connected with high bandwidth, ultra-low latency networking 41 | 42 | ### 13. IAM Introduction 43 | 44 | - IAM Introduction 45 | - IAM (Identity and Access Management) 46 | - Your whole AWS security is there: 47 | - Users 48 | - Groups 49 | - Roles 50 | - Root account should never be used (and shared) 51 | - Users must be created with proper permissions 52 | - IAM is at the center of AWS 53 | - Policies are written in JSON (JavaScript Object Notation) 54 | - IAM has a global view 55 | - MFA (Multi Factor Authentication) can be setup 56 | - IAM has predefined "managed policies" 57 | - It's best to give users the minimal amount of permissions they need to perform their job (least privilege principles) 58 | - IAM Federation 59 | - Big enterprises usually integrate their own repository of users with IAM 60 | - This way, one can login into AWS using their company credentials 61 | - Identity Federation uses the SAML standard (Active Directory) 62 | - IAM 101 Brain Dump 63 | - One IAM User per PHYSICAL PERSON 64 | - One IAM Role per Application 65 | - IAM credentials should NEVER BE SHARED 66 | - Never, ever, ever, ever, write IAM credentials in code. EVER 67 | - And even less, NEVER EVER EVER COMMIT YOUR IAM credentials 68 | - Never use the ROOT account except for initial setup 69 | - Never use ROOT IAM Credentials 70 | 71 | ### 14. IAM Hands On 72 | 73 | ### 15. About the EC2 Console Changes 74 | 75 | ### 16. EC2 Introduction 76 | 77 | - What is EC2? 78 | - EC2 is one of most popular of AWS offering 79 | - It mainly consists in the capability of: 80 | - Renting virtual machines (EC2) 81 | - Storing data on virtual drives (EBS) 82 | - Distributing load across machines (ELB) 83 | - Scaling the services using an auto-scaling group (ASG) 84 | - Knowing EC2 is fundamental to understand how the Cloud works 85 | - 86 | 87 | ### 17. SSH Overview 88 | 89 | ### 18. How to SSH using Linux or Mac 90 | 91 | - What is SSH? 92 | 93 | ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7ab86d2c-4701-48ac-b627-7e5034077f78/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7ab86d2c-4701-48ac-b627-7e5034077f78/Untitled.png) 94 | 95 | ### 19. How to SSH using Windows 96 | 97 | ### 20. How to SSH using Windows 10 98 | 99 | ### 21 SSH Troubleshooting 100 | 101 | ### 22. EC2 Instance connect 102 | 103 | ### 23. Introduction to Security Groups 104 | 105 | - Introduction 106 | 107 | ### 24. Security Groups Deep Dive 108 | 109 | - Deeper Dive 110 | 111 | ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5a5a204a-fd81-40f9-abd0-eb36ec3969d4/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5a5a204a-fd81-40f9-abd0-eb36ec3969d4/Untitled.png) 112 | 113 | - Security Group is like a firewall outside your EC2 Instance 114 | 115 | ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0022c063-626f-4ec8-b420-1bf1e39a69f1/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0022c063-626f-4ec8-b420-1bf1e39a69f1/Untitled.png) 116 | 117 | - Security Groups Good to know 118 | - Can be attached to multiple instances 119 | - Locked down to a region / VPC combination 120 | - Does live "outside" the EC2 - if traffic is blocked the EC2 instance won't see it 121 | - It's good to maintain one separate security group for SSH access 122 | - If your application is not accessible (time out), then it's a security group issue 123 | - If your application gives a "connection refused" error, then it's an application error or it's not launched 124 | - All inbound traffic is blocked by default 125 | - All outbound traffic is authorised by default 126 | - Referencing other security groups Diagram 127 | 128 | ### 25. Private vs Public vs Elastic IP 129 | 130 | - Private vs Public IP (IPv4) 131 | - Networking has two sorts of IPs. IPv4 and IPv6 132 | - IPv4: 1.160.10.240 133 | - IPv6: 3ffe: 1900:4545:3:200:f8ff:fe21:67cf 134 | - In this course, we will only be using IPv4 135 | - IPv4 is still the most common format used online 136 | - IPv6 is newer and solves problems for the Internet of Things (IoT) 137 | - IPv4 allows for 3.7 billion different addresses in the public space 138 | - IPv4: [0-255].[0-255].[0-255].[0-255] 139 | - Private vs Public IP (IPv4) Examples 140 | - Fundamental Differences 141 | - Public IP: 142 | - Public IP means the machine can be identified on the internet (WWW) 143 | - Must be unique across the whole web (not two machines can have the same public IP) 144 | - Can be geo-located easily 145 | - Private IP: 146 | - Private IP means the machine can only be identified on a private network only 147 | - The IP must be unique across the private network 148 | - BUT two different private networks (two companies) can have the same IPs 149 | - Machines connect to WWW using an internet gateway (a proxy) 150 | - Only a specified range of IPs can be used as private IP 151 | - Elastic IPs 152 | - When you stop and then start an EC2 instance, it can change its public IP 153 | - If you need to have a fixed public IP for your instance, you need and Elastic IP 154 | - An Elastic IP is a public IPv4 IP you own as long as you don't delete it 155 | - You can attach it too one instance at a time 156 | - With an Elastic IP address, you can mask the failure of an instance of or software by rapidly remapping the address to another instance in your account 157 | - You can only have 5 Elastic IP in your account (you can ask AWS to increase that) 158 | - Overall, try to avoid using Elastic IP 159 | - They often reflect poor architectural decisions 160 | - Instead, use a random public IP and register a DNS name to it 161 | - Or as we'll see later, use a Load Balancer and don't use a public IP 162 | - In AWS EC2 - Hands On 163 | - By default, your EC2 machine comes with: 164 | - A private IP for the internal AWS Network 165 | - A public IP, for the WWW 166 | - When we are doing SSH into our EC2 machines 167 | - We can't use a private IP, because we are not in the same network 168 | - We can only use the public IP 169 | - If your machine is stopped and then started 170 | - **the public IP can change** 171 | 172 | ### 26. Private vs Public vs Elastic IP Hands On 173 | 174 | ### 27. Install Apache on EC2 175 | 176 | ### 28. EC2 User Data 177 | 178 | - EC2 User Data 179 | - It is possible to bootstrap our instances using an **EC2 User data** script 180 | - **bootstrapping** means launching commands when a machine starts 181 | - That script is **only run once** at the instance **first start** 182 | - EC2 user data is used to automate boot tasks such as: 183 | - Installing updates 184 | - Installing software 185 | - Downloading common files from the internet 186 | - Anything you can think of 187 | - The EC2 User Data Script runs with the root user 188 | - EC2 User Data Hands On 189 | - We want to make sure that this EC2 instance has an Apache HTTP server installed on it - to display a simple web page 190 | - For it, we are going to write a user-data script 191 | - This script will be executed at the first boot of the instance 192 | 193 | ### Quiz 1: IAM & EC2 Mid Way Quiz 194 | 195 | ### 29. EC2 Instances Launch Types 196 | 197 | - Types 198 | - On Demand Instances: short workload, predictable pricing 199 | - Reserved: (MINIMUM 1 year) 200 | - Reserved Instances: long workloads 201 | - Convertible Reserved Instances: long workloads with flexible instances 202 | - Scheduled Reserved Instances: example - every Thursday between 3 and 6 pm 203 | - Spot Instances: short workloads, for cheap, can lose instances (less reliable) 204 | - Dedicated Instances: no other customers will share your hardware 205 | - Dedicated Hosts: book an entire physical server, control instance placement 206 | - EC2 On Demand 207 | - Pay for what you use (billing per second, after the first minute) 208 | - Has the highest cost but no upfront payment 209 | - No long term commitment 210 | - Recommended for short-term and un-interrupted workloads, where you can't predict how the application will behave 211 | - EC2 Reserved Instances 212 | - Up to 75% discount compared to On-demand 213 | - Pay upfront for what you use with long term commitment 214 | - Reservation period can be 1 or 3 years 215 | - Reserve a specific instance type 216 | - Recommended for steady state usage applications (think database) 217 | - Convertible Reserved Instance 218 | - can change the EC2 instance type 219 | - Up to 54% discount 220 | - Scheduled Reserved Instances 221 | - launch within time window you reserve 222 | - When you require a fraction of day / week / month 223 | - EC2 Spot Instances 224 | - Can get a discount of up to 90% compared to On-demand 225 | - Instances that you can "lose" at any point of time if your max price is less than the current spot price 226 | - The MOST cost-efficient instances in AWS 227 | - Useful for workloads that are resilient to failure 228 | - Batch jobs 229 | - Data analysis 230 | - Image processing 231 | - ... 232 | - Not great for critical jobs or databases 233 | - Great combo: Reserved Instances for baseline + On-Demand & Spot for peaks 234 | - EC2 Dedicated Hosts 235 | - Physical dedicated EC2 server for your use 236 | - Full control of EC2 instance placement 237 | - Visibility into the underlying sockets / physical cores or the hardware 238 | - Allocated for your account for a 3 year period reservation 239 | - More expensive 240 | - Useful for software that have complicated licensing model (BYOL - Bring Your Own License) 241 | - Or for companies that have strong regulatory or compliance needs 242 | - EC2 Dedicated Instances 243 | - Instances running on hardware that's dedicated to you 244 | - May share hardware with other instances in the same account 245 | - No control over instance placement (can move hardware after Stop / Start) 246 | 247 | ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7c978055-7c04-4b78-839c-e90ee9a66b61/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7c978055-7c04-4b78-839c-e90ee9a66b61/Untitled.png) 248 | 249 | ### 30. Spot Instances & Spot Fleet 250 | 251 | - EC2 Spot Instance Requests 252 | - Can get a discount of up to 90% compared to Ondemand 253 | - Define max spot price and get the instance while current spot price < max 254 | - The hourly spot price varies based on offer and capacity 255 | - If the current spot price > your max price you can choose to stop or terminate your instance with a 2 minute grace period 256 | - Other stratrgy: Spot Block 257 | - "Block" spot instance during a specified time frame (1 to 6 hours) without interruptions 258 | - In rare situations, the instance may be reclaimed 259 | - Used for batch jobs, data analysis, or workloads that are resilient to failures 260 | - Not great for critical jobs or databases 261 | - How to terminate Spot Instances? 262 | 263 | ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6d11375f-b3ed-4d7f-a664-9634333857d8/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6d11375f-b3ed-4d7f-a664-9634333857d8/Untitled.png) 264 | 265 | - Spot Fleets 266 | - Spot Fleets = set of Spot Instances + (optinal) On-Demand Instances 267 | - The Spot Fleet will try to meet the target capacity with price constraints 268 | - Define possible launch pools: instance type (m5.large), OS, Availability Zone 269 | - Can have multiple launch pools, so that the fleet can choose 270 | - Spot Fleet stops launching instances when reaching capacity or max cost 271 | - Strategies to allocate Spot Instance 272 | - lowestPrice: from the pool with the lowest price (cost optimization, short workload) 273 | - diversified: distributed across all pool (great for availability, long workloads) 274 | - capacityOptimized: pool with the optimal capacity for the number of instances 275 | - Spot Fleets allow us to automatically request Spot Instances with the lowest price 276 | 277 | ### 31. EC2 Instance Launch Types Hands On 278 | 279 | ### 32. EC2 Instance Types Deep Dive 280 | 281 | ### 33. EC2 AMIs 282 | 283 | ### 34. EC2 AMI Hands On 284 | 285 | ### 35. Cross Account AMI Copy 286 | 287 | ### 36. EC2 Placement Groups 288 | 289 | ### 37. Elastic Network Interfaces (ENI) with Hands On 290 | 291 | ### 38. ENI - Extra Reading 292 | 293 | ### 39. EC2 Hibernate 294 | 295 | ### 40. EC2 Hibernate - Hands On 296 | 297 | ### 41. EC2 for the Solution Architect 298 | 299 | ### Quiz 2: EC2 Final Quiz 300 | 301 | ## Section 4: High Availability and Scalability: ELB & ASG 302 | 303 | ### 42. High Availability and Scalability 304 | 305 | ### 43. Elastic Load Balancing (ELB) Overview 306 | 307 | ### 44. About the Gateway Load Balancer 308 | 309 | ### 45. Classic Load Balancer (CLB) with Hands On 310 | 311 | ### 46. Application Load Balancer (ALB) with Hands On 312 | 313 | ### 47. Network Load Balancer (NLB) with Hands On 314 | 315 | ### 48. Elastic Load Balancer - Stickiness 316 | 317 | ### 49. Elastic Load Balancer - Cross Zone Load Balancing 318 | 319 | ### 50. Elastic Load Balancer - SSL Certificates 320 | 321 | ### 51. Elastic Load Balancer - Connection Draining 322 | 323 | ### 52. Auto Scaling Groups (ASG) Overview 324 | 325 | ### 53. Auto Scaling Groups Hands On 326 | 327 | ### 54. Auto Scaling Groups - Scaling Policies 328 | 329 | ### 55. Auto Scaling Groups - for Solutions Architects 330 | 331 | ### Quiz 3: Fundamentals 2 Quiz 332 | 333 | ## Section 5: EC2 Storage - EBS & EFS 334 | 335 | ## Section 6: AWS Fundamentals: RDS + Aurora + ElastiCache 336 | 337 | ## Section 7: Route 53 338 | 339 | ## Section 8: Classic Solutions Architecture Discussions 340 | 341 | ## Section 9: Amazon S3 Introduction 342 | 343 | ## Section 10: AWS CLI, SDK, IAM Roles & Policies 344 | 345 | ## Section 11: Advanced Amazon S3 & Athena 346 | 347 | ## Section 12: CloudFront & AWS Global Accelerator 348 | 349 | ## Section 13: AWS Storage Extras 350 | 351 | ## Section 14: Decoupling applications: SQS, SNS, Kinesis, Active MQ 352 | 353 | ## Section 15: Serverless Overviews from a Solution Architect Perspective 354 | 355 | ## Section 16: Serverless Solution Architecture Discussions 356 | 357 | ## Section 17: Databases in AWS 358 | 359 | ## Section 18: AWS Monitoring & Audit: CloudWatch, CoulTrail & Config 360 | 361 | ## Section 19: Identity and Access Management (IAM) - Advanced 362 | 363 | ## Section 20: AWS Security & Encryption: KMS, SSM, Parameter Store, CloudHSM, Shield, WAF 364 | 365 | ## Section 21: Networking - VPC 366 | 367 | ## Section 22: Disaster Recovery & Migrations 368 | 369 | ## Section 23: More Solutions Architectures 370 | 371 | ## Section 24: Other Services 372 | 373 | ## Section 25: WhitePapers and Architectures - AWS Certified Solution Architect Associate 374 | 375 | ## Section 26: Preparing for the Exam + Practice Exam - AWS Certified Solutions Architect Assoc 376 | 377 | ## Section 27: Congratulations - AWS Certified Solutions Architect Associate -------------------------------------------------------------------------------- /Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Exam_checklist.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Exam_checklist.pdf -------------------------------------------------------------------------------- /Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/Approx_similarity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/Approx_similarity.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/JSON_syntax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/JSON_syntax.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/add_random_noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/add_random_noise.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/bloom_filter_similarity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/bloom_filter_similarity.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/differential_privacy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/differential_privacy.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/html.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/privact_loss_budget_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/privact_loss_budget_1.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/promise_differential_privacy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Image/promise_differential_privacy.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP20008_Elements_of_Data_Processing/Summary.md: -------------------------------------------------------------------------------- 1 | # Unimelb COMP20008 Elements of Data Processing Summary 2 | 3 | 4 | ## Some points 5 | - Version: 2019 Semester 1 6 | - Lecturer: [James Bailey](https://people.eng.unimelb.edu.au/baileyj/) and [Pauline Lin](https://cis.unimelb.edu.au/people/pauline-lin) 7 | - This is a beginning course for Data Science 8 | - Programming part focus on data wrangling using python 9 | 10 | 11 | ## Lecture 1 Introduction 12 | - **Data Wrangling** 13 | - What is data wrangling 14 | - What activities the it encompasses 15 | - Why it is done 16 | - Why it is challenging 17 | - Why it is useful 18 | - Appreciate the series of activities in data wrangling (the data wrangling pipeline) 19 | 20 | 21 | 22 | ## Lecture 2 & 3 Data Formats 23 | - **Data formats** 24 | - Structured: Relational Database, CSV 25 | - Unstructured: text 26 | - Semi-structured: HTML, XML, JSON 27 | - **Benefits for having structure of data** 28 | - Easier to analyse, easier to query 29 | - Easier to store 30 | - Easier to clean, maintain consistency and security, especially with multiple users 31 | - **Comma Separated Value(CSV)** 32 | - Spreadsheet 33 | - Easy to use 34 | - Structured, but not like a relational DB 35 | - **Difference between CSV and spreadsheet** 36 | - CSV is a plain text format. Spreadsheet often refers to XLS file which is a binary file format 37 | - **Text** 38 | - No Structure 39 | - Hard to index 40 | - Hard to organize 41 | - Lacks regularity and decomposable internal structure 42 | - **Regular Expression** 43 | - Syntax 44 | - '.' Any characters 45 | - '^' Beginning of a string 46 | - '$' End of a string 47 | - '\*' Zero or more repetitions 48 | - '\+' One or more repetitions 49 | - '|' The or operator, used in conjunction with parentheses() 50 | - '[]' A set of characters, e.g. [abcd], [a-zA-Z] 51 | - '[^]' Complement of a set of characters 52 | - [^a-z] matches any characters except a-z 53 | - Group text with parentheses 54 | - xy|z != x(y|z) 55 | - '()' Groups text 56 | - 'JA' The pattern: 'J' immediately followed by 'A' 57 | - 'JA*' The pattern: 'J' followed by zero or more occurence of 'A' 58 | - '(J|A)*' Zero or more repetitions of 'J' or 'A's 59 | - '(J|A)+' One or more repetitions of 'J' or 'A's 60 | - Email format: [a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+ 61 | - **HTML(HyperText Markup Language)** 62 | - Markup with elements, delineated by start and end tags. Elements correspond to logic units such as heading, paragraph or itemised list 63 | - Tags: Keywords contained in pairs of angle brackets 64 | - Browser determines how to display/present the logical units 65 | - Not all elements need both start and end tags 66 | - Some elements can have attributes. The order of attributes is not important 67 | ![html illustration](Image/html.png) 68 | - **Limitation of HTML** 69 | - HTML was designed for pure presentation 70 | - HTML is concerned with formatting not meaning 71 | - HTML is not extensible 72 | - can't be modified to meet specific domain knowledge 73 | - browsers have developed their own tags 74 | - HTML can be inconsistently applied 75 | - almost everything is rendered somehow 76 | - **XML(Extensible Markup Language)** 77 | - Extensible: Users define tags 78 | - Facilitate better encoding of semantics 79 | - It was designed to store and transport data 80 | - It was designed to be self-descriptive 81 | - XML files must begin with declaration 82 | `` 83 | - XML elements 84 | - Start/end tags or Empty tags 85 | - Attributes in quotes 86 | - \ Parkville \ 87 | - \ 88 | - Appropriately nested 89 | - One root element 90 | - Comments 91 | - `` 92 | - Some characters have special meaning 93 | - '<' and '&' are strictly illegal inside an element 94 | - CDATA(character data) section may be used inside XML element to include large blocks of text, which may contain these special characters such as &, > 95 | - **(Exam Question)Difference between HTML and XML** 96 | - XML was developed to describe data and focalise on what the data represent; HTML was developed to display data and foculise on the way data looks 97 | - XML is about describing information; HTML is about displaying information 98 | - XML is extensible, users have possibility to define personal structures and tags; The tags and structures of HTML are predefined 99 | - **(Exam Question)Purpose of XML namespace** 100 | - To avoid name conflicts by differentiating elements and attributes within an XML document that may have identical name but different definitions 101 | - **Namespace Scope** 102 | - The scope of a namespace declaration is 103 | - The element that contains the namespace declaration 104 | - All its descendants(i.e. nested within the element) 105 | - The declaration may be overridden by further nested namespace declarations 106 | - Namespaces can be used to describe *both elements and attributes*. Elements without a namespace prefix are defined a default namespace 107 | - **XML schema & validation** 108 | - An XML file can be well-formed and NOT valid; it is valid if it is consistent with a particular schema 109 | - XML Schema languages, example: 110 | - XSD(XML Schema Definitions): a W3C standard 111 | - DTD(Document Type Definitions) 112 | - HTML5 schema for Web browser 113 | - **XML parsers** 114 | - Document Object Model(DOM) 115 | - Programming interface for XML and HTML 116 | - Most useful way of parsing XML 117 | - Parsing calls load the document into a tree structure with different nodes that can be navigated by the program 118 | - Simple API for XML (SAX) 119 | - Stream-based way of reading XML (sequential) 120 | - Fast and efficient if you don't need random-access 121 | - Memory efficient 122 | - **JSON(JavaScript Object Notation)** 123 | - Object data is in name/value pairs 124 | - "firstName" : "John" 125 | - JSON values 126 | - A number (integer or floating point) 127 | - A string (in double quotes) 128 | - A Boolean (true or false) 129 | - An array (in square brackets) 130 | - An object (in curly braces) 131 | - null 132 | ![JSON_syntax](Image/JSON_syntax.png) 133 | - **(Exam Question)Comparison between JSON and XML** 134 | - JSON is simpler and more compact/lightweight than XML. Easy to parse 135 | - Common JSON application - read and display data from a web server using Javascript 136 | - XML comes with a large family of other standards for querying and transforming (XQuery, XML Schema, XPATH, XSLT, namespaces, ...) 137 | - XML allows complex schema definitions (via regular expressions) 138 | - allows formal validation 139 | - makes you consider the data design more closely 140 | - JSON is more streamlined, lightweight and compressed 141 | - Which appeals to programmers looking for speed and efficiency 142 | - widely used for storing data in noSQL databases 143 | - **JSON Schema** 144 | - Written in JSON itself 145 | - Describes the structure of other data 146 | - Easy to validate a JSON document against its schema using a schema validator 147 | 148 | 149 | 150 | ## Lecture 4 & 5 Data cleaning: missing values and outliers detection & Recommender Systems 151 | - **Types of outliers** 152 | - Global outlier (or point anomaly) 153 | - Object is Og if it significantly deviates from the rest of the data set 154 | - Contexture outlier (or conditional outlier) 155 | - Object is Oc if it deviates significantly based on a selected context 156 | - **How to detect outliers?** 157 | - 1-D data 158 | - Boxplot 159 | - Histogram 160 | - Statistical test 161 | - 2-D data 162 | - Scatter plot and eye ball 163 | - 3-D data 164 | - Also scatter plot and eye ball 165 | - \> 3-D data 166 | - Statistical and algorithmic methods 167 | - **Recommender Systems** 168 | - Each user has a profile 169 | - User rates items 170 | - Explicit: Give a score 171 | - Implicit: Web usage mining 172 | - Time spent in viewing the item 173 | - Navigation path 174 | - System do the rest 175 | - **Collaborative filtering** 176 | - Make predictions about a user's missing data according to the behaviour of many other users 177 | - Look at users *collective* behaviour 178 | - Look at the active user *history* 179 | - Combine 180 | - Approaches 181 | - User based methods 182 | - Identify like-minded users 183 | - Item based methods 184 | - Identify similar items 185 | - Model (Matrix) based methods 186 | - Simultaneously identify like-minded users and items 187 | - **User based methods** 188 | - Achieve good quality in practice 189 | - The more processes we push offline, the better the method scale 190 | - However: 191 | - User preference is *dynamic* 192 | - High update frequency of offline-calculated information 193 | - No recommendation for *new users* 194 | - **Item based methods** 195 | - Search for similarities among items 196 | - All computation can be *done offline* 197 | - Item-item similarity is more stable than user-user similarity 198 | - No need for frequent update 199 | - Two phases 200 | - Offline phase. For each item 201 | - Determine its k-most similar items 202 | - Can use the same type of similarity as for user-based 203 | - Online phase. 204 | - Predicting rating raj for a given user-item pair as a weighted sum over the k-most similar items that they rated 205 | 206 | 207 | 208 | ## Lecture 6: Data visualisation 209 | - **Motivation for data visualisation** 210 | - Converting data into a visual formats 211 | - Reveals characteristics of the data, relationship between objects or relationship between features 212 | - Simplifies the data 213 | - Humans are very good at analysing information in visual formats 214 | - Spot trends, patterns, outliers 215 | - Visualisation can help show data quality 216 | - Visualisation helps tell a story 217 | - **Histogram** 218 | - Usually shows the distribution of a single variable 219 | - Divide the values into bins and show a bar plot of the number of objects in each bin 220 | - The number of each bar indicates the number of objects 221 | - Shape of histogram depends on number of bins 222 | - **Heat maps** 223 | - Plot the data matrix 224 | - This can be useful when objects are sorted according to class/type 225 | - Typically, features are normalised to prevent one attribute from dominating the plot 226 | - **Parallel Coordinates** 227 | - Used to plot the feature value of high-dimensional data 228 | - Instead of using perpendicular axes, use a set of parallel axes 229 | - The *feature value* of each object are plotted as a point on each corresponding coordinates axis and the points are connected by a line 230 | - Thus, *each object* is represented as a line 231 | - Often, the lines representing a distinct class of objects group together, at least for some features 232 | - Ordering of attributes is important in seeing such groupings 233 | - Scaling axes: Affect visualisation. May choose to scale all features into the range [0,1] via preprocessing step 234 | - Ordering of axes: Influences the relationship that can be seen. Correlation between pairs of features may only be visible in certain ordering 235 | 236 | 237 | 238 | ## Lecture 7: Clustering and clustering visualisation 239 | 240 | 241 | 242 | ## Lecture 8: Hierarchical clustering and dimension reduction 243 | 244 | 245 | 246 | ## Lecture 9: Assessing correlations 247 | 248 | 249 | 250 | ## Lecture 10: Mutual information 251 | 252 | 253 | 254 | ## Lecture 11: Guest Lecture 255 | - **Not Examinable** 256 | 257 | 258 | 259 | ## Lecture 12 & 13: Classification and regression techniques: decision tree and k-nearest neighbor 260 | 261 | 262 | 263 | ## Lecture 14: No Lecture(Good Friday) 264 | - **No Content** 265 | 266 | 267 | 268 | ## Lecture 15 & 16: Blockchain and data processing 269 | - **Benefits of Blockchain** 270 | - No central, trusted point of control 271 | - Less administration, less bureaucracy 272 | - Less expensive 273 | - Faster transactions 274 | - More control over records handed to users 275 | - Ability to be anonymous 276 | - Users can verify data in the blockchain 277 | - No single point of failure 278 | - More secure solutions 279 | - **Details** 280 | - The public ledger is called the blockchain(a file) 281 | - File is a sequence of blocks, each block contains a *header* and some *data* (list of transactions) 282 | - Block ID is equal to a hash of its header 283 | - Each block contains ID of its parent block 284 | - A block header typically includes: 285 | - *ID* of its parent block 286 | - *Timestamp* of block's creation 287 | - *Hash of the data* (list of transactions) inside a block 288 | - **How to make information in blockchain private** 289 | - Apply hash to the fact then adds this *hash output* to the blockchain along with a digital signature 290 | - No on can reverse the hash function to uncover the fact 291 | - Now stored on blockchain but privacy is preserved 292 | - Alternatively, could *encrypt the fact* using user's public key 293 | - Others can *apply hash* to the fact and see what is stored on the blockchain. They can also verify the fact was *digitally signed* by the owner 294 | - **Blockchain usage in Health** 295 | - Patient data is added to the blockchain 296 | - Each visit to the doctor 297 | - Blood Test 298 | - ... 299 | - Data is encrypted with patients' public key 300 | - Patients may provide private key to insurer or health provider so they can review their medical history. Reduced time, fuller information available and quicker 301 | - **Blockchain usage in Education** 302 | - Cheap, secure, shared resource to store credentials and microcredential 303 | - Uses Blockcerts system - software that is built on top of the bitcoin(financial) blockchain, and which allows education credential information to be stored 304 | - For university: 305 | - Secure 306 | - Easy to access 307 | - Less expensive 308 | - Store micro-credential 309 | - For student: 310 | - Don't need extra copies 311 | - Cheap 312 | - Employer: 313 | - Doesn't need to talk to university 314 | - Trust (security) 315 | 316 | 317 | 318 | ## Lecture 17: Guest Lecture 319 | - **Not Examinable** 320 | 321 | 322 | 323 | ## Lecture 18 & 19 & 20: Data linkage and privacy 324 | - **Data Linkage** 325 | - Combining related/equivalent records across the data source 326 | - Information relating to the same entity (e.g. a person or a place) is connected 327 | - **Pipeline** 328 | - Prep 329 | - Clean records 330 | - Block 331 | - Represents complex records as simple values (blocks) 332 | - Only score records with simple value (block) in common 333 | - Each record from A allocated to one or more blocks 334 | - Each record from B allocated to one or more blocks 335 | - Within each block, compare the records from A against those from B and find those that match 336 | - If two records are not assigned to the same block, it means we believe they are not match 337 | - Score 338 | - Compare two records: assess their similarity 339 | - Score record pairs for similarity 340 | - Match 341 | - Match "sufficiently match" records 342 | - Merge 343 | - Merge matched records 344 | - Resolve conflicting attributes 345 | - **When do we need data linkage privacy** 346 | - Matched data is being passed to another organization or being made public; Data matching is conducted across databases from different organizations 347 | - How to solve: Without revealing any information about individuals who do not get linked across the databases (i.e., individuals who occur in one database and not in other) 348 | - We will need methods for computing similarity of records, without revealing the record values 349 | - Hashing is an important tool 350 | - A hash function H maps a data item of arbitrary size to a data item of fixed size 351 | - Non invertible (One way) hash function: Given the output H(X), extremely hard to reconstruct X. 352 | - We can represent numbers using different bases 353 | - **Hash encoding for exact matching: 2 party protocol** 354 | - Each organization 355 | - Applies a (one way) hash function to the attributes used to join the databases 356 | - Shares its hashed values with the other organization. Each checks which one match. These are linked records. 357 | - Disadvantages 358 | 1. Single character difference results in completely different output 359 | 2. An organization can mount a dictionary attack to "invert" the hash function 360 | - **Hash encoding for exact matching: 3 party protocol** 361 | - Involve a trusted 3rd party (Organization C) 362 | - Organization A and B send their hashed value to Organization C, who then checks for match. 363 | - What if Organization C is malicious 364 | - Organization C could mount a dictionary attack and guess hashed values 365 | - Solution: A and B perform "*dictionary attack resistant*" hashing. Organization A and B concatenate a secret word to every name field in their data before hashing (known as a salt). Organization C does not know what this word is and thus can't perform a dictionary attack to "reverse" the hashed value it received 366 | - Frequency Attack 367 | - The third party scheme may prevents a dictionary attack, but may still be susceptible to a frequent attack 368 | - 3rd party compares the distribution of hashed values to some known distribution 369 | - E.g. distribution of surname frequencies in a public database versus distribution of hash values. Then may be able to guess some of the hashed values 370 | - Organization A and B could prevent this by adding some random records to manipulate the frequency distribution 371 | - **Challenges** 372 | 1. The hash based technique using the third party, can only compute exact similarity between strings in a privacy preserving manner. What if we wish to compute approximate similarity between two strings in a privacy preserving manner 373 | 2. Public release: Suppose organizations wish to make one of its internal datasets public for social good purpose. It can be very, very difficult to prevent data linkage attacks or reverse engineering of people's identities 374 | Solution: Do not release at all!! or 375 | Release an obfuscated version of data (e.g. with noise added to all the records). This is the basis of methods such as *k-anonymity and differential privacy* 376 | - **Summary for preserving privacy linkage** 377 | - Organization A and B can determine which records in the two databases are an exact match in a privacy preserving manner by 378 | - using trusted third party C 379 | - using one way hash function with salt 380 | - adding random records 381 | - A reasonably private scheme depends on how much the third party is trusted 382 | - **A privacy preserving method for data linkage using approximate matching** 383 | - Components that are needed 384 | 1. Computing *approximate similarity* of two record fields (strings) 385 | 2. Representing a record field (string) in a privacy preserving manner (so that it is difficult to reverse engineer its value) 386 | 3. Computing approximate similarity of two record fields (strings) that have been represented in privacy preserving manner 387 | - Issues 388 | - 1.Approximate Similarity 389 | ![Approximate similarity](Image/Approx_similarity.png) 390 | Similarity measure can be easily extended to 3-grams, 4-grams ... (q-grams) 391 | - 2.Bloom Filters 392 | - bit string: an array of binary digits (bits): 0's and 1's 393 | - A bloom filter is an array of I bits, with all bits initially set to zero 394 | - We may store strings in the bloom filter by using hash functions H1 ... Hk to turn on certain bits 395 | - Each hash function Hi (1 <= i <= k) maps an input string X to a value in the range [0, I-1] 396 | - To store a string X in the bloom filter, set array index Hi(X) in the bloom filter to value '1', for each Hi(X) 397 | - Checking 398 | - For any string X, we can check if it is stored in the bloom filter by hashing X using the k hash functions 399 | - If at least one of the bits having value Hi(X) is set to 0, then X is definitely not a member of the bloom filter 400 | - If all of the bits having value Hi(X) are set to 1, then X appears to be a member of the bloom filter. However, it might not really be a member (a false positive) 401 | - Compare two strings for approximate similarity 402 | - There are two strings. The 2-grams of the first string are stored in bloom filter B1, the 2-grams of the second string are stored in bloom filter B2. Both bloom filters are the *same length and use the same hash functions* 403 | - If the two strings have a lot of 2-grams in common, then their bloom filters will have a large number of identical bit positions set to 1 404 | - 3.Similarity of bloom filters 405 | - ![Similarity for bloom filter](Image/bloom_filter_similarity.png) 406 | - Need a threshold value for deciding whether match or not 407 | 408 | 409 | 410 | ## Lecture 21: Public data release and individual anonymity 411 | - **Measures of anonymity for individuals** 412 | - Removing explicit identifiers from a dataset is not enough 413 | - Solutions 414 | - k-anonymity 415 | - I-diversity 416 | - Terminology 417 | - Explicit Identifier: unique for an individual 418 | - name, national ID, Tax File Number, account number 419 | - Quasi-identifier: A combination of non sensitive attributes that can be linked with external data to identify an individual 420 | - E.g. {Gender, Age, Zip code} combination from earlier 421 | - Sensitive attributes: Information that people don't wish to reveal 422 | - E.g. Medical condition 423 | - **k-anonymity** 424 | - Produce a release of the data with scientific guarantees that the individuals who are the subjects of the data cannot be re-identified while the data remain practically useful 425 | - A table satisfies k-anonymity if every record in the table is indistinguishable from at least k-1 other records with respect to every set of quasi-identifier attributes; such a table is called k-anonymous table 426 | - Hence, for every combination of values of the quasi-identifiers in the k-anonymous table, there are at least k records that share those values 427 | - How to achieve k-anonymity 428 | - Generalisation 429 | - Make the quasi identifiers less specific 430 | - Column level 431 | - Suppression 432 | - Remove (suppress) the quasi identifiers completely 433 | - Moderate the generalization process 434 | - Limited number of outliers 435 | - Row, column and cell level 436 | - If the worst case, if the data gets into wrong hands, can only narrow down a quasi identifier to a group of k individuals 437 | - Data publisher needs to 438 | - Determines quasi-identifiers 439 | - Choose parameter k 440 | - Attack on k-anonymity 441 | - 1.Homogeneity Attack: k-anonymity can create groups that leak information due to lack of diversity in the sensitive attribute 442 | - 2.Background Attack: k-anonymity does not protect against attacks based on background knowledge 443 | - Solution: Make the sensitive attribute diverse with each group 444 | - I-diversity: For each k anonymous group, there are at least I different sensitive attribute values 445 | - **Summary** 446 | - To reduce risk of re-identification of individuals in released datasets 447 | - Choose value of k 448 | - Manipulate data to make k-anonymous, either 449 | - Replace categories by broader categories 450 | - Suppose attributes with a * (limited utility) 451 | - Further manipulate data to make it I-diverse 452 | - Ensure there are at least l different values of the sensitive attribute in each group 453 | - Privacy is difficult to maintain in high-dimensional datasets like trajectory datasets 454 | - Cloaking provides spatial k-anonymity 455 | - Obfuscation ensures location imprecision 456 | 457 | 458 | ## Lecture 22: Differential privacy 459 | - **Local differential privacy** 460 | - Each person is responsible for adding noise to their own data. Classic survey example each person has to answer a question "Do you use drug?" 461 | - They flip a coin in secret and answer "Yes" if it comes up heads, but tell the truth otherwise 462 | - Plausible deniability about "Yes" answer 463 | - **Global differential privacy** 464 | - We have a sensitive dataset, a trusted data owner Alice and researcher Bob. Alice does analysis on the raw data, adds noise to the answers, and reports the (noisy) answers to Bob 465 | - Global systems generally more accurate, and less noise is needed 466 | ![Differential Privacy](Image/differential_privacy.png) 467 | - The privatized analysis comprises two steps 468 | - 1.Query the data and obtain the real result, e.g., how many female students are in the survey? 469 | - 2.Add random noise to hide the presence/absence of any individual. Release noisy result to the user 470 | ![Add Random Noise](Image/add_random_noise.png) 471 | - The released results will be different each time (different amount of noised added) 472 | - **The promise of differential privacy** 473 | - The chance that the noise released result will be R is nearly the same, whether or not an individual participates in the dataset 474 | ![Promise](Image/promise_differential_privacy.png) 475 | - **How much noise should we add to the result depends on** 476 | - *Privacy loss budget*: How private we want the result to be (How hard the attacker to guess the true result) 477 | - We want that the presence or absence of a user in the dataset does not have a considerable effect on the released result 478 | - ![privacy loss budget](!privacy_loss_budget_1.png) 479 | - Privacy loss budget = k (k > 0) 480 | - Choose k to guarantee that A <= 2^k * B 481 | - k = 0: No privacy loss (A = B), low utility 482 | - k = high: Large privacy loss, higher utility 483 | - k = low: Low privacy loss, lower utility 484 | - *Global sensitivity*: How much difference the presence or absence of an individual could make to the result 485 | - Global sensitivity of Query Q is the maximum difference in answers that adding or removing any individual from dataset can cause (maximum effect of an individual) 486 | - Intuitively, we want to consider the worst case scenario 487 | - If asking multiple queries, global sensitivity is equal to the sum of the differences 488 | - **Strategy** 489 | - Add noise to the according to *released result = True result + noise* 490 | - Where noise is a number randomly sampled from a distribution having 491 | - average value = 0 492 | - standard deviation (spread) = G/k 493 | - **Summary** 494 | - Differential privacy guarantees that the presence or absence of a user cannot be revealed after releasing the query result 495 | - It does not prevent attackers from drawing conclusions about individuals from aggregate results over the population 496 | - We need to determine the budget and global sensitivity to know what is the scale of the noise to be added 497 | 498 | 499 | 500 | ## Lecture 23: Ethical consideration 501 | 502 | 503 | 504 | ## Lecture 24: Wrap up 505 | - **No New Content** 506 | -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/Analogy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/Analogy.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/CBC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/CBC.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/Cookie_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/Cookie_example.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/EBC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/EBC.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/Git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/Git.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/HTTP_Request.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/HTTP_Request.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/HTTP_Response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/HTTP_Response.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/Hierarchy_of_DNS_server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/Hierarchy_of_DNS_server.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/Mail_msg_format.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/Mail_msg_format.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/NAT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/NAT.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/TCP_exercise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/TCP_exercise.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/TLS_handshake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/TLS_handshake.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/Transport_layer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/Transport_layer.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/UDP_checksum_example1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/UDP_checksum_example1.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/UDP_checksum_example2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/UDP_checksum_example2.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/UDP_checksum_example3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/UDP_checksum_example3.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/UDP_segment_structure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/UDP_segment_structure.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/URL_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/URL_example.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/congestion_avoidance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/congestion_avoidance.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/fast_recovery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/fast_recovery.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/fast_retransmission.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/fast_retransmission.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt1.0_pic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt1.0_pic1.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt1.0_pic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt1.0_pic2.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.0_pic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.0_pic1.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.0_pic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.0_pic2.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.1_pic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.1_pic1.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.1_pic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.1_pic2.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.2_pic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.2_pic1.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.2_pic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt2.2_pic2.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt3.0_pic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt3.0_pic1.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt3.0_pic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt3.0_pic2.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt3.0_pic3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rdt3.0_pic3.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/rwnd_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/rwnd_demo.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/tcp_structure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/tcp_structure.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/telnet_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/telnet_example.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/Image/three_way_handshake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_COMP30023_Computer_Systems/Image/three_way_handshake.png -------------------------------------------------------------------------------- /Courses/Unimelb_COMP30023_Computer_Systems/placeholder.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

This is a placeholder to display "html" in language of git repository.

8 | 9 | -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/HTML5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/HTML5.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Integration_testing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Integration_testing.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Istanbul_coverage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Istanbul_coverage.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Keyword_distribution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Keyword_distribution.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Mocha_showcase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Mocha_showcase.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Web1.0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Web1.0.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Web2.0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Web2.0.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Web_illustration_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Web_illustration_1.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Web_illustration_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/Web_illustration_2.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/api.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model1.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model2.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model3.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model4.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model5.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model6.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/box_model7.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css1.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css2.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css3.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css4.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css5.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css6.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css7.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/css8.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/hash&salt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/hash&salt.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/http_request.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/http_request.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/http_response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/http_response.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/long_answers_question_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/long_answers_question_1.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/long_answers_question_1_answer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/long_answers_question_1_answer.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/long_answers_question_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/long_answers_question_2.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/long_answers_question_2_answer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/long_answers_question_2_answer.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/npm_test_failed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/npm_test_failed.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/npm_test_succeed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/npm_test_succeed.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/restful_routes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wrrnw/notes/1370188f18d9d53cb762706bfc46fd02e3f5e087/Courses/Unimelb_INFO30005_Web_Information_Technologies/Image/restful_routes.png -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Questions.md: -------------------------------------------------------------------------------- 1 | # Questions Summary 2 | 3 | ## 1. Git 4 | - Know basic git commands 5 | 6 | 7 | ## 2. JavaScript, Node & Express, API Servers & REST 8 | - Suppose we have the HTML element: `

`. Write the JavaScript code(including the ` 15 | ``` 16 | - List at least two different ways of accessing an HTML element using JavaScript 17 | 1. document.getElementById('idname'): its ID name 18 | 2. document.getElementsByClassName('classname'): by the given classname 19 | 3. document.getElementsByTagName('tagname'): using the tag name 20 | 4. document.querySelector(): using the css style selector 21 | - What is Node.js? 22 | - Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient 23 | - What is npm? 24 | - The node.js package manager, which is the largest ecosystem of open source libraries in the world 25 | - What is Express? 26 | - Express is a minimal and flexible Node.js web application framework 27 | - How to Express? 28 | 1. Create dir and app.js 29 | 2. Install express: `npm install express --save` 30 | 3. Require Express: `const express = require('express');` 31 | 4. `const app = express();` 32 | 5. Create routes: `/: print Hello World` 33 | 6. Listen on a port 34 | ``` js 35 | app.listen(3000, function() { 36 | console.log('Express serving at port 3000'); 37 | }); 38 | ``` 39 | - How to create a Routes including id? 40 | - `/post/:id` 41 | - How to retrieve a id 42 | - `req.params.id` 43 | - Write a very simple express application which will display *Hello World* when as user accesses the homepage 44 | ``` js 45 | var express = require('express'); 46 | var app = express(); 47 | app.get('/', function(req, res) { 48 | res.send("Hello World"); 49 | }) 50 | ``` 51 | - What is Client API? 52 | - Client API or Web Browser API or Client-side Web API are components that run on the client side, i.e. the browser. There are many APIs that exists for different purposes, for example, to load data dynamically (AJAX), and access and manipulate multimedia content. 53 | - What is AJAX? 54 | - AJAX stands for Asynchronous JavaScript And XML, which is a mechanism of loading dynamic content within a page without loading the entire page 55 | - What is REST? 56 | - Stands for Representational State Transfer. It is a architectural principle that defines client-server relationship and how state stored. RESTful server is stateless that it does not remember state on the server. Each request must contain all of the information needed to fulfill the request 57 | - Client remembers everything it needs 58 | - Passes this to the server when it wants to get something done 59 | - The server doesn't need to remember anything about the client 60 | - Often use HTTP protocol verbs(GET, PUT, POST, DELETE) 61 | 62 | 63 | ## 3. MongoDB 64 | - Advantages of MongoDB 65 | - NoSQL: No transactions & No joins 66 | - What is Mongoose? 67 | - Mongoose is a MongoDB object modeling tool. It provides a schema-based solution to model your database 68 | - Define a schema named *student* with two attributes *name* and *ID*. You can choose appropriate properties for the attributes 69 | ``` js 70 | var mongoose = require('mongoose'); 71 | var Schema = mongoose.Schema; 72 | var student = new Schema({ 73 | name: String, 74 | id: Date 75 | }); 76 | ``` 77 | - Know how to write controller.js with MongoDB 78 | 79 | 80 | ## 4. Responsive Web Design (HTML & CSS) 81 | - Know CSS grid details 82 | - What is the general approaches of responsive design 83 | 1. Add some viewport tags or elements to each of the pages 84 | 2. Use CSS grid to organize content 85 | 3. Choose breakpoint to decide when we reorganize the content using media queries 86 | - How to achieve media queries, please give one example using code: 87 | ``` html 88 | 89 | 90 | ``` 91 | - How to achieve responsive design regarding above code? 92 | ``` css 93 | .page { 94 | display:grid; 95 | grid-template-columns:2fr 1fr 1fr; 96 | grid-template-rows:4em auto; 97 | grid-template-areas: 98 | "article header aside" 99 | "article figure figure"; 100 | } 101 | 102 | @media screen and (min-width: 922px) { 103 | .page { 104 | grid-template-columns:1fr 3fr; 105 | grid-template-rows:1fr 2fr auto; 106 | grid-template-areas: 107 | "header header" 108 | "figure figure" 109 | "aside article" 110 | } 111 | } 112 | ``` 113 | 114 | 115 | ## 5. Security 116 | - What is MD5? 117 | - MD5 is the most widely known hashing function 118 | - What is XMLHttpRequest(XHR)? 119 | - XMLHttpRequest(XHR) is an API in the form of an object whose methods transfer data between a web browser and a web server 120 | - In risk assessment, what do we call an event that provide signs that an identified risk may actually be happening? 121 | - Trigger 122 | - In risk assessment, what is Risk? 123 | - An undesirable event with the potential to have a negative impact on the project 124 | - In risk assessment, what is Trigger? 125 | - An event that provides noticeable signs for the group that the risk may actually be happening 126 | - In risk assessment, what is Likelihood? 127 | - Chance of the risk occurring, rated on the likely, possible or unlikely 128 | - In risk assessment, what is Impact? 129 | - Extend to which the group will suffer as a result of risk occurring, rated as major, moderate or minor 130 | - In risk assessment, what is Contingency Plan? 131 | - What to do in the event of the risk actually happening 132 | 133 | 134 | ## 6. Testing 135 | - State two reasons for testing your web-application 136 | 1. error-free - that is contain no bugs. We should test for both syntactic and semantic errors 137 | 2. predictable. We implement functionality to achieve certain tasks. We want to make sure that when we execute a functionality, the outcomes are as we intended to be, not only the first time but always 138 | 3. Resilient to changes - that is be able to handle changes to functionality. Over the life of our web application, we will either enhance existing functionalities or implement new ones. When we change a functionality, we can re-run all of our tests to ensure that other components that may be dependent on the changed components continues to function as we intended 139 | - What is Mocha? 140 | - Mocha is a test framework running on Node.js and in the browser. We use Mocha for testing software functionality written in JavaScript. We write our own test cases and run the tests with Mocha to identify potential flaws in our web applications 141 | - Draw a diagram to show the basic testing cycle 142 | - Know how to write testing code 143 | 144 | 145 | ## 7. SEO & Accessibility 146 | - What is SEO? 147 | - SEO stands for Search Engine Optimisation. It is a set of strategies and techniques for increasing the number of visitors(visibility) to your website by obtaining a higher rank in search result pages 148 | - What is the goal of a *crawler*? 149 | - It's to crawl the web pages; parse content; categorise content; and build an index 150 | - What search engines rank depend on? 151 | - Search Engines rank websites depend on how keywords and elements in their content 152 | - SEO criteria 153 | - Contents 154 | - Links to the page 155 | - Code Implementation 156 | - Authority 157 | - Percentage of traffic incoming from 158 | 1. Organic(non-paid) Search - 64% 159 | 2. Non-social referrals - 15% 160 | 3. Direct - 12% 161 | 4. Paid Listings - 6% 162 | 5. Social Media - 2% 163 | - Questions for selecting keywords 164 | 1. Which keywords they search with? 165 | 2. How frequently they are? 166 | 3. How relevant they are? 167 | 4. How competitive they are? 168 | - 70% of keywords are searched for only hundreds of times or less. They are known as long tail of keyword demand 169 | 170 | 171 | ## 8. Localisation & Internationalisation 172 | - When you want to design your website for international community, what are factors that you need to consider? 173 | - language 174 | - time formats 175 | - Currency and tex regulation 176 | - decimal system 177 | - units 178 | - implied meaning of symbols and colours 179 | -------------------------------------------------------------------------------- /Courses/Unimelb_INFO30005_Web_Information_Technologies/Summary.md: -------------------------------------------------------------------------------- 1 | # Unimelb INFO30005 Web Information Technologies Summary 2 | 3 | 4 | ## Overview 5 | - Version: 2019 Semester 1 6 | - Lecturer: [Eduardo Oliveira](https://www.eduoliveira.com/) and [Ronal Singh](https://cis.unimelb.edu.au/people/rr-singh) 7 | - Full stack project based course 8 | - Programming part has not been teached in detail, which means you need to find many other resources to learn full stack dev 9 | 10 | 11 | 12 | ## Week 1 Lecture 1 Introduction to the subject (Not Examinable) 13 | 14 | 15 | ## Week 1 Lecture 2 History of Web & Introduction to web development (Not Examinable) 16 | - **History** 17 | - WWW: World Wide Web 18 | - URL: Uniform Resources Locator 19 | - HTML: HyperText Markup Language 20 | - HTTP: HyperText Transport Protocol 21 | - Type of Web Hosts 22 | - Self-Service 23 | - Co-Located 24 | - Dedicated 25 | - Virtual Private(VPS) 26 | - Cloud 27 | - Shared 28 | - Managed 29 | - ISP: Internet Service Provider 30 | - DNS: Domain Name Server 31 | - Request Recursive Name Server 32 | - Root Name Server 33 | - **Web Dev** 34 | - Web 1.0 - Static Web 35 | - Content: Reading content, Personal Site, Content Ownership, Taxonomies 36 | - Tech: HTML, HTTP, Synchronous, Client-Server 37 | ![Web Illustration_1](Image/Web_illustration_1.png) 38 | ![Web Illustration_2](Image/Web_illustration_2.png) 39 | - Web 2.0 - Wisdom Site 40 | - Web apps that behave like native app 41 | - AJAX: Asynchronous JavaScript and XML 42 | - Content: Creating Content, Blogs & Profiles, User Content, Folksonomies 43 | - Tech: HTML, AJAX, HTTP, JSON, Asynchronous, Peer-to-Peer, REST, SOAP 44 | - Front-End 45 | - Web Design: Photoshop, Illustrator, Dreamweaver, XD 46 | - Front-End Dev: HTML, CSS, JavaScript, Angular 47 | - Back-End: 48 | - Application: PHP(cake), Ruby(Rails), JS(Node), Python(Django) 49 | - Server: Apache, IIS, GWS, Express 50 | - Database: MySQL, MongoDB, Oracle, S2Lite 51 | ![Web1.0](Image/Web1.0.png) 52 | ![Web2.0](Image/Web2.0.png) 53 | ![HTML5](Image/HTML5.png) 54 | 55 | 56 | ## Week 2 Lecture 1 Basic Technologies - Git 57 | - Why use version control 58 | - Compare Files 59 | - Identify Differences 60 | - Merge Changes 61 | - Revert to previous working code 62 | - Snapshot 63 | - Commands 64 | - `git init`: creates the repo 65 | - `git clone`: clones a remote repo 66 | - `git status`: status of repo 67 | - `git add `: add file to staging area 68 | - `git add -A`: add all to staging area 69 | - `git checkout -- `: undo uncommitted changes 70 | - `git add *.`: add all with extension to staging area 71 | - `git commit -m ""`: commit changes to repo 72 | - `git log`: show commit history 73 | - `git checkout `: move head to that commit 74 | - `git revert --no-commit ..HEAD` 75 | - `git commit` revert to that commit 76 | - `git diff` compares with last commit 77 | - `pull` and `push` 78 | - `pull`: to synchronize all of changes in the server to my local machine 79 | - `push`: put all of the local changes to the server 80 | - Branches 81 | - `git branch`: show branches 82 | - `git checkout -b `: create a new branch 83 | - `git merge `: merges with branch 84 | - `git branch -d `: delete branch 85 | - Some advises 86 | 1. Commit often 87 | 2. Commit related changes together 88 | 3. Commit completed work 89 | 4. Branch before you build 90 | 5. Commit with meaningful message 91 | 6. Agree on a workflow 92 | - Atlassian SourceTree 93 | - .gitignore 94 | 95 | 96 | ## Week 2 Lecture 2 Basic Technologies - JavaScript 97 | ### HTML - Structure 98 | - `<\b>` **bold** in HTML4; visual emphasis in HTML5 99 | - `<\i>` *italic* in HTML4; Alternative voice in HTML5 100 | - `<\u>` underline in HTML4; non-textual annotation in HTML5 101 | - `<\s>` ~~strikethrough~~ in HTML4; Incorrect in HTML5 102 | - `` Emphasis or stress 103 | - `` Importance 104 | - `` Relevance 105 | ### CSS - Presentation 106 | ### JavaScript - Behaviour 107 | - Print to console 108 | - `console.log("starting to print")` 109 | - HTML + JavaScript 110 | ``` html 111 | 112 | 113 | 114 |

A Web Page<\h1> 115 |

A paragraph<\p> 116 |