css

CSS Animation

1. Animation

1.1 Advantage

  1. They’re easy to use for simple animation.
  2. The animation run well, even under moderate system load.
  3. Browser will optimize performance and efficiency.

1.2 Configuring the animation

1.2.1 Properties:

name value range description
animation-delay <time>,e.g:2s Specifies when the animation start.The value is the offset time from the time at which the animation is applied to the element.
animation-direction normal;reverse;alternate;alternate-reverse Indicates whether the animation should play in reverse on alternate cycles.
animation-duration <time>,eg:3s Configures the length of time that an animation should take to complish one cycle.
animation-iterate-count <number>,e.g:2,or infinite Configures the number of times an animation should repeat.
animation-name name of @keyframes Specifies the name of the @keyframes at-rule descripting the animation’s keyframes.
animation-play-state runing;pause Lets you pause and resume the animation sequence.
animation-timing-function ease,ease-in,ease-out,ease-in-out,linear,step-start,step-end,cubic-bezier,steps.click here for more detail ,tool for cubic-bezier Configures the timing of the animation
animation-fill-mode none,forwards,backwards,both Configures what values are applied by the animation before and after it is executing.

1.2.2 Keyframes

e.g:
p {
  animation-name: slidein;
  animation-duration: 3s;
}
@keyframes {
  from {
    margin-left: 100%;
    width: 300%;
  }
  75% {
    margin-left:50%;
    width: 200%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

1.2.3 Using animation shorthand

Rule:The first value that can be parsed as a <time> is assigned to animation-duration, and the second one is assigned to animation-delay.animation-name can be distinguished from other properties.

e.g:
// duration | timing-function | delay | interation-count | direction | fill-mode | play-state | name
animation: 3s ease-in 1s 2 reverse both paused sliedin;
// duration | timing-function | delay | name
animation: 3s ease-in 2s sliedin;
// duration | name
animation: 3s sliedin;

1.2.4 Setting multiple animation property values

The CSS animation longhand values can accept multiple values,separated by commas.

e.g:
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s, 2s;

1.2.5 Using animation events

  • animationstart
  • animationend
  • animationiteration

    2. Run animation again

    e.g:

    html

    <p class="data ani">this data has animation</p>
<button onclick=play()>play</button>

    css

    .ani {
  animation-name: slidein;
  animation-duration: 2s;
  animation-iterate-count: 2;
}
@keyframes slidein {
  from {
      margin-left: 100%;
      width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

    javascript

    function play(){
  document.querySelector(".data").className = "data";
  window.requestAnimationFrame((time)=>{
    window.requestAnimationFrame((time)=>{
      document.querySelector(".data").className = "data ani";
      });
    });
}

    References

  1. Animaiton basic.
  2. single-transition-timing-function–Cubic bezier.
  3. Animation tips.
css

CSS Overview

  • 外部方式。写到外部css文件中，中html中通过style标签引用。
  • 内部方式。写在html中的style标签中。
  • 内联方式。写在标签的style属性中
css►simple selectors

CSS Simple Selectors

  • Type selectors
    /*html*/
<p>this is a p</p>
/*css*/
p {
  color:red;
}
  • Class selectors
    /*html*/
<p class = "first second">this is a p</p>
/*css*/
.first {
border-left: 12px solid #8F77B5;
}
  • ID selectors
    /*html*/
<p id="thisID">this is a p</p>
/*css*/
#id {
  font-family: monospace;
  text-transform: uppercase;
}
  • universal selector
    /*css*/
* {
  color: green;
}
css

CSS

Cascade Stylesheets - or CSS- is used to style your content as HTML is used to define the structure and semantics of it. Main parts of CSS is mentioned as follow:

1. CSS Basic

  • CSS overview
  • Simple selectors
  • Attribute selectors
  • Pseude-classes and pseude-elements selectors
  • Combinators and multiple selectors
  • CSS values and units
  • Cascade and inheritance
  • Debugging CSS

    2. Styling text

  • styling text overview
  • Fundamental text and font Styling
  • Styling lists
  • Styling links
  • web fonts

    3. Styling boxes

  • Styling boxes overview
  • Box model rerap
  • Backgrounds
  • Borders
  • Styling tables
  • Advanced box effects

    4. CSS layout

  • CSS layout overview
  • Floats
  • Positioning
  • Practical positioning examples
  • Flexbox
  • Grids

References

  1. CSS
  2. CSS Tutorials
  3. CSS Reference
html►global attibute and event handler

global attributes and event handlers of html

global attributes

  • accesskey
  • class
  • contenteditable
  • data-*
  • draggable
  • dropzone
  • hiden
  • id
  • lang
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate

reference material

global event handlers

  • onabort
  • onanimationcancel
  • onanimationend
  • onanimationiteration
  • onanimationstart
  • onerror
  • onfocus
  • oncancel
  • oncanplay
  • onchange
  • onclick
  • onclose
  • ondrag
  • ondragenter
  • ondrageexit
  • ondragleave
  • ondragover
  • ondragover
  • ondragstart
  • ondrop
  • oninput
  • …

reference materials

git

git 命令总结

基本操作

命令 说明
git init 初始化一个git项目
git add fileName
git add directoryName		 不同情况下功能不同，分别有：
1. 开始追踪新文件。逆操作为git rm fileName。
2. 添加文件或者是文件夹下面已追踪的的文件变动到暂存区。逆操作为git reset HEAD fileName.
3. 合并时把有冲突的文件标记为已解决状态。
git rm fileName 不追踪文件fileName.
git reset HEAD fileName 取消暂存文件fileName。
git checkout – fileName 忽略文件fileName的变动。
git status 查看当前分支的状态
git diff 查看文件改动的具体内容

版本操作

命令 说明
git commit -m “message” 提交暂存区的文件到本地仓库
git commit -m “init message”
git add forgoten_file
git comit -amend		 在commit之后发现还有文件未添加，添加未添加的文件，然后运行git commit -amend 则只会有一次commit信息。

git reset –hard HEAD^ 退货到上一次提交的版本
git reset –hard HEAD^^ 退货到上上一次提交的版本
git reset –hard hashcode 跳到hashcode指定的版本，hashcode可以为前几个数字，一般4、5个即可。

  1. 日志
    git log 列出所有历史记录的详细信息
    git log -n 前n条详细信息
    git log –graph 显示提交历史图
    git log –pretty=oneline 每次提交显示在一行
    git log –pretty=format:”%h - %an, %ar : %s” 定制化显示格式
    git reflog
  2. 克隆远端仓库到本地
    git clone git@github.com:userName/projectName.git 克隆远端仓库到本地，并在本地创建master分支，该master分支追踪远端仓库origin/master分支
    git clone git@github.com:userName/projectName.git -b dev 克隆远端仓库到本地，并在本地创建dev分支，该dev分支追踪远端仓库origin/dev分支。
  3. 远端仓库操作
    git remote -v 查看远端仓库
    git remote add [name][url] 添加远端仓库
    git remote rm [name] 删除远端仓库
    git remote set-url –push [nam][newUrl] 修改远端仓库
  4. 分支管理
    • 本地分支
    git branch 查看本地分支
    git branch -a 查看所有分支包括远端分支
    git branch [name] 创建本地分支
    git checkout -b dev origin/dev 创建本地分支dev，切换到dev分支，该dev分支追踪远端分支origin/dev
    git checkout -b [name] 创建并切换到新分支
    git chekcout [name] 切换分支
    git branch -d [name] 删除已经合并的分支
    git branch -D [name] 强制删除
    • 远端分支
    git branch -r 查看远程分支
    git push origin branchName 创建远程分支
    git push origin –delete branchName 删除远程分支
    • 追踪远端分支
    git checkout –track origin/dev 使当前分支追踪远端分支origin/dev
    • 拉取和提交
    git pull 拉取远端分支内容并与本地分支合并。
    git push 推送本地分支内容到远端分支。
    • 合并分支
    git merge brancName 合并分支branchName到当前分支。
    • 变基分支
    git rebase branchName 变基分支branchName到当前分支。

参考资料

  1. 官方文档
  2. 廖晓峰教程
spring►boot

spring boot resart vs reload

简介：

  1. restart
    是有两个classloader，一个加载依赖中的类，另一个加载编写的类，当检测到编写的类发生变化时会创建新的classloader来加载编写的类,原classloader将结束，但当工程变大的时候每次restart的速度变慢。
  2. reload
    是会在类文件发生变化时更新类文件，所以只有当类和方法签名不变的情况下才能正常工作，也就 是说当添加类或者方法，改变方法参数结构是都不能工作。但是启动速度很快。

启动方式

  1. restart:任意一种启动方式都可以。
  2. reload:需要使用maven 插件，命令：mvn spring-boot:run,或者点击idea maven中的插件spring-boot:run运行。

使用场景对比

  • restart适用于前期开发阶段，这个阶段主要是添加类和方法且工程较小。
  • reload适用于后期开发阶段，这个阶段主要是修改具体实现，且工程较大。

配置

  1. restart 配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>1.2.5.RELEASE</version>
                <dependencies>
                    <dependency>
                        <groupId>org.springframework</groupId>
                        <artifactId>springloaded</artifactId>
                        <version>1.2.4.RELEASE</version>
                    </dependency>
                </dependencies>
            </plugin>
        </plugins>
    </build>
  2. reload配置
    1
    2
    3
    4
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
    </dependency>