Month: April 2015

Categories
evening ramblings

#HonoringWebFolk

One of the hardest, yet most important, things I’ve learned over the years is knowing where to get reliable information from.

I remember in college when we used dogpile and askjeeves to try to find the information we needed to design and build webpages. It was so hard to get people to knowledge share in the web community and when they did, it was hard to filter reliable information from the trash. I’ll admit it, at one time in my younger years, I thought the w3cschools was a reliable resource.

Thankfully, Adobe helped facilitate an open and connected community where product users shared knowledge, encouraged and celebrated each other’s accomplishments (and it still does). Flash developers were solid group of people that loved making tutorials and sharing knowledge. But, as we all know too well, Apple killed Flash.

During my Flash dev years, I was fortunate to start learning names of web dev people like Jeffery Zeldman and Eric Meyer. I stumbled upon A List Apart (yep, I still remember the article) and eventually learned of An Event Apart. I attended a conference or two before AEA, but they were nothing compared to that one.

When I attended my first An Event Apart (look at that line up!!!), it completely opened my eyes to what I was missing.

  1. I had finally found my people. Everyone that I met there, whether speaker or attendee, was awesome, humble and nice.
  2. The information presented at it was AMAZING. I immediately joined twitter and started following the speakers and people I met. I was hooked and I still am. I have attended 3 AEAs and counting.

Now, I’m starting to venture out to other conferences such as JS/CSS conf, BD conf, Sass Camp and many other types of conferences. At each of these events, I have met amazing people that open my eyes new and great things.

So, that being said, my #HonoringWebFolk list is the web community. Over the years, I watched it grow and change into something that I am honored to be a part of.

Categories
conference sass

Camp Sass Notes (4/4/2015)

Camp Sass was a blast! Thank you to everyone that made it happen! Here are my notes:

Micah Godbolt – Visual Regression Testing

So, what is visual regression testing? It’s pixel by pixel comparison (orig, new, diff).

Variations of visual diffing:

  • page based vs component
  • comp vs baseline
  • headless browser vs desktop browser
  • GUI vs command line
  • extras – css unit testing, scripting libraries

Screenshot Comparison Tools:

1. Wraith

  • Page based
  • comp or baseline
  • headless browser
  • command line

2. PhantomCSS

  • comp based diffing
  • baseline
  • headless
  • command line
  • exras – scripting lib

LINKS

Bermon Painter – Modular Sass

How do you create scalable websites? Break things down to components!

3 methodologies – oocss, smacss, bem

1. OOCSS – a.k.a. Object Oriented CSS Two main principals, separate:

  • structure from skin
  • container from content

2. SMACSS (scalable and modular architecture for css)

  • base (reset, default typography)
  • layout (headers footers)
  • modules ()
  • states (.is-active)
  • themes ()

3. BEM (block, element, modifier)

4. SMABEMOOCSS? JK! 

Una Kravets – Open Source Design

Innovation/Revolution comes about in tech in (usually) one of three ways:

1. government funding

2. big business

3. open source 

GOALS:

  1. encourage a more open design/dev workflow
    • positive reinforcement #littlewins
  2. foster design participation in the open source community

CARE Method

[C]ommunication

  • label issues properly (design needed, issue)
  • use a lot of images

[A]ccessibility

  • getting started docs/wikis
  • about doc
  • contrib docs
  • lexicon – terms/def for the docs

[R]espect

  • coordination != collaboration

[E]mpathy

feedback guidelines:

  • ask, don’t tell
  • be specific
  • explain yourself
  • offer solutions

Jina Bolton – Living Design Systems

Style guides are awesome!!!

Some things to keep in mind:

  • Use a living style guide because it is maintainable
  • Naming conventions – use clarity > brevity
  • Keep properties organized (doc it, and make sure it is easy to know how to follow)
  • Enables rapid dev and testing
  • Elements, components, layouts (modularize, choose your method or create your own variation)
    • types, states, variations

LINKS

Conclusion

Camp Sass was awesome! Go next year, you won’t regret it!