CompetenceX:我开发的第一个网站 大三在博世西门子实习期间,我为公司开发了人生中第一个像模像样的H5网站:CompetenceX(能力矩阵管理系统,以下简称能力矩阵或C9X)。...网站本身没有太多技术含量,基于aggrid和mongodb外加一个简单的数学模型,但是却成为我在web开发领域中的启蒙项目,为我之后的求职道路上提供了不少燃料。...能力矩阵是一个用来评估员工竞争力和职业技能的一个平台,和所有需求方一样,我的老板当时就给出了这个很模糊的需求。...Ag-Grid:媲美Excel的web框架 完美的集合关系模型如何在前端展现呢,最好的办法呢就是画一个表格,经过1个多月的框架抉择,我终于在能力矩阵2.X版本中选择用aggrid来重构整个系统。...设计focus对象 focus对象是我常用的一种自定义对象,通常挂载在window.app上,但在aggrid这个重量级框架面前,也可以挂载在ag-grid>ag-grid>元素上面。
该对话框是一种特殊类型的窗口,它在顶部有一个工具栏, 在底部有一个按钮栏。...对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具, 如collapsible,minimizable,maximizable工具等。...tools: "#dd" }) }) 对话框窗口顶部工具栏 使用dialog属性toolbar 设置对话框窗口顶部工具栏,可用值有: 1) 一个数组,每一个工具栏中的工具属性都和...:'我的对话框',toolbar:'#tb',modal:true"> 对话框窗口内容。...对话框窗口底部按钮,可用值有: 1) 一个数组,每一个按钮的属性都和linkbutton相同。
与每个管理系统一样,我们需要选择一个网格来显示我们的数据,而我的前任已经在应用程序中使用了两个网格 - ag-Grid(v2.7)和Ng-Table(v0.8.3) - 我热情地讨厌前者。...我查看了AngularJS 1.x的多个网格项目,没有像ag-Grid那样活跃,当我随便链接链接时,我登陆了ag-Grid示例页面。我的前任做错了!...我及时检查了源代码,发现ag-Grid有一个column定义字段,其中包含我真正需要的所有内容。这伴随着排序,过滤,固定和最重要的 - 分组,聚合以及拥有所需数量的行的能力。...我是一个非常自豪的开发人员,所以很难接受我错了,但是当我最终接受它时,由于ag-Grid,我的生活变得如此简单。 旅程 我只是无法停止使用它。我用这个网格做了很多事情。...后来,我添加了自己的数据虚拟化(在ag-Grid上重构之前)并且享受了网格API提供的一些很酷的东西。完成后,CRM的开发很快。
从我使用R开始,就一直用R来制作图表,只有一个理由:R在过滤和数据可视化方面是一个相当了不起的工具。特别是如果我们使用优秀的ggplot2库,我们可以将原始数据在几分钟内拥有一个引人注目的可视化效果。...但是,如果我们想给我们的视觉效果一个额外的震撼呢?如果我们想要做一些手工的修饰呢?我曾长期抵制这些,因为我认为数据传递的主要目的是让观众用自己合适的方式去解析。...在Inkscape 里,涉及到像移动和删除东西的组视为一个单一的对象,而我们想要删除的灰色背景。使用选择工具选择的灰色框,然后点击鼠标右键,点击“取消组合”。...我们从这里开始,按照Inkscape中的指示操作。按照指示后需要重新启动Inkscape。 现在我们可以用文本工具(F8)在圆周围添加文本框。文本框可以通过选择工具移动。...一旦添加标题,你可能会注意到的,我们占据了整个画面。这主要是由于全都由白框包围起来。 让我们将其移动到背景层以此摆脱白色方块。使用选择工具点击在白色圆圈周围的任何地方。
而最常用的,是使用 textarea。这里我在 里使用个 textarea, 一个红点(•),这个红点有一个带有前面特殊字符编码的提示框。...注意:这样设置在处理大文档时会影响性能。 ---- 如果你要设置代码框的大小该怎么做呢?...editor.setSize('800px', '950px'); //设置代码框的长宽 另外,如果你想给代码框赋值,该怎么办呢?...editor.setValue(""); //给代码框赋值 editor.getValue(); //获取代码框的值 如果你再想在其他地方设置新的属性,可以像下面这样写: editor.setOption
而最常用的,是使用 textarea。这里我在 里使用个 textarea, 123 一个红点(•),这个红点有一个带有前面特殊字符编码的提示框。...注意:这样设置在处理大文档时会影响性能。 ---- 如果你要设置代码框的大小该怎么做呢?...1 editor.setSize('800px', '950px'); //设置代码框的长宽 另外,如果你想给代码框赋值,该怎么办呢?...12 editor.setValue(""); //给代码框赋值editor.getValue(); //获取代码框的值 如果你再想在其他地方设置新的属性,可以像下面这样写: 1 editor.setOption
还是显示器的宽度大小(screen.width)?我疑惑了! 每当我疑惑的时候,我不是去找个“我觉得应该是”的解释,而是,新建个HTML页面,像学生时代做生物实验般,多条件对比验证之。 ?...因此,我没事的时候,脑子里就要盘算,该单位可用在何处呢?如果跟其他CSS3的属性配合使用呢?...我们应该都做过或见过这样的交互:点击下图,弹框查看原始大图;或者一屏内(不能有滚动条)大图幻灯片浏览。...在制作高宽限制demo的时候,我还觉得,应该是可以的。...七、场景之:Office Word效果 我们可以把web页面做得像Office文档那样,一屏正好一页;拖动滚动条,我们可以一直往下看到最后一页。 如果只借助CSS,这种效果绝对定位是实现不了的。
双 11 光棍节,我在博客发布了一篇给博客部署一个友好对话框的教程,用了几天感觉非常不错!...②、能够区分用户是否在博客留过言,从而给出不同的欢迎提示; ? ? ③、当有人复制博客任何内容时,将弹出友好的版权保留提醒; IE 内核: ? WEBKIT 内核: ?...修复在部分主题下滚动条不显示文字或错乱问题; 修复底部滚动文字在宽度变窄时会消失的问题; 修改为当宽度小于 480px 底部滚动条自动隐藏; 新增宽度小于 720px 时,不会自动弹出欢迎框; 新增...针对纯代码版(WordPress 插件版已自带底部手动呼出功能): ②、如果想和张戈博客一样,在右下角增加一个手动呼出对话框的功能,你可以如下操作: i....="deleteCookie('welcome');welcome();" title="呼出欢迎对话框"> 文字的就不说了,这都搞不定,那还能说什么呢?
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀。。。。)...,会随窗口的显示大小改变 obj.clientHeight = (height + padding) //元素的高 clientTop、clientLeft 这两个返回的是元素周围边框的厚度...因为滚动条不会出现在顶部或者左侧 offset 指偏移,包括这个元素在文档中占用的所有显示宽度。比client 多了border。 ...+height+padding-bottom //元素的高度 offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的父级元素中最近的(在包含层次中最靠近的)... obj.offsetTop //元素相对于父元素的top 如果弹框的宽度(offsetWidth)+距离左边的距离(offsetLeft)大于父元素的宽度,则判断为超出外部元素范围,需要动态改变弹框距离边框的位置
如果一个移动应用体积很大,占用了过多的容量却并未提供等同的价值会怎么样?后会有期,用户肯定拿你开刀。记得保持应用在体积上足够轻量,这样至少用户不会轻易把你删掉。...2、在应用启动时及要求允许权限控制(推送、地理位置、摄像头等) 回想下,有多少次我们兴冲冲的下载一个应用并准备开始使用时,一个对话框立马跳出来扫了兴?...我不关心这个对话框描述什么内容,只想马上关掉它并继续使用应用功能。它是啥?好吧,菜鸟应用! 3、下载后在使用前就要求登录、注册甚至收费 实际上,这条或许应该排为第一禁忌,很难让人忍受。...你能对用户所做最糟糕的事情就是:在他们下载你的应用后告诉他们必须付费才能使用。烂,烂,烂,重要的事情说三遍,赶紧删之。 4、设计的移动应用界面看起来像网页 如果这样,还需要移动应用干嘛呢?...2、无休止的引导 如果使用自己的手机,我只想快速完成相关任务。别问我各种问题或者让我填写乱七八糟的内容。 3、触控热区尺寸不对 请停止把按钮和输入框做的太小,这不是网页。
添加 flex-wrap 要想让一个元素表现得像弹性容器那样,只需添加 display: flex。但是,如果没有添加 flex-wrap ,那么当屏幕尺寸缩小的时候,将会出现水平滚动条。...Sara Soueidan 写了一篇不错的文章讨论过这个问题。 8. 当视窗高度不足时将元素固定在屏幕顶部 如果你在视窗不够高的时候将一个元素固定在屏幕顶部,会发生什么事呢?...分配一个标签元素给一个输入框时,添加 for="ID" 使用表单元素时,确保所有的 label 元素都分配到了一个 ID。这将提高它们的可访问性,点击的时候,相关的输入框将获得焦点。...p { direction: ltr; } image.png (大图预览) 结论 这里提到的所有问题都是我在前端开发工作中最常遇到的。我的目标是在开发 web 项目时定期检查这份清单。...你在 CSS 中有没有经常遇到什么问题呢?欢迎在评论区分享!
总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的,因此在本博文中详细的介绍并给出实例。...以上的4个属性是成对出现的,因此下面介绍中也成对的介绍,在实例中为了减少代码量,我直接用的id,实际开发中不推荐。...2.2 实例 在页面中,溢出说得更加通俗一些就是有没有滚动条出现,出现了,说明子元素有一部分被父元素遮挡了,就溢出了,下面给出两个实例,一个没有溢出(没有滚动条),一个溢出了,分别观察他们的scrollWidth...console.log(children_div.scrollWidth, children_div.scrollHeight) 打印结果为: 100 120 也就是我给出的...element.scrollTop :返回元素上边缘与视图之间的距离。 我们在页面中经常会用到如图所示的带滚动条的框,我们的QQ消息,微信消息也是这样的呀!
首先安装 opencv :(点击链接查看) https://blog.csdn.net/weixin_43582101/article/details/88660570 我自己画了个图(下文图片数据根据这张图写的...现在我们来去除下线:也就是干扰线降噪 这个原理呢,就是来判断这个像素点旁边是不是白的,如果是说明他是干扰线,就把他也变成白的。...,超过2,就转成白的。...高斯滤波:GaussianBlur函数: 高斯滤波 是需要对一个像素的周围的像素给予更多的重视。因此,可通过分配权重来重新计算这些周围点的值。...,就转成白的。
对面一个温柔的男声:你好,我捡到你的手机了,但之前没电了,刚充上电开机,约个地方把手机给你吧……若干剧情后,你收获了手机和一枚男盆友。...2.扒掉团伙的面纱以及……底裤### 朋友后知后觉,但将此事告知了carry_your。 作为一个白帽子,赌上荣誉和尊严,都要抢回这部被偷走还被刷机的手机!不过,应该怎么做?...于是果断选用了最常见的 XSS 攻击。 carry_your说:“在钓鱼网站在输入密码以后,钓鱼网站让我输入密保信息,我在答案输入框中输入了 XSS 代码,然后就成功提交了。”...carry_your明白骗子这样做的目的:骗子在预防有警察蹲点…… 手机拿回来了,0点,carry_your向朋友传达了这一喜讯。 此事已经告一段落。但是,还有多少手机在骗子手中?...没关系,要么成为白帽子,要么有一个贴心的白帽子的朋友就好,或者,干脆谨慎小心,不要丢手机好了,然而,你又会少一个借口买iPhone 7了!
所谓“内滚动布局”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的滚动而言的,例如,下图所示滚动条,是从头部下方开始: 传统的页面滚动,基本上是相对于整个浏览器窗体,例如,QQ视频首页...以前我们的滚动条是跟浏览器上边缘是靠在一起的,但是,自从变成了内滚动,滚动条是跟网站公用头部下边缘排排站,这会造成什么问题呢?就是一些offset的计算要发生一些变化。...无法滚动的弹出层 基本上,是个像样的web2.0网站都会有弹框web组件,一个黑色半透明的overlay层,上面摇曳着弹框面板,例如这样的: 对于黑色半透明覆盖层,传统实现是这样的:如果要兼容IE6浏览器...但是,麻烦的事情是,如果弹框自身高度很高,却又没法滚动呢(浏览器可用高度700像素,弹框有900像素高)?...我们新版企业账户中心就遇到这个问题,我是这么解决的——overlay和dialog合体。 合体与滚动 合体是什么意思呢?
评论:原文是使用Ctrl+W,我在vs2008 sp1 发现只有Ctrl+Shift+W才可以 #033、 把代码拖拽到新的位置 原文地址:http://blogs.msdn.com/saraford/...这样,大纲的标记没有了,但文档仍然可以按大纲的方式显示。 评论:我觉得这个功能有些多余,既然选择了大纲方式,为什么要把大纲的标记去掉呢?...这是在”窗口“对话框(调用菜单:窗口+窗口. . .)中,选中两个或两个以上的文档,”水平平铺和垂直平铺的按钮“就可用了。 评论:很少用多文档的方式来浏览,作者这个tip有些不是很实用?...虽然看不见滚动条,但你仍然可以滚动操作。 评论:这个功能让人费解,为啥要隐藏呢,也许有人不喜欢鼠标,要那个拖动的滚动条也没用不如隐藏。...另外,你可以通过双击行、列、字符区域可以弹出”转到行“的对话框(当然也可以用快捷键”Ctrl+G“) 评论:我倒是觉得没有”Ctrl+G“调用对话框来的方便
所谓“内滚动布局”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的滚动而言的,例如,下图所示滚动条,是从头部下方开始: ?...以前我们的滚动条是跟浏览器上边缘是靠在一起的,但是,自从变成了内滚动,滚动条是跟网站公用头部下边缘排排站,这会造成什么问题呢?就是一些offset的计算要发生一些变化。...无法滚动的弹出层 基本上,是个像样的web2.0网站都会有弹框web组件,一个黑色半透明的overlay层,上面摇曳着弹框面板,例如这样的: ?...但是,麻烦的事情是,如果弹框自身高度很高,却又没法滚动呢(浏览器可用高度700像素,弹框有900像素高)?...我们新版企业账户中心就遇到这个问题,我是这么解决的——overlay和dialog合体。 合体与滚动 合体是什么意思呢?
目录: 隐藏不常用功能 文本框自动全选 隐形滑动条 双击改名 自动整理常用色 画布滚动条 圆角设置 1....另外,Figma 的模块就算展开了占位也比较少,因为模块里的高级功能还可以再折叠一下: 6.jpg 对于一款功能众多的工具类产品,不同功能之间的使用概率相差很大,我个人是支持这样多级隐藏的。...Sketch 干脆去掉了画布的滚动条,虽然看起来是简洁了,但我有时候会不小心滑到一个偏离很远的地方,然后就不知道怎么回去了。...这时我只好画一个图形,从位置数据判断目前所在位置,然后不停地拖动画布,直至找回原来的位置…… 而 Figma 则不会有这个问题,因为它的画布有滚动条,不论我不小心到哪里去了,都可以通过滑动条轻易找回去!...而 Figma 在圆角设置附近有一个看起来像四个角的图标,一眼就知道怎么用。 14.jpg 当然,用熟练之后,可能会发现 Sketch 可以一次输入多个角的数据可能还更方便一些。
百分比的优势在于,同一个百分比的真实尺寸会跟随屏幕大小变化。举个例子,像这种: 红色框那里,假设现在的要求是一行4个板块,适应任何屏幕。...就是像这样比例明显,板块区分度高的情况适合用百分比来布局。...还有一个就是,如果你用谷歌调试的时候,会发现,效果是这样的: 对,就是会出现一个明显的滚动条。但是如果你用真机,也就是用移动设备看的时候,你会发现其实滚动条是不会出现的。...并且,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。什么意思呢,简单来说就是这些li的对齐基线的默认方式是以最后一行的文字对齐的。...你只要一谈起,就会想念起每一个人来,我只知道我很想念我所谈到的每一个人。
白哥:一开始我周围很多朋友不是太能理解,为什么盲盒潮玩这些会这么火,我当时跟他们有聊:走进潮玩的世界,你会发现,它并不是在售卖一个简单的树脂或塑胶玩具,而是形成了一个庞大的生态圈。...正是因为潮玩没有具体的故事背景设定,人们不需要有预先的知识储备,只需要考虑自己是不是喜欢这个形象,这样就降低了认知与购买的门槛,设计师就可以在某个IP形象的基础上进行无限的想象与延伸,而粉丝们也可以在娃娃身上赋予自己的故事...对此我觉得,“今天我们看到的并不是最终形态,也许几年之后,这样的产品不再以盲盒的形态出现,而以另外一种产品形态或者文化载体存在。但这个市场会一直都在。...大众所需要的、青年需要的情感属性上的满足,只会越来越深化,越来越广泛,越来越强烈,它不会被淹没。” 我认为,这些看起来不像刚需类的东西,其实是一个很巨大的需求,一直都有,就是形式不一样。...SML (图片来自网络) 小编:那白哥觉得潮玩未来会怎么发展呢? 白哥:潮玩未来的趋势,一定是越做越精致,品牌公司在企划阶段有创意能力的同时,制作阶段也要融入更多匠心精神。
领取专属 10元无门槛券
手把手带您无忧上云