teleren/devto huggingface dataset:
Kotlin from Php Eyes | First Look
Tags: programming, kotlin
Published: 2023-05-10 07:33:10

As you might have heard about Kotlin, the new famous easily adoptable language for Java engineers. Kotlin was designed to be an alternative to Java with a concise and easy syntax without much of the boilerplate code as one would do in Java. So naturally it is easier for a Java engineers to learn Kotlin as they are already familiar with the ecosystem and all fancy names and building mechanism.

But for someone like me who has never worked with Java, but do have experience with PHP and Python, how this new language feels and look like?

- Gradle/Maven buil
- Namespaces vs packages
- Delegates

- Extension Functions
https://kotlinlang.org/docs/extensions.html#extension-functions

- Lambdas

- Scope Functions
https://kotlinlang.org/docs/scope-functions.html#function-selection

- Data Classes
- Equals and HashCode Functoions
- Serialization
A million ways to do something
React Interview Questions | React Closure in depth
Tags: react, webdev, javascript, beginners
Published: 2023-05-10 07:24:02

Hey Developers! I hope you're doing great.

{% embed https://youtu.be/JraoMQUtI40 %}

In my React journey i have seen developers getting stucked understanding **react state behaviour with closures**.As they are not able to understand totally why they can't access updated values even after updating it.

[React state behaviour with closures - My explanation video](https://youtu.be/JraoMQUtI40?sub_confirmation=1)

- **Why We dont have access to updated state inside SetInterval/Setimeout**

- **What's the difference between Rendering and Mounting**

- **Why Keys are so important**

I have created this video where i tried to discuss about the concepts of state and closures with Intervals in React by creating text-typing animation effect.

Do check it out and please share your opinion and thoughts on it.

Hope you have a wonderful day ahead :)
How to measure page loading time with Performance API
Tags: webdev, javascript, beginners, programming
Published: 2023-05-10 07:23:58

A while ago, I stumbled across a blog post by [Tim Kadlec](https://timkadlec.com/). Although the blog post was intriguing, something else caught my attention. In Tim’s footer, there’s a text saying how much time did it take to load the page. Naturally, I wanted to incorporate this feature into my website, so I “borrowed” Tim’s code _(Mr. Kadlec is aware of this, by the way)_. However, while adjusting the code for my site, I noticed numerous deprecation warnings popping up. Needless to say, it bothered me so much that I had to find a way to eliminate these warnings.

![Screenshot of VS Code showing deprecation warning for the performance.timing.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ms23u7w1pxlnznr8l62h.jpeg)

## The new way

MDN recommends using the [Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API) to gauge the performance of websites and web applications. Unfortunately, while the documentation is comprehensive, it doesn’t provide many examples. So I had to experiment with several approaches, but the results didn’t match the results from the “original” script. Not until I noticed that you could save the `performance.mark()` as a variable and read its properties.

Check out the GIF below, demonstrating how the “old” and “new” versions produce almost identical outcomes.

![Page reloading multiple times showing different results for the “old” and “new” way of calculating page load time.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tmmt8hi16j01ydb4eoz.gif)

Here’s the final code for getting the page load time:

```js
const perf = () => {
  const $perf = document.querySelector('.js-perf')

  if ($perf) {
    // Wait for the page to finish loading
    window.addEventListener('load', () => {
      const pageEnd = performance.mark('pageEnd')
      const loadTime = pageEnd.startTime / 1000

      $perf.innerHTML += `Page loaded in ${loadTime}s.`
    })
  }
}

perf()
```

Once the load event is complete, I store the `performance.mark(‘pageEnd’)` into a variable. The variable contains several properties, but we only need `startTime`. To get the final result in seconds, I divided `startTime` by 1000 and displayed it in my placeholder.

## NPM package

To save you some time, I’ve created an NPM package named [page-loaded-in](https://www.npmjs.com/package/page-loaded-in).

Place the following code into your `<head>` and include the `.js-page-loaded-in` element to see how fast your page loads.

```html
<head>
  <script src="https://unpkg.com/page-loaded-in@0.0.3/dist/index.js"></script>
</head>
<body>
  <p class="js-page-loaded-in"></p>
</body>

```

## Conclusion

Prioritizing performance when developing web-based projects is crucial to provide users with a seamless and efficient experience. Measuring page loading time using the Performance API is one way to demonstrate that a page is performing well.
Lock Unlock CSS Animation
Tags: css, animation, design, webdev
Published: 2023-05-10 07:14:00

Lock Unlock CSS Animation

---


![Lock Unlock CSS Animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfxqksajn66qr65epzg2.gif)
---

### HTML Code 

```html
<input id="inpLock" type="checkbox">
<label class="btn-lock" for="inpLock">
    <svg width="36" height="40" viewBox="0 0 36 40">
        <path class="lockb" d="M27 27C27 34.1797 21.1797 40 14 40C6.8203 40 1 34.1797 1 27C1 19.8203 6.8203 14 14 14C21.1797 14 27 19.8203 27 27ZM15.6298 26.5191C16.4544 25.9845 17 25.056 17 24C17 22.3431 15.6569 21 14 21C12.3431 21 11 22.3431 11 24C11 25.056 11.5456 25.9845 12.3702 26.5191L11 32H17L15.6298 26.5191Z"></path>
        <path class="lock" d="M6 21V10C6 5.58172 9.58172 2 14 2V2C18.4183 2 22 5.58172 22 10V21"></path>
        <path class="bling" d="M29 20L31 22"></path>
        <path class="bling" d="M31.5 15H34.5"></path>
        <path class="bling" d="M29 10L31 8"></path>
    </svg>
</label>
```

---

### CSS Code

```css
.btn-lock {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  display: inline-block;
  background: #ff5b5b;
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  padding: 12px 0 0 18px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-lock svg {
  fill: none;
  transform: translate3d(0, 0, 0);
}

.btn-lock svg .bling {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 3;
  stroke-dashoffset: 15;
  transition: all 0.3s ease;
}

.btn-lock svg .lock {
  stroke: #fff;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 36;
  transition: all 0.4s ease;
}

.btn-lock svg .lockb {
  fill: #fff;
  fill-rule: evenodd;
  clip-rule: evenodd;
  transform: rotate(8deg);
  transform-origin: 14px 20px;
  transition: all 0.2s ease;
}

#inpLock {
  display: none;
}

#inpLock:checked + label {
  background: #20cca5;
}

#inpLock:checked + label svg {
  opacity: 1;
}

#inpLock:checked + label svg .bling {
  animation: bling6132 0.3s linear forwards;
  animation-delay: 0.2s;
}

#inpLock:checked + label svg .lock {
  stroke-dasharray: 48;
  animation: locked 0.3s linear forwards;
}

#inpLock:checked + label svg .lockb {
  transform: rotate(0);
  transform-origin: 14px 22px;
}

@keyframes bling6132 {
  50% {
    stroke-dasharray: 3;
    stroke-dashoffset: 12;
  }

  100% {
    stroke-dasharray: 3;
    stroke-dashoffset: 9;
  }
}

@keyframes locked {
  50% {
    transform: translateY(1px);
  }
}
```
---

Thanks for Reading ❤️! Check my website [Demo coding](https://democoding.in/) for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe our channel : [Demo code](https://www.youtube.com/@democode)

---

{% twitter 1655834579394252800 %}
What's On Your Mind When the Lights Go Out?
Tags: discuss, beginners, codenewbie, watercooler
Published: 2023-05-10 07:00:00

Let's discuss the thoughts, dreams, and anxieties that keep us up at night. How do they impact our personal and professional lives, and what can we do to manage them effectively? Whether it's a looming project deadline or concerns about the future, let's share our experiences and support each other in finding ways to cope and thrive.

---

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more awesome discussions and online camaraderie!

*{% embed* [https://dev.to/codenewbieteam](https://dev.to/codenewbieteam) %}
How Can We Create Inclusive Spaces for Diverse Perspectives?
Tags: discuss
Published: 2023-05-10 07:00:00

As a community of over one million developers from all over the world, we have the opportunity to learn from people with different backgrounds and experiences. 

How can we create a space where everyone feels comfortable sharing their ideas in our discussions and projects, even if they're different from our own?

---

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
What is Elasticsearch?Its setup & configuration
Published: 2023-05-10 06:51:18

pre-reqsites to install Elasticsearch and kibana 8.4.3 (Latest version)
wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo gpg --dearmor -o /usr/share/keyrings/elasticsearch-keyring.gpg

sudo apt-get install apt-transport-https

echo "deb [signed-by=/usr/share/keyrings/elasticsearch-keyring.gpg] https://artifacts.elastic.co/packages/8.x/apt stable main" | sudo tee /etc/apt/sources.list.d/elastic-8.x.list

sudo apt-get update && sudo apt-get install elasticsearch

sudo apt-get update && sudo apt-get install kibana
Note:- its uses the same repo both elasticsearch and Kiabana

Refrence - https://www.elastic.co/guide/en/elasticsearch/reference/current/deb.html

Certficates Needs to be configured in 8.4.3 Version. 
While Installing elasticsearch 8.4.3 Certs already created & stores in the /etc/elasticsearch

After Kibana Installed its prompts for the enrollement token following command will genereate token from command-line
sudo bash /usr/share/elasticsearch/bin/elasticsearch-create-enrollment-token --scope kibana
after token successfully pasted its will ask for verfication code following command will give secure code
sudo bash  /usr/share/kibana/bin/kibana-verification-code

API need to authinticates https only while we use ELK curl command-lines
What Europe feels like?
Tags: europe, lifestlye, life
Published: 2023-05-10 06:17:12

<p>Europe is a continent rich in history, culture, and diversity. From the Mediterranean beaches of Spain to the snow-capped peaks of the Swiss Alps, Europe offers an unparalleled quality of life that has attracted people from all over the world. The lifestyle in Europe varies significantly from country to country, but there are a few common threads that run through the fabric of everyday life across the continent.</p>
<figure><img style="max-width: 100%;" src="https://images.unsplash.com/photo-1608817576203-3c27ed168bd2?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=Mnw0Mjg1OTN8MHwxfHNlYXJjaHwyfHxldXJvcGV8ZW58MHwwfHx8MTY4MzY5OTI3Mw&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080">
<figcaption></figcaption>
</figure>
<p>&nbsp;</p>
<p>One of the defining features of life in Europe is the emphasis on work-life balance. Europeans work fewer hours per week on average than Americans and tend to take longer vacations. Many European countries also have a robust social safety net that provides benefits such as healthcare, paid parental leave, and unemployment insurance. This safety net provides a sense of security that allows people to prioritize their personal lives and pursue hobbies and interests outside of work.</p>
<p>Europeans are also known for their love of good food and drink. Each country has its own unique cuisine and culinary traditions, from French haute cuisine to German sausages and beer. Farmers' markets and local food shops are a common sight in European cities, and people take pride in the quality of their food and drink. Dining out is a social occasion, and people often spend hours lingering over a meal with friends or family.</p>
<figure><img style="max-width: 100%;" src="https://images.unsplash.com/photo-1485081669829-bacb8c7bb1f3?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=Mnw0Mjg1OTN8MHwxfHNlYXJjaHw1fHxldXJvcGV8ZW58MHwwfHx8MTY4MzY5OTI3Mw&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=1080">
<figcaption></figcaption>
</figure>
<p>&nbsp;Another hallmark of European life is the importance of community. Many cities and towns have a strong sense of neighborhood identity, and people often gather in local squares and parks to socialize and relax. Sports and cultural events are also an important part of community life, and Europeans are passionate about their local teams and cultural institutions.</p>
<p>&nbsp;</p>
<p>Of course, life in Europe is not without its challenges. The cost of living can be high in some cities, and there are issues with unemployment, immigration, and inequality. However, the overall quality of life in Europe is generally high, and the continent offers a wealth of opportunities for those who are willing to seek them out.</p>
<p>In conclusion, life in Europe is characterized by a strong emphasis on work-life balance, good food and drink, community, and cultural diversity. Whether you're interested in exploring the rich history and architecture of European cities or simply enjoying the laid-back lifestyle, there is something for everyone in this vibrant and diverse continent.</p>
Review of LatAm CooLiving
Published: 2023-05-10 06:06:19

One thing that stood out to me was the well-organized directory structure. [Github](https://github.com/ljvillarrealm/latam-cooliving) repo took the time to properly categorize their project files and included detailed documentation on changing directories while running the project. This helped ensure that everything ran smoothly and without any issues.

#dezoomcamp #datatalks
Weekly web development resources #148
Tags: webdev, javascript, react, css
Published: 2023-05-10 05:44:45



______


##[jsonformer](https://github.com/1rgs/jsonformer)
[![jsonformer](https://wweb.dev/weekly/content/148/jsonformer.jpg)](https://github.com/1rgs/jsonformer)
A Bulletproof Way to Generate Structured JSON from Language Models.

______


##[Teletrace](https://docs.teletrace.io/)
[![Teletrace](https://wweb.dev/weekly/content/148/teletrace.jpg)](https://docs.teletrace.io/)
An open-source troubleshooting tool based on traces, designed for cloud-native distributed applications.

______


##[Start UI](https://github.com/BearStudio/start-ui-web)
[![Start UI](https://wweb.dev/weekly/content/148/start-ui.jpg)](https://github.com/BearStudio/start-ui-web)
An opinionated frontend starter repository using NextJS, Chakra UI, TanStack Query and Formiz.

______


##[A (Mostly) Complete Guide to React Rendering Behavior](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/)
[![A (Mostly) Complete Guide to React Rendering Behavior](https://wweb.dev/weekly/content/148/react-render.jpg)](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/)
An article on how React rendering behaves, and how use of Context and React-Redux affect rendering.

______


##[Homerow](https://www.homerow.app/)
[![Homerow](https://wweb.dev/weekly/content/148/homerow.jpg)](https://www.homerow.app/)
An app that lets you add keyboard shortcuts for every button in macOS.

______


##[Ink](https://github.com/vadimdemedes/ink)
[![Ink](https://wweb.dev/weekly/content/148/ink.jpg)](https://github.com/vadimdemedes/ink)
React for CLIs. Build and test your CLI output using components.

______


##[
jscanify](https://github.com/ColonelParrot/jscanify)
[![
jscanify](https://wweb.dev/weekly/content/148/jscanify.jpg)](https://github.com/ColonelParrot/jscanify)
Open-source pure Javascript implemented mobile document scanner.

______


##[Simpler cookie notices](https://www.thomasvantuycom.com/writing/simpler-cookie-notices/)
[![Simpler cookie notices](https://wweb.dev/weekly/content/148/simpler-cookie-notices.jpg)](https://www.thomasvantuycom.com/writing/simpler-cookie-notices/)
An article on how to use the native dialog element and the Cookie Store API for a simple cookie notice.

______


##[unlazy](https://github.com/johannschopplich/unlazy)
[![unlazy](https://wweb.dev/weekly/content/148/unlazy.jpg)](https://github.com/johannschopplich/unlazy)
A universal lazy loading library for placeholder images leveraging native browser APIs.

______


##[UI Goodies](https://uigoodies.com/)
[![UI Goodies](https://wweb.dev/weekly/content/148/ui-goodies.jpg)](https://uigoodies.com/)
A great curated list of digital design resources from around the Web. 

______

_Enjoyed this newsletter? You can support me by:_

💸 booking a [sponsored post](https://wweb.dev/sponsorship)

🥷 donating via [Sponsor Ninja](https://app.sponsor.ninja/projects/63d7dd38d907a8ed61dca67f)

🚀 helping me grow by sharing it with your friends and colleagues


Cheers,
Vincent from [wweb.dev](https://wweb.dev)
Day #2 - Carousel
Tags: react, nextjs, learning, beginners
Published: 2023-05-10 05:27:21

Di hari sebelumnya aku telah menyelesaikan sebuah halaman sederhana menggunakan nextjs. Di hari ini aku ingin tampilannya menjadi lebih lengkap dengan menambahkan satu halaman lagi yang berisi forecast weather selama satu minggu. Menambahkan fungsi carousel serta memperbaiki konten yang sudah ada sebelumnya. pada hari ini aku berhasil menyelesaikan:
- add carousel ✅
- add list of forecast day ✅
- fix bug yang ada di halaman home (kesalahan penerapan endpoint sehingga konten yang ditampilkan tidak relevan) ✅

kamu bisa lihat aplikasi yang sudah selesai di hari ini [disini](react-weatherapp-62y1vhydz-xharf.vercel.app)

Jika kamu melihat ini dan sepertinya ada yang bisa diperbaiki, tolong tinggalkan comment untukku yaa!
Day #1 - Axios and NextJS
Tags: react, nextjs, learning, productivity
Published: 2023-05-10 05:22:45

Jadi di hari pertamaku dalam tantangan 100 hari ini aku mencoba belajar mengimplementasikan axios pada nextjs. Tidak ada alasan tertentu tentang performa atau semacamnya. Aku juga tidak tahu apakah ini adalah best practice atau bahkan worst. Aku hanya penasaran bagaimana menggunakan axios di nextjs. Dengan studi kasus berupa web weather app dengan pendekatan mobile first

Pada hari pertama ini aku berhasil menyelesaikan:
- use Axios to send HTTP request ✅
- create UI using MaterialUI ✅
- deploy to Vercel ✅

kamu bisa lihat aplikasi yang sudah selesai di hari ini [disini ](react-weatherapp-a3unchypq-xharf.vercel.app)

Jika kamu melihat ini dan sepertinya ada yang bisa diperbaiki, tolong tinggalkan comment untukku yaa!
CompTIA Security+ Certification Course
Published: 2023-05-10 05:20:02

**[CompTIA security+ certification](https://www.sprintzeal.com/course/comptia-security-certification-training)** training course  for a career in IT security. Live online CompTIA Security Training on weekends & weekdays


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cecf1rw8o0wu65ev0828.png)
Instalar Wine en Arch Linux
Tags: archlinux, vim, linux
Published: 2023-05-10 05:03:40

## **1** Habilitar el repositorio `multilib`:

```sh
sudo nvim /etc/pacman.conf
     vim
     nano
```
Descomentar las líneas
`[multilib]` `Include=/etc/pacman.d/mirrorlist`

<hr>

## **2** Actualizar el sistema
```sh
sudo pacman -Syy
```

**(opcional)** Listar todos los paquetes del repositorio **multilib**
```sh
pacman -Sl multilib
```
<hr>

## **3** Instalar `winetricks`

```sh
sudo pacman -S winetricks
```

> 💡 **winetricks:** Script que permite instalar los requisitos básicos necesarios para ejecutar programas de Windows.

Por lo general, **winetricks instala Wine automáticamente**

<hr>

## **4** Instalar `zenity`

```sh
sudo pacman -S zenity
```
> 💡 **zenity:** Permite usar wine mediante GUI

En este momento Wine ya se encuentra instalado, y si se quiere acceder a su configuración debe ser mediante el comando: `winecfg`

<hr>

## **5** Conexiones TLS o HTTPS
Después de la instalación es posible que sea necesario instalar el paquete `lib32-gnutls`

```sh
sudo pacman -S lib32-gnutls
```
Esto para que funcionen las aplicaciones que realizan conexiones TLS o HTTPS

<hr>

## Configuración para entornos de 32 bits
> ⚠️ NO es necesario para entornos de 64 bits

Wine iniciará un entorno de 64 bits, este comportamiento puede cambiar utilizando la variable de entorno `WINEARCH`

```sh
WINEARCH=win32 winecfg
```
<hr>

**Extra**

## Instalar wine-mono

```sh
sudo pacman -S wine-mono
```

> 💡 **wine-mono:** Es un paquete que proporciona una implementación de la plataforma .NET de Microsoft, instalar wine-mono y habilitarlo permite la ejecución de aplicaciones de Windows que requieren .NET framework (Aplicaciones Microsoft Office, herramientas de desarrollo de software de Microsoft, Aplicaciones de escritorio: Adobe, AutoCAD)

<hr>

**Recursos:**
**[wine](https://wiki.archlinux.org/title/wine)**
**[multilib](https://wiki.archlinux.org/title/Official_repositories#multilib)**
**[winecfg](https://wiki.winehq.org/Winecfg)**
**[lib32-gnutls](https://archlinux.org/packages/?name=lib32-gnutls)**
**[winetricks](https://wiki.winehq.org/Winetricks)**
**[wine-mono](https://archlinux.org/packages/?name=wine-mono)**
FREE API TRAINING
Tags: webdev, api, programming, career
Published: 2023-05-10 04:51:02

Attention developers! Our company offers free API training and certification, plus carrier support to help you advance your career. With our faster API making platform, you can streamline your workflow and get more done. Join our Discord channel to learn more and connect with other developers. And also earn lots of points to be a part of giveaways. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5w267961dn2n9m4dby2s.png)https://discord.gg/KtwtG7M6Jb
I don't like js. I don't like htmx. So I created uajax - library to make form ajaxed
Tags: javascript, showdev, webdev, opensource
Published: 2023-05-10 04:36:39

## Backstory
Nearly two years (actually almost three) ago, I was migrating admin panel from bootsrap 4 to bootstrap 5 alpha.
I was using a lot of jquery and a lot of jquery ajax functions that were written like 10 years ago.
So to clean this mess I wanted to make single func to rule them all.

With new bootstrap 5 without jquery I searched for something. I even tried htmx. But I didn't like it. I also don't like js (at that time).

So what to do if you want to remove jquery dependency, don't like js, and don't like htmx because its syntax is meh? Right - you write your own library 😍

## uajax - universal ajax forms

[Demo Requests](https://auct.github.io/uajax/demo)
[Demo Todo App](https://auct.github.io/uajax/demo/todo2.html)

I've made uajax, and it was like add class `js-uajax-form` to any form, and you're done.
There are a lot of features you can enable with data attributes (like hide target, insert into target, remove target, reload, redirect and so on).

I know I'm biased but still this shi* is awesome.



## ajax-button - make any button ajaxed

[Demo](https://auct.github.io/ajax-button/demo)

There were some moments when adding form is too much, I needed to make uajax for single button. So I made function ajax-button to make button ajaxed. Today I published it. Adding settings made it 2x size, in original it was a bit simpler :(. Feel free to modify it.


## Conclusion
Sometimes, when you need something and can't find, you can make it.