Forem: jlonetree

Game to Programming: 5 Free Games to Boost Your Coding Prowess

jlonetree — Thu, 12 Nov 2020 19:07:44 +0000

Gamification and Education for Computer Programming

The internet has a plethora of resources to pull from when learning to become a top-tier programmer. As gamification becomes ever more popular in the education and training, programming is nowhere near shy from teaching you how to code through video game mechanics. Whether you like challenging others, are looking for difficult puzzles to solve, or just want to show off your programming skills, these free games might be the enjoyment you've been seeking. Here are five(5) games that will put the enter-tainment in edutainment.

Number 5: Code Monkey

Coffee in the morning is great, but what about coffee in coding. CoffeeScript is a programming language that compiles to JavaScript adding syntactic sugar inspired by Ruby, Python and Haskel. Code Monkey states that it's "Coding for Kids," but if you're ever in the need to understand CoffeeScript and want a fun way to do it, Code Monkey is a great start for any age to start learning a new language. Check out more on this game at Code Monkey

Number 4: Ruby Warrior

Ruby is a pure Object-Oriented language developed by Yukihiro Matsumoto, and a great beginning language for anyone starting to learn programming. This game was created by Ryan Bates, and is available through BLOC "a part-time online coding bootcamp for people who want to keep their current job." It's an adventure game that teaches ruby, through using ruby as a tool/weapon to overcome whatever is in your path. It also includes two levels of difficulty, beginner and intermediate making replayability a must.

Number 3: CheckIO and Empire of Code

If you're not into fantasy, but love science fiction, this might be the game for you. CheckIO and Empire of Code has coding games for "beginners and advanced programmers where you can improve your coding skills by solving engaging challenges and fun tasks using Python and TypeScript." Empire of Code is a space setting and you learn by defending your own base and attacking others. CheckIO itself helps to improve your skills by using others’ solutions. Both are valuable skills for the future software engineer in training.

Number 2: CodeCombat

Ever wanted the most engaging way to learn computer science, but you find your mind wander off to video game land. Code Combat found a way to make you a programming knight, bringing together epic quests, and battles with multiple programming languages to help anyone get through their quest to becoming a software engineer(wizard). Whether it's visiting different realms, or plundering treasure, this is one of the best games to develop a diverse set of skills for the future software engineer.

Number 1: CodinGame

With the tagline "The new way to improve your programming skills while having fun and getting noticed." CodinGame is the most versatile and edutaining game of the list providing over 25 different languages that help you get noticed by companies. Not only does this website have fun games and a variety of topics, but it's also a great way to network and personally reach out to companies regarding your coding achievements. When a game can get you a job, that's always a win in my book. Check out how you can join at CodeinGame.

React, Javascript but Cooler

jlonetree — Thu, 29 Oct 2020 06:13:51 +0000

Please Visit Me on GitHub: https://github.com/jlonetree
Check out My LinkedIn: https://www.linkedin.com/in/john-lonetree-52726554/

This Looks Strange

If you're a first time React user such as myself, you might be asking yourself, "What is this strange library, everything seems so redundant and confusing, is this even used?" No worries, I have some answers for you first time React users. React.JS, according to our friends at Facebook, Inc on the webpage reactjs.org state, "React makes it painless to create interactive UIs." We might be saying, "But Facebook, React isn't that simple to use, right now I feel like Maximus Decimus Meridius getting stabbed by Lord Commodus in Gladiator."

This is a normal feeling, React does make it painless once you understand some of the basics that make React so powerful. Soon you'll be on the other end of the knife, giving Commodus a much deserved prescription of graphic expletive if you catch what I'm pitching. React has a ton of components and it maybe confusing at first, the library is vast and to understand ever part is a feat even if you're a master in JavaScript-fu. Let's take a look at some of the basic functions and components of creating React apps so our journey to understanding would be a little less like this...

Creating a New React Application

This kid is pretty cool, and so are the creators and contributors to React have made it simple for anyone with Javascript experience to create React applications. One of the best features of React is the accessibility and ease for creating a brand new React application. Just enter in these 3 commands (separately) in your command prompt to get started:

npx create-react-app my-app
cd my-app
npm start

If you want more information, reactjs.org has a significant amount of great information if you are ever forget any basics(they are the creators).

Import and Export

Unlike Cooler from DBZ, Importing and Exporting are essential to creating a clean and simply readable code base for your app. To import any file, you can simply type import Foo from './foo'. What we are essentially doing here is importing a class which is Foo, from the file that is named the same found in the same location './foo'. We must also import React this same way if we are to use it in our application. Below is an example of a few imports:

Exporting files are needed so Parent files can import from child files. There are 2 options for doing this, we could call export default when creating the class, or we can call export default className at the bottom of our app page below the class outside of its scope. This will allow you to import/communicate with another page! Below are examples for both:

If you would like more documentation on import and export, I recommend this by Will Bainton

Props and State

When I first saw props and state, my thought was, "Hey React, I'm neither a Senator, or 90's prop comedian Carrot Top, what gives?" These are two important concepts to understand when creating any React app. Props stand for properties, and these properties are passed down from a Parent class or function to their children. When passing in properties one must always remember to render these properties to be called in the child. An example of this would be the following:

In the example we see the properties to be passed into the child component by calling the child through .

State is used primarily in classes and can set, or in cases manipulate certain elements that are used in the class object. This is different from the prop as to assign state, or set state to have a key: value pair, one would have to create a class constructor() and place super() in the constructor before assigning state. This will allow you to assign state the values you wish to use in your render method later on.

To learn more about props and state, check out this blog from Madhavan Nagarajan ReactJS: Props vs. State

Now you're cool, though what makes you even cooler is your curiosity! Check me out on these social platforms:

GitHub: https://github.com/jlonetree
LinkedIn: https://www.linkedin.com/in/john-lonetree-52726554/

Tell me in the comments what you think is the coolest feature in React!

Mad Max: Journey to the ThunderDOM!!!

jlonetree — Thu, 15 Oct 2020 06:43:33 +0000

Introduction

Looking to get to the ThunderDOM, trying to get out of this wasteland, want to find the Silicon/Colton to fuel the rest of your "Mad" escapades. Too bad, I'm not letting you have any of my secrets, especially my most effective survival secrets that could help you become the ThunderDOM champion. If I were to give you some tips, and you did become the champion of the ThunderDOM, maybe, just maybe you could bring me to "Tomorrow-morrow Land." Well maybe I could tell you a few things that could make your trip a little smoother, but I'm coming with, and no waving that gun around, we work with computers in the wasteland. Here's a list of locations we will go through, each more treacherous than the last. Please follow this guide, I promise we will be safe NodeWarrior:

"Broken Hill, AU" - What is the DOM
"Pinnacles, AU" - JavaScript and the DOM
"Menindee Road on the Mundi Mundi Plains" - Accessing the DOM
"Outside the ThunderDOM" - DOM Interfaces
"ThunderDOM" - DOM Testing with console.log()

What is the DOM

Broken Hill, AU

Look, you must be mad if you believe we could take them all on with brute force, and firepower alone in the center of this abandoned gas station. We need to outwit these raiders, and with my wily yet cowardly tactic of using DOM to our advantage we might be able to figure a route outta here that doesn't involve bloodshed and road rash. Let me tell you a little about the DOM, before the great boom, we had a thing called the internet. On the internet were these beautiful interactive documents called webpages made of HTML, CSS, and a whole slew of other programming languages, if you want to know more, there are articles about webpages like this: https://techterms.com/definition/webpage. A road warrior like yourself should get familiar with paths, and the only way to do it is to see this ancient visual representation of a DOM tree.

That's a pretty neat picture, but it's not like any tree I've seen before. I can say one thing, those all look like objects, and I'm betting if you could call them somehow, such as selecting them for manipulation, you'd be able to develop some crazy awesome creations to really stick it to those raiders. The DOM is what we will work with primarily when developing with Javascript, and will it ever help. The DOM allows us to do the cool things that you would see on popular websites, mobile apps, and webpages such as Facebook, Instagram, Netflix, etc. This being said, modern DOMs are created with multiple API's that work together to create what we see and interact with today, but the core DOM itself defines the objects that primarily define the document you are working in itself. Good thing you learned this, because those raiders just left and will certainly be back, and in greater numbers. We should move and get you set up with a weapon that could prepare you for light bouts with other raiders.

JavaScript and the DOM

Pinnacles, AU

We made it to a town that doesn't seem too happy to see us, I think it's your rough demeanor, spinal dystrophy, and carpal tunnel riddled hands along with all the fun programmer tropes. But enough jabbing, these people seem they need our help, and they could really use JavaScript in their life. I mean look at them, they've probably only seen a basic webpage with no styling from the early 90's.

What a monstrosity, great in its day, but we can build something better to raise the moral of these town-folk to have the will to fight back against these raiders. JavaScript and the DOM go hand in hand, think of it like you and I, or more literally this:

API = DOM + JavaScript

Now talk about literal, this is how an API is essentially made, one part DOM, one part JavaScript. These two were together since the beginning and eventually separated throughout the years, but they still have a great relationship with each other even after separation. Even though the DOM still works well with JavaScript, it can be sought out by different partners, for example Python and the DOM work well with each other, talk about a promiscuous DOM, but I don't shame.

Accessing the DOM

Menindee Road on the Mundi Mundi Plains

Just like this road you're on, you don't need anything special to access the DOM. Though like the different modes of transportation out here in the wasteland, your vehicle, the Pursuit Special, is just one of many implementations of the DOM. The one thing all these modes of transportation have in common is they will all help one travel throughout the wasteland. The same thing can be said about the DOM, all DOMs are constructed of some sort of object oriented model, thus allowing them to make web pages accessible via JavaScript. Making a web page accessible via JavaScript means either through inline or a separate JavaScript file, you can start manipulating the DOM using document or window on your program.

DOM Interfaces

Outside the ThunderDOM

This is it Max ol' pal, we're outside of what the before boomers called, "Sydney," or what we know it as, the ThunderDOM. Before we move any further, you should learn a bit more about Fundamental DOM Data Types. These are tools that will help you not just survive in the ThunderDOM, but thrive in it as a king!

Let's talk about the actual things you can manipulate in the DOM hierarchy, try to keep up because this can be a bit confusing for first timers, and going back to that guide I linked is helpful in understanding these core concepts. Objects in Web Development borrow from several interfaces, and to learn and memorize all the information about HTML elements that belong to all these interfaces would take years. Luckily that's what I'm here for is to summarize it for you, you see, as far as the DOM is concerned, HTML elements are just a node in a tree of nodes, this is where elements derive. That is how we can reference objects using their class, id, etc. To learn more about nodes, check out this fellow Node Warrior's blog: Vaidehi Joshi

Here is a list of some of the most common APIs in web and XML page scripting using the DOM made by MDN Web Docs:

document.querySelector(selector)
document.querySelectorAll(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.scrollTo()

Now you're dangerous enough to enter the ThunderDOM and show those other NodeWarriors what they're facing.

DOM Testing with console.log()

ThunderDOM

Welp, we've done it, we've made it to the ThunderDOM, where two programmers go in, one comes out. That might be a little exaggerated, but one definitely passes out from exhaustion. I want to give you my most secret, and vital skill for being successful when manipulating items in the DOM, testing techniques. There are multiple ways of testing outputs and responses from objects and elements you might be grabbing and manipulating, but one tool I prefer using when programming with JavaScript is console.log(). The console.log() function allows the user to put in an argument between those parenthesis printing/logging that information to the web console (accessible in the web browser by pressing command + option + J).

The console.log() function is in my opinion an amazing way to confirm you are grabbing the correct elements from your HTML document. Whether you are starting the web development process working with JavaScript, just learning the intricacies of JavaScript, or are an expert NodeWarrior, this tool is required to reduce bugs in the future of your development process. You could also use JavaScript Debugger which is also a viable tool to check the returned value of an object or element, and if you're interested in learning more, fellow NodeWarrior Justin E. Samuels.

Think of these debugging tools as ways of checking if your vehicle works, or your traps are orderly and will properly do what they're meant to do. You don't want to be stranded in the wasteland, or have no defense during a raider attack. This is why checking and debugging at every step of the web development process is important, it will save you heartache in the future.

I hope this simple guide helps you in your efforts to become a NodeWarrior just like Mad Max. If you are interested in more articles please visit my CRUD and RESTful routes Ruby on Rails article Scooby Doo and the Ruby on Rails.

Happy trails and drive(code) safely!

If you're not trapped fighting a raider crew, check me out:
GitHub: https://github.com/jlonetree
LinkedIn: https://www.linkedin.com/in/john-lonetree-52726554/

Scooby Doo and the Ruby on Rails

jlonetree — Wed, 30 Sep 2020 22:10:35 +0000

Please Visit Me on GitHub: https://github.com/jlonetree
Check out My LinkedIn: https://www.linkedin.com/in/john-lonetree-52726554/

Introduction

Scoobs and the gang want to give you, the dev, some tips and tricks to help them solve this spooky mystery, the Ruby on Rails. Freddy Jones, ghoul trap master, has helped create this guide which goes through CRUD to develop the ultimate trap to capture The Union Pacific Specter. In order to ultimately catch this ghoulish specter, we must understand the structure of CRUD in Rails to start building this web application/website. The order of these actions will be set up by 3 clues with the ultimate unveiling, "destroying" this ghastly ghoul's disguise and plan.

Create - Clue #2: New, Create
Read - Clue #1: Index, Show
Update - Clue #3: Edit, Update
Destroy - Clue #4: Destroy(Delete)

What are you waiting for, the gang is raring to capture this ghost, because after all, it's always a person in a mask.

Clue #1: "Read"ing a Book on Witchcraft

In CRUD, Read is important for us as a developer. It allows us to display information on the screen such as a full inventory of all items we have, showing a specific object, etc. This is also helpful to the user while on our website, in this case The Union Pacific Specter, to become engaged/distracted when interacting with our website. This is also the most common Scooby-Doo clue which usually includes reading a letter, or reading a specific clue because this is something we can visibly see and interact with. This also gives us the most information about the website, or in this case the clue because we are receiving information such as descriptions, steps, titles, or anything that can be written or typed.

There are two different parts that would give information to the user that hit the Read criteria in CRUD. The Index exactly what it sounds like, it gives us all the contents of your website to show the viewer what your website may contain. If you were to index songs that are available on your website, you could use the index page to provide a list of links to all of your song pages. In a book, this would be similar by giving you all the chapters within a book and showing which page each chapter starts on. This makes it easier for the user to find exactly what they want on your website.

The second part is the show page which shows a specific object, or item in better detail, giving a title, picture, page, attributes associated with it, and much more. Using the book example again, this would be the contents of a chapter giving you details that help you understand the story, or contents of which you are reading. The show page(s) are important for engaging and interacting with the user, and in a sense help us to communicate to them. In this case, the Specter's using the book to communicate with the gang and you by showing this book.

Clue 2: To "Create" a Villain

Every Scooby Doo episode had a clue relating to the creation of the villain's costume/operation. If this specter likes creating a spooky, kooky costume, then having this user create something like a new user, or object is important for engagement and immersion to trap this horrifying host. There are two actions for creating a new user/object, the "new", and "create" actions. The "new" action is a "get" method, and has a meaning like it sounds, it's getting information to provide the "create" action which is a "post" method. The "create" action's "post" method is as it sounds as well, it posts the information in the "show" page and adds it to the "index" page which are both also "get" methods. But wait, there's a pattern here, notice that each "get" method actually displays information except for "new". That is because the "new" method does display information, and this information comes in the the form of a form that can be filled out by the user. This is important information because a "get" method should always display something as part of it's action in what we call .erb files which you can find more information on those here: (https://www.rubyguides.com/2018/11/ruby-erb-haml-slim/).

The "create" action works a bit differently than the previous actions such as "index", "show", and "new". The "create" action doesn't place any information into a file for the user to see, but instead takes in information from the "new" action and does as it is titled, creating the new user/object. Pretty neat, but that's not all, we also use this to redirect to the show page using redirect_to allowing the user to view their newly created object with everything the show page has to offer.

Clue 3: An "Update" of the Villain's Scheme

Ever notice how the villains in each Scooby Doo episode leave a giant clue revealing how they updated their scheme? This is because they needed to be more efficient, sneaky, and effective when trying to find their treacherous treasures. Like our friend, The Union Pacific Specter, we are going to use two methods that can "update"/"edit" existing users/objects that may need tweaking for different purposes such as improvements. "Edit" is a an action that will "get" the information we need through a .find method. This allows us to find the certain user/object we wish to "update". "Edit" also uses a form to to display to the user what we wish to edit such as a user name, or password. The "edit" action then passes the information on the "update" method for it to update the information.

The "update" action has two different methods, "patch" and "put". These have different meanings behind them, but both will replace old values with new ones. Think of repainting a car, with "patch" you strip the paint off the car and repaint it a new color. With "post" this is more destructive, think of it like this, you have a ray gun, instead of stripping the paint you disintegrate the car, and build it from the ground up and paint it a different color. Both replace the color of the car, but one creates a completely new one replacing it in a sense. To make this short, "put" is destructive, while "patch" is not, depending on the situation either could be better. After we create our "update" action in the controller we should redirect to the show page using redirect_to allowing the user to view the updated object along with other information in the show page.

Reveal: "Destroy"ing the Disguise

Freddy Jones is great with traps, but Velma is the one that "destroy"s the costumed creeps with logic, and a well formulated statement after knowing just who the villain truly is. Though our "destroy" action isn't quite like Velma's cunning explanations, it does "destroy" or as the method "delete" suggests, deletes an object and all of the values associated with it. This makes the object disappear in our database so to say, as if it were never there to begin with. This should also redirect us to a different page, a suggestion would be the index or home page so the user may continue using the application or website.

Conclusion

With this information on hand about how the CRUD structure operates with Ruby on Rails, you are now dangerous enough to catch The Union Pacific Specter. If you are interested and are looking for a deeper dive on how CRUD works alongside RESTful routes & the use of Helper Methods, check out this guide: (https://dev.to/jessesbyers/how-to-rails-basic-crud-restful-routes-and-helper-methods-1h8). Happy Hunting!

If you're not searching for ghouls, check out my pages:
GitHub: https://github.com/jlonetree
LinkedIn: https://www.linkedin.com/in/john-lonetree-52726554/

Introduction to User Immersion through TTY:Prompt

jlonetree — Wed, 16 Sep 2020 07:32:11 +0000

Introduction

The thought of creating an interactive application has been a dream of mine since starting this rigorous journey through understanding how to read, conceptualize and write programming languages.

With Ruby, I found it to be a great programming language to start understanding how to interact with users and understanding bare basic concepts of game development and creating an immersive experience for the user. You might be asking yourself, "But John, C# is a programming language that is commonly used throughout the video game industry, why are you using Ruby to understand game development?!"

Ruby itself is a great introductory language and has the ability to do a multitude of different tasks including user interaction through the command prompt utilizing powerful tools called gems.

Gems contain a packaged ruby application or library that can simplify completing tasks. The gem I specifically want to highlight was an easy to use independent prompt component for the TTY toolkit called TTY:Prompt which allowed me as the developer to create a menu system for user interaction thus creating an immersive experience.

How to Use TTY:Prompt

For one to understand how to use TTY:Prompt in creating a robust Command Line Interface Application(CLI), we should first know what it does. What TTY:Prompt creator Piotr Murach says in his how to guide, TTY:prompt is "A beautiful and powerful interactive command line prompt." This allows us the developer to create an interactive and immersive CLI removing hundreds of lines of potential code to gain the same results, thus gaining user input whether for login credentials, searching for a certain stock price, getting a yes or no response, or in our case to progress through a simple text based game utilizing the arrow keys and a selection list, and everything in between.

Steps to using TTY:prompt:

In your app's Gemfile add this gem by typing gem 'tty-prompt'.
Run in your Bash bundle install or bundle to use the gem.
(Optional) You could also manually install the gem by typing gem install tty-prompt in your Bash.

To run this gem throughout your application just put $prompt = TTY::Prompt.new(if manually installed, require 'tty-prompt') in your run.rb file.

You now have the power to call a prompt in any method so get weird!

Functions of TTY:Prompt

TTY:Prompt has many different methods for prompting the user for interaction. Depending on how one wishes to interact with the user would be dependent on the type of prompt method one would use. Let's take a look at some of the different methods we could use to prompt interaction.

ask - Ask a question to the user, this allows for the most dynamic choices and could give the user the most ownership/power and freedom.

yes? - Ask a yes or no question to the user, this is great when you would need a true or false answer, or to confirm an action.

mask - Covers up any input the user places for this prompt, this is great for passwords, secrets, or keys.

select - Creates a list for the user to choose one item from, this is great for a multitude of different reasons such as choosing a character, itemized listing, guided selections, and etc. Great for easily keeping users on a linear path when progressing through a text based game.

multi-select - Creates a list which the user can choose multiple items from, this is great when making a multiple choice question with multiple answers, or selecting multiple items in an item menu to use.

enum-select - Create a list which allows the user to choose an item with a enumerator(number), this is great as an alternative to using the arrow keys for having the user choose amongst the list.

Creating User Immersion

Video Game Immersion as described by Jamie Madigan PH.D. of Psychology Today states, this is derived from "spatial presence". To create spatial presence we should:

Build a rich story
Have consistent behaviors in the game world
Unbroken presentation of the game world
Be able to interact with the game world

Creating an immersive video game might seem like a long shot when developing a CLI, text based game, especially with the technological advancements made in modern day titles including graphically advanced front-end features, and player interactivity through advanced controls/peripherals, UI/HUD elements, interaction choices, and etc. To no surprise though, some of these elements are accessible through CLI and with your keen world building skills and programming through the backend, you might just be able to create an immersive and fun experience for your user.

How TTY:Prompt creates User Immersion

TTY:Prompt allows the user to interact with the Console allowing them to have the power of choice. When a user is given choice, they now have to interact with the system in place. This is important because the user now has the opportunity to become immersed in the experience whether it would be simply to log-in, or tell a secret, to creating a full fledged user driven experience such as a text-based game.

The most immersive video games allow players to make constant choices, either in the perspective of a character or as themselves. With TTY:Prompt we have the ability to do this, we are able to ask players questions leading them to interact with an answer. In the Activision classic, Zork, players had to interact with the console in order to progress through the game. We could use the ask prompt method to recreate this and allow players to make choices by typing a solution such as "open door" or "use rope" to develop a meaningful interaction with them.

Creating a player menu is as simple as using the the select method. This could have a list of items collected like you would imagine to see in a game such as Final Fantasy, or Earthbound. The player in turn would have a choice in selecting an item or spell that they could use.

User and player immersion starts from interacting with the user/player, but develops more deeply as the user/player reciprocates that interaction. We can start developing complex trees of stories, delivering content, or insight on a horror in an abandoned mansion, or adventuring through Dwarven mines that hold a rich secret. The extent of the immersion comes from our own and our user's imagination, and TTY:Prompt allows us to more effectively and easily prompt for user interaction. Immersion comes with interaction, and we now have the tools to create these interactions with a little elbow grease.

Revision(9/17) - Updated 2 images multi-select, enum-select