Learning to code with JavaScript and building UI with React

blog image source Group exercise - make our own JavaScript virtual pets, where we will  able to give it a name, feed it, take it for walks. It's going to be great.   The pets were going to make will have the following features: You can give them a name They can get older As they get older, they get hungrier and less fit You can walk your pet to increase its fitness You can feed your pet to decrease its hunger You can talk to your pet to see if it needs feeding or walking Learning objectives from this exercise: What constructor function is? What an object's prototype is? Difference between an object literal and an object created using a constructor function? Difference between a function and a method? What is meant by a state? GitHub Virtual Pet exercise -  https://github.com/SharifCoding/virtual-pet

Creating multiple objects can be repetitive/tedious. It’s easy to make mistakes when creating new objects, and storing the same method over and over for every object is inefficient. This is where Constructor and Prototype come in. Constructor - blueprint for what properties our object will have. When we create an instance of our object, it will have these properties with values set (in this case, from the parameters). Prototype - blueprint for what methods our instance objects will have access to. Any instances of the object will look to their prototype for methods. Javascript Constructors and Prototypes - http://tobyho.com/2010/11/22/javascript-constructors-and/ Stack Overflow (Trying to understand the difference between prototype and constructor in JavaScript) - https://stackoverflow.com/questions/28600238/trying-to-understand-the-difference-between-prototype-and-constructor-in-javascr Stack Overflow (JavaScript inheritance and the constructor property) - https://stackoverflow.com/...

blog image source Group exercise - to build a till application that allows to; find an item by scanning in the barcode, add an item to the current basket, get total of items in the basket, and remove any item from a basket by scanning the barcode. Requirements: Find an item by barcode Add an item to the basket Get total of items in the basket Remove item from the basket by barcode This exercise will test the following skillsets: CLI - Git, npm, and jest. JavaScript - Arrays, and Objects. GitHub Till exercise -  https://github.com/SharifCoding/shopping-till

JS Bin is an open source collaborative web development debugging tool specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively. What can JS Bin do? Write code and have it both save in real-time, but also render a full preview in real-time Help debug other people's JavaScript, HTML or CSS by sharing and editing urls CodeCast - where you share what you're typing in JS Bin in real-time Remote rendering - view the output of your JS Bin on any device on any platform, updating in real-time Processors, including: coffee-script, LESS, Markdown and Jade. Debug remote Ajax calls JS Bin - https://jsbin.com/ GitHub - https://github.com/jsbin/jsbin

blog image source Don't worry if you get lost when programming, instead get comfortable not knowing everything but get good at asking, and finding answers to your questions. Most importantly, don’t copy and paste code examples, understand the code and the thinking behind it. As good practice, type the example line by line. U nderstand what is going on and take time to play around in Node  CLI  or the browser  dev  tools. Three tips for becoming the king of finding answers: Effective Googling - Always include the language or technology in your query e.g. “javascript get array length”. Be concise - “javascript get array length”. Exclude information that might only be specific to you.  StackOverflow - Question at the top - solutions underneath. The best answer shouldn’t always be the best answer! Check the vote counts and read the comments. Asking a tutor or each other - If you ask a tutor or another student for help, try and be as specific as you can, an...

In general, many developers  do not write clean code,  developers job is to deliver a product that works, and on time. However the  cleaner your code, the better you'll be seen as a professional, and the easier it will be for you to make adjustments, correct bugs, and implement new features in the future. Clean code minimizes the time spent reading and attempting to understand the code, which takes up a large portion of a developer’s day to day operations.  Writing clean code not only makes the job of software developers easier, it ultimately translates into reduced expenses for the business. 5 Reasons You Should be Writing Clean Code - https://www.wlion.com/blog/5-reasons-you-should-be-writing-clean-code/

Codewars is a community of developers, who that train on improving their development skills by training with other developers and helping each other get better through practice. Codewars -  https://www.codewars.com/ Codewars GitHub -  https://github.com/Codewars/codewars.com

This is a series of free ebooks diving deep into the core mechanisms of the JavaScript language. GitHub -  https://github.com/getify/You-Dont-Know-JS Kickstarter -  https://www.kickstarter.com/projects/getify/you-dont-know-js-book-series

Increase your typing speed while racing against others. The award-winning online typing competition, TypeRacer, allows people to race each-other by typing quotes from books, movies, and songs. It is the first multiplayer typing game on the web. TypeRacer –  http://play.typeracer.com/

npm  (Node Package Manager) is a  package manager  for the  JavaScript  programming language.  It is used to install, upgrade, configure, and remove software packages in a quickly and consistently.  It consists of three distinct components,  the website,  the registry, and  the Command Line Interface (CLI). Jest is a  JavaScript testing framework  used to test JavaScript code. It is d eveloped by Facebook and also used by Facebook to test all JavaScript code. This framework requires zero configuration and works out of the box. npm -  https://www.npmjs.com/ Jest -  https://facebook.github.io/jest/