teleren/devto huggingface dataset:
How can I make a good structure in laravel project ?
Tags: laravel, architecture, programming, php
Published: 2021-03-28 15:28:10

Everyone, when beginning a new project, make confused if how can I make the project with the best approach what make me comfortable with the project and easy to get the files that I search 
we have many approaches and design patterns that make the project clean
but in this  article, I will take about the approach that calls #HMVC ( the Hierarchical Model View Controller(HMVC) pattern ). 
HMVC is simply MVC but in the component-ordered base. Assume you have a website that has a blog and a forum part. HMVC divides these two parts into MVC components so you can have each of them separately developed but used as one!
For example, if we have a product, category, and order we build every model as a separate project it is called a module.
As Example from a real e-commerce project 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvnhrj1dhcehjj5zfhkc.png)

#####Difference Between when using HMVC and when not using in routes 
when using hmvc we can get the routes easily and search with route what we want 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gof7fs1cxc70m2sbcg50.PNG)

But when we use all routes in the application in the same file get this 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0b0hd74j9hb48r0msi5.PNG)

## Pros 
Key advantages to implementing the HMVC pattern in your development cycle:

Modularization: Reduction of dependencies between the disparate parts of the application.
Organization: Having a folder for each of the relevant triads makes for a lighter workload.
Reusability: By the nature of the design it is easy to reuse nearly every piece of code.
Extendibility: This makes the application more extensible without sacrificing ease of maintenance.

## Cons 
Create More Folders But the solution of it in my opinion that we will remove unused folders. 


## Best Packages That Generate Modules and implement That Approach

we have more packages with laravel that generate modules but I will share in this article the best packages that I used in more projects and get it easy and a piece of cake 

[https://nwidart.com/laravel-modules/v6/introduction]

nwidart/laravel-modules is a Laravel package that was created to manage your large Laravel app using modules. A module is like a Laravel package, it has some views, controllers, or models.


###Quick Example
Generate your first module using  `php artisan module:make Blog`

And Here we get all commands that help us to build Complete module 
[https://nwidart.com/laravel-modules/v6/advanced-tools/artisan-commands]   
## Conclusion
Basically, the HMVC pattern is just an extension of MVC. An HMVC application includes one or more MVC sub-applications. So anything MVC can do, HMVC can do too. Now, it depends on whether you need the flexibility and scalability that HMVC offers.
One PR a month: February and March
Tags: vala, elementaryos, opensource
Published: 2021-03-28 15:23:12

Since I did not publish a report in February, I am doing a joint February + March post using a couple PRs I recently sent. 

One of the things I like about [elementary](https://elementary.io) is the care taken with UX. For instance, for less experienced users pasting random commands in the terminal is a sensitive operation, specially if these commands involve administrative privileges. For this reason, elementary's [terminal](https://github.com/elementary/terminal) app shows a warning when the user pastes commands involving `sudo` or with newlines. 


![Paste Protection dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dx80pf3o5g4exss995sl.png)

Two issues were raised with this dialog:

1. That _details_ field did not exist ([issue #562](https://github.com/elementary/terminal/issues/562)), so it was hard for the used to check the if the command being pasted was really dangerous
2. Pressing _Escape_ would paste the text anyway ([issue #293](https://github.com/elementary/terminal/issues/293)).

Although both seem like very simple issues, everything is done taking into account these small details. This contributes to the polished feeling _elementary_ has.

Fixing the first was really simple: the paste protection dialog inherits from [`Granite.MessageDialog`](https://valadoc.org/granite/Granite.MessageDialog.html). This class has a method [`show_error_details`](https://valadoc.org/granite/Granite.MessageDialog.show_error_details.html) that creates the small collapsible text box. I just needed to call it with the appopriate text and call it a day: [PR #563](https://github.com/elementary/terminal/pull/563). It was almost instantly approved. 



The second issue was also simple: the dialog returns `1` if the "Paste Anyway" button is pressed and `0` if the "Don't paste" button is pressed. The code that checked if pasting should be cancelled was akin to `if (response == 0)`. I'm not sure what pressing `Escape` returns, but I'm pretty sure that text should only be pasted if `response == 1`. So I changed the condition and now pasting works. This was done in [PR #569](https://github.com/elementary/terminal/pull/569).

An important point of both PRs is that they are **very simple**. I used these to emphasize the contributing does not require superior ultra coding skills, just some pacience and a little effort. There are many issues that are easy and up for grabs not only in _elementary_ but also in many other projects. 

If you decide to take this challenge as well leave a comment. Or if you need help finding easy issues in elementary ;) Or anything , really.
Nevertheless, Aneeqa Coded in 2021!
Tags: wecoded, choosetochallenge, womenintech
Published: 2021-03-28 15:02:34

I wanted to write about this topic for so long but didn't find time to do it but today I want to write about my experience and achievements from last year. 

So we all know that 2020 was a pandemic year and we spent our all-time at home because of quarantine. 
In the start, I loved working from home because it saved me from traveling. Do not get me wrong I love traveling but it is very tiring as well. 

After a month I started feeling overburden because I was not able to schedule my things properly. I was working straight 12 hours in a day and sometimes at midnight too. It affected my health, my hobbies, and my routine. But I challenged myself to make it all better. And that's also Women's Day 2021 theme #ChooseToChallenge.

##How I overcome it
- First I strictly focused on starting my day early so I can end early and give my 100% productivity in core office hours by not engaging in social media from my phone and laptop in the morning. It really helped.
- I also started evening walks around my house so I don't stick to my workspace all the time. It was hard at the start but I got a habit of it after few weeks.
- I started checking out tech blogs here in my spare time. It gave me the motivation to work on my own projects.
- I used Trello board for my weekdays and weekend activities. It helped me organize my hobbies and tasks and also it's a lot of satisfaction in seeing done tasks.

##Achievments
- My probation got cleared and they awarded me with the "Hard-working" employee title. 
- I learned and practiced a lot of different libraries for my react-native projects.
- I learned next.js with styled-components and now on a way to learning Typescript.
- My blogs got 38k+ views here with 500+ followers. I am very thankful for this community. :heart:
- I wrote one blog per month since March 2020, I consider it as an achievement (altho I wasn't able to write it last month :disappointed:)
- I got a trusted user role in dev.to platform. :tada:
- I created and decorated my own dreamy and cozy workspace. :heart_eyes: 
- Also got gifts from my current office by fulfilling my role in my team and organizing fun events for all employees.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocjjsff4iz40r1yuwjcb.jpeg)
<figcaption>here is my workspace :sparkles:</figcaption>

##Conclusion
I want to thank you all for supporting me and motivating me to follow my dreams. My advice for women in tech is to keep creating and keep following their dreams. Let your dreams be your wings.
Day 6 of #100DaysOfCode
Published: 2021-03-28 15:01:21

On Day 6, I made a dynamic landing page which changes its background according to the time in India, also displays time and the person can add or delete his/her name.
What I learnt on this day?
---> Date class
---> Difference and applications between arrow function and normal function, I preferred normal function as I've used Java as a first language.

Resources: 
--- YouTube: https://youtu.be/fSTQzlprGLI
Javascript: Unit Testing using Jest
Tags: javascript, testing
Published: 2021-03-28 14:56:05

### Install Jest

```
$ yarn add --dev jest
```

or 

```
$ npm install --save-dev jest
```

### Setup

In this example, we are going to create a sample function that prints "Hello world" and test it using jest in javascipt.

For us to begin, we need to create a folder in our directory, and create a three different files namely
`hello_world.js`, `hello_world.test.js` and `jest.config.js`

```
$ mkdir hello_world 
```
```
$ touch hello_world/hello_world.js
```
```
$ touch hello_world/hello_world.test.js
```
```
$ touch hello_world/jest.config.js
```

You should have something like this, then you are good to go.

![Figure 1 Files to be included](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eab7cbjhx9i90izamxom.png)

### Grind time

Now that we have setup our test environment we are going to start our unit testing using jest!

On `hello_world.js`, we are going to put...

```javascript
function hello_world() {
  return "Hello world!"
}

module.exports = hello_world
```

in `hello_world.test.js`
```javascript
const hello_world = require('./hello_world')
test("function hello_world", () => {

  expect(hello_world()).toBe("Hello world!")
})
```

in your terminal

```
$ jest
```

![Figure 2 Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zea3wa3czgpw6doj5cx.png)


### Conclusion

Just another day of learning, I am proud that I am able to manage to come up with a unit test using jest for javascript.
I am amazed for what it can do and a little bit what it can't.

Unit testing is essentially if you want to test the every functions or methods that you have in your code. This will help you simulate different scenarios, and to minimize bugs eventually.
Mkdocs: Setting up mkdocs.yml
Tags: github, python, devops
Published: 2021-03-28 14:41:31

Setting up mkdocs.yml file is needed in the way to deploy a Mkdocs project, in this file we can set a lot of different values related to the theme, add custom CSS, navigation index, social network and more other things.

Let start with basic parameters:

```yaml
site_name: '<Site Name>'
site_description: '<Site Description>'
site_author: '<user>'
site_url: 'https://<user>.github.io/<git_repo>'
copyright: "copyright &copy; 202X <user>"

repo_url: 'https://github.com/<user>/<git_repo>'
edit_uri: ""
```

Next we could add some social networks that will be show in the Mkdocs project:

```yaml
extra:
  social:
    - icon: fontawesome/brands/github
      link: https://github.com/cosckoya
    - icon: fontawesome/brands/dev
      link: https://dev.to/cosckoya
```      
These last two parameter blocks enable some basic functionalities and behaviors. But also we could manage some advanced things about the theme.

Themes can be [built-in](https://github.com/mkdocs/mkdocs/wiki/MkDocs-Themes) or [custom](https://www.mkdocs.org/user-guide/custom-themes/). Im using a built-in one, [Material](https://squidfunk.github.io/mkdocs-material/).

To add this theme, I followed the Material docs and set up the following parameters:

```yaml
theme:
  name: material
  logo: img/logo.png
  favicon: img/favicon.png
  language: en
  palette:
    scheme: slate
    primary: deep purple
    accent: deep purple
  icon:
    repo: fontawesome/brands/github
```

Last step is to set Navigation, where I added a plugin ([mkdocs-literate-nav](https://pypi.org/project/mkdocs-literate-nav)). With this plugin I could remove "nav" settings from mkdocs.yml file, add some "SUMMARY.md" files on each directory adding this block:

```yaml
plugins:
  - literate-nav:
      nav_file: SUMMARY.md
```

A SUMMARY.md file must exist in each folder, will be automatically detected and should have the following format:
```yaml
* [Klaatu Barada Nitko!](index.md)
* [Code](code/)
* [Linux](linux/)
* [Databases](databases/)
* [Cloud](cloud/)
* [Containers](container/)
* [Security](security/)
* [DevOps](devops/)
* [Monitoring](monitoring/)
* [Bookmarks](bookmarks.md)
* [About](about.md)
```
That's it. Enjoy!
Deploying docker-compose the easy way, without registry or scp
Tags: docker, devops
Published: 2021-03-28 14:29:44

Ever wondered how you can deploy your locally running docker-compose project to a remote server?
There are several options:
1. Pushing the images to a container registry like dockerhub, github container registry and pulling them on your server
2. Saving the images to a .tar archive and copying it over to your server and loading them there [explained here](https://medium.com/@sanketmeghani/docker-transferring-docker-images-without-registry-2ed50726495f)

There is a easier way using [docker remote host](https://www.docker.com/blog/how-to-deploy-on-remote-docker-hosts-with-docker-compose/):

The only thing you have to make sure is to install docker, docker-compose onto your server and have a valid ssh key


### docker-compose.yml

```
version: '3.9'
services:
  backend:
    build: spring-backend
    container_name: spring-backend
    image: spring-backend:0.0.1
    expose:
      - "8088"
  frontend:
    build: angular-frontend
    image: angular-frontend:0.0.1
    container_name: angular-frontend
    ports:
      - 80:80
    depends_on:
      - backend
    command: [nginx-debug, '-g', 'daemon off;']

```

### deploy.sh
```
#!/bin/bash

docker-compose build

for img in $(docker-compose config | awk '{if ($1 == "image:") print $2;}'); do
  images="$images $img"
done

echo $images


docker image save $images | docker -H "ssh://user@serverIp" image load
docker-compose -H "ssh://user@serverIp" up --force-recreate -d
docker-compose -H "ssh://user@serverIp" logs -f
read -p "Press any key to continue... " -n1 -s

```


With a simple deploy.sh you can build your current state, load them onto your server, run them and attach to the output.
How to download Python
Published: 2021-03-28 14:26:38

Do you want to learn python? Python is a very beginner-friendly programming language. How do you even install python? to install python, you have to go to https://www.python.org/downloads/ Once you have done that you should see this:

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyx0ppd5gy4yyxmohjpv.PNG

If you see that then you are at the correct website.

What version should I use?

If I were you, I would pick the latest version which is Python 3.9.2 (now) But if you prefer a better syntax you should use Python 2. 


Conclusion
All in all, that is how you download and install python.
Pull to refresh in Android
Tags: android, kotlin
Published: 2021-03-28 14:24:49

Pull to refresh is a gesture that the user can make to update the screen, such as reloading the feed for Instagram or Twitter.

Let's see in this article how to built Pull to Refresh for Android.

![Pull to refresh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3l5z29yr8m20puhzsu0.gif)

First of all, add the dependency into the `build.gradle` file:
```groovy
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
```

Add your `RecyclerView` or other content inside the `SwipeRefreshLayout`.

The SwipeRefreshLayout is a ViewGroup that can hold only one scrollable view as a child. This can be either a ScrollView or a RecyclerView.
```xml
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
```

Next, let's implement the refresh listener on our `Activity`/`Fragment` that will be notified when the swipe gesture is completed.
```kotlin
swipeRefreshLayout.setOnRefreshListener { viewModel.loadContent() }
```

It's possible to configure the colors been shown during the load:
```kotlin
swipeRefreshLayout.setColorSchemeResources(android.R.color.holo_blue_bright,
            android.R.color.holo_green_light,
            android.R.color.holo_orange_light,
            android.R.color.holo_red_light)
```

Note that upon successful reload, we must also signal that the refresh has completed by calling:
```kotlin
swipeRefreshLayout.isRefreshing = false
```

This is everything you need to do to make your app use the Pull to Refresh and refresh the content for your users!
Reactnative developer
Tags: react, reactnative, mobile
Published: 2021-03-28 14:19:12

Hi. Is there any reactnative developer here ? 😎 I want to add you to my contacts and we will exchange about this technologies. And I have a question: what is the power of reactnative against Flutter rising a part from its community ? I used Reactnative for my projects and start Kotlin to understand deeply this framework.  I loved 🤣
Caching and local storage in PWA
Tags: pwa, caching, vue, ecommerce
Published: 2021-03-28 14:09:12

---
title: Caching and local storage in PWA
published: true
description: Short overview e-commerce PWA Caching and local storage
tags: PWA, caching, Vue, ecommerce
cover_image: https://blog.vuestorefront.io/wp-content/uploads/2020/01/00qEXCvdDwtQk9G5b.png
---
*Image from https://blog.vuestorefront.io/caching-on-production.*

Base technologies like Vue.js, Vuex, and SSR, Service Workers are used in or team to build modern e-commerce frontends. The Vue Storefront framework PWA will be used as the application skeleton for starting a new project.

Whenever it's possible, the service worker cache is in use. For easier service worker cache management, Google provided Workbox is in use.
Service worker cache is used mainly for catalog (category, product, and attribute list and detail) and CMS (pages, blocks, banners).

> The Service Workers cache works like we're consistently executing the backend requests to invalidate the local cache. It's the NetworkFirst mode. That means there is virtually no risk of stale / non-invalidated data served from the local cache 

*https://blog.vuestorefront.io/caching-on-production*

LocalStorage or IndexedDB (depending on browser support, abstracted with LocalForage library) are mainly used for storing user-based data like cart, login token, made orders, personal data, other choices (like favorite products).
The user-based cache is updated on demand (on login, viewing order list) and has no end-of-life by default. End-of-life is added case-by-case depending on the business needs.
Step by step estimation guide
Tags: estimation, estimating, pert, noestimates
Published: 2021-03-28 13:49:25

---
title: Step by step estimation guide
published: true
description: A simple guide on how to get along with estimations and aftermath
tags: Estimation,estimating, PERT, NoEstimates
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jfzjfn5lrqz57n90xl3.png
---
##Why this article
At some point, as a developer, each one of us has had to estimate something. Sometimes estimation is easy, sometimes hard. Easy when you know and hard when there is a lot of unknowns. And it does not matter if you are already using PERT or voting for #NoEstimates.

With this article, I want to give a simple step-by-step guide to those who are just starting or struggling with it.

But note! This document bases on subjective personal experiences. Figures are exemplary and depend highly on a "bunch of work" to be estimated.

##Preliminary estimation

A project manager, team lead, architect, etc., walk to you (or slacks, emails, zooms) and ask for an estimation.

1) Take a deep breath, move your mind off from current work and make a preliminary estimation 
 * an hour,
 * a day,
 * a week,
 * a month,
 * much more.

2) Make yourself and the person who requests the estimation aware of the preliminary estimation and therefore the inaccuracy of the assessment: 

b) magnitude **1 hour**:
* 30 seconds spent - **preliminary estimation**, 
* 5 minutes spent -  **estimation**;

c) magnitude **100 hours**: 
* 5 minutes spent - **black magic**,
* 1 hour spent - **preliminary estimation**,
* 10 hours spent - **estimation**.

3)  Consult with the estimation questioner about the need to spend more time for preliminary estimation or/and estimation. 

4) Make a list of key points based on that black magic / preliminary estimation - a **technical specification** skeleton.

In my opinion, estimation makes us faster developers by forcing us to compose functionality beforehand in our minds - **technical specification**  - thus spearing time in the future, otherwise spending of false keystrokes.

##Estimation

The estimation questioner has confirmed preliminary extra time to be spent on getting a more detailed estimation.

Finish the **technical specification**:
* magnitude **1 hour** - 2-3 sentences;
* magnitude **100 hours** - at least two documents: 
 * to client - **adjusted functional requirements**,
 * to developer - **technical specification**.

**Adjusted functional requirements** are a mirrored-back and specified explanation to a customer about this "bunch of work" outcome. 
Estimation must also include testing, documentation, and communication! 
 
##Work
Follow the **technical specification** given in the estimation stage.
If you can't follow it or it does not seem complete, notify the estimation questioner ASAP, and then you can decide together either **to move back to the estimation stage** or not. Similarly, when bugs are reported back by any party, weigh if it is a missing initially planned feature or new feature request.
Forgot Password Node Js
Tags: 100daysofcode, javascript, node, express
Published: 2021-03-28 13:48:17

the day 98 of challenge #100DaysOfCode

Forgot Password With JWT, Node.js & Express

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day98

Follow Me On Github : 
https://github.com/saidMounaim