teleren/devto huggingface dataset:
Download image from URL in Kotlin
Tags: kotlin, android, mobile
Published: 2023-02-20 23:50:41

 ![Download image from URL in Kotlin](https://needone.app/content/images/2023/01/Download-url.png)

In Android, we can get the image from synchronously and asynchronously, but it is more common to see in the later.

## Download image synchronously

To download an image from a URL in Kotlin, you can use the `URL` class and the `readBytes` function from the `kotlin.io` library. The `URL` class represents a uniform resource locator and provides methods for creating and parsing URLs. The `readBytes` function can be used to read the contents of a file or a stream as a byte array.

Here's an example of how to use the `URL` and `readBytes` to download an image from a URL in Kotlin:

```kotlin
import java.net.URL
import kotlin.io.readBytes

fun main() {
    val url = URL("https://www.example.com/image.png")
    val imageData = url.readBytes()
    // TODO: Save the image data to a file or display it in an ImageView
}

```

In this example, we create a `URL` object using the URL of the image as a string. We then use the `readBytes` function to read the contents of the URL as a byte array. The byte array contains the data for the image, which can then be saved to a file or displayed in an `ImageView`.

## Download image asynchronously

To download an image from a URL in Kotlin asynchronously, you can use a coroutine combined with above method. For more

```kotlin
import kotlinx.coroutines.*
import java.net.URL
import kotlin.io.readBytes

fun main() {
    // Create a new coroutine scope
    val scope = CoroutineScope(Dispatchers.Default)

    // Launch a new coroutine in the scope
    scope.launch {
        val url = URL("https://www.example.com/image.png")
        val imageData = url.readBytes()
        // TODO: Save the image data to a file or display it in an ImageView
    }
}

```

In this example, we create a new coroutine scope using the `Dispatchers.Default` dispatcher, which runs the coroutine on a shared background thread pool. We then launch a new coroutine in the scope using the `launch` function. Inside the coroutine, we create a `URL` object using the URL of the image as a string and use the `readBytes` function to read the contents of the URL as a byte array. The byte array contains the data for the image, which can then be saved to a file or displayed in an `ImageView`.
Using the Or statement in JS
Published: 2023-02-20 23:23:52

const response = "Reed";

// let username;

// if (response) {
//   username = response;
// } else {
//   username = "guest";
// }
// const result = 'Reed' || '';
// console.log(result);

const username = response || "guest";

console.log(username); // this will give you "Reed"
useContext in React
Published: 2023-02-20 23:22:43

I have just finished working on another project, and one of the project requirements was to persist the user's state in the front 
end with `useContext`. So, I had to relearn how to use `useContext`. I wanted to share some of the things I learned.

Typically our state is stored in a component where all the components that need access to it can easily get access to it. In this project, since most of my components needed access to the user, I made a `userContext`. To start, you need a file to store your context in. I created a `context` folder in my `src` folder, and a `user.js` file in the `context` folder. Then, create the context and the context provider.
Create the context
```
const UserContext = React.createContext();
```
Create a provider component
```
function UserProvider({ children }) {
  return <UserContext.Provider value={{ user, setUser }}>{children}</UserContext.Provider>;
}
```
The value is the context that I am passing, and it will be available to the children of the provider. Now that it's created it needs to be passed in to the application. To do this, I import the `UserProvider `into the app and wrap the components in `UserProvider`. I also no longer need to pass the `user` and `setUser` props into the component.
```
...
import { UserProvider } from "../context/user";

function App() {
  return(
    <UserProvider>
      <AComponent />
    </UserProvider>
  )
}
...
```
Now, I need to add the context to the component I'm going to use it in.
```
import React, { useContext } from "react";
import { UserContext } from "../context/user";

function AComponent() {
  const { user, setUser } = useContext(UserContext);

  {now you have access to your context values here}

  return (
    {and here too}
  )
}
```
And, that is how you use context to store state globally. One thing that gave me a lot of trouble was, when I was initializing my user state I initialized it with an empty array rather than null. While I probaly could have rewritten the code to make the first way work, it was giving me a lot of trouble, and changing it to null really helped me out.
Not like this,
```
const [user, setUser] = useState([])
```
but like this.
```
const [user, set user] = useState(null)
```
R2Park
Published: 2023-02-20 19:42:50

R2Park: The Future of Parking Management

Parking is a common issue in cities and urban areas around the world. Finding a suitable parking spot can be a daunting task, especially during peak hours. Moreover, the inefficient management of parking spaces leads to a lot of wasted time and resources. However, the advent of technology has brought about some innovative solutions to this problem. One such solution is R2Park.

[R2Park](https://theparkingarea.com/) is an advanced parking management system that utilizes artificial intelligence and data analytics to optimize the use of parking spaces. The system is designed to provide real-time information to drivers, enabling them to quickly locate an available parking spot. It also provides parking lot owners with valuable data on the usage of their parking spaces, enabling them to make informed decisions and improve their operations.

The R2Park system works by using cameras and sensors to monitor the availability of parking spaces. The data collected is analyzed in real-time to provide accurate information on the number of available parking spots. The information is then relayed to drivers through a mobile app, allowing them to quickly find a suitable parking spot. The app also provides other useful features such as the ability to reserve a parking spot in advance and pay for parking through the app.

In addition to benefiting drivers, the R2Park system is also advantageous for parking lot owners. The system provides them with valuable insights into the usage of their parking spaces, enabling them to optimize their operations and generate more revenue. The data collected by the system can also be used to identify trends and patterns, allowing parking lot owners to make informed decisions on pricing, capacity, and other factors.

In conclusion, the R2Park system is a game-changer in the parking management industry. By utilizing the latest technology, it offers a smart and efficient solution to the parking woes of drivers while also providing valuable insights to parking lot owners. With the increasing demand for parking spaces in urban areas, the adoption of R2Park is sure to grow in the coming years.
Crackerland.org - ¡el mejor sitio de software libre!
Published: 2023-02-20 23:18:20

Crackerland.org es un sitio web que ofrece software libre de alta calidad para su descarga gratuita. Como uno de los principales sitios de software libre, Crackerland.org (https://crackerland.org/) se ha ganado una gran reputación entre los usuarios que buscan software gratuito y de calidad para sus necesidades de computación.
Day 698 : Makeshift
Tags: hiphop, code, coding, lifelongdev
Published: 2023-02-20 23:11:07

_liner notes_:
- Saturday : Basically spent the day recovering from Friday night "hosting" an event. Towards the end they told me it was an elaborate ploy to get me to hang out. haha I didn't get back to my place till like 4am. haha Basically spent the day resting and prepping for the show. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of Trugoy of De La Soul holding a frame with a platinum record of "Three Feet High and Rising" with the words Feb 18th 2023 R.I.P. Trugoy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4xc6osamg0xvr9ilssg.jpg)

- Sunday : Somehow I messed up my back. I woke up and could barely move, but I had to get up to do the Sunday study sessions at https://untilit.works I think by doing the sessions and keeping active, it may have helped make my back feel better. I was pretty productive. Made some progress on my side project. Ran into an issue where if I update the environment variables they don't change in the site unless I build and deploy the site again. My plan was to use the environment variables as a makeshift database. This kind of screws me over. I'll come up with an alternative, though. Got to watch the new "Trigun: Stampede" episode. Pretty good.

- Professional : Today is technically a holiday, but I don't celebrate US Presidents due to the whole, slavery, racism, mass incarceration thing. haha Had a meeting with some of the team. Did a little work on updating a repo. Took it kind of easy today.

- Personal : This whole not being able to use the environment variables as a database is going to be a problem. I really need to come up with a solution.

![On top of a grass and flower filled mountain top looking at other mountains in the distance at sunset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ze5zdnafcznvoqf0ss29.jpg)

Going to take some time and see what I can come up with as an alternative for a database. I don't want to have another dependency that people will have to set up in order to use the application. I'll figure it out somehow. I'll probably come up with a solution while watching "Vinland Saga".

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube bypR8LL34nU %}
Recover background audio with librosa and saving it with soundfile
Tags: python, music
Published: 2023-02-20 23:00:00

In my [previous article](https://dev.to/highcenburg/separate-vocals-from-a-track-using-python-4lb5) I separated the vocals from the instruments but didn't save it. This article is aimed towards saving the audio from `IPython.Audio` in `IPython`. The full spectrum, foreground spectrum and background spectrum from my [previous article](https://dev.to/highcenburg/separate-vocals-from-a-track-using-python-4lb5) looked like this: ![Audio spectrum of the track](https://res.cloudinary.com/practicaldev/image/fetch/s--HDJYvObw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7zcf4kqgcjm42wj5hh3.png)

The other goal I tied myself to was to play the audio from the instruments only which I'll also show in this article.

To save the audio, we use `soundfile`'s `write()` function and get the audio data, sample rate and save it as `.wav`

```python
import soundfile as sf

sf.write('Instruments.wav', x_background, sr, subtype='PCM_24')
y, sr = librosa.load('Instruments.wav')
ipd.Audio('Instruments.wav')
```

In recovering the background audio or instrument audio from the masked spectrum, we only use the `istft()` function from `librosa`.
```python
# Recover the background audio from the masked spectrogram
x_background = librosa.istft(S_background * phase)
# playback audio
ipd.Audio(data=x_background[90*sr:110*sr], rate=sr)
```

That's it.

To view code from the Jupyter notebook you can head over to [this article](https://colab.research.google.com/drive/1QnAhHpW9LrW9JLpjXF-xdH9Z7DtazW8Y#scrollTo=GhhM8KqaLwqV)
Storybook 7.0 + React.js + TailwindCSS + CSS modules + Typescript setup that #$%& works
Tags: storybook, react, tailwindcss, typescript
Published: 2023-02-20 22:48:18

UPDATE: when writing this I have found [THIS article](https://storybook.js.org/recipes/tailwindcss), that, coincidentally, was also updated around the same time.

`<rant>`

Setting up a storybook project should NOT be THAT hard. I mean, everyone uses Storybook, it’s the only viable option out there when working on a design system. 

TailwindCSS is at the stage when it’s already gained the momentum. Even large companies are considering it. Practically EVERY front-end dev has already worked with it.

And CSS modules have beed out there for more that 6 years I believe. And even though in JavaScript terms it’s a dinosaur, a legacy, it’s very much not dead and still a top choice for many, including moi.

Not even going to say anything about Typescript and React. If you’re not using TS or never worked with TS today - you’re unemployable. And React is a standard. 

Surely there should be an article somewhere on how to set all this up correctly. SURELY?!

`</rant>`

Well, after 4 hours of googling and trial and error, I finally was able to crack this “OH SO UNUSUAL” tech stack setup. Here is [the repo](https://github.com/snikidev/storybook-tailwindcss-setup), and let me highlight two points.

## Point 1: Webpack 5 builder and framework

Webpack 4 is still the default choice for Storybook, but Storybook has already released support for Webpack 5, so I see no reason why we’d stick to v4. Important note here is that since we’re updating the `core` property, we should also update the `framework`

```jsx
// main.ts
export default {
  framework: '@storybook/react-webpack5',
  core: {
    builder: '@storybook/builder-webpack5',
  },
}
```

## Point 2: Don’t overwrite default Webpack rules, but add more instead

It (unfortunately!) became a habit for whatever reason, that if I need to add some custom loader, I exclude the default rule from the array and re-create it. We shouldn’t do that, because it messes up the Storybook config in a way that it becomes hard to unfuck it. 

Because we need to add a PostCSS loader to our `.css` files, don’t try to re-create css rule with all the `css-loader` and `style-loader` etc., but just push that extra rule to the end of that array, and be done with it.

```jsx
// main.ts
export default {
  ...
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: { tailwindcss: {}, autoprefixer: {} },
            },
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    })
    return config
  },
  ...
}
```

That’s pretty much all I wanted to say. Those two points took me a while to understand, so hope your found my post within your first hour of searching. 😅
Python Learning Project - TicTacToe
Published: 2023-02-20 22:38:57

As part of my Python learning course I needed to create a simple terminal game or project. I used a tutorial walkthrough to replicate the code for a simple TicTacToe terminal game. It was a good level for someone very new to Python as I was still learning new things as I went through it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jhmm5kztdsqxvhwrzqx.PNG)

The code is a few variables, helper functions and the majority of the logic is in a while loop with some accompanying if conditions. The game board uses a dictionary. 

I could upgrade it in the future with a more graphical interface rather than terminal for continued learning. It was a good tutorial and helped me learn a few new things that weren't covered in my current course work. Credit to https://www.youtube.com/@CDcodes for the very helpful tutorial. 

https://github.com/CodeValentine/TicTacToe_Project
💼 Building a Personal Portfolio Website from Scratch with HTML, CSS,
Tags: webdev, programming, tutorial, beginners
Published: 2023-02-20 22:34:30

Are you looking to create a stunning personal portfolio website using HTML, CSS, and JS? 

Look no further! In this tutorial, we'll walk you through step-by-step on how to 

build a responsive personal portfolio website using these powerful tools. 

Whether you're a freelancer, designer, developer, or simply looking to showcase your work, 

having a personal portfolio website can help you stand out in a crowded market. 

With HTML, CSS, and JS, you have complete control over the design and functionality of your website, 

allowing you to create a unique and personalized experience for your visitors. In this video, 

we'll cover everything from setting up your development environment to creating the layout,

 styling the page, and adding interactivity with JavaScript. 

We'll also provide some tips and best practices to help you optimize your website for search engines and improve your visibility online. 

🔔 Subscribe for more!

 https://www.youtube.com/channel/UCHI9Mo7HCSlqum1UMP2APFQ 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

🔗 Source code 

https://upfiles.com/NaQ945E6

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

☝ Start developing the project (base files + images) 

- Click on the UpFiles link 

- Click the green button (code) 

- Click Download ZIP 

- Extract the project to the desired location 

📂Assets 

Icons: https://boxicon.com/

 Fonts: https://fonts.google.com/

 Swiper Js: https://swiperjs.com/get-started

 Typed Js : https://github.com/mattboldt/typed.js/

 Reaveal Js: https://scrollrevealjs.org/

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

🔥 Follow me! 

Facebook 

https://bit.ly/3IMfk04

 Instagram 

https://bit.ly/3GHoQyT

 Twitter 

https://bit.ly/3IOBEqc

 Linkedin 

https://bit.ly/3INnwNY

 Tags: 

#responsiveportfolio #portfoliohtmlcssjs #webmonster #html #css #javascript #webdesign #website #react 

personal portfolio website, HTML, CSS, JavaScript, web development, responsive design, tutorial 

So, make sure to watch this video till the end, and don't forget to hit the like button and subscribe to our channel for more web development tutorials and tips!



Link of Video :

https://youtu.be/dGaLXZ8A0kU


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tirj3pn77l5r901a3c1.jpg)
Helpers por que utiliza-los?
Tags: programming, beginners, javascript, typescript
Published: 2023-02-20 22:34:28

## O que são "Helpers" ? 

Helpers São funções frequentemente usadas em varios locais da aplicação e que devem ser abstraidas para facilitar a manutenção e legibilidade do código.  

## Exemplo Prático !

Geralmente em um e-commerce, existe vários 
locais da aplicação que necessite renderizar o preço em formato de preço, 
pois nas API's geralmente não nos serve já no formato desejado para renderização no front-end.

**Exemplo de um retorno de API.**

```
{
   "id" : 2,
    "name" : "Café Espressso",
    "price" : 7.00,
     "whishlist" : true,
}
```

## Criando um Helper

Para criar um Helper basta criar uma pasta e um arquivo dentro da pasta com 
o nome coerente da função que seu Helper irá desenvolver  

**Exemplo da estrutura de pasta .**


![estrutura de pasta](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmdv50moqni4so017jzo.png)

Para deixar nosso Helper exposto é só usar o comando export na constante ou método 

```
export const currency = (value: number) => {
    return new Intl.NumberFormat('pt-BR', {
       style: 'currency',
       currency: 'BRL',
    }).format(value);
}
```

## Usando o Helper 

Para usar o Helper basta importa-lo e utilizá-lo conforme a necessidade ,
importante sempre lembrar utilizar Helper para não ficar  repetindo código e de facilitar a manutenção.
  
**Exemplo de código**

```
import { currency } from "../../helper/currency";

```

Agora sempre que precisar converter um numero para Preço (Moeda) é so 
importar e invocar o metodo e passar o valor por parametro. 

**Exemplo de código**

```
const valor = 0.00

currency(valor) //r$0,00

```

## Importante

Esse Helper foi para um exemplo de preço , porem sua aplicação deverá ter
outros Helpers para diferentes apelos .
O objetivo é o conceito de como se pode usar helper e te ajudar a programar
de forma mais organizada. 
  

**Gostou do contéudo ?**

Manda um feedback  compartilhe com seus colegas . 

github : @rogeriorioli
instagram : @oriolidev
Build & Deploy a Golang Lambda to AWS (using Console & Terraform) and Expose using API Gateway
Tags: aws, go, lambda, devops
Published: 2023-02-20 22:29:45

This video is a walkthrough of process to build and deploy a GoLang Lambda to AWS. The Lambda performs a query on DynamoDB table and responds with the records. The Lambda is exposed via an API Gateway to create an API which responds with the DynamoDB records.  

https://youtu.be/Zui42HfEX04
Recursos para iniciar como developer
Tags: beginners, programming, tutorial, webdev
Published: 2023-02-20 22:27:59

Siempre que alguien quiere comenzar en el mundo del desarrollo de software las preguntas que surgen por lo general son: cómo puedo comenzar? a quién le puedo preguntar? quién puede ser mi mentor?, etc.

Hoy intentaré solucionar esas preguntas y ayudar un poco con algunos recursos en internet que nos pueden ayudar a mejorar, aprender y retar nuestros skills.

## Documentación :books:
Siempre debemos apoyarnos mucho en las documentación de las herramientas que utilicemos, acá les dejo algunas:

[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[React](https://reactjs.org/docs/getting-started.html)
[Angular](https://angular.io/)
[Vue](https://vuejs.org/guide/introduction.html)
[NodeJS](https://nodejs.org/api/)
[Python](https://docs.python.org/3/)

## Canales en youtube :tv:
Al día de hoy, hay muchas personas que les gusta compartir conocimiento por medio de youtube, donde explican un tema en particular, el manejo de un frameworks y/o librería, y hasta hacen bootcamps completos, algunos de ellos son:

[Fazt](https://www.youtube.com/@FaztCode)
[Carlos Azaustre](https://www.youtube.com/@CarlosAzaustre)
[MiduDev](https://www.youtube.com/@midudev)
[Leifer Mendez](https://www.youtube.com/@LeiferMendez)
[Dominicode](https://www.youtube.com/@DominiCode)
[Khristian Moreno](https://www.youtube.com/@khriztianmoreno)
[Julian Duque](https://www.youtube.com/@julianduque)
[Oscar Barajas](https://www.youtube.com/@gndx)
[Mouredev](https://www.youtube.com/@mouredev)
[Hola Mundo](https://www.youtube.com/@HolaMundoDev)

## Platafromas de pago :dollar:
En lo personal uso mucho Udemy y Plazi, y la vdd me han ayudado mucho a mejorar mis skills:

[Platzi](https://platzi.com/home)
[Udemy](https://www.udemy.com/)
En Udemy siempre recomiendo mucho a Fernando Herrera, explica muy bien los temas, acá les dejo su sitio web, frecuentemente regala bonos de sus cursos:
[Fernando Herrera](https://fernando-herrera.com/#/)

Estos son algunos recursos que nos pueden ayudar, existen muchos mas que por el momento se me pueden estar pasando, pero a medida que encuentre iré actualizando este post, así que don't worries :wink: 

##Nos leemos pronto!!! :rocket:
Examples of Falsy Values in JS
Published: 2023-02-20 22:24:32

// What will the following console logs display? (they're all true and false)

// console.log("Challenge 1:")

// console.log(!undefined); // true
// console.log(Boolean(NaN)); // false
// console.log(false === false); // true
// console.log(5 === "5"); //false(comparing number to string)
// console.log("Hello" == "hello");//false(loose comp. one has caps)

console.log("Challenge 2:")

console.log(Boolean(0)); // false
console.log(Boolean("0")); // true (string)
console.log(Boolean("")); // false
console.log(!null); // true
console.log(!!"hello"); // true (you're flipping the string around twice - true-> false -> true)
Insert a Node at The Tail of a Linked List Hackerrank Solution
Tags: hackerrank, python, linkedlist, insertnodetail
Published: 2023-02-20 22:15:09

If you’re looking to sharpen your Python skills on Hackerrank, one common challenge you might encounter is how to insert a node at the tail of a linked list. This problem requires you to understand the basic principles of linked lists and how to manipulate them in Python. By breaking the problem down into smaller steps and using built-in Python data structures, you can develop an elegant solution to this Hackerrank problem.

Solution to the Problem here
https://hecodesit.com/insert-node-tail-hackerrank/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8y9xbwwlgj2ldfpvon08.png)