The task of the Promise is to handle such asynchronous operations. Now we are running the operation on a remote server, but until data arrives we cannot say that operation will not succeed or fail. And basically, the promise works to handle these. In most cases, we do not have to create our own promises. We handle Just Promise. The basic structure of the promise is that the library we work with will be implemented from the system. We have to handle just Promise. But I’ll also look at how we can create our own promise here.

    let bb = new Promise((resolve, reject) => {
      let a = 1 + 1;
      if(a == 2){
        resolve('Success man!')
      }else{
        reject('Faild man!')
      }
    })

    bb.then((message) => {
      console.log('Get', message)
    }).catch((message) =>{
      console.log('Get', message)
    })

Promise takes two arguments, resolveand reject.

Handle Promise:

Now we will handle whether the Promise has succeeded or failed. In that case, if the Promise is successful then we can chain our bb function and .then()give a callback function here, which resolvewill run if the Promise is successful or otherwise:

    bb.then((message) => {
      console.log('Get', message)
    }).catch((message) =>{
      console.log('Get', message)
    })

Callback

After that trueargument resolve, our callback will be triggered by the promise :

  bb.then((message) => {
      console.log('Get', message)
    })

And if the promise is rejected, then we need .catch()to handle it in another chain operation with a callback function. Now we do not know whether the operation will succeed or fail. In that case, we .then()have to .catch()keep both. .catch()If for any reason we will run reject:

.catch((message) =>{
      console.log('Get', message)
    })

The arguments falsegiven here rejectwill be from the promise . And so  catchthe callback will run inside the block after the operation is finished :

  let bb = new Promise((resolve, reject) => {
      let a = 1 + 2;
      if(a == 2){
        resolve('Success man!')
      }else{
        reject('Faild man!')
      }
    })

    bb.then((message) => {
      console.log('Get', message)
    }).catch((message) =>{
      console.log('Get', message)
    })

The bbfunction that we first returned the Promise here, the creation of the Promise, in most cases, does not require us to write. Rather, the system we use to exchange data, or use the library, is coded as a part of how to do resolveor not do rejectit. In most cases, the promise of our return .then(), and .catch()with the handle. The callbacks that are used inside, in most cases, the data we want from our remote server comes as arguments. We can access those arguments from within a callback.

Handling Multiple Promises: At times, we may have to handle multiple promos. For example, we have two premises:

      const a1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          if(true){
            resolve('a 1 resolved');
          }else{
            reject('a 1 error');
          }
        }, 3000)
      })

We can also directly create promises like this. Below I made another Promise:

      const a2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            if(true) {
              resolve('a 2 Resolved');
            } else {
              reject('a 2 Error');
            }
        }, 3000)
      })

Then .then()I can make a callback call which will run soon after these two promises are completed. And the data from these promos will be arrayed in this callback function:

Promise.all([a1, a2]).then((promiseArr) => {console.log(promiseArr)}) 

The post Promise in JavaScript first appeared on Bipon's Diary.

<div class="login-page">
  <div class="form">
    <form class="register-form">
      <input type="text" placeholder="user name"/>
      <input type="text" placeholder="password"/>
      <input type="text" placeholder="email id"/>
      <button>Create</button>
      <p class="message">Already Registered? <a href="#">Login</a></p>
    </form>
    
    <form class="login-form">
      <input type="text" placeholder="user name"/>
      <input type="password" placeholder="password"/>
      <button>Login</button>
      <p class="message">Not a Registered? <a href="#">Register</a></p>
    </form>
  </div>
</div>

CSS

body{
  background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6), url(https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/reference_guide/cats_and_excessive_meowing_ref_guide/1800x1200_cats_and_excessive_meowing_ref_guide.jpg));
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.login-page{
  width: 360px;
  padding: 10% 0 0;
  margin: auto;
}
.form{
  position: relative;
  z-index: 1;
  background: rgba(7, 40, 195, 0.8);
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
}
.form input{
  outline: 1;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button{
  text-transform: uppercase;
  outline: 0;
  background: #4caf50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.form button:hover, .form button:active{
  background: #43a047;
}
.form .message{
  margin: 0 0 15px;
  color: aliceblue;
  font-size: 12px;
}
.form .message a{
  text-decoration: none;
  color: #4caf50;
}
.form .register-form{
  display: none;
}

jQuery

$('.message a').click(function(){
  $('form').animate({height: "toggle", opacity: "toggle"}, "slow")
})

Source code

The post Create login and registration form using HTML CSS and JavaScript first appeared on Bipon's Diary.

The post The Past, Present and Future of CSS-in-JS first appeared on Bipon's Diary.

এই পোস্টে, আমি ব্যাখ্যা করছি যে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কী এবং ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য আপনাকে তিনটিই কেন দরকার।

আমি কিছু ওয়েব ডেভলপমেন্ট ফোরামে স্ক্রোল করার সময় আমি লক্ষ্য করেছি যে একের অধিক লোকের নিম্নলিখিত প্রশ্ন রয়েছে:

ওয়েব অ্যাপ্লিকেশন তৈরি করতে আমাকে কেন তিনটি ভাষা- এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট– শিখতে হবে?

প্রতিটি ভাষা তার নিজস্ব ভূমিকা পালন করে এবং সেখানে তার নিজস্ব নির্দিষ্ট ব্যবহারের ক্ষেত্রে রয়েছে। আমি যথাসম্ভব এর উত্তর দেওয়ার চেষ্টা করব এবং প্রতিটি ভাষা কী করে তা ব্যাখ্যা করব । 

আমি প্রতিটি ভাষার জন্য কীভাবে কোড লিখব সে সম্পর্কে আমি বিশদে যাব না, কারণ ওয়েব ডেভেলপারদের কোনও ওয়েবসাইট প্রোগ্রাম করার জন্য কেন অনেক ভাষাগুলি জানতে হবে তা কেবল এই পোস্টে তা বোঝার জন্য।

এইচটিএমএল

এইচটিএমএল (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজের জন্য সংক্ষিপ্ত) একটি ওয়েবসাইটের কঙ্কাল এবং এটি ওয়েব ব্রাউজারে লোড হওয়া প্রথম জিনিস।

এখানে ডেভেলপার ওয়েবসাইটটিতে কী এলিমেন্ট থাকতে হবে তা নির্ধারণ করে: বোতাম, চিত্র, পাঠ্য, লিঙ্কগুলি, ইত্যাদি । 

এখানে একটি সাধারণ এইচটিএমএল সাইটের উদাহরণ রয়েছে:

এটি কেবল ডিফাইন হবে একটি টাইটেল (ব্রাউজার ট্যাবে প্রদর্শিত হবে), একটি বড় টেক্সট, একটি সামান্য টেক্সট এবং একটি বাটন ।

এখন, এই ওয়েবসাইটটি দেখতে বেশ কুৎসিত দেখাচ্ছে। ব্যবহৃত ফন্টগুলি, ফন্টের আকার এবং রঙগুলি সমস্তই স্বয়ংক্রিয়ভাবে আপনার ওয়েব ব্রাউজারের সরবরাহ করা হয়।

সিএসএস

কিছু ডিজাইন উপরে কুরুচিপূর্ণ সাইটটি দেওয়ার জন্য, আমাদের এইচটিএমএল সাইটে সিএসএস (ক্যাসকেডিং স্টাইল শীট) কোড যুক্ত করা দরকার।

এটি একই HTML ফাইলটিতে করা যেতে পারে বা .css ফাইল থেকে লোড করা যায়। তবে এইচটিএমএলের অভ্যন্তরে সিএসএস লেখাই ভাল অনুশীলন নয়। এর জন্য আপনার সর্বদা একটি আলাদা ফাইল (বা আরও ফাইল) থাকা উচিত।

প্রতিটি সংজ্ঞা আমাদের এইচটিএমএল সাইট থেকে এলিমেন্টগুলির একটি গ্রুপের জন্য প্রযোজ্য। বা প্রথম ব্লকের উদাহরণ হিসাবে, আমরা বড় টাইটেল কেমন দেখাচ্ছে তা পরিবর্তন করি। আমরা এটিকে অন্য একটি রঙ এবং ফন্ট দেব, এটিকে আরও বড় করব, এটিকে একটি আন্ডারলাইন দেব এবং এটি স্ক্রিনকে কেন্দ্র করে তৈরি করব।

সাইটটি এখন আরও ভাল দেখাচ্ছে। তবে এমন শত শত সিএসএস বৈশিষ্ট্য রয়েছে যা সমস্ত বিভিন্ন HTML ট্যাগের জন্য সেট করা যায়। এটি এই ভাষায় আয়ত্ত করা কঠিন করে তোলে এবং সকলেই এতে ভাল নন। তবে বেসিকগুলি শিখতে এবং সামান্য অনুশীলনের মাধ্যমে শালীন কিছু পাওয়া সহজ।

এছাড়াও, অনেকগুলি সিএসএস লাইব্রেরি রয়েছে যা আপনাকে খুব বেশি সিএসএস কোড না জেনে আপনার সাইটকে সুন্দর করে স্টাইল করার ক্ষমতা দেয়। প্রায়শই ব্যবহৃত একটি হ’ল বুটস্ট্র্যাপ। আপনি সুন্দর ফর্ম, বোতাম, পাঠ্য এবং অন্যান্য এলিমেন্ট তৈরি করতে তাদের কোড অ্যাক্সেস করতে পারেন।

জাভাস্ক্রিপ্ট

আমাদের সাইটে এখন একটি কাঠামো এবং স্টাইলিং রয়েছে তবে ফাঙ্কশনালিটি অনুপস্থিত। উদাহরণস্বরূপ, অন্য কোনও ওয়েবসাইট থেকে ডেটা লোড করার সময় কোনও বোতামে ক্লিক করার সময়, ওয়েবসাইটটিতে টেক্সট পরিবর্তন করার সময়, আপনি জাভাস্ক্রিপ্টের সাহায্যে কল্পনাও করতে পারেন । 

এটি একটি আসল প্রোগ্রামিং ল্যাঙ্গুয়েজ যেখানে আপনার ফাংশন, ভেরিয়েবল, অ্যারে এবং অন্যান্য অনেক প্রোগ্রামিং সরঞ্জাম রয়েছে আপনার সাইটের মধ্যে “লজিক” তৈরি করতে।

আপনি কোনও ধরণের ফাঙ্কশনালিটি যুক্ত করতে চাইলে আপনি জাভাস্ক্রিপ্ট ব্যবহার করেন।

এই কোড স্নিপেট শুধুমাত্র একটি খুব সাধারণ ফাংশন যা শিরোনামের শিরোনামটিকে অন্য টেক্সটে পরিবর্তিত করে।

জাভাস্ক্রিপ্ট শেখা আপনার ওয়েব ডেভেলপমেন্টর বেশিরভাগ সময় নেয় কারণ এটি জানার অনেক কিছুই রয়েছে এবং আপনি এটির সাথে করতে পারেন এমন কার্যত সীমাহীন সম্ভাবনা রয়েছে।

এজন্য সাম্প্রতিক বছরগুলিতে এটি এত ব্যাপক জনপ্রিয়। এমন আরও কয়েক মিলিয়ন জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা অন্যরা তৈরি করেছে যে আপনি নিজের প্রজেক্ট ব্যবহার করতে পারেন।

এটিকে আরও জটিল করে তুলতে: আপনি কেবল ব্রাউজারে নয়, সার্ভার-সাইড কোড (বা আপনার কম্পিউটারে স্থানীয়ভাবে চলমান কোড) লিখতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। এটিকে নোড.জেএস বলা হয় । 

আপনি সম্ভবত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যেমন ভিউ, রিএ্যাক্ট, অ্যাঙ্গুলার সম্পর্কে শুনেছেন যা এখনই খুব বেশি চাহিদা রয়েছে ।  এই লাইব্রেরিগুলি যা আপনাকে অ্যাপ্লিকেশনগুলি দ্রুত এবং সহজতর করতে সহায়তা করে। তবে আমি কোনও ফ্রেমওয়ার্ক শিখতে শুরু করার পরামর্শ দেই না। প্রথমে বেসিকগুলি জানার জন্য সময় দেওয়া উচিত।

তিনটি অংশই এক সাথে কাজ করে

আপনার তিনটি ভাষা জানা দরকার কারণ তারা এক সাথে কাজ করে। এইচটিএমএলে আপনি ক্লাস বা আইডি রয়েছে এমন এলিমেন্টগুলি ডিফাইন করতে পারেন, যা আপনি সিএসএস বা জাভাস্ক্রিপ্ট দিয়ে ম্যানিপুলেট করতে পারেন।

আপনি CSS এর সাহায্যে জাভাস্ক্রিপ্ট থেকে স্টাইল পরিবর্তন করতে পারেন। ওয়েবসাইটটি জাভাস্ক্রিপ্ট থেকে চলাকালীন আপনি সিএসএস ক্লাস পরিবর্তন করতে পারেন।

সারাংশ

আপনি যদি ওয়েব ডেভেলপার হয়ে উঠতে গুরুতর হন: হ্যাঁ, আপনাকে এই তিনটি ভাষা এবং আরও শিখতে হবে। আপনি যদি কোনও সার্ভারে চলমান কোডটি লিখতে চান তবে সম্ভবত এটির জন্য আপনার একটি বা অন্য ভাষা শেখার প্রয়োজন হবে (রুবি, পিএইচপি, পাইথন,…)

সংক্ষেপ:

এইচটিএমএল হ’ল কঙ্কাল

সিএসএস হ’ল এটি সুন্দর করে তোলা (কঙ্কালের উপর কাপড় এবং মেকআপ করা )

জাভাস্ক্রিপ্ট ফাঙ্কশনালিটি যুক্ত করে (কঙ্কালের সাথে মুভমেন্ট যোগ করা )

The post নতুনদের জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট first appeared on Bipon's Diary.

সিএসএস কী, কীভাবে সিএসএস লিখতে হয় এবং কীভাবে সেগুলি এইচটিএমএলতে যুক্ত করা যায় সে সম্পর্কে আমাদের নজর থাকবে।

সিএসএস কি?

সিএসএস (ক্যাসকেডিং স্টাইল শীট) ওয়েবপেজগুলি স্টাইল করার জন্য একটি ভাষা। আমরা CSS ব্যবহার করে কোনও ওয়েবপেজের ডিজাইন এবং লেআউট পরিবর্তন করতে পারি। ডেস্কটপ, ট্যাবলেট এবং মোবাইল ডিভাইসগুলির মতো বিভিন্ন স্ক্রিনে কোনও ওয়েবসাইটের ভিউ কীভাবে পরিবর্তিত হয় তা আমরাও নির্ধারণ করতে পারি।

সিএসএস কোনও প্রোগ্রামিং ভাষা নয়, সি ++ বা জাভাস্ক্রিপ্টের মতো। তবে সিএসএস যতটা সহজ মনে হচ্ছে তত সহজ নয়। আপনি যদি না বুঝে এটি ব্যবহার করার চেষ্টা করেন তবে ওয়েব ডেভেলপমেন্টে আপনার অসুবিধা হবে। সুতরাং, প্রোগ্রামিংয়ের ভাষা শেখার মতো সিএসএস শেখাও গুরুত্বপূর্ণ।

আসুন একটি ওয়েবসাইটে সিএসএসের ইফেক্ট প্রকাশ করার জন্য একটি উদাহরণ দিয়ে চালিয়ে দেওয়া যাক। নীচে আপনি দেখতে পাচ্ছেন যে ফেসবুকটি যথারীতি দেখতে (সিএসএস সহ):

এবং আপনি এখানে সিএসএস ছাড়াই ফেসবুকের চেহারা দেখছেন:

আমরা দেখতে পাচ্ছি, সিএসএস একটি ওয়েবসাইটের ভিজ্যুয়াল উপস্থাপনাটিকে আরও ভাল করে তোলে।

সিএসএস সিনটেক্স:

আসুন আমাদের প্রথম সিএসএস কোড লিখি। উদাহরণস্বরূপ, আমি <h1> ট্যাগটির রঙ পরিবর্তন করতে চাই।

I’m a Header

প্রথমত, আমাদের এইচটিএমএল এলিমেন্ট কীভাবে সন্ধান করতে হয় তা সিএসএসকে বলতে হবে । আমরা এটি “সিলেক্টর” নামে একটি বৈশিষ্ট্য দিয়ে করতে পারি । সিএসএসে একটি সিলেক্টর তাদের ট্যাগের নাম, শ্রেণীর নাম, আইডি এবং আরও অনেক কিছু দ্বারা এইচটিএমএল এলিমেন্টগুলি অনুসন্ধান করতে ব্যবহৃত হয়।

সুতরাং নীচে আমি এইচটিএমএল এলিমেন্টের জন্য একটি সিলেক্টর এর ট্যাগ নামের <h1> এর উপর ভিত্তি করে সংজ্ঞায়িত করেছি:

h1 { }  // An example of a selector 

এর পরে, আমরা সিএসএস এর নিয়মগুলি ঘোষণা করতে পারি, সিলেক্টর বন্ধনীগুলির মধ্যে, প্রত্যেকটি একটি অর্ধ-কোলন দিয়ে শেষ হয়:

h1 {   // CSS rules between brackets
  color: red;
} 

সুতরাং সিলেক্টর  (h1) এর উপর ভিত্তি করে সিএসএস এখন বুঝতে পারে নতুন রুলস কোথায় প্রয়োগ করতে হবে:

সিএসএস সিলেক্টর সংজ্ঞায়িত করার বিভিন্ন উপায় রয়েছে, নীচে আপনি সিলেক্টর এর কয়েকটি  উদাহরণ দেখতে পাবেন:

ক্লাস সিলেক্টর(Class Selector) : তাদের ক্লাসের বৈশিষ্ট্য অনুসারে এইচটিএমএল এলিমেন্টগুলি সন্ধান করে

আইডি সিলেক্টর(Id Selector): তাদের নির্দিষ্ট আইডির সাহায্যে এলিমেন্টগুলি সন্ধান করে

এলিমেন্ট সিলেক্টর (Element Selector): তাদের ট্যাগ নাম দ্বারা এলিমেন্টগুলি সন্ধান করে

সিএসএস সিলেক্টর সম্পর্কে আরও জানতে আপনি এখানে পরীক্ষা করতে পারেন।

এইচটিএমএলে সিএসএস কীভাবে যুক্ত করবেন?

সিলেক্টর  কেন এবং কীভাবে ডিফাইন করতে হবে এবং কিছু সিএসএস কোড লিখতে হবে তা এখন আপনি শিখে গেছেন।

আমরা এইচটিএমএল ফাইলে 3 টি বিভিন্ন উপায়ে সিএসএস যুক্ত করতে পারি:

১. এক্সটার্নাল সিএসএস ফাইল:

পৃথক ফাইলে সিএসএস কোড রাখা সেরা অনুশীলন। বাস্তব প্রোগ্রামিং জগতে, আমাদের এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কোড পৃথক ফাইলে রাখা এবং পরে প্রয়োজনের সাথে সেগুলি ইম্পোর্ট করা দরকার।

আমরা .css এর এক্সটেনশান সহ একটি পৃথক সিএসএস ফাইল তৈরি করতে এবং এটি HTML এ অন্তর্ভুক্ত করতে পারি।

উদাহরণস্বরূপ, আমরা এটির মতো একটি সিএসএস ফাইল তৈরি করতে পারি: index.css

ইনডেক্স কোডের (index.css) ভিতরে, আমরা আমাদের সিএসএস কোড লিখতে পারি:

p {  
  color: red;
}

তারপরে আমরা নীচের মতো <লিঙ্ক> ট্যাগ দিয়ে সূচি.এসএসটিএমএল ইম্পোর্ট করতে পারি:

সুতরাং এখন এইচটিএমএল ফাইলের সিএসএস কোড রয়েছে এবং পরিবর্তনগুলি এলিমেন্টগুলির জন্য প্রযোজ্য হবে।

2. <স্টাইল> ট্যাগ সহ ইন্টারনাল সিএসএস:

আর একটি উপায় যেখানে আপনি সিএসএস কোড লিখতে পারেন তা HTML এ <স্টাইল> ট্যাগের মধ্যে। এটি সিএসএস কোডটি পৃথক ফাইলের চেয়ে সরাসরি এইচটিএমএল ফাইলের অভ্যন্তরে রাখবে।

৩. ইনলাইন স্টাইল:

তৃতীয় উপায়টি হল সিএসএস রুলস ডাইরেক্টলি কোনও এইচটিএমএল এলিমেন্টের অভ্যন্তরে লিখা। এই পদ্ধতিতে আমরা সিএসএসের নিয়মগুলি সরাসরি ট্যাগের মধ্যেই সংজ্ঞায়িত করি এবং এর জন্য কোনও ক্লাস তৈরি করার দরকার নেই।

<p style=”color: blue; font-size: 22px;”> I’m a Simple man </p>

সিএসএস ওয়েব ডেভলপমেন্টের একটি প্রয়োজনীয় অংশ। এই আর্টিকেলে, আমি সিএসএসের খুব প্রাথমিক ব্যবহার এবং সিনটেক্স ব্যাখ্যা করার চেষ্টা করেছি। আপনার যদি কোনও প্রশ্ন থাকে তবে নীচে মন্তব্য বিভাগে জিজ্ঞাসা করতে দ্বিধা করবেন না।

সিএসএসের বিশ্বে এক্সপ্লোর করার জন্য আরও অনেকগুলি বিধি এবং বৈশিষ্ট্য রয়েছে। আমি আমার নিম্নলিখিত আর্টিকেলে সেগুলি কভার করব।

আপনাকে অনেক ধন্যবাদ আর্টিকেলটি পড়ার জন্য । ভাল থাকবেন এবং পরিবারকে সময় দিবেন ।

The post নতুনদের জন্য সিএসএস: সিএসএস কী এবং ওয়েব ডেভেলপমেন্টে এটি কীভাবে ব্যবহার করতে হয়? first appeared on Bipon's Diary.