AngularJS <input> 输入框自适应内容宽度

在Gist上找到的一个directive,用来让input输入框的宽度自适应内容宽度。
https://gist.github.com/mbenford/8016984

原理是生成一个相同样式的,隐藏的span,通过span的宽度动态改变input的宽度。
同时兼顾了input有placeholder的情况。

如果是在比较大的系统中,可以用throttle节流阀包装一下resize方法,避免性能问题。

如果是textarea,对应的directive在这里:
https://github.com/monospaced/angular-elastic

让 MySQL Workbench 直接显示 BLOB 字段的内容

使用MySQL Workbench,查询一个带BLOB字段的表时:

1
SELECT * FROM mysql.general_log ORDER BY event_time;

只能看到一个BLOB图标。

MySQL JDBC 在查询中调用 REPLACE(UUID(),'-','') 查出重复的 UUID

MySQL版本是5.7.25,最近升级了JDBC驱动,5.1.45 -> 8.0.13,导致一个SQL报异常,SQL是用一个子查询,拿到数据后插入到另一张表用的。

1
2
3
INSERT INTO table_2 (id, title, modified_date)
(SELECT REPLACE(UUID(),'-','') AS id, table_1.title AS title, NOW() AS modified_date
FROM table_1)

可见table_2的id是在子查询中,用REPLACE(UUID(),'-','')生成的。

这样的语句在MySQL 5.7.25命令行模式下,Workbench下,JDBC 5.1.45下都没有问题,但是JDBC升级到8.0.13后,却报了主键重复的异常。

ERROR SqlExceptionHelper - Duplicate entry 'ae3867585cc611e986e30e045157562c' for key 'PRIMARY'

使用Termux在Android手机上搭建、编辑Hexo博客

使用Termux在Android手机上搭建、编辑Hexo博客

高级终端Termux是个强大的终端模拟器,这样的应用应该特别适合不喜欢图形界面的命令行爱好者,组合了强大的终端模拟和拓展Linux包收集支持。

  • 享受bash和zsh。
  • 使用nano和vim编辑文件。
  • 通过ssh访问服务器。
  • 使用gcc和clang编译代码。
  • 使用python控制台来作为口袋计算器。
  • 使用git和subversion检查项目。
  • 使用frotz运行基于文本的游戏。

Step:

  1. 在Google Play或酷安搜索Termux安装,link:
    https://play.google.com/store/apps/details?id=com.termux
    https://www.coolapk.com/apk/com.termux

  2. 打开Termux,更新软件源

    1
    2
    apt update
    apt upgrade -y

CSS鼠标悬浮改变相邻元素样式

效果:

Hover me! X

源码:

1
2
3
4
<div class="chip">
<span class="name">Hover me!</span>
<span class="close-bth">X</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.chip {
display: flex;
width: fit-content;
font-size: 20px;
text-align: center;
background-color: #ccc;
}

.chip .name { width: 120px; }
.chip .close-bth { width: 30px; }

.chip .name:hover,
.chip .name:hover + .close-bth,
.chip .close-bth:hover {
color: white;
background-color: #888;
}

CodePen link:
https://codepen.io/iMaeGoo/pen/jRqYRJ

hmmmm…这种实现也没什么难的,其实是想试试在博文中插入HTML啦。

AngularJS Material制作气泡弹出效果

AngularJS Material制作气泡弹出效果

点击一个按钮后需要弹出一个对话气泡,气泡内有各种设置项,点击外侧可以退出。

现在的效果:

在线测试:https://codepen.io/iMaeGoo/pen/KYVRGL

编写Chrome插件将googleapis替换为国内可访问的CDN

编写Chrome插件将googleapis替换为国内可访问的CDN

由于公司不能安装梯子,所以不能访问谷歌商店,平时频繁地要访问国外的AngularJS网站,比如AgGrid,AngularJS Material,AngularJS官网等,很多用了Google的CDN源,页面就无法正常加载。

一开始的思路是改host文件,但是我们没有Google CDN的证书,会造成证书错误。

参考并优化了:https://github.com/justjavac/ReplaceGoogleCDN ,动手写了一个Chrome插件,对所有特定请求重定向,解决痛点!

Make simple <md-chip> work without <md-chips> in AngularJS Material?

Make simple <md-chip> work without <md-chips> in AngularJS Material?

I’m using AngularJS Material v1.1.1.
I’m finding a way to use simple <md-chip> without <md-chips>.

Here is an easy way in Vue Material: https://codesandbox.io/s/lyoqv4l0z?module=App.vue

1
<md-chip class="md-primary" md-deletable>Deletable</md-chip>

But I can not find the similiar way in AngularJS Material document.
https://material.angularjs.org/latest/api/directive/mdChip

AngularJS表达式无法引用$rootScope变量

Angular version: 1.6.6
在HTML中想使用$rootScope中的变量时发现取不到,加上$root之后解决。

HTML表达式对应的JS变量
{{abc}}$scope.abc
{{$ctrl.abc}}this.abc
{{$root.abc}}$rootScope.abc

GitHub Page配置CDN遇到无限301重定向(HTTP ERROR 564)

今天发现腾讯云上有免费的CDN流量,就尝试给自己的Github Page用上,配置好后却一直301重定向,毕竟Github服务器不是自己的,配置和log都看不了,那为什么一直301呢?

给腾讯云CDN提交工单,客服查了一下(不到10分钟),发现是HTTPS的问题。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×