DEV Community: Dimitris Chitas

Do you really understand how color theories based(RYB,CMYK, RGB models)?

Dimitris Chitas — Tue, 24 Aug 2021 23:22:50 +0000

Hello there guys.

I hope my thread finds you in your best,wealthy as well healthy and full of appetite for some historical topics that can be discussed easily.

Do you know what is RYB, RGB and CMYK models?

We can discuss this topic for days and it could settle by different statements. I know it, so
for the history of the future i 'ill keep it simple,as much simple you could keep this kind of threads :P.

RYB Model History Reference :

Stands for term of the Red - Yellow and Blue.
The history behind it comes around 1500 after of some mixing references from Scientist's Projects/Paintings like Anselmus de Boodt such as architects-scientists like François d'Aguilon who is also the central point of the most applied version of the theory with the unfinished project of Opticorum libri sex, 1613 because of his death.

The real "activist" of the idea performance called Jacob Christoph Le Blon a painter and engraver as well who invented the three and four color printing using the RYB model with the usage of mezzotint he could printing wide range of colors.But that is the past let's focus what real RYB is stands for in practice.

RYB what you need to remember:

The RYB color model is a method for mixing different artists paints and opaque pigments to produce other colors. It is called a subtractive color model (a subtractive approach to color).
The name of the RYB colour model comes from the initials of its three primary colours – red, yellow and blue.
It turns out that RYB as a subtractive system is centuries old ideology but one that is sadly still being taught. In subtractive systems if you have a blue primary its absorption is too broad. Similarly for red. If you start with RYB you can make all the hues but not all the colours. Many of the mixtures are dull and desaturated.

What is in fact a color model?

A color model is an orderly system for creating a whole range of colors from a small set of primary colors. There are two types of color models, those that are subtractive and those that are additive. Additive color models use light to display color while subtractive models use printing inks. Colors perceived in additive models are the result of transmitted light. Colors perceived in subtractive models are the result of reflected light.
There are several established color models used in computer graphics, but the two most common are the RGB model (Red-Green-Blue) for computer display and the CMYK model (Cyan-Magenta-Yellow-black) for printing.

RGB History Reference :

RGB was invented from Thomas Young and Hermann von Helmholtz around 1800 both was scientist's Thomas and elaborated from as Scottish Mathematician James Clerk Maxwell around 1860.

RGB what you need to remember:

*The RGB model forms its gamut from the primary additive colors of red, green and blue. When red, green and blue light is combined it forms white. Computers generally display RGB using 24-bit color. In the 24-bit RGB color model there are 256 variations for each of the additive colors of red, green and blue. Therefore there are 16,777,216 possible colors (256 reds x 256 greens x 256 blues) in the 24-bit RGB color model.

*In the RGB color model, colors are represented by varying intensities of red, green and blue light. The intensity of each of the red, green and blue components are represented on a scale from 0 to 255 with 0 being the least intensity (no light emitted) to 255 (maximum intensity). For example in the above RGB chart the magenta color would be R=255 G=0 B=255. Black would be R=0 G=0 B=0 (a total absence of light).

CMY(K) Model History Reference :

In 1906, the Eagle Printing Ink Company incorporated the four-color wet process inks for the first time. These four colors were cyan, magenta, yellow, and black (also known as key), hence the name CMYK. It was discovered that these four colors can be combined to produce an almost unlimited number of richer, darker tones.
CMYK printing uses a method called half-toning to create different intensities of color while saving on ink. The technique has been used by printing presses since the 1850s, and was adapted for the CMYK model to expand the colors that could be made.
In 1956, Pantone Inc. consulted a chemist to reduce the complexity of their printing process. The ink supply was reduced to a simpler system, using a smaller number of inks to produce a boundless range of colors. Their greatest contribution to the industry was to introduce the Pantone Color Matching System.

Ink manufacturers around the world consider the Pantone color as standard. Even though most Pantone colors cannot be achieved from mixing the CMYK colors alone, the company recognizes its significance in the industry and indicate which ones can be reproduced on the CMYK model. Interestingly, Pantone uses 14 pigments to create 1,114 unique colors.

CMY(K) things to remember :

*According to the theory, 100% cyan, 100% magenta and 100% yellow would result in a pure black. With today's printing colors it is not possible to realize this, so in the area of printing the additional component key (K, black) is necessary.

*Therefore, the difference between the CMY- and the CMYK color model is, that the CMY color model assumes that it is possible to mix black by all of the three pure colors and the CMYK color model uses black as an additional color.

*In the CMY color model, black is 100% cyan, 100% magenta and 100% yellow and in the CMYK color model, black is 0% cyan, 0% magenta, 0% yellow and 100% key (black). With the exception of pure colors, the CMYK color model also uses black for many other colors.

Js Node (NodeMailer)

Dimitris Chitas — Wed, 16 Jun 2021 06:49:52 +0000

Hello there guys,i hope my post finds you well and with appetite for programming during the week.

Today my subject is NodeMailer a module which stands for transporting email in javascript logic.

It is a node module so you can easily install it with yarn or
npm,i will go ahead with npm.

So, first things first just simple open up your CLI and type

npm install nodemailer

Requirements

Node.js v6.0.0 or newer. That’s it.

Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most Node.js users turn to by default.

Usage

Setting Up

To send an email you need a transport object which will include some additions about the email,the recipient,the adress and some other stuff like that.

So we are creating our object

let trasnporter = nodemailer.createTransport(transport[, defaults])

Above we see a variable which stores the nodemailer object,which is responsible to send the email as
long as it uses the createTransport method to define our email parameters transport[,defaults] i will explain you real quick
those two params.

Transport is the transport configuration object, connection url or a transport plugin instance.
Defaults is an object that defines default values for mail options.

Send Email

Once you have a transporter object you can send mail with it:

transporter.sendMail(data[, callback])

Where :

data defines the mail content (see Message Configuration for possible options).

Callback is an optional callback function to run once the message is delivered or it failed.

Also it has more stuff you can receive and work with check here
NodeMailer Usage

If callback argument is not set then the method returns a Promise object. Nodemailer itself does not use Promises internally but it wraps the return into a Promise for convenience.

Message Configuration

Your message and his body should look like my example bellow :

var message = { from: "test_sender@server.com", to: "test_seceiver@sender.com", subject: "NodeMailer", text: "Hello this is plain text example", html: "<p>This is html plain text example</p>" };

As we can see above we created message variable which is initiated as object with the rest key-pair values.Those are the most common fields

1.from - The email address of the sender. All email addresses can be plain ‘sender@server.com’ or formatted '“Sender Name”
sender@server.com', see Address object for details.

2.to - Comma separated list or an array of recipients email addresses that will appear on the To: field

3.cc - Comma separated list or an array of recipients email addresses that will appear on the Cc: field

4.bcc - Comma separated list or an array of recipients email addresses that will appear on the Bcc: field

5.subject - The subject of the email

6.text - The plaintext version of the message as an Unicode string, Buffer, Stream or an attachment-like object ({path: ‘/var/data/…'})

7.html - The HTML version of the message as an Unicode string, Buffer, Stream or an attachment-like object ({path: ‘http://…'})

8.attachments - An array of attachment objects (see Using attachments for details). Attachments can be used for embedding images as well.

A large majority of emails sent look a lot like this, using only a few basic fields,you can check here for more advanched fields:
Mail Fields.

Is coming also with an Ap NodemailerApp is the ultimate cross platform email debugging app.

App includes local SMTP and POP3 servers, a sendmail replacement, catchall email domain service, AMP4Email renderer and it imports emails from EML files, EMLX files, large MBOX files from Gmail takeout, Maildir folders and Postfix queue files for inspection and preview. Ever wanted to view the actual HTML source of a nicely designed email instead of some garbled rfc822 text? Just open the HTML tab of an email to see it.
Check Here...Nodemailer App

That's all we have for today for more information check the documentation on github link.

Have a nice workday guys, in case for further explanation do not hesitate to contact me or find me in github or linkedin.
GitHub : https://github.com/feco2019
Linkedin : https://www.linkedin.com/in/dimitris-chitas-930285191/

Js Node (Helmet.js)

Dimitris Chitas — Sun, 23 May 2021 14:50:23 +0000

Hello there guys!

As the days going through and summer is near a lot of you, have done with projects,couple of 'em created in node/express.js environment and probably you think this is
the time to force some extra functionalities ,with some external
libraries-packages. :D :D

Today, i will focus in one dependency, is called Helmet.js exist also an open repo
on gitghub,check here helmet-repo which helping us provide some
additions in our express server,those parameters are focused on the security of your app.

You can use npm or yarn i will head with npm so simple we can install it npm install helmet --save and save it globally.

So if you already have an express server running,you can just
simple require the helmet, see bellow :

const express = require("express");
const helmet = require("helmet");

const app = express();

app.use(helmet());

// ...

What is helmet?

Helmet is a function used as middleware and is wrapping 11 smaller middleware's,sets HTTP Headers,origin validations and some other stuff to avoid multiple attacks on your website-webapp.

So the above app.use(helmet()); is equivalent to this

app.use(helmet.contentSecurityPolicy());
app.use(helmet.dnsPrefetchControl());
app.use(helmet.expectCt());
app.use(helmet.frameguard());
app.use(helmet.hidePoweredBy());
app.use(helmet.hsts());
app.use(helmet.ieNoOpen());
app.use(helmet.noSniff());
app.use(helmet.permittedCrossDomainPolicies());
app.use(helmet.referrerPolicy());
app.use(helmet.xssFilter());

All setting headers to your content, to your loading balances and predifined actions to verify the actions of the clients verifying like this who is who,is a sugar to your application not the core of your security build.

Let's see two examples
1.

  helmet({
    referrerPolicy: { policy: "no-referrer" },
  })
);
//Set custom options for referrer policy

// Sets "X-XSS-Protection: 0"
// Disables browsers buggy cross-site scripting filter by setting //the X-XSS-Protection header to 0


app.use(helmet.xssFilter());

// Sets "X-Content-Type-Options: nosniff"
//Sets the X-Content-Type-Options header to nosniff. This mitigates //MIME type sniffing which can cause security vulnerabilities
app.use(helmet.noSniff());

That's all we have for today for more information check the documentation on github link.

Does your work get paid properly?

Dimitris Chitas — Tue, 13 Apr 2021 13:13:13 +0000

Hello there community and learners.

Two weeks before i came across of a WordPress project,in fat terms it was an eshop(Woocomerce) with some UI work on a custom template,and the back-end work for (bookings,invoices etc).

I used to do a better offers when the client is suggested from a friend or an external partner so i decided to ask the 50% of the ammount.To talk with a numbers that was 500euro from 1000euro which was my offer for the eshop.

The customer thought that 500 euro was much enough and decided to to tell me that we will not proceed further with the construction,even if i was already started to create things and show him what i was doing.I get upset a while but you know in freelancing things like these are common.Yesterday i recieved an email from him that my job was very low bugdet and after me he made his research and he got totally dissapointed from the prices and the services that they provided to him.
He asked me if i can be in partnership with him again.

My quetsion is?

Do we underestimate our job,or some clients that belongs out of the field of IT just they are not ready yet to understand the path of our job?
What should be my answer?Should i be professional and say yes let's do it or should i keep it personal and say yes let's do it with more money or even no i don't do it?
With wich way you are calculating your cost's for each project?

I hope you to have a nice day and a nice reason to talk about your experiences along that situations.

Peace

JS Set Object (2 handy usages)

Dimitris Chitas — Fri, 19 Mar 2021 11:27:37 +0000

Hello there guys.

Today i will talk for the SET object which is storing new
unique values of any type as well primitive values and object references.
This could be handy for some cases,i will show you two of them
in this thread.

Cases

Remove duplicated records from the arrays
Using add() method to add values to the SET object

So first lets create our array and try our first case,in my example we will set some values twice,with this way we will see
how Set() will help us to point and delete the overwrites.

let myArray = ['Jim','Jhon','Grace','Felice','Jhon','Sylia','Grace'] ;

let myArrayClear = [...new Set(myArray)]
console.log(myArrayClear)

The result without double records.

Check to see the results on your console it should miss the double records,job done!

Secondary we will see how a new instance of Set object could work very nicely with add() method and create values as long as avoiding the double records, let's take a look.

const mySetObject = new Set()

mySetObject.add(2)
mySetObject.add('Hello Word')
mySetObject.add(4)
mySetObject.add({a: 1, b: 2})
mySetObject.add(2)

After our additions (number,string,object) we can itterate through our array that contains different values and data types but you will notice that we add the number 2 twice,whe we will loop though and you will see that is beeing added only once because of the rule "A value in the Set may only occur once".So let's use for to see what we get.

const mySetObject = new Set()

mySetObject.add(2)
mySetObject.add('Hello Word')
mySetObject.add(4)
mySetObject.add({a: 1, b: 2})
mySetObject.add(2)

for (let item of mySetObject) console.log(item)

That's all for today!

JS Console Tricks(How to use Css in the console)

Dimitris Chitas — Wed, 24 Feb 2021 14:09:57 +0000

Hello there guys.

Today we will provide a nice trick,about how you can style your console messages with css.
It's common nowdays developers using the browser console for their
tests.

What about if you can preview your result with more semantic way?
Let's dive to the point

I will use Chrome Developer Tools for this project you can seek with me or you can use the browser of your choice.

First we open the developer tools,you can pres F12 for the shortcut.

You should see something like this :

After that you going to the head menu and you hit the console tab.

If you have bunch of errors or warnings you can press CTRL + L
to clear the console.

So,for our example we will console just the Hello World with styling and without.

The normal console.log should be something like this and we print just a 'Hello there dev Community'

If we would like to add some styling we should use the percentage sign and the letter c in the beggining of the text and as second parameter with comma you import your css style and the example shoul look something like this

And our result seems different,ouacha!

JS Node (express-rate-limiter)

Dimitris Chitas — Thu, 11 Feb 2021 16:34:40 +0000

Hello there guys today i will talk about express(framework) and more specific for one of its package which is called rate-limiter.
It is a module that can handle malicious or incificient requests from outcoming/incoming traffic.

What we need for this project?

Node Js
Express Js
Express rate-limiter depedency
Code Editor(I am using Vs-Code)
NPM

So let's see in action what excactly rate-limiter does.

First we need to create our root folder and then let's
create an express server in Node to see how we can deploy that
and what are they options we have.

I am using gitBASH for my basic foldering/sourcing cli activity,you can use one of your choice the commands are simular you can do it manually as well in windows enviroment.

So first i am creating my project folder called NodeLimiter

I will use only one js file which we will call it app.js
So i move toward to the folder path

And inside of the root file we create the app.js

and finally we open the editor(VS)

So we are here and now it is the time to install our depedencies as well to initialize npm

So next we open our terminal again and we type

We press enter several times and if we go back at vs code we have created package.json file

After that we type again to the console.

We press again enterand we have our package-lock.json file

Now let's install express and express rate limiter again in the console we can type the name of the packages that we need with space between them

Nice we are ready to go!

First we need to create our server and give some basic configuration so follow me.

As we finish with theserver, we initiate express and parse it to variable called app , then we define the port that we like to run our server and should look something like this

After our server creation we include the limiter package in that kind of way.

Lets create now three routes and lets use our package to set some restrictions to them,how much request accept and

One root diretory, one about and one about with different request method.
All of them respond with the ok message except home which returns hello world.
Simple?

Now let's create our midlleware that will limitate the requests,as you can see in the picture above i have 2 GET requests and one POST so we will approach two different actions.

Let's create our variable called reqLimiter and we will call the rateLimit method of express packaged that has the following.

And use it like this.

NOTE

What parameters this method takes as object?

windowMs – This is the window size (24 hours in our case) in milliseconds
max – This represents the number of allowed requests per window per user
message – This specifies the response message users get when they have exceed the allowed limit
headers – This specifies whether the appropriate headers should be added to the response showing the enforced limit (X-RateLimit-Limit), current usage (X-RateLimit-Remaining), and time to wait before retrying (Retry-After) when the limit is reached

Better description about those properties you can find here
MoreDetails..

Start your server,type on your terminal :

`node app.js

Exist more properties that you set in the object but those are basic for our example the windowsMs defined for 7 mins, max number of requests are 5,headers are true and the message that returns after five request is parametric for the example.

So now if you open your browser at the local host
LocalHost
You will be able to see the home route and the Hello Word!

Try to refresh 5 times to see what you get.
You can also use POSTMAN for more advanched tests and different Request Methods.
Play with endpoints,reach more values for the limiter by different resource and that's it guys you created your first node express layer for bad requesting.

0auth v.2(Token) #QuickReview

Dimitris Chitas — Fri, 05 Feb 2021 14:32:16 +0000

Good Morning guys. I was trying to find a good,quick and understandable example,to analyse the 0auth model(token).

After a lot of frustrated documentation,i get inspired from a youtube video that's not saying more than you need to understand for the workflow.

Let's start 0auth token is a way to authorize user's access resources which are protected from the resource owner.
They are suggested because they are more confidential than the classic model that we use all this years with the simple authentication wich was authorizing the front-user to access the end-user stuff(database,resources,priviligies,etc)

Lets see an image how that works and after that i will describe you a small example to capture it better in your mindset

This is the basic flow let's understand it a bit.

As a client i am trying to prove who am i to the owner's resources,
if am the right person the server gives me permission and then with that kind of permission(Authorazation Grant) i am sending back to the server a request to create me a token,

the server sends me the token and with that token i am requesting again to access the protected routes/resources
understood?

Lets see now the example that inspired me for this section

I am going vacation somewhere and i rent a hotel.
To recieve a key from the receptionist, i showed to him my ID credentials,as also gave my credit card.
The receptionist gave me back a keycard.Then i took this card and i went toward to my room,i swipped my card and of course i get in my room.
So the keycard is the like an 0auth token, an access token just says wether or not, the bearer of the token is allowed to access the thing they are trying to access,in this case the hotel room.
The door doesn't care who i am.
It doesn't need to know my name or any unique identifier it just needs to know whether or not this card is allowed to acces this door at this time.So to recap the card doesn't care about me but when it needs to give me access to the (resource/"room") 0auth is exactly the same thing.

Take a look of OktaDev video :
0authExample

JS Hoisting

Dimitris Chitas — Sat, 30 Jan 2021 11:36:12 +0000

Hello there guys,

I hope you everybody has a nice weekend,creative and passionate for some coding time.

What the hack is hoisting?
It is a term that i used to found commonly when i started learning JS and it is confuse sometimes, but trust me its a just a luxurines of JS that can be explained real quick.

In simple worlds hoisting, points to variable's declaration and initiation.
You can use a variable before you will declare it.
Let's say that you have this :

\\assign value to variable before declaration

name = 'Dimitris';

const showName = () => {
 console.log(name);
}

\\Declare variable after the value's assignment
let name ;

showName();

To understand the above example,you should have the thought in your mind that hoisting means every declaration is going to the top of the programm even if it is physically sits somewhere else.

So above we have a value that is assigned before the variable declaration.Is working fine, Yes you did it you used hoisting.
Congratulations.!

JS IIFEs

Dimitris Chitas — Tue, 22 Dec 2020 14:39:28 +0000

Hello there guys!

Today we will speak about IIFEs and why sometimes could be handy for your projects.

IIFEs in javascript stands for immediately invoked function expressions,in simple terms just a function that runs directly after of its statement.

Commonly we declare a function on the stack flow and when we need it we call it lets see a quick example.

Let's imagine that we have a function that we would like to show us a console message,simple enough?

It could be something like this

function showMessage() {
console.log('Hello Dev Community)
};

Right?
Right,now if we need to use this function we just say

showMessage();

with ease we solved our problem.
But what happening if we want to initiate that function instantly.

In this condition it is where IIFEs be useful, lets see this kind of syntax for the exact example above.

(function () {
console.log('Hello Dev Community')
}) ();

As you can see,we wrap our function declaration inside parentheses and after the addition of functionality (console.log) , we close them and the curly braces as well, we add one more pair of parentheses out of the function scope that does our job, to invoke this function immediately.

Of course we can set parameters,so we can say

(function (text) {
console.log('Hello'  + text)
}) (' Dev Community');

So that's it guys lets roll,lets code..!
I hope you got an idea for a better usage of IIFEs.

JS 'this' keyword

Dimitris Chitas — Wed, 16 Dec 2020 10:34:00 +0000

Hello there folks and learners.

As you can see nowadays the world of web development and their community, expand rapidly. This phenomenon brings us closer,with
web technologies/programming languages that help us develop
real time web/native applications to make our lives simplier

Touroum - Touroum and i am ready to present you the world of JAVASCRIPT.
Okay, to be honest i will speak for something specific of it, that might
confuse the kick starters as well the intermediate developers even the oldest.The 'this' keyword.
If you already came across in conditions, that 'this' keyword may exist or you are maintenance someone's else code this post is for you.

So back to grill,let's roast our knowledge.!

JavaScript engine works in and out of the browser.
Let's stand in the browser for the beginning and have a better estimate about how this procedure works.

Before we will say where 'this' keyword refers to.
Lets see the procedure.
When we open a tab in a browser no matter which one,javascript engine create's excecution context.
Imagine it is like a wrapper that contains all the main states/functionalities that browser needs to run properly and give us back the data we would like to see with the human eye.

Excecution context its exactly what is sounds. It is a field like this one which i am writing the article and contains couple valuable things.Lets focus to the most important's of them.

So lets say we have a big box(Excecution Context) and inside of it
we have smaller boxes.
By name we can call them
1)Global Object

2)this;(Global.variable)

3)Outer Environment

4)And finally your code.

As you already know or if you don't, JavaScript is object oriented language and everything is created as an object (key/name-value) pairs

So if we say,

const Person = { name: 'Dimitris } ;

We have an object called Person with the

key = name

and

value = Dimitris

, simple?

Yes all the JavaScript is based on this model above.

So the execution's context while is rendering(open new tab) for instance is creating the most important object the Global Object by the side of the browser this is the window object. If you run JavaScript out of browser as like Node.js(Runtime Env.) the Global object is another one but is still the first in the tree hierarchy.

If you open your dev tools in the browser and go to the console and just type window you will see a bunch of information all the object modules and methods that window object contains.

The call stack of JavaScript it has two ways of instances, the private(this is whatever is within a function such as variables the function scope if you prefer and the global scope.
To make it more clear see this two example below to take an idea. Let's say!
--Function(Function Scope)--

function Person(person) {
let person = this.person;
}

--Variable(Global Scope)--

let example = this;

Lets describe what we saw above. When we are using the 'this' keyword
inside in a function scope this refers to the owner of the function in our case is the Person it is exactly the same in methods and in more multi complex statements. Just keep in mind when you see 'this' inside in a function is pointing to the owner.
Above we created a variable with the name of example and we passed the keyword 'this' as a value.
So if you try in your console and type

window == example;

or even without the wrapped variable you can try both

window == this;

you will see that is true.
The Boolean comparison returns true value, because when we are use 'this' outside of the function scope we refer to the global object and in our case is the window object as we are talking about the browsers.

So keep in mind
-This keyword inside of a private scope(Functions/Methods/etc.) is
referring to the owner of it.
-This keyword outside of a private scope(Global Scope) is referring
to the global object(for browsers window object)

Try your Self
Press f12 -> console -> and type ->

this==window;

See the result!
Clear the console and try the next this.person==window
See the result!