Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Commit cf10ae6

Browse files
committed
optimize gifs + images for better seo on blog & docs.
addresses parts of #842
1 parent ba921be commit cf10ae6

21 files changed

+13
-13
lines changed

src/blog/dev-env-as-code.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Another pet peeve is when you need to fix something on a maintenance branch. Fix
5252

5353
Tinkering with a six months old technology stack can be so annoying. You have to deal with all those old libraries and versions of them. However, you still have to make it work somehow.
5454

55-
![Photo by [JESHOOTS.COM](https://unsplash.com/@jeshoots?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/10944/0*fni6JI11_OS6eJV7)*Photo by [JESHOOTS.COM](https://unsplash.com/@jeshoots?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)*
55+
![Photo by [JESHOOTS.COM](https://unsplash.com/@jeshoots?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](/jeeshoots.jpeg)*Photo by [JESHOOTS.COM](https://unsplash.com/@jeshoots?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)*
5656

5757
All this suffering can end if we applied the ‘infrastructure as code’ idea to our dev environments, too. Why not make dev environment setups automated, reliably reproducible, and versioned by writing them down in an executable format and checking them into the project’s source code repository?
5858

@@ -72,7 +72,7 @@ Docker files are a pretty neat way to describe a development environment. Imagin
7272

7373
Once you push the change to the repository and the docker image gets updated (automatically), all team members have the new tool in their development environment. We need to get to coding with a single click.
7474

75-
![Photo by [Clément H](https://unsplash.com/@clemhlrdt?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/12000/0*_7n4Htwk2Iz-r9qA)*Photo by [Clément H](https://unsplash.com/@clemhlrdt?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)*
75+
![Photo by [Clément H](https://unsplash.com/@clemhlrdt?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](/clément-h.jpeg)*Photo by [Clément H](https://unsplash.com/@clemhlrdt?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)*
7676

7777
### **Automated IDE Setup**
7878

src/blog/gitpodify.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ FROM gitpod/workspace-full-vnc
265265

266266
This will give you a virtual X server and a Remote Desktop client running on port `6080`:
267267

268-
![Virtual X server and Remote Desktop client running on port 6080](https://cdn-images-1.medium.com/max/11236/1*YaZqFJXHopwW0puvvmfEew.png)
268+
![Virtual X server and Remote Desktop client running on port 6080](/virtual-x-sever-running-on-a-remote-desktop-client.png)
269269

270270
This can be useful for example to run Electron apps graphically. For that, you'll just need a few extra dependencies in your `.gitpod.dockerfile`:
271271

src/blog/native-ui-with-vnc.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ date: Thu Oct 04 2018 12:47:53 GMT+0000 (UTC)
44
author: 32leaves
55
subtitle: Cloud IDEs aren't limited to web apps
66
title: Developing native UI applications in Gitpod
7-
image: https://cdn-images-1.medium.com/max/11236/1*YaZqFJXHopwW0puvvmfEew.png
7+
image: /virtual-x-sever-running-on-a-remote-desktop-client.png
88
---
99

1010
Gitpod is a web-based IDE. As such one would think it only works for web-based projects or anything else that does not require a native UI. However, there’s still a plethora of native UI applications around and many of them are here to stay. In this article we’ll go through how to use Gitpod for developing native desktop UI applications.
1111

12-
![VSCode in Gitpod](https://cdn-images-1.medium.com/max/11236/1*YaZqFJXHopwW0puvvmfEew.png)
12+
![VSCode in Gitpod](/virtual-x-sever-running-on-a-remote-desktop-client.png)
1313

1414
A few days ago [Gero introduced Docker builds to Gitpod](/blog/docker-in-gitpod) with which you can bring your own Dockerfile (instead of a pre-built image), and Gitpod will build the image for you. We’ll use that feature to setup a cloud-based development environment for native UI applications.
1515

src/blog/node-js-development.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ The first time, you will need to sign in Gitpod with your GitHub account. GitHub
4949

5050
Gitpod starts a new workspace, which is a Linux-based cloud container, and provides access to it via a VS Code powered online IDE. Workspaces are started on demand and automatically shut-down if you don’t use them. They are continuously replicated and never deleted, so you always can restart a workspace later from [your Gitpod dashboard](https://gitpod.io/workspaces/).
5151

52-
![How to create a new project on GitHub and then open it in Gitpod](https://cdn-images-1.medium.com/max/2608/1*mXM-VDzzmpXCvlAVvQIjVw.gif)
52+
![How to create a new project on GitHub and then open it in Gitpod](/create-a-new-project-on-gh-then-open-in-gp.gif)
5353

5454
*If you don’t want to create a new project from scratch, click on [a snapshot link](https://gitpod.io/#snapshot/0d82ae08-c328-4cb5-96e5-7233d5de0c11) of my workspace to try Hello World application. I will cover later how one can make a workspace snapshot.*
5555

@@ -87,7 +87,7 @@ Next up, let’s see how we can debug the application:
8787

8888
Our program should run, and when a breakpoint hits you can inspect call stack, variables and even use the debug console to evaluate expressions.
8989

90-
![How to debug a Node.js application in Gitpod](https://cdn-images-1.medium.com/max/2612/0*VHUqe81CKwdHq7uK)
90+
![How to debug a Node.js application in Gitpod](/how-to-debug-a-nodejs-app-in-gitpod.gif)
9191

9292
### Working with Git
9393

@@ -115,7 +115,7 @@ In the terminal type gp init.
115115

116116
1. Now press enter until the tasks section. Type node app.js. The tasks are automatically started whenever a workspace gets started. You can have multiple tasks and use different lifecycles. Each task will be opened in a separate terminal.
117117

118-
![How to use "gp init" to generate the Gitpod config files](https://cdn-images-1.medium.com/max/2000/0*yVXQ8QGJEmCnNQ52)
118+
![How to use "gp init" to generate the Gitpod config files](/gp-init-to-generate-the-gitpod-config.gif)
119119

120120
The created files will be automatically opened in the editor. Let’s change the config so that it starts two tasks in separate terminals:
121121

@@ -153,15 +153,15 @@ Let’s open a new pull request from Gitpod:
153153

154154
* after that, the Pull Request view will be updated and you can open a new pull request.
155155

156-
![How to make a PR in Gitpod](https://cdn-images-1.medium.com/max/2608/0*vHysVOgVJaH6-j1t)
156+
![How to make a PR in Gitpod](/how-to-make-a-pr-in-gitpod.gif)
157157

158158
### Reviewing a Pull Request
159159

160160
As I’ve mentioned at the beginning Gitpod treats each GitHub repository as a project. Actually, it is even smarter and can figure out from any GitHub URL which branch should be opened and how.
161161

162162
Let’s go to the pull request page on GitHub and prefix its URL with gitpod.io/#, just like we did initially:
163163

164-
![How to open a Gitpod workspace from a PR page on GitHub](https://cdn-images-1.medium.com/max/2608/0*YXS_V_quV3Lg7Y-X)*Opening a PR with new workspace image can take some time since Gitpod needs to build the image. But it is only rebuilt when changed.*
164+
![How to open a Gitpod workspace from a PR page on GitHub](/how-to-open-a-gitpod-workspace-from-a-pr.gif)*Opening a PR with new workspace image can take some time since Gitpod needs to build the image. But it is only rebuilt when changed.*
165165

166166
As you can see, Gitpod opens with a branch for your pull request. PR file changes are presented on the left sidebar to review. Our init and command workspace tasks are executed in terminals, Node.js is 10.x now, and Hello World is printed.
167167

@@ -179,15 +179,15 @@ You can share your running workspaces with colleagues to collaborate on exactly
179179

180180
In order to share a running workspace: click on your account avatar, select Share Running Workspace, enable sharing, copy a link and share the copied link with your colleagues.
181181

182-
![How to share a running Gitpod workspace](https://cdn-images-1.medium.com/max/2608/0*yp7USviOYhUm_P40)*Both users use exactly the same workspace and see the shared output in terminals.*
182+
![How to share a running Gitpod workspace](/share-a-running-workspace-in-gitpod.gif)*Both users use exactly the same workspace and see the shared output in terminals.*
183183

184184
### Showcasing Node.js applications
185185

186186
You can take a complete snapshot (clone) of your workspace, even including your IDE layout, and share it as a link. Think about workspace snapshots like code snippets on JSFiddle. It is useful in the same way: to share reproducible examples on issues, Stack Overflow answers, for tutorials and workshops. But at the same, you share the complete development setup and present it in the appropriate way.
187187

188188
In order to share a workspace snapshot: click on your account avatar, select Share Workspace Snapshot, copy a link and share the copied link where you want.
189189

190-
![How to share a Gitpod workspace Snapshot](https://cdn-images-1.medium.com/max/2608/0*-n2I6-4fPuKK70_5)*The [shared workspace snapshot](https://gitpod.io/#snapshot/14dc69f1-0e8c-4a36-b221-0ab16e91326e) preserves not only the development setup but the IDE layout and even selection in the editor.*
190+
![How to share a Gitpod workspace Snapshot](/share-a-gitpod-workspace-snapshot.gif)*The [shared workspace snapshot](https://gitpod.io/#snapshot/14dc69f1-0e8c-4a36-b221-0ab16e91326e) preserves not only the development setup but the IDE layout and even selection in the editor.*
191191

192192
## Developing full-stack Node.js applications
193193

src/blog/october-2018-release.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ We will add more features to the CLI. If you have ideas or demands please file t
5555

5656
The [Gitpod Bot for Github](https://github.com/apps/gitpod-io) can automatically add Gitpod-links to issues and pull-requests. For instance, if you want to improve onboarding for new contributors you should configure the bot so it adds links to **good_first_issue** or **help_wanted **tagged issues.
5757

58-
![Gitpod Bot for Github](https://cdn-images-1.medium.com/max/6380/1*P6TPpSyXQp6SmmhHyVrmBw.png)
58+
![Gitpod Bot for Github](/gitpod-bot-for-gh.png)
5959

6060
We will shortly write a post dedicated to streamlining the contributor’s experience.
6161

src/docs/images/GoDebug.gif

-77.8 KB
Loading

src/docs/images/JavaDebug.gif

-91.5 KB
Loading

src/docs/images/PythonDebug.gif

-87.9 KB
Loading

src/docs/images/RustDebug.gif

-231 KB
Loading

src/docs/images/phpDebug.gif

-154 Bytes
Loading

0 commit comments

Comments
 (0)