HTML – Records And Memorys

November 19, 2019November 26, 2019

CSS 符号及解释

<section>：

和 div 一样，逻辑上的分段，可以为其定义 css ，例如

<section class="main">

1	<section class="main">

.main {

  height: 100%;
  .justify-content(center);
  text-shadow: black 1px 1px 12px;

  header {
    min-height: 222px;
    @media @smartphonesPortrait {
      min-height: 66px;
    }
    img {
      @media @smartphonesPortrait {
        top: 37px;
        width: 240px;
      }
    }

  }

.main {

height: 100%;

.justify-content(center);

text-shadow: black 1px 1px 12px;

header {

min-height: 222px;

@media @smartphonesPortrait {

min-height: 66px;

}

img {

@media @smartphonesPortrait {

top: 37px;

width: 240px;

}

@media 代表网页如何适应不用的浏览器或者手机尺寸

w3schools 的例子： Change the background color of the <body> element to “lightblue” when the browser window is 600px wide or less:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

@media only screen and (max-width: 600px) {

body {

background-color: lightblue;

}

opentok-rtc 的例子：

@smartphones: ~"only screen and (max-width: 480px), only screen and (-webkit-min-device-pixel-ratio: 1.5, -o-min-device-pixel-ratio: 3/2, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5)";
@smartphonesLandscape: ~"@{smartphones} only screen and (orientation:landscape) and (max-width: 480px), only screen and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1.5, -o-min-device-pixel-ratio: 3/2, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5)";
@smartphonesPortrait: ~"@{smartphones} only screen and (orientation:portrait) and (max-width: 480px), only screen and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1.5, -o-min-device-pixel-ratio: 3/2, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5)";

@smartphones: ~"only screen and (max-width: 480px), only screen and (-webkit-min-device-pixel-ratio: 1.5, -o-min-device-pixel-ratio: 3/2, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5)";

@smartphonesLandscape: ~"@{smartphones} only screen and (orientation:landscape) and (max-width: 480px), only screen and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1.5, -o-min-device-pixel-ratio: 3/2, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5)";

@smartphonesPortrait: ~"@{smartphones} only screen and (orientation:portrait) and (max-width: 480px), only screen and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1.5, -o-min-device-pixel-ratio: 3/2, min--moz-device-pixel-ratio: 1.5, min-device-pixel-ratio: 1.5)";

.main {

  height: 100%;
  .justify-content(center);
  text-shadow: black 1px 1px 12px;

  header {
    min-height: 222px;
    @media @smartphonesPortrait {
      min-height: 66px;
    }
    img {
      @media @smartphonesPortrait {
        top: 37px;
        width: 240px;
      }
    }

  }

.main {

height: 100%;

.justify-content(center);

text-shadow: black 1px 1px 12px;

header {

min-height: 222px;

@media @smartphonesPortrait {

min-height: 66px;

}

img {

@media @smartphonesPortrait {

top: 37px;

width: 240px;

}

各种 div 的用法

a) index.ejs 右边容器的css定义为：

.main #righthand-container {
    height: 100%;
    display: table;
    width: 498px;
    right: 0;
    position: absolute;
}

.main #righthand-container {

height: 100%;

display: table;

width: 498px;

right: 0;

position: absolute;

}

在 html 中：

    <section class="main">
      <div id="righthand-container">

1 2	<section class="main"> <div id="righthand-container">

在 less

  #righthand-container {
    height: 100%;
    display: table;
    width: 498px;
    @media @smartphonesPortrait {
      width: 100%;
    }
    right: 0;
    position: absolute;
  }

#righthand-container {

height: 100%;

display: table;

width: 498px;

@media @smartphonesPortrait {

width: 100%;

}

right: 0;

position: absolute;

}

enterroom 按钮的定义

  .main #enter {
    position: absolute;
    width: 50px;
    height: 50px;
    padding: 0;
    right: -82px;      //这句保证按钮出现在 div外面
    top: calc(~"50% - 25px");     //这句保证按钮的位置在中间略上
    @media @smartphones {
      right: 0;
      position: fixed;
    }
    background-color: #0099cc;
    opacity: 0.7;
    margin-left: 0;
    border: 0;
    border-radius: 0;
    transition: width 0.5s ease-out;
    background-image: url(/images/icons/ctaarrow_white@2x.png);   
    background-size: 12.5px 21px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: opacity 0.5s;
    &:hover {
      opacity: 1;
    }
  }

.main #enter {

position: absolute;

width: 50px;

height: 50px;

padding: 0;

right: -82px; //这句保证按钮出现在 div外面

top: calc(~"50% - 25px"); //这句保证按钮的位置在中间略上

@media @smartphones {

right: 0;

position: fixed;

}

background-color: #0099cc;

opacity: 0.7;

margin-left: 0;

border: 0;

border-radius: 0;

transition: width 0.5s ease-out;

background-size: 12.5px 21px;

background-repeat: no-repeat;

background-position: center;

cursor: pointer;

transition: opacity 0.5s;

&:hover {

opacity: 1;

}

October 11, 2019November 19, 2019

room.ejs analyze

room.ejs 是 https://github.com/opentok/opentok-rtc

此项目最重要的一个页面，涉及到全部的api ,

怎么实现的点击 message 实现右边文本框的显隐

a) room.ejs 有

        <div>
          <button id="message-btn" disabled>
            <i data-icon="message"></i>
          </button>
          <p>Message
            <span id="unreadMsg">(<span id="unreadCount">0</span>)</span>
          </p>
        </div>

<div>

</button>

<p>Message

</p>

</div>

然后

roomView.js

        case 'message-btn':
          setChatStatus(!messageButtonElem.classList.contains('activated'));
          break;

case 'message-btn':

setChatStatus(!messageButtonElem.classList.contains('activated'));

break;

  function setChatStatus(visible) {
    if (visible) {
      _chatHasBeenShown = true;
      setUnreadMessages(0);
      messageButtonElem.classList.add('activated');

      // hide call controls on small screens
      if (window.innerWidth <= 480) {
        hideCallControls();
      }
    } else {
      messageButtonElem.classList.remove('activated');
    }
    Utils.sendEvent('roomView:chatVisibility', visible);
    HTMLElems.flush('#toggleChat');
  }

function setChatStatus(visible) {

if (visible) {

_chatHasBeenShown = true;

setUnreadMessages(0);

messageButtonElem.classList.add('activated');

// hide call controls on small screens

if (window.innerWidth <= 480) {

hideCallControls();

}

} else {

messageButtonElem.classList.remove('activated');

}

Utils.sendEvent('roomView:chatVisibility', visible);

HTMLElems.flush('#toggleChat');

}

这里应该着重理解 sendEvent这个函数，

当执行这句时： Utils.sendEvent(‘roomView:chatVisibility’, visible);

CSS 部分

怎么显示 icon , room.ejs 有这样的片断
<div id="top-banner"> <div class="icon-container"> <i data-icon="tokbox_logo"></i> </div> </div>

1
2
3
4
5

    <div id="top-banner">
      <div class="icon-container">
        <i data-icon="tokbox_logo"></i>
      </div>
    </div>

这里的data-icon是 html5新增属性， data- attributes are attributes for private use. I.e., anybody can make up any data- attribute and do with it whatever he wants.

也就是说， data- 后可以接自己定义的任何字符，参考文章：

https://johnresig.com/blog/html-5-data-attributes/

——-

in room.less :

[data-icon="tokbox_logo"] {
  background-image: url("/images/tokbox-nexmo-logo.svg");
  width: 235px;
  height: 41px;
  @media @smartphonesPortrait {
    background-image: url("/images/tokbox-logo-bug.svg");
    width: 27px;
    height: 27px;
  }
}

[data-icon="tokbox_logo"] {

width: 235px;

height: 41px;

@media @smartphonesPortrait {

width: 27px;

height: 27px;

}

September 25, 2019October 30, 2019

tokbox webrtc analyze

login account : mzcw2011@sina.cn
set tb_api_key 46419702
set tb_api_secret b8f17a054ccde74e68453464ad6b1c879a75d030

http://lesscss.org/features/#detached-rulesets-feature — 教程

How to compile less to css , first use bower download third party component , then create own less which use above component , final use grunt compile it
bower install --allow-root

1

bower install --allow-root

sudo npm install -g bower

1

sudo npm install -g bower

first new a “bowe.json” file ,which content is :

{
  "name": "opentok-rtc",
  "dependencies": {
    "theme": "tef-components/theme#0.2.68"
  }
}

{

"name": "opentok-rtc",

"dependencies": {

"theme": "tef-components/theme#0.2.68"

}

then , install and download bower

sudo npm install -g bower

1	sudo npm install -g bower

bower install --allow-root

1	bower install --allow-root

bower install mean install the package specified in bower.json , in this case , tokbox company use the package :

https://github.com/tef-components/

this package is a free less lib for button, theme, text-input , etc .

For how to learn less , see

https://www.tutorialspoint.com/less/nested_rules.htm

a beginner less introduce in Chinese :

https://www.tutorialspoint.com/less/nested_rules.htm

how to write rest server using swagger and node.js

a) first , how to do a simple node.js server

https://www.codementor.io/olatundegaruba/nodejs-restful-apis-in-10-minutes-q0sgsfhbd

更好的是直接去看 expressjs 的 hello world : https://expressjs.com/en/starter/hello-world.html

b) opentok-rtc ‘s server is made by swager-boilerplate , which address is :

https://github.com/AntonioMA/swagger-boilerplate

In this site , it say : Simple implementation of a Node Express server described using a Swagger API, in JSON form.

how to make a Node Express server is in point a)

for swagger , here is a introduce article :

https://mherman.org/blog/swagger-and-nodejs/

c) swagger-boilerplate 用到了 .yml 文件作为 rest server api 定义文件， yml 文件2个空格代表一个层级，多个键值对用 – 分开

swagger api 的在线编辑界面 http://editor.swagger.io/

如何做一个简单的 swagger api : https://www.blazemeter.com/blog/create-your-first-openapi-definition-with-swagger-editor/

d) 怎么返回具体的页面

1) 可以在 expressjs 的js 文件用 sendFile 返回 html , 但这里不是

2) 注意到 package.json 有 “ejs”: “^2.5.5”

3) 实际使用的方法是 res.render(

4) how to use expressjs and ejs :

https://scotch.io/tutorials/use-ejs-to-template-your-node-application

—

here is a example : https://mherman.org/blog/swagger-and-nodejs/

How to debug node.js
JS 部分
How and where to connect redis ?

显示所有key :

redis-cli KEYS '*'

1	redis-cli KEYS '*'

对某一个key取value

redis-cli -p 6379 GET mzcw2011@sina.cn

1	redis-cli -p 6379 GET mzcw2011@sina.cn

这里假定邮箱是key , server 端口 6379

如何从 node.js 存到 redis server ？

在 serverMethods.js中， register的post方法，写：

serverPersistence.setKey(aReq.body.email, JSON.stringify(aReq.body.username));

1	serverPersistence.setKey(aReq.body.email, JSON.stringify(aReq.body.username));

server停止后， redis 存进去的数据还在

删除

redis-cli -p 6379 DEL mzcw2011@sina.cn

1	redis-cli -p 6379 DEL mzcw2011@sina.cn

ServerPersistence 是这样被初始化的：

  var ServerPersistence = SwaggerBP.ServerPersistence;
  var connectionString =
    (aModules && aModules.params && aModules.params.persistenceConfig) ||
    env.REDIS_URL || env.REDISTOGO_URL || '';
  //logger.log('connection string is ' + connectionString);
  var serverPersistence =
    new ServerPersistence([], connectionString, aLogLevel, aModules);

var ServerPersistence = SwaggerBP.ServerPersistence;

var connectionString =

(aModules && aModules.params && aModules.params.persistenceConfig) ||

env.REDIS_URL || env.REDISTOGO_URL || '';

//logger.log('connection string is ' + connectionString);

var serverPersistence =

new ServerPersistence([], connectionString, aLogLevel, aModules);

SwaggerBP是从这里

var SwaggerBP = require(‘swagger-boilerplate’);

room 相关的 api 接口

getRoomArchive ——– 得到room 的所有 archive , 用 roomname 做参数

url 为： https://47.52.61.15:8123/room/111/archive

首先， archive存在哪里？

archive 可以被保存的前提是：

Important: You can only archive sessions that use the OpenTok Media Router (sessions with the media mode set to routed).

就是说只有特定类型的session, 它的archive 才可以被保存。

如果配置了微软云或者亚马逊云，会存到配置；如果没有，会存到 tokbox云，只保存72小时。

用户是否只能 record live stream as archive , 能不能上传录制好的视频

getroom 是建立一个临时的session , 以测试用户的音视频连接

getroominfo 是在 persistent store 查询房间号，如果有，进入

getUsableSessionInfo. 函数按房间号查询session，如果没有，创建新的

August 30, 2019September 3, 2019

如何在 centos7 安装使用 sass

~~首先安装 ruby , 因为 sass是 ruby 的应用~~

~~sudo yum install ruby~~

~~安装后执行~~

<del>//1.删除原gem源
gem sources --remove https://rubygems.org/
 
//2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/
 
//3.打印是否替换成功
gem sources -l
 
//4.更换成功后打印如下
*** CURRENT SOURCES ***

 ———————————————— 
版权声明：本文为CSDN博主「whatsmax」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/asluck/article/details/79093864</del>

<del>//1.删除原gem源

gem sources --remove https://rubygems.org/

//2.添加国内淘宝源

gem sources -a https://ruby.taobao.org/

//3.打印是否替换成功

gem sources -l

//4.更换成功后打印如下

*** CURRENT SOURCES ***

————————————————

原文链接：https://blog.csdn.net/asluck/article/details/79093864</del>

~~但是，添加淘宝源时出错~~

<del>Error fetching https://ruby.taobao.org/:
        SSL_connect returned=1 errno=0 state=error: certificate verify failed (https://ruby.taobao.org/specs.4.8.gz)</del>

1 2	<del>Error fetching https://ruby.taobao.org/: SSL_connect returned=1 errno=0 state=error: certificate verify failed (https://ruby.taobao.org/specs.4.8.gz)</del>

~~google后换为~~

可以有四种方法安装 sass

You can install and process Sass in a few ways, using:

1. Official Sass which requires Ruby 这种要先安装 ruby , 然后用ruby gem 工具安装

2. Node-Sass which runs on Node.js ，用npm 安装 node-sass

3. An Application Tool might include Sass 第三方程序

4 自己下载文件，不使用任何package manage 软件

这里选第四种，因为gem 已经找不到可用的源， npm 封装的过于麻烦，最初的目的只是简单的把 scss 文件转换为 css

第一步，去这个网址 https://sass-lang.com/install

点击 from github 的链接

因为是要装到 centos 7 64bit . 所以下载的 linux-x64

传到linux 机器以后，解压：

tar xvzf dart-sass-1.22.10-linux-x64.tar.gz

进入解压后的 dart-sass 目录

下一步应该把此目录加到系统路径，但之前先测试一下能不能转换 scss文件

在此目录新建 demo1.scss , 内容为

$myColor: #ccc;

#page {
    color: $myColor;
}

$myColor: #ccc;

#page {

color: $myColor;

}

然后执行命令

./sass demo1.scss demo1.css

1	./sass demo1.scss demo1.css

发现转换成功

这一步参考 https://www.cnblogs.com/yemeishu/p/3790525.html

接着，把当前目录加入到系统路径

PATH=$PATH:/home/liuyang/devTools/dart-sass

1	PATH=$PATH:/home/liuyang/devTools/dart-sass

export PATH

1	export PATH

更多 sass 示例

https://www.toptal.com/sass/theming-scss-tutorial

参考文章

https://code.likeagirl.io/getting-started-with-sass-scss-972c266e96e7

详细

如何用npm 实现同样的功能

https://sunlightmedia.org/using-node-sass-to-compile-sass-files-in-an-npm-script/

June 19, 2019August 29, 2019

HTML Notes

scss是什么

CSS is the styling language that any browser understands to style webpages.

SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser, and for information SASS adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster. SCSS files are processed by the server running a web app to output a traditional CSS that your browser can understand.

例子：

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

$color: #ffffff;

$width: 800px;

@mixin body{

width: $width;

color: $color;

content{

width: $width;

background:$color;

}

webpack 是什么

大致是一个编译打包工具

怎么加入 css

一种方法

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<head>

</head>

如果样式表简单，直接写在 head 里

<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>

<head>

<style>

body {

background-color: lightblue;

}

h1 {

color: white;

text-align: center;

}

p {

font-family: verdana;

font-size: 20px;

}

</style>

</head>

还有inline css

<h1 style="color:blue;text-align:center;">

1	<h1 style="color:blue;text-align:center;">

padding , margin , etc

css 模板站： https://templated.co