Building The Collab Lab's website using 11ty and GraphCMS

Alejandro Ñáñez Ortiz — Mon, 21 Dec 2020 21:10:42 +0000

What is TCL

The Collab Lab is a U.S. nonprofit that provides remote, collaborative project practice for early-career developers. We focus on teaching how professional software teams work by working through a structured project over the course of 8 weeks under the guidance of mentors who are professionals in the field. Collab Lab is volunteer-driven and free for participants. More information about the program is available on our website.

What is GraphCMS

GraphCMS is a hosted system for managing content. It is what’s called a “headless” CMS, meaning it is not concerned with the presentation of the content, just the structure of and relationships among the various bits.

As the name implies, GraphCMS was built from the ground up on GraphQL. GraphQL is a developer-friendly alternative to REST as a way of structuring and serving APIs. How to work with GraphQL itself is outside the scope of this article, but know that GraphCMS fully integrates GraphQL playgrounds, making it simple to experiment with queries until you get your endpoints serving just what you need.

Migrating from a fully static site to 11ty

At The Collab Lab we decided that it was time to step up our website game and start using something other than just plain HTML, CSS and Javascript. We started looking for tools that match our current stack, and that’s where EJ introduced us to Eleventy (11ty). 11ty is a static site generator that emphasizes simplicity. It doesn't use any JavaScript framework (e.g., Next.js, Gatsby or Nuxt). With 11ty, you can use different template engines as it supports Handlebars, Liquid, HTML, Nunjucks, Mustache, EJS, Haml, Pug and Markdown, the fun thing is that you can chose to use one, or all of them at the same time 😱. As any other Static Site Generator, its lifecycle is about grabbing data from a datasource — GraphCMS in this case — pass that data to the templates, generate the HTML and then build the site as static HTML.

A good thing about using 11ty is that the migration was painless, as I said above, our site was just HTML, CSS and JS files, the approach we took, was to keep the old site around and use 11ty to build it and then incrementally start creating new pages with templates and dynamic data. Here you can see the structure before and after for our migration:

You'll notice two things happened:

We use /build as our output/build directory before and after the migration.
We moved everything inside the build directory to the pages directory

We can tell 11ty to treat the pages directory as its input, and build as its output in the .eleventy.js config file. From then on, we treated the pages directory as our working directory.

Now it was time to start DRYing things, so we created a layout file and several other templates (or “components” if you wish) that reduced the file sizes of our pages a lot and made things easier to reason about.

But that’s just half of the story. Now we wanted to make the site dynamic. We were tired of making manual updates to change the content of our site. This is where GraphCMS came in.

Adding Dynamic Content

We wanted to give dynamic content a try in our Who We Are page as it’s the page that we update most often. It roughly looks like the following:

For what it's worth, we didn't migrate the whole page at once, we started out with the Developers Sub Section. The steps we followed to make this change were roughly as follows:

Created a model in GraphCMS that represents the Developers
Added content for that model in GraphCMS
Explored the GraphQL API using GraphCMS API Playground
Started consuming the data in 11ty.

Create a model in GraphCMS that represents the Participants'

This step was pretty straightforward, we just modeled the data we needed in our page, and that’s it. For instance, we added the participant's Firstname and Fullname among other data.

Add content for the Participants model

Again, this was straightforward. You just click the Content icon on the left hand side of the sidebar, and then start adding the data you need

Explore the GraphQL API using GraphCMS' API Playground

One really useful thing that GraphCMS provides, is a playground that you can use to build your queries and try things without any limitation. Once you have the queries in place, you can move them to your development environment and start using them to get real data.

Start consuming the data in 11ty.

Inside our pages folder, we created a graphql folder which acts as our data layer and it contains both, the requests to GraphCMS and the GraphQL Queries, our folder structure looks like this:

We started out by writing the query to get the teams. We don’t get the Developers directly as our Developers section is made of teams that contain developers.

Here’s the query to get the the teams, and then the collection of developers that participated in that team.

Then, we import that GraphQL Query and we call the GraphCMS endpoint using graphql-request. For what is worth, you can use anything you want to call a GraphQL endpoint (e.g., Axios, Apollo, Urql), but I recommend graphql-request as it gives you just what you need, nothing less, nothing more.

Up to this point, we have a function called getTeams that will get all the teams ordered by startDate and its respective developers ordered by firstName.

How you connect the data layer (data folder) with the view layer (any .html file) is to create a [template-file].11tydata.js file with the same name as the .html where we want to use the data. In our case, we have a who-we-are.html file, which means that we have to create a who-we-are.11tydata.js file to get dynamic data.

From there we can use the teams object in who-we-are.html

And that’s it — our Developers section is now fully powered by GraphCMS! 😎

Bonus: Automate deployments

Since we use Netlify to host our site, we use Zapier to schedule deployments everyday at a certain time. Our workflow to update our site now is this:

Make a change in GraphCMS
Trigger an automatic deployment at 12am PST

Unless we need to deploy any new feature or fix a bug, we no longer need to trigger a manual build! 🎉

For those times when we do need a manual build, we have installed the official Netlify/GraphCMS integration. This gives us the ability to kick off a build and deploy of the site at the click of a button from within the content editing interface.

Conclusion

GraphCMS is a great tool, easy and fun to use that has helped us greatly since now we’re able to iterate faster.

11ty is a fun tool to use, too! I like its simplicity and the fact that it goes back to the basics, HTML, CSS and JS. No need for anything fancy or with a steeper learning curve such as React or VUE.

Useful Links

Aprendamos Next.js en Español

Alejandro Ñáñez Ortiz — Sat, 05 Dec 2020 23:13:56 +0000

👋🏼 Empecé una lista de Youtube donde iré publicando videos sobre cómo usar Next.js

Los 3 primeros videos son sobre:

¿Cómo usar getServerSideProps?
¿Cómo usar getStaticProos?
Usar de create-next-app para crear nuestras aplicaciones Next.js

Playlist en Youtube - Aprendamos Next.js

¿Qué les gustaría saber sobre Next.js?

Team 14 Recap

Alejandro Ñáñez Ortiz — Fri, 04 Dec 2020 03:35:27 +0000

The Collab Lab's 14th team wrapped up last week! This one has been really special to me as it's the first one (but not the last one!) that happened completely in Spanish!
For me, it felt like a dream came true. If I had told myself one year ago that I'd be mentoring people from Latin America fully in Spanish, I would had laughed at myself!

The Participants

The Mentors

The Project

They got together as a team, and built a web application using React.js and Firebase that's deployed to Netify during 8 weeks.
They went from a really basic looking application, to this beautiful piece

They, like the real software development team the are, had some trouble meeting some deadlines in the last couple of weeks, but they put it together and managed to complete everything they had in mind before the end of the 8th week. I have to say that I'm really proud of them and what they accomplished.

👏👏👏👏👏

Learning RxJS by creating a Datepicker in Typescript

Alejandro Ñáñez Ortiz — Tue, 28 Mar 2017 20:48:45 +0000

I was always super curious about RxJS and I found it to be super difficult to grasp or to build something more real than console logging a click event or a timer.
That's why I decided to start a small/toy project that uses RxJS + Vanilla JS (Typescript) that does more than just a console.log after a click.
As I said, this is a small project but I tried my best to make it work, it has some nice unit tests written using Jest and some .ts specific stuff (I'm learning Typescript too). The project also has a ToDo list with things some things to address.

That being said, feel free take a look and hopefully it helps you to get a better understanding about how to build something with RxJS.

Date Picker Repo

DEV Community: Alejandro Ñáñez Ortiz