前言

在现在一些互联网营销号的传播素材中,程序员往往会被塑造成一个邋遢、木讷、秃头、低情商的形象,以借此博得普通群众的眼球,吸引他人注意力。

前阵子,暴走漫画发布的一个视频《创造1024》,里面便有多个情节涉及到对程序员的人身攻击、恶意诋毁。后续这个视频引起诸多程序员不满和声讨。我看完视频后,也觉得满屏尴尬,具体内容在此就不展开细谈了,以免引起大家不适。

其实,程序员是当今时代最具创造力的工种之一,他们通过对高新科技的应用,往往能做出一些新鲜有趣的应用,甚至于改变世界的产品。

今天,就给大家分享外国一位程序员小哥 Matthew Rayfield 做的几个比较有意思的项目,让大家了解下,程序员的脑洞有多大。

沙雕程序员 Matthew

Matthew Rayfield 是来自美国佛罗里达州的一名程序员,因其经常在自己的个人网站上 matthew.rayfield.world 分享一些有(sha)趣(diao)的程序而受到广泛关注。

在这上面,他曾分享过恶搞相机、楼灯控制程序、遛狗游戏等产品。

在分享自己产品的同时,Matthew 也会把制作过程与实现原理写成文章,以便大家了解其中的技术细节。

总而言之,这是一位集逗比与技术于一身的科技博主。如果你有时间的话,可以逛一下这位博主的网站,相信你能发现不少好玩的东西:

http://matthewrayfield.com/

我今天写这篇文章,重点是想跟大家介绍 Matthew 前阵子折腾出的几个应用,也可以说是他 "蹂躏" 浏览器地址栏的整个过程。让你看看,在普普通通的浏览器地址栏里面,程序员都能玩出哪些新鲜花样。

在你看完这篇文章后,如果没有大呼 "牛逼!","我 x!还能这么玩?",那便是在下的错。

OK,废话不多说,下面进入正文。

moji, moji, Emoji!

这是小哥开始对地址栏下手的第一步:通过 JavaScript 代码,让 URL 地址栏的中的 Emoji 表情动起来!

众所周知,Emoji 列表里面存在诸多可以层层串联起来的表情,如我们经常看到的月球:

钟表:

利用这几个 Emoji,便可以在地址栏中做出类似下面的效果。

旋转月球:

旋转钟表:

月球进度条:

具体如何实现,可看小哥录制的这个视频,在里面还介绍了其他多种有趣的效果:

在浏览器地址栏玩转 Emojihttps://www.zhihu.com/video/1135273788622065664

跟往常一样,小哥也将这个程序的制作过程写成了文章,文章里面有具体的技术实现细节与实例代码。

http://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/

在运行 Demo 时,会快速变更浏览器 URL 的历史记录,所以为了避免你浏览器的历史记录被刷爆,最好使用「无痕浏览」模式试玩。

此外,有人还将其做成了 NPM 包,代码也一并开源到了 GitHub 上。如果你想将这个创意集成到自己项目中,可以戳下面链接安装一下:

https://github.com/cyyyu/url-spinner

Gamebo!

既然 Emoji 动画表情在地址栏能跑起来了,那下一步是什么?当然是在地址栏里玩游戏啦!

通过控制多个浏览器地址栏,作者搞出了下面这些小游戏。

大金刚:

打砖块:

此外,还有一个不是作者搞的,但也很牛逼的小游戏:贪吃蛇!

贪吃蛇游戏代码是开源的:

https://github.com/epidemian/snake

丢个制作过程的讲解视频,让你们感受下作者的强大:

在浏览器地址栏玩游戏https://www.zhihu.com/video/1135273961020608512

同上,作者也撰文分享了整个制作过程:

http://matthewrayfield.com/articles/games-and-graphics-in-popup-url-bars/

文章中也有提供具体的代码与示例,你们可以试玩下。

写在最后

一个看起来如此平平无奇的浏览器地址栏,便能让程序员折腾出如此多的新花样,你又怎会认为程序员群体是呆板木讷的呢?

在技术发展如此迅猛的时代,程序员身在此浪潮之巅,其反应速度与调整方式应该都是最快的那一批人群。因此,在这里也郑重提醒某些无节操营销号,你们是时候改变下对技术人刻板保守的印象了。

以上,便是今天与大家分享的内容,觉得文章有意思的,还请点「」支持,谢谢各位。

程序员口中的demo是什么意思_URL 地址栏能玩出什么新花样?这位歪果程序员小哥给你开开脑洞!...相关推荐

  1. URL 地址栏能玩出什么新花样?这位歪果程序员小哥给你开开脑洞!

    前言 在现在一些互联网营销号的传播素材中,程序员往往会被塑造成一个邋遢.木讷.秃头.低情商的形象,以借此博得普通群众的眼球,吸引他人注意力. 前阵子,暴走漫画发布的一个视频<创造1024> ...

  2. 【云栖大会】马云口中创造未来的年轻人,把数据+环保玩出了新花样

    历时半年,云集全球十个国家和地区顶尖高手的公益云图数据可视化创新大赛,在昨天的杭州云栖小镇划上圆满句号.最终优胜的16支队伍,是一群从技术跨界公益的年轻创客,他们怀着用技术改善环境,找回碧水蓝天的愿望 ...

  3. 程序员口中的demo是什么意思_怎样让5分钟的曲子不重样播放450天?程序员:用马尔可夫链...

    乾明 发自 凹非寺 量子位 报道 | 公众号 QbitAI 程序员要是喜欢上一个东西,指不定会搞出什么"疯狂"事情来. 今天要说的,是特别喜欢一首曲子的程序员贝特(Alex Bai ...

  4. 青岛程序员加班看不上球赛崩溃,外卖小哥伸出援手:我帮你改代码

    整理 | 王晓曼 出品 | 程序人生(ID:coder _life) 近日,一段青岛外卖小哥帮奔溃程序员写代码的视频意外走红. 据了解,一程序员与朋友来酒吧看欧洲杯球赛,途中多次出去接听电话,最后不得 ...

  5. 程序员加班看不上球赛崩溃,外卖小哥伸出援手:我帮你改代码

    整理 | 王晓曼 出品 | 程序人生(ID:coder _life) 近日,一段青岛外卖小哥帮奔溃程序员写代码的视频意外走红. 据了解,一程序员与朋友来酒吧看欧洲杯球赛,途中多次出去接听电话,最后不得 ...

  6. 程序员口中常说的API是什么意思?什么是API?

    什么是API? 我的回答:API( 应用程序编程接口):一般来说,这是一套明确定义的各种软件组件之间的通信方法. 什么是API?我们不妨用一个小故事展示出来: 研发人员A开发了软件A,研发人员B正在研 ...

  7. 阿里巴巴P9大佬雷卷与中间件小哥重新定义:高段位程序员的学习之道

    每次看到和程序员相关的段子,我都会会心一笑:这是时代的进步啊! 上个世纪,桌面时代 Bacis.6502汇编 一切都是面向对象 Turbo Pascal 信息学奥林匹克竞赛的常用编程语言 那时候能搞编 ...

  8. 程序员真的是吃青春饭的吗?有哪些建议可以给刚入职的程序员?(全是干货)...

    从业五年多,辗转两个大厂,出过书,创过业,从技术小白成长为基层管理,联合几个业内大牛回答下这个问题,希望能帮到大家 敲黑板!!!读了这篇文章,你将知道如何才能进大厂,如何实现财务自由,如何在工作中游刃 ...

  9. 程序员加班崩溃,过路外卖小哥主动帮忙改代码,网友直呼太暖了!

    点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达 有人说,成年人的崩溃总在一瞬间. 近日,一段青岛外卖小哥帮程序员写代 ...

最新文章

  1. Java引入依赖aar_java – 如何将JAR依赖项包含到AAR库中
  2. .git文件夹_Git服务器安装- windows
  3. PHP 端口号 是否 被占用 以及 解决方法
  4. 论文笔记: Modeling Extreme Events in Time Series Prediction
  5. wordpress怎么打开php网站,wordpress怎么做网站
  6. Vim试水之六:NerdTree插件安装
  7. [存档]Div+Css布局中经常使用的小技巧合集
  8. how Machine Learning service is used in Jeans project
  9. 一道JS面试题目引发的思考
  10. ipad怎么连接电脑_一条网线怎么连接多台电脑?
  11. Android开发笔记(九十四)图片的基本加工
  12. 看到抖音上 Python 工程师晒的工资条,我沉默了.....
  13. aspose.cell for java 去水印_【Java编程基本功】(十)输出杨辉三角,输出*号,数组移动...
  14. 中琛物联‘连接+云+数据’服务助阵
  15. 在中国搞技术只能混碗饭吃,没有太大希望
  16. SpringBoot+Shiro 学习之数据库动态权限管理和 Redis 缓存
  17. 计算机的存储容量以什么为单位,计算机中用来表示内存储器容量大小的基本单位是什么?...
  18. 笔记本摄像头频闪频灭
  19. c语言汇率转换代码_原生JS实现汇率转换功能代码实例
  20. Censored! POJ - 1625(AC自动机 + dp +高精度模板)

热门文章

  1. Java/Oracle/Dorado7 日期格式yyyy-MM-dd HH:mm:ss.SSS/yyyy-MM-dd HH24:mi:ss/Y-m-d H:i:s sysdate IDEAdate报错
  2. android应用开发-从设计到实现 2-3 颜色的运用
  3. 域名租用的时候要注意什么?
  4. MTCNN算法与代码理解—人脸检测和人脸对齐联合学习
  5. tp5能运行在php7吗,tp 5.0 php 7.0 nginx 配置
  6. 天天写日记争当文艺青年 2014-5-12
  7. springcloud steam + rabbitmq
  8. 13-Flow的对象类型
  9. 查看已安装的虚拟环境
  10. 通过已连接wifi的笔记本电脑,获得wifi的密码,无须操作路由