Markdown project/regarding libraries

Tell us what’s happening:
Not a rant…
So the biggest challenge I have had in these certifications has been knowing what is behind the curtain. In JS, for example, how do you know to split a string into an array until you are aware of the string.split() method? In Bootstrap, you have plenty of classes containing pre-fab css that you can access by assigning the class=“button btn” or class=“container-fluid”. But its not like you can then SEE it in your CSS code. So I haven’t really been able to find much use for it yet.
So far I have just had to weather the storm and eventually learn the abstractions as I go and not doubt myself for not knowing the solution before knowing of the tool used in the solution. It was a rough road especially in JavaScript.
Currently I am planning out my React Markdown Previewer. I know how to create an input textarea and write a function to handle the data event. I know how to import React as well as a “marked” library, and I can see from other people’s code that those have certain abstractions baked in behind the scenes. The example pen uses classes, methods and parameters that are undefined in the actual code like…

"editorWrap maximized", handleEditorMaximize(), or const renderer = new marked.Renderer(); renderer.link = function(href, title, text)

const renderer is defined but the prototype marked.Render()is not(because it is an abstraction).

So any advice on how to learn this stuff? I am interested in the libraries but without a librarian, a card catalog, or basic access to walk through the isles of shelves, its not accessible to me.

If I were in a classroom setting, this would be easy. Any advice on how to familiarize myself with these things?

In JS, for example, how do you know to split a string into an array until you are aware of the string.split() method?

Well, you would hope that it would have been covered in a lesson before then. It got referenced in a few challenges and was explicitly taught in this lesson. It is always a good idea to go to MDN and familiarize yourself with the string prototype methods, the object prototype methods, and the array prototype methods.. I consult one of those at least daily.

But ultimately you have to get good at reading docs, going out and finding things. You’re going to be using Bootstrap? Draw a bubble bath, poor a glass of Rose and start reading.

const renderer = new marked.Renderer();
renderer.link = function(href, title, text)

const renderer is defined but the prototype marked.Render() is not(because it is an abstraction).

I’m not sure what you mean by that. It is defined, here. True, in codepen it is somewhat hidden because you import things in the settings/javascript/external scripts and is made globally available. In a “real” project you’d have to import that and assign a variable to it in each file where you use it so it would be a little more obvious, but it’s no less real.

So any advice on how to learn this stuff? I am interested in the libraries but without a librarian, a card catalog, or basic access to walk through the isles of shelves, its not accessible to me.

Use the libraries. Google things. Read docs. Ask questions. Make mistakes. This is all so complex and has a certain irreducible complexity, making it very difficult to teach. At some point you just have to dive in and make mistakes. You’ll forget things along the way and that’s OK - they will be easier to relearn and more importantly you will get better at finding the answers.

This is actually a great deal to practice. I found it moreso enlightening when I found an easier way to do something or “the” way to do something. But it is frustrating in the pre-knowing stage.

I found this struggle -> breakthrough feedback loop pretty rewarding actually.

That being said, it gets easier as you go.

E.g. you will feel “in front of the curtain”, so to speak, less and less. Depending on your what your working on, you may find yourself never wondering about what’s “behind the curtain” - this I think of as stagnation. But it can also be quite rewarding to always feel you know or can easily find the answer to everything.

Moreover, I want to add that finding what’s behind the curtain is a skill. Usually exercised through google. And you can get very good at it. I am very good at this now, so when I run into something, I can usually find the answer quickly. Often, I use google for copy and paste of things I know I could write by hand. But it is quicker and more efficient, and prevents typo errors.

But there’s always more to learn. Last year, I spent 40 hours per week for a few months trying to do something that apparently only 2 other people on the internet had ever done and published how to do it before. And neither of their attempts worked. Talk about staring into the abyss.

For built-in methods, you need to read the docs. This is another skill, and one I didn’t particularly enjoy practicing. But once you’re good at it, it’s actually super efficient and helpful, again, for keeping the curtain open. Something I wouldn’t recommend you do while showering. Unless your shower is designed for that.

Docs are usually contain:

  • how to install/add to project
  • built in methods, descriptions, examples
  • required and option parameters
  • built in properties descriptions, examples, effects

Not all docs are created equally, also.

Thanks,

…I think I err on the side of ALWAYS having to know about the abysse. I don’t mean to sound like I’m whining…but IAM whining, actually. I’ve gotten better at seeing behind various curtains but that just makes me up my efforts. For example, in the early projects, most people build around the example project. Training wheels. For this cert I am writing 100% of the code from scratch, no templates. So I see all of this code, which I know is defined or initialized because it works, but its not defined for me and I can’t accept it or parrot it back without the code being 100% mine…or else what is the point.

So I Google and Reddit and even FB all the time. The search gets harder but I get better at it…So this question about abstraction -specifically with libraries- has been gnawing at me. Ex: I don’t really like Bootstrap…I was going to say “because there is no gallery” to show you what tools you have…but I just stopped for a second and googled “Bootstrap class” because what I DO know is that it uses that. Voila, I found something I had been looking for for a long time. Asking questions forces me to redefine the problem which then just solves itself.

If you don’t mind, could you tell me more about DOCs? My go to is Mozilla for JS methods. The one you link is actually open on my work computer from this morning but I haven’t gotten to it. Are these like the ‘official’ docs from the creators of the language?

I wouldn’t have known about marked.js.org …When I started JS I remember thinking it was hard because I couldn’t just literally google the code itself anymore…but the abysse stops being abysmal when you can make out shapes…then name the shapes and describe them…Thanks for the talk. I feel better.

That’s exactly right. For example you can look up react-strap docs as an example, or quasar docs (quasar is a framework like bootstrap but for Vue)

Most things that you can npm install Have some kind of docs. Sometimes it’s just the GitHub readme, major popular ones will have their own website

I’m glad I’m not the only one. I literally look at the same ones over and over, almost every time I use one. string.split() was not the best example, but SO many times in JS they give you a challenge where the solutions use things not in the lesson. Its kind of GREAT actually. Super frustrating but after 7+ months of doing JS 5-10 hours/day I am actually finding I know some things. I remember feeling depressed after working on a solution and thinking “how do I tell it how to find this element” and the solution used .find(). It seemed ridiculous to just use English words like .join(), .filter() (If I could just tell it what to do .forEach() element :thinking:). Are these magic words?

I’m just having a temper tantrum because I’m torn between finishing the work/building a foundation/and having more fun with the things i’ve learned. Trying to do it all at once. Putting too much pressure on myself.

Yeah, I meant const renderer is being defined right in front of me as **new** marked.Renderer()// big "R" which I recognize as an object prototype. So that just points me back to curtain. SO WAIT!! what is this Github page you referenced? Is this literally where the codepen is getting that?

I haven’t done any full stack yet. I understand the basic concept, …but wait ALL of these things I’ve been looking at are being imported from Git repo?? ok good to know. I was planning to use this.

Ok, that’s what I have been doing. Both your and @ethanvernon’s reply shed a lot of light on this. I’m glad I asked.

1 Like

Its very rewarding! Then you come back to Earth a few days later and feel like a dummy.

It’s not a “curtain”, it’s an import. The code is written somewhere else and (in this case) by someone else and you are using it.

I haven’t done any full stack yet.

It’s not really about backend. It’s about code written in other files. If you look in that codepen, in the settings/JS/external scripts, you see “https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.js” - codepen is going out and importing that code and making it available globally. This is roughly the same as doing <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.js"></script> in an HTML file.

However… the more “modern” way to do it would be do do it in a Node environment, possibly with something like webpack. Don’t let “Node” scare you - yes, that is a backend language, but we are just using Node (javascript running in your terminal) to work on our app and break it apart. In that case, you would use something like npm to “install” that library (actually go out and get a copy and put it in a folder called node_modules and then your project could reference that with something like:

const marked = require('marked');

or

import marked from 'marked';

depending on how things are set up. You would have to import that into any file that uses that module.

Don’t worry if this is too much. Just keep doing what you’re doing. If you keep with this, eventually you’ll want to look up a video on how to set up a webpack project, or if you’re going to do React, create-react-app is a great head start. You don’t have to worry about these things now, but since you seemed interested, this is where things are headed.

2 Likes

I don’t think that is too much. I have links to React, React-dom, marked.js and Babel in the JS tab of my codepen. The Github doc throws me for a loop because I don’t see it in the code.

So importing it isn’t my hangup. I import IMG’s, fonts, icons all day in HTML. Its that we are importing new language and vocabulary from places yet unseen. The “curtain” is one’s inability to see the menu…we spoon feed babies, order for toddlers and later let them read the menu to know what is in the kitchen. They can ask the waiter questions to increase their power over the meal they are about to have. If you’re vegan you almost have to know how to cook everything you order to anticipate “bugs”, like if the waiter thinks fish is a veggie or forgets to mention the egg-wash. Maybe a dark cupboard would be more accurate. Either way the constituent parts are what I want. So I will look for the most primary sources. About to check out this “marked” library.

It’s not a new language, it’s a specific implementation of JavaScript. But it’s still the same language.

The “curtain” is one’s inability to see the menu…

The “menu” isn’t there.

React is a library. It is imported. I know if I have questions, I can go and see their well written docs. In some cases, I even go to the git repo and look at the source code. There is also extensive Q and As about it on stack overflow. It’s a matter of knowing where to look.

But a nice, neatly bundled menu or a bouncing ball to lead you to what you need to know? No, that doesn’t exist. It is what it is. Some libraries are well written and have good documentation. Some, not so much. We can choose to use them or not - it’s up to us.

There are some add ons to JS that get a little closer to what you want, like JS-docs that provide some level of documentation in the code. And things like TypeScript are somewhat self-documenting. But those are extra things.

Sure, these libraries are a bit of a black box, but only if we choose not to look. But we have some assurance in that the code is 100% transparent and people find the problems - accidental ones and malicious ones. But at some level, I have to trust that React is going to do what I want because I don’t have enough time (and am probably not smart enough) to check all their code. But if I want see farther than others, I need to stand on the shoulders of giants. I have to trust that they have a solid footing.

1 Like

I see you are a jazz guitar player. I’m a sax player and have had some good lessons with other jazz musicians who code. Lots of parallels, like in this instance, I would be doing scales/patterns and looking toward doing actual transcriptions. First Cannonball solo I took down when I was 15 took me several hours but I immediately started to spit out Cannonball-flavored markdown

Yeah, I have trouble convincing my music friends how creative coding is and I can’t seem to convince my dev friends how technical and analytical music can be. I think my training in music and working on my MA in music make me a better coder.

1 Like

Yeah it does. The autodidact mentality alone. I think Jazz primes your brain for this kind of thing. I say 20% get it (music friends…I dont really have any dev friends yet).

It definitely fosters the “I will always be learning from everywhere and everyone I can and I will strive for excellence” mentality.

1 Like