From Weather To Web Design: 6 Month Front End Design/Development and Working With Brad Frost Anniversary

Februrary 4th marked my 6 month anniversary of working in the web design/development field. I would have waited for the 1 year anniversary, but in the web field you realize that things develop very quickly (no pun intended). February 4th also marked the anniversary of working with Brad Frost, my older brother and one of the faces of today’s web. I am forever grateful to him for giving me a chance to work in this field that I had little experience with before. Here’s the scoop with how I got here, what I have been doing, what I have coming up, and my advice for those of you new to web design/development.

How Did I Get Into Web?

I got my B.S. from Penn State University in meteorology. I graduated and got a job with MDA Information Systems in Gaithersburg, MD as an operational meteorologist, forecasting for stock traders, utility companies, and agriculture companies. I worked there for 4 years and decided my girlfriend at the time was worth marrying. I left my job, moved to Pittsburgh, and got married to my wife all within a 4 day period. I looked for meteorology or any related jobs in the field for 2 years in the Pittsburgh area prior to moving and realized 1) weather jobs in Pittsburgh are few and far between and 2) anything related to meteorology you needed a more specific degree (i.e. environmental engineering). I also went as far as taking civil service tests in case all else failed. Time was running out before the wedding and I needed something.

Enter my brother, in Germany at the time, at 2am on Facebook one night while I worked a night shift at my weather job.

Brad: “Hey. Have you found a job yet?”

Me: “I’m waiting to hear back from a few places. Hoping something comes up”

Brad: “Well you get married in like a month. I might need some help so you could possibly work with me for a bit.”

Me: “Thanks. I’ll keep that in mind in case I don’t find anything.”

The interviews I waited on or had failed in various ways. Being the type of person who would rather get bailed out by family or friends, it was tough accepting my brother’s offer, but it was an opportunity I was willing to try. I had some programming experience in Visual Basic, C++, and Fortran from high school and college and thought about going to college for computer science. But coding in the real world was frightening to think about. I had 3-months to test the waters. Something must have gone right since it is 6 months later and Brad hasn’t kicked me to the curb. The good news: I enjoy web design/development. Do I miss forecasting weather with good people? Yes. Do I miss waking up at 2:30 every weekday morning to get paid so-so in a place I didn’t want to live that was 3 and a half hours from my wife? No. Do I think there is more opportunity in web design/development? Absolutely.

What Have I Done So Far?

What do I do exactly? I basically help create websites by coding the structure, style, and functionality of what the user experiences. My brother wrote a good article about what I help do. How did I start and what have I been working on?

  1. Codecademy. I worked my way through HTML, CSS, and Javascript classes.
  2. Brad’s advice in addition to Codecademy also helped.
  3. Death to Bullshit. Brad’s brainchild of a site that has simple black text, clunky blue links, and a simple design. Turn bullshit on. I helped make that annoying content you see now. We used vanilla Javascript which is good and probably allowed this site to load quicker than most sites despite having more ads. Yes, my first website I had a hand in coding was how not to make a website look.
  4. Frost Finery. My sister-in-law needed her jewelry company’s site redesigned. This was the first project that I developed mostly on my own with some assistance, clean up work, and tips from Brad. This was also the first full-site redesign I ever did. This was my first experience using WordPress in-depth, PHP, Mustache, JSON, JQuery, and Pattern Lab. I learned a lot from this site.
  5. Pattern Lab. I’ve been in an on and off relationship with this website redesign for a little while now. I’d imagine this site will get done before the end of the year. It has allowed me to get more practice in with straight up HTML, CSS, and JQuery. Also, I got experience with writing YAML and markdown. I have also assisted with adding some features that Pattern Lab 2.0 will come out with when the new Pattern Lab tool is released.
  6. First client project that isn’t a family member. Currently working on a site for a company out of Times Square in NYC. Can’t disclose details, but I got to visit their office where it always feels like the afternoon thanks to the bright (and annoying) lights of Times Square. First project with a bigger client. First time working with their designers/developers/project managers in a team. First time working in XML and Freemarker. First time with a legitimate deadline.
  7. Brad’s personal projects. For those of you who know him, he always has something brewing. I have been helping with the design of one of his personal projects. Need to learn more about Node.js to help with more. Brad’s other personal projects include helping him reseed his lawn, redo his brick patio, build hammocks, and shovel dirt. It’s a good break away from the computer screen.

What Do I Have Planned?

I have felt like I have done a lot in 6 months and it looks like there are some potential bigger client projects ahead to help work on. Finishing the new Pattern Lab site redesign is also something that needs finished. I also really need to redesign this site.

My Advice If You Are Newer To Web Design (Like Me)

  1. Use Codecademy or some type of tutorial/class to get started in a language. I suggest starting with HTML, then moving to CSS, and then Javascript. If you are looking to get into Ruby, Python, etc., more power to you (Codecademy also has these tutorials).
  2. Read books. Read Articles. Follow Successful Web People. Reading books is good, but can be a little out of date with web design. Articles are usually more up-to-date and following smart web folks on Twitter can be helpful.
  3. Dive in. Fail. Learn. Fix. Remember. My best advice is to just dive into a project, make mistakes, learn from your mistakes, and fix these mistakes. I have learned that the more projects I do, the more I remember certain best practices. If you want to test something out, Codepen is a great place to design and develop quickly without needing a server set up.
  4. Ask questions. My brother probably hates me for asking so many questions (I hope I am getting better at this), but in all honesty it helps tremendously. From what I have seen, the web community is open about best practices and will gladly help you if you hit a snag.

If you are interested in front end design/development or have any questions feel free to contact me on Twitter. I’ll gladly help you out or point you in the right direction if you need help with something. Thanks for reading!

From Weather to Web Design: A Detailed Look Behind The Redesign of Frost Finery

When I was brought on less than 3 months ago to work for Brad Frost Web, I was expecting a challenge and sure enough I got one. Learning web design and development has not been an easy task, but I have had a great teacher in Brad Frost. I am very grateful for the opportunity to work for my brother and was excited to take on the challenge of redesigning the website for Frost Finery, my sister in-law’s awesome and unique jewelry company. As promised, I will go into a more in-depth analysis of the components that made up the redesign, including:

Pattern Lab and Atomic Design

Pattern Lab was an idea created by Brad Frost, Dave Olsen, and others in the web community consisting of a collection of tools that helps keep the design of the website consistent across the entire site. Pattern Lab goes hand-in-hand with the atomic design concept that Brad is currently writing a book about. Atomic design consists of atoms, molecules, organisms, templates, and pages, where a group of individual atom components makes up a molecule, a group of molecules make up an organism, and so on until we reach the final page phase. Both of these helped quite a bit with designing Frost Finery.

With Frost Finery, we had 2 separate sites, a Pattern Lab site (which consisted of the general layout) and a WordPress site that contains the actual content that appears in the final product on frostfinery.com. Pattern Lab consisted of using HTML elements as well as Mustache, JSON, and CSS. Mustache is a template system that allowed me to use atomic design to include organism level pieces into the template and into the final page while JSON allowed me to include the data that shows up in Pattern Lab. CSS was used to actually style the contents of the site.  Below is an example of how we used Pattern Lab and atomic design in the Collections page, where:

  • atom = navigation button (i.e. Shop)
  • molecule = navigation list (i.e. group of Shop, Collections, Custom Work, etc.)
  • organism = the header navigation
  • template = the page layout (as seen)
  • page = includes the template with the actual content that the user sees.

Screen Shot 2015-10-26 at 12.52.02 PM

Using Pattern Lab and atomic design together makes life easier for the designer to see the layout before replicating this into the WordPress site. Being that WordPress uses php and not mustache/JSON, I had to learn php to create the actual site itself, which sounds easier than it actually was.

WordPress, the Plugins, and All of Their Glory

WordPress is a great tool to use for creating a website for a client who needs a straight forward way to include content on their page. However, learning php took a little bit of time, but once I got the gist of how it worked it was great to use. Along with php, WordPress also allows you to download plugins, which help when it comes to designing the site and giving the client an easy way to locate the right data they need to update. It also allows the client to manipulate how they want to display their information on their site. Some of the plugins we used were:

  • Advanced Custom Fields – Allowed me to create different sections for Frost Finery to organize its Jewelry, Events, and Shops. Allowed me to target different elements in php easily. Screen Shot 2015-10-26 at 1.26.13 PM
  • WP Migrate Pro – Allows me to pull down the latest information from the remote site to the local site. Somewhat similar to Git Tower, but for WordPress
  • Admin Columns – Customize the backend of the site in Admin to display in an organized fashion. Makes it easier for Frost Finery to find its different itemsScreen Shot 2015-10-26 at 1.46.47 PM
  • Simple Custom Post Order– Allows Frost Finery to reorder her items in the Admin of WordPress to display on the front end. Great for her Jewelry section.
  • Contact Form 7 – Allowed me to create a functioning contact form relatively easily displayed on the Contact Page
  • Instagrate to WordPress – Allows Frost Finery to post to Instagram and it will post onto the blog section of Frost Finery as well.
  • Regenerate Thumbnails – A godsend when I changed the images max-size on the page so it would load faster. Instead of having to upload the images again, I could resize them using this tool.

All of these plugins were extremely helpful in creating the Frost Finery site.

JQuery

Another example of a language I had to learn from scratch. Being that Brad and I used vanilla Javascript for Death to Bullshit, JQuery was new to me. Because the first design of the site included jQuery, we decided to continue to use it. I have learned to try and stay away from jQuery being that it takes up a decent chunk of space causing the site to potentially load slower. JQuery was definitely a useful tool to learn and provides the functionality of each page on frostfinery.com. We used jQuery for the click events on jewelry items, displaying the panel when jewelry item is clicked on, scrolling to a certain location on the page, and adding/removing classes/ids/elements from the HTML of certain items.

One of the biggest issues was the amount of lag on the Collections Page due to the size and amount of photos. I added max sizes to the images but also used jQuery to not load in any images on the panel under the thumbnail until clicked. This reduced the size of the page from 8MB to 1.2MB.

Other New Tips and Opportunities

Along with the other firsts discussed, this was my first time dealing with a client (it helped that she is my sister-in-law). I quickly realized that you want to make the client happy but also compromise on certain issues. I can see how this could become a heated battle between designer/developer and client in the corporate world.

This was my first time also dealing with the <picture> HTML element, allowing different pictures to display on different-sized screens depending on the viewport width breakpoint. Writing php was difficult for this, but I eventually managed to get it working. I also learned of the picturefill script so this works on all browsers. Below is an example:

Screen Shot 2015-10-26 at 2.37.10 PM

Large Screen Homepage Image

Screen Shot 2015-10-26 at 2.36.49 PM

Medium Screen Homepage Image

Screen Shot 2015-10-26 at 2.37.25 PM

Small Screen Homepage Image

 

Git Tower was used again with pushing and pulling the latest versions of the site. Git Tower is great when 1 person is working on an issue, but Brad and I had out fair share of struggles when it came to tag-teaming the site on the last day before the launch. Certain stylings were getting deleted and older versions of the site were popping up. Thankfully with Git Tower, the paper trail of changes we made allowed us to fix these issues eventually. Such a love hate relationship.

Let the Good Times Roll

It was such a pleasure working on Frost Finery’s site, especially as my first redesign of an entire site. I learned a lot and had fun while doing it. It helps that I had a good teacher in Brad and someone who let’s me figure stuff out unless I desperately need help. Thanks for letting me share the details of the redesign with you. Go buy some Frost Finery jewelry and take care!

From Weather To Web Design: Frost Finery Site Has Been Launched

After less than 2 months of working on my first big website redesign for my sister-in-law’s jewelry company Frost Finery, it is finally complete.

It has been less than 3 months that I have been designing/developing websites, but I feel like I am chugging along with a heck of a lot left to learn. The redesign of the site allowed me to learn quite a bit, including:

I will have a more in-depth discussion about these bullet points on Monday. Looking forward to discussing this and pushing onto the next project. Have a great weekend!

From Weather to Web Design: The Experience of Creating the Death to Bullshit Site

I have now worked for my brother for about 3 and a half weeks. After learning quite a bit about HTML, CSS, and JavaScript via Codecademy and my brother Brad Frost in about a week and a half, I walked into my first website design (minus Word Press) called deathtobullshit.com. This project definitely interested me since it relates to every single web user out there, taking simple content and adding a bunch of needless advertisements, popups, animations, clickbait, and other shenanigans to ruin the user experience.

The Experience

At first, Death to Bullshit looks like a simple site, explaining what bullshit is and the issues with displaying it on the modern web. The other area of the simple part of the site is the blog, hooked up to Tumblr and displaying many articles, quotes, and other posts discussing advertising and other design principles relating to the amount of rubbish on sites nowadays. Both of these display only the content with links to the various articles on the blog. That’s about it. Then you glance at the Turn bullshit on? link in the top right corner…

…You click on the Turn bullshit on? link…

You are first warned: “Are you sure you want to turn on the bullshit?”

You have the option of clicking OK or Cancel. If you value your sanity, you’d click Cancel. But in this case you want to dive down the rabbit hole, so you click OK

Hold onto your butts…

The site goes from the blandness of a mostly black and white site to a colorful world with style, similar to the Wizard of Oz, if the Munchkins in the Wizard of Oz were obnoxious advertisements and animations.

You are greeted with a banner advertisement at the top…that is also a carousel to make life that much better for the user. But wait...there’s the delayed popup. You better click the Like button or else you will be judged harshly.

Once you get rid of the popup you finally get to see the content…sort of. The Turn on bullshit? link has also become a bright red button that says “Turn this bullshit off” now. The background image is also an advertisement, randomized in case you need to buy a new car or visit Amazon to purchase some unnecessary item. You also get a nice fixed Feedback button fixed to the right side of the browser, in case you have so much time doing nothing that you just want to fill out a feedback form to help us out. The actual content is now styled but remains the same, however in a much smaller container. Scroll down…you won’t be disappointed…

Wait for it…ah, there it is. A nice floating popup fixed to the bottom of the browser slides in, prompting you to like us on one of the fine social networking sites. Keep scrolling down, you can’t get rid of it, but you get to see a nice banner advertisement at the bottom of the content, as well as a very helpful QR code because QR codes are the hippest form of technology.

Keep scrolling…

Not only do you get the nice banner ad at the bottom of the content, you get various clickbait that load in as you scroll down. We made sure these articles were nice and tasteful for the web user. Don’t scroll too far down or else the tastefulness of the clickbait may become a nightmare for some…

When you click over to http://blog.deathtobullshit.com/, you go back to a simple life of simple content before you decide to turn on the bullshit again. You get the same experience as the homepage when you click that oh-so-wonderful Turn on bullshit? button, but you also get more clickbait along the sides. Brad and I used the parallax effect to fly these articles up along the sides while you scroll down, in case you needed to fix your sagging skin right away.

Turn the bullshit off…now. For the sake of humanity do it now!

Thank you. You have returned to a much cleaner version and user-friendly version of the site.

What I Learned:

  • I already knew that ads, popups, carousels, floaters, feedback buttons, banner ads, and clickbait articles were annoying because I am a human. But I did learn how to make these (with a little help from Brad).
  • Creating a website is a lot more difficult than you’d think. To those of you who are web designers and developers, hats off to you.
  • Using other sites like CSS Tricks and Stack Overflow were very helpful for assistance with CSS and JavaScript. The more resources you have for learning, the better.
  • Creating a website without the help of a tool like Word Press was a lot more difficult, but it allowed us to stretch the abilities of the site as well.
  • I learned the basic procedure with creating a site, adding the content first, styling it, adding JavaScript and then going back and forth between these is the general practice.
  • Create your issues through GitHub to help your organization with these different issues.
  • Commit changes through Git-Tower more often than not. It helps organize your paper trail with the site.
  • Do not forget to cross-browser test, because Google Chrome doesn’t represent every browser, especially those with smart phones and tablets. Responsive sites are important.
  • The best way of learning is by diving into it yourself and having some help along the way. The more practice I get, the better.
  • Creating this site had its difficulty but it was fun. I now know how not to make a site essentially.

 

 

From Weather to Web Design: 1st Week at Brad Frost Web LLC

After working as an operational meteorologist for just over 4 years at MDA Information Systems LLC in Germantown, MD, I moved to Pittsburgh and got married to my wife who I had been long distant with for 8 years. Sadly, I had to leave my former workplace and the meteorology field to move to Pittsburgh, an area that has few options when it comes to companies that hire meteorologists. Fortunately, my brother has made a name for himself in the web development community and was able to give me a job for the time being.

I have worked for Brad Frost Web LLC for a week now and it has been a breath of fresh air not waking up at 2:30 in the morning. Some of my tasks have included:

  • Learning HTML and CSS via Codecademy with commentary/lessons from Brad Frost as well
  • Using Github, Git Tower, and dploy.io to push changes/additions to local web pages live in an organized and efficient manner that leaves a paper trail
  • Learning about Flexbox, Adobe Kuler, markdown, and other various tools.
  • Making changes to the Wexford Chiropractic site so the content is clearer and the design is cleaner
  • Assisting with leveling out/rebuilding the patio in the backyard and building a hammock
  • Recording a song everyday (post-work activity)

As with anything new that you learn, there are some obstacles to overcome. Some of these are:

  • Margins, padding, and borders definitely have me confused when it comes to positioning certain <div>s or text.
  • There seems to be a wide variety of tools scattered throughout the web, many of which I don’t how to use yet.
  • I start learning Javascript via Codecademy today. I’m sure there will be some obstacles with learning how to code a bit.
  • Working with your brother who has been in the web game for a while now is difficult when he pulls out language that you don’t understand.

Despite the weather community being quite a bit different than the web community, there are some similarities:

  • HTML and CSS are similar to programming languages (C++, Perl, MATLAB, etc.) that I learned at Penn State but a bit more logical (which I like).
  • Communication and language is key when it comes to your audience
  • Your product should get the message out clearly and efficiently while looking good as well.
  • The design of the weather website could help the user get his/her weather information or inhibit the process of getting the weather information

There is so much I have to learn about web design and development community, but thankfully because of my brother I have stepped off to a good start. The web is an ever-changing source of information that is vital to everyone’s lives, similar to a weather forecast. I will continue to do weather forecasts every morning (between 8 and 9AM usually), because I will always be a meteorologist. I am also grateful to have a job in something that is very important and something that I actually enjoy doing. I will try to post after every week so I can share my information with you, gain the web community’s insight, and show how well (or poorly) Brad can teach. Take care folks!