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?

 

[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!

 

[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!

 

[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.