The GitHub Insider

<style> .signup { background-color: #d9f2fe; border-bottom: 1px solid #b8dbfc; color: #32383f; font-family: sans-serif; font-size: 1em; padding: 1.4rem 0; text-align: center; width: 100%; } .signup a { color: #0969da; text-decoration: underline; } .signup a:hover { color: black !important; text-decoration: none !important; } @media screen and (max-width:800px) { .signup a { display: block; margin-top: 1rem; } } </style> <div class="signup"> Get new issues of <em>The GitHub Insider</em> in your inbox. <a href="https://resources.github.com/newsletter?utm_medium=web&utm_source=github&utm_campaign=insider-archive-page">Sign up now →</a> </div> <!DOCTYPE html> <html lang="en" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="format-detection" content="telephone=no, date=no, address=no, email=no"> <meta name="x-apple-disable-message-reformatting"> <meta name="color-scheme" content="light dark"> <meta name="supported-color-schemes" content="light dark"> <title>The GitHub Insider</title>  <style> /* General reset styles. */ body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } img { -ms-interpolation-mode: bicubic; } img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; } table { border-collapse: collapse !important; } body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } u+#body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; } #MessageViewBody a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; } u+.body .glist { margin-left: 0 !important; } @media only screen and (max-width: 640px) { u+.body .glist { margin-left: 40px !important; } } /* Set default link styles here. Override them on hover to show users they are interactive. */ a { color: #0969da; font-weight: normal; text-decoration: none; } a:hover { color: #0969da !important; text-decoration: underline !important; } a.button { text-align: center; } a.button:hover { background-color: #2c974b !important; border-color: #2c974b !important; color: #ffffff !important; text-decoration: none !important; } @media screen and (max-width: 600px) { a.button { display: block !important; } } </style>  <style> :root { color-scheme: light dark; supported-color-schemes: light dark; } @media (prefers-color-scheme: dark ) { body, .email-container, .content-container, .callout { background-color: #000000 !important; color: #ffffff !important; } h1, h2, h3, strong { color: #ffffff !important; } a { color: #ffffff !important; text-decoration: underline !important; } .footer a { color: #999999 !important; text-decoration: none !important; } a:hover { color: #ffffff !important; text-decoration: none !important; } .footer a:hover { text-decoration: underline !important; } a.button { color: #ffffff !important; text-decoration: none !important; } .dark-mode-hide { display: none !important; } .dark-mode-show { display: block !important; } .callout a.button { background-color: #2ea44f !important; border-color: #2ea44f !important; } .callout a.button:hover { background-color: #2c974b !important; border-color: #2c974b !important; color: #ffffff !important; text-decoration: none !important; } } </style> </head> <body id="body" class="body" style="background-color: #ffffff; margin: 0 !important; padding: 0 !important;"> <div style="display:none"> Do your thing anytime, anywhere  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ </div>  <div class="email-container" role="article" aria-roledescription="email" aria-label="" lang="en" dir="ltr" style="background-color: #ffffff; font-size: medium; font-size: max(16px, 1rem);">  <div class="content-container" style="color: #000000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 1.5; margin: 1rem auto; max-width: 600px; padding: 1em;"> <a href="https://github.com?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="display: block; margin: 0 0 2em 0;"> <img alt="GitHub" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7B06958555-b158-43f9-9f4c-f7cc10a305a0%7D_github-logo-email.png" width="100" border="0" style="display: block;" class="dark-mode-hide">  <img alt="GitHub" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7B369cff35-9244-420e-9a83-1a9040d9e311%7D_github-logo-email-dark-mode.png" width="100" border="0" style="display: none;" class="dark-mode-show">  </a> <p style="margin: 2em 0 2em 0;"> <a href="https://github.com?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11"> <img alt="" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7B0da1dee9-e914-4030-a21c-f4f02cc63994%7D_github-insider-header-2024.png" width="600" border="0" style="border-radius: 4px; color: #000000; font-size: 1.8em; line-height: 1.4; display: block; max-width: 100%; min-width: 100px; width: 100%;"> </a> </p> <p style="margin: 2em 0 2em 0;"> Here we are—the first edition of <em>The GitHub Insider</em> newsletter for 2024! New year, new newsletter, new array of amazing tips and tricks you can do on GitHub (whoa, that’s a lot of “new” in one sentence). We’ve got some really cool stuff planned for you this year! </p>  <p style="margin: 2em 0 0 0;"> <center> <img alt="Meme of SpongeBob saying New Year, New Me" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7B4d36a1d2-c530-4709-acec-7867ae1131b1%7D_insider-jan-11-2024-1.png" width="600" border="0" style="border-radius: 4px; color: #000000; font-size: 1.8em; line-height: 1.4; display: block; max-width: 100%; min-width: 100px; width: 100%;"> </center> </p> <p style="margin: 2em 0 2em 0;"> And 2024’s first edition is all about <a href="https://docs.github.com/codespaces/overview/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="color: #0969da; font-weight: normal; text-decoration: none;">GitHub Codespaces</a>—your passport to a flexible, collaborative, and hassle-free coding environment. GitHub Codespaces delivers a comprehensive, browser-based Integrated Development Environment (IDE) hosted on a virtual machine, which enables you to code from anywhere, at any time, all without exerting your local machine's resources. 💪 Pretty cool, huh? </p> <p style="margin: 2em 0 2em 0;"> Check out <a href="https://www.youtube.com/watch?v=sYJ3CHtT6WM/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="color: #0969da; font-weight: normal; text-decoration: none;">this video</a> to learn more about GitHub Codespaces and how you can use it to spin up an IDE of your choice directly in the cloud. ☁️ </p>  <p style="margin: 2em 0 0 0;"> <center> <a href="https://www.youtube.com/watch?v=sYJ3CHtT6WM/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11"> <img alt="Video screenshot of a man standing in an office" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7B8170acba-7f4a-433e-b299-a05d980057d4%7D_insider-jan-11-2024-2.png" width="600" border="0" style="border-radius: 4px; color: #000000; font-size: 1.8em; line-height: 1.4; display: block; max-width: 100%; min-width: 100px; width: 100%;"> </a> </center> </p> <p style="margin: 2em 0 2em 0;"> Now that we know a little bit more about this premier product, let’s take a look at <strong>three cool things</strong> you can do with it: </p> <p style="margin: 2em 0 2em 0;"> <strong>1. Generate AI images 🎨</strong><br> You can run <a href="https://github.com/CompVis/stable-diffusion/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="color: #0969da; font-weight: normal; text-decoration: none;">Stable Diffusion</a> with GitHub Codespaces. Like DALL-E and Midjourney, Stable Diffusion is one of many machine-learning models using deep learning to convert text into art. Normally, creating AI images with data-heavy models like Stable Diffusion requires a powerful computer with a graphics processing unit (GPU). However, not everyone has access to such hardware. </p> <p style="margin: 2em 0 2em 0;"> That's where GitHub Codespaces comes in handy! Your codespace, hosted on a virtual machine, allows you to customize machine types from 2-core to 32-core. Plus, you can request a GPU-powered codespace for more demanding tasks. This flexibility enables machine learning engineers to perform intensive computations on devices like iPads or Chromebooks. </p> <p style="margin: 2em 0 2em 0;"> Check out this code that one of our developer advocates used that helped GitHub Codespaces create the image below: </p>   <div style="background-color: #edf0fe; border: none; border-radius: 4px; color: #444444; font-family: monospace; padding: 2em 2em 2em 2em;" class="callout"> <p style="font-size: 0.9em; margin: 0 0 0 0;"> from torch import autocast<br><br> # Change prompt for image here!<br> prompt = "a cartoon black girl with cotton candy hair and a pink dress standing in front of a pink sky with cotton candy clouds"<br> with autocast(device):<br> image = pipe(prompt, height=768, width=768).images[0]<br> image </p> </div>   <p style="margin: 2em 0 0 0;"> <center> <img alt="Stable Diffusion generated image of a girl with cotton candy hair and a pink dress" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7B4ca9905b-7ca0-4799-9a28-94e1a4b551e0%7D_insider-jan-11-2024-3.png" width="600" border="0" style="border-radius: 4px; color: #000000; font-size: 1.8em; line-height: 1.4; display: block; max-width: 100%; min-width: 100px; width: 100%;"> </center> </p> <p style="margin: 2em 0 2em 0;"> <strong>2. Learn a new framework 📝</strong><br> Learning to code is often more effective when you balance tutorial consumption with building projects, and <a href="https://github.com/codespaces/templates/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="color: #0969da; font-weight: normal; text-decoration: none;">GitHub Codespaces’ quickstart templates</a> are a speedy (and efficient) way to learn a framework. </p>  <p style="margin: 2em 0 0 0;"> <center> <img alt="Screenshot of a template chooser" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7B6faf40e6-1f93-42fc-8bab-9718dce06348%7D_insider-jan-11-2024-4.png" width="600" border="0" style="border-radius: 4px; color: #000000; font-size: 1.8em; line-height: 1.4; display: block; max-width: 100%; min-width: 100px; width: 100%;"> </center> </p> <p style="margin: 2em 0 2em 0;"> These templates include boilerplate code, forwarded ports, and a configured development container for some of the most common application frameworks, including Next.js, React.js, Django, Express, Ruby on Rails, Preact, Flask, and Jupyter Notebook. They also provide you with a sandbox to build, test, and debug applications in a codespace. </p> <p style="margin: 2em 0 2em 0;"> Check out this <a href="https://github.blog/2023-02-22-a-beginners-guide-to-learning-to-code-with-github-codespaces/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="color: #0969da; font-weight: normal; text-decoration: none;">blog post</a> and <a href="https://github.com/codespaces/new?template_repository=github/codespaces-learn-with-me/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="color: #0969da; font-weight: normal; text-decoration: none;">template</a>, where we use GitHub Codespaces to guide you through writing your first lines of React. </p> <p style="margin: 2em 0 2em 0;"> <strong>3. Pair program with a teammate or AI 👯</strong><br> Remote pair programming can be tough—sharing screens and code becomes a challenge, but the benefits for communication and technical skills make it worthwhile. You can simplify remote pair programming with GitHub Codespaces by installing the <a href="https://github.com/DigitalCareerInstitute/Visual-Studio-Live-Share/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="color: #0969da; font-weight: normal; text-decoration: none;">Live Share extension</a> and forwarding ports. </p> <p style="margin: 2em 0 2em 0;"> The Live Share extension allows you and your teammate(s) to type in the same project simultaneously. It highlights your teammate’s cursor versus your cursor, so you can easily identify who is typing—and it’s <a href="https://github.blog/2023-03-06-how-to-automate-your-dev-environment-with-dev-containers-and-github-codespaces/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="color: #0969da; font-weight: normal; text-decoration: none;">completely secure</a>! </p>  <p style="margin: 2em 0 0 0;"> <center> <img alt="Screenshot of code" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7Bc8a07125-af50-4952-a600-33c60ebb909d%7D_insider-jan-11-2024-5.png" width="600" border="0" style="border-radius: 4px; color: #000000; font-size: 1.8em; line-height: 1.4; display: block; max-width: 100%; min-width: 100px; width: 100%;"> </center> </p> <p style="margin: 2em 0 2em 0;"> If you need to exchange ideas while you code, but there’s no one around to jam with you, try installing the <a href="https://github.com/features/copilot/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="color: #0969da; font-weight: normal; text-decoration: none;">GitHub Copilot</a> extension to pair program with AI. GitHub Copilot is an AI-powered code completion tool that helps you write code faster by suggesting code snippets and completing code for you. </p>  <p style="margin: 2em 0 0 0;"> <center> <img alt="Animated GIF of coding" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7B711306a3-b7d7-4426-b589-914c659077b3%7D_insider-jan-11-2024-6.gif" width="600" border="0" style="border-radius: 4px; color: #000000; font-size: 1.8em; line-height: 1.4; display: block; max-width: 100%; min-width: 100px; width: 100%;"> </center> </p> <p style="margin: 2em 0 2em 0;"> In this new year, we hope you’ll continue to embrace possibilities, experiment with tools like GitHub Codespaces, and make coding an adventure. And until next time, may your repositories be bug-free and your creativity boundless! </p>  <p style="margin: 2em 0 2em 0; text-align: center;"> <a class="button" href="https://github.com/codespaces/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="background: #2ea44f; border: 2px solid #2ea44f; text-decoration: none; padding: 10px 20px; color: #ffffff; border-radius: 4px; display: inline-block; font-weight: bold; mso-padding-alt: 0; text-underline-color: #2ea44f"><span style="mso-text-raise:15pt;">Get started with GitHub Codespaces</span> </a> </p>  <hr style="border-width: 0; background: #eaeaea; color: #eaeaea; height: 1px"> <p style="margin: 2em 0 1em 0;"> <a href="https://github.com/skills/code-with-codespaces/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11"> <img alt="GitHub Codespaces skill builder" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7B0e4302a3-a2a7-475b-9884-7a960a43170a%7D_insider-jan-11-2024-7.png" width="600" border="0" style="border-radius: 4px; color: #000000; font-size: 1.8em; line-height: 1.4; display: block; max-width: 100%; min-width: 100px; width: 100%;"> </a> </p> <h2 style="font-size: 1.2em; font-weight: bold; margin: 1em 0 1em 0; text-align: center;"> Become a GitHub Codespaces pro 💪🏾 </h2> <p style="margin: 1em 0 2em 0;"> In this walkthrough, you’ll learn how to create and customize a codespace, push code, and select custom images. </p>  <p style="margin: 1em 0 4em 0; text-align: center;"> <a class="button" href="https://github.com/skills/code-with-codespaces/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="background: #2ea44f; border: 2px solid #2ea44f; text-decoration: none; padding: 10px 20px; color: #ffffff; border-radius: 4px; display: inline-block; font-weight: bold; mso-padding-alt: 0; text-underline-color: #2ea44f"><span style="mso-text-raise:15pt;">Jump in now</span> </a> </p>   <div style="background-color: #d9f2fe; border: 1px solid #b8dbfc; border-radius: 4px; padding: 2em 2em 2em 2em; text-align: center;" class="callout"> <h3 style="font-size: 1.2em; font-weight: bold; margin: 0 0 1em 0;"> Subscribe to our LinkedIn newsletter 🚀 </h3> <p style="margin: 1em 0 1em 0;"> Do your best work on GitHub. Subscribe to our LinkedIn newsletter, <em>Branching Out_</em>. </p> <p style="margin: 2em 0 0 0;"> <a class="button" href="https://www.linkedin.com/newsletters/branching-out-6958196028076429312/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="background: #000000; border: 2px solid #000000; text-decoration: none; padding: 10px 20px; color: #ffffff; border-radius: 4px; display: inline-block; font-weight: bold; mso-padding-alt: 0; text-underline-color: #000000"><span style="mso-text-raise:15pt;">Sign up now</span> </a> </p> </div>  <br><br>   <div style="background-color: #fff7c2; border: 1px solid #ebd8b0; border-radius: 4px; padding: 2em 2em 2em 2em; text-align: center;" class="callout"> <h3 style="font-size: 1.2em; font-weight: bold; margin: 0 0 1em 0;"> Join our GitHub Codespaces conversations 🤖 </h3> <p style="margin: 1em 0 1em 0;"> Visit our community forum to see what people are saying + offer your own two cents. </p> <p style="margin: 2em 0 0 0;"> <a class="button" href="https://github.com/orgs/community/discussions/categories/codespaces/?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="background: #000000; border: 2px solid #000000; text-decoration: none; padding: 10px 20px; color: #ffffff; border-radius: 4px; display: inline-block; font-weight: bold; mso-padding-alt: 0; text-underline-color: #000000"><span style="mso-text-raise:15pt;">Visit now</span> </a> </p> </div>  <br><br> <hr style="border-width: 0; background: #eaeaea; color: #eaeaea; height: 1px"> </div>   <div class="content-container" style="color: #000000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 1.5; margin: 1rem auto; max-width: 580px; padding: 1em;"> <center><a href="https://github.com?utm_source=insider&utm_medium=email&utm_campaign=2024q1-em-GitHub-Insider-January-11" style="display: block; margin: 0 0 2em 0;"><img alt="GitHub" border="0" class="dark-mode-hide" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7B06958555-b158-43f9-9f4c-f7cc10a305a0%7D_github-logo-email.png" style="display: block;" width="100" />  <img alt="GitHub" border="0" class="dark-mode-show" src="https://images.github.media/EloquaImages/clients/GitHubInc/%7B369cff35-9244-420e-9a83-1a9040d9e311%7D_github-logo-email-dark-mode.png" style="display: none;" width="100" />  </a></center> <p style="font-size: 1.2em; color: #999999; margin: 0 0 2em 0; text-align: center;">The world’s leading AI-powered developer platform.</p> </div>  </div> </body> </html>

CINXE.COM

The GitHub Insider