Learning JavaScript and React

[Jon]

Any JavaScript or react programmers here? I have recently gone through about 35 hours of JavaScript videos (probably taking me more like 70 hours). Now I am going through a React course. I am about 7 hours into it.

JavaScript has a C style syntax and it's taking me some time to get used to it. There is so much to learn, it is almost unfathomable! The complexity is right up there. Having said all that, the way I see things is nearly everything is in the browser nowadays.

Anyone else here learning these languages (or others) and going through courses on Udemy etc?

 

[Uncle Gizmo]

I did this EXCELENT course:-

Beginner PHP and MySQL Tutorial​

Free MySQL Tutorial - Beginner PHP and MySQL Tutorial

Learn PHP and MySQL and start developing web apps like a pro! - Free Course

www.udemy.com

on Udemy

Online Courses - Learn Anything, On Your Schedule | Udemy

Udemy is an online learning and teaching marketplace with over 213,000 courses and 57 million students. Learn programming, marketing, data science and more.

www.udemy.com

by infinite skills, narrated by Robert Tucker. I just love the sound of Roberts voice, I could listen to him all day! (I did!)

I think infinite skills are/were based near me? Possibly Oxford/Abingdon not quite sure?

I think that's half the battle, finding a knowledgeable well-spoken easy to listen to teacher/trainer. There are others out there no doubt excellent, but their style of teaching just doesn't gel with me.

Regarding JavaScript
I haven't found a JavaScript course yet that I like, however as you are most probably aware, JavaScript is used behind Google app scripts, it's what ties all of the Google apps together. However the user interface that Google provide, let's be nice, let's say it's basic!

But Wait! It's not going to be basic for much longer. Over the next two weeks Google are rolling out a new interface.

The New Google Apps Script IDE (2020)​

They have also made several other updates recently whereby you can more easily use libraries with it, so it's becoming a bit of a JavaScript powerhouse. There are quite a few very good videos on how to use Google App Scripts.

For a VBA programmer I would recommend you find Bruce McPherson, he has a website which I believe is called "Desktop Liberation" where Bruce demonstrates how you can change your VBA code into JavaScript, and use it with Google sheets instead of Excel and also use it through the Google app script interface.

Learning JavaScript through Google app scripts has to be a good option because you can instantly see what your code is doing within google sheets, Google docs and drive. You can also make some useful Gmail automations.

The complexity is right up there.

You know, I have struggled to learn new programming languages and I don't think it's so much that it's difficult, it's more like you think "Christ I could do this so bloody easily in VBA!" The incentive to learn to do it in the new language fades very quickly! That's my problem, sticking at it, which is why I quite like the route through Google app script because you end up with some useful functionality.

I actually built my own password generator in Google app scripts but when Google upgraded GAS it's stopped working. I haven't yet reproduced it in the new environment, for two reasons, it was a very simple method of generating a password and I wanted to upgrade it so that it would produce passwords with upper lower case and special characters, instead of all capitals...

The other reason is Google Keep shifting the Goalposts, as what happened to my password generator. It's always at the back of my mind they may do another update and I'll have to jump through hoops again to get it working.

 

[Jon]

@Uncle Gizmo I missed this post of yours. Only just found it.

I've been steadily learning my JavaScript and have now expanded into React and Material Design. I set a challenge of each day to just repeat a certain number of React tasks. I find drilling things into my head really helps.

Currently, I am working on a learning project which I would like to turn perhaps into a commercial app or free site to get traffic, if anybody likes the site. I named it Keyword Kevin! It is for Amazon Sellers or SEO types to process their search term lists.

See it slowly develop here: https://www.keywordkevin.com/

Currently, it just removes whitespace, duplicates, numbers and sorts into single keywords in a list. The checkboxes don't work at the moment.

 

[Jon]

Been learning about how to format sites using Material Design from Google. Here is my effort so far. I like my new logo!

 

[Jon]

I've been making good progress on my React project, learning a ton of new stuff in the process. The amount of Googling I have done to understand things is incredible. I've learned things about how to colour user elements, best practice design principles for button colours, layout and so on.

So, my app has improved functionality, different colours, an improved more modern looking logo and I think I can have my first React project as a viable website. It needs more functionality, but already it has some good keyword processing abilities and it looks clean, modern and tidy.

Any feedback you have is welcome, both good and bad. A working version can be found here: https://www.keywordkevin.com/

Just click the "Dummy Data" button to populate with data for testing purposes.

 

[Jon]

Just so you know where I started from, this was my first version. I've evolved!

 

[Uncle Gizmo]

It is very good. I've always said, the essence of learning programming is to have a project and keep bashing away at it. It's amazing how much you will learn.

 

[Jon]

Thanks Uncle. I've hit so many roadblocks, but one by one I overcame them. I've spent days trying to work out how to put a space between the buttons. Its not as simple as you think!

 

[Minty]

Thanks Uncle. I've hit so many roadblocks, but one by one I overcame them. I've spent days trying to work out how to put a space between the buttons. Its not as simple as you think!

Looks good @Jon - WIth the button space thing, don't you need to "pad" the button with a transparent border or similar to overcome the browsers desire to move everything around??

 

[Jon]

@Minty Thanks for the feedback. I've just found a solution. I've learned something called Class Components with React, but about 3 years ago, they introduced "Hooks" which can only work with what they call Functional Components. Most of the examples with Material Design involved Function Components, so the styling elements could not use Hooks. Anyway, I found a solution now, so let me change the image above so that it reflects the correct styling now.

Edit: Image and live website updated.

 

[Jon]

Just thought I would do an update on my web development projects. I am doing one on chess, which I would like to turn into a saas website, with a subscription service. This is what I have done so far:

The idea is that you can load in your games you played on the various chess websites out there, and my ai engine will go through the game and identify aspects of it. If you hover over the tags on the right, it will highlight the relevant parts of the chessboard. In my example, I had the mouse over the "White Outposts: d5 f5" tag, and you can see the corresponding squares highlighted. I will be adding functionality so that when you click that tag, it will popup a modal window with explanations about Outposts with some instructional material.

Currently at around 2,000 lines of code.

Got tons of features I want to add, but spent nearly a month on the above app so far. Learning tons as I do it. All good fun!

 

[Jon]

The current version of my chess app has started to get context sensitive help. If you click one of the tags on the right, it will give a popup with advice and strategy for that particular aspect. The example below shows what to do when White has the unopposed dark-squared Bishop.

Edit: White's dark-squared bishop will be highlighted in the diagram when I finish this part.

 

[conception_native_0123]

I think you're way ahead of a lot of other people there @Jon

 

[Jon]

Thanks. There is a lot to learn. Endless in fact. I am in over my head on a lot of stuff, but I try to break down the complex problems into digestible chunks.

 

[Jon]

This is the latest iteration of my chess project. I've created a sophisticated algorithm that displays values for each piece based on its position, what stage of the game you are in, and other secret sauce factors. No one else is doing this and I am sure it will lead to many an argument as to the true value of each piece! It already has in private conversations with chess players, but they understood the rational behind it once explained. Historically, everybody just looks at the Bishop and Knight and say, "Yeah, they are worth 3 pawns." But the value of these pieces change dynamically throughout the game. This algo will give insight and therefore more clarity for better understanding piece value. I hope it receives raving reviews!

 

[Uncle Gizmo]

@Jon I thought this maybe of interest:-

 

[Jon]

Thanks @Uncle Gizmo. It was already on my to-watch list. I saw the one with Magnus Carlsen, which I found interesting. Lex does some great interviews.