teleren/devto huggingface dataset:
WSL2 Systemd çalıştırma
Tags: wsl2, systemd, windows11
Published: 2022-06-26 10:12:22

> **ÖNEMLİ BİLGİ: Bu resmi bir yöntem değildir ve sorumluluk almıyorum.**

**Windows 11 ile denenmiştir. Windows 10 için durum bilinmemekte.**

---

> NOT: WSLg ve WSL2 gelen güncellemeler bazen wsl-distrod ile düzgün çalışmıyabilir.
Örnek olarak bugun 26.06.2022 en son çıkan WSL preview sürümünde WSLg değişiklik olduğudan şuan WSLg düzgün çalışmıyor ama [değişiklik öneren](https://github.com/nullpo-head/wsl-distrod/pull/57#issue-1275662356) olmuş ve bu şuan başarılı çalışıyor yakında wsl-distrod da güncelleme yayınlar.

---

nullpo-head nickli bir geliştiricinin [wsl-distrod](https://github.com/nullpo-head/wsl-distrod) adlı projesine göz atacağız.

İlk önce README kısmına göz atalım. Biz mevcut dağıtımımıza yüklemek istediğimiz için [Şu kısma göz atacağız](https://github.com/nullpo-head/wsl-distrod#option-2-make-your-current-distro-run-systemd) 

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

Ben bu rehberde AlmaLinux yükliceğim systemd

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

yukarda resimde gördüğünüz gibi şuan top komut yaptığımda herhangi bir systemd çalışmıyor.

aşağıdaki komutları sırasıyla yazalım.

```
curl -L -O "https://raw.githubusercontent.com/nullpo-head/wsl-distrod/main/install.sh"
```

```
chmod +x install.sh
```

```
sudo ./install.sh install
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ins953q3vapr4ztmcljl.png)
 
daha sonra işlem başarılı sonuçlandıktan("Installation is complete!" yazısını gördükten) sonra aşağıdaki komutu yazalım.

```
sudo /opt/distrod/bin/distrod enable
```

daha sonra powershell veya cmd açarak aşağıdaki komutu yazalım.

```
wsl --shutdown
```

ve tekrar dağıtımımızı açalım.

`top` komutunu kullanalım

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

gördüğünüz gibi artık çalışmakta. İsterseniz birde `systemctl status` yazıp deniyelim.

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

gördüğünüz gibi artık sistemimizde systemd mevcut.
Misc notes on Github Codespaces
Tags: nix, docker, github, codespaces
Published: 2022-06-26 09:59:00

Just some quick notes since I have spent few hours trying to get nix working on Codespaces and get our project running.

I have shared my Dockerfile in this issue at Nix's Github - https://github.com/NixOS/nix/issues/6680

`docker-compose` is working fine. We can customize our workspace using Dockerfile. Have to use images provided by Github, using our own image doesn't work. I guess we have to do some more works as stated in this [post](/xpirit/customizing-codespaces-4mnl) - have Dockerfile.base as well.

Workspace is stopped after the idle timeout (30mins) but all our work on disk is preserved. So uncommitted changes is still there when we come back, just like working on local computer.

Everytime we changed stuff in `.devcontainer` we have to rebuild the container. For quickly testing your Dockerfile, it's better to just run `docker build` in the terminal and if it build cleanly then we rebuild.

```
cd .devcontainer
docker build .
```

A failure in rebuild will drop us into recovery container so we can fix our Dockerfile but tools are limited here.


https://github.com/microsoft/vscode-dev-containers/tree/main/containers/codespaces-linux/.devcontainer

Heroku cli login issue - https://github.com/heroku/cli/issues/1914 - ip address mismatch. We have same issue when working with remote vm, a workaround is to tunnel http traffic from our browser to the vm, either with vpn or simply ssh tunnel (we use sshuttle).
- Workaround 1 - define env var HEROKU_API_KEY - the downside is that your action would not be under your username but the username of that api key owner
- Workaround 2 - Copy the credentials from your local machine - it's stored in `$HOME/.netrc` file

https://devcenter.heroku.com/articles/authentication

VSCode editor doesn't enable word wrap by default. Add this to devcontainer.json:-

```
"editor.wordWrap": "wordWrapColumn",
"editor.wrappingIndent": "same",
"editor.wordWrapColumn": 80
```
List of limitations - https://code.visualstudio.com/docs/remote/codespaces
Как пользоваться cookie в NestJS и локальном фронте
Tags: javascript, react, axios, nestjs
Published: 2022-06-26 09:52:00

Пишу статьи для себя, что бы не забывать все, но может кому то тоже поможет.
Я написал backend на NestJS, все протестил однако когда решил писать frontend появились сразу проблемы, я не мог сохранить cookie в браузер и потом их прочитать с backend-а. В cookie я хранил jwt-токен.

---
Для начала нужно установить cookie-parser.

```
npm i cookie-parser @types/cookie-parser
```
После заходим в наш main.ts и изменяем его.

```
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as cookieParser from 'cookie-parser';


async function bootstrap() {
  const PORT = 3001;
  const app = await NestFactory.create(AppModule);

  app.use(cookieParser()); // Подключаем

  await app.listen(PORT, () => console.log(`http://localhost:${PORT}/`));
}
bootstrap();
```
Используем Response в Контроллере

```
@Post('login')
    login(@Res({ passthrough: true }) res: Response) {
        const jwt = "blablawdsfblabla"
        res.cookie('jwt', jwt, { httpOnly: true, secure: false });
        return {
            message: 'success'
        };
    }
```
passthrough - При использование декоратора @Res вы теряете совместимость с функциями NestJS, поэтому чтобы их исправить вы добавляете passthrough: true
httpOnly - запрет на доступ к Cookie из JavaScript-а
secure - для доступа по http, т.е. отключаем защиту (Если поставить тру, то выйдет вот такая ошибка: POST http://localhost:3001/auth/login net::ERR_CONNECTION_REFUSED)

---
На frontend-е вам нужно будет использовать withCredentials

```
axios.post("http://localhost:3001/auth/login", {
  email: "nurislam@mail.com",
  password: "12345678"
}, {withCredentials: true})
```
---
Все, теперь у вас сохраняются куки в браузере, надеюсь помог кому то еще кроме себя. У меня будут в будущем еще статьи для нубов и меня.
How to create JavaScript Objects
Tags: javascript, webdev, programming, tutorial
Published: 2022-06-26 08:19:10

-using {}

-using new Object()

-using Object.create()

-using Object.assign()

-using ES6 Class 

---
Object Creation Using ES6 Class:
```
class Employee{
   constructor(name,dept){
       this.name = name;
       this.dept = dept;
   }
}

const firstEmployee = new Employee('Pavan','IT');
console.log(firstEmployee);

Output // 
{
name: 'Pavan', 
dept: 'IT'
}
```
Running Docker Without Sudo - EC2 server
Tags: aws, docker, jenkins, devops
Published: 2022-06-26 09:33:05

I was quite comfortable running my docker using `sudo`, not that I preferred it but I really had no option until I had to run a CI/CD pipeline which throws error as a result of running the commands with `sudo`. By default, the docker command can only be run by the root user or by a user in the docker group, which is automatically created during Docker’s installation process. If you attempt to run the docker command without prefixing it with `sudo` or without being in the docker group, you’ll get an output like this: ```
Output
docker: Cannot connect to the Docker daemon. Is the docker daemon running on this host?.
See 'docker run --help'.
```

This made me further troubleshoot to get a solution, this article is about my little experience resolving the issue, most especially if you experience this issue running docker on a server. 

I ran my docker on an EC2 instance, even after following the commands necessary for me to run docker without using `sudo`. It turns out I had to reboot my server, and not just exit the terminal and ssh back in to the terminal as a lot of articles I came across advised. Well, that may have worked for others, but it did not for me. If it's on a local terminal, after following the process, you can close your terminal and come back in. The changes would be effected, but it's not so for servers, you have to reboot the server.

Also, I'd like to add that it is important you run docker without `sudo` especially in a Jenkins Job as it would throw errors as seen below. 
![docker-jenkins-1](https://community.ops.io/remoteimages/uploads/articles/zj22lnvve1ymijp2mzf5.png)


If you want to avoid typing `sudo` whenever you run the docker command, add your username to the docker group. That being said, the following are steps to run Docker without `sudo`(I'd still like to emphasize, for EC2 servers or any other cloud provider servers,):

1. Add your username to the docker group: ```
sudo usermod -aG docker ${USER}
```

2. Apply the new group membership. In my own case, I had to reboot my ec2 server for it to take effect, my server user had no password. If your user has a password, then run `su - ${USER}`. You'd be prompted to enter your password, do that and the changes would take effect.

3. Confirm that your user is now added to the docker group by running the command `groups`. You should now see your user amongts the group. 

That's all, you can now go ahead and run docker without `sudo`. This worked for me and my Jenkins job which failed worked right after the above steps 
![docker-jenkins](https://community.ops.io/remoteimages/uploads/articles/j6zfw4o2ut54nfsqvb2t.png)
How to setup a Svelte + TailwindCSS +DaisyUI development environment?
Tags: svelte, javascript, webdev, tutorial
Published: 2022-06-26 09:18:31

## Purpose Of Project
In this post, we'll cover the setup for creating our Svelte environment in Vite with Tailwind CSS and DaisyUI integration. 

## Getting Started
To setup a basic Svelte app, you can run the following command:

```
npm init vite my-app -- --template svelte
```

...then go into our project folder on the terminal and install the following dependencies:

```
cd my-app 

# Install the dependencies...

npm install

```
...then start Rollup.

```
# Npm Command
npm run dev 
``` 
Navigate to localhost:8080 and you should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

You should now see this in the browser!

![init.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yzdgpz8trr1kvebr2vq.PNG)

## Adding Tailwind CSS + DaisyUI Setup
So now we have to install Tailwind CSS and DaisyUI peer-dependencies via npm using the following command:

```
npm install -D tailwindcss postcss autoprefixer daisyui  
```
We will now create a tailwind configuration file called `tailwind.config.cjs` in the base directory. 

Add the following code to your `tailwind.config.cjs` file:

```
module.exports = {
    content: ["./src/**/*.{html,js,svelte}"],  theme: {
    extend: {},
  },
  plugins: [
    require("daisyui")
  ],
}
```
Next, we'll have to create a PostCSS configuration file (postcss.config.cjs) in our base directory.

Add the following code to your `postcss.config.cjs` file:

```
module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }
```

## Injecting Tailwind Directives into our CSS
It's best to inject them inside your App.svelte file so they're accessible on every page. 

```
<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>
```

Now that we have Tailwind in our environment, let’s edit our website header to see how tailwind works with Svelte. 

You should now see this:

![svelte.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yguajfa0nst7wfvdag9.PNG)
 

## Conclusion

Now if you haven't used DaisyUI or TailWind components before then take a look at an example Svelte project I created with both DaisyUI and Tailwind integration. 

You can view it right [here](https://github.com/JavascriptDon/DevFolio)!

Go [here](https://github.com/JavascriptDon/svelte-vite-tailwindcss-daisyui-template) to view my completed template for this project on Github! 

## License: 📝
This project is under the MIT License (MIT). See the LICENSE for more information.

## Contributions
Contributions are always welcome...

🔹 Fork the repository
🔹 Improve current program by
🔹 improving functionality
🔹 adding a new feature
🔹 bug fixes
🔹 Push your work and Create a Pull Request
What is the DOCTYPE Declaration in HTML?
Published: 2022-06-26 08:58:50

The doctype is declared in the first line of HTML or XHTML. It tells the browser what version of HTML code is being utilized.

Doctype syntax for html5 and beyond

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

Doctype syntax for html 4.01

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

Web standards were not agreed upon within the first year of HTML. So when someone wrote html code, they had to build it with a certain browser in mind, which implies the code might not work the same way in different browsers.

As a result, the World Wide Web Consortium (W3C) developed some standards that everyone had to follow. The code can be rendered across web browsers if these standards are followed.

That is why web developers were required to include doctype at the beginning of their code.

source : [here](https://www.freecodecamp.org/news/what-is-the-doctype-declaration-in-html/#:~:text=The%20DOCTYPE%20declaration%20is%20an,document%20type%20definition%20(DTD).)

That concludes this article.

If you found this article useful follow me on twitter [@Hxrshxd](https://twitter.com/Hxrshxd) for more.
Flat Nested Array: JavaScript
Tags: javascript, programming, tutorial
Published: 2022-06-26 08:32:48

Flat nested array without using built-in methods. Recursive program example 


```
const arr = [1,2,[3,4],5,[6,[7,8],9],10];

function flatArray(input,output){   
  input.forEach( (value)=>{    
    if(typeof value== 'object'){
      flatArray(value,output);
    }else{
      output.push(value);
    }    
  });
  return output;  
}

console.log(flatArray(arr,[]));
```
API 101 WORKSHOP WITH POSTMAN
Tags: postmanstudent, postmanapi, api101
Published: 2022-06-26 08:25:32

Attended an **API 101 WORKSHOP**,  which was an informative and fun experience, discussed about **Postman**( _an API platform for developers to design and build their API's_). Our speaker Ali **Mustufa Shaikh**, the coordinator of the student programme at Postman, gave the event who is a Google for _Education Certified Trainer_ and _Software Innovator @Intel®._
In the session we discussed about API' s basic working and importance. API is the acronym for "**Application Programming Interface**". There we were given a glimpse of how the API works - by discussing the various **requests** ( example - get ) and the user friendly interface of Postman. We had a hands on experience by working with the speaker.
Format Array : JavaScript
Published: 2022-06-26 07:42:47

Input: 
 ` [
  { x: 'a', order: 10},
  { x: 'a', order: 3},
  { x: 'a', order: 4},
  { x: 'b', order: 3},
  { x: 'b', order: 2},
  { x: 'b', order: 1}
]`

Output :
 `{
	“a":[{"x":"a","order":10},{"x":"a","order":3},{"x":"a","order":4}],
	“b":[{"x":"b","order":3},{"x":"b","order":2},{"x":"b","order":1}]
}`



Solution:

```
const arr = [
  { x: 'a', order: 10},
  { x: 'a', order: 3},
  { x: 'a', order: 4},
  { x: 'b', order: 3},
  { x: 'b', order: 2},
  { x: 'b', order: 1}
];

function formatArray(input){
  output = {};
  input.forEach( (value)=>{
    const xValue = value.x;
    if(Object.keys(output).includes(xValue+'')){
      output[xValue].push(value);
    }else{
      output[xValue] = [value];
    }    
  });
  return output;
}

console.log("output",formatArray(arr));
```
206. Leetcode solution in cpp
Tags: cpp
Published: 2022-06-26 07:21:11

```
class Solution {
 public:
  ListNode* reverseList(ListNode* head) {
    if (!head || !head->next)
      return head;

    ListNode* newHead = reverseList(head->next);
    head->next->next = head;
    head->next = nullptr;
    return newHead;
  }
};
```
Setup guide for ZSH in GitHub codespaces
Tags: github, codespaces, zsh, starship
Published: 2022-06-26 07:21:04

# Setup ZSH

This post will guide you through to set up starship along with zsh suggestions and zsh syntax highlight for your codespaces.

# Table of Contents

- [Setup Starship](#setup-starship)
- [Install Auto Suggestions](#install-zsh-auto-suggestions)
- [Install ZSH Syntax Highlighting](#install-zsh-syntax-highlighting)

## [Setup Starship](https://starship.rs/)

This is an optional package if you want to beautify your terminal. Else you can also use any other ZSH themes.

### Install starship

> You cannot install starship in ZSH shell at the time of writing this. You can switch to bash.

```bash
curl -sS https://starship.rs/install.sh | sh
```

### Setup the config in the ZSH file

```bash
echo "eval \"\$(starship init zsh)\"" >> ${ZSOTDIR:-$HOME}/.zshrc
```

## [Install ZSH Auto Suggestions](https://github.com/zsh-users/)

1. Clone the repository

```bash
git clone https://github.com/zsh-users/zsh-autosuggestions ~/.zsh/zsh-autosuggestions
```

> _You can change the path to anything you want. Here we use `~/.zsh/zsh-autosuggestions`_

2. Add the invoke script to the ZSH config

```bash
echo "source ~/.zsh/zsh-autosuggestions/zsh-autosuggestions.zsh" >> ${ZSOTDIR:-$HOME}/.zshrc
```

# [Install ZSH Syntax Highlighting](https://github.com/zsh-users/zsh-syntax-highlighting/)

1. Clone the repository

```bash
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ~/.zsh/zsh-syntax-highlighting
```

2. Add the invoke script to the ZSH config

```bash
echo "source ~/.zsh/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc
```

*Note: If you see a `Systemd` in the terminal and want to remove it then follow the next command*
```bash
mkdir -p ~/.config && printf "[container]\ndisabled = true" >> ~/.config/starship.toml
```

**Voila! You are ready to use ZSH with Starship and ZSH Auto Suggestions and Syntax Highlighting.**

If you like it consider following me on [github](https://github.com/krishagarwal2811)
Why You should use Tailwind Now?
Tags: tailwindcss, bootstrap, css, frontend
Published: 2022-06-26 07:15:05

### Introduction
Until the last 4 projects, I was using the Bootstrap framework then I started with [reactstrap](https://reactstrap.github.io/?path=/story/home-installation--page) and [react-bootstrap](https://react-bootstrap.github.io/getting-started/introduction) and I was Satisfied with them, But Recently I started with Tailwind CSS and I realized that it is an Amazing CSS Framework, So in This Article, We Will take about Some advantages of Tailwind CSS.
So let's Get Started...👉​

---

### Why Should You use Tailwind instead of Bootstrap?
1. **Write Less, Do More**
One of the Measure problems that I was Facing when I am using Bootstrap was that I should write more and more CSS code to overite Bootstrap Properties and this is a causes performance problems in your website but with tailwind It's different, Now in some projects, I do not use any external CSS code.
![Flex Handling in Tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksbtect7pegacc9njail.gif)


2. **More Performance**
Tailwind uses the [PurgeCSS](https://purgecss.com/) tool to remove unused CSS code and if you do not know that is a fantastic feature because performance is the most thing that you should care about in your website, On the other hand, bootstrap does not have this feature.


3. **Support the Dark and Light theme**
 Another amazing Feature of tailwind that I loved so much is that tailwind supports dark and light theme features in the easiest way and with [Flowbite](https://flowbite.com/) library, It just got easier and easier.
![Dark & Light Theme Switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lw29xiueu8u89183aa2f.gif)


4. **pseudo-classes handling**
In tailwind, you can set and handle pseudo-classes like `hover`, `active`, `placeholder` ...etc
![Hover Pseudo Class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4iyqnwud29x3rfrs1u4.gif)


5. **Easy to be configurable and customizable**
As you know the framework only will not satisfy all your needs, you may need some extra colors, fonts, standard sizes, and more so you need to implement these things by yourself in external style sheets but with a tailwind, you can implement it by easy way, you can add your preferable colors, fonts, colors and animations just in a few seconds.

---

### Conclusion
Tailwind is not just a normal CSS framework that has some predefined classes, It uses technologies and tools that make your development process as can easier so you should try it at least once in your projects.
And that is it, see you in the next article...🖐️​
21. leetcode solution in java
Tags: java
Published: 2022-06-26 07:14:47

```

class Solution {
    public ListNode mergeTwoLists(ListNode l1, ListNode l2) {
        ListNode dummy = new ListNode(0);
        ListNode l3 = dummy;
        
        while (l1 != null && l2 != null) {
            if (l1.val <= l2.val) {
                l3.next = l1;
                l1 = l1.next;
            } else {
                l3.next = l2;
                l2 = l2.next;
            }
            l3 = l3.next;
        }
        
        if (l1 != null) {
            l3.next = l1;
        }
        
        if (l2 != null) {
            l3.next = l2;
            
        }
        
        return dummy.next;        
    }
}
```
Creating Morphing Animations with CSS
Tags: css, beginners, tutorial, design
Published: 2022-06-26 06:17:36

Learn how to implement morphing using CSS, a technique for transforming one appearance into another.

### What is morphing?
Morphing is a technique where you transform one appearance into another. It’s a shape-shifting animation where a two-dimensional object, say an image or a figure or similar, turns into a different shape.

In this article for simplicity, we create a div that alternates between a square and a circle.

Define a div element with spinner class. Give the spinner basic demotions and animate it with a custom animation named Morph that takes 2 seconds and runs forever.

```css
.spinner {
  width: 100px;
  height: 100px;
  animation: Morph 2000ms infinite;
}
```

To make the element change its shape we need to define a custom animation named Morph. When the Morph animation is in 0 and 100 present, we set the border radius to 50% so the element shapes like a circle, and we set the border-radius to 0 when the animation is at 50% so it changes back to square.

Next, let's rotate the element and change its color during shape-shifting to give it a nice look. To do that we need to set the background color for each step and add a transform property that rotates the element between 0 and 180 degrees during animation steps.


```css
@keyframes Morph {
 0%, 100% {
   border-radius: 50%;
   transform: rotate(0deg);
   background-color: pink;
 }
 50% {
   border-radius: 0%;
   transform: rotate(180deg);
   background-color: lightblue;
 }
}
```

Finally, our morphing animation works and you can see and play with the final code at [nexuscode.online](https://nexuscode.online/editor/pdS6LaWqkB)
Aws CODEWHISPERER is out
Tags: codewhispere, aws, opensource, vscode
Published: 2022-06-26 05:49:25

Amazon launches #CodeWhisperer, a #GitHub #Copilot-like AI pair programming tool..
It’s now available in preview as part of the #AWS  IDE Toolkit, which means developers can immediately use it right inside their preferred IDEs, including VS Code, IntelliJ IDEA, Pycharm ,Web Storm