Webpack and Compass

Webpack is the greatest and latest in build systems. Every time I encounter an issue or wish Webpack did something a little googling solves the problem.

One problem that I couldn’t google and figure out was getting compass to work with sass-loader. Not just making it work but still allowing regular compass to compile on the command line.

Thankfully there is a mostly simple solution. The only thing (to my knowledge) that this won’t work with is sprite generation. Sounds like we need another loader.

Lets get to it.

This is all assuming you have webpack installed with a basic config. If that isn’t the case we’ll need webpack, raw-loader, style-loader, and sass-loader npm installed.

Your webpack config may look something along the lines of

1
2
3
4
5
6
7
8
    module: {
        loaders: [
            { 
                test: /\.scss$/, 
                loader: "style-loader!raw-loader!sass-loader"
            }
        ]
    }

This is where you’re running into your issue where node-sass can’t find the compass import.

Thanks to igosuki, compass mixins has been ported to just a bunch of sass-mixins outside of the ruby gem. https://github.com/Igosuki/compass-mixins.

So now do a

1
npm install compass-mixins --save

Now we just need to modify our loader config.

1
2
3
4
5
6
7
8
    module: {
        loaders: [
            { 
                test: /\.scss$/, 
                loader: "style-loader!raw-loader!sass-loader?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")
            }
        ]
    }

Now node-sass should be all setup to to look in our compass-mixins/lib to resolve compass mixins. If you are running your build script from a different location you’ll have to adjust the path.resolve to resolve to wherever your node_modules is at.

Alternatively you can place this outside of node_modules or add additional include_paths for wherever your SASS mixins live.

1
2
3
4
5
6
7
8
    module: {
        loaders: [
            { 
                test: /\.scss$/, 
                loader: "style-loader!raw-loader!sass-loader?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib") + "&includePaths[]=" + path.resolve(__dirname, "./mixins/app_mixins")
            }
        ]
    }
Tagged under compass, sass, scss, webpack

PhantomJS Creating & Connecting to Server

At my work we are a Java shop. So spinning up a server is quite a process. Additionally our static front end files are spread out across the system and we use RequireJS (ugh) to wrangle everything. Then in order to test we were running a selenium test to hit the test_runner page and wait for mocha to run and the tests. This is so unbelievably slow and quite hectic when it comes to managing relative paths of our config.

So to make things simpler I decided it’d be in my best interest to use PhatonmJS. I decided to spin up a server using var server = require('webserver').create(); and manage the requests and just route and serve up all the correct files. I thought this would work however I ran into a snag. Here is some sample code below

1
2
3
4
5
6
7
8
9
var server = require('webserver').create();
var url = 'localhost:8000'
server.listen(url, function(){ 
  console.log('someone connected');
})

page.open(url, function(status) {
  console.log(status);
});

Well I thought this would work based upon the docs but I was wrong. status would be success but the log on the server would never trigger. So I started mixing it up, here are a few things I tried.

var url = '127.0.0.1:8000'

1
2
3
4

server.listen(8000);

page.open('127.0.0.1:8000');
1
2

server.listen(8000, {keepAlive: true});

After spending an hour debugging and attempting to not flip a table I figured it out. Apparently the solution was to add http. Example:

1
2
3
4
5
6

server.listen(8000, {keepAlive: true}, function() {
  console.log('sucess');  
});

page.open('http://127.0.0.1:8000');

So I got it working, I was sending the files down but on larger files I was continually getting PhantomJS throwing Parser errors. I was setting proper content types and with keep alive connections you have to send the content lengths. The solution? Get rid of keepAlive:true. I was under the assumption it was necessary, it was also in my code when I actually got a successful connection so I assumed it was necessary. In the end it was very simple and probably a result of some minor idiocy on my part and slight lack of documentation.

If you ever need to have your unit test server up CSS/JS/HTML, even mock Rest API end points, server up mocked data (there are better ways to do this) then here is your PhantomJS solution.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

var PORT = 8000,
  url = 'http://127.0.0.1:' + PORT,
  server = require('webserver').create(),
  page = require('webpage').create(),
  fs = require('fs'),
  system = require('system'); // This was used to take in args to change what PORT to connect to but not necessary for most people

var contentTypes = {
  
  'css': 'text/css',
  'html': 'text/html',
  'js': 'application/javascript',
  'png': 'image/png',
  'gif': 'image/gif',
  'jpg': 'image/jpeg',
  'jpeg': 'image/jpeg'
};

  server.listen(PORT, function(req, res) {


      var filePath = fs.workingDirectory + fs.separator + req.url.split('/').join(fs.separator), // make it OS agnostic
          fileName = req.url.split('/').shift().split('?')[0], //remove any query string
          ext = fileName.split('.').shift(),
          fileContent = '';

      res.statusCode = 200;
        res.headers = {
          "Cache": "no-cache", 
          "Content-Type": contentTypes[ext] || 'text/html' //no content type?
        };


      if (fs.isReadable(filePath)) {
          fileContent = fs.readFile(filePath);
      } else {
          res.statusCode = 404;
          //maybe 501? Your error codes may vary
      }

      res.write(fileContent);
      res.close();
      
  });


  page.open(url, function(status) {

      if (status !== 'success') {
          phantom.exit(1);
      }


  })


This is very basic and assumes your running in the root of your files you need to server. In my case I wasn’t and had to do some additional parsing and mapping of the URL to get the correct filepath but it should be a decent start for you.

Tagged under css, file, html, img, js, phantomjs, server, server, static, testing, unit

Phonegap 3.4 GeoLocation

It doesn’t appear to be just me but PhoneGap can be incredibly difficult to use. Simply because any information pertaining to the most current version of phonegap is so fragmented. A google search will reveal virtually nothing about the error messages you’re receiving and how to remedy them for current versions.

For example, I was attempting to use the GeoLocation API. Could care less about the extreme accuracy. After attempting to use it I was getting an Error Code 2 , failed to start geolocation service. Well maybe that was my fault for enabling enableHighAccuracy but wait you have to enableHighAccuracy for older versions of android otherwise it won’t work. Or was that only for older versions of the geolocation plugin which then got deprecated in some versions of android in favor of the native browser geolocation API because it provides better and faster GPS locations. In the end the fault was all mine, I had simply forgotten to include the plugin in my config.xml

1
<gap:plugin name="org.apache.cordova.geolocation" version="0.3.8" />

Version 0.3.8 was the current version at the time of this article. Actually released on June 5th, 2014 just before the article written on June 6th, 2014.

I’ve sort of determined that the only real reliable way to determine anything is just to look at the release notes on github for the best most up to date information.

To end I should say I really love PhoneGap and all of the time and effort people are putting into developing it. The documentation and information about current versions is fragmented, and rather than ranting I should be helping out and contributing to documentation and solving the problems. That should always be the goal if you find a problem in the open source world. Don’t rant, help out, and that is what I will do.

Tagged under 3.4, documentation, geolocation, gps, phonegap

Socket.io on Android + Phonegap

WebSockets are wonderful, they are one of the cheapest ways to get realtime communications into your web app. They’re also a great way to get realtime communications into your mobile application. AJAX is great but wasn’t applicable to my needs. Developing PDXLiveBus app required the server to handle all requests to TriMets servers and use AJAX to request the state of particular buses/routes was less realtime than I wanted. I could go more in depth about my usage and experience but the main point of this post is to prevent some table flipping.

I had it all working in browser however it was not working when I did my phonegap serve. It just would not connect, nor even error out ( I don’t think I waited long enough). I had been using https://github.com/mkuklis/phonegap-websocket, which Android WebView (what phonegap utilizes) doesn’t support WebSockets until Android KitKat (4.4). I think this is a tremendous oversight, but I digress. I attempted various things to get phonegap-websocket to work but I just couldn’t.

The real problem wasn’t with phonegap-websocket it was with my own server code. I had allowed CORS for the restify REST API I had setup but had forgotten to allow CORS for Socket.IO. It all came down to this single line of code.

1
io.set( 'origins', '*:*' );

Yeah not the most secure but then again I don’t think I have a choice since everything is being served from phones and not a particular domain. Also I’m dealing with public transportation vehicle location which doesn’t necessarily needing extreme security.

So if you can’t get Socket.IO to work on your Android Phonegap app, add phonegap-websocket and make sure you have allowed CORS on your server.

Tagged under android, javascript, mobile, phonegap, socket.io, websocket, websockets, webview

NonRTE - Part 1

Once again stealing from antimatter I think writing about what you’re currently building or have built is a good way to gain some clarity and also provide some value in explaining the topic. I’ll be talking about NonRTE a non-contenteditable rich text editor for developers. One similar and the only one I know of is google docs. There are others that aren’t rich text editors and are IDEs like codemirror and a few others that do not use contenteditbale. I personally don’t know of any RTEs that are open source that developers can use and build with but I could be wrong so do ping me if that isn’t the case.

Something that has always boggled my mind was how heavily people have relied on contenteditable. Managing the different ways that contenteditbale is implemented on every browser and versions of those browsers is a nightmare. There is a portion of code in most RTE libraries that change how everything works just for one particular browser. This is insane to me due to the world we live in now with NPM, github, and the open source world at our finger tips. We have amazing templating libraries, HTML parsers, two-way data bindings, word to HTML libraries, excel expression parsers and executors, and everything compiles to JavaScript despite this insane amount of open source code we still use contenteditable.

These aren’t all the components that necessarily build an RTE you have to think about the cursor and positioning it correctly, selection and how to implement that, styling the complexities of every possible selection, resizing the container and line widths no longer being the same (this is the toughest one I think), copy and pasting, selection then clicking and dragging, and many many more components. These all sound hard but once again, if you look around you’ll find varying levels of complete, incomplete, good, bad, popular, and unpopular repos that accomplish much of this. It sounds like I’m saying rip them off, I’m definitely not condoning that so be sure and give credit where credit is due.

I’m sure others have embarked on this particular quest only to fail or give up but I’ll do my best not to. I see a lot of potential in this idea, many of the concepts are also very similar to Ractive. In fact I could implement this even faster in Ractive but have decided to embark on this from scratch just to learn things. It’ll be a fun ride.

At this point I have very basic typing working, the cursor is working and positioned (mostly) correctly, clicking somewhere will move the cursor, arrow keys will move from line to line and character to character correctly and enter to create new lines and split content is also working. Overall it’s a little bit of work but nothing quite substantial yet. The repo lives here https://github.com/browniefed/Nonrte so feel free to contribute. I haven’t hit many challenges yet but I will and when I do I’ll be sure and document them and document the solutions.

Tagged under contenteditable, javascript, nonrte

Ractive.JS Components for Speed and Flexibility

Components in Ractive are crucial if you want to build a flexible application. Hopefully this changes in the future with partials living on the data object and various init options accepting functions rather than static objects. The main purpose of Components is to have reusable template pieces that you can drop in and work the same all over your application. Some examples might be a grid component that accepts rows and columns as it’s data, maybe it’s as simple as a checkbox that has some styling a particular way. Components will help you build consistency through out your application however you should know when to use a partial and when to use a component.

If you’re coming from the Angular world components are much like directives. However since there is no controller concept, or model concept in Ractive there are less headaches in getting components to work with scope and all that jazz.

Enough talk, lets jump in

Example

1
2
3
4
5
6
7
8
var Checkbox = Ractive.extend({
  isolated: true,
  template: '<label><input type="checkbox" checked="{{checked}}"> {{label}}</label>',
  data: {
      checked: false
  }

});

To use it

1
2
3
4
5
6
7
8
9
10
11
var ractive = new Ractive({
  el: 'body',
  template: '<Checkbox checkbox="{{active}}" label="{{title}}" />',
  components: {
      Checkbox : Checkbox
  },
  data: {
      title: 'This is a title',
      active: true
  }
})

Here is the checkbox example I was talking about. Components are just another instiation of Ractive, using Ractive.extend says “use this stuff as the default”. There are a few things to point on.

On the component we have set isolated to true. This means that the template in the component does not have access to the parent data. That just means we couldn’t do this.

1
template: '<label><input type="checkbox" checked="{{active}}"> {{title}}</label>'

In some cases you don’t want your components to be isolated but for them to be modular and reusable it is good to make them isolated. Isolated is false by default.

Isolating your components means you are in control, you can name your data anything. As you see the parent Ractive has active and title but we still reference them as checkbox and label inside the component. Ractive will wire up the keypaths for you and bind everything. So when a user clicks on the checkbox checked will update to false or true and on the parent Ractive active will update to true or false, depending on if the checkbox is checked or unchecked. Further more if you update the title, it’ll propagate down to the component.

1
ractive.set('title', 'This is a new title');

You are two-way data binding on DOM elements to the component as well as to the parent object. This is extremely powerful especially if you’re coming from the jQuery world. There is no more finding the DOM element you want, determining if it is checked, finding the parent wrapping label, updating the text of the label.

This is a very basic example. A more complex example would be the Grid component.

grid-template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
  <tr>
      {{#columns}}
          <td>{{.label}}</td>
      {{/columns}}
  </tr>
  {{#rows:rowIndex}}
      <tr>
          {{#columns:columnIndex}}
              <td>
                  {{rows[rowIndex][.field]}}
              </td>
          {{/columns}}
      </tr>
  {{/rows}}

</table>
1
2
3
4
5
var Grid = Ractive.extend({
  isolated: true,
  template: '#grid-template',
  data: {}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var ractive = new Ractive({
  el: 'body',
  template: '<Grid rows="{{users}}" columns="{{cols}}" />',
  data: {
      cols: [
          {field: 'username', label: 'Username'},
          {field: 'name', label: 'Full Name'},
          {field: 'email', label: 'Email'}
      ],
      users: [
          {username: 'admin', name: 'Admin', email: '[email protected]'},
          {username: 'tg', name: 'Thadius Gorge', email: '[email protected]'},
          {username: 'f999', name: 'Frank', email: '[email protected]'}

      ]
  },
  components: {Grid: Grid}
})

Here is the live example

See the Pen dvqIl by browniefed (@browniefed) on CodePen.

All it takes is some slightly organized data and you’d never have to construct a data table again. More advance component topics are coming in the future this was merely an introduction.

Tagged under Components, JavaScript, Ractive, Ractive.js

Progress reports

After stumbling upon http://antimatter15.com/ and all the awesome things he was doing I noticed that he would post progress reports each month. I often attempt at keeping a daily/weekly journal of sorts but it never pans out. I’ve been trying to get into a decent state of mind to start serious personal development both in my projects and just myself. Reflecting on accomplishments each month is a great way to keep track of that growth. I would always get so in depth and fine-grained with everything that I did that it was pointless. I had some fantasy that if I kept a good enough diary that if I was rich and famous in the future that people would want to read my story. I’d have an account of every little thing that I did and people could attempt to replicate it to a T. Typing that out just sounds insane.

Where I go from here we shall see. I have a few goals I’d like to accomplish for 2014 but am going to take it one week at a time. Weeks seem like they are small enough that I can sit down on a Sunday and plan out what I want to accomplish by the next Sunday. With little weekly notes I can compile the monthly progress report. Planning stuff out will be a new concept for me since I generally shoot from the hip and do what I feel like.

Some of my goals for 2014

  • Become a bigger contributor to Ractive.JS
  • Do a public talk at a meetup on any subject
  • Start my own library and get some small adoption. Currently focused on NonRTE (what a terrible name)
  • Do freelancing/client work one client at a time in technologies I’m not as experienced in (have people pay me to learn). One new one every 2 months.
  • More meetups ( at least 3 a month ), more free coding on other projects that have some sort of benefit to the world ( hackoregon, etc)
  • Code Every Day. Simple. I must write code, documentation, a blog post, anything worth while and it must be public and visible on github.
  • Work less hours, get more done in the 40 I’m paid for. I love work, I love my job but I work too much and in the end I’m working to accomplish someone elses dreams and not my own. I will focus on putting in a better 40 hours. How I do that I do not know but there are plenty of productivity methods I’d love to try and see what sticks.
  • Play with other technologies more. JavaScript is the future but I always enjoyed playing with other languages. I’ve some how lost this curiosity over the course of becoming an adult.
  • One blog post a week. This isn’t a tall order by any means. It can be a small tutorial on CSS, JS, cool things I saw. Just write something of value.

That’s a tall order for 2014 as it’s almost half way over but I’ll be turning 24. My 15 year old self said I’d be rich and retired at 21 so I’m already behind.

That’s it from me

Ractive.JS - Next Generation DOM Manipulation

Next generation DOM manipulation is right mainly because you don’t have to do any. Ractive uses declarative binding(like Knockout and Angular) but also uses reactive programming methods (like React). The different is that it does do DOM diffing like React or dirty checking like Angular but utilizes dependancy tracking. Meaning it tracks the changes you make and will update the DOM accordingly. Now there are inherint issues in that ou can take performance hits if you have a large data set and call “set” within a loop. This will hit the DOM very hard since the nature of dependancy tracking says that “when X changes update Y”.

Meteor and Realtime Transit Mapping - Part 1

Overview

The point of this series is to help people build out realtime transit maps for other cities. This will focus on Portland, OR and their transit system TriMet. They give us access to a wealth of information but all we really need is route numbers that make sense and latitude/longitude to make a map. I have built one for Kansas City, MO but they have their data hidden. Don’t be afraid to dig around on your own transit website to find hidden APIs.

Finally we chose MeteorJS because the whole system is built on realtime applications. Code can be run on both the client/server which is AWESOME! It pretends to be lo-latency, meaning it’ll save the data in client side minimongo databases and not wait for the server to return “yeah we saved”. It also somehow magically invalidates the data correctly. It’s just a framework that works and I can’t wait for the 1.0 release.

As always all code is open sourced. Check out the final project here https://github.com/browniefed/livemet

Setup

APIs

Go to http://developer.trimet.org/registration/ and get an API key. The documentation we care about is here http://developer.trimet.org/ws_docs/

Meteor

Currently on Mac/Linux are officially supported and Windows has an unofficial installer. But you can’t use Meteorite on Windows which you want meteorite! To install simple go here and follow the instrutions(2 steps!) http://docs.meteor.com/ Step 2 being creating a meteor project

1
2
meteor create realtimetransit
cd realtimetransit

Now that you have a meteor app created, change directory into so when you execute commands it actually does stuff to your meteor project.

Meteorite

Install meteorite. I’m assuming you have node/npm installed. If not go install it so you can actually use modern tooling! Simply run (you may not need the sudo -H)

1
sudo -H npm install -g meteorite

For more info and all meteor packages visit https://atmosphere.meteor.com/wtf/app

Step 1 – Create some Boilerplate

Meteor has a specific folder structure that it uses to load the server/client/public data. Delete the stuff they auto-generated for you, we do not care about it. Then go ahead and create this folder structure in your meteor app.

1
2
3
4
5
6
7
8
9
10
client
-css
-helpers
-js
-sass(I setup a compass project but you do not have to)
-views
-main.html
-main.js
collections
server

Read more about this file structure here http://docs.meteor.com/#structuringyourapp

Step 2 – Get some templates created

If you have meteorite installed add the leaflet package. We are going to use leafletjs + Open Stree Maps because they’re both AWESOME. You could also create your own map tiles using TileMill, or use MapBox for hosted tiles but that is a topic for another time.

Run

1
mrt install leaflet

Meteor is special in that it takes ALL html files in specified directories, bundles them up and turns them into Handlebar templates. main.html is going to be our base template, this will load another template called body, which will load other templates. This is what we call structure.

1
2
3
4
5
6
7
8
9

<head>
  <title>PDXLiveBus - Trimet Realtime</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
  {{> body}}
</body>

Now lets create the body template in the client/views foler Each template is to be wrapped in a template tag and given a name so that meteor can create a reference to it.

1
2
3
4
5

<template name="body">
{{> map}}
</template>

Hey look, now it wants a map template, lets create one.

1
2
3
4
5
6
7
8

<template name="map">
  {{# constant}}
  <div class="map_container" id="map_container">
  </div>
  {{/constant}}
</template>

The {{#constant}} tag tells meteor that it should ignore it’s auto updating features when data changes and leave this template portion alone. If we didn’t then our map would be constantly be refreshing if we happened to have a parent template with data that changed. We do not in this case but it’s best to add it. There are improvements being made to meteor so that you won’t have to do this in the future.

Step 3 – Get a map rendering

Now we’re going to get into some meteor javascript.

1
Template.map.rendered = function() {}

The Template is a global object where all templates get loaded. The map is the name of our map template. Because Meteor renders a series of templates we are unsure when the DOM is going to be ready. They give us the rendered function which means the DOM for this template is now ready to be worked with. What that means for us is that we now have a container to add a map to.

Lets add a basic map to it with Open Street Map tiles

1
2
3
4
5
6
7
8
9
10
Template.map.rendered = function() {

      var w = window.innerWidth;
      var h = window.innerHeight;
      $('#map_container').css({width: w+'px', height: h+'px'});
      var map = L.map('map_container', {maxZoom: 19, zoom: 13, zoomControl: false, center: ['45.525292','-122.668197']});
      map.attributionControl.setPrefix('');
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
      L.Icon.Default.imagePath = 'packages/leaflet/images';
}

Because we are unsure of how big the the users window is going to be (destkop/tablet/phone/etc) we will just set the map container to that width. Ours just happens to be the full page.

Because the way meteor works L was defined globally on the client side when we included that package with meteorite. So we’ll create a map by passing in our map_container ID that we know is ready to use, and center it in Portland. The other parameters are fairly self explanatory and well documented on Leaflets website.

We remove the attribution from the map but we’ll add it back in elsewhere. This just removes the tribute to Leaflet for it’s awesome library.

Finally we set a tilelayer. This is a standard tile map link.

1
2
3
4
{s} = Subdomains to get tiles from(this parameter is just to get around browser limitations on simultaneous HTTP connections to a single host)
{z} = Zoom level
{x} = X Coordinate
{y} = Y Coordinate

A deeper exploration into how tile servers work can be found here http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers

Now we can run meteor and all should be well. You should have a map that completely fills your window.

Part 2 getting Trimet data. Part 3 adding markers and animating their movements

Tagged under maps, meteor, meteor.js, relatime, transit, trimet, websockets

hey it’s a post

Hey it’s a post on my github.io account

1
var heyoooo = '';