-
React-ions
I’ve been working with Angular a lot lately and I’ve been wrapped up in learning everything that comes with it, and it’s got me thinking whether full-fledged JavaScript frameworks are all they’re cracked up to be. Don’t get me wrong, I enjoy working with Angular and a lot of how it works and its design makes sense once you ignore the official tutorials and learn the best practices. But it feels like it has a lot of heft behind it, and sometimes the flow of data and UI interaction can get quite confusing once you have a large application.
I’d been seeing lots of mentions of React lately and it intrigued me enough to take a look. What I found were a lot of the things I’ve been thinking are not as simple as they could be in Angular, and a new way of thinking about UI interactions. And I really liked what I found. Now, I know that React is a library, the V in MVC while Angular is a full-fledged framework for building MVVM, MVC and MVW web applications. Library != Framework. So while I won’t be making many direct comparisons between the two, I may mention in this article some differences and similarities between them. Overall though, this is an article about what I like about React, and why I think you should take a look at it and try out some examples, even if you don’t intend to make a production application with it.
read more... -
ES6 Basics
I know I might be a little behind on this post, but I’ve been working exclusively on the front end at my new job and as a result I’ve been much more involved with JavaScript. We are using Angular.js and as part of our strategy of future-proofing (as much as you can for the front end) our application, we are using patterns likely to be used in Angular 2.0, which will use ES6 and Javascript Next functionality extensively. I’ve had to learn a lot of ES6 basics to effectively work with it and Angular together, and this article will go over what I think are the ES6 basics everyone should know.
read more... -
Learning Angular Q&A
While I’ve been learning Angular for the past couple of weeks, I’ve been able to get a pretty good idea of how the framework works as well as a lot of the best practices for it. While reflecting on what I had learned, I came up with several questions for myself to research to get a better understanding of more patterns and what I should use for certain things in Angular. Here are the questions I came up with and the results of my research.
read more... -
Highlighting JavaScript this Keyword in Sublime Text 2
I’ve looked for something like this before but I’ve only recently found it. Sublime Text 2 uses textmate themes which can use regular expressions and scopes to highlight certain keywords that are only relevant in certain languages. I got a new theme which I love called itg.flat and while the colors are great, it was lacking a highlight for the
thiskeyword in JavaScript, which makes in harder to spot and locate scope issues.I found this on a Sublime Text 2 forum post, which highlights the keyword. You just need to add this to the
.tmthemefile for your theme, which will usually be located in{user}/Library/Application Support/Sublime Text 2/Packages/Theme - Name/for Mac and%APPDATA%\Sublime Text 2\Packages\Theme - Name\in Windows:<dict> <key>name</key> <string>Super this (JavaScript)</string> <key>scope</key> <string>source.js variable.language.js</string> <key>settings</key> <dict> <key>fontStyle</key> <string>bold italic</string> <key>foreground</key> <string>#DE4DB4</string> </dict> </dict>You can get rid of the bold/italic if you want or change the hex color code too. You may also want to check out the Sublime Text 2 Color Scheme Editor. Here you can see the result. Before:
After:
-
LINK: AngularJS Styleguide by @john_papa
This AngularJS styleguide, written by @john_papa, has been a fantastic resource for me while learning Angular:
https://github.com/johnpapa/angularjs-styleguide
Among the key takeaways in style that I found most important were the following:
- Wrap all angular components, factories, controllers, and directives in an Immediately Invoked Function Expression (IIFE). This is to prevent variables and functions polluting the global namespace.
- Use named functions instead of anonymous functions to help with debugging (generally a good idea for all JavaScript)
- Use the ControllerAs syntax to get access to
thisfrom the controller instead of using$scope. This is to avoid the “dot problem” in the views. It is also a good idea to assign this to a consistent variable such as VM to avoidthisscoping issues. - Use
$injectto list all dependencies in an array for the component to prevent minification mangling, and huge function declarations including dependencies can be hard to read.
The whole document is a great read though and I really encourage you to read it if you are working on an Angular project.
-
LINK: Using “Controller as” Syntax in Angular Routes
I’m working with Angular routes and trying to nail down the best practices, which includes using the “Controller as” syntax with routes. See this article from Will Anderson for how to achieve this:
Using “Controller as” Syntax in Angular Routes @ Will Anderson
-
LiveReload With Gulp
I’ve started working on a project to learn and use ES6 Modules, Angular, and Gulp, and one of the first issues I encountered was getting LiveReload to work, refreshing my browser every time I changed a file. For those not familiar with the concept, LiveReload works in one of three ways (from the LiveReload FAQ):
read more...To communicate with your browsers, LiveReloads needs its JavaScript code to be injected into your web pages. There are 3 ways to arrange that:
- either add a script tag into your HTML code manually, or
- install a browser extension (that, when activated, adds the script tag to the visited pages on the fly), or
- use a plugin for your web framework (that adds the script tag on the fly when serving requests).
-
Writing and Programming, Crafts Worth Honing
I’ve been doing quite a lot of writing lately, and quite a lot of thinking about writing, and a fair bit of reading too. This of course was one of my goals for 2015, and I’ve been keeping a consistent journal for the first time ever (fourteen days straight and counting). From all of this writing there is one thing I’ve come to realize and it’s that writing begets writing. The more you write, the better you become at clearly expressing your thoughts and ideas through writing and translating them from the jumble in your head to the written word. Your fingers fly across the keyboard with very little barrier between your mind and the keys.
read more... -
Lessons Learned From Building Rain
Tackling a new project is the best way to learn about a bunch of new things and solve a lot of new problems. I’ve recently built Rain, a gem to generate beautiful API documentation from a Ruby comment syntax with markdown mixed in (check it out at https://github.com/martin-brennan/rain!). On the Rain project, I’ve learned a couple of things about gem development that I wanted to share because I think it might be helpful to others.
read more... -
Render an ERB Template from a Hash
I needed to render an ERB template from a hash for external email templates, and found that this is not as straightforward as you might think. I found a blog post on splatoperator.com with a way to accomplish this. Basically, the hash needs to be converted into an OpenStruct before passing it to the ERB template.
Render a template from a hash in Ruby (splatoperator.com)
The important part of the article and the code snippet demonstrating the functionality are below:
You have to set the binding for ERB by saying opts.instance_eval {binding}. This runs binding in the context of the opts object, so then calls to methods like first_name made by ERB in this context will evaluate to the values of our hash.
This will of course result in “Hello Martin Brennan.”
| << Previous | 6 // 11 | Next >> |
Want to read regular updates? Subscribe via RSS!