<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: ozersubasi</title>
    <description>The latest articles on DEV Community by ozersubasi (@ozersubasi).</description>
    <link>https://dev.to/ozersubasi</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F189930%2F72e9507e-0a8a-46e9-958e-96fad9031f46.jpeg</url>
      <title>DEV Community: ozersubasi</title>
      <link>https://dev.to/ozersubasi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ozersubasi"/>
    <language>en</language>
    <item>
      <title>What is DOM ?</title>
      <dc:creator>ozersubasi</dc:creator>
      <pubDate>Wed, 27 Apr 2022 09:02:18 +0000</pubDate>
      <link>https://dev.to/ozersubasi/what-is-dom--5o0</link>
      <guid>https://dev.to/ozersubasi/what-is-dom--5o0</guid>
      <description>&lt;p&gt;First of all I’m thinking about to answer to “what is DOM?”. As named Document Object Model is the standardization about the document structures. DOM allows to reach the content, update something on it and also style on document.&lt;/p&gt;

&lt;p&gt;There’re 3 types of DOM&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Core DOM&lt;/li&gt;
&lt;li&gt;XML DOM&lt;/li&gt;
&lt;li&gt;HTML DOM&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;HTML DOM is the standart for HTML. HTML DOM defines objects, properties, methods and events.&lt;/p&gt;

&lt;p&gt;All you need is HTML DOM for the manipulate HTML elements.&lt;br&gt;
HTML DOM can be manipulated with JavaScript or another languages, JavaScript. DOM is not a part of JS, but you can use it.&lt;/p&gt;

&lt;p&gt;All HTML elements are the objects.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# HTML is document element, child of root node.
&amp;lt;html&amp;gt; 
   &amp;lt;head&amp;gt; # HEAD is a child of document element.
      &amp;lt;title&amp;gt; Welcome! &amp;lt;/title&amp;gt; 
   &amp;lt;/head&amp;gt;
   &amp;lt;body&amp;gt; # BODY is a child of document element.
      &amp;lt;p&amp;gt; Hello, programming world! &amp;lt;/p&amp;gt;
   &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;HTML document is formed with tree of nodes to represent by DOM. It allows to manipulate as your needs as add, remove, modify.&lt;/p&gt;

&lt;p&gt;Document is the root node. Root node as a child named HTML. HTML element is named document element, child of the root node.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;html&amp;gt;
   &amp;lt;head&amp;gt;
      &amp;lt;title&amp;gt;Welcome!&amp;lt;/title&amp;gt;
      &amp;lt;script&amp;gt;
         console.log(document.getElementById('hello').innerHTML)
      &amp;lt;/script&amp;gt;
   &amp;lt;/head&amp;gt;
   &amp;lt;body onload="alert('Welcome to my home page!');"&amp;gt;
      &amp;lt;p id="hello"&amp;gt;Hello, programming world!&amp;lt;/p&amp;gt;
   &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can access the elements with different ways, manipulate the document also. For example by above, you can do something like send alert while body loads or you can reach the element with its id. Samples can be vary, but simply we can do anything on it. You can also disable the functionality about document to prevent security issues. Full access may cause critical vulnerabilities like XSS.&lt;/p&gt;

&lt;p&gt;You can create new elements by writing functions. For example, let’s create a simple dropdown list with a small function. Before, we have an empty list given id as my_select. When the window loads, function will run and fill the dropdown list till i reach to 9 .&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;html&amp;gt;
  &amp;lt;head&amp;gt;
    &amp;lt;script&amp;gt;
      window.onload = function() {
        const select_element = document.getElementById("my_select");
        for(let i=0; i&amp;lt; 10; i++){
          let option = document.createElement("option");
          option.text=`Option ${i}`;
          select_element.add(option);
        }
      }
    &amp;lt;/script&amp;gt;
  &amp;lt;/head&amp;gt;
  &amp;lt;body&amp;gt;
    &amp;lt;select id="my_select"&amp;gt;&amp;lt;/select&amp;gt;
  &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I sampled a few You can freely try above codes by copy&amp;amp;paste and start to manipulate DOM. You can do anything; change background, hide elements, create a table, whatevery you want!&lt;/p&gt;

&lt;h2&gt;
  
  
  Node and Element ( Isn’t it same? )
&lt;/h2&gt;

&lt;p&gt;Distinction between node and element is easy but if you don’t know the difference it would be confusing. Any object in the DOM tree is named as node. Node can be built-in or one of the HTML tags like “div”, element is specific type of node.&lt;/p&gt;

&lt;p&gt;Node functionality depends on its subclasses, there is no such thing as Node object, it’s a generic type of element. Main things are Document, Element and DocumentFragment.&lt;/p&gt;

&lt;p&gt;Nodes have relationships with other nodes in DOM tree. With below sample, HTML node is parent of BODY, and BODY is child node of HTML. HEAD and BODY nodes are siblings because of both have same parent as HTML.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;html&amp;gt;
  &amp;lt;head&amp;gt;
  &amp;lt;/head&amp;gt;
  &amp;lt;body&amp;gt;
  &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;getElementById(), querySelector() returns an Element type of object,&lt;br&gt;
getElementsByTagName(), querySelectorAll() returns collection of nodes.&lt;/p&gt;

&lt;p&gt;[SOURCE]&lt;br&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction"&gt;https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.javascripttutorial.net/javascript-dom/"&gt;https://www.javascripttutorial.net/javascript-dom/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>dom</category>
      <category>html</category>
      <category>webdev</category>
    </item>
    <item>
      <title>What is AWS Lambda?</title>
      <dc:creator>ozersubasi</dc:creator>
      <pubDate>Thu, 16 Sep 2021 12:03:23 +0000</pubDate>
      <link>https://dev.to/ozersubasi/what-is-aws-lambda-d1k</link>
      <guid>https://dev.to/ozersubasi/what-is-aws-lambda-d1k</guid>
      <description>&lt;p&gt;Hello, in this article I wanted to talk about what is AWS Lambda and why we should use it;&lt;/p&gt;

&lt;p&gt;AWS Lambda is a serverless computing service to run written code without the need to provision and manage servers.&lt;br&gt;
Thanks to AWS Lambda, &lt;em&gt;our code runs only when needed&lt;/em&gt; and is &lt;em&gt;charged according to the processing time&lt;/em&gt;, &lt;strong&gt;there is no charge when the code is not running&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The need can vary from a few requests per day to thousands of requests per second, in which case AWS Lambda automatically &lt;em&gt;scales&lt;/em&gt; to prevent any loss in performance.&lt;/p&gt;

&lt;p&gt;AWS Lambda, runs the written code on a highly available infrastructure and &lt;em&gt;performs all the operations&lt;/em&gt; such as capacity and automatic scaling, system maintenance and logging. We just need to write our code in one of the languages that AWS Lambda supports. &lt;/p&gt;

&lt;h2&gt;
  
  
  Why we should use AWS Lambda?
&lt;/h2&gt;

&lt;p&gt;AWS Lambda is an ideal service for many standart scenarios. We need to create an infrastructure before starting application development. Hosting a server, performing the necessary installations, coding and running the application; these are mean seperate workloads. Wouldn't be nice to do only code and run the application without dealing with all these? Well, that's the best part of working serverless! We write the code, upload as a ZIP or container image and application is ready to go! Now all we need is trigger this Lambda function. Function will run only whenever triggered and will not charge when it is not running!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--b0N7WHm5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5l5zolwduhyk62ztrk2x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--b0N7WHm5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5l5zolwduhyk62ztrk2x.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Of course, it may be easy to do these steps now, there may be questions in mind such as what is what makes AWS Lambda attractive? But wait! we just ran the application!&lt;br&gt;
In the free version of AWS Lambda, the first 1 million request per month are free, then it is calculated according to milliseconds and the number of times the code is triggered and the cost will only $0.20 per 1 million request.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;In other words, the cost of implementing an idea quickly and testing whether it will work is almost zero!&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In addition, there is a discount up to %17 with plans such as the &lt;em&gt;Compute Savings Plan&lt;/em&gt; on the services you will use on production.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Scalability&lt;/em&gt; is the most important thing that makes AWS Lambda attractive. There is no matter how many instant request your application getting, even if there are hundreds of thousands of instant request, AWS Lambda scales through the need and you don't need to worry about inaccessibility and continue without any problems. The good side of that is no need to spend lots of money  for the server and don't need to consider the risk of inaccessibility if the application suddenly get thousands of instant requests or more.&lt;/p&gt;

&lt;p&gt;The run time of the code can be also optimized by select appropriate memory size for the function to be executed. In this way, function will perform consistently at the appropriate scale. The following workflow example demonstrates the operation steps of weather application;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8F0fMbIs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzzmatimig7zzqypql9i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8F0fMbIs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzzmatimig7zzqypql9i.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;User, clicks the link to find out the weather conditions in their area.&lt;br&gt;
Amazon API Gateway makes API call to the related endpoint. Lambda is triggered here.&lt;br&gt;
Lambda function gets weather condition information of the region requested by the user from DynamoDB and returns to the user.&lt;br&gt;
Besides, there are many scenarios where AWS Lambda used on AWS.Here you can see the Todo application source code folders as an example. AWS Cognito used as the user authentication method, and you can see that each required function for Todo App is foldered separately in the below image.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--c_79-5T9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96x4zl37nsjjbc4zjyaq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--c_79-5T9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96x4zl37nsjjbc4zjyaq.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Source:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://aws.amazon.com/tr/lambda/"&gt;https://aws.amazon.com/tr/lambda/&lt;/a&gt;  &lt;/p&gt;

</description>
      <category>aws</category>
      <category>serverless</category>
      <category>awslambda</category>
    </item>
    <item>
      <title>What is JavaScript? How did It Come Out?</title>
      <dc:creator>ozersubasi</dc:creator>
      <pubDate>Sat, 11 Sep 2021 17:54:50 +0000</pubDate>
      <link>https://dev.to/ozersubasi/what-is-javascript-how-did-it-come-out-3h72</link>
      <guid>https://dev.to/ozersubasi/what-is-javascript-how-did-it-come-out-3h72</guid>
      <description>&lt;p&gt;JavaScript is a dynamic programming language widely used in web browsers. Client-side scripts written in JS manage the behavior of websites such as browser-user interactions and especially asynchronous interaction, displaying and changing content. In addition to the client side, it is also widely used on the server side, thanks to environments such as NodeJS.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;A programming language like a Swiss army knife&lt;/em&gt; that allows you to develop with ReactJS, AngularJS, VueJS on the frontend, NodeJS on the backend, React-Native as cross-platform on the mobile side&lt;/p&gt;

&lt;p&gt;JavaScript was written by Brendan Eich in May 1995 in just 10 days, yes 10 days. Of course, the whole language did not become like this in 10 days. Eich wrote this programming language for Netscape Navigator, and it was called Mocha, then changed to LiveScript in September 1995.&lt;br&gt;
So why did LiveScript suddenly become JavaScript? Confusing some people even now;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Of course it has nothing to do with the Java language, so JavaScript is not a scripted version of Java :)&lt;/strong&gt;&lt;br&gt;
It was used as a “marketing tactic” that would increase its popularity because it evoked the Java language, which was very popular at that time, and this naming has survived to the present day.&lt;/p&gt;

&lt;p&gt;In 1996, Microsoft announced VBScript languages with JScript and VisualBasic infrastructure, which are similar to JavaScript, and then provided CSS support for JScript, but it did not work correct. This is how Netscape and Internet Explorer’s browser war started, at that time logos such as the one below were featured at the bottom of the websites.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--t7qOKQsA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3nrxngthex0xcsaivd9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--t7qOKQsA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3nrxngthex0xcsaivd9.png" alt="image"&gt;&lt;/a&gt;&lt;br&gt;
 &lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zhjvGu6w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucbqxzsw9nnk7jy397ub.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zhjvGu6w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucbqxzsw9nnk7jy397ub.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In November 1996, Netscape applied to Ecma International for the standardization of JavaScript and was named ECMAScript after its acceptance. Afterwards, it continued to grow by getting continuous updates. Currently, the last version released continues to evolve as ES2021 or ES12.&lt;/p&gt;

&lt;p&gt;*Source; *&lt;br&gt;
&lt;a href="https://tr.wikipedia.org/wiki/JavaScript#Standartla%C5%9Fma"&gt;https://tr.wikipedia.org/wiki/JavaScript#Standartla%C5%9Fma&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
