teleren/devto huggingface dataset:
Laravel 7 Blade Components
Tags: laravel, php, vue
Published: 2021-04-11 01:57:33


Blade is  a templating engine in laravel that allows you to use plan php in your view.In laravel 7 developers were introduced with new class based blade syntax for creating components. If you are familiar with VueJs components you will find the idea is same but in PHP way.

By creating a blade component you are following __DRY__ ( don't repeat yourself) principle . it means you can reuse it in your project. 

So lets begin : 
first create a component by this command :

```php
 php artisan make:component Alert
```

This command will generate two files
 __app\View\Components\Alert.php__

this file handle variables and functions of the blade component.

__resources\views\components\alert.blade.php__

Now you can call this component in your project by `"<x-alert>"` , so you can see "x" is used to access component , 
now we want to pass a variable name "title" in the component

```php
<x-alert title="This is title"> </x-alert>
```
now open **"app\View\Components\Alert.php"** and add title variable in the class

```php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * The alert title.
     *
     * @var string
     */
    public $title;

    /**
     * Create the component instance.
     *
     * @param  string  $title
     * @return void
     */
    public function __construct($type)
    {
        $this->title= $title;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
}


```

Now $title property is accessible in our "alert" blade component. you can define more variables here and can access it in the blade component like you can pass message or type of the alert.

## more examples for the alert messages##
<x-alert type="error" :message="$message"/>
here we have passed two variables, "type" is similar like title we passed in above example and second is message but in the message variable we are passing a PHP variable value.

now update your alert.blade.php with
```php
<!-- /resources/views/components/alert.blade.php -->
<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>
```


##Real life example:##
```php
<!-- /resources/views/components/alert.blade.php -->
<div {{ $attributes->merge(['class' => 'p-6 rounded-lg shadow-lg']) }}>
   <div class="text-xl text-orange-500">{{ $title }}</div>
    <div class="mt-4">
        {{ $slot }}
    </div>
</div>
```
call it in your project 
```php
<x-panel title="Update Your Info!" class="max-w-2xl">
    <h1>I AM IN THE SLOT</h1>
</x-panel>
```
 

Thank you,🤗
Explain me NPM in simple terms
Tags: webdev, programming, codenewbie, javascript
Published: 2021-04-11 01:56:11


NPM stands for Node Package Manager and is composed of an online repository of open-source Node.js projects and a command-line utility used to interact with this repository. 

The power of package manager is that they are specially structured to easily provide code, libraries and entire frameworks. 

Just a Play Store for your projects.

--- 

Let's assume that you are creating an APP that will upset the world but you run into a problem and find a magic library that solves it efficiently. You just have to type: `npm install "magic library"`. 

### NPM is like a Play Store 

Let's assume you need a navigator on your phone. Do you need to create an application from scratch? Of course not! You will open the play store and download it(choosing the one you like the best)

NPM works in much the same way: when you need to implement a feature in your project you can download (install) the associated code package and use it. 

---

### What happens if I download a lot of Apps? 

*the phone begs you to stop*. LOL. 
NPM has you covered. 

A specific file called `package.json` keeps track of all the packages you install and manages their dependencies. This makes it easy to keep the packages updated and even easier to share the project (on got for example). 

Package are not physically and shared but only a "link" to them, in this way the project will weigh little and those who want to use it can install the packages listed in "package.json" by typing the command "npm install". 



THANKS FOR READING 🚀

---

### Removal.AI - [SPONSOR]

Remove background from multiple images in a single upload straight to your desktop using Bulk Photo Background Remover for Windows.             
- ✅  Drag & Drop Multiple Images
- ✅  Optimize Product Images
- ✅  Select Your Background
- ✅  Set Your Output Size
- ✅  Exceptional Results

<img src="https://removal.ai/wp-content/uploads/2021/02/gif-new-2.gif">

Visit -> <a href="http://bit.ly/removalai" target="_blank">Removal AI</a>
Are Default Params in JavaScript bad? (Snack pack #4)
Tags: webdev, codequality, refactorit, javascript
Published: 2021-04-11 01:52:58

# Not if it's still passed

Take this example:
![carbon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljcsshc6kr9q2fy1164o.png)
 
 
I wrote this function well over two years ago. It just pops up a notification if the user makes a CRUD call. (Create, Read, Update Delete). The function only takes two defined parameters a message and a notification. 

The notification parameter is a boolean. 
```
notification = true // notify user by a pop-up
notification = false // inline-notification by form button, or in a defined space
```

---

Looking back at this function, it could be much better. 
- Instead of a notification boolean, it can be notification style as a string. 
- Call with the second parameter everywhere

---

### Back to the question: **Default Params in JS bad?**
I think so if I'm not explicitly calling with all the params of a function. **It's okay to have a fallback, but don't depend on it!**

## Why?
- It's leaves technical debt. 
- How is another developer supposed to know what parameters are passed if they only see a partial picture? 
- My boolean parameter is bad in this case.

---

## How I refactored this function:
![carbon (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhir0fjvc94eo9na9av9.png)
 

My snack pack reads are intended for a quick read without any fluff or BS.

Feedback is always welcome.
SQL Review - GROUP BY Query
Tags: sql, mysql
Published: 2021-04-11 00:43:54

---
title: SQL Review - GROUP BY Query 
published: true
description: A review of the GROUP BY query in SQL
tags: #sql #mysql
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yabqkcbrjlr727qq2212.png"
---

The GROUP BY clause is mostly used with aggregate functions in sql. Aggregate functions in sql are different from single row functions in one main way: Single row functions return a single result row for EVERY row of a queried table or view. Aggregate functions performs a calculation on a set of values in a column and returns one single value. The 5 most common  aggregate functions in sql are: COUNT(), MAX(), MIN(), AVG(),SUM(). These do exactly what they sound like they do, for example:

```
select max(supply) from fruit_imports;
```

The other main difference between aggregate functions and single row functions is that while you use the "WHERE" clause to filter information in a single row function, you would use the "HAVING" clause to filter information in an aggregate function query (examples and screenshots coming up, don't worry)
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ivpzooyj93zfuolauwk.png">

In the graphic above, we see the anatomy of a GROUP BY query. 

We will be working with the example below to discuss the GROUP BY query.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8nmai0mneoqq9eqsuov.png">

Any non-aggregate (not a MIN,MAX,COUNT,AVERAGE or SUM) column must be mentioned in the GROUP BY clause. Please see the screenshot below:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0gygqwhg3yhjz6sbbvp.png">

In the screenshot above, there are two columns, the sum_supply column and the state column. The sum_supply column is the aggregate column and the state is the non-aggregate column. The state column is the one that is included in the GROUP BY clause because it is non-aggregated column.

###HAVING
Having is used to filter group data. If you are filtering data with  the HAVING clause, it must come after the GROUP BY clause. HAVING is used on aggregate functions in lieu of the WHERE clause.

```
SELECT first_name, COUNT(*)
FROM employees
GROUP BY first_name
HAVING COUNT(*)>2;
```
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zm3iyc9hmnqkk4gzn3oi.png">

The results in the screenshot show all the employee names that are mentioned more than 2 times. That means in the full list of employee first names, there are 3 Roslyns and 3 Billies.

Thanks for reading! Hope this informative. Please feel free to comment, clarify or add to this :)
How to get the size of the file synchronously using Node.js?
Tags: node
Published: 2021-04-11 00:00:00

---
  title: How to get the size of the file synchronously using Node.js?
  published: true
  tags: Nodejs
  date: Sun Apr 11 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-size-of-file-synchronously-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-ba1973c460e8f5a473262cb6e2a15544.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-size-of-file-synchronously-nodejs)
  
To get the size of a file synchronously, you can use the `statSync()` method from the `fs` (filesystem) module and then use the `size` property from the returned `stats` object in Node.js.

Let's say we have a file called `myFile.txt` in which you want to get the file size. Here you can use the `fs.statSync()` method and pass:

- the `path` to the file as an argument.
- the method returns a `stats` object where we can use the property called `size` to get the file size.

**The `size` property returns the size of the file in bytes.**

It can be done like this,

```js
// require fs module
const fs = require("fs");

// get file size using fs.statSync() method
const stats = fs.statSync("./myFile.txt");

// get size of the file
const size = stats.size;

console.log("File Size is: ", size, "bytes"); // File Size is: 12 bytes
```

See the above code live in [repl.it](https://replit.com/@melvin2016/get-size-of-the-file-synchronously-using-nodejs).

If you want to convert it to `mb`, you can divide the `size` by `1024 * 1024` like this,

```js
// require fs module
const fs = require("fs");

// get file size using fs.statSync() method
const stats = fs.statSync("./myFile.txt");

// get size of the file
const size = stats.size;

console.log("File Size is: ", size / (1024 * 1024), "mb");
```

That's it! 😀

### Feel free to share if you found this useful 😃.

---
Tools to improve as a Programmer
Tags: programming, beginners, javascript, productivity
Published: 2021-04-10 22:54:09

Hello Devs! I have put together some activities to improve daily as a programmer. Be you a **web developer**, **Front-End**, **Back-End**, **Full-Stack**; whatever you are into, as long as you are coding then this is for you.

It's all in one [**Discord server**](https://discord.gg/K5YNx85pta). This server has channels for all programmers.

The primary aim of this server is to make programmers develop and improve on a daily basis.

### Features
• **Coding Tasks**: Get access to tasks from our API as often as you want. You can also add tasks if you want.

Tasks are into different categories, _beginners_, _intermediates_, and _experts_.
I have made a bot to supply you any category you need.

• **Project challenging**: Challenge yourself or others in building projects that will improve your confidence and skills. Good thing is you can be challenged as well. I recently challenged myself to build a **NoSQL database Clone with JavaScript Classes** which I have done.

• **100DaysOfCode**: The 100DaysOfCode is one of the best ways to stick to coding daily and realize your daily achievements.

With this challenge you dedicate at least an hour of coding daily.
I built a bot to track your progress on this challenge.

• **100DaysOfLearning**: Are you learning a new technology? Taking a new course? And you can't seem to be focused. Well this challenge is for you.

This challenge will task you to commit at least an hour to learning on a daily basis.
There is also a bot that tracks your progress on this challenge.

• **Numerous Project Ideas**: You a beginner? And want to put your learning into practice with some real projects? Then this is for you.

Be it mini projects like _calculator_, _calendar_ or big projects like a _Music app_, we've got you covered.
I am building a bot for this function.
When I am done with the bot, you will be able to add project ideas as well.

• **Infinite Resources**: New technologies in town! New courses! Great Books! New Tools! In this server you get to hear it and you get to share it.

• **Projects**: You can share your projects for testing and feedback. For collaborations, suggestions etc.
 
There are numerous other features and more others to come. Joining this server is completely free, no boost, no pro feature.

If you want to join. [Click here](https://discord.gg/K5YNx85pta)
Hey Student Techies! How do you cope with school and work ?
Tags: 100daysofcode, webdev, womenintech, career
Published: 2021-04-10 22:53:00

When I decided to explore technical writing, I remember saying to a friend that I would love to be consistent with it and try to publish an article once a week, well that consistency ended in week two lool. So I usually drop an article every Sunday and for the third week, I had written out my topic since Saturday(a day before), I knew what I wanted to write about, I did my research and was still on it when I got overwhelmed with school work. 

At that time, I was running a 6 weeks compulsory training program, it was 3 units course so you know I had to give it my all. Fast forward to Sunday(March 14th), I totally forgot about my article and didn’t remember until few days later lmao, funny story ? I picked it up on Wednesday and forgot to finish it again 😂. To be honest, at some point I got scared of writing an article that wouldn’t bang like the first two(<a href="https://dev.to/theflorz/how-to-make-wine-glasses-with-pure-html-css-328g">My wine glass article</a> and <a href="https://dev.to/theflorz/nevertheless-florence-coded-because-nothing-can-stop-her-4m81"> My SheCoded IWD article</a>) but that isn’t even the case here anymore, I still very much want to keep writing technical articles.


<p>Right now, I really wonder how other students like me cope with school, work, side projects, and personal lives. It can seem like a lot to handle and overwhelming sometimes(actually all the time to be fair) because you worry about a lot of things haha. I mean, I try to deliver the best on projects while also keeping school in mind so that’s a lot to worry about.</p>


I decided to pick it up this night(it’s 11:52 in my time zone) but with a different topic, I just want to know how students in tech juggle school and work. A new week is starting tomorrow, I have series of tests coming up and about 3 pending projects to complete before the end of the month. What are your coping mechanisms? How do you set up a structure ? How do you stick to the structure ? How do you ensure neither suffers? Is it supposed to be this hard ?! Send help please ❤️


<h2>Conclusion</h2>
Ps: I don’t joke with taking breaks, I know the body can only take a lot so I rest when I’m tired from doing both. The issue now is how do I stop feeling guilty from take a break to watch Netflix ? 😂



Ah yes, that article I haven’t finished in weeks is still in the drafts. I’ll definitely finish it up and share with you guys soon! 


>illustration from <a href="https://undraw.co>undraw.co</a>
Fighting boilerplate with code generation
Tags: go, languages, beginners
Published: 2021-04-10 22:45:46

Greetings fellow gophers.

Go is optimized for readability, but it can be a bit repetitive for the writing case.  Adding features can require a lot of grunt work and boiler plate code.

Is boiler plate a problem?

**Marshaling Responses**

Marshaling responses from web services. If we are optimizing for readability, we should have strongly typed structs to marshal in to. This leads to  grunt work in defining the type struct that maps to the web service.  The code generation solution is using a tool like [https://mholt.github.io/json-to-go/](https://mholt.github.io/json-to-go/) .

**Interacting with a SQL persistence layer**

Getting your data in and out of a SQL database requires boilerplate.

* Generating SQL DDL. Creating tables, indexes, relationships.
* Row to struct scanning.
* CRUD methods.
* Complex Queries with type safe interactions.

There are a tone of tools in this place depending on the type of API you want to use with your crud methods, a couple worth evaluating are:

* [https://github.com/xo/xo](https://github.com/xo/xo)
* [https://sqlc.dev/](https://sqlc.dev/)
* [https://github.com/drone/sqlgen](https://github.com/drone/sqlgen)

**Building out an HTTP API**

Taking your current data structures and operations and exposing them over an HTTP API can be rife with boilerplate.

* Validating input
* Generating consistent route structure
* Marshaling and Unmarshaling data structures
* Generating consistent query parameter interface (ordering, filtering, pagination)

Projects that help  solve this:

* [https://goswagger.io/](https://goswagger.io/) (makes swagger compatible API's from definitions or code)
* [https://goa.design/](https://goa.design/) (makes a 'hexagonal' architecture micro-service)

**Building clients for your service**

Once you have exposed your web service you almost certainly want to consume it. Possibly you want to consume it over a number of different languages and environments.  Thankfully, we can stand on the shoulders of giants here and use the open API IDL ([Interface description langauge](https://en.wikipedia.org/wiki/Interface_description_language)).  The IDL will let you generate client libraries for numerous programming languages, and tools.

Check out everything you can codegen from the swagger IDL here [https://swagger.io/tools/swagger-codegen/](https://swagger.io/tools/swagger-codegen/)

&#x200B;

**T L D R**

Go code is a pleasure to read, but can be a bit of a grind to write all that boiler plate. You can remove some of the grunt work through code generation.  The design of Go has made it an easy tool for code generation. A mature ecosystem of tools makes it easy to get started.  


Are you using code generation in your projects / day jobs and hacks?
Make your own Calculator using HTML, CSS, JAVASCRIPT 
Tags: html, css, javascript, calculator
Published: 2021-04-10 22:43:47

Here we will will be making simple calculator using HTML, CSS and JAVASCRIPT and we will make it live for free in github page.



live- https://bittu1040.github.io/SimpleCalculator/
repo- https://github.com/bittu1040/SimpleCalculator
Duvidas sobre o Inicio de back-end.BR
Published: 2021-04-10 22:36:03

    "Olá mundo", estou começando a estudar programação agora, tenho muitas duvidas e desejos que quero tirar, tenho somente 17 anos mas estou com um desejo de me tornar um Full-Stack em desenvolvimento web, começando por Back-end, tenho muitas duvidas sobre isso, comecei a fazer um "nano curso" de Python estou gostando bastante mas me sinto muito limitado a isso, eu já deveria saber alguma outra coisa? Qual seria o próximo passo ? Meu ingles é extremamente ruim, devo fazer algo AGORA para mudar ou posso priorizar no que quero fazer ?Obrigado pela atenção!!
4 Books that are not about computers that made me a good Software Developer
Tags: career, codenewbie, webdev, beginners
Published: 2021-04-10 22:29:05


I enjoy reading and learning about Software Development but if I spend half my day working as a Software Dev and the other half reading about Software Development I end up burning out and not doing any reading for a while.

What I do is read about other things. Sometimes it happens that whatever I'm reading about helps me with aspects of my career. These are the books that helped me the most so far.

## 1. A mind for numbers by Barbara Oakley

If you ever think that you're not "good with numbers" or letters or whatever, read this. It will teach you how you learn.

## 2. So good they can't ignore you by Cal Newport

Taught me the value of becoming an expert in something and all the ways it pays off. Motivated me to focus on Frontend Development.

## 3. The War of Art by Steven Pressfield

I should read this one once a year. It taught me that the hard part is sitting down to do a job, not doing it itself. If you have procrastination problems I recommend this one.

## 4. Show your work by Austin Kleon

I learned to keep track of the work I was doing and showing it to the world no matter how imperfect it was. Thanks to doing that I got my job as a SD.

If you know any other books not related directly to software development that helped you please share them :)

If you liked the article you can [follow me on twitter](https://twitter.com/intent/user?screen_name=jordienr)
What Are Microservices And Why Are They Taking Over?
Tags: microservices, monoliths, docker, webdev
Published: 2021-04-10 22:02:53

#Monoliths
Monolith Server Architecture is a thing of the past, but to understand that we have to understand what it is. Traditionally we hosted resources in one environment which made it versatile, but also heavy and very difficult to update changes. Everything was happening in one pipeline, so if one part crashed it all did.

#Microservices
Like always, the technology is changed and microservices are just one example. Microservices are used to split up tasks into specific operations. In the picture below, you can see all the small microservices one interface may be running on multiple machines. The whole functionality of a backend is now in thousands of containers all over the world. 

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

#Why Switch?
As hinted at this new system is a lot more reliable. You can update code easily and often with a lot fewer issues because you are only changing one container, not all of them. They are flexible in adding and deleting functionality. They may not be perfect for every project, but I would definitely consider them for your next one.

#Docker Example
If you are interested in spinning up some microservices with Docker, follow my tutorial!

{% youtube UOC5hksJoSM %}
micro-MVC :: Alternative Web Development Framework
Tags: php, javascript, mvc, ajax
Published: 2021-04-10 21:29:41

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

Having a solid 20+ years of experience on programming languages, frameworks, utilities, etc. and having seen various approaches to problems, ideas and techniques, I decided to develop an alternative framework for web development that is:
- Enterprise-ready
- Dead simple (KISS)
- Extensible with no limits
- Secure
- Having very small footprint
- Fast and reliable
- Creative and not super strict
- Able to integrate any other framework/platform
- ...and much more!

For all the details check micro-MVC at https://github.com/g0d/micro-MVC and read all the critical details in the documentation at https://github.com/g0d/micro-MVC/tree/master/Documentation.

Enjoy!
NestJS Testing Tutorial
Tags: showdev, javascript, nestjs, node
Published: 2021-04-10 21:27:17

---
title: NestJS Testing Tutorial
published: true
description: In this video we go over the fundamentals of writing unit, integration, and e2e tests for a NestJS API application!
tags: showdev, javascript, nestjs, node
---

[In this video](https://youtu.be/dXOfOgFFKuY) we go over the fundamentals of writing unit, integration, and e2e tests for a NestJS API application!

{% youtube dXOfOgFFKuY %}