Code, Shiny Things, and Other Random Shit I Like

jamesreinknecht.com

Shedding Technical Debt Part 1

Part 1 of who the hell knows.

My latest project is a soup to nuts re-write of a popular smart mirror application. My friend wrote a Module for the ‘Modular’ application MagicMirror. He had some questions about javaScript, and while investigating his code, I discovered that Magic Mirror seemed to me to be over-engineered, overly complicated, and just too much code to maintain for something that essentially was a couple of API calls displayed on a Raspberry Pi to a monitor behind glass.

To display the output of data from an API call, each module is about 800 lines of vanilla JS to manipulate the DOM. It wasn’t even using jQuery to sweeten the syntax. They even overengineered the CSS by a factor of about 48.

Life just doesn’t need to be this hard! It doesnt!

For now, the working title is MagicMirror-React.

I just re-wrote one of the main modules of MM in React.

Before: 496 Lines of Code

After: 12 Lines of React, 8 lines of Handlers and Axios Calls.

Data is updated real time whenever the API is called, and the layout is at least 9000% easier to customize.

Check back for the next installment or something!

TIL: React does what react wants

React… A great way to use javaScript to have a panic attack.

So i couldn’t figure out why using state to keep ‘score’ in a game wasn’t quite triggering a ‘game over’ event - even though the game was clearly over.

The reason:

React updates the state whenever its good and goddamned ready.

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

The problem:

React updates the state whenever its good and goddamned ready.

Aka. shit acts funny if you are using logic based on state values.

The solution:

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.

Aka Use a Callback, Sucker.

Oh. It’s also day 15 of my 100daysofcode. weee.

React Is Badass, and Apple hates your garbage app.

AKA: Stop being cheap, don’t hire dubious overseas developers. If your app sucks because it was written in a template by a Mud Farmer in East Elbonia, They will kill it, because you are ruining the App Store one crappy app at a time.

https://insights.dice.com/2017/12/12/apple-killing-terrible-apps/

When will companies realize that offshore development rarely, if ever pays off?

In other news: I’m working through my Udemy course on React, and the further I get the more I love. I was inspired by this young lady’s Medium articles:

https://medium.com/@lydiahallie/advice-from-a-19-y-o-girl-software-developer-88737bcc6be5

https://medium.freecodecamp.org/successfully-teaching-yourself-how-to-code-f6aac23db44a

TL;DR:

Get off your ass. Try and do 2 hours of a training course every day. Udemy stuff is cheap as nuts. Why not learn it?

Here is the course I am working through right now:

https://www.udemy.com/react-the-complete-guide-incl-redux/learn/v4/overview

I might not need jquery?! Lies.

After spending 2 hours trying to shoehorn jQuery into the Magic Mirror project I’m tinkering with, and failing miserably, I’m going to call it a game. It’s time i go back to basics and do some Vanilla JavaScript DOM manipulation.

WHYYYYYYY!@?#>@#>@! OH GOD WHY IS IT SO PAINFUL!??? IS THIS HOW PEOPLE WROTE JAVASCRIPT DURING WORLD WAR 1?!?!?!

jquery

I can’t chain things together! Everything looks ugly and makes me hate it. If you try and chain stuff together, weird things happen.

Horse And Buggy:


1
2
3
var sunriseSunsetTxt = document.createElement("div")
sunriseSunsetTxt.className = "col-xs-1 p-2 m-2"
sunriseSunsetTxt.innerHTML = this.sunriseSunsetTime;

Twin Turbos:

1
var sunriseSunsetTxt = $('<div>').addClass("col-xs-1 p-2 m-2").text(this.sunriseSunsetTime)

javaScript really needs the set/get abilities of jQuery without screwing with state so much. Honestly though its not really entirely necessary in things like React, etc, but for little one off projects where you REALLY want to write fast, clean and accurate, why can’t vanilla JS at least learn SOMETHING from a library that EVERYONE uses?

Here’s a handy site though for whenever you HAVE to horse and buggy this shit right back to the 1800s:

http://youmightnotneedjquery.com/

Heroku is a pain because i'm a moron

I fought with heroku yesterday a bunch because I’m a moron. First I couldn’t get the database to talk to it.

Mostly because I didnt put in the environment variable.

var MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost/scraper";

because I’m a dope.

then i couldnt get my app to start. Because I didnt RTFM …..

var PORT = process.env.PORT || 3000;

So once i actually read the instructions and stop sucking, i got my app to start.

I usually don’t use heroku because I have a linode server, but it never hurts to be able to do cloud stuff, especially if its fast as hell and free.

repo: https://salty-brushlands-75876.herokuapp.com/
git: https://github.com/CaptainJimmy/scrapeTHIS

Reaaaact

YIPES I wrote a lot of code yesterday.

lots of coding done yesterday! Got my web scraper working good, all my CRUD routes going, and a ton of jquery and ajax tinkering.

https://github.com/CaptainJimmy/scrapeTHIS

I like mongodb a lot. I actually prefer it without the ORM of mongoose but, loose and fast with #aintcare isnt probably a great idea.

We had a pretty cool tech panel last night with some interesting folks in the biz, and started on React.

so i noticed some weirdness with ES6 fat arrow functions and cheerio. It oddly enough doesnt like fat arrow functions. Gotta do some more digging to figure out why.

https://www.sitepoint.com/6-pro-tips-from-react-developers/

https://reactjs.org/docs/jsx-in-depth.html

Mirror Mirror On The Wall

In my 100 Days of code challenge, my day 3 was spent debugging homework. The example set in our repository had a giant bug in it, causing errors from the promise library and to the browser.

I discovered a bug in the scoping of a forEach loop (yeah yeah i should be using .map, eat me) where at the end of each loop it was pushing to the database and then doing a res.send… the browser was receiving 25 responses and freaking out:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
app.get('/scrape', function(req, res) {
axios.get('http://www.echojs.com/').then(function(response) {
var $ = cheerio.load(response.data);
$('article h2').each(function(i, element) {
var result = {};
result.title = $(this).children('a').text();
result.link = $(this).children('a').attr('href');
db.Article.create(result)
.then(function(dbArticle) {
console.log('scrape complete', dbArticle);
res.send('Scrape Complete');
})
.catch(function(err) {
res.json(err);
});
});

});
});

produces:

bugfezt

can you find it?

tl: dr; no one cares, zlz

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
app.get('/scrape', function(req, res) {
axios.get('http://www.echojs.com/').then(function(response) {
var $ = cheerio.load(response.data);
$('article h2').each(function(i, element) {
var result = {};
result.title = $(this).children('a').text();
result.link = $(this).children('a').attr('href');
db.Article.create(result)
.then(function(dbArticle) {
console.log('scrape complete', dbArticle);

})
.catch(function(err) {
res.json(err);
});
});
res.send('Scrape Complete');
});
});

#100DaysOfCode #Day3

100 Days of code of beer left on the wall?

OK so i’ve decided to take one of these stupid challenges. It’s not for charity or for tater tots, it’s for me. Crap. Now I want tater tots.

I stumbled into this on medium

https://medium.freecodecamp.org/take-the-100daysofcode-challenge-make-coding-a-habit-4a655d8663fd

and I thought - damn thats a pretty badass idea. I’d love to say I could back date myself to July when I started bootcamp - but I’ve taken some serious days ‘off’ and let my brain take a vacation when I’ve gotten stressed or tired or sunburned or cholera on the Oregon Trail.

oregon trail

So I decided to do it. Even though challenges are stupid and there are no tater tots for prizes and now I’m really hungry for tater tots.

tots!

tl:dr;

Yesterday I made a pull request to a friend’s repo for his MagicMirror Surf Conditions repo. I’m not a fan of how Magic Mirror uses this for EVERYTHING but it works. Which is really annoying.

annnnnd I’m officially on day 2.

TIL: I'm an idiot

Today I learned:

nodejs/express routes are top down.

the hard way.

hashtag fail.

if you put a:

app.get("/:id", (req, res, next) => {
//things go here
});

before a:

app.get("/things", (req, res, next) => {
//other things go here
});

The second route ignores you; mocks you; tells your time is not valuable.

Also it’s been so long since I’ve done client-side jQuery that I feel like Bart Mancuso: