Soft Open #002
Discover more from Eating Complexity
It’s Owls All the Way Down
Failure is the duty of the beginner
The continuing journey to get Graphs on a Page
Once I had found Rete and pdfme, I knew that I had enough of a tech stack with D3.js to generate the geometry between the two. But I need some help actually making this happen.
One thing that I’m conscious of is that using React demands that you know enough Javascript to be dangerous. But I’m not sure if I am dangerous enough with Javascript. So I need to fix this first before I move on.
The Plan
Learn more Javascript
Learn React
Integrate packages
???
Profit
One of the best things about coding nowadays is that no longer have to rely upon Stack Overflow for answers. Stack Overflow is both actively gamified and passively ossified. I found it to be a pretty toxic place to ask coding questions.
Often I would write a question for it to be instantly killed
or marked as a duplicate to some other question that has nothing to do with it. This is to do with people gaming the system for points, aka Imaginary Internet Power. Not only that, but many of the answers are not up to date.The Bot
A better thing to do is to use chatGPT (aka the bot) as a co-pilot. chatGPT never gets sick of answering my dumb questions, and can be pretty helpful as long as you understand how to ask it the right kind of thing.
Unlike Stack Overflow it will also add encouraging appendices to its replies such as:
Remember that interactive learning works best when you're actively engaged. Be sure to code along, experiment, and apply what you've learned to personal projects or coding challenges. Learning to code is a hands-on experience, and the more you practice, the better you'll become. Good luck on your learning journey!
Thank you, robot overlord!
Usage
It helps to be specific about what you want it to do:
Writing functions
Write me a function in Javascript that takes X as an input and returns Y.
This way of using it is like making a jigsaw puzzle piece by piece. You need to have a decent idea of what it is that you’re trying to do.
Debugging code blocks
If you have a code block that is not doing what it is supposed to do then you can send it to the bot and it can debug it for you. Sometimes errors aren’t easy to find because a block is kind of giving the right output: eg a block that is supposed to return an array does return an array, but it is empty.
If you wrap the code with ``` code ``` ie triple backticks then it helps the bot know where the code begins and ends. Probably this isn’t strictly necessary but I always do it.
Debugging from console messages
You can also cut and paste any error messages that you get back into chatGPT and it will have (usually) a pretty good idea of what is wrong.
Getting clever
There are other more advanced ways that you can use the bot as well. You can use it to generate prompts for itself:
I want you to become my Prompt Creator. Your goal is to help me craft the best possible prompt for my needs. The prompt will be used by you, ChatGPT. You will follow the following process:
(1) Your first response will be to ask me what the prompt should be about. I will provide my answer, but we will need to improve it through continual iterations by going through the next steps.
(2) Based on my input, you will generate 3 sections. a) Revised prompt (provide your rewritten prompt. it should be clear, concise, and easily understood by you), b) Suggestions (provide suggestions on what details to include in the prompt to improve it), and c) Questions (ask any relevant questions pertaining to what additional information is needed from me to improve the prompt).
(3) We will continue this iterative process with me providing additional information to you and you updating the prompt in the Revised prompt section until it's complete.
Drawing the rest of the owl
Working with the above I eventually got to the prompt:
"Empower me to deepen my grasp of JavaScript concepts vital for crafting web applications with React. While I possess a moderate coding background limited to JS/HTML/CSS, I aim to bolster my JavaScript proficiency. Furthermore, React is uncharted territory for me. My aspiration entails developing a web application employing 'Rete,' 'PDFme,' and 'D3' libraries, with an emphasis on SVG mastery. This project will embrace a Visual programming paradigm, enabling graph creation on PDF pages. End users will input CSV data to generate custom graphs, organized in a grid-based system within PDFs. I'm keen to learn the art of integrating third-party libraries proficiently. Particularly, I seek to unravel JavaScript concepts pertinent to React and delve into TypeScript, drawing parallels with my intermediate knowledge of Java to aid my understanding. Additionally, I intend to master Git for version control, exploring techniques like feature branching. I'm also interested in learning about testing methodologies and tools within the context of React applications, considering my goal of creating parallel versions for testing. I value a thorough understanding of foundational concepts before progressing to more advanced topics, allowing learning to take the time it needs."I won’t post the total result here but here are some resources suggested:
Javascript
React
Typescript
Git
git-it-electron (Desktop App)
Testing
Javascript: Jest
React: React Testing Library
OK that’s it for now! Next: Actual Learning.
If a question gets downvoted soon after being created it will never really appear in many people’s feeds
Soft Open #002
I would like to point out that StackOverflow isn't a Q&A site. I know it's confusing but Jeff Atwood, one of its original creators, complained at length about this years ago on his blog. It's a Wiki, not a Q&A site. It's a reference site. That explains their dysfunction, doesn't it? The points attributed to a question and its corresponding answer are meant to be an indication of the question's long-term viability and the answer's veracity. They basically only want questions with "universal" answers; questions that aren't specific to you.
You ask for an answer to "A in scenario X" but they aren't interested in that. They'll tell you "B is how we do things in scenario X". Moderators will kill your question if it's unlikely to add anything of value to this idealised version of a Wiki that lives inside their mind's eye. Everything about that site is fucked because its creators and its users have fundamentally different views on how the site is supposed to be used. Jeff Atwood and Spolsky did a terrible job of realising their vision. Hopefully chatGPT will kill that dinosaur.
You can use React the minute you have a fundamental understanding of JavaScript. Think of JavaScript as Lego. Your job is to design each brick. A brick is constrained by its manufacturing process. In the world of JavaScript that would be a function. A function doesn't necessarily receive an input but it should always return an output and is no different from having to write a linear equation.
The owl consists of a certain number of design layers. Think of "layers" as a series of components stacked together neatly. Components are functions and nothing else. React forces you to write components a certain way and that's a good thing. That kind of structure allows us to collaborate with others. All you gotta do to make progress here is to understand how components are written.
When you design your app you must think in terms of components and how they're stacked together. You can do this on paper. HTML is essentially the skeleton of your app, CSS is how you present yourself to the outside world (e.g. skin, clothing), and JavaScript how it moves (e.g. muscle movements). This perspective is useful in deciding how to structure your components. Where does an "arm" fit into the whole of it? You can and should include your CSS within each component. HTML is basically nothing but a 2D surface of a stack of Lego. Create an outline of your app in the same way. Then ask yourself a few questions: "What data does this component receive as input if any?", "What does this component return?", is it data or a view (e.g. layout)? It always returns something, some HTML it needs to render, but when should it render this view and how often?
The next thing on your list should be to answer questions like "how is data transferred from component to component?" In other words, data flow. If you can visualise how data will flow through your app you can create anything you want. The only other prerequisite is an understanding of the browser context which I'm assuming you possess.
Finally, I want to caution against using chatGPT. It's designed to please you and that can be dangerous. It's certainly a helpful tool. It can teach you how to think like a developer if used properly. I just want your readers to know that it's very much a people pleaser and that it might make you a lazy thinker. ChatGPT is superior to Google and I use it often but don't forget to develop trust in yourself.