7个作弊般的实用设计技巧（翻译）
原文链接：7 Practical Tips for Cheating at Design
原文作者：Adam Wathan & Steve Schoger
一篇讲程序员自己构建页面的技巧的文章，Tailwind CSS 作者写的。
这些技巧确实很实用
自己翻译的，英语水平很一般，查单词意思整理语言之后写下来的东西。不免有错误，欢迎指出
7 个作弊般的实用设计技巧用策略来改善你的设计，而不是用天赋。每个开发者都不可避免地会遇到需要自己去决定页面设计的场景，不论开发者们是否喜欢。
也许公司没有一个全职的设计师，或者你自己想做一些什么东西。也许你正在 hacking 一个项目，并且你喜欢这个项目比另一个 bootstrap 网站更好看。
这很容易让你甩甩手抱怨，_干哦，我这辈子估计都弄不好，我又不是个设计师_。但事实证明，有很多技巧可以让你快速地提升设计等级，而且不一定非得有平面设计师的背景。
今天，这儿有些简单的好点子可以该改善你的设计
1.使用颜色（color）和粗细（weight）来控制等级，而不是大小（size）
设计 UI 的时候，一个常见的错误是想把重要信息的字体大 ...
明年继续努力啦
今年都做了些什么2021 年马上就结束了，今天是 2021.12.29。想到什么写什么，零零散散，写给自己
不知不觉，距离新型冠状病毒肺炎出现已经两年了，这东西已经无法从我的人生中忽视掉了。新冠疫情深刻地改变了生活方式，以前是想去哪里就去哪里，现在旅行不仅在时间和行动上收到了限制，在个人的计划里更是一种奢侈。希望明年可以好起来吧
都怪拖延症…写了好久，本来打算在 12.31 写完的，结果拖到了今天（1 月 3 号），所以今年去年什么的…emmmm 我也不知道是那年，凑合看吧（
好的地方夸夸自己
技能进步前年（2020）从郑州来到上海，找了半个月的工作，确定了今年一年的生活方式。刚来上海的时候知识储备差的有点多，又找不到人问，不好意思问，就只能把搜索框作为自己的导师。这给我的职业发展提供了最底层的基础，也就是我一年内最常用的学习方法。
还记得那年找工作蛮辛苦的
技术能力上的进步可以这么总结：从不信任代码到不信有什么东西是搞不出来的
我解决问题的方法论也有了雏形，用两个词来概括，格物，溯源
万物可分，有果必有因，遵循基础规律不停的分解问题，理清多个问题之间的联系，找到各个问题 ...
Laravel-Homestead使用记录
文档地址laravel6Homestead
什么是 homestead
Laravel 致力于让整个 PHP 开发体验变的更愉快，包括你的本地开发环境。Vagrant 提供了一种简单、优雅的方式来管理和配置虚拟主机。Laravel Homestead 是一个官方预封装的 Vagrant box ，它为你提供了一个完美的开发环境，你不需要在本地机器安装 PHP、web 服务器和其他的服务器软件。你再也不用担心会弄乱你的操作系统了！Vagrant boxes 是一次性的。 如果出现问题， 你可以在几分钟内销毁并重新创建 box !Homestead 可以运行在任何 Windows、Mac、或 Linux 系统， 它包括了 Nginx web 服务器，PHP 7.3、PHP 7.2、PHP 7.1、MySQL、PostgreSQL、Redis、Memcached、Node 以及你开发 Laravel 所需要的东西
以上是文档的介绍，简而言之就是让开发更方便的虚拟主机，里面跑了个 web 程序
这个虚拟机经常会炸，缓存占满了硬盘之类的事情，启动的时候就报错了…这个时候最快的方法不是去修理他， ...
刻在DNA里的食谱
也许有那么几个小吃，听说过的人不多，甚至可能只有我吃过小的时候我妈会给我做一些她看来很普通的东西给我吃。长大之后我才发现很少有人这样吃…这些味觉记忆对于我来说都是珍贵的宝物
目前还没有拍照，等未来做了想起来我会加上照片的嗯！一定会的！
糖焙芝麻印象里这个是治咳嗽的偏方，用红糖做的。后来我自己学会做了家里面的芝麻就…随后便开发了白糖版本不过我觉得红糖更好吃
食材：
白糖或红糖
芝麻(最好是生芝麻)
这个超级简单的，连油都不需要放凉锅撒上芝麻铺底，之后把糖洒在芝麻上面，这个量需要稍微控制一下糖太多的话做出来就会比较硬，而且很甜很甜糖太少的话芝麻会凝固不到一起…
开小火，很小的火，能把锅烧热就行的火开始的时候不用管，等温度慢慢上来了之后，糖会融化糖开始融化的时候，用不锈钢勺子慢慢拨动等糖液化，焦化，就可以出锅了…在冷却的时候，要稍微拍散一点，或者平铺在干燥的盘子上（不管用什么盛，一定不能有水）
冷却之后就可以吃啦…是那种熟芝麻的香味混合焦化的糖的味道
艾叶炒鸡蛋这个也是母上大人不知道从哪里听来的偏方…可以驱寒，治感冒流清鼻涕的时候吃这个确实有用
食材：
盐
艾叶
鸡蛋
鸡蛋碗里 ...
微信小程序的登录逻辑
传统登录逻辑
输入账号密码，发送给服务端
服务端校验后，下发一个表示登录状态的token给客户端
每次发送需要登录的请求时，携带这个token
当服务端认为token过期，返回前端信息，提示用户重新登陆
登录的本质是一个有用户登录状态信息的身份标识
微信小程序登录在微信小程序中，可以通过微信提供的登录能力直接获取到微信官方所提供的身份标识如此便可跳过密码账号的流程，简化传统登录过程
微信小程序的登录流程
通过 wx.login 获取到用户的 code，判断用户是否授权读取用户信息
1234567891011121314151617181920212223// 登录，完成后执行请求队列var login = function () { if (!login_loading) { login_loading = true; wx.login({ success: function (res) { if (res.code) { Api.login(res.code).then ...
网页中的复制粘贴 Clipboard API
遇到的需求一段数据，一个按钮点击按钮复制数据并给出 toast 提示实现的关键在于复制功能
通过execCommend('copy')实现直接搜索出来的方法 具体实现大概是下面这个样子
1234567891011121314151617181920212223<!-- 样式我就懒得放了 --><body> <div class="wrapper"> <div class="text-box">复制这段文字吧</div> <button class="copy">复制上面的文字</button> <textarea class="test" placeholder="粘贴到这儿试试"></textarea> </div> <script> const btn = document.querySelector(&qu ...
最近在准备成考
2021.9.24
最近的事目前着力于十月份的成人高考博客更新会放缓一些…（反正也没人看）公司里也有些忙…没有好多鱼鱼可以摸了 orz
毕业两三年越来越觉得专科学历往上发展受限制太大…成考不见得有多大用处，但肯定有用至少稍微了解一点马克思主义的皮毛还是挺有趣的
自己的数学能力是真的不行….准备一下政治，准备准备英语就差不多了毕业之后看的国外网站也不少，但实际一做题发现什么都不会果然学语言还是词汇量最重要啊…程序语言也要至少记一记 Api
反正一直忙着就对啦
记录各种各样的面试题
这个文章主要用来收集一些面试题目
每次面试要共享屏幕手写面试题都会挂掉
有种尿尿被人看着的紧张感，脑袋里一片空白
2024依次执行一系列任务，并可以中断1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980/** * 依次顺序执行一系列任务 * 所有任务全部完成后可以得到每个任务的执行结果 * 需要返回两个方法，start用于启动任务，pause用于暂停任务 * 每个任务具有原子性，即不可中断，只能在两个任务之间中断 * @param {...Function} tasks 任务列表，每个任务无参、异步 * * **/function processTasks(...tasks) { let isPaused = false; // 用于控制是否暂停 let currentTaskIndex = 0; ...
元素进入视口淡入的效果
监听元素进入视口的函数Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。通过这个方法可以判断元素是否在视口中，如果元素在视口中的话就执行函数
123456789101112// 检查元素是否在视口内isElementVisible(el, animationFn) { const rect = el.getBoundingClientRect() const vWidth = window.innerWidth || document.documentElement.clientWidth const vHeight = window.innerHeight || document.documentElement.clientHeight if(rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) { return false } else { ...
3D卡片翻转效果
一个简单的 3D 卡片效果嘛… 业务需求，就做了一下
HTMLHTML 结构很简单，一个 relative 的父元素，两个 absolute 的子元素（一个正面一个背面）
123456<div class="wrapper"> <div id="card"> <div class="front">这是正面哦</div> <div class="back">这是背面~</div> </div></div>
CSS 基础样式父元素长宽设定，居中transform-style: preserve-3d;将变换舞台设置为 3d（有遮挡效果）
MDN 上时这样说的:CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面，元素的子元素将不会有 3D 的遮挡关系。由于这个属性不会被继承，因此必须为元素的所有非叶子子元素设置它
perspective: 5 ...
