Monkee _mixins.scss



At Monkee-Boy we use and love SASS. This of course means we have slowly put together a collection of mixins and functions that we use all the time. Some of the mixins are pretty common and others we have found helpful enough to want at our disposal all the time. Some of these include vertical-align, centerer, ratio, CSS triangle, font-face, breakpoints, and the typical vendor prefixes. We have the mixins up in a GitHub repo if you feel inclined to check it out. You can install using bower install monkee-mixins or npm install monkee-mixins.

Check out the Monkee-Boy GitHub for more projects. It’s not much right now but more is coming.


How To Quickly Test Google Web Font Speeds


Monkee-Boy - Testing Google Fonts


At Monkee-Boy, we use the constantly growing Google Fonts collection for our web font needs. This comes with several performance benefits: popular fonts are more likely to be cached, Google’s servers are extremely fast, no need to convert for the web, and great selection of fonts.

The right font plays a vital role in great design, but it’s important to note that if your site takes too long to load, the visitor is more likely to leave before even getting to your content. Luckily for us Google knows this and provides an awesome tool that shows you how different fonts will impact your page load.

I recently wrote a post for the Monkee-Boy Blog about quickly testing your Google Fonts. Basically it all comes down to keeping an eye on the number of fonts and font-weights you are using. Performance testing might be something you do at the end of a project during a QA phase but it’s an important part of every project and deserves more attention early on. I’m lucky enough to work with a talented design team who understands and cares about performance just as much as the development team does. The post doesn’t get into any technical performance details and instead is a high level overview so clients understand why selecting 4 fonts and 25 font-weights is not a good idea for their site.


Google Web Starter Kit


Web Starter Kit

Google recently pushed out it’s Web Starter Kit which is a boilerplate for coding responsive sites. Supporting multiple devices, gulp.js, SASS, and browsersync for testing across devices. As it’s another project by Addy Osmani and Sindre Sorhus, at the very least it’s worth checking out. I’ve spent a little time digging around it and pretty excited about what it brings to the table. Besides being a great starting point it also includes a nice visual component style guide which makes it a little more like Bootstrap or Foundation than H5BP. Check out the full code on Github at google/web-starter-kit.

simpleWeather v3.0.0

| |

It has been a long time coming but on Saturday I pushed out simpleWeather v3.0. Saturday also marked four years since the first release of the plugin so felt like as good of day as any for such a big update. It continues to use the Yahoo Weather API but has undergone an extensive rewrite removing over 100 lines of code. Which is either a testament to how efficient my code is now or how horrible it was four years ago.

This update does include some breaking changes, mostly with how forecasts are handled. They are minor and can be easily fixed which makes updating worth it. Some other changes include:

  • Now < 4.0kB file size! This happens when you remove over 100 lines.
  • Fixed http/https issue on API call and image sources. Everything defaults to https now.
  • Forecasts is now an array so you can loop. Also future proofs if Yahoo adds more days.
  • Forecasts now support thumbnail images.
  • Removed tomorrow as it’s handled by forecasts now.
  • See changelog and commit history for more.

Some quick stats for those who like that kind of thing. First release was over four years ago, 59 git commits, 23 version releases, 87 closed issues, 302 stars on Github, 60 forks on Github, and averaging over 7,000 unique visits a month for the past two years. Not the most popular plugin but I’m pretty happy with it for just a simple jQuery weather plugin which isn’t something most people need.

It was also time to update the website, tweak the docs, and finally add demos. Over the past two years I’ve done lots of demos for people asking questions and most end up on CodePen. I finally added a list of a few of them to with more to come. The docs and faq have also been brought up to date.

The Future

simpleWeather will remain under development and I’m always replying to issues or putting up quick demos. However, I plan to be more active in having better documentation and some tutorials on this blog. The first of which should be coming soon. I’m also working with an amazing designer to release a free custom simpleWeather icon and font set. The Yahoo icons are pretty old and not that great to look at. There are lots of other amazing weather icons but most won’t work out of the box with simpleWeather and require a lot of CSS to match up characters with condition code. The plan is one that can be downloaded next to simpleWeather and just work with no extra code. There isn’t a date for this but it’s in progress.

As always if you have any issues or feature requests hit up the repo page on Github.

Continue reading