So many people have tried and are now using `react-static` in production since it’s release last month and we couldn’t be more excited for the future of the library! After using it for ourselves in production for the last month, we wanted to have a quick state-of-the-library and talk about it!

## Straight to it then!
We’ve made a list of the notable features of react-static that have continued to impress us and our users for the last month!

- It’s light. __Very light__. Both in the sense of the bundle sizes it produces, and the codebase itself. It has been very easy to maintain and upgrade, even for first-time contributors!
- Extremely simple api surface. __Feels like you’re using `create-react-app`__ for static-sites!
- __Data-agnostic__. We can’t describe how nice it’s been to work with our data in the most familiar context available: __Simple Javascript__.
- Amazing developer experience. On the daily, we get both new and experienced developers praising it. __It’s just down right fun to use__. 
- Extremely fast build times. There are already websites with __hundreds of pages__ using react-static. Their build times are outstanding.

Just recently, we saw [Timber.io](https://timber.io) move to react-static from Next.js They had this to say about react-static:

> React-Static FTW. Fastest sites on the internet, especially with Netlify. Also, preact-static would be sweeeet :)

Which brings us to our roadmap!

## Roadmap
We’ve got some great things in the pipeline:
- Hardcore SEO utilities. Think Yoast but for React ;)
- Pre-built connectors for notable CMS’s like Contentful, GraphCMS, and more!
- Intelligent data-splitting for JSON files and templates.
- Using react-static for more than just static websites. It’s already been a create-react-app replacement for a few of our users. We’ve also got our eyes set on hybrid environments too!
- Preact Support.

## Come Join the Party!
Whether you want to build a new static-site, SPA, or contribute to an awesome open source library, react-static is worth the investment!

- [Visit the Github Repo](https://github.com/nozzle/react-static)
- [Join us on Slack!](https://react-chat-signup.herokuapp.com)
- Try it right now!

```bash
$ yarn global add react-static
# or
$ npm install -g react-static
# then
$ react-static create
```

React Static Network Panel Screenshot

So many people have tried and are now using react-static in production since it’s release last month and we couldn’t be more excited for the future of the library! After using it for ourselves in production for the last month, we wanted to have a quick state-of-the-library and talk about it!

Dogfooding React-Static for a month: Static-site heaven, upgrades, community growth and roadmap!

At Nozzle.io, we take SEO, site performance, and user/developer experience very seriously. We’ve launched many sites using different static site tools that claim to solve these goals, but we have yet to find one that satisfies our requirements completely. React-Static is the framework we carefully designed to meet those standards and help everyone build next generation, high-performance websites for the internet.

<iframe width="560" height="315" src="https://www.youtube.com/embed/OqbJ5swVpDQ?rel=0" frameborder="0" allowfullscreen></iframe>

<br />

[View React-Static on Github](https://github.com/nozzle/react-static)

React-Static Logo

At Nozzle.io, we take SEO, site performance, and user/developer experience very seriously. We’ve launched many sites using different static site tools that claim to solve these goals, but we have yet to find one that satisfies our requirements completely. React-Static is the framework we carefully designed to meet those standards and help everyone build next generation, high-performance websites for the internet.

React-Static - A progressive static-site framework for React

## Determining the “Indeterminate” Issue
You already know exactly what issue I’m referring to if you’ve ever tried to use a checkbox input with the indeterminate state for something other than a nested checklist. The scenarios are extremely rare, but when come across, people resort to strange ways of creating three way toggleable checkboxes, and hacky select inputs. In Nozzle’s specific situation, we needed a checkbox that could harness 2 “active” or toggleable values, and an off or null state. This would allow us to essentially “turn on” a filter that my have two “on” states eg. an off state, a true state, and a false state.

## A custom directive. Simple and elegant.
Here, I forewent dealing with checkboxes and select inputs all together, and focused on using angular’s magical databinding and directives to get the job done. Click here for the github repo! The AngularJS Triple-State Checkbox
The HTML in your template
```html
<tri-toggle ng-model="myValue"></tri-toggle>
```
Results in a toggle capable of three states:

![ng-tri-toggle](//images.contentful.com/z8uwv83tofbw/2lclksbC8ocWG2QKYysGIc/8b2e6ae7e48b5c5d99a6b0c8b4261f2f/ng-tri-toggle.png)

This is the Javascript you don’t see:
```javascript
  var ngTriToggle = angular.module('ngTriToggle', []);
  ngTriToggle
      .directive('triToggle', function($timeout) {
          return {
              restrict: 'E',
              replace: false,
              transclude: true,
              scope: {
                  ngChange: '&',
                  val: '=ngModel',
                  ngTrueVal: '=?',
                  ngngFalseVal: '=?',
                  ngNoVal: '=?',
                  tanner: '&'
              },
              template: '<div class="tri-toggle-wrap" ng-class="{\'true\': val==ngTrueVal, \'false\': val==ngFalseVal}" ng-click="toggle()"><div class="tri-toggle-false" ng-click="toggleFalse()"></div><div class="tri-toggle-true" ng-click="toggleTrue()"></div><div class="tri-toggle-handle" ng-click="toggleNone()"></div></div>',
              link: function(scope) {

                  if (!angular.isDefined(scope.ngTrueVal)) {
                      scope.ngTrueVal = 1;
                  }
                  if (!angular.isDefined(scope.ngFalseVal)) {
                      scope.ngFalseVal = 0;
                  }
                  if (!angular.isDefined(scope.ngNoVal)) {
                      scope.ngNoVal = null;
                  }

                  if (!angular.isDefined(scope.val)) {
                      scope.val = scope.ngNoVal;
                  }

                  scope.toggle = function() {
                      if (scope.val === scope.ngTrueVal) {
                          scope.val = scope.ngFalseVal;
                      } else if (scope.val === scope.ngFalseVal) {
                          scope.val = scope.ngNoVal;
                      } else {
                          scope.val = scope.ngTrueVal;
                      }
                      if (typeof scope.ngChange != 'undefined') {
                          $timeout(function() {
                              scope.ngChange(scope.val);
                          });
                      }
                  };
              },
          };
      });
```

It gives you the option to define custom true, false and null values:

```javascript
  <tri-toggle
      ng-model="myValue"
      ng-true-val="1"
      ng-false-val="0"
      ng-no-val="-1">
  </tri-toggle>
```

And also gives you a handy callback:
```javascript
  <tri-toggle
      ng-change="myFunction()"
      ng-model="myValue"
  </tri-toggle>
```

**Note: This callback is not a watcher. To detect programmatic changes to your model, set up a `$scope.$watch('myValue')` on your ng-model variable. That’s It!**

Now it’s super easy to create as many tri-toggles as you want with absolutely zero checkbox or select input hacking!

Enjoy!


ng-tri-toggle

You already know exactly what issue I’m referring to if you’ve ever tried to use a checkbox input with the indeterminate state for something other than a nested checklist. The scenarios are extremely rare, but when come across, people resort to strange ways of creating three way toggleable checkboxes, and hacky select inputs. This is a quick angular solution to rid yourself of that scenario.

ng-Tri-Toggle, an AngularJS Triple-State Checkbox Directive

Once upon a time, you built, or planned on building, an large scale Angular application. You probably thought about your file structure and module structure, making sure it fit into a widely used style guide that makes sense. Here at Nozzle, we take our style guides very seriously, and tried to make the best decision on how to modularize, and make our codebase extensible. One problem though, as it seems we could never get rid of were hard-coded image references, and the like. Anything pointing toward a static asset always seemed to start out like so:
```html
<img src="app/path/to/my/assets/images/myImage.png"/>
```

Assuming that you had a lot of images in your design, you probably got used to using find > replace a lot if your file structure changed. But what if your modules needed to be independent and sandboxed? We’ve come up with a tiny trick to help your modules be completely independent, regardless of where they sit in your file structure. This also opens up some shortcuts for a reverse-like dependency injection (importing one module that contains all references to child modules, or simply using a single child module with its parent as a dependency)
Enter Relative AngularJS Modules
Consider the parent module:

```javascript
  (function() {
    'use strict';

    var module = angular.module('myApp.things', []);

    var all = angular.module('myApp.things.all', [
      'myApp.things',
      'things.someThing',
      'things.someOtherThing',
      'things.someOtherOtherThing',
    ]);

    module.root = '/path/to/this/thing/';

    module.config(function(stateHelperProvider) {
      stateHelperProvider.setNestedState({
          name: 'things',
          url: '/things',
          templateUrl: module.root + 'directives/things/things.directive.html',
      });
    });
  })();
```
    
The module is declared, and a shortcut method for importing it and/or all of its children is also created. Then the module itself gains a paths property on which you can store any path to the root, partials, submodules or whatever else you need. Those properties can then be used to create constants for your module to use in your templates, bind to a scope property for use in image src or any other thing needing a file location. But really, what this allows in child modules is even cooler…

```javascript
  (function() {
    'use strict';

    var module = angular.module('things.someThing', ['myApp.things']);
    var parent = angular.module('myApp.things');

    module.root = parent.root + 'sub_module/someThing/';

    module.config(function(stateHelperProvider) {
      stateHelperProvider.setNestedState({
          name: 'things.someThing',
          url: "/someThing",
          templateUrl: module.root + 'someThing.html',
      });
    });
  })();
```

The child module is created with its dependency on the parent module, but then we also reference the parent module itself, then utilize the parent modules paths properties (or constants if you’ve created them) to build the paths for the child module. Those paths can then be accessed the same way by any child modules. This is AWESOME! Because as you can now guess, you can change the location of a module directory in your file structure, and as long as you reflect the changes in your module, all of your template, image, etc references will remain intact!

Hope this helps!

Enjoy.






Screen Shot 2017-05-26 at 6.11.57 PM

Once upon a time, you built, or planned on building, an large scale Angular application. You probably thought about your file structure and module structure, making sure it fit into a widely used style guide that makes sense. Here at Nozzle, we take our style guides very seriously, and tried to make the best decision on how to modularize, and make our codebase extensible. One problem though, as it seems we could never get rid of were hard-coded image references, and the like...

Dev Blog - Javascript