Code Problem Solving

Feb 23 2023
Code Problem Solving

I've been learning Grav and that mainly means learning how Twig templating works. I reckon I've made reasonable progress in the month Ive been working with Grav, so I feel good. Learning a new CMS and how to build the site and customise it's processes, I tend to just throw myself in and steadily work through things, referring to exsiting sites or templates on Github, and making use of forums a lot. For us multimedia devs, we are essentially 'google hackers' and can be pretty deft at finding code snippets we then hack to pieces to get them to do what we need them to do. No, it's not how things are supposed to be done but the Internet was not only built by coding geniuses (genii?), but by a lot of google hackers, and I'm one of them. This post is about how you get to be a google hacker, and that actually means how to be a good code problem solver without knowing everything about the languages that might be entailed in your problem. Any examples I give here will be mostly about my recent Grav first dev site experiences, with some wider context.

Establishing the problem

The first part of the process is establishing the problem, and being aware that the problem you first have may need to be re-interpreted a number of times in order to find the solution. There will be all sorts of possible solutions, and each potential solution you find on your search travels might be super relevant, partially relevant, a bit relevant or actually misleading and a tangent. Knowing this is important, being aware of this will affect your state of mind and ability to rethink things as you go along. The reason you come across the problem in the first place is what affects your initial interpretation, but it's understanding the wider context that is where the solution lies.

Think laterally

Rethinking the problem is really important. Getting stuck in how you think about a challenge is a real hurdle to solving it, and any tech problem you first come across is usually part of something else that is its context. The context of the problem is the key to solving it. For example, needing to display tags when clicking from any url current page in Grav can seem really difficult because of how page collections 'appear' to work. Until you realise that your actual problem is the way you're displaying tagged content, and your decision on the site information architecture will dictate the solution you need. In this case, using a blog.html.twig copy that is then edited can help, as it will display your tagged content in all page collections and from any prior current page direction, no matter the template being used for that page - i.e. a default page can access tagged content (a listing page) easily if you know to make a new template.

Reverse engineering

This skill has been invaluable to me as I have progressed in my google hacker way of life. Knowing how to sleuth another app or website is a really useful skill, to break down what it's doing and how it's doing it. For example, it's how I discovered what angular.js was, or how different embed object codes worked, or other similar things. Reverse engineering also applies to code snippets. Getting a bit of code to test in your problem can mean using part of it, or testing different sections of it. In turn this starts to teach you how the code works, and the practical way youre learning is arguably more robust than just doing vague coding exercises that have no reality in your mind. I learned a lot about CMS and script customisation doing this, by testing bits of the code to see what they did.

Use script libraries and localhost

I used Hot Scripts a lot, back in the day, and it taught me a vast amount about how things work. Im happy to see it's still going strong. Huge resources of PhP, html5, JavaScript or other scripts are available free, and I implemented many different kinds of things to get my brain to understand the 'principles' of what was going on. This means you will need your own hosting space, so use localhost on windows or Mac. You can also get fairly cheap remote server space (eg Siteground or Ionos for example).

... and code testing platforms

Ive also made a lot of use of Codepen, a superb resource for learning how things work, and testing solutions. JS Fiddle is also hugely useful.

And most of all, join forums

Stack Overflow is the single most useful set of forums you must be familiar with, and join as many relevant forums in it that you need to. Bookmark questions, star useful responses. Though Stack has a huge amount of forums that aren't aimed at tech, I think it's main purpose at least as it began, was tech. One word of warning about Stack and other tech forums: be aware that some people on these forums are highly skilled and do not suffer fools. Give detail if you ask a question, and protect your identity is my advice. If youre a newbie, say so. Give code examples of the problem youve got. Scour other similar questions before you ask a new one, and if you reply, make sure it's a comment unless it is an actual solution answer to someone else's problem. Stack is closely moderated, which is what makes it very effective, but it also means that some of the mods are a bit power mad. Other useful tips are to join the support networks of whatever youre working on, these will often be on Discord or Slack. If you feel shy, use obscure usernames that are non-gender specific (e.g. bigtruck, mongoose, Dandy etc etc). Also, join GitHub, to be able to take part in question areas, but aldo to star useful code repositories.

Final words of advice

Become familiar with goto sites that offer tried and tested code snippets and examples for what you're working on. For me this is people like Chris Coyer's CSS Tricks, Codepen contributors, WordPress Beginners, WPMU Dev, people like Brandon Kelly, Drupal forums, Twig and Craft resources, Github stuff, (previously also using ExpressionEngine forums too) etc.

We all do it differently but this is my take on it.

Full size header image (click)
Code Problem Solving Code Problem Solving

Suggested Posts

Previous Post Next Post