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

前言

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

前阵子,暴走漫画发布的一个视频《创造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,便可以在地址栏中做出类似下面的效果。

旋转月球:

旋转钟表:

月球进度条:

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

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

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

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

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

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

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

写在最后

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

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

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

推荐阅读:

我在 GitHub 上都见过哪些沙雕项目?

「GitHub 交流群」已开放

想入群的可在公众号后台回复「入群」

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/353568.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

用Python让蔡徐坤在我的命令行里打篮球!| 附完整代码

作者自称是一个经常逛 B 站的肥宅。最近B站上流行的视频素材除了“换脸”,其次就要属“蔡xx打球”视频了。有模仿的、对比的、手绘的... ...更过分的是,竟然有人在命令行输出了他的打球视频。不过,视频中的动画好像是用某个软件生成的 txt 文…

一行代码“黑”掉任意网站

文章目录 只需一行代码,轻轻一点就可以把任意网站变成暗黑模式。 首先我们先做一个实验,在任意网站中,打开浏览器开发者工具(F12),在 C1onsole 控制台输入如下代码并回车: document.documentElement.style.filterinv…

用Python让蔡徐坤在我的命令行里打篮球!|附完整代码

点击上方↑↑↑蓝字关注我们~ 「2019 Python开发者日」全日程揭晓,请扫码咨询 ↑↑↑ 来源 | 01二进制(ID:gh_d1999add1857) 编辑 | Jane 【导语】作者自称是一个经常逛 B 站的肥宅。最近 B 站上流行的视频素材除了“换脸”,其次就…

自动化测试,B、C接口要将A接口返回的参数作为入参,有哪些方法?

在进行自动化测试时,如果需要将A接口返回的参数作为B、C接口的入参,可以通过以下几种方法实现: 如果你想学习自动化测试,我这边给你推荐一套视频,这个视频可以说是B站百万播放全网第一的自动化测试教程,同…

直播带货APP小程序系统开发功能有哪些?

直播带货APP小程序系统开发功能有哪些? 1、直播带货:主播一边带货一边直播间活跃气氛,直观地了解产品,下单的概率会更高。还集有观看、打赏、购物、分享于一体。 2、短视频带货:短视频种草,利…

KCNScrew for Mac(mac序列号工具)

KCNScrew for Mac是一款序列号工具,是一款十分简单好用的序列号查找工具。该软件的数据每个月都会更新,包含将近上千款软件的序列号提供给大家。如果你还在苦恼于软件因为没有序列号而不能正常使用到话,想要查看软件序列号的朋友欢迎&#xf…

CuteFTP,8uftp cuteftp

CuteFTP,FTP工具之一,其传输速度比较快,但有时对于一些教育FTP 站点却无法连接。我在进行ftp工具查找时,还发现了这么一款软件:IIS7服务器管理工具。 作为IIS7服务器管理工具,它可以对ftp站点进行批量管理…

Win10下SCP命令免密码上传、下载工程师服务器上的文件

【1】本地win10操作步骤 1)在本地win10系统打开命令行工具(winr) 2)执行命令:ssh-keygen -t rsa 3)提示输入保存路径,直接回车,默认即可。 4)提示输入密码,因…

CAN-TP帧类型(SF/FF/CF/FC)解析

简介 CAN-TP帧类型可分为 单帧和多帧。 单帧(SF) : Single Frame,数据长度小于等于7个Byte(标准CAN是7Byte,CAN-Fd是63Byte)时,使用单帧进行传输 多帧可分为 首帧(FF)/流控帧(FC)…

tcp 序列号

父 tcp,状态. from异常流程_个人渣记录仅为自己搜索用的博客-CSDN博客 转载请注明出处:6-TCP6-TCP 协议(序号和确认号)_tcp 最终确认序号_--Allen--的博客-CSDN博客6-TCP 接下来的内容是学习后续内容的基础,必须先讲清楚。为了…

手把手带你YOLOv5/v7 添加注意力机制,30多种模块分析①,SE模块,SK模块

目录 一、注意力机制介绍1、什么是注意力机制?2、注意力机制的分类3、注意力机制的核心 二、SE模块1、SE模块的原理2、代码实例3、实验结果4、应用示例(1)在 models/yolo.py 文件中定义 SEModule 类,用于实现SE模块。(…

安装使用cuteFTP注意事项

花絮: 一直以来都使用红帽的共享文件来让windows和linux之间进行传输文件,今天头脑一发热,想使用windows下的cuteFTP软件来代替前面的方法。可谁想到,一是cuteFTP在网上根本找不到序列号,找了N久没找到,后…

CuteFTP安装

CuteFTP 9破解版,百度网盘链接:https://pan.baidu.com/s/16SDjxyQF2WtiPKpZHjcueQ 密码:xblr CuteFTP 9破解版是一款非常实用的商业FTP软件,也就是一个FTP客户端。可能很多人不知道FTP是什么,就是一个文件传输系统&…

Java 面试题:Spring,Spring MVC,Spring Boot 之间什么关系?

来,先和我看张图: Spring全家桶了为了解决不同场景的问题,逐渐演化出多套生态环框,如:Spring、SpringMVC、SpringBoot、SpringCloud。 Spring MVC和Spring Boot都属于Spring,Spring MVC是基于Spring的一个…

Springboot配置文件中的明文密码漏洞

目录 一、背景 二、本地修复测试 1、maven中引入jasypt 2、编写加密解密工具类 3、修改配置文件,增加秘钥 4、秘钥放在启动项 三、生产实现 1、升级打包代码 2、生产yml修改明文密码处 3、修改启动命令 一、背景 最近接收到网安的系统安全…

高德地图添加遮罩,实现圈出某个特定的地区

实现效果 一、准备 1、注册账号并申请Key 2、准备页面 <script type"text/javascript" src"https://webapi.amap.com/maps?v1.4.15&key您申请的key值"></script> <div id"container"></div>#container {widt…

vue 高德地图贴地点

效果图 引入高德api maps和local local 用的2.0.0的 其他版本可能会有不兼容问题 mounted(){//设置 地图this.map new AMap.Map(container, {mapStyle: , // 设置地图的自定义样式-深色zoom: 7.3, //级别center: [119.1, 36.32], //中心点坐标viewMode: 3D, // 地图模式resiz…

iOS 跳转到地图后导航(高德地图,百度地图,腾讯地图,苹果手机原生的地图)

1.现在info.plist里面如下图所示添加 2.在下图输入框中输入地名&#xff0c;然后点击前往目的地会出现如下图所示。&#xff08;如果你不知道地方名如何转化为经纬度请看我的另一篇博客&#xff1a;http://blog.csdn.net/chenyongkai1/article/details/51891135&#xff09; 3.…

高德导航免费,那他靠什么收入?

来源 &#xff5c;一口Linux 一位工作了12年的软件工程师说&#xff1a;当你打开导航时&#xff0c;不需要任何费用&#xff0c;还会给高德公司带来丰厚的收入。当时我不信&#xff0c;去查了相关资料后&#xff0c;才知道这个行业不简单。 出门外出&#xff0c;对路线不熟时&a…

C++编译一些常见的错误集锦

1、段错误&#xff08;Segmentation Fault&#xff09; &#xff08;1&#xff09;段错误&#xff08;Segmentation Fault&#xff09;是一种常见的计算机程序错误&#xff0c;通常指向程序试图访问的内存地址超出了程序可访问的内存范围&#xff0c;或者指针指向了无效的内存…