搜索到
95
篇与
小小孩
的结果
-
目前最好的前端在线 IDE 最近发现了我认为目前最好的前端在线调试工具 ！目前 我们熟知的 在线前端在线调试工具分别是 是 codepen ，jsfiddle 以及jsrun ;虽然上面足够好用，但我感觉还不及我新发现的。它就是 stackblitz先看示意图stackblitz它一款最近上线，非常不错的在线 IDE - StackBlitz，主要面向前端 web 开发者，目前支持 Angular, React 和 Ionic，Vue 及自定义模板。StackBlitz 的界面风格和 VS Code 非常相似，支持在线代码编写和自动处理安装依赖关系、编译、效果的实时预览。除了与 VS Code 一样的界面，快捷键也几乎相同，如果你平时就使用 VS Code 开发，那完全可以无缝切换。StackBlitz 还支持通过 npm 安装依赖包，您还可以将文档/博客/等中的代码片段复制到编辑器中，它会自动检测您丢失的软件包。还支持生成一个非常独特的 URL ，在单独的窗口中预览和调试还有热加载，就像您在本地环境一样。最棒的功能是 ，支持文件夹拖入！只需将现有文件和文件夹拖动并放入编辑器中即可导入✨不再复制+粘贴、上传或 git 命令。浏览器会立即解析本地文件和文件夹，并在眨眼间重新浏览您的项目此外，StackBlitz 还支持比如分享、下载等功能。真的非常不错，建议大家都可以尝试一下。 -
在线 VS Code 打开 GitHub 上的代码 在 Github 上，浏览代码不方便，需要一层一层点击目录去找寻代码，很麻烦！虽然之前 有 Tako 浏览器扩展如下还有 Octotree 浏览器扩展如下但还是不能很好地想本地编辑器浏览代码那么丝滑直到发现了 Github1s它可以让你在 1 秒内（俗称 +1s）通过在线版本的 VS Code 来打开 GitHub 上的代码，只需要在对应项目的 URL 中 github 后面加上 1s 即可。如 https://github1s.com/hipi/email-bot即刻打开在线 VS Code github1s 就是这样一个很有创意、很赞的项目！同时呢，github1s 在 GitHub 开源，你也可以自己私有化部署
-
-
-
nginx 判断移动端还是电脑跳转域名或不同的文件 经常会遇到这种需求，根据访问终端的不同，来选择跳转不同的内容。一般区分小屏幕移动端和电脑端而区分访问内容。这有两种办法，一种是根据终端跳转域名，还有一种是根据终端访问的文件不同。下边就说下 nginx 对于这两种办法的配置跳转域名比如 www.domain.com 是 PC 端网址 而 m.domain.com是移动端网址server { listen 80; server_name www.domain.com domain.com; root /data/domain; charset utf-8; if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){ # 跳转判断 rewrite ^/(.*)$ http://m.domain.com$uri redirect; # redirect表示302跳转（暂时性转移） } index index.html index.htm; #... }跳转不同的文件server { listen 80; server_name www.domain.com domain.com; root /data/domain; #默认PC端访问内容 charset utf-8; if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){ # 跳转判断 root /data/mobile_domain; #移动端访问内容 } index index.html index.htm; #... }
-
H5 语音朗读 API 前段时间有同学问我 h5 有没有朗读 api ,一开始他找了 云服务的 api ,其实 h5 本身自带朗读h5 中相关的 API 有两类，一类是“语音识别(Speech Recognition)”，另外一个就是“语音合成(Speech Synthesis)”，这两个名词听上去很高大上其实就是 “语音转文字”，和“文字变语音”，这次我们看看我们要使用的“文字变语音”（SpeechSynthesisUtterance） 。兼容性用之前我先来看看兼容性可以看到 IE 不支持 ，部分移动端不支持，其他的都还好！简单用法先来个最简单的使用例子 读出 "羽叶风雨 Nice"var utterThis = new SpeechSynthesisUtterance("羽叶风雨 Nice"); speechSynthesis.speak(utterThis);浏览器 使用一下，（真~不~错~）。支持属性当然还有其他玩法 ，api 还支持 语言 音量 语速 音高text – 要合成的文字内容，字符串。lang – 使用的语言，字符串， 例如："zh-cn"或'ja-JP'。voiceURI – 指定希望使用的声音和服务，字符串。volume – 声音的音量，区间范围是 0 到 1，默认是 1。rate – 语速，数值，默认值是 1，范围是 0.1 到 10，表示语速的倍数，例如 2 表示正常语速的两倍。pitch – 表示说话的音高，数值，范围从 0（最小）到 2（最大）。默认值为 1。根据这些属性我来封装成语音函数function speak(textToSpeak) { var u = new SpeechSynthesisUtterance(); u.text = textToSpeak; //汉语 u.lang = "zh-CN"; //速度 u.rate = 1; // 其他属性 speechSynthesis.speak(u); } speak("支付宝到账，100万，元");😄 😁 😆试试别的语言function speak(textToSpeak) { var u = new SpeechSynthesisUtterance(); u.text = textToSpeak; //汉语 u.lang = "ja-JP"; //速度 u.rate = 1; speechSynthesis.speak(u); } speak("雨の降る夜は"); //雨下的夜😛 😝 😜回调方法不仅如此，该实例对象还暴露了一些方法：onstart – 语音开始时触发。onpause – 语音暂停时触发。onresume – 语音重新开始时触发。onend – 语音结束时触发。onboundary - 当语音达到单词或句子边界时触发。onerror - 语音发生错误时触发。onmark - 语音发生错误时触发。示例 在语音读完打印 "真的到账了！！！"function speak(textToSpeak, fun) { var u = new SpeechSynthesisUtterance(); u.text = textToSpeak; //汉语 u.lang = "zh-CN"; //速度 u.rate = 1; // 其他属性 speechSynthesis.speak(u); u.onend = function () { fun && fun(); }; } speak("支付宝到账，100万，元", function () { console.log("真的到账了！！！"); });speechSynthesis我们看到上面例子还是用了 speechSynthesis 对象，它是是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。SpeechSynthesis.cancel() - 移除所有语音谈话队列中的谈话。speechSynthesis.getVoices() - 返回当前设备所有可用声音的 SpeechSynthesisVoice 列表。SpeechSynthesis.pause() - 把 SpeechSynthesis 对象置为暂停状态。SpeechSynthesis.resume() - 把 SpeechSynthesis 对象置为一个非暂停状态：如果已经暂停了则继续。SpeechSynthesis.speak() - 添加一个 utterance 到语音谈话队列；它将会在其他语音谈话播放完之后播放。我来看看我的浏览器支持哪些语音包列表 ，运行 speechSynthesis.getVoices()总结语音API还不太成熟，可以当成彩蛋类来用！比如消息提醒，或者可能为以后无障碍提供帮助！
-
css 适配暗黑模式 自从苹果支持暗黑模式后，各个 APP 网站都支持暗黑模式，之前很多都是 js 手动切换模式，其实纯 css 媒体特性也能完全适配prefers-color-schemeprefers-color-scheme 是 CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。语法no-preference 表示系统未知用户在这方面的选项。light 表示系统选择使用浅色主题的界面。dark 表示系统选择使用暗色主题的界面。例子<div class="day">Day</div> <div class="night">Night</div> @media (prefers-color-scheme: dark) { .day { background: #333; color: white; } .night { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day { background: white; color: #555; } .night { background: #eee; color: black; } }实际使用正常模式的下 我们正常写 css 代码 ， 如果需要根据系统显示暗黑模式即可添加如下代码... // 正常css 代码 @media (prefers-color-scheme: dark) { ... //暗黑模式css代码; }兼容性好用是好用 ，如果考虑兼容性 就需要注意了（我是不考虑兼容性）
-
解决 Xcode Command Line Tools 错误或无法安装问题 问题发现升级 Mac系统后，发现 Xcode Command Line Tools 出现问题了在我构建项目时 出现了No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.当我运行/usr/sbin/pkgutil --packages | grep CL/usr/sbin/pkgutil --pkg-info com.apple.pkg.CLTools_Executables发现没有任何输出 无语😒 ， 可能 Mac 升级把我的包搞丢了 试了下 sudo xcode-select --reset 运行后 并没有正常解决办法办法一 命令行安装命令行运行以下命令, 然后输入root密码来删除Xcode Command Line Toolssudo rm -rf $(xcode-select -print-path)再运行以下来命令重新安装xcode-select --install 重新安装结束后检查是否一切正常正常会如下图所示 如果重装不了 就试试办法二办法二 手动下载安装苹果开发官网（需要登录苹果账号） https://developer.apple.com/download/more/?=command%20line%20tools 会列出所有版本的安装包手动下载Command Line Tools for Xcode 双击安装一步一步安装
-
ES2020 新运算符 '??' ES2020 新的运算符 ??ES2020 新的特性新增了一个运算符 ?? (空值合并运算符)什么是 ??空值合并运算符并不是什么全新的东西。它只是一种获得两者中的第一个不是 null/undefined值的语法。 a ?? b 的结果是：如果 a 是已定义的，则结果为 a，如果 a 不是已定义的，则结果为 b。等于说，如果第一个参数a不是 null/undefined，则 ?? 返回第一个参数a。否则，返回第二个参数b。 翻译一下 就是result = a ?? b; result = (a !== null && a !== undefined) ? a : b;与|| 比较咋一看 有点跟 || 像,空值合并运算符 ?? 是最近才被添加到 JavaScript 中的，它的出现是因为人们对 || 的使用不太满意。例如如下代码const a = 0,b=1; const result1 = a ||b // 1 const result2 = a ||b // 0它们之间重要的区别是：|| 返回第一个 真 值。?? 返回第一个 已定义的 值。在上面代码中a b 是已经定义的值,不存在未定义! || 的语法类似找到第一个值的 Boolean(a) 是 true 的运算付.?? 运算符的优先级?? 运算符的优先级相当低：在 MDN 文档中 中为 5。因此，?? 在 = 和 ? 之前计算，但在大多数其他运算符之后计算。let a = null; let b = null; // 重要：使用括号 let c = (a ?? 100) * (b ?? 50); alert(c); // 5000否则，如果我们省略了括号，则由于 * 的优先级比 ?? 高，它会先执行，进而导致错误的结果。// 没有括号 let c = a ?? 100 * b ?? 50; // 就变成了与下面这行代码的计算方式相同 let c = a ?? (100 * b) ?? 50; // 明显不是我们想要的 已知问题出于安全原因，JavaScript 禁止将?? 与 && 或 || 一起使用,除非使用括号明确指定了优先级。下面的代码会触发一个语法错误：let result = 1 && 2 ?? 3; // Syntax erro 可以明确地使用括号来解决这个问题：let result = (1 && 2) ?? 3; // 2 总结空值合并运算符 ?? 提供了一种从列表中选择第一个已定义的值。?? 运算符的优先级非常低，在表达式中使用它时请添加括号。如果没有明确添加括号,不能将其与 || 或 && 一起使用。
-
