分享

ks教师视频

自我介绍.mp4

自我介绍男孩.mp4

E story.mp4

D story.mp4

B story.mp4

B bear.mp4

A chant.mp4

F song.mp4

D song.mp4

G story.mp4

G chant.mp4

H  hippo.mp4

E song.mp4

H chant.mp4

D E F chant .mp4



外教KS所有视频

http://img.luqidong.com/video/wjks/cow%20dog%20cat%20bee.mp4


http://img.luqidong.com/video/wjks/dark%20colors.mp4


http://img.luqidong.com/video/wjks/light%20colors.mp4


http://img.luqidong.com/video/wjks/line.mp4


http://img.luqidong.com/video/wjks/orange%20green.mp4


http://img.luqidong.com/video/wjks/red%20yellow.mp4


http://img.luqidong.com/video/wjks/wind%20rain.mp4







webstrom 2016 破解 激活方法

webstrom 2016 破解 激活方法

菜单help >>>> Register 

选择License Server 

输入

http://idea.qinxi1992.cn/点击ok



webstrom 使用技巧合集

最近玩了一下SASS,感觉不错,不过CSS3在不同平台兼容性代码一直是个头痛的问题,手写处理费时费力又容易出错。
曾经一直用sublime text写html和css,这些问题都有相应的插件。用Webstorm写js,但是来回切换编辑器也比较麻烦。
虽然Webstorm内置了css3自动补全功能,当输入user-select时,Webstorm会自动补全:

  1. -webkit-user-select: none;

  2. -moz-user-select: none;

  3. -ms-user-select: none;

  4. user-select: none;

但是很多情况下,这种自动补全并不令人满意,比如当我输入display:flex;时,Webstorm并不会自动补全为:

display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;

关于Autoprefixer

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:

a {background : linear-gradient(to top, black, white);display : flex}::placeholder {color : #ccc}

编译成:

a {background : -webkit-linear-gradient(bottom, black, white);background : linear-gradient(to top, black, white);display : -webkit-box;display : -webkit-flex;display : -moz-box;display : -ms-flexbox;display : flex}:-ms-input-placeholder {color : #ccc}::-moz-placeholder {color : #ccc}::-webkit-input-placeholder {color : #ccc}::placeholder {color : #ccc}

Autoprefixer 同样会清理过期的前缀,因此下面的代码:

a {-webkit-border-radius : 5px;border-radius : 5px}

编译成:

a {border-radius : 5px}

因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。

具体安装和配置:

所以尝试在Webstorm下搜索autoprefixer插件,无果。那就自己手动配置了一个。首先我考虑配置File Watchers,但是不习惯,原来在sublime text下用autoprefixer都是手动触发的,所以后面我配置了External Tools。

1.首先当然是安装node.js;

(略)

2.安装Autoprefixer,

见https://github.com/postcss/autoprefixer:

sudo npm install autoprefixer -g

要不要加sudo,或者是不是全局安装(-g)那就看你自己的环境了。

npm太慢,我是用淘宝的 NPM 镜像的https://npm.taobao.org/

3.安装postcss-cli

Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli

sudo npm install postcss-cli -g

4.配置External Tools

打开Webstorm设置,Preferences -> Tools -> External Tools ;点击新增按钮,如图:

769EDD8B-6AF0-4D6B-B73B-DF2DC25FAA1F

填写具体配置,例如我的配置,如图:

0C4975D0-6531-432B-8812-46D56164B817

  1. Program:填入你的postcss-cli 的PATH;

  2. Parameters: -u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$ ,你可以根据你自己的需要配置,具体参见https://github.com/code42day/postcss-cli

  3. Working directory :$ProjectFileDir$

配置好后,你可以在css,或sass文件中右键,就可以在右键菜单中看到External Tools – autoprefixer,点击搞定,嘎嘎。

5.设置快捷键

右键太麻烦的话,可以设置个快捷键,打开Webstorm设置,Preferences -> Keymap , 搜索External Tools , 配置 autoprefixer即可。 不要和原来的冲突就可以了。

ps:windows下可以直接用autoprefixer的PATH,具体配置

414473-5caba82f3555f590 (1)


windows 找不到autoprefixer.cmd,webstrom无法用执行autoprefixer 这个问题,
可以配置
Program:C:\Users\gaojun-pd\AppData\Roaming\npm\postcss.cmd
Parameters:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$
Working directory :$ProjectFileDir$


webstrom 11 激活方法

在点击试用30天之前把本地时间调整到2090年,然后关闭吧时间改回来再打开webstrom 就好啦。


大白菜U盘制作打开就无响应

问题描述:

打开大白菜之后程序就会无响应卡在那边。


解决方案:

1、关闭迅雷

2、把u盘都拔了 关闭迅雷再打开 程序


webstrom 注册码 通用

webstrom7\webstrom8\webstrom9\webstrom10

注册码 

一、

luqidong

===== LICENSE BEGIN =====

48920-12042010

000026V3OvOav!JJr4dUsEYZZ55vMQ

SU!vT56YUd6VpR1kLaRdshdydhY6uq

aXSm"QR7zGWkmTSn!grKut2T"IJE4v

===== LICENSE END =====

阅读详细 »


fiddler使用入门(一)

一、主要功能

1、截获http或者https请求。
2、查看截获的请求
3、伪造请求 服务器到客户端  客户端到服务器
4、测试网站性能
5、解密hhtps的web会话
6、第三方扩展

二、工作原理


在客户端和服务器之间设置一个代理服务器 修改服务器和客户端之间的请求。
代理模式:流模式 和 缓冲模式。 流模式是实时将http的请求返回给我们的应用程序。缓冲模式是等所有的http全部准备好才返回给我的应用程序。缓冲模式可控制服务器的响应。流模式更接近于浏览器本身的行为。
三、实用场景
1、配置host。生效块。---比SwitchHosts好多了
2、前后端的接口调试。---发送开发提供的接口地址参数等等
3、线上的bugfix  ---就是的把线上的脚本fiddler到本地修改本地调试线上看效果。
4、性能优化分析。
四、工具界面介绍
1工具栏
依次是:1)添加备注。在请求后面添加备注 具体干嘛自行脑补。
             2)回放功能 重新发送该请求。亦可用R键 快捷键。前提是你要选中该请求。
             3)清空监控面板 有几个选项 全部清空也可在命令输入行里面输入 cls
             4)断点继续按钮  配合断点使用点击红色区域实现断点,可以发送请求时断点,接受响应时候断点。
             5)流模式和缓冲模式切换
             6) 将http里面的东西解压出来
             7)需要保持的会话数,就是监控框里面展示的最多条数
             8)大概意思就是点击然后移动到其他应用窗口比如chrom浏览器,这样就只会显示chrom浏览器的请求了
             9)查找功能不多说
             10)对当前回话的保存
             11)保存截图 点击之后5秒保存
             12) 计时器 
             13) 快速启动一些浏览器   
             14)清除ie缓存快捷键
             15)编码解码文本内容 很有用 比如百度搜索的关键字被编码了  用这个可以解码
             16) 将右侧面板做成浮窗
2、状态面板
            1) 黑色的部分是控制台,可以输入快捷命令 直接输入help可以跳转到快捷键页面查看帮助,alt+q是光标快速定位到控制台
            2)控制fiddler是否工作
            3)过滤回话来源比如点击webBrowser 这样fiddler就只会监控浏览器的回话请求(这里指的是ie)
            4)回话数量
3、监控面板
           1)记录值分别是  状态码  、 协议 、请求的主机地址(域名)、 服务器地址、 URL。
           2)Statistics数据统计 一个请求的性能方面的指标 一个会话的统计信息 可以为优化提供依据
           3)Inspectors 对请求进行解包。比如头 cookies 返回等 具体自己看脑补。
           4) AutoResponder最常用的功能 文件代理 本地文件替换线上文件
           5)Composer后端接口调试  不需要写任何js 就可以调试后台接口
           6)Timeline 查看请求性能 使用方式 选择一系列会话查看


五 、 实战

           一、host 

有点就是 立马生效 管理起来简单

 二、文件替换  AutoResponder

   不仅仅是文件 还能把文件替换成响应 比如延迟5妙等

未完待续


微信分享文章带图片方法

其实很简单。只要你内容页面有图片并且长宽比例是1.6这样分享就有拉~我在博客头部插入一张骚动的图片 每次分享到朋友圈就会带上图片而不是单个连接的标志 ps:确保那张图片被收录过!这点很重要 今天亲测!


gulp入门教程

   

一、什么是gulp。

 gulp和grunt是基于Node.js创建,是一个基于任务的命令行工具,它能够同构减少减少预先需要准备的资源来加速工作流。它将工作包裹进入任务之中,任务会随着你的工作进程自动编译。它与grunt的最大区别就是它充分借鉴了Unix操作系统的管道(pipe)思想,很多人认为,在操作上,它要比Grunt简单。

1、插件职能不够单一


2、插件完成了本不该由插件完成的事情(这个我有点迷糊,为什么说是 things don't need to be plugins?)


3、配置过于复杂


4、由于糟糕的流程控制导致的临时文件/目录


二、安装gulp

1、npm install -g gulp


2、npm install --save-dev gulp 注释:使用–save/–save-dev就可以自动更新package.json


三、使用方法

在项目目录直接新建gulpfile.js文件,gulp就5个方法:task(创建任务),run(跑任务),watch(观察一般文件改的自动运行任务),src(源文件),和dest(输出文件)。

一般前端任务都是一些sass编译、文件合并压缩重命名、制作雪碧图、和脚本检查这几个需要如下插件

gulp-jshint脚本检查 gulp-sass sass编译 gulp-concat 合并 gulp-uglify脚本压缩 gulp-rename重命名 gulp-minify-css css压缩

下面上代码:

/**
 * 组件安装
 * npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
 */

// 引入 gulp及组件
var gulp    = require('gulp'),                 //基础库
    imagemin = require('gulp-imagemin'),       //图片压缩
    sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css压缩
    jshint = require('gulp-jshint'),           //js检查
    uglify  = require('gulp-uglify'),          //js压缩
    rename = require('gulp-rename'),           //重命名
    concat  = require('gulp-concat'),          //合并文件
    clean = require('gulp-clean'),             //清空文件夹
    tinylr = require('tiny-lr'),               //livereload
    server = tinylr(),
    port = 35729,
    livereload = require('gulp-livereload');   //livereload

// HTML处理
gulp.task('html', function() {
    var htmlSrc = './src/*.html',
        htmlDst = './dist/';

    gulp.src(htmlSrc)
        .pipe(livereload(server))
        .pipe(gulp.dest(htmlDst))
});

// 样式处理
gulp.task('css', function () {
    var cssSrc = './src/scss/*.scss',
        cssDst = './dist/css';

    gulp.src(cssSrc)
        .pipe(sass({ style: 'expanded'}))
        .pipe(gulp.dest(cssDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(livereload(server))
        .pipe(gulp.dest(cssDst));
});

// 图片处理
gulp.task('images', function(){
    var imgSrc = './src/images/**/*',
        imgDst = './dist/images';
    gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(livereload(server))
        .pipe(gulp.dest(imgDst));
})

// js处理
gulp.task('js', function () {
    var jsSrc = './src/js/*.js',
        jsDst ='./dist/js';

    gulp.src(jsSrc)
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(jsDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(livereload(server))
        .pipe(gulp.dest(jsDst));
});

// 清空图片、样式、js
gulp.task('clean', function() {
    gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
        .pipe(clean());
});

// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function(){
    gulp.start('html','css','images','js');
});

// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){

    server.listen(port, function(err){
        if (err) {
            return console.log(err);
        }

        // 监听html
        gulp.watch('./src/*.html', function(event){
            gulp.run('html');
        })

        // 监听css
        gulp.watch('./src/scss/*.scss', function(){
            gulp.run('css');
        });

        // 监听images
        gulp.watch('./src/images/**/*', function(){
            gulp.run('images');
        });

        // 监听js
        gulp.watch('./src/js/*.js', function(){
            gulp.run('js');
        });

    });
});

运行的话只需要在工程目录下 gulp yourtaskname  你的任务名就可以了