DEV Community: Jakhongir

What is Serverless Architecture?

Jakhongir — Thu, 24 Aug 2023 21:54:33 +0000

Serverless Architecture:

Serverless is a cloud-native model where developers focus on code while cloud providers handle server management. Apps run in containers that launch on demand, automatically scaling with usage.

Key Points:

Developers write custom logic in containers managed by the provider.
Cloud providers handle scaling, maintenance, and resource allocation.
Apps scale automatically based on events, reducing costs when idle.
Useful for stateless, event-driven tasks with variable demand.
Knative enables serverless on Kubernetes, adding flexibility.

Pros:

Increases developer productivity and reduces costs.
Abstracts away infrastructure management.
Can integrate third-party services for faster development.

Cons:

Less control over server-side logic and vendor lock-in risks.
Serverless architecture simplifies development, boosts efficiency, and reduces operational burdens.

What is RS School?

Jakhongir — Thu, 25 Aug 2022 13:12:26 +0000

Hey everyone, in today's blog i want to talk a little bit about RS School and why i think this is the best online school if you want to become a programmer. Without much talking let's get started!

RS School is free-of-charge and community-based education program conducted by The Rolling Scopes developer community
since 2013.

Everyone can study at RS School, regardless of age, professional employment, or place of residence.

The mentors and trainers of this school are front-end and javascript developers from different companies and countries.

You can learn bleeding-edge technologies in this school such as Frontend, Node.js, Angular, React, Machine Learning, IOS and Android.

Cool thing about this school is that you will have an opportunity to work at one of the best companies in the world Epam after successfully graduating.

I also enrolled in Frontend course of RS School and got tons of useful information about Frontend development. The course is divided into 3 stages. In first stage i learned fundamentals of HTML, CSS, JavaScript, Git and Figma. After first stage, i was assigned a mentor who is a senior developer. He helped me a lot when i had difficulties in completing tasks and i got many valuable tips from him. In second stage i learned Advanced Concepts of Javascript(Classes, Prototypes, Inheritance, Execution Context and etc.), Design patterns, Design principles, Protocols, Testing and Typescript. I'm currently in third stage(learning Angular). So, this course provides everything you need to become a Strong Junior Developer.

That's it for today's blog. If you are interested, check out the course. Thanks for reading)

How to build simple todo list with Vue.js - Part 2

Jakhongir — Mon, 08 Aug 2022 18:06:04 +0000

In the last blog we created simple template and added Vue.js to our to do app. In this blog we will add styling to our app in order to make it less uglier. Let's get started.

At first let's create styles.css file and connect it to our index.html file:

<link rel="stylesheet" href="./styles.css" />

After that add following code to styles.css file:

html {
  box-sizing: border-box;
  height: 100%;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  background-color: #fff;
  overflow-x: hidden;
  background-image: linear-gradient(120deg, #f6d365, #fda085);
}

#app {
  text-align: center;
}

.title {
  margin-top: 50px;
  color: #fff;
}

input {
  margin-top: 100px;
  display: inline-block;
  outline: none;
  font-size: 1.1rem;
  padding: 5px 30px 5px 5px;
  border: none;
  border-radius: 2px;
}

button {
  height: 22px;
  width: 22px;
  outline: none;
  border: none;
  font-size: 1.2rem;
  border-radius: 1px;
  background-color: #ff6f47;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  position: relative;
  top: 1px;
  left: -26px;
}

ul {
  width: 500px;
  margin: 50px auto 0;
  list-style-type: none;
  padding-left: 0;
  text-align: left;
}

li {
  background-color: #fff;
  margin-bottom: 16px;
  border-radius: 4px;
  padding: 10px;
  position: relative;
}

li .remove {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 22px;
  outline: none;
  border: none;
  font-size: 0.8em;
  border-radius: 1px;
  background-color: salmon;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: calc(100% - 28px);
  transform: translateY(-50%);
}

Then we will add title (before input field) to our app to show what kind of list this is:

<h1 class="title">Todo List</h1>

Wouldn't it be nice if we add remove todo functionality so that you can remove it from your todo list after completing. Let's add this:

At first we will add ✖ button to our todo item:

<li v-for="item in todolist" :key="item">
  {{item}} <button @click="remove(item)" 
  class="remove">✖</button>
</li>

And now we should add remove handler which should be fired when remove button clicked:

remove(value) {
  const filteredList = this.todolist.filter((t) => t !== value);
  this.todolist = filteredList;
}

After that the final result should look like this:

That's it for second part. In the next parts we will add checked functionality, filtering and implement localStorage in order to make our app refresh-proof. Thanks for reading. See you in the next blogs!

How to build simple todo list with Vue.js - Part 1

Jakhongir — Thu, 04 Aug 2022 18:35:35 +0000

What is this article about?

This article is about creating simple todo list web app with the help of awesome javascript framework - Vue. Vue.js has gained a huge popularity among developers because of its simplicity and developer-friendly syntax.

Today i will show how to create a todo list app and explain core features of the framework. This article would be especially helpful if you are a newbie to programming or if you have recently started learning Vue.js. Without much talking let's get started!

Setting up environment

There are 2 ways of adding Vue to your project: with build step and without build step. I will use the latter one because it's easier to connect. You can find more information about adding Vue here.
At first we will create vue-todo-list folder and add index.html file inside of that folder. The initial code of index.html should be like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue todo list app</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {};
        },
      }).mount("#app");
    </script>
  </body>
</html>

After that

will be your template where the content of your code will be rendered. The data method inside createApp should always return an object where its properties will be the reactive state of your application.

Let's add html structure of our application:

<div id="app">
  <input type="text" />
  <button>Add</button>
  <br />
  <br />
  <ul></ul>
</div>

We have an input field for entering todo list content, a button for adding entered text and unordered list element for displaying all todo list items.

Now let's add Vue code for making our app interactive:

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        todolist: [],
        todo: "",
      };
    },
    methods: {
      add() {
        this.todo = this.todo.trim();

        if (!this.todo.length) return;

        this.todolist.push(this.todo);
        this.todo = "";
      },
    },
  }).mount("#app");
</script>

todolist inside data attribute is an array where we will store our todo list items and todo is the current value of todo which the user is entering in input field. Inside methods we can write all functionalities when some event is fired.

And now let's bind Vue logic to our template:

<div id="app">
  <input type="text" v-model="todo" />
  <button @click="add">Add</button>
  <br />
  <br />
  <ul>
    <li v-for="item in todolist" :key="item">{{item}}</li>
  </ul>
</div>

Here v-model is a Vue directive where input element and our reactive data is binded. In order to add event listeners to an element we should add @ before the event name. v-for directive is used to render content multiple times based on the source data. key attribute is like an id of the item. The default behavior of v-for will try to patch the elements in-place without moving them. To force it to reorder elements, you should provide an ordering hint with the key special attribute. And for rendering data attributes inside the template, we should wrap them with double curly braces {{}}.

In this article we learned how to add Vue.js to a project, how to render reactive data, how to add event listeners and some basic Vue directives. In the next parts i will add styling and i will show how to work with localStorage in order to keep our data after refreshing.

I hope you enjoyed this article. Thanks for reading.

Should i learn JavaScript?

Jakhongir — Wed, 27 Jul 2022 11:07:24 +0000

Yes