2017-01-27-codepen-welcome-to-gitlab.html.md 10.5 KB
Newer Older
Marcia Ramos's avatar
Marcia Ramos committed
1
---
2
title: "CodePen, welcome to GitLab!"
Marcia Ramos's avatar
Marcia Ramos committed
3 4
author: Marcia Ramos
author_twitter: XMDRamos
5
author_gitlab: marcia
Rebecca Dodd's avatar
Rebecca Dodd committed
6
categories: open source
Marcia Ramos's avatar
Marcia Ramos committed
7
image_title: '/images/blogimages/codepen-welcome-to-gitlab-cover.png'
8
description: "Yes, it's worth it - CodePen has moved to GitLab!"
Marcia Ramos's avatar
Marcia Ramos committed
9 10
---

11
We were so glad to hear that [CodePen] switched to GitLab!
Marcia Ramos's avatar
Marcia Ramos committed
12

13
Read through the ins and outs of their move! 😃
Marcia Ramos's avatar
Marcia Ramos committed
14

Marcia Ramos's avatar
Marcia Ramos committed
15 16
<!-- more -->

Marcia Ramos's avatar
Marcia Ramos committed
17 18
----

Rebecca Dodd's avatar
Rebecca Dodd committed
19
I'm a big fan of CodePen. Their product is awesome: it's
Marcia Ramos's avatar
Marcia Ramos committed
20
intuitive, beautiful, works like a charm, and it's really easy to use.
Rebecca Dodd's avatar
Rebecca Dodd committed
21
Their community's work is evolving – we could spend hours playing around
22
with pens like this, [created][pen] by [Jase Smith]:
Marcia Ramos's avatar
Marcia Ramos committed
23 24 25 26

<p data-height="300" data-theme-id="23203" data-slug-hash="dNVaae" data-default-tab="js,result" data-user="virtuacreative" data-embed-version="2" data-pen-title="Spock! Paper Scissors" class="codepen">See the Pen <a href="http://codepen.io/virtuacreative/pen/dNVaae/">Spock! Paper Scissors</a> by Virtua Creative (<a href="http://codepen.io/virtuacreative">@virtuacreative</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

Rebecca Dodd's avatar
Rebecca Dodd committed
27
When I heard that they had switched to GitLab, I was thrilled! Yaaay!
28
&nbsp;<i class="fas fa-codepen" aria-hidden="true"></i>
29
&nbsp;**CodePen, welcome to GitLab!**
30
&nbsp;<i class="fab fa-gitlab" aria-hidden="true"></i>
Marcia Ramos's avatar
Marcia Ramos committed
31

Marcia Ramos's avatar
Marcia Ramos committed
32
They're very cool folks, and their [team][team] is making such an
33
awesome product! They're also [remote only](https://www.remoteonly.org/), like us.
Marcia Ramos's avatar
Marcia Ramos committed
34

Rebecca Dodd's avatar
Rebecca Dodd committed
35
Listen to their podcast, which details why they moved and how it
36
went. If you'd rather read, we've included some of the highlights below.
Marcia Ramos's avatar
Marcia Ramos committed
37

38
## Listen now
Marcia Ramos's avatar
Marcia Ramos committed
39 40 41 42 43 44 45 46

<figure>
  <audio class="shadow" preload="none" style="width: 100%;" controls="controls">
    <source type="audio/mpeg" src="http://media.blubrry.com/codepen_radio/p/codepen-podcast.s3.amazonaws.com/114.mp3?_=1">
    <a href="http://media.blubrry.com/codepen_radio/p/codepen-podcast.s3.amazonaws.com/114.mp3">http://media.blubrry.com/codepen_radio/p/codepen-podcast.s3.amazonaws.com/114.mp3</a>
  </audio>
</figure>

47
Source: [Codepen Radio - 114 - GitLab](https://blog.codepen.io/2017/01/24/114-gitlab/)
Marcia Ramos's avatar
Marcia Ramos committed
48 49 50 51 52 53 54
{:.note}

## Highlights

{::options parse_block_html="true" /}

<div class="panel panel-gitlab-orange">
55
### <i class="fas fa-cog fa-fw" aria-hidden="true"></i> Control
Marcia Ramos's avatar
Marcia Ramos committed
56 57
{: .panel-heading}
<div class="panel-body">
58
5:18. The first thing they talked about is "control".
Marcia Ramos's avatar
Marcia Ramos committed
59

Rebecca Dodd's avatar
Rebecca Dodd committed
60 61
7:45. They can't rely on a third-party service to deploy
their code. Whenever there's downtime, there's nothing they can do about it. With a self-hosted GitLab instance,
Marcia Ramos's avatar
Marcia Ramos committed
62
they have the ability to exercise control over their server and everything else.
Marcia Ramos's avatar
Marcia Ramos committed
63 64 65 66
</div>
</div>

<div class="panel panel-gitlab-purple">
67
### <i class="fas fa-lock fa-fw" aria-hidden="true"></i> Security
Marcia Ramos's avatar
Marcia Ramos committed
68 69
{: .panel-heading}
<div class="panel-body">
Rebecca Dodd's avatar
Rebecca Dodd committed
70
10:00. Because it's self-hosted, they feel much more protected from hacker attacks and system breaches.
71
They have their own private network space in which they run GitLab.
Marcia Ramos's avatar
Marcia Ramos committed
72

Rebecca Dodd's avatar
Rebecca Dodd committed
73
> 12.35. _We have control, we have code in our own network, we have higher security._
Marcia Ramos's avatar
Marcia Ramos committed
74 75 76 77
</div>
</div>

<div class="panel panel-gitlab-orange">
78
### <i class="fas fa-code fa-fw" aria-hidden="true"></i> Open source &amp; Cost
Marcia Ramos's avatar
Marcia Ramos committed
79 80
{: .panel-heading}
<div class="panel-body">
Rebecca Dodd's avatar
Rebecca Dodd committed
81
> 13:00. _The open source version of GitLab [[CE]] is 100% free. You can install it on your own server._
Marcia Ramos's avatar
Marcia Ramos committed
82

83
They decided to go for [GitLab EE Starter][ee] for having certain great features available only on EE, such as [Multiple Issue Boards][boards], and [fast-forward merge][ff].
Marcia Ramos's avatar
Marcia Ramos committed
84

Rebecca Dodd's avatar
Rebecca Dodd committed
85
> 14:26. _[GitLab EE] is not terribly expensive, and we're also supporting open source development._
Marcia Ramos's avatar
Marcia Ramos committed
86 87 88 89
</div>
</div>

<div class="panel panel-gitlab-purple">
90
### <i class="fas fa-sync-alt fa-fw" aria-hidden="true"></i> Continuous Integration and Continuous Deployment
Marcia Ramos's avatar
Marcia Ramos committed
91 92
{: .panel-heading}
<div class="panel-body">
Rebecca Dodd's avatar
Rebecca Dodd committed
93 94
15:40. Finally, they don't need to rely on third-party services to apply Continuous Integration to test and
deploy their code. [GitLab CI][ci] does this job, and it's built-in in GitLab.
Marcia Ramos's avatar
Marcia Ramos committed
95 96 97

> 16:34. _Because this [CI] runs internally, and because we have access to our own VPC and resources inside of it, like Docker stuff, and AWS EFS stuff, we can actually take a step further and not just test our stuff, but grab it and deploy it._

Rebecca Dodd's avatar
Rebecca Dodd committed
98
> 16:58. _In our case, [GitLab] give you tools to make [Continuous Integration, Continuous Testing and Continuous Deployment][ci-cd] really, really simple. And that, to me, is the biggest sell of them all. That's simply not available on GitHub._
Marcia Ramos's avatar
Marcia Ramos committed
99

Marcia Ramos's avatar
Marcia Ramos committed
100
They also enjoy not having to deploy from the command line, as it was impossible to track.
Marcia Ramos's avatar
Marcia Ramos committed
101

102
17:15. They love our [Pipelines][pipes], where the entire team can see what's going on and who's doing what. The steps are visible.
Marcia Ramos's avatar
Marcia Ramos committed
103

Rebecca Dodd's avatar
Rebecca Dodd committed
104
> 17:27. _It's very clear, in GitLab, whether a build on staging has actually been pushed to production. So, if I'm going to deploy something to production, I can very easily see who has moved that into master since the last production deploy._
Marcia Ramos's avatar
Marcia Ramos committed
105

106
They also love the [rollback] button: no pain, all gain. Now it's easy to roll back changes.
Marcia Ramos's avatar
Marcia Ramos committed
107 108

> 19:18. _I feel more comfortable, for sure._
Marcia Ramos's avatar
Marcia Ramos committed
109 110 111 112
</div>
</div>

<div class="panel panel-gitlab-orange">
113
### <i class="far fa-heart fa-fw" aria-hidden="true"></i> Their impression
Marcia Ramos's avatar
Marcia Ramos committed
114 115
{: .panel-heading}
<div class="panel-body">
Rebecca Dodd's avatar
Rebecca Dodd committed
116
23:20. Overall, GitLab brought them speed, security and agility.
Marcia Ramos's avatar
Marcia Ramos committed
117

Rebecca Dodd's avatar
Rebecca Dodd committed
118
> 23:37. _Whatever we want to do, we can do, and we're not bound by someone else's Continuous Deployment setup._
Marcia Ramos's avatar
Marcia Ramos committed
119 120 121 122
</div>
</div>

<div class="panel panel-gitlab-purple">
123
### <i class="fas fa-chain fa-fw" aria-hidden="true"></i> Project Management: everything in one place
Marcia Ramos's avatar
Marcia Ramos committed
124 125
{: .panel-heading}
<div class="panel-body">
126
> 24:56. _We were using Trello boards to organize our tasks, but very recently we've decided to move our project's specific tasks into GitLab [[Issue Boards]]. And that's because Trello is really good, in my opinion, for idea generation and quickly getting up cards for a lot of ideas you have. But the fact that the cards are so easy to add, at any point anywhere, kind of hurt us when we were trying to plan dev-work for a project, because we had duplicate cards, and the cards weren't tied to any specific pull request or issue in the codebase. So, it's kind of wish-washy having project planning over in Trello. (...) We've decided to switch to GitLab for actionable tasks related to getting up a project finished within CodePen._
Marcia Ramos's avatar
Marcia Ramos committed
127 128

26:40. They appreciate having the [Issue Boards], [Todos], and [Time Tracking][tt] in one single platform, tied together with their code.
Marcia Ramos's avatar
Marcia Ramos committed
129

Rebecca Dodd's avatar
Rebecca Dodd committed
130
> 28:07. _Let's start looking at all of the things that are required to go into a feature and all, and assign them priorities, and people, and milestones, and time estimates, and stuff, and it feels like a really grown-up management of a thing, and it's pretty interesting!_
Marcia Ramos's avatar
Marcia Ramos committed
131

Rebecca Dodd's avatar
Rebecca Dodd committed
132 133
29:10. They mentioned how cool it is to perform a [slash command][slash]
to add how long it's going to take to complete the implementation of a feature, right from an issue comment.
Marcia Ramos's avatar
Marcia Ramos committed
134

Rebecca Dodd's avatar
Rebecca Dodd committed
135
> 29:50. _We are, as a group, sick of not having an understanding of how long it's going to take to complete a feature or whatever. If we use [[Time Tracking][tt]], we'll know, or we'll be a lot closer to it! And further, we're going to be more accurate on what those time estimates are going to be, and we can plan around that, and not feel so wishy-washy about these big important things that we're doing. So we get that! That comes in the GitLab package as well, so it's kind of like we replaced GitHub, Codeship and Trello with one open source tool! This feels kind of cool!_
Marcia Ramos's avatar
Marcia Ramos committed
136 137 138 139
</div>
</div>

<div class="panel panel-gitlab-orange">
140
### <i class="fas fa-heartbeat fa-fw" aria-hidden="true"></i> The transition
Marcia Ramos's avatar
Marcia Ramos committed
141 142
{: .panel-heading}
<div class="panel-body">
Rebecca Dodd's avatar
Rebecca Dodd committed
143
30.45. They feel they made a mistake by not using the importer tool to import their projects: they simply pushed to GitLab like a separate remote. By doing so, they left some issues and wikis behind and had to transfer them manually.
Marcia Ramos's avatar
Marcia Ramos committed
144 145 146

> 31:24. _This is biggest warning I have for everyone: read the [documentation][docs]!_

147 148
With [GitLab Importer][importer], you can just import your projects from GitHub directly
from the UI, which means pushing a button.
Marcia Ramos's avatar
Marcia Ramos committed
149

Rebecca Dodd's avatar
Rebecca Dodd committed
150
> 31:45. _It's just a button, essentially. You just have to give access to your GitHub account via keys, and once you've done that, GitLab will actually pull in all of your repos, and say "Which ones do you want to import?" and you just go "import", "import", "import"..._
Marcia Ramos's avatar
Marcia Ramos committed
151 152 153 154
</div>
</div>

<div class="panel panel-gitlab-purple">
155
### <i class="fas fa-check-square-o fa-fw" aria-hidden="true"></i> Bottom Line
Marcia Ramos's avatar
Marcia Ramos committed
156 157
{: .panel-heading}
<div class="panel-body">
Rebecca Dodd's avatar
Rebecca Dodd committed
158
There's one thing they are missing: squash-merge. Good news for y'all: we have something like that [coming][squash] soon!
159

160
At 33:44 they also mention burndown charts, and there is [an issue][burndown] for that with a lot of traction.
161

162
> 34:03. _My final feeling about GitLab is it's incredibly impressive work. Like, holy crap, this is really good software! High five team!_ 🙌
Marcia Ramos's avatar
Marcia Ramos committed
163

Marcia Ramos's avatar
Marcia Ramos committed
164 165 166 167 168
</div>
</div>

## GitLab Version

Marcia Ramos's avatar
Marcia Ramos committed
169
CodePen is using [GitLab EE Starter][ee], self-hosted on AWS together with all their
170
structure.
Marcia Ramos's avatar
Marcia Ramos committed
171

Marcia Ramos's avatar
Marcia Ramos committed
172 173 174 175 176
----

Cover image: screenshot of [About CodePen][about].
{:.note}

Marcia Ramos's avatar
Marcia Ramos committed
177 178
<!-- identifiers -->

Marcia Ramos's avatar
Marcia Ramos committed
179
[about]: http://codepen.io/about/
William Chia's avatar
William Chia committed
180
[boards]: /product/issueboard/#step-6
181 182 183
[burndown]: https://gitlab.com/gitlab-org/gitlab-ee/issues/91
[ce]: /products/ "GitLab Community Edition"
[ci-cd]: /2016/08/05/continuous-integration-delivery-and-deployment-with-gitlab/
Marcia Ramos's avatar
Marcia Ramos committed
184
[ci]: /gitlab-ci/
185 186 187 188
[Codepen]: http://codepen.io/
[docs]: https://docs.gitlab.com/
[ee]: /gitlab-ee/ "GitLab Enterprise Edition"
[ff]: https://docs.gitlab.com/ee/user/project/merge_requests/fast_forward_merge.html
189
[importer]: https://docs.gitlab.com/ee/workflow/importing/import_projects_from_github.html
William Chia's avatar
William Chia committed
190
[Issue Boards]: /product/issueboard/
191 192
[jase smith]: http://codepen.io/jasesmith/
[pen]: http://codepen.io/jasesmith/pen/GqaVrx
193
[pipes]: https://docs.gitlab.com/ee/ci/pipelines.html
194
[remote-only]: http://remoteonly.org/
Marcia Ramos's avatar
Marcia Ramos committed
195
[rollback]: https://docs.gitlab.com/ee/ci/environments.html#viewing-the-deployment-history-of-an-environment
196
[slash]: https://docs.gitlab.com/ee/user/project/slash_commands.html
197 198
[squash]: https://gitlab.com/gitlab-org/gitlab-ee/issues/150
[team]: http://codepen.io/about/
199 200
[todos]: https://docs.gitlab.com/ee/workflow/todos.html
[tt]: https://docs.gitlab.com/ee/workflow/time_tracking.html
Marcia Ramos's avatar
Marcia Ramos committed
201 202 203

<style>
h3 {
Marcia Ramos's avatar
Marcia Ramos committed
204 205 206
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 20px !important;
Marcia Ramos's avatar
Marcia Ramos committed
207 208
}
.shadow {
Marcia Ramos's avatar
Marcia Ramos committed
209 210 211
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
  margin-bottom: 20px;
  margin-top: 20px; }
Marcia Ramos's avatar
Marcia Ramos committed
212 213
}
</style>