[ { "title": "Darkmate Color Scheme for Vim", "subtitle": "", "description": "The Darkmate theme for the gedit is one of the best themes out there. However, other text editors such as VIM do not have their own port of the darkmate theme ... but now there finally is one offered exclusively by yearofmoo.", "image": "/images/patterns/hills.png", "type": "post", "date": "Apr 17, 2011", "updated": "Apr 17, 2011", "href": "/2011/04/darkmate.html" } , { "title": "What to do when you lose motivation", "subtitle": "", "description": " When your motivation runs short, its time to make some changes In an effort to contribute more and more articles online which focus on more "human" areas of work and development in the Web Development and Computer Science field, this article covers some blocks which just about everyone runs into in their day to day life as a programmer, designer, developer or code monkey. Your work, your life, your way of thinking is what gets you from point A to point B. It doesn't matter which side of the fence you stand, whether it be Web Development, Open Source development, Rails, PHP, Functional or Imperative programming ... you will run into the same problems in the end if you don't take the next step forward. On occasion, however, everyone runs into blocks, burns out, gets unmotivated or just completely starts to hate their work and life in relation to what they're doing. What's important is not to get stuck or depressed about it, but to analyze and reflect on what's bothering you and move past it.", "image": "/images/patterns/two.png", "type": "post", "date": "Jun 11, 2012", "updated": "Jun 11, 2012", "href": "/2012/06/what-to-do-when-you-lose-motivation.html" } , { "title": "Cross Browser Stylesheet Preloading", "subtitle": "", "description": " Preload stylesheets with ease Since this website focus is primarily on JavaScript and AJAX, I figured it would be worth while to discuss the mechanics behind cross-browser stylesheet preloading because this topic hasn't been effectively solved and discussed about online. Preloading (downloading in the background) stylesheets is tricky, but its a solid requirement for creating advanced AJAX-based websites. So how do we get this to work? What's the problem? To preload a stylesheet file, we simply create a ** tag with the attributes rel="stylesheet", type="text/css" and href="/path/to/stylesheet" and set an onload property right? Well, popular browsers such as Chrome, Firefox and Safari do not support the onload event/property for link tags, so natively there is no method of getting the onload event to fire when the stylesheet has been loaded.", "image": "/images/patterns/brownies.png", "type": "post", "date": "Mar 23, 2011", "updated": "Mar 23, 2011", "href": "/2011/03/cross-browser-stylesheet-preloading" } , { "title": "AngularJS and SEO", "subtitle": "Turns out it is possible to have your AngularJS application indexed", "description": "AngularJS and just about all JavaScript MVC frameworks modify the contents of your HTML structure which make the pre-rendered HTML invalid for search engines. Luckily there is a way to get around this and to have full SEO support for your AngularJS application by using some special URL routing and a headless browser to retrieve the HTML for you. Continue reading this article to figure out how to make this amazing framework work well with your favourite search engines.", "image": "/images/mookins/card/murf.png", "type": "guide", "date": "Nov 7, 2012", "updated": "Nov 7, 2012", "href": "/2012/11/angularjs-and-seo.html" } , { "title": "Custom Cross-Browser CSS Properties", "subtitle": "Cross-browser support for custom CSS properties is possible you know", "description": "If you've been developing websites for a while you may have wondered if there is anyway to set custom properties in your CSS code and have some piece of JavaScript code read and make use of the data. This isn't supported by browsers as of now, but if it where then imagine what we could do with our application? By having custom CSS properties, our JavaScript code could take over from where CSS code reaches a limitation. We could delegate all of the UI-related customization into our stylesheets and make use of media queries without having to have another set of customizations within our JavaScript code. Oh man, if only this was possible. Well, using some clever CSS hackery and a custom build script, we can make use of custom CSS properties within all modern browsers. Let's explore how to make use of this ground-breaking new feature and see how it all works behind the scenes.", "image": "/images/mookins/card/pears.png", "categories": ["css"], "main_category": "css", "type": "guide", "date": "Apr 8, 2015", "updated": "Apr 8, 2015", "href": "/2015/04/cross-browser-custom-css-properties.html" } , { "title": "Rendering in Angular2", "subtitle": "Get an idea of how Angular2 internal rendering system works", "description": "", "image": "/images/mookins/card/lucky.png", "categories": ["angular"], "type": "guide", "date": "Feb 17, 2016", "updated": "Feb 17, 2016", "href": "/2016/02/rendering-in-angular2.html" } , { "title": "Advanced Testing and Debugging in AngularJS", "subtitle": "Learn to test your AngularJS application like a Pro using the latest and greatest", "description": "AngularJS is becoming immensely popular and mainstream which means that there is a lot of AngularJS code out there that is being tested or is yet to be tested. And now that you're well on your way to test like a pro, thanks to the abundance of articles, tutorials, books and material out there on AngularJS testing & development, testing should be a mandatory process of your web development workflow. Full-Spectrum testing with AngularJS & Karma taught us how to test certain areas of your AngularJS application, but how do we test efficiently? How do we debug a problem down the root cause? How do we skip tests, set breakpoints, and professionally mock-out our test components so that we can catch hidden bugs and unexpected scenarios? How far can and should we go with Unit & E2E testing? What else should we consider. Well lets take a deeper dive into testing in AngularJS and expand our minds by learning how to become a professional front-end tester. ", "image": "/images/mookins/card/manbearpig.png", "categories": ["angular","testing"], "main_category": "angular", "type": "guide", "date": "Sep 26, 2013", "updated": "Sep 26, 2013", "href": "/2013/09/advanced-testing-and-debugging-in-angularjs.html" } , { "title": "A New Wave of Animation Features in Angular", "subtitle": "Learn to make use of the awesome new animation features in Angular 4.2+", "description": "", "image": "/images/mookins/card/snowmoo.png", "categories": ["angular","animation"], "main_category": "angular", "type": "guide", "date": "Jun 9, 2017", "updated": "Jun 9, 2017", "href": "/2017/06/new-wave-of-animation-features.html" } , { "title": "Enhanced Animation in AngularJS", "subtitle": "Learn how to make even better animations in AngularJS 1.1.5", "description": "AngularJS Animations hit the web last month in version 1.1.4 of AngularJS. While being a advanced feature, animations in AngularJS were a bit too basic for what they were. Now, with version 1.1.5, animations are even easier to use and 1.1.5 comes packaged with more great features for you to play with. With support for CSS Keyframe animations, multiple property durations + delays and a whole lot of fixes. AngularJS animations are better than ever. Want to learn how to make use of these new kick ass animation features with AngularJS? Shift your focus and follow along on another jam-packed yearofmoo article :)", "image": "/images/mookins/card/snowguy.png", "categories": ["angular","animation","css"], "type": "guide", "date": "May 24, 2013", "updated": "May 24, 2013", "href": "/2013/05/enhanced-animations-in-angularjs.html" } , { "title": "How to use ngMessages in AngularJS", "subtitle": "ngMessages is a new feature in AngularJS 1.3 for rending error messages in forms", "description": "Forms in AngularJS are a delight to work with since they naturally work off of the basics of how forms work in HTML. The ngModel directive peacefully works with form controls and the state of a form can easily be examined using the name of the form and the name of each input control. But what about displaying error messages? Since there is no set way of displaying error messages in forms, there are many inconsistent ways to do this in AngularJS. While showing and hiding a message is easy using ngIf or ngSwitch, making use of multiple messages across and entire application is where things get messy. Do we really have to use ngIf over 20 times for a form just to show a handful of messages? How can we reuse a template of messages in other parts of the application? Are forms really this complicated? The new ngMessages module introduced in AngularJS 1.3-beta.8 is designed to render error messages in a reusable and maintainable way. Instead of having to butcher up your template code by placing ngIf statements everywhere, ngMessages listens on the model.$error object and then decides which messages to display based on what is present in the template. Interested in learning more? let's explore the ngMessages and ngMessage directives in detail.", "image": "/images/mookins/card/michael.png", "categories": ["angular"], "type": "guide", "date": "May 9, 2014", "updated": "May 9, 2014", "href": "/2014/05/how-to-use-ngmessages-in-angularjs.html" } , { "title": "Staggering Animations in AngularJS", "subtitle": "ngAnimate now supports staggering animations natively", "description": " 1.0 Introduction Most animation frameworks aim to do the same thing. Whether that be to offer JavaScript or CSS3 animations, a nice and easy to use API, or a quick and dirty integration procedure. Despite all that nice stuff, there is, however, one specific feature that is difficult to properly use and rare to come by ... Staggering Animations. The idea is simple, but the implementation is difficult. Greensock is one, if not the only, animation framework that does this perfectly, but how do we get this to work with an AngularJS application? With the spectacular new features available in ngAnimate let's have a look to see how we can perform this crazy animation effect within our AngularJS app.", "image": "/images/mookins/card/single-brownies.png", "categories": ["angular","css"], "type": "guide", "date": "Dec 18, 2013", "updated": "Dec 18, 2013", "href": "/2013/12/staggering-animations-in-angularjs-matias.html" } , { "title": "Taming Forms in AngularJS 1.3", "subtitle": "Learn how to use the new form features in AngularJS 1.3", "description": "Forms in AngularJS 1.3 have been improved quite a bit from what they were back in 1.2 and 1.1. Lots of bugs for native HTML5 validators have been resolved and new features such as the validators pipeline and asynchronous validations have also been introduced. Packaged together with nested forms and the new ngMessages module, AngularJS 1.3 is more powerful than ever when it comes to developing forms. Let's have a look at these amazing new features and craft together some amazing user input forms!", "image": "/images/mookins/card/minitias.png", "categories": ["angular"], "type": "guide", "date": "Sep 2, 2014", "updated": "Sep 2, 2014", "href": "/2014/09/taming-forms-in-angularjs-1-3.html" } , { "title": "Use AngularJS to Power Your Web Application", "subtitle": "AngularJS is a truly amazing approach to developing JS-heavy web applications", "description": "AngularJS, by Google, is a well-organized, well-tested, versatile, powerful and flexible JavaScript MVC framework for building rich client-side applications. You still may need to have a server-side backend, but the majority of the user-interactivity logic will be delegated to the client-side. This includes stuff like form submissions which are handled via AJAX, model validations, template handling and data-binding. If these things are foreign to you then read onwards and see how you can benefit from building web applications in a much more radical way.", "image": "/images/mookins/card/dragon.png", "categories": ["angular","testing","css","html5"], "type": "guide", "date": "Aug 14, 2012", "updated": "Aug 14, 2012", "href": "/2012/08/use-angularjs-to-power-your-web-application.html" } , { "title": "Animation in AngularJS", "subtitle": "Learn how to make use of the new animation hooks in AngularJS", "description": "", "image": "/images/mookins/card/snowmoo.png", "categories": ["angular","animation","css"], "main_category": "angular", "type": "guide", "date": "Apr 2, 2013", "updated": "Apr 2, 2013", "href": "/2013/04/animation-in-angularjs.html" } , { "title": "Full-Spectrum Testing with AngularJS and Karma", "subtitle": "Learn how to fully test your AngularJS application with Karma", "description": "One of the major areas of AngularJS development which needs to be covered in better detail is how to test your application. But wait, how do you do that? How do you setup your test environment? How should you organize your code? How do you setup a runner and how to automate the process? The bigger question is how do you usually test your JavaScript code? Do you use a browser-independent JavaScript tester like NodeJS, V8 or Rhino? Do you use a hidden browser like PhantomJS or Headless Webkit? Or do you go all out and test out your application in a browser or multiple browsers? You may also be wondering what exactly to test in your application? What should my tests really look for? How should I write my specs? As you can see there are many questions to answer. It doesn't take much time to realize that testing JavaScript is difficult and finicky. However, if you wish to get a robust understanding of how to properly test your JavaScript code within your AngularJS application, then continue and read along... :)", "image": "/images/mookins/card/beaver.png", "categories": ["angular","testing"], "type": "guide", "date": "Jan 21, 2013", "updated": "Jan 21, 2013", "href": "/2013/01/full-spectrum-testing-with-angularjs-and-karma.html" } , { "title": "More AngularJS Magic to Supercharge your Webapp", "subtitle": "Make way for another amazing article which covers more of AngularJS", "description": "Due to the popularity of the previous article, Use AngularJS to power your web application, I've decided to cover more of AngularJS to make it fun and easy for all developers to play around with it. AngularJS is an incredible tool, but a lot of the more advanced features are hidden in deep within the documentation and others are too tricky to learn direclty. AngularJS is also a fairly new product and as a result there are many features that are yet to be discovered and blogged about. This article will cover more of the hidden gems of AngularJS and introduce new development tricks and methods to supercharge your AngularJS application. Pleaes read onwards if you wish to become an AngularJS web guru :).", "image": "/images/mookins/card/popsicle.png", "categories": ["angular","html5","javascript"], "type": "guide", "date": "Oct 2, 2012", "updated": "Oct 2, 2012", "href": "/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html" } , { "title": "Remastered Animation in AngularJS 1.2", "subtitle": "Learn how to use the bigger and better animation features in AngularJS 1.2", "description": "AngularJS 1.2rc1 1.2 is out and this brings in a brand-new API for animations using ngAnimate. A lot has changed, but animations are better than ever. With 1.2, animations come full circle with new features such as support for ngClass, class expressions, and callbacks. Animations are also entirely class-based which means so long as a CSS class is present in your HTML code, then animations can be directly hooked into a working application. This article will explain how to perform animations in AngularJS 1.2 with the new API setup. For earlier versions of AngularJS, please use 1.1.5 if you wish to stick to the older API of ngAnimate.", "image": "/images/mookins/card/monster.png", "categories": ["angular","animation","javascript"], "type": "guide", "date": "Aug 14, 2013", "updated": "Aug 14, 2013", "href": "/2013/08/remastered-animation-in-angularjs-1-2.html" } ]