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.

Tweaks to the global header and footer

Yesterday we made some changes to the global header. The header looks almost identical, all the changes were under the hood. I have been meaning to make these changes for some time now. Luckily I used this week’s independent study time to get it accomplished. More about that later.

From an on screen perspective the header is now 5px shorter and 960px wide (our new standard) instead of 900. The code was simplified to reduce space and be more descriptive. Last but not least it now works fully in all A-grade browsers and IE all the way back to 5.5. I have also outlined a few other benefits below.

Better Print Support

At some point the print style for the global header just simply disappeared. Not sure what happened but it was just gone. This newest update fixes that. The print header is now black and white with our wordmark and Aim Higher fully readable on top of each page. The top tab doesn’t print and the bottom border is where it is suppose to be.

The only thing that changed in the footer was the removal of the copyright policy link and no longer underlining Wayne State University.

Better Mobile Support

Something completely left out of the old header was support for mobile or “handheld” style rendering. It doesn’t do any mobile detection just yet but any device that does pick up the handheld style will now get a header like the one on the right above.

Using Opera’s small screen rendering you can see a simulation of how it looks on a mobile device. The old header (left) doesn’t accomodate for the small width and forces the user to scroll left/right. The new version (right) linearizes the page, makes the skip links visible and the tab links are now visible by scrolling down.

Fewer HTTP Requests

We reduced the number of HTTP requests that it takes to build the header from 10 to just 5. We did this by creating a sprite of all the images that make up the header. We did have to add two new “real” images though for the wordmark and aim higher to print in black and white. Having fewer HTTP requests will allow the header to load faster on devices with higher latency and makes rendering quite a bit faster. Yahoo has a great explanation about the importance of fewer HTTP requests. As you can see from the graphs above although we increased the file size size overall (just a little) the total rendering time was reduced by almost half.

More technical graphs with the comparison: old header | new header

Using a Sprite

Above is the sprite we used to create the header. A List Apart has a great article explaining sprites. This single image is used to create all the background and styled images that make up the header. It just needs to load and position it in the right spot and the browser does the rest of the work.

Skip to Navigation and Content

Recently testing our site with a screen reader we found our skip links were not functioning correctly. WebAIM had a great article about making the skip links available to people using keyboard navigation so we decided to give it a shot. Above you will see what any of our sites look like if you press the “Tab” key to navigate your way through the page. The “Skip to Navigation” link will come up first, then the “Skip to Content” will show. Basically when the links have :focus they become visible, otherwise they are hidden.

Legacy Code

We tried to support as many legacy situations as possible and fix any issues before hand. But unfortunately we came up with two situations after the fact that we could not account for. The first was users who replicated the main header code but hotlinked to our style sheet. These sites will see an odd shaped header till they update their code. The second is customized headers, some sites used our original code but with overrides in their local css to change the header style. These sites will all be broken till the individual site administrators update their code, there is nothing we can do about custom overrides.

Using the New Header/Footer

If we don’t handle your web site and you want to use the new header/footer you can right away. The code and instrcutions can be found at: http://wcs.wayne.edu/style/

Additional Issues

If you happen to see a site that is looking funky with the new header please take a screen shot and send it to wcs@wayne.edu and we’ll look into it.

Project Insights: Business Scholarship Application

By far the most complicated forms that we create are applications. Most recently we create the School of Business scholarship application. What makes them complicated is the overall structure of the form, they are huge. Typically broken into multiple steps with the ability to save progress along the way. Each step in itself contains pretty basic information but when you combine it with validation and overall flow from page to page things can get rough quick.

Planning the form

Before we start any project like this we take as much time as possible to plan the entire user experience from beginning to end. This is done by getting the physical form that students use to fill out and determining every single field that needs to be submitted.

People interact with web documents completely differently than physical pieces of paper so we don’t even consider the structure of the printed document in the planning stages. We start by grouping the fields in buckets of related information, these will become the steps in the form.

When logic is involved

From there we determine the order of the fields on the page and if there’s going to be sub groups within the page. Once the fields are laid out we then start to talk about logic. We ask, can any fields that can be hidden from the start? The less fields on screen the less intimidated people are to start and complete a form. We try to show them only the things they need and display any additional if necessary.

Keeping track of attached documents

Right when someone fills out their personal information they are essentially creating an “account” for this application. They get an email with a password and link back to the application as a reminder. From here on out their progress is tracked and all documents uploaded go into a temporary directory. The last thing we want to do is to loose user documents so each step verifies the actual documents are still in the temp directory before moving on.

Digital signature

When someone has made it through all the steps and is ready to submit we ask for a digital signature. It’s nothing fancy but it does force them to agree that all the information in the form is true and they acknowledge once they submit they cannot go back and change information. It’s a great way to weed out bogus applications but at the same time it holds up a lot of people from making that final step. The idea that the form cannot be changed after clicking the button leaves many apps in a state of incompleteness.

What we’ve found is people start the application early but end up not submitting it till 11:30 pm the night of the deadline. This seems like a fact of human nature so we have to make sure the system can handle a large number of submissions in a short period of time right before the deadline.

Downloading the applications

After the application deadline passes it’s now time to gather all the submissions and disburse for review. Depending on the needs of the department we do this several ways. Some want the entire list as a whole, others export the names in batches. Regardless things come out the same way, we make a huge excel sheet with every single field as a column. As far as the documents are concerned we create a folder for each, “lastname_#” and place all the files attached to their application in it. From here we zip them all up into one single file. This allows the department to get a checklist that they can scan or import into another system while still being able to see all the files uploaded attached to the last name and ID of the application. We keep the same filenames as they were uploaded on purpose, the less we touch the files the better. If someone calls and they had an issue and rattles off a filename that we don’t have in the system it’s a lot harder to figure out what’s going on.

Archiving each semester

Last but not least each semester the forms change a little. We have to archive the current semesters data in one batch then update the form and relaunch the application based on any new fields. We try to keep the database changes down to a minimum and really just change the front end form so we don’t have to re-engineer the structure of the back end every time. So far this has worked out great and the tweaks have all been based on user feedback and optimizing how students fill out applications.