您的位置:首页 > Web前端

Dare you? 5个​编码前端挑战

2020-12-17 20:18 1076 查看


来源:Pexels

想要拥有一个“穿衣显瘦,脱衣有肉”的完美身材,没有其他途径,你就得加强锻炼肌肉。

而编码就像肌肉,同其他肌肉一样需要锻炼。

想要擅长编码只有一种方法,那就是尽可能多地去编码。程序员每天早上醒来时都心怀对编码的渴望,但往往缺少对编码内容的创造性想法。

现在小芯将向各位“编码高手”发出挑战——5个前端挑战,在挑战中,做你所爱之事——编码。

加强创造性想法的锻炼,快速了解并上手运用它们吧!

1.纵向条形图


来源:https://status.fauna.com/#about-this-site

纵向条形图在显示每日、每周、每月或年度数据方面很有用。上图示例中显示了每天的服务正常运行时间。

完成这项挑战后你将学会

· 如何使用JavaScript创建纵向条形图
· 如何使用CSS设置图表样式
· 如何使用JavaScript将数据可视化

2.掩码认证表单


来源:https://dashboard.stripe.com/login

什么是输入掩码?

输入掩码是一种控制向表单字段输入数据的字符,受到一系列规则严格制约,网站访问者在填写相关表单时无法打破这些规则。

完成这项挑战后你将学会

· 如何在表单和输入掩码中严格执行规则
· 如何使用JavaScript验证表单
· 如何使用CSS和JavaScript创建动态表单

更多输入掩码相关内容尽在WPForms

3.动态内容菜单


来源:https://motrix.app/

点击菜单时,看着内容不断减少——效果很酷,对吗?!

完成这项挑战后你将学会

· CSS过渡和动画。
· 如何重新定位布局和内容。
· 如何结合使用HTML和JavaScript,从而提高网站交互性

4.系统指标图

来源:https://status.fauna.com/#week

可视化销售、对话、毛利润和崩溃报告等内容更适合采用系统指标图,除了这些之外,还有其他许多内容都可以用到该图表。

每个复杂的应用程序都会通过某种方式利用系统指标图,所以在一开始就把图表绘制好很有必要。

完成这项挑战后你将学会

· 如何使用JavaScript创建系统图表
· 如何使用CSS设置图表样式
· 如何使用JavaScript将数据可视化

5. 气泡图

气泡图—来源:https://antv.vision/en

气泡图是一种显示三维数据的图表。每个实体都有三个关联数据集,绘制成一个磁盘,磁盘 xy 位置表示vᵢ的两个值,磁盘大小表示第三个值。

完成这项挑战后你将学会

· 如何使用JavaScript将数据可视化
· 使用JavaScript和CSS进行过渡、设置样式和交互

编码的确是一项很难掌握的技能,但只要我们牢记“世上无难事只要肯登攀”的至理名言,不断练习练习练习,相信早晚有一天可以攻克它!

那么现在,先从这5个前端挑战开始吧~

留言 点赞 发个朋友圈

我们一起分享AI学习与发展的干货

编译组:刘露敏、周果
相关链接:
https://medium.com/better-programming/here-are-5-front-end-challenges-to-code-dec-2019-edition-7d691c4b023

如需转载,请后台留言,遵守转载规范

推荐文章阅读

ACL2018论文集50篇解读
EMNLP2017论文集28篇论文解读
2018年AI三大顶会中国学术成果全链接
ACL2017 论文集:34篇解读干货全在这里
10篇AAAI2017经典论文回顾

长按识别二维码可添加关注

读芯君爱你

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: