• 为了吸引更多的用户,设计好一个分享海报还是很有必要的。而小程序要生成一个海报还是有点坑的,下面分享下我们打卡小程序的一些经验。分享海报的效果图如下:
  • 最近使用 flex 布局来做各种居中真的带来了不少方便,现在来总结一下平时的普通布局是怎样使用 flex 布局来实现一样的效果。布局:在使用 flex 之前,实现这种布局主要是利用 float 属性,使元素脱离文档流,同时因为要实现 1:1 的比例,要将子元素的 width 设为 50%。同时要记得在后面的元素添加 clear:both 属性。
  • 刚学习Shiny的时候,总觉得Shiny这么方便,再也不用去看HTML/CSS/JS了,直到对于Shiny app展示效果越来越高时,发现Shiny一些工具的默认参数已经无法满足一些需求了,这时又得返回来依靠HTML的一些用法来实现。。。所以现在觉得Shiny是一个连接R语言用于快速可视化结果的工具,至于做一些网页或者更加美观的网页,还是得会一点HTML相关知识;如果不追求网页交互效果以及美观程度,Shiny的函数的默认参数就足够了。当然如果了解更多的HTML/CSS/JS知识,也就可以设计出更加好的Sh
  • 当今前端界,各种ui框架数不胜数,而且各个大厂家,都有一套自己的框架在那摆着,这让我们前端开发者们情何以堪。如此多的前端ui框架,我们该如何选择呢,如何快速掌握应用到实际开发中呢?特别是我们新手同学,刚开始接触框架时不是特别的理解,也不大会用。这便是我们今天讨论的问题。框架的意义,什么是框架的意义,是让你去想这个框架给我们解决了什么问题,提供了什么帮助,为什么选择框架?这个答案是显而易见的:有了上面对ui框架的认识,那接下来肯定是要使用框架,老前端开发自不必说,我这里总结两个新手同学常出现的问题:
  • 使用shadow DOM的一个主要好处是样式隔离。 要了解这意味着什么,让我们来假设我们要创建自定义进度条组件。 我们可以使用两个嵌套的DIV来显示条形,使用另一个DIV来显示文本以显示百分比,如下所示:请注意模板元素的使用:这个进度条实现的问题是它的两个内部div可以被用户自由访问,它的样式规则也不局限于进度条。 例如,为进度条定义的样式规则将应用于进度条外部的内容,其类名为progress:
  • variable fonts(下文中vf为缩写)是数字时代制作的字体技术,用更小的文件大小在web上提供更丰富的排版,但是一项新的技术往往伴随着新的挑战和复杂未知的情况。不过,我们要拥抱技术,那么怎么才能使用它呢?让我们从以下几个问题去学习一下variable fonts。有人解释它为一个存在多种字体格式单字体文件。一般来说,字体的不同格式,比如斜体、粗细、拉伸存储在分开的单个文件内,而现在,你可以存储多种字体格式在一个openType可变字体文件内,正因为如此,这个vf文件相对来说体积会更小。
  • flex 容器默认存在两根轴主轴(main axis): 默认水平,可通过设置flex-direction改变主轴方向。交叉轴(cross axis): 默认垂直。
  • 动画能够给平淡的交互增彩不少,利用好动画,能够设计出很棒的交互,增强产品体验。我们常常会为一些炫酷的效果而惊叹,这也是前端当时吸引我的地方。前端的复杂度除了状态的管理、组件的拆分和代码复用之外,交互和体验也是一个很重要的方向,但这却被很多前端所忽视,国内的产品交互大多也比较平淡无奇,可能是考虑到迭代速度,可能是实现成本。而国外的产品经常能看到一些令人眼前一亮的交互动画效果。说实话我很少接触到一些复杂的交互效果的需求,可能是国内的产品和设计都比较保守。最近接触到一个较为复杂的交互效果的需求,花了一天多的时间
  • 据以往用户想要添加不同搜索引擎时,只需要在 ”Add Search Engine“ 中将其添加到搜索引擎列表中,然而在 Firefox Nightly 中这一操作没有任何响应。
  • 模块:Toolbar 就是常用的工具栏,每个选项都可以有独立的行为,此外,考虑到移动端宽度不够的场景,还支持了更多模式,一些优先级不够的操作可以放到更多里。
  • <div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物为改变参照物(橘色框)后的效果
  • 基于前一篇文章关于 Flex 语法知识的梳理,这篇文章整理出一些常见的 Flex 布局解决方案。实现方式仁者见仁,欢迎大家评论区指正交流。文中的案例主要包含以下几个方面:现代浏览器都支持 Flex Box 语法,可以放心使用: