Code Monkey home page Code Monkey logo

blogs's Introduction

blogs's People

Contributors

naturellee avatar

Stargazers

avatar

Watchers

avatar

blogs's Issues

使用create-react-app开发electron注意事项

Questions Encountered

create-react-app配置

使用react技术栈开发其实并不是想象中的那么简单。我们想使用react作为基础，使用react-router作为作为路由控制，使用redux作为状态控制，使用redux-saga进行side-effect。
但是只是把这些模块npm install 就行了吗？不可能的！
在你掌握react,router,redux,saga,history的基础知识之后，它们之间如何配合使用？目录如何安排？antd,css-modules如何使用？react-app-rewired如何配置webpack?添加字段、模块又该怎么做？

config-overrides.js配置如下：

const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const rewireCssModules = require('react-app-rewire-css-modules');//为了使用css-modules
// 注意使用的模块是："react-app-rewire-css-modules": "codebandits/react-app-rewire-css-modules",
// 使用css modules时要在css,less,scss后缀之前添加.module.才可以import style from './exam.module.css'
// 不添加按照正常的import './app.css'方式。
module.exports = function override(config, env) {
    //antd官方配置
  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
  config = rewireLess.withLoaderOptions({
    // modifyVars: { '@primary-color': '#1DA57A' }
  })(config, env);
  // css modules
  config = rewireCssModules(config, env);
  //开发electron时需要指定target
  config.target = 'electron-renderer';
  return config;
};

main.js---electron主进程

渲染进程在哪里？

怎么出错了？

const { ipcMain } = require('electron');
//进程监听
ipcMain.on('minimize', (event, arg) => {
  mainWindow.minimize();
});
ipcMain.on('maximize', (event, arg) => {
  mainWindow.maximize();
});
ipcMain.on('close', (event, arg) => {
  mainWindow.close();
});

Solution

JS date (everything-you-need-to-know-about-date-in-javascript)

Post Link

Timezones

  1. Local time;
  2. UTC(Universal time coordinated) is Greenwich Mean Time(GMT);

JS 日期方法返回的日期默认都是local time; 除非你声明要获取UTC

Creating a date

const dateExample = new Date();

Four possible ways to use new Date();

  1. With a date-string: (don't create dates with date strings.)
    1. new Date('1988-03-21')
    2. ISO 8601 Extended format: YYYY-MM-DDTHH:mm:ss:sssZ
      1. T: the start of time;
      2. Z: present, data => UTC; NOT present => Local Time;
  2. With date arguments:(Recommended)
    1. Local Time: new Date(2019, 5, 11, 5, 23, 59);
    2. Month is zero-indexed. ⏫月份5 => June;
    3. UTC Time: new Date(Date.UTC(2019, 5, 11));
  3. With a timestamp
    1. Timestamp: 毫秒 1970.01.01;
    2. new Date(1560211200000);
  4. With no arguments
    1. new Date();

Formatting a date

Writing a custom date format

  1. getFullYear
  2. getMonth: 0~11
    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ]
  1. getDate: 1~31
  2. getDay: 0~6
  const days = [
    'Sun',
    'Mon',
    'Tue',
    'Wed',
    'Thu',
    'Fri',
    'Sat'
  ]
  1. getHours: 0~23
  2. getMinutes: 0~59
  3. getSeconds: 0~59
  4. getMilliseconds: 0~59

Comparing dates

  1. with >, <, >= and <=.
  const earlier = new Date(2019, 0, 26)
  const later = new Date(2019, 0, 27)

  console.log(earlier < later) // true
  1. can't compared them with == or ===. Use getTime()
  const a = new Date(2019, 0, 26)
  const b = new Date(2019, 0, 26)

  console.log(a == b) // false
  console.log(a === b) // false

  const isSameTime = (a, b) => {
    return a.getTime() === b.getTime()
  }

  const a = new Date(2019, 0, 26)
  const b = new Date(2019, 0, 26)
  console.log(isSameTime(a, b)) // true

Getting a date from another date

Setter methods mutate the original date object. Use them on a new date.

  1. setFullYear
  2. setMonth
  3. setDate
  4. setHours
  5. setMinutes
  6. setSeconds
  7. setMilliseconds
  const d = new Date(2019, 0, 10)
  d.setDate(15)

  console.log(d) // 15 January 2019

Adding/Subtracting delta from another date

// 1. The first approach
  const today = new Date(2019, 2, 28)
  const finalDate = new Date(today)
  finalDate.setDate(today.getDate() + 3)

  console.log(finalDate) // 31 March 2019

// 2. The second approach
  const today = new Date(2019, 2, 28)

  // Getting required values
  const year = today.getFullYear()
  const month = today.getMonh()
  const day = today.getDate()

  // Creating a new Date (with the delta)
  const finalDate = new Date(year, month, day + 3)

  console.log(finalDate) // 31 March 2019

Automatic date correction

JS recalculate the date which is ourside of its acceptable range automatically.

HackYourMemory, Memory Palace

title: HackYourMemory, Memory Palace
date: 2017-11-27 09:19:21
tags: [Memory, Memory palace]
categories: Memory

pic

Info

What we are good at is rememering things when we have a context.
be it visual, emotional, or spatical.

Hippocampus controls emotion and spatial navigation, also controls short and long-term memory processing.

Memory Palace: give things visual and spatial hooks.

How:

  1. assign images to the content you want to memorize.
  2. place them on a path in a real-life location.
  3. retrace the path in your mind, see the images, recall the content.

Practise:

  1. Choose a location you really know.
  2. Choose what you want to memorize.
  3. Create compelling images.
  4. Place the images along the path.
  5. Memorize.

6 months for learning a new language

title: 6 months for learning a new language
date: 2017-11-23 21:28:13
tags: English
categories: language

pic

5 Principles

1. Focus on language content that is relevant to you.

attention: information that helps achieve persional goals has relevance.

2. Use your New Language as a Tool to Communicate From Day 1.

As kids does.

3. When you first UNDERSTAND the MESSAGE, you will unconsciously ACQUIRE the language.

Comprehension is KEY.

4. Language learning is NOT about KNOWLEDGE.

It's Physiological Training.
Talking takes muscle...

5. Psycho-physiological STATE Matters!

Relaxed & curious brain STATE.

7 Actions

1. Listen A LOT!

Brain Soaking(泡脑子)

2. Focus on getting the meaning FIRST (before the words)

Use your body language.
Use Patterns You already know.

3. Start Mixing.

It's a composing process.

4. Focus on the core.

High Frequency words.

5. Get a Language Parent.

6. Copy the Face.

7. Direct Connect to Mental Images

puppeteer集成测试问题解决

问题�描述

我们很熟悉如下一种场景

<input type="file" name="uploadFile" id="uploadeFile" />上传文件

点击上传文件按钮时，浏览器会打开�你�系统里面的文件管理器，之后会让你选取你想�上传的文件。在你选取文件�，点击确定按钮之后，浏览器会把你刚刚�选择的�相应文件上传到指定的服务器。�

做前端开发的�大都使用很多框架或者小插件�来处理文件上传，很容易就可以搞定这件事。但这也往往造成了�前端开发人员�不太理解�前端文件上传的深层原理。这也引出�了�我下面的问题。

公司需要我使用puppeteer�对公司的�的产品进行自动化集成测试。puppeteer可以很容易�模拟人在真实浏览器中的�每一步操作，我�的思路也是按照现实的每一步动作进行�代码的书写。
总体步骤是：

  1. 获取元素 ①
  2. 元素点击、获取焦点 ②
  3. 输入数据 ③

可参考如下代码

//引入集成测试框架
var puppeteer = require("puppeteer");
//登录url
const loginUrl = "URL";
puppeteer
.launch({
    //false:在真实的浏览器中打开
    headless: false,
    //url不是https时需要设置
    ignoreHTTPSErrors: true
})
.then(async browser => {
    var page = await browser.newPage();
    //设置页面大小
    page.setViewport({ width: 1920, height: 1080 });
    //打开页面
    try {
        console.log("正在打开页面……");
        await page.goto(loginUrl, { waitUntil: "networkidle2" });
    } catch (e) {
        console.log("launch err:" + e);
    }

    /**1.登录 */
    try {
        console.log("正在登陆……");
        //获取用户名输入框        ①
        let userName = await page.$("#username");
        //点击用户名输入框        ②
        await userName.click();
        //输入用户名             ③
        await page.keyboard.type(account, { delay: 20 });
        //获取密码输入框
        let thePassword = await page.$("#password");
        //点击密码输入框
        await thePassword.click();
        //输入密码
        await page.keyboard.type(password, { delay: 20 });
        //获取登录按钮节点
        let loginBtn = await page.$("#login-button");
        //点击登录按钮
        await loginBtn.click();
        await timeout(3000);
        console.log("完成登录。");
    } catch (e) {
        console.log("login err:" + e);
    }
    //关闭browser
    browser.close();
});

但是，�怎么模拟文件上传功能呢？
�前端文件上传功能：

  1. 点击上传input标签；
  2. 在系统文件管理器中选取要上传的文件
  3. 确定，�上传。

那如何�来模拟这�几个操作呢？�难道也要这样一步一步来吗？
可是puppeteer里面并没有处理打开系统文件管理器--选取文件--确定这一系列操作的接口。
怎�样才能解决呢？

解决方法

可能好多一开始使用puppeteer做集成测试的人都会犯上面的错误。我搜索了几乎能找到的blog都没有解决我的问题。最终还是在官网�github api中窥到了解决问题的方法---.uploadFile()

elementHandle.uploadFile(...filePaths)
...filePaths <...string> Sets the value of the file input these paths. If some of the filePaths are relative paths, then they are resolved relative to current working directory.
returns: <Promise>
This method expects elementHandle to point to an input element.

可是这真的是解决我们问题的api吗？
试了之后才发现，真是！可是表单中的文件上传这么重要的功能竟然也没有一个例子。我也真实服了。
最终puppeteer文件上传�功能实现如下

try {
    console.log("文件上传中……");
    //获取上传文件按钮
    let uploadFile = await page.$("#uploadFile");
    //文件上传fileToUpload是文件所在的地址--可以是相对�也可以是绝对路径
    await uploadFile.uploadFile(fileToUpload);
} catch (e) {
    console.log("文件上传错误：" + e);
}

忠告

  1. api要写清楚功能，特别是重要的；
  2. 能�提供实例的最好�提供；
  3. English is REALLY important!

sublime&vscode小技巧

sublime

两步实现在Git Bash中用Sublime打开文件

新建一个文件命名为你想要的命令，比如 subl（注意不能有后缀名），内容：

#!/bin/sh
"C:\Program Files\Sublime Text 3\sublime_text.exe" $1 &

保存到 C:\Program Files (x86)\Git\mingW32\bin 目录下
使用方法：subl 文件名
问题：window下有时可能会出现权限不足的情况
通过设置 该脚本、git-bash.exe、git-cmd.exe 属性-安全-组或用户名 编辑所有权限都允许

window cmd中使用sublime

把sublime安装目录添加到user Path目录
设置alias : mklink sublime.exe sublime_text.exe
使用：sublime fileName

windows 中 sublime 有时打不开拖入的文件

要设置取消掉以管理员身份运行选项

在macOS平台上设置sublime Text 和vscode打开其他文件

1. 在终端运行`vim ~/.zshrc`
2. 添加`
alias subl='/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl'
alias code='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code'
`
3. 保存更改,重启终端。
4. 使用方式: code XX.js或者subl xx.js

postcss实践

title: postcss实践
date: 2017-12-20 09:07:38
tags: postcss
categories: [css,postcss]

postcss

Goals

使用postcss的目的：

  1. 使用scss；
  2. 使用sourcemap
  3. 自动添加浏览器前缀：autoprefixer;
  4. 兼容ie8

gulpfile.js

var gulp = require('gulp');//gulp
var sass=require('gulp-sass');//gulp-sass
var postcss = require('gulp-postcss');//gulp-postcss
var sourcemaps = require('gulp-sourcemaps');//sourcemaps
var autoprefixer = require('autoprefixer');//自动添加浏览器前缀
var mqpacker=require('css-mqpacker');//合并media query
var cssnano= require('cssnano');//css优化压缩
var color_rgba_fallback = require('postcss-color-rgba-fallback');//给rgba()颜色创建降级方案
var opacity = require('postcss-opacity');//给opacity提供降级方案
var pseudoelements = require('postcss-pseudoelements');//将伪元素的::转换为:
var vmin = require('postcss-vmin');//使用vm为vmin做降级处理
var pixrem = require('pixrem');//给rem添加px作为降级处理
var will_change = require('postcss-will-change');//为will-change动画属性添加回退

//新建任务scss
gulp.task('scss', function() {
    //设置postcss处理插件
    var processors = [
        will_change, 
        autoprefixer, 
        color_rgba_fallback, 
        opacity, 
        pseudoelements, 
        vmin, 
        pixrem, 
        autoprefixer({ browsers: ['last 4 versions','> 0.2%','ie>=8' ]}), 
        mqpacker,
        // cssnano,//dev不用压缩
        ];
//指定需要处理的.scss文件目录
    return gulp.src('./scss/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))//要放在postcss之前
        .pipe(postcss(processors))
        .pipe(sourcemaps.write('./'))//指定.css.map文件生成目录
        .pipe(gulp.dest('./dest'));//指定处理之后生成的css文件目录
});

//新建任务scss:watch 监控.scss文件的变化自动处理
gulp.task('scss:watch',  function () {
  gulp.watch('./scss/*.scss', ['scss']);
});

//设置默认任务并指定依赖任务scss:watch
gulp.task('default', ['scss:watch']);

HowToUseIt

  1. mkdir 'myfolder' then cd 'myfolder';
  2. copy devDependencies and gulpfile.js;
  3. npm install /cnpm install;
  4. write your .scss files;
  5. CLI: gulp ,run gulp;

devDependencies

  "devDependencies": {
    "autoprefixer": "^7.2.3",
    "gulp": "^3.9.0",
    "gulp-postcss": "^6.0.0",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.1",
    "pixrem": "^4.0.1",
    "postcss-color-rgba-fallback": "^3.0.0",
    "postcss-opacity": "^5.0.0",
    "postcss-pseudoelements": "^5.0.0",
    "postcss-vmin": "^3.0.0",
    "postcss-will-change": "^2.0.0"
  }

references

  1. using-postcss-for-cross-browser-compatibility
  2. getting-started-with-postcss-a-quick-guide-for-sass-users
  3. using-postcss-together-with-sass-stylus-or-less
  4. postcss-deep-dive-roll-your-own-preprocessor

sass&compass

sass

Notes about sass&compass video: https://www.imooc.com/video/7063

变量

/*定义： */
$headline: Arial, Verdana, Helvetica,sans-serif;
/*使用： */
.main-sec{
    font-family: $headline;
}

局部文件

_variables.scss

宿主文件可以使用 @import 'variables' 引入局部文件；

父类选择器

a{
    &:hover{
        color:blue;
    }
}

属性嵌套

.main-sec{
    font:{
        family: $main-sec-ff;
        size: 16px;
    }
}

可重用代码块mixin

@minx col($width: 50%){
    width: $width;
    float: left;
}
/*调用方式： */
.webdemo{
    @include col(25%);
}

代码块继承

.anotherDemo{
@extend .webdemo;
border: solid 1px #fff;
}

  1. @extend 不能继承选择器序列；
  2. 使用%,用来构建只用来继承的选择器；
$webdemo{
    margin: 10px;
}
.anotherDemo{
    @extend $webdemo;
    border: solid 1px #fff;
}

sass中的@media

phone tablets medium devices large devices
<768px >=768px >=992px >=1200px 
@mixin col-sm($width: 50%){
    @media(min-width: 768px){
        width: $width;
        float: left;
    }
}

css渲染时是从右向左查找元素，因此应该给元素添加类名
@root可以嵌套书写，顶层输出样式

compass

Normalize.css

浏览器样式重置

How to use sass simply

  1. install ruby;
  2. install sass;
  3. sass --watch sourceDirectory:distDirectory --style outputStyle
    e.g.: sass --watch scss:css --style expanded

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.