Introducing Style Guide Guide, Gatsby Edition!

Brad Frost and I are happy to introduce to the world a new React-based Style Guide Guide, Gatsby Edition! Brad and I built the design system reference site boilerplate Style Guide Guide a year of so ago that used Jekyll and regular HTML, CSS, and Javascript to build it out. Because more and more companies seem to be turning to React for the base of their work (because it is the new hotness), we decided to build a clone of Style Guide Guide, but one that is built in React-based Gatsby and not Jekyll. Both of these style guide guides have been created from client projects that actually used this setup, which is pretty cool.

style guide guideStyle Guide Guide, Gatsby Edition gives a head start to companies or anyone to take what we built and use it for their own use to build out a storefront for the shiny patterns, guidelines, and principles that revolve around a design system. It also gives some good examples on where to find inspiration for the different sections of the Style Guide Guide, like accessibility for instance. It is intentionally built to have basic functionality and little style so that it can be reused by different companies to put their own brand and style on this.

While a design system should be a language agnostic platform, it doesn’t hurt to build the storefront of the design system in a way that represents the company and in a way that is easier to port over components from actual products that use this language. With a company that creates a bunch of React-based applications, this is probably a better option than the vanilla Style Guide Guide because it would be easier to port over components from a React-focused platform to another React-focused platform, rather than jumping through more hoops to get to that point. It is important, however, to always have some way to get regular HTML though, since the newest shiny thing will not always be React.

Similar to the vanilla version, this project uses Markdown files in the content folder to create the actual data that Gatsby sucks in. The components folder within the src folder houses the components that are being used to build Style Guide Guide. These are not the components that will get imported into the actual component detail page as variations (i.e. the Card page under Blocks and Cards) since we want a separation between the structure of this site and the design system that powers the company’s actual products. The examples live in ds-components, and then are sucked into ComponentExample in the src/components folder.

component detail

We tried our best to make it very similar to the Jekyll version in terms of structure to help learn how to use this quicker if you are familiar with the vanilla Style Guide Guide or Jekyll in general. There are some things that are still in flux that would be great to get help with:

  • The components themselves could use a better way of being included (more dynamic way since it is pretty manual right now). Also, a flatter file may be better for importing from more workshop-like environments like Storybook.
  • There is no iframe yet for the component example, so there isn’t the ability to resize this component based on the size of the iframe.
  • Getting HTML and React code snippets formatting better (indentation, line breaks) and getting the actual component tag to show up in the React tab.

I’d say aside from the items in flux, the site is pretty much identical to the Jekyll site in terms of the main tasks of this product. I’m sure the great web community will find other issues and improvement suggestions as well, and that’s fantastic. We understand this is an MVP and can use some love. We hope this can help you and your teams with future design system work! Thanks for letting us share this with you all!

Personal Note

This project allowed me to embrace React more, dig in, and actually learn how to build these components with reusability in mind. If you are familiar with React, it is easy to get caught up in the context of a component rather than reusability. With reusability in mind, I was able to build components that on a page/template level was context based, but on a component level was more generic. With any newer product, there is some struggle, but in the end you start to get it and feel good about yourself for learning it. I am happy with the progress but I will continue to get my hands dirty with React until the newest hotness appears on the horizon. Thanks!

30 Years of Living, 30 Items of Lessons Learned

30 things I have learned in the exactly 30 years I have lived:

  1. Good family and friends makes a big difference
  2. Laugh every goddamn day
  3. Be a nice person and people will usually be nice back
  4. I will always quote Dumb and Dumber, Tommy Boy, Happy Gilmore, Billy Madison, and Forrest Gump no matter how old I am.
  5. Enjoy both work and your life. Otherwise, one of those will get to you eventually.
  6. Giving to people is better than receiving.
  7. Failing my first calculus class freshman year of college was one of the best lessons of my life. It taught me to work my ass off (my entire meteorology program taught me that actually)
  8. Be grateful every goddamn day.
  9. If you predict your life 10 years from today you will be wrong most of the time. Was I planning on being a web designer 10 years ago?
  10. Being a meteorologist turned web designer always turns some heads
  11. Helping people out is why I have enjoyed working in the fields I have worked in.
  12. You’re only as old as you feel and act. Hell I act 15, so therefore I’m 15.
  13. Never stop trying.
  14. Never stop learning.
  15. Never feel sorry for yourself, because there is always someone out there in a worse situation.
  16. Force feed positivity into negative situations.
  17. Quit it with your damn temper, Ian. My wife taught me a lot about dealing with that.
  18. 30 is the first start of a decade where most people aren’t in the same situation. Some are single, some married, some with kids, some struggling to make ends meet, some successful, some posing with Buddy the Elf cardboard cutouts.
  19. Go with the flow, but create your own path at the same time.
  20. I’m a better listener than talker.
  21. If you’re not happy change it.
  22. Luck plays into your life occasionally. Sometimes it’s bad luck, though.
  23. Do what you enjoy doing. I love hiking and basketball. I will never stop doing that stuff because it makes me happy.
  24. Make people laugh. I hate serious situations or really fancy restaurants because it makes me uncomfortable. Crack a joke or quote, “Lieutenant Dan ice cream!” at your fancy dinner.
  25. Exercise. I used to take 4 hour naps freshman year of college, then I found lifting weights.
  26. Indulge every once in a while.
  27. See the world. I’ve been very fortunate to do this and it teaches you a lot about yourself and society.
  28. Stop comparing yourself to others. You control your fate, not anyone else.
  29. Hockey is the best sport to watch on TV and live. I thank my college roommates for getting me into it. P.S. Let’s go Pens!
  30. Be yourself, just don’t be an asshole. People will like you for you. If they don’t, they’re not worth putting an act on for.

Ode To Gramps

1509737_10151906956311651_717744608_n

“Doc”
“Bob”
“Uncle Bob”
“Dad”
“Grandpa”

To me and many of his other grandchildren: “Gramps.” 7 children. 13 grandchildren. 10 great-grandchildren and soon to be 11. He wouldn’t have it any other way as he showed how much he loved his family every single day. His love for his wife, family, and life in general was out of this world.

He was married to my Gram for 62 years before she passed away. They met at Mercy Hospital in Pittsburgh, as she was a receptionist there when he worked there. They took in extended family members who were struggling and treated them like their own. Their love and respect for each other are a stunning example of true love. They are both true role models of mine.

Gramps’ storytelling skills are the best I’ve ever seen, drawing in both the oldest and youngest family and friends to quiet down to lend him their ears. From him and his brother creating scuba helmets out of cut-out, old rusty barrels and going down to the creek to test them out in Patton, PA to their family cow getting loose and ending up at the movie theater in town, his stories never got old, no matter how many times he told them.

His humor. Holy shit. He will always be the funniest person I will ever know. His laughter and happiness was infectious.

“You’re looking good today, Gramps.”
“Well, that’s because you’re looking at the wrong end.”

He enlisted in the military during WWII and was stationed in Washington and Alaska.

He was a doctor for over 50 years, starting off in general medicine as one of the few doctors in the North Hills of Pittsburgh and eventually transitioning to an eye doctor in the 1950s. He wasn’t your doctor-of-today though. He would have to make house-calls in the middle of the night to deliver babies while old Miroslav (or insert Slovak name) would be revving his motorcycle in the basement. His payment: $25 – $30 for twins or manure for his garden sometimes. He was my eye doctor for a good portion of my life. He would have people come up to him and church, thanking him for taking care of their sick family member or delivering their child.

He was an entrepreneur and incredibly creative, always building or fixing something. He loved riding up and down the hill in his backyard on his tractor. He loved it so much that he fixed the same tractor for at least 3 decades. He built a dirt tennis court in the backyard along a steep hill and put in an in-ground swimming pool by directing a natural spring to fill it. It was 60 degrees when we’d swim in it, but we didn’t care because it was a blast. The spring would also keep our pop cold while we swam.

He was a musician, playing songs on the piano with my Gram or upright bass with his family and friends in the backyard. They both definitely ingrained the music bug into me and much of my extended family.

He was an insane cross-country runner, running at Franklin & Marshall. Him and his team were honored in the early 2000s for their championship in the early 1940s.

He accomplished so much in his long, almost 95 year old life, but yet he was so humble. He never had to brag, but the people who he surrounded himself with know how incredible he was. They know they were lucky enough to spend time with him. I know I was lucky enough to spend 29 years with him. His stories, lessons, compassion, and impact on so many people’s lives will continue on with the people he touched so deeply. Your memories will forever stay with me. I’m proud to call you my Gramps. You are an inspiration to us. While I am sad you are gone from this Earth, I am so happy you are reunited with your true love, Gram, in heaven.

“Here’s a dollar. Go buy yourself a root beer.”

2017 Web Roundup, Gratitude, and Looking Ahead

On a macroscopic level, 2017 was not the most favorable year in terms of morality and humanity in my opinion. However, I try to look at the glass as half full. I have seen people care more about what is going on in the world and about the rights of other human beings. I hope that continues, because at the end of the day, humanity should come down to feeling loved, happy, and healthy and wanting that for others, too. In order to do that, we need to help and care about others. Keep doing that.

On a more personal scale, 2017 has been a great one. It has been another year of learning in the world of web design. I am fortunate to work with wonderful people on some amazing projects. Here are some of those accomplishments from the year:

  • Celebrated my 2 year anniversary switching from meteorology to web development working with my brother, Brad Frost at Brad Frost Web.
  • Finished up building my first design system for ExxonMobil in early 2017. Probably the experience of 2016-2017 where I learned the most, felt the best about our code after building it, and really enjoyed working with their team and my team.
    Screen Shot 2017-12-15 at 11.35.46 AM
  • Redesigned the Harvard Business School Digital Initiative website and style guide. I built the front end of the site and the corresponding style guide. It was an honor working with their fantastic team and very humbling to be surrounded by so many interesting and intelligent people. It gave me a better perspective of the Harvard brand and how truly welcoming and down-to-earth the folks were there.
    Harvard Business School DI site
    Screen Shot 2017-12-15 at 12.10.18 PM
  • Built my first Shopify site for a friend and local company in Pittsburgh called Puzzle Pax. I had worked with Jekyll before so using Liquid was fairly straightforward and it was the first site taking on the design, development, and CMS work without another person to back me up. It was a great learning experience and favor for a friend.
    Screen Shot 2017-12-18 at 10.38.58 AM
  • Built a Jekyll site in twelve days with Brad for the Brian Forde For Congress campaign. It was the quickest project turnaround I have had and to be honest, was fun to build and put the pressure on. It was also great meeting Brian and reading about his views on the country and his accomplishments.
    Screen Shot 2017-12-15 at 12.06.48 PM
  • Started building a design system for a company that eventually didn’t use anything we helped build and went in a separate direction.
  • Other various projects and tweaks. Pattern Lab demo development. Frost Finery website tweaks. Helped a tad bit with the redesign of bradfrost.com. Helped Brad build out a few components from several different sites the day before a workshop on design systems. A few other personal/internal projects that tend to get pushed to the side when bigger projects come to fruition and then returned to later.
  • Took more than 100 trips to the post office and fulfilled well over 1,000 Atomic Design books (also helped redesign the shop page to its current state in Shopify). Very proud of Brad’s success with the book, but man, a week without going to the post office would be great.

It has been a fairly busy year. It has been a year where I feel like I have finally settled into web development, while still feeling like I do not know enough about it after looking at the incredible stuff other people are creating. That being said, I am looking forward to my current and future work in 2018:

  • Redesigning a larger company’s websites and building a design system alongside these sites. I am enjoying working with my team and we are doing some really awesome things with implementation of patterns into the actual site.
  • Redesigning a friend and local company’s website. The current site needs a lot restructuring, love, and responsiveness, so I am looking forward to helping him out and hopefully improving his user experience, ability to write content using a proper CMS, and business in general.
  • Potential web site and design systems projects are in the works, but nothing is set in stone at this point. I’m always looking forward to helping people out with a website redesign, style guide, or design system work. I learn something new from each experience.
  • I hope to redesign this website, because I haven’t had much time to dig into it and it hasn’t been designed since Brad set it up for me when I was a meteorologist. I started, and like many other lower-priority projects, it got pushed to the side. I really wanna get this done so it doesn’t look terrible.
  • I hope to share what I’ve learned with other people somehow. I’ve thought about teaching a basic WordPress class or the way we build websites, but I’m not sure what I want to do yet. The web community has been great to me the short time I have been involved in it and I want to do the same for others. Helping people is one of the reasons I got into meteorology and I want it to continue with web design as well.

I have been very fortunate to work on some pretty amazing projects, but they wouldn’t have been as amazing without my teammates. I also want to thank the speakers at Clarity Conf. Thanks to these special people:

  • Brad Frost – Always thankful to have him at my side (literally, since we sit next to each other in the office) building great things on the web. Always grateful for him allowing me to work with him after I moved back to Pittsburgh. It has been a cluster of fun, mistakes, learning from these mistakes, lunch break jamming, late nights, and organized, thoughtful web work. Over 2 years working together and we still haven’t beaten each other up. I guess the 18 years of sleeping in the same room helped with that.
  • Dan Mall – An amazing designer, project head, colleague, and, most importantly, friend. I’ve had the honor of working with him on several projects and he never fails to amaze me with his designs and knowledge in general. Whether we are in a project meeting or playing basketball north of Philly until 2am, he’s a great guy to be around and I am thankful for that.
  • Josh Clark – An awesome project manager, facilitator, project politics absorber, colleague, and friend. He’s the guy who could make your worst day into the best day. He can turn the mood of a bad meeting into butterflies and rainbows by the end of it. I am grateful for him for allowing me to work on projects with him as well as picking me up when I my confidence slips in the wrong direction. You da best.
  • Jesse Gardner – A fantastic WordPress and backend guy who I worked closely with on the Harvard Business School Digital Initiative project. A guy I can now call my friend after working with him. I appreciate his willingness to help me out when I needed it and for putting up with my requests when I was feeling a bit behind or confused. Definitely a guy I would like to keep around since he is a positive influence on people’s lives and knowledgeable about WordPress and SEO stuff. Thanks for the good work!
  • Kevin Hoffman – The guy that I had heard a lot about from lots of people but never had the opportunity to work with until the Harvard Business School Digital Initiative project. He is a magician with UX, strategy, and pulling people into his very organized methods for working together. He’s a guy who I could talk to about random, goofy subjects when I was feeling a little out of the loop when conversations turned to the topics like Bitcoin. You know you will be friends with him when you pull a Lady and the Tramp with a donut in Boston. Thanks for your help!
  • Abby Fretz – An awesome producer who would make sure to DM me in Slack to make sure I got my shit done on the Harvard Business School Digital Initiative Project. Super down-to-earth and very professional, she knew how to keep everyone on the same page during the project. I am happy to now call her my friend. Thanks for always keeping me on my feet and keep making that honey.
  • Octavius Newman – A great designer and comic book/movie guru. Was a pleasure working with you on the Harvard Business School Digital Initiative project. You have such a thirst for knowledge. I envy your ability to ask questions and speak up when you don’t know something or when you have an opinion. Thanks for being a good dude and friend.
  • Jamie Kosoy – What can I say about him? He’s a ridiculously talented developer who has been building web stuff since the 90s but somehow manages to take the time to teach someone like me who is newer to the game. I am thankful to get to work on our current project together and hope to learn more from you. I’m glad that we can goof around and do incredible work together. I’ve thoroughly enjoyed it.
  • Crystal Vitelli – Am awesome person to handle the politics of a big project like the current one we are working on. Great with strategy as well as making sure our team knows what is going on from all of the angles information is flowing in from. While we haven’t talked much, it has been a pleasure getting to know her and I look forward to building great websites and design system with you. Thanks for all you do.
  • James Hall – A very talented backend developer who somehow managed to understand what we were writing on the front end and implement it into the actual website. I’ve appreciated the random movie/television quotes and GIFs as well. Glad our humor is on the same page. Thanks for the help with this current project.
  • Jon Jackson – An up-and-coming designer who I had the chance to meet before we even worked on this current project. He is someone who wants to learn from anyone he meets and has done a great job on this current project. I can relate to him since he is newer to the web design world, so it is great to see the parallels there. Thanks for helping with the design of this current project.
  • Mary van Ogtrop – Fantastic copywriter who seems insanely busy but somehow manages to make time to talk to you about writing copy. While I haven’t talked to her too much during the project, it is great to work with a copywriter to see some of her process and I look forward to her continuing work. Thanks for helping with the project.
  • ExxonMobil Team – Working with them was awesome. It was a great experience building the design system along with them, hearing their questions and concerns, and transforming our project plan based on their feedback. It was also great eating Torchy’s and listening to Journey together.
  • Harvard Business School Digital Initiative Team – I can say nothing but kind words about them. They are all some of the smartest people I have met, but they also are some of the nicest, down-to-earth people I have met. They didn’t make themselves out to be more important than anyone else on the project and were a fantastic group to work with (especially since they brought in delicious donuts…twice). Thanks for being a wonderful and cooperative group to work with.
  • Clarity Speakers/Organizers: Jina, Cameron Moll, Debbie Millman, Una Kravets, Abi Jones, Cap Watkins, Diana Mounter, Elyse Holladay, Henri Helvetica, Isha Kasliwal, Josh Silverman, Linh Yao Pham, Mina Markham, and Miriam Suzanne – Thank you all for a great conference and for sharing your knowledge with me. I learned a lot. It was a pleasure getting to know some of you and I look forward to seeing what great stuff you continue to build and talk about in the future.

Thanks to these folks and everyone else who made 2017 a fantastic year. I don’t know what will happen in 2018 but let’s keep creating, building, and making the web great! May everyone have a safe holiday and a happy and healthy new year!

2 Frontend Designers. 12 Days. 1 Website. How We Did It

Brian Forde screenshot

  1. Stock up on La Croix.
  2. Make sure another big project is going on to make things even more challenging
  3. Make a great website using guidelines we have used in all projects starting last summer as well as quick and efficient design themes.

The Client: Brian Forde. Who is Brian Forde you ask? He worked under former President Barack Obama as the Senior Technology Advisor. He helped launch President Obama’s Climate Data Initiative and, as a former practicing meteorologist, I think that is fantastic. He’s running for Congress in southern California and after talking with him, he seems like a good, down to earth guy with a positive message.

The Site:  forde.com.

The Start

On Friday July 7th, the project began. When I say the project began, my portion of the project began. Brad got contacted by the client a couple days before and agreed on a launch date on July 19th. For those who don’t understand web design, most projects I’ve worked on take about 3 months with more than 2 people doing the design and frontend development work. Brad agreed to do the work with the deadline in mind. As for me, I am currently involved in another big project and thankfully it was in a bit of a lull period from the development side of things, so I agreed to help Brad out. Like with most projects we do anymore, Pattern Lab was the tool of choice. Why use Pattern Lab when we could just crank out everything on the actual site?

  1. Brad and I do our best and fastest work in Pattern Lab. Mustache is a great thing. Gulp tasks are great things. Build fast; build efficiently.
  2. Doing your work in Pattern Lab allows you to create pages and templates as well as a pattern library/pattern playground for your client.
  3. Atomic Design. Brad knows a little bit about that.
  4. Pattern Lab is where I learned web design. Yes I took codecademy classes and read books to learn too, but getting my hands dirty in Pattern Lab allowed me to fail and learn from my mistakes.

A little nervous of the timeline, I dove into the project with Brad. We cranked out components based on one comp with colors and a few grayscale comps that we received from the client. Did we use these comps? Sort of. Did we use the colors in the one comp? Only for one of the theme options to see what it would look like. Why? Because every site we make we care about the identity of the client and, frankly, the colors in one of the comps weren’t working for what we wanted to build him and how the public would perceive him solely from the website design.

We built a collection of components in Pattern Lab and the general IA (example of it below included between a header and footer) of what content should go where. Grayscale components nonetheless, but these grayscale components are the foundation of iterative workflow. These would change a bit over time and that is okay. Our process starts with building the foundation. Then we add styles. Iterate. Massage styles. Iterate. Massage. It’s a great workflow, and it all happens within code, making it easier to get the ball rolling and easier to import into the actual site.

Screen Shot 2017-07-20 at 12.21.04 PM

 

The Design

We now had the components and some sort of wireframes set up in PL. We needed a design direction quick. Brad set up a short 20-second gut test of sites for Brian’s team to look at and react to. I took notes on their reactions, especially Brian’s. After that we had an idea of some of the key desires they were looking for in their website. Bright colors, strong calls to actions, clear forms, as well as other points. We had their input. We just needed the design direction, which brings me to my favorite part of this project: building a theme and logo switcher with Brad. How did we do that? 6 buttons (5 themes and a logo button), some JavaScript, and two-tiered Sass variables that could be overridden depending on the 5 separate theme-CSS files we activated. We built it out, chose some color schemes, called the Brian Forde For Congress team. We were able to switch through different colors, fonts, etc. with the click of a button and we were able to switch through some of the logo designs they had sent over. I recreated the process below (obviously we used actual logos and font-sizes were better executed during the meeting, but you get the idea).  Brian was fortunately sold on the one theme and we had an art direction in a half hour meeting.

theme-changer

Bringing It All Together

Grayscale components. Check. Art direction. Check. The good part about the theme changer was that I could kill all the other themes and implement the theme they chose right into our Sass variables. Quick and easy. We replaced the placeholder blocks in the wireframes with actual components. We used CSS Grid Layout and Flexbox for layout-specific elements, making this the first project we used CSS Grid Layout on. I have never used floats in a project (aside from a text passage image), which shows how new I am to the web design game. For someone who is progressive like Brian and former Senior Technology Advisor in the White House, it only made sense to use the latest and greatest in CSS. The pages in Pattern Lab looked good enough to start implementing into a CMS.

After many iterations, this grayscale hero component…

Screen Shot 2017-07-20 at 12.05.58 PM

would eventually become…

Screen Shot 2017-07-20 at 12.06.12 PM

Building the Actual Site

The great thing about Pattern Lab is it all renders as HTML, CSS, and JS. The other great thing is while we built patterns in Pattern Lab, we could copy some of the key patterns into the Jekyll site, the CMS that would be used to spin up the website. Why did we use Jekyll instead of WordPress? Mainly time. Jekyll spins up static sites quickly and easily, and that’s what we needed with the website MVP. Is WordPress easier to use from a content management standpoint? Probably, but it is much slower to build out components and pages for a project consisting of mostly static pages anyways with only a little bit of functionality.

Most of the production work took place in Pattern Lab. Once the pages were built, we took some of the organisms (aka more complex components) and manually copied them over into the Jekyll site’s includes folder. This way we could include the same pattern on multiple pages. We built out the templates from Pattern Lab in the layouts folder of the Jekyll site. We managed the content of the pages within markdown files located at the root of the Jekyll site. With some help from the liquid templating language and some placeholder content, we were able to scaffold out the site. We would use Pattern Lab to massage the CSS further (adding box shadows, background bands, and spacing to add dimension). I then added a gulp task to copy over the CSS, images, icons, and JavaScript from Pattern Lab into the Jekyll site. All looked good in Chrome. But Safari, Firefox, and the dreaded IE/Edge were next to test.

Testing and Finishing Touches

Brad did the majority of the IE/Edge testing. I took on a bit of the small screen tweaks as well as Safari and Firefox testing. We included fallback CSS so browsers that don’t support CSS Grid Layout would look solid, but there were still some tweaks with the forms and other grid items. He realized that there needed to be wrappers around items within a grid component for them to render properly in IE/Edge. All the bugs were fixed. We had a site built! A day was left until the potential soft launch. Hoor…oh no…icons. IE/Edge does not like external source SVGs for some reason. We used a script called svg4everybody but that wasn’t working. Brad spent hours on it. We slept on it (sort of). I came in the next day and had to use my own personal site to test the SVG icons being included within the project. I ended up changing the script in the head to the one we included in another project. Refresh. Voila! Icons were showing up! We jumped for joy when we saw this. Were we done? Not yet. Brian and his team had to replace our placeholder content in markdown within Jekyll and we had a few content additions and design tweaks. By Wednesday afternoon, we finally finished the MVP site. Wednesday evening we launched the site with their team. Finally we could say, “Hooray!” I am hoping that all of the hard work we put into this project so far leads to a win for Brian.

 

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!