teleren/devto huggingface dataset:
Day 2 #100DaysofCode
Tags: beginners, webdev, 100daysofcode
Published: 2023-01-07 02:56:59

Here I am again, day 2 of the #100DaysofCode. Staying accountable and blogging about my journey every day.

## What did I learn today?

### SVGs
SVGs are Scalable Vector Graphics and the main difference between SVG and image formats like JPEG is that SVG can easily be scaled to any size without compromising its quality or file size. SVGs are defined using XML which is an HTML-like syntax so it is easily identifiable and readable. Here's an example of an SVG markup taken from The Odin [Project:](https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-svg#embedding-svgs)

```
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <rect x=0 y=0 width=100 height=100 fill="burlywood"/>
    <path d="M 10 10 H 90 V 90 L 10 60" fill="transparent" stroke="black" stroke-width="3"/>
  <circle cx=50 cy=50 r=20 class="svg-circle"/>
    <g class="svg-text-group">
      <text x="20" y="25" rotate="10" id="hello-text">Hello!</text>
      <use href="#hello-text" x="-10" y="65" fill="white"/>
    </g>
</svg>
</div>
```
Looks kinda scary!

### HTML Tables
HTML Tables basically allow us to organize data into Tabular format and easily make connections with different types of information displayed. The course included some MDN articles that had some assessments; great way to practice what I was learning.

### CSS Reset
I've come across CSS Reset before but I haven't used them. I've always done this:

```
// CSS Reset
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```

### CSS Units
I learned about the difference between `px`, `em`, and `rem`. Basically, `px` is static in nature and does not scale while `em` and `rem` scale based on the browser size. I adopted the use of `em` and `rem` but Odin recommends sticking to rem because `em` could cause undesirable effects. I also read this [article](https://codyloyd.com/2021/css-units/) that suggests using `rem` for `font-size` and `px` for everything else; I might adopt that practice.
Modal Box
Tags: javascript, beginners, react, html
Published: 2023-01-05 17:31:49


A modal box is a dialog box or window that appears on top of the current page, and requires the user to interact with it before they can return to the underlying page. Modal boxes are often used to display important content or to prompt the user for a specific action, such as filling out a form or making a decision.

There are several types of modal boxes, including:

Alerts: These are modal boxes that display a message and require the user to click a button to acknowledge the message and close the box.

Confirmations: These are modal boxes that prompt the user to confirm or cancel an action.

Prompts: These are modal boxes that request input from the user, such as a name or email address.

Modal boxes can be triggered by various events, such as clicking a button or link, hovering over an element, or loading a page. They can also be triggered programmatically using JavaScript.

Here is just an example in react for its use:
import React, { useState } from 'react';

```
import React, { useState } from 'react';

function ModalExample() {
  // State to track whether the modal is open or closed
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <>
      {/* Button that triggers the modal */}
      <button onClick={() => setModalOpen(true)}>Open Modal</button>

      {/* Modal component */}
      {modalOpen && (
        <div className="modal">
          <div className="modal-content">
            <button onClick={() => setModalOpen(false)}>Close</button>
            <p>Modal content goes here</p>
          </div>
        </div>
      )}
    </>
  );
}

```
This code will create a modal box with a close button and some content. The modal is hidden by default, and is displayed when the user clicks the "Open Modal" button. The user can close the modal by clicking the close button.

Modal boxes are a useful tool for web developers because they allow them to display important content or prompts to the user without requiring a new page load. This helps to improve the user experience and keep the user on the current page.

That's a brief overview of modal boxes! I hope it was helpful.
Have you ever seen vim's popup menu?
Tags: vim, popup, menu
Published: 2023-01-07 01:35:31

---
title: Have you ever seen vim's popup menu?
published: true
description: a little example about popup menu, for vim 
tags: vim, popup, menu
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mbjgpg98ldym0nmvxnz.png
series: vim
---

## popup menu, ...

Is a Vim function that displays a menu in a popup window. Yes, .. Vim has popup windows. The menu can contain a list of items. In the following example I've added just two: open vimrc file and replace current word. I this example, ... You'll see the code to select an item by clicking on it.

The popup_menu() function takes a list of items as an argument, and it returns the index of the selected item. Somewere inthe documentation I sow index starts from 0, .. but not for me: the first item in the list is 1, the index of the second item is 2, and so on.

The popup_menu() function also supports various options that allow you to customize the appearance and behavior of the popup menu. For example, you can specify the title of the menu, the callback function that is called when an item is selected, and the highlight style of the menu.

In this example the menu is `"What do you want?"`. I've also added a this to open the popup menu:

```
nnoremap <leader><leader> :call Funzione()<CR>
```

So, ... it si very very simple to open popup. Oh, .. And you can simply ESC to close it without a selection.

```
" menu stuff
function! SensorarioTools(id, result)
    if a:result == 1
        :e ~/.vimrc
    endif
    if a:result == 2
        set nopaste
        let user_input = input('Enter a word:')
        let current_word = expand('<cword>')
        execute '%s/'.current_word.'/'.user_input.'/g'
    endif
endfunc
func! Funzione()
  call popup_menu([
    \ 'open ~/.vimrc',
    \ 'replace current word',
    \ ], #{
    \ title: "What do you want?",
    \ callback: 'SensorarioTools',
    \ line: 25,
    \ col: 60,
    \ highlight: 'Question',
    \ border: [],
    \ close: 'click',
    \ padding: [1,20,1,1],
    \ })
endfunc

nnoremap <leader><leader> :call Funzione()<CR>
```
5 Simple Steps to Creating Your Very Own npm Module
Tags: javascript, webdev, npm, beginners
Published: 2023-01-07 00:03:52

Are you tired of using someone else's npm module and wish you could create your own? Well, the good news is that it's actually quite simple to do! Follow these five steps and you'll have <code>your very own npm module</code> in no time.

## Step 1: Initialize Your Project
First, create a new directory for your project and navigate to it in your terminal. Then, run the following command:

```bash
npm init
git init
git remote add origin git://git-remote-url
```

This will prompt you to fill out some information about your module, such as its name, description, and entry point. Just follow the prompts and fill out the information as best you can.

Create a <code>README.md</code> file that explains what your package code is and how to use it.

## Step 2: Write Your Code

Next, it's time to write the code for your module. This will depend on what your module does, but in general you should aim to keep it as simple and modular as possible. It's also a good idea to add some comments to your code to help others understand how it works.

## Step 3: Test Your Code

Before you publish your module, it's important to make sure it's working correctly. Write some tests to ensure that your module is doing what it's supposed to do. You can use a tool like Mocha or Jest to run your tests.

Also try installing your npm module:  
```bash
npm install my-package-full-path
```

## Step 4: Publish Your Module

Now it's time to make your module available to the world! In your terminal, navigate to root of your project and run the following command:

```bash
npm publish
```

This will publish your module to the npm registry, making it available for others to use.

## Step 5: Keep Your Module Up to Date

Congratulations, you now have your very own npm module! But the work doesn't stop here. It's important to keep your module up to date with the latest best practices and to fix any bugs that are found. Be sure to regularly check for and address any issues that are reported.

## Conclusion

Creating an npm module is a great way to share your code with the world and contribute to the open source community. With these five simple steps, you'll be well on your way to becoming an npm module pro!
How to make substring bold in JSON?
Tags: css, webdev, codenewbie, javascript
Published: 2023-01-06 23:51:59

We often encounter this problem where we want the substring of the description or paragraph to have a font-weight greater than the rest of the paragraph. To achieve the same, we settle for a messy inefficient code where we manually encapsulate the substring in a `<strong></strong>` tag.
I recently encountered a similar problem, while creating a FAQs page for a client. In one of the answers coming from JSON, the ask was to highlight certain substrings by increasing the font weight (making the string bold). For example, This is the **answer** to question 1.
I was not happy with the solution of creating a separate object for bold strings for each of the answers. After a few hours on the internet and multiple permutation and combinations, I finally found how to make the substring bold in the JSON itself.
We can directly encapsulate the substring we want to make bold in JSON with the `<b></b>` tag.

```
<!DOCTYPE html>
<html>
<body>
<h2>JSON with bold substring</h2>
<span id="question"></span><br/>
<span id="answer"></span>
<script>
const faq= {
 question: "Question 1", 
 answer: "This is <b>answer</b> to question 1" 
 } 
document.getElementById("question").innerHTML = faq.question;
document.getElementById("answer").innerHTML = faq.answer;
</script>
</body>
</html>
```

The DOM identifies the HTML element in the JSON and increases the font weight of the substring from 300 to 600.
This hack helped me in decreasing the lines of code significantly.

Happy Coding!

Follow us on [Instagram ](https://www.instagram.com/commitandpush/)

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqmyq1twcon9ndguelyd.png)](https://www.buymeacoffee.com/hardiquedasore)
More explicit interface implementation in Go using simple function signature | 3 ed.
Tags: webdev, programming, metaprogramming, go
Published: 2023-01-06 23:47:15

> NOTE : Go and Golang – are synonyms !

Rather than implicitly stating `methodSignature() methodType` without any reserved keyword such as `implement` for method we can write what I call "JavaScript-like callback" i.e. function that wraps interface signature(s) for more explicit interface implementation based upon an arbitrary named convention [2 example]

**1 Example** – consider initial pseudo_code (Go syntax) :
```go
type someInterface interface {
    methodSignature() methodType
}

// empty struct is still a valid entity to define a method
type yourStruct struct {
  // struct field[s] (if any)
}

func (receiver yourStruct) methodSignature() methodType {
  // method logic
}
```

**2 Example** – consider the following optimised pseudo_code (Go syntax) :
```go

package main

import . "fmt"

type someInterface interface {
    methodSignature() methodType
}

// 1/3 empty struct is still a valid entity to define a method
type yourStruct struct {
  // struct field[s] (if any) : empty string would be still valid 
	someType string
}

// 3/3A : wrapper for more explicit interface implementation
func explicitInterface〳implements(interfaceReceiver someInterface){
	interfaceReceiver.methodSignature()
}

// 2/3
func (structAccessor yourStruct) explicitInterface〳implements() /* 3/3B : <= as if written someInterface.methodSignature() but in Golang syntax-enforced fashion  */ {
    Println("Engineering name: " + structAccessor.someType)
}
```

### <u>Practical example (REPL)</u> :

[Runnable code example on REPLIT](https://replit.com/@projektorius96/interfaces#implementInterfaceWrapper.go)
> Open shell instance and type: `go run explicitInterfaceImplementation.go` # <= this might change in the future so don't think hard, think smart !

---

If you found any typo, or think you can suggest a better solution, please leave a comment below . Stay tuned for more coming from Go . Cheers !
Refactoring Helper Methods: Part 1
Published: 2023-01-06 23:20:02

- refactoring routes

get "/", controller: "movies", action: "index"

- more shorthand syntax for a route

get "/" => "movies#index"

- we can shorten this even further for the root because there is only 1 path:

root "movies#index"

- "rails routes" command shows all defined routes

- we can name routes with "as:"

get "/movies/:id" => "movies#show", as: :details

- we can then access this specific route with an argument:

details_path(42) --> "/movies/42"

- Using route names reduces redundancy when updating URL names! Always refer to URLs using route names from now on

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

- We can truncate @a_movie.id to @a_movie when using movie_path

- on View templates, we should use paths (movie_path)
- on Server side, we should use URLs (movie_url)

- When possible, remove render statements if class and definition matches

- Replace:
. <a href="<%= new_movie_path %>">Add a new movie</a>

- With:
. <%= link_to "Add a new movie", new_movie_path %>

- Replace:
movie_path(a_movie)

- With:
a_movie
Mengenal FastAPI: Framework Python untuk Membuat API yang Cepat dan Mudah
Published: 2023-01-06 23:13:55

FastAPI adalah sebuah framework Python untuk membuat API (Application Programming Interface) yang cepat dan mudah digunakan. Ini menggunakan standard terbaru dari Python, yaitu ASGI (Asynchronous Server Gateway Interface) dan menyediakan banyak fitur yang memudahkan dalam pembuatan API, seperti:

**Dokumentasi otomatis**
FastAPI menyediakan dokumentasi otomatis yang dapat diakses melalui Swagger UI atau Redoc. Dokumentasi ini dibuat secara otomatis dari kode sumber Anda, sehingga Anda tidak perlu menuliskannya ulang.

**Validasi otomatis**
FastAPI secara otomatis melakukan validasi input yang masuk ke API Anda dengan menggunakan tipe data Python. Ini memastikan bahwa API Anda hanya menerima input yang valid.

**Kecepatan tinggi**
FastAPI sangat cepat dibandingkan dengan framework Python lainnya. Ini menggunakan teknik yang disebut "pemrograman bersyarat" untuk mengoptimalkan performa.

**Mudah digunakan**
FastAPI sangat mudah dipelajari dan digunakan, terutama bagi mereka yang sudah familiar dengan Python. Dengan sintaksis yang intuitif dan dokumentasi yang baik, Anda dapat dengan cepat membuat API yang powerful.

**Kompatibilitas dengan database**
FastAPI bekerja dengan baik bersama dengan database populer seperti PostgreSQL, MySQL, dan MongoDB. Ini memudahkan Anda untuk menyimpan dan mengambil data dari database Anda.

Overall, FastAPI adalah pilihan yang sangat baik untuk membuat API yang cepat, mudah digunakan, dan berkualitas tinggi. Jika Anda ingin membuat API dengan Python, FastAPI merupakan pilihan yang tepat.
Deploy Django Docker Compose to Heroku
Tags: docker, webdev, django
Published: 2023-01-06 23:13:29

To deploy a Django project that uses Docker Compose to Heroku, you will need to make a few changes to your project.

First, create a `Procfile` at the root of your project directory and add the following line:

```
web: gunicorn myproject.wsgi
```

This tells Heroku to use the `gunicorn` web server to run your Django app. Replace `myproject` with the name of your Django project.

Next, create a `requirements.txt` file that lists the Python packages that your app depends on. You can generate this file by running the following command:

```
$ pip freeze > requirements.txt
```

You will also need to modify your `Dockerfile` to use the `gunicorn` web server instead of the Django development server. Here is an example `Dockerfile` that you can use:

```
FROM python:3.8

ENV PYTHONUNBUFFERED 1

RUN mkdir /app
WORKDIR /app

COPY requirements.txt /app/
RUN pip install -r requirements.txt

COPY . /app/

CMD gunicorn myproject.wsgi --bind 0.0.0.0:$PORT
```

Make sure to replace `myproject` with the name of your Django project.

Finally, you will need to create a `heroku.yml` file at the root of your project directory with the following contents:

```
build:
  docker:
    web: Dockerfile
  heroku:
    app: myapp
    stack: container

run:
  web: docker-compose up
```

Replace `myapp` with the name of your Heroku app.

To deploy your app to Heroku, make sure you have the Heroku CLI installed, and then run the following commands:

```
$ heroku login
$ git init
$ git add .
$ git commit -m "Initial commit"
$ heroku create
$ git push heroku main
```

This will build and push your Docker image to Heroku, and start the app.
Happy coding...
docker compose for django
Tags: django, docker
Published: 2023-01-06 23:02:07

To use Docker Compose with Django, you will need to create a `Dockerfile` and a `docker-compose.yml` file.

Here is an example `Dockerfile` that you can use as a starting point:

```
FROM python:3.8

ENV PYTHONUNBUFFERED 1

RUN mkdir /app
WORKDIR /app

COPY requirements.txt /app/
RUN pip install -r requirements.txt

COPY . /app/
```

This `Dockerfile` starts from the official Python Docker image and installs the required Python packages from `requirements.txt`. It then copies the rest of your Django project files into the container.

Next, you can create a `docker-compose.yml` file to define the services that make up your app. Here is an example `docker-compose.yml` file that you can use:

```
version: '3'

services:
  web:
    build: .
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/app
    ports:
      - "8000:8000"
    depends_on:
      - db
  db:
    image: postgres:10
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: postgres
    volumes:
      - postgres_data:/var/lib/postgresql/data/

volumes:
  postgres_data:
```

This file defines two services: `web` and `db`. The `web` service is built from the `Dockerfile` in the current directory and runs the Django development server on port 8000. The db service is a PostgreSQL database, which your Django app will use to store data.

To start your Django app with Docker Compose, run the following command:

```
$ docker-compose up
```

This will build the `web` service and start both the `web` and `db` services. Your Django app will be available at http://localhost:8000.

If you make any changes to your Django code, you will need to rebuild the `web` service for the changes to take effect. You can do this by running:

```
$ docker-compose build web
```

Thats all happy coding...
Day 668 : Chariot
Tags: hiphop, code, coding, lifelongdev
Published: 2023-01-06 23:00:20

_liner notes_:
- Professional : Pretty quiet day in terms of meetings. Had the whole day to work on Web Components. I wrote up the documentation for my latest Web Component and tested it out in a demo application.

- Personal : Got a bunch of stuff done with the details page of my side project. Also went through some tracks for the radio show.

![Overhead view of the Painted Cove Trail, OR, USA coast with some orange colored soil and brush that leads to some water with vegetation in it.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9zr3qnapl8uz41wgx95.jpg)

Basically forgot about this blog post. Finished work, started going through tracks, eating dinner and then realized. haha. So yeah, going to finish up with the radio show and then maybe work on the side project some more. There's a basketball game at the college so I'll be doing a remote online only show. So my chariot will be staying in place.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube yH09JuKKZsQ %}
How useful are listings? 📜
Tags: meta, discuss
Published: 2023-01-06 22:33:24

I recently received some DEV credits that can be used to create a listing.

Since I've never really used / scrolled through the listing section on DEV, I was wondering how useful these credits are. Let's assume I would like to promote a side project, who would I be able to reach with that?

Does anyone have further information about listings in general and their effectiveness?
Importing SVG files as React components with Vite
Tags: react, vite, mui
Published: 2023-01-06 22:32:02

---
title: Importing SVG files as React components with Vite
published: true
description: With create-react-app, it was easy to import SVG files as components. Now with Vite, you can do the same!
tags: react, vite, mui
cover_image: https://images.unsplash.com/photo-1506729623306-b5a934d88b53
canonical_url: https://cassidoo.co/post/svg-react-vite
---

Chances are if you've ever used `create-react-app` and you wanted to import an SVG file as a React component, you did something like this and it Just Worked™:

```jsx
import { ReactComponent as Logo } from './logo.svg'
```

But, alas, if you have moved to using Vite more often, as I have, you can't just do that.

Never fear, it's still possible!

## Enter `vite-plugin-svgr`

[`vite-plugin-svgr`](https://www.npmjs.com/package/vite-plugin-svgr) is a Vite plugin to transform SVGs into React components! It's super intuitive to use:

```bash
npm install vite-plugin-svgr
```

Add it to your `vite.config.js`:
```js
import svgr from 'vite-plugin-svgr'

export default {
  // ...
  plugins: [svgr()],
  // ...
}
```

And boom, you get your expected behavior!

```jsx
// somewhere in your React + Vite app

import { ReactComponent as WhateverIcon } from "./icons/WhateverIcon.svg";

// ...

export default function SomeComponent() {
	return (
		<div>
			<WhateverIcon />
			Wow, I love icons, because I am a dweeb
		</div>
	);
}
```

This is particularly useful if you're using a library like [MUI](https://mui.com/) and you need to use a [custom icon](https://mui.com/material-ui/icons/#svgicon), like so:

```jsx
// somewhere in your React + Vite app

import { Box, IconButton, SvgIcon } from "@mui/material";
import { ReactComponent as WhateverIcon } from "./icons/WhateverIcon.svg";

// ...

export default function SomeComponent() {
	return (
		<Box>
			<IconButton aria-label="some icon">
				<SvgIcon>
					<WhateverIcon />
				</SvgIcon>
			</IconButton>
			Wow, I love icons, because I am a dweeb
		</Box>
	);
}
```

There's other things you can do with `vite-plugin-svgr`, and there's a [list of options here](https://github.com/pd4d10/vite-plugin-svgr#options).

Hope that's helpful for ya, happy icon-ing!