July 2018 – CMS update

This month we want to highlight a few places to reference the overall style, techniques and the direction we are going with the university Base template.

The university CMS organizes the pages, files, promotions and assets without a website design. These assets are then implemented through a template that is unique to each area of campus while still fitting into the Wayne State’s identity. This “style” is what controls how elements look on Web pages.

Screenshot of the base website styleguide

Where our future style live and evolves

All new sites start from a ‘base style’ that is maintained and visible at https://base.wayne.edu/.

A living style guide of all starter templates and components can be found at https://base.wayne.edu/styleguide.

When each site is created, we take a ‘snapshot’ of the ‘base’ style guide. Which means as it evolves, new styles may not be usable on your website. It is used as a guide to show where university style is going and helps us plan for the future.

The style guide for your website

Most sites created in the last two years have their own style guide that you can view via Add/Edit Pages in the CMS at /styleguide. For example: https://clas.wayne.edu/styleguide

Each unique template is defined

Using the navigation in the style guide, it’s possible to see all variations of the website with fake text (lorem ipsum).

CLAS homepage layout

A few other examples:

Some areas have code examples

Mouse clicking button to expand code area

Areas that cannot be created directly in the CMS page editor require special HTML code that is specific to each site. That code is available in the style guide by clicking the corresponding “See code” buttons.

Some sites do not have a “style guide”

Sites originally created before 2016 do not have a /styleguide directory and unfortunately there is no “living style guide” for the site. The styles at the time they were built directly into the templates. If your site falls into this category and you have questions about possible styles, please email us at web@wayne.edu and include the URL of the page/site you’re looking to expand and what you’re looking to do with it.

A journey from Foundation CSS to Tailwind CSS

All of our frontend websites start with this base repository which can be viewed at https://base.wayne.edu/styleguide/childpage. It has evolved in many ways since its closed source version to the new public version 5. One thing has remained the same, the whole time is being dependent on the Foundation CSS framework.

We used Foundation when we first started exploring responsive design in 2012 for these reasons:

  • The grid was easy to use and understand
  • Fast scaffolding for wireframes
  • Included many Javascript packages out of the box that we found useful (accordion, offcanvas, sticky header)
  • Ongoing support of bug fixes and new major versions
  • The framework didn’t have an opinionated style like Bootstrap

Why did we move away from Foundation?

The biggest drive for us to switch to a different framework was how hard it was for us to upgrade from even minor versions of the framework. It’s not a knock on Foundation as we consider it a wonderful framework. The custom CSS/JS we wrote on top of everything played a large role in making the upgrade a difficult task. The slightest changes to their default CSS or javascript components made it extremely time-consuming for us to realign base to accommodate for those changes. A related issue is the cascading part of CSS. While it’s extremely useful, it’s also a large hindrance to the maintenance of a project long term. Adam Wathan wrote a really good blog post explaining this very issue.

What did we move to?

Tailwind CSS. The concept of using a utility-based framework is having a class name that does one CSS property and value. You can think of it as doing inline styles on each element, but what makes it different is you control all the values of colors, sizes, widths, and heights in a single settings file. This creates more consistency, better naming conventions, and a pattern to your CSS names.

What it allowed us to change

Once we switched over to Tailwind CSS it allowed us to start looking at replacing other parts of Foundation that we relied on. Here is a list of changes:

What are the stats for the childpage template?

File Base 4 Base 5
requests 14 9
load time webpagetest.org 1.481s 1.117s
css 18.1 KB 10.4 KB
javascript 27.9 KB 21.2 KB
html 6.4 KB 8.4 KB
total size 133 KB 82 KB

We managed to lower the overall size by a 38% reduction! The only file that slightly increased is the html which was to be expected since we introduced a lot of new classes.

We’re excited for the future of our base site project knowing we can easily swap out any packages now or upgrade them without affecting the entire site.

Updating a database display order with drag and drop in SQL

In many of our applications we support dragging and dropping datasets to change the order. We save this order in a database column that is an integer and is in sequential order.

There are many ways in javascript to handle drag and drop. I will show an example using jquery sortable. If you’d like to use something else there are three pieces of key information that need to be sent to the server:

  1. Current position
  2. Desired position
  3. User’s id

HTML list

Javascript sortable

Example data set for table todos

user_id display_order todo
2000 1 Take out garbage
2000 2 Clean house
2000 3 Do dishes
2000 4 Cut grass
2000 5 Change light bulb

Step #1 – Determine the position

Step #2 – Update the dragged item

Step #3 – Move the item down

Step #4 – Move the item up

Step #5 – Update the dragged item to the desired position

With this approach the server will do a total of three queries for every change to the display order no matter how many items are in the list. Examples typically tell you to iterate over every item to do an update query to set the new order. That approach results in total queries = total amount of items. This new approach is a significant improvement and has reduced a lot of our large data sets from 40+ queries down to three.

Meetup: Block__Element–Mag­ic: CSS Modularity for the Masses – March 16, 2016

register-now

CSS is hard, we all know that. There has to be a more effective way to facilitate the modularity and flexibility of our code.

When tasked with creating new components for a Web project and inheriting over 8,000 lines of code, where do you start?

When you are told to keep it modular as possible, what solutions do you have at your disposal? This is when you break into your bag-of-tricks with one of the many modular CSS architectures out there.

B.E.M. is a great method to use to keep code very flexible and modular from component to component, and page to page. Three benefits of using B.E.M. are:

  • Reusability of the code
  • Maintain code in small pieces rather than large blocks with excessive declarations and generic naming
  • Style naming. Be as specific as you want. Name the style according to where it is being applied and what it is being used for. Help other developers who inherit your code as well as your future self!

Speaker

Chris DeMarsChris DeMars is an associate software developer for DTE Energy in the Detroit headquarters. He is an instructor and teacher assistant for the Ann Arbor and Detroit chapters of Girl Develop It.

Chris is also very passionate about coming up with solutions for enterprise applications, which include modular CSS architectures, performance, and promoting Web accessibility.

Agenda

6:30 pm to 6:40 pm: Welcome
6:40 pm to 6:55 pm: Introductions
6:55 pm to 7:00 pm: Info about Grand Circus
7:00 pm to 7:40 pm: Presentation and Q & A
7:40 pm to 8:00 pm Networking

Venue and parking

Grand Circus is located in the Broderick Tower near Grand Circus in downtown Detroit. The entrance is on Woodward, through two gold-colored doors.

Once inside, go to the end of the hall, and take the elevator to the third floor. Look for signs when you get off the elevator.

Parking is available at the Detroit Opera House parking garage, located on Broadway. Parking is $10 (unless there’s a special event). There’s also street parking on Woodward and Washington Boulevard.

The Detroit Opera House parking garage is a short walk up Broadway and around the corner from the Grand Circus space. Here’s parking information from the Broderick Tower website (PDF).

Sponsors

Special thanks to our sponsor Grand Circus for offering venue space for our Refresh Detroit meetups!

The trouble with OS X LCD Font Smoothing and webkit

I recently spent sometime working on a responsive header using foundation 4 and was in the process of testing it on other machines around our office. I noticed on a co-workers machine that the fonts looked a lot different than on my machine. I was puzzled as to why this was occurring.

My browser vs. Co-workers

Screen Shot 2013-04-05 at 9.45.40 AM

Screen Shot 2013-04-05 at 9.46.10 AM

We are both using Mountain Lion and Chrome in this example. As you can see the fonts look thicker and bolder on my co-workers machine. I did some investigation and found an option under Mountain Lion’s general system preferences called “Use LCD font smoothing when available”. On my machine this was unchecked. It looks like on newer machines this is checked by default. If you uncheck this option and relaunch your browser (Chrome in this case) you’ll notice the thicker and bolder fonts go away.

Screen Shot 2013-04-05 at 9.56.10 AM

We wanted to find a solution to normalize this on the web because we preferred the way it looked without font smoothing enabled. We found that if you apply this to your websites it fixes the problem. Please note that this only works in webkit browsers. We have not found any other vendor prefixes that accomplish this.

body {
     -webkit-font-smoothing: antialiased;
}

How does software quality happen?

Have you ever wondered why most software you interact with is hard to use or isn’t updated regularly to fix bugs? It’s a fundamental problem of computer science programs, they have failed to teach us how to manage software projects. Learning and using complex algorithms is just one small part of the software development process. The larger, more complicated (and ultimate determinator) of a project’s success is managing the requirements, time, team and process.

The most complex human task

Writing software is one of the most complex human tasks according to Douglas Crockford. Writing software isn’t a linear process, it is so complex we still haven’t learned how to create quality software. Although this is an older talk, it’s the best explanation I’ve heard about why writing software is so complex and what we can do about it.

The software crisis

He explains why the early programmers were so concerned with the software crisis and why it’s still happening today. If you are part of any software development process or even if you just use software on a daily basis this talk can give you some insight about why you may have frustrations around it.

Quality is more than good programming

Source: http://www.yuiblog.com/blog/2007/05/16/video-crockford-quality/

A better “Return to top” experience

Sometimes long pages are unavoidable but adding pagination to certain content makes it more difficult to use. The types of pages I am talking about are FAQ’s, faculty lists, and course listings. It can often span up to twenty times the height of a standard browser.

Pagination sucks

Breaking this content up in to multiple does allow the visitor to see a fair amount of information on a single screen without scrolling. But if they want to explore more they have to take an action that isn’t natural to the Web and “page” through the content like a book. Book pages work great because they are natural, there are a lot of touch points where you can grab and make the transition back and forth easily. Pagination on the Web, though, is not so easy. Typically it involves very small numbers at the bottom of the content, a precise click on the next number, and waiting for a page to load.

“Back to top” is annoying

The solution most websites take is to put all the content on one page and at multiple places down the page add a link labeled “Back to Top”. This typically links to an anchor #top which is defined at the top of the page or content. This seems logical for the Web since scrolling is just a fingertip away, people often use the CMD+F to search page content and there is no reloading and waiting for the page.

But “Back to Top” still doesn’t get it right. The Web is used as a page of content to be consumed and to take a next step, ideally getting the visitor one step closer to their goal. “Back to Top” links introduce two obstacles to that goal. The first is clutter on the page that doesn’t relate to the content. The second is a link that unnaturally moves the user “backward” to where they came from.

The holy grail

We are not claiming to have invented this technique, just adopting it and embracing how more usable our pages are because of it. The technique is to omit the “Back to Top” links all together and force the user to scroll. Then use javascript to detect how far the visitor has scrolled and display a button (in a static location out of the content area) which scrolls the user back to the top of the page. It’s a technique that isn’t visible unless you see it in action. The video below shows how it works:

This solution solves the user experience issues introduced by pagination and the “Back to Top” links. It allows for all the content to be on a single page so the user can search and not have to reload and reorient themselves with each new set of content. It also doesn’t clutter the page with extra links that don’t bring the user closer to their next goal.

How it works

It progressively adds value to the page as the user scrolls down the page. The solution also introduces something else, a visual sign of what the action does. The default construct of a “link” is to move the visitor to another separate page, but in fact the “Back to Top” breaks that construct. The icon used to denote “scroll to top” visualizes exactly what the button will do once clicked, the user doesn’t have to guess or be surprised.

A little something extra

Lastly, a little something to pleasently surprise visitors is when they click to return to the top, the page doesn’t just jump up leaving the user to re-orient themselves with the page once again. It instead scrolls smoothly to the top passing by all the content they just viewed. Now at the top of the page again they just saw the journey they took down the page rewound and are at a familiar place with no need to re-orient themselves.

Some examples of it’s use:

Today@Wayne Chrome app available

We’re always on the hunt to find ways to connect more people to the great things happening on Wayne State’s campus. If you have been following this blog you know these initiatives are often thought of and executed completely by us.

Chrome app

Not everyone has, or wants to have, the Today@Wayne website set as their homepage, and that is completely understandable. But we wanted to make sure it is as easy as possible for people to get to it. What better way than to have a Chrome app that is displayed every time the user opens a new tab or window? This way they can visit the daily newsletter at their leisure without having it load automatically every single time.

If you are a Google Chrome user you know the power of the extensions and apps. Both are lightweight and don’t slow down the browser like Firefox.

Google Chrome has gotten a little bit of flack because a vast majority of their “apps” are simply redirects to websites. In our case we’re currently doing just that. This approach isn’t our long term goal but it will get us started.

Looking forward

Chrome has an amazing ability to render HTML5 and take advantage of every bit of the users processing power. You can see that clearly with the popular Angry Birds app. Over the next few weeks and months we will be expanding the functionality of our app to take advantage of the user’s environment. Extending the website to use local storage and media queries to take full advantage of the users screen size and offline processing.

Download the Chrome app at: http://go.wayne.edu/today-chrome

Preview early, preview often.

This is just a friendly reminder that we offer a “Preview” button in the CMS on purpose. Although we do our best to scrub the HTML in the editor and make it valid and the correct character set a few pages slip through the cracks. But as we discover them we change and make the CMS even better. This mainly happens when copy and pasting from Word, it is a long standing issue on the web.

The page above was actually published by us and it only hit the development server luckily. But it allowed us to detect a problem and fix it before it hit the campus community. It was a reminder to me to preview early and preview often. It will save you in the long run.