teleren/devto huggingface dataset:
How to migrate rails sprockets to propshaft
Tags: rails, tutorial, programming, webdev
Published: 2022-03-16 16:08:21



Propshaft has a smaller scope than sprockets and requires you to rely on the [js-bundling](https://github.com/rails/jsbundling-rails) and [css-bundling](https://github.com/rails/cssbundling-rails) gems to handle the building of CSS and JS assets. Read the [docs](https://github.com/rails/propshaft/blob/main/UPGRADING.md) for an extensive upgrade guide.

To migrate from webpacker to js-bundling, you can read [this article](https://dev.to/thomasvanholder/how-to-migrate-from-webpacker-to-jsbundling-rails-esbuild-5f2).

---

1. [Depreciate Sprockets](#1-depreciate-sprockets)
2. [Install Propshaft](#2-install-propshaft)
3. [Migrate Asset Helpers](#3-migrate-asset-helpers)
4. [Display inline SVG](#4-display-inline-svg)

---

## 1. Depreciate Sprockets

1. Remove the `gem "sprockets"` from Gemfile
2. Delete the `config/assets.rb` file
3. Delete the `assets/config/manifest.js` file

---

## 2. Install Propshaft

Add to Gemfile
```rb
gem "propshaft"
```

---

## 3. Migrate asset helpers
Replace asset helpers like `image_url` and `font_url` in css files with standard URLs because Sprockets uses absolute paths while Propshaft uses relative paths. Make sure to prepend the asset path with `/` to link to the asset.

```css
/* old */
image_url("home.png")

/* new */
url("/home.png")
```

---

## 4. Display inline svg

Before Propshaft loading inline SVG requires to dump a long SVG content inline or to leverage a gem like [inline_svg](https://github.com/jamesmartin/inline_svg). Propshaft offers the ability to render inline svg's.

```rb
Rails.application.assets.load_path.find('logo.svg').content
```
A volunteer project that will change the world
Tags: programming, opensource
Published: 2022-03-16 16:03:24

Hello everyone, I'm one of cyberwarriors from Ukraine.
I want to create a project that will help you to exchange your needs free of charge.

Everyone will be able to make a post about their needs
( For example: i need new shoes )
Each user who will visit the site will see that someone needs help (for example, new shoes) and the user can choose one of ( or more ) and help money ( or really buy shoes for a person who needs it ).

The help will be in the form of ordinary money or cryptocurrencies ( or give the thing that is needed ).

I need a team to develop this project.
After this project is developed, we will launch it in Ukraine because it is very necessary in this country after the war.
I am very much committed to your support, because I do not have friends.
If you want to join the project write to me in a personal message, or in my messengers.

My discord: Katsuki#4163
My telegram: @chorrny

I hope for you💖

UPDATE: Technology stack: 
ASP.NET WebAPI + React(Angular)
also need UI/UX Designer
Build A Tkinter App (Part 2 / Widgets-2) - Python
Published: 2022-03-16 13:29:14

Today, we continue our course about create a tkinter application with Python. We are going to learn these 3 widgets : Input; Text; Canvas.

So, if you don't have already see the others part of the course, let's watch this.

---

# <u>Input:</u>

An input widget is a single line entry. We can create with like this :

```python
input_widget = Input(app)
input_widget.pack()
```
And like the Label and Button widgets, you can add the arguments about text : fg, bg, font, width, height. The width isn't in pixel in character.

# <u>Text:</u>

Now, a Text widget is an input but more wider then the Input because you can, like a notepad, write on multiple lines.

```python
text = Text(app)
text.pack()
```
_Same arguments for text, ect..._

# <u>Canvas:</u>
A Canvas is a surface where you can draw or place images.
For an image :

```python
canv = Canvas(app, width=500, height=300, bg="white") # width, height in pixels
img = PhotoImage(file="image.png") # Here we load an image
canv.create_image(250, 150, image = img) # 250 -> position x, 150 -> position Y
canv.pack()
```
You must know that the 0;0 in a canvas isn't at the middle of it but in the left top corner.

For a circle :
```python
canv = Canvas(app, width=500, height=300, bg="white")
canv.create_circle(200, 100, 300, 200) # (x0, y0, x1, y1)
canv.pack()
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhq7hh9fjuxcbenllcvv.png)
 
For more informations about figures that tkinter can support. Check this out : http://tkinter.fdex.eu/doc/caw.html

---

Now, you know the main widgets of Tkinter. In the next post, we'll see the bind method and the command argument in Button widget. And this course will be finish.
So, have a nice day. And see you soon. Bye ! 👋👨‍💻
Hiring middle Angular Developers #hiringnow #fullstackdevelopers #Poland
Published: 2022-03-16 16:00:20

We are hiring now #Angular_Developers with an opportunity to try yourself in the backend development as well! 🔥🔥🔥
🔥ARMO is on a mission to create the future of Kubernetes workload security. 
🔷ARMO has launched World’s First Open-Source Kubernetes Testing Tool Compliant with NSA & CISA Hardening Guidance, which has now more than 15 000 of users and 4000 stars on #Github.
Details: https://lnkd.in/dGhGXgm5
Feel free to contact me in DM or via email, alina.malysh@allstars-it.com
Prisma ORM with Node JS/Nest JS
Published: 2022-03-16 15:46:16


## Prisma ORM with Node JS

#### originally published at medium 
https://medium.com/tkssharma/prisma-orm-with-node-js-17c0b72faf32

Guys we will take a look at different ORM and ODM in the node js world to support database integration

![](https://cdn-images-1.medium.com/max/2158/1*vb6atjF67cPwFKXR8lww_w.png)

What is Prisma ORM

### Next-generation Node.js and TypeScript ORM

Prisma helps app developers **build faster** and **make fewer errors** with an open-source database toolkit for PostgreSQL, MySQL, SQL Server, SQLite, and MongoDB (Preview). from [https://www.prisma.io/](https://www.prisma.io/)
Prisma is an [open-source](https://github.com/prisma/prisma) next-generation ORM. It consists of the following parts:

* **Prisma Client**: Auto-generated and type-safe query builder for Node.js & TypeScript

* **Prisma Migrate**: Migration system

* **Prisma Studio**: GUI to view and edit data in your database

Prisma Client can be used in *any* Node.js (supported versions) or TypeScript backend application (including serverless applications and microservices). This can be a [REST API](https://www.prisma.io/docs/concepts/overview/prisma-in-your-stack/rest), a [GraphQL API](https://www.prisma.io/docs/concepts/overview/prisma-in-your-stack/graphql), a gRPC API, or anything else that needs a database.

### Why Prisma

Working with relational databases is a major bottleneck in application development. Debugging SQL queries or complex ORM objects often consume hours of development time.

Prisma makes it easy for developers to reason about their database queries by providing a clean and type-safe API for submitting database queries which returns plain old JavaScript objects.

**My honest opinion after using Prisma is Yes it is better and solving lot of issues which we face with other ORM like database migration managements, Prisma CLI, Prisma studio and Prisma client are powerful tools.**

When it come to API development, There are many possible combinations to write APIs and to support the integration use ORM libraries like TypeORM, Sequelize, Prisma, Mongoose, etc

* postgres- RDBMS

* mongodb- NO SQL

* mysql- RDBMS

* neo4j — graph DB

In this playlist i have covered prism Integration with Node JS and different SQL and NoSQL databases like

* express + prisma + postgres

* express + prisma + mongodb

* nestjs + prisma + postgres

* nestjs + prisma + mongoose

{% youtube Mzu3u0CsEm4 %}

We are starting with basics to advance application managing all different relationships in the RDBMS database

We have covered

* managing migrations

* setting up Prisma with node js apps express or nestjs

* nestjs with Prisma Module and postgres database

* Prisma client for managing integration apis

Reference

* [https://www.prisma.io/docs/concepts/overview/what-is-prisma](https://www.prisma.io/docs/concepts/overview/what-is-prisma)

* https://www.prisma.io/docs/concepts/overview/why-prisma

* [https://www.prisma.io/docs/concepts](https://www.prisma.io/docs/concepts)

* [https://www.prisma.io/client](https://www.prisma.io/client)
Testing bot protection of an API
Tags: testing, devjournal, saas, programming
Published: 2022-03-16 15:32:33

Hello Developers! 

I just wanted to share an important update for BotMeNot - testing bot protection of an API is now possible!

How can you perform such test? It's very simple, really. 

1. Head over to [BotMeNot](https://botmenot.com/) & create an account (or login)
2. Select 'API BOT TEST'
3. Fill out the required fields
4. Click 'START TEST'
5. That's it - you'll have the results in a matter of minutes! 

Let me know if you've got any questions.
encrypt dns [devuan linux]
Tags: linux, privacy, bash
Published: 2022-03-16 15:21:41

let’s encrypt dns with forked dnscrypt-proxy for devuan in 6 steps

```
sudo apt install dnscrypt-proxy
sudo nano /etc/dnscrypt-proxy/dnscrypt-proxy.toml
```

modify
listen_addresses = [‘127.0.0.1:53’]

edit server_names
https://dnscrypt.info/public-servers

example
server_names = [‘cloudfare’,’ahadns-doh-ny’]

```
echo “nameserver 127.0.0.1” | sudo tee /etc/resolv.conf
```

change resolv.conf attributes to immutable

```
sudo chattr +i /etc/resolv.conf
```

restart services

```

sudo service network-manager restart
sudo service dnscrypt-proxy restart
```

check

https://dnsleaktest.com
OpenPGP identity proof
Published: 2022-03-16 15:08:06

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/af6c280c2a34d3f39bed9366d397e9be9e6898fa) to [this dev.to account](https://dev.to/kytta). For details check out <https://docs.keyoxide.org/understanding-keyoxide/identity-claims-proofs/>

[Verifying my OpenPGP key: openpgp4fpr:af6c280c2a34d3f39bed9366d397e9be9e6898fa]
A simple but powerful web framework for node.js-aex
Tags: javascript, webdev, node, typescript
Published: 2022-03-16 15:08:02

A framework prepared for web.

It supports

1. object-oriented programming
2. expressjs middlewares
3. async/await 
4. Web Straight Line Theory
5. decorators/annotations
6. handy web processes like data parsing/filtering, error handling, websocket support

It separates business logic from web logic where MVC is none necessary.

It is simple but powerful.

The web straight line theory can be drawn like this:

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

A very simple example can be like this:

```typescript
import { Aex, http } from "@aex/core";

class Helloworld {
  public message: string;
  constructor(message) {
    this.message = message;
  }
  @http("/")
  public async all(req: any, res: any) {
    res.end(this.message);
  }
}

const aex = new Aex();
aex.push(Helloworld, "Hello world!");
aex.prepare().start(8086);
```

And when you visit the server, you will get the output message:

```bash
Hello world!
```


You can check it [here](https://github.com/calidion/aex) for more information.
How Science and Technology is impacting our Society?
Tags: productivity, career, computerscience, ankitgupta
Published: 2022-03-16 14:53:06

Technology has advanced into many areas of our lives, making information more accessible, improving communication, changing transportation, and the list goes on.

While it is easy to sit back and benefit from a plethora of technological advancements, it is crucial we do not become blind to its effects on society. Today, society is hugely reliant on technology and showing no signs of curtailing its dependence. When thinking about technology impacting our lives, what comes to mind may be more extreme than what is currently at play. Small aspects of everyday life in society are changing, or have already changed so drastically that it is merely just a societal norm.

**_Technology can make our lives easier, but with each benefit comes a potential cost._**

We may not have flying cars yet, meta and artificial intelligence has not taken over the world, but technology is still influencing society. Something simple to notice on the surface of technologies affects are that people no longer memorize phone numbers. Smartphones and most phones today, in general, can carry hundreds of phone numbers that are all a click away. If you lost your cell phone, and all its contacts, you’d have no idea how to get in touch with anyone.

We can still advance technologically without impacting society too immensely by understanding these costs and minimizing them. There is a balance that needs to be found between correctly using technology but knowing when to turn it off. Finding this balance is in the hands of the people though, and will ultimately influence our society for generations to come.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/migsependi7c3d8eg783.jpg)
 
Thanks for reading till the end! Hope it helps…

---

_Connect me on Twitter for regular updates on such informative contents or just to say Hi! 👇
@_ [**MrAnkitGupta_**](http://twitter.com/MrAnkitGupta_)

_I'll be happy to connect you on my socials_ 👇
[**Ankit Gupta**](ankitgupta.bio.link)

_Happy Leaning!_
Launching our first SaaS product
Tags: qr, qrcode, qrcodegenerator, script
Published: 2022-03-16 14:47:46

We have just launched our first SaaS product, **[Qrcodex](https://qrcodex.org)** an advanced QR code generator.
This is a Beta version, we would like to hear your advice or recommendations to improve the tool.

We appreciate your support.

Best regards.
PHP Namespaces are not the same as the Directory Structure
Tags: php, composer, namespaces, classes
Published: 2022-03-16 14:46:03

Let's start with a question: We have a PHP class *SalesController.php* with the namespace `App/Http/Controllers` and it is located at `app/Http/Controllers/SalesController.php`

Where do you think the class *Sale.php* with the namespace `App/Domain/Sales` would be located?

Did you say `app/Domain/Sales/Sale.php`? Are you sure?

...

Well, it is located at `src/Domain/Sales/Sale.php` and it works.

**Why so**

Thanks to the [PSR-4](https://www.php-fig.org/psr/psr-4/) autoloading, we can define the namespaces prefix and their corresponding base directories.

Following is the composer configuration to clear the doubt:

```JSON
{
    "autoload": {
        "psr-4": {
            "App\\Http\\": "app/Http",
            "App\\Domain\\": "src/Domain"
        }
    }
}
```

**Reasoning**

First of all, namespacing allows you to divide your code files into multiple groups. That allows you to set the same name for two different classes as far as they belong to different namespaces.

This flexibility allows developers to follow their own conventions over the framework conventions keeping all the parties happy.

One additional benefit when using namespaces in the code is easier directory renames. No need to do 'find & replace' in all the files that require your classes. Changing the base directory of the namespace does the job.


**Fun Fact**

You can set [multiple base directories](https://www.php-fig.org/psr/psr-4/examples/#class-example) for a single namespace prefix. Example:

```JSON
{
    "autoload": {
        "psr-4": { "Domain\\": ["src/", "lib/"] }
    }
}
```

Not sure why one would go for this as it is a bit confusing. But it's possible, however.

**Story ends**

In case you cannot find a class or directory by following the namespace words, do check the autoload config once. You may get the answer. Sayonara!

---

_Credits - Cover Photo by <a href="https://unsplash.com/@randyfath?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Randy Fath</a> on <a href="https://unsplash.com/s/photos/randy-hath-chess?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>_
Rise Up With Innovative Ideas
Tags: hackwithdg
Published: 2022-03-16 14:44:12


**“I believe you have to be willing to be misunderstood if you’re going to innovate.“**
                                      -Jeff Bezos-

### Introduction

**A**ctually I were not experienced Deepgram before i participate for this Hackathon. But I needed to participate for this amazing Hackathon badly. Because I have addicted to participate Hackathons and Dev Community.  Hence I tend to find about this application. It seems like Interesting and efficient application for our society.

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

### My Deepgram Use-Case

According to me, Deepgram is a web application which provides facility to developers with the tools which need to easily add AI speech recognition to applications. We can handle practically any audio file format and deliver at lightning speed for the best voice experiences using Deepgram. Therefor this is super cool application for people who have disables on writing and people have lack knowledge on writing. And the best thing is at present people are busy with day-to-day works. By translating sound to words save time we waste for typings.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qioti6cgki8pay6fm4kb.png)
### My Deepgram Use-Case

- The problem I saw in there is In the world every person do not have laptop or desktop computer. But everyone use smart phones. Although there is a web application for deepgram they do not have mobile application or something like that.
Then my Suggestion is to build a mobile App for this. Then people will be convenient with this application and it decreases the accessibility, usage of this application. 

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

- And the next problem is there is no that much user friendly interface for interact with their users.
In the Deepgram I saw that they are communicating with users by using email and Facebook Community. But it will much easier and efficient if they have chatbot or something in their application also. It is convenient to resolve the problems of users and gather new suggestions also. 


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

- The Last suggestion from my side is Add some Pre-Converted files.
there are many famous and well known books and documentations in the world. if you can add some Audio files as convention of those books it will be help to users and may causes to expand the user base also. This can be group according to the particular fields like literature, IT, Finance etc.  

### Conclusion

This is very useful application with nice service. Keep it up with new innovative things.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd8me47zsoqd122zrugv.jpg)
What do you wish you knew when you worked you first entry-level tech job?
Tags: discuss, career, watercooler, beginners
Published: 2022-03-16 14:33:07

No matter how prepared (or not) you felt for your first job in tech, there’s inevitably some things you wish you had done differently.

If you’re in an entry-level job now or hope to be in one soon, what’s something about the industry you want to know more about?
Paracetamol.js💊| #80: Explica este código JavaScript
Tags: javascript, webdev, spanish, beginners
Published: 2022-03-16 14:30:39

## **Explica este código JavaScript**

**¿Cuál de las siguientes funciones es una Higher Order Function?**

```js
//A
const multiplicar = a => b => a * b ;

//B
const test = (nombre, accion) => {
  return accion(nombre); 
}
console.log(test("Ana", console.log)); //Ana (por consola)
```

A. `muliplicar`
B. `test`
C. Ambas
D. Ninguna

Respuesta en el primer comentario.

---
Setup Redux Step by Step Part 2
Published: 2022-03-16 12:37:46

**In Part 1 we did a basic Setup for React Redux
using Store->Reducer->Actions and Action Types**

- Today we will try to simplify this using Redux Toolkit.
- first we need to install it with "npm install @reduxjs/toolkit"
- What we aim to do is combine the Reducer and ActionCreators in one createSlice function.

**1.) We use configureStore to simplify the store**
This will make it easier to use Middleware later on, and we can easy combine reducers from different files.
e.g /todos.js exports a reducer and /user.js exports a reducer

```
/
import reducer from './todo';
import { configureStore } from '@reduxjs/toolkit';

export default function configureAppStore() {
  return configureStore({
    reducer,
  });
}


```

**2.) We can easy create Actions with createAction**

```
/actionCreators.js
import { createAction } from '@reduxjs/toolkit';

const todoCreated = createAction('ADD_TODO');
const todoRemoved = createAction('REMOVE_TODO');
const updateStatus = createAction('CHANGE_STATUS');
```

This will create 3 actions we can dispatch like this:

```
import configureAppStore from './store/configureStore';

const store = configureAppStore();
store.dispatch(actions.todoCreated({ description: 'Second todo' }));
store.dispatch(actions.updateStatus({ id: 1, status: 'closed' }));
```

**3) But we can also get rid of action creators using createSlice(this will use action creators and reducers under the hood)**


```
/todos.js
import {  createSlice } from '@reduxjs/toolkit';
const slice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (todos, action) => {
      todos.push({
        description: action.payload.description,
        id: ++lastId,
        status: 'open',
      });
    },
    todoStatusChanged: (todos, action) => {
      const index = todos.findIndex((todo) => todo.id === action.payload.id);
      todos[index].status = action.payload.status;
    },
    todoRemoved: (todos, action) => {
      todos.filter((todo) => todo.id !== action.payload.id);
    },
  },
});

const { addTodo, todoStatusChanged, todoRemoved } = slice.actions;
export { addTodo, todoStatusChanged, todoRemoved };
export default slice.reducer;
```

This will create a function with initialState and reducer functions.It will also generate Action Creators.
Dont forget to export the actions , also we need to 
export default slice.reducer

As you can see here:

```
  todos[index].status = action.payload.status;
```
we are mutating state directly, this is only possible because createSlice is using immutability under the hood.
So it will make your code easier to read, and much more easy 
to write.


I hope this explains a little bit how redux toolkit makes things easier for us and how we can use it.
Recursos de imágenes gratis para tus páginas web
Tags: html, css, webdev, spanish
Published: 2022-03-16 14:29:42

## **Bancos de imágenes libres**
* [Unsplash](https://unsplash.com/)
* [Pexels](https://www.pexels.com/es-es/)
* [Gratisography](https://gratisography.com/)
* [Pixabay](https://pixabay.com/es/)

## **Otros recursos**
* [Dynamic Dummy Image Generator](https://dummyimage.com/)
Generador de placeholders de imágenes para pruebas.
* [Irfan View](https://www.irfanview.com/)
Editor de imagenes sencillo.
* [tinypng](https://tinypng.com/)
Optimizador de imagenes