Leveraging Prettier and Eslint in Sublime Text 3 for cleaner code

Prettier has been getting a lot of attention recently – and rightly so; it’s a simple and effective way to ensure a consistent style across your code base. By configuring a limited set of options, you can quickly set up Prettier to format your code in your favourite IDE using one of the respective plugins (Atom, VSCode and Sublime, for example). You can then have it automatically format on save or if you prefer a little more control, on a specific key binding.

Continue reading

UX Power Tool Time

Jon and I are a lot like like the dynamic duo of Tim “The Toolman” Taylor and Al Borland from the 90’s TV show, Home Improvement: We often wear flannel and blue, one of us can grow a beard, we love dad jokes, and we each have different perspectives on our industry.

Source

Creating infinitely scalable connection arrows in Sketch

When wireframing your next big idea in Sketch, you may find yourself creating arrows on your canvas to show how screens might flow. It’s all fun and games until you need to scale or stretch one of your arrows and you find yourself with a distorted mess.

Source 

: &​​

A Quick Thought on React, Redux and ImmutableJS

I’ve been struggling to decipher the ImmutableJS documentation and while I can appreciate the benefits, the learning curve has been steep. I therefore wanted a way to ensure that if I later change my mind about implementing ImmutableJS, I had an easy way out without having to recode every React component in an ever growing app.

 

I want to keep my components clean of other frameworks (as much as possible) and this includes having zero ImmutableJS code in there. Note that I am using Redux but I don’t think it’s a requirement to maintain this philosophy.

So I use a selector in my reducer file (but you could just have a file where you keep your ImmutableJS abstractions):

 

export const getMyThings = (state) => {
  return state.get('things');
};

Then my container component has this little function (if you’re not using Redux you can still use a similar method to inject the selector as props):

 

const mapStateToProps = (state) => {
   return {
    things: getMyThings(state)
  };
};

 

Finally, my component can simply use it’s props without worrying about ImmutableJS:

 

class ListOfThings extends Component {
  render() {
    return (
      this.props.things.map(t => <ThingItem key={t.id} thing={t}/>)
    )
  }
};

export default ListOfThings;

Voila! Clean component, abstracted ImmutableJS. So when you finally get tired of tearing your hair out over the impenetrable ImmutableJS docs, you can switch it out without having to recode every component in your app.

 

Just my $0.02 as a relative n00b to React, Redux and ImmutableJS:

gamebeacon is coming

gamebeacon is the new mobile native app that lets you quickly and easily connect with like-minded Destiny players for Raids, Story Quests, Missions, Crucible action or just rolling out on Patrol. All from your mobile device.

The interface has been specifically designed for use on mobile and will allow you to quickly configure a beacon to find other players. Alternatively you can scroll through the list of existing beacons to find players who are looking for a Guardian just like you to venture forth.

With push notifications to help keep you informed on your beacons or those you’ve joined, gamebeacon will quickly become your essential companion for finding new Destiny players.

beacon list

Check active beacons. Use the date slider to see beacons in the coming week.

create a beacon

Simple swipe interface to create new beacons

 

A Line in the Sand: Part 3 – A New Line

You remember last time I posted a code article I mentioned I was careful about biting off more than I could chew?

 

[adsense]

Continue reading

Pure CSS Parallax Scroll

Depending on who you talk to, parallax scroll may have run it’s course or may be the best thing since sliced bread. Personally, I think when used in interesting ways that enhance the user experience, it can be an effective and visually appealing tool. I also think it’s way overused and more often than not hinders the user experience.

Anyway, I stumbled across this article that can at least help get past one of the gotcha’s of parallax scrolling – performance. By using pure CSS you allow the user’s hardware to do almost all the heavy lifting, resulting in buttery smooth frame rates. You could even leverage media queries to do responsive parallax 😮

Check it out and let me know what you think in the comments below.

A Line in the Sand: Part 2 – Weapons of Choice

Now I’ve drawn the line, it’s time to clearly define what tools I’m going to use to accomplish the task.

First up, I should point out that there are some key goals for this project:

  • It needs to be achievable – there’s no point going in all gung-ho and biting off more than I can chew so I’ll be sticking to languages I know already, but will use new frameworks and API’s to get the job done.
  • I’d like it to be a mobile app first – I may move on to creating a desktop version later.
  • Given that I don’t know enough Objective-C or Java to create native iOS or Android apps, I’ll be sticking to web based tech….for now.

Having thought about it for a couple of days and done a little research into each of the potential technologies I could use, this is how I think it will pan out:

Primary Framework: Angular.js

There’s interest in using this framework in my day job and it’s something I’ve had my eye on for a while. It’s also JS based which means I don’t have to learn a new language from scratch.

Secondary Framework: Ionic

In wanting to keep this mobile for now, I was looking for a framework that was specifically built with mobile in mind. Ionic seems to fir the bill perfectly and it’s optimised for Angular.js

Primary API: ebay

Clearly if I want to create a client that lists your ebay watch list, I have no choice here 😀

With this high level stuff in place, next time we will look at drawing up some basic wireframes.

 

A Line in The Sand: Part 1 – The Line

I made a conscious decision this week to try some new coding tech. In the few days since making that decision I’ve been wrestling with what form this “new tech” will take and I think I’ve come up with something…

 

[adsense]

Continue reading

Book Review: Backbone.js Blueprints

Backbone Blueprints

 

I was initially a little worried – chapter 1 starts by throwing you in at the deep end with some server side code to set up the infrastructure for the first example app – a blog and commenting system. I need not have worried…

 

[adsense]

Continue reading