Ollomedia

Today I was working on a new feature for a large angular application.
The feature called for an adaptive carousel that loaded different data based on the viewport. I typically dislike this kind of design since if not handled correctly can create bad experiences for mobile users.

Typically developers will just hide and show different versions of the component based on a css breakpoint. But this approach means that all the data is loaded potentially multiple times and just hidden if its not needed in the view. This can cause very latent interfaces on mobile so I decided to tackle this through javascript.

determineShowAmount($window);

// Only show the number of cards appropriate for the viewport
angular.element($window).on('resize', function() {
  determineShowAmount($window);
  $scope.$digest();
});


function determineShowAmount($window) {
  if($window.innerWidth < 768) {
    $scope.cardLimit = 2;
  }
  else if ($window.innerWidth >= 768 && $window.innerWidth < 1024) {
    return $scope.cardLimit = 3;
  }
  else {
    return $scope.cardLimit = 4;
  }
}

I still have some performance testing to do as binding to the $window resize event feels potentially expensive but so far the performance has been great.

If anyone has any feedback or better practices for this type of scenario I would love to hear it. Hit me up on twitter and let me know.

I love approaching projects from a modular, componentized approach and commonly am looking for new tools or techniques across languages to facilitate this methodology.

Today I was reading an interesting post on making css typography more modular and came across a thought provoking statement on the authors rationale on using a css reset over something like Normalize.

The other reason to start with a fuller reset is that starting from zero allows you to layer on styles without worrying about turning off other styles. Read that one more time. Anytime you have to turn off styles in multiple places in your stylesheets your are spreading the knowledge of those styles throughout your stylesheet instead of having them in only one place.

This is interesting for me since a couple years back I switched from using Eric Meyers reset to using Normalize so I could focus more on the unique UI components of an application from a sensible baseline instead of having to start from ground zero.

Reflecting on some of these projects now however, I can 100% see how that mindset / approach can totally backfire and make truly modular code difficult. Typically this has manifested for me any time I needed to refactor a component from being view / feature specific to something more useful to the application globally. I seem to find that the cascade from parent components or default styles are coupling the component and thus quite a bit of css needs to be refactored.

On my next project I think I’ll try switching back to a reset and see if this assists in better flexibility.

I read an interesting article today regarding a renowned New York chef who recently received a negative review that was one of the most read critiques ever on the New York Times. It wasn’t a story around the duality of the newspaper that had just given the chef high marks 4 years earlier but rather a tale on how the chef responded to such a strong critique. He apologized.

We are not content resting on what we did yesterday. We believe we can do better for ourselves, our profession and most importantly our guests. We have the opportunity, the tools, the self-motivation and the dedication to do so.

When we fall short, we work even harder. We are confident that the next time you visit Per Se or any of our other restaurants, our team will deliver a most memorable experience.

— Thomas Keller, Chef / Proprietor

Last week at work my company went through an exercise that provided some feedback into our performance and a place to discuss our professional and personal goals. Overall there was good discussion and I think these types of exercises with proper thought and preparation can be really helpful. During my session I received some feedback I didn’t quite agree with and don’t necessarily understand. At first this really fired me up and defensive but I reflect and read a story like this I’m inspired.
How much could I grow as a leader if I practiced accepting feedback from a stance of first reflecting and wondering: How can this help me grow?

There is obviously a limit to this practice as I’m not planning to just accept all feedback regardless of delivery, but I think it is a practice worth considering.

So recently I was working on an angular directive that produced a content card and each of them needed a unique accent color. Each of these cards are produced through an ng-repeat as a result of an api response that was fairly limited in data / context. Essentially all I had to identify each card was a single letter that was used on each card.

Usually in this situation I would just manually write six disctinct classes since there was such a small number of variants but lately I’ve been seeing some fun applications of sass maps and functions so I wanted to give them a shot. Below is what I ended up with.

$card_colors: (
  'r': $blue,
  'i': $green,
  'a': $mustard,
  's': $burnt_orange,
  'e': $spray_blue,
  'c': $burnt_sienna_red
);

@function get-color($color_code: r) {
  @return map-get($card_colors, $color_code);
}

@each $background, $color_code in $card_colors {
  .code_background-#{$background} {
    background-color: get-color($background);
  }
}

Overall I’m pretty pleased with the power of this approach but I do worry a little about how readable and maintainable this approach would be for a developer that comes behind me.

I also at some point need to do some performance evaluations as traditionally sass maps haven’t been recommended in production due to performance. Thoughts?

I

So in an act of love for WordPress I signed up to be the lead organizer for WordCamp St. Louis this year. Its been a lot of work but its also really exciting to work with the local community to put on a WordCamp. This year is looking to be a really good camp as its already sold out and we have a great list of national and local speakers.

I attempted to give up my spot as a speaker so I could focus on organizing but ended up needing to cover a spot for a speaker that had to back out. I’ll be giving a chat on automating your theme development workflow with tools like YeoPress and Grunt. I’m pretty excited despite all the pressure and hope to see tons of local users benefit from the camp like I have at previous ones.

Update

So WordCamp St. Louis in my humble first time organizer opinion was a huge success and our local community really did a fantastic job. The speakers were awesome, the sponsors were super generous with swag and support, and despite the weather closing the day down a bit early I think everyone had a pretty good time, learned a lot and enjoyed themselves.

I thought my rushed chat came out pretty well even though I rushed a bit and forgot a few things because I was nervous. This year I decided to keep the slides lighter and styled but use more interactive sections to demo the tools and I really enjoyed the flow much better than previous chats I’ve done.

Pro tip: Definitely throw in gifs and funny pictures.

So for the past few months I have been using Sass for all of my projects. I’ve been using Bourbon and Bourbon Neat as part of my workflow but recently have been working to implement rem measurements for my typography to assist in font scaling for responsive builds. This was a bit daunting at first after I read about the calculation for rems as I was already used to being spoiled by Bourbon’s em() function so I whipped up a function to do the conversion for me.

// calculate rem based on a pixel value
@function rem($value, $fontbase: 10) {
  @return($value / $fontbase) * 1.0rem;
}

.rem_test {
  font-size: rem(40); // 40px == 4rem
}

Hope you find this helpful.

So yesterday was my 32nd birthday. Woot! This morning over coffee while slowly working my way through a tech book { javascript the good parts } I started thinking about where I was five years ago as a developer.

Five years ago I was writing css from scratch in a primarily Windows environment. And doing web hosting support for Yahoo!. It was an interesting way to cut my teeth and a lot of it was mind numbingly boring but I did get to learn some of the core concepts of web development from supporting their key services. I learned how to debug front end and backend code and the basics of a LAMP environment. I learned to use tools like firebug and photoshop. I took classes at the community college and online on javascript, php, and mark up languages. To think how my own development tools and skills as well as those in the industry have changed so rapidly in this timespan is just mind boggling.

Now I haven’t used a Windows computer as my primary machine in 4 years. I finally am gaining a real understanding of the value of semantic minimal markup and working with the DOM properly. I’m writing true classes and object oriented stylesheets with sass Bourbon Bourbon Neat. I’ve grown from supporting WordPress 1.6 to building custom themes from scratch and writing plugins. I’ve taken a deep dive into javascript and am trying to master it. I’ve automated and sped up my workflow by using better tools { sublime text , iterm, node applications yeoman ,grunt, version control git, and shell customizations .

It’s a fast moving environment and new technologies are coming out daily. Sometimes I worry about the direction some of them are going and the impact it may have on society and our culture. Not that I don’t respect the innovation of these technologies, but the levels of integration seem to be moving in a directions that are a bit too far for me { glass }.

The available information through different devices and platforms at this point on the web is insane. Through the past five years I’ve spent almost obsessively countless hours at this point on online as well as studying and researching, connecting socially with friends and family, building sites professionally etc.

The worry I do have in the back of my head going forward is will we eventually be too connected? I’m not thinking of shutting down all my accounts and getting an old Nokia phone but as I’m getting older and thinking about having a family, I’m working on having hobbies that counter my digital lifestyle and are more active because I want to keep in touch with the human aspect of life as well. Its not something I really got in my mid-twenties.

Maintain a steady balance with Work and Life, master specific skills instead of being a jack of all trades, give back to the open source communities and developers building the tools that help me succeed. Thats the goal for the next five.

So if you haven’t jumped into bootstrap to speed up front end development or at least explored it you need to, and hopefully this writeup taken from some of my successes and failures will help jumpstart you into using it effectively as
a front end scaffold.

First we need to understand that Bootstrap is a framework..

One of my first mistakes was in not really understanding what this means and customizing its core directly. This mistake has caused numerous problems like being stuck with an older version and working way harder to override its css output :(

After the first couple of projects I found that the only way to use it effectively is to build off of it and not customize its core files directly. This concept is similar to other platforms and libraries I use { jQuery or WordPress } but it didn’t occur to me immediately since it was a front end framework and the early documentation guided users to work off of the variables to customize it. This caused me plenty of problems until I found the below approach.

Setup

Download the full source from Github { the LESS version }

https://github.com/twitter/bootstrap This is the full core of the framework. It will take some learning if your not already using LESS but it shows how the features are truly built. If you haven’t already viewed bootstrap like this take some time and examine the files and learn which features are created through each file, there are quite a few and learning where they are defined will help later when you want to build off of them or over-ride their look and feel.

Get the right tools

I use a compiler which took some time to getting used to as a front end guy who’s previous experience with compilers was Dev C++ in an intro CS class. I’ve come to find with a little flexibility in my workflow it speeds things up and can help with debugging as I’m adapting to using LESS instead of just CSS. I currently use CodeKit which offers some cool js and framework support. It is a paid app so if your just getting started you might want to try some of the free options { LESS for Mac, WinLess ( ironic ), Simpless, or Crunch. }

Set up your development project

Recently at WordCamp here in St. Louis I discussed theme development best practices and one of the concepts I covered was abstraction. The concept holds true in the method I use to work with bootstrap which I find to work really well. I start with a basic project folder for the site name or project I’m working on and create the basic folder structure for the types of files I will be using. I also add a folder called bootstrap to contain the frameworks less files.

Now I copy over the files from bootstrap that I downloaded from Github into the appropriate directories minus the tests folders that were used in development. Now I have a clean folder structure with some basic assets to start using on my project.

Getting started

Now that you have a basic site structure lets set up our compiler with some resources and instructions on how to produce our styles. First inside of our less folder lets create some .less files to tell the compiler what we are working with. I start with a

  • style.less { the master file },
  • layout.less { general layout },
  • theme.less { colors, buttons, etc }
  • typography.less { for headings and type faces }
  • misc.less for mixins and utility classes.

Once these files are created open your style.less file and add the following lines.

/* my new bootstrap site */

@import "../bootstrap/bootstrap.less";
@import "../bootstrap/responsive.less";

// import your unique less files as you build

@import "layout.less";
@import "theme.less";
@import "typography.less";
@import "misc.less"  // mixins etc

Once you have created these files and this structure you can open your compiler of choice and add your new project. In CodeKit you simply click the (+) plus sign and browse for your site folder. Once you have chosen this lets modify the compiler behavior.

Basically we want to make sure it is detecting the import statements and that it is only compiling the single style.less file. Also if it doesn’t automatically set the output path for the compiled css you will want to right click and tell it to use /css/style.css. Now we can get started on building our new site with less and the power of bootstrap so if your not already confused read on.

File Strategy

I mentioned before that one of the key things I’ve learned as a developer is abstraction. This concept is constantly at the back of my mind when I’m working on a project because I find its the best way to build readable clean code that someone else may have to work on down the road after I’m finished working on a project. When I set up my less folder with those basic files in the previous step its just a starting point. As I get further into a site I will create several more less files and import them into the style.less file so they are compiled into the final css. This maintains clean easy pieces in my code that are easy to digest.

I also heavily comment using less comments // as they don’t end up in the css and are a courteous way to document my train of thought as I’m working on a layout.

The key thing is to not be afraid of files.

With this method and less they are compiled into one css file so your not adding a bunch of extra http calls and damaging your sites load time by keeping everything broken out and readable. You can even take optimization a step further when your ready to put your site into production and only import the bootstrap files that actually pertain to your design.

Wait.. what ?

Yes. If you open the bootstrap.less file from the framework you’ll see they are doing the same thing with import statements so you can lower the end size of your css file by only pulling what you need!

Closing

This has taken a couple of months for me to refine and get comfortable with but now I’m finally starting to see the benefits as I work with a team of developers on larger projects. This organization lets us minimize development time and makes our code easier to understand without lots of instruction and I hope it helps you on your development projects in the future. If you see improvements that can be made I’d love to hear your feedback or findings while you experiment.

Happy coding.

So I just launched my new WordPress theme. This was more playing catch up than a marketing tactic. I have been working with WordPress for almost five years now but have been so busy with client work and freelance projects that I had left my site to rot.

I regrettably was using a theme I tweaked from twenty ten which was clean but didn’t really capture my style or current WordPress theming capabilities. I also have until recently gotten way behind in my writing activities so rebuilding is a good way for me to get involved in my site and the fun in having a WordPress site.

The latest theme is built from scratch using twitter bootstrap and some tweaks I have learned along the way. There is still plenty of things I want to polish on the theme, but I think some of these initial development discoveries deserve consideration if you are building your own WordPress themes.

Tools I’ve recently adopted

Beyond my standard tools { textmate, terminal and a browser } I started working with a couple of new tools in my development workflow.

The Less App for Mac

This is a simple app but when handling several less files from a framework like bootstrap it takes a lot out of the guesswork and helps get a solid workflow. Some less knowledge is needed but after this theme and several of the latest ones at work I’ve found this language speeds up css development considerably and is well worth the effort to explore.

The developer also has another project some of my co-workers and I are testing right now called code-kit which also looks very promising

Twitter Bootstrap

Yes… I know lots of very important well known developers have already talked about this framework. I admittedly have been looking it over for a year and just now am really learning how to use it to speed up my projects and simplify my development workflow.

If you haven’t reviewed this yet, I can’t recommend it enough and I hope to have many more posts in the future discussing techniques to customize it and use it for project specific functionality.

Github

Yes I know this is old news. Yes I know you are probably way cooler and nerdier than me and have been using this for years. I first learned about github and WordCamp two years ago and now finally understand why it is so important. At Integrity we now use git daily to manage all of our development projects. This is an amazing tool and when working in a team setting it makes collaboration more efficient. The secret to using this in my opinion is branching and I plan to write another post soon on my git workflow for WordPress theming.

Search Wordpress.org Codex

Lastly I use an awesome but simple chrome extension that I use constantly for instant access to the WordPress Codex. When I learned PHP the first think I learned was how to search php.net for functions and documentation so that approach has guided all that I have researched and learned about developing with WordPress. This extension allows me to just open a tab and type “wp” + space + “function, term, or keyword” and immediately jump to the source for documentation. I recommend this extension to all of our new developers and hope you too can find it useful.

If you’ve used one of these tools and think their awesome or think they are sub par to a solution you have found let me know via a comment. I’ll be writing again soon time permitting on some of the workflows I’ve developed with these tools and any new finds. Thanks for reading.

So thanks to my awesome boss Ed @ Integrity I was recommended, and will be giving a chat with my rad comrade Arod this year at WordCamp in St. Louis.

We’re planning a chat for developers that focuses on how to architect a really awesome WordPress theme. Our focus is on how using custom post types, custom meta boxes, and admin customizations can make WordPress a true CMS and easy for clients to learn.

I’m posting the slides on a new service I found created by the guys at Github called Speaker Deck. I like the so far and its simple. It creates your presentation in by uploading a pdf, this makes prep minimal and I get to avoid powerpoint.

Arod and I still have plenty of prep to do but we’re super excited. This will be the first year we have presented and my third WordCamp to attend.

Check back for a follow up post on the details of the event and links to the slides from our chat

UPDATE

Arod and I had a great session that was standing room only! We totally enjoyed the experience and had some really encouraging feedback.

Here are the slides from the presentation for all those interested