编码新时代就要到啦!GitHub推出编辑器可在网页上写代码
zhezhongyun 2024-12-01 19:25 46 浏览
全文共1770字,预计学习时长7分钟
如果有一个软件可以做所有事该多好?事实上,我们正在一步步地接近这个梦想,浏览器可能是很多人点开最多的软件。
近十年来,电脑软件逐渐被网页取代:音乐从iTunes转移到了Spotify和Pandora网站上,文字编辑转移到了Google Docs和Office365在线文档,设计制作从Photoshop转移到了Figma。
然而,网页开发又与电脑性能息息相关,如今编程对电脑功能要求越来越高。虽然Glitch、CodePen等代码编辑工具已经允许开发人员在网页上完成部分工作,但更高级复杂的开发语言还是只能在软件里完成。
而GitHub将要改变这一现状。这家属于微软的公司推出了一款叫Codespaces的代码编辑器,不管你使用哪种设备,都完全可以在网页上写代码。
基于与Microsoft的Visual Studio代码编辑器相同的代码库(可在Windows,Linux和macOS上运行),Codespaces在GitHub网站上设置了一个按钮,点击即可链接到整个在线开发环境。
无论使用哪种开发环境,很多开发人员都选择在GitHub上浏览和存储代码,可见在GitHub上发布一款代码编辑器十分便捷,无需安装任何软件。
此外,Codespaces不只是个代码编辑器,它还是个“容器”,能容纳所有版本的服务器,这意味着你可以预先配置你在项目中用得到的所有资源,比如说PHP服务器和Redis缓存。
Docker公司将这一技术发扬光大。容器可以把服务器的功能打包成微小轻薄的模块,通过混合匹配搭建出一个开发环境。例如,如果你在做一个基于PHP的Laravel项目,你需要用到PHP服务器、MySQL以及Redis缓存。
利用容器化技术你可以指定你需要的每一项工具,每次打开代码库时它们就会自动启动,这样在不同电脑上完成同一个项目会变得更加方便快捷,也不需要每次都重新配置开发环境。
每个Codespaces环境都包含一个Dockerfile(用于指定环境的容器和配置)以及一个用于设置Codespaces开发环境的文件。与以往的开发环境不同,使用Codespaces无需在编码前配置本地服务器与应用程序。如果开发人员需要快速投入到项目开发中,只需点击即可准备好所有服务器和相关配置。
代码开发从本地转移到云端也为开发人员打开了互助的大门。Live Share 功能类似谷歌的共享文档,通过程序内置的音频和文本聊天功能允许远程开发人员共同解决编程问题。
此外,Codespaces最厉害的是它的一项远程功能,只要开发人员当前使用的设备上安装有MicrosoftVisual Studio Code软件,即便这台设备不是能运行实际所需代码库的重型电脑,开发人员也完全可以在该设备上开发项目。
运行时,他们可以通过这项远程功能访问自己的VisualStudio Code开发环境,使用云端网页编辑器,所有的设置、扩展程序甚至连颜色图案都是一样的,就好像在自己的电脑上工作一样。
Coder 和亚马逊的Cloud9等类似Codespaces的云端产品早在三年前就已出现,但Codespaces的优势在于它可与GitHub直接整合。
值得注意的是,第一次使用Codespaces时需要花点时间:你需要确定项目所需的技术并确保将他们设置正确。设置好之后,等到以后要用的时候,点击GitHub上的code就能在几秒钟内全部设置好,直接写代码就完事。
Microsoft为提升开发人员的体验做出了一系列努力,Codespaces是他们做出的最新成果。2016年,Microsof开始决定windows用户可以体验Linux系统,没人预料到微软会在其专有系统中增加对开源操作系统的支持,当时这令整个行业感到震惊。
在2018年,Microsoft收购了代码托管平台GitHub,今年GitHub又收购了npm的代码分发服务。Microsoft已将Visual Studio Code打造成最受欢迎的代码编辑器,根据最新的Stack Overflow Developer Survey数据显示,超过50%的开发人员都在使用这款软件。
据推测,Microsoft可能是想在获得开发人员支持后再通过这些产品盈利,开发人员很可能会最终选择把项目托管在Microsoft的云端托管平台Azure上。
但是,Codespaces这样的产品,是使用Chromebooks甚至是iPad等便携式设备用户的福音,许多软件都无法在这些设备上安装。使用云端软件就不会受到这些限制的影响,只要你能联网,无所谓你用什么设备写代码。
对笔者来说,软件开发转移到云端最令人兴奋的地方在于:有想用什么电脑就用什么电脑的自由,即便这台电脑严格来说不适合做软件开发,例如搭载功能受限的ARM处理器的Surface Pro X,下载一个最新版本的网页浏览器就足以了。
这对新手来说也是个好消息,无论是用5000美元的MacBook Pro还是用300美元的Chromebook,在云端开发都是一样的。
编码新时代就要到啦!
留言点赞关注
我们一起分享AI学习与发展的干货
如转载,请后台留言,遵守转载规范
相关推荐
- 平和!晨间攻克 HTML 表格属性题,面试难题轻松化解
-
当清晨的阳光轻轻洒在窗台,泡上一杯淡雅的茉莉茶,翻开这篇文章,就像开启一场宁静的知识对话。前端面试中那些让人有些头疼的HTML表格属性问题,今天咱们不慌不忙,慢慢梳理,把它们变成面试时的底气,让焦...
- 高效设计表格 - 用我们的HTML表格生成器轻松搞定
-
在图形开发领域,效率和质量是我们所追求的。HTML表格生成器(HTML表格生成器-在线工具|图形开发学院),以其简洁的界面、高效的性能和人性化的设计,降低了图形开发的门槛,让每一位用户都能...
- 一看就懂的Excel表格的基本操作的十大技巧
-
Excel表格已经成为Office人员最常用的数据处理软件,Excel表格的基本操作视频教程也成为Excel表格初学者急着寻找的资料之一。其实,普通人需要用到的Excel的功能不到其全部功能的10%。...
- 干货满满!Python Flask 中级应用,构建任务管理系统全流程揭秘
-
PythonFlask开发Web服务:中级实战教程Flask是一个轻量级的PythonWeb框架,以其灵活性和扩展性而受到开发者的喜爱。本教程将带你从基础到实战,通过一个完整的案例来深入学习Fla...
- php手把手教你做网站(二十)vue+tp6简单案例(demo)
-
很多时候搭建好了环境,但是不知道怎么入手去开发。下面我们通过简单案例说明如何快速入门开发模块:例1:开发helloworld模块搭建好环境,新建项目以后,进入项目所在文件夹,依次进入src/compo...
- 前端经验-如何在p元素中展示固定行数的文字,超出部分显示省略号
-
1说明最近项目上有个需求,就是有一个网站列表,每个网站下面要加上一段简介,简介文字有行数限制,超出行数以后后面的文字用省略号显示。2CSS代码.websiteulp{margin:...
- jQuery 动画制作与特效
-
使用show()和hide()方法在普通的javascript编程中,要实现元素的显示、隐藏通常是利用其CSS的display属性或者visibility属性。在jQuery中提供了show()和hi...
- 抓狂!代码混乱漏洞百出?7 个技巧助你逆袭成大神
-
写JavaScript代码时,是不是经常遇到这种崩溃瞬间:数组越界报错、异步请求乱成麻、页面交互卡到怀疑人生?别让这些“老大难”问题拖慢你的开发进度!今天手把手教你7个超实用的JavaS...
- 玩转Markdown(2)——抽象语法树的提取与操纵
-
上一篇玩转Markdown——数据的分离存储与组件的原生渲染发布,转眼已经鸽了大半年了。最近在操纵mdast生成md文件的时候,心血来潮,把玩转Markdown(2)给补上了。这一...
- 关于ul里边的li浮动后边的p不独占一行问题
-
为什么ul里面的li元素浮动起来以后本应该独占一行的P标签会跟着上去贴着li元素的内容呢?引入的一个CSS里面把除非设置Ul的行高,这样P标签才会下拉,这是为什么?下图是出来的没加css效果刚开始我...
- 用css设计电子相册 下
-
本篇学习资料讲解:延续上一篇的学习资料,仍然介绍使用css对电子相册进行排版和侧面强调“盒子模型、标准流、浮动和定位”的重要性。上篇学习资料介绍的“阵列模式电子相册”,如果也能够看到详细信息就更...
- 第六次记录,利用CSS调整样式位置
-
本小节基本要求:了解标签的父子关系要点:1、如何对父标签下的子标签进行样式修改2、display-inline-block;3、绝对定位absolute4、margin与padding5、以上是关键,...
- 在WordPress中如何按照类别显示最近的文章
-
最近许多用户在寻找一种在网站的侧边栏按照文章的类别来显示文章的方法。文章显示如下图:这里给大家介绍两种方法,通过这两种方法均可以实现在WordPress网站侧边栏按类别显示文章。第一种方法比较适合初学...
- 初识CSS——布局小技巧
-
#大有学问##头条创作挑战赛#垂直对齐作用用于设置图片或者表单等行内块元素和文字的垂直对齐。垂直对齐只针对行内元素或者行内块元素有效。语法vertical-align:baseline|top...
- 一篇文章教会你如何制做精美导航条
-
【一、项目背景】让更多的人去学习html,以广东科技学院的导航栏为例,教大家怎么去做一个横向的导航栏。【二、项目准备】准备一个编程的软件Dreamweaver,打开软件点击文件新建一个叫导航栏的...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)