silikonsend.blogg.se - Tic tac toe html css download

TIC TAC TOE HTML CSS DOWNLOAD HOW TO
TIC TAC TOE HTML CSS DOWNLOAD INSTALL
TIC TAC TOE HTML CSS DOWNLOAD CODE

Bootstrap: sleek, intuitive and powerful mobile front-end framework for faster and easier web development.

It is a $scope function that is called with an expression to observe and a callback that gets invoked whenever that expression changes. Its goal is to augment browser-based applications with MVC capability, in an effort to make both development and testing easier.

AngularJS: open-source javascript framework, maintained by Google that assists with running single-page applications.

Below you can find a brief definition of both items. Perhaps in the future if we move to a second version of this example.įor our little experiment we used AngularJS (of course, the star of the article) and also BootStrap as we wanted to play a little more and combined tools.

There is no API calls or back-end functionality (data, authorization functionality, etc.).

Another good read with good comments and suggestions here:.

Net background) or any other language and framework you feel comfortable. Net (which is my preference because of my. In that youtube video the host is using laravel, which is a php framework, but you can do the same thing by using.

TIC TAC TOE HTML CSS DOWNLOAD HOW TO

But if you are interest and want to read or learn more about sanitizing or how to make your app more secure when using angularjs then this is a good place to start. No security discussion, we might work on that later on.

as I mentioned before this is a basic example, no complex work, but rather demonstrating the $watch function.

This was thought –created-done in less than 2 hours.

TIC TAC TOE HTML CSS DOWNLOAD CODE

I believe refactoring can reduce the amount of lines of code in our example. There is a potential to use ng-repeat, which we did not include it here. Keep in mind this code can be refactor and make it way much better. It had to be quick as well, so just a simple example would do the trick. We did not wanted to do the “Hello world” example from the book as always we tried to do something fun, so we thought, let’s do a simple TIC-TAC-TOE game experience, THAT YOU PLAY ON THE SAME DEVICE (the 2 users should share it. In this case we selected an example that can illustrate data binding, the watch function and CSS classes. We are used to the MVC pattern because of MVC.net, when we saw AngularJS we immediately wanted to try it also we had some influence from our front-end developers (Just to let you know part of our background is back-end development).īasically we wanted to focus to the initial part of our study around this book providing examples around simple items.

We started reading the book AngularJS from O’Reilly, by Brad Green & Shyam Seshadri and we wanted to use it right away. This article is based on a simple example that it was quickly done with this MVC library.

Since this project has been developed with the amazing Vue-CLI, you can use its own integrated CLI commands to serve or build the application.A note from the author: “After checking AngularJS I said to my colleague let’s blog about it… so here we are”.

TIC TAC TOE HTML CSS DOWNLOAD INSTALL

Then install npm dependencies: npm install You can install Tic-Tac-Vue cloning the project: git clone ( This project doesn't have organisms: it only has atoms, molecules and pages.) Install To read more about Atomic Design pattern, click here.

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button. AtomsĪtoms are the basic building blocks of matter. Similarly to chemistry, you can organize your components file (in this scenario Vue Single File Components) using atoms, molecules and organisms. Atomic DesignĪtomic Design is a methodology for creating design systems. To read more about BEM pattern, click here. The final DOM could be verbose, but you will have a better factored source code and, because of you don't have to nest CSS classes, your CSS bundle will result less heavy. It's all about splitting your CSS classes using Blocks, Elements and Modifiers. BEMīEM (which means Block Element Modifier) is a methodology that helps you to create reusable components in front-end development. In this project I adopted two methodologies I currently use in MotorK (the company I work with) to have a better factored code and organized source files: BEM and Atomic Design.