Check Yo Self Update: Eliminating Dev Dependencies | Tiffany R. White Blog

Check Yo Self Update: Eliminating Dev Dependencies

Reading time: 12 mins

I worked like a fiend over the weekend on Check Yo Self, reading documentation, implementing features, and taking some away.

Going over the write-good issues on GitHub to see how if it could parse extra characters 1.

I saw an issue where a guy implemented using his GitHub Project Page to host a React implementation of a write-good app.

Went to the app, put in some markdown, and it gave me suggestions. Nice.

No Need for Natural

I was going to use the natural natural language tokenizers to parse out the markdown but I don’t need it. One less dev dependency is a good thing.

Also, No Need for Heroku or Postgres

I researched localStorage web API. Each browser has a set limit of how much data can be stored in the browser. I found this little utility to check how many MBs of storage I had to work with. 5 MBs in Chrome 2. From what I understand, Firefox has a limit of 10 MB but I could be wrong.

After this, I filled a markdown document with 2000 words, just to see the size of the document. It was 9 kbs. I decided to limit the amount of words per document to 2000 and the amount of documents that could be stored to 200.

Working With and Testing Local Storage

I found some gold in the MDN docs and their GitHub repo for MDN. You can test the localStorage on a client with the following code:

function storageAvailable(type) {
  'use strict'
    try {
	var storage = window[type], x = "__storage_test__";
	storage.setItem(x, x);
	storage.removeItem(x);
	return true;
	} catch (e) {
	  return (
	  e instanceof DOMException && // everything except Firefox
	  (e.code === 22 || // Firefox
	  e.code === 1014 || // test name field too, because code might not be present // everything except Firefox
	  e.name === "QuotaExceededError" || // Firefox
		e.name === "NS_ERROR_DOM_QUOTA_REACHED") && // acknowledge QuotaExceededError only if there's something already stored
	  storage.length !== 0
	);
    }
}

console.log(storageAvailable());

I am not certain of everything that is happening here but it tests for storage on the client’s browser. If not you can log an exception.

I am probably going to alert the user somehow if they have exceeded the localStorage limit 3.

Logic So Far

So far I’ve got some broken spaghetti code I am looking to fix.

I need a refresher on jQuery so I’ve visited Treehouse. I also know some of what I need to do.

What I have so far:

/* App Starts Here */
$('#texts').val('New Text');
$('#texts').trigger('autoresize');
var writeGood = require('write-good');
var suggestions = writeGood(userInput, {weasel: false});

suggestions: [{

}];

Material Design Lite Woes

The Material Design Lite docs are good but I was having some trouble understanding everything, as components are really verbose and seem to overlap some.

I was deep into the html when I found I couldn’t grok something and went looking for a solution.

Enter: Materalize.css.

The guys are from Pittsburgh 4 and attend one of the premier Computer Science schools in the world, Carnegie Mellon. They came up with a way to add Material Design Lite to your site, stripping away the verbosity, and leaving you with customizable components that resemble a bit of a mix of Bootstrap and MDL.

Currently I have this bit of Materialize.css in my markup:

<main class="mdl-layout__content">
      <div class="mdl-layout__tab-panel is-active" id="overview">
        <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
          <div class="mdl-card mdl-cell mdl-cell--12-col">
            <div class="mdl-card__supporting-text">
              <h4>Texts</h4>
              This is where your markdown files live. You can add up to 200 markdown files at 2000 words a piece.
              <div class="row">
                <form class="col s12">
                  <div class="row">
                    <div class="input-field col s12">
                      <i class="material-icons prefix grey-text">mode_edit</i>
                      <textarea id="texts" class="materialize-textarea grey-text"></textarea>
                      <label for="texts" class="grey-text">Add your markdown here...</label>
                    </div>
                  </form>
                </div>
                <div class="fixed-action-btn vertical">
                  <a class="btn-floating btn-large pink">
                    <i class="large material-icons">add</i>
                  </a>
                  <ul>
                    <li class="btn-floating green"><a href="#!"><i class="material-icons">mode_edit</i></a></li>
                    <li class="btn-floating purple"><a href="#!"><i class="material-icons">undo</i></a></li>
                    <li class="btn-floating blue"><a href="#!"><i class="material-icons">redo</i></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </section>
        </div>
      </main>

Some MDL proper mixed in but I will take it out soon enough.

Vertical Fabs and Getting Them to Work

I am trying to understand how to get input from a click on a fab. As you can see from my logic, I am using a click event to try to trigger an input but it isn’t working. I am looking for a fix.

Here is a nifty video of my getting the vertical fabs working.

[fvplayer src=”https://helloburgh.me/wp-content/uploads/2017/05/Fabs.mov” splash=”https://helloburgh.me/wp-content/uploads/2017/02/cropped-coding.png” width=”1044” height=”720”]

I worked like a fiend over the weekend on Check Yo Self, reading documentation, implementing features, and taking some away.

Going over the write-good issues on GitHub to see how if it could parse extra characters 1.

I saw an issue where a guy implemented using his GitHub Project Page to host a React implementation of a write-good app.

Went to the app, put in some markdown, and it gave me suggestions. Nice.

No Need for Natural

I was going to use the natural natural language tokenizers to parse out the markdown but I don’t need it. One less dev dependency is a good thing.

Also, No Need for Heroku or Postgres

I researched localStorage web API. Each browser has a set limit of how much data can be stored in the browser. I found this little utility to check how many MBs of storage I had to work with. 5 MBs in Chrome 2. From what I understand, Firefox has a limit of 10 MB but I could be wrong.

After this, I filled a markdown document with 2000 words, just to see the size of the document. It was 9 kbs. I decided to limit the amount of words per document to 2000 and the amount of documents that could be stored to 200.

Working With and Testing Local Storage

I found some gold in the MDN docs and their GitHub repo for MDN. You can test the localStorage on a client with the following code:

function storageAvailable(type) {
  'use strict'
    try {
	var storage = window[type], x = "__storage_test__";
	storage.setItem(x, x);
	storage.removeItem(x);
	return true;
	} catch (e) {
	  return (
	  e instanceof DOMException && // everything except Firefox
	  (e.code === 22 || // Firefox
	  e.code === 1014 || // test name field too, because code might not be present // everything except Firefox
	  e.name === "QuotaExceededError" || // Firefox
		e.name === "NS_ERROR_DOM_QUOTA_REACHED") && // acknowledge QuotaExceededError only if there's something already stored
	  storage.length !== 0
	);
    }
}

console.log(storageAvailable());

I am not certain of everything that is happening here but it tests for storage on the client’s browser. If not you can log an exception.

I am probably going to alert the user somehow if they have exceeded the localStorage limit 3.

Logic So Far

So far I’ve got some broken spaghetti code I am looking to fix.

I need a refresher on jQuery so I’ve visited Treehouse. I also know some of what I need to do.

What I have so far:

/* App Starts Here */
$('#texts').val('New Text');
$('#texts').trigger('autoresize');
var writeGood = require('write-good');
var suggestions = writeGood(userInput, {weasel: false});

suggestions: [{

}];

Material Design Lite Woes

The Material Design Lite docs are good but I was having some trouble understanding everything, as components are really verbose and seem to overlap some.

I was deep into the html when I found I couldn’t grok something and went looking for a solution.

Enter: Materalize.css.

The guys are from Pittsburgh 4 and attend one of the premier Computer Science schools in the world, Carnegie Mellon. They came up with a way to add Material Design Lite to your site, stripping away the verbosity, and leaving you with customizable components that resemble a bit of a mix of Bootstrap and MDL.

Currently I have this bit of Materialize.css in my markup:

<main class="mdl-layout__content">
      <div class="mdl-layout__tab-panel is-active" id="overview">
        <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
          <div class="mdl-card mdl-cell mdl-cell--12-col">
            <div class="mdl-card__supporting-text">
              <h4>Texts</h4>
              This is where your markdown files live. You can add up to 200 markdown files at 2000 words a piece.
              <div class="row">
                <form class="col s12">
                  <div class="row">
                    <div class="input-field col s12">
                      <i class="material-icons prefix grey-text">mode_edit</i>
                      <textarea id="texts" class="materialize-textarea grey-text"></textarea>
                      <label for="texts" class="grey-text">Add your markdown here...</label>
                    </div>
                  </form>
                </div>
                <div class="fixed-action-btn vertical">
                  <a class="btn-floating btn-large pink">
                    <i class="large material-icons">add</i>
                  </a>
                  <ul>
                    <li class="btn-floating green"><a href="#!"><i class="material-icons">mode_edit</i></a></li>
                    <li class="btn-floating purple"><a href="#!"><i class="material-icons">undo</i></a></li>
                    <li class="btn-floating blue"><a href="#!"><i class="material-icons">redo</i></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </section>
        </div>
      </main>

Some MDL proper mixed in but I will take it out soon enough.

Vertical Fabs and Getting Them to Work

I am trying to understand how to get input from a click on a fab. As you can see from my logic, I am using a click event to try to trigger an input but it isn’t working. I am looking for a fix.

Here is a nifty video of my getting the vertical fabs working.

[fvplayer src=”https://helloburgh.me/wp-content/uploads/2017/05/Fabs.mov” splash=”https://helloburgh.me/wp-content/uploads/2017/02/cropped-coding.png” width=”1044” height=”720”]

  1. Those lovely markdown characters. I ❤️ markdown.  2

  2. This utility crashed someone’s browser so be careful.  2

  3. There are some users who really don’t pay attention or care.  2

  4. Steel City? Not much anymore. More like, up-and-coming tech hub.  2



No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.




Webmentions 0

No webmentions were found.