spinningCat's blog

In this article i wanna share some sources that i took benefits from. You may want to check those source out. One of contributor of that source file is that (guy) and i am also contributor here.

Youtube Playlists

Learning jQuery

Interactive Course Site

Interactive Environment

All in one for WEB

Design

Npm Script

Spesific to JavaScript

Libraries, Repositories and Packages

Vectors and Unicodes and Fonts

Helper Programs

Item 2

Builder

To see the result you can check jsfiddle.net. That is the place i will publish the code samples. You can create canvas element with 'canvas' tag. Then you should assign an id or class so as to work with it in Javascript. I just want to grab your attention here, you can select canvas element with jquery but you cannot do anything inside it. because it isn't elements. Therefore, javascript must be your choice anyway. Speaking of giving id or class to element, it can be done like that.

Select All -> Codes will be copited to clipboard


        <canvas id="canvas"> 
        </canvas>
        <canvas class="canvas">
        </canvas>

Canvas is an HTML element so you have two options to design this HTML element. You can design either with inline style or external. Creating separate .css file and-and set width, height, background color in external .css file is always best practice. We will style canvas element like below

External Styling

Select All -> Codes will be copited to clipboard


        .canvas{
         width:500px;
        height:500px;
        }

Additional note: in default canvas's width is 300px, canvas' height is 150px.

Default width and height

Functionality is important, to be honest. So we need javascript for that. Remember, don't use jquery, go for plain javascript. First of all we need to grab the dom object. Look at below;

Select All -> Codes will be copited to clipboard


        var canvas = document.querySelector('#canvas'); 
        /* Remember: We use "#" for id, "." for class.
        This principle is same as selecting element in css. */

Right now i am using var keywords. Keep it in your mind for future uses, in ES6, there is const keyword and that is new terminology for defining variable. However ES6 is not widely standardized amongst browser.

With that selection, you have dom api, also you need to have canvas api to use canvas functionality. In this point,

Select All -> Codes will be copited to clipboard


        var canvas = document.querySelector("#canvas"); 
        // It is for using dom API.

Select All -> Codes will be copited to clipboard

 
        var ctx = canvas.getContenxt('2d'); 
        // It is for using 2d canvas API.

It is time to draw something with canvas. There are a lot of shapes are predefined in canvas API such as rectangle, circle etc. Lets try fillRect(). FillRect has four parameters.

x coordinate
y coordinate
width
height

context.fillRect(0, 0, canvas.width, canvas.height);

Additional note: You can give any number instead of canvas.width or canvas.height also you can set in css part as we mentioned above. However if your canvas.

We can set the colors of canvas element with fillStyle(). Fillstyle method give you some flexibility while setting colour. You can set colour with string, with rgb values,with rgba values, with hex value, with hsv values or with hsl values.

Select All -> Codes will be copited to clipboard


        ctx.fillStyle = "blue"; 
        ctx.fillStyle = "rbg(255, 192, 203)"; 
        ctx.fillStyle = "rgba(255, 192, 203, 1)"; 
        // Fourth parameter is just for setting opacity.
        ctx.fillStyle = "#00FFFF"; 
        ctx.fillStyle = 'hsl('+h+', 100%, 50%)';

fillStyle() example

Warning: You have to be careful about orders. If you call fillStyle after fillRect. fillStyle wont work.

Additional content will be added soon.

In this project, i am working with . I plan to talk about frontend phase of this project. Canvas will be used here. It is specifically designed for drawing something on the web. In the backend i plan to use nodeJS and socket.io. It is library of nodeJS.

Flexbox is a way to lay out unknown and/or dynamically sized items in a container. Their size and position is just altered. Jsfiddle will be used to show how things work in flexbox. Keep in mind, in case of not supporting issue on a browser, it just rolls back display property to default one. Internet Explorer 9 and before probably will have problems with flexbox.

First thing you are gonna do is to set display type. So We get into details of flexbox in short time but first we should set display as flexbox and observer what will happen afterward.

Next property is flex direction. Flex direction can get four different values that are column that are shown below.

column
column-reverse
row
row-reverse

You can play it around jsfiddle link below.. I put all options there for you. It is flex-direction:row by default

Flex direction example

Next property is flex-wrap. It is flex-wrap: nowrap by default. Whatever you change the value of item's width in line 16 of CSS panel. An element is just placed automatically after checking available space on parent div. Change the line 16 if you want.

flex-warp:nowrap With flex-wrap:wrap. It just replace the box by focusing on width of parent div.
width of parent div is 300.
width of parent div is 600.
flex-wrap: wrap-reverse is another option you have.

justify-content is next for us. It is used for setting the place of box. It has five options. That are flex-start, flex-end, center, space-between and space around. justify:content: flex-start is default value. You can play it around and see the result of each value of that property. Link is below.

jusftify-content example

For next property, i set height to 200px. We will see what will happen. Next thing is align-items.

Align items just handles the y-axis. Default value of align-items is align-items:flex-start. You have for options here.

flex-start
flex-end
center
strech
In order to use align-items: strecth you need to remove height of items. Actually that make sense when you think about it. Assigning height explicitly will avoid stretching.
align-items:center
align-items:stretch

So justify-content and align-items are like brothers. The reason of saying that, justify-content handles x-axis whereas align-items handles y-axis. So they are doing same things for different axis.

align-content is next. align-content is for setting the position of all childs element in specified position. if you disable height of items and do align-items: strect you will see divs are expanded according to size of parent div. JS fiddle link:

options

As mentioned above justify content handles x-axis whereas align-items handles y-axis. What if we change flex-direction:row to flex-direction-column. You can think the axis of page will be different in that case. When you do flex-direction: column. X will be y and y will be x respectively. see the example.

It is time to play with specific child element instead of changing the position of the whole block. The first thing we gonna do change the place of the specific child element. The thing we gonna use is

If you select more than one child and give it bigger value you see in the jsfiddle link. It puts all child according to number you give as an order from bigger to smaller.

Big Value

Next property is flex-grow Default value of flex-grow is 0. When you set flex-grow such as flex-gor:1, you will see all childs element will be expanded with a spesific ratio. with same pixel.

You can select direct child and grow that. You will see other boxes will be shrinked.

Adittional contents will be added

This is fukol lightweight, breakpoint free, element query driven, progressive enhancement based CSS grid framework. JS fiddle will be used to demonstrate example.

This line determines how items are handled. The wrap value means items will start a new row if there's not enough room on the current one.

This is the 'element query' part. Instead of setting an arbitrary number of columns and using breakpoints, we decide roughly how wide we want the item to be (5em in the example — the flex basis) and make sure items can grow to use the available space (1) but not shrink (0). So only change the 5em value and leave 1 0 as it is.

This is for gutters. A 0.5em margin here means gutters of 1em (the margins double up).

It makes sure the outside of the .fukul-grid container remains to flush horizontally and no additional margin is added to the vertical flow. The class="fukol" container in the HTML snippet enables you to add positive margins around the grid — not possible with just .fukul-grid because this uses negative margins (see. It also suppresses horizontal scrolling issues which occur under certain circumstances.

As i said before everything in a web page is modelled as a box. In this article, I just walk through real-world example. This example is complete page layout example. And here we will see how important it is to know how to replace box inside container. You can check calculate container's size article below to get more insight.

Flexbox have some features for changing the view. These are flex-direction, justify content and align-items.

Think about dom structure. It is actually a tree. Simplest dom would be like container(root) -> subContainer (child) -> text(leaf). text is a leaf in this case because text element doesn't have a child. You can have more complicated dom structure for sure. Point is flex-direction, justify-content, align-items will state the place of subContainer . I put a border to each of container for debugging purpose. Hopefully it will be easier to understand for you with that borders.

If you check footer parts you will see what i did there with justify-content. As reminder justify-content handle x-axis and align-items handle y-axis.

For selecting individual child in css, the line you are gonna use is .content .subContent .innerContent:nth-child(4), It will select fourth child of subContent. You can change the place or how small or big it will be order - line 82, flex-shrink - line 78, flex-grow - line 73, align-self- line 74 will do those tasks for you.

In my humble opinion, best feature that flexbox provide to us is to replace elements to the page according to current with and height of browser window.

Full screen demonstration

Half screen demonstration

As you see, elements fit the window nicely.

Layout example with flexbox

I strongly suggest you to check out methods i used in example.

I am about to talk about markdown syntax. Using markdown syntax is important for constructing clear-looking Readme.md file in your GitHub project. You can check an example here. It is made with markdown syntax. The reason of that, you can have good looking document with just really simple syntax. Actually there is something more possible with "pandoc" package you can covert your .md to .pdf easily.

While writing markdown, you have two alternatives that are mentioned below.

Question is what can you do with md? Well a lot of things. I will show you some tricks. You have options like #, ##, ###, ####, #####, ###### which are h1, h2, h3, h4, h5 and h6 in html respectively.

You can make your text emphasis, italics, bold or whatever with *,**,_,__ or you can combine them in a semantic way.

*asterisks*
**asterisks**
_underscores_
__underscores__
*asterisks and _underscores_*
**asterisks and _underscores_**
**asterisks and __underscores__**

You can have ordered or unordered list in md syntax. It is really simple.

1. Ordered list item #1
2. Ordered list item #2
3. Ordered list item #3
⋅⋅1 Ordered sublist item 2
4. Ordered list item #4

Keep in mind that the number of first item is really important. This version starts with 1, but there is a different number in the version on the link I've shared. For ordered list you use number for unordered list you use *. It is pretty similar to html right.

* Ordered list item #1
* Ordered list item #2
⋅⋅* Unordered list item #1
* Ordered list item #3
⋅⋅1 Ordered sublist item 2
* Ordered list item #4

You can give URL in markdown with simple way -> [Google](https://www.google.com)

It is possible to put code here with below syntax.

```javascript
var s = "JavaScript syntax highlighting"
alert(s);
```

```python
s = "Python syntax highlighting"
print s
```

You can construct a table in markdown it is like html's table with simple syntax shown below.

sometihng | other thing | another thing
---| ---- | ---
item #1 | item 2 | item3
text 1 | text 2 | text3

You can put blankquates.

> The world has experience weird events currently.
> The kid his name is Laren ipsum randomly read randomly created text so easily. This baby was 2 years uld.

You can have horizontal lines with different appearances it seems with those.

---
***
___

That is all for now you can get and play it around here.

All in one

Type coercion is simply a implicit type casting that is enforced by rules of specific language.

Type Coercion Example

I need to get your attention here for this line var b = a + ""; + may seem like mathematical operation to you and you can consider how you can combine Number type with String type. Well, it is just about coercion and in this scenario, you can be considered + as a tool for explicit coerce.

Abstract Value Operation

Before examining explicit vs implicit conversion, we need to construct correct understanding how a value can be string, number or boolean. We have some methods for that.

ToString

None string value is coerced to string with that method. Let's examine that. I will use typeof function to make sure you about coercing happens or not.

ToNumber

That converts value to number equivalence.

casting to number

ToBoulean

As we already knew, true and false and 1 and 0 is same thing. It is likely 0 means false, 1 means true. But this is not necessarily legitimate in Javascript. Because all non-zero numbers in javascript mean true.

Additional note : ! is a convenient shorthand for converting a truthy /falsy value to true/false. Also you can define boolean variable with !.

boolean case

Pug is HTML templating engine, primarily used in NodeJS. The way for writing markup is new and innovative in pug and gives you some advantages over HTML. Let's look at example.

Select All -> Codes will be copited to clipboard


        <div>
        <h1> <This is h1> </h1>
        <ul>
        <li><This is list item #1> </li>
        <li><This is list item #2> </li>
        </ul>
        </div>
        <p><This is ordinary paragraph.></p>

Now I will demonstrate same thing with pug and I try to get your attention to some useful tools that are brought to table by pug. I will use codepen.iofor that.

Pug basic

It may come as surprise to see no tag there. For me, writing <tag></tag> each time is pain in the neck in some cases. Instead of tag, we have indentation rules. Only thing you should watch out is indentation. That is it. You are all set

Let me summarize the feature of pug that may come handy to you.

Simple Tags

So i mentioned before pug doesnt have any tag system. Pug has indentation system instead.

Attributes

As a reminder, HTML markup makes web page static and that is all about. If we want to add some dynamics features or some styling, we should select the element. There are three ways for doing this. We can select element with tag or with id or with class.

As you can guess pug gives you a way for doing the same task. Lets look at codepen.io example

Attributes in pug

Lets look at developer tools now. It can be opened by hitting f12 on chrome.

Pug(known as Jade before) also make your easier with some shorthand about defining class or id.

Shorthand =>
s It is same thing and easier to write isn't it?

Blocks of Text

You can construct blocks of text like that.

Block of Text

Pug has some powerful features such as using loop, writing javascript code, interpolation

JavaScript

Codepen example will show how to use javascript. In this example we will create list dynamically.

Javascript involvement in Pug

Interpolation

Basically you can use text you dynamically define in the html markup. Let's see the example

Handlebars is template engine that is powerful, simple to use. It is based on Mustache template engine .

Main purpose of handlebars in my understanding is about generating same markup multiple times. You can build your page with javascript/jquery totally. There is no problem with that. Or you can use handlebars . Lets just look at simple example how we build a part of page with handlebars

tml panel in line 2 through line 24, we just surrounded html markup with script tag. This markup is not in the DOM yet. It is just a string. The purpose here about using handlebars, as you see in the result panel is to create same elements multiple times. So if you want to create some part of a page that may be repeated multiple times. You may just use

Handlebars template engine

My aim is just to create buttons multiple times according to length of objcets. For that purpose, First thing i did is define an object that i wrote simple article above about object.

In jquery panel, line 1 through line 26, you can find object definition. The method i used here for constructing dom is line 31 in

Simple handlebars example
I will share the page here so you can get more informations about those method.

Let's take a look at powerful features that is maintained by Handlebars template engine quiet nicely.

Adding handlebars template to your project

In order to use handlebars you need to include that file. https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js

Templates

As mentioned above, in order to use handlebars you need to cover your html markup android handlebars expression with script tag. This is another example that shows how to use it

Handlebars with template

Actually we feed static content with a dynamic variable that we define in js. Let's do some quick touch What method we used here.

You can try your handlebars here to see the result.

Try handlebars

Before writing about using "use strict" in javascript, i should also tell you javascript interpreter does not warn you about every possible situation. Sometimes javascript just assumes your intention and do some correction. "use strict" just enforce the interpreter to interpret program with more strict rules. ES6 is implemented with "use strict" so it is the default.

Let me show you simple error. There is more you can sure of it. Assuming we are in the es5 environment. ES -> ECMAScript

Select All -> Codes will be copited to clipboard


        x = 2;
        console.log(x); 
        //You will see 2 on your console.

What if we use these two lines of code with "use strict"

Select All -> Codes will be copited to clipboard


        "use strict" 
        x = 2; 
        console.log(x);

Now we check developer tools with f12. Assuming you are using chrome browser. Uncaught ReferenceError: x is not defined -> You should define x before. using it.

Strict mode will help you with those.

It catches some common coding mistake, throwing more exceptions.
It prevents or throws an exception when something unsafe is done. Check the example below.
Disallows the declaration of a new variable without var. If you take a look at the example above. You will see that I didn't define x with var (in version without "use strict" ES5 just define the variable globally. So it is hoisted at the top..
You have to define object with different key values.
It will avoid defining function with same parameter name.

code: "use strict"; function func(foo, foo){} error: Duplicate parameter name not allowed in this context.

There are two ways to use "use strict". You can either define "use strict" at the top or you can define it in function. It depends on use case. Check this statement out to have a clearer perspective.

if you' rewriting from scratch and want to follow a particular convention, just use it. if you're in a file that's been written by other people, you likely wouldn't put use strict up at the top.

JSON is an initialism of JavaScript Object Notation. It is special data structure we use, generally for establishing a connection between frontend and backend with AJAX that is illustrated here just after some moments. First, in order to clarify JSON in your mind, you can think as dictionary structure in c#, java. That is similar since all of them have key, value pair

You can define object in js like below

Select All -> Codes will be copited to clipboard


        var obj = {};
        var obj = [{}] 
        /* object inside array When you one of these you have 
        an empty object. You can define those with some 
        elements like below.*/
        var obj = {"foo" : "bar"};
        var obj = {"foo" : "bar", "bar", "zar"}; 
        var obj = [{"foo" : "bar"}, {"bar" : "zar"}];
        var obj = {"foo" : "bar", "foo", "zar"}

Second foo overrides the first one

value part can be any type like Number, String, NaN even it can be function and you can use value of your object inside the function.

Example

There are two main methods for handling JSON that are mentioned below

In Ajax, your string must be compatible with JSON format. So It will be parsed for backend usage.

AJAX

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy to write and read for humans, and parse and generate for computers. It is the format of for establishing communication between frontend and backend. It is illustrated above. It is also used for storing or exporting data, and for exchanging data between many other languages.

Let me give you a list about what language use which library for json.

Before writing about how width is calculated, we need to focus on container block. Since everything is a web page is modeled as a box, inner box will be measured in terms of how big it is or how small it is by focusing on the outer box's size. At the end of the article, i am gonna share nice example. Simple container definition can be done like that.

Select All -> Codes will be copited to clipboard


        <div class="container">
        <div class="innerContainer">
        </div> 
        < /div>

As we said above everything in a web page is modeled as a box. And each box has some areas that have a part of calculating actually size of the box.

Content area
Padding area
Border area
Margin area

Let me bring a method to the table getComputedStyle(). With this method you can see spesific measurements of box in terms of items in the list. An example is below.

I will show a screenshot with results and we will do some mathematical operation

Examine

As you see above, how much space of innerbox has assigned after calculation of margin, header, width and height.

Example with animation

Msg is highly customizable modal windows and popup messages. This library was written with Vanilla JavaScript. Let's go over wiki step by step.

Caching string

It is considered first step and simplest step before discovering more about that library. First we initialize msg with var msg = Msg() Example is below.

Additional Note: When you open a modal, popup or something else, it is conventional wisdom to use overlay in order to avoid user to interact with background element. In msg modal, if you click anywhere of overlay you can close modal window.

Creating popup windows

This question come to mind easily. So explanation is quiet simple and straightforward. A modal window is on top of everything else and it requires the user to close it before doing anything below it. A popup usually appears without bothering the user too much and it doesn't interrupt the user's workflow. Check the example below.

Modal and popup with styling little bit

You can have two different popup style. One is regular and the other is autoclose popup When you click popup2 button you will see a popup contains hello message will be appeared and there is a progress bar below. That may come in handy if you want to show your message for a limited time. It will stay there then poof it will disappear.. Also, there is a textarea element to show you-you can still work on your page while popup appears. It wont disturb you. Handy huh pretty neat..

Regular popup and autoclose popup

Custom key Detection

you have a blog page people can add articles or update them . When one of this happens, You can send modal as message to other users. And users who were informed about that change could click escape key to inform user like "I got your message". Thanks to that everyone knows who make a change on the page

Click escape

If you want to make something innovative at this point. This example will enlighten your mind.

After close

It is an example with modal windows for introducing what options you have

Modal Window

Let's cover the options we have one by one.

class="green" -> This is default class for styling you can set external class and set some rules for your modal.
windows_width:"640ox" -> with that opiton you can set width of moda. windows_height is also available.
enable_overlay:true -> Two possible values for that true or false
auto_close:true -> Two possible values true or false. You can see what will happen after changing this value with example above
enable_prgressbar:true -> If you make this true you will see progress bar at the bottom with nice animation. And you modal will be closed automatically after spesific period of times
show_effect: "fade" -> modal will be appeared with fade animation.
show_effect_duration: 350 -> it takes 350ms to see modal window on the screen.
close_effect: 350 -> modal will be disappeared with fade animation.
close_effect_duration: 350 -> it takes 350ms to disappear modal window on the screen.

Snackbars

Snackbar Example

class="blank" -> This is default class for styling you can set external class and set some rules for your modal.
content_class="snackbar" -> custom class(es) fro the content html element
position="bottom" -> You have some options here you can put your snakbar to the left, right, top and bottom.
edge_padding_y: 0 -> the vertical spacing between an edge of the screen and the window
window_min_width: "600px" -> minimum width of snackbars.
window_x: "none" -> the type of x close button
enable_overlay: true -> Two possible values for that true or false
autoclose: true -> Two possible values true or false. You can see what will happen after changing this value with example above
autoclose_delay:1000 -> Snackbars will be closed in 1 second. In order to make this work, you should make value of autoclose true.
close_on_show:true -> closes the window before showing it
show_effect: "fade" -> modal will be appeared with fade animation.
show_effect_duration: 350 -> it takes 350ms to see modal window on the screen.
close_effect: 350 -> modal will be dissapeared with fade animation.
close_effect_duration: 350 -> it takes 350ms to diseppear modal window on the screen.
sideStack: "none" -> where they stack on top of each other
zStock_level:1 -> changes the starting z-index, for example, there is level 1, like 501, 502, 503, and level 2, 5001, 5002, 5003 (but they're actually more zeroes)
lock -> true or false value. Disables scrolling from the background window, for example if you use the mousewheel on a modal, it won't propagate to the body and scroll the body

Documentation and demo page

Wiki page

Specificity measure with a weight of CSS selectors. If an element will have class and id together and id and class have same set of rules in the id will be applied. If selectors have same weight, last selector you define in CSS file will be applied..

Example #1

if you have <div id=demo class=example> and in your CSS you have #demo { colour: red } .example { background: lime }, even though the #demo selector is stronger, that element is going to end up with the properties from both rules because both rules apply

where specificity matters is when you have #demo { colour: red } and .example { colour: lime } trying to set the same property. In this case they still also both apply, but since #demo is stronger than .example, its colour value overrides the weaker rule.

selectors don't battle each other, they just assign different 'weight' to the values you're specifying and a stronger selector can huld properties that override properties applied to the same element by a weaker selector.

Selector Types

Type Selectors like h1, p or div
Class selector .class or [class=class]
Id selector .id or [id=id]

Additional note if you select element with [class=class], [id=id]. Something will happen differently. Because they are attribute selectors and they have equal weight.

Example #2 with [class] and [id]

Specficity determines which css rules will be applied.
Every selectos have its own weight.
If two selectors have same set of rules. Stronger selector will defeat weaker selectors.
This site can give you more information about Specificity
If selectors are equally strong. Last one will be applied.
When selectors have an unequal specificity value, the more specific rule is the one that counts.

S elect2 is the jQuery replacement for selecbox. Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and other options.

The basics

You can type in textbox to get result immediately.

Example #1

Multiple select boxes

Example #2

Select box with labels

You can type letters when you select item here it will show the result immediately. To be honest it can make your job easier in case of having long drop down list

Placeholder

Example that i shared before us placeholder. Place holder is really nice feature If you want to direct user about what type of selection they will do. So Check below.

Placeholder

Data Source

Select2 can be feeded from a data source Also you can do default selection.

Selection from data source

Limit amount of selection

You can select as must as you state with maximumSelectionLength.

Selection from data source

Bootstrap Support

N ormally total width of element is width + padding-left + padding-right + border-left-width + border-right-width. When you use box-sizing:border-box, this changes. So whatever you set as element's width, paddings and borders included.

With that way, if you want your element to be 200px wide from border to border, you just set width:200px; In old way, you set width:180; border:2px; padding:8px.

There is also box-sizing:padding-box; which is same but it leaves border out of calculation, so the width is width + border-left + border-right.

D OMContentLoaded event is fired when html document is completely loaded and parsed. If you use jquery you should now $(document).red(function(){..}) is syntatic sugar of DOMContentLoaded event.

document.addEventListener("DOMContentLoaded", ready);

There is also async and defer keyword. your script element should be either or both. Reason is initial-scale performance.

by forcing them to be neither you block parsing of the rest of the content (which means the browser does not even get to render anything if the script element comes before the body.

So I guess whenever you have a DOMContentReady handler you might as well make the script async to benefit from rendering and compiling your code in parallel.

of course that then requires the script element to come as early as possible before any elements that require synchronous processing are discovered (such as a non-async/defer script or the body)

Async

It is a boolean value. Browser execute script asynchronously.

Async

Script is executed before firing DOMContentLoaded

Select All -> Codes will be copited to clipboard


        >!doctype html>
        <html>
        <head%gt;
        <title>Example</title>
        </head>
        <body>
        <script src="ex.js" async ></script>
        <img class="img" src="https://www.w3schools.com/css/img_fjords.jpg">
        </body>
        </html>

JavaScript

Select All -> Codes will be copited to clipboard


        function ready() {
        console.log('DOM is ready');
        var img = img = document.querySelector("img");
        // image is not yet loaded (unless was cached), so the size is 0x0
        console.log(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
        }document.addEventListener("DOMContentLoaded", ready);

DOMContentLoader evvent triggers on document when dom is ready we can apply javascript to elements at that time.

Images and other sources may still continue loading.

Cascading Style Sheet known as CSS has many length units such as px, em, rem , vh, vw etc. Each of them has use-case and advantages. The thing is you need to decide which length unit is convenient for target-device. In web, nowadays, media queries is widely used to define CSS rules for screen with specific size.

Let's examine unitys with examples. I will share an example for every unit. I will use GetComputedStyle()method to show those units in real example. Also possible to find the support table of those units in browsers. You can check the support of html elements from Can I Use? It is compatibility check for browser.

%

% unit
As you see subContainer just get the 80% space of container.

ch

ch unit
CH would be the most useful to guess how many characters wide some text is, but that only (sort of kind of) works if the font-family is monospace.

rem

rem unit
rem = html element's font-size. IF the user increases or decreases their font-size at the OS or browser level it increases the size of everything.

em

em unit
If you want a box of different sized text to scale nicely in a responsive matter you'll want to use em.

vw

vw unit
In this example subContainer takes 20% space of container. So 1vw is like 1% width of container.

vh

vh unit
In this example subContainer takes 20% space of container. So 1vh is like 1% width of container.

Genetal Notes

we just set the font-size in the body {} in css (something like 80% for example) and then everywhere else we use em
For accessibility adjustments (ie: for poor eyesight) users can just adjust the % in the body
So long as you consistently use em everywhere else then it will scale nicely when users adjust size / zoom factor
rem is relative ems to the main font size, em will be relative to it's parent.
Rr Rem is relative ems to the main font size, em will be relative to it's parent.

Additional content will be added soon.

Hello everyone, in that article, i tend to dive into backend stuff little bit, so i will get some help from PHP and try to introduce PHPMailer how handy it is. So content of this article consist of three parts as you easily pick up ftom the title. I tend to make a list of them.

Take a screen shot with Vanilla JavaScript HTML2Canvas
AJAX request with Vanilla Javascript MDN - Getting Started
Send email with PHP PHPMailer

I am debian jessie user. It is stable version of Debian. First we need to install LAMP server. For installing LAMP, you can follow these steps.

Next thing you have to install composer so as to get latest version of PHPMailer. Here is the steps for installing composer. By the way compose is PHP package manager.

HTML page is really simple just contains button and image.

Select All -> Codes will be copited to clipboard


        <!doctype html>
        <html>
        <head></head>
        <body>
        <p><button class="click">Send Email</button></p>
        <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Sample pic" />
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js ">
        </script>
        <script src="./script/calculation.js"></script>
        </body>
        <html>

Javascript code seems a little complex but you will see what is going on with close look. We are just getting screenshot of div we want "container" div in this case and send that as parameter to passittobackend function. Passittobackend function is just callback of click event. Click event is just triggered when you click button that has "mail" class. In passittobackend function we are doing ajax call.

Select All -> Codes will be copited to clipboard


        // this is for taking screenshot.
        window.takeScreenShot = function() {
        html2canvas(document.querySelector(".container"), {
        onrendered: function(canvas) {
               //document.body.appendChild(canvas);
               passittobackend(canvas);
               },
             });
        }
        $('.mail').on('click', function() {
                 takeScreenShot();
        });
        function passittobackend(str){
                $.ajax({
                     type: "POST",
                     url:"mail.php",
                     data: {"dataString" : str.toDataURL()},
                     dataType: 'json',
                     success: function(data){
                            return data;
                     },
                     fail: function(){
                           alert("fail");
                     }
            });
        }

PHP part: If you look at the javascript code carefully you will see similarity with php. code. You can see similarity on that line

 data: {"dataString" : str.toDataURL()}

The data string is the index of $_POST array Thanks to "dataString index, now you have connection between backend and frontend. I need to get your attention before moving on in PHP. You cannot get canvas directly SetFrom frontend to backend. In order to carry on this operation, you need to get helps SetFrom ToDataURL method. Width that method you will have a string like below.

We should require PHPMailer class

Select All -> Codes will be copited to clipboard

 
        require_once "vendor/autoload.php";

then we need to have

Select All -> Codes will be copited to clipboard

 
        use PHPMailer\PHPMailer\PHPMailer;

Additional Note about debugging PHP

Select All -> Codes will be copited to clipboard


        error_reporting(-1);
        ini_set('display_errors', '1');

We need to cut first 22 character of string. We will use function.substr Then we will use function.base64_decode

In the next step, we need to put file into directory because we will use that file as attachment later. Method that we use is function.file_put_contents

Select All -> Codes will be copited to clipboard


        <?php header('Content-Type: application/json');
                $stringData = $_POST["dataString"]; 
                require_once "vendor/autoload.php";
                error_reporting(-1); 
                ini_set('display_errors', '1'); 
                use PHPMailer\PHPMailer\PHPMailer;
                $var1 = substr($stringData, 22);
                //$var2 = explode(',', $var1[0]);
                $stringData = base64_decode($var1);
                file_put_contents('/home/hellyeah/image1.png', $stringData);
                $mail = new PHPMailer(true); 
                // the true param means it will throw exceptions on errors, 
                which we need to catch $mail->IsSMTP(); 
                // telling the class to use SMTP try {
                $mail->Host       = "mail.gmail.com"; 
                // SMTP server
                $mail->SMTPDebug  = 2;                     
                // enables SMTP debug information (for testing)
                $mail->SMTPAuth   = true;                  
                // enable SMTP authentication
                $mail->SMTPSecure = "ssl";                 
                // sets the prefix to the servier
                $mail->Host       = "smtp.gmail.com";      
                // sets GMAIL as the SMTP server
                $mail->Port       = 465;   // set the SMTP port for the GMAIL server
                $mail->SMTPKeepAlive = true;
                $mail->Mailer = "smtp";
                $mail->Username   = "...@gmail.com";  
                // GMAIL username
                $mail->Password   = "...";            
                // GMAIL password
                $mail->AddAddress('...@gmail.com', 'abc');
                $mail->addAttachment('.../image1.png');
                $mail->SetFrom('....@gmail.com', 'def');
                $mail->Subject = 'Ek';
                $mail->AltBody = ''; 
                $mail->MsgHTML("Ek");
                $mail->Send();
                echo "Message Sent OK \n";
                //header("location: ../test.html");
             } catch (phpmailerException $e) {
                echo $e->errorMessage(); 
                //Pretty error messages from PHPMailer
             } catch (Exception $e) {
                 echo $e->getMessage(); 
                 //Boring error messages from anything else!
        }?>

xcode-node

NodeJS gives you ability to write JavaScript code in the backend. Node is for developing data transferring application. Some examples of node application is listed below.

Chat Client
Real Time user update
RSS feed
Online Shop

Time to develop small node app. Let's dive in.

I am debian buster/sid user. Buster is debian testing branch. I will share a link to install nodejs to debian OS.

Additional Note: You can check your version of Debian with lsb_release -a command. It will print out kinda long response. Also you can just simple use car /etc/debian_version.

root@debian:...# lsb_release -a
Distributor ID: Debian
Description: Debian GNU/Linux testing (buster)
Release: testing
Codename: buster

root@debian:....# cat /etc/debian_version
buster/sid

For install nodejs, follow nodejs.

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
apt-get install nodejs
build-essential -> You may need to install this package to install packages from nodejs. Type aptitude install

In order to check version of node and npm. Try following codes.

node -v -> Output: v8.6.0
npm -v -> Output: 5.3.0

Let's dive into a project with NodeJS

First create a folder called simple_project. Command is mkdir simple_project
pwd(print working directory) -> .../simple_project
Create Node project with command npm init. At the end of process you will see package.json will be created. You can type nano package.json to see the content of that file. Information of every package you install for your project hold in that file.

package.json

Select All -> Codes will be copited to clipboard


        {
        "name": "simple",
        "version": "1.0.0",
        "description": "First touch to node",
        "main": "index.js",
        "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
        },
        "author": "Berat Emre Nebioğlu",
        "license": "ISC"
        }

Yay we have node project now. We can write javascript code. And it is interpreted in backend.

So simple Javascript code will work in backend. Example is below.

Select All -> Codes will be copited to clipboard


        var arr = [1,2,3];
        arr.forEach(function(element,element){
                console.log(element);
        });

Type node index.js and see the result on console.

Additional node:In order to create index.js. Type this command -> touch index.js

You need nodemon package to observe a change in the files. It is necessary when you construct a HTTP server Because Http Server will be active all times. In order to install package, you will type the command npm install -g nodemon. -g is a flag that means, install package globally instead of locally

Important:Dont forget to be root while installing node package.

Use nodemon instead of node and see what will happen. it is picturized with screenshot. After saving the files, it will be interpreted automatically..

NodeJS is runtime environment to move our frontend code to backend. But not just that, it is also possible to create HTTP Server with nodeJS. We can have web application with nodeJS. NodeJS has many packages thats will fit your need.

For more information: npm search, use that command with package name such as express that we take benefit from, to construct HTTP Server in a min. Also pay a visit to Node packages

Output

We will install express now. We should write details of package to the package.json or we can use another flag that does it for us. --save -dev

npm install express --save-dev
if you dont use -g flag. You will see package.json is updated.

Select All -> Codes will be copited to clipboard


        "devDependencies": {
            "express": "^4.16.2"
        }

Creating HTTP Server and Serving in HTML

HTML

Select All -> Codes will be copited to clipboard


        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>My Node App!</title>
        <head>
        </head>
        <h1>My App is alive!>/h1>
        </body>
        </html>

NodeJS

Select All -> Codes will be copited to clipboard


        // you need to include express first
        var express = require('express');
        // in order to use features of express you need to assign it to variable.
        var app = express();
        // create an express route for the home page
        // http://localhost:8080/
        app.get('/', function(req, res) {
        res.sendFile(__dirname + 'index.html');
        });
        // start the server on port 8080
        app.listen(8080);
        // send a message
        console.log('Server has started!');

Start HTTP Server -> nodemon index.js

Result

This article is written for collecting all necessary information to one place. I am debian buster(testing) user and i will show you the steps you need to follow to set your environment ready for developing application with Ionic. This article focus on android side. Ionic complain about missing xcodebuild which is library belongs to Mac. Anyway lets begin.

Important:When you follow that steps. You are ready to develop android mobile app.

We will need JDK. I prefer OracleJDK. Instruction is below.

Download jdk 1.8 from oracle web site.
Use su or sudo -c command to become root and create folder inside /opt with mkdir /opt/java-jdk.
Extract your file with that command -> tar -C /opt/java-jdk -zxf jdk-9_linux-x64_bin.tar.gz
Set your environment variable for JAVA and JAVAC

Select All -> Codes will be copited to clipboard

 
        update-alternatives --install /usr/bin/java java /opt/java-jdk/jdk1.8.0_144/bin/java 1
        update-alternatives --install /usr/bin/java javac /opt/java-jdk/jdk1.8.0_144/bin/javac 1

You can check your environment variable with that command and set it.

Select All -> Codes will be copited to clipboard

 
        update-alternatives --config java

Important:You can see version of Java and Javac with those commands.

Select All -> Codes will be copited to clipboard

 
        java --version
        javac --version

We already dealt with Nodejs. So presumably you have npm (node package manager)

First thing you are gonna do install cordova than install inonic.

Select All -> Codes will be copited to clipboard

 
        npm install -g cordova
        npm install -g ionic

Attention:We will create ionic application now.

Select All -> Codes will be copited to clipboard

 
        ionic start todo blank --type ionic1

Dont forget: Turn on telemetry before proceeding further.

Select All -> Codes will be copited to clipboard

 
        cordova telemetry on

Time to add android platform to our project.

Select All -> Codes will be copited to clipboard

 
        ionic cordova platform add android

Before going further, i need to remind you. You will need to install Android.

Don't Forget:Put those lines into .bashrc file then close and open your terminal.

Select All -> Codes will be copited to clipboard

 
        export ANDROID_HOME=$HOME/Android/Sdk
        export PATH=$PATH:$ANDROID_HOME/tools
        export JAVA_HOME=/opt/java-jdk/jdk1.8.0_144/

Attention:Install gradle if it is not installed on your system. You can check that with this command.

Select All -> Codes will be copited to clipboard

 
        apt-cache policy gradle

Select All -> Codes will be copited to clipboard

In order to install gradle package.

 
        aptitude install gradle

You need few more commands before hitting the road of developing android application with Ionic.

Select All -> Codes will be copited to clipboard

 
        ionic cordova build android
        ionic cordova emulate android
        ionic serve

That's it !!!

React native is here to develop mobile-app using Javascript. l

To be fair, debian is one of the most robust and reliable operating system. This OS is well structure under some condition. The suggest that is made is to follow debian's way while trying something. Thats the way if you dont want to break your system. So here is the list below to watch out and to follow. Yuo should really focus on what you read now.

Dont mix up the releases Debian has four branches: These are old-stable(jessie), stable(stretch), testing(buster)and unstable(sid). Important point in terms of stability of Operating System is to have compatible softwares with each other. If you mix up releases you will lose your stability and os will break eventually.
Dont use drivers install script from outside.You should always stick with driver that is released in repo. It generally covers drivers for all GPU hardware. If you install driver from outside source, it wont be compatible in next kernel update.
These are Wiki page.
Ati HowTo
ATI Proprietary
Nvidia
Try backports: Software is released under debian after long tests and bugfixes. Package can be old because of that. You can install more up to date packages with -t stretch-backports options.
Stretch backports
Configuring, installing packages manually is easy but:You can install packages from source with configure, make, make install. But it will be hard to remove later on. You cannot do with APT or synaptic. Better to sEvery Debian package installed on your system has a directory in /usr/share/doc contains documentaries.

Read those.

Debian documentation page
Debian Administrator's Handbook:
The apropos command will help you find manual pages.
The man command for reading the manual pages for commands you don't understand.
Every Debian package installed on your system has a directory in /usr/share/doc

Apropos ls -> list all possible man pages

man clnt_call

Linux file/folder permission issue is really important matter that needs to be covered. There are some points i need to meantion about permissions. Briefly Linux has three user groups that are owner, group, other respectively. And Three kind of permissions exist that are read, write, execute. In this article, i will give some details. That would be useful to you.

Important Point: In case of developing web application, you should be careful about giving "write" permission. If you give write permission to group or others, you will probably see your files are messed huge.

Important Point:If you set permission of folder with 777. Your system will be screwed soon. Because your operation are open to anyone now.

Important Point:Each permission has stated with numbers.

Read Permission: 4
Write Permission: 2
Execute Permission: 1

At this point:I will strongly suggest to type man chmod on console. Basic command would be

Select All -> Codes will be copited to clipboard

 
        chmod 751 file

As i said about there is three different users on linux. That are owner, group, others. Let's briefly check what we did here.

We give read, write and execute folder to owner of file.
Whereas group can read file and execute the file.
Others can just execute the file.

By the way:Speaking of permission issue, it is one of permission measurement in linux. So use it wisely.

In order to see permissions in spesific folder, use ls -l command.

Examine this concept more. This is just ordinary example from console.

drwxr-xr-x 1 ... .... 628 Oct 11 20:27 img
d means directory.
First three columns belongs to owner. Owner has read, write, execute permission.
Second three columns belongs to group. Group has execute and read permissions as you see.
Third three columns belongs to other. Other just have execute permissions.

Naming convention is just a way to define variable in appropriate writing variable name style that is conventionally accepted by wide variety of language community.Moreover it can make your code more readable. Every different language may have own naming convention. If it was necessary to enlist some of them, that wuld be like below.

PascalCase
camelCase
snake_case
SCREAMING_SNAKE_CASE

Important:I will give some informations that what languages use which naming convention.

JAVA

THIS_IS_A_CONSTANT_NAME -» SCREAMING_SNAKE_CASE
thisIsAVariableOrMethodName -> camelCase
ThisIsAClassName -> PascalCase

c#

ClassName -> PascalCase
EnumerationType -> PascalCase
EnumerationValue -> PascalCase
EventName -> PascalCase
ExceptionClass -> PascalCase
InfterfaceName -> PascalCase
MethodName -> PascalCase
NameSpace -> PascalCase
ParameterName -> camelCase
PropertyName -> PascalCase

Attention:Some of the usage is not naming convention but are still used generally while defining function.

variable of jQuery is defined with "$" like var $foo = "bar";

There are many ways to categorize languages and their type-systems, and static vs. dynamic is also more of a spectrum. You have nominatively typed languages and structurally typed languages, weakly and strongly typed languages, etc

Different languages have different things they can express in their type system (so while C is statically typed, there are things it cannot (easily) express in its type system).

Var keywords indicates that language is dynamically typed like php, javascript. On the other hand, python is strongly typed (fairly strongly typed, at any rate)

Just because you do not state the type of the variable does not necessarily mean that the type is not statically inferred.

so you can have languages that are statically or dynamically typed, weakly or strongly typed, explicitly or implicitly (through type inference), structurally or nominatively typed, ... the list of possible ways to characterize the type system goes on.

For instance basically no language is "purely strongly typed" (whatever that may mean exactly) because every language I have ever seen allows automatic coercion between ints, floats and usually uints

Attention: in JavaScript, 2 + '3' = '23' it is automatic coercion happened here. If it is the case, language is weakly typed by the way.

Attention:Dynamic types mean that the type of a variable can't be known until runtime

it's not all that well-defined, but I think if you told me that some language you are creating is 'strongly, statically, dependently and structurally typed with type-inference' I would get an OK feeling for what your language is probably like

In languages like java that are very nominatively typed, a class and a type are basically the same thing -- if a type exists, a class for it exists and vice-versa. a java program might have a million classes in it that all just contain two member variables 'float x; float y;', but none of those are the same

Unity is a game engine that you can build 2d and 3d cross platform games. Also you can produce a game for cross platform. MonoDevelop or Visual studio are necessity to code for unity objects. And lastly you need Unity IDE for game development that comes with monodevelop. You can prefer to use visual studio. That's it. We are all set. !!!

I plan to demonstrate some piece of unity with small game scene. In this game scene, I have many objects you will see in screenshots

First we will create Terrain object. It is spesifically design. So you will have solid surface at the end.

Most of the time, you will be occupied with InspectorNow I will change the width, length and height of terrain. For that, you shall click the button looks like wheel with some part. Then you can scroll down little bit. And see the section that you can changes width, length, height and many more.

So we have terrain object with desired size. Now it is time to draw some shapes like mountains, rocks etc. Unity give us tools for doing that easily. When you click first button in terrain area. You will see many brushes model. Take a look at those. And draw something. And by the way, under setting you can set your brush size and opacity.

Attention:Blue circle is your brush.

Tip:If you move your brush onto object, you will suddently see your mountains in screenshot become bigger. And if you do same thing holding while shift pushed You will see your mountains become smaller.

You can see polygons when you select "shaded fireframe". You will see terrain objects consist of many polygons. It is because having a lot of flat surfaces is a whole lot simpler than trying to describe an object as a continuous series of curves.

Attention:The polygons don't have a fixed size. It is more about the camera and texture. If you have a low resolution texture then you don't want to zoom in or stretch it much across the screen. The nodes can be pretty much any distance from each other and describing a big box or a small box with the same number of nodes doesn't cost more on the GPU. (In this example, think of the nodes of the box as the eight corners).

When you zoom in or zoom out you will se an increase or a decreases in amount of polygons.

I will use FPS character here. Unity Asset Store has many builtin package that we can import into our project. There is an asset menu in unity3d. The only thing you need to do is to download character package and import it to your project. You will see folder structure. You have to drag and drop fps prefab to the main area.

Let's play simple game i made real quick. You characters has many c# scripts for every details. you can control your character from keyboard w,a,s,d but this interraction between your character and keyboard is maintained by c$ scripts.

Nice to have all of that, trust me. But in reality check, it is little bit absurd. So thing we need to is make this realistic as much as we can do. Thankfully asset store has environment package you can download it from asset menu. After importing that package, I need to add some textures to surface of terrain to show terrain more realistic. Process is illustrated with screenshot. You will click edit texture than add texture in submenu and you will select Albedo box and add texture.

Next thing I do is to paint the surface with brush.

So, Let's check out little game again after tweaking the appearance with some textures.

It is really realistic isnt it? This is the flavor of unity3d. Go check it out.

Git is a tool for deployment softwares which is really popular nowadays. You can publish your projects there and have a contributor that chek, fixing bugs and develop your codes. That's kind of thing ya know. Github is the web site that host your files. Here i will show you some basic commands how to construct a bridge between git and github with some basic commands.

There is two ways to create github repository. Either you can use git init command or you can create github repo and clone it with command git clone url/repo.git

Attention:Don't forget to create your repo without Readme.md file.

Now we need to use git clone method to get git repo we create on github into our working directory.

There is three commands we often use these are meantioned above.

git add * -> If you use *, you are stating to add all files. You can that command with files one by one also like git add file1 file2
git commit -m "message" -> If you want to follow what changes you made, it is beneficial to write readable, friendly message.
git push origin master -> Just puhs your files to master branch.

You can create branches as many as you want. You can later on merge those. It can be useful in big sotware developments in case of you have contributors. Let's check braching and merging real quick.

You can create and change your local working branch what you created with git checkout -b localdevelopmentsbranch The branch automatically created, whose name is Origin So if you want to change your branch to default one, this command git checkout origin is enough.

Attention: git branch or git status will tell you the branch you are in. There is more about git status that we focus on later.

Attention:Speaking of git status functionality, git status will show you changes in your files are ready to commit or not.

Don't forget:After creating a branch, you can change your branch with command git checout localdevelopmentsbranch. If you change something, you should push it to remove server. Thanks to that, you can work in two branches seperately. It is good especially when someone clone your repo and change something on your files. Than issuing a pull request for those changes.

Let's merge two local branch. This is really simple to do.

Suggestion:The thing you dont want any confliction between your local and remote. Before merging thins, i will strongly suggest you to check differences between your loca and remove.

Merge it now with git merge localdevelopmentsbranch

Git diff will show you if there is a difference in file between your local place and remote place.

Two more comments you should know in basic level. That are git log and git revert hash. Let's check what these are.

git log -> git log will show you what commit, when you commit, how you revert your repo to ceratain commit and a hash. Hash is very essantial part of this log. In order to revert your repo to particular commit, hash is necessary.

git revert hash will revert your files to file in spesific commit.

Attention: If you have any error about conflict try git add comment what you will do git revert --continue in next step.

Git extras contain plenty of commands you can consider as a helper. I am debian buster user. So in debian repo. there is git-extras package. You can install that with aptitude install git-extras command.

Git alias: -> you can construct alias for using later. Such as git alias gst="git status"
type gst in command line.

Tip: If you want all defined aliases type git aliasin command line

There is a .gitignore file in your repo. This file just tells to git dont worry about that file. You can safely ignore that.
Think about you have pdf file in your directory. You can just type git ignore ".pdf". Git goesnt care about odf file anymore.

Git info: is for showing some information about repo.

Git create-branch: It is for creating new branch

Git delete-branch: It is for removing existing branch.

Git authors: It shows you who is own of this repo.

Git back:With that command, you can remove latest commit. You can remove any amount of comments with a number
git back 3 -> will remove 3 last commit. It can be handy. If you really remember what you did. Or you can resolve conflicts easily.

Git undo: It is same with git back.

G ithub gives you an opportunity to have web page that ends with .ioYou probably want to introduce your application visually. Process is simple. I am just going to pass on necessary information to you in order to get this thing done.

You will create doc folder in your directory. mkdir doc
Then you will put everything into doc folder. So your repo directory and doc directory will have same files and folders. Let me show this with screenshot.

Attention:You dont have to have Readme.md in your doc directory.

Now Click settings when you are in repo and scroll down until you see "source" part.

We are all set.

In this example I will prepare an interface and show the interaction between a unity object and the keyboard. In addition, I will create a material and colorize it, as well as changing the colour of a unity object. Readers may find this article to be a helpful introduction to the unity world.

First we will create our game interface. That interface will contain camera,cube,3d-text. the interface will be pretty colorful.

First we will create a cube.

There is two ways in order to arrange the size of cube. We can do that either manually or automatically. I will explain below respectibely.

Manual Way: With the Q, W, E, R, and T keys, you can easily tell Unity what you want to do with your object. You can rotate, scale, move, or change the size of object. After pressing the R key, you can manually set the size of the X, Y, and Z axes
Automatic way: In inspector panel there is transform tab, you can change the value of X, Y and Z to set bounds of an object. Check the screenshot "scale".

Now, we will colorize cube objects. For that, we need to create a material. In this example we have three cubes that means we need to have three metarials. Anyways, for creating the material, We right-click on the asset folder wherebout is project window. As last step, move your metarials onto your object and objects will be colorized.
You can create text from menu Game Object -> 3d Object -> 3d text. I need to say it is kind of blurry text. For handling that situtation, i encourage you, change the font-size and scale of text.

Tips:You can hide or show the text by clicking mesh renderer option. Just select the text, you will see the options. It is important because the game is based on who lost and who won the game. There is two playes on the game either play1 or player2 will win therefore we need to show what which player defeat what player in appropriate text.

Tips:You will see Shaded menu. If you click 2d beside shaded menu, you will have 2d model representation of all screen and that will facilitate your work.

In inspector panel, you can change cam's projection mode from perspective to ortographic. Those two modes has its own use case, see what mod will suit your needs.

Attention:When you click "play" button. You will get this appearence. You should always check that our camera show you.

Let's get into code part. Because it is time to interract keyboard with object.

I will create keyboardshortcuts.cs

Select All -> Codes will be copited to clipboard


using System.Collections;
using System.Collections.Generic;
using UnityEngine;
                                
public class keyboardshortcut : MonoBehaviour {
                                
// Use this for initialization
void Start () {
                                    
}
                                  
// Update is called once per frame
void Update () {
   if (Input.GetKeyDown(KeyCode.A))
{
  GameObject.Find("score1").GetComponent<player1score>().skor1 += 1;
  GameObject.Find("score1").GetComponent<player1score>().updateScore1();
// GameObject.Find("score11").GetComponent<player1score>().
}
if (Input.GetKeyDown(KeyCode.S))
{
  GameObject.Find("score2").GetComponent<player1score>().skor2 += 1;
  GameObject.Find("score2").GetComponent<player1score>().UpdateScore2();
}
if (Input.GetKeyDown(KeyCode.Z))
{
  print("Z basildi");
}
if (Input.GetKeyDown(KeyCode.D))
{
 print("Dx basildi");
}
}
}

If you know javascript, it will be easier to understand what GameObjectis. I am sure you can treat GameObject some kind of tree, similar to DOM tree.
Think about that GameObject is a tree has root element at the top and other elements are childs.
There is .find method. The logic is really similar with JavaScript/jQuery. In JavaScript/jQuery, you have to descendant element. So score1 and score2 are cilds actually.
Keep in your mind, each object has a c# script. Because you have to state specifications of object or you need to assign function to object. So with method GetComponent <>() , we have the clase. Namely play1score is a class here.
score1, score2, updateScore1(), updateScore2() is just member of player1score class.
Input.GetKeyDown(KeyCode.A) -> That is triggered when A is clicked. JavaScript/jQuery has event for that with same name. You can see the picture if you are able to build a bridge between senses. Remember Javascriptis event driven language. So we are taking care of business with events here.

Select All -> Codes will be copited to clipboard


using System.Collections;
using System.Collections.Generic;
using UnityEngine;
                                  
public class player1score : MonoBehaviour {
                                  
public int score1 = 0;
                                  
public void Skor1Guncelle()
  {
    GetComponent&kt;TextMesh>().text = skor1.ToString(); 
  }
}

Select All -> Codes will be copited to clipboard


using System.Collections;
using System.Collections.Generic;
using UnityEngine;
                                        
public class player2score : MonoBehaviour {
public int score2 = 0;
public void Skor2Guncelle()
    {
       GetComponent<TextMesh>().text = score2.ToString();
    }
}

Attention:TextMesh is a class here. GetComponent<TextMesh>.text get the text instance of textMesh class here. This is string as you see, in order to get value of score1, score2, we need to covert it to string. Now check the screenshot below.