DEV Community

Cover image for Javascript way to go / Guide / Something
Ernesto A
Ernesto A

Posted on

Javascript way to go / Guide / Something

Alt Text
Heeeey, this is the first time Im writting here. Sorry for my broken english.

My name is Ernesto, I am from Mexico City and I started coding few years ago.

When I was in college I started learning Java and C++, only the basic things. Data types, loops, if/else, arrays, functions, etc. It was like an intro. In those days I stopped, because I didn't had an idea where to start to do something more complicated and the aplications of it. After I finished college, I wonder what to do, find something to do with my life. I always had an inclination for art, in that moment I found text's about glitchart from Rosa Menkman and Iman Moradi. Something... exploded inside. It was a whole new world about the guts of the computer and the meaning of an error being show and how the different programs show that.

Alt Text

In the glitch sources/texts in glitchet.com, there was some sketches and scripts about pixel sorting and I was thrilled, they were made with "Processing".
Surfing in youtube I found Coding Train channel. There was a lot of explanations about code, about this program thing called "Processing" that was used to learn to code and do art things realeted.

So then... here we go. My first "language", if you want to call it like that, was processing. My source to understand was the processing book "Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction" by Daniel Shiffman. I passed 6 months studying, understanding, making a lot of sketches and owning those. Making my variations. There was a lot of stuff in there.
It was cool.

Now I can proudly say that I know how to program with Processing, most of the art I make is with. But as everything, theres still a long long way to go. I'm better than few years ago, but well, I need to keep improving.

Alt Text

Alt Text

All of this was the intro to understand the slippery slope that is learning to code, not get discouraged and fail. Processing was a cool way to start because I had a visual representation about what I was doing. If I write "line(100,100,200,200)" and execute the code, yes, you can see it in the screen a 100px line from point A (100,100) to point B (200,200).

This year my challenge was p5js ergo Javascript. Plus I want to learn web development and do some art projects with it.

Processing has a version for JS that is p5.js. You can see that they are similar, they have few things that are the same as the "java" version, but the way p5js behave is much MUCH different than processing.

The example is the data types. In Processing when you declare a variable, you need to specify is an "int", a "float", a "String", etc.

int a = 2;
float speed = 0.48293;

In p5js you can leave "let" or "var" or "const" and assign the value "slkasd" - string, 039.984 - float, 1 - int without having to specify since the beginning of the declaration of the variable and it will know without those terms in the beginning.

let a = 2;
const a = 'this is a string and js knows it because this is a string you know???"

The journey then beginns, again. All over again. The idea in general of the post and the following is to try to explain what im doing. Explain some concepts in my way and try to make an archive.
I just want to say thanks to Tae'lur Alexis // @taeluralexis // I was reading some of the post about JS that she made and that gave me the courage to do this and keep working in this. Thank you so much, really ;___;

Alt Text

Sourcessssss

Books

Head First Javascript Programming by Eric Freeman & Elisabeth Robson

This works for the basics, but is way way before es6 and you can see it because they are still using 'var' but is a good book.

Eloquent JavaScript by Marjin Haverbeke

The first 4 chapters work if you have a little bit of understanding of JS, the next are like trying to understand how to turn a fish into a dog. I mean is not difficult but most of the examples take a little bit of time.

The site of the book is pretty good and even you can se the output of the code that is being show as an example

https://eloquentjavascript.net/

Make: Getting Started with P5js by Lauren McCarty, Casey Reas & Ben Fry

This goes align with the p5js library. Is really good if you want to start learning, but if your main goal is JS as a primary language it can be a start.

Internet

MDN - Javascript
https://developer.mozilla.org/en-US/docs/Web/JavaScript

If you want a bible, here is your bible. You want to find documentation about JS, here is your main source. array.reduce(), filter(),reverse(),regex,etc........ DESTRUCTING and the array with three dots in the beginning.

W3schools - Javascript
https://www.w3schools.com/js/default.asp

Is the same as MDN but some general explantions, they can give you a quick answer if you want.

Videos

Coding Train
https://www.youtube.com/watch?v=q8SHaDQdul0&list=PLRqwX-V7Uu6YgpA3Oht-7B4NBQwFVe3pr

Dan Shiffman have this beautiful channel and sometimes or pretty much all the time he makes livestreams with coding challenges or explaining how to do certain things or concepts. Is pretty good and dude, was my first entry to do all of this.

Coding Garden
https://www.youtube.com/channel/UCLNgu_OupwoeESgtab33CCw

CJ is really cool. Thats the statement. The channel is more related to web development, but theres some playlist with topics about JS and he makes livestreams too. Even he builds projects with JS and you can see how it works, the reason of some stuff that is in the code. Pretty good.

Fun Fun Function
https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q

Mattias is another cool dude that make me try this. He has content related with js and more like managment in a way "the way to do some projects is with this aproach or doing this", etc. It was my spirit guide all the time.

Dev.to

The cool thing is you can filter post and find JS related things or even guides. Thats all.

If in the future theres more links or stuff im reading, I will update this post.

EXERCISE

Edabit
https://edabit.com/

okey, we need practice and theres no better way than learning with problems and understanding some things and getting resources to solve that. Edabit is pretty good, the problems have levels, theres a kind of index thing where they lead you to a way to solve the problem.

I want to add codewars but I havent really try yet.

The difference between pay and free

Some of the source to learn JS can be udemy, freecode, codeacademy. I mean you can choose the option you want if you have the bucks to pay it, but in the end you can find some stuff free in the internet with enough research.

JS and the infinte problem

So much of the sources here are going to show you the basics. The books will lead you to go in different directions and maybe, MAYBE you will end in a horrible loop of doing things and feel chronostacis in real life. My answer to all of that, dont rush. Take your time. This is about being constant than being a fast learner. Sucks, but is the truth.

One of my main problems is... okey I have this book, they show me some concepts, then what? this is it? An object and how to access the object???? eh??? But the situation is that. So pretty much try to exange, build projects, try to write what you do.

Before trying JS hard as I could one of my projects was a tile thing.

Tile art is pretty neat and I wanted to make like an api (i wanst aware of the in the first moment), but i tried to make something with p5js.

https://skullflowerss.github.io/tilesproject/

The other one is like the first but with domino tiles and trying to go negative???

https://skullflowerss.github.io/Domino-project/

All of them are my babies and my first steps.

So... thats it. I hope you like it. I will keep writting, not a regular as I want to believe but I want to try.

Top comments (2)

Collapse
 
supermario_ai profile image
SuperMario

Your English and grammar is better than alot of native speakers. Awesome post Fam! 💯❤️

Collapse
 
skullflowerss profile image
Ernesto A

Thanks!! Means a lot ;__;