Setting up a maintenance site for multi-domain routing.
If you’ve ever had to create a maintenance page for your website when you need to do some server work or some larger database operation that will need your system offline, you’ve probably suffered a headache about how to do it well. How about if you have multiple sites that you have to take down and you want there to be a “we are down right now” but branded for each domain? This was the dilemma that I had to solve and I must say, I like what I came up with.
My first pass was to use a virtual host but it was a bit messy and caused for a lot of very WET coding. It also didn’t have a good catch-all method. I decided on a very simple Express server paired with Pug (formerly Jade) and then went with AWS for the cloud service (I’ll discuss AWS in a future post).
Here’s an example repository to see this in action: github.com/NaturalPoint/Maintenance-Site
Here’s what I did:
I made this for the company I work at, NaturalPoint, so I’m going to use their site as an example. As we have several web properties at NaturalPoint it’s really the perfect proof of concept. It’s super cool that we get to work with these new ways of doing things and set up servers on AWS. Gosh this project was fun!
The Express app:
First off, I created a new project and initialized npm
$ mkdir maintenance-site
$ cd maintenance-site
$ npm init
- We’ll be using Express and Pug, so let’s install those now.
$ npm install --save express pug
- Let’s get coding by creating the index.js file.
$ touch index.js
This is pretty standard for Express. We’re going to have a file structure that consists of a
publicdirectory where we keep styles, images, etc and then our
viewsdirectory which is the standard for the Pug template files. For the rendered Pug template to access the directories we’ll need to tell Express what to return when the styles, and images are asked for.
|-public |-images |-styles |-views |index.js |package.json
Next we need to set the view engine to Pug.
After that we need to set up our Pug template. For the sake of simplicity I’m going to streamline this a lot but you’ll get the point
The routing logic based on what the requesting domain
Alright, that’s done. We now have two variables to use within the template.
siteName. I find it’s nice to have both because in our case I don’t want “NaturalPoint” to be a classname instead of “naturalpoint”. Or in the case of “Gears Sports” where there is a space. Now how to use them?
We’re going to use
app.get()and use a wildcard to get all requests. We’ll then get the hostname and set the variables to use within the Pug template based on what the hostname is. This way we can brand the Pug template differently based on the different urls.
And there you have it. The magic is done to detect OptiTrack and Gears sites and then use NaturalPoint to catch all other domains. You can configure this however you’d like it but this made the most sense for us as NaturalPoint is our main site.
Then it’s just the listening port and we’re aces.
I made my “start script” in
package.json“sudo node index.js”. This way I can run this quite simply with
Testing this locally
I update my hosts file to accommodate this. You can update your hosts file at ` /etc`. I then add in the urls that I need to test.
$ cd /etc/
$ sudo nano hosts
- Paste the example below where you feel it makes sense.
- Save and close
127.0.0.1 www.optitrack.com 127.0.0.1 www.naturalpoint.com 127.0.0.1 www.gearssports.com 127.0.0.1 www.gearsgolf.com 127.0.0.1 optitrack.com 127.0.0.1 naturalpoint.com 127.0.0.1 gearssports.com 127.0.0.1 gearsgolf.com
Putting it in production
This post is getting rather long so I’m going to do another post about how to put this in production soon. It’s rather easy to get this going on AWS, where I set it up, and there are various other options. I’ll explore those in that post.
I’ll also explain how to point your urls to this so that you can completely take down your entire stack if you’re replacing a switch or something like that.
I hope you found this useful. If you have any questions or found something not working quite right feel free to reach out to me on Twitter. @peterramsing
New LostGrid Darcy release with feature enhancements and a major under-the-hood refactor.
- #322 [FEATURE ENHANCEMENT] There is a new ability to add an
rgbcolor value to
lost-utility: edit;to customize your editing color.
lost-utility: edit rgb(60, 0, 0);
I’ve missed diving into code like I used to. This is a minor release adding a little feature enhancement for
lost-utility. There are some cases where you might want to have different colors used in the
lost-utility. Now you can add in an
rgbvalue. When I went to bed after hitting “release” last night I realized that I should probably also add in some color variables as well like “blue” and “red” etc. Because I’m converting it to
rgbaI don’t think it would be as simple as accepting valid
csscolors but that’s certainly something that could be in the cards.
Coming in the next release is, by popular demand, the updating of the
lost-offsetrule to be a little more intuitive. (See issue 184) This is slated for version 8 and I’m excited about what other things I can put in that version. As I mentioned in my last post regarding the release of LostGrid, I’m not focused on the versions being used for marketing. That’s why it’s called the Darcy release. When it feels like a large enough change to change the name then the name will be changed. I really value semver and want LostGrid to be really trusted codebase so major versions might come more quickly than the “marketing” might dictate.
With any large breaking changes I’ll be sure to have upgrade paths in place to help codebases take advantage of the new versions like I did in the last major release.
Thanks to everyone that’s made this project possible!
- #322 [FEATURE ENHANCEMENT] There is a new ability to add an
Adding a linear-gradient to images is rather easy and can be adapted to create a variety of design enhancements.
If you’re wanting to add a gradient to an image I have found a lot of posts that explain how to do it with background images. This has been the go-to strategy of mine for a while but I thought it didn’t feel quite right for every case.
In order to help keep a codebase maintainable the background image solution didn’t seem like the best solution. Whenever possible I want to keep my content in the
htmland the styles in the
css. I don’t feel like that is what the
background-imageproperty is for. If an image is a part of the content and not the background, separation of concerns says to put the image in the
::after css pseudo-element
When I needed to add a gradient on an image this week I decided to get a cup of coffee* and think about it for a minute before going with the
background-imageapproach. The quick ponder paid off as I sat back down to try what came to mind.
TL;DR The How To
I created a CodePen but thought I’d explain some things here.
- You need to surround the
<img />tag with a
<div>. This is because presently, the CSS spec doesn’t specify how exactly the
::afterinteracts with replaced elements and the
imgis a replaced element.
- This isn’t supported before IE 10 or below. caniuse linear-gradient
- You can do a lot with that
linear-gradient. Using multiple color stops will give you a lot of flexibility.
- To adapt for different size layouts you might need to add those breakpoints in and adjust the height of the
:after: If you’re referring to content,
::should be used.
beforeare examples of content whereas
hoveraren’t content. The
::is supported above IE8 but if you need IE8 support you can’t use
linear-gradientand thus all this is for not. I understand…IE must be supported in some cases. Your pain is real.
:before: You could do this with a
afterfeels right here. If you want a gradient from the top then
beforewould be perfect. Adapt this to your needs.
* I recently joined the Portland WeWork and they have ready-made coffee. #awesome
- You need to surround the
A quick web tip on overscroll background color.
Here’s a little tip if you’re working on a site whose header and footer are the same color.
click on the gifs to play, click again to stop
How to do this:
For me, I just sort of have forgotten about the
htmlelement and how it can be styled. It’s not “game changing” but if it fits for your site it can make a designer’s day.
Here’s a gist with some example code.
Here’s a live version version of that example code.
Where does this work?
I tested this in the latest versions of Chrome, Safari, and Opera. Firefox and IE don’t do “overscroll”.
Comparing between two versions using the GitHub compare tool
Often I’ll want to see the difference between two releases on GitHub. Typically there is a CHANGELOG that will tell me a between versions but what if I want to see a diff between two versions that aren’t sequential? GitHub offers a way to do this.
I’ve been adding a link to the actual code diffs between versions in my LostGrid Changelist for each release and I haven’t seen many other examples of this.
Today I needed to see the diff between our current version or normalize.css and the latest version. Because we were behind a few versions it wasn’t as simple as looking at the CHANGELOG.md so I used the
comparetool. It’s same place you would go to create a Pull Request but it also allows you to compare between tags. I find it easiest is to use the
URLto perform the comparison.
The key is that “…” and knowing the tags. I typically start at the release page and go from there. The GIF below explains it. 👍🏻
Page: 1 of 3 Next