{"id":19566,"date":"2014-03-18T21:01:34","date_gmt":"2014-03-18T13:01:34","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19566"},"modified":"2020-06-25T16:32:29","modified_gmt":"2020-06-25T08:32:29","slug":"atom-code-editor","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/","title":{"rendered":"A Look Into Atom: Github&#8217;s New Code Editor"},"content":{"rendered":"<p><a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Github<\/a>, a popular git repository that hosts a ton of open source projects, has recently announced a new code editor called <a href=\"https:\/\/atom.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Atom<\/a> which shook the \u201ccode editor battlefield\u201d. The official announcement stated that Atom began as an experiment \u2013 likely 6 years ago according <a href=\"https:\/\/twitter.com\/defunkt\/status\/438791340222971904\" target=\"_blank\" rel=\"noopener noreferrer\">to this tweet by one of Github\u2019s founder<\/a> \u2013 which then became part of the internal tools in Github; in fact Atom is built using Atom itself.<\/p>\n<p>Atom is claimed to be extremely hackable, extensible, yet could still be user-friendly to entry-level users. At the time of the writing, Atom is still in beta stage and available as an invite-only app. It is also currently <strong>only available for OS X<\/strong> platform \u2013 though the <strong>Windows and Linux version is reportedly  in progress<\/strong>. I\u2019ve got my hands on it, and I would like to walk you through through this app, see what that it has to offer.<\/p>\n<p>Let\u2019s check it out.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/manage-git-github-atom\/\" class=\"ref-block__link\" title=\"Read More: How to Manage Git and GitHub Projects with Atom\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Manage Git and GitHub Projects with Atom<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/manage-git-github-atom.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-32037 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/manage-git-github-atom.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Manage Git and GitHub Projects with Atom<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tGreat news for my developer friends; Git and GitHub integration have been just shipped with the new Atom...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Overview<\/h2>\n<p>If you are a die-hard Sublime Text user, the first thing that may raise eyebrows when Atom is launched is the UI. Take a closer look at the following screenshot \u2013 can you spot which one is Sublime Text and which is Atom?<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/atom-ui.jpg\" height=\"180\" width=\"500\" alt=\"atom ui\"><\/figure>\n<p><strong>Answer<\/strong>: The left is Sublime Text, and the right is Atom.<\/p>\n<p>Aside from the look, Atom has also borrowed some Sublime Text\u2019s symbolic functionalities that you may be familiar with, for instance: <span class=\"key\">Command<\/span> + <span class=\"key\">T<\/span> will allow you to switch between files, and <span class=\"key\">Command<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">P<\/span> to launch Command Palette.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/atom-command-pallete.jpg\" height=\"200\" width=\"500\" alt=\"atom command pallete\"><\/figure>\n<p>You can also do a so-called <strong>auto-pairing quote and parentheses to select code block<\/strong>, and selecting multiple-line simultaneously, just like in Sublime Text.<\/p>\n<p>But, I found that Atom is not yet capable of enclosing tag automatically. Sublime Text is quite smart, it can find <strong>matching tags<\/strong> to close just by typing <code>&lt;\/<\/code>. Another feature that also I caught absent from Atom is <strong>Wrap Selection<\/strong>, where you can press <span class=\"key\">Control<\/span> + <span class=\"key\">W<\/span> and define the tag to wrap selected area, or <span class=\"key\">Control<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">W<\/span> to automatically wrap it with a <code>p<\/code> tag.<\/p>\n<p class=\"note\"><strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/sublime-text-tips\/\">12 Most-Wanted Sublime Text Tips And Tricks<\/a><\/p>\n<h2>Language Support & Syntax Highlighting<\/h2>\n<p>Code Editor is created to help developers write codes correctly with the help of proper code syntax highlighting. Without this capability, a code editor is nothing more than just a Text editor, which is  pretty pointless.<\/p>\n<p>Atom <strong>supports many prominent programming and web languages including Sass and LESS.<\/strong> In Sublime Text, we would have to install third-party packages, before it can handle these two.<\/p>\n<p>To view all in the list, click on the <strong>Language<\/strong> indicator of your current document at the status bar, as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/lang-support.jpg\" height=\"230\" width=\"500\" alt=\"lang support\"><\/figure>\n<h2>Atom Packages<\/h2>\n<p>Atom is extensible with Packages. Each week the number is growing fast; it has more than 500 packages at the time of this writing. Below are my top 5 packages to get:<\/p>\n<ul>\n<li><a href=\"https:\/\/atom.io\/packages\/color-picker\">Color Picker<\/a> \u2013 a color picker that is able to generate HEX and RGBA color.<\/li>\n<li><a href=\"https:\/\/atom.io\/packages\/atom-jshint\">JSHint<\/a> \u2013 an inevitable tool to make your JavaScript code \"error-less\".<\/li>\n<li><a href=\"https:\/\/atom.io\/packages\/autocomplete-plus\">Autocompletion<\/a> \u2013 it is a surprise that this kind of functionality is not integrated in the core.<\/li>\n<li><a href=\"https:\/\/atom.io\/packages\/atom-prettify\">Prettify<\/a> \u2013 code also should look pretty.<\/li>\n<li><a href=\"https:\/\/atom.io\/packages\/Rdio\">Rdio<\/a> \u2013 listen to the Rdio with it.<\/li>\n<\/ul>\n<h3>Installing Packages<\/h3>\n<p>We can install Packages through Atom; launch Package Control, then search Install Package. Unlike Sublime Text, which load and show Packages at the same dialog window, Atom will redirect you to a new screen.<\/p>\n<p>In the new screen, you can see the Packages shown like in the App Store or Google Play, each with an <span class=\"key\">Install<\/span> button. Atom features a few of the Packages, but you can search for the rest through the search box.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/install-package.jpg\" height=\"250\" width=\"500\" alt=\"install package\"><\/figure>\n<p class=\"note\"><strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/sublime-text-plugins\/\">18 Essential Plugins To Get More Out Of SublimeText<\/a><\/p>\n<h2>Markdown<\/h2>\n<p>Github is built around Markdown. The first README file that would be picked up and shown in the repository is one that is written in Markdown. <a href=\"https:\/\/www.hongkiat.com\/blog\/create-github-page\/\" target=\"_blank\" rel=\"noopener noreferrer\">Github Pages<\/a> is built with Jekyll, and Markdown as well. So it is reasonable to integrate Markdown into Atom.<\/p>\n<p>You can try writing a few lines of Markdown syntax, hit <span class=\"key\">Control<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">M<\/span>, and you will see how the syntax will turn out.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/markdown.jpg\" height=\"250\" width=\"500\" alt=\"\"><\/figure>\n<p class=\"note\"><strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/web-content-with-markdown\/\">Writing Web Content With Markdown<\/a><\/p>\n<h2>Git Integration<\/h2>\n<p>Atom added a few helper functionality for those working with git. As you add some additions, or make changes in your git project, you will see a color mark as shown below (it\u2019s barely noticeable). In Sublime Text, this kind of feature can also be achieved using a plugin named <a href=\"https:\/\/github.com\/jisaacks\/GitGutter\" target=\"_blank\" rel=\"noopener noreferrer\">GitGutter<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/git-diff.jpg\" height=\"150\" width=\"500\" alt=\"git diff\"><\/figure>\n<p>I\u2019m expecting Atom to be tightly integrated with Github in the next few releases so we might be able to perform Commit, Pull, and Push git repository right from Atom \u2013 that would be a really nice feature addition.<\/p>\n<h2>Chrome Dev Tools<\/h2>\n<p>Atom is built around Web technologies \u2013 HTML, CSS, and JS \u2013 and is designed to build the Web. So, why not add Web Inspector in it too. If you hit <span class=\"key\">Alt<\/span> + <span class=\"key\">Command<\/span> + <span class=\"key\">I<\/span>, you will see the Chrome Dev Tools.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/chrome-dev-tools.jpg\" height=\"230\" width=\"500\" alt=\"chrome dev tools\"><\/figure>\n<p>These Dev Tools could help you customize Atom as well as develop themes or packages for it.<\/p>\n<p class=\"note\"><strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/chrome-developer-tools\/\">Getting Started With Chrome Developer Tools<\/a><\/p>\n<h3>The Settings<\/h3>\n<p>The Settings in Sublime Text, which irks many people, is done through plain JavaScript objects. Despite the very close resemblance to Sublime Text, Atom offers a nice GUI when it comes to Setting configuration, as you can see below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/the-settings-page.jpg\" height=\"230\" width=\"500\" alt=\"setting page\"><\/figure>\n<p>You can change the font size, the theme, the color highlighting scheme, and even personalize the keybindings.<\/p>\n<h2>Final Thought<\/h2>\n<p>Atom looks really promising, and I can see it could be a serious contender for Sublime Text. By having similar UI, features, and keyboard shortcuts, it should not be difficult for people to switch over to Atom.<\/p>\n<p>Interested to try Atom? Grab your invitation in <a href=\"https:\/\/atom.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Atom.io<\/a>, or mention me in Twitter <a href=\"https:\/\/twitter.com\/tfirdaus\" target=\"_blank\" rel=\"noopener noreferrer\">@tfirdaus<\/a>, I have 2 invites left.<\/p>\n<p>Lastly, I\u2019ll look forward how Atom goes in the future. Will it be the next great code editor to replace Sublime Text?<\/p>","protected":false},"excerpt":{"rendered":"<p>Github, a popular git repository that hosts a ton of open source projects, has recently announced a new code editor called Atom which shook the \u201ccode editor battlefield\u201d. The official announcement stated that Atom began as an experiment \u2013 likely 6 years ago according to this tweet by one of Github\u2019s founder \u2013 which then&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[3028,3029],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Look Into Atom: Github&#039;s New Code Editor - Hongkiat<\/title>\n<meta name=\"description\" content=\"Github, a popular git repository that hosts a ton of open source projects, has recently announced a new code editor called Atom which shook the &quot;code\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look Into Atom: Github&#039;s New Code Editor\" \/>\n<meta property=\"og:description\" content=\"Github, a popular git repository that hosts a ton of open source projects, has recently announced a new code editor called Atom which shook the &quot;code\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-18T13:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-25T08:32:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/atom-ui.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Look Into Atom: Github&#8217;s New Code Editor\",\"datePublished\":\"2014-03-18T13:01:34+00:00\",\"dateModified\":\"2020-06-25T08:32:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/\"},\"wordCount\":1002,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/atom-code-editor\\\/atom-ui.jpg\",\"keywords\":[\"Atom\",\"Code Editors\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/\",\"name\":\"A Look Into Atom: Github's New Code Editor - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/atom-code-editor\\\/atom-ui.jpg\",\"datePublished\":\"2014-03-18T13:01:34+00:00\",\"dateModified\":\"2020-06-25T08:32:29+00:00\",\"description\":\"Github, a popular git repository that hosts a ton of open source projects, has recently announced a new code editor called Atom which shook the \\\"code\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/atom-code-editor\\\/atom-ui.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/atom-code-editor\\\/atom-ui.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atom-code-editor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look Into Atom: Github&#8217;s New Code Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Look Into Atom: Github's New Code Editor - Hongkiat","description":"Github, a popular git repository that hosts a ton of open source projects, has recently announced a new code editor called Atom which shook the \"code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/","og_locale":"en_US","og_type":"article","og_title":"A Look Into Atom: Github's New Code Editor","og_description":"Github, a popular git repository that hosts a ton of open source projects, has recently announced a new code editor called Atom which shook the \"code","og_url":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-03-18T13:01:34+00:00","article_modified_time":"2020-06-25T08:32:29+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/atom-ui.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Look Into Atom: Github&#8217;s New Code Editor","datePublished":"2014-03-18T13:01:34+00:00","dateModified":"2020-06-25T08:32:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/"},"wordCount":1002,"commentCount":15,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/atom-ui.jpg","keywords":["Atom","Code Editors"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/","url":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/","name":"A Look Into Atom: Github's New Code Editor - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/atom-ui.jpg","datePublished":"2014-03-18T13:01:34+00:00","dateModified":"2020-06-25T08:32:29+00:00","description":"Github, a popular git repository that hosts a ton of open source projects, has recently announced a new code editor called Atom which shook the \"code","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/atom-ui.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/atom-code-editor\/atom-ui.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/atom-code-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look Into Atom: Github&#8217;s New Code Editor"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-55A","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19566"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19566\/revisions"}],"predecessor-version":[{"id":51529,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19566\/revisions\/51529"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19566"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}