干货!前端开发指南20+

废话少说,直接上干货!


1. CSS介质查询和范围选择器

如果你有看过Patrick Clancey最近写的那篇关于A List Apart的文章“mod queries”,那么将会更好地理解这一点。它是一个工具或者说是指南,可以很好的帮助读者去了解这些CSS选择器,以及如何使用它们在网页布局中布置未知数量的项目。

2.抛弃JavaScript

通过智能警告,提示这些组件可能不是语义的或所有用户都可以访问的,这个网站集成了大量不同的技术,展示了如果只使用HTML,CSS和Sass,可以做到什么。如果你想学习前端,可以来这个群,首先是291,中间是851,最后是189,里面可以学习和交流,也有资料可以下载。

3. HTML5超大备忘录

HTML5超大备忘录可以说是一个非常全面的信息图表,你可以选择把它保存为PDF,它涵盖了HTML5所有的标签(不论是旧版,新版和已经过时的版本),属性,桌面和移动浏览器支持,事件处理程序和Canvas功能。

4. SVG创作指南

W3C的官方文档描述了一些用于创建可互操作,可重用,且高性能,高效,实用的SVG文档的最佳实例,这些描述是使用注释和代码样例呈现的。这些文档提供了不需要设置要求的指导,对于手动创建SVG的码农非常有用。

5. HTML 5.2 W3C工作草案

虽然WHATWG HTML5规则依旧是无可争议的“生活标准”,但W3C正在推进它规则的完善。如果你有兴趣看看什么是新的、不同的HTML5.2,不妨从这里开始。

6.Web码农清单

这个清单使码农在完成项目时能有一个精准且具体的参考。 包括可用性,可访问性,搜索引擎优化 ,代码质量,安全性等类别。 此外,类别中的每个项目都包括一些链接,帮助码农检查项目。

7.我可以把制成动画吗?

这一个简单的网站,它允许你搜索一个CSS属性,并会告诉你该属性是否是“可制成动画的”,并将提供浏览器是怎样计算动画的进一步的信息。

8. 移动设备测试

BrowserStack的移动设备测试指南,是基于市场份额数据,操作系统版本,屏幕大小,视口和分辨率等来制作的。这个网站解释说:“我们从3万多个BrowserStack客户的使用统计数据和当前全球市场趋势中获得灵感。这些列表将会不断的更新,当然包括最新的和即将推出的设备。“

9. 设计师的Web性能优化清单

Jon Yablonski创建了这个动态清单,这个清单是基于他创作的一篇文章创建的,设计师们为他们的前端项目添加一些有价值的、通常情况下易于实现的性能改进。每个项目都有指向相关文章的相应部分的链接。

10. Web平台功能的可用性如何?

“由caniuse.com和StatCounter的数据提供支持,这个页面标明具有本机支持的各种Web平台功能的浏览器的用户的百分比。 显然,这不考虑填补能力或其他后备方案。”

11. JavaScript开发者状态调查

“有超过九千名的码农参加了第一版的JavaScript状态调查。 这次调查对相关前端框架和状态管理,构建工具和测试库等方面的问题进行了回答。 你会发现哪一种库类是码农最想要学习的,并。 希望这些数据能帮助你了解不断变化的JavaScript生态系统。

12. 移动使用统计

这是一个实时、动态的移动使用数据信息图表,演示了在线活动的各个方面是如何随着时间的推移而变化。

13. 字体加载策略的综合指南

Zach Leatherman详尽的技术指导给开发者提供了许多处理网络字体的最佳建议和实例,帮助码农处理实际中遇到的问题。

14. MDN学习社区

这是一个你可能已经有所了解的社区,MDN并不适合我们所有人,因为它主要是为初学者所开设的,但不可否认的是,Mozilla Developer Network 是一个可以快速访问和获取 HTML、CSS 和 JavaScript 等各类学习知识的社区。

15.弹力球

Sparkbox中的一支团队建立了一个简单的交互式页面,用于演示如何使用各种技术创建一个弹跳球动画。如果考虑使用动画库的话,这可能是一个不错的选择来比较不同的编码和接口。

16.无障碍指南清单

不论对于码农,工程师,项目经理,测试和编辑人员来说。“让工作在全体成员中进行无缝衔接是一个非常棒的感受。 无论在项目中的你负责什么岗位或项目处于什么阶段,都可以使用这个清单帮助构建无障碍程序。“

17. WebAIM辅助功能列表

这是一份出自WebAIM技术人员只手的一份更详尽、技术含量更高的辅助功能检查表,可在Web页面或作为PDF使用,它分为HTML和Scripts/Plugins(脚本/插件)两部分。

18. 抛弃Lodash / Underscore

这是一项广泛使用的资源,其中罗列出了许多使用vanilla JavaScript替换如Lodash和Underscore等其他内容的技术。并且还对每项技术的浏览器支持进行了介绍。

19.Web的易访问性模式

来自于 eBay 的开发者 Ian McBurnie 说,这是一个针对于易用网络模式而进行的有趣测试,测试内容包括自动完成、复选框、弹出菜单、分页、提示等。你可以在the associated GitBook找到更多的相关文档。

20. Angular代码审查

Angular 1.x的核对清单可以帮助你进行代码审查,并确保您在风格,体系结构,安全性,辅助功能和性能方面使用公认的最佳方法。 你也可以进行用户注册,以便Angular 2的检查表可用时收到通知。

 

时间: 2024-08-03 23:25:42

干货!前端开发指南20+的相关文章

最全面的前端开发指南

HTML 语义 HTML5为我们提供了很多旨在精确描述内容的语义元素.确保你可以从它丰富的词汇中获益. <!-- bad -->  <div id="main">    <div class="article">      <div class="header">        <h1>Blog post</h1>        <p>Published: <

推荐20个很有帮助的 Web 前端开发教程

在平常的搜索中,我碰到过很多有趣的信息,应用程序和文档,我把它们整理在下面这个列表.这是收藏的遇到的有用内容的一个伟大的方式,可以在你需要的时候方便查阅.相信你会在这个列表中发现对你很有用的资料. 1. CSS Vocabulary 一个伟大的指向和点击的小应用程序,让你加快速度掌握 CSS 语法的各个不同部分,学习各个属性的正确的名称. 2. Liquidapsive 一个简单的信息化布局,通过选择框的方式,可以让你在响应式,自适应,流动和静态布局中选择,所以你可以看到四大布局类型之间的区别.

20张详解前端开发工程师思维导图谱

前端开发入门学习有:HTML.CSS.JavaScript(简称JS)这三个部分.所以在学习之前我们需要先明确三个概念: 1.HTML--内容层,它的作用是表示一个HTML标签在页面里是个什么角色. 2.CSS--样式层,它的作用是表示一块内容以什么样的样式(字体.大小.颜色.宽高等)显示. 3.JS--行为层,它的作用是当用户触发某些行为时,会给内容和样式带来什么样的改变. 以下图谱让你更好理解---可以下载高清图查看 javascript流程语句.gif javascript数据类型.gif

如何打造一个令人愉悦的前端开发环境(一)

文章来源 最近几年,前端发展越来越迅速,各种萌新加入了前端这个大家庭,大有赶IOS.超Android的趋势呀!同时,萌新们提出了各种前端工作问题,除了最基础的html.css.js三板斧之外,最让人头疼的应该是关于环境的配置问题,所以以环境作为切入点,开始一系列的前端开发环境配置文章. 主要会涉及到打包.构建.编程工具.debug等等前端环境,以及前后端分离.Nodejs中间层使用伸展面. 工欲善其事必先利其器 以编程工具而言WebStorm.sublime.Atom.VS Code.Brack

前端开发-Web前端 二级菜单移植

问题描述 Web前端 二级菜单移植 web前端新手,好多都还不懂,还请多多指教.需要的效果如图,在鼠标悬停在按钮位置,出现二级菜单开发-Web前端 二级菜单移植-移动web 二级菜单联动"> 以下是需要移植的代码 <ul class="verticals-nav red red"> <li><a href="#"><i class="icon-briefcase"></i>

关于《Swift开发指南》背后的那些事

时间轴(倒叙)2014年8月底在图灵出版社的大力支持下,全球第一本全面.系统.科学的,包含本人多年经验的呕心沥血之作<Swift开发指南>(配有同步视频课程和同步练习)全线重磅推出2014年7月5日苹果宣布Swift语言二十天后,<Swift开发指南>第一稿交予图灵出版社2014年6月9日苹果宣布Swift语言三天后,启动<Swift开发指南>撰写2014年6月2日凌晨1点(北京时间:)在苹果开发者大会WWDC 2014上,苹果宣布了全新的iOS及OS X平台开发语言S

Emmet:大幅度提高前端开发效率的工具

文章简介:Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容.Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言. 介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点

12月18日,前端开发论坛“D2”邀请函

开发论坛"D2"邀请函-d2前端技术论坛 2016"> 我很高兴地告诉大家,淘宝网UED团队正发起一个前端开发技术论坛--D2. 这个论坛将关注于讨论各种前端技术的发展与实践,包括JavaScript.ActionScript.CSS.xHTML等"传统"技术与Adobe AIR.Google Gears等"新兴"技术. 本论坛的第一场将于本月18日在杭州举行,主题为:<前端技术:未来一两年的发展与实践>. 论坛将采用

网页前端开发优化的参考List

网页制作Webjx文章简介:一些前端开发优化的经验总结. 发现的一篇关于前端优化的文章,总结的很全面,要做到面面俱到很难,往往是想优化而没有时间去优化,就像我们公司,一个项目连着一个项目~新员工的培训都省了,还想优化前端啊,不过我真的想有机会和老大好好的整合下公司网站的前端代码~不过要把前端优化的工作放在平时的写代码中去,就不需要刻意的后期优化了.在项目开发中,后台需要搭建好框架,前端更是需要搭建好框架,并且在页面实现中得到实现,只有这样才能事半功倍. 前段时间简单的研究了下前端优化相关的知识,