The making of the new CodyHouse website

After almost a year of silence, here we are back on track with CodyHouse!

We have a brand new Web Components section (content coming soon), we have started improving (and fixing) the nuggets published in the past, and of course, we have a new website! 🙂

Here are some insights on how we built CodyHouse 2.0. Hope you find them interesting!

Back-end

CodyHouse has been a WordPress website since the beginning.
When we first developed it, it seemed like the best option, considering the kind of content we wanted to share; and it suited us pretty well!

With the new website, though, we decided to go CMS free.

The only real downside of that decision was losing the ease we were used to when creating new posts with Wordpress. To balance that, we are now using a local WYSIWYG editor based on TinyMCE (the HTML editor we were already using as it was the WP default one).

Having a local WYSIWYG makes it super easy to create the formatted content of our posts so that we can push it to the new website pages! 👍

With no CMS, we decided to go database free as well.

There are a few things that usually require a database, like the site search. On the new CodyHouse, we have a JSON ‘database’ file with the info we want to be queryable. To make that work, we implemented a function that (locally) runs through our posts and updates the JSON ‘database’ (as well as our sitemap and RSS feeds) each time new content is created. Easy peasy!

Front-end

We finally got to use CSS Grid in the CodyHouse project! 🙂

Here’s how we used it for our experiments page:

• We started with a fallback for older browsers (like IE) that do not support the Grid. In this case, we have a one block layout that is converted to a 3-blocks one when the device is larger than 1024px (using the good old float).

.gem-gallery {
 width: 90%;
 max-width: 1170px;
 margin-left: auto;
 margin-right: auto;
}
.gem-gallery::before, .gem-gallery::after {
 /* clearfix */
 content: “”;
 display: table;
}
.gem-gallery::after {
 /* clearfix */
 clear: both;
}
.gem-gallery li {
 /* one-block layout */ 
 margin-bottom: 1.6em;
}
@media only screen and (min-width: 1024px) {
 .gem-gallery li {
  /* three-blocks layout */
  float: left;
  width: 32%;
  margin: 0 2% 2% 0;
 }
 .gem-gallery li:nth-child(3n) {
  margin-right: 0;
 }
}

• We then added a @supports rule to target browsers that support the Grid. For our layout, the grid-template-columns did the trick: we set a min-width for each block (in our case 280px -> using the minmax() function) and repeated them using auto-fill. This way the blocks automatically arrange themselves to take up all the available space but still respecting the set min-width.

@supports (grid-area: auto) {
 .gem-gallery {
  display: -ms-grid;
  display: grid;
  grid-gap: 1.6em;
  -ms-grid-columns: (minmax(280px, 1fr))[auto-fill];
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 }
 .gem-gallery::before {
  display: none;
 }
 .gem-gallery li {
  width: auto;
  margin: 0;
 }
 @media only screen and (min-width: 600px) {
  .gem-gallery {
   grid-gap: 2em;
  }
 }
 @media only screen and (min-width: 1024px) {
  .gem-gallery {
   grid-gap: 2.5em;
  }
 }
}

One note: we use @supports (grid-area: auto) rather than @supports (display: grid); this way we leave out the older versions of Edge (<= 15).

Internet Explorer and Edge 15 (and lower) implemented the old CSS Grid specification, so they do support display: grid.
This means the CSS you insert in a @supports(display: grid) rule is applied on Edge<=15; this could break your layout if you use properties not included in the old Grid specification.

Using @supports with a property that wasn’t in the old Grid specification (like grid-area) makes sure only the CSS fallback is applied to these older versions of Edge.

About the website interface: as we did with the first CodyHouse version, we decided to keep the interface as clean as possible; we think this is necessary to keep the user experience enjoyable as the majority of our users visit the site on a daily basis.

Nevertheless, we still indulged ourselves in a couple of animations 🙂

In the homepage, for example, we kept our SVG top illustration, but we added a subtle animation: you can see the lines of code scrolling inside the editor window (black rectangle).

This animation is achieved using SVG <clipPath>: the editor window is used as <clipPath> for the code element so that only the portion inside the editor window is visible.

<defs>
 <clipPath id=”i-code-mask”>
 <! — editor mask here →
 </clipPath>
</defs>
<g clip-path=”url(#i-code-mask)”>
 <g id=”i-code”> 
  <! — code element here →
 </g>
</g>

Now all you need to do is creating a CSS animation that translates that code (and pick a nice Bezier curve as well 😉).

#i-code {
 /* this is the code element inside the svg home illustration */
 animation: i-code-animation 5s .3s;
 animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 will-change: transform;
}
@keyframes i-code-animation {
 0% {
  transform: translateY(0);
 }
 33% {
  transform: translateY(-122px);
 }
 66% {
  transform: translateY(-244px);
 }
 75% {
  transform: translateY(-260px);
 }
 100% {
  transform: translateY(0);
 }
}

We have been pushing the SVG animation a little bit more in the Web Components landing page! For that, we used Bodymovin.

If you have never heard of it, Bodymovin is an After Effects extension to export animations for the web.

It converts your animation to a .json file that can be used with the bodymovin.js player (that comes along with the plugin) to recreate the animation on your webpage.

The original animation for the Web Components page was created in After Effects and then it was converted for the web using the bodymovin.js player.

We are also still using gifs for some of our animations, like the one for our new 404 page. In this case, as well, the original animation was created in After Effects and then converted to gif.

Experiments section

With the launch of the new CodyHouse, we started updating the existing experiments.

First of all, we are removing the Bourbon dependency (about half of our resources include it).

Besides, we are planning on implementing some code optimizations as some of our resources are 3/4 years old.

The plan is to update the most popular resources before releasing new ones.

Here’s the list of experiments we have already updated:
1) Vertical timeline
2) Back to top
3) Responsive tabbed navigation
4) Hero Slider
5) Icons Filling Effect
6) Alternate Fixed & Scroll Backgrounds
7) Slide In Panel
8) Login/Signup Modal Window

Any bugs, please open an issue on GitHub (you can find the link in the experiment page, right below the title).

That’s it! This article should answer most of the questions we get asked by our users. Hope you enjoyed it!