CSS 符号及解释

  • <section>:

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

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

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


opentok-rtc 的例子:


  • 各种 div 的用法

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

在 html 中 :

在 less


enterroom 按钮的定义

 

 

room.ejs analyze

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

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


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

a) room.ejs 有

然后

roomView.js

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

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

 


CSS 部分

  • 怎么显示 icon   ,  room.ejs 有这样的片断

  • 这里的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 :

 

in

 

 

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

  •  

     

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

then ,  install and download bower

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    :


对某一个key取value

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


如何从 node.js 存到 redis server ?

在 serverMethods.js中, register的post方法 , 写:

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


删除


ServerPersistence 是这样被初始化的 :

 

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, 如果没有, 创建新的

 

 

 

 

 

 

 

 

如何在 centos7 安装使用 sass

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

sudo yum install ruby 

  • 安装后执行

 

但是, 添加淘宝源时出错  

 

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 , 内容为

然后执行命令

 

发现转换成功

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


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

 

  • 更多 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/


 

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.

例子 :

  • webpack 是什么

大致是一个编译打包工具

  • 怎么加入 css

一种方法

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

 

还有inline  css

 


padding , margin , etc


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