Ask anything to CodePen Team

CodePen is a playground for the front-end side of the web. It is great for finding new inspiration, quickly testing out bugs, and collaborating. Create interesting pens (sets of HTML, CSS, and JavaScript), showcase them on your profile and take feedback from the community.

Ask CodePen Team about:

  • Front-end Development
  • Becoming a better coder
  • Programming advices
  • CodePen Pro
  • CodePen Projects
  • CodePen Easter Eggs
  • Anything programming

Hosted by:

Ask a Question

81 discussions

What's the technology stack of CodePen?

I can speak to the back-end stack. We're mostly a rails app and we've picked off services as required. Here's a breakdown.

rails

Our rails server is the largest part of the stack. Although we are using React for new front-end dev, the majority of our dev is done with server-rendered templates. Here are some stats:

+----------------------+--------+-------+---------+---------+-----+-------+
| Name                 |  Lines |   LOC | Classes | Methods | M/C | LOC/M |
+----------------------+--------+-------+---------+---------+-----+-------+
| Controllers          |  11934 |  9282 |     200 |    1376 |   6 |     4 |
| Helpers              |   1406 |  1138 |       0 |     197 |   0 |     3 |
| Models               |   5855 |  4515 |     119 |     696 |   5 |     4 |
| Mailers              |    701 |   581 |      16 |      61 |   3 |     7 |
| Javascripts          | 226460 |134085 |       0 |   13209 |   0 |     8 |
| Libraries            |     52 |    38 |       2 |       4 |   2 |     7 |
| Concern specs        |    246 |   176 |       2 |       1 |   0 |   174 |
| Controller specs     |   3806 |  3116 |       0 |      36 |   0 |    84 |
| Helper specs         |    160 |   108 |       1 |       0 |   0 |     0 |
| Lib specs            |   1657 |  1331 |       0 |      10 |   0 |   131 |
| Mailer specs         |    186 |   157 |       0 |       0 |   0 |     0 |
| Model specs          |   2694 |  2064 |       0 |      11 |   0 |   185 |
| Policy specs         |    244 |   198 |       0 |       1 |   0 |   196 |
| Serializer specs     |     99 |    94 |       0 |       1 |   0 |    92 |
| Service specs        |  12231 |  9460 |       8 |     172 |  21 |    53 |
+----------------------+-------+--------+---------+---------+-----+-------+
| Total                | 267731 |166343 |     348 |   15775 |  45 |     8 |
+----------------------+-------+--------+---------+---------+-----+-------+
  Code LOC: 149639     Test LOC: 16704     Code to Test Ratio: 1:0.1

micro-services

We have a number of services that do various things. Here's a quick rundown:

  • spawner (rails): starts/stops docker containers for Projects.
  • spawner_router (nginx): knows which project container is running on which node.
  • async (sidekiq): queueing services for screenshots, emails, spam, indexing, lots of other stuff.
  • preview (nginx): nginx-only service for rending projects from editor and various views like debug, deployed.
  • preview_cname (nginx): nginx-only service for rending CNAME'd projects.
  • pen_preprocessor_ruby (padrino): coordinates Pen preprocessing. Delegates lambda calls for different preprocesor types.
  • pen_slim (sinatra): does preprocessing for Slim (is on its own because is insecure, so on lockdown)
  • pen_haml (sinatra): does preprocessing for HAML (is on its own because is insecure, so on lockdown)
  • pen_preprocessor_node (express): preprocessor rendering for node services too slow to run in Lambda.
  • screenshot (express): takes screenshots of Pens.
  • fluentd (fluentd): log capture from Projects, forwards to rails > front-end via long-polling

technology

  • docker-swarm: all services (except for Project gulp containers) are deployed via Swarm.
  • swarm-classic: projects are launched into a classic swarm to avoid Swarm Mode (new-style swarm) limitations.
  • rds: RDS MYSQL and we're moving to Aruoura
  • redis: Elasticache via AWS
  • phusion passenger: webserver, cause this has lots of tuning options

other stuff

I'm sure I'm forgetting stuff here. AMA! :)

Reply to this…

Hashnode is a friendly and inclusive dev community.
Come jump on the bandwagon!

  • 💬 Ask programming questions without being judged

  • 🧠 Stay in the loop and grow your knowledge

  • 🍕 More than 500K developers share programming wisdom here

  • ❤️ Support the growing dev community!

Create my profile

I remember Chris saying this in a podcast:

"All the work you do will be in the open. In the future you won’t have a CV — people will just Google you."

Do you see CodePen becoming that? a must have portfolio for Frontend engineers?

Show all replies

One of the things that prevents CV's and resumes from going away is how big companies hire.

When CodePen hired programmers we looked at some of our favourite people on CodePen.

When I worked at a large company recruiters brought people into the company and passed them off to the technical people to interview.

Until we've overcome the problem with non technical people approving engineers we won't be able to fully replace the resume or CV.

Reply to this…

Hi team,

Will CodePen release developer APIs for creating/editing/deleting pens from different applications?

Show all replies

Alex (cofounder) had a super cool idea to create a sync tool that could watch directories and update pens/projects on a schedule. We've also thought about making a binary that'd submit changes as a build step for editors like Sublime that allow after-save actions. We'd also like to create an API one day. We're open to ideas/suggestions. Everything's on the table.

Reply to this…

  • What were some of the roadblocks while growing CodePen community and how did you overcome them?
  • What are some super important insights that the team has gained while running CodePen?
  • In your opinion what makes people come back to a community based website everyday? Any specific strategy that has worked well for CodePen?
Show all replies

One reason to come back often is that featured work (Pens, Posts, Collections, and Projects) are sprinkled out continuously pretty much all day every day.

Reply to this…

Are there any easter eggs, or hidden details built into CodePen that aren't normally visible but are able to be found if you know where to look?

There's probably more than I can even remember. The cheekiest ones are definitely math-related and built into the console.

Reply to this…

Load more responses