teleren/devto huggingface dataset:
How to use Geocoder Gem for A Rails Back end and React Front End
Published: 2023-01-26 21:44:34


While working with my partner on our ruby on Rails phase 4 project we used MapBox Gl api to allow us to generate addresses and render it on a map. But we hit a wall because our map only works with coordinates lng and lat. We needed something to transform addresses into coordinates. With some research we found geocoder. 



**Geocoding** is the process of transforming a description of a location — such as a pair of coordinates, an address, or a name of a place to a location on the earth’s surface.


**Geocoder gem ** is a geocoding solution for Ruby. With Rails it adds geocoding (by street or IP address), reverse geocoding (finding street address based on given coordinates), and distance queries.


how to install Geocoder 

```
gem install geocoder
```

after installing you want to open up your Rails console
and check to see if you have received  coordinates 


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

 Using rails resource you want to make a locations or places table with no association that holds your  coordinates . Then seed and migrate  your database  use use Geocoder to collect the latitude and longitude for each address and add this to our empty lat/long database columns.

**Geocode our objects ** 
you will need  to add geocoded_by :address to your model.

```
Class Location < ActiveRecord::Base 
  geocoded_by :address 
end
```
This tells Geocoder that we will be using a method called #address to run the geocode, next we need to  do is set up our method.

```
Class Location < ActiveRecord::Base 
  geocoded_by :address 
  def address 
    [street, city, state, country].compact.join(", ") 
  end 
end




```
We can use .compact to leave out any columns that may be nil and then we will convert our array to a string by joining each item at the comma with .join(", ").
 
Now create a call back geocode  method (this can be any thing) which will be used on our locations to receive our needed longitude and latitude.

```
Class Location < ActiveRecord::Base 
  
  geocoded_by :address 
  After_validation :geocode 
  def address 
    [street, city, state, country].compact.join(", ") 
  end 
end
```
You will simply call location.geocode and it will  return a latitude/longitude array.  similar to our pervious example in the rails console
Spyder IDE immediately crashed when hit the debug button
Tags: beginners, spider
Published: 2023-01-26 21:35:05



While optimizing the linear programming with linprog, I needed to update scipy from version 1.4.0 to 1.7.3 as it required to use highs methods. With administrative help, we updated the conda using conda install -c conda-forge scipy=1.7.0 --yes. Luckily, it got updated. However, it is unfortunate that the spyder IDE started to crash when I hit the debug button with the dialog box (Figure_1_01262023.png), where details are:

File "C:\ProgramData\Anaconda3\lib\site-packages\qtconsole\base_frontend_mixin.py", line 138, in _dispatch handler(msg) File "C:\ProgramData\Anaconda3\lib\site-packages\spyder\plugins\ipythonconsole\widgets\debugging.py", line 313, in _handle_input_request if self._hidden: AttributeError: 'ShellWidget' object has no attribute '_hidden'

Note that while crashing, it does not close the interface, but all the run and debug buttons are not working. After then, I could not use the feature of debugging.

Then, I tried to update conda update -n base spyder and reset the spyder environment, but it didn't work, and I needed to restart the spyder IDE.

I appreciate your help with sooner response.

Thanks

Mahesh
Using React H5 Audio Player
Tags: webdev, javascript, react, npm
Published: 2023-01-26 20:08:08

As I get further into my journey as a software engineer, I have spent more time trying to utilize and understand how to use many different [npm](https://www.npmjs.com/) packages. They can be super useful and really streamline the development process, saving you time from building something by scratch and troubleshooting.

I recently came across the [React H5 Audio Player](https://www.npmjs.com/package/react-h5-audio-player) package when planning a project for users to upload and playback music. This package takes care of all the dirty work necessary in building your own media player and also allows for some customization and options. I'm going to discuss how to install, and incorporate this package in your next project

To start, you need to either list this package inside the package.json file OR in a terminal within your project directory - you can run the command to install it. I'll go over each of those steps:

##Inside package.json file:


![package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiktqb7sbf9mzwapb8d6.png)

each of these items listed under "dependencies" is a package that can be utilized when building your code. You can list your Audio Player package in this section by writing 

```
"react-h5-audio-player": "3.8.6"
```
and then once you go begin to build your project, you will run in the terminal 

```
npm install
```
which will go through that package.json file and install all dependencies listed.

##Install from the terminal

If you would rather just install this package directly from the terminal instead, heres how you would do that.

go to the project directory within your terminal, once inside it write the command 

```
npm i react-h5-audio-player
```
this will install the "react-h5-audio-player", and list in as a dependency in your package.json file for you. Once that is done you will have access to that package within your project.

##Using the audio player

theres many different ways you can configure this audio player based on your needs, its worth reading the [documentation](https://www.npmjs.com/package/react-h5-audio-player) or look through this Storybook demo and interact with it or read more information on configurations by clicking the "doc" tab at the top of the page.

![documentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2q6cj96tl7lwdtdy8wa.png)

There are tens of thousands of packages from [npm](https://www.npmjs.com/) that can streamline your development process and make your life as a programmer easier, because why reinvent the wheel, right? I encourage you to look through all the possible packages out there that you may already exist before starting a project and trying to build something from scratch. Happy Coding!
Powerpoint Professionnel Business Plan (HD)
Tags: startup, powerpoint, slide, business
Published: 2023-01-26 20:58:19

**
https://www.templatemonster.com/powerpoint-templates/powerpoint-professionnel-business-plan-302046.html
**
STARTUP Powerpoint has 55 Creative Slides each file in 16:9 (HD). 30 Icon slides- ready to use. STARTUP Powerpoint clean, scalable, colorful and multipurpose. Suitable for Business, Pitch Deck, E-commerce or Product promotion purpose.
Navbar animation in javascript
Tags: javascript, codepen, css, html
Published: 2023-01-26 20:48:03

I create a navbar animation on codepen that you can use in your projet. 
I'd really like to hear your feedback about it :)

https://codepen.io/webdesignwizard/full/PoBevGx


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rb43pwo1mvspv4zpnsb.png)
My first project linked with an external API.
Tags: javascript, node, api, webdev
Published: 2023-01-26 20:43:54

## Introduction

This was my phase 1 project at Moringa school whereby i built a single page application using Html and CSS for the front end and JavaScript that communicated with a public API which i chose.The learning goals of this project were:

- Design feature across a front end.

- The website should have no redirects.

- Integrate JavaScript and an external website.

## The development process
We had to come up with our own project ideas so i thought of a problem that had to be solved. There are many weather websites but they all give limited information in terms of weather forecasting. I had to look for an API that had the data i wanted thus i chose OPENWEATHER.ORG [( https://openweathermap.org/)] that displayed the :

- Location

- Temperature

- Humidity

- Wind speed

## Testing and Deployment
This part was not hard at all as i deployed my site using Vercel.

## Conclusion
I really learnt a lot that would have been hard to grasp without practicing it.
You can interact more with this project through  [Github](https://github.com/mary-ruguru/WEATHER-APP)
convert [array] into {object} with needful value
Tags: javascript, programming, webdev
Published: 2023-01-26 20:33:01

Sometimes it is the requirement that, data come from an flat **[array]** & based on some needful condition, we need that **[array]** data into the **{object}** <u>data-structure</u> format, with some requirement values (as per your need), then this pieces of logic work good:-

array of data...
```js
const basicControlKeys = ['tl', 'tr', 'bl', 'br'];
```

converter function for [array] into {object}
```js
// convert array data into object key with assign needful value...
const convertArrayIntoObject = (arrayData) => {

  const obj = {}; // empty object declaration...

  // iterate through every data inside array by for-of loop...
  for (let data of arrayData) 
  {
    obj[data] = true; // object value initialization...
  }

  return obj;
};
```

calling the function & pass [array] into its parameter...
```js
const result = convertArrayIntoObject(basicControlKeys);

console.log(result);

/*
{
  tl: true,
  tr: true,
  bl: true,
  br: true,
}
*/
```
How to Fix IntegrityError or Not Null Constraint Failed in Django
Tags: python, django, integrityerror, tutorial
Published: 2023-01-26 20:21:47

Learn how to fix integrity errors or not null constraint failed in Django. You can easily fix this error just avoid 2 simple mistakes.

I'm a full-time freelance contractor and available for hire.

My Expertise:

-- Web Design,
-- Web Development
-- WordPress
-- Python
-- Graphic Design

**For business queries:**
wpcodersclub@gmail.com

Please subscribe to my channel for more amazing tuts.

Thanks for watching

{% youtube HySO5TLVliQ %}
Using Serializers with ruby on rails
Published: 2023-01-26 20:21:38

If you've ever wanted to want to have your data return specific kinds of data from different paths using Active Record with out having to write a lot of extra code serializers are the solution. They provide a way of reacting a custom json object.

This is what our data looks like now:

```
{
  "id": 1,
  "title": "Top Gun",
  "year": 1986,
  "length": 154,
  "summary": "As students at the United States Navy's elite fighter weapons school compete to be best in the class, one daring young pilot learns a few things from a civilian instructor that are not taught in the classroom.",
  "poster_url": "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.imdb.com%2Ftitle%2Ftt0092099%2F&psig=AOvVaw0uR8BYBdnNmkTirteXeQzJ&ust=1674849371237000&source=images&cd=vfe&ved=0CA8QjRxqFwoTCIj9-Z6C5vwCFQAAAAAdAAAAABAE",  
  "created_at": "2022-05-21T13:12:35.682Z",
  "updated_at": "2022-05-21T19:11:11.682Z"
}
```
use the command below to have it installed in the gem file
```
gem 'active_model_serializers'
```
Once you run a bundle install then run: 

```
rails g serializer model_name
```

it gets created in  #app/serializers/model_name_serializer.rb



```
class ModelNameSerializer < ActiveModel::Serializer
  attributes :id, :title, :year, :length, :director, :description, :poster_url, :summary

end
```


after the serializer is created, it should now look like this:

```
{
  "id": 1,
  "title": "Top Gun",
  "year": 1986,
  "length": 154,
  "summary": "As students at the United States Navy's elite fighter weapons school compete to be best in the class, one daring young pilot learns a few things from a civilian instructor that are not taught in the classroom.",
  "poster_url": "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.imdb.com%2Ftitle%2Ftt0092099%2F&psig=AOvVaw0uR8BYBdnNmkTirteXeQzJ&ust=1674849371237000&source=images&cd=vfe&ved=0CA8QjRxqFwoTCIj9-Z6C5vwCFQAAAAAdAAAAABAE"  
}
```
If you wanted to u wanted to create a custom method to return specific data based on what you have now, you could say:

```
def MovieCaption
  "#{self.object.title} - #{self.object.description}..."
end
```
and add that method to the attributes to return.

If you had an array of objects you have specify which serializer to use:

```
render json: movies, each_serializer: ModelNameSerializer, status: :ok
```

Something to be mindful is that serializers override when you want to specify what you return in the controller.

Here is a link to the Docs to read more on it.

{% embed https://api.rubyonrails.org/classes/ActiveModel/Serialization.html %} 

Thank you.
Using class-validator with Next.js and react-hook-form
Tags: nextjs, reacthookform, classvalidator
Published: 2023-01-26 20:06:23

---
title: Using class-validator with Next.js and react-hook-form
published: true
description: Setting up class-validator with react-hook-form and Next.js
tags: nextjs, reacthookform, classvalidator
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-26 18:26 +0000
---

Let's use `class-validator` as a validation library with `react-hook-form`. I found using `class-validator` with Next.js a bit tricky as it uses decorators for validations and setting it up is a bit involved and took me quite some time to make it work. [Link to Stackblitz](https://stackblitz.com/edit/nextjs-fqatgb?file=README.md)


Steps: 

1. Create your form with `react-hook-form` [More info](https://react-hook-form.com/get-started)
```jsx
<form>
    <input {...register('firstName')} />
    {errors.firstName && <div>{errors.firstName.message}</div>}

    <input {...register('lastName')} />
    {errors.lastName && <div>{errors.lastName.message}</div>}

    <input type="number" {...register('age')} />
    {errors.age && <div>{errors.age.message}</div>}
    
    <input type="submit" value="Submit" />
</form>
```

2. Install `class-validator`, `@hookform/resolvers` and `class-transformer` packages. Define class for your form fields, register your resolver with the form [More info](https://github.com/react-hook-form/resolvers#class-validator) 
```bash
npm i class-transformer @hookform/resolvers class-validator
```
 
```jsx
class User {
  @MaxLength(20)
  @IsNotEmpty()
  firstName: string;

  @IsNotEmpty()
  lastName: string;

  @IsNumber()
  age: number;
}

const resolver = classValidatorResolver(User);

const formMethods = useForm<User>({ resolver });
```

3. Add following properties under `compilerOptions` in `tsconfig.json`
```js
"strictPropertyInitialization": false,
"experimentalDecorators": true
```

4. Install the following packages  [More info](https://next-api-decorators.vercel.app/docs/#using-withbabel)
```zsh
npm install --save-dev @babel/core babel-plugin-transform-typescript-metadata @babel/plugin-proposal-decorators babel-plugin-parameter-decorator
```

5. Update the list of plugins in `.babelrc` as follows:
```js
{
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "babel-plugin-parameter-decorator",
    // ... other plugins
  ]
}
```
6. Additionally, if there's this error: `TypeError: Reflect.metadata is not a function`, install `reflect-metadata` with `npm i reflect-metadata` and import it at your app root.

More info [here](https://github.com/react-hook-form/resolvers/blob/master/class-validator/src/__tests__/__fixtures__/data.ts) and [here](https://twitter.com/HookForm/status/1381509773401628672)
CSS tutorial series: Grid Layout (Grid intro)
Tags: beginners, webdev, programming, css
Published: 2023-01-26 20:00:41

Instead of using positioning and floats, CSS provides a layout system that allows the use of rows and columns.

Like `flexbox` the grid layout consists of a container `grid-container` and children elements.

Similar to `flexbox` we use the display property in order to have a grid layout, along with other properties in order to effectively manipulate this layout.

```HTML
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

```

```CSS
.grid-container {
  display: grid; 
}

```
or 

```CSS 
.grid-container {
  display: inline-grid;
}

```
## CSS grid columns and grid rows

### Grid Column

![Grid column](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e78swym6xpspvyiakyrb.png)

The grid Columns can be set using the property `grid-template-columns` which takes `length units` to specify the height of each column.

```CSS
display: grid;
grid-template-columns: 200px 300px 800px;

```
you want each of your column to be the same size instead of repeating the same value we can use a CSS function (We will discuss functions in another post) `repeat(number of columns, height of your columns)`

```CSS
display: grid;
grid-template-columns: repeat(3, 200px)

```

### Grid row

![Grid row](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srejppqfhf989cklslyj.png)

The grid rows can be set using the property `grid-template-rows` which takes `length units` to specify the height of each row.

## Grid gap 
This property specifies the space between each column and row in the grid. 

| Property | Value|
|----------|:----:|
|`column-gap`| length unit|
|`row-gap`| length unit|
|`gap`| length unit|

- The `row-gap` property specifies the space or gap between rows.

- The `column-gap`  property specifies the space or gap between columns.

- The `gap` property is a shorthand for both `column-gap` and `row-gap` properties.

## Grid column/row start/end

![grid-columns and grid-rows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf56di93kogpfay0m98r.png)
The `grid-column-start` and `grid-row-start` properties specifies a grid item's starting position (where it starts).
The `grid-column-end`  and `grid-row-end`properties specifies a grid item's end position (until which line it should span)

- `grid-rows` is a shorthand for the `grid-row-start` and `grid-row-end` properties.

- `grid-columns` is a shorthand for the `grid-column-start` and `grid-column-end` properties.

`grid-rows` and `grid-columns` take two values each the first specifies the starting position and the second the end position like so:

```CSS
grid-rows: 1/ span 3;
```
The previous code will start on row one and span 3 rows. It works similarly with `grid-columns` but instead of spanning rows it spans the number of columns you specify.
Say goodbye to manually deleting multiple GitHub repositories
Tags: ruby, github, programming, opensource
Published: 2023-01-26 19:20:42

I recently created a script that allows for the bulk deletion of GitHub repositories. I found that the GitHub interface did not provide a way to do this in bulk, so I wrote this script to fill that gap. I am sharing it in case it may be helpful for others who find themselves in a similar situation. The script uses the GitHub API to authenticate and delete the specified repositories, but it's important to be careful when using it, as it can permanently delete repositories and their associated data. Use at your own risk and make sure to backup any important repositories before deletion. If you want to improve it, feel free to do so and send me a pull request. Together we can make it better.

If you found this post helpful, please share it with others who may benefit from it!

[Ruby Remover Repos](lexisvar/ruby-remover-repos)
Flatiron Phase-1
Published: 2023-01-26 19:18:14

howdy everyone! I just got passed the phase-1 of software engineering and i have been blown away of the progress we have made in two weeks!. the most interesting thing to me is all the different ways you can do something and how reading code really gives us a window into thought processes and mental organization. i cant wait to learn about react and become closer to a full stack engineer! cant wait to post again with more progress
Adding modulefederation plugin to comfig-overrides.js
Published: 2023-01-26 18:53:28

Hi Guys Can some one guid me to integrate module fedartion plugin with config-override.js.
I have bellow code
const rewireReactHotLoader = require('react-app-rewire-hot-loader');
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = function override(config, env) {
  config = rewireReactHotLoader(config, env);

  config.resolve.alias = {
    ...config.resolve.alias,
    'react-dom': '@hot-loader/react-dom',
  };
  config.plugins.push(
    new ModuleFederationPlugin({
      name: "CreateApp",
      filename: "moduleEntry.js",
      exposes: {
          './InclusiveAccessReportsList': './src/pages/InclusiveAccessReportsList"'
      },
      shared: {
        ...dependencies,
        react: {
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
        "react-router-dom": {
          singleton: true,
        },
      },
    })
  )

  return config;
};
Is this the correct way to do this..For me this gives an error
Nested Ternaries Considered Useful
Tags: javascript
Published: 2023-01-26 18:45:59

Consider this function that returns a discount rate for a given age:

```javascript
const get_discount = age => {
  if (age <  5) return 1;
  if (age < 12) return 0.5;
  if (age < 25) return 0.3;
  if (age < 65) return 0;
                return 0.4;
};
```

Using nested ternaries we can remove the fluff and focus on the intent:

```javascript
const get_discount = age =>
    age <  5 ? 1
  : age < 12 ? 0.5
  : age < 25 ? 0.3
  : age < 65 ? 0
             : 0.4;
```

Unfortunately nested ternaries tend to be frowned upon. When not outrightly banned, formatting rules often cause them to be laid out in a rather unattractive fashion:

```javascript
const get_discount = age =>
  age < 5
    ? 1
    : age < 12
      ? 0.5
      : age < 25
        ? 0.3
        : age < 65
          ? 0
          : 0.4;
```

But using nested ternaries over a sequence of `if` isn't an either-or choice.

Say we wanted to compute the discount rate on the fly. You can't just swap the nested ternaries without creating an intermediate variable first:

```javascript
const apply_discount = (price, age) =>
  price - (price * ( age <  5 ? 1
                   : age < 12 ? 0.5
                   : age < 25 ? 0.3
                   : age < 65 ? 0
                              : 0.4));
```