[MOFE] HTML – 2. HTML Basic

[MOFE] HTML – 2. HTML Basic

Contents

  1. HTML Document Structure
    1. Basic template
    2. DOCTYPE
    3. html
    4. head
    5. body
  2. HTML Syntax
    1. Elements
      1. Basic elemetns
      2. Nested elements
      3. Empty elements
    2. Attributes
      1. Basic attributes
      2. Global attributes
    3. Comments

1. HTML Document Structure

1. Basic form

<DOCTYPE html> 
<html>
    <head>
        <title>Hello HTML</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>Hello HTML</p>
    </body>
</html>

2. DOCTYPE

– html version declaration
– ‘html’ means html5

3. html

– web page document

4. head

Place invisible elements

– Title
– Metadata
– External files

5. body

Place visible elements
– Can place HTML Tags

2. HTML Syntax

1. Elements

1. Basic elements

– Basic form


Hello HTML

 

– Structure

1. Start tag :

<p>

2. Contents :

Hello HTML

3. End tag :

</p>

– Tag name is Lower case

2. Nested elements

  • Basic form
<body>
    <p>Hello HTML</p>
</body>

Hello HTML

  • Some elements that can be nested
  • Nested elements form a parent-child relationship.
    • Parents : 
      <body></body>
    • Children : 
       <p></p>
  • Use indentation to represent the nesting depth of the nesting element

3. Empty elements

  • Basic form
<meta charset="utf-8"> 
  • Can’t have contents. Only have attributes
  • Self closing tag

2. Attributes

1. Basic attributes

  • Elements property
  • It can only be placed in the start tag.

2. Global attributes

  • There are common attributes that all elements have
  • Example
    • id, class, hidden, style, …

3. Comments

  • It is not displayed on the screen.
  • It is necessary for the development stage.

[MasterOfFE] 1. HTML Introduction

HTML

  1. HTML Introduction
  2. HTML Basic
  3. Semantic Web
  4. HTML Tag

1. HTML Introduction

  1. HTML
  2. HTML5
  3. History

1. HTML

  1. HTML means Hyper Text Markup Language
  2. Web page structure and contents
  3. Structuring information

2. HTML5

2014.10.28 New web standard with new features.

1. Visualization

  1. Multimedia
    1. Video
    2. Audio
  2. Graphics
    1. 2D : SVG, Canvas
    2. 3D : WebGL, CSS 3

2. Network

  1. Connectivity
    1. Socket

3. Hardware

  1. Device access
    1. Camera
    2. Sensors
    3. etc…
  2. Offline & Storage
    1. like platform

4. Structure

  1. Semantics
    1. Contents meanings
  2. CSS3
    1. Full supported

3. History

1989.06 – Sir Tim Berners-Lee HTML Idea

2014.10.28 – HTML5 Standard announced.

 

Study by poiemaweb.com

 

React.js study

# Contents

1. Why React ?

2. Environments

3. Hello world!

4. JSX

5. React Components

6. Prop & State

7 Life Cycle of React Components

8. Event

9. Stateless Components

10. PropTypes

 

1. Why React ?

  • Javscript
    • Dom is expensive
    • If the element changes, change the entire page
  • React
    • Vitual DOM Tree is chip
    • Change elements using Props and State
    • Virtual Dom diff

 

2. Environments

– Node & NPM

– Node modules
> babel & presets
> react
> webpack & webpack-dev-server
> react-hot-loader

 

3. Hello world!

– Hello world
> index.html
> src/App.js
> dist/bundle.js

 

4. JSX

– JSX ?
> Javascript + XML

– How to use
> Tag must need open and close
> using {}
>> Javscript
>> Not use ‘if’
>> Not allowed Javascript keyword .
ex)
div ‘class’ -> ‘className’
label ‘for’ -> ‘htmlFor’

 

5. React Components

– Create
> extends React.Components
> Implements render() function.
ex)
class Custom extends React.Components {
render() {
return (JSX);
}
}

– Use
> JSX
> <Custom></Custom> or <Custom />

 

6. Prop & State

– State
> Writable
> Change state itself.
> Notify state to other Components.

– Prop
> Read-only
> Parents state.
> include Callback.

 

7 Life Cycle of React Components

– 4 Categories

Mount – will, did
|
Props – receive
|
Update – will, did
|
Unmount – will

 

– basic cycles
> componentWillMount
> componentDidMount
> componentReceiveProps
> componentWillUpdate
> componentDidUpdate
> componentWillUnmount

 

8. Event

– Camel Case
– Reference virtual dom using ‘ref’ (Not recommanded)

 

9. Stateless Components

– Recommnad
– Reusable
– No ref

 

10. PropTypes

– Only develepment
– Check React Component’s Props type.

 

 

 

How to use JavaScript forEach()

arrA.forEach( callbackFucntionB[, thisArgC ] )

  • callbackFucntionB
    • Parameters
      • value // current process value
      • index // current process index
      • array // arrA
  • thisArgC
    • ‘this’ in callbackFucntionB

 

Example

[2, 5, 9].forEach(function( v, i, arr ) {
console.log( v, i, arr );
});

 

Links

//

Professional WebGL Programming Ch 0 – Index and Introduce

Professional WebGL Programming Ch 0 – Index and Introduce

Ch.1
– WebGL Background knowledge
– Other Graphics Technologies
– Graphic Pipeline
– Graphic Hardware
– Basic Linear Algebra for 3D Graphics and WebGL

Ch.2 Practice knowledge
– WebGL Application
– Vertex Shader and Fragment Shader
– Tools and Debugging
– Problem resolving

Ch.3 Drawing
– Options
– Methods
– Primitives

Ch.4 Background knowledge for 3D Graphics
– JavaScript Library for Vector and Matrix Operations
– Object direction and position in 3D World

Ch.5
– Texturing
– Context Lost

Ch.6
– Animation in WebGL Scene
– Event Handling
– Key & Mouse Input in WebGL Scene

Ch.7 Lighting
– Lighting Model
– Implement Lighting Model using Vertex Shader and Fragment Shader

Ch.8 Performance Optimization
– Guide line, tips and tricks
– FPS
– Bottleneck
– Mobile tech.
– Hardware and Software

//

Backup wordpress xml to each text file ( customizing wxr2txt.py )

Backup wordpress xml to each text file ( customizing wxr2txt.py )

– Support utf-8
– Make category folder
>> It makes duplicated file
>> That’s because WordPress allows posts to have multiple categories.

Original : https://gist.github.com/ruslanosipov/b748a138389db2cda1e8
//

Javascript check css animation complete callback

CSS aniamation complete check callback event

var transitions = {
‘transition’:’transitionend’,
‘OTransition’:’oTransitionEnd’,
‘MozTransition’:’transitionend’,
‘WebkitTransition’:’webkitTransitionEnd’
}

https://davidwalsh.name/css-animation-callback