If your site relies on data sent to clients, you can boost its performance using client-side templates and WebSockets. In this tutorial, I will show you how.

Introduction

We will begin by transforming a preexisting application to be faster and more durable under high traffic. I will show you how to locate pieces of code which could be modified to improve the app. Start by downloading the sample application that I prepared. It’s really simple, it displays random posts rendered on the server, but it will do just fine for this tutorial.

Step 1: Preparation

Unzip the app that you downloaded previously into a preferred folder or location and run it:

Now navigate to http://localhost:8080/ and take a look. You should see only a button. You’ll also need to be using a browser with developer tools, so you can see the size of the HTTP requests. Open the developer tools and go to the Network tab. Then, click the button a couple of times and take a look at the size of the /getpost request:

It’s only about 830 bytes right? Well, imagine that this site gets really popular and one million users want to see this post. It gets to about 830 megabytes. Per post! Not so small a number any more.

Step 2: Inspection

In this step I will show you how to find code that can be modified to boost up the app. In the previous step, you’ve found the request used to get the post. You will now have to find how it is served in the code. Open up the index.js file in your favorite code editor. Now go to the lines 16-20:

var postTemplate = dot(fs.readFileSync('./post.dot'));
    
    app.get('/getpost', function (req, res) {
    	res.end(postTemplate(posts[Math.floor(Math.random() * 3)]));
    });
    

Here it is! First, the post’s template is compiled into the postTemplate variable. Then, on the /getpost GET request the template is served. Nothing fancy, just a classic approach to the problem. We’ll need to change this to improve its performance.

Step 3: Setting-Up Socket.IO

To begin the improvements, first, install Socket.IO. In your terminal type:

npm install socket.io
    

Wait for the command to complete. Require it in the code by adding the following line after all requires in index.js:

var sio = require('socket.io');
    

Now you will have to change the Express set-up, to work with Socket.IO. First, after the app definition, add this:

var server = require('http').createServer(app);
    var io = require('socket.io').listen(server);
    
    server.listen(8080);
    

And remove the last line in this file:

app.listen(8080);
    

You need to do this because Socket.IO requires the HTTP Server to work, not the Express app.

Now, if you run the app you should see something like this in your terminal:

Step 4: Client-Side Template

To start boosting up the app you will need to save the compiled template on the client-side. Javascript files are cached, so it will be downloaded only once. To compile the template, go to http://olado.github.io/doT/index.html and scroll down to the Usage section. Because there will be no need to compile the template every time the user visits your site, you can just add the compiled function to the code. Open the post.dot file and paste its content into the Template field like this:

Now copy the content of the field and paste it into the static/main.js file before all code in there. Change or remove the anonymous function name and assign it to the postTemplate variable like this:

var postTemplate = function (it) { ... }
    

Now go to the index.js file and remove unused lines, because you will not be compiling templates on the server-side any more:

var dot = require('dot').template;
    var fs = require('fs');
    
    ...
    
    var postTemplate = dot(fs.readFileSync('./post.dot'));
    

The post.dot file can also be deleted too.

Step 5: From AJAX to WebSockets

Instead of using AJAX to communicate with the server, we will now use WebSockets. It’s best to do this using Socket.IO, because the WebSocket API itself does not provide any fail-overs in case the user’s browser doesn’t support it. The server is already set-up, so now we will need to connect to it. First, add this in the head of the static/index.html file (before main.js):

<script src="/socket.io/socket.io.js"></script>
    

Next, open the static/main.js file and after the template definition, add this code:

var socket = io.connect();
    

It will connect to the Socket.IO server (notice that you’ve added Socket.IO’s script to the page earlier). Since the server is on the same host as the client, you don’t need to provide any parameters to the function. Now, you need to add an event listener to the socket, so we know when the post arrives. Add this just after the previous line:

socket.on('getpost', function (data) {
    	$('button').after(postTemplate(data));
    });
    

As you can see, the callback looks the same as the success callback in jQuery’s $.ajax() method but it’s running the template function on the data first. Now, replace the $.ajax() call with this:

socket.emit('getpost');
    

This line will notify the server that the user wants to display a new post. Of course, in a real-world app, the server would send the posts when they are published.

Step 6: Sending the Posts

For now, the client can connect to the server and request a post, but the server will not send anything yet. You need the server socket to listen to the getpost event and respond with a random post. Go to the index.js file and change it to this:

app.get('/getpost', function (req, res) {
    	res.end(postTemplate(posts[Math.floor(Math.random() * 3)]));
    });
    

To this:

io.sockets.on('connection', function (socket) {
    	socket.on('getpost', function () {
    		socket.emit('getpost', posts[Math.floor(Math.random() * 3)]);
    	});
    });
    

This will make the server attach the getpost handler to every client that connects to it and respond him with a random post. Now you can run the app again and try it out. Then go to the developer tools in your browser again, go to the Network tab, filter it out so you can only see WebSockets and click on the one that is visible there. You should see the data sent between the browser and the server, and notice that it is much smaller then it was with the server-side template and AJAX (the length is in bytes):

Conclusion

As you can see, using WebSockets and client-side templates can (and probably will) improve the performance and durability of your app. I’m sure there are plenty of sites that could be boosted with this technique and I hope that you will use it to provide a better user experience, both for your mobile and desktop users.

Christi Turner
    RTGX, Inc.
cturner@rtgx.com

In the last few years, web designers have gradually realized that cluttering our designs with non-essential elements isn’t a good idea.

Excessive design elements like meaningless stock photos, textured grunge backgrounds, convoluted navigation systems, social-sharing buttons, blog post widgets, and other types of page bloat steal attention away from the core goals of our web design.

So instead of adding more stuff and more options, many of us have chosen to reduce our designs to their most basic forms.

And though we are building websites that are visually simpler than their predecessors, the results have inversely been profound.

A Few Examples of Minimalist Landing Pages

To make sure we’re on the same page, let’s quickly look at the minimalist landing pages of some successful web apps:

Mailbox

TinyLetter

Dropbox

IFTTT

Notice that the apps above are pretty sophisticated; they accomplish useful, innovative, and complex things for their users.

Yet what’s interesting to note is they don’t have an equally complex landing page.

Let’s study some great examples of minimalist landing pages and derive design patterns, tips, and ideas from them.

Minimalist Landing Pages: The Big Idea

What you’ll immediately notice about minimalist landing pages is they only one primary goal.

Whether it’s to click on a sign-up button or enter your email address in a web form or download something onto your computer, there is only one well-defined action the web designer of the landing page wants her users to take.

There are no complex navigation menus on minimalist landing pages. You usually won’t find a huge array of social media buttons on them. The design is devoid of decorative stock photos whose sole purpose is to fill up blank space.

Every design element is meticulously chosen.

Everything is strategically-designed to support and reinforce the desired primary action the web designer wants the site visitor to take.

Landing Page Case Study: Dropbox

The website of Dropbox is a prime example of a progressively minimalist design that demonstrates the concept of having only one primary goal in a landing page.

The Dropbox landing page only has one primary call-to-action, and it’s pretty easy to spot because of how the web page is designed.

The primary goal of the design is to get site visitors to click on the Sign up button.

The Sign up button is the most distinctive element on the web page. Everything else is deemphasized.

Yes, there are secondary alternative actions Dropbox’s landing page visitors can take: Download the software, sign in (if you’re already a Dropbox user) or learn more about Dropbox. However, these alternative calls-to-action are designed in a way that doesn’t impede the primary goal of getting site visitors to click on the Sign up button.

All non-essential elements are removed or designed in a subdued fashion. For instance:

• The site’s name (Dropbox) isn’t even displayed on the landing page; even the name of the app proved to be a non-essential element.
• To explain how Dropbox works, they use a simple illustration that doubly serves to draw your attention towards the Sign up button.
• The tagline (Your stuff, anywhere) is short and uncomplicated.

The Dropbox landing page made a confident and bold choice as to what action it wants site visitors to take, and it was then designed in a way that emphasized on that action.

Landing Page Case Study: Mailbox

Mailbox, an app that helps its users efficiently deal with emails on a mobile device, shows us another example of a great minimalist landing page design.

The primary action is to click a big, distinctively-designed button labeled Get the App that brings the user to the Mailbox page in the Apple App Store.

A simple in-product screenshot on the right of the primary call-to-action (that opens a product video when clicked) effectively illustrates what Mailbox is.

Alternative actions are seen at the site’s navigation menu, but the navigation menu is visually-deemphasized.

Landing Page Case Study: Karma

Karma is another excellent example of a beautiful minimalist landing page.

The primary desired action on this landing page is to click on the Buy Now button. The primary action is displayed twice: once in the middle of the layout, and another at the top. The call-to-action buttons are both green, labeled identically, and are visually similar to create a connection between them.

A secondary alternative action a user could take is clicking on the Learn More button. As you can see, the transparency of the Learn More button reduces its visual weight so it doesn’t steal attention away from the primary Buy Now call-to-action button beside it.

The short description above the call-to-action buttons tersely encapsulates Karma’s unique value proposition: a social-sharing WiFi connection.

The high-res background photo is meaningful; the photo shows what the product looks like and gives you an idea about the size of the product (the hand holding the product is a useful contextual hint).

Essential Components of a Minimalist Landing Page

You may be seeing a reoccurring design pattern by now.  A minimalist landing page has three major components:

1. Primary action
2. Explanation of what the product/service is
3. Alternative action/s

As we go to the next section of this article and as we go through a few more examples, keep those three components in mind.

Design Tips for Minimalist Landing Pages

What follows are some tips and ideas based on reoccurring patterns we’ve seen in minimalist landing pages.

Focus on Creating a Good Visual Hierarchy

In order to draw attention to the most important parts of a landing page, the visual hierarchy should be well-composed.

Visual hierarchy is the deliberate arrangement of the elements in a design so that the most important elements are seen first.

Some of the main characteristics that affect a design element’s position in the visual hierarchy of a landing page are:

1. Size: Bigger elements are higher in the hierarchy.
2. Position in the web page: For most sites, elements at the top and at the left of a web page are higher in the hierarchy.
3. Color contrast: A stronger contrast between a particular element and its background, as well as between other elements in close proximity to it, will lead to a higher position in the visual hierarchy.
4. Visual complexity: A more complex aesthetic compared to surrounding elements gives the element stronger visual weight.
5. Whitespace: more whitespace around the element gives it a stronger visual weight.

In the examples that follow, take note of how size, position, color contrast, visual complexity, and whitespace are used to establish the desired visual hierarchy.

Example: Numbrs

The minimalist web design of Numbrs is a good talking point with regards to visual hierarchy.

The description of the app (1) and the app’s primary call-to-action button (2) are the two most prominent elements in the web page.

The volume control (3) is pretty high on the visual hierarchy too since you might want to turn off the audio when you visit the landing page.

The name of the site (4) and alternative actions you can take (5) are lower in the visual hierarchy.

Example: Wander

Another demonstration of good visual hierarchy composition can be seen in the minimalist landing page of Wander.

There are only four foreground elements in the design.

Topmost in the visual hierarchy is a statement letting people know that the site is taking in sign-ups (1). Below the statement is a call-to-action button asking users to log in (2).

Significantly much lower in the visual hierarchy are secondary alternative actions Wander’s landing page visitors can take, such as liking Wander on Facebook (3). The Facebook button also displays the number of Facebook Likes Wander has, serving a dual purpose of providing site visitors with social proof about the app.

Other secondary actions site visitors can take are viewing Wander’s social network accounts or reading Wander’s Tumblr blog (4).

Creating Visual Hierarchy in Your Web Designs

Read these guides to get tips and ideas for composing visual hierarchies:

• Working with Visual Weight in Your Designs – A guide on giving your design elements the appropriate visual weight based on their desired positions in the visual hierarchy.
• Creating Focal Points in Your Web Design – Some techniques for drawing attention to specific design elements are discussed in this article.
• Gestalt Principles Applied in Design – Gestalt is a set of human psychology theories that implies some useful techniques related to establishing a good visual hierarchy in your designs.

Make Sure the Primary Action is the Most Prominent Element

The first step is to decide what primary action you would like your site visitors to take. Is it to click on a certain button? Is it to like your Facebook page? Is it to fill up a web form?

Choose one primary action, and then commit to it fully. Then design the web page to support that primary action.

Example: enthuse.me

A good demonstration of making the primary action the most prominent element on the landing page can be seen on enthuse.me:

With a good visual hierarchy, it’s immediately evident that the primary action is to click on the Get Started! button.

Example: IFTTT

Notice how the primary action of the IFTTT landing page is quite obvious:

Use Colors and Typography Strategically

Web designers creating minimalist sites will only have a few tools in their arsenal: Color and typography are chief among them.

Example: Basecamp

Basecamp is an example of a minimalist landing page that uses color and typography strategically.

Green is used for the primary call-to-action. Blue is used for secondary calls-to-action (such as the log-in button for existing users and the link to another web page describing reasons why people use Basecamp).

Big fonts and variations in the colors of design elements serve to draw your attention to relevant points of interest in the landing page.

Example: Path

Next, let’s take a look at how Path uses color and great typography to build the appropriate visual hierarchy.

A distinctive green color is used on their primary desired action, which is to fill up a web form.

Varying font sizes, text color and text treatments effectively segment sections of interest in their landing page.

Keep Textual Content Succinct

By now, it’s a well-known fact that Internet users rarely read our site’s content. We can reasonably assume an Internet user’s patience is much shorter when he’s on the landing page of a product that he isn’t involved with yet.

Minimalist landing pages must keep textual content short and easy to understand. With fewer things to read, site visitors are more quickly prompted to take action.

Example: Contently

Contently is able to describe their web service’s value proposition in 3 words: Tell Great Stories. That is so profound, given that the web service is centered around content! There is very little text content on their landing page, reducing the likelihood of derailing the site visitor’s path towards taking action.

Example: Shipment

Another good demonstration of keeping text content usefully short can be seen on Shipment. In 5 simple words — Share and review your designs — the site visitor becomes instantly aware of what Shipment can to do for him/her.

Explain the Product/Service Quickly

There are many ways to effectively illustrate how a product or service works. The key here is to keep the explanation as simple as possible.

Let’s look at a few ways you can illustrate a concept efficiently.

Example of Video Explanation: Couple

The Couple app makes use of a product video to explain how it works, taking advantage of the fact that product videos can significantly increase conversion rates.

The video is progressively disclosed by clicking on the "play now" icon button:

After the button is clicked, a YouTube video is displayed in a modal window. The modal window is easy to close so the user doesn’t have to watch the entire video before taking the next action.

This example also aptly reveals a concept that should be applied to secondary actions and content: Progressive disclosure. When using a video, instead of showing the video immediately — which would affect the landing page’s visual hierarchy since videos have heavy visual weights due to their size and color — show the video only when the user explicitly wants to see it.

Example of Interactive Tour Explanation: Apple Mac Pro

The minimalist landing page of Apple’s Mac Pro demonstrates another popular way of describing a product: An interactive product tour.

The explanation begins with a quick animation to draw your attention in, as well as to provide a hint that the web page has animated interactivity.

Example of a Static Photo Explanation: Wallmob

The high-res background photo found on the Wallmob landing page is an exemplary example of how to use a meaningful image.

The background photo serves to illustrate what Wallmob is: A point-of-sale app for your mobile device.

Simplicity is Sophisticated

As you can see, this way of designing landing pages is very simple in concept: A minimalist landing page is goal-centered, and there’s only one goal.

By removing unneeded elements, you’re given the opportunity to direct your design and production efforts — as well as the attention of your site visitors — to the things the really matter.

Read These Next:

• Designing Landing Pages That Work
• Lessons We Learned from Our Biggest UX and Design Mistakes
• The Art of Distinction in Web Design

About the Author

Karol K is a web designer and freelance writer. He’s passionate about entrepreneurship and using the Internet as a business tool. He works at Writers in Charge as the head of marketing.

The post Deconstructing Minimalist Landing Pages appeared first on Six Revisions.

At its very heart typography is about two things: legibility, which is concerned with how distinguishable letters, words and phrases are; and readability which deals with how easy it is for the brain to convert those elements into a coherent message.

Have you ever found yourself reading a single line of text twice, as if it were two lines, especially when your eyes are tired? It occurs, because the eye gets lost on its journey from right to left (or left to right, depending on your language) from the end of one line to the start of the next. It’s the reason that children trace lines with their finger when they’re taught to read.

There are a few things that typographers can do to prevent the problem, and they’re especially important in large amounts of body text, like news reports or blogs: firstly, make sure that your characters per-line isn’t too high, the further the eye has to travel the greater its chance of getting lost; secondly consider a serif font, the greater horizontal impression creates greater visual distinction between lines of text and white space, serving the same role as the aforementioned child’s finger; lastly pay great attention to your leading, greater inter-line spacing creates clearer channels for your eye to follow.

In addition to this traditional advice, a new technique has been discovered. BeeLine Reader is a fascinating new plugin for Chrome that demonstrates how it works.

BeeLine Reader adds a color gradient to lines of text, making the transition from the end of one line to the start of the next easier for the eye. Stanford University carried out a test using the plugin and concluded that BeeLine Reader resulted in an average reading speed increase of 10%; the plugin’s own site claims a seasoned reader will experience an increase of 25–30%.

You should be able to read the text on the right much faster than the text on the left.

Whilst I can’t say I approve of the plugin forcing text into a single column, or of the colors they’ve used (ugly for most and useless for anyone with protanopic color-blindness) the principle is sound. There is a gray-scale example on BeeLine Reader’s site that improves readability, but wouldn’t infringe on anyone’s branding. A quick trial of their reading test, showed I improved by 22% using the gray version.

Although there’s no easy way to implement this kind of design in simple CSS, it is possible to code as the plugin demonstrates.

If you’re designing large amounts of running text — especially if other contraints force you to use columns that are too wide or line-height that is too small — consider applying this technique to compensate.

What do you think of BeeLine Reader’s technique? How did you fare in their reading test? Let us know in the comments.

Featured image/thumbnail, color coded image via Shutterstock

6,500+ Vectors + 1,000 Photoshop Brushes – 91% off!

This event is hosted by an off-campus organization. It is not a UMBC event. We are sharing it with you because of your interest in service.

USI is an out-of-school time program for 1st-4th graders at Lakeland Elementary Middle School, created with two things in mind:  students' academic and personal growth.  Please view the recent Maryland State Department of Education's Press Release - UMBC is one of twenty-two recipients of the 21st Century Community Learning Centers (21st CCLC) Grant Program.   

DETAILS

• Lakeland Elementary Middle School is located in South Baltimore, 15 minutes from UMBC.  Transportation to the site will be provided. 
• USI Fellows were just selected to manage the program in partnership with Lakeland teachers and staff.  
• The program will run Mondays, Tuesdays, Wednesdays, and Thursdays, 2:30-6:30 pm.

• Volunteers have the ability to plan/facilitate one enrichment activity per week (i.e. sport; robotics; chess; performance arts); 

• Training will begin soon (mid-October)!  
• This is also a great opportunity for aspiring elementary teachers who could strengthen their science and math skills by being paired with Fellows who have STEM backgrounds.  Graduate students are welcomed to apply!

Interested?

USI is seeking 4-5 volunteers per day, M-Thurs.  There is the chance to volunteer more than twice a week.   Please complete the very brief Volunteer Application.  

We still need a few volunteers to commit each week, ideally 4-5 volunteers each day.  For best consideration, please submit your application by Wednesday, October 9, 2013, at 12 pm to Lori Hardesty, Assistant Director, Service-Learning, K-16 Partnerships via email at lhardesty@umbc.edu.  You can also drop off your application to The Shriver Center, 1st floor of the Public Policy Building (just past the elevators) 

QUESTIONS?
Contact Lori Hardesty via email at lhardesty@umbc.edu. See application for additional information.  

I somewhat regularly ask questions about WordPress stuff on Twitter. Usually when I don't know how to do something or I'm seeing behavior that I didn't expect. I did write a book about WordPress at one time, but even when I was immersed in that, I wasn't an expert on every aspect of WordPress. Especially the deep developer-y stuff. When I ask a question, I'll always get at least a few responses like:

Just use Jekyll / Octopress!
Just use Kirby!
Just use Drupal!
Just use ExpressionEngine!

As if up and changing which CMS I'm using would somehow solve this small issue I'm having. Sometimes it's a friendly poke, sometimes it's trollish, but more often than not I think they truly believe that moving CSS-Tricks off WordPress to whatever their favorite CMS is would be a smart move.

I don't think that. I figured I'd write up my reasoning.

The move would be tremendously difficult.

CSS-Tricks is a fairly complicated site. There is no simple automated export/import procedure for moving a site like CSS-Tricks.

There is a blog with over 1,500 posts and 62,000 comments. This tends to be the thing that is easiest to move between platforms. So moving on, there are about 1,200 pages. These represent things like videos, almanac entries, and snippets. These use about 20 different unique page templates in a moderately nested structure. That's a lot of custom content in custom structures at custom URL's.

There are forums on the site with about 130,000 unique posts. Only recently have I gotten the forums into WordPress itself which was a huge win. I wouldn't move unless the new CMS supported this forum structure as well. There is also a custom post type I use for The Gallery area on the site which is a totally different unique structure.

There are public user accounts on CSS-Tricks. At the most basic level they are just an identity for people so they can comment on the blog without entering their information each time. But they are also tied to the forums so you can have an identity and forum-specific functionality there. They are also tied to The Lodge, a paid-access area, so payment profiles and permissions are involved there. And then there is permissions in general. Any given user might be a basic subscriber, or a forums moderator, or forums admin, or site admin, or blog contributor, or lodge member at one of the different levels, or any combination. The new CMS would need an extremely sophisticated user management system.

Moving all the data and maintaining the structure of URL's, as well as all the users, would be a monumental task.

There would be no gains.

So moving would be hard. But people do hard things all the time on the web. We shouldn't be afraid of doing hard things if it's the right thing to do. But moving CMS's for CSS-Tricks isn't the right thing to do because there is very little to gain.

I think the biggest perceptions of what I would gain are:

1. Features
2. Security
3. Speed

Features is out. There is nothing I wish I could do but can't on WordPress.

If the potential CMS change was to a static site generator, security and speed are definitely benefits of those. They are safe because there is no public database or backend code in which to hack. They are fast because it's essentially a pre-cached site. However, I don't have big problems with either of these things, and I require a database because of the user accounts and comments. I'll go into more about security later.

I'm not worried so much about speed because it's a fairly fast loading site anyway. Good servers that are overpowered if anything. Everything is cached. Assets are on a CDN. And I use Mobify Performance Suite. The caching and CDN? WordPress helps with that. I used W3 Total Cache which works with MaxCDN.

The time commitment would be huge.

I can't even imagine. I don't even want to think about it. Just planning out all the things that need to change and how would take weeks. I'd have to hire the majority of it out, so in addition to the time, the cost would be huge.

Again, there is no automatic export/import that is going to get anywhere close. This would be an entirely custom job.

I like almost everything about WordPress.

Possibly the most important point: I like WordPress. I like the software. I think it works great. I like the UI. I like the APIs. I think building sites with it is practical and productive.

When I have a complaint or problem, it's usually something fairly minor and absolutely not a show-stopper. I wish that thing was better, but I move on with my life. I recently was slightly annoyed that the_excerpt() didn't work as I expected it to. So I filed a ticket. Chances are someone is going to look at that and either fix it or tell me why they aren't going to. That's satisfaction, one way or another.

WordPress is (and always has been) under strong active development.

The releases are frequent, impressive, easy to install, and nicely varied in focus including frequent security and clean-up releases. The (large) team not only care about the software, they care about the vision behind the software, they care about the company, and they have incentive both personal and business to keep it working well.

I have lots of WordPress friends and acquaintances.

I started writing out a list of people here, and it became so long it was distracting and I started feeling bad because I knew I would forget people. You know who you are and I love you all.

When I have issues, I have a great support network. Why would I leave that behind?

The WordPress community all around is excellent.

Outside of my friends and acquaintances in the WordPress community, I find I tend to generally like and get along with other WordPress-lovers. Kinda like how you might enjoy mountain biking partially because you like the activity of mountain biking but also because you generally like mountain bikers. I've been to a couple WordCamps and they were good fun.

I feel safe on WordPress.

That may seem surprising because of how often you hear about WordPress sites getting hacked. I have been as well, many times on various sites. But I know how to deal with that on WordPress. I'm good at dealing with it. And it hasn't happened in quite a while because I'm also good at preventing it now. If I moved to different software, I wouldn't be good at it until I spent years getting more comfortable with that.

I'm just one person.

99% of the hours spent working on and building CSS-Tricks was just me. It didn't take a team. I feel like CSS-Tricks is a pretty large/complex site to be handled by one person. And it's not even the primary focus of my time. Combined, I spend much more time on CodePen, ShopTalk, and administrative busywork. That's a powerful and understated testament to the software right there.

Anyway.

I remember back working at Wufoo it seems like everybody and their sister had a feature request for us. "It's easy!" they would tell us - knowing nothing about how our site was built, the history, and the challenges involved. We get some of that now at CodePen too although a bit less since it's smaller, newer, and we can be more nimble - but we still get it.

It's impossible to know from the outside what's going on in the inside of other people's websites. Best to just be helpful when you can.

Just Use [insert CMS here]! Or, Why I Still Love WordPress is a post from CSS-Tricks