teleren/devto huggingface dataset:
terminal code day 1
Published: 2022-03-09 07:46:02

#Hi!

  -  **ls**
```
prints everything in the ary folder
```
  - **pwd**
```
prints the current folder address
~ address $ HOME equal to mazil
```
  - **cd (current directory)**
```
joriy papkani o'zgartiradi, ya'ni sizni boshqa manzilga olib boradi
```
  - **echo**
```cpp
berilgan qo'shtirnoq "" yoki bir tirnoq '' ichidagi tekstni terminalga chop etadi
```
echo 'Lyuboy tekstni chop etadi'
echo "Qo'shitirnoq ham ishlaydi"
echo qoshtirnoqSIZ ham ishlaydi
   - **mkdir**
```
berilgan manzilda papka yaratadi 
``` 
```cpp
10 + 5 = jav
```
Explaining React JSX in depth.
Tags: react, jsx
Published: 2022-03-09 07:36:55


![JSX Explained in depth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ks3pr5irrb407tivnluo.png)
JSX stands for JavaScript Syntax Extension. It is a syntax for writing JavaScript and HTML codes together, or to be exact, writing HTML codes inside JavaScript code.

JSX is a template language that comes with the full power of JavaScript.

## Syntax
```
const element = <h1>Hello World!</h1>;
```

As we can see in the above syntax, both HTML and JS code has been written in a single line. It is neither HTML nor JS code, it is JSX, the compilation of both languages in one code.

It is a great practice to write React codes in JSX, but it is not compulsory. We shall see in this article the difference between the two but first, let us discuss why JSX is preferred over the other method?

## Advantages of JSX

1. Writing React code in JSX makes it easy to read and understand.
2. As discussed above, we can simply write HTML codes inside JS, and it will be called a React code.
3. Rendering of code is faster when compared to regular JavaScript
4. Writing code in JSX not only makes it clean and understandable but can even help with error sporting.

The main problem with JSX was that the browser cannot read its syntax as it has both HTML and JavaScript in it. To solve this, Babel was introduced in 2014 that help the browsers in reading the JSX code by converting it into plain JS.

Sounds interesting, read the full article [here](https://tekolio.com/explaining-react-jsx-in-depth/).
React-Component-Library Tutorial
Tags: javascript, react, storybook
Published: 2022-03-09 07:28:10


![My Tweaked version of Storybooks Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmrq3ioumps20xfjl0bb.png)

I lucked out the other day browsing around on **GitHub** when i discovered a react-components tutorial authored by **[@alexeagleson](https://github.com/alexeagleson)**

**If your looking to get going with Storybook and React than look no further.** 
1. This Tutorial is very detailed and easy to understand.
2. Didn't require me to search Google or Stack Overflow, not even once.
3. Highly informative on multiple fronts and is an excellent introduction into project configuration.
4. Leaves you with your own custom, personal react-component library, packaged and published to GitHub making your custom-components just a simple npm install away..

**You can fork the tutorial over at GitHub**
[/template-react-component-library](https://github.com/alexeagleson/template-react-component-library)

```
git clone https://github.com/alexeagleson/template-react-component-library.git
```                                                     Touches on: 
* React-Js - Jsx           
* Typescript           
* Roll-up                    
* Npm                  
* Jest                      
* Git                 
* Babel
* Storybook                 
* Web pack
* Node-js           

# Other Tutorial by the Author:
## [Running a Local Web Server](https://dev.to/alexeagleson/understanding-the-modern-web-stack-running-a-local-web-server-4d8g)

## [ESLint](https://dev.to/alexeagleson/understanding-the-modern-web-stack-linters-eslint-59pm)

## [Prettier](https://dev.to/alexeagleson/understanding-the-modern-web-stack-prettier-214j)

## [Babel](https://dev.to/alexeagleson/building-a-modern-web-stack-babel-3hfp)

## [React & JSX](https://dev.to/alexeagleson/understanding-the-modern-web-stack-react-with-and-without-jsx-31c74)

## [Webpack: The Basics](https://dev.to/alexeagleson/understanding-the-modern-web-stack-webpack-part-1-2mn1)

## [Webpack: Loaders, Optimizations & Bundle Analysis](https://dev.to/alexeagleson/understanding-the-modern-web-stack-webpack-part-2-49bj)

## [Webpack: DevServer, React & Typescript](https://dev.to/alexeagleson/understanding-the-modern-web-stack-webpack-devserver-react-typescript-4b9b)

Big Thanks @alexeagleson, I enjoyed your Tutorial and look forward to doing the others!
Laravel 9 Rest API Authentication with Passport Example
Tags: laravel
Published: 2022-03-09 07:25:55

This tutorial shows you laravel 9 rest api with passport. you will learn laravel 9 passport api tutorial. This article goes in detailed on laravel 9 rest api authentication. it's a simple example of the laravel 9 passport oauth2 example. You just need to some steps to do laravel 9 passport authentication.

Rest API is must be used when you are working with a mobile application. when your application is preferred for web apps and mobile apps then you must have to create API for your mobile development.

However, Laravel provides an easy way to create API. if you have authentication in your mobile app then you can easily do it using a passport. Laravel 9 Passport provides a way to create auth token for validating users.

If you also want to create a rest API for your mobile application then you can follow this tutorial for how to create rest API step by step with laravel 9. If you are new then don't worry about that I wrote the tutorial step by step.

[Laravel 9 Rest API Authentication with Passport Example](https://www.codecheef.org/article/laravel-9-rest-api-authentication-with-passport-example)
How I automate my changelog with imdone! 
Tags: kanban, markdown, productivity
Published: 2022-03-09 03:27:29

---
title: How I automate my changelog with imdone! 
published: true
description: How I automate my changelog with imdone!
tags: kanban, markdown, productivity
//cover_image: https://direct_url_to_image.jpg
---

I work full time as an advising consultant and software engineer, so I really need to automate a lot my work on [imdone](https://imdone.io). For starters, I use imdone to plan and manage releases of imdone.

Being the first user of an imdone release allows me to try out new functionality to automate my workflow. In imdone 1.26, I introduced the ability to add `.imdone/actions/card.js` and `.imdone/actions/board.js` modules. This allows you to add **board actions** to the main menu in imdone.

![board actions](https://cdn-images-1.medium.com/max/2000/1*OCBOLY5roBrFMyOM1GlOtg.png)

This board action copies each card in the **READY** list as a markdown list, which you can paste into your changelog.

To add this menu option create a `.imdone/actions/board.js` file in your project and add the following.
```javascript
module.exports = function () {
  const project = this.project
  return [
    {
      title: 'Copy changelog',
      action: function () {
        const lists = project.lists.filter((list) => list.name === 'READY')
        const cards = lists[0].tasks.map((task) => {
          const contentArray = task.description.map((line) =>
            line.replace(/^/, '  ')
          )
          contentArray.unshift(
            task.text.replace(/^\#*\s*/, '').replace(/^/, '- ')
          )
          return contentArray
            .filter((line) => !/^\s*- \[x\]/.test(line.trim()))
            .join('\n')
            .replace(/<!--.*-->/gs, '')
            .split('\n')
            .filter((line) => line.trim().length > 0)
            .join('\n')
        })

        project.copyToClipboard(cards.join('\n'), 'Changelog copied')
      },
    },
  ]
}
```
NEW Ionic 6 book
Tags: ionic, javascript, angular, ionicframework
Published: 2022-03-09 07:25:09

Today I’m happy to announce my BRAND NEW book for the free & popular Ionic framework:

## IONIC 6
**Create awesome apps for iOS, Android, Desktop and Web**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ij0o8xm7xezxki5ickc.png)

**COMING 1st MAY 2022**

PRE-ORDER THE EBOOK TODAY AT EARLY BIRD PRICE:
https://www.amazon.com/dp/B09V15X27M?ref_=pe_3052080_276849420

Reader's votes to my Ionic 5 book:

> _Brilliant!_

> _The most complete book about Ionic._ 

> _Great step-by-step instructions and explanations!_
> _Esta muy buena la app!_

Press Reviews:

> _The author manages to quickly familiarize experienced JavaScript and Angular developers with the finenesses of the framework. (c’t)_

BookAuthority rated the book as the best of 12 new Ionic eBooks in 2020 and 2021!
What are your Favourite Tools in React, and why?
Tags: react, discuss, productivity, devops
Published: 2022-03-09 07:23:38

Mine are: 

---

1. **React Router DOM (V6)** - For Page routing and views switching.

1. **React Hooks** - UseState, UseContext, UseRef, forwardRef

1. **React Spring** - For transitions and animations in React

1. **Styled Component** - I enjoy the CSS-in-JS syntax, and styled-components aid to achieve this more.

1. **UUID** - For generating unique ids in iterating arrays or objects

---

## What are yours?
TOP 10 THƯƠNG HIỆU NHƯỢNG QUYỀN TRUNG TÂM TIẾNG ANH TỐT NHẤT VIỆT NAM
Published: 2022-03-09 07:10:09

[Nhượng quyền trung tâm tiếng anh](https://nhuongquyen.wiseenglish.vn/) tại Việt Nam hiện nay rất phổ biến do nhu cầu học tiếng Anh ngày càng cao. Theo thống kê, trung bình 23% doanh nghiệp nhỏ độc lập có thể tồn tại sau 5 năm, và 92% trong số đó mua nhượng quyền. Nói một cách tổng thể, việc kinh doanh ngày càng trở nên phổ biến, và việc kinh doanh Trung tâm tiếng Anh cũng ngày càng trở nên phổ biến, vì vậy nhiều start-up mới đã lựa chọn MUA FRANCHISOR để tạo cho mình một con đường tắt. Trong bài viết dưới đây, chúng ta cùng điểm qua TOP 10 thương hiệu nhượng quyền trung tâm Anh ngữ nổi tiếng và tốt nhất tại Việt Nam. 1. WISE ENGLISH - Brain Thinking (NLP) giảm 80% thời gian học Trung tâm Anh ngữ WISE ENGLISH Đà Nẵng được thành lập năm 2018 với mục đích “giúp các bạn trẻ Việt Nam thay đổi phương pháp học tiếng Anh để nhanh chóng chinh phục ngôn ngữ dựa trên tư duy não bộ (NLP) và ngôn ngữ hiệu quả và tối ưu nhất”, với phương châm "Học Thông minh hơn, không khó hơn." Sử dụng phương pháp học tiếng Anh NLP và Linguistics, thời gian học được rút ngắn 80%. Là đối tác chiến lược của Hội đồng Anh và IDP, điểm IELTS nổi tiếng của Hội đồng Anh. Nơi đây thu hút hàng nghìn học viên đăng ký tham gia các khóa học IELTS và đạt điểm cao (IELTS 6.5, 7.0 trở lên). 1. Tầm nhìn Thiết lập hệ thống trung tâm Anh ngữ trên khắp Việt Nam. Có ít nhất 50 cơ sở trên toàn tỉnh và quốc tế. Giúp ít nhất 1.000.000 học viên thay đổi cách học và học tiếng Anh dễ dàng hơn. 2. Giá trị cốt lõi Thực hiện sứ mệnh giúp đỡ sinh viên và phục vụ tất cả mọi người. Student First (Chất lượng là trên hết, Cải thiện Trải nghiệm của Sinh viên). Quan tâm đến nhân viên (con người là quan trọng nhất). Bảo vệ và phát huy văn hóa doanh nghiệp. Tiến hành kinh doanh với sự trung thực, liêm chính và đạo đức.
Bạn vui lòng đọc toàn bộ bài viết tại đây nhé: [https://wiseenglish.edu.vn/nhuong-quyen-trung-tam-tieng-anh/](https://wiseenglish.edu.vn/nhuong-quyen-trung-tam-tieng-anh/)
Nevertheless, Ishini Coded in 2022
Tags: wecoded
Published: 2022-03-09 07:07:28

**Journey in IT life**

I am an undergraduate in a state university in Sri lanka and I am following an IT related degree. At my first days in university life I didn't have any idea about IT carrier.
Then I tried to enhance my knowledge with the help of different resources. I followed many related courses in online learning platforms such as Udemy,coursera...etc. Step by step it felt that I am growing up. Many youtube tutorials also helped me.
I participated in hackothens to gain some experiences and to polish my skills. I highly believed that participation is more important than winning.
Here are some certificates I got from participating different hackothons.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r31ag9lf18g11b9y38ke.jpg)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xqiw1y7sgz0wamcxn6y.jpg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nruwfkjci4gt4hrxp0th.jpg)

I worked on some projects to polish my skills. At first days it was a big challenge for me and I learned technologies such as react,node,mysql through online resources.  After doing such kind of projects I gained a huge advantage and huge experiences. To recover from errors, I got  the help from github, stackoverflow and other online resources.
So according to  my opinion there are so many paths to develop our IT carrier.
Pair programming: listening is the main skill and responsibility of the Navigator
Published: 2022-03-09 07:01:03

I am reading "Practical Remote Pair Programming: Best practices, tips, and techniques for collaborating productively with distributed development teams" (https://lnkd.in/e9-uCdt4)



Apparently, I was misunderstanding a vital point of pair programming.




"The driver is the one who will have their hands on the keyboard and be writing the code. All the implementation details are at the latitude of the driver. Small decisions such as what type of variable to use, which programming language construct to use, how to name variables, methods, functions, classes, packages, and so on are a part of the driver's role. *The driver usually explains to the navigator what they are doing at all times.* The purpose is dual: to clarify to themselves that they are doing the right thing and to explain to the driver what their intentions are. "



The "usually explains" part is genius. I have assumed that a person I am pair programming with is a seasoned Java dev. However, when I asked him to start talking through his coding steps, I have realized that we have to start again from Java basics. That is totally my mistake as instead of listening to the developer I was literally telling him which buttons to press.



Many thanks to Adrian Bolboacă and Bruno Souza for their ideas on pair programming and sharing.



#pairprogramming #extremeprogramming #workingtogether #workingfromhome
Gists checking Final
Tags: payment
Published: 2022-03-09 06:17:26

# Steps to integrate Razorpay 

* Setting up Razorpay account.

* Storing API keys in settings.py

* Installing Razorpay library.

* Creating order using Razorpay API.

* Creating order at backend and also creating Razorpay order.

	* Show template

	* render to payment.html

	* Get info of call back URL

	* Done with creating an order.

### **Uploading a File**

There are three ways you can upload a file:

- From an `Object` instance

- From a `Bucket` instance

- From the `client`

In each case, you have to provide the `Filename`, which is the path of the file you want to upload. You’ll now explore the three alternatives. Feel free to pick whichever you like most to upload the `first_file_name` to S3.

{% gist https://gist.github.com/Nishant127/ed0e02cfb0ae0da3fb82f17b21252ca4 %}

{% gist https://gist.github.com/Nishant127/c9c41e61f682b650ca16f7f5478b07fb %}


```python
@classmethod
    def replace_hashnode_gist(cls, markdown):
        gist_link_regex = r"\[(https://gist\.github\.com.*?)\]"
        gist_urls = re.findall(gist_link_regex, markdown)
        new_markdown = markdown
        for url in gist_urls:
            new_url = "%" + f"[{url}]"
            gist_pattern_regex = r"\[" + re.escape(url) + r".*?\)"
            gist_to_replace = re.findall(gist_pattern_regex, markdown)[0]
            new_markdown = new_markdown.replace(gist_to_replace, new_url)
        return new_markdown
```

![](https://notionpack-uploads.s3.amazonaws.com/blog_images/tmp/tmp7xrrmwg9.png)

![](https://notionpack-uploads.s3.amazonaws.com/blog_images/tmp/tmp5psc1zqa.png)
7 javascript trick you must know..
Tags: javascript, webdev, react, productivity
Published: 2022-03-09 06:37:52

you can get sum of an array using built in method provided by javascript, resize the array as well
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lnhg4ve55hz4skctyor.jpg)

you can shuffle an array with few lines of code using javascript, and filter the unique values from an array 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hj2wveiitzue5ab38b1i.jpg)

you can actually use comma to store actually values in some variable, and you can swap values using array destructuring concept 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd4z86qj9ulb28l1kn0f.jpg)
Nevertheless, Tharuksi Coded in 2022
Tags: wecoded
Published: 2022-03-09 06:37:41

**How I started in MERN**
I am an undergraduate in IT related degree. In my first days in university, I do not have any idea about MERN. I had to do a project on MERN and it was a big challenge for me. The project is to implement a ecommerce website for dynamic sellers and appointed to implement chat option and signin/signup part. I gain knowledge about MERN technologies using online learning platforms such as Udemy, Coursera etc.. YouTube tutorials and documentations also helped me a lot. Then I started working on mini-projects and it was great advantage for me. With the help of gained knowledge from all these efforts I was able to complete my project. If I face errors during my implementation I referred Stackoverflow, Github and some other blogs to fix them 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ik0yt5tkfn54nha9ear.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yis0saiujio2qg6w11mo.jpg)
Nevertheless, Gift Continues to Thrive in 2022
Tags: wecoded
Published: 2022-03-09 06:04:55

I have written a SheCoded post every year since 2018. I always like to come back to them on this day to see how much progress I've made with my tech career.

{% embed https://dev.to/lauragift21/nevertheless-egwuenu-gift-coded--54ka %}

{% embed https://dev.to/lauragift21/nevertheless-egwuenu-gift-coded-27a4 %}

{% embed https://dev.to/lauragift21/nevertheless-gift-egwuenu-coded-1h52 %}

{% embed https://dev.to/lauragift21/nevertheless-gift-egwuenu-coded-1h52 %}

---

Throughout my career in tech, I have had to proof myself in some way, and all withstanding the imposter syndrome I struggle with when taking on new challenges but I'm still here thriving.

My biggest achievement this year is switching gears and starting a new career in **Developer Relations**.

I now work as a Developer Advocate at a great company and this is just a start to the great things I will do this year.

My goal is to continue to be my best self, share the work I do and advocate for other women like myself in the industry.

> There is no limit to what we, as women, can accomplish. -- Michelle Obama.

Let's keep breaking the bias!
Media Queries and Breakpoints 2022
Tags: webdev, css, productivity, tutorial
Published: 2022-03-09 06:02:29

Responsiveness is an important part of modern web development. 
However in the early days we had less number of devices and had the liberty to write as many media queries as we wanted. 

With time, the screen ratios changed and still keep evolving. 
So how do we create a perfect responsive website or app?

Let's see how!👇🏻

## What are Media Queries?
Media Queries are chunks of CSS code that trigger when the rules provided to it are satisfied. 

These are the queries that help make the app or site responsive.

The rules are called breakpoints.

## What are breakpoints?

```css
p {
  font-size: 2rem;
}

@media (min-width: 62rem){
  p {
    font-size: 1.75rem;
  }
}
```

In the above code, the breakpoint is the condition or expression enclosed within ellipses, **()**.

We can have as much breakpoints as we want. However this is not encouraged and eventually gets really confusing to handle.

## Which breakpoints to use?

On one of the early days when I had just started learning web dev I thought that instead of typing random numbers in the breakpoint expressions, I divided 3-4 sections by looking at the different devices available in the browser's toggle device toolbar. 

Although we have multiple devices, we can simplify them for phones, tabs and bigger screens.


![Devices Viewport Widths](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61xqxkx8gday8zt6w6to.png)

For mobiles we can use 43rem which translates to around 688px, for tabs 62rem translating 992px, and anything above, 82rem or 1312px goes for wider screen.

There's one more question that I asked a lot and probably you might have too which is, "Should I use max-width or min-width"

## Should I use max-width or min-width?
You might have heard a popular term mobile first approach. The code above is written in that style. 
Now, this approach uses `min-width` breakpoints. This technique is also used in popular CSS frameworks like [Bootstrap](https://getbootstrap.com/) and sites like [CSSTricks](https://css-tricks.com/)

So it is in my opinion a subjective thing. You could follow either mobile first approach or desktop first. 

However, I have experienced that while writing in mobile first style the lines of code decreases and most of the time we don't have to write extra code for wider screens.

A cool tip: 
![Tip](https://media.giphy.com/media/j71jgpKmLFOChFnEBi/giphy.gif)

Try to use [relative units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Relative_length_units) while defining or setting any kind of property in CSS.

This helps in giving control back to the user and increase their use experience.

Do you have any thoughts on this? Let me know in the comments👇🏻
How to create super simple Dialogs in HTML
Tags: html, webdev, beginners, javascript
Published: 2022-03-09 06:02:13

Hello everyone and welcome to this short and simple tutorial. 

We all want to add modals in the easiest possible way. While exploring MDN I found the perfect element I hadn't noticed before !!


## Dialog Syntax
Pretty easy if you ask me 0.o
```html
<dialog>
    <!--Dialog Content-->
    <div>Hello World !!!!!!!</div>
</dialog>
```


_Wait but this doesn't do anything ?_ 

Yes this doesn't do anything *yet* 
In the dialog element, the dialog doesn't show until an `open` attribute is present on it. 

This should work --->
```html
<dialog>
    <!--Dialog Content-->
    <div>Hello World !!!!!!!</div>
</dialog>
```

**Output**

![Output of code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktn08cvkt356q4duzwdu.png)


So the open attribute is very important. This element can also be automated with JavaScript. 

```html
<!--HTML section-->
<button onclick="openDialog()">Open Dialog</button>

<dialog id="dialog">
    <div>Wow this is awesome !!!!!</div>
    <button onclick="closeDialog()">Close</button>
</dialog>


<!--JavaScript-->
<script>
    //Opens Dialog
    function openDialog(){
        document.getElementById("dialog").show();
    }

    //Closes Dialog
    function closeDialog(){
        document.getElementById("dialog").close();
    }
</script>
```

In this the function opens the dialog with the show method and closes it with the close method.

It is a very simple method to use !!

Take a look at the pen.

{% codepen https://codepen.io/HTML-Programmer/pen/jOajqjR %}

### Thank You For Reading Through This Short Tutorial

Do remember to like, share and follow me