- 🔭 Working on web development with React and Vue.
- 🌱 Trying Rust.
naturellee / blogs Goto Github PK
View Code? Open in Web Editor NEWNaturelLee's blog
NaturelLee's blog
https://naturellee.github.io/v1/server/Restful.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/webFrontEndTutorial.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/theRightWayToBuildYourBlog.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/editorSkills.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/sass.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/reactImp.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/editorSkills.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/theRightWayToBuildYourBlog.html
Cease to upgrade, you cease to live!
使用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;
};
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();
});
JS 日期方法返回的日期默认都是local time; 除非你声明要获取UTC
const dateExample = new Date();
Four possible ways to use new Date();
YYYY-MM-DDTHH:mm:ss:sssZ
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
]
const days = [
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat'
]
const earlier = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)
console.log(earlier < later) // true
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
Setter methods mutate the original date object. Use them on a new date.
const d = new Date(2019, 0, 10)
d.setDate(15)
console.log(d) // 15 January 2019
// 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
JS recalculate the date which is ourside of its acceptable range automatically.
https://naturellee.github.io/sass.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/hackYourMemory.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/hackYourMemory.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/sass.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/rust/RustBook.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/puppeteer.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/rust/test.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/EverythingYouNeedtoKnowAboutDateinJavaScript.html
Cease to upgrade, you cease to live!
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.
attention: information that helps achieve persional goals has relevance.
As kids does.
Comprehension is KEY.
It's Physiological Training.
Talking takes muscle...
Relaxed & curious brain STATE.
Brain Soaking(泡脑子)
Use your body language.
Use Patterns You already know.
It's a composing process.
High Frequency words.
https://naturellee.github.io/v1/rust/RustFirstClass.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/postcss.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/theRightWayToBuildYourBlog.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/Restful.html
Cease to upgrade, you cease to live!
我们很熟悉如下一种场景
<input type="file" name="uploadFile" id="uploadeFile" />上传文件
点击上传文件按钮时,浏览器会打开�你�系统里面的文件管理器,之后会让你选取你想�上传的文件。在你选取文件�,点击确定按钮之后,浏览器会把你刚刚�选择的�相应文件上传到指定的服务器。�
做前端开发的�大都使用很多框架或者小插件�来处理文件上传,很容易就可以搞定这件事。但这也往往造成了�前端开发人员�不太理解�前端文件上传的深层原理。这也引出�了�我下面的问题。
公司需要我使用puppeteer�对公司的�的产品进行自动化集成测试。puppeteer可以很容易�模拟人在真实浏览器中的�每一步操作,我�的思路也是按照现实的每一步动作进行�代码的书写。
总体步骤是:
可参考如下代码
//引入集成测试框架
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();
});
但是,�怎么模拟文件上传功能呢?
�前端文件上传功能:
那如何�来模拟这�几个操作呢?�难道也要这样一步一步来吗?
可是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);
}
https://naturellee.github.io/reactImp.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/webFrontEndTutorial.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/fe/hooks.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/feInterview.html
Cease to upgrade, you cease to live!
新建一个文件命名为你想要的命令,比如 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 属性-安全-组或用户名 编辑所有权限都允许
把sublime安装目录添加到user Path目录
设置alias : mklink sublime.exe sublime_text.exe
使用:sublime fileName
要设置取消掉以管理员身份运行选项
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
https://naturellee.github.io/takeTimeAsFriends.html
Cease to upgrade, you cease to live!
使用postcss的目的:
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']);
"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"
}
https://naturellee.github.io/principles.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/os/os.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/6monthEnglish.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/fe/hooks.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/webFrontEndTutorial.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/sass.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/feInterview.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/test/haha.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/principles.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/Restful.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/10StepstoBecomeaMillionairein5Years.html
Cease to upgrade, you cease to live!
https://naturellee.github.io/v1/fe/hooks.html
Cease to upgrade, you cease to live!
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;
}
}
@minx col($width: 50%){
width: $width;
float: left;
}
/*调用方式: */
.webdemo{
@include col(25%);
}
.anotherDemo{
@extend .webdemo;
border: solid 1px #fff;
}
$webdemo{
margin: 10px;
}
.anotherDemo{
@extend $webdemo;
border: solid 1px #fff;
}
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可以嵌套书写,顶层输出样式
浏览器样式重置
https://naturellee.github.io/v1/hackYourMemory.html#info
Cease to upgrade, you cease to live!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.