http://idinr.com/ Recent content on idinr Hugo -- gohugo.io zh Fri, 23 Aug 2024 17:27:55 +0800 http://idinr.com/post/webcomponents/ Fri, 23 Aug 2024 17:27:55 +0800 http://idinr.com/post/webcomponents/ 背景 AngularJS已经是10年前的产物了，官方早已不在维护，而且生态薄弱，组件库极少，这给产品的迭代带来极大的开发成本，交互体验上也落后 http://idinr.com/post/ipodnano/ Tue, 09 Apr 2024 17:15:35 +0800 http://idinr.com/post/ipodnano/ 最近收拾家里的零碎，发现一台躺在盒子里很久的iPod，回想一下，已经12年了 外观被我保护得很好，灯光下依然有光泽，插上电，意外还能用，App http://idinr.com/post/embeded/ Sat, 04 Mar 2023 16:39:13 +0800 http://idinr.com/post/embeded/ 项目地址：https://github.com/hangbale/rust-stm32 开发环境 硬件 Mac Apple Silicon STM32F103C8T6套件 STlink V2 软 http://idinr.com/project/ Sat, 08 Oct 2022 12:48:58 +0800 http://idinr.com/project/ 摄影类博客生成器 rust js http://i.idinr.com https://github.com/hangbale/photography-blog tmdb搜索 rust actix js http://m.idinr.com rust实现js引擎 rust https://github.com/hangbale/metal 几个vscode插件 nodejs https://marketplace.visualstudio.com/publishers/hangbale http://idinr.com/post/build-engine/ Fri, 22 Jul 2022 19:40:14 +0800 http://idinr.com/post/build-engine/ 由于实现一个完整的引擎相当困难且复杂，所以此项目设立了一些相对容易的目标，不过依然会涵盖大部分关键性的技术。 用rust实现 支持简化版的jav http://idinr.com/post/blog-cli/ Wed, 15 Jun 2022 12:01:21 +0800 http://idinr.com/post/blog-cli/ <p>rust实现，json配置，轻量简洁，自动读取exif信息</p> http://idinr.com/post/v8-function/ Sun, 13 Mar 2022 19:08:59 +0800 http://idinr.com/post/v8-function/ 几个概念 函数 计算机语言中的函数是一段可以重复执行的代码，同时可能包含输入输出以及局部数据。 在js中： 函数 = 代码段 + 环境 环境包括了它的参数，局 http://idinr.com/post/v8-memory-layout/ Sun, 13 Mar 2022 19:08:59 +0800 http://idinr.com/post/v8-memory-layout/ 关于JS引擎 V8是如今最流行的JS引擎，包括NodeJS也内置了V8，而其他引擎如spidermonkey逐渐式微。抛开性能之类的指标不谈， http://idinr.com/post/v8-debug/ Fri, 04 Mar 2022 16:39:13 +0800 http://idinr.com/post/v8-debug/ 安装 安装过程比较简单，按照 官网文档 即可。 需要注意如下几点： 依赖Xcode，如果是安装的Xcode的命令行工具，需要先删除后再安装Xcode的 http://idinr.com/post/why-microtask/ Fri, 17 Dec 2021 09:44:53 +0800 http://idinr.com/post/why-microtask/ 多任务 在底层硬件角度上看(这里不考虑多核)，所有的任务都是顺序执行，就像流水线一样，然而有些任务会与IO外设交互，IO外设的处理时间一般远大 http://idinr.com/post/movie-nfo/ Wed, 15 Dec 2021 18:23:56 +0800 http://idinr.com/post/movie-nfo/ 地址：http://m.idinr.com 功能 搜索电影 展示电影基本信息，卡司，剧组人员，海报 生成nfo文件代码。由于服务器流量有限，暂不提供 http://idinr.com/post/compiler-grammer/ Sun, 09 May 2021 13:31:22 +0800 http://idinr.com/post/compiler-grammer/ <p>之前有写过词法分析的原理，接下来是比较重要的文法分析(也称：语法分析)，这个步骤将词法分析产生的词语队列进行解析，提取出一个个语句单元，比如赋值语句，函数生命之类，最终会生成一个经常听到的词AST(抽象语法树)。</p> http://idinr.com/post/error/ Mon, 05 Apr 2021 10:52:54 +0800 http://idinr.com/post/error/ <h2 id="目的">目的</h2> <p>监控错误是为了更好的处理错误。 前端最接近用户，一旦出现线上问题，前端也会最先介入处理，此时如何最快定位问题原因成了一个挑战，因为某些错误比较难复现，可能和特定机型，网络，用户操作有关，一旦发生这种问题，如果不知道这些影响因素，自然很难解决。</p> http://idinr.com/post/%E5%89%8D%E7%AB%AF%E6%B5%B7%E6%8A%A5/ Wed, 02 Oct 2019 17:06:48 +0800 http://idinr.com/post/%E5%89%8D%E7%AB%AF%E6%B5%B7%E6%8A%A5/ <blockquote> <p>h5活动页经常会有生成海报分享到朋友圈的需求，虽然后端可以合成，但是会并发量大的时候会给服务器带来压力，并且比较耗时，这个业务放到前端做更合适，下面梳理几个实现方案</p> </blockquote> http://idinr.com/post/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E6%9E%B6%E6%9E%84%E4%B9%8B%E6%9E%84%E5%BB%BA%E4%BC%98%E5%8C%96/ Wed, 11 Sep 2019 22:17:04 +0000 http://idinr.com/post/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E6%9E%B6%E6%9E%84%E4%B9%8B%E6%9E%84%E5%BB%BA%E4%BC%98%E5%8C%96/ 自从npm和webpack被引入前端开发环境中以后，模块化开发变得越来越流行，一个项目里可能包含着上万甚至数十万个大大小小的包，随着项目越来 http://idinr.com/post/vscode%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91/ Wed, 14 Aug 2019 10:33:52 +0000 http://idinr.com/post/vscode%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91/ VS Code插件开发概览 theme以及编程语言相关的插件不在本文讨论之列 开发环境 基于Yeoman和generator-code npm install -g yo generator-code yo code 以 http://idinr.com/post/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E6%9E%B6%E6%9E%84%E4%B9%8Bgitlab/ Thu, 01 Aug 2019 14:46:05 +0000 http://idinr.com/post/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E6%9E%B6%E6%9E%84%E4%B9%8Bgitlab/ 什么是gitlab-ci gitlab-ci是gitlab内置的持续集成工具，相比jenkins等重量级框架，她有如下优势 轻量 界面美观友好 与g http://idinr.com/post/bind-mount%E7%BC%93%E5%AD%98node-modules/ Wed, 29 May 2019 11:47:58 +0000 http://idinr.com/post/bind-mount%E7%BC%93%E5%AD%98node-modules/ node_modules是前端应用中令人头疼的一个地方，它文件数量多，文件夹数量也多，给打包发布带来了很大的困难，加缓存是优化的一个重要方向 http://idinr.com/post/build-docker/ Thu, 11 Apr 2019 17:20:09 +0800 http://idinr.com/post/build-docker/ <blockquote> <p>前端应用在体积变大以后，编译时间会变得越来越长，特别是在机器性能不强的测试环境，构建时间更长，如果需求迭代频繁，测试环境还会出现资源不足的情况，如何借助docker来缓解这种情况呢？</p> </blockquote> http://idinr.com/post/compile/ Wed, 05 Dec 2018 19:32:33 +0800 http://idinr.com/post/compile/ <blockquote> <p>得益于现代化的编译器的底层支持，各种高级语言层出不穷，帮我们这些开发者脱离了晦涩难懂的汇编语言的苦海，可能很多人都看过龙书《编译原理》，但它阅读起来的门槛很高，大部分人半途而废，到底编译器是如何实现的呢？</p> </blockquote> http://idinr.com/post/algolia%E6%90%9C%E7%B4%A2/ Sun, 16 Sep 2018 17:22:01 +0000 http://idinr.com/post/algolia%E6%90%9C%E7%B4%A2/ 关于algolia algolia是一个云搜索服务提供商，用户可以配置或者上传自己的需要搜索的数据到algolia,然后在dashboard中 http://idinr.com/post/docker%E6%80%BB%E7%BB%93/ Thu, 19 Apr 2018 16:55:28 +0000 http://idinr.com/post/docker%E6%80%BB%E7%BB%93/ 原理 主要由Namespace,CGroups, UnionFS三大技术支撑docker的实现 Namspace 目的是实现资源的隔离,类似于创建了一个沙箱，不同 http://idinr.com/post/redux%E5%8E%9F%E7%90%86/ Wed, 21 Mar 2018 10:33:52 +0000 http://idinr.com/post/redux%E5%8E%9F%E7%90%86/ Redux 让state的变化变得可预测 如果把react视为一个状态机，redux就是是用来管理状态的容器，它的理念是传入某个action,永远返回对 http://idinr.com/post/nodejs%E7%BC%96%E5%86%99%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7/ Fri, 15 Dec 2017 14:38:30 +0000 http://idinr.com/post/nodejs%E7%BC%96%E5%86%99%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7/ 在创建vue项目的时候，经常会用到vue-cli。在npm install vue-cli -g 以后，就可以在命令行里使用vue-cli的命令，这功能的实现主要是是来自于n http://idinr.com/post/gitlab-ci%E6%90%AD%E5%BB%BA%E5%89%8D%E7%AB%AF%E9%83%A8%E7%BD%B2%E5%B7%A5%E5%85%B7/ Sat, 11 Feb 2017 11:14:38 +0000 http://idinr.com/post/gitlab-ci%E6%90%AD%E5%BB%BA%E5%89%8D%E7%AB%AF%E9%83%A8%E7%BD%B2%E5%B7%A5%E5%85%B7/ 在前后端分离以后，前端项目一般基于nodejs配合webpack等打包进行开发，在进入生产环境之前，需要经过打包，测试等过程，这些流程费时费 http://idinr.com/post/%E8%8E%B7%E5%8F%96%E9%9A%90%E8%97%8F%E5%85%83%E7%B4%A0%E7%9A%84%E9%AB%98%E5%BA%A6/ Thu, 12 Jan 2017 16:28:39 +0000 http://idinr.com/post/%E8%8E%B7%E5%8F%96%E9%9A%90%E8%97%8F%E5%85%83%E7%B4%A0%E7%9A%84%E9%AB%98%E5%BA%A6/ slideDown,slideUp是页面中很常见的交互效果，一个元素会先以display:none的方式隐藏起来，等到触发的时候，再以以某种 http://idinr.com/post/js%E6%98%AF%E6%80%8E%E4%B9%88%E5%BE%81%E6%9C%8Dleetcode%E6%9C%80%E9%9A%BE%E7%9A%84%E9%A2%98%E7%9B%AE%E7%9A%84/ Sun, 20 Nov 2016 21:20:44 +0000 http://idinr.com/post/js%E6%98%AF%E6%80%8E%E4%B9%88%E5%BE%81%E6%9C%8Dleetcode%E6%9C%80%E9%9A%BE%E7%9A%84%E9%A2%98%E7%9B%AE%E7%9A%84/ 刷LeetCode，点击难度排行，排第一的题目是Valid Number，通过率12%，看来大家对js的力量一无所知。 原题地址在这里 Validate if a given string http://idinr.com/post/javascript%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0%E5%BA%94%E7%94%A8/ Thu, 29 Sep 2016 16:29:39 +0000 http://idinr.com/post/javascript%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0%E5%BA%94%E7%94%A8/ javascript 不是一门函数式的语言，但是函数却是它的第一类型，函数就像一个普通的数据类型一样，可以随意的引用，返回，声明。这赋予了javascript强 http://idinr.com/post/angular%E5%A1%AB%E5%9D%91%E6%80%BB%E7%BB%93/ Mon, 11 Jul 2016 13:51:46 +0000 http://idinr.com/post/angular%E5%A1%AB%E5%9D%91%E6%80%BB%E7%BB%93/ 最近使用angularjs完成了一个CURD后台的开发。得益于angular的mvc架构以及强大的指令，依赖注入，双向数据绑定，在开发这类应 http://idinr.com/post/%E6%90%9E%E6%87%82javascript%E7%9A%84%E5%8E%9F%E5%9E%8B%E7%B3%BB%E7%BB%9F/ Sun, 08 May 2016 12:31:25 +0000 http://idinr.com/post/%E6%90%9E%E6%87%82javascript%E7%9A%84%E5%8E%9F%E5%9E%8B%E7%B3%BB%E7%BB%9F/ js的原型系统中，有三个很重要的属性,constructor,proto,prototype,做了一张图，梳理一下它们之间的关系。 javas http://idinr.com/post/angular%E5%AE%9E%E8%B7%B5-%E6%9E%84%E5%BB%BAmodal%E7%BB%84%E4%BB%B6/ Tue, 03 May 2016 17:41:33 +0000 http://idinr.com/post/angular%E5%AE%9E%E8%B7%B5-%E6%9E%84%E5%BB%BAmodal%E7%BB%84%E4%BB%B6/ 功能梳理 modal组件的模版应该有三种类型:内置的alert和confirm,以及自定义模版(字符串或者模版URL) 必须返回Promise, http://idinr.com/post/html%E4%B8%AD%E7%9A%84%E5%BC%BA%E8%B0%83/ Sun, 01 May 2016 12:29:29 +0000 http://idinr.com/post/html%E4%B8%AD%E7%9A%84%E5%BC%BA%E8%B0%83/ 在HTML能表现出“强调”效果的标签有很strong, em, i, b。虽然它们产生的效果差不多，但是从语义化的角度来看，它们的使用场景是完全不同的。 http://idinr.com/post/js%E7%BB%A7%E6%89%BF%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F/ Tue, 15 Dec 2015 15:37:19 +0000 http://idinr.com/post/js%E7%BB%A7%E6%89%BF%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F/ js本身并不是一个面向对象的语言。只能用原型来实现继承。梳理一下js实现继承的几种的方式 修改原型 function parent (name, age) { this.name = name; this.age = age; } parent.prototype.hi = function () { alert(&#39;hi! I am&#39; + this.name); http://idinr.com/post/pyspider%E5%AE%9E%E6%88%98/ Sat, 13 Jun 2015 10:25:45 +0000 http://idinr.com/post/pyspider%E5%AE%9E%E6%88%98/ 导语 pyspider是一个基于python的网络爬虫框架,提供了强大的WebUI界面,支持Mysql,MongoDB,PostgreSQL等 http://idinr.com/post/%E8%87%AA%E5%AE%9A%E4%B9%89laravel%E4%B8%ADmigrate%E7%9A%84%E5%AD%97%E6%AE%B5/ Sun, 07 Jun 2015 11:45:50 +0000 http://idinr.com/post/%E8%87%AA%E5%AE%9A%E4%B9%89laravel%E4%B8%ADmigrate%E7%9A%84%E5%AD%97%E6%AE%B5/ https://coderwall.com/p/mo1gew/custom-datatype-in-laravel-schema-builder 扩展GRAMMAR和Blueprint类 use Illuminate\Support\Fluent; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Grammars\MySqlGrammar; /** * Extended version of MySqlGrammar with * support of 'set' data type */ class ExtendedMySqlGrammar extends MySqlGrammar { /** * Create the column definition for an 'set' type. * * @param \Illuminate\Support\Fluent $column * @return string */ protected function typeSet(Fluent http://idinr.com/post/css-%E5%B8%83%E5%B1%80%E6%80%BB%E7%BB%93/ Sun, 19 Apr 2015 10:41:42 +0000 http://idinr.com/post/css-%E5%B8%83%E5%B1%80%E6%80%BB%E7%BB%93/ 关键属性 float 浮动元素将会从文档的正常流中删除，但是不同于absolute和fixed定位，浮动元素还是会对正常流中的元素产生影响。 正常情况下浮