Hiring: Frontend Developer

An exciting opportunity for the university, the School of Medicine, the Web Department and (maybe) you! As the School of Medicine Web team expands we are in need of a full-time frontend developer.

Some background

Our department sits in the central Marketing office and is responsible for most all public facing websites on campus over the last eleven years. Our sites are built using an in-house content management system, and others, on the LAMP stack while using Foundation for Sites on the frontend. Most all School of Medicine websites are currently also built on these tools with the exception of the homepage, which is WordPress based.

School of Medicine

We care a lot about our tooling, processes and ensuring developer success. We adhere to code guidelines and always looking to standardize common code to allow us to focus on the unique areas that matter. This position is unique as the School of Medicine website is in transition. The website is newly launched in WordPress on Bootstrap with a number of legacy sites built without a frontend framework. The team is being integrated into the central web team and transitioning to standard university tools and frontend framework.

Primary responsibilities

  • Experience collaborating throughout the entire project cycle, from research, strategy, information architecture, visual design, front-end development and maintenance.
  • A solid grasp of modern front-end web development, such as HTML, CSS and JavaScript and their associated build components.
  • Experience using a front-end web framework such as Foundation or Bootstrap.
  • An understanding of back-end web development environments, including HTTP, web servers, load balancers, the interpretation layer, databases and associated web frameworks.
  • Considerable skill in writing web applications that retrieve and update information in relational web centric databases (using WordPress or Laravel).
  • The ability to clearly communicate to project stakeholders and process feedback internally and externally.
  • The ability to troubleshoot website layout and web application performance issues and resolve issues independently or direct issues to the responsible party.
  • Provide direct supervision to internal web site interns and guidance to unit web site content authors.
  • Ability to work with accuracy and attention to detail to meet deadlines.
  • Ability to understand and execute oral and written instructions, policies, and procedures.
  • Considerable project management skills, including ability to provide time estimates and prepare accurate records and reports.
  • Proficiency in the use of web applications programming languages, tools, and/or methodologies for developing integrated web applications typically acquired through formal education or equivalent experience in web application development.
  • Demonstrated ability in analyzing customer requirements and developing basic information systems solutions typically acquired through one to two years of directly related experience in web application development and support.
  • The ability to translate functional requirements into cross-browser WCAG 2.0 compliant websites.
  • Strong understanding of web technologies and related user device capabilities required to access the web.
  • Understanding of test driven development.

How to apply

Apply at jobs.wayne.edu. Posting #042095

YouTube embeds just got a little more clear

A few years ago we added the ability to embed a screenshot from a YouTube video through the CMS editor. This alleviated the need to take a screenshot, edit with software to add the play button, and then finally uploading it to the web server to embed it into a page or an email. With one click, pasting the url of the video a screenshot of the video can automatically be generated and embedded into a page.

But there was a problem

YouTube play buttonThe default YouTube play button at the time was a red rectangle which does call a lot of attention and allows users to immediately identify what will happen when they click the image. It became a problem over time as more of our videos (especially now that we can upload a custom still photo as the default screenshot) became people with a YouTube play button head:


New YouTube play buttonWe are happy to announce the play button graphic has been swapped out with a more transparent version that equally emphasizes the screenshot and the fact that the image will link to a YouTube video.

Now at a glance you can see the details in screenshot while still still understanding the link will bring the you to a YouTube video.

How to use the YouTube screenshot button in the CMS:

YouTube Preview

Global Accessibility Awareness Day, Detroit on Thursday, May 19, 2016


Back for the third year, Global Accessibility Awareness Day Detroit is a day for web professionals to gather together to learn about accessibility and how to make the web more accessible and usable by everyone. Events will be held around the world to raise awareness about web accessibility.

This year’s event is jointly hosted by Refresh Detroit and Metro Detroit WordPress.

Who is this event for?

If you’re working on the web, creating, developing, or designing websites or content for others to use, this event is for you! Or if you want to learn how we can work together to make the web accessible to everyone, we’d love for you to attend.

Learn to listen: Experience the Web from the perspective of a screen reader user

You work hard on your web content, the goal being for that content to reach as wide an audience as possible. To that end, you study all the accessibility-related guidelines and do your best to apply them to your work.

But what does it all really mean? How does someone who uses a screen reader experience your site? How will the next change you’re planning to make impact that experience?

In this hands-on session with Al Puzzuoli, you will learn to use a screen reader as a tool to answer the questions above.

  • First, you’ll learn the basics of controlling your computer and navigating the web, using only a screen reader and your keyboard.
  • Next, you will see examples of accessible sites that play nice with screen readers, and other inaccessible ones, which decidedly do not.
  • Finally, the fun begins, as it will be time to play! You will have the opportunity to go the the website of your choice, and use your newly honed skills to do some basic accessibility testing

Note for all attendees: If you have a Windows or Mac laptop, we encourage you to bring it so you can get hands-on with a screen reader. We’ll be working in small groups.

Windows users are recommended to download and install the free NVDA screen reader on the laptop before the event.

Al Puzzuoli

As the resident Information Technologist at Michigan State University’s Resource Center for Persons with Disabilities, Al Puzzuoli spends his time doing network and server administration, troubleshooting computer concerns, and working with staff and students to test the accessibility of various information systems across campus.

When he is not working (or playing with computers), Al enjoys swimming, playing the trumpet, bowling, and spectator sports.


6:30pm to 7:00pm: Welcome, refreshments, and networking
7:00pm to 7:10pm: Introductions
7:10pm to 8:20pm: Presentation and interactive workshop
8:20pm to 8:30pm: Announcements
8:30pm: Time to leave

Sponsorship Opportunities

By sponsoring our event, you’ll have access to an audience of web and business professionals throughout southeast Michigan and northwest Ohio.

To thank you for your sponsorship, Refresh Detroit offers a number of benefits. Contact Deborah at deborah at lireo dot com for more information.


Excluding slick carousel using webpack, babel and the UglifyJsPlugin

While learning webpack and babel, our team had an issue with trying to run certain NPM packages through babel. Since we only want to pass ES2015 code through it, we need to exclude packages that don’t use it. To do that you can specify certain folders under node_modules to ignore in your webpack.config.js file like this:

What this will do is exclude slick-carousel from going through babel-loader, but it will still be part of the JS build and make it’s way down the pipe to the UglifyJsPlugin. Note: the exclude is not a string so it should not have quotes around it.


Side Note:

It’s possible to pass /node_modules/ and ignore all packages going through babel, but this wasn’t what we needed. Zurb Foundation 6.2 requires passing code through babel, so excluding all of node_modules wasn’t an option for us.

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


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!


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.


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).


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

Redesign: Campus Retail Shops website

Shops desktop viewShops mobile view

We recently launched a redesigned Campus Retail Shops website. This was another in the set of Business Operations websites to get updated. Unlike the others this site is a living repository of retail tenants and shops available to the campus community. This gives the site a few unique challenges:

Content pulled from campus map

Unlike most of our websites, the content for Shops was managed in a separate database so we could provide additional information for each location. This can be hours, parking information, specials, etc. We decided to centralize that information in the university campus map. This required us to add more fields to each map entry, but gave us the benefit of using that extra information anywhere else the location is viewed (mobile/desktop map website, search, etc). It also allows for a single source of data, no more duplication when locations are added, edited or removed.

OneCard fill locations map

Like the retail shops, there are other locations on campus that are not buildings, but instead are inside buildings or parking structures. These are now in the campus map proper instead of a custom Google map.

Show your OneCard and save locations

Lastly, there are locations which may or may not be on Wayne State’s campus. These are shops that offer a discount to our students/faculty/staff for showing their student ID card. This was a tough decision, should we be storing these outside locations, some many miles away, in the campus map data? In the end we decided to store the information with all other locations. The map already had the structure, no additional programming would be required and it would offer a single spot to manage all locations.

Quick page loads with YouTube SPF

If you’ve been browsing through the site while reading this you may notice how quick each page loads. This site employs a method of navigation that we have used on all sites in the past year. The tool is YouTube’s Structured Page Fragments (SPF).

Data available in the API

Building additional things into an already large data set has it’s advantages. The campus map API will now return this additional information for each location.

View the new Campus Retail Shops website.

Please update all Pipeline references on your websites

Pipeline will officially be switching over to Academica on Friday, July 31.

Now is a good time to do a search on your website for anything Pipeline-related.

To do this in the CMS, log in via http://cms.wayne.edu and go to Add/Edit pages.

Searching in the CMS page listType Pipeline in the search box above your page listing and click Search. This will find any pages on your site that reference Pipeline. (See screenshot on right.)

You will have to manually update these areas.

If you were referring to instructions in the old Pipeline and have questions about how the process has changed, you can contact C&IT via email at cit@wayne.edu.

HighEdWeb Michigan Speaker Lineup – April 20-21, 2015 at Wayne State University

We’re excited to announce that our conference will feature two tracks, jam-packed with informative content, that you can take back to your office and use to wow your co-workers.

register-nowApril 20-21, 2015

Wayne State University
McGregor Memorial Conference Center
495 Gilmour Mall
Detroit, MI 48202

Speaker Lineup

Marketing Technical
speaker-bronsonThe Kids Are Alright: Millennials in the workplace
Ron Bronson
speaker-wammes10 Command Line Tips for Every Web Developer
Chris Wammes
speaker-sickafooseThe Evolution of A University’s Website… or How We Got from Here, to Here
Martin Sickafoose & Pat Brown
speaker-laforestJavascript and Jquery: Understanding the Connection
Clinton LaForest
The Web Culture Shift
Alaina Wiens
speaker-hessSecurity: Tales from the Field
Michael Hess
speaker-sattlerIf this, then what? : An explanation of how to use one application (IF) to enable the interaction of other popular applications
Kelly Sattler
speaker-swisherBuilding Your Own Personal Minion With Grunt.js
Brent Swisher
speaker-disanoKeeping track of your content (all the things) in Google Sheets
Jenn Di Sano
speaker-fiddelkeCMS Beyond the Web: How we use our CMS to save time and money to feed our print cycle.
Scott Fiddelke
speaker-brownAll inclusive calendar for fundraising and alumni engagement professionals, aka “The Calendar”
Randy Brown
speaker-brandonCreating an Interactive Scalable Vector Graphic (SVG)
Jenny Brandon
speaker-buschMaking the case for unified branding and marketing in a decentralized world.
Steve Busch
speaker-inglesPage performance and responsible responsive design
Jenny Ingles
speaker-poortvlietKickass Web Management Tools
Dave Poortvliet

Seats are limited, and the Michigan regional event has sold out the past two years. Hotel rooms are also limited so if you haven’t already, be sure to register for the conference and book your room today.

Remember, for the low, low registration fee of $85 you will receive:

  • Access to a full day and a half of dynamic presentations by higher ed web communication professionals, many of whom come from your peer institutions.
  • One much-anticipated keynote presentation by Carl Erickson.
  • Two breakfast networking opportunities.
  • A fantastic Monday evening excursion that you won’t want to miss. A tour of Detroit with a strolling dinner put on by Detroit Experience Factory.


Monday night event: Touring Detroit and Strolling Supper

Detroit Experience FactoryDetroit is transforming. After a jam packed day full of informational talks we are going exploring through Detroit. From the conference we will be shuttled downtown to enjoy a walking tour with strolling dinner put on by Detroit Experience Factory.

Even if you think you know Detroit, you may be surprised. We will set off on a walking tour of downtown Detroit lead by experienced guides to learn the history, current state and future of the city. During the tour we will stop at two restaurants for heavy hors d’oeuvre and half dinner at each. The tour will end at the Volt Bar in the hotel to network with your fellow Highered Michigan Web workers.

Keynote: Carl Erickson

Carl Erickson is the president and co-founder of Atomic Object, a 50-person software product development consultancy with offices in Grand Rapids, Detroit, and Ann Arbor. Atomic Object builds web, mobile, desktop, and device software products for clients ranging from startups to the Fortune 500.

Before founding Atomic in 2001, Carl was a VP of Engineering at a failed dot-com startup (briefly), and a university professor (not so briefly).

Carl also shares his experience on his blog Great Not Big – Experiments in Running a Small, Innovative Company.


Contact the HighEdWeb Michigan committee at hewebmi@gmail.com. Follow @hewebMI on Twitter for updates and information about the event, and join the conversation with the #hewebMI hashtag.

See you in Detroit this April!

HighEdWeb Michigan – Wayne State University – April 20-21, 2015

register-nowRegistration is now open for the 2015 HighEdWeb Regional Conference in Michigan to be held at Wayne State University April 20-21! This is the regional, personal development opportunity you’ve been waiting for.

The cost to attend HighEdWeb Michigan is only $85, which grants you access to:

  • A full day and a half of dynamic presentations by higher ed web professionals, many of whom come from your peer institutions
  • One much-anticipated Keynote presentation
  • Two breakfast networking opportunities
  • An evening exploring downtown Detroit with heavy appetizers and networking
  • Conference swag
  • Swagger (the satisfaction of knowing you’re on the cutting edge)

Space is limited, we have sold out quickly each year.

Register today! HighEdWeb regional conferences are a great venue for attendees to join and benefit from great conversations that help them when they get back to the office. We anticipate a full house this year, and would like you to be a part of this incredible event.

The Michigan Regional Conference of the Higher Education Web Professionals Association is delighted to introduce our keynote speaker, Carl Erickson.

Keynote: Carl Erickson

Keynote: Carl EricksonCarl Erickson is the president and co-founder of Atomic Object, a 50-person software product development consultancy with offices in Grand Rapids, Detroit, and Ann Arbor. Atomic Object builds web, mobile, desktop, and device software products for clients ranging from startups to the Fortune 500.

Before founding Atomic in 2001, Carl was a VP of Engineering at a failed dot-com startup (briefly), and a university professor (not so briefly).

Carl also shares his experience on his blog Great Not Big – Experiments in Running a Small, Innovative Company.

Travel & Lodging

Lodging available from $169/night high atop Detroit on the riverfront. Limited HighEdWeb room rates expire on March 26th. It doesn’t cost up front to reserve your room, ensure you have a place to stay today.

Questions? Contact the HighEdWeb Michigan committee at hewebmi@gmail.com. Follow @hewebMI on Twitter for updates and information about the event, and join the conversation with the #hewebMI hashtag.

See you in Detroit this April!

Next Web workers meeting – March 20, 2015 – Accessibility

RAVPDo you manage a school/college/departmental website that represents the university? This meeting is for you.

Come share your successes, failures, questions and lessons learned with other Web workers from around campus.

This meeting’s agenda includes:

  • Matt Ouellett from the Office of Teaching and Learning will be facilitating a group discussion to create a Web accessibility working document
  • Round table

Everyone is welcome and encouraged to share their experiences.

March 20 at 10:30 a.m. in the Simon’s Room, 144 Purdy Library

RSVP is not required but suggested.