teleren/devto huggingface dataset:
How to remove a package from Laravel using Composer
Tags: php, laravel, beginners, programming
Published: 2021-11-07 10:35:51

Composer is dependency manager for PHP packages. Laravel also uses composer to install and remove packages from the application.

we will see how to remove package from your Laravel application. Actually you can remove package from any PHP application which uses composer as package manager. Run the following command and it will remove the package from the application. It will also update composer.json and composer.lock automatically.
```php
composer remove vendor/package
```
After that, you will also need to remove references to that package within your application, from config, controllers etc. otherwise it may give class not found error because you have removed all class files from application.

I hope it is useful to all.
Everything About Django - 2 (Architecture of Django)
Tags: django, webdev, beginners, python
Published: 2021-11-07 10:28:05

This is the **second blog** of my series **Everything About Django**. You can read my previous article [here](https://dev.to/priyanshupanwar/everything-about-django-1-how-to-start-25ai).
In this article, we are going to learn the **core architecture of Django, how Django works**.

## Architecture of Django
Django follows the architecture **MVT - Model View Template**.
Let's break the MVT architecture :
* Model : This is the **database layer** of the architecture. Model means the tables stored in the database. Django follows the **ORM (Object Relational Mapping)** Protocol by which we can write the database commands in pythonic way without any SQL. We will study this in detail in coming blog.
* View : This is the **logical layer** of the architecture. This is where we write the logic of our project. We create functions/classes which are mapped to different URL Patterns of our site (project). 
* Template : This is the **display layer** of the architecture. This contains the html files that are rendered(displayed) on our web interface. Every view(function/class) sends a template or a http response.

Let's take a look at this picture for clear understanding.
![MVT Pattern](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abvbys3c58tmswhw6vbj.jpg)
Let's drop this into few points:
* A user opens a **specific url** of our site (project) suppose http://localhost:8000/login
* Django maps this url to the **specific view** (function) which implements the logic for this url.
* The view takes the data from **associated models** (database) and **sends a template** which is rendered on the web interface.

I hope the MVT architecture of Django is clear. Feel free to comment your doubts.
## THANK YOU
You can find me at : [My Portfolio](http://priyanshu-panwar.github.io/) | [LinkedIn](https://www.linkedin.com/in/priyanshu-panwar)
Day 53/100 The Secret Life of Objects
Tags: 100daysofcode, programming, challenge, motivation
Published: 2021-11-07 10:00:36

"An abstract data type is realized by writing a special kind of program […] which defines the type in terms of the operations which can be performed on it."

– Barbara Liskov, Programming with Abstract Data Types

![Rabbit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hguhyxnt7gf0tdlnwdz.png)
Pusher to get Real Time Updates For Your WebApp.
Tags: javascript, webdev, react, programming
Published: 2021-11-07 09:36:25

## Introduction

I recently discovered [Pusher](https://pusher.com/) that provides real time communication amongst different processes whether it be server to server or server to client. 

I followed [this](https://pusher.com/tutorials/realtime-results-nodejs/) tutorial for a MERN stack based messaging app I am currently working on. With just a few lines of code after setting up the Pusher project, I was able to receive updates of my MongoDb instance on my frontend. 

## Basics 

Pusher allows you to send and receive __events__ from __channels__. 

### Server Side 

From the __server__ side, you trigger events based on the event names on a particular channel such as the following:

{% gist https://gist.github.com/MokoSan/2879d01ea61e49b28435229ea57ce1d2 %}

The library to be used on the server can be installed by the following command:

```
npm i pusher
```

### Client Side

The __client__ side, you subscribe to particular channels and bind to events both based on the respective names such as the following ``useEffect``:

{% gist https://gist.github.com/MokoSan/b39e02ddb2c783de9a3f94f154054eb7 
%}

The library to be used on the client side can be installed by the following command:

```
npm i pusher-js
```
## Conclusion

To summarize in the context of MERN apps, in your server, you observe changes to your data from MongoDB and send those updates on particular channels and with specific event names. And on your front end, you subscribe to the channel and bind to the event names for your real time updates.

The setup was smooth and the free tier [benefits](https://pusher.com/channels/pricing) are definitely generous with great [documentation](https://pusher.com/docs/). 

I'd be interested to hear about your experience with other similar technologies or any other information about Pusher.
Docker Tips - UFW
Tags: docker, ufw, security, firewall
Published: 2021-11-07 09:22:30

---
title: Docker Tips - UFW
published: true
description: By default docker will override UFW, it is important to be aware of this so that you do not expose your docker containers to the world.
tags: docker, ufw, security, firewall
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0iz0a28ul4a5itslhc04.png
canonical_url: https://rhuaridh.co.uk/blog/tips-docker-ufw.html
---

#Docker Tips - UFW

By default docker will override the "Uncomplicated Firewall" (UFW) rules, it is important to be aware of this so that you do not accidentally expose your docker containers to the world.

If you had UFW configured to block port 3000, then you would be forgiven for assuming our docker app would also be blocked.

```docker run -d -p 3000:5000 training/webapp python app.py```

However, docker adds rules to IP tables directly. This bypasses UFW which causes our app to be exposed to the world.

## Two simple solutions

### 1) Bind port to localhost
The problem is that our port mapping tag exposes our app:

```-p 3000:5000```

Restricting access to localhost is a simple change:

```-p 127.0.0.1:3000:5000```

This binds port 5000 inside the container to port 3000 on the localhost or 127.0.0.1 interface on the host machine.

Our app is now blocked from external traffic!

### 2) Use external firewalls
GCP, AWS and even OVH all have external firewalls that sit infront of the server. Leveraging cloud based firewalls in addition to UFW is the best way to solve the issue.
Day 30 of 100 Days of Code & Scrum: Company Website, Next.js, and TypeScript
Tags: 100daysofcode, beginners, javascript, programming
Published: 2021-11-07 09:09:50

Happy new week, everyone!

Today was a very relaxing day for me. Not much going on besides working on my company website, learning Next.js, studying Scrum, expanding my social network, and planning for the next week.

Off-topic, some of my friends have been wanting me to share what my experience was like blogging for a month. It's honestly embarrassing as heck and it's nothing amazing, but I'll just share it because bloggers who are just starting out might find it helpful. 

## Yesterday

Same as usual. I did my 4th Weekly Sprint Review and Retrospective, in which I went over what I've managed to do well, what my shortcomings were, and what I could do better in the future.

## Today

It's a new week, so I decided on what I will be doing and established my new `Sprint Goals`. My focus for this week will be **Next.js** and **Typescript** as I'm using these technologies for my company website. I'll still be studying **Scrum**, but going to put the guide writing on hold. Finishing my company website is more beneficial to me as of the moment.

## Weekly Sprint Goals

- build my company website.
- continued to learn Next.js.
- go through the Typescript documentation at least 30 minutes each day.
- continue studying for Professional Scrum Master I (PSM I) certification.
- continue networking, but allocate less time to this (coding is more important).

Have a great week, everyone!

![Thank You Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy72xbwmcsemo67ogmdm.png)

### Resources/Recommended Readings

- [Official Next.js tutorial](https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website)
- [The Typescript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
- [The 2020 Scrum Guide](https://scrumguides.org/scrum-guide.html)
- [Mikhail Lapshin's Scrum Quizzes](https://mlapshin.com/index.php/scrum-quizzes/)

### DISCLAIMER

**This is not a guide**, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

### Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com/"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
The last 100 days of code
Tags: 100daysofcode
Published: 2021-11-07 08:55:33

I've completed another 100 days of code!

At the end of my last 100 days I'd used Express in a project for the first time. I started this 100 days by working out how to test it. I uploaded the project to Heroku - my first time uploading to Heroku.

I did three [Frontend Mentor](https://www.frontendmentor.io) projects, each using a different bundler: Rollup, Snowpack and Vite. [I wrote a post comparing them and bundlers I've used in the past](https://blog.nicm42.co.uk/bundler-comparison).

In preparation for my new job I did a general Drupal tutorial and then one on theming. Then I took a landing page I made some time ago with Bootstrap and re-made it as a Drupal site, with multiple pages. There's a lot going on with Drupal and I think I only really scratched the surface of what you can do in it.

I did a tutorial on Svelte, loved it, then updated an old game I made in jQuery to make it in Svelte, with a MongoDB database.

Between projects I did some of [Scrimba's Weekly Web Dev](https://scrimba.com/learn/weeklychallenge) challenges and a few [CSS Battles](https://cssbattle.dev/) for fun.

I spent my Saturdays learning a bit about non-JS languages (with a detour into databases). [I documented my experience with these in my CodeNewbies blog](https://community.codenewbie.org/nicm42/learning-a-bit-about-c-36bp). In the last 100 days I did:

- PHP
- Flutter
- Java
- Ruby on Rails
- Fortran
- Rust
- MySQL
- MongoDB
- Swift
- Perl
- F#
- Love2D
- Lua
- C#
- C++

I had a bit of time at the end of my 100 days, but not enough to start a new project, so I spent some time in tutorial hell, learning a bit about:
- Vue
- Angular
- Redux
- Next
- React Native
- Kaboom
- Phaser

That was a lot in 100 days!

I've now done 600 days of code, starting in February 2019. Although I only managed 100 days in 2019 - I took a break then only got back into it in February 2020. Since then I've done 500 days nearly every day. It's been such a useful tool for getting me into the routine of coding every day. Now I'm going to be coding at work I am not going to be spending so much of my free time coding or I'll overload my brain. But I might use the technique in other aspects of my life, to help me establish a routine.
UseEffect React Testing
Tags: react, testing, go, firebase
Published: 2021-11-07 08:38:47

This is a modification of the `App.tsx` and `App.test.tsx` [CRAs](https://create-react-app.dev/docs/adding-typescript/). It uses `useEffect` to get the text from the Golang API.

- Source code: [https://github.com/ynwd/mnrp](https://github.com/ynwd/mnrp)
- Live demo: [https://fastro-319406.firebaseapp.com/](https://fastro-319406.firebaseapp.com/)

```
.
├── cloudbuild.yaml
├── cmd
│   ├── build
│   │   ├── index.gohtml
│   │   └── main.go
│   └── main.go
├── firebase.json
├── go.mod
├── internal
│   ├── app.go
│   └── app_test.go
├── package.json
├── serverless.go
└── web
    └── home
        ├── craco.config.js
        ├── package.json
        ├── public
        ├── src
        │   ├── App.css
        │   ├── App.test.tsx
        │   ├── App.tsx
        │   ├── index.css
        │   ├── index.tsx
        │   ├── logo.svg
        │   ├── react-app-env.d.ts
        │   ├── reportWebVitals.ts
        │   └── setupTests.ts
        ├── tailwind.config.js
        └── tsconfig.json
```

## Backend
Golang API
```go
package internal

import (
	"context"

	"github.com/fastrodev/fastrex"
)

func Handler(req fastrex.Request, res fastrex.Response) {
	res.Send("The best interface is no interface")
}

func CreateApp() fastrex.App {
	ctx := context.Background()
	app := fastrex.New()
	app.Ctx(ctx)
	app.Get("/api", Handler)
	return app
}


```

Entry point
```go
package serverless

import (
	"net/http"

	"github.com/ynwd/mnrp/internal"
)

func Main(w http.ResponseWriter, r *http.Request) {
	internal.CreateApp().Serverless(true).ServeHTTP(w, r)
}

```

## Frontend
App.tsx
```ts
import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [value, setValue] = useState("");
  useEffect(() => {
    async function getText() {
      let response = await fetch('/api')
      const d = await response.text()
      setValue(d)
    }
    getText()
  }, [value]);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h3>
          {value}
        </h3>
      </header>
    </div>
  );
}

export default App;

```

App.test.tsx
```ts
import React from 'react';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import { render, screen } from '@testing-library/react';
import App from './App';

const server = setupServer(
  rest.get('/api', async (req, res, ctx) => {
    return res(ctx.text("The best interface is no interface"));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('loads and displays greeting', async () => {
  render(<App />);
  const linkElement = await screen.findByText('The best interface is no interface');
  screen.debug()
  expect(linkElement).toBeInTheDocument();
});
```
Extending AspNet Users Table In Radzen Without Using Migrations Part 1
Tags: aspnetcore, radzen, blazor
Published: 2021-11-07 08:22:42

The Designers of RADZEN IDE have just introduced a new feature which allows you to include your aspnet security tables in your application's data model. In this video, I show you how to include aspnet security tables in your app's data model and extend the aspnet users table without using migrations.

{% youtube XYK9Q6G6s-Q %}
JWT Authentication with FastAPI
Tags: python, tutorial, programming, security
Published: 2021-11-07 07:40:40

FastAPI : a great framework for creating APIs, it takes very small effort to realize how fast it is in comparison with other frameworks like Flask, Pyramid, bottle, tornado and Django.

Developers are switching from Flask to FastAPI for a lot of reasons like speed, for instance.
 
This is techempower.com, an independent website that benchmarks web servers by running a variety of tests on them, FastAPI (with Uvicorn, the ASGI server implementation) is one of the fastest web servers.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhv1kmdw5gorhe5n6q0c.png)
This is a performance comparison executing fundamental tasks such as JSON serialization, database access, and server-side template composition. Each framework is operating in a realistic production configuration.

And why I prefer FastAPI over others Fws is because of its high performance, ease of syntax, you have something like Pydantic that allows modern python typing, also asynchronous requests with Async/Await syntax .. and no wonder that FastAPI is on par with Go language and Node JS (which is built on the V8 engine, the same engine of Google Chrome)

Take a look at my latest video on the channel where you can learn how to build user authentication with web based tokens using JWTs ( pronounce Jots) or JSON Web Tokens; and how this is better than the traditional cookie based sessions

{% youtube 0_seNFCtglk %}

Thank you for reading ( and maybe watching :) )
I will see you in next Video posts, till then stay safe and be well, friends
Icons with React-icons library
Tags: html, react, javascript, npm
Published: 2021-11-07 07:10:36

Hello Guys today i am going to show a great library for icons in React.

React Icons - 
React icons are easy to use and it has a large variety of icons including bootstrap , fevicon , ant-design, ionicons 4 and 5 , Font-awesome etc all in one place.

Installation - 

```
npm install react-icons --save
```


import -
import {icon_name} from 'react-icons/icon_type'

```javascript
import {CgDarkMode,CgSun} from 'react-icons/cg'
```

Here icon names are CgDarkMode and CgSun and icon type is cg which represents css.gg icons.


Usage - 

```javascript
<CgDarkMode color='white' size='5rem' />
```

We have used the icon as a tag here and it has two attributes color which sets the color of the icon and size which sets the size of the icon how large it will look on the screen.




Dark mode Toggle Example with React icons -


```javascript
import React,{useState} from 'react'
import {CgDarkMode,CgSun} from 'react-icons/cg'
import './App.css';

function App(){

const [mode, setMode] = useState(false);
const toggleMode = () => setMode(!mode);

return (
    <div>
        <div className='text-center my-5'>
            <button className='btn btn-dark text-light mx-5' onClick={toggleMode}>{mode ? 'Light mode' : 'Dark mode'}</button>
        </div>
       
        <div className='togglemode' style={{color:mode ? 'white' : 'black',backgroundColor:mode ? 'black':'white',padding:'1rem'}}>  
            <div style={{margin:'0 2rem'}}>
                    { mode ?
                    <CgDarkMode color='white' size='5rem' />
                    :
                    <CgSun color='yellow' size='5rem' />
                    }
            </div>
            <div>
                Veniam ex cillum consectetur veniam laboris consequat commodo esse aliquip id deserunt veniam culpa. 
                Laborum pariatur laboris nisi occaecat cupidatat amet qui ut tempor adipisicing elit ea sit. 
                Dolore cupidatat deserunt enim laborum magna duis veniam aliqua eiusmod consequat ullamco nulla duis mollit. 
                Minim Lorem officia nostrud officia ad cupidatat. Sunt do consequat mollit qui velit do fugiat officia esse
                 excepteur do pariatur incididunt ex. Fugiat voluptate id ea elit non minim fugiat sit velit. Dolore mollit 
                 sunt labore quis sunt ad eiusmod commodo mollit veniam sunt.
            </div>
        </div>
    </div>
)
}
export default App;
```


I have used these icons with conditonal rendering , when the mode is set to true the dark mode will get enable and when the mode is set to false the dark mode will be off.


NOTE - I have used bootstrap also in this example so, add bootstrap either using cdn or using npm.

THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION PLEASE MENTION IT IN THE COMMENT SECTION

React Icons official Site - https://react-icons.github.io/react-icons
Set Up Tailwind CSS di Project HTML Biasa
Published: 2021-11-07 06:53:06

Sebenarnya di [situs web Tailwind CSS](https://tailwindcss.com/docs/installation) sudah ada dokumentasi tentang beberapa cara untuk menginstal **tailwind css**. Namun saya menemukan dokumentasinya terlalu panjang dan agak membingungkan. Jadi saya memutuskan untuk membuat tutorial saya sendiri. Saya harap catatan saya dapat bermanfaat bagi kamu juga.
***

## 1. Bikin file css

Pertama bikin file *css* dulu terserah namanya apa saja. Dalam hal ini saya beri nama **global.css**. Lokasi dari file ini juga terserah. Dalam hal ini biasanya saya taruh di folder **/assets/css/**.

```css
/* global.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
```

**@apply directives** juga bisa ditaruh di file ini.

Di root folder project kita, jalankan perintah ini. Fungsinya untuk mengubah file **global.css** tadi menjadi file tailwind.css. Nantinya file **tailwind.css** yang dipanggil di file *html* kita, bukan ***global.css***.

```
npx tailwindcss -i ./html/assets/css/global.css -o ./html/assets/css/tailwind.css
```

Setiap kali **global.css** berubah, perintah ini harus dijalankan lagi.

Sebenarnya ada perintah *watch* dengan menambahkan **-w** di akhir perintah ini. Tapi saya tidak tahu kenapa, laptop saya membeku ketika saya menggunakan perintah **-w**. Meskipun ini adalah laptop **Core i5** dan dengan memori **16 GB**. Laptop teman saya juga mengalami hal yang sama. Itu sebabnya saya tidak pernah menggunakan perintah **-w** lagi.

Sebenarnya perintah *watch* ini berguna untuk *membangun* file **tailwind.css** secara otomatis setiap kali file **global.css** berubah. Tapi karena ada masalah sebelumnya, jadi saya tidak pernah menggunakannya.
***

## 3. Menggunakan tailwind.config.js

File **tailwind.config.js** juga dapat digunakan dalam *proyek html* biasa seperti ini. Buat saja file dengan mengetikkan perintah di bawah ini di root folder project kita.

```
npx tailwindcss init
```

File ini akan otomatis terdeteksi saat menjalankan perintah *convert* tadi (perintah **npx** sebelumnya). Biasanya saya menjalankan perintah *convert* di root project.
***

## 4. Panggil file tailwind.css di file html kita

Kamu bisa panggil file **tailwind.css** tadi dengan cara seperti ini:

```html
<link rel="stylesheet" href="./assets/css/tailwind.css" />
```
***
## Penutup

Catatan: **npx** akan ada satu paket dengan **npm** versi 5.2 ke atas.