Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 3, Paint a Room - L-Shaped

Here it gets a bit more interesting...the goal is L-shaped.  I should have let people pick the kind of room and used one app.  That's not a difficult mashup.

Fiddle: https://jsfiddle.net/NodToNothing/7jasm205/

All Fiddles: https://jsfiddle.net/user/NodToNothing/fiddles/

This time the challenge was also to make it accessible via mobile.  The nature of Vue is that it works on mobile so I did.....nothing.  That's not entirely true, I added /embedded/result to the URL to make it show on the screen.

https://jsfiddle.net/NodToNothing/7jasm205/embedded/result

So here are three screens showing the fiddle working on my mobile phone.  Reactive changes working as expected.

And some code:

HTML: <div id="app"> <!-valiidity.valid -checks against the min during typing --> <!--https://www.w3schools.com/js/js_validation_api.asp--> Long Wall Width: <input min="0" ref="input" type="number" value="10" v-model="longWidth" oninput="validity.valid||(value='');"/><BR/> Long Wall Heights: <input min="0" ref="input" type="number" value="10" v-model="longHeight" oninput="validity.valid||(value='');"/><BR/> Short Wall Widths: <input min="0" ref="input" type="number" value="10" v-model="shortWidth" oninput="validity.valid||(value='');"/><BR/> Short Wall Height: <input min="0" ref="input" type="number" value="10" v-model="shortHeight" oninput="validity.valid||(value='');"/><BR/> Paint coverage (square feet per gallon)a: <input min="0" ref="input" type="number" value="350" v-model="coverage" oninput="validity.valid||(value='');"/><BR/> <br>Square Feet: {{sqFeet}} <br>Gallons of Paint: {{gallons}} </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { longWidth: 10, longHeight: 10, shortWidth: 5, shortHeight: 5, coverage: 350 }, computed: { gallons: function(){ //return ((this.pizzas * this.slices) % this.people); //the disadvantage of f-ed up long math in line, you lose your place, that took a few iterations return Math.ceil(((this.longWidth * this.longHeight) - (this.shortWidth * this.shortHeight)) / this.coverage); }, sqFeet: function(){ return (this.longWidth * this.longHeight) - (this.shortWidth * this.shortHeight); } } })

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 3, Paint a Room - Circle

Variation #2....do a circular room.  I find that to be less about coding and more about reminding myself of basic geometry.  It's less code than the square room in some respects.

Fiddle: https://jsfiddle.net/NodToNothing/7buham4g/
All Fiddles: https://jsfiddle.net/user/NodToNothing/fiddles/

JS Fiddle Code:
HTML: <div id="app"> <!-valiidity.valid -checks against the min during typing --> <!--https://www.w3schools.com/js/js_validation_api.asp--> Room Radius: <input min="0" ref="input" type="number" value="10" v-model="radius" oninput="validity.valid||(value='');"/><BR/> Paint coverage (square feet per gallon)a: <input min="0" ref="input" type="number" value="350" v-model="coverage" oninput="validity.valid||(value='');"/><BR/> <br>Square Feet: {{sqFeet}} <br>Gallons of Paint: {{gallons}} </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { radius: 10, coverage: 350 }, computed: { gallons: function(){ //return ((this.pizzas * this.slices) % this.people); //the disadvantage of f-ed up long math in line, you lose your place, that took a few iterations return Math.ceil((this.radius * 3.14 * this.radius) / this.coverage); }, sqFeet: function(){ return (this.radius * 3.14 * this.radius); } } })

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 3, Paint a Room - Square

Room area....did I already do  a room area/paint calculator?  I did...I did that room calculator.  This one is for finding the amount of paint.  So it's a bit of a mash up of the last exercise (pizzas) with a Math.ceil() and the area calculator.  This first swipe took moments.

Fiddle: https://jsfiddle.net/NodToNothing/x4bm0cys/

All Fiddles: https://jsfiddle.net/user/NodToNothing/fiddles/

The Code:
HTML: <div id="app"> <!-valiidity.valid -checks against the min during typing --> <!--https://www.w3schools.com/js/js_validation_api.asp--> Room Length: <input min="0" ref="input" type="number" value="10" v-model="length" oninput="validity.valid||(value='');"/><BR/> Room Width: <input min="0" ref="input" type="number" value="10" v-model="width" oninput="validity.valid||(value='');"/><BR/> Paint coverage (square feet per gallon)a: <input min="0" ref="input" type="number" value="350" v-model="coverage" oninput="validity.valid||(value='');"/><BR/> <br>Square Feet: {{sqFeet}} <br>Gallons of Paint: {{gallons}} Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { length: 10, width: 10, coverage: 350 }, computed: { gallons: function(){ //return ((this.pizzas * this.slices) % this.people); //the disadvantage of f-ed up long math in line, you lose your place, that took a few iterations return Math.ceil((this.length * this.width) / this.coverage); }, sqFeet: function(){ return (this.length * this.width); } } })

Breakfast - Elsie's

Eryn and I rolled up to North Minneapolis to have breakfast with Kyle at Elsie's this morning.  It was a balmy -13F when we left if the details were correct.  Certainly felt that cold.  Eryn likes their breakfast steak, so I eat her left over eggs and hashbrowns with a pancake.  I think the pancake was overkill.  I realized we should have brought her bowling ball and shoes.  Then I realized 8:00 a.m. is too early for bowling.

For Ingress purposes, the trip home is amusing as I roll through the Riverview area and she tap hacks 30 or 40 L8 portals. Good way to top off.

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 3, Pizza Slices, Version 2

The second version of the pizza exercise was about changing the formula.  It was only a bit of math.  I was confused because my Math. functions weren't working right.  But it had nothing to do with Math.  It was all about my lack of a return keyword and some bad parens.  I've become better at sussing those out - fewer initial assumptions on my part.

JSFiddle: https://jsfiddle.net/NodToNothing/pz3Lhu2m/

The math is a bit more difficult to work out mentally than the other pizza exercise.  I almost had to write it down to make sure it was right.  I didn't do the part with use "piece" or "pieces" depending on 0, 1, many.  That seems like busywork.

The Vue.js code:

  HTML: <div id="app"> <!-valiidity.valid -checks against the min during typing --> <!--https://www.w3schools.com/js/js_validation_api.asp--> Number of People: <input min="0" ref="input" type="number" value="10" v-model="people" oninput="validity.valid||(value='');"/><BR/> Slices Desired (each): <input min="0" ref="input" type="number" value="10" v-model="slicesDesired" oninput="validity.valid||(value='');"/><BR/> Number of Slices per Pizza: <input min="0" ref="input" type="number" value="8" v-model="slices" oninput="validity.valid||(value='');"/><BR/> <br>Number of pizzas: {{pizzas}} <br>Leftover slices: {{slicesLeftover}} </div> VUE + Javascript: var app = new Vue({ el: '#app', components: { }, data: { people: 10, slicesDesired: 5, slices: 8 }, computed: { pizzas: function(){ //return ((this.pizzas * this.slices) % this.people); //the disadvantage of f-ed up long math in line, you lose your place, that took a few iterations return Math.ceil((this.people * this.slicesDesired) / this.slices); }, slicesLeftover: function(){ return (this.people * this.slicesDesired) % this.slices; } } })

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 3, Pizza Slices

Exercise 8: Pizza Party

I think my default is now Vue - I'm getting lazy.  I have the numeric validation figured out and the hooks, so it's just easy to cut and paste and modify.  Or fork and set as base and modify, if you're fiddling.  The big rule in this exercise...no partial pieces of pizza.

There's a part b to ask how many pieces each person wants and then calculate full pizzas.  That's primarily different math, but I"m going to do it anyway.

The JSFiddle: https://jsfiddle.net/NodToNothing/tuv89sf6/

HTML: <div id="app"> <!-valiidity.valid -checks against the min during typing --> <!--https://www.w3schools.com/js/js_validation_api.asp--> Room width in feet: <input min="0" ref="input" type="number" value="10" v-model="feetWidth" oninput="validity.valid||(value='');"/><BR/> Room length in feet: <input min="0" ref="input" type="number" value="10" v-model="feetLength" oninput="validity.valid||(value='');"/><BR/> <br>The area is {{squareFeet}} square feet. <br>The area is {{squareMeter}} square meters. <BR/><BR/>Room width in meters: <input min="0" ref="input" type="number" value="10" v-model="meterWidth" oninput="validity.valid||(value='');"/><BR/> Room length in meters: <input min="0" ref="input" type="number" value="10" v-model="meterLength" oninput="validity.valid||(value='');"/><BR/> <br>The area is {{squareFeet2}} square feet. <br>The area is {{squareMeter2}} square meters. </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { feetWidth: 10, feetLength: 10, meterWidth: 5, meterLength: 5, meterConst: 10.7639, feetConst: 0.092903 }, computed: { squareFeet: function(){ return this.feetWidth * this.feetLength; }, squareMeter: function(){ return ((this.feetWidth * this.feetLength) / this.meterConst); }, squareFeet2: function(){ return this.meterWidth * this.meterLength; }, squareMeter2: function(){ return ((this.meterWidth * this.meterLength) / this.feetConst); } } })

March 2019 Reading

Look at that....generated with Python.  Like a champ.  I feel cool.  Sort of.  Vaguely. Definitely easier than typing it by hand.  Did you see February?  All 28 days and then some.  Rocked it.

• 3/31/2019:
• 3/30/2019:
• 3/29/2019:
• 3/28/2019:
• 3/27/2019:
• 3/26/2019:
• 3/25/2019:
• 3/24/2019:
• 3/23/2019:
• 3/22/2019:
• 3/21/2019:
• 3/20/2019:
• 3/19/2019:
• 3/18/2019:
• 3/17/2019:
• 3/16/2019:
• 3/15/2019:
• 3/14/2019:
• 3/13/2019:
• 3/12/2019:
• 3/11/2019:
• 3/10/2019:
• 3/9/2019:
• 3/8/2019:
• 3/7/2019:
• 3/6/2019:
• 3/5/2019:
• 3/4/2019: 
• 3/3/2019: KeyForge: Match #3, Ben v. Tom [17:05]
• Ah....there's a Sting in play.  Maybe I missed that on the last game.  It moves fast enough that sometimes you can't tell what they're up to. That makes more sense with all that aember out there.  Three games in and they're still missing basic mechanics, however, so I don't have to feel bad about missing some things.
• 3/3/2019: How to be Employable Forever by Tom Vander Ark on Forbes
• What you conceive.
• mindset--collaborative, interdisciplinary, ethical, empathetic, entrepreneurial and global
• “Learning things that matter; learning in context; learning in teams. Envisioning what has never been and doing whatever it takes to make it happen. Do that 20 times and you will be employable forever," said Richard Miller, President of Olin College of Engineering. 
• Very discovery sprint like, but rather than dumping folks into the sprint, they're taught how to channel it at discovery.
• 3/3/2019: Recruiters Reveal the Buzzwords to Avoid on LinkedIn and How to Better Tell Your Career Story on Inc Magazine by Amy George
  • Use words in line with how you talk. Generally avoid these as vague or hard to define for those reviewing your resume.  I use ideation sometimes, but I don't think it's in my resume: synergize/synergy, tribe, game changer, silo, snapshot, bandwidth, traction, cutting edge, granular, omnichannel, paradigm shift, ideation, deliverable, digital transformation and touch base.
• 3/3/2019: 3 Ways To Highlight Your Skills In A Job Interview on Forbes by Ashira Prossack
• It's what I tell people, including the intern candidate last week.  Focus on what you can do for the company.  Use very specific examples.  She recommends showing off your soft skills, but depending on your presentation, that can sometimes come through regardless (listening, asking questions, driving to a deeper answer with more detail).
• 3/3/2019: Visual GraphQLProgramming - Tomek Poniatowicz on dev.to
• Visual GraphQL with a mock backend.  Nice, but sort of clunky to play with given how easy it is to play with GraphQL via GraphiQL and Voyager already.
• https://app.graphqleditor.com/showcase/library
• 3/3/2019: You may need Laziness in your Javascript - by Sergio Marin
• He's using iterators to only return the needed values one or a few at a time instead of huge duplicated array.
• 3/2/2019: Battle of the Beanfield - Wikipedia
  • There were 100,000 people at the 1984 festival at Stonehenge!
  • 1300 officers for half as many peace convoy participants
  • There were English hippies in 1985?  That surprised me.
  • There's a 1991 documentary Operation Solstice (Channel 4)
  • Neo-druid leader Arthur Uther Pendragon was arrested on each and every summer solstice between 1985 and 1999 whilst trying to access Stonehenge. [that's very persistent].
  • Roy Harper, Back to the Stones (song)
  • The Levellers - Battle of the Beanfield (song)
• 3/2/2019: Rose Brash, 20, is led away by police at the Battle of the Beanfield, June 1985
• 3/2/2019: Keyforge Match #2, Harry v. Tom [30:17]
• There were so many things wrong here.  The bad terminology doesn't bother me like it does some folks in the comments.  After all, I sometimes call the houses "suits".  But after only playing two total games, even I know he should be turning in his yellow tokens for a key.  It's not an option, it's mandatory.  "If the active player has enough Æmber to forge a key during this step, they must do so."  Lot of other weirdness as well, but that's the one that kept distracting me.
• 3/1/2019: The battle for the future of Stonehenge - Charlotte Higgins on The Guardian
• writer Jacquetta Hawkes...“every age has the Stonehenge it deserves”.
• images of daggers gouged out in the Bronze Age to Christopher Wren’s neatly carved signature. “You’d have thought he’d have known better,” said English Heritage archaeologist Heather Sebire disapprovingly
• Clonehenge, a blog about Stonehenge replicas: https://clonehenge.com/
• Victorian Stonehenge was a place of day-trippers, bicycle outings, Sunday school jollies, cricket matches and concerts. The craze for the new discipline of geology saw visitors chipping chunks out of the stones for their collections (a stall rented out chisels).
• Even Samuel Pepys complained of being ripped off by shepherds and innkeepers.
• Stonehenge is not even, properly speaking, a henge. 

So much ***damn snow...

This is what my driveway looks like, and there's more snow on the way this weekend. Not owning a snowblower is leading to some rather tall mounds at the end of the driveway. Usually Eryn heads down there to top it off once in a while, but the dog has been peeing near the road (and a bunch of other dogs as well) so the snow mounds have dog pee in them. She's not willing to crawl around in dog pee for me. That makes me sad.  If we get an appreciable amount, it will be time to move to throwing the snow against the existing mounds and just reducing the width of the driveway to a single car (and getting rid of the side area).

 

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 3, Room Area

Chapter 3 be all about da math!

Exercise one (or 7, depending on where you start) is calculate the area of a room, with challenges related to using a UI, validating the numbers, and offering meters and feet.  I cheated and did both meters and feet as separate UI bits rather than a drop down because I'm lazy.  I get the drop down.

This does give me an interesting idea...something to ideate on myself.

Here's the Fiddle: https://jsfiddle.net/NodToNothing/uas3foex/23/

The output....

And the code...

HTML: <div id="app"> <!-valiidity.valid -checks against the min during typing --> <!--https://www.w3schools.com/js/js_validation_api.asp--> Room width in feet: <input min="0" ref="input" type="number" value="10" v-model="feetWidth" oninput="validity.valid||(value='');"/><BR/> Room length in feet: <input min="0" ref="input" type="number" value="10" v-model="feetLength" oninput="validity.valid||(value='');"/><BR/> <br>The area is {{squareFeet}} square feet. <br>The area is {{squareMeter}} square meters. <BR/><BR/>Room width in meters: <input min="0" ref="input" type="number" value="10" v-model="meterWidth" oninput="validity.valid||(value='');"/><BR/> Room length in meters: <input min="0" ref="input" type="number" value="10" v-model="meterLength" oninput="validity.valid||(value='');"/><BR/> <br>The area is {{squareFeet2}} square feet. <br>The area is {{squareMeter2}} square meters. </div> JavaScript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { feetWidth: 10, feetLength: 10, meterWidth: 5, meterLength: 5, meterConst: 10.7639, feetConst: 0.092903 }, computed: { squareFeet: function(){ return this.feetWidth * this.feetLength; }, squareMeter: function(){ return ((this.feetWidth * this.feetLength) / this.meterConst); }, squareFeet2: function(){ return this.meterWidth * this.meterLength; }, squareMeter2: function(){ return ((this.meterWidth * this.meterLength) / this.feetConst); } } })

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Retirement Calculator

I realized I claimed credit for reading all of chapter two, but had an exercise left, so I thought I'd better get it done today after a bit of Far Cry New Dawn so I'm not strictly lying to myself (my days are sometimes off in my reading list, but in general I try to keep them aligned within a day or two)..

JSFiddle: https://jsfiddle.net/NodToNothing/ehk24y50/
Fiddles: https://jsfiddle.net/user/NodToNothing/fiddles/

Exercise 6 was a retirement calculator.  Amusingly, I can see in that last Fiddle where I'm reusing Vue code and leaving in bits, like the default being Scooter, where it doesn't matter because I'm working with numerics, not strings.  So....ignore those parts.  At the very least, I don't want to hear about it because it doesn't matter except for elegance/purists.  It's not like I have someone sitting nearby to code review my hobby activities.

I did learn a bit more about the difference between computed properties and functions in Vue, so that was useful in the context of this snippet.  No methods in there, but....that's because I really didn't need them once I started playing around a little more.

The code...less than in some of the others.  Vue takes a lot of the work out of things:

HTML: <div id="app"> <!-valiidity.valid -checks against the min during typing --> <!--https://www.w3schools.com/js/js_validation_api.asp--> Current Age: <input min="0" ref="input" type="number" value="55" v-model="currentAge" oninput="validity.valid||(value='');"/><BR/> Age you want to retire: <input min="0" ref="input" type="number" value="65" v-model="retireAge" oninput="validity.valid||(value='');"/><BR/> <br>You have {{yearsToRetire}} years left until you can retire. <br>If's {{currentYear}}, so you can retire in {{retireYear}} <!--interpoloation thingy --> <!--{{ new Date().getFullYear() }}--> </div> JavaScript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { currentAge: 55, retireAge: 65 }, computed: { yearsToRetire: function(){ return this.retireAge - this.currentAge; }, currentYear: function(){ return (new Date()).getFullYear(); }, retireYear: function(){ return this.currentYear + (this.retireAge - this.currentAge); } } })

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Simple Math

I was right.  The simple math exercise was really, really simple.  Use Vue and it'll lock the format to numeric, has a UI, autoupdates the answers and, with a min and a bit of javascript (validity.valid) enforces 0+, aka no negative numbers, per the exercise challenges.

Fiddle: https://jsfiddle.net/NodToNothing/f18vahdp
Fiddles: https://jsfiddle.net/user/NodToNothing/fiddles/

Output working as advertised:

The Fiddle code...

HTML: <div id="app"> <!-valiidity.valid -checks against the min during typing --> <!--https://www.w3schools.com/js/js_validation_api.asp--> Number 1: <input min="0" ref="input" type="number" value="Scooter" v-model="num1" oninput="validity.valid||(value='');"/><BR/> Number 2: <input min="0" ref="input" type="number" value="Scooter" v-model="num2" oninput="validity.valid||(value='');"/><BR/> <br>Sum: {{sum}} <br>Difference: {{sub}} <br>Division: {{div}} <br>Multiply: {{multi}} </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { num1: 800, num2: 40 }, computed:{ sum: function(){ return this.num1 + this.num2; }, sub: function(){ return this.num1 - this.num2; }, multi: function(){ return this.num1 * this.num2; }, div: function(){ return this.num1 / this.num2; } } })

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Mad Lib (4) - Vue.js style with Drop Downs

Wow...the length of these titles is getting a bit off the hook.  Maybe I need to go with EfP57 as a short form.  I lose my keywords; but I don't care about my keywords.

The challenge for the madlib exercise was to put some control logic in the system.  I didn't like the acceptance criteria, because there's some knowledge of what's being entered that's necessary.  To avoid that, I thought I could force the user down a path of limited choices....aka a select/dropdown.  In that case, the branching logic is pretty straightforward because you know the possible values.  I see where to implement it in the display of the sentence using the computed property.  Getting the drop downs set up in the first place was the hard part.  Vue isn't intuitive to me.  Although, and I am ashamed, flipping "key" to "name" in the bound property was so simple I'm embarrassed it took as long to intuit as it did.  This will also be the first exercise with code so long it doesn't fit in an easy image, so all I'm posting is the textarea with scroll.

So here's the fiddle: https://jsfiddle.net/NodToNothing/L8rpd6ak/
Here's all my fiddles: https://jsfiddle.net/user/dashboard/fiddles/

Here's my oops where I use the key instead of the name.  I tried to get to the object via some collection notation [index] and failed repeatedly even though I got back a viable object inserting those indexes.

You can see it inserting the indexes into the concatenated sentence above.  That IS hilarious.

And there it works.  The trick was changing :value="verb.key" to :value="verb.name".  Simple.  Easy Peasy.  But I couldn't find an example on the web.  All sorts of other examples, just not that one.  And as you can see from the "person" code, I borrowed the initial code for modification and the example of how to flip it wasn't there.  Well, for as stupid as that was, I feel undeservedly smart. And I can finally move on to exercise #5 "Simple Math" which must be easier.

HTML: <div id="app"> <!--can do this in a template in the Vue code for reuse--> Noun: <select v-model="selectedPerson"> <option v-for="person in people" :value="person.name">{{person.name}}</option> </select><BR/> Adverb: <select v-model="selectedAdverb"> <option v-for="adverb in adverbs" :value="adverb.name">{{adverb.name}}</option> </select><BR/> Verb: <select v-model="selectedVerb"> <option v-for="verb in verbs" :value="verb.name">{{verb.name}}</option> </select><BR/> Adjective: <select v-model="selectedAdjective"> <option v-for="adjective in adjectives" :value="adjective.name">{{adjective.name}}</option> </select><BR/> {{sentence}} </div> VUE + Javascript: new Vue({ el: '#app', data: { people: [ {key: 1, name: "Cat"}, {key: 2, name: "Dog"}, {key: 3, name: "Hamster"}, {key: 4, name: "Giraffe"}, {key: 5, name: "Zebra"}, {key: 6, name: "Rat"}, {key: 7, name: "Dragon"} ], selectedPerson: "", adverbs: [ {key: 1, name: "quickly"}, {key: 2, name: "slowly"}, {key: 3, name: "aggressively"}, {key: 4, name: "bashfully"}, {key: 5, name: "wistfully"}, {key: 6, name: "urgently"}, {key: 7, name: "diligently"} ], selectedAdverb: "", adjectives: [ {key: 1, name: "blue"}, {key: 2, name: "green"}, {key: 3, name: "ugly"}, {key: 4, name: "pretty"}, {key: 5, name: "smart"}, {key: 6, name: "weird"}, {key: 7, name: "funny"} ], selectedAdjective: "", verbs: [ {key: 1, name: "run"}, {key: 2, name: "smile"}, {key: 3, name: "laugh"}, {key: 4, name: "cry"}, {key: 5, name: "jump"}, {key: 6, name: "swim"}, {key: 7, name: "scream"} ], selectedVerb: "" }, computed:{ sentence: function(){ return "Do you " + this.selectedVerb + " your " + this.selectedAdjective + " " + this.selectedPerson + " " + this.selectedAdverb + "? That's hilarious!"; }} });

IGH Career Day 2019

I did the middle school career day over at IGH again this year.    It's four twenty minute presentations on what it's like to be an IT/Application Development Manager.  I'm always worried everyone is more prepared than me because I try to give it with no power points, a few white board drawings, and it varies from presentation to presentation.  There are cops there with K9s some years, and firefighters dressed in their gear.  Best I could do is bring an app.

My outline generally goes like:

• Hello, I'm me. IT Managers go by a few names.  I build apps.  I like my job.  Most people with my job have a CompSci degree and were developers.  I was in history/writing/English.  I know devs who were lawyers, bioscience majors, and travel agents.
• I work for a big company that most works with lawyers and judges and the government, but we have reporters who are amazing as well.
• Anyone's parents work with me?  It's a big place.
• You're all familiar with apps.  If you get to the credits at the end of a game (Far Cry) or a movie (Avengers of some sort) you'll see those huge lists of people after the voice actors and actors...a manager helps pull all those things together to get a product out in time, although usually within a limited scope.  My scope is IT.  But that's more than just developers...
• There are folks in quality/testing, PMs, big data, databases, ops (dev ops), business partners,  R&D, security, other kinds of development...I don't coordinate all of them, but I talk to all of them to make sure what's being built is what everyone imagines.  We have to agree.
• On the dev side, for my big company, the levels are software engineer, senior software engineer, lead software engineer, and then architect or manager.  That can change from time to time and place to place.  Then I talk about how much all those roles make because that's the most exciting piece of info I have for some of them.
• I've seen a lot of apps over the last 20 years
• Mainframes and build it on your desktop
• Distributed, but I could kick the server if I wanted to
• Distributed , but the servers lived on the other side of the campus in a plane-proof bunker
• Cloud, and the bunkers are in different regions
• APIs where everyone is back to building it on their desktop, but all the expensive pieces are now cheap and in the cloud.
• Patterns often remain the same from app to app and how to coordinate work, even if the underlying architecture changes.
• What's exciting about what I'm working on.
• There is a supreme court, district courts, state courts, county courts, even city courts.  Add up all those docs and you get hundreds of millions.
• Extract the entities and pertinent data, and you get hundreds of billions.
• Extract the relationships and you're in the trillions.
• You couldn't do that with books.
• Now you get a super cool chart/visualization that shows all that data distilled into a time to rule or other way to make a decision.  That saves them money.  Saves the customer money.  Means the law should be more affordable and accurate.
• APIs mean you can give that power to a lot of developers who may create something you never imagined by mashing up products.
• Questions
• Best one was "is it easy to make something" which prompted a bit more talking about APIs and crowdsourced apps and how cheap the cloud and new tools make it if you want to run it at scale.
• Do you know my mom?

It's a lot to fit into 20 minutes, and I usually take them to minute 19 before we get to questions.  But they almost never have questions, so I guess that's ok.  I was impressed this year that they weren't playing with their free fidget spinners (one presenter was in sales) - very well behaved.  The teacher told them it was nice to be back in 2015.

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Mad Lib (4) - Vue.js style

I thought a madlib lended itself more appropriately to Python, but perhaps that's because I grew up in the age of Zork and Leather Goddess of Phobos.  It works just fine with Vue, although the branching it's asking for next might be a challenge.  I haven't really tried control statements with Vue.  Wait, that's not true - I used the for/next in the random quote example.

I might actually have to put a little thought into the structure for that one.  I'm not sure what "branching" means in that context.  Select one of two verbs at random, and then use the other one later?  Allow them to only select from a few options and branch depending on the one they select?  That second one makes more sense if I'm not going to implement some NLP weirdness.  I haven't used a dropdown in Vue, so that will be a good challenge.


The code....I wonder how long until these start exceeding my textarea and I'll have to actually change the tag attributes.

HTML <div id="app"> Noun: <input ref="input" type="text" v-model="noun"><BR/> Adverb: <input ref="input" type="text" v-model="adverb"><BR/> Adjective: <input ref="input" type="text" v-model="adjective"><BR/> Verb: <input ref="input" type="text" v-model="verb"><BR/> {{sentence}} </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { noun: "dog", adverb: "quickly", verb: "walk", adjective: "blue" }, computed:{ sentence: function(){ return "Do you " + this.verb + " your " + this.adjective + " " + this.noun + " " + this.adverb + "? That's hilarious!"; }} })

Alita and Trevor Noah

Those two things are completely unrelated.  Tonight, after spending the last two days digging out of the fourth snowiest February in Minnesota history (the snow banks at the end of the driveway are as tall as I am, even with two toppings by Eryn), we went to a Alita: Battle Angel premier.  The Rosemount theater had a good deal for advance screening tickets and, combined with my gift card and rewards card, there weren't even any additional fees.  Bargain.  The movie itself was perfectly serviceable, but that speaks for itself.  The focus was on the spectacle and it felt like the character interactions were a bit lacking because of it.  I enjoyed it; very reminiscent of Ready Player One in design, but not nearly as good as that movie.

Last Saturday Eryn and I went to see Trevor Noah at the Xcel Center for his Loud and Clear Tour.  I won tickets and parking from work.  We tried to go to the Red Cow before hand, but it was too crowded, so we ended up at the Bohemian sausage place, which makes Eryn a bit nostalgic for the one in Eagan that quit paying their bills and skipped town.

Ming and his family were at the show on the other side of the Xcel from us.  We could barely see them when we squinted.  Eryn loved the show and laughed a lot.  She was somewhat annoyed with the first comedian whose bit was about things millennials didn't know about (but do), but she liked the second guy and his bit about his uncle and micro-airlines, and she loved Trevor Noah.  He did some politics, but focused more on differences in men and women, branding (although that was political, and had a pretty varied set.  Eryn was amused when he was talking about branding and asked all the men to put their hands up then said "put your hand down if you've stopped masturbating", and followed it up with the guys not wanting their wives/spouses to think they were quitters.  We couldn't tell if Ming put his hand down.

Zombie Chia

Our Christmas zombie chia lady started to get sort of gross for real.  She was always kind of gross, particularly as we didn't get the hair on the top of her head to sprout, only the hair on the sides.  And then it started to grow forward because that's where the heat from the fireplace rose up.  But eventually the sprouts started drooping into the gel-like water and rotting.  Zombie sprouts on a zombie head.  Nasty.

She was surprisingly difficult to clean.  Even now I think there are some seeds that won't come off.  Life is tenacious.  Undead life even more so.

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Mad Lib (4)

Simple one - do a madlib in this style and try it with string interpolation/substitution. Part II will be harder - it branches...I wonder if I'll have to use a picker to limit choices....I'll have to ponder that one. This one needs some sort of NLP to clean up the verb.

noun = input("Please provide a noun: ")
verb = input("Please provide a verb: ")
adverb = input("Please provide an adverb: ")
adjective = input("Please provide an adjective: ")

print("Do you " + verb + " your " + adjective + " " + noun + " " +  adverb + " That's funny!")

print(f'With literal string interpolation: Do you {verb} your {adjective} {noun} {adverb}.  That\'s funny!')
print('With interpolation: Do you %s your %s %s %s}.  That\'s funny!'%(verb,adjective,noun,adverb))

================ RESTART: C:/Users/u0024159/Desktop/MadLib.py ================
Please provide a noun: banana
Please provide a verb: ate
Please provide an adverb: quickly
Please provide an adjective: yellow
Do you ate your yellow banana quickly That's funny!
With literal string interpolation: Do you ate your yellow banana quickly.  That's funny!
With interpolation: Do you ate your yellow banana quickly}.  That's funny!
>>> 

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Quotes

https://jsfiddle.net/NodToNothing/kac3o5hj/

Again, I made up my own A/C a bit.  The example called for separating the quote from the attribution, and I see how to do that, but I'm not going to.  I had more fun inserting a randomizer for Princess Bride quotes.  The top quote is random, but the bottom unordered list shows all the quotes in the Vue list so I could try a control loop.

HTML: <div id="app"> <!--one random item--> {{selectedItem}} <!--all possible items --> <ul id="example-2"> <li v-for="(item, index) in items"> {{ item.message }} </li> </ul> </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { items: [ { message: "\"Anybody want a peanut?\" - Fezzik"}, { message: "\"If there are, we all be dead.\" - Fezzik"}, { message: "\"He's really very short on charm.\" - Fezzik" }, { message: "\"Fuss, fuss… I think he like to scream at us.\" - Fezzik"}, {message: "\"Probably he means no harm.\" - Montoya"}, {message: "\"You have a great gift for rhyme.\" - Montoya "} ], selectedItem: '', }, created () { const idx = Math.floor(Math.random() * this.items.length); this.selectedItem = this.items[idx].message } })

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Word Count

https://jsfiddle.net/NodToNothing/Lk5wsxab/8/

Well, I was going to limit myself to one exercise per day, but this seemed pretty straight forward given the last JSFiddle - use a built in length function (that was momentarily tricky because I wanted to use str. and length(), but it was intuitive), avoid nothing, count every key press. That last one was pretty much a gimme from Vue using computed properties (although I could have done it inline).

Code, in case I lose my fiddles...
HTML: <div id="app"> <!-- value will be ignored in binding; has to be handled in data --> <!--https://vuejs.org/v2/guide/forms.html--> Name: <input ref="input" type="text" value="Scooter" v-model="val7"/><BR/> <br>{{total}} <br>{{wordcount}} </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { message: "Hello ", val7: "Scooter" }, computed:{ total: function(){ return this.message + this.val7; }, wordcount: function(){ return (this.message + this.val7).length; } } })

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills - Chapter 2, Saying Hello

https://jsfiddle.net/NodToNothing/arbhqcs6/3/

Interesting exercise - keep the input, concat, and output separate.  Write it without variables and do different greetings for different people.  In the end, I'm the arbitrator of what constitutes the acceptance criteria, so I used Vue again and bound the mustache output to a function tied to an input box.  Admittedly, I could have skipped the function altogether and just printed Hello in HTML and then the value of the input box.  No concatenation at all, at least not actively.

I did learn that Vue ignores the value on the input and you need to set it in the initial data values.  There's a lot of magic under the covers tying the message variable and val model together in a function mapped to the HTML.  That's slick.  I shouldn't be too impressed given I played with React back in 2013 for a team demo and have been through Angular training, but I find it refreshing anew, particularly given how fast you can set up a UI.  VB COM speed to demo days indeed.

Cheater textarea again for anyone who wants to grab some "code", although it's easier to go to the JSFiddle.  I got to thinking I'd usually do this in Python (and IDLE) and it looks like I can go Py fiddle as well: https://pyfiddle.io/  Although that's not really any faster than running IDLE on my desktop.

<!-- value will be ignored in binding; has to be handled in data --> <!--https://vuejs.org/v2/guide/forms.html--> Name: <input ref="input" type="text" value="Scooter" v-model="val7"/><BR/> <br>{{total}} </div> Javascript + Vue 2.2.1 var app = new Vue({ el: '#app', components: { }, data: { message: "Hello ", val7: "Scooter" }, computed:{ total: function(){ return this.message + this.val7; } } })