teleren/devto huggingface dataset:
Kiss IT
Published: 2022-07-27 10:09:20

---
title: Kiss IT
published: true
description: Kiss IT
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ean7m2t6qmjnwemjn4r6.png
# Use a ratio of 100:42 for best results.
---

While I roam the planet for a nice remote job, I amuse myself in the way that some companies try to lure people into their world. Some companies really do their very best to tell their story and feed you with the same enthusiasm as they experience themselves. It reads like a micro-novella and is exiting to fantasise how it would be to work there.

I must admit that I'm a huge Stephen King fan, so I like to read horror stories. Did you know that those exist as a micro-novella in the job-vacancy world as well?

What strikes me the most, is the fact that they probably don't know what they really mean to say, which I hope is actually the case in most of the time. But if they rally meant it, they should realise that there is a minor change that people will fall for the trap.

I know you are curious, so let me enlighten you. It's just a small sentence from a job-vacancy that does it.
"Do you like to work with complex programs?"

Let me break this down. If programs are complex, it probably means that it was build with the help of a mad genius, which means that the source code is hard to understand, difficult to test and that there is (just a guess) not that much technical documentation.

I like to work with complex problems, but solve that with simple solutions. Well maintainable, well tested and with good technical documentation.

Did I mention already I'm a huge fan of KISS too? And in this case, I'm not talking about the rock band, but about Keeping It Smart & Simple.

Why are people still create complex software (and do they need help in maintaining it)? I sometimes feel like a mad genius myself, but I always know that I have a responsibility towards the audience to make it smart & simple.

Don't fall for the trap of complexity. Do your very best to write the future!
Which is the best CI/CD self-hosted open source tool?
Tags: discuss
Published: 2022-07-27 10:00:00

I have used python based CI tool [buildbot](https://buildbot.net/) which is a great tool but we want to move away from buildbot only because in some scenarios we want to compile low-level micro-service which are in c++ to a different architecture. Buildbot doesn't have such a feature.

So can you suggest one? Till now I looked at the [concourse](https://concourse-ci.org/).
WSL2 windows path devre dışı bırakma
Tags: wsl2, windows, path, wsl
Published: 2022-07-27 09:54:57

> Bu işlemi yaparken WSL dağıtımınızdan yapmalısınız. Genel WSL konfigürasyon ayarlarında çalışmamaktadır.

> Bu rehberde nano editorü üzerinden anlatılmaktadır isterseniz gedit vb. editorler kullanabilirsiniz.

---
WSL dağıtımımızı açtıktan sonra terminale aşağıdaki komutu yazıyoruz.
`sudo nano /etc/wsl.conf`
ardından parolamızı girip enter basıyoruz daha sonra aşağıdaki gibi yazıyoruz.
```
[interop]
appendWindowsPath=false
```

ardından CTRL+X basıp y yazıyoruz ve enter basıyoruz daha sonra windows powershell dönüp 

```
wsl --shutdown
```
yazıyoruz ve tekrar açtığımızda artık Windows PATHleri yok.
Scroll shadow above the content with pure CSS
Tags: css, tutorial, html, design
Published: 2022-07-27 09:49:22

1. You tried using different libraries ([react-scroll-shadow](https://www.npmjs.com/package/react-shadow-scroll), [scroll-shadow-element](https://www.npmjs.com/package/scroll-shadow-element), [use-scroll-shadow](https://www.npmjs.com/package/use-scroll-shadow)), but they didn't work for you?
2. You even tried to write your own solution using [background-attachment](https://css-scroll-shadows.vercel.app/), but that didn't work too, the shadow displayed behind the elements (of course, because it's background, not foreground)
3. JS seems cool, but too heavy, and you are tired of catching bugs with [this solution](https://css-tricks.com/scroll-shadows-with-javascript/#:~:text=Scroll%20shadows%20are%20when%20you,t%20work%20on%20iOS%20Safari.)

Hello there, I know what else you can do:

## 4. Try using `sticky`

This thing saved me a lot when I was developing scrollable content

Take a look here:

{% vimeo https://vimeo.com/733927202 %}

### How to do this?

It's pretty simple, you should structure your scrollable block like this:

```HTML
/* Wrapper styles, sometimes you might need overflow-x-hidden */
<div style={{position: 'relative', overflow: 'overflow-y-auto'}}>
 /* Upper shadow block */
 <div style={{position: 'sticky', zIndex: '10', top: '-1px', 
 'linear-gradinet(to bottom, '#00000000' '#fff')'}} />

<p>Bunch of your content here</p>

 /* Bottom shadow block */
 <div style={{position: 'sticky', zIndex: '10', bottom: '-1px', 
 backgroundImage: 'linear-gradinet(to bottom, '#fff' 
 '#00000000')'}} />
</div>
```

Phew, hope I didn't mess up the styling part, I don't want to include the `.css` file, because you'll understand the code better in one plate

## Good luck doing great layouts :)
Using Vite on an existing React project
Tags: vite, react, javascript, programming
Published: 2022-07-27 09:45:00

Just incase you're wondering how to boost your dev server if you already got a project up and running with our beautiful react application, here I will show you how to infuse Vite into your project and experience that speed you've always wanted.

Also if you are wondering what is Vite and probably want to use it, you can checkout my last tutorial on '[How to use Vite with React'](https://dev.to/asapconet/how-to-use-vite-with-react-3gnf)

Without no further a do...

### What you need to have in check.
1. A running react application
2. A good network

### Then
Setup the required packages from you terminal like this

```
$ yarn add vite @vitejs/plugin-react-refresh
```
Create a `vite.config.js` file in your root folder and add the following code

```
// vite.config.js

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

export default defineConfig({
  plugins: [reactRefresh()]
})
```
This `config` file pre-bundles your dependencies when sever is running.

From your root folder too, edit your `package.json`. This define the bundler for starting, building and previewing the application from the initial `react-create start`...

```
// package.json

  "scripts": {
    "start": "vite",
    "build": "vite build",
    "test": "vite test",
    "eject": "vite eject"
  },
```
Still from your root folder, open `/public` folder and move the `index.html` file to the parent folder.
In the file, go ahead and remove all the `%PUBLIC_URL%` attached too any `<link.../>` and a `<script>` tag and hence reference to the appropriate directory like so `/src/index.js/`.

```
<!-- Before edit -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<!-- After edit -->
...
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />

<body>
...
    <div id="root"></div>
    <script type="module" src="/src/index.js"></script>
</body>
```
### Finally

You can now run 
```
$ yarn start
```
Happy vite coding.
Regex replace starting comparing from end
Tags: help, regex
Published: 2022-07-27 09:44:00

Hey!

I have issue with less knowledge. I'm trying to perform regex replace where I can format string starting comparing it from end.

If I have number like 1231231234 then I would like to format it 123 123 1234

but if I have number like 12312341234 then I would like to format it to 123 1234 1234.


Thank you for your time.
Top 5 VSCode Themes | How to Change VSCode Theme | Top Visual Studio Code themes 2022
Tags: vscode, webdev, beginners, programming
Published: 2022-07-27 09:35:36


Are you a beginner developer and Looking for a new beautiful Visual Studio Code theme? then this video is for you! In this video I will show you [the top 5 best Visual studio Code themes](https://youtu.be/4JbfesFFs9I) mostly used by software developers. Also learn How to Change VSCode Theme.
 
Here are [top 5 best VS Code color themes](https://youtu.be/4JbfesFFs9I) sorted, and categorized to help you increase your productivity and make you more effective as a web developer developer. In this video I will show you How to Change VSCode Theme and Top Visual Studio Code themes 2022.

_[What is the best light theme for VS Code?](https://youtu.be/4JbfesFFs9I)
Which is the best dark theme for VS Code?
Which VS Code theme is best for eyes?
Which theme is better for coding?
Which color theme is good for eyes?
Is Monokai Visual Studio Code theme is good?_

These are the [top 5 VS Code themes](https://youtu.be/4JbfesFFs9I) mostly used by developers!
1. SynthWave 
2. One Dark Pro
3. Dracula
4. GitHub Theme
5. Winter in coming

## Watch Full Video Tutorial

{% youtube 4JbfesFFs9I %}

## Which VS Code theme is best for eyes?

There are 5 carefully crafted themes for you to choose from:
Dark (best colors for minimized eye strain)🌃
Neon ~ (for Cyberpunk Lovers) 😉
Sunset Red (Red is soothing for eyes and helps to sleep better) 🌇
Night Owl (inspired by Sarah Drasner's Night Owl Theme)🦉
Solarized Dark+ (based on Solarized colors)🎨

****************************
𝗛𝗲𝘆, 𝗜𝗳 𝗧𝗵𝗶𝘀 𝗩𝗶𝗱𝗲𝗼 𝗶𝘀 𝗛𝗲𝗹𝗽𝗳𝘂𝗹 𝗳𝗼𝗿 𝗬𝗼𝘂, 𝗣𝗹𝗲𝗮𝘀𝗲 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗖𝗼𝗳𝗳𝗲𝗲. 𝗧𝗵𝗮𝗻𝗸 𝗬𝗼𝘂!😇
𝗟𝗶𝗻𝗸:   https://www.buymeacoffee.com/hmaweb

- 𝗦𝗼𝘂𝗿𝗰𝗲 𝗖𝗼𝗱𝗲 𝗟𝗶𝗻𝗸!
   https://www.hmablogs.com/


## Suggested Videos:

**Complete User Registration &  Login System with PHP and MySQL Database | PHP Login System**

{% youtube m50q5_RQFB4 %}

**Free One Page Responsive Website with Slider Using HTML CSS and Bootstrap**

{% youtube hu321P5r3kk %}

**How to Create a Product Landing Page Using HTML and CSS | Responsive Homepage Design Tutorial HTML5**

{% youtube KDaGjYQTDF0 %}

**How to Create Responsive Sign Up Form with HTML5 CSS3 | How to create a signup page**

{% youtube TuznhDaF3rw %}

**Top 10 VSCODE Extensions For Web Developers | Best VSCODE Extensions 2022**

{% youtube klL5DZePXEc %}

**How to Change Website Content in JavaScript | How to Append Text in JavaScript 2022**

{% youtube -rphTk2Vwwc %}

**How to Build Vertical Tabs in HTML and CSS | Animated Vertical Tabs in HTML and JavaScript**

{% youtube 4fzLRXUbkcM %}

**Hoverable Responsive Dropdown HTML CSS | Hover Over Dropdown Menu HTML CSS**

{% youtube m18hothdz7Y %}

**10 Ways How to Center a Div Vertically in Another div | CSS Align Center**

{% youtube BibKN_xbQ1U %}
What exactly do React/React Native Custom Hooks do?
Published: 2022-07-27 09:31:15

---
title: What exactly do React/React Native Custom Hooks do?
published: true
description: An interesting guide to creating custom hooks in React and React Native
---

![A hook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uig6cogmjpx5ot28cq2l.gif)

> Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside a class component, only in a function component.

Making unique hooks should be prioritsed over repetitive coding and adhering to recommended practices.

One of the cool things about React is the use of reusable components and this is not limited to JSX components in React, functions themselves are reusable. When creating an application, you will frequently execute data retrieval connected to the program's state and lifecycle.

The goal of a custom hook is to create a function that you can quickly reuse in different areas of your application to avoid DRY code and improve your application performance and efficiency.

You have an application with the Home and Profile screens. The user data must appear on both screens. You create the API call in the Home Screen and duplicate it on the Profile Screen in order to display the user data on both displays. If a user navigates to either screen, data is being fetched, which is OK because you successfully retrieve your data from the API and represent the data on each panel.

```
const getUserProfile = useCallback(() => {
    // API call logic
}, [])

useEffect(() => {
    getUserProfile()
}, [getUserProfile])
```

Making the API call function into a hook that can be called from the Home and Profile is a simple solution and recommended practice. This will decrease DRY code and enhance the efficiency of your application. 

```
export const useGetUserProfile = () => {

const [userProfile, setUserProfile] = useState() 

    const getUserProfile = useCallback(() => {
        // API call logic
    })
    
    useEffect(() => {
        getUserProfile()
    }, [getUserProfile])

return {userProfile} 
}
```


Custom hooks are functions but not all functions can be referred to as a hook, below are what makes a function a hook:

* It must be named starting with the word use.
* It must be named in the camel case.

Start developing your own custom hooks because hooks in React can solve a wide range of issues that seem unconnected.
Dialogs in 2022
Tags: javascript, html, react, tutorial
Published: 2022-07-27 09:09:25

## Introduction to the `<dialog>` HTML element

Dialogs were especially difficult to manage because there was no way to "hoist" your `<div>` to the top level of the page. In frameworks like React this can be solved using libraries which provide this functionality. However, we are still handling the problem to someone else and relying on their solution.

The `<dialog>` HTML element simplifies our codebases and lets us focus on the important parts of our applications. [Safari](https://webkit.org/blog/12209/introducing-the-dialog-element/) and Firefox support `<dialog>` since March 2022. Chrome was already supporting it since 2014.

Main advantages of the `<dialog>` element:

- provides an easy way of creating dialogs and modals without external libraries
- simplifies codebase and improves developer experience
- automatically prevents access to the content behind the dialog
- exists in a top layer above regular stacking context

## How to use it

Dialogs are very simple to use. First you need to render a `<dialog>` element with the content that you want to display.

```html
<dialog>
  <h1>Hello World</h1>
  <p>This is a dialog</p>
</dialog>
```

Apart from that, you only need to call `showModal()` on the `<dialog>` element to show it and `close` to close it. It's also possible to close the dialog pressing ESC. If you want, you can disable this behaviour with the `event.preventDefault()` function in the dialog's `close` event.

## Simple HTML and JavaScript example

In this example we are using plain HTML and JavaScript. You can see the example working in the [live demo](https://www.jmalvarez.dev/static/examples/dialog-example.html).

```html
<button id="openDialog">Open dialog</button>
<dialog id="myDialog">
  <h1>Hello World</h1>
  <p>This is a dialog</p>
  <button id="closeDialog">Close</button>
</dialog>
```

```js
const myDialog = document.getElementById("myDialog");

const openDialogButton = document.getElementById("openDialog");
openDialogButton.addEventListener("click", () => {
  myDialog.showModal();
});

const closeDialogButton = document.getElementById("closeDialog");
closeDialogButton.addEventListener("click", () => {
  myDialog.close();
});
```

## React example

In this example we are creating a React component to display the dialog.

```jsx
import { useRef } from "react";

export const Dialog = () => {
  const myDialog = useRef();

  return (
    <div>
      <button onClick={() => myDialog.current.showModal()}>Open dialog</button>
      <dialog ref={myDialog}>
        <div>
          <p>Hello world!</p>
          <p>Press ESC or click the button to close.</p>
          <button onClick={() => myDialog.current.close()}>Close</button>
        </div>
      </dialog>
    </div>
  );
};
```

You can see the React component in action at the end of the [post in my blog](https://www.jmalvarez.dev/posts/dialogs-in-2022).

## References

- [Introducing the Dialog Element - WebKit](https://webkit.org/blog/12209/introducing-the-dialog-element/)
- [\<dialog\>: The Dialog element - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
One thing At a time....
Tags: beginners, programming, webdev, rails
Published: 2022-07-27 09:03:00

Learning how to code requires patience and proper planning. There are a lot of new technologies that hits the market daily. Focusing on one at a time is the best trick to overcome this curiosity. That doesn't mean you put aside consistency. Actually I stabilized on my learning culture within four months, it may be different for you. Considering my 8 to 5 daily job and lots of travels, I decided to give two hours every morning for proper coding studies. I had jumped over many books covering different programming languages but when the time was right I decided to pick one and it worked fine. I spent about one year moving from point to point, it's not a waste of time though. Many small concepts that i accrued within that period still helps me a lot. So this is what i did to solve my own problem.
1. Convinced myself that I have many years to be perfect and reach at senior level.
2. Focused on frontend web development. HTML/CSS and JavaScript. each independently and in sequence.
3. Picked on a frontend framework. React JS
4.   Basics of code versioning and sharing, Git GitHub
5. Worked on small pet projects.
6. Picked on Ruby
7. Advanced to Ruby on Rails.
8. Still at step 7 but trust me I have hit over 100 contributions on GitHub. Small number ,yes but that's a great achievement on my side.

I didn't say you must do all this but just check and try out what works best for you.

Thanks for your time in reading and commenting.
Happy Coding!
freash look of ‘BUN’
Tags: javascript, programming, webdev, react
Published: 2022-07-13 00:13:34

A few days back, I found a new javasrcipt Runtime ‘BUN’.It is very promising, so I’m going to make a overview about it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gm4nj0qpia2z2bc0sw0u.png)
  
What is BUN ?
Bun is a baby javascript runtime created by Jarred Sumner a few days ago. It is build on javascriptcore from WebKit. Not like Bun, other runtime like node and Deno are built on V8 .Bun also have the potensial to replace node.js and become the number one runtime.

Why BUN
Bun can do almost everything node.js can do the only difference is Bun is faster than node.js. Being fast is pretty cool but the best part is that Bun is a all-in-one runtime It has a native module bundler which means that you can get rid of tools like webpack and also have a native transpiler that can allow you to write typescript and JSX out of the box .It also have the abilities to download most npm 20times fast.another fantastic feature of Bun that save you from installing DoteEVN everytime you open a project because Bun load those evnironment automatically.

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

How fast is BUN
Bun is the fastest Javascript runtime. Way faster than the old Javascript runtimes node.js and Deno.We are talking about massive here just look at the graph down below

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

It is about 3 times faster when server rendering React and has a big difference in the other two as well.

Installation
To install Bun on your PC go to your terminal and type

curl https://bun.sh/install | bash

Thank you to read my first blog.I’m a 14 year old programmer That just started to write blog.Please forgive me if I said anything wrong and if you have any suggest please comment down below or DM me on twitter twitter.com/Isaacxu18 Thank you
A Powerful Story AboutThe Eagle. 🦅
Tags: productivity, motivation, beginners, javascript
Published: 2022-07-27 08:42:35

once upon a time ⏲️

A farmer found an abandoned eagle’s nest.

And in it was an egg still warm. 🌺 🥚

looking out…

there was no sign of its mother or of its siblings 👩‍👧

And so the farmer feared for the little eagle’s life.

and took the egg back to his farm 🏡

and laid it in the nest of one of his hens

After two weeks, the egg hatched 🐣

and out came a little baby eagle 🦅

the hens looked after the eagle

as if it were a little chicken 🐤

And so the eagle grew up.

Along with the other chickens 🐓

it pecked about the farm yard

scrabbling for grain 🌾

It ran into the chicken house. 🏡

When it started to rain 🌧️ it did exactly what all the other chickens did.

All his life…

It spent its whole life within the yard and rarely looked up.

Because, all the other chickens never looked up 🙄

After it had a very long, uncomfortable life in the chicken yard.

It was very old, and one day…

It decided to lift up its head, and so above a wonderful sight. 🌌

He saw an eagle soaring high above in the sky.

Looking at it, the old creature sighed and said to itself:

> _❝If only I had been born an eagle! 🦅❞_

You see in life, in your life

You only have one life. 💖

let no one tell you what you can or can’t do 🙅‍♂️

because it is only up to you

You were born an eagle but decided to live as a chicken because all the others did the same. 🐓

What you don’t know is…🤔

that you are the eagle 🦅

that you are the Lion 🦁

that you are the chicken 🐓

That all the strength and might you need to fulfill all of your dreams in your life are already within you. 💪


**`Your decision not to look up into the sky and understand that you are an eagle, and as time will pass you become old; and one day when you realize that you are an eagle, it might be too late to change.`**

So go after your dreams today and believe that you can achieve anything that you want.

> _“Never judge an eagle by the opinion of turkeys.”_
I created a bot
Tags: github, tutorial, productivity, notanad
Published: 2022-07-27 08:37:00

![Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=github-actions&logoColor=white)
## I recently used GitHub actions
And it is really amazing. I was so determined to make use of everything I have from my free GitHub account that I was so mad that I did not know this earlier.
<br>
### Why it is awesome
1. Github Gives Hosting For De Bot
2. Github Marketplace is amazing
3. It is Free
4. Simple to use
<br>

### Here is How to use:
1. Create a .yml file in a `/.github/workspaces` directory
2. put these essential info:
```
on:
  workflow_dispatch:

jobs:
  name_of_job:
    runs-on: ubuntu-latest
    steps:
      - uses: dependency
      - run: shell or python file or something from dependency
        shell: shellllll
```
This is not a real example so don't copy this...<br>
These are made using YAML syntax, so it might be a little unfamiliar as it is not a scripting language. But this is a very simple to learn deployment language, and you can get used to it in a few hours (if only using it for actions).
<br>
You can run a scripting language in actions and fortunately, you can write python to make bots! (so kids, learn Python. It's useful. You probably know Bash if you don't know Python)
![Shell types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igq1ztf6e9p43qbzpyel.png)
<br>
### My current bots:
There are, of course more elements to make an action. But still, I am a beginner. I am currently using [Platane/snk dependency](https://github.com/Platane/snk) for a [nice snake animation](https://raw.githubusercontent.com/Wjplatformer/Wjplatformer/output/github-contribution-grid-snake.svg) on my README.md. 
<br>
### So, that's all for now!
I just want to say how good actions are and how easy it is to make one. Don't worry, the GitHub docs are really readable. Go to the sources down there 👇. Thanks for reading!
<br>
sources: https://docs.github.com/en/actions/learn-github-actions/essential-features-of-github-actions, https://docs.github.com/en/actions