When Learning, Don’t Try to Bend the Spoon
Sometimes you just have to accept there is no spoon
“Do not try and bend the spoon, that’s impossible. Instead, only try to realize the truth…there is no spoon. Then you will see it is not the spoon that bends, it is only yourself.”
Required Watching, 1m 38s of your time:
https://www.youtube.com/watch?v=XO0pcWxcROI
I’ve been deep in “Learning Mode” for the last 7 days.
To be a developer, you must love learning. Learning new things. Re-learning what you already know. And learning that you need to keep learning to keep eating.
This past week I’ve been busy “I know kung fu”-ing my abilities in front-end web development (again, for like the umpteenth time now).
Things I have learned (and updated learnedness-ness on) in that time include:
Javascript/ES6/ES2015, TypeScript, SASS, Babel, npm, node.js, webpack, React, JSX, i18n, accessibility, Material Design, Material-UI, Markdown, Docker, Python, Flask
I find the best way to learn is to do. The important part of “I know Kung Fu” is the second part “Show Me.”
My browser is furious with me, it’s juggling so many tabs it’s almost given up trying to shorten the titles anymore. I live in constant fear of a Windows 10 forced system update where I lose all my various arcane tomes found.
(Note: I’m not actually scared, because years of being burned have made me store all of the those links in a notepad .txt file, like a caveman in the woods. It’s barbaric, but don’t begrudge me my safety ascii. I’ve included parts of it below in an appendix. And much like yours, you wont need it. Unless you intend to chew grass, or lines of code)
For context, I built my first webpage at an HTML Camp (yes, I was THAT weird kid) when I was a wee lad in the mid 90s. I also wore shorts that had one leg that was lime green and the other hot pink. But that technically was in the 80s.
Into the “modern” age. Or post-modern? Post-apocalyptic? When we’re talking about capital-F Front-End… All I can say is WTFE (What The Front-End??)
I’ll get back to this in a moment…
I remember when W3C compliance badges were the “it” thing to have on your site. Marking you as someone who gave a hoot about as many people accessing your sites as possible. Got a jalopy? Sure! It’ll load!.
It was easy then. There was a time when Internet Explorer had like 90% of the browser market.
A little well structured semantic HTML that only contained structural information about the data. Presentation decoupled from it. And some good cross-browser scripts to make everything run.
(Note: I’m glossing over that last item. Because anyone who was in those trenches with me knows I’m fibbing. It was awful, and hard, and frustration. I invented new swear words, summoned them from the void. And used them on myself. Because in the end, in Development it’s usually our fault.)
In nomine COBOL et FORTRAN et spiritus GCC
I’ve got to stop myself for a moment before yelling “Get off my lawn”. Because we ARE in the “future” I dreamed of as a kid.
Dick Tracy video watches. Yup (almost), Yup if you count a SmartPhone.
Cybernetic Star Wars arms (I AM your father!).
Sending memories from one slug to another slug. Yup.
I was born a few years into the 1980s. When I booted up and joined the vrmmorpg that is this life at Level 0… I couldn’t do much. And I remembered very very little
(odd note, I still don’t remember much before like grade 6. Might be because I got my glasses around then. Knowing that trees have LEAVES is not actually a given in this world. You have to always challenge your assumptions of what you know)
In the early 80s computers didn’t have much memory either. Take a look at this table, ignore the Y2K issue (pulled from reddit)
’82 to ’84–1KB to 16KB
’85 to ’89–512KB to 640KB
’89 to ’92–1MB to 2MB
’93 to ’94–4MB to 8MB
’95 to ’99–32MB to 128MB
’00 to ’01–256MB to 512MB
’02 to ’04–1GB to 2GB
’05 to ’09–3GB to 4GB
’10 to today — 6GB to 48GB
SRC:https://www.reddit.com/r/hardware/comments/5cr2j2/how_much_ram_did_computers_have_over_time_timeline/d9ynds0
Et tu, Brute?
Most of the pictures you take nowadays wouldn’t even fit in memory for a computer. Even when The Matrix came out, 128 MB of memory was the common find.
For reference, my machine is currently using 11 GBs. Giga. Not Mega.
It’s also thinner than the books I have on computing. By a large margin.
I bring this up only because of what the limitations of the technology force us to do. When you only had 128 MBs to play with, you couldn’t just roll with abandon, with massive IDEs, unlimited tabs (if your browser even had those), bloated libraries or inefficiencies anywhere. Well you could, but it hurt.
I feel spoiled now. I’m being instructed by the greatest minds in my field to do what I’ve been trained not to.
“WHAT DO YOU MEAN I’m not supposed to drain their imbalanced humors with LEECHES??”
But this comes back to the spoon. There is no spoon. No one true way to do anything. It’s all artificial. It’s all thought stuff someone made up to do something neat. Then another one came along and built on that to do something else neat. Each layer along the way had things that didn’t apply to the “future”, but it was a stable enough platform to reach the next level. But it’s a bit like a tower of jenga. Deft hands make light work… but it’s easy to come toppling down.
To progress — and in my case npm install learn relearn — save-brain — you have to accept it’s not the spoon that bends. It is you.
Don’t be a rigid tool, unless you’re a wrench.
Such is the case with being a learner. You have to bend. If you are rigid and try to leave your existing understanding intact, you will lose.
All learning will force you into cognitive dissonance as you resolve the dependencies and orphaned nodes in your own mind. It’s too easy to dismiss new information that doesn’t match due to “I know this stuff already”.
Truth is, the never ending march of time turns streams into grand canyons. It does the same to the gulf of knowledge in your mind. The things that you used to know, after time wither and decay like untended roses.
For the garden of your knowledge to stay vibrant, you must feed it it blood sweat and tears. And swearing (in my case). You must toil away at this labor of love. You are both the clay and the potter. Flame and the kiln.
To learn you must break pot after pot. And then remake each one in turn.
But before you do — I find it’s sometimes helpful to really try and “context switch”, and think about what it means to be a Learner.
The catch is, you must learn to be a learner.
What does it mean to be a Learner
The best way I can think to start this is to ask if you’re an anglophone or francophone first. Then, depending what the answer to that is, I want you to think of these two situations:
(apologies, I’m using a Canadian context here — but the web is a global treasure, so replace with a context that applies to your locale)
If english, I want to you to think of those “I before E except after C”, and “The T/H/S is silent”, oh those words are spelled differently but pronounced the same.
If french, I want you to think about how to accurately determine whether an object like a boat or house is feminine or masculine reliably. Or how to type effective french with a US layout keyboard.
The fact is, if you started in a particular environment, a lot of those “Weird common knowledge” points are learned in a passive osmotic way.
You just pick them up. Like how you learned to speak in the first place. You probably started with cry, a sound, babbled sounds together, a word, that word many times, a few words, sentences.
Eventually you’d grow to love puns. (or you wouldn’t, but that probably means I’m not inviting you over for dinner).
But you’d also do one critical thing. You’d forget how hard it was to go from a cry to a sonnet.
To someone who didn’t start out with either english or french, Canada is an interesting place. You kinda get to pick what you start with. Or just dive in and start working off the most accurate branch of the repository, which is the bilingual version (honestly, we all should try to migrate to this branch, life is better when you can speak to more friends)
To someone who hasn’t done any Development. It’s kind of the same. Except there’s a zillion languages to learn. And tons of weird “I before E” rules. And silent letters. And things you “just should know” by divine intervention I guess.
(oh you’re using arcane version of cryptic thing A, you need to add a chicken to your path, then make sure you’ve recently congratulated a goat, but only if you are above southern equator, otherwise a ram will do. Never use a honey badger, as we all know what honey badgers do and dont)
When faced with these frustrating, and unintuitive, exception upon exception things you will find on your own learning journey — the best advice I can give you is. Keep going. Write it down.
Open many many many tabs. Close them slowly. You need raw data (just like you did when you were learning to speak for the first time) to help you figure out what the important words and phrases are.
It’s all going to feel like a jumble, a wash of unconnected factoids and thingoids. But this is how a brain can work. It’s built to process things in parallel. Learning in serial. One thing at a time. That’s how machines do it.
I find the “to understand the ocean, you must first dive in it” to be true.
Academically I know and understand many things. Because all of them are either base level method signatures or pre-minified repositories of information. Useful in a good 80% of cases. Which from a human standpoint is usually “good enough”.
The challenge (as always) is translating that mental chatter into the physical world. In my head I hear orchestras of unending complexity, I can see applications and cybernetic augmentations, new universe spun into existence and disappearing.
But when I try and translate that… Usually this is the result: https://www.youtube.com/watch?v=SIaFtAKnqBU
To take it from the academic understanding into the practical and pragmatic world of reality. That’s an exercise in being resilient, brave, and cultivating the fortitude to press on when for what will be days… all you have done is fail. Fail relentlessly. Fail repeatedly. Fail to understand. Fail to compile. Fail to render.
Just don’t Fail to Fail.
Making mistakes is the point of the game. Your brain needs that to make connections stronger or weaker. Without failure, you will overfit your training data, and be unable to perform when it changes on you.
When you mix enough raw information with enough failure. Apply pressure and time. You will produce what you were after.
A crystallization of knowledge.
It will go from opaque to clear, the facets will reflect new patterns and discoveries built from what you know now. This is the “Eureka!” moment. The moment of clarity. The eye of the storm.
This is the moment you choose. Remain with your crystal… or press on out of the eye with it, and through to the other side. I promise if you press on and remain brave. Oh, the things you’ll learn.
Remember my friends
Do not try and bend the spoon. That is impossible. Instead only try to realize the truth.
The truth?
There is no spoon. Then you’ll see it is not the spoon that bends, only yourself.
Weasel.out()
Appendix, Bonus Content!
I learn by seeing and doing. So I want to share with you the gory details of how I learn things.
To show you what I mean. Here’s a snippet from my “external mental database” dontforgetthisstuff.txt — I warned you it was barbaric. Note the repeated links, the buckets that make very little sense, a weird meandering route through npm (with lots of cleanup left to do). But for me, it works. The part where you see “SENSE!” is the first time things started making sense. You will find your own way of learning. Cue cards, getting quizzed with tangerine segments as rewards. Whatever works for you… Do it.
# START
https://github.com/google/material-design-lite/tree/mdl-1.x/templates/text-only
https://medium.com/the-code-review/docker-run-vs-exec-deep-dive-into-their-differences-19a1041735a3
https://medium.com/datadriveninvestor/a-quick-example-of-genetic-evolution-in-javascript-lets-make-a-baby-5a6f20d5de84
https://medium.com/@kieranmaher13/nodejs-in-three-ish-minutes-4c4401b43b2c
https://code.visualstudio.com/docs/?dv=win
https://cards-dev.twitter.com/validator
https://github.com/kamranahmedse/developer-roadmap
https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d
# SENSE!
https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9
https://www.taniarascia.com/getting-started-with-react/
https://github.com/taniarascia/react-tutorial
https://github.com/angineering/FullStackTemplate
https://github.com/github/fetch
https://medium.com/@mattburgess/how-to-get-data-with-javascript-in-2018-f30ba04ad0da
https://www.i18next.com/overview/getting-started
https://github.com/i18next/react-i18next
https://www.npmjs.com/package/whatwg-fetch
https://realpython.com/python-json/
https://www.codingame.com/playgrounds/8508/reactjs-constructor-tutorial
https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-react-app-with-react-i18next
https://github.com/material-components/material-components-web-react/blob/master/docs/adding-env-variables.md
https://medium.com/codingthesmartway-com-blog/getting-started-with-material-ui-for-react-material-design-for-react-364b2688b555
# CHECK
https://github.com/alexanmtz/material-sense
https://github.com/alexanmtz/material-sense/tree/master/src/components
https://material-ui.com/demos/app-bar/
https://reactjs.org/docs/create-a-new-react-app.html
https://reactjs.org/docs/introducing-jsx.html
https://reactjs.org/docs/thinking-in-react.html
https://reactjs.org/docs/state-and-lifecycle.html
https://medium.com/js-imaginea/comparing-bundlers-webpack-rollup-parcel-f8f5dc609cfd
https://babeljs.io/docs/en/babel-preset-env
http://flask.pocoo.org/docs/0.12/server/
https://medium.freecodecamp.org/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0
https://blog.arkency.com/2014/10/react-dot-js-and-dynamic-children-why-the-keys-are-important/
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
# OPTIIMIZE
https://reactjs.org/docs/optimizing-performance.html#use-the-production-build
https://github.com/taylorhakes/promise-polyfill
https://www.barrykooij.com/polyfilling-fetch-promises/
https://github.com/taylorhakes/promise-polyfill
https://blog.steven266.de/react-blank-screen-on-internet-explorer-11-7b7c5863873a
https://babeljs.io/docs/en/babel-polyfill
http://www.divby0.io/development/react/2018/04/24/react-ie.html
https://blog.arkency.com/2014/10/react-dot-js-and-dynamic-children-why-the-keys-are-important/
https://github.com/github/fetch
http://jussi.hallila.com/2016/05/01/fixing-internet-explorer-for-your-react-es6-app.html
https://codelabs.developers.google.com/codelabs/mdc-101-web/#2
https://reactjs.org/docs/conditional-rendering.html
https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3
https://reactjs.org/tutorial/tutorial.html
https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md
https://github.com/material-components/material-components-web-react/tree/master/examples/roses
https://material.io/tools/icons/?style=baseline
https://material.io/design/material-studies/about-our-material-studies.html#usage
https://balsamiq.com/wireframes/
https://en.bem.info/methodology/naming-convention/
https://github.com/kamranahmedse/developer-roadmap
https://realpython.com/python-json/
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
# NPM STATE: howd you get where you are?
cd static/appname/
npm init (with general defaults)
npm i webpack — save-dev
npm i @babel/core @babel/preset-env @babel/polyfill @babel/preset-react — save-dev
npm i react react-dom — save-dev
npm i css-loader sass-loader source-map — save-dev
npm i mini-css-extract-plugin — save-dev
npm i style-loader — save-dev
npm i babel-loader — save-dev
npm i node-sass — save-dev
npm install -g tslint typescript
npm install whatwg-fetch — save-dev
npm install promise-polyfill — save-dev
npm install — save core-js
npm install — save-dev react-localization
npm i react-i18next
npm i i18next-browser-languagedetector — save-dev
npm i react-i18next — save-dev
npm install i18next-xhr-backend i18next-browser-languagedetector — save-dev
npm install material-components-web — save-dev
npm install — save-dev react-redux
npm i @types/react @types/react-dom @types/classnames @types/node typescript
npm install node-sass
npm install numeral
npm install @material/react-button
npm install @material-ui/core
# to run it/compile
npm install
npm run watch
python test_ui.py
