Hard Work Is…

Hard work.

What is it?

Who does it?

Where is it?

Hard work is the nurse who cares for patients and cleans up their bodily fluids during a 12 hour shift while studying to be a nurse practitioner during every moment outside of work.

Hard work is risking your content life in your current location to move and work tirelessly to start your own businesses and improve your quality of life.

Hard work is growing up putting cardboard in your shoes during the Great Depression, becoming a doctor, and raising 7 kids.

Hard work is a refugee leaving the violence of his home country after losing family members to work a convenient store job just so his kids can grow up in a country that provides opportunity.

Hard work is a coal miner crawling through the mines overnight, risking his health to provide for his family.

Hard work is someone who loses the ability to walk in an accident and raises funds to build a center to help those in similar situations.

Hard work is putting your kids’ needs before your own, even if it means not showering for several days.

Hard work is a meteorologist working an entire day during a tornado outbreak to help save residents’ lives despite making slightly more than minimum wage.

Hard work is a deployed member of the military not only fighting for the freedom and safety of America, but for the stability and safety of other countries.

Hard work is a minority fighting for basic human rights despite the immense hatred that comes from people in their community.

Hard work is a teacher who spends her own time and money on supplies so her students’ have one less worry when it comes to learning.

Hard work is a single mother working 3 jobs just so she can afford to put a roof over her family’s head and some food on the table.

Hard work is an artist who spends months working on a piece for a hospital so that it creates some sort of joy and hope for the patients’ there.

Hard work is growing up in Section 8 housing and finding a way to graduate from college to make a better life for yourself.

Hard work is working 21 straight hours to finish a project on time.

Hard work is helping others in need even if you need a little help in yours.

Hard work is taking a stand for what is right when right isn’t in the majority of opinion.

Hard work is accepting that people may look, act, or believe in something different than you and having the empathy to work together to make humanity better.

Hard work is not about gloating.

Hard work is not easy.

Hard work comes from learning from failure.

Hard work is taking risks.

Hard work is having aspirations.

Hard work starts with you.

Hard work can change lives.

Learning the Web Using Atomic Design

As many of you web designers and developers know, my brother Brad Frost’s book Atomic Design has recently been released into the wild. As many of you may also know, I work with him. What many of you don’t know is the way I learned web design was through Atomic Design. After packaging up tons of Atomic Design books over the past month and a half, I have realized how important it is to developers and designers.

The way you learn HTML, CSS, and JavaScript is not by jumping into processes like atomic design, but learning the actual languages first, which is what I did. After learning the languages via codacademy and Brad’s tips here and there, I only worked on one small project without atomic design before learning the process of it. I put it to use in the website for my sister-in-law’s jewelry company Frost Finery. Since then, I feel like most of my projects (both websites and design systems) have dealt with some sort of breakdown of components into the categories of atoms, molecules, organisms, templates, and pages. I have definitely grasped the benefits of what it has meant for me early on in my web designer/developer career.

Benefits of Learning Through Atomic Design

Although it is perfectly acceptable to learn web design in many different ways, I feel atomic design has a lot of benefit. The way I learned was through Pattern Lab, an easy-to-use prototyping tool that you can clone from GitHub. I use the mustache version because that was one of the only versions before the new version of Pattern Lab and I feel like it’s the easiest to understand for a beginner. You can also use the Node.js versions (using Grunt or Gulp). Pattern Lab helps paves the way for easier web development.

Without further adieu, here are the benefits of learning atomic design early in your career:

  • It organizes your components from small to large, making it easier to understand the structure of your site’s contents
    1. Here are some examples of each:
      • Atoms = Button
      • Molecules = Search input containing that button
      • Organisms = Header containing that search form
      • Templates = Homepage with that header at the top (“wireframey”)
      • Pages = Homepage with that header at the top but with the data and actual images included on the site
    2. I spent my early days of atomic designing (weird to say that) components caring too much about whether a certain form is a molecule or organism. Answer is, it doesn’t matter as long as your team agrees that the component’s location makes sense. No need for 500 stand-ups to decide where each component goes.
    3. Within atoms, molecules, etc., we also add additional folders in our recent projects (forms, blocks, messaging, etc.) to compartmentalize components by type. This also helps with trying to find the correct pattern in your directory.
      Screen Shot 2017-02-03 at 7.41.34 PM
  • Adds consistency across your site by reusing components.
    1. Atomic design is based on reusability. Say you build a button in your atoms folder. You can place that same button on another page or within a header and still have the same class name. This will keep a consistent theme across your entire site.
    2.  You can add a modifier class like .button--blue to .button (using BEM CSS syntax) to give the button a different background color instead of specifying where exactly the button is located in your HTML.
    3. If you are building a design system for a giant corporation like we just did, you can add theming into your CSS a lot easier by targeting less patterns since most of your base styling takes place within one class instead of multiple classes.
    4. The brand of your company’s site or client’s site can be represented across the board by keeping with consistency.
  • With reusability comes thinking about reusability
    1. Atomic design allows the designer/developer to think about each pattern and how it will get used within other components or pages in the site
    2. You can easily code a button on each page with different class names. However, if you think about how you are using the buttons you can consolidate these buttons into 1 class name and a handful of modifiers. Less CSS = better performance.
    3. You can learn more about the structure of the code with each pattern, rather than building it and then setting it and forgetting it (in the wise words of world- renowned Ron Popeil).
  • With thinking about reusability comes thinking about CSS structure
    1. CSS is another area that can turn into a rats nest if you bury a lot of class names within one another via Sass. I don’t suggest breaking each Sass partial into atoms, molecules, organisms, templates, and pages (although you could do that I guess). You should break down each Sass partial by component name (the same goes for JS before concatenation). That way it is easier to navigate to where you need to change CSS.
    2. Being that your HTML is based on component, you can do that with your CSS with classes. Start off with your base .button component. Then you can say, “Hey! I like headers and I like the color blue. Let’s put a blue button within the header.” You open up button.scss and you can either:
      • Make a modifier class called .button--blue if you use the button in more than just the header for example.Screen Shot 2017-02-07 at 10.27.16 AM
      • Or you can add a parent selector to the base button element. Using a parent selector like this allows you to focus on the button itself, rather than going to the header.scss Sass partial and sifting through all of the nested items before finding your button. It’s organized a a lot better since nesting child elements can get out of hand So the code would look like this:
        Screen Shot 2017-02-07 at 10.26.38 AM
    3. And remember, commenting is a wonderful thing. It’s an annoying task to do, but it is totally worth it when it comes to comprehension. We just finished a big company’s design system, and I will tell you that commenting on our CSS allowed two of our colleagues to write documentation on components that were mostly built by Brad and me.
  •  Atomic design stretches its hand out to visual designers
    1. If there’s one thing that helps a lot with a project is a visual designer who knows how to code. Atomic design (and specifically Pattern Lab) allows a designer who wants to code the ability to learn it without the intimidation of a large mass of code. I know a couple folks who are visual designers at heart but know how to code and have used Pattern Lab to help out with projects.
    2. If you know how to code as a designer, you can just go straight into Pattern Lab and prototype what you would’ve comped out in Sketch or in a PSD. It decreases the amount of time it takes to go from image to code.
  • Pattern Lab is designing in code. Once prepped, it’s ready to bake.
    1. Once you have your templates and pages built with all of your components in Pattern Lab, you can import the code into your WordPress project or Drupal project and tweak the PL code to fit whatever language you are using for your CMS.

Atomic design is a great method to pick up (I swear Brad did not tell me to say that). It’s easy to learn it whether you are 10 years into creating the web or 2 years into it. The web is becoming a more and more modular place to work in and less so about big “pages.” We literally went to a JavaScript workshop the other day that taught similar aspects of using a modular workflow to organize JavaScript. There’s a reason I packed and shipped a bunch of Atomic Design books across the world. Atomic design is a great thing and will only get better with the help of all designers and developers out there!

Just Wanted to Say Thanks

Mr. Feeny

There’s not a day that goes by where I don’t think of how grateful I am for things in my life. I know it can be tough to appreciate things when life isn’t going the way you want, but it definitely helps to take a step back and reflect. I recently tweeted my 5 ways to living a happier life:

  1. Be grateful
  2. Challenge yourself
  3. Laugh
  4. Stop comparing yourself to others
  5. Respect/help others

With Thanksgiving coming up, it is a time to look back on your past year or your entire life to appreciate the small and large things in your life. There’s always something. Here are things I am grateful for over the last year:

Life. I am grateful to be able to breathe and enjoy life.

My wife. Honestly she is one of the hardest working people I know and she goes the extra mile to make sure I am happy in life. She pushes me to be a better person and supports most of my decisions. After being apart for 8 years, I appreciate everyday I come home to her.

Family. I am thankful to be living closer to my family now so I can be a part of my nieces lives as they grow up and have my family’s support or support them if needed. Whether a family member is still here on Earth or have gone, every member of my immediate and extended family has had a genuine impact on my life.

My brother, Brad Frost. Without him I probably would be working some shitty job that I didn’t enjoy. Thankful to be able to work with him and enjoy it, whether it is building websites, design systems, or workbenches.

Friends. You guys inspire me everyday, whether you are getting your PhD or successfully trudge your way through a rough patch in your life. Keep the positive attitude and always do the right thing.

Travel. I am grateful to have visited some amazing places over the past year. I took a road trip with my wife from LA to Seattle in 8 days, visiting a bunch of breathtaking national parks along the way. I got to go to the Outer Banks with my family. Seeing the world makes you a better person.

Work that I enjoy. I moved to Pittsburgh 3 days before my wedding 2 summers ago, scared shitless that I wouldn’t find a good job. It has been quite the transition from meteorology to web design, but I have enjoyed every minute of it. It’s pretty awesome to say you’ve built a website with a client in the center of Times Square and that you’ve helped build a design system for one of the largest companies in the world after such a short time in the field.

Basic needs. I have an apartment, food, clothes, and a mode of transportation. Some people aren’t so lucky. After getting back from San Francisco recently, it was sad seeing how many people don’t have these basic things.

Education. You never stop learning. I am thankful to have gone to college for a subject I loved. I am thankful for the books I have read that have helped me transition from meteorology to web design.

Failure. Weird to be thankful for it, but failing in life has allowed me to become a harder working individual.

Open mind. I am happy that I am laid back and respect someone for who they are as long as they respect me. With the recent escalation of hate, I am happy to be raised in a manner where race, gender, sexual orientation, religion, and disability do not make a person any less important.

Ability to listen well. I suck at talking. I mumble and take a while to spit out a story. But I am a good listener. If you try to teach me something, I will likely listen hard. If you have an opinion different than mine I’ll listen. If you are struggling with something, I’ll listen and try to help.

To these web people who have taught me a lot about web and life this year:

  • Dan Mall – Friend, coworker, and smart dude. Honestly privileged to have worked with you and hope to continue to work with you. Thanks for putting up with me.
  • Josh Clark – Friend, coworker, and smart dude. Privileged to have worked with you and hope to continue to work with you. Thanks for putting up with me.
  • Matt D. Smith – Friend, coworker, another smart dude. Privileged to have worked with you and hope to work with you again. Thanks for working with me.
  • Dave Olsen – Friend and collaborator on Pattern Lab 2 (PL PHP guy). One of the nicest guys who seems to enjoy hiking as much as I do. Thanks for being a good and helpful dude.
  • Brian Muenzenmeyer – Friend and collaborator on Pattern Lab 2 (PL Node.js guy). Super nice and bright guy. Just don’t ask him where he’s from. Thanks for your help and being a cool guy.
  • To all authors of books/articles I have read about the web, thank you for sharing your knowledge.
  • To all speakers at conferences I have gone to, thank you for your web and life lessons. I learned a lot from you. I have written about those speakers here at Web Design Day and An Event Apart San Francisco.

An Event Apart San Francisco 2016: Lessons Learned

After Web Design Day in Pittsburgh, I wrote about my personal takeaways from the web conference. So I am going to do the same thing with An Event Apart San Francisco.

This is my second time to San Francisco and, I must say, it feels weird. My first time here was for a research meteorology internship with Naval Research Laboratory, when I rode a research vessel out of San Francisco Bay into the Pacific Ocean. This time I come back as a front end web designer/developer. After seeing the sights on Sunday, it was time to sit back and absorb as much information as possible from the speakers.

My general takeaways were similar to the those I had at Web Design Day (maybe since a few talks were similar), but with additional ones. Here they are:

  • Empathy and respect towards a user keeps coming up as a very important topic. We should treat the experience we are creating on the web as an experience that leaves both the developer and user satisfied. After all, we are designing and developing for humans and humans have emotions.
  • Accessibility remains a relevant topic within designing and developing a website. Even though a designer or developer might not have a disability, designing and developing for someone with a permanent or temporary disability is vital for them to have a good user experience.
  • Diversity in who creates the web is very important. Everyone has a different story and a different perspective on issues just like every user.
  • The user’s opinion can matter more than the opinion of the company/client. After all, the user can represent the audience better than the CEO, developer, designer, etc.
  • Technology continues to evolve and allows for more opportunity in the years to come. Embrace this and create with these in mind.

These are only some of the lessons learned, but by using these in your web work, you can improve your own practices and your website’s user experience.

Here’s a more in depth look at each each speaker’s talk:

Jeffrey Zeldman

Jeffrey started off the conference by explaining how the web used to be and comparing it how the web works now. He specifically went into the book he wrote back in 2003, Designing with Web Standards (3rd Edition), and compared it to how the topics brought up in that book stand up to the standards of today’s web. For the most part, the standards discussed 13 years ago are similar to today’s standards, with only a few tweaks here and there. This just goes to show you that although the web is ever changing, concepts we come up with now can continue to be relevant in the future.

Sarah Parmenter

Sarah went into depth about branding, a process many people link to only the logo. There is a lot more that goes into branding, including the voice and tone, guidelines, consistency, and others. It’s the way the company represents itself as a whole instead of just slapping on a logo that has nothing to do with the message of the company. She used examples like Airbnb to show how they rebranded once they became more than just a “couch surfing” organization. There were a lot of points that you don’t think of when you look at the branding of a company.

Krystal Higgins

Krystal discussed the importance of creating a separate experience for new users, but one that works with the consistency of the brand. One of the most important things she mentioned was to cater the experience in way that efficiently explains or shows the user what to do. Getting first-time users to subscribe/register for your product is important, but retaining them down the road is just as important. She also went into detail about how to create these onboarding processes, mentioning ways like guided interaction, free samples, and personal focus. Guided interaction helps the user follow along with the new process, free samples feel like this new product will be worth it, and personal focus feels like this product matters to you personally. A lot of these are things I never thought about more than just slapping a few alerts on a new user page.

Jen Simmons

I had the opportunity to listen to her at Web Design Day in Pittsburgh and many of the concepts were the same. Jen describes how web designers and developers have fallen into web layouts that are quite boxy and very similar to each other. She went into the design of books, magazines, and objects we see in everyday life and mentioned that there is a lack of this creative design in web work. Jen then went into layouts and how the way we layout websites over the years has changed and that it is about to change even more with CSS Grid Layout. Grid will allow flexibility with design (moreso than flexbox) that can take us back to the creative designs we have seen in old magazines and patterns we see everyday. Grid is on track to come out sometime next year and in my opinion, is a very exciting new adventure since CSS layouts have always been a little fuzzy to me.

Jen also presented a workshop in CSS Grid Layout, which was very helpful in the specifics that we will need to know when Grid officially arrives. A lot of the layouts reminded me of Microsoft WordArt (in a good way), formatting titles in a way that can be positioned vertically and to the left of the rest of the content with no problems. She also went into the history of language and the layouts used to portray these languages.

Rachel Andrew

Rachel went into CSS Grid Layout a bit more in depth, showing more technical aspects of it and taking layouts from everyday items and creating them using Grid in experimental browsers. She also went into ways we can use Grid in a way that has fallbacks that will look solid still when Grid isn’t supported in an older browser. Very insightful as to what to expect when working with Grid in the future.

Brad Frost

The first time seeing my brother speak in person was a good one as expected. After a long day of absorbing information from brilliant minds, he presented in a way that was both educational but funny to keep the audience’s attention. Brad went into the depths of Atomic Design, a process in which smaller components make up larger components that make up even larger components. For the short time I have been in this field, this is the way I learned and have approached many of the projects I have done. This talk solidified the reasoning as to why I have built websites using the principle of Atomic Design.

Jeremy Keith

Jeremy’s talk dove into evaluating technology, going through a history of technology and how the best technology isn’t solely created from nothing. It evolves. Technology is built on prior technology and so on and so forth. That is how technology improves. He showed us how certain technologies can be cool but not necessary and included a picture from the 1990s of a selfie stick with a camera well before the explosion of the smart phone and well before the selfie stick became popular over a decade or two later. One of my favorite quotes from his talk was one from Grace Hopper stating, “Humans are allergic to change.” I feel like it not only represents how humans struggle with change in technology, but with life as well. Jeremy went into detail about service workers and web components and how these are great tools. He also discussed the importance of “how well do tools fail,” since this is important in web development when browsers don’t support certain tools. All in all, I learned a lot both in web development and life from this talk.

Val Head

I have listened to Val talk about animation before at a local meetup since she is based here in Pittsburgh and she definitely knows her animation. Val went into the proper way to use animation in web design and development and how to persuade your company to use animation. She also discussed the tools she uses to design animation as well as the pros and cons of these tools. Val also emphasized the importance of storyboards and sketches and how these can be portrayed to the company rather than just describing the animation and having an opinion on it. She made me realize that showing something to a client speaks volumes compared to just saying what you want to do.

Jason Grigsby

Jason’s talk was about how responsive web design has helped to change the way we interact with content. The content changes in response to the viewport size, but when it comes to a click, tap, swipe, etc., the web has a harder time differentiating these. Jason went into the future of the web and how we may adapt to these different input changes in the best way possible. With the addition of virtual reality and other impressive technological advances, the web will have to continue to change and folks will need to get out of their comfort zone to adapt. A very insightful talk that made me think about the future and how things are ever-changing.

Derek Featherstone

Derek discussed the importance of accessibility. He included the audience by having them read a form with only the use of a straw sized hole in their hand. I, personally, find that it is difficult enough dealing with form fields let alone doing it with low vision. This was a perfect example of how to design for folks who are dealing with everyday or temporary handicaps. Derek also described how design can even look better when you have accessibility already in mind. It doesn’t even take a diagnosed handicap to get frustrated with the web as I’m sure we all know. Designing for ease of use for everyone is very important and decreases this frustration. After creating a design system recently with accessibility in mind, this talk definitely was relevant to me and a solid one.

Eric Meyer

I had heard much of Eric’s talk here in Pittsburgh when he came for Web Design Day, but there were some new topics discussed. Eric went into depth about how designers and developers need to stress test ideas and sites. Although we may have a picture of who the user is in our heads, we will likely have some in an audience that don’t fit this persona. Eric gave several personal examples of this and explained how it can deter people from returning to your site or using your application. Empathy is a huge part of web design and development and by thinking about the user we can design and develop our sites and applications better. By speaking the user’s language and catering to their mood, we can create better experiences.

Gerry McGovern

Gerry’s talk was the funniest of the talks as I was almost in tears during it. It was like a stand-up comedy routine, but with very important lessons included as well. Gerry went into detail about how companies’/clients’ hierarchies of tasks are most times different than the users’ hierarchies, and usually the user is who you want to pay attention to. He showed surveys that he helped with where companies had one idea but the users had another. When the company changed its mindset, the user not only had a better experience but the company itself did better. My favorite quote was “if you solve the customer’s problems, they’ll solve your problems.” After all, it is the customer who uses what you create and if they’re frustrated or delighted, that’ll reflect on the company. A brilliant talk and a great way to end the main part of the conference.

Thank you to all the speakers for all of your hard work and sharing it with us!

1 Year Anniversary Working For Brad Frost Web

Exactly 1 year ago today, I started working for my brother, Brad Frost. It could’ve gone two ways:

1) I fall into place in the wonderful world of web design and development.

2) I crash and burn trying to figure out how to build websites.

Thankfully, I fell somewhere in between. I get the general gist of HTML, CSS, and JavaScript and try to do good work, but I can sometimes crash and burn along the way to get there.

You would think transitioning from my childhood passion and eventual career of meteorology to the land of web design and development would be difficult, but it has been easier than expected. Not easy, just easier than expected. Thankfully, I get to sit beside an intelligent individual most days who is willing to help me out when I can’t find an answer online (Stack Overflow, Codepen and CSS Tricks, I thank you). I get to read articles and books by other witty web folks who are also willing to lend a helping hand. All in all, I thoroughly enjoy front end design.

What is it like to work for my brother?

It has been great. Not to say that there hasn’t been the occasional butting of heads, but it comes with the territory. I don’t have to go into work at 3am anymore and I work from home when he is out of town. We can work outside if we want and the Deli on Butler Street keeps us energized with sandwiches and Turner’s Iced Tea. I also realize how busy him and his wife, Melissa, are. Not sure how they get everything done. I’m not sure they know how they get it all done.

What projects have I worked on this past year and what am I currently doing?

1) Learned web design/development

Used codecademy, books, and tips from Brad and others to learn web design and development. My experiences with the projects I have had the opportunity to work on also really helped. I feel like getting thrown into the fire is the best way I have learned web design and development. I continue to learn everyday.

2) Death to Bullshit

deathtobullshit.com was my first actual project that I helped work on with Brad that involved CSS, HTML, and JS. It’s a website that essentially addresses what not to do when it comes to popups, advertising, and all of the other bullshit that takes the user away from the content he or she is actually there for. The site intentionally loads as a vanilla black and white page, but there is a lovely “Turn bullshit on” button that first pops up an alert making sure you want to turn it on. If you dare turn it on, the fun begins as popups and absurd bullshit populates your screen. I learned what to do when building websites by creating what not to do on websites.Screen Shot 2016-08-03 at 11.54.10 PM

3) Frost Finery

My first client just so happened to be my sister-in-law, Melissa. She had started a jewelry business and needed a good looking site to market her jewelry. Brad set up the bones of the project and allowed me to do most of the lifting when it came to the rest of the development. This was my introduction to Pattern Lab (PL), which I didn’t completely understand at the time but eventually got the hang of it.  It was also my introduction to Mustache, JSON, PHP, WordPress, and Grunt. I used PL to set up the structure of the site and PHP to actually build the live site that sits there today. I learned a lot about lazy loading images as well as flexbox and grids. I also learned that SVGs can be tons of fun to work with…Screen Shot 2016-08-03 at 11.55.24 PM

4) Styleguides.io

I didn’t create the site styleguides.io, but I am the one continuously adding articles, tools, podcasts, and examples relating to style guides. Brad sends me the link and I write the YAML and Markdown to include it on the site. If you are building a pattern library or style guide for your own or client’s site, this is definitely a good place to start to see examples.

5) Pattern Lab 2

Started working on redesigning the website (1st image) that the new Pattern Lab would be available on in the fall which ended up getting redesigned another time or two until we felt it was right when we launched it last month. This was my introduction to Jekyll and how it differed compared to WordPress sites. This was also my introduction to Dave Olsen and Brian Muenzenmeyer, two very intelligent web developers and brains behind the functionality of PHP and Node versions of PL2. Along with the website redesign, I also built most of the demo (second image below) of PL2 as well as a few of the starter kits that will come out at a later date I believe.Pattern Lab Website

Screen Shot 2016-08-03 at 11.57.07 PM

6) Verywell

Verywell.com started in the winter and carried into the spring. It was my first time working with a client outside of my family. Verywell is a health site by about.com based out of New York City. I had the opportunity to work with their designers and developers both remotely and in Times Square to build the site. I also had the opportunity to work with Dan Mall and Josh Clark, two cool cats who are also super friendly (pun intended for Dan’s company) and super smart with the web. I learned a lot about XML and Java as well as search engine optimization and what it takes to launch a larger site. I am thankful for the opportunity to work on Verywell.
Screen Shot 2016-08-04 at 12.02.16 AM

7) Atomic Design 

A little design work and tweaks for mainly the edits branch of Brad’s book Atomic DesignThe yellow highlight was my doing. Nothing big, but thought it should be mentioned.

Screen Shot 2016-08-04 at 10.35.10 AM

8) Hometown Business

I am currently finishing up the new website for a business back near my hometown of Oil City, PA. This is my first project building everything on my own. I am learning a lot about domain names, web hosting, and the amount of work it takes to build a site by yourself. I have also learned more recently how I should’ve used BEM CSS structure instead of SMACSS.

9) Large Company Design System

I am also currently helping to build a design system for a huge corporation. Can’t say much, but I can tell you I’ve learned a lot about thinking carefully about flexibility of components and front-end markup and CSS structure. In these early days of the project I have learned so much and am looking forward to learning more.

10) Web Design Day

I got to attend my first web design conference this year and it just so happened to be in Pittsburgh. Was a pleasure learning so much from web experts and meeting new people. Here’s what I learned.

11) Yard work, cleaning, errands, etc.

When working for your brother, you tend to get sucked into doing some grunt work. While working for Brad Frost Web, I have helped close in basement stairs, built 2 tables out of an electrical spool, rebuilt a brick patio, rebuilt a raised garden bed, planted grass seed with the help of Scott’s PatchMaster, built barriers so groundhogs couldn’t get into Brad’s yard, and other things. I also help watch Ziggy, the bulldog who gets treated like a king. The little free time we do have, we are constructive with it. I enjoy taking a break from the computer screen to get some fresh air and help out.

12) Jamming

If there is one thing a work day should end with, it is music. Yes, Brad and I played in a band together when I was 13 and we get the opportunity to after many work days. It is a good stress reliever and just a good time.

What I plan on doing this next year: 

1) Finish my current projects

2) Read more web design books and articles, because I didn’t read enough this past year

3) Redesign my website, because I know it is hard to read this without wanting to redesign this site

4) Other projects that eventually pop up on the radar.

5) Ask less questions and continue to work hard

6) Figure out what makes me most passionate about web design and development. Figure out where my place is within this field.

Thanks to all who helped make my first year making web stuff a fantastic one!

Pattern Lab 2: The Next Generation

Spread the word! Pattern Lab 2 has finally been released after 2 and a half years of progress. While working for Brad Frost I have had the privilege of working on parts of this project for a little less than a year, including building out a few of the starterkits, assisting with the patternlab.io website redesign, and the PL2 demo. I’d first like thank Brad, Dave Olsen (the PHP PL man), and Brian Muenzenmeyer (the Node PL man) for allowing me to work with them on this. Without further adieu, here is what is so hip about Pattern Lab.

What is Pattern Lab?

Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles. It was originally created by Brad and Dave for PHP, but has since been transformed into Node thanks to Brian. From personal experience, it is a tool that really makes you think about what you are putting into your website instead of adding a random component or pattern here and there and really losing consistency throughout a site. Reusability is one of the great things with this system.

View All section of Pattern Lab

Screen Shot 2016-07-13 at 11.33.06 AM

Dashboard Page built with compnents from above in Pattern Lab

Screen Shot 2016-07-13 at 11.34.26 AM

What is new with Pattern Lab 2?

Lots of stuff, really. I’d say one of my favorite parts to Pattern Lab 2 is the ability to add documentation, something which has really increased in importance over the past couple years. You simply add a markdown file with the same name as the component and feel free to write whatever you want about the pattern, but I suggest the description of the pattern, explaining why you use it, and why it is important to the site/pattern library you’re creating or the client.

Screen Shot 2016-07-13 at 11.22.18 AM

Annotations also add a great way to document each pattern.

Annotations and code displayed on Dashboard Hacked page

Screen Shot 2016-07-13 at 11.38.00 AM


Other features include plugins that extend the ability of Pattern Lab, support of YAML in addition to the original JSON, and the power to use pseudo-patterns, pattern parameters, pattern states, and styleModifiers. Starter kits of tools also allow for a more comfortable experience while building your pattern library and/or website.

Finally, you can customize the skin of the actual pattern library as well as change the names of the atomic elements (i.e. atoms) to whatever works best for your company, client, or workflow.

Why use Pattern Lab?

  • It’s FREE (Hooray!)
  • It is a quick and thorough organizational tool that can help you not only build websites, but a pattern library itself.
  • You can have components living and breathing in code within minutes rather than strictly writing comps over and over.
  • It keeps your website consistent and decreases the amount of code you use with a reusability factor.
  • PL2 is more than just a pattern library, but a great starting point to creating a style guide.
  • It is customizable so one PL2 user’s site and pattern library can look totally different than another user’s site. Flexibility is key and can allow for a unique design instead of the same old website you see everyday.
  • You can contribute as you find new ways to improve Pattern Lab from your personal experience.
  • I’ve only been doing web design for about a year and I can use it efficiently. That is saying something.

Where to Download PL2?

You can download PL2 for free from the Downloads page on Pattern Lab’s website.

Lessons Learned From Web Design Day 2016

I finally got the opportunity to attend my first web design conference in my short career as a front end designer. I had been to several weather conferences as a meteorologist, so I was interested to see the difference. This was definitely different and I was not disappointed.

Web Design Day has been put on by the awesome Jason and Val head in Pittsburgh for the past 7 years. I am thankful to them for giving new web designers, like myself, the opportunity to dig into the web world in a laid back and comfortable environment. I met some good people and I learned a lot about the web community and about myself on Friday.

My main takeaways from all of the talks:

  • Communication is key to any project
  • Use empathy while communicating/expand your perspective
  • Be passionate about what you are doing
  • Patterns/Design systems have become more important
  • The web is ever changing. Find the most efficient/logical ways to design/develop

Here are my thoughts on the individual talks:

Jen Simmons

Jen Simmons started off the list of speakers with an awesome talk about designing web layouts in CSS. She discussed the evolution of layout and showed examples of how this evolution has improved and will improve. She also described how the web has become a very “block-like” form of media and how we should look at print media to shy away from this uniform look. Jen did a great job going into various tools and upcoming CSS that will help to accomplish this. One of these CSS methods was the CSS Grid Layout method, which won’t be out for a little while but reminds me of flexbox on steroids. Instead of thinking of columns like layout in the present and past, it’ll focus 2 dimensionally. This talk was explained so a web designer without a year of experience could understand. What a fantastic talk.

Sharon Steed

Going from Jen’s talk to Sharon’s talk was fitting. Jen’s talk was more technical going into actual code on how to design the web, but in a way where the audience could understand. Sharon’s talk was about talking to humans, something that is very helpful to know how to do both as a web designer/developer or as a human being. She used her personal experience to show how she realized what ingredients go into good conversation, including the biggest ingredient: empathy. Thinking of the other person in the discussion as important as thinking about how you portray your story. I learned a lot about myself and how I need to communicate better in everyday life and within the web community. After attending weather conferences in the past, this would be a great talk for those since much of that material went way over my head. A very inspirational talk, indeed.

Aaron Irizarry

Aaron spoke about the good, the bad, and the ugly about managing design teams. He tied this into project management as well. A lot of what he discussed came down to communication with teams, which was fitting after Sharon’s talk. This talk made me think about my personal experience with project managers and how communication makes a huge difference. Some of the project managers I have dealt with are very good with this while others are poor. Aaron discussed how being a design manager is a battle between sticking up for your design team’s decisions and being open to ideas from the other teams in the project. It gave someone like me who is less experienced a better understanding of what goes into good project and design team management.

Kate Daly

Kate went into detail about how to design websites using a story. It is easy as a web designer/developer to think about a website as just another project when you should think about it as a story. Story mapping allows you to find out the message you want your site to portray while also asking questions about what is motivating you to be a part of the project. Exercises include using Post-its and asking questions that would give you a better understanding on your audience and how to communicate your site’s material with your audience.

Eric Meyer

Eric went into detail about designing with the thought of the user. The Internet is not just a place that people visit, but it has become a part of their everyday lives. Eric used his own personal experience to show that you need to think of your audience while designing a site, including the minority of users that may use your site. He explained that you need erase the tunnel vision of seeing that one user and expand your spectrum into the users that will stress test your site. This along with compassion for the user will help the message of the site better communicate with the user. Definitely a very touching and a very educational talk.

Caitlin Steinert

Caitlin discussed the coalescence between her love of knitting socks and the rigors of JavaScript. She explained how CSS and HTML came to her fairly easily when she started as a designer/developer, but JavaScript posed more difficulty. It wasn’t until she wanted created a tool to measure socks for knitting when she finally found motivation to learn JavaScript. From then on, she learned more JavaScript to continue to improve her tool. This definitely hit home with me since JavaScript is one of the more difficult of the languages to work with. It also struck a nerve since I’ve talked about how getting down and dirty with coding helps you to learn, and motivation to do that also helps.

Smitha Prasadh

Smithia discussed the relationship between classical music and user experience/teamwork. She explained how her love of music has helped her with web design and how there are similarities with teamwork in orchestras and web projects. She also related classical music to web design with the fact that finding patterns in classical music is helpful like finding patterns while designing your own websites. This not only was a brilliant comparison but really spoke to me since I have been helping a little bit with Pattern Lab and saw the similarities. Like Caitlin’s talk, Smithia’s motivation made it easier for her to understand web design.

Bridget Reed

Bridget discussed her experience within the design world from when she got fired from her first design job to her current recent hiring. It was an inspirational talk about the obstacles she had to go through during her career in order to find success within the design world. Her drive and willingness to strive for success allowed her “unlucky self” to finally find a contracting job at the end. Despite her trials and tribulations, she made the talk positive, funny, and inspirational for those of us starting out in this field.

Robert Jolly

Robert explained the importance of accessibility within the web. He discussed his own personal experience of how a temporary injury increased his need of accessibility with websites. Even if we are the healthiest person right now, we won’t know if injury, disease, or a disability will impact our lives in the blink of an eye. The best idea is to incorporate accessibility in all websites to help those who need assistance at all times or just for a temporary amount of time. It is easy to overlook that sort of thing while making a website, but hearing this will definitely make me pay closer attention to accessibility with the web.

Karen McGrane

Karen discussed the difference between responsive design and adaptive design and the when to use each. Responsive design is just a manipulation of the current content on the page depending on viewport size while adaptive design uses the server to figure out the best information to deliver to the viewport size. She also described the ways that adaptive content can be served a certain design type, but that it usually isn’t necessary. It was a good talk showing that while adaptive design is nice, it rarely needs to be used. While our world dives deeper into different devices, it is good to hear how the web continues to become more flexible.

Jina Bolton

 Jina went into depth about her experience with designing a design system. As the web continues to get faster, reusability of patterns continues to grow in importance. Jina not only went into the various patterns within the Salesforce Lightning Design System but elaborated with documentation behind why they used the patterns that they did. While clients may care about the patterns that are used within the site, they are more concerned about why these patterns are used and how they may improve their business. It was great to see a breathing design system and how it functions compared to Pattern Lab which I am more familiar with.

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!

Winter Storm Warning/Winter Storm Advisory For Western PA

What: A wintry mess will move northward tonight into Tuesday.
Timing: Tonight into Tuesday. (Below is HRRR Model precipitation type for 8PM Tonight, 12AM Tuesday, 4AM Tuesday, and 7AM Tuesday respectively)
-Erie: I think it stays all snow in this area and that 4-8″ of snow is expected here. I wouldn’t be surprised to see more than that depending on how far the rain snow line moves north and where that heavy band sets up.
– Oil City/Mercer/Titusville: Area I am most concerned about. Will stay as snow during most of the event, but could transition over to freezing rain by the morning. I think these areas could see 4-8″ of snow with potential for locally more depending on how much warm air advection causes the rain snow line to move north. If could air wins out, I could see up to 12″ of snow in some spots within this area. Snow could be heavy at times. The further north and west you are into western PA and eastern Ohio, the more likely you’ll see higher amounts of snow.
– Butler: Start out as snow before changing over to a rain snow mix and then over to freezing rain/rain for most of the event. I think they could see 2-4″ of snow or so before it washes away. Rain will transition back over to snow before the event ends though.
-Pittsburgh and southward: Looks to start out as a rain and snow mix before changing over to rain overnight into Tuesday. Freezing rain could also cause for slick roadways. Could see maybe and inch or 2 by the end of it.
East of Pittsburgh in the mountains: More freezing rain expected than anything. Snow and rain could mix in at times though. Could see up to a 0.5″ of ice, which is very significant.
– Icy roads, especially east of Pittsburgh in the mountains and north near I-80
– Snow covered roads
– Heavy snow at times in NW PA
Risks With Forecast:
– More warm air advection could decrease snow totals from Butler County to Venango County
– Colder air could increase totals, which I think is more likely with the timing of this system overnight
What to do:
– Stay off the roads if you don’t have to be on them, mainly overnight into Tuesday morning.
– If you have to drive, take it easy. If you live in the mountains east of Pittsburgh, I suggest staying off the roads.

Winter Storm To Impact Mid-Atlantic/Southern Northeast

Final Forecast Snow Totals Through Sunday:

  • DC: 18-24″
  • Baltimore: 18-24″
  • Frederick, MD: 18-24″
  • Philly: 12-18″
  • NYC: 5-10″
  • Oil City: 0″ ‘
  • Pittsburgh: 2-5″
  • South Hills: 3-6″
  • Uniontown, PA: 8-12″

Locally heavier amounts of snow are possible, especially near DC/Baltimore.

Risks With Forecast:

  • Generally conservative with my forecasts
  • Slow moving storm = higher snow amounts are possible.

Main Threats:

  • Heavy snow Friday afternoon through Saturday
  • Wind gusts up to 60mph possible near DC/Baltimore/NYC
  • Power outages possible with heavy snow and wind, especially near DC/Baltimore/NYC

Best Way To Go About Dealing With This Storm:

  • Stay the hell home if you are in DC/MD/Northern VA/Philly. Don’t go out and try to drive in the snow.
  • In DC/Northern MD/Philly, have some sort of heat source that isn’t run on electricity
  • Make sure you have plenty of food to eat.
  • BE SAFE!