关注IMWeb前端社区公众号

  • 第一时间获得最新、最火的技术干货
  • 定期推送您所关注的专题文章
  • 和大牛们一起讨论前端技术
  • 获取IMWeb社区、前端相关的最新活动
热文 更多

  • 人人都是艺术家!谈谈那些奇怪的字符(上)

    [http://7tszky.com1.z0.glb.clouddn.com/Fuglq3YmP6ynTE_QMnvVkKuOVO_-] 前言 编码,是每个程序员绕不开的话题。对于前端工程师而言,字符更是会直观地展示在界面上。 提起文字,大部分人的脑中,都会定式为规整排列的字符。但是林子大了什么鸟都有,世界上可是存在着6800+种文字,难免会飞出来一些诡异的鸟… 而号称“万国码”的Unicode,在实现编码与展示的时候,也会不会遇到一些奇葩的事情呢? 事实上,可能你早已见识过了: -------------------------------------------------------------------------------- x̙͈̝͍͕̙̄͛̽̆͌́̕͟g̘̣̠̝̟̤̥̼̼̽͑͋̈̑̒͟͞q̛̤̦̝̘͎͋̔̋͌͒̆̋̚͡f̵̢̙͇̮̠̋̀͌̅̉̃̔͜͜͠͡r̢̜̩͙̭̲͓͈̈̀͑̆͋̚͢͜m̷̛͙̝̣̲̭͍͉̊̓̾̈̋̿̚͢͟͠s̷̡̩͔̮͈̜̊̽͂̆̈́̃̓͋̏ 热҈的҈字҈都҈出҈汗҈了҈

  • 面试阿里前端P6血和泪换来的收获

    [http://7tszky.com1.z0.glb.clouddn.com/Fvghxjyu2vkHzehv5mBlWuDDcmSX] 我的一个朋友在前端耕耘了一段时间,也在网上进行了高度培训学习,最近一段时间他打算跳槽去阿里面试前端P6开发岗位,结果被痛虐了一回,估计从此以后会给他留下不可磨灭的阴影啊 真是十年生死两茫茫,一鲁代码,到天亮 哈哈; 接下来是被痛虐面试的问题,也是根据他面试完成后的回忆总结,各位看官来说说你们的想法; 1、html document是干嘛的? 2、html 5 哪些操作可以 SEO优化 3、css 盒模型有哪些及区别 content-box border-box padding-box 4、重排重绘机制 webkit渲染页面的步骤 5、body 有一个捕捉机制的事件 里面某一个块的事件 有没有办法不触发捕捉机制 6、解决回调地狱的方法 (回答 Promise 再问还有 什么? 回答 Observerble 再问还有什么? 不知道了) 7、Promise.then reject了 后续的catch 还会不会致行

  • 十本学习前端必看书籍,让你效率提升10倍

    自学最苦的莫过于自己一个人摸索没有人带路,本人现在推荐几套适合自学的书籍,希望能帮到大家。第一本,入门《Head first HTML&CSS》最 文章后面附录文档下载链接 自学最苦的莫过于自己一个人摸索没有人带路,本人现在推荐几套适合自学的书籍,希望能帮到大家。 第一本,入门 《Head first HTML&CSS》 最好的入门书。看两遍就对HTML & CSS 有个大概印象了。 此时把w3cschool作为备查手册收藏起来 第二本《CSS权威指南(第三版)》 最权威的CSS书籍,除了阅读W3C的文档外的不二选择(就是翻译有点操蛋,遇到感到难理解的地方可能还是要求助于网络资源)。有时间(无论是现在还是将来)可以反复看,并当做字典随时查。 第三本《精通CSS》 广受前辈推荐的一本书。上一本书是字典的话,这本书相当于《中学生作文大全》,汇集了一些CSS的最佳实践。 第四本《图解CSS3:核心技术与案例实践》 这本书比较新,讲解的是最新的CSS3(前三本书停留在CSS2.1时代),CSS3也是必学的,不是什么可学可不学的最新技术。 HTML

  • 自定义字体

    概述 一般来说,网页上的字体使用的都是我们电脑里面的字体,比如我们常说的微软雅黑、宋体就是 windows 系统自带的字体。所以你可以看到网页的字体一般都比较中规中矩,不像平面设计那样各种新花样。 但是我们在浏览一些网站时,还是可以发现一些非常酷炫和高端的字体。如 小米笔记本 Air [http://www.mi.com/mibookair/] : [http://coding.imweb.io/img/p2/webfont-xiaomi.png] 这里我们可以看到其使用了'F5130a'字体,但是这个酷炫的高端字体我们的电脑里面都没有,它其实就是该站点自定义设置的字体。 那么如何实现自定义字体的效果呢?答案是 CSS 的 @font-face 。 @FONT-FACE @font-face 的语法规则如下: @font-face { font-family: <fontFamily>; /* 自定义的字体名称; */ src: <source> [<format>][,<source> [<format>]]*; /* 自定义的字体的存放路径、格式; */

  • [小技巧]巧妙使用flex, letter-spacing实现过渡动画

    巧妙利用flex, 实现下面的效果~ 无需 js 来获取 clientWidth 0.gif [http://upload-images.jianshu.io/upload_images/252050-1fabcfa5eba154e1.gif?imageMogr2/auto-orient/strip] 有时候会做一些小的宽度变换, 比如 居中到居左的变换 , 例如上面的搜索的placeholder 我之前试过4种居中到居左的切换 0. width + text-align:center; 1. position:absolute; left + right 的拉伸; 2. justify-content: center/flex-start; 3. display:inlne-block + text-align:center; 4. margin: 0 auto 的切换;大概知道方式的, 就不细写了~ 其中0是有transition动画的, 但是 with 的值需要 js 生成, 其他4种配合transition都没有效果

热问 更多

  • 赵鹏帆 2017-09-29 14:19

    如题:参考https://twitter.com/necolas/status/829128165314306048?utm_source=feweekly&utm_campaign=issue42&utm_medium=web PWA(做离线化的)目前有这么成熟吗? 这个是否也说明以Javascript为基础的全栈体系正在逐渐落地?

  • 大漠刀客 2017-07-16 13:45

    js高级程序设计里说 this 引用的是函数执行的环境对象, 下面foo()在window下执行,环境对象就是window? * function foo(){ * alert(this); * } * foo(); * 那么函数嵌套为什么也是[object Window]?比如下面的 * function foo(){ * function foo2(){ * alert(this); * } * foo2(); * } * foo(); 输出的还是window * function SpecialArray(){ * alert(this); * } * alert(this); * SpecialArray(); * var colors = new SpecialArray(); 弹出的依次是[object Window],[object Window],[object Object]?这里的Object又是什么情况

  • 络黎 2017-10-19 17:31

    请指出JavaScript宿主对象和原生对象的区别?