辑:David
再见了,Atom!
Github官网发布公告,陪伴开发者走过11年的文本编辑器 Atom 即将正式谢幕。
今后,在代码编辑器这一块,恐怕就是 VS Code一家独大了。
这份公告中,除了宣布Atom即将告别的消息外,还为目前Atom下的项目和资源库留出了6个月的缓冲期。
Github表示,将在2022年12月15日将基于Atom下的所有项目归档。
2011年,当Github在2011年推出Atom时,目标是要为开发者提供一个可深入定制、又易于使用的文本编辑器,一个让更多人能够打造软件的编辑器。
Atom 是 GitHub 在 2011 年专门为程序员推出的一个跨平台文本编辑器,具有简洁和直观的图形用户界面,并有很多有趣的特点:支持 CSS,HTML,JavaScript 等网页编程语言。
Atom支持宏,可以自动完成分屏功能,还集成了文件管理器。
那为什么,现在要让Atom退休呢?
按照Github的说法,就是最近几年大家都不大爱用Atom了。
而且,和本地编辑器比起来,未来的软件开发,主要重点会在云端。
尽管Github没有明说,但实际上,让Atom的谢幕最大推手,就是现在风头正劲的微软VS Code。
VS Code 是微软2015年推出的一款免费、跨平台、开源的代码编辑工具,主要就是和Atom「打擂台」的。
与Atom相比,VS Code 具有更多的「开箱即用」的功能,不仅支持集成开发环境的功能,还提供更多语言和模块功能的原生支持。
作为微软的「旗舰级」编辑器,VS Code 支持构建和调试应用程序、Git 集成、Markdown 支持等核心功能。
相比之下,Atom的定制化功能实现大部分要依赖插件扩展,其本身自带的核心功能明显少于VS Code。
而且,微软在 2018 年收购了 GitHub,将 Atom 和 VS Code 整合到一个屋檐下,进一步蚕食了Atom的用户群和社区资源。
根据 Stack Overflow 的 2021 年一项开发者调查显示,只有不到 13% 的开发者使用 Atom 作为主要开发环境,仅仅勉强挤进前十。
相比之下,有超过 71% 的人使用 VS Code作为首选开发环境,在调查结果中以绝对优势高居榜首。
这项调查邀请开发者对几种主流编辑器进行分项评价并打分。
可以看到,在「可扩展性」和「学习曲线」上,Atom 和 VS Code打了个平手,但在另外两项,即「用户体验」、「性能」上,VS Code均占据明显优势。
最终的综合评价,VS Code为A,Atom为B。
由于评价打分存在「+/-」,实际上Atom被VS Code拉开了两个档位。
因为用的人逐渐减少,在过去几年里,尽管Atom的维护和安全更新一直在持续,但并没有重大功能升级和改进。
Github表示,近几年,随着基于云端的新编辑工具不断完善,Atom社区的热度、开发者的参与度已经明显下降。
「因此,我们决定关闭Atom,以便专注于通过GitHub Codespaces增强开发者在云端的使用体验。」
这是一个「艰难的告别」。
Atom是Electron框架的基础,该框架为成千上万的应用程序的开发铺平了道路,包括后来居上的 VS Code都是基于同样框架开发的。
Github表示,可靠性、安全性和性能是GitHub的核心,这个决定是为了更好地服务开发者社区,优先考虑适合「未来软件开发」的技术。
只看Github的官方公告,Atom这款10多年前的老编辑器也算是有个体面的「善终」了。
但在网友看来 ,其实满不是那么回事的。
有博主在社交媒体上表示,这事背后就是体现了Github的「大金主」微软的意志。
他认为,作为一个和VS Code定位重合的产品,挺过了四年才被抛弃,已经算是很不容易了,相信Atom项目组是没少争取的。
在这条微博的评论区,有网友讲的更直接:
别说那么多,Atom被退休,就是因为难用,使用体验就是一个字:卡!
甚至有网友表示,在几家主流编辑器里,Atom简直可以竞争「最卡编辑器」 了,核心性能不行,功能再多也没用。
还有人感慨,这几年也算是从编辑器的发展中,见证了前端的发展,从2017年以来,国内编辑器领域几乎全是VS Code的天下了。
参考资料:
https://github.blog/2022-06-08-sunsetting-atom/
https://sahil-more.medium.com/what-code-editor-to-choose-b52a0f52a20d
这篇文章中,我们将介绍CSS框架的基础知识,根据您的前端开发需求,哪个框架最好。
本文研究:为什么要使用CSS框架以及哪个框架适合您。
什么是CSS框架?
CSS框架提供了一个基本结构,用于设计一致的解决方案,以解决前端Web开发中的常见问题。它们提供了可以针对特定方案和应用程序重写的通用功能。这大大减少了开始创建应用程序和网站所需的时间。
这样,开发人员无需在每次构建应用程序时从头开始。他们可以重用早期应用程序的基础,直接处理网站或应用程序的关键,而不是为每个应用程序反复编写每个小细节。
总结一下:框架是处理常见类型问题的一套标准化概念,实践和标准,可用作参考,帮助我们处理和解决类似性质的新问题。
库和框架
库和框架之间的关键区别在于控制所在。在库中,控制权由呼叫者决定,即你。这意味着您可以控制库何时执行特定功能,除了该任务之外,其余代码独立于库。
在框架的情况下,该控件被反转。控制流程在框架中,您可以在适合您的用例的位置进行自定义。
关于框架是否更好的争论很多。但我对这个话题采取了更为中立的态度。答案就像许多其他辩论一样,取决于它。如果您与拥有各种不同技能的团队成员的团队合作,并且在截止日期前按下,那么框架就会提供结构和组织。图书不会在这里解决你的问题。
另一方面,框架可能会有很多不必要的代码,这会增加应用程序的开销。对于您可能根本不使用的函数,这是数百行代码。框架的范围也可能限制您的应用程序,因为应用程序存在于框架内。但无论是图书馆还是框架,这些利弊都不是普遍的。例如,在较小的项目中,为了完成特定任务,多个库可能就足够了。在处理框架可能有助于处理项目的大范围的企业项目时,这可能不起作用。
使用CSS框架有什么好处?
我们先来看看最明显的一些。节省时间和一致的结构。
由于开发人员不必每次都从头开始,因此他们能够节省时间并专注于特定于应用程序的问题,而不是环境的较小细节。能够重用代码的方面是一个重要的优点。
框架提供的预定义结构有助于保持应用程序及其各种组件之间的一致性。前端框架中提供的包通常由HTML,CSS和JavaScript文件组成,用于确保应用程序中的各个页面具有统一的设计,排版,表单等。例如,非常流行的Bootstrap框架,在Twitter上作为样式启动内部工具开发指南。
简而言之:
另一个原因是框架可以在开发项目时为开发人员提供一定程度的独立性。开发人员不一定需要设计人员提供的每个设计元素的红线规范。它们具有由框架固有实现的一致设计方案,并且可以根据其要求在特定情况下定制元素。这并不是说设计师在使用框架时会变得多余。这只意味着开发人员不需要参考每个元素的红线或设计指南来获得像素完美均匀性。
设计师还可以使用框架来减少他们花在设计基本元素(如按钮和表单)上的时间。相反,他们可以专注于设计中的其他优先事项。因此,框架可以减少设计人员与开发人员协作的开销。
为了更好地理解通用框架对简单设计系统或样式指南的吸引力,请考虑这一点。
操纵杆是专为电子艺术家(EA)内部使用而设计的框架。它的概念最初是作为一个设计系统,但体验设计团队意识到开发人员更喜欢拥有实际的可实现元素而不是样式指南。样式指南和PDF指南并不能真正帮助开发人员,因为他们仍然可以将这些指南转化为有用的标记。
开发人员和工程师必须出售的想法是,操纵杆从第一天起就会从中受益。他们有能力在有或没有设计师的情况下每天制作和运送东西,这是利用Bootstrap或Foundation等流行框架的一个因素。
通过为开发人员,设计人员和编写人员提供框架,体验设计团队能够提供可扩展和实施的可靠交付物。这有助于在整个团队中实现一致性并减少他们的努力。他们能够通过一件事来解决规模和可重复使用问题。
有哪些不同的框架可供选择?
Boostrap
Boostrap我最受欢迎的前端框架之一,当然是Bootstrap。虽然作为内部团队的工具而开发,但一旦发布,其采用率就会大大增加。它为常见的UI组件提供设计模板,如按钮,排版,表单,下拉列表,警报,选项卡,轮播以及可选的JavaScript扩展。
您可以轻松地使用Bootstrap创建响应式布局,Bootstrap 3通过其移动优先功能强调了这一点。使用Bootstrap在12列网格系统中组织元素的能力可跨设备提供干净,一致的设计。Bootstrap 使用Less样式表,但也已移植到Sass(作为单独的存储库维护),因此两者的用户都可以是内容。
由于其强大的支持,许多团队也更喜欢Bootstrap。Bootstrap目前在其GitHub存储库中有来自约900个贡献者的16,000多次提交。
Foundation
Foundation是一个响应式前端框架,用于为跨多个设备的站点创建快速原型和生产代码。就像Twitter是Bootstrap背后的支持者一样,Zurb是基金会背后的组织。您可以在华盛顿邮报的网站以及国家地理教育网站上看到基金会。Foundation基于940px网格系统,而Bootstrap基于1,170px网格布局。
使用Foundation的一个优点是能够快速启动原型,因为框架的裸骨结构和提供的启动器模板。就华盛顿邮报而言,设计团队能够在15分钟内创建故事原型来测试设计。基金会对GitHub上超过940名贡献者的超过14,000次提交提供了很好的支持。
Skeleton
Skeleton是一个“简单,响应迅速的样板。”Skeleton非常适合小型项目,或者如果轻量级是优先级(它只有大约400行未压缩的代码)。样式设计更多的是一个起点,而不是UI框架。Skeleton因其轻巧的特性而非常适合以移动设备为主题的设计。
Skeleton也是初学者到前端框架的一个很好的起点。它有简洁的代码和简单的布局。由于缺乏CSS丰富性和模板,这也意味着在涉及更大的项目时会略有不匹配。原型设计也不是Skeleton中最快的。
UI Kit
UI Kit元素易于定制和轻量级。它提供了用于快速构建Web界面的模板。除了包含所有HTML,CSS和JavaScript文件的安装包外,它还包含Sublime Text和Atom编辑器的自动完成包,以便用户不必一次又一次地查找UI Kit类名和标记。
Foundation,Boostrap和UI Kit之间的关键区别是网格系统。UI Kit不使用12列网格设置,而是将布局分解为三个组件,即网格,弹性和宽度。使用网格组件,可以根据需要创建任意数量的列。
除此之外,您可以为您的项目尝试的其他框架是
要查看更广泛的CSS前端框架列表,请参阅此完整列表。
最后的想法
虽然前端框架现在广泛使用,无论是在个人项目还是专业项目中,一些反对使用框架的论据都会持续存在。这些围绕编写您自己的设计网格,而不是使用响应框架之一,增加加载时间,所有网站看起来相同的趋势,以及框架带来的不必要的膨胀。
如前所述,它因案例和项目而异。如果它适合您的项目,则无需三思而后行。框架具有足够的好处以保证其使用。在为项目选择正确的框架时,请考虑其中的一些要点。它是否有足够的支持和更新来跟上?它是否适合您的项目规模和未来可能的扩展?是否有良好的文档备份?
TML编辑器是一种用于创建、编辑和预览HTML(超文本标记语言)代码的工具或应用程序。它提供了一个直观的界面,使用户能够轻松地编写和设计网页内容。本文主要介绍HTML 常用编辑器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。
参考文档:https://www.cjavapy.com/article/3299/
Visual Studio Code(简称VS Code)是一款由微软开发的跨平台源代码编辑器,支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发,包括编辑HTML、CSS、JavaScript等前端技术。VS Code是一款轻量级的代码编辑器,启动迅速,占用资源少。VS Code提供了丰富的扩展和插件,可以根据需求安装插件来增强编辑器功能。
1)安装和配置
官网地址:Visual Studio Code - Code Editing. Redefined
根据操作系统下载并安装相应版本的VS Code。打开VS Code后,可以根据自己的喜好配置编辑器设置,如主题、字体等。
2)新建HTML文件
在 VS Code 安装完成后,选择" 文件(F)->新建文件(N) ",在新建的文件中输入以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
3)编辑HTML文件
在VS Code中,点击左上角的"文件"菜单,选择"打开文件",或者使用快捷键Ctrl+O(Windows)或Cmd+O(macOS)来打开HTML文件。
在编辑器中可以直接修改HTML文件的内容。VS Code会自动识别HTML标记,并提供代码高亮和智能提示功能。编辑完成后,使用快捷键Ctrl+S(Windows)或Cmd+S(macOS)来保存HTML文件。
4)插件推荐
HTML CSS Support:提供对HTML和CSS的支持,包括代码片段、自动补全等功能。
Live Server:启动一个本地开发服务器,实时预览HTML页面的效果。
Prettier:格式化HTML代码,使代码结构更整洁。
Auto Close Tag:自动闭合HTML标签,提高编码效率。
Bracket Pair Colorizer:对成对的括号进行着色,方便识别代码块。
Sublime Text是一款流行的跨平台源代码编辑器,支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发,包括编辑HTML、CSS、JavaScript等前端技术。
Sublime Text的界面非常简洁,没有多余的菜单和工具栏,更便于专注于代码编辑。Sublime Text支持多种编程语言,包括HTML、CSS、JavaScript、Python、Java等。Sublime Text拥有强大的插件系统,用户可以根据需要安装插件来扩展编辑器功能。用户可以自定义快捷键、主题、颜色方案等,以满足个性化需求。Sublime Text启动迅速,响应快速,适合于快速编辑代码。
1)安装和配置
官网地址:Sublime Text - Text Editing, Done Right
根据操作系统下载并安装相应版本的Sublime Text。打开Sublime Text后,可以根据自己的喜好进行编辑器设置,如字体、主题等。
2)新建HTML文件
在Sublime Text 安装完成后,选择" File->New File ",在新建的文件中输入以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
3)编辑HTML文件
在Sublime Text中,点击左上角的"File"菜单,选择"Open File",或者使用快捷键Ctrl+O(Windows)或Cmd+O(macOS)来打开HTML文件。在编辑器中可以直接修改HTML文件的内容。Sublime Text会自动识别HTML标记,并提供代码高亮和智能提示功能。编辑完成后,使用快捷键Ctrl+S(Windows)或Cmd+S(macOS)来保存HTML文件。
4)插件推荐
Emmet:提供HTML/CSS快速编写和自动完成功能,可以大大提高编码效率。
Sublime Linter:对代码进行实时语法检查,帮助发现潜在的错误和警告。
Color Highlighter:对CSS中的颜色进行高亮显示,方便调试和修改样式。
SideBarEnhancements:增强侧边栏功能,提供更多文件操作选项。
Dreamweaver是由Adobe公司开发的一款全球知名的网页设计和开发工具。它为开发人员和设计师提供了一个可视化的界面,可以直观地创建和编辑网页内容,同时也支持手动编辑代码。Dreamweaver提供可视化界面,可以直观地拖拽和编辑网页元素,无需手动编写代码。除了可视化界面,Dreamweaver也支持手动编辑代码,适合于开发人员和设计师。Dreamweaver可在Windows和macOS等多个平台上运行。Dreamweaver集成了代码编辑器、预览窗口、文件管理器等功能,提供全面的开发环境。
1)安装和配置
官网地址:Website design software | Adobe Dreamweaver
根据操作系统下载并安装相应版本的Dreamweaver。打开Dreamweaver后,,根据需要进行编辑器设置,如界面语言、字体、代码颜色等。
2)编辑HTML文件
在Dreamweaver中,点击左上角的"File"菜单,选择"New",然后选择"HTML",即可新建一个空白的HTML文件。内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
使用可视化界面,可以直接拖拽页面元素、调整布局、插入图片等。若需要手动编辑HTML代码,可以在下方的代码编辑器中进行修改。Dreamweaver会自动提供代码补全和语法高亮功能。在Dreamweaver中,可以实时预览网页效果,点击右上角的"Live View"按钮即可。
3)CSS和JavaScript支持
Dreamweaver也支持CSS和JavaScript的编辑和预览,可以帮助创建更丰富的网页效果。在编辑器中可以直接编辑CSS样式和JavaScript代码,并实时查看效果。
4)网页上传和发布
Dreamweaver集成了FTP功能,可以直接将编辑好的网页上传到服务器。点击"Site"菜单,选择"Manage Sites",配置好站点设置,即可进行上传和发布。
5)Dreamweaver模板和库
Dreamweaver提供模板和库功能,可以保存和复用常用的网页元素和样式,提高开发效率。
参考文档:https://www.cjavapy.com/article/3299/
*请认真填写需求信息,我们会在24小时内与您取得联系。