Hey everyone who just accidentally clicked on the link of my blog. I hope that was not just an accident though. So i think i was a bit lazy in the past few months to write something here. Better to say i had other things to do. I mean i had to change the process of my learning. I realized that learning only the pure programming side (Javascript, Jquery, PHP, Mysql etc.) of this whole thing is not enough. I have to become more familiar with the design process and front-end development as well.
My idea right now is that i'm going to dig myself into the freelance world to design and code websites alone. That means i must take some learning courses from designing and using photoshop or illustrator. I'm not saying that i'll stuck here but i want to keep myself up to date in the design industry as well.
By the way my BlackJack app is ready. It's up and running although i have to fix the markup and style a bit because at the beginning as i started to write the app i wanted to keep it simple as possible. Now that the app runs, i can turn back and give it some style. I can't upload it yet because i don't have a host but i'm currently working on it. I'm planning to make a portfolio site for myself and there i could link my projects that i have. I would like to design and write this site on my own.
Some other great news of the last 2-3 weeks. There would be another two portfolio sites i'll be working on. One of them is for a make-up artist and the other is for an aspiring photographer friend of mine. He is also the bass player of my metal band lol.
A third project is also on the horizont but it's not 100% so i didn't want to say more about that yet.
Take care, keep on coding!
Sunday, September 13, 2015
Saturday, July 11, 2015
Captain's Log: Stardate 93127.98
So it's been again a while since i wrote my last post. But it's summer and festival season so i think that's ok. I'll try to check in as often as possible though. Fortunatly i had the time to take care about the project with my Blackjack app. So let's just update the status.
I wrote the basic html code for the app. It's nothing fancy, few div's here and there. Less than 100 lines from code. I would say nothing more to it 'cause the main thing is the javascript part of the app. Oh i almost forgot, i've done also the basic css to get some styling as well. It has become a little bit more than 100 lines. Maybe it'll grow a bit if i have to correct or expand it later.
About the js file... I've begin with declaring some global variables, some of them are array's. One of them holds all the cards of one deck. That's 52 card and every one of them is also an array with the properties of each card (spades, king, and the value). Then comes the object that i created for the app within this object ther are all the methods that controll the small parts of the app. I'll put some of the script in the end of the html code within the script tags. There should be all the DOM manipulation stuff which to be honest somehow not functioning or not all the things. So i thought i'll work on that later if i'm done with app and it's up and running. So far i made the method to controll the bet, if the user types in a bet and clicks on the 'hit' button then this method takes this value and puts it in the pot while the chip of the user gets less with that value.
I wrote also a method to create a random number that'll be the index for the card array. And the other method will take this random number search through the array for the specific card and put it into another array that take care about the handed out cards. I'm having some issues with this method though. I'm working on those right now. This method should do it twice at the beginning and than i have to re-use it to go further but only with one card. So i'll write another method that'll include this function and so it will be reusable without using the loop. That's the current standing.
I wrote the basic html code for the app. It's nothing fancy, few div's here and there. Less than 100 lines from code. I would say nothing more to it 'cause the main thing is the javascript part of the app. Oh i almost forgot, i've done also the basic css to get some styling as well. It has become a little bit more than 100 lines. Maybe it'll grow a bit if i have to correct or expand it later.
About the js file... I've begin with declaring some global variables, some of them are array's. One of them holds all the cards of one deck. That's 52 card and every one of them is also an array with the properties of each card (spades, king, and the value). Then comes the object that i created for the app within this object ther are all the methods that controll the small parts of the app. I'll put some of the script in the end of the html code within the script tags. There should be all the DOM manipulation stuff which to be honest somehow not functioning or not all the things. So i thought i'll work on that later if i'm done with app and it's up and running. So far i made the method to controll the bet, if the user types in a bet and clicks on the 'hit' button then this method takes this value and puts it in the pot while the chip of the user gets less with that value.
I wrote also a method to create a random number that'll be the index for the card array. And the other method will take this random number search through the array for the specific card and put it into another array that take care about the handed out cards. I'm having some issues with this method though. I'm working on those right now. This method should do it twice at the beginning and than i have to re-use it to go further but only with one card. So i'll write another method that'll include this function and so it will be reusable without using the loop. That's the current standing.
Saturday, June 13, 2015
Do or do not, there's no try
Hey everyone. Last time i wrote about this online game application that i want to build up just by myself. I thought that Poker will be just fine for that and i could handle that. I was wrong. As i got into the rules of the game deeper (we're talking about texas hold'em) i realized that this will be a huge bite for me. There's too many things that i should be aware of, too difficult rules. I mean on this level where i am right now. Maybe later i'll come back to this and finish it.
But now i just simplify the game. I decided to create an easy blackjack game. Which is ofcourse not that easy though, but on my level it'll be a good practice. Since the last article i wrote the html and css code for the page. It's basic and simple, the main thing is that it should work fine. It came out though that i forgot many things since i've learned html and css. I've learned the essentials and then moved to javascript and jquery fast. Unfortunatly i'm not that designer type of guy, i don't have the eyes to that to be honest. So i moved back for a brief time to the very basics of web development. I've created also the cards that i will be using. I have now a complete deck and the back of the cards. I want to write the javascript code consciously and observe the rules of it as well. No hard code, only hard work. That'll be my motto i think. :) So the DOM traversing should only be done in the html document between the script tags. I don't want to hard code anything in the js file. I wanna also implement the object oriented programming to keep my code clear and better readable.
That'll be it for this post. As soon as i write more of the js i'll report that.
But now i just simplify the game. I decided to create an easy blackjack game. Which is ofcourse not that easy though, but on my level it'll be a good practice. Since the last article i wrote the html and css code for the page. It's basic and simple, the main thing is that it should work fine. It came out though that i forgot many things since i've learned html and css. I've learned the essentials and then moved to javascript and jquery fast. Unfortunatly i'm not that designer type of guy, i don't have the eyes to that to be honest. So i moved back for a brief time to the very basics of web development. I've created also the cards that i will be using. I have now a complete deck and the back of the cards. I want to write the javascript code consciously and observe the rules of it as well. No hard code, only hard work. That'll be my motto i think. :) So the DOM traversing should only be done in the html document between the script tags. I don't want to hard code anything in the js file. I wanna also implement the object oriented programming to keep my code clear and better readable.
That'll be it for this post. As soon as i write more of the js i'll report that.
Sunday, May 31, 2015
New project idea
Just a little note to the last post. I've done the usual debugging and gone through my code from method to method. So as far as i could find some articles from this issue about Chrome i found out that the window.open() method didn't work only by itself. It has to be in a callback function that would be triggered by a user (according to an article on Stackoverflow). And i think it won't work in the browsers console, i couldn't add for example a simple click event handler. That'll work only if i could give it into the source code of the page i think. Enough to that, let's move on to the next topic.
I thought about that what to do next to gain some knowledge and expertise with jQuery and Javascript in general. And again my friend came up with the idea (maybe in the future i should call him as my mentor :) ) that an online game application would be just good enough to practice these things. More specifically a Poker app. And eventually i realized that there's a lot of potential in that as well. I can keep this project and later add some other functionalities to it such as creating an sql database to store data about users, creating the submitting/registration form to that using php. So basically that would be it. My plan is that i'll do the main platform html than style it with css and write the code to get the game up and running. And as i'm learning right now the basics of sql and php i'll add these later. Stay tuned.
I thought about that what to do next to gain some knowledge and expertise with jQuery and Javascript in general. And again my friend came up with the idea (maybe in the future i should call him as my mentor :) ) that an online game application would be just good enough to practice these things. More specifically a Poker app. And eventually i realized that there's a lot of potential in that as well. I can keep this project and later add some other functionalities to it such as creating an sql database to store data about users, creating the submitting/registration form to that using php. So basically that would be it. My plan is that i'll do the main platform html than style it with css and write the code to get the game up and running. And as i'm learning right now the basics of sql and php i'll add these later. Stay tuned.
Monday, May 25, 2015
Using the console
So it's been a while since i wrote something. I've been a little bit busy. It's not easy to coordinate the time i have. I must learn every day, but i have to go to the gym too. Because it gives me some push and refreshes me even if i used to feel myself tired. And there's my band, we should practice our new song and put a new one together. There's a lot of stuff to do but i could manage it sofar.
Now let's go to the issue i wrote recently about. It was a bit tricky 'cause the links with the downloadable document were hidden inside in a div element which can be opened with an anchor tag. So i couldn't just grab the anchor tags on the actual page because they were not the download links. And that's where some magic should happen. Ok, i know for a senior developer or even for a junior it's easy as a sunday morning (thanks Lionel and Faith no more). But for me it was a good practice. Before i get into any further, here's my code.
The anchor tags i needed were inside div elements with the class of document_txt. But there was also some tags i didn't needed. They had the class of infolink. So i took them away from the object with the not method. Then i had to scan through all the elements of the object that i just created. I used the each method for that. It has a callback function and inside of this callback i put all the code that does the right thing for me with every element of the object. First i must create a local variable to get the id of the particular document. So i grabbed with $(this) the actual anchor element. Then i get the href attribute of it which containes the link to details of the document. That link looks like:
I wanted that id in the end of that link and at the same i should rewrite the link so instead of details there would be download. The split method creates from the link an array where every character would be an element of this array. Inside the parentheses we can specify where the method should separate the characters. In this case it's nothing because we want to make from every letter and number a different array element. Then i used the slice method. With that i could make a new array only with the numbers at the end of the link. That would be the id i needed. In the parentheses i gave to the method the index of the element where it should the count begin with (remember an array is always zero based, so the first element of the array has the index of 0). And secondly the number where the count should end. But that's not enough 'cause we can't use that as an array, we need the string to put that at the end of the new link which comes in the next line of the code. I used the join method to put the numbers together to get a string again. It'll join these characters together with the element which we write between the parentheses. In this case again it'll be nothing, because we want the numbers to come right after each other. Good, now this string of the id is stored in the variable with the name of id. The next local variable would be the link which would create the new href attribute for every anchor tag that it runs through. Like before we grab the actual element with $(this) then again with the attr method we can set the new href attribute. It can be done if as a second parameter we pass in some string in. That string would be ofcourse the new link and at the end of it the particular id. Notice that the id isn't hardcoded, we add it dynamically to every piece of the object. And with the last line of code we just open every new link that we have created. We can do that with the javascript window.open method. As parameter we pass in the local variable. As a result we have some tabs inside the browser opened where the download of all the documents begins.
I must say that this worked for me only in firefox. I've tried it in chrome but there somehow it didn't. I'll be working on that. But if you have some idea what could be the problem please let me know.
Now let's go to the issue i wrote recently about. It was a bit tricky 'cause the links with the downloadable document were hidden inside in a div element which can be opened with an anchor tag. So i couldn't just grab the anchor tags on the actual page because they were not the download links. And that's where some magic should happen. Ok, i know for a senior developer or even for a junior it's easy as a sunday morning (thanks Lionel and Faith no more). But for me it was a good practice. Before i get into any further, here's my code.
The anchor tags i needed were inside div elements with the class of document_txt. But there was also some tags i didn't needed. They had the class of infolink. So i took them away from the object with the not method. Then i had to scan through all the elements of the object that i just created. I used the each method for that. It has a callback function and inside of this callback i put all the code that does the right thing for me with every element of the object. First i must create a local variable to get the id of the particular document. So i grabbed with $(this) the actual anchor element. Then i get the href attribute of it which containes the link to details of the document. That link looks like:
I wanted that id in the end of that link and at the same i should rewrite the link so instead of details there would be download. The split method creates from the link an array where every character would be an element of this array. Inside the parentheses we can specify where the method should separate the characters. In this case it's nothing because we want to make from every letter and number a different array element. Then i used the slice method. With that i could make a new array only with the numbers at the end of the link. That would be the id i needed. In the parentheses i gave to the method the index of the element where it should the count begin with (remember an array is always zero based, so the first element of the array has the index of 0). And secondly the number where the count should end. But that's not enough 'cause we can't use that as an array, we need the string to put that at the end of the new link which comes in the next line of the code. I used the join method to put the numbers together to get a string again. It'll join these characters together with the element which we write between the parentheses. In this case again it'll be nothing, because we want the numbers to come right after each other. Good, now this string of the id is stored in the variable with the name of id. The next local variable would be the link which would create the new href attribute for every anchor tag that it runs through. Like before we grab the actual element with $(this) then again with the attr method we can set the new href attribute. It can be done if as a second parameter we pass in some string in. That string would be ofcourse the new link and at the end of it the particular id. Notice that the id isn't hardcoded, we add it dynamically to every piece of the object. And with the last line of code we just open every new link that we have created. We can do that with the javascript window.open method. As parameter we pass in the local variable. As a result we have some tabs inside the browser opened where the download of all the documents begins.
I must say that this worked for me only in firefox. I've tried it in chrome but there somehow it didn't. I'll be working on that. But if you have some idea what could be the problem please let me know.
Sunday, May 17, 2015
Little makeup and a new task
Ok, so i got a feedback from a friend that this last post was not that clear as i wanted it to be. I have to admit it. It's a bit scary though as i read it through. My goal is that everybody who struggling with the same issues i have right now could see that they're not alone on this adventure. I wrote that it's not easy. I want to correct that. It's easy, it takes only time. But the time works for you not against you. Think about it, with every day that you learn on you'll become more and more trained. And you don't have to spend hours in front of the monitors. I practice every day about an hour or so. Of course if i have more time than i raise that learning time also.
As i mentioned before (i think i did) i'm about to become more familiar with jquery. I think it's a great tool to the front and back-end development. Many tasks are much easier with it. This friend who gave me the feedback told me an interesting issue that you could handle with jquery right in the browsers console. Let's say you're on a page that have search field and you can type in some criterias and then as results we have many links with documents. If you click on the links the download of the document begins. But what if we're to lazy to click on every link? We can manipulate the DOM (Document Object Model which contains all the elements within the page div's paragraphs etc.) with jquery and select all these elements that include the anchor tag with the link of the downloadable document. So i've never had such a task, i'm wondering how because i should had to.
In the next post i'll write down how i solved this issue. See you soon.
As i mentioned before (i think i did) i'm about to become more familiar with jquery. I think it's a great tool to the front and back-end development. Many tasks are much easier with it. This friend who gave me the feedback told me an interesting issue that you could handle with jquery right in the browsers console. Let's say you're on a page that have search field and you can type in some criterias and then as results we have many links with documents. If you click on the links the download of the document begins. But what if we're to lazy to click on every link? We can manipulate the DOM (Document Object Model which contains all the elements within the page div's paragraphs etc.) with jquery and select all these elements that include the anchor tag with the link of the downloadable document. So i've never had such a task, i'm wondering how because i should had to.
In the next post i'll write down how i solved this issue. See you soon.
Monday, May 11, 2015
Technical difficulties
I think it's time to write something about what i want to share through this blog. My learning process as i keep digging deeper and deeper into the world of front-end and back-end development. It's not easy and it take some time until you can easily solve a problem. Debug somebody elses code but let's just not go so far, debug your own code. Or imagine that you get an offer from a client to make her website more interactive and user friendly. Oh yeah and maybe she wants to make a webshop or something that needs some server side programming with database handling as well. And the list could be much longer.
What i meant with it is that you have to invest the right amount of time. Practice a lot, read many books and articles as you can in this topic. Watch tutorial videos, that can help a lot. I would suggest to find the right person who really knows how to teach how to make clear these things. I think Jeffrey Way is really good in that. He has a bunch of articles and tutorials on tuts+, i definitely recommend to check them out.
So let's get to coding. The basics of javascript and jquery are more or less in my pocket. Or the syntax at least. But here comes the fun. If you are into bigger projects (as you probably would) there is'nt enough to just drag the scripts into a .js file and reference it in the html file. You should make your code as clear as it's possible. It's also very important where and when you get into the DOM. And there comes into play the Object Oriented Programming. I think you should already clear with that if not read this article. I'm not gonna able to write that down so good as the author (Richard) has on that page. If you're like to build a plugin or an application this knowledge is the must have.
That would be it for today. See you soon.
What i meant with it is that you have to invest the right amount of time. Practice a lot, read many books and articles as you can in this topic. Watch tutorial videos, that can help a lot. I would suggest to find the right person who really knows how to teach how to make clear these things. I think Jeffrey Way is really good in that. He has a bunch of articles and tutorials on tuts+, i definitely recommend to check them out.
So let's get to coding. The basics of javascript and jquery are more or less in my pocket. Or the syntax at least. But here comes the fun. If you are into bigger projects (as you probably would) there is'nt enough to just drag the scripts into a .js file and reference it in the html file. You should make your code as clear as it's possible. It's also very important where and when you get into the DOM. And there comes into play the Object Oriented Programming. I think you should already clear with that if not read this article. I'm not gonna able to write that down so good as the author (Richard) has on that page. If you're like to build a plugin or an application this knowledge is the must have.
That would be it for today. See you soon.
Subscribe to:
Posts (Atom)