An Ode to Sass: Make Your CSS Better

This was originally written and posted on the Interactive Engagement tech blog for WNET.

I’ve learned a lot since I started working at IEG in August 2014, from building better WordPress themes via MVC to the ins-and-outs of git (how I got by before, I’ll never know). The greatest tool that I’ve embraced in my tenure is Sass. For those unfamiliar, Sass is a CSS preprocessor which takes giant complex stylesheets and neatly organizes them into tiers. There are so many features which will make your development process cleaner, faster, and happier. Read more

Responsive Design ≠ Mobile-Friendly

Responsive web design is a buzz word that we are very familiar with at IEG. All of our modern sites fit that bill (we do have some that are quite old), and you can see it in action with the resize of your browser. The excess design falls away, the menu becomes a hamburger (which, has its own problems), sidebars slink below the content. But just because it fits a certain width parameter, doesn’t mean it works for mobile.

metrofocus-screens

I just finished rebuilding the site for MetroFocus, a multi-platform news program focusing on the New York region. I got to a point where I was happy with the design, with the responsiveness, and we sent the site to our app developer to do some testing. He came back with incredibly insightful feedback when it came to thinking about actually using the site on a mobile device. The header and menu took up too much precious real estate and disappeared from view on scroll. The hamburger was small and surrounded by un-clickable (or, un-touchable) white space.

While the site looked good on a narrow browser, it wasn’t user-friendly for smartphones. I took his notes and spent a long time on my smartphone, clicking through and trying to think beyond “does this look good” and “is it broken” to thinking about the user’s experience on their phone. I can’t be spot on for every device and every situation, but we came to a place that is 100% better across the board. Read more

Build a Better WordPress Theme with the Settings API

This post was originally written and published on the IEG technical blog.

Often when we create our WordPress themes, they come with a small theme options page built using the Settings API. This page could have inputs for everything from social media handles to uploading a new logo or picking a homepage layout. Having these options makes it easier for non-developers to make important changes to their websites, or give it minor refreshment.

Here’s a pretty straightforward example of how we use it on Chasing the Dream. Administrators can update the links for social media icons, enter the unique Google Custom Search Key, pick a homepage grid, and even update the footer text.

themeoptions

Having a theme options page is a good way to set global options, such as a font or accent color. Instead of having to find all of the places within the CSS every time a client wants to try a different shade of blue, instead they can have the power to update it themselves. Read more

Interactive Engagement Group Portfolio and Technical Blog

Back in October of 2014, I had a bit of a dry spell at WNET. There weren’t as many new projects coming in, and I was still green to the way our more complex web properties work. Instead of sitting around and reading the various internet news aggregates, I decided to attack a problem I knew about even before starting my job that August.

The Interactive Engagement Group (IEG) website was a flat, two-page piece of brochure ware. It was built to appease the powers-that-be, but was in no way indicative of the type of amazing work that the department was capable of doing. I wanted to take this project head on and lead the way to a beautiful, responsive, and informative website that would not only show off what we could do, but show off the expertise of our team. To do this, I needed buy-in from my boss, head of the technical team, and from the head of our department.

To Get Buy In, I Came Prepared

Though I talked about why I thought it was important with my boss and with the developer team, I knew I would need a lot more than a “good idea” to get department funding to build the site. I put my professional writing skills to work and wrote a content strategy. Read more

Building a Bingo Plugin for WordPress

Two weeks ago I was presented a new challenge: build a bingo card for Antiques Roadshow that randomly populated with icons on refresh and on-command (by a “refresh” button), make those icons clickable, indicate a win if five in a row are selected, and last but not least, allow the user to share if they do indeed win. The bingo card was released today, just in time for tonight’s episode.

This was the perfect opportunity to build a WordPress plugin. If done right, bingo could be played in multiple posts at the same time, instead of just played for a one-off event.

The plugin itself is fairly straightforward. Content administrators add two shortcodes to the post they hope to Bingo-fy. 24+ randomized images should be uploaded to that post (not including the image for the free space, winner images, a bingo header, or anything else). All additional images used should be uploaded to the media library but not attached to the post.

ars-bingo-card

The first shortcode, [bingo_gallery], adds the images to a hidden div within the post. This will allow the shortcode [bingocard] to refer to said images to populate a table, as well as to a set freespace image, winner image, and header image, all of which are set on the Bingo Settings page. The actual order of these shortcodes within the post doesn’t matter.

At the moment, the plugin is built for three posts with Bingo cards but can be scaled up depending on the user’s knowledge of PHP. I hope in version 2.0 I can more easily add up to ten bingo cards in the back-end so that PHP/jQuery knowledge isn’t necessary for those wishing to add more bingo cards.

You can download the Bingo Card Plugin on GitHub.

Why I Love Passion Projects

This post was originally featured on Grammar. Style. Life.

I’ve done a lot of freelance work in the past few years, but nothing has been more fun and more enjoyable than the work I did for free. I’ve built wedding websites for friends and a site for my roommate’s feature documentary, Sanskriti.

There are a number of reasons I think I enjoy this. Partly, I am giving it as a gift. I love giving gifts more than anything, finding that perfect item for a person I care about, and watching their eyes light up when they receive it. Sometimes, that’s homemade cookies. Once, it was a personal travel journal where I hand wrote best places to visit in the United Kingdom and printed subway maps. But one of the best gifts I can give someone is the time and effort to give a website that is better than any generic template they could find, or a free service provider with ads.
Read more

When I Started Calling Myself a “Woman in Tech”

I was recently asked by a friend of mine, an extraordinarily smart and talented young woman who I met while at a hackathon in Boston, to contribute a story about what it means to be a woman in tech. She gave me no parameters, no length requirement. The only request was that the story focused on a time I was a proud to be a woman in tech.

Let me start by saying for the most part, I’ve been pretty fortunate. I can’t speak to how my childhood influenced my career decisions (I went from dreaming of Harvard Law to becoming an actress to becoming a professor to… well, what I do now). I never thought of myself as someone who would build websites, though I always thought it was cool in concept. I thought I was sneaky when, in my sophomore year, I made my knowledge of CSS seem much more in-depth by using a template website.
Read more

Building a Better (Post) Filtration for JCC Camps

I was first assigned the task of “build a website for JCC Camps” back in July 2013. When this happened, the talk was mostly emulating our existing directory website for JCCs, DiscoverJCC.com. That website was built before my time, using a software from our Preferred Vendor, Accrisoft. My boss would take the lead on the design, and we would create a modern website that tested the limits of our brand standards.

My goal was to create a customized directory profile that was broken up by lots of small pieces of meta data, with a lot of possibilities for searching. My boss created two mockups: the homepage followed the trend of the single page website, with four sections, and the inner profile page highlighting various pieces of information. It was my task to realize this design.

JCC Camps Website

The Building Process

I began building a custom WordPress theme for the JCC Camps website in August 2013. The most arduous task was creating a filtration system that not only worked, but that was actually useful for our intended audience, potential parents of campers. There was no point in having eight different options for searching, if parents only cared about location, type of stay (day or overnight), and specialized activities. Read more

The Great Design Experiment

As you may have noticed, my portfolio got a facelift! It’s been a long time coming. I created the actual design mockups last February, in the midst of a creative brainstorming quest at my neighborhood coffee shop (it helped that the internet was shaky and therefore I kept on task). I created a beta website, and began re-mobilizing the custom portfolio I had built in 2011.

I had several goals in my redesign.

  • Create a responsive design that not only adjusted to different sizes, but looked good in the process.
  • Refresh the homepage from “I’m a recent college graduate” to “I’m a working web professional.”
  • Re-design the custom post type I built for my portfolio pieces, re-imagining the purpose and the display.
  • Make an overall more aesthetically pleasing color palette and design.

I was very happy when I launched my site in September 2011 and had fantastic feedback. However, it was important to me to rejuvenate what was built to make the site work for 2013 standards.

I spent a lot of time researching web design professionals and their portfolios. I dug deep into the pages, looking at the overall concepts as well as the tools they used to build it. In the end, I stuck with WordPress and chose to adapt HTML5 Boilerplate and the 1140px Grid to make my site responsive. I spent a lot of time thinking about how the content would layout, what sort of white space I was interested in using, and how images would be displayed.

It’s been about three weeks since the new site went live. There are still a few kinks here and there, a few images that need to be re-adjusted. But I feel so much better when I share my website. It feels great to say, “Hey. I built this. I made this happen.” And isn’t that what it’s all about?

Hack’n Jill

On Saturday, I participated in my second hackathon: Hack’n Jill. Hack’n Jill was created due to a gender imbalance often present at hackathons, inviting 50 men and 50 women developers and designers to join together and develop apps with the theme of Hack Your Summer.

My team was fortunate enough to have three developers and three designers. We designed Why Don’t We, a fully functioning iPhone app designed to highlight events nearby to cure summer boredom. Every member of the team was essential to creating and promoting a fully functioning product. It was an absolute pleasure to meet them and hopefully we will be able to collaborate in the future. Read more

Once Upon a Splash Page

I’ve been building this portfolio since January 2011, but I’ve been thinking about it for a very long time. As soon as I entered professional writing, I was told of the requirements. We all must graduate with a web site that will say who we are and make us marketable for jobs. I knew I wanted to build something on my own, not to use someone else’s template. I know that this was limiting at first, having little experience with HTML prior to sophomore year of college. Through web authoring courses and my own personal time dedication, I’ve really come to make this my own.

It’s gone through a lot of changes since I initially came up with my design. For a long time, I was interested in a splash page with either clouds or some other form of interesting navigation. I built it several different times, modifying it slightly in order to serve a better purpose. The final splash page included javascript animations, to which I am very proud.

In the end, it wasn’t saying what I needed it to say. As “cool” as I thought it was to have a splash page, there was no sense of my interests or what I do. I had to take it off the main site.

I couldn’t bare to remove it completely, after all of the work I had put into it. Feel free to check it out here in the most recently updated format.

Tags: ,
Posted in Web Development | No Comments »

CSS Fixes

For the past two weeks, my website has had a severe design malfunction. The navigation on the front page was awkwardly off center. I spent days trying to fix it, adjusting the names of the divs and re-styling them in order to try and make it cooperate. I knew it would be something simple that I just couldn’t see to fix. Upon one more look this afternoon, I figured out it was because I was missing a letter. The width was set as “width=1000x” and upon first glace, you may not see anything wrong. It should say: “width=1000px”

That silly mistake caused  a lot of mental strain, if only because of my frustration in not being able to fix it.

Lesson learned: always, always, always double check even the littlest details. A missing semi-colon or letter can completely alter the work that you’ve put into your creation. Now, I won’t feel embarrassed sending my portfolio off to potential employers across the world. Furthermore, I can continue to focus on cultivating my portfolio pieces and worry less about the site design. The stress level may be high, but at least that piece is fixed.

Tags:
Posted in Web Development | No Comments »

jQuery

I decided to re-vamp the entire web design for Tom & Joanne The Wedding website. I experimented with different CMS’s (WordPress and Staceyapp), as well as the idea of a static web page. I wasn’t happy with the work that I had created. You know what they say, if you’re not happy, then fix it. I wanted it to be more dynamic and exciting.

That’s where jQuery came to the rescue. I have had little experience with jQuery in the past, but I made it my goal to learn how to use a couple different features before the end of the summer. I used two different jQuery attatchments: one to move between the navigation, and one to create a slideshow of the wedding party.

So here it is. Presenting Tom & Joanne The Wedding (website). Enjoy!

Tom & Joanne Meet Custom Content Types

We meet again, Custom Content Types. I know you thought we were finished when WRA410 Advanced Web Authoring was completed, but little did you know I would need to use you again. Please try to cooperate and function appropriately.

Today’s Goal: Complete a custom content type that successfully organizing different members of the wedding party for Thomas Czech and Joanne Tanase. Why, you ask? I am in charge of creating the wedding website for this wonderful couple, and the goal is to complete it by May 30th.

Here’s a little background information: I’ve known Joanne since January of 2003. We both enrolled in French, and immediately associated each other (and our newest found friend, Freda Zhuo) as the “smart” kids. There were 10 people in the first semester of our French career, and believe me when I say, no one else actually cared to learn the language. Our trio became a team for every project and group assignment, with the exception of French games in class. We were separated, and told to lead three different teams. Otherwise, we were inseperable.

Eight and a half years later, our trio is now in very different places. Freda attends the University of Pennsylvania for a business degree. I am enrolled in Professional Writing, actively seeking out web design work and social media. Joanne is receiving a degree in Human Biology, also at Michigan State, marrying the man who she’s been inseparable from since 2007. It’s incredible what time does to people. It feels like just yesterday, the three of us were making ridiculous French videos about the weather, with bloopers we intentionally filmed after the fact (causing video projects to be removed as a project option). I am now a member of her bridal party and was asked in March to create a wedding website (coming soon). With school, work, and a million side projects,it became the last thing that I cared about. Now, I realize, it’s time to get going.

I purchased the domain and hosting (a lovely wedding present) and installed WordPress. The bride has made one request: create a database where people can make song requests. Hopefully, what I create will be aesthetically pleasing as well as fully functional. Updates coming as soon as there is something to update about.

 

Lansing Give Camp

This weekend was the third annual Lansing Give Camp, a weekend long event where web developers, designers, and database ninjas donate their time to create programs/software/webpages for non-profits. It officially began at 5PM on Friday and ended at 5PM on Sunday afternoon, where we gathered in the basement of Impression 5 Science Center in Lansing. I met my team: Amelia Marschall from Gravity Works Design, Daniel Hogan of Ginger and the Geek, and Kathleen Kiester to help re-design the Mid-Michigan Environmental Action Council (Mid-MEAC) webpage. The old webpage is still hosted on the domain as of today, but you can also check out our re-design here. I created the favicon, the tri-county Michigan iconography, the Facebook landing page, Twitter background, and did content editing across the site. Overall, we didn’t have as much work as I had expected. I initially brought a bag with clothes to stay the weekend, but we finished relatively early each night.

The experience was incredible. I was surrounded by some of the most talented designers/coders in the Lansing area all working non-stop to create incredible projects. In addition, I learned a lot about the awesome non-profits in the area and the work that they do. For example, 401 Change was an idea not previously backed by any online presence. With every good action you do, others will do good. These good deeds will help change the world. 401 Change was designed to track those good deeds and show the good that people are doing all around the world. It’s amazing the ideas that people have and their desire to change the way we think about our lives. Non-Profit work is some of the most difficult and most rewarding work that one could take part in. I’m glad I got to be a part of it for at least one weekend.

So many companies sponsored our meals, donated prizes, and helped make this possible. Other Give Camps exist across the country, something I find thrilling. I plan on continuing to participate in Give Camps, if not in Lansing, then other places around the United States. Nothing feels better than knowing at the end of the day, you made a difference.

You were the change that the world needed to see.