Forem: jazzbozner

Brief Break Down of Reaaaaaact....

jazzbozner — Thu, 21 May 2020 21:30:58 +0000

React!

What is it? With experience in JavaScript, why do I feel like I know what I’m doing yet at the same time I don’t know how to write it? Well folks, I figure that me trying to explain React might help me understand React better, and help you get the picture as well.

React is a JavaScript library (front-end framework) created by Facebook that focuses on User Interface, and ultimately allows developers to create seamless single-page Web Applications.

To start, React is made of entities called components. These components are used to render (objects) to the DOM, and can be used widely throughout your application pending on which components are imported and exported. The whole system works as a file tree that takes information from one component(parent component), passes that information to another in order to be displayed(child component), created, and further sent to the DOM.

App-file tree

There are two types of Components which are then broken down into: presentation components (display objects state and or properties) and container components (hold instances of our class components such as a card). Furthermore, function components( those that are declared with a function), and class-based components (which we use to create instances of objects).

Functional-based:

Class-based:

Props give components the ability to express certain values of an object, manage attributes of an object, and determine conditional information that we may need to help produce the objects we want revealed. Notably you may have properties used in content specific ways. I must say, "Wrapping my head around passing data down and sending callback props up was fairly challenging.... :(

Props

React calls the Welcome component with {name: 'Sara'} as the props.

State is data in your component used to populate display components. A component’s state, unlike a component’s props, can be changed during the component’s life. The state utility allows us to maintain and update information within a component without requiring its parent to somehow send updated information.

State

In order to manipulate our state and encapsulate any events that occur from our UI, we need to use setSate in order for us to manipulate the values of our state. Our setState actually swaps our each change of the user’s interaction from our previous state’s value.

setState:

As you may have noticed React uses similar syntax that resembles JavaScript and HTML; this mashup of syntax is referred to as JSX (JavaScript Extended Markup Language.) with little practice just like any language you can get it 'down-pat'.
Additionally, React creates a virtual DOM in which creates an in-memory data-structure that updates the browser’s display DOM efficiently(reconciliation). This allows developers to simultaneously conscript code and witness changes in the browser (real-time.)

Well gang.. Just wanted to put a few examples out there for setting up React. Be sure to check into the actual React Documentation--https://reactjs.org/.

Pretty Up That Web APP!

jazzbozner — Tue, 21 Apr 2020 23:16:22 +0000

Hey Gang!

I’m back to blogging about fun and helpful tools for working on all those cool apps you’re making. As I started up one of my first JavaScript(JS) webapps I had a bit of a rocky start on how I was going o organize all the content on my page. Would it be best if I included a navbar at the top, hmmm.. Or maybe the side? Where am I going to display the bulk or body of my data?! All these ideas started to swirl in my head and then one day a fellow developer introduced me to a grid organizer and wireframing app!

It was extremely helpful to start creating content in places where I had ideas of what was to go there. To start, CSS Grid Generator by sarah_edo is so helpful when it comes to paying out all the locations you want to place your data. Simply select the grid marks on the DOM and the grid generator will output code for your CSS so you can assign those div’s a class! Amazing!

CSS

HTML

https://cssgrid-generator.netlify.app/

If you need a bit more planning or wireframing with your project I also found that figma can be extremely helpful in making your projects come to life and keep your vision in line. Figma is a wireframing app the allows you to, well.. Wirefame--A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process. ... Wireframes can also be used to create the global and secondary navigation to ensure the terminology and structure used for the site meets user expectations.

https://www.figma.com/

Give it a shot! I’m sure you’ll find these just as helpful as I did.

The Code to Blogging 0.4

jazzbozner — Tue, 24 Mar 2020 22:22:33 +0000

When it comes to myself and maybe some of you new developers out there, project management can be a force to deal with. For starters, we’re going to have to get into the practice of using git commands in order to collaborate on a project. There are a wide range of commands, but for now we’ll try to keep it as basic as possible.

First, the developer is going to create the new project and source that project on a repo attached to their github account. This repo is the origin/production of the project or better yet the project manager's baby. That repo then will be copied for other github users where they will have a copy to work with.

Second, those working on the project will be connecting their pipelines (remotes) in order to develop the program (baby). From then on the project will have features added by those working on the project; project managers of the repo will then have the ability to approve the features that are passed to the repo.

Before any changes are to be done, we should really think about how we can track all of our changes without altering the master immediately or creating conflicting code with others that are working on the project. There lies branching. We will need to create separate branches that focus on what we are trying to alter. Once the changes are made to the local copy, the changes are going to be added, committed, and checked against the main repo for any conflicts (pull remote upstream). If the changes work like expected, then we can create a pull request for our manager to update the origin code.

Attached is a helpful cheat sheet:

Getting & Creating Projects

git init - Initialize a local Git repository

git clone github.com/[username]/[repository-name].git -
Create a local copy of a remote repository

Basic Snapshotting

git status - Check status

git add [file-name.txt] - Add a file to the staging area

git commit -m "message" - Commit changes

Branching & Merging

git branch - list branches (asterisk denotes current branch)

git branch -a -Lists all branches

git branch [branch name] - Create a new branch

git branch -d [branch name] - Delete a branch

git checkout -b [branch name] - Create new branch and switch to it

git branch -m [old branch name] [new branch name] - rename local branch

git checkout [branch name] - switch to a branch

git checkout -- [file-name.txt] - Discard changes to file

git merge [branch name] - Merge a branch into the active branch

git merge [source branch] [target branch] - merge branch into the targeted branch

git stash - stash changes in a dirty working directory

git stash clear - remove all stashed changes

Sharing & Updating Projects

git push origin [branch name] - Push a branch to your remote repo

git push -u origin [branch name] - Push changes to a remote repo

git push - Push changes to remote repository (remembered branch)

git push origin --delete [branch name] - Delete a remote branch

git pull - Update local repo to the newest commit

git pull origin [branch name] - Pull changes from a remote repo

git remote add origin ssh://git@github.com/[username]/[repository-name].git -
Creates remote repo

git remote set-url origin ssh://git@github.com/[username]/[repository-name].git -
Sets origin

Inspection & Comparison

git log - view changes

git log --summary - view changes(detailed)

git log --online - View changes (briefly)

git diff [source branch] [target branch] - Preview changes before merging

Ref: https://github.com/joshnh/Git-Commands

The Code to Blogging 0.3

jazzbozner — Tue, 10 Mar 2020 22:00:20 +0000

I’ve loved video games all my life and wondered, “Which programming languages/support programs are used to develop games?” The short answer is:

-C++
-C#
-Haxe
-Java
-HTML5
-JavaScript
-Lua
-Python

These are some of the most relevant coding languages in the article “Programming Languages for Game Design” (link: https://www.gamedesigning.org/career/programming-languages/). Interestingly enough, It appears that the need for a strict gaming code language is what would be most helpful for game developers; that being mentioned, therein lies the gaming engines that help ease the process of video game production.

There are dozens of video game engines and many of these video game engines cater to specifics of what that developer wishes to accomplish with their video game--2d, 3d, gameplay style, etc. Some of these engines include:

-Unity
-GameMaker Studio
-Godot
-CryEngine 3
-Frostbite

Moreover, some of these engines you may have heard of such as Frostbite which has helped developed some of the world’s favorite like Fifa, Battlefield, and Madden. Other engines such as the CryEngine include popular games like “Hunt: Showdown”, “Crysis trilogy”, and “Farcry”. It’s absolutely wild for me to think about all the organization, relationships, tools, and so much more that has gone into supporting software development.

Lets go ahead a break down what a game engine does for game developers and how it works. First, the theory behind a game engine is to help provide necessary tools and features in efforts to build games quickly and efficiently. These developers then are able to apply other software assets to this engine in order to modify art, audio, performance, animations, etc.

Graphics: Modern game engines can power stunning graphics and help facilitate the production, as well as importing assets from different platforms, so that developers don’t have to wait a long period of time with every import. Overall, game engines can provide users with architecture with overall high performance rendering capabilities, and with access to fast graphics API, so users can enable the greatest visual fidelity.

Audio: Users can choose to design their own sound from scratch, starting with the musical composition, sound effects, voice acting, and ending with post-production. Users can also choose to purchase a sound assets from asset-focused platforms that can be combined and mixed in various ways. Game engines can help users organize their sound composition that suits their vision.

Networking: On-line gaming has become a high point for video games and require networking capabilities. Gaming engines have workflows built into them in order to optimize however the developer needs for online and multiplayer.

Physics: The physics system in a game engine provides users with the components that handle physical simulation. Game engines enable users to create objects that can behave in a realistic way with just a few lines of code.

Graphical user interfaces (GUI): Most games have their own GUI that fits the games theme and art direction. That’s why a lot of game engines provided creators with tools to build their own graphics user interface, such as buttons and drop-down menus, etc.

Scripting: A crucial part of game engines is represented by scripts which developers can use to define the logic of our game components by adding behaviors. WIth pre-build scripts, a solution provided by some game engines, users can easily control the camera, the relationship between your game elements, and the animation system which can be used to control character animations.

https://unity3d.com/what-is-a-game-engine

Overall, game engines are giant software developing tools created to help develop video games. I hope you found this lightly insightful and one day get to explore the uses of game engines.

The Code to Blogging 0.2

jazzbozner — Mon, 02 Mar 2020 21:46:34 +0000

As I finished up my second coding challenge with Ruby on Rails I absolutely realized I need to work on my debugging abilities. Having the skills to debug your issues is so critical in the world of software development; some critics would even say that it is one of the most important skills a developer could have. And so, I set out to understand the principles of debugging and how I might better my skills.

First, I must add that I felt confident about the material that we were working with. For the most part our cohort was focused on: associations, routing, using RESTful practices, and completing the very basics. I ran into an issue with when it came to displaying nested data in my program; I frantically started to figure out ways of how to debug this problem.

What not do to:

-Keep running your same method over and over asking why it doesn’t work
-Stare at your computer screen blindly
-Randomly change enumerators
-Look around the room for the answer
-Believe that the computer is doing something wrong
-Listed above are instances I caught myself applying while mindlessly trying to debug a problem. Needless to say, I needed to change my ways.

Branching from the article: How to debug for absolute beginners
https://docs.microsoft.com/en-us/visualstudio/debugger/debugging-absolute-beginners?view=vs-2019

After reading into some of the basics of “What to do when you errors occurs or you’re expecting data that isn’t being returned.” one should not jump to certain conclusions, but to break down what you’re trying to achieve. Here are several steps that I now take to reduce my anxieties, as well as accomplish desired goals.

What did you expect your code to do and what happened instead?
If you run into an error you can lean on your debugging tool to take you to the exact location in which the error occurred. In addition, prepare yourself to step through your code and examine each line.
Examine your assumptions of how you think your program should be working
Sometimes we assume that since our previous code was working that there shouldn’t be any conflict happening, but by questioning on what we think should be happening might uncover your problem.
Step through your code
Often times we need to understand what portions of our code is working and where the conflict could be occurring. Using gems such as “binding.pry” and “byebug” can really help you step though your code. Console your program and see what variables, methods, and types of data are occurring.
Google your problem/error
More often than not, a developer has run into the same issue that you have. Stackoverflow and other online resources could be the key that you’re looking for in help fix your problem.
Don’t simply copy and paste the code in, understand what is happening in the syntax.
Create a sample app
In order to tune your debugging skills you could create a sample app that with intentional bugs. This will allow you to associate your errors with the exact problems that are occurring.

In conclusion, there is no need to panic when a bug occurs and or when you’re not returning the appropriate information. Take the time to think logically about your problem and take steps in understanding how your code is working and your program as a whole--keep a mindset of “always a beginner”--the constant motivator.

The Code to blogging 0.1

jazzbozner — Mon, 24 Feb 2020 16:12:07 +0000

The magic of technology has always excited me. At the young age of five, I was infatuated with robots (toy robots), loved playing video games, regularly on the computer, and explored all the realms the internet had to offer. Since then technology has been a great influence in my life, my work, and my passions. I couldn’t imagine a day-in-age where technology didn’t have some effect on a person or even play a large role in one’s everyday life.

This story starts out with potentially high expectations of a technological background derived from early experiences with technology, but sadly to say I never took my passions or interest to heart. First, as I began to embark out into college I absolutely had no idea what I wanted to be or even what I wanted to do--just like many young and older individuals today. The one idea in my mind was that I would earn a business degree and pursue some type of general knowledge in order to obtain a job that I could one day be good at, and I suppose possibly enjoy. Needless to say, I found myself at the back in school even after acquiring a Masters in Business Administration.

It turns out that my theory of simply having the business background wouldn’t land me a great job that I would love to do; this pursuit would take time in order to get where I was wanting to go. The real truth is that I needed to narrow down a skill that I could continue to develop and actually apply towards a career of my own interests. Technology! Technology in some way or another was the direction I wanted to apply myself. I thought, “How can I apply myself to technology?” The answer to that is why I’m writing this short story now. I’ve always wanted to know how the internet works, software is created, and all the logic that is involved; it would be these thoughts along with supporting friends and family that would kickstart my software engineer adventure.

Second, it is absolutely important for me to discuss all of the hardships I had when I started to learn code. So, so, so difficult at the time and I felt immensely pressured to be good at coding let alone get it first try. It turned out that I would be retaking my first module in order to have a better base of knowledge. I can’t express how stressed I was and the maximum amount of my time I applied myself in learning how to code--absolutely does not help to stay up all night and try to learn/cram material. With these trials I’ve come to the conclusion that if one is starting to learn code with no background practice these steps:

-Be consistent with your practice
-Don’t try to force it
-Relax
-Take breaks
-Eat, sleep, and have fun

After I finished restudying up and completing the what it is I first failed at, it became clear to me that I can do this; I’m not am not an imposter. If you have enough aptitude and take the time to devote yourself you can be great at anything--it’s just a matter of time and experience. I’m constantly learning new things; and moreover, I need to remind myself that it only takes time and practice to become well established with any material.

In conclusion, one of the most important parts of this program to me is that I take what I can get from every experience, every person, and allow all those aspects to influence my life in a better way. It’s taken 28 years to figure out that being a businessman and making a lot of money does not depict happiness. You should enjoy whatever it is you want to do; figure out ways that you can ensure your success. If it wasn’t for my sister Shelby I possibly wouldn’t be here talking to you lovely people. She not only encouraged me to become a software developer, but sees the passion I have for technology, the potential, and overall fortitude.

Art credit: Tyler Hobbs
https://lateralaction.com/articles/tyler-hobbs/